/* =====================================================================
   App theme — ported 1:1 from the OpsWatch design system
   (frontend/src/index.css + tailwind.config.js).

   Loaded BEFORE the Tailwind CDN script so that utilities (px-2, text-xs …)
   still win over the component classes below, exactly like Tailwind's
   @layer components ordering. Overrides that must beat utilities use a
   higher-specificity `html …` selector instead of !important where possible.

   Light is the default; <html class="dark"> switches every token.
   ===================================================================== */

/* ------------------------------------------------------------------ */
/* Theme palettes — dark tokens on :root, light on html:not(.dark)    */
/* ------------------------------------------------------------------ */
:root {
  --c-bg: 13 27 42;          /* #0d1b2a dark navy */
  --c-bg-deep: 9 21 33;      /* #091521 */
  --c-card: 19 34 53;        /* #132235 */
  --c-hover: 27 38 59;       /* #1b263b */
  --c-inset: 16 30 47;       /* #101e2f */
  --c-line: 36 52 77;        /* #24344d */
  --c-line-strong: 51 70 99; /* #334663 */
  --c-ink: 232 237 243;      /* #e8edf3 */
  --c-ink-dim: 163 177 196;  /* #a3b1c4 */
  --c-ink-faint: 119 141 169;/* #778da9 */

  /* sidebar — Softnix Blue (blue-700) in both themes */
  --c-sidebar-bg: 31 110 163;
  --c-sidebar-line: 67 133 178;
  --c-sidebar-ink: 255 255 255;
  --c-sidebar-ink-dim: 214 232 244;
  --c-sidebar-ink-faint: 176 208 230;
  --c-sidebar-hover: 53 125 172;
  --c-sidebar-accent: 169 203 46;
  --c-sidebar-accent-bg: 169 203 46;

  /* status tone — text shades tuned for dark backgrounds */
  --c-ok: 74 222 128;
  --c-warn: 253 199 12;
  --c-alert: 243 144 63;
  --c-crit: 240 117 114;
  --c-busy: 94 173 214;
  --c-idle: 163 177 196;
  --c-lime: 190 222 80;
  /* status tone — solid brand fills (same in both themes) */
  --c-ok-fill: 34 197 94;
  --c-warn-fill: 253 199 12;
  --c-alert-fill: 243 144 63;
  --c-crit-fill: 229 57 53;
  --c-busy-fill: 39 134 194;
  --c-idle-fill: 119 141 169;

  --soft-overlay: rgb(255 255 255 / 0.05);
  --soft-row-hover: rgb(255 255 255 / 0.03);
  --code-bg: #091521;
  --chart-grid: #1b263b;
  --chart-tick: #778da9;
  --chart-tip-bg: #0d1b2a;
  --chart-tip-border: #24344d;

  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.18);
  --shadow-card: 0 1px 1px 0 rgb(0 0 0 / 0.14);
  --shadow-dropdown: 0 0 0 1px rgb(255 255 255 / 0.04), 0 4px 6px -2px rgb(0 0 0 / 0.25), 0 12px 24px -4px rgb(0 0 0 / 0.35);
  --shadow-sidebar: 0 1px 0 0 rgb(0 0 0 / 0.1), 0 1px 12px 0 rgb(0 0 0 / 0.25);
  --shadow-modal: 0 20px 25px -5px rgb(0 0 0 / 0.35), 0 10px 10px -5px rgb(0 0 0 / 0.2);
  --shadow-nav-selected: inset 0 1px 0 0 rgb(255 255 255 / 0.16), 0 1px 2px 0 rgb(0 0 0 / 0.18);
  color-scheme: dark;
}

html.light,
html:not(.dark) {
  --c-bg: 244 245 249;       /* #f4f5f9 */
  --c-bg-deep: 255 255 255;
  --c-card: 255 255 255;
  --c-hover: 238 240 246;    /* #eef0f6 */
  --c-inset: 247 248 250;    /* #f7f8fa */
  --c-line: 230 233 240;     /* #e6e9f0 */
  --c-line-strong: 214 219 229; /* #d6dbe5 */
  --c-ink: 13 27 42;         /* #0d1b2a */
  --c-ink-dim: 65 90 119;    /* #415a77 */
  --c-ink-faint: 95 113 137; /* #5f7189 */

  --c-ok: 21 128 61;
  --c-warn: 134 103 0;
  --c-alert: 156 83 16;
  --c-crit: 198 40 40;
  --c-busy: 31 110 163;
  --c-idle: 79 101 130;
  --c-lime: 86 104 18;

  --soft-overlay: rgb(13 27 42 / 0.05);
  --soft-row-hover: rgb(13 27 42 / 0.03);
  --code-bg: #0d1b2a;
  --chart-grid: #dde3ea;
  --chart-tick: #8a9ab0;
  --chart-tip-bg: #ffffff;
  --chart-tip-border: #dde3ea;

  --shadow-xs: 0 1px 2px 0 rgb(13 27 42 / 0.06);
  --shadow-card: 0 1px 1px 0 rgb(13 27 42 / 0.05);
  --shadow-dropdown: 0 0 0 1px rgb(13 27 42 / 0.04), 0 1px 1px 0 rgb(13 27 42 / 0.04), 0 4px 4px 0 rgb(13 27 42 / 0.02), 0 12px 24px -6px rgb(13 27 42 / 0.12);
  --shadow-sidebar: 0 1px 0 0 rgb(13 27 42 / 0.02), 0 1px 12px 0 rgb(13 27 42 / 0.06), 0 0 1px 0 rgb(13 27 42 / 0.32);
  --shadow-modal: 0 20px 25px -5px rgb(13 27 42 / 0.12), 0 10px 10px -5px rgb(13 27 42 / 0.05);
  --shadow-nav-selected: inset 0 1px 0 0 rgb(255 255 255 / 0.25), 0 1px 2px 0 rgb(13 27 42 / 0.12);
  color-scheme: light;
}

