/* design-g.css — SBGG shared design system v2 "Operational Ledger" (2026-09-09, GPT-6 Astra design audit R0).
   ★Loaded first by every screen (pages link it or header.js injects it). Page-specific <style> blocks come after it.
   ★Rules: tokens only (no literal colours in components) / body-prefixed selectors outrank Bootstrap loaded later /
   no cascade layers / DOM, ids and JS hooks unchanged / dark theme through the same tokens.
   ★Sections: 1 tokens · 2 base · 3 controls · 4 tables, cards, badges, metrics · 5 headers, alerts, modals, states ·
   6 shell (sidebar, topbar, drawer) · 7 responsive · 8 motion · 9 helpers · 10 dark-mode page compatibility (retained). */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

/* ===== 1. Tokens ===== */
:root {
  color-scheme: light;

  --primary-700: #17459e;
  --primary-600: #205bc4;
  --primary-500: #3471d9;
  --primary-100: #dce8fc;
  --primary-50: #eef4ff;

  --gray-900: #182230;
  --gray-800: #263445;
  --gray-700: #364658;
  --gray-600: #526174;
  --gray-500: #647286;
  --gray-400: #7b8798;
  --gray-300: #b8c2cf;
  --gray-200: #dce2ea;
  --gray-100: #edf1f5;
  --gray-50: #f6f8fa;
  --white: #ffffff;

  --success-700: #095338;
  --success-600: #116746;
  --success-100: #d4eddf;
  --success-50: #edf7f1;
  --error-700: #8d2425;
  --error-600: #ad3032;
  --error-100: #f7dcdc;
  --error-50: #fcf0f0;
  --warning-700: #784308;
  --warning-600: #93530b;
  --warning-100: #f4e5c4;
  --warning-50: #fcf6e9;
  --blue-700: #17459e;
  --blue-600: #205bc4;
  --blue-100: #dce8fc;
  --blue-50: #eef4ff;

  --text-link: #205bc4;
  --text-success: #116746;
  --text-error: #ad3032;
  --text-warning: #784308;
  --text-neutral: var(--gray-600);
  --on-solid: #ffffff;

  --surface: var(--white);
  --surface-subtle: var(--gray-50);
  --surface-hover: var(--gray-100);
  --text-body: var(--gray-900);
  --text-secondary: var(--gray-600);
  --text-muted: var(--gray-500);
  --control-border: #7b8798;
  --border-color: var(--gray-200);
  --border-width: 1px;
  --border: var(--border-width) solid var(--border-color);

  --focus-ring: #205bc4;
  --focus-halo: var(--surface);
  --selection-bg: var(--primary-50);
  --selection-border: var(--text-link);
  --row-update-bg: #e5efff;

  /* Model (AI) evidence stays violet and distinct from approval */
  --model-bg: #f2eef9;
  --model-border: #9673c0;
  --model-fg: #694193;

  --scrim: rgb(16 24 40 / 48%);
  --loading-scrim: rgb(246 248 250 / 78%);
  --toast-bg: #182230;
  --toast-fg: #ffffff;

  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  --font-display: var(--font-body);
  --text-xs: 12px;
  --text-sm: 13px;
  --text-md: 14px;
  --text-lg: 16px;
  --text-xl: 18px;
  --text-2xl: 24px;
  --text-3xl: 28px;
  --text-metric: 30px;
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-copy: 1.6;
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  --radius-sm: 4px;
  --radius: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-pill: 999px;

  --control-xs: 32px;
  --control-sm: 36px;
  --control-md: 40px;
  --control-lg: 48px;
  --control-touch: 44px;
  --decision-height: 48px;
  --topbar-height: 64px;
  --page-gutter: 24px;
  --sbgg-sidebar-w: 232px;
  --shell-offset: var(--sbgg-sidebar-w);
  --rail-width: 64px;
  --drawer-width: 288px;

  --shadow-xs: 0 1px 2px rgb(16 24 40 / 3%);
  --shadow-sm: 0 2px 5px rgb(16 24 40 / 6%);
  --shadow-md: 0 6px 20px rgb(16 24 40 / 12%);
  --shadow-lg: 0 16px 48px rgb(16 24 40 / 20%);
  --shadow-pressed: inset 0 2px 3px rgb(0 0 0 / 18%);

  --ease: cubic-bezier(.2, 0, 0, 1);
  --ease-out: cubic-bezier(0, 0, .2, 1);
  --ease-spring: var(--ease);
  --duration-fast: 100ms;
  --duration-normal: 160ms;
  --duration-layout: 200ms;
  --duration-update: 900ms;

  --z-table: 10;
  --z-actions: 30;
  --z-topbar: 90;
  --z-sidebar: 100;
  --z-drawer-backdrop: 190;
  --z-drawer: 200;
  --z-drawer-toggle: 210;
  --z-modal-backdrop: 990;
  --z-modal: 1000;
  --z-toast: 1100;
  --z-loading: 9999;
}

[data-theme="dark"] {
  color-scheme: dark;

  --primary-700: #17459e;
  --primary-600: #205bc4;
  --primary-500: #3471d9;
  --primary-100: #213d66;
  --primary-50: #192c47;

  --gray-900: #eef2f6;
  --gray-800: #e0e7ef;
  --gray-700: #ced7e2;
  --gray-600: #b2bece;
  --gray-500: #9daabd;
  --gray-400: #8998ad;
  --gray-300: #5c6d84;
  --gray-200: #344256;
  --gray-100: #253246;
  --gray-50: #121a26;
  --white: #1b2635;

  --success-100: #234a38;
  --success-50: #19382b;
  --error-100: #5b2e34;
  --error-50: #3e252c;
  --warning-100: #514127;
  --warning-50: #372f22;
  --blue-100: #213d66;
  --blue-50: #192c47;

  --text-link: #9ac2ff;
  --text-success: #91ddb0;
  --text-error: #ffb0b0;
  --text-warning: #f1ce8b;
  --control-border: #8998ad;
  --focus-ring: #9ac2ff;
  --row-update-bg: #284569;

  --model-bg: #30263f;
  --model-border: #ad8ed0;
  --model-fg: #d4b9f0;

  --scrim: rgb(0 0 0 / 64%);
  --loading-scrim: rgb(18 26 38 / 78%);
  --toast-bg: #e0e7ef;
  --toast-fg: #182230;

  --shadow-xs: 0 1px 2px rgb(0 0 0 / 12%);
  --shadow-sm: 0 2px 5px rgb(0 0 0 / 20%);
  --shadow-md: 0 6px 20px rgb(0 0 0 / 30%);
  --shadow-lg: 0 16px 48px rgb(0 0 0 / 44%);
}

