/* BDLS QMS Console — design tokens + semantic theme utilities */

/* Fixed semantic success (green) — same in every theme preset */
:root {
  --status-ok-muted: #ecfdf5;
  --status-ok-border-light: #a7f3d0;
  --status-ok-border: #6ee7b7;
  --status-ok-text: #065f46;
  --status-ok-text-medium: #047857;
  --status-ok-chip: #d1fae5;
  --status-ok-solid: #059669;
}

/* ---------- Light: default (teal) ---------- */
:root,
[data-theme="default"] {
  --ink: #16181d;
  --paper: #f4f3ee;
  --line: #d8d6cc;
  --card: #ffffff;
  --card-hover: #faf9f5;
  --surface-hover: #fafafa;
  --muted-text: #71717a;
  --subtle-text: #a1a1aa;
  --body-text: #3f3f46;

  --accent: #0f766e;
  --accent-hover: #0d9488;
  --accent-solid: #0f766e;
  --accent-light: #5eead4;
  --accent-border-dark: rgba(15, 118, 110, 0.55);

  --brand-muted: #ecfdf5;
  --brand-border-light: #a7f3d0;
  --brand-border: #6ee7b7;
  --brand-text: #065f46;
  --brand-text-strong: #064e3b;
  --brand-chip: #d1fae5;
  --brand-chip-text: #047857;

  --scrollbar-thumb: #cfcdc2;
  --topbar-bg: var(--ink);
  --input-bg: #ffffff;
  --modal-scrim: rgba(0, 0, 0, 0.3);
}

/* ---------- Light: BDLS corporate blue ---------- */
[data-theme="bdls-blue"] {
  --accent: #307ecc;
  --accent-hover: #2563a8;
  --accent-solid: #307ecc;
  --accent-light: #93c5fd;
  --accent-border-dark: rgba(48, 126, 204, 0.55);

  --brand-muted: #e8f2fc;
  --brand-border-light: #b8d4f0;
  --brand-border: #7eb3e8;
  --brand-text: #1e4a72;
  --brand-text-strong: #163a5c;
  --brand-chip: #cfe4f7;
  --brand-chip-text: #2563a8;
}

/* ---------- Dark: teal accent ---------- */
[data-theme="dark"] {
  --ink: #e8e6e3;
  --paper: #12151a;
  --line: #2d323c;
  --card: #1a1f27;
  --card-hover: #222831;
  --surface-hover: #222831;
  --muted-text: #9ca3af;
  --subtle-text: #6b7280;
  --body-text: #d1d5db;

  --accent: #2dd4bf;
  --accent-hover: #5eead4;
  --accent-solid: #14b8a6;
  --accent-light: #99f6e4;
  --accent-border-dark: rgba(45, 212, 191, 0.45);

  --brand-muted: #134e4a;
  --brand-border-light: #115e59;
  --brand-border: #0f766e;
  --brand-text: #99f6e4;
  --brand-text-strong: #ccfbf1;
  --brand-chip: #134e4a;
  --brand-chip-text: #5eead4;

  --scrollbar-thumb: #3f4654;
  --topbar-bg: #0c0e12;
  --input-bg: #1a1f27;
  --modal-scrim: rgba(0, 0, 0, 0.55);
}

/* ---------- Dark: BDLS blue ---------- */
[data-theme="bdls-blue-dark"] {
  --ink: #e8eaed;
  --paper: #12151a;
  --line: #2d323c;
  --card: #1a1f27;
  --card-hover: #222831;
  --surface-hover: #222831;
  --muted-text: #9ca3af;
  --subtle-text: #6b7280;
  --body-text: #d1d5db;

  --accent: #4a9ae8;
  --accent-hover: #307ecc;
  --accent-solid: #307ecc;
  --accent-light: #93c5fd;
  --accent-border-dark: rgba(74, 154, 232, 0.45);

  --brand-muted: #1a3248;
  --brand-border-light: #254a6b;
  --brand-border: #307ecc;
  --brand-text: #93c5fd;
  --brand-text-strong: #bfdbfe;
  --brand-chip: #1e3a5c;
  --brand-chip-text: #60a5fa;

  --scrollbar-thumb: #3f4654;
  --topbar-bg: #0c0e12;
  --input-bg: #1a1f27;
  --modal-scrim: rgba(0, 0, 0, 0.55);
}