/* ------------------------------------------------------------------ */
/* Base                                                               */
/* ------------------------------------------------------------------ */
html, body { overflow-x: clip; }
html {
  color: rgb(var(--c-ink));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: rgb(var(--c-bg));
}
body {
  background-color: rgb(var(--c-bg));
  color: rgb(var(--c-ink));
  min-height: 100vh;
  font-family: "IBM Plex Sans Thai Looped", Sarabun, Poppins, system-ui, -apple-system, sans-serif;
}
h1, h2, h3, h4 { font-family: Poppins, "IBM Plex Sans Thai Looped", Sarabun, system-ui, -apple-system, sans-serif; }
::selection { background: rgb(58 151 207 / 0.4); }

* { scrollbar-width: thin; scrollbar-color: rgb(var(--c-line)) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: rgb(var(--c-line)); border-radius: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* Raw form controls that were never given a class still follow the theme.
   :where() keeps specificity at 0 so any utility/component class wins. */
:where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]), select, textarea) {
  background-color: rgb(var(--c-card));
  color: rgb(var(--c-ink));
  border-color: rgb(var(--c-line));
}
:where(input, select, textarea)::placeholder { color: rgb(var(--c-ink-faint)); }
:where(input[type=checkbox], input[type=radio]) { accent-color: #1f6ea3; }

/* ------------------------------------------------------------------ */
/* Components (BoardUI → Softnix)                                     */
/* ------------------------------------------------------------------ */
.card {
  border-radius: 14px;
  border: 1px solid rgb(var(--c-line));
  background-color: rgb(var(--c-card));
  box-shadow: var(--shadow-card);
}

.btn, .btn-primary, .btn-danger, .btn-secondary, .btn-ghost, .btn-plain, .btn-soft {
  display: inline-flex;
  user-select: none;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  white-space: nowrap;
  border-radius: 10px;
  padding: 0.5rem 0.875rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition-property: background-color, border-color, box-shadow, color, transform, filter;
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
:is(.btn, .btn-primary, .btn-danger, .btn-secondary, .btn-ghost, .btn-plain, .btn-soft):focus { outline: none; }
:is(.btn, .btn-primary, .btn-danger, .btn-secondary, .btn-ghost, .btn-plain, .btn-soft):focus-visible {
  box-shadow: 0 0 0 2px rgb(var(--c-bg)), 0 0 0 4px rgb(58 151 207 / 0.5);
}
:is(.btn, .btn-primary, .btn-danger, .btn-secondary, .btn-ghost, .btn-plain, .btn-soft):active { transform: translateY(1px); }
:is(.btn, .btn-primary, .btn-danger, .btn-secondary, .btn-ghost, .btn-plain, .btn-soft):disabled,
:is(.btn, .btn-primary, .btn-danger, .btn-secondary, .btn-ghost, .btn-plain, .btn-soft)[disabled] {
  pointer-events: none;
  opacity: 0.5;
}

.btn-primary { background-color: #1f6ea3; color: #fff; box-shadow: var(--shadow-xs); }
.btn-primary:hover { background-color: #1a5a8a; color: #fff; }
.btn-primary:active { background-color: #164a70; }

.btn-danger { background-color: rgb(var(--c-crit-fill)); color: #fff; box-shadow: var(--shadow-xs); }
.btn-danger:hover { filter: brightness(0.95); color: #fff; }
.btn-danger:active { filter: brightness(0.9); }

.btn-secondary, .btn-ghost {
  border: 1px solid rgb(var(--c-line));
  background-color: rgb(var(--c-card));
  color: rgb(var(--c-ink));
  box-shadow: var(--shadow-xs);
}
.btn-secondary:hover, .btn-ghost:hover { background-color: rgb(var(--c-inset)); }
html.dark .btn-secondary, html.dark .btn-ghost { color: rgb(var(--c-ink-dim)); }
html.dark .btn-secondary:hover, html.dark .btn-ghost:hover { background-color: rgb(var(--c-hover)); color: rgb(var(--c-ink)); }

.btn-plain { color: rgb(var(--c-ink-dim)); }
.btn-plain:hover { background-color: rgb(var(--c-hover)); color: rgb(var(--c-ink)); }

.btn-soft { background-color: rgb(58 151 207 / 0.1); color: #1f6ea3; }
.btn-soft:hover { background-color: rgb(58 151 207 / 0.15); }
.btn-soft:active { background-color: rgb(58 151 207 / 0.2); }
html.dark .btn-soft { color: #86c0e3; }

/* Coloured "status" buttons (export, approve…) keep their meaning but use the tone fills */
.btn-ok { background-color: rgb(var(--c-ok-fill)); color: #fff; box-shadow: var(--shadow-xs); }
.btn-ok:hover { filter: brightness(0.95); color: #fff; }
.btn-warn { background-color: rgb(var(--c-warn-fill)); color: #0d1b2a; box-shadow: var(--shadow-xs); }
.btn-warn:hover { filter: brightness(0.95); }
.btn-alert { background-color: rgb(var(--c-alert-fill)); color: #fff; box-shadow: var(--shadow-xs); }
.btn-alert:hover { filter: brightness(0.95); color: #fff; }

/* size modifiers — must stay after the variants */
.btn-sm { padding: 0.375rem 0.75rem; }
.btn-xs { gap: 0.25rem; border-radius: 8px; padding: 0.25rem 0.5rem; font-size: 0.75rem; line-height: 1rem; }
.btn-icon { aspect-ratio: 1 / 1; padding-left: 0; padding-right: 0; }

/* Legacy table action buttons (btn-view / btn-edit / btn-delete) */
.btn-view { background-color: rgb(58 151 207 / 0.1); color: #1f6ea3; }
.btn-view:hover { background-color: rgb(58 151 207 / 0.18); }
html.dark .btn-view { color: #86c0e3; }
.btn-edit { border: 1px solid rgb(var(--c-line)); background-color: rgb(var(--c-card)); color: rgb(var(--c-ink-dim)); }
.btn-edit:hover { background-color: rgb(var(--c-hover)); color: rgb(var(--c-ink)); }
.btn-delete { background-color: rgb(var(--c-crit-fill) / 0.1); color: rgb(var(--c-crit)); }
.btn-delete:hover { background-color: rgb(var(--c-crit-fill) / 0.18); }
html .btn.rounded, html .btn.rounded-lg, html .btn.rounded-md { border-radius: 8px; }

.input {
  width: 100%;
  border-radius: 10px;
  border: 1px solid rgb(var(--c-line));
  background-color: rgb(var(--c-card));
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: rgb(var(--c-ink));
  transition: background-color 150ms, border-color 150ms, box-shadow 150ms;
}
.input::placeholder { color: rgb(var(--c-ink-faint)); }
.input:hover { border-color: rgb(var(--c-ink-faint) / 0.5); }
.input:focus { border-color: #3a97cf; outline: none; box-shadow: 0 0 0 3px rgb(58 151 207 / 0.15); }
.input:disabled, .input[readonly] { cursor: not-allowed; opacity: 0.6; }
.input[readonly] { cursor: default; opacity: 1; background-color: rgb(var(--c-inset)); }
textarea.input { min-height: 2.5rem; }

.label {
  margin-bottom: 0.375rem;
  display: block;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  color: rgb(var(--c-ink-dim));
}

.th {
  white-space: nowrap;
  border-top: 1px solid rgb(var(--c-line));
  border-bottom: 1px solid rgb(var(--c-line));
  background-color: rgb(var(--c-inset));
  padding: 0.625rem 0.75rem;
  text-align: left;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  color: rgb(var(--c-ink-dim));
}
.td { padding: 0.625rem 0.75rem; font-size: 0.875rem; line-height: 1.25rem; }

/* Data tables inside cards get the .th / .td look without touching every view.
   (Only tables with a <thead> — key/value summary tables stay compact.) */
html .card table:has(> thead) > thead > tr > th,
html table.dataTable > thead > tr > th {
  white-space: nowrap;
  border-top: 1px solid rgb(var(--c-line));
  border-bottom: 1px solid rgb(var(--c-line));
  background-color: rgb(var(--c-inset));
  padding: 0.625rem 0.75rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  color: rgb(var(--c-ink-dim));
}
html .card table:has(> thead) > thead > tr { border: 0; }
html .card table:has(> thead) > tbody > tr > td,
html table.dataTable > tbody > tr > td {
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid rgb(var(--c-line));
}
html .card table:has(> thead) > tbody > tr:last-child > td,
html table.dataTable > tbody > tr:last-child > td { border-bottom: 0; }
html .card table:has(> thead) > tbody > tr,
html table.dataTable > tbody > tr { border-bottom: 0; background-color: transparent; transition: background-color 100ms; }
html .card table:has(> thead) > tbody > tr:hover,
html table.dataTable > tbody > tr:hover { background-color: var(--soft-row-hover); }
html .card table:has(> thead) > tfoot > tr > td,
html .card table:has(> thead) > tfoot > tr > th { padding: 0.625rem 0.75rem; border-top: 1px solid rgb(var(--c-line)); }

.pg-btn {
  display: inline-flex; height: 1.75rem; min-width: 28px; align-items: center; justify-content: center;
  border-radius: 8px; padding: 0 0.375rem; font-size: 0.75rem; line-height: 1rem; font-weight: 500;
  color: rgb(var(--c-ink-dim)); transition: background-color 150ms, color 150ms;
}
.pg-btn:hover:not(:disabled):not(.pg-btn-active) { background-color: var(--soft-overlay); color: rgb(var(--c-ink)); }
.pg-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.pg-btn-active { background-color: #1f6ea3; color: #fff; box-shadow: var(--shadow-xs); }

.segmented { display: inline-flex; align-items: center; gap: 0.125rem; border-radius: 10px; background-color: rgb(var(--c-hover)); padding: 0.25rem; }
.segmented-item {
  display: inline-flex; height: 1.75rem; cursor: pointer; align-items: center; justify-content: center; gap: 0.375rem;
  white-space: nowrap; border-radius: 8px; padding: 0 0.625rem; font-size: 0.875rem; line-height: 1.25rem;
  color: rgb(var(--c-ink-dim)); transition: color 150ms, background-color 150ms;
}
.segmented-item:hover { color: rgb(var(--c-ink)); }
.segmented-item[aria-pressed='true'], .segmented-item[aria-selected='true'], .segmented-item.is-active {
  background-color: rgb(var(--c-card)); font-weight: 500; color: rgb(var(--c-ink)); box-shadow: var(--shadow-xs);
}
html.dark .segmented { background-color: rgb(var(--c-inset)); }
html.dark .segmented-item[aria-pressed='true'], html.dark .segmented-item[aria-selected='true'], html.dark .segmented-item.is-active {
  background-color: rgb(58 151 207 / 0.25); color: rgb(var(--c-ink)); box-shadow: none;
}

.menu-surface { border-radius: 10px; border: 1px solid rgb(var(--c-line)); background-color: rgb(var(--c-card)); padding: 0.25rem; box-shadow: var(--shadow-dropdown); }
.menu-item {
  display: flex; width: 100%; align-items: center; gap: 0.5rem; border-radius: 8px; padding: 0.375rem 0.625rem;
  text-align: left; font-size: 0.875rem; line-height: 1.25rem; color: rgb(var(--c-ink)); transition: background-color 150ms;
}
.menu-item:hover, .menu-item.is-active { background-color: rgb(var(--c-hover)); }

.kbd {
  display: inline-flex; align-items: center; border-radius: 6px; background-color: rgb(var(--c-hover));
  padding: 0.125rem 0.375rem; font-size: 11px; font-weight: 500; line-height: 1rem; color: rgb(var(--c-ink-dim));
}

/* Chips — ref <Chip> / <StatusChip> */
.chip {
  display: inline-flex; max-width: 100%; flex-shrink: 0; align-items: center; gap: 0.375rem; white-space: nowrap;
  border-radius: 6px; padding: 0.125rem 0.5rem; font-size: 0.75rem; line-height: 1rem; font-weight: 500;
}
.chip-dot::before { content: ''; width: 6px; height: 6px; flex-shrink: 0; border-radius: 9999px; background: var(--chip-dot, currentColor); }
.chip-ok    { background-color: rgb(var(--c-ok) / 0.1);    color: rgb(var(--c-ok));    --chip-dot: rgb(var(--c-ok-fill)); }
.chip-warn  { background-color: rgb(var(--c-warn) / 0.1);  color: rgb(var(--c-warn));  --chip-dot: rgb(var(--c-warn-fill)); }
.chip-alert { background-color: rgb(var(--c-alert) / 0.1); color: rgb(var(--c-alert)); --chip-dot: rgb(var(--c-alert-fill)); }
.chip-crit  { background-color: rgb(var(--c-crit) / 0.1);  color: rgb(var(--c-crit));  --chip-dot: rgb(var(--c-crit-fill)); }
.chip-busy  { background-color: rgb(var(--c-busy) / 0.1);  color: rgb(var(--c-busy));  --chip-dot: rgb(var(--c-busy-fill)); }
.chip-idle  { background-color: rgb(var(--c-idle) / 0.1);  color: rgb(var(--c-idle));  --chip-dot: rgb(var(--c-idle-fill)); }
.chip-blue  { background-color: rgb(58 151 207 / 0.1);     color: #1f6ea3;            --chip-dot: #3a97cf; }
html.dark .chip-blue { color: #86c0e3; }
.chip-lime  { background-color: rgb(169 203 46 / 0.16);    color: rgb(var(--c-lime));  --chip-dot: #a9cb2e; }

/* Page / card headings — ref <PageHeader> / <CardHeader> */
.page-header { margin-bottom: 1.25rem; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; column-gap: 1rem; row-gap: 0.75rem; }
.page-title { font-size: 1.5rem; line-height: 1.25; font-weight: 600; color: rgb(var(--c-ink)); }
@media (min-width: 640px) { .page-title { font-size: 26px; } }
.page-subtitle { margin-top: 0.25rem; font-size: 0.875rem; color: rgb(var(--c-ink-dim)); }
.card-title { font-size: 15px; line-height: 1.25; font-weight: 600; color: rgb(var(--c-ink)); }

/* Stat card — ref <StatCard> */
.stat-icon {
  display: flex; width: 1.75rem; height: 1.75rem; flex-shrink: 0; align-items: center; justify-content: center;
  border-radius: 8px; background-color: rgb(58 151 207 / 0.1); color: #3a97cf; font-size: 0.8rem;
}
html.dark .stat-icon { color: #5eadd6; }
.stat-label { font-size: 13px; font-weight: 500; color: rgb(var(--c-ink-dim)); }
.stat-value { font-family: Poppins, "IBM Plex Sans Thai Looped", sans-serif; font-size: 1.5rem; line-height: 1.25; font-weight: 600; font-variant-numeric: tabular-nums; color: rgb(var(--c-ink)); }
.stat-foot { margin-top: auto; border-top: 1px solid rgb(var(--c-line)); background-color: rgb(var(--c-bg) / 0.5); padding: 0.5rem 1rem; font-size: 0.75rem; color: rgb(var(--c-ink-faint)); }

/* Tabs — ref <Tabs variant="underline"> */
.tabs { display: flex; gap: 0.25rem; overflow-x: auto; border-bottom: 1px solid rgb(var(--c-line)); scrollbar-width: none; }
.tab {
  margin-bottom: -1px; display: inline-flex; flex-shrink: 0; align-items: center; gap: 0.5rem; white-space: nowrap;
  border-bottom: 2px solid transparent; padding: 0.625rem 0.75rem; font-size: 0.875rem; color: rgb(var(--c-ink-dim)); transition: color 150ms;
}
.tab:hover { color: rgb(var(--c-ink)); }
.tab.is-active { border-color: #2786c2; font-weight: 600; color: #1f6ea3; }
html.dark .tab.is-active { color: #5eadd6; }

/* Modal — ref <Modal> */
.modal-backdrop { background-color: rgb(0 0 0 / 0.5); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.modal-panel { border-radius: 14px; border: 1px solid rgb(var(--c-line)); background-color: rgb(var(--c-card)); box-shadow: var(--shadow-modal); }
.modal-foot { border-top: 1px solid rgb(var(--c-line)); background-color: rgb(var(--c-inset)); }

/* Empty state — ref <EmptyState> */
.empty-icon { margin: 0 auto 0.75rem; display: flex; width: 2.75rem; height: 2.75rem; align-items: center; justify-content: center; border-radius: 14px; background-color: rgb(var(--c-hover)); color: rgb(var(--c-ink-faint)); }

/* Avatar tints — ref <Avatar> */
.avatar { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; border-radius: 9999px; font-weight: 600; }
.avatar-lime { background-color: #a9cb2e; color: #0f172a; }
.avatar-blue { background-color: rgb(58 151 207 / 0.15); color: #3a97cf; }

/* ------------------------------------------------------------------ */
/* App shell — floating sidebar, sticky blurred header                */
/* ------------------------------------------------------------------ */
#sidebar {
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1), width 200ms cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateX(-120%);
}
#sidebar.is-open { transform: translateX(0); box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); }
#appMain { transition: padding 200ms cubic-bezier(0.4, 0, 0.2, 1); }
@media (min-width: 1024px) {
  #sidebar { transform: translateX(0); width: 232px; }
  #appMain { padding-left: 256px; }
  html.sidebar-collapsed #sidebar { width: 64px; }
  html.sidebar-collapsed #appMain { padding-left: 88px; }
  html.sidebar-collapsed #sidebar .hide-collapsed { display: none !important; }
  html.sidebar-collapsed #sidebar .show-collapsed { display: flex !important; }
  html.sidebar-collapsed #sidebar .collapse-center { justify-content: center; padding-left: 0; padding-right: 0; }
  html.sidebar-collapsed #sidebar .collapse-px { padding-left: 0.5rem; padding-right: 0.5rem; }
  html.sidebar-collapsed #sidebar .collapse-chevron { transform: rotate(180deg); }
  html.sidebar-collapsed #collapseChevron { transform: rotate(180deg); }
  html.sidebar-collapsed #sidebar .brand-row { padding: 1rem 0 0.75rem; justify-content: center; }
}
.show-collapsed { display: none; }

@keyframes pageIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes scaleIn { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }
@keyframes navIn { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } }
/* no fill-mode: a retained transform would make fixed children (modals) position against this box */
.animate-page-in { animation: pageIn 0.26s cubic-bezier(0.22, 1, 0.36, 1); }
.animate-fade-in { animation: fadeIn 0.2s ease-out; }
.animate-scale-in { animation: scaleIn 0.18s ease-out; }

/* ------------------------------------------------------------------ */
/* Compatibility layer — maps the legacy hard-coded utilities used in  */
/* the PHP views onto the tokens above (both themes).                 */
/* slate/gray are remapped in tailwind.config; these cover the rest.  */
/* ------------------------------------------------------------------ */
html .bg-white { background-color: rgb(var(--c-card)); }
html .hover\:bg-white:hover { background-color: rgb(var(--c-card)); }
html .shadow, html .shadow-sm { box-shadow: var(--shadow-card); }
html .shadow-md, html .shadow-lg { box-shadow: var(--shadow-dropdown); }
html .shadow-xl, html .shadow-2xl { box-shadow: var(--shadow-modal); }
html .border-transparent { border-color: transparent; }

/* ok — green / emerald / teal / lime */
html :is(.bg-green-50, .bg-green-100, .bg-emerald-50, .bg-emerald-100, .bg-teal-50, .bg-teal-100, .bg-lime-50, .bg-lime-100) { background-color: rgb(var(--c-ok) / 0.1); }
html :is(.hover\:bg-green-50, .hover\:bg-green-100, .hover\:bg-emerald-50, .hover\:bg-emerald-100):hover { background-color: rgb(var(--c-ok) / 0.15); }
html :is(.text-green-500, .text-green-600, .text-green-700, .text-green-800, .text-emerald-500, .text-emerald-600, .text-emerald-700, .text-emerald-800, .text-teal-600, .text-teal-700) { color: rgb(var(--c-ok)); }
html :is(.border-green-200, .border-green-300, .border-green-400, .border-green-500, .border-emerald-200, .border-emerald-300) { border-color: rgb(var(--c-ok) / 0.3); }
html :is(.bg-green-500, .bg-green-600, .bg-emerald-500, .bg-emerald-600) { background-color: rgb(var(--c-ok-fill)); }
html :is(.hover\:bg-green-600, .hover\:bg-green-700, .hover\:bg-emerald-600, .hover\:bg-emerald-700):hover { background-color: rgb(var(--c-ok-fill)); filter: brightness(0.95); }

/* warn — amber / yellow */
html :is(.bg-amber-50, .bg-amber-100, .bg-yellow-50, .bg-yellow-100) { background-color: rgb(var(--c-warn-fill) / 0.12); }
html :is(.hover\:bg-amber-50, .hover\:bg-amber-100, .hover\:bg-yellow-50, .hover\:bg-yellow-100):hover { background-color: rgb(var(--c-warn-fill) / 0.18); }
html :is(.text-amber-500, .text-amber-600, .text-amber-700, .text-amber-800, .text-yellow-500, .text-yellow-600, .text-yellow-700, .text-yellow-800) { color: rgb(var(--c-warn)); }
html :is(.border-amber-200, .border-amber-300, .border-amber-400, .border-yellow-200, .border-yellow-300) { border-color: rgb(var(--c-warn-fill) / 0.35); }
html :is(.bg-amber-400, .bg-amber-500, .bg-yellow-400, .bg-yellow-500) { background-color: rgb(var(--c-warn-fill)); }

/* alert — orange */
html :is(.bg-orange-50, .bg-orange-100) { background-color: rgb(var(--c-alert-fill) / 0.12); }
html :is(.text-orange-500, .text-orange-600, .text-orange-700, .text-orange-800) { color: rgb(var(--c-alert)); }
html :is(.border-orange-200, .border-orange-300) { border-color: rgb(var(--c-alert-fill) / 0.35); }
html :is(.bg-orange-500, .bg-orange-600) { background-color: rgb(var(--c-alert-fill)); }

/* crit — red / rose */
html :is(.bg-red-50, .bg-red-100, .bg-rose-50, .bg-rose-100) { background-color: rgb(var(--c-crit) / 0.1); }
html :is(.hover\:bg-red-50, .hover\:bg-red-100, .hover\:bg-rose-50):hover { background-color: rgb(var(--c-crit) / 0.15); }
html :is(.text-red-400, .text-red-500, .text-red-600, .text-red-700, .text-red-800, .text-rose-600, .text-rose-700) { color: rgb(var(--c-crit)); }
html :is(.hover\:text-red-600, .hover\:text-red-700, .hover\:text-red-800):hover { color: rgb(var(--c-crit)); }
html :is(.border-red-200, .border-red-300, .border-red-400, .border-red-500) { border-color: rgb(var(--c-crit) / 0.3); }
html :is(.bg-red-500, .bg-red-600, .bg-rose-500, .bg-rose-600) { background-color: rgb(var(--c-crit-fill)); }
html :is(.hover\:bg-red-600, .hover\:bg-red-700):hover { background-color: rgb(var(--c-crit-fill)); filter: brightness(0.95); }

/* blue / sky / indigo / brand tints — Softnix Blue decor */
html :is(.bg-blue-50, .bg-blue-100, .bg-sky-50, .bg-sky-100, .bg-indigo-50, .bg-indigo-100, .bg-cyan-50, .bg-cyan-100, .bg-brand-50, .bg-brand-100) { background-color: rgb(58 151 207 / 0.1); }
html :is(.hover\:bg-blue-50, .hover\:bg-blue-100, .hover\:bg-brand-50, .hover\:bg-brand-100, .hover\:bg-sky-50, .hover\:bg-indigo-50):hover { background-color: rgb(58 151 207 / 0.15); }
html :is(.text-sky-600, .text-sky-700, .text-sky-800, .text-indigo-600, .text-indigo-700, .text-indigo-800, .text-cyan-600, .text-cyan-700) { color: #1f6ea3; }
html :is(.border-blue-200, .border-blue-300, .border-sky-200, .border-indigo-200, .border-brand-200, .border-brand-300) { border-color: rgb(58 151 207 / 0.3); }
html.dark :is(.text-blue-500, .text-blue-600, .text-blue-700, .text-blue-800, .text-brand-500, .text-brand-600, .text-brand-700, .text-brand-800, .text-sky-600, .text-sky-700, .text-sky-800, .text-indigo-600, .text-indigo-700, .text-indigo-800, .text-cyan-600, .text-cyan-700) { color: #86c0e3; }
html.dark .text-blue-300 { color: #86c0e3; }
html.light .text-blue-300 { color: #1a5a8a; }
html.light .text-blue-400 { color: #1f6ea3; }

/* purple / violet — not in the brand palette; keep the hue, theme-aware */
html :is(.bg-purple-50, .bg-purple-100, .bg-violet-50, .bg-violet-100, .bg-fuchsia-50, .bg-fuchsia-100) { background-color: rgb(139 92 246 / 0.1); }
html.dark :is(.text-purple-600, .text-purple-700, .text-purple-800, .text-violet-600, .text-violet-700) { color: #c4b5fd; }
html :is(.border-purple-200, .border-violet-200) { border-color: rgb(139 92 246 / 0.3); }

html footer { border-color: rgb(var(--c-line)); }

/* ------------------------------------------------------------------ */
/* DataTables (1.13 + tailwind integration)                           */
/* ------------------------------------------------------------------ */
.dataTables_wrapper { color: rgb(var(--c-ink)); font-size: 0.875rem; }
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_info { color: rgb(var(--c-ink-faint)) !important; font-size: 0.75rem; }
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  border-radius: 10px !important;
  border: 1px solid rgb(var(--c-line)) !important;
  background-color: rgb(var(--c-card)) !important;
  color: rgb(var(--c-ink)) !important;
  padding: 0.5rem 0.75rem !important;
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
  box-shadow: none !important;
  outline: none !important;
  transition: border-color 150ms, box-shadow 150ms;
}
.dataTables_wrapper .dataTables_filter input {
  margin-left: 0 !important;
  width: 16rem;
  max-width: 100%;
  padding-left: 2.25rem !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%23778da9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: 0.75rem center !important;
}
.dataTables_wrapper .dataTables_length select { padding-right: 2rem !important; }
.dataTables_wrapper .dataTables_filter input:hover,
.dataTables_wrapper .dataTables_length select:hover { border-color: rgb(var(--c-ink-faint) / 0.5) !important; }
.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus { border-color: #3a97cf !important; box-shadow: 0 0 0 3px rgb(58 151 207 / 0.15) !important; }
.dataTables_wrapper .dataTables_filter label,
.dataTables_wrapper .dataTables_length label { display: inline-flex; align-items: center; gap: 0.5rem; color: rgb(var(--c-ink-faint)); }
.dataTables_wrapper .dataTables_paginate { display: inline-flex; align-items: center; gap: 0.125rem; }
.dataTables_wrapper .dataTables_paginate > span,
.dataTables_wrapper .dataTables_paginate nav,
.dataTables_wrapper .dataTables_paginate div { display: inline-flex; align-items: center; gap: 0.125rem; box-shadow: none !important; }
.dataTables_wrapper .dataTables_paginate a,
.dataTables_wrapper .dataTables_paginate button,
.dataTables_wrapper .dataTables_paginate .paginate_button {
  display: inline-flex !important; height: 1.75rem !important; min-width: 28px !important;
  align-items: center !important; justify-content: center !important;
  border: 0 !important; border-radius: 8px !important; margin: 0 !important;
  padding: 0 0.5rem !important; font-size: 0.75rem !important; line-height: 1rem !important; font-weight: 500 !important;
  background: transparent !important; color: rgb(var(--c-ink-dim)) !important; cursor: pointer;
  box-shadow: none !important; transition: background-color 150ms, color 150ms;
}
.dataTables_wrapper .dataTables_paginate a:hover,
.dataTables_wrapper .dataTables_paginate button:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: var(--soft-overlay) !important; color: rgb(var(--c-ink)) !important; }
.dataTables_wrapper .dataTables_paginate .current,
.dataTables_wrapper .dataTables_paginate [aria-current="page"],
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: #1f6ea3 !important; color: #fff !important; box-shadow: var(--shadow-xs) !important;
}
.dataTables_wrapper .dataTables_paginate .disabled,
.dataTables_wrapper .dataTables_paginate .disabled:hover { opacity: 0.35; cursor: not-allowed; background: transparent !important; }
.dataTables_wrapper .dataTables_processing {
  border-radius: 10px; border: 1px solid rgb(var(--c-line)); background: rgb(var(--c-card)) !important;
  color: rgb(var(--c-ink-dim)); box-shadow: var(--shadow-dropdown); padding: 0.5rem 1rem; font-size: 0.75rem;
}
table.dataTable { border-collapse: collapse !important; width: 100% !important; }
table.dataTable > tbody > tr.even,
table.dataTable > tbody > tr:nth-child(even),
table.dataTable > tbody > tr.odd { background-color: transparent !important; }
table.dataTable td.dataTables_empty { padding: 2.5rem 0.75rem !important; text-align: center; color: rgb(var(--c-ink-faint)); }
table.dataTable thead .sorting, table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc { cursor: pointer; }

/* ------------------------------------------------------------------ */
/* Select2 — styled like .input / .menu-surface                       */
/* ------------------------------------------------------------------ */
.select2-container { width: 100% !important; }
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  border: 1px solid rgb(var(--c-line)) !important;
  border-radius: 10px !important;
  background-color: rgb(var(--c-card)) !important;
  height: auto !important;
  min-height: 38px;
  padding: 0.375rem 0.75rem;
  transition: border-color 150ms, box-shadow 150ms;
}
.select2-container--default .select2-selection--single:hover { border-color: rgb(var(--c-ink-faint) / 0.5) !important; }
.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 1.5rem !important; color: rgb(var(--c-ink)) !important; font-size: 0.875rem; padding-left: 0 !important;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder { color: rgb(var(--c-ink-faint)) !important; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 100% !important; top: 0 !important; right: 0.5rem !important; }
.select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: rgb(var(--c-ink-faint)) transparent transparent transparent !important; }
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b { border-color: transparent transparent rgb(var(--c-ink-faint)) transparent !important; }
.select2-container--default .select2-selection--single .select2-selection__clear { margin-right: 0.75rem; color: rgb(var(--c-ink-faint)); }
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: #3a97cf !important; box-shadow: 0 0 0 3px rgb(58 151 207 / 0.15) !important; outline: none !important;
}
.select2-container--default .select2-selection--single[aria-disabled='true'] { background: rgb(var(--c-inset)) !important; cursor: not-allowed !important; opacity: 0.7; }
select.text-sm + .select2-container--default .select2-selection--single { padding: 0.125rem 0.5rem; min-height: 32px; }
select.text-sm + .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 1.5rem !important; }
.select2-dropdown,
.select2-container--default .select2-dropdown {
  border: 1px solid rgb(var(--c-line)) !important;
  border-radius: 10px !important;
  background-color: rgb(var(--c-card)) !important;
  box-shadow: var(--shadow-dropdown);
  overflow: hidden;
  padding: 0.25rem;
}
.select2-container--open .select2-dropdown--below { margin-top: 4px; }
.select2-container--open .select2-dropdown--above { margin-top: -4px; }
.select2-container--default .select2-search--dropdown { padding: 0.25rem 0.25rem 0.375rem; }
.select2-container--default .select2-search--dropdown .select2-search__field {
  border: 0 !important; border-radius: 8px; background-color: rgb(var(--c-hover)) !important; color: rgb(var(--c-ink));
  font-size: 0.875rem; padding: 0.375rem 0.625rem; outline: none;
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus { box-shadow: 0 0 0 2px rgb(58 151 207 / 0.4); }
.select2-container--default .select2-results__option {
  font-size: 0.875rem; padding: 0.375rem 0.625rem; border-radius: 8px; color: rgb(var(--c-ink));
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background-color: rgb(var(--c-hover)) !important; color: rgb(var(--c-ink)) !important;
}
.select2-container--default .select2-results__option[aria-selected=true],
.select2-container--default .select2-results__option--selected {
  background-color: transparent; color: #1f6ea3; font-weight: 500;
}
html.dark .select2-container--default .select2-results__option[aria-selected=true],
html.dark .select2-container--default .select2-results__option--selected { color: #86c0e3; }
.select2-container--default .select2-results__message { color: rgb(var(--c-ink-faint)); }

/* ------------------------------------------------------------------ */
/* SweetAlert2 — ref <Modal> / <ConfirmDialog>                        */
/* ------------------------------------------------------------------ */
.swal2-container.swal2-backdrop-show { background: rgb(0 0 0 / 0.5) !important; backdrop-filter: blur(2px); }
.swal2-popup {
  border-radius: 14px !important;
  border: 1px solid rgb(var(--c-line));
  background: rgb(var(--c-card)) !important;
  color: rgb(var(--c-ink)) !important;
  box-shadow: var(--shadow-modal) !important;
  font-family: inherit;
}
.swal2-popup:not(.swal2-toast) { padding: 1.5rem 1.5rem 1.25rem !important; }
.swal2-title { color: rgb(var(--c-ink)) !important; font-size: 1.125rem !important; font-weight: 600 !important; font-family: Poppins, "IBM Plex Sans Thai Looped", sans-serif; }
.swal2-html-container { color: rgb(var(--c-ink-dim)) !important; font-size: 0.875rem !important; }
.swal2-input, .swal2-textarea, .swal2-select {
  border-radius: 10px !important; border: 1px solid rgb(var(--c-line)) !important;
  background: rgb(var(--c-card)) !important; color: rgb(var(--c-ink)) !important;
  font-size: 0.875rem !important; box-shadow: none !important;
}
.swal2-input:focus, .swal2-textarea:focus, .swal2-select:focus { border-color: #3a97cf !important; box-shadow: 0 0 0 3px rgb(58 151 207 / 0.15) !important; }
.swal2-styled {
  border-radius: 10px !important; font-size: 0.875rem !important; font-weight: 500 !important;
  padding: 0.5rem 1rem !important; box-shadow: var(--shadow-xs) !important;
}
.swal2-styled:focus, .swal2-styled:focus-visible { box-shadow: 0 0 0 2px rgb(var(--c-card)), 0 0 0 4px rgb(58 151 207 / 0.5) !important; }
.swal2-styled.swal2-confirm { background-color: #1f6ea3; }
.swal2-styled.swal2-cancel {
  background: rgb(var(--c-card)) !important; color: rgb(var(--c-ink)) !important;
  border: 1px solid rgb(var(--c-line)) !important;
}
.swal2-styled.swal2-deny { background-color: rgb(var(--c-crit-fill)); }
.swal2-validation-message { background: rgb(var(--c-crit) / 0.1) !important; color: rgb(var(--c-crit)) !important; border-radius: 10px; }
.swal2-toast { padding: 0.625rem 0.875rem !important; }
.swal2-toast .swal2-title { font-size: 0.875rem !important; font-weight: 500 !important; }
.swal2-timer-progress-bar { background: rgb(58 151 207 / 0.5) !important; }

/* ------------------------------------------------------------------ */
/* Reduced motion                                                     */
/* ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Theme switch icons — moon in light (switch to dark), sun in dark */
html.dark .theme-icon-moon { display: none; }
html.dark .theme-icon-sun { display: inline-flex; }