/* ===== 2. Base ===== */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: auto;
  scroll-padding-top: calc(var(--topbar-height) + var(--space-4));
}

body {
  margin: 0;
  padding: var(--page-gutter);
  background: var(--surface-subtle);
  color: var(--text-body);
  font: var(--text-md)/var(--leading-normal) var(--font-body);
  font-variant-numeric: lining-nums tabular-nums;
  -webkit-font-smoothing: antialiased;
}

/* One offset owner: the shell (header.js marks <html> before injecting the sidebar; :has() covers late injection). */
html.sbgg-shell body,
body:has(.g-sidebar) {
  margin-inline-start: var(--shell-offset);
  padding-top: calc(var(--topbar-height) + var(--page-gutter));
}
body .g-main { margin: 0; padding: 0; min-width: 0; min-height: 0; }

body .g-display { font-family: var(--font-display); }
body :where(button, input, select, textarea) { font-family: inherit; }
body a { color: var(--text-link); }

body :where(button, a, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
  scroll-margin-block: calc(var(--topbar-height) + 16px) 96px;
}

body :where(button, a, input, select, textarea, summary) {
  touch-action: manipulation;
  -webkit-tap-highlight-color: var(--selection-bg);
}

/* ===== 3. Controls ===== */
body :is(.g-btn, .btn) {
  --btn-bg: var(--surface);
  --btn-fg: var(--gray-700);
  --btn-border: var(--control-border);
  --btn-hover: var(--surface-hover);
  --btn-hover-border: var(--control-border);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--control-md);
  min-width: var(--control-md);
  height: auto;
  padding: 8px 14px;
  border: 1px solid var(--btn-border);
  border-radius: var(--radius);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: var(--weight-semibold) var(--text-md)/1.4 var(--font-body);
  text-align: center;
  text-decoration: none;
  white-space: normal;
  vertical-align: middle;
  box-shadow: none;
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--ease),
    border-color var(--duration-fast) var(--ease),
    box-shadow var(--duration-fast) var(--ease),
    transform var(--duration-fast) var(--ease);
}

body :is(.g-btn-primary, .btn-primary) {
  --btn-bg: var(--primary-600);
  --btn-fg: var(--on-solid);
  --btn-border: var(--primary-600);
  --btn-hover: var(--primary-700);
  --btn-hover-border: var(--primary-700);
}
body :is(.g-btn-secondary, .btn-secondary, .btn-outline-secondary, .btn-light, .btn-outline-dark, .btn-default) {
  --btn-bg: var(--surface);
  --btn-fg: var(--gray-700);
  --btn-border: var(--control-border);
  --btn-hover: var(--surface-hover);
  --btn-hover-border: var(--control-border);
}
body :is(.g-btn-ghost, .btn-link, .btn-outline-primary) {
  --btn-bg: transparent;
  --btn-fg: var(--text-link);
  --btn-border: transparent;
  --btn-hover: var(--selection-bg);
  --btn-hover-border: transparent;
}
body .btn-outline-primary { --btn-border: var(--text-link); }
body :is(.g-btn-danger, .btn-danger) {
  --btn-bg: var(--error-600);
  --btn-fg: var(--on-solid);
  --btn-border: var(--error-600);
  --btn-hover: var(--error-700);
  --btn-hover-border: var(--error-700);
}
body :is(.g-btn-approve, .btn-success) {
  --btn-bg: var(--success-600);
  --btn-fg: var(--on-solid);
  --btn-border: var(--success-600);
  --btn-hover: var(--success-700);
  --btn-hover-border: var(--success-700);
}
body :is(.g-btn-caution, .btn-warning, .btn-outline-warning) {
  --btn-bg: var(--warning-50);
  --btn-fg: var(--text-warning);
  --btn-border: var(--text-warning);
  --btn-hover: var(--warning-100);
  --btn-hover-border: var(--text-warning);
}
body .btn-outline-danger {
  --btn-fg: var(--text-error);
  --btn-border: var(--text-error);
  --btn-hover: var(--error-50);
  --btn-hover-border: var(--text-error);
}
body .btn-outline-success {
  --btn-fg: var(--text-success);
  --btn-border: var(--text-success);
  --btn-hover: var(--success-50);
  --btn-hover-border: var(--text-success);
}
body :is(.btn-info, .btn-outline-info) {
  --btn-bg: var(--blue-50);
  --btn-fg: var(--text-link);
  --btn-border: var(--text-link);
  --btn-hover: var(--blue-100);
  --btn-hover-border: var(--text-link);
}
body :is(.btn-dark) {
  --btn-bg: var(--gray-800);
  --btn-fg: var(--on-solid);
  --btn-border: var(--gray-800);
  --btn-hover: var(--gray-900);
  --btn-hover-border: var(--gray-900);
}

@media (hover: hover) and (pointer: fine) {
  body :is(.g-btn, .btn):hover:not(:disabled):not(.disabled):not([aria-disabled="true"]):not([aria-busy="true"]) {
    background: var(--btn-hover);
    border-color: var(--btn-hover-border);
    color: var(--btn-fg);
  }
}

