/* 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;
  --tgt-border-gray:      #dee2e6;
  --tgt-white:            #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;

  /* 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;

  /* 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-white);
  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-white);
  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-light-gray);
}
[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);
}