/* =====================================================================
   OpsWatch design tokens + third-party widget skin.
   Source of truth: ../opswatch/frontend/src/index.css (Softnix Brand 2026).

   - Tokens are RGB triplets consumed by assets/js/tailwind.config.js as
     rgb(var(--x) / <alpha-value>), so every utility follows the theme.
   - Light is the default (OpsWatch first paint); <html class="dark"> swaps.
   - Component classes (.card, .btn-*, .input, .th …) live in
     assets/css/opswatch.tw.css (Tailwind @layer components).
   ===================================================================== */

:root {
  /* surfaces / text — OpsWatch html.light */
  --c-bg: 244 245 249;        /* #f4f5f9 page */
  --c-bg-deep: 255 255 255;
  --c-card: 255 255 255;
  --c-hover: 238 240 246;     /* #eef0f6 input fill / segmented rail / hover */
  --c-inset: 247 248 250;     /* #f7f8fa table head / tiles */
  --c-line: 230 233 240;      /* #e6e9f0 hairlines */
  --c-ink: 13 27 42;          /* #0d1b2a dark navy */
  --c-ink-dim: 65 90 119;     /* #415a77 slate */
  --c-ink-faint: 95 113 137;  /* #5f7189 */

  /* 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) — contrast-tuned for white */
  --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;
  /* status tone (fill) — brand colours, 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(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);

  /* neutrals behind slate-* / gray-* in the existing views (navy-tinted, OpsWatch ink scale) */
  --n-50: 247 248 250;
  --n-100: 238 240 246;
  --n-200: 230 233 240;
  --n-300: 221 226 234;
  --n-400: 95 113 137;
  --n-500: 65 90 119;
  --n-600: 53 77 105;
  --n-700: 19 36 58;
  --n-800: 13 27 42;
  --n-900: 9 21 33;
  --n-950: 5 12 20;
  --n-t300: 138 154 176;      /* text-slate-300 → #8a9ab0 (OpsWatch light override) */

  /* status palettes behind red/green/amber/orange/blue… tints (t1-3), borders (edge), text (tx/tx2) */
  --crit-t1: 252 242 242; --crit-t2: 249 234 234; --crit-t3: 244 212 212; --crit-edge: 241 201 201; --crit-tx: 198 40 40;  --crit-tx2: 183 28 28;
  --ok-t1: 241 247 243;   --ok-t2: 232 242 236;   --ok-t3: 208 230 216;   --ok-edge: 197 223 207;   --ok-tx: 21 128 61;    --ok-tx2: 22 101 52;
  --warn-t1: 248 246 240; --warn-t2: 243 240 230; --warn-t3: 231 225 204; --warn-edge: 225 217 191; --warn-tx: 134 103 0;  --warn-tx2: 107 82 0;
  --alert-t1: 249 245 241; --alert-t2: 245 238 231; --alert-t3: 235 221 207; --alert-edge: 230 212 195; --alert-tx: 156 83 16; --alert-tx2: 124 66 13;
  --busy-t1: 242 246 250; --busy-t2: 233 241 246; --busy-t3: 210 226 237; --busy-edge: 199 219 232; --busy-tx: 31 110 163; --busy-tx2: 26 90 138;
  --lime-t1: 250 252 243; --lime-t2: 246 250 234; --lime-t3: 238 245 213; --lime-edge: 225 237 182; --lime-tx: 82 106 0;   --lime-tx2: 62 80 0;
  --idle-t1: 246 247 249; --idle-t2: 237 240 243; --idle-t3: 220 224 230; --idle-edge: 211 217 224; --idle-tx: 79 101 130; --idle-tx2: 65 90 119;

  color-scheme: light;
}