body :is(.g-btn, .btn):active:not(:disabled):not(.disabled):not([aria-disabled="true"]):not([aria-busy="true"]) {
  background: var(--btn-hover);
  border-color: var(--btn-hover-border);
  color: var(--btn-fg);
  transform: translateY(1px);
  box-shadow: var(--shadow-pressed);
}

body :is(.g-btn, .btn):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
  box-shadow: 0 0 0 1px var(--focus-halo);
}

body :is(.g-btn, .btn):is(:disabled, .disabled, [aria-disabled="true"]) {
  background: var(--surface-hover);
  color: var(--text-secondary);
  border-color: var(--control-border);
  opacity: 1;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

body :is(.g-btn, .btn)[aria-busy="true"] {
  cursor: progress;
  transform: none;
  box-shadow: none;
}

/* Reserve the existing icon slot; the button label stays. */
body :is(.g-btn, .btn) .g-spinner {
  width: 16px;
  height: 16px;
  border-width: 2px;
  border-color: currentColor;
  border-top-color: transparent;
  flex: none;
}

body .g-btn-xs { min-height: var(--control-xs); padding: 4px 8px; font-size: var(--text-xs); }
body :is(.g-btn-sm, .btn-sm) { min-height: var(--control-sm); padding: 6px 10px; font-size: var(--text-sm); }
body :is(.g-btn-lg, .btn-lg) { min-height: var(--control-lg); padding: 10px 18px; font-size: var(--text-lg); }
body .g-btn-icon { width: var(--control-md); padding: 8px; }

/* Native fields (hidden/file/range/checkbox/radio excluded) */
body :is(
  .g-input, .g-select, .form-control, .form-select, .custom-select,
  input:not([type]),
  input[type="text"], input[type="search"], input[type="email"],
  input[type="url"], input[type="tel"], input[type="password"],
  input[type="number"], input[type="date"], input[type="datetime-local"],
  input[type="month"], input[type="week"], input[type="time"],
  select, textarea
):not([type="hidden"]):not([type="file"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]) {
  min-height: var(--control-md);
  max-width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--control-border);
  border-radius: var(--radius);
  background-color: var(--surface);
  color: var(--text-body);
  font: var(--text-md)/var(--leading-normal) var(--font-body);
  box-shadow: none;
  transition: border-color var(--duration-fast) var(--ease);
}
body :is(.g-input, .form-control, textarea) { width: 100%; }
body :is(select, .g-select, .form-select, .custom-select) { padding-inline-end: 32px; }
body select[multiple] { min-height: 120px; }
body :is(input, textarea)::placeholder { color: var(--text-muted); opacity: 1; }
body :is(input, select, textarea):focus { border-color: var(--focus-ring); }
body :is(input, textarea)[readonly] { background-color: var(--surface-hover); color: var(--gray-700); opacity: 1; }
body :is(input, select, textarea):disabled { background-color: var(--surface-hover); color: var(--text-secondary); opacity: 1; cursor: not-allowed; }
body :is(input, select, textarea):is([aria-invalid="true"], .is-invalid) { border-color: var(--text-error); }
body textarea { min-height: 96px; resize: vertical; }
body :is(input[type="checkbox"], input[type="radio"]) { accent-color: var(--primary-600); }
body :is(.g-label, label) { color: var(--gray-700); font-size: var(--text-sm); line-height: var(--leading-normal); }
body .g-label { display: block; margin-bottom: var(--space-2); font-weight: var(--weight-semibold); }
body :is(.g-field-help, .form-text) { margin-top: var(--space-1); color: var(--text-secondary); font-size: var(--text-xs); }
body :is(.g-field-error, .invalid-feedback) { color: var(--text-error); font-size: var(--text-xs); }

/* ===== 4. Tables, cards, badges, metrics ===== */
body :is(table, .g-table, .table) {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--text-body);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  --bs-table-bg: var(--surface);
  --bs-table-color: var(--text-body);
  --bs-table-striped-bg: var(--surface);
  --bs-table-striped-color: var(--text-body);
  --bs-table-hover-bg: var(--surface-subtle);
  --bs-table-hover-color: var(--text-body);
}
body :is(table, .g-table, .table) > :is(thead, tbody, tfoot) > tr > :is(th, td) {
  padding: 10px 12px;
  border: 0;
  border-bottom: var(--border);
  background: var(--surface);
  color: inherit;
  box-shadow: none;
  line-height: var(--leading-normal);
  vertical-align: middle;
}
body :is(table, .g-table, .table) > thead > tr > th {
  background: var(--surface-subtle);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-align: left;
  border-bottom-color: var(--gray-300);
  letter-spacing: 0;
}
body :is(table, .g-table, .table) tr { transform: none; transition: none; }
@media (hover: hover) {
  body :is(table, .g-table, .table) > tbody > tr:hover > :is(td, th) { background: var(--surface-subtle); }
}
body :is(table, .g-table, .table) > tbody > tr:focus-within > :is(td, th) { background: var(--surface-subtle); }
body :is(table, .g-table, .table) > tbody > tr[aria-selected="true"] > :is(td, th) { background: var(--selection-bg); }
body :is(table, .g-table, .table) :is(th, td).g-numeric,
body .g-numeric { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
body .g-table .td-name { font-weight: var(--weight-semibold); color: var(--text-body); }
body .g-table-compact > :is(thead, tbody, tfoot) > tr > :is(th, td) { padding-block: 7px; }
body :is(.g-table-scroll, .table-responsive) {
  max-width: 100%;
  min-width: 0;
  overflow: auto;
  overscroll-behavior-inline: contain;
  scrollbar-gutter: stable;
}
body .g-table-scroll { max-height: min(65dvh, 720px); }
body .g-table-scroll > table > thead > tr > th { position: sticky; top: 0; z-index: var(--z-table); }

body :is(.g-card, .card) {
  background: var(--surface);
  color: var(--text-body);
  border: var(--border);
  border-radius: var(--radius-lg);
  box-shadow: none;
  overflow: visible;
  transform: none;
  transition: none;
}
body :is(.g-card, .card):hover { transform: none; box-shadow: none; }
body .g-card { margin-bottom: var(--space-6); }
body :is(.g-card-header, .card-header) {
  padding: var(--space-4) var(--space-5);
  border-bottom: var(--border);
  background: var(--surface);
  color: var(--text-body);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
body .g-card-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); }
body :is(.g-card-body, .card-body) { padding: var(--space-5); }
body :is(.g-card-header-title, .g-section-title) { margin: 0; font-size: var(--text-lg); font-weight: var(--weight-semibold); }
body .g-card-header-desc { color: var(--text-secondary); font-size: var(--text-sm); }
body .g-card-header-link { color: var(--text-link); }