/* ---------- Base layout (token-driven) ---------- */
html,
body {
  background: var(--paper);
  color: var(--ink);
  font-family: "IBM Plex Sans", ui-sans-serif, system-ui;
}

.mono {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
}

.card {
  background: var(--card);
  border: 1px solid var(--line);
}

.hair {
  border-color: var(--line);
}

.btn {
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
}

.btn:hover {
  background: var(--card-hover);
}

.btn-edit-asset {
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--body-text);
  font-weight: 500;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.btn-edit-asset:hover {
  background: var(--card-hover);
  border-color: color-mix(in srgb, var(--line) 65%, var(--muted-text));
}

.btn-accent {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.btn-accent:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

.btn-danger {
  background: #9f1239;
  color: #fff;
  border-color: #9f1239;
}

.btn-danger:hover {
  filter: brightness(1.08);
}

::-webkit-scrollbar {
  height: 10px;
  width: 10px;
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 6px;
}

input,
select,
textarea {
  font-family: inherit;
  background: var(--input-bg);
  color: var(--ink);
}

.topbar {
  background: var(--topbar-bg);
}

.modal-scrim {
  background: var(--modal-scrim);
}

/* ---------- Brand semantic utilities ---------- */
.text-brand { color: var(--brand-text); }
.text-brand-strong { color: var(--brand-text-strong); }
.text-accent { color: var(--accent-solid); }
.text-accent-light { color: var(--accent-light); }
.hover\:text-brand-strong:hover { color: var(--brand-text-strong); }

.bg-brand-muted { background: var(--brand-muted); }
.bg-brand-muted-30 { background: color-mix(in srgb, var(--brand-muted) 30%, transparent); }
.bg-brand-muted-40 { background: color-mix(in srgb, var(--brand-muted) 40%, transparent); }
.bg-brand-chip { background: var(--brand-chip); }
.bg-accent-solid { background: var(--accent-solid); }

.border-brand { border-color: var(--brand-border); }
.border-brand-light { border-color: var(--brand-border-light); }
.border-accent-dark { border-color: var(--accent-border-dark); }
.border-accent-strong { border-color: var(--accent); }
.hover\:border-brand:hover { border-color: var(--brand-border); }

.hover\:bg-brand-muted:hover { background: var(--brand-muted); }
.hover\:bg-brand-muted-40:hover { background: color-mix(in srgb, var(--brand-muted) 40%, transparent); }

.selected-bg { background: var(--brand-muted); }
.row-hover-40:hover { background: color-mix(in srgb, var(--brand-muted) 40%, transparent); }

.link-brand {
  color: var(--brand-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.link-brand:hover { color: var(--brand-text-strong); }

.banner-success {
  background: var(--brand-muted);
  border: 1px solid var(--brand-border);
  color: var(--brand-text);
}

/* ---------- Status success (fixed green — not theme brand) ---------- */
.text-status-ok { color: var(--status-ok-text); }
.text-status-ok-medium { color: var(--status-ok-text-medium); }
.bg-status-ok-muted { background: var(--status-ok-muted); }
.bg-status-ok-chip { background: var(--status-ok-chip); }
.bg-status-ok-solid { background: var(--status-ok-solid); }
.border-status-ok { border-color: var(--status-ok-border); }
.border-status-ok-light { border-color: var(--status-ok-border-light); }

.chip-success {
  background: var(--status-ok-chip);
  color: var(--status-ok-text);
}

.pill-status-ok {
  background: var(--status-ok-muted);
  color: var(--status-ok-text);
  border-color: var(--status-ok-border);
}

.focus-brand:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--accent);
}

.accent-brand {
  accent-color: var(--accent-solid);
}

.card-hover-brand {
  transition: border-color 0.15s, background-color 0.15s;
}
.card-hover-brand:hover {
  border-color: var(--brand-border);
  background: color-mix(in srgb, var(--brand-muted) 40%, transparent);
}

/* ---------- Dark: remap common Tailwind zinc utilities ---------- */
[data-theme="dark"] .text-zinc-500,
[data-theme="bdls-blue-dark"] .text-zinc-500 { color: var(--muted-text); }
[data-theme="dark"] .text-zinc-400,
[data-theme="bdls-blue-dark"] .text-zinc-400 { color: var(--subtle-text); }
[data-theme="dark"] .text-zinc-600,
[data-theme="bdls-blue-dark"] .text-zinc-600 { color: var(--body-text); }
[data-theme="dark"] .text-zinc-700,
[data-theme="bdls-blue-dark"] .text-zinc-700 { color: var(--ink); }
[data-theme="dark"] .text-zinc-900,
[data-theme="bdls-blue-dark"] .text-zinc-900 { color: var(--ink); }

[data-theme="dark"] .bg-white,
[data-theme="bdls-blue-dark"] .bg-white { background-color: var(--card); }
[data-theme="dark"] .bg-zinc-50,
[data-theme="bdls-blue-dark"] .bg-zinc-50 { background-color: var(--surface-hover); }
[data-theme="dark"] .hover\:bg-zinc-50:hover,
[data-theme="bdls-blue-dark"] .hover\:bg-zinc-50:hover { background-color: var(--surface-hover); }
[data-theme="dark"] .hover\:bg-zinc-50\/60:hover,
[data-theme="bdls-blue-dark"] .hover\:bg-zinc-50\/60:hover { background-color: color-mix(in srgb, var(--surface-hover) 60%, transparent); }

[data-theme="dark"] .border-zinc-100,
[data-theme="bdls-blue-dark"] .border-zinc-100,
[data-theme="dark"] .border-zinc-200,
[data-theme="bdls-blue-dark"] .border-zinc-200,
[data-theme="dark"] .border-zinc-300,
[data-theme="bdls-blue-dark"] .border-zinc-300 { border-color: var(--line); }

[data-theme="dark"] .bg-zinc-100,
[data-theme="bdls-blue-dark"] .bg-zinc-100 { background-color: var(--card-hover); }

[data-theme="dark"] .text-zinc-300,
[data-theme="bdls-blue-dark"] .text-zinc-300 { color: #d1d5db; }

/* Import queue — amber “needs value” selects (E1: theme-aware contrast) */
.import-select-warn {
  border-color: #fbbf24;
  background-color: #fffbeb;
  color: var(--ink);
}
.import-select-ok {
  border-color: var(--line);
  background-color: var(--input-bg);
  color: var(--ink);
}
[data-theme="dark"] .import-select-warn,
[data-theme="bdls-blue-dark"] .import-select-warn {
  border-color: #d97706;
  background-color: #422006;
  color: #fde68a;
}
[data-theme="dark"] .import-select-ok,
[data-theme="bdls-blue-dark"] .import-select-ok {
  color: var(--ink);
}
[data-theme="dark"] .import-select-warn option,
[data-theme="bdls-blue-dark"] .import-select-warn option,
[data-theme="dark"] .import-select-ok option,
[data-theme="bdls-blue-dark"] .import-select-ok option {
  background-color: var(--card);
  color: var(--ink);
}

/* Import Bulk Setup — new-model table contrast in dark themes (E1 polish) */
[data-theme="dark"] .import-new-model-table thead tr,
[data-theme="bdls-blue-dark"] .import-new-model-table thead tr {
  background-color: var(--card-hover);
}
[data-theme="dark"] .import-new-model-table tbody tr,
[data-theme="bdls-blue-dark"] .import-new-model-table tbody tr {
  background-color: var(--card);
}
[data-theme="dark"] .import-new-model-table tbody tr:hover,
[data-theme="bdls-blue-dark"] .import-new-model-table tbody tr:hover {
  background-color: var(--card-hover);
}
[data-theme="dark"] .import-new-model-table .text-zinc-800,
[data-theme="bdls-blue-dark"] .import-new-model-table .text-zinc-800,
[data-theme="dark"] .import-bulk-setup .text-zinc-800,
[data-theme="bdls-blue-dark"] .import-bulk-setup .text-zinc-800,
[data-theme="dark"] .import-bulk-setup .text-zinc-700,
[data-theme="bdls-blue-dark"] .import-bulk-setup .text-zinc-700 {
  color: var(--ink);
}
[data-theme="dark"] .import-new-model-table .text-zinc-500,
[data-theme="bdls-blue-dark"] .import-new-model-table .text-zinc-500,
[data-theme="dark"] .import-bulk-setup .text-zinc-500,
[data-theme="bdls-blue-dark"] .import-bulk-setup .text-zinc-500 {
  color: var(--muted-text);
}
[data-theme="dark"] .import-bulk-setup,
[data-theme="bdls-blue-dark"] .import-bulk-setup {
  background-color: var(--card);
  border-color: var(--line);
}
[data-theme="dark"] .import-bulk-setup .bg-zinc-50,
[data-theme="bdls-blue-dark"] .import-bulk-setup .bg-zinc-50 {
  background-color: var(--card-hover);
  border-color: var(--line);
}

/* Edit asset menu — section tints + row hover (light) */
.edit-asset-section-neutral { background-color: rgba(244, 244, 245, 0.75); }
.edit-asset-section-standards { background-color: rgba(240, 249, 255, 0.85); }
.edit-asset-section-danger { background-color: rgba(255, 241, 242, 0.85); }

.edit-asset-action-neutral {
  border-color: #e4e4e7;
  background-color: transparent;
}
.edit-asset-action-neutral:hover { background-color: rgba(228, 228, 231, 0.95); }

.edit-asset-action-standards {
  border-color: #bae6fd;
  background-color: transparent;
}
.edit-asset-action-standards:hover { background-color: rgba(224, 242, 254, 0.95); }

.edit-asset-action-danger {
  border-color: #fecdd3;
  background-color: rgba(255, 241, 242, 0.8);
}
.edit-asset-action-danger:hover { background-color: rgba(254, 205, 211, 0.95); }

[data-theme="dark"] .edit-asset-section-neutral,
[data-theme="bdls-blue-dark"] .edit-asset-section-neutral {
  background-color: rgba(63, 63, 70, 0.35);
}
[data-theme="dark"] .edit-asset-section-standards,
[data-theme="bdls-blue-dark"] .edit-asset-section-standards {
  background-color: rgba(12, 74, 110, 0.35);
}
[data-theme="dark"] .edit-asset-section-danger,
[data-theme="bdls-blue-dark"] .edit-asset-section-danger {
  background-color: rgba(127, 29, 29, 0.35);
}
[data-theme="dark"] .edit-asset-action-neutral,
[data-theme="bdls-blue-dark"] .edit-asset-action-neutral {
  border-color: var(--line);
  background-color: transparent;
}
[data-theme="dark"] .edit-asset-action-neutral:hover,
[data-theme="bdls-blue-dark"] .edit-asset-action-neutral:hover {
  background-color: rgba(82, 82, 91, 0.55);
}
[data-theme="dark"] .edit-asset-action-standards,
[data-theme="bdls-blue-dark"] .edit-asset-action-standards {
  border-color: rgba(56, 189, 248, 0.35);
  background-color: transparent;
}
[data-theme="dark"] .edit-asset-action-standards:hover,
[data-theme="bdls-blue-dark"] .edit-asset-action-standards:hover {
  background-color: rgba(12, 74, 110, 0.55);
}
[data-theme="dark"] .edit-asset-action-danger,
[data-theme="bdls-blue-dark"] .edit-asset-action-danger {
  border-color: rgba(251, 113, 133, 0.45);
  background-color: rgba(127, 29, 29, 0.45);
}
[data-theme="dark"] .edit-asset-action-danger:hover,
[data-theme="bdls-blue-dark"] .edit-asset-action-danger:hover {
  background-color: rgba(153, 27, 27, 0.65);
}
[data-theme="dark"] .edit-asset-action-danger .text-rose-800,
[data-theme="bdls-blue-dark"] .edit-asset-action-danger .text-rose-800 {
  color: #fecdd3;
}