html.dark {
  --c-bg: 13 27 42;           /* #0d1b2a */
  --c-bg-deep: 9 21 33;
  --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-ink: 232 237 243;
  --c-ink-dim: 163 177 196;
  --c-ink-faint: 119 141 169;

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

  --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);

  --n-50: 16 30 47;
  --n-100: 27 38 59;
  --n-200: 36 52 77;
  --n-300: 46 66 98;
  --n-400: 119 141 169;
  --n-500: 163 177 196;
  --n-600: 185 197 212;
  --n-700: 214 222 232;
  --n-800: 232 237 243;
  --n-900: 243 246 249;
  --n-950: 255 255 255;
  --n-t300: 95 113 137;

  --crit-t1: 32 39 57;  --crit-t2: 41 42 59;  --crit-t3: 63 51 65;  --crit-edge: 74 55 68;  --crit-tx: 240 117 114; --crit-tx2: 245 152 150;
  --ok-t1: 22 45 58;    --ok-t2: 25 53 61;    --ok-t3: 30 72 68;    --ok-edge: 33 81 72;    --ok-tx: 74 222 128;   --ok-tx2: 134 239 172;
  --warn-t1: 33 44 51;  --warn-t2: 42 51 49;  --warn-t3: 66 67 45;  --warn-edge: 78 75 43;  --warn-tx: 253 199 12;  --warn-tx2: 253 216 90;
  --alert-t1: 32 41 54; --alert-t2: 41 45 54; --alert-t3: 64 56 55; --alert-edge: 75 62 56; --alert-tx: 243 144 63; --alert-tx2: 247 176 120;
  --busy-t1: 24 42 63;  --busy-t2: 27 48 69;  --busy-t3: 34 62 85;  --busy-edge: 38 69 93;  --busy-tx: 94 173 214;  --busy-tx2: 134 192 227;
  --lime-t1: 30 45 55;  --lime-t2: 37 53 57;  --lime-t3: 54 72 61;  --lime-edge: 63 81 63;  --lime-tx: 195 223 92;  --lime-tx2: 214 234 140;
  --idle-t1: 28 43 62;  --idle-t2: 33 48 67;  --idle-t3: 48 63 82;  --idle-edge: 55 70 89;  --idle-tx: 163 177 196; --idle-tx2: 196 205 218;

  color-scheme: dark;
}

/* First paint before Tailwind's runtime has generated anything. */
html { background: rgb(var(--c-bg)); color: rgb(var(--c-ink)); }
body {
  font-family: "IBM Plex Sans Thai Looped", Sarabun, Poppins, system-ui, -apple-system, sans-serif;
  background-color: rgb(var(--c-bg));
}

/* slim scrollbars (OpsWatch) */
* { 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; }

/* ------------------------------------------------------------------ */
/* Sidebar collapse (desktop) — OpsWatch: 232px ↔ 64px floating panel  */
/* State lives on <html class="sidebar-collapsed"> (set before paint). */
/* ------------------------------------------------------------------ */
@media (min-width: 1024px) {
  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 .center-collapsed { justify-content: center; padding-left: 0; padding-right: 0; }
  html.sidebar-collapsed #sidebar .px-collapsed { padding-left: 0.5rem; padding-right: 0.5rem; }
  html.sidebar-collapsed #sidebar .group-rule { display: block !important; }
  html.sidebar-collapsed #sidebar .brand-row { padding: 1rem 0 0.75rem; }
  html.sidebar-collapsed #sidebarCollapse svg { transform: rotate(180deg); }
}
/* mobile drawer */
@media (max-width: 1023.98px) {
  html.sidebar-open #sidebar { transform: translateX(0); box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); }
  html.sidebar-open #sidebarBackdrop { display: block; }
}
#cmdPalette.is-open { display: flex; }

/* ------------------------------------------------------------------ */
/* DataTables (plain build) → OpsWatch table + pagination              */
/* ------------------------------------------------------------------ */
table.dataTable { width: 100% !important; border-collapse: collapse; }
table.dataTable thead th,
table.dataTable thead td {
  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));
  position: relative;
}
table.dataTable tbody td { padding: 0.625rem 0.75rem; font-size: 0.875rem; vertical-align: middle; }
table.dataTable tbody tr { background-color: transparent; transition: background-color .15s; }
table.dataTable tbody tr + tr td { border-top: 1px solid rgb(var(--c-line)); }
table.dataTable tbody tr:hover { background-color: rgb(var(--c-inset)); }
table.dataTable.no-footer { border-bottom: 0; }
table.dataTable td.dataTables_empty { padding: 2.5rem 0.75rem; text-align: center; color: rgb(var(--c-ink-faint)); }