body :is(.g-pill, .badge) {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  max-width: 100%;
  padding: 2px 7px;
  border: 1px solid currentColor;
  border-radius: var(--radius-sm);
  background: var(--surface-hover);
  color: var(--text-neutral);
  font: var(--weight-medium) var(--text-xs)/1.5 var(--font-body);
  white-space: normal;
  vertical-align: middle;
  transform: none;
  transition: none;
}
body :is(.g-pill-success, .badge-success) { background: var(--success-50); color: var(--text-success); }
body :is(.g-pill-error, .badge-danger) { background: var(--error-50); color: var(--text-error); }
body :is(.g-pill-warning, .g-pill-human, .badge-warning) { background: var(--warning-50); color: var(--text-warning); }
body .g-pill-model { background: var(--model-bg); color: var(--model-fg); }
body :is(.g-pill-primary, .g-pill-blue, .g-pill-auto, .badge-primary, .badge-info) { background: var(--blue-50); color: var(--text-link); }
body :is(.g-pill-gray, .g-pill-calc, .badge-secondary, .badge-light, .badge-dark) { background: var(--surface-hover); color: var(--text-neutral); }
body .g-pill-dot { width: 6px; height: 6px; border-radius: var(--radius-pill); background: currentColor; }

body .g-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}
body .g-metric { padding: var(--space-4); border: var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: none; transform: none; transition: none; }
body .g-metric:hover, body .g-metric:hover .g-metric-icon { transform: none; box-shadow: none; }
body .g-metric-label { color: var(--text-secondary); font-size: var(--text-sm); font-weight: var(--weight-medium); letter-spacing: 0; }
body .g-metric-value { margin-top: var(--space-1); color: var(--text-body); font: var(--weight-semibold) var(--text-metric)/var(--leading-tight) var(--font-display); font-variant-numeric: tabular-nums; }
body .g-metric-icon { transition: none; }
body .g-progress { height: 6px; overflow: hidden; border-radius: var(--radius-sm); background: var(--surface-hover); }
body .g-progress-fill { height: 100%; border-radius: inherit; background: var(--primary-600); transition: width var(--duration-normal) var(--ease); }

/* ===== 5. Page header, alerts, modals, states ===== */
body .g-page-header { margin-bottom: var(--space-6); }
body .g-page-title { margin: 0; color: var(--text-body); font: var(--weight-semibold) var(--text-3xl)/var(--leading-tight) var(--font-display); letter-spacing: -.4px; }
body .g-page-desc { max-width: 80ch; margin: var(--space-2) 0 0; color: var(--text-secondary); font-size: var(--text-md); line-height: var(--leading-copy); }

body :is(.g-notification, .alert) {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--control-border);
  border-radius: var(--radius);
  background: var(--surface-subtle);
  color: var(--text-secondary);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
}
body .g-notification { display: none; }
body .g-notification.show { display: flex; align-items: flex-start; gap: var(--space-2); }
body :is(.g-notification-success, .alert-success) { background: var(--success-50); border-color: var(--text-success); color: var(--text-success); }
body :is(.g-notification-error, .alert-danger) { background: var(--error-50); border-color: var(--text-error); color: var(--text-error); }
body :is(.g-notification-warning, .alert-warning) { background: var(--warning-50); border-color: var(--text-warning); color: var(--text-warning); }
body :is(.alert-primary, .alert-info) { background: var(--blue-50); border-color: var(--text-link); color: var(--text-link); }
body :is(.alert-secondary, .alert-light) { background: var(--surface-subtle); border-color: var(--control-border); color: var(--text-secondary); }
body .alert a { color: inherit; text-decoration: underline; }

body .modal { z-index: var(--z-modal); }
body .modal-backdrop { z-index: var(--z-modal-backdrop); background: var(--scrim); }
body .modal-backdrop.show { opacity: 1; }
body :is(.g-modal-surface, .modal-content) { background: var(--surface); color: var(--text-body); border: var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); }
body :is(.modal-header, .modal-footer) { border-color: var(--border-color); padding: var(--space-4) var(--space-5); }
body .modal-body { padding: var(--space-5); overflow-wrap: anywhere; }
body .modal-dialog { margin-block: var(--space-6); }
body .modal-dialog-scrollable .modal-content { max-height: calc(100dvh - 48px); }
body .modal.fade .modal-dialog { transform: translateY(8px); transition: transform var(--duration-normal) var(--ease-out); }
body .modal.show .modal-dialog { transform: none; }
body .modal.fade { transition: opacity var(--duration-normal) var(--ease-out); }

body .g-overlay { display: none; position: fixed; inset: 0; z-index: var(--z-loading); align-items: center; justify-content: center; background: var(--loading-scrim); color: var(--text-body); }
body .g-overlay.show { display: flex; }
body .g-spinner { width: 28px; height: 28px; border: 3px solid var(--gray-300); border-top-color: var(--text-link); border-radius: var(--radius-pill); animation: g-spin 800ms linear infinite; }
@keyframes g-spin { to { transform: rotate(360deg); } }

