/* Target SDS (TGT) — design tokens
 *
 * Source: req/sds/figma_tgt_pages/src/styles/tgt-theme.css.
 * Charcoal chrome on light-gray surfaces, teal accent line, mid-blue
 * primary button, orange highlight, plus a 5-step hazard scale used in
 * the SDS detail bands.
 *
 * Scoped under [data-theme="tgt"]. See sys.css for the App-chrome
 * contract every theme exposes.
 */

[data-theme="tgt"] {
  /* TGT brand palette (named tokens — referenced inside this file
     only; consumers should use the --app-*/--primary aliases below
     so they remain rebrand-safe). */
  --tgt-charcoal:         #3a3a3a;
  --tgt-dark-gray:        #2d2d2d;
  --tgt-text-primary:     #333333;
  --tgt-text-secondary:   #666666;
  --tgt-muted-gray:       #6c757d;
  --tgt-light-gray:       #f8f9fa;
  /* Zebra-band tint for data tables. Deliberately a step darker than
     --tgt-light-gray (which doubles as the page background, so banding to it
     is invisible) yet lighter than --tgt-border-gray, so odd rows read at a
     glance without competing with cell borders (BUG-XYXK7-US). */
  --tgt-row-band:         #eef1f4;
  --tgt-border-gray:      #dee2e6;
  --tgt-white:            #ffffff;

  /* White that sits ON a brand/status colour (charcoal table header, teal
     button, status chip) — a foreground, not a surface. Stays white in both
     light and dark mode. Distinct from --tgt-white, which is a surface token
     and flips to a dark panel under .dark (see the dark block below). */
  --tgt-on-color:         #ffffff;

  --tgt-green:            #5cb85c;
  --tgt-green-light:      #d4edda;
  --tgt-teal:             #17a2b8;
  --tgt-teal-light:       #d1ecf1;
  --tgt-blue:             #2196f3;
  --tgt-blue-light:       #cce5ff;
  --tgt-primary-blue:     #3b6cb7;
  --tgt-orange:           #f9b233;
  --tgt-orange-hover:     #f5a623;
  --tgt-button-blue:      #4472C4;
  --tgt-button-blue-hover:#365A9F;
  --tgt-label-blue:       #6BA4E7;
  --tgt-label-blue-bg:    #E3F2FD;

  --tgt-status-matched:    #5CB85C;
  --tgt-status-matched-bg: #D4EDDA;
  --tgt-status-unmatched:  #DC3545;
  --tgt-status-unmatched-bg:#F8D7DA;
  --tgt-status-parsing:    #FFC107;
  --tgt-status-parsing-bg: #FFF3CD;
  --tgt-status-parsed:     #28A745;
  --tgt-status-parsed-bg:  #D4EDDA;

  /* Warning (amber / chart-4 #D97706) — for a "still needs attention" prompt
     in a normal workflow step that is NOT a system error. Distinct from the
     red --tgt-status-unmatched* error palette, which reads as a fault
     (BUG-IAERN-NF). --tgt-warn is the solid (button / border), --tgt-warn-bg
     the soft fill, --tgt-warn-fg the readable text on that fill. */
  --tgt-warn:              #D97706;
  --tgt-warn-bg:           #FEF3E7;
  --tgt-warn-fg:           #9A4C06;

  /* Olive accent (style_guide.md §2.1 — HSL 71 55% 40%, converted to hex).
     Used for "needs attention" / "to-do pile" callouts that are NOT error
     states — e.g. an Unmatched section header, an "Add new" affordance, an
     ID column that reads "new" before a save commits. True error banners
     (validation failures, network errors) stay on --tgt-status-unmatched. */
  --tgt-accent-olive:      #8A9E2E;
  --tgt-accent-olive-bg:   #E8EDD0;

  /* Pale teal wash behind the Reporting-Period block (teal left border).
     Was an undefined token with a hardcoded #eef7f9 fallback, so it never
     followed dark mode — now a real token, flipped in the .dark block. */
  --tgt-info-bg:           #eef7f9;

  /* App-chrome contract */
  --app-header-bg:        var(--tgt-button-blue);
  --app-header-fg:        var(--tgt-white);
  --app-header-hover-bg:  var(--tgt-button-blue-hover);
  --app-primary:          var(--tgt-button-blue);
  --app-primary-hover:    var(--tgt-button-blue-hover);
  --app-secondary:        var(--tgt-teal);
  --app-secondary-hover:  #138496;

  /* Shadcn-style palette */
  --primary:              var(--tgt-button-blue);
  --primary-foreground:   var(--tgt-white);
  --secondary:            var(--tgt-teal);
  --secondary-foreground: var(--tgt-white);
  /* Style-guide §2.1: --accent is olive green (positive / highlight),
     NOT orange. Orange remains available as --tgt-orange for surfaces
     that need a warm highlight (TGT primary CTA hover). */
  --accent:               var(--tgt-accent-olive);
  --accent-foreground:    var(--tgt-white);
  --destructive:          var(--tgt-status-unmatched);
  --destructive-foreground:var(--tgt-white);
  --muted:                var(--tgt-light-gray);
  --muted-foreground:     var(--tgt-muted-gray);
  --background:           var(--tgt-light-gray);
  --foreground:           var(--tgt-text-primary);
  --border:               var(--tgt-border-gray);
  --input:                var(--tgt-border-gray);
  --ring:                 var(--tgt-button-blue);
  --card:                 var(--tgt-white);
  --card-foreground:      var(--tgt-text-primary);
  --card-border:          var(--tgt-border-gray);
  --sidebar:              var(--tgt-white);
  --sidebar-primary:      var(--tgt-charcoal);
  --sidebar-primary-fg:   var(--tgt-white);
  --sidebar-foreground:   var(--tgt-text-primary);
  --sidebar-border:       var(--tgt-border-gray);
  --popover:              var(--tgt-white);
  --popover-border:       var(--tgt-border-gray);
  --elevate-1:            rgba(0,0,0,0.03);
  --elevate-2:            rgba(0,0,0,0.08);

  /* TGT hazard scale — overrides shared.css band-* tokens for the SDS
     detail bands (style_guide.md §2.4 ChemForward bands remain in
     shared.css for other surfaces; TGT-branded SDS uses these). */
  --tgt-hazard-very-low:  #5DBBBD;
  --tgt-hazard-low:       #7AC142;
  --tgt-hazard-moderate:  #FBB040;
  --tgt-hazard-high:      #E65527;
  --tgt-hazard-very-high: #5B4A9E;
  --tgt-hazard-marker:    #003C7D;

  --band-a:  var(--tgt-hazard-low);
  --band-b:  var(--tgt-hazard-very-low);
  --band-c:  var(--tgt-hazard-moderate);
  --band-d:  var(--tgt-hazard-high);
  --band-f:  var(--tgt-hazard-very-high);
  --band-sc: var(--tgt-hazard-marker);

  --risk-vhigh: var(--tgt-hazard-very-high);
  --risk-high:  var(--tgt-hazard-high);
  --risk-mod:   var(--tgt-hazard-moderate);
  --risk-low:   var(--tgt-hazard-low);
  --risk-vlow:  var(--tgt-hazard-very-low);
}