/* sort affordance */
table.dataTable thead > tr > th.sorting,
table.dataTable thead > tr > th.sorting_asc,
table.dataTable thead > tr > th.sorting_desc { cursor: pointer; padding-right: 1.5rem; }
table.dataTable thead > tr > th.sorting::after,
table.dataTable thead > tr > th.sorting_asc::after,
table.dataTable thead > tr > th.sorting_desc::after {
  content: ""; position: absolute; right: 0.5rem; top: 50%; width: 12px; height: 12px; margin-top: -6px;
  background-color: currentColor; opacity: .35;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 15 5 5 5-5'/%3E%3Cpath d='m7 9 5-5 5 5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 15 5 5 5-5'/%3E%3Cpath d='m7 9 5-5 5 5'/%3E%3C/svg%3E") center / contain no-repeat;
}
table.dataTable thead > tr > th.sorting_asc::after {
  opacity: .9;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5'/%3E%3Cpath d='m5 12 7-7 7 7'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5'/%3E%3Cpath d='m5 12 7-7 7 7'/%3E%3C/svg%3E");
}
table.dataTable thead > tr > th.sorting_desc::after {
  opacity: .9;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14'/%3E%3Cpath d='m19 12-7 7-7-7'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14'/%3E%3Cpath d='m19 12-7 7-7-7'/%3E%3C/svg%3E");
}
table.dataTable thead > tr > th.sorting_disabled { cursor: default; padding-right: 0.75rem; }