body .g-toast {
  position: fixed;
  inset-inline-end: max(16px, env(safe-area-inset-right));
  top: calc(var(--topbar-height) + 12px);
  z-index: var(--z-toast);
  max-width: min(440px, calc(100vw - 32px));
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--control-border);
  border-radius: var(--radius);
  background: var(--toast-bg);
  color: var(--toast-fg);
  box-shadow: var(--shadow-md);
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
}
body :is(.g-empty, .g-loading-state, .g-error-state) { padding: var(--space-6); color: var(--text-secondary); font-size: var(--text-md); line-height: var(--leading-copy); }
body .g-error-state { color: var(--text-error); background: var(--error-50); border-inline-start: 3px solid var(--text-error); }

body .nav-tabs { gap: var(--space-1); border-bottom: var(--border); }
body .nav-tabs .nav-link { min-height: var(--control-md); padding: 8px 12px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; color: var(--text-secondary); }
body .nav-tabs .nav-link:is(.active, [aria-selected="true"]) { border-bottom-color: var(--selection-border); background: transparent; color: var(--text-link); }
body .nav-tabs .nav-link:is(:disabled, .disabled, [aria-disabled="true"]) { color: var(--text-muted); cursor: not-allowed; }

/* Bootstrap colour utilities carry !important: override the visual properties explicitly. */
body :is(.badge.bg-success, .badge.text-bg-success) { background-color: var(--success-50) !important; color: var(--text-success) !important; }
body :is(.badge.bg-danger, .badge.text-bg-danger) { background-color: var(--error-50) !important; color: var(--text-error) !important; }
body :is(.badge.bg-warning, .badge.text-bg-warning) { background-color: var(--warning-50) !important; color: var(--text-warning) !important; }
body :is(.badge.bg-primary, .badge.bg-info, .badge.text-bg-primary, .badge.text-bg-info) { background-color: var(--blue-50) !important; color: var(--text-link) !important; }
body :is(.badge.bg-secondary, .badge.text-bg-secondary, .badge.bg-light, .badge.text-bg-light, .badge.bg-dark, .badge.text-bg-dark) { background-color: var(--surface-hover) !important; color: var(--text-neutral) !important; }
body .text-muted { color: var(--text-muted) !important; }
body .text-dark { color: var(--text-body) !important; }
body .bg-white { background-color: var(--surface) !important; }
body .bg-light { background-color: var(--surface-subtle) !important; }
body .border { border-color: var(--border-color) !important; }

/* ===== 6. Shell: topbar, sidebar, drawer ===== */
body .g-topbar {
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: var(--shell-offset);
  inset-inline-end: 0;
  height: var(--topbar-height);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-inline: var(--page-gutter);
  background: var(--surface);
  border-bottom: var(--border);
  backdrop-filter: none;
  z-index: var(--z-topbar);
  transition: none;
}
body .g-topbar-breadcrumb { min-width: 0; color: var(--text-secondary); font-size: var(--text-sm); }
body .g-topbar-breadcrumb a { color: var(--text-link); text-decoration: none; }
body .g-topbar-breadcrumb .current { color: var(--text-body); font-weight: var(--weight-semibold); }
body .g-topbar-right { display: flex; align-items: center; gap: var(--space-2); margin-inline-start: auto; flex-shrink: 0; }
body #topbar-ebay-id { color: var(--text-secondary) !important; }
body #ebay-sync-btn {
  --btn-bg: var(--surface);
  --btn-fg: var(--gray-700);
  --btn-border: var(--control-border);
  --btn-hover: var(--surface-hover);
  --btn-hover-border: var(--control-border);
}
body :is(.g-theme-toggle, .g-topbar-logout) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--control-md);
  min-height: var(--control-md);
  margin: 0;
  border-radius: var(--radius);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}
body .g-theme-toggle { border: 1px solid var(--control-border); background: var(--surface); cursor: pointer; }
body .g-topbar-logout { padding-inline: 8px; text-decoration: none; }
@media (hover: hover) {
  body :is(.g-theme-toggle, .g-topbar-logout):hover { background: var(--surface-hover); color: var(--text-body); }
}
body .g-theme-toggle .g-theme-icon-moon { display: none; }
[data-theme="dark"] .g-theme-toggle .g-theme-icon-sun { display: none; }
[data-theme="dark"] .g-theme-toggle .g-theme-icon-moon { display: block; }

body .g-sidebar {
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;
  width: var(--sbgg-sidebar-w);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-inline-end: var(--border);
  overflow: hidden;
  z-index: var(--z-sidebar);
  transition: none;
}
body .g-sidebar-top { display: flex; align-items: center; min-height: 64px; padding: 16px; }
body .g-sidebar-brand { color: var(--text-body); font-size: var(--text-md); font-weight: var(--weight-bold); letter-spacing: 0; }
body .g-sidebar-nav { flex: 1; min-height: 0; padding: 0 12px 16px; overflow-y: auto; overflow-x: hidden; }
body .g-nav-section { margin-bottom: 16px; }
body .g-nav-section-label {
  height: auto;
  padding: 0 8px 8px;
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: 1.4;
  letter-spacing: .3px;
  text-transform: uppercase;
  white-space: normal;
  overflow: visible;
}
body .g-nav-section-sub { margin-top: 3px; color: var(--text-secondary); font-size: var(--text-xs); font-weight: var(--weight-normal); line-height: 1.4; letter-spacing: 0; text-transform: none; }
body .g-nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  height: auto;
  margin: 0 0 2px;
  padding: 8px;
  border-radius: var(--radius);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: 1.4;
  text-decoration: none;
  white-space: normal;
  overflow-wrap: anywhere;
}
body .g-nav-item::after, body .g-nav-item::before { content: none; }
body .g-nav-item:hover { background: var(--surface-hover); color: var(--text-body); }
body .g-nav-item.active { background: var(--selection-bg); color: var(--text-link); box-shadow: inset 3px 0 var(--selection-border); font-weight: var(--weight-semibold); }
body .g-nav-icon { display: inline-flex; width: 20px; height: 20px; flex: none; color: inherit; align-items: center; justify-content: center; }
body .g-nav-icon svg { width: 20px; height: 20px; }
body .g-sidebar-footer { padding: 12px; padding-bottom: max(12px, env(safe-area-inset-bottom)); border-top: var(--border); }
body .g-sidebar-user { display: flex; align-items: center; gap: 8px; min-height: 44px; }
body .g-sidebar-user-info { min-width: 0; }
body :is(.g-user-name, .g-user-email) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body .g-user-name { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-body); }
body .g-user-email { font-size: var(--text-xs); color: var(--text-secondary); }
body .g-user-avatar { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: none; border-radius: var(--radius-pill); background: var(--surface-hover); color: var(--text-secondary); font-size: var(--text-xs); font-weight: var(--weight-semibold); }
body .g-sidebar-resizer { position: absolute; inset-block: 0; inset-inline-end: 0; width: 8px; cursor: col-resize; touch-action: none; z-index: 101; background: transparent; }
body .g-sidebar-resizer:is(:hover, :focus-visible, .dragging) { background: var(--selection-bg); outline: none; }
body.sbgg-resizing { user-select: none; cursor: col-resize; }