/* TGT component classes — ported from figma_tgt_pages/src/styles/tgt-theme.css */

[data-theme="tgt"] .tgt-page {
  background-color: var(--tgt-light-gray);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--tgt-text-primary);
}

[data-theme="tgt"] .tgt-heading-lg {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--tgt-text-primary);
  line-height: 1.3;
}

[data-theme="tgt"] .tgt-body-text-secondary {
  font-size: 0.875rem;
  color: var(--tgt-text-secondary);
  line-height: 1.5;
}

[data-theme="tgt"] .tgt-card {
  background-color: var(--tgt-white);
  border: 1px solid var(--tgt-border-gray);
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

[data-theme="tgt"] .tgt-card-body {
  padding: 1.5rem;
}

[data-theme="tgt"] .tgt-table {
  width: 100%;
  border-collapse: collapse;
  background-color: var(--tgt-white);
}

[data-theme="tgt"] .tgt-table th {
  background-color: var(--tgt-charcoal);
  color: var(--tgt-on-color);
  padding: 0.875rem 1rem;
  text-align: left;
  font-weight: 600;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

[data-theme="tgt"] .tgt-table td {
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--tgt-border-gray);
  color: var(--tgt-text-primary);
  font-size: 0.875rem;
}

[data-theme="tgt"] .tgt-table tr:last-child td {
  border-bottom: none;
}

[data-theme="tgt"] .tgt-table tr:hover td {
  background-color: var(--tgt-light-gray);
}

[data-theme="tgt"] .tgt-badge-verified {
  background-color: var(--tgt-green);
  color: var(--tgt-on-color);
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
}

[data-theme="tgt"] .tgt-data-item {
  background-color: var(--tgt-white);
  border: 1px solid var(--tgt-border-gray);
  border-radius: 6px;
}

[data-theme="tgt"] .tgt-data-label {
  font-size: 11px;
  color: var(--tgt-text-secondary);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

[data-theme="tgt"] .tgt-data-value {
  font-size: 1.5rem;
  color: var(--tgt-text-primary);
  font-weight: 700;
}

[data-theme="tgt"] .tgt-info-box {
  background-color: var(--tgt-blue-light);
  border-left: 4px solid var(--tgt-blue);
  padding: 1rem 1.25rem;
  border-radius: 4px;
  font-size: 0.875rem;
  color: var(--tgt-text-primary);
}

/* Row-banding utility — opt-in via class so it composes onto tables that
   already carry their own styling. Style-guide default for any tabular
   listing on a TGT surface (BUG-8T92Q-BK). Pairs with .tgt-table but is
   independent: any <table> with this class gets odd-row banding. */
[data-theme="tgt"] .tgt-table-banded > tbody > tr:nth-child(odd) > td,
[data-theme="tgt"] table.tgt-table-banded tbody tr:nth-child(odd) td {
  background-color: var(--tgt-row-band);
}
[data-theme="tgt"] .tgt-table-banded > tbody > tr:hover > td,
[data-theme="tgt"] table.tgt-table-banded tbody tr:hover td {
  background-color: var(--tgt-teal-light);
}
/* BUG-BRSYN-FW — rows that carry data-needs-attention="true" MUST win
   over the banding tint above. Source order makes the override stick
   without resorting to !important: both selectors have the same
   specificity (0,0,1,1), so this rule must follow the banding rule.
   Convention is portable across any tgt-table-banded surface. */
[data-theme="tgt"] .tgt-table-banded > tbody > tr[data-needs-attention="true"] > td,
[data-theme="tgt"] table.tgt-table-banded tbody tr[data-needs-attention="true"] td {
  background-color: var(--tgt-status-unmatched-bg);
}
[data-theme="tgt"] .tgt-table-banded > tbody > tr[data-needs-attention="true"]:hover > td,
[data-theme="tgt"] table.tgt-table-banded tbody tr[data-needs-attention="true"]:hover td {
  background-color: var(--tgt-status-unmatched-bg);
}
/* BUG-P6VY4-AU — a row selected for Target (data-target="true") carries a green
   left accent bar so the FAD can see at a glance which products are in the
   submission. It only colours the left edge, so it composes with both the row
   banding and the red needs-attention fill (a red row can still be Target). */
[data-theme="tgt"] .tgt-table-banded > tbody > tr[data-target="true"] > td:first-child,
[data-theme="tgt"] table.tgt-table-banded tbody tr[data-target="true"] td:first-child {
  box-shadow: inset 4px 0 0 0 var(--tgt-status-matched);
}

/* BUG-TRLZT-RL — dark mode for TGT page content.
 *
 * The TGT views are inline-styled against the named neutral tokens above
 * (var(--tgt-white) surfaces, var(--tgt-text-primary) text, etc.), so the
 * .dark class on <html> never reached them — only the Tailwind-styled AppFrame
 * chrome flipped. We re-map the NEUTRAL surface/text tokens (and the pale
 * *-light / *-bg status fills) to dark equivalents here; because every shadcn
 * alias and component rule above resolves these via var() at use time, the
 * whole TGT surface inverts from this one block.
 *
 * Brand + status FOREGROUND colours (teal, primary-blue, olive, charcoal,
 * the saturated status text, hazard scale) are intentionally NOT flipped —
 * they stay legible on the darkened panels, and white-on-colour text reads
 * from --tgt-on-color (above), which never inverts.
 *
 * Specificity: `.dark [data-theme="tgt"]` (0,2,0) beats the base
 * `[data-theme="tgt"]` (0,1,0), and the AppFrame's data-theme div is always a
 * descendant of <html class="dark">, so this wins without !important. */
.dark [data-theme="tgt"] {
  /* Neutral surfaces + text */
  --tgt-white:            #1f2227;  /* card / panel / input surface */
  --tgt-light-gray:       #16181c;  /* page background / muted / row hover */
  --tgt-row-band:         #262a30;  /* zebra band — a step up from the card so odd rows read in dark mode (BUG-XYXK7-US) */
  --tgt-border-gray:      #353a42;
  --tgt-text-primary:     #e7e9ec;
  --tgt-text-secondary:   #aab0b8;
  --tgt-muted-gray:       #9aa1a9;
  --tgt-charcoal:         #2b2f34;  /* table header — a step above the card */
  --tgt-dark-gray:        #23262b;

  /* Pale status / accent fills → dark tints. Their paired foregrounds are
     either the saturated colour (kept) or --tgt-text-primary (now light),
     both of which read on these tints. */
  --tgt-green-light:        #16331f;
  --tgt-teal-light:         #103a40;
  --tgt-blue-light:         #15314a;
  --tgt-label-blue-bg:      #15314a;
  --tgt-accent-olive-bg:    #2c3115;
  --tgt-status-matched-bg:  #16331f;
  --tgt-status-unmatched-bg:#3a1c20;
  --tgt-status-parsing-bg:  #3a3115;
  --tgt-status-parsed-bg:   #16331f;
  --tgt-info-bg:            #102a30;  /* Reporting-Period wash */
  /* Warning palette — dark tints (BUG-IAERN-NF). */
  --tgt-warn:               #E08A1E;
  --tgt-warn-bg:            #2e1f0a;
  --tgt-warn-fg:            #F5C98A;
}