/* toolbar: search (SearchInput) + length + info + pagination */
.dataTables_wrapper { position: relative; clear: both; }
.dataTables_wrapper .dataTables_filter label,
.dataTables_wrapper .dataTables_length label {
  display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; color: rgb(var(--c-ink-faint)); margin: 0;
}
.dataTables_wrapper .dataTables_filter { position: relative; max-width: 20rem; }
.dataTables_wrapper .dataTables_filter label { width: 100%; }
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  border: 1px solid rgb(var(--c-line));
  background-color: rgb(var(--c-card));
  border-radius: 10px;
  color: rgb(var(--c-ink));
  font-size: 0.875rem;
  line-height: 1.25rem;
  outline: none;
  transition: background-color .15s, border-color .15s, box-shadow .15s;
}
.dataTables_wrapper .dataTables_filter input {
  width: 100%; min-width: 14rem; margin: 0; padding: 0.5rem 0.75rem 0.5rem 2.25rem;
  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='%235f7189' 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");
  background-repeat: no-repeat; background-position: 0.75rem center;
}
.dataTables_wrapper .dataTables_filter input::placeholder { color: rgb(var(--c-ink-faint)); }
.dataTables_wrapper .dataTables_length select { padding: 0.375rem 1.75rem 0.375rem 0.625rem; appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235f7189' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.5rem center; }
.dataTables_wrapper .dataTables_filter input:hover,
.dataTables_wrapper .dataTables_length select:hover { border-color: rgb(var(--c-ink-faint) / 0.5); }
.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus { border-color: #3a97cf; box-shadow: 0 0 0 3px rgb(58 151 207 / 0.15); }
.dataTables_wrapper .dataTables_length .select2-container { width: auto !important; min-width: 4.5rem; }
.dataTables_wrapper .dataTables_info { font-size: 0.75rem; color: rgb(var(--c-ink-faint)); padding: 0; }
.dataTables_wrapper .dataTables_paginate { display: flex; align-items: center; gap: 0.25rem; padding: 0; }
.dataTables_wrapper .dataTables_paginate > span { display: inline-flex; align-items: center; gap: 0.25rem; }
.dataTables_wrapper .dataTables_paginate .paginate_button {
  display: inline-flex; align-items: center; justify-content: center;
  height: 28px; min-width: 28px; padding: 0 0.375rem; border-radius: 8px;
  font-size: 0.75rem; font-weight: 500; color: rgb(var(--c-ink-dim)) !important;
  cursor: pointer; user-select: none; transition: background-color .15s, color .15s; border: 0; background: transparent;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.previous,
.dataTables_wrapper .dataTables_paginate .paginate_button.next { padding: 0 0.625rem; }
.dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.current):not(.disabled) {
  background-color: var(--soft-overlay); color: rgb(var(--c-ink)) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background-color: #1f6ea3; color: #fff !important; box-shadow: var(--shadow-xs);
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled { opacity: .35; cursor: not-allowed; }
.dataTables_wrapper .dataTables_paginate .ellipsis { padding: 0 0.25rem; color: rgb(var(--c-ink-faint)); font-size: 0.75rem; }
.dataTables_wrapper .dataTables_processing {
  position: absolute; top: 3.5rem; left: 50%; transform: translateX(-50%); z-index: 5;
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 0.875rem; border-radius: 10px; font-size: 0.75rem; color: rgb(var(--c-ink-dim));
  background: rgb(var(--c-card)); border: 1px solid rgb(var(--c-line)); box-shadow: var(--shadow-dropdown);
}
.dataTables_wrapper .dataTables_processing > div { display: none; }

/* ------------------------------------------------------------------ */
/* Select2 → OpsWatch SearchableSelect                                 */
/* ------------------------------------------------------------------ */
.select2-container { width: 100% !important; font-size: 0.875rem; }
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  height: auto !important; min-height: 38px;
  border: 1px solid rgb(var(--c-line)) !important;
  border-radius: 10px !important;
  background-color: rgb(var(--c-card)) !important;
  padding: 0.5rem 2.25rem 0.5rem 0.75rem;
  outline: none !important;
  transition: background-color .15s, border-color .15s, box-shadow .15s;
}
.select2-container--default .select2-selection--multiple { padding: 0.25rem 0.5rem; }
.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 {
  padding: 0 !important; line-height: 1.25rem !important; color: rgb(var(--c-ink)) !important; font-size: 0.875rem;
}
.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 {
  top: 0 !important; right: 0.625rem !important; height: 100% !important; width: 15px !important;
  display: flex; align-items: center;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b { display: none; }
.select2-container--default .select2-selection--single .select2-selection__arrow::after {
  content: ""; width: 15px; height: 15px; background-color: rgb(var(--c-ink-faint)); transition: transform .15s;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.select2-container--open .select2-selection--single .select2-selection__arrow::after { transform: rotate(180deg); }
.select2-container--default .select2-selection--single .select2-selection__clear {
  margin-right: 0.375rem; color: rgb(var(--c-ink-faint)); font-weight: 400; font-size: 1rem; line-height: 1.25rem; height: auto;
}
.select2-container--default .select2-selection--single .select2-selection__clear:hover { color: rgb(var(--c-ink)); }
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple {
  border-color: #3a97cf !important; box-shadow: 0 0 0 3px rgb(58 151 207 / 0.15) !important;
}
.select2-container--default.select2-container--disabled .select2-selection--single,
.select2-container--default .select2-selection--single[aria-disabled='true'] { opacity: .6; cursor: not-allowed !important; background-color: rgb(var(--c-card)) !important; }
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  border: 0; border-radius: 6px; background-color: rgb(var(--c-hover)); color: rgb(var(--c-ink-dim)); font-size: 0.75rem; padding: 0.125rem 0.5rem 0.125rem 1.25rem; margin: 0.125rem 0.25rem 0.125rem 0;
}
/* compact variant — selects that were sized small (in tables / inline toolbars) */
select.input-sm + .select2-container--default .select2-selection--single { min-height: 32px; padding-top: 0.3125rem; padding-bottom: 0.3125rem; }

.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;
  color: rgb(var(--c-ink));
  animation: owScaleIn .18s ease-out;
}
.select2-container--open .select2-dropdown--below { margin-top: 6px; }
.select2-container--open .select2-dropdown--above { margin-top: -6px; }
.select2-search--dropdown { position: relative; padding: 0.5rem; border-bottom: 1px solid rgb(var(--c-line)); }
.select2-search--dropdown::before {
  content: ""; position: absolute; left: 1rem; top: 50%; width: 14px; height: 14px; margin-top: -7px; background-color: rgb(var(--c-ink-faint)); pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' 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") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' 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") center / contain no-repeat;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
  border: 0 !important; border-radius: 8px !important; background-color: rgb(var(--c-hover)) !important;
  padding: 0.375rem 0.5rem 0.375rem 2rem !important; font-size: 0.875rem; color: rgb(var(--c-ink)); 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 > .select2-results__options { max-height: 15rem; padding: 0.25rem; }
.select2-container--default .select2-results__option {
  border-radius: 8px; padding: 0.375rem 0.625rem !important; font-size: 0.875rem; color: rgb(var(--c-ink)); transition: background-color .1s;
}
.select2-container--default .select2-results__option--selected,
.select2-container--default .select2-results__option[aria-selected=true] {
  background-color: transparent; font-weight: 500; color: #1a5a8a;
}
html.dark .select2-container--default .select2-results__option--selected,
html.dark .select2-container--default .select2-results__option[aria-selected=true] { color: #86c0e3; }
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable,
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: rgb(var(--c-hover)) !important; color: rgb(var(--c-ink)) !important;
}
.select2-container--default .select2-results__option--disabled,
.select2-container--default .select2-results__option[aria-disabled=true] { opacity: .4; color: rgb(var(--c-ink-faint)); }
.select2-container--default .select2-results__message { color: rgb(var(--c-ink-faint)); }
.select2-container--default .select2-results__group { font-size: 0.75rem; font-weight: 500; color: rgb(var(--c-ink-faint)); padding: 0.5rem 0.625rem 0.25rem; }

/* ------------------------------------------------------------------ */
/* SweetAlert2 → OpsWatch Modal / ConfirmDialog (see app.js mixin)     */
/* ------------------------------------------------------------------ */
div:where(.swal2-container).swal2-backdrop-show { background: rgb(0 0 0 / 0.5) !important; backdrop-filter: blur(2px); }
.swal2-popup.ow-swal {
  width: 32rem; max-width: calc(100vw - 2rem); padding: 0 !important;
  display: grid !important; grid-template-columns: minmax(0, 1fr);
  border-radius: 14px; border: 1px solid rgb(var(--c-line));
  background: rgb(var(--c-card)) !important; color: rgb(var(--c-ink)) !important;
  box-shadow: var(--shadow-modal); font-family: inherit; overflow: hidden;
}
.swal2-popup.ow-swal .swal2-icon { display: none !important; }
.swal2-popup.ow-swal .swal2-title {
  display: flex !important; align-items: center; gap: 0.75rem;
  margin: 0; padding: 1.25rem 1.5rem 0.5rem; text-align: left;
  font-family: Poppins, "IBM Plex Sans Thai Looped", Sarabun, sans-serif;
  font-size: 1rem; line-height: 1.5rem; font-weight: 600; color: rgb(var(--c-ink)) !important;
}
.swal2-popup.ow-swal .swal2-title::before {
  content: none; flex-shrink: 0; width: 36px; height: 36px; border-radius: 10px;
  background-repeat: no-repeat; background-position: center; background-size: 18px 18px;
}
.swal2-popup.ow-swal.swal2-icon-warning .swal2-title::before,
.swal2-popup.ow-swal.swal2-icon-question .swal2-title::before {
  content: ""; background-color: rgb(var(--c-alert) / 0.1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f3903f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
}
.swal2-popup.ow-swal.swal2-icon-error .swal2-title::before {
  content: ""; background-color: rgb(var(--c-crit) / 0.1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e53935' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m15 9-6 6'/%3E%3Cpath d='m9 9 6 6'/%3E%3C/svg%3E");
}
.swal2-popup.ow-swal.swal2-icon-success .swal2-title::before {
  content: ""; background-color: rgb(var(--c-ok) / 0.1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322c55e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
}
.swal2-popup.ow-swal.swal2-icon-info .swal2-title::before {
  content: ""; background-color: rgb(39 134 194 / 0.1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232786c2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E");
}
.swal2-popup.ow-swal .swal2-html-container {
  margin: 0; padding: 0.5rem 1.5rem 0; text-align: left;
  font-size: 0.875rem; line-height: 1.5rem; color: rgb(var(--c-ink-dim)) !important;
}
.swal2-popup.ow-swal .swal2-input,
.swal2-popup.ow-swal .swal2-textarea,
.swal2-popup.ow-swal .swal2-select {
  margin: 0.75rem 1.5rem 0; width: auto; max-width: none; box-shadow: none; font-size: 0.875rem;
  border: 1px solid rgb(var(--c-line)); border-radius: 10px; background: rgb(var(--c-card)); color: rgb(var(--c-ink));
}
.swal2-popup.ow-swal .swal2-input { height: 38px; padding: 0.5rem 0.75rem; }
.swal2-popup.ow-swal .swal2-input:focus,
.swal2-popup.ow-swal .swal2-textarea:focus,
.swal2-popup.ow-swal .swal2-select:focus { border-color: #3a97cf; box-shadow: 0 0 0 3px rgb(58 151 207 / 0.15); }
.swal2-popup.ow-swal .swal2-validation-message {
  margin: 0.75rem 1.5rem 0; justify-content: flex-start; border-radius: 10px;
  background: rgb(var(--c-crit) / 0.1); color: rgb(var(--c-crit)); font-size: 0.75rem;
}
.swal2-popup.ow-swal .swal2-validation-message::before { background-color: rgb(var(--c-crit-fill)); }
.swal2-popup.ow-swal .swal2-actions {
  width: 100%; margin: 1.5rem 0 0; padding: 0.875rem 1.5rem;
  display: flex; flex-direction: row; justify-content: flex-end; gap: 0.5rem;
  border-top: 1px solid rgb(var(--c-line)); background: rgb(var(--c-inset));
}
.swal2-popup.ow-swal .swal2-actions button { margin: 0; }
.swal2-popup.ow-swal .swal2-cancel { order: 1; min-width: 6rem; }
.swal2-popup.ow-swal .swal2-deny { order: 2; }
.swal2-popup.ow-swal .swal2-confirm { order: 3; }
.swal2-popup.ow-swal .swal2-loader { border-color: #2786c2 transparent #2786c2 transparent; }
.swal2-popup.ow-swal .swal2-close { color: rgb(var(--c-ink-faint)); border-radius: 8px; }
.swal2-popup.ow-swal .swal2-close:hover { color: rgb(var(--c-ink)); background: rgb(var(--c-hover)); }
.swal2-popup.ow-swal .swal2-footer { border-top-color: rgb(var(--c-line)); color: rgb(var(--c-ink-faint)); font-size: 0.75rem; }
.swal2-popup.ow-swal .swal2-image { margin: 1rem auto 0; border-radius: 10px; }
.swal2-popup.ow-swal .swal2-timer-progress-bar { background: #2786c2; }

/* toasts — menu-surface look, brand status colours on the icon */
.swal2-popup.swal2-toast {
  background: rgb(var(--c-card)) !important; color: rgb(var(--c-ink)) !important;
  border: 1px solid rgb(var(--c-line)); border-radius: 10px !important;
  box-shadow: var(--shadow-dropdown) !important; padding: 0.625rem 0.875rem !important; font-family: inherit;
}
.swal2-popup.swal2-toast .swal2-title { color: rgb(var(--c-ink)) !important; font-size: 0.875rem; font-weight: 500; }
.swal2-popup.swal2-toast .swal2-html-container { color: rgb(var(--c-ink-dim)) !important; font-size: 0.75rem; }
.swal2-popup.swal2-toast .swal2-timer-progress-bar { background: rgb(39 134 194 / 0.6); }
.swal2-icon.swal2-success { border-color: rgb(34 197 94 / 0.3) !important; color: #22c55e !important; }
.swal2-icon.swal2-success [class^=swal2-success-line] { background-color: #22c55e !important; }
.swal2-icon.swal2-success .swal2-success-ring { border-color: rgb(34 197 94 / 0.3) !important; }
.swal2-icon.swal2-success [class^=swal2-success-circular-line],
.swal2-icon.swal2-success .swal2-success-fix { background-color: transparent !important; }
.swal2-icon.swal2-error { border-color: #e53935 !important; color: #e53935 !important; }
.swal2-icon.swal2-error [class^=swal2-x-mark-line] { background-color: #e53935 !important; }
.swal2-icon.swal2-warning { border-color: #f3903f !important; color: #f3903f !important; }
.swal2-icon.swal2-info { border-color: #2786c2 !important; color: #2786c2 !important; }
.swal2-icon.swal2-question { border-color: #778da9 !important; color: #778da9 !important; }

/* ------------------------------------------------------------------ */
/* daterangepicker → menu-surface                                       */
/* ------------------------------------------------------------------ */
html .daterangepicker {
  font-family: inherit !important; color: rgb(var(--c-ink)) !important;
  background-color: rgb(var(--c-card)) !important; border: 1px solid rgb(var(--c-line)) !important;
  border-radius: 14px !important; box-shadow: var(--shadow-dropdown); padding: 0.25rem;
}
html .daterangepicker::before { border-bottom-color: rgb(var(--c-line)) !important; }
html .daterangepicker::after { border-bottom-color: rgb(var(--c-card)) !important; }
html .daterangepicker.drop-up::before { border-top-color: rgb(var(--c-line)) !important; }
html .daterangepicker.drop-up::after { border-top-color: rgb(var(--c-card)) !important; }
html .daterangepicker .calendar-table { background: transparent !important; border-color: transparent !important; }
html .daterangepicker .calendar-table th,
html .daterangepicker .calendar-table td { border-radius: 8px !important; font-size: 0.75rem; min-width: 30px; height: 28px; }
html .daterangepicker .calendar-table th { color: rgb(var(--c-ink-faint)); font-weight: 500; }
html .daterangepicker .calendar-table th.month { color: rgb(var(--c-ink)); font-weight: 600; font-size: 0.8125rem; }
html .daterangepicker .calendar-table .next span,
html .daterangepicker .calendar-table .prev span { border-color: rgb(var(--c-ink-dim)) !important; }
html .daterangepicker td.available:hover,
html .daterangepicker th.available:hover { background-color: rgb(var(--c-hover)) !important; }
html .daterangepicker td.off,
html .daterangepicker td.off.in-range,
html .daterangepicker td.off.start-date,
html .daterangepicker td.off.end-date { background-color: transparent !important; color: rgb(var(--c-ink-faint) / 0.6) !important; }
html .daterangepicker td.in-range { background-color: rgb(58 151 207 / 0.12) !important; color: rgb(var(--c-ink)) !important; border-radius: 0 !important; }
html .daterangepicker td.active,
html .daterangepicker td.active:hover { background-color: #1f6ea3 !important; color: #fff !important; }
html .daterangepicker td.start-date { border-radius: 8px 0 0 8px !important; }
html .daterangepicker td.end-date { border-radius: 0 8px 8px 0 !important; }
html .daterangepicker td.start-date.end-date { border-radius: 8px !important; }
html .daterangepicker .ranges ul { padding: 0.25rem; }
html .daterangepicker .ranges li {
  border-radius: 8px; font-size: 0.8125rem; padding: 0.375rem 0.625rem; color: rgb(var(--c-ink)); margin-bottom: 2px;
}
html .daterangepicker .ranges li:hover { background-color: rgb(var(--c-hover)) !important; }
html .daterangepicker .ranges li.active { background-color: #1f6ea3 !important; color: #fff !important; }
html .daterangepicker .drp-buttons { border-top: 1px solid rgb(var(--c-line)) !important; padding: 0.625rem 0.75rem; }
html .daterangepicker .drp-selected { font-size: 0.75rem; color: rgb(var(--c-ink-faint)); }
html .daterangepicker .drp-buttons .btn {
  margin-left: 0.5rem; border-radius: 8px; padding: 0.25rem 0.75rem; font-size: 0.75rem; font-weight: 500; cursor: pointer;
  border: 1px solid rgb(var(--c-line)); background: rgb(var(--c-card)); color: rgb(var(--c-ink));
}
html .daterangepicker .drp-buttons .btn.applyBtn { background: #1f6ea3; border-color: #1f6ea3; color: #fff; }
html .daterangepicker .drp-buttons .btn.applyBtn:hover { background: #1a5a8a; }
html .daterangepicker.show-ranges.ltr .drp-calendar.left { border-left-color: rgb(var(--c-line)) !important; }
html .daterangepicker select.monthselect,
html .daterangepicker select.yearselect { background: rgb(var(--c-card)); color: rgb(var(--c-ink)); border: 1px solid rgb(var(--c-line)); border-radius: 6px; }

/* Chart.js canvases keep the card background */
canvas { max-width: 100%; }

@keyframes owScaleIn { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }

@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;
  }
}