body .g-sidebar-toggle {
  display: none;
  position: fixed;
  top: 10px;
  left: 10px;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  padding: 10px;
  border: 1px solid var(--control-border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text-body);
  cursor: pointer;
  z-index: var(--z-drawer-toggle);
}
body .g-sidebar-toggle svg { width: 20px; height: 20px; }
body .g-drawer-backdrop { display: none; position: fixed; inset: 0; background: var(--scrim); z-index: var(--z-drawer-backdrop); }

/* Bootstrap rows carry negative gutters; when a page zeroes its container padding they would overflow the page by 12px. */
body :is(.container, .container-fluid) > .row { margin-inline: 0; }
body .g-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
body .g-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
body :is(.g-grid-2, .g-grid-3) > * { min-width: 0; }

/* ===== 7. Responsive ===== */
@media (min-width: 768px) and (max-width: 1024px) {
  :root { --shell-offset: var(--rail-width); --page-gutter: 20px; }
  body .g-sidebar { width: var(--rail-width); }
  body .g-sidebar-top { padding-top: 64px; min-height: 76px; }
  body .g-sidebar-nav { padding-inline: 10px; }
  body .g-sidebar-toggle { display: flex; }
  body:not(.sidebar-expanded) .g-nav-section-label,
  body:not(.sidebar-expanded) .g-sidebar-brand,
  body:not(.sidebar-expanded) .g-sidebar-user-info { display: none; }
  /* Visually hide link text in the rail while retaining its accessible name. */
  body:not(.sidebar-expanded) .g-nav-item > span:not(.g-nav-icon) {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  body:not(.sidebar-expanded) .g-nav-item { justify-content: center; min-height: 44px; padding: 10px; }
  body:not(.sidebar-expanded) .g-sidebar-footer { padding-inline: 10px; }
  body:not(.sidebar-expanded) .g-sidebar-user { justify-content: center; }
  body.sidebar-expanded .g-sidebar { width: var(--drawer-width); z-index: var(--z-drawer); box-shadow: var(--shadow-lg); }
  body.sidebar-expanded .g-sidebar-top { padding: 16px 16px 16px 64px; }
}

@media (max-width: 1024px) {
  body .g-sidebar-resizer { display: none; }
  body.sidebar-expanded .g-drawer-backdrop { display: block; }
  body.sidebar-expanded { overflow: hidden; }
}

@media (max-width: 767px) {
  /* ★Owner 2026-09-09 (2・スマホで表が右に切れる): a table that is not inside a scroll region scrolls by itself on phones
     (Members / Research Performance on the Client Dashboard, SHR list, ...). Tables already inside .g-table-scroll /
     .table-responsive* keep their region. */
  body :not(.g-table-scroll):not(.table-responsive):not(.table-responsive-fixed) > table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }
  :root { --shell-offset: 0px; --page-gutter: 16px; --topbar-height: calc(108px + env(safe-area-inset-top)); }
  body {
    padding-inline-start: max(var(--page-gutter), env(safe-area-inset-left));
    padding-inline-end: max(var(--page-gutter), env(safe-area-inset-right));
    padding-bottom: max(var(--page-gutter), env(safe-area-inset-bottom));
  }
  body .g-sidebar {
    width: min(var(--drawer-width), calc(100vw - 56px));
    visibility: hidden;
    transform: translateX(-100%);
    z-index: var(--z-drawer);
    transition: transform var(--duration-layout) var(--ease-out), visibility var(--duration-layout);
  }
  body.sidebar-expanded .g-sidebar { visibility: visible; transform: translateX(0); }
  body .g-sidebar-top { padding: calc(16px + env(safe-area-inset-top)) 16px 16px 64px; }
  body .g-sidebar-toggle { display: flex; top: calc(10px + env(safe-area-inset-top)); }
  body .g-nav-item { min-height: 44px; }

  body .g-topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 52px 44px;
    gap: 0;
    padding: calc(6px + env(safe-area-inset-top)) 12px 6px;
  }
  body .g-topbar-breadcrumb { padding-inline-start: 52px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; align-self: center; }
  body .g-topbar-right { width: 100%; justify-content: flex-end; gap: 6px; }
  body #topbar-ebay-id { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  body :is(.g-btn, .btn, .g-theme-toggle, .g-topbar-logout, .nav-tabs .nav-link, summary) { min-height: var(--control-touch); min-width: var(--control-touch); }
  body :is(input:not([type="hidden"]), select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]) { min-height: var(--control-touch); font-size: var(--text-lg); }

  body :is(.g-grid-2, .g-grid-3) { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  body :is(.g-card-body, .card-body) { padding: var(--space-4); }
  body :is(.g-card-header, .card-header) { padding: var(--space-4); }
  body .g-page-desc { line-height: var(--leading-normal); }
  body .g-table-scroll { max-height: 65dvh; }
  body :is(.g-table-scroll, .table-responsive) > table { min-width: 640px; }

  body .modal-dialog { margin: 12px; max-width: calc(100vw - 24px); }
  body .modal-dialog-scrollable .modal-content { max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
  body .modal-footer { gap: 8px; padding-bottom: max(16px, env(safe-area-inset-bottom)); }
}

@media (max-width: 479px) {
  :root { --page-gutter: 12px; --text-3xl: 24px; --text-metric: 28px; }
}

/* Sticky in-flow form actions (pages opt in on their existing action container). */
body .g-form-actions {
  position: sticky;
  bottom: 0;
  z-index: var(--z-actions);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: 12px 16px;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  background: var(--surface);
  border-top: var(--border);
}

/* ===== 8. Motion ===== */
body .g-fade-in { animation: g-page-enter var(--duration-normal) var(--ease-out); }
@keyframes g-page-enter { from { opacity: 0; } to { opacity: 1; } }
body tr.g-row-updated > :is(td, th) { animation: g-row-update var(--duration-update) var(--ease-out); }
@keyframes g-row-update { from { background-color: var(--row-update-bg); } }
body .g-toast.show { animation: g-page-enter var(--duration-normal) var(--ease-out); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body :is(.g-btn, .btn, .g-sidebar, .g-topbar, .g-progress-fill, .modal.fade, .modal.fade .modal-dialog) { transition: none; }
  body :is(.g-fade-in, .g-spinner, .g-toast.show), body tr.g-row-updated > :is(td, th) { animation: none; }
  body :is(.g-btn, .btn):active, body .modal.fade .modal-dialog { transform: none; }
}

/* ===== 9. Helpers (kept from v1) ===== */
.g-flex { display: flex; }
.g-flex-between { display: flex; justify-content: space-between; align-items: center; }
.g-gap-8 { gap: 8px; }
.g-gap-12 { gap: 12px; }
.g-gap-16 { gap: 16px; }
.g-mb-16 { margin-bottom: 16px; }
.g-mb-24 { margin-bottom: 24px; }

/* ===== 10. Dark-mode compatibility for page-specific hardcoded colours (retained from v1; remove page by page) ===== */
/* ===== Dark-mode compatibility overrides (page-specific hardcoded whites) ===== */
/* Common card/panel/container class names used across pages */
[data-theme="dark"] .card,
[data-theme="dark"] .card-header,
[data-theme="dark"] .container,
[data-theme="dark"] .modal-box,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-body,
[data-theme="dark"] .modal-footer,
[data-theme="dark"] .modal-detail,
[data-theme="dark"] .search-container,
[data-theme="dark"] .filter-bar,
[data-theme="dark"] .result-summary,
[data-theme="dark"] .chart-card,
[data-theme="dark"] .metric-card,
[data-theme="dark"] .listing-card,
[data-theme="dark"] .table-card,
[data-theme="dark"] .profit-form,
[data-theme="dark"] .main-account-section,
[data-theme="dark"] .profile-section,
[data-theme="dark"] .info-box,
[data-theme="dark"] .warning-box,
[data-theme="dark"] .form-title,
[data-theme="dark"] .kpi,
[data-theme="dark"] .footer-note,
[data-theme="dark"] .note,
[data-theme="dark"] .navbar,
[data-theme="dark"] .navigation,
[data-theme="dark"] .toolbar,
[data-theme="dark"] .sticky-head,
[data-theme="dark"] .template-item,
[data-theme="dark"] .summary-card,
[data-theme="dark"] .top-tab-panel,
[data-theme="dark"] .tab-panel,
[data-theme="dark"] .card-container,
[data-theme="dark"] .item-card,
[data-theme="dark"] .product-card,
[data-theme="dark"] .result-card {
  background-color: var(--white) !important;
  color: var(--gray-700);
  border-color: var(--gray-200);
}

/* Inline dark-text-on-light patterns used in generated product cards */
[data-theme="dark"] [style*="color: #333"],
[data-theme="dark"] [style*="color:#333"],
[data-theme="dark"] [style*="color: #000"],
[data-theme="dark"] [style*="color:#000"] {
  color: var(--gray-900) !important;
}

/* Product card inline badge backgrounds (Watchers/Item ID/Listed) */
[data-theme="dark"] [style*="background: #e3f2fd"],
[data-theme="dark"] [style*="background:#e3f2fd"] {
  background: rgba(21, 101, 192, .22) !important;
  color: #7cc5ff !important;
}
[data-theme="dark"] [style*="background: #fce4ec"],
[data-theme="dark"] [style*="background:#fce4ec"] {
  background: rgba(173, 20, 87, .22) !important;
  color: #f48fb1 !important;
}
[data-theme="dark"] [style*="background: #e8f5e9"],
[data-theme="dark"] [style*="background:#e8f5e9"] {
  background: rgba(46, 125, 50, .22) !important;
  color: #81c784 !important;
}
/* SHR page: import button (pale purple) */
[data-theme="dark"] [style*="background: #f3e8f9"],
[data-theme="dark"] [style*="background:#f3e8f9"] {
  background: rgba(142, 68, 173, .22) !important;
  color: #d4a5ff !important;
  border-color: rgba(142, 68, 173, .6) !important;
}

/* SHR page: Summary bar (Total Sold) */
[data-theme="dark"] .summary-bar {
  background-color: rgba(142, 68, 173, .15) !important;
  color: var(--gray-800) !important;
  border-bottom-color: rgba(142, 68, 173, .35) !important;
}
[data-theme="dark"] .summary-bar .stat-value {
  color: var(--gray-900) !important;
}

/* SHR page: item card separator + gray meta */
[data-theme="dark"] .item-card {
  border-bottom-color: var(--gray-200) !important;
}
[data-theme="dark"] .item-card__meta {
  color: var(--gray-500) !important;
}
/* Tiny gray texts inside generated thumbs (color:#444, color:#666 inline) */
[data-theme="dark"] [style*="color: #444"],
[data-theme="dark"] [style*="color:#444"],
[data-theme="dark"] [style*="color: #666"],
[data-theme="dark"] [style*="color:#666"] {
  color: var(--gray-500) !important;
}

/* Tabs (inactive / active) */
[data-theme="dark"] .top-tab-btn,
[data-theme="dark"] .tab-btn {
  background: var(--gray-100) !important;
  color: var(--gray-500) !important;
  border-color: var(--gray-200) !important;
}
[data-theme="dark"] .top-tab-btn:hover,
[data-theme="dark"] .tab-btn:hover {
  background: var(--gray-200) !important;
  color: var(--gray-800) !important;
}
[data-theme="dark"] .top-tab-btn.active,
[data-theme="dark"] .tab-btn.active {
  background: var(--white) !important;
  color: #2dd4bf !important;
  border-bottom-color: var(--white) !important;
}

/* Bootstrap card-header accent (both modes) + overflow cleanup */
.card {
  overflow: hidden;
}
.card > .card-header {
  background-color: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
  padding: 14px 18px;
}
[data-theme="dark"] .card > .card-header {
  background-color: var(--gray-100) !important;
  border-bottom-color: var(--gray-200) !important;
}

/* Bootstrap utility class overrides for dark mode */
[data-theme="dark"] .bg-light,
[data-theme="dark"] .bg-white {
  background-color: var(--gray-100) !important;
  color: var(--gray-900) !important;
}
[data-theme="dark"] .text-dark {
  color: var(--gray-900) !important;
}
[data-theme="dark"] .text-muted {
  color: var(--gray-500) !important;
}
[data-theme="dark"] .border {
  border-color: var(--gray-300) !important;
}

/* Stats containers / result summary rows (light blue bg in light mode) */
[data-theme="dark"] .stats-container {
  background-color: var(--gray-100) !important;
  color: var(--gray-700);
}
[data-theme="dark"] .stat-box {
  border-color: var(--gray-200) !important;
}

/* Loading overlays with hardcoded white translucent background */
[data-theme="dark"] #loading-overlay,
[data-theme="dark"] .loading-overlay {
  background-color: rgba(16, 24, 40, .75) !important;
}
[data-theme="dark"] .loading-text {
  color: var(--gray-900) !important;
}
[data-theme="dark"] .loading-tip {
  color: var(--gray-500) !important;
}
[data-theme="dark"] .spinner {
  border-color: var(--gray-200) !important;
  border-top-color: #2dd4bf !important;
}

/* Sidebar active nav item: use dark teal tint instead of pale green */
[data-theme="dark"] .g-nav-item.active {
  background: rgba(45, 212, 191, .12);
  color: #2dd4bf;
}
[data-theme="dark"] .g-nav-item.active .g-nav-icon {
  color: #2dd4bf;
}

/* Inline style hardcoded whites */
[data-theme="dark"] [style*="background:#fff"],
[data-theme="dark"] [style*="background: #fff"],
[data-theme="dark"] [style*="background:#FFF"],
[data-theme="dark"] [style*="background: #FFF"],
[data-theme="dark"] [style*="background:#ffffff"],
[data-theme="dark"] [style*="background: #ffffff"],
[data-theme="dark"] [style*="background: white"],
[data-theme="dark"] [style*="background:white"],
[data-theme="dark"] [style*="background-color:#fff"],
[data-theme="dark"] [style*="background-color: #fff"],
[data-theme="dark"] [style*="background-color:#ffffff"],
[data-theme="dark"] [style*="background-color: #ffffff"],
[data-theme="dark"] [style*="background-color: white"],
[data-theme="dark"] [style*="background-color:white"] {
  background-color: var(--white) !important;
  background: var(--white) !important;
}

/* Tables */
[data-theme="dark"] table {
  background: transparent;
  color: var(--gray-700);
}
[data-theme="dark"] thead,
[data-theme="dark"] thead tr,
[data-theme="dark"] thead th {
  background-color: var(--gray-100) !important;
  color: var(--gray-800);
  border-color: var(--gray-200) !important;
}
[data-theme="dark"] tbody,
[data-theme="dark"] tbody tr {
  background-color: var(--white) !important;
}
[data-theme="dark"] tbody td,
[data-theme="dark"] tbody th {
  background-color: transparent !important;
  color: var(--gray-700);
  border-color: var(--gray-200) !important;
}
[data-theme="dark"] tbody tr:hover {
  background-color: var(--gray-100) !important;
}
[data-theme="dark"] tbody tr:nth-child(even) {
  background-color: var(--gray-100);
}

/* Form controls */
[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
[data-theme="dark"] select,
[data-theme="dark"] textarea,
[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus {
  background-color: var(--gray-100) !important;
  color: var(--gray-900) !important;
  border-color: var(--gray-300);
  -webkit-text-fill-color: var(--gray-900);
}
[data-theme="dark"] input:-webkit-autofill,
[data-theme="dark"] textarea:-webkit-autofill,
[data-theme="dark"] select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--gray-100) inset !important;
  -webkit-text-fill-color: var(--gray-900) !important;
  caret-color: var(--gray-900);
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: var(--gray-500);
}

/* Global placeholder softening (all pages, both modes) */
input::placeholder,
textarea::placeholder {
  color: var(--gray-400) !important;
  opacity: 0.55 !important;
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: var(--gray-500) !important;
  opacity: 0.5 !important;
}

/* Headings / plain text drifts */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
  color: var(--gray-900);
}