/* Ali portal design system. Light/dark via CSS variables; Tailwind slate palette is variable-driven. */
:root {
  color-scheme: light;
  --s-50: 248 249 251; --s-100: 241 243 246; --s-200: 229 232 238; --s-300: 208 213 222; --s-400: 152 161 178;
  --s-500: 102 112 133; --s-600: 74 84 104; --s-700: 54 64 85; --s-800: 31 41 55; --s-900: 16 24 40; --s-950: 11 18 32;
  --canvas: #f5f7f8; --surface: #ffffff; --surface-2: #fafbfc; --line: #e5e8ee; --line-soft: #eef0f4;
  --ink: #101828; --text: #1f2937; --muted: #667085;
  --brand: #0f857b; --brand-hover: #0d6b64; --brand-soft: #e6f6f4; --brand-ink: #0d6b64; --brand-ring: rgb(15 133 123 / .16);
  --hover: #f3f5f7; --shadow-card: 0 1px 2px rgb(16 24 40 / .04);
  --chip-up-bg: #ecfdf3; --chip-up: #067647; --chip-down-bg: #fef3f2; --chip-down: #b42318; --chip-flat-bg: #f2f4f7; --chip-flat: #475467;
  --b-green-bg: #ecfdf3; --b-green: #067647; --b-amber-bg: #fffaeb; --b-amber: #b54708; --b-blue-bg: #e6f6f4; --b-blue: #0d6b64;
  --b-rose-bg: #fef3f2; --b-rose: #b42318; --b-slate-bg: #f2f4f7; --b-slate: #475467; --b-orange-bg: #fff4ed; --b-orange: #c4320a;
  --b-info-bg: #eff6ff; --b-info: #1d4ed8;
  --grid: #eef0f4; --seg-bg: #f0f2f5; --seg-on: #ffffff; --skeleton-a: #f1f3f6; --skeleton-b: #e9ecf1;
}
.dark {
  color-scheme: dark;
  --s-50: 22 28 36; --s-100: 27 34 44; --s-200: 38 47 59; --s-300: 52 63 77; --s-400: 101 112 131;
  --s-500: 139 149 165; --s-600: 166 175 189; --s-700: 195 202 213; --s-800: 221 226 234; --s-900: 243 245 248; --s-950: 250 251 252;
  --canvas: #0b0f14; --surface: #121820; --surface-2: #161d26; --line: #232c38; --line-soft: #1b232d;
  --ink: #f3f5f8; --text: #d3d9e2; --muted: #8b95a5;
  --brand: #14a698; --brand-hover: #18bfae; --brand-soft: rgb(20 166 152 / .14); --brand-ink: #5eead4; --brand-ring: rgb(45 212 191 / .22);
  --hover: #1a222c; --shadow-card: 0 1px 2px rgb(0 0 0 / .4);
  --chip-up-bg: rgb(18 183 106 / .14); --chip-up: #6ce9a6; --chip-down-bg: rgb(240 68 56 / .14); --chip-down: #fda29b; --chip-flat-bg: rgb(255 255 255 / .07); --chip-flat: #b2bbc8;
  --b-green-bg: rgb(18 183 106 / .14); --b-green: #6ce9a6; --b-amber-bg: rgb(247 144 9 / .15); --b-amber: #fec84b; --b-blue-bg: rgb(20 166 152 / .16); --b-blue: #5eead4;
  --b-rose-bg: rgb(240 68 56 / .15); --b-rose: #fda29b; --b-slate-bg: rgb(255 255 255 / .07); --b-slate: #b2bbc8; --b-orange-bg: rgb(251 146 60 / .15); --b-orange: #fdba74;
  --b-info-bg: rgb(59 130 246 / .16); --b-info: #93c5fd;
  --grid: #1d2530; --seg-bg: #1a222c; --seg-on: #2a3441; --skeleton-a: #1a222c; --skeleton-b: #232c38;
}

html, body { height: 100%; }
body { font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; background: var(--canvas); color: var(--text); font-feature-settings: 'cv11', 'ss01'; -webkit-font-smoothing: antialiased; transition: background-color .2s, color .2s; }
.font-mono, .tnum { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; }
::selection { background: var(--brand-soft); color: var(--brand-ink); }
*:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
[x-cloak], .hidden-init { display: none; }
[hidden] { display: none !important; }

.thin-scroll::-webkit-scrollbar, main::-webkit-scrollbar { width: 8px; height: 8px; }
.thin-scroll::-webkit-scrollbar-thumb, main::-webkit-scrollbar-thumb { background: rgb(var(--s-300)); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
.thin-scroll::-webkit-scrollbar-thumb:hover, main::-webkit-scrollbar-thumb:hover { background: rgb(var(--s-400)); background-clip: content-box; border: 2px solid transparent; }

/* ---------- Shell ---------- */
.sidebar { width: 256px; background: var(--surface); border-right: 1px solid var(--line); transition: width .2s ease, transform .25s ease; }
.nav-label { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: rgb(var(--s-400)); padding: 0 12px; margin: 18px 0 6px; white-space: nowrap; overflow: hidden; }
.nav-link { position: relative; display: flex; align-items: center; gap: 10px; padding: 7px 12px; border-radius: 9px; font-size: 13.5px; font-weight: 500; color: rgb(var(--s-600)); transition: background .15s, color .15s; white-space: nowrap; }
.nav-link svg { width: 17px; height: 17px; color: rgb(var(--s-400)); flex-shrink: 0; transition: color .15s; }
.nav-link:hover { background: var(--hover); color: var(--ink); }
.nav-link:hover svg { color: rgb(var(--s-600)); }
.nav-link.active { background: var(--brand-soft); color: var(--brand-ink); font-weight: 600; }
.nav-link.active svg { color: var(--brand); }
.nav-link.active::before { content: ''; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--brand); }
.nav-badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
.nav-badge.amber { background: var(--b-amber-bg); color: var(--b-amber); }
.nav-badge.rose { background: var(--b-rose-bg); color: var(--b-rose); }

@media (min-width: 1024px) {
  html.nav-collapsed .sidebar { width: 72px; }
  html.nav-collapsed .sidebar .nav-text, html.nav-collapsed .sidebar .nav-badge, html.nav-collapsed .sidebar .brand-text, html.nav-collapsed .sidebar .user-text { display: none; }
  html.nav-collapsed .sidebar .nav-label { height: 1px; margin: 14px 12px; padding: 0; background: var(--line); font-size: 0; }
  html.nav-collapsed .sidebar .nav-link { justify-content: center; padding: 9px; }
  html.nav-collapsed .sidebar .user-row { justify-content: center; }
  html.nav-collapsed .sidebar .user-row a { display: none; }
}
@media (max-width: 1023px) {
  .sidebar { position: fixed; inset: 0 auto 0 0; z-index: 60; transform: translateX(-100%); box-shadow: none; width: 280px; }
  .sidebar.open { transform: none; box-shadow: 0 24px 48px -12px rgb(0 0 0 / .35); }
}

.topbar { background: color-mix(in srgb, var(--surface) 86%, transparent); backdrop-filter: saturate(180%) blur(10px); border-bottom: 1px solid var(--line); }
.search-box { background: rgb(var(--s-100)); border: 1px solid transparent; transition: all .15s; }
.search-box:hover { background: rgb(var(--s-200)); }
.search-box:focus-within { background: var(--surface); border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-ring); }
.kbd { font-size: 11px; font-weight: 500; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; padding: 0 5px; line-height: 18px; }
.icon-btn { width: 36px; height: 36px; display: inline-grid; place-items: center; border-radius: 9px; color: rgb(var(--s-600)); transition: background .15s, color .15s; }
.icon-btn:hover { background: var(--hover); color: var(--ink); }
.icon-btn svg { width: 18px; height: 18px; }

.btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 9px; background: var(--brand); color: #fff; font-size: 13.5px; font-weight: 600; white-space: nowrap; box-shadow: 0 1px 2px rgb(16 24 40 / .14), inset 0 1px 0 rgb(255 255 255 / .16); transition: background .15s, transform .1s; }
.btn-primary:hover { background: var(--brand-hover); }
.btn-primary:active { transform: translateY(1px); }
.btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 9px; background: var(--surface); border: 1px solid var(--line); color: rgb(var(--s-700)); font-size: 13.5px; font-weight: 500; white-space: nowrap; box-shadow: var(--shadow-card); transition: background .15s, border-color .15s; }
.btn-ghost:hover { background: var(--hover); }

/* Toasts */
.toast-stack { position: fixed; bottom: 20px; right: 20px; z-index: 80; display: flex; flex-direction: column-reverse; gap: 8px; width: min(380px, calc(100vw - 32px)); }
@media (max-width: 639px) { .toast-stack { right: 16px; left: 16px; width: auto; bottom: 16px; } }
/* Pages with a sticky save bar (settings forms): keep toasts above it */
body:has(.st-savebar) .toast-stack { bottom: 96px; }
.toast { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 24px -6px rgb(0 0 0 / .18); font-size: 13.5px; font-weight: 500; color: var(--ink); animation: toast-in .25s ease-out; }
.toast.leaving { opacity: 0; transform: translateY(6px); transition: all .2s; }
.toast .ticon { width: 22px; height: 22px; border-radius: 999px; display: grid; place-items: center; flex-shrink: 0; margin-top: 1px; }
.toast .ticon svg { width: 13px; height: 13px; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }

/* Dropdown / menu */
.menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 210px; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 16px 32px -8px rgb(0 0 0 / .2); z-index: 50; }
.menu a, .menu button { display: flex; width: 100%; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; font-size: 13.5px; color: rgb(var(--s-700)); text-align: left; }
.menu a:hover, .menu button:hover { background: var(--hover); color: var(--ink); }
.menu svg { width: 16px; height: 16px; color: rgb(var(--s-400)); }
.menu .sep { height: 1px; background: var(--line); margin: 6px -6px; }
.menu .on { color: var(--brand-ink); background: var(--brand-soft); }
.menu .on svg { color: var(--brand); }

/* Command palette */
#cmdk { position: fixed; inset: 0; z-index: 100; display: none; align-items: flex-start; justify-content: center; padding: 12vh 16px 16px; background: rgb(8 12 18 / .5); backdrop-filter: blur(3px); }
#cmdk.open { display: flex; }
#cmdk .panel { width: 100%; max-width: 580px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 32px 64px -16px rgb(0 0 0 / .45); overflow: hidden; animation: rise .18s ease-out both; }
#cmdk input { width: 100%; height: 52px; padding: 0 18px 0 48px; background: transparent !important; border: 0 !important; box-shadow: none !important; font-size: 15px; color: var(--ink); outline: none; }
#cmdk .list { max-height: 360px; overflow-y: auto; padding: 8px; border-top: 1px solid var(--line); }
#cmdk .grp { padding: 8px 10px 4px; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: rgb(var(--s-400)); }
#cmdk .row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 10px; border-radius: 9px; font-size: 14px; color: rgb(var(--s-700)); cursor: pointer; text-align: left; }
#cmdk .row svg { width: 17px; height: 17px; color: rgb(var(--s-400)); }
#cmdk .row.sel { background: var(--brand-soft); color: var(--brand-ink); }
#cmdk .row.sel svg { color: var(--brand); }
#cmdk .foot { display: flex; gap: 14px; padding: 10px 16px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); background: var(--surface-2); }

/* ---------- Page primitives ---------- */
.card { min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-card); }
.card-pad { padding: 20px; }
.card-title { font-size: 14.5px; font-weight: 600; color: var(--ink); letter-spacing: -.01em; }
.card-sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.eyebrow { font-size: 12px; font-weight: 500; color: var(--muted); }
.page-title { font-size: 24px; font-weight: 600; letter-spacing: -.025em; color: var(--ink); line-height: 1.2; }
.page-sub { margin-top: 4px; font-size: 14px; color: var(--muted); }
.kpi-value { font-size: 26px; font-weight: 600; letter-spacing: -.025em; color: var(--ink); line-height: 1.1; font-variant-numeric: tabular-nums; }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 500; }
.chip.up { background: var(--chip-up-bg); color: var(--chip-up); }
.chip.down { background: var(--chip-down-bg); color: var(--chip-down); }
.chip.flat { background: var(--chip-flat-bg); color: var(--chip-flat); }
.seg { display: inline-flex; padding: 3px; background: var(--seg-bg); border-radius: 10px; gap: 2px; max-width: 100%; overflow-x: auto; }
.seg a, .seg button { white-space: nowrap; padding: 4px 11px; border-radius: 7px; font-size: 12.5px; font-weight: 500; color: rgb(var(--s-600)); transition: all .15s; }
.seg a:hover, .seg button:hover { color: var(--ink); }
.seg .on { background: var(--seg-on); color: var(--ink); box-shadow: 0 1px 2px rgb(0 0 0 / .12); font-weight: 600; }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 500; white-space: nowrap; box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 18%, transparent); }
.badge::before { content: ''; width: 6px; height: 6px; border-radius: 999px; background: currentColor; opacity: .85; }
.badge.b-green { background: var(--b-green-bg); color: var(--b-green); }
.badge.b-amber { background: var(--b-amber-bg); color: var(--b-amber); }
.badge.b-blue { background: var(--b-blue-bg); color: var(--b-blue); }
.badge.b-info { background: var(--b-info-bg); color: var(--b-info); }
.badge.b-rose { background: var(--b-rose-bg); color: var(--b-rose); }
.badge.b-slate { background: var(--b-slate-bg); color: var(--b-slate); }
.badge.b-orange { background: var(--b-orange-bg); color: var(--b-orange); }
.data-table { width: 100%; font-size: 13.5px; }
.data-table th { text-align: left; font-size: 12px; font-weight: 500; color: var(--muted); padding: 10px 16px; background: var(--surface-2); border-bottom: 1px solid var(--line); white-space: nowrap; }
.data-table th.text-right { text-align: right; } .data-table th.text-center { text-align: center; }
.data-table td { padding: 12px 16px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr { transition: background .12s; }
.data-table tbody tr:hover { background: var(--surface-2); }
.avatar { width: 32px; height: 32px; border-radius: 999px; display: grid; place-items: center; font-size: 12px; font-weight: 600; flex-shrink: 0; }
.field { width: 100%; height: 38px; padding: 0 12px; font-size: 14px; border: 1px solid rgb(var(--s-300)); border-radius: 9px; background: var(--surface); color: var(--ink); }
.skeleton { background: linear-gradient(90deg, var(--skeleton-a) 25%, var(--skeleton-b) 37%, var(--skeleton-a) 63%); background-size: 400% 100%; animation: sk 1.4s ease infinite; border-radius: 8px; }
@keyframes sk { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.rise { animation: rise .35s ease-out both; }
@keyframes wave { 0%,100% { transform: rotate(0); } 20% { transform: rotate(16deg); } 40% { transform: rotate(-10deg); } 60% { transform: rotate(14deg); } 80% { transform: rotate(-6deg); } }
.emoji { font-family: 'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif; font-style: normal; }
.app-tile { width: 34px; height: 34px; border-radius: 10px; display: inline-grid; place-items: center; font-size: 17px; background: var(--hover); flex-shrink: 0; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .rise, .toast { animation: none; } * { transition-duration: .01ms !important; } }

/* ---------- In-page tabs (ui_tabs / ui_tab_panel): split long pages into named sections ---------- */
.tabs { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--line); scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { display: inline-flex; align-items: center; gap: 8px; padding: 10px 12px; margin-bottom: -1px; font-size: 13.5px; font-weight: 500; color: var(--muted); border-bottom: 2px solid transparent; white-space: nowrap; background: none; cursor: pointer; transition: color .15s, border-color .15s; }
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"], .tab[aria-current="page"] { color: var(--brand-ink); border-bottom-color: var(--brand); font-weight: 600; }
.tab svg { width: 16px; height: 16px; flex-shrink: 0; opacity: .8; }
.tab .count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; font-size: 11.5px; font-weight: 600; display: inline-grid; place-items: center; background: rgb(var(--s-100)); color: rgb(var(--s-600)); font-variant-numeric: tabular-nums; }
.tab[aria-selected="true"] .count, .tab[aria-current="page"] .count { background: var(--brand-soft); color: var(--brand-ink); }
.tab .count.alert { background: var(--b-rose-bg); color: var(--b-rose); }
.tab .count.warn { background: var(--b-amber-bg); color: var(--b-amber); }
[data-tab-panel][hidden] { display: none !important; }
@media (max-width: 639px) {
  /* Phones: every section visible as a button grid instead of a hidden sideways scroller */
  .tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; overflow: visible; border-bottom: 0; }
  .tab { margin: 0; padding: 9px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); white-space: normal; line-height: 1.25; font-size: 13px; }
  .tab .count { margin-left: auto; }
  .tab[aria-selected="true"], .tab[aria-current="page"] { border-color: var(--brand); background: var(--brand-ring); }
}

/* ---------- Tones: one accent per kind of number (icon chips, metric tiles, bars) ---------- */
.tone-teal    { --tone: #0f857b; --tone-bg: #e7f6f3; --tone-soft: #b9e6df; }
.tone-blue    { --tone: #2563eb; --tone-bg: #eef3ff; --tone-soft: #c7d7fe; }
.tone-violet  { --tone: #7c3aed; --tone-bg: #f3efff; --tone-soft: #ddd0fd; }
.tone-amber   { --tone: #c76a06; --tone-bg: #fff5e6; --tone-soft: #fbd9a5; }
.tone-rose    { --tone: #e11d48; --tone-bg: #fff0f3; --tone-soft: #fecdd6; }
.tone-emerald { --tone: #059669; --tone-bg: #e8f8f0; --tone-soft: #b7ebd2; }
.tone-sky     { --tone: #0284c7; --tone-bg: #e9f5fc; --tone-soft: #bfe3f7; }
.tone-slate   { --tone: #475467; --tone-bg: #f2f4f7; --tone-soft: #d6dae1; }
.dark .tone-teal    { --tone: #2dd4bf; --tone-bg: rgb(45 212 191 / .12); --tone-soft: rgb(45 212 191 / .3); }
.dark .tone-blue    { --tone: #7aa7ff; --tone-bg: rgb(96 165 250 / .13); --tone-soft: rgb(96 165 250 / .3); }
.dark .tone-violet  { --tone: #b69cff; --tone-bg: rgb(167 139 250 / .13); --tone-soft: rgb(167 139 250 / .3); }
.dark .tone-amber   { --tone: #fbbf24; --tone-bg: rgb(251 191 36 / .12); --tone-soft: rgb(251 191 36 / .3); }
.dark .tone-rose    { --tone: #fb7185; --tone-bg: rgb(251 113 133 / .13); --tone-soft: rgb(251 113 133 / .3); }
.dark .tone-emerald { --tone: #34d399; --tone-bg: rgb(52 211 153 / .12); --tone-soft: rgb(52 211 153 / .3); }
.dark .tone-sky     { --tone: #38bdf8; --tone-bg: rgb(56 189 248 / .12); --tone-soft: rgb(56 189 248 / .3); }
.dark .tone-slate   { --tone: #b2bbc8; --tone-bg: rgb(255 255 255 / .07); --tone-soft: rgb(255 255 255 / .16); }
.ico-chip { width: 34px; height: 34px; border-radius: 10px; display: inline-grid; place-items: center; flex-shrink: 0; background: var(--tone-bg, rgb(var(--s-100))); color: var(--tone, rgb(var(--s-600))); }
.ico-chip svg { width: 17px; height: 17px; }
.ico-chip.sm { width: 28px; height: 28px; border-radius: 8px; }
.ico-chip.sm svg { width: 15px; height: 15px; }
.ico-chip.lg { width: 40px; height: 40px; border-radius: 12px; }
.ico-chip.lg svg { width: 20px; height: 20px; }
.tone-text { color: var(--tone); }

/* Metric tile (ui_stat_card): label + value on the left, toned icon chip on the right, hint below */
.metric .eyebrow { font-size: 12.5px; }
.metric .kpi-value { display: inline-block; }
.metric-hint { margin-top: 8px; font-size: 12.5px; color: var(--muted); line-height: 1.45; }

/* Rich dashboard tiles: a big figure with a small visual (segmented bar / split figures) */
.tile { display: flex; flex-direction: column; min-width: 0; padding: 18px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-card); transition: border-color .15s, box-shadow .15s, transform .15s; }
a.tile:hover, .tile a.tile-link:hover { border-color: rgb(var(--s-300)); }
a.tile:hover { box-shadow: 0 6px 18px -8px rgb(16 24 40 / .16); }
.tile-head { display: flex; align-items: center; gap: 10px; }
.tile-head .t { font-size: 13px; font-weight: 500; color: rgb(var(--s-600)); }
.tile-head .go { margin-left: auto; width: 16px; height: 16px; color: rgb(var(--s-300)); transition: transform .15s, color .15s; }
a.tile:hover .tile-head .go { color: rgb(var(--s-500)); transform: translateX(2px); }
.tile-value { margin-top: 14px; font-size: 30px; font-weight: 600; letter-spacing: -.03em; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.tile-value small { font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--muted); margin-left: 6px; }
.tile-sub { margin-top: 6px; font-size: 12.5px; color: var(--muted); }
.tile-foot { margin-top: auto; padding-top: 14px; }
.segbar { display: flex; gap: 3px; height: 8px; border-radius: 999px; overflow: hidden; background: rgb(var(--s-100)); }
.segbar > span { display: block; height: 100%; min-width: 4px; border-radius: 2px; }
.seg-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 10px; font-size: 12px; color: rgb(var(--s-600)); }
.seg-legend > * { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.seg-legend i { width: 8px; height: 8px; border-radius: 3px; display: inline-block; }
.seg-legend b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.split { display: grid; grid-template-columns: 1fr 1fr; margin-top: 14px; }
.split > * { min-width: 0; padding: 2px 0; }
.split > * + * { border-left: 1px solid var(--line); padding-left: 16px; }
.split .v { font-size: 30px; font-weight: 600; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--ink); }
.split .l { margin-top: 6px; font-size: 12.5px; color: var(--muted); }
.split a:hover .v { color: var(--brand-ink); }
.meter { height: 6px; border-radius: 999px; background: rgb(var(--s-100)); overflow: hidden; }
.meter > span { display: block; height: 100%; border-radius: 999px; background: var(--tone, var(--brand)); }

/* ---------- Panels: a card with a header row, list rows and a footer link (premium list layout) ---------- */
.panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px 14px; }
.panel-head.ruled { border-bottom: 1px solid var(--line-soft); }
.panel-head .card-sub { margin-top: 3px; }
.panel-link { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 500; color: var(--brand-ink); white-space: nowrap; }
.panel-link:hover { color: var(--brand); }
.panel-link svg { width: 14px; height: 14px; }
.panel-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; border-top: 1px solid var(--line-soft); background: var(--surface-2); font-size: 13px; color: var(--muted); border-radius: 0 0 14px 14px; }
.list-rows > * + * { border-top: 1px solid var(--line-soft); }
.list-row { display: flex; align-items: center; gap: 14px; padding: 12px 20px; transition: background .12s; min-width: 0; }
a.list-row:hover { background: var(--surface-2); }
.list-row .row-title { font-size: 13.5px; font-weight: 500; color: var(--ink); line-height: 1.35; }
.list-row .row-meta { font-size: 12.5px; color: var(--muted); line-height: 1.4; margin-top: 2px; }
.list-row .row-chev { width: 16px; height: 16px; color: rgb(var(--s-300)); flex-shrink: 0; transition: transform .15s, color .15s; }
a.list-row:hover .row-chev { color: rgb(var(--s-500)); transform: translateX(2px); }
/* Quiet status: a badge shown as coloured dot + text (e.g. payment state under an amount) */
.pay-quiet .badge { background: transparent; box-shadow: none; padding: 0; font-size: 12px; }
.pay-quiet, .pay-quiet * { white-space: nowrap; }
.ref { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; font-weight: 600; color: var(--ink); letter-spacing: -.005em; }

/* Pill tabs: categories inside a panel (data-tabs + data-no-hash) */
.pill-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.pill-tab { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 9px 0 10px; border-radius: 9px; font-size: 13px; font-weight: 500; color: rgb(var(--s-600)); white-space: nowrap; border: 1px solid var(--line); background: var(--surface); cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.pill-tab:hover { color: var(--ink); background: var(--surface-2); }
.pill-tab svg { width: 15px; height: 15px; color: rgb(var(--s-400)); }
.pill-tab .count { min-width: 20px; height: 18px; padding: 0 6px; border-radius: 999px; font-size: 11.5px; font-weight: 600; display: inline-grid; place-items: center; background: rgb(var(--s-100)); color: rgb(var(--s-600)); font-variant-numeric: tabular-nums; }
.pill-tab[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.pill-tab[aria-selected="true"] svg { color: currentColor; opacity: .75; }
.pill-tab[aria-selected="true"] .count { background: rgb(255 255 255 / .16); color: inherit; }
.dark .pill-tab[aria-selected="true"] .count { background: rgb(0 0 0 / .12); }

/* Timeline (today's schedule) */
.timeline { position: relative; }
.timeline > li { position: relative; display: grid; grid-template-columns: 64px 1fr; gap: 16px; padding: 10px 0; }
.timeline > li::before { content: ''; position: absolute; left: 75px; top: 16px; width: 9px; height: 9px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 2px var(--brand); z-index: 1; }
.timeline > li::after { content: ''; position: absolute; left: 79px; top: 28px; bottom: -12px; width: 1px; background: var(--line); }
.timeline > li:last-child::after { display: none; }
.timeline > li.done::before { background: var(--brand); }
.timeline time { font-size: 12.5px; font-weight: 600; color: var(--ink); text-align: right; padding-top: 1px; font-variant-numeric: tabular-nums; }
.timeline .tl-body { padding-left: 14px; min-width: 0; }

/* Small empty state inside a panel */
.empty-mini { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 36px 20px; }
.empty-mini .ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--surface-2); color: rgb(var(--s-400)); box-shadow: inset 0 0 0 1px var(--line); margin-bottom: 12px; }
.empty-mini .ico svg { width: 20px; height: 20px; }
.empty-mini .ico.ok { background: var(--b-green-bg); color: var(--b-green); box-shadow: none; }
.empty-mini .t { font-size: 14px; font-weight: 600; color: var(--ink); }
.empty-mini .s { margin-top: 3px; font-size: 13px; color: var(--muted); max-width: 300px; }

/* Appliance icon tile (appliance_icon()) */
.app-ico { width: 32px; height: 32px; border-radius: 9px; display: inline-grid; place-items: center; flex-shrink: 0; background: var(--surface-2); color: rgb(var(--s-600)); box-shadow: inset 0 0 0 1px var(--line); }
.app-ico svg { width: 16px; height: 16px; }
.app-ico.sm { width: 26px; height: 26px; border-radius: 7px; }
.app-ico.sm svg { width: 14px; height: 14px; }

/* ---------- Needs-attention inbox (dashboard): categories left, items right ---------- */
.attn { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: 360px; }
.attn-nav { display: flex; flex-direction: column; gap: 2px; padding: 10px; border-right: 1px solid var(--line-soft); background: var(--surface-2); }
.attn-cat { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: 11px; text-align: left; cursor: pointer; transition: background .15s, box-shadow .15s; }
.attn-cat:hover { background: var(--hover); }
.attn-cat[aria-selected="true"] { background: var(--surface); box-shadow: 0 1px 2px rgb(16 24 40 / .06), inset 0 0 0 1px var(--line); }
.attn-cat .t { font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.attn-cat .s { font-size: 11.5px; color: var(--muted); line-height: 1.35; }
.attn-cat.zero .t { color: rgb(var(--s-500)); font-weight: 500; }
.attn-cat.zero .ico-chip { background: rgb(var(--s-100)); color: rgb(var(--s-400)); }
.attn-count { min-width: 26px; height: 22px; padding: 0 7px; border-radius: 999px; font-size: 12px; font-weight: 600; display: inline-grid; place-items: center; flex-shrink: 0; background: var(--tone-bg); color: var(--tone); }
.attn-body { min-width: 0; display: flex; flex-direction: column; }
.attn-body > [data-tab-panel] { display: flex; flex-direction: column; flex: 1; }
.attn-row:hover { background: var(--surface-2); }
@media (max-width: 767px) {
  .attn { grid-template-columns: 1fr; min-height: 0; }
  .attn-nav { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line-soft); scrollbar-width: none; }
  .attn-nav::-webkit-scrollbar { display: none; }
  .attn-cat { width: auto; flex-shrink: 0; padding: 7px 10px; }
  .attn-cat .s { display: none; }
}

/* Job progress steps (New → Assigned → Working → Done) */
.steps { display: inline-flex; gap: 3px; vertical-align: middle; }
.steps i { width: 14px; height: 4px; border-radius: 2px; background: rgb(var(--s-200)); }
.steps i.on { background: var(--step, var(--brand)); }

/* ---------- Pill tabs: a toolbar-style view switcher (dashboard, reports): add "tabs-pill" to .tabs ---------- */
.tabs.tabs-pill { display: inline-flex; max-width: 100%; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); box-shadow: var(--shadow-card); overflow-x: auto; }
.tabs.tabs-pill .tab { margin: 0; height: 36px; padding: 0 14px; border: 0; border-radius: 9px; color: rgb(var(--s-600)); transition: background .15s, color .15s; }
.tabs.tabs-pill .tab:hover { background: var(--hover); color: var(--ink); }
.tabs.tabs-pill .tab[aria-selected="true"], .tabs.tabs-pill .tab[aria-current="page"] { background: var(--brand-soft); color: var(--brand-ink); box-shadow: inset 0 0 0 1px rgb(15 133 123 / .2); }
.tabs.tabs-pill .tab[aria-selected="true"] svg, .tabs.tabs-pill .tab[aria-current="page"] svg { color: var(--brand); opacity: 1; }
@media (max-width: 639px) {
  .tabs.tabs-pill { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .tabs.tabs-pill .tab { justify-content: center; border: 0; background: transparent; }
}

/* ---------- Dashboard welcome header + date widget (English date and Nepali BS date, clearly labelled) ---------- */
.hero { position: relative; overflow: hidden; padding: 22px 24px; border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-card);
  background: radial-gradient(700px 240px at 0% 0%, var(--brand-soft), transparent 70%), radial-gradient(500px 200px at 100% 100%, rgb(var(--s-100)), transparent 70%), var(--surface); }
.hero .page-title { font-size: 26px; }
@media (max-width: 639px) { .hero { padding: 18px; } .hero .page-title { font-size: 22px; } }
.date-widget { display: inline-flex; align-items: stretch; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-card); }
.date-widget .dw { display: flex; align-items: center; gap: 12px; padding: 12px 16px; min-width: 0; }
.date-widget .dw + .dw { border-left: 1px solid var(--line); }
.dw-cal { width: 42px; flex-shrink: 0; border-radius: 10px; overflow: hidden; text-align: center; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line), 0 1px 2px rgb(16 24 40 / .06); }
.dw-cal .m { display: block; padding: 2px 0 3px; background: var(--brand); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; line-height: 1.3; }
.dw-cal.np .m { background: #c8102e; letter-spacing: 0; font-size: 10.5px; font-weight: 600; }
.dw-cal .d { display: block; padding: 4px 0 5px; font-size: 18px; font-weight: 700; color: var(--ink); line-height: 1; font-variant-numeric: tabular-nums; }
.dw-main { font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.25; white-space: nowrap; }
.dw-sub { margin-top: 2px; font-size: 12px; color: var(--muted); white-space: nowrap; }
@media (max-width: 639px) { .date-widget { display: grid; grid-template-columns: 1fr 1fr; width: 100%; } .date-widget .dw { padding: 10px; gap: 9px; } .dw-cal { width: 36px; } .dw-cal .d { font-size: 16px; } .dw-main { font-size: 13px; white-space: normal; } .dw-sub { font-size: 11.5px; white-space: normal; } }

/* ---------- Section heading inside a page (eyebrow-style label with optional right-side link) ---------- */
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.section-head h2 { font-size: 13px; font-weight: 600; color: rgb(var(--s-700)); letter-spacing: -.005em; }
.section-head a { font-size: 12.5px; font-weight: 500; color: var(--brand-ink); }

/* ---------- Stat strip: a row of KPI cards joined into one calm panel (wrap the grid in .stat-group) ---------- */
.stat-group { gap: 0 !important; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-card); overflow: hidden; }
.stat-group > .card { border: 0; border-radius: 0; box-shadow: -1px 0 0 var(--line), 0 -1px 0 var(--line); padding: 16px 18px; }
.stat-group > a.card { transition: background .15s; }
.stat-group > a.card:hover { background: var(--surface-2); }
.stat-group .kpi-value { font-size: 22px; }
/* Phones: a lone last cell fills the row (unless a cell already spans it), and money figures shrink so they don't wrap */
@media (max-width: 767px) { .stat-group.grid-cols-2:not(:has(> [class*="col-span-2"])) > :last-child:nth-child(odd) { grid-column: span 2; } }
@media (max-width: 639px) { .stat-group > .card { padding: 14px 16px; } .stat-group .kpi-value { font-size: 19px; } }

/* ---------- Dropdown panels on <details class="pop"> (filters, "More" menus); closed by outside click / Esc ---------- */
details.pop { position: relative; }
details.pop > summary { list-style: none; cursor: pointer; user-select: none; }
details.pop > summary::-webkit-details-marker { display: none; }
details.pop[open] > summary.btn-ghost { background: var(--hover); }
details.pop > .pop-panel { position: absolute; z-index: 45; top: calc(100% + 8px); right: 0; width: min(560px, calc(100vw - 32px)); padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 20px 40px -12px rgb(0 0 0 / .25); animation: rise .15s ease-out both; }
details.pop.pop-left > .pop-panel, details.pop.pop-left > .menu { left: 0; right: auto; }
details.pop > .menu { animation: rise .15s ease-out both; }
.pop-panel .pop-foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.pop-label { display: block; margin-bottom: 6px; font-size: 12.5px; font-weight: 500; color: rgb(var(--s-600)); }
@media (max-width: 639px) {
  details.pop > .pop-panel { position: fixed; left: 12px; right: 12px; top: auto; bottom: 12px; width: auto; max-height: 82vh; overflow-y: auto; z-index: 70; }
}
.btn-ghost.is-active { border-color: var(--brand); color: var(--brand-ink); background: var(--brand-soft); }
.btn-ghost .count { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; font-size: 11px; font-weight: 600; display: inline-grid; place-items: center; background: var(--brand); color: #fff; }
.btn-sm { height: 32px !important; padding: 0 11px !important; font-size: 13px !important; gap: 6px !important; }

/* ---------- Filter bar: one row (search + key filters + "Filters" dropdown) above a list ---------- */
.filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.filter-bar .grow { flex: 1 1 260px; min-width: 0; }
.search-field { position: relative; }
.search-field > svg, .search-field > i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: rgb(var(--s-400)); pointer-events: none; }
.search-field > input { padding-left: 36px !important; }
.filter-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.filter-chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 6px 0 10px; border-radius: 999px; background: var(--brand-soft); color: var(--brand-ink); font-size: 12.5px; font-weight: 500; }
.filter-chip a { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 999px; }
.filter-chip a:hover { background: rgb(15 133 123 / .15); }
.filter-chip svg { width: 12px; height: 12px; }

/* Responsive table -> stacked cards on phones. Add class "stack-sm" to a <table>, and data-label to each <td>. */
@media screen and (max-width: 639px) {
  table.stack-sm thead { display: none; }
  table.stack-sm, table.stack-sm tbody, table.stack-sm tr, table.stack-sm td { display: block; width: 100%; }
  table.stack-sm tr { padding: 12px 16px; border-bottom: 1px solid var(--line-soft); }
  table.stack-sm tbody tr:last-child { border-bottom: 0; }
  table.stack-sm td { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 4px 0 !important; border: 0 !important; text-align: right !important; }
  table.stack-sm td[data-label]::before { content: attr(data-label); font-size: 12px; color: var(--muted); text-align: left; flex-shrink: 0; }
  table.stack-sm td.cell-title { display: block; text-align: left !important; padding-bottom: 8px !important; }
  table.stack-sm td.cell-title::before { display: none; }
}

@media (max-width: 639px) { main table.stack-sm td { padding: 4px 0 !important; } main table.stack-sm tr { padding: 12px 16px !important; } main table.stack-sm td.cell-title { padding-bottom: 8px !important; } main table.stack-sm td > a.rounded-lg, main table.stack-sm td > form { margin-left: auto; } }

/* ---------- Legacy page re-skin (scoped to <main>) ---------- */
main .bg-white { background-color: var(--surface); }
main .bg-gradient-to-br, main .bg-gradient-to-r, main .bg-gradient-to-b { background-image: none !important; }
main .animate-pulse { animation-duration: 2.4s; }
main .hover\:scale-\[1\.02\]:hover, main .hover\:scale-\[1\.01\]:hover { transform: none; }
main table thead { background: var(--surface-2); }
main table thead th { font-size: 12px !important; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--muted) !important; }
main table tbody tr { transition: background .12s; }
main table tbody tr:hover { background-color: var(--surface-2); }
main input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]), main select, main textarea { font-family: inherit; border-color: rgb(var(--s-300)); background-color: var(--surface); border-radius: 9px; color: var(--ink); transition: border-color .15s, box-shadow .15s; }
main input::placeholder, main textarea::placeholder { color: rgb(var(--s-400)); }
main input:not([type=checkbox]):not([type=radio]):focus, main select:focus, main textarea:focus { outline: none; border-color: var(--brand) !important; box-shadow: 0 0 0 4px var(--brand-ring) !important; }
main input[type=checkbox], main input[type=radio] { accent-color: var(--brand); }
main label.uppercase, main label.tracking-wider { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 13px; color: rgb(var(--s-700)); }
main .rounded-2xl.border { border-color: var(--line); }
main button.bg-blue-600, main a.bg-blue-600, main button.bg-emerald-600, main a.bg-emerald-600 { box-shadow: 0 1px 2px rgb(16 24 40 / .14), inset 0 1px 0 rgb(255 255 255 / .16); }
main h1.text-xl, main h1.text-2xl { letter-spacing: -.02em; font-weight: 600; }
main table .px-6 { padding-left: 16px !important; padding-right: 16px !important; }
main table td.py-4, main table td.py-3\.5 { padding-top: 12px !important; padding-bottom: 12px !important; }
main table th.py-3\.5, main table th.py-3 { padding-top: 10px !important; padding-bottom: 10px !important; }
main table td a.rounded-lg, main table td a.rounded-xl, main table td a.font-mono { white-space: nowrap; }
main .font-bold { font-weight: 600; }
main .text-xs { font-size: 13px; line-height: 1.45; }
main img { max-width: 100%; }

/* ---------- Dark-mode adjustments for legacy utility classes ---------- */
.dark .bg-white, .dark .hover\:bg-white:hover, .dark .focus\:bg-white:focus { background-color: var(--surface) !important; }
.dark .bg-slate-900, .dark .bg-slate-800, .dark .bg-slate-950 { background-color: #2a3441 !important; }
.dark .hover\:bg-slate-800:hover, .dark .hover\:bg-slate-700:hover { background-color: #36414f !important; }
.dark .divide-slate-100 > :not([hidden]) ~ :not([hidden]), .dark .divide-slate-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--line) !important; }
.dark img[src*="payment_qrs"] { background: #fff; padding: 6px; border-radius: 10px; }
.dark input[type=date]::-webkit-calendar-picker-indicator { filter: invert(.8); }
.dark .shadow-sm, .dark .shadow, .dark .shadow-md { box-shadow: 0 1px 2px rgb(0 0 0 / .35); }
@media print {
  .sidebar, .topbar, .toast-stack, #cmdk { display: none !important; }
  :root, .dark { --canvas: #fff; --surface: #fff; --surface-2: #fff; --line: #d9dde5; --line-soft: #e5e8ee; --ink: #101828; --text: #1f2937; --muted: #475467; --s-50: 248 249 251; --s-100: 241 243 246; --s-200: 229 232 238; --s-300: 208 213 222; --s-400: 152 161 178; --s-500: 102 112 133; --s-600: 74 84 104; --s-700: 54 64 85; --s-800: 31 41 55; --s-900: 16 24 40; --s-950: 11 18 32; }
  body, main { background: #fff !important; overflow: visible !important; height: auto !important; }
  .card { box-shadow: none; }
}


.dark .bg-emerald-50{background-color:rgb(16 185 129 / .10)!important}
.dark .hover\:bg-emerald-50:hover{background-color:rgb(16 185 129 / 0.16)!important}
.dark .bg-emerald-100{background-color:rgb(16 185 129 / .16)!important}
.dark .hover\:bg-emerald-100:hover{background-color:rgb(16 185 129 / 0.22)!important}
.dark .bg-emerald-200{background-color:rgb(16 185 129 / .22)!important}
.dark .hover\:bg-emerald-200:hover{background-color:rgb(16 185 129 / 0.28)!important}
.dark .text-emerald-500{color:rgb(110 231 183)!important}
.dark .hover\:text-emerald-500:hover{color:rgb(110 231 183)!important}
.dark .text-emerald-600{color:rgb(110 231 183)!important}
.dark .hover\:text-emerald-600:hover{color:rgb(110 231 183)!important}
.dark .text-emerald-700{color:rgb(110 231 183)!important}
.dark .hover\:text-emerald-700:hover{color:rgb(110 231 183)!important}
.dark .text-emerald-800{color:rgb(110 231 183)!important}
.dark .hover\:text-emerald-800:hover{color:rgb(110 231 183)!important}
.dark .text-emerald-900{color:rgb(110 231 183)!important}
.dark .hover\:text-emerald-900:hover{color:rgb(110 231 183)!important}
.dark .border-emerald-100{border-color:rgb(16 185 129 / .30)!important}
.dark .border-emerald-200{border-color:rgb(16 185 129 / .30)!important}
.dark .border-emerald-300{border-color:rgb(16 185 129 / .30)!important}
.dark .bg-green-50{background-color:rgb(34 197 94 / .10)!important}
.dark .hover\:bg-green-50:hover{background-color:rgb(34 197 94 / 0.16)!important}
.dark .bg-green-100{background-color:rgb(34 197 94 / .16)!important}
.dark .hover\:bg-green-100:hover{background-color:rgb(34 197 94 / 0.22)!important}
.dark .bg-green-200{background-color:rgb(34 197 94 / .22)!important}
.dark .hover\:bg-green-200:hover{background-color:rgb(34 197 94 / 0.28)!important}
.dark .text-green-500{color:rgb(134 239 172)!important}
.dark .hover\:text-green-500:hover{color:rgb(134 239 172)!important}
.dark .text-green-600{color:rgb(134 239 172)!important}
.dark .hover\:text-green-600:hover{color:rgb(134 239 172)!important}
.dark .text-green-700{color:rgb(134 239 172)!important}
.dark .hover\:text-green-700:hover{color:rgb(134 239 172)!important}
.dark .text-green-800{color:rgb(134 239 172)!important}
.dark .hover\:text-green-800:hover{color:rgb(134 239 172)!important}
.dark .text-green-900{color:rgb(134 239 172)!important}
.dark .hover\:text-green-900:hover{color:rgb(134 239 172)!important}
.dark .border-green-100{border-color:rgb(34 197 94 / .30)!important}
.dark .border-green-200{border-color:rgb(34 197 94 / .30)!important}
.dark .border-green-300{border-color:rgb(34 197 94 / .30)!important}
.dark .bg-rose-50{background-color:rgb(244 63 94 / .10)!important}
.dark .hover\:bg-rose-50:hover{background-color:rgb(244 63 94 / 0.16)!important}
.dark .bg-rose-100{background-color:rgb(244 63 94 / .16)!important}
.dark .hover\:bg-rose-100:hover{background-color:rgb(244 63 94 / 0.22)!important}
.dark .bg-rose-200{background-color:rgb(244 63 94 / .22)!important}
.dark .hover\:bg-rose-200:hover{background-color:rgb(244 63 94 / 0.28)!important}
.dark .text-rose-500{color:rgb(253 164 175)!important}
.dark .hover\:text-rose-500:hover{color:rgb(253 164 175)!important}
.dark .text-rose-600{color:rgb(253 164 175)!important}
.dark .hover\:text-rose-600:hover{color:rgb(253 164 175)!important}
.dark .text-rose-700{color:rgb(253 164 175)!important}
.dark .hover\:text-rose-700:hover{color:rgb(253 164 175)!important}
.dark .text-rose-800{color:rgb(253 164 175)!important}
.dark .hover\:text-rose-800:hover{color:rgb(253 164 175)!important}
.dark .text-rose-900{color:rgb(253 164 175)!important}
.dark .hover\:text-rose-900:hover{color:rgb(253 164 175)!important}
.dark .border-rose-100{border-color:rgb(244 63 94 / .30)!important}
.dark .border-rose-200{border-color:rgb(244 63 94 / .30)!important}
.dark .border-rose-300{border-color:rgb(244 63 94 / .30)!important}
.dark .bg-red-50{background-color:rgb(239 68 68 / .10)!important}
.dark .hover\:bg-red-50:hover{background-color:rgb(239 68 68 / 0.16)!important}
.dark .bg-red-100{background-color:rgb(239 68 68 / .16)!important}
.dark .hover\:bg-red-100:hover{background-color:rgb(239 68 68 / 0.22)!important}
.dark .bg-red-200{background-color:rgb(239 68 68 / .22)!important}
.dark .hover\:bg-red-200:hover{background-color:rgb(239 68 68 / 0.28)!important}
.dark .text-red-500{color:rgb(252 165 165)!important}
.dark .hover\:text-red-500:hover{color:rgb(252 165 165)!important}
.dark .text-red-600{color:rgb(252 165 165)!important}
.dark .hover\:text-red-600:hover{color:rgb(252 165 165)!important}
.dark .text-red-700{color:rgb(252 165 165)!important}
.dark .hover\:text-red-700:hover{color:rgb(252 165 165)!important}
.dark .text-red-800{color:rgb(252 165 165)!important}
.dark .hover\:text-red-800:hover{color:rgb(252 165 165)!important}
.dark .text-red-900{color:rgb(252 165 165)!important}
.dark .hover\:text-red-900:hover{color:rgb(252 165 165)!important}
.dark .border-red-100{border-color:rgb(239 68 68 / .30)!important}
.dark .border-red-200{border-color:rgb(239 68 68 / .30)!important}
.dark .border-red-300{border-color:rgb(239 68 68 / .30)!important}
.dark .bg-amber-50{background-color:rgb(245 158 11 / .10)!important}
.dark .hover\:bg-amber-50:hover{background-color:rgb(245 158 11 / 0.16)!important}
.dark .bg-amber-100{background-color:rgb(245 158 11 / .16)!important}
.dark .hover\:bg-amber-100:hover{background-color:rgb(245 158 11 / 0.22)!important}
.dark .bg-amber-200{background-color:rgb(245 158 11 / .22)!important}
.dark .hover\:bg-amber-200:hover{background-color:rgb(245 158 11 / 0.28)!important}
.dark .text-amber-500{color:rgb(252 211 77)!important}
.dark .hover\:text-amber-500:hover{color:rgb(252 211 77)!important}
.dark .text-amber-600{color:rgb(252 211 77)!important}
.dark .hover\:text-amber-600:hover{color:rgb(252 211 77)!important}
.dark .text-amber-700{color:rgb(252 211 77)!important}
.dark .hover\:text-amber-700:hover{color:rgb(252 211 77)!important}
.dark .text-amber-800{color:rgb(252 211 77)!important}
.dark .hover\:text-amber-800:hover{color:rgb(252 211 77)!important}
.dark .text-amber-900{color:rgb(252 211 77)!important}
.dark .hover\:text-amber-900:hover{color:rgb(252 211 77)!important}
.dark .border-amber-100{border-color:rgb(245 158 11 / .30)!important}
.dark .border-amber-200{border-color:rgb(245 158 11 / .30)!important}
.dark .border-amber-300{border-color:rgb(245 158 11 / .30)!important}
.dark .bg-yellow-50{background-color:rgb(234 179 8 / .10)!important}
.dark .hover\:bg-yellow-50:hover{background-color:rgb(234 179 8 / 0.16)!important}
.dark .bg-yellow-100{background-color:rgb(234 179 8 / .16)!important}
.dark .hover\:bg-yellow-100:hover{background-color:rgb(234 179 8 / 0.22)!important}
.dark .bg-yellow-200{background-color:rgb(234 179 8 / .22)!important}
.dark .hover\:bg-yellow-200:hover{background-color:rgb(234 179 8 / 0.28)!important}
.dark .text-yellow-500{color:rgb(253 224 71)!important}
.dark .hover\:text-yellow-500:hover{color:rgb(253 224 71)!important}
.dark .text-yellow-600{color:rgb(253 224 71)!important}
.dark .hover\:text-yellow-600:hover{color:rgb(253 224 71)!important}
.dark .text-yellow-700{color:rgb(253 224 71)!important}
.dark .hover\:text-yellow-700:hover{color:rgb(253 224 71)!important}
.dark .text-yellow-800{color:rgb(253 224 71)!important}
.dark .hover\:text-yellow-800:hover{color:rgb(253 224 71)!important}
.dark .text-yellow-900{color:rgb(253 224 71)!important}
.dark .hover\:text-yellow-900:hover{color:rgb(253 224 71)!important}
.dark .border-yellow-100{border-color:rgb(234 179 8 / .30)!important}
.dark .border-yellow-200{border-color:rgb(234 179 8 / .30)!important}
.dark .border-yellow-300{border-color:rgb(234 179 8 / .30)!important}
.dark .bg-orange-50{background-color:rgb(249 115 22 / .10)!important}
.dark .hover\:bg-orange-50:hover{background-color:rgb(249 115 22 / 0.16)!important}
.dark .bg-orange-100{background-color:rgb(249 115 22 / .16)!important}
.dark .hover\:bg-orange-100:hover{background-color:rgb(249 115 22 / 0.22)!important}
.dark .bg-orange-200{background-color:rgb(249 115 22 / .22)!important}
.dark .hover\:bg-orange-200:hover{background-color:rgb(249 115 22 / 0.28)!important}
.dark .text-orange-500{color:rgb(253 186 116)!important}
.dark .hover\:text-orange-500:hover{color:rgb(253 186 116)!important}
.dark .text-orange-600{color:rgb(253 186 116)!important}
.dark .hover\:text-orange-600:hover{color:rgb(253 186 116)!important}
.dark .text-orange-700{color:rgb(253 186 116)!important}
.dark .hover\:text-orange-700:hover{color:rgb(253 186 116)!important}
.dark .text-orange-800{color:rgb(253 186 116)!important}
.dark .hover\:text-orange-800:hover{color:rgb(253 186 116)!important}
.dark .text-orange-900{color:rgb(253 186 116)!important}
.dark .hover\:text-orange-900:hover{color:rgb(253 186 116)!important}
.dark .border-orange-100{border-color:rgb(249 115 22 / .30)!important}
.dark .border-orange-200{border-color:rgb(249 115 22 / .30)!important}
.dark .border-orange-300{border-color:rgb(249 115 22 / .30)!important}
.dark .bg-sky-50{background-color:rgb(14 165 233 / .10)!important}
.dark .hover\:bg-sky-50:hover{background-color:rgb(14 165 233 / 0.16)!important}
.dark .bg-sky-100{background-color:rgb(14 165 233 / .16)!important}
.dark .hover\:bg-sky-100:hover{background-color:rgb(14 165 233 / 0.22)!important}
.dark .bg-sky-200{background-color:rgb(14 165 233 / .22)!important}
.dark .hover\:bg-sky-200:hover{background-color:rgb(14 165 233 / 0.28)!important}
.dark .text-sky-500{color:rgb(125 211 252)!important}
.dark .hover\:text-sky-500:hover{color:rgb(125 211 252)!important}
.dark .text-sky-600{color:rgb(125 211 252)!important}
.dark .hover\:text-sky-600:hover{color:rgb(125 211 252)!important}
.dark .text-sky-700{color:rgb(125 211 252)!important}
.dark .hover\:text-sky-700:hover{color:rgb(125 211 252)!important}
.dark .text-sky-800{color:rgb(125 211 252)!important}
.dark .hover\:text-sky-800:hover{color:rgb(125 211 252)!important}
.dark .text-sky-900{color:rgb(125 211 252)!important}
.dark .hover\:text-sky-900:hover{color:rgb(125 211 252)!important}
.dark .border-sky-100{border-color:rgb(14 165 233 / .30)!important}
.dark .border-sky-200{border-color:rgb(14 165 233 / .30)!important}
.dark .border-sky-300{border-color:rgb(14 165 233 / .30)!important}
.dark .bg-cyan-50{background-color:rgb(6 182 212 / .10)!important}
.dark .hover\:bg-cyan-50:hover{background-color:rgb(6 182 212 / 0.16)!important}
.dark .bg-cyan-100{background-color:rgb(6 182 212 / .16)!important}
.dark .hover\:bg-cyan-100:hover{background-color:rgb(6 182 212 / 0.22)!important}
.dark .bg-cyan-200{background-color:rgb(6 182 212 / .22)!important}
.dark .hover\:bg-cyan-200:hover{background-color:rgb(6 182 212 / 0.28)!important}
.dark .text-cyan-500{color:rgb(103 232 249)!important}
.dark .hover\:text-cyan-500:hover{color:rgb(103 232 249)!important}
.dark .text-cyan-600{color:rgb(103 232 249)!important}
.dark .hover\:text-cyan-600:hover{color:rgb(103 232 249)!important}
.dark .text-cyan-700{color:rgb(103 232 249)!important}
.dark .hover\:text-cyan-700:hover{color:rgb(103 232 249)!important}
.dark .text-cyan-800{color:rgb(103 232 249)!important}
.dark .hover\:text-cyan-800:hover{color:rgb(103 232 249)!important}
.dark .text-cyan-900{color:rgb(103 232 249)!important}
.dark .hover\:text-cyan-900:hover{color:rgb(103 232 249)!important}
.dark .border-cyan-100{border-color:rgb(6 182 212 / .30)!important}
.dark .border-cyan-200{border-color:rgb(6 182 212 / .30)!important}
.dark .border-cyan-300{border-color:rgb(6 182 212 / .30)!important}
.dark .bg-blue-50{background-color:rgb(23 160 148 / .10)!important}
.dark .hover\:bg-blue-50:hover{background-color:rgb(23 160 148 / 0.16)!important}
.dark .bg-blue-100{background-color:rgb(23 160 148 / .16)!important}
.dark .hover\:bg-blue-100:hover{background-color:rgb(23 160 148 / 0.22)!important}
.dark .bg-blue-200{background-color:rgb(23 160 148 / .22)!important}
.dark .hover\:bg-blue-200:hover{background-color:rgb(23 160 148 / 0.28)!important}
.dark .text-blue-500{color:rgb(125 211 201)!important}
.dark .hover\:text-blue-500:hover{color:rgb(125 211 201)!important}
.dark .text-blue-600{color:rgb(125 211 201)!important}
.dark .hover\:text-blue-600:hover{color:rgb(125 211 201)!important}
.dark .text-blue-700{color:rgb(125 211 201)!important}
.dark .hover\:text-blue-700:hover{color:rgb(125 211 201)!important}
.dark .text-blue-800{color:rgb(125 211 201)!important}
.dark .hover\:text-blue-800:hover{color:rgb(125 211 201)!important}
.dark .text-blue-900{color:rgb(125 211 201)!important}
.dark .hover\:text-blue-900:hover{color:rgb(125 211 201)!important}
.dark .border-blue-100{border-color:rgb(23 160 148 / .30)!important}
.dark .border-blue-200{border-color:rgb(23 160 148 / .30)!important}
.dark .border-blue-300{border-color:rgb(23 160 148 / .30)!important}
.dark .bg-purple-50{background-color:rgb(59 130 246 / .10)!important}
.dark .hover\:bg-purple-50:hover{background-color:rgb(59 130 246 / 0.16)!important}
.dark .bg-purple-100{background-color:rgb(59 130 246 / .16)!important}
.dark .hover\:bg-purple-100:hover{background-color:rgb(59 130 246 / 0.22)!important}
.dark .bg-purple-200{background-color:rgb(59 130 246 / .22)!important}
.dark .hover\:bg-purple-200:hover{background-color:rgb(59 130 246 / 0.28)!important}
.dark .text-purple-500{color:rgb(147 197 253)!important}
.dark .hover\:text-purple-500:hover{color:rgb(147 197 253)!important}
.dark .text-purple-600{color:rgb(147 197 253)!important}
.dark .hover\:text-purple-600:hover{color:rgb(147 197 253)!important}
.dark .text-purple-700{color:rgb(147 197 253)!important}
.dark .hover\:text-purple-700:hover{color:rgb(147 197 253)!important}
.dark .text-purple-800{color:rgb(147 197 253)!important}
.dark .hover\:text-purple-800:hover{color:rgb(147 197 253)!important}
.dark .text-purple-900{color:rgb(147 197 253)!important}
.dark .hover\:text-purple-900:hover{color:rgb(147 197 253)!important}
.dark .border-purple-100{border-color:rgb(59 130 246 / .30)!important}
.dark .border-purple-200{border-color:rgb(59 130 246 / .30)!important}
.dark .border-purple-300{border-color:rgb(59 130 246 / .30)!important}
.dark .bg-indigo-50{background-color:rgb(59 130 246 / .10)!important}
.dark .hover\:bg-indigo-50:hover{background-color:rgb(59 130 246 / 0.16)!important}
.dark .bg-indigo-100{background-color:rgb(59 130 246 / .16)!important}
.dark .hover\:bg-indigo-100:hover{background-color:rgb(59 130 246 / 0.22)!important}
.dark .bg-indigo-200{background-color:rgb(59 130 246 / .22)!important}
.dark .hover\:bg-indigo-200:hover{background-color:rgb(59 130 246 / 0.28)!important}
.dark .text-indigo-500{color:rgb(147 197 253)!important}
.dark .hover\:text-indigo-500:hover{color:rgb(147 197 253)!important}
.dark .text-indigo-600{color:rgb(147 197 253)!important}
.dark .hover\:text-indigo-600:hover{color:rgb(147 197 253)!important}
.dark .text-indigo-700{color:rgb(147 197 253)!important}
.dark .hover\:text-indigo-700:hover{color:rgb(147 197 253)!important}
.dark .text-indigo-800{color:rgb(147 197 253)!important}
.dark .hover\:text-indigo-800:hover{color:rgb(147 197 253)!important}
.dark .text-indigo-900{color:rgb(147 197 253)!important}
.dark .hover\:text-indigo-900:hover{color:rgb(147 197 253)!important}
.dark .border-indigo-100{border-color:rgb(59 130 246 / .30)!important}
.dark .border-indigo-200{border-color:rgb(59 130 246 / .30)!important}
.dark .border-indigo-300{border-color:rgb(59 130 246 / .30)!important}
.dark .bg-violet-50{background-color:rgb(59 130 246 / .10)!important}
.dark .hover\:bg-violet-50:hover{background-color:rgb(59 130 246 / 0.16)!important}
.dark .bg-violet-100{background-color:rgb(59 130 246 / .16)!important}
.dark .hover\:bg-violet-100:hover{background-color:rgb(59 130 246 / 0.22)!important}
.dark .bg-violet-200{background-color:rgb(59 130 246 / .22)!important}
.dark .hover\:bg-violet-200:hover{background-color:rgb(59 130 246 / 0.28)!important}
.dark .text-violet-500{color:rgb(147 197 253)!important}
.dark .hover\:text-violet-500:hover{color:rgb(147 197 253)!important}
.dark .text-violet-600{color:rgb(147 197 253)!important}
.dark .hover\:text-violet-600:hover{color:rgb(147 197 253)!important}
.dark .text-violet-700{color:rgb(147 197 253)!important}
.dark .hover\:text-violet-700:hover{color:rgb(147 197 253)!important}
.dark .text-violet-800{color:rgb(147 197 253)!important}
.dark .hover\:text-violet-800:hover{color:rgb(147 197 253)!important}
.dark .text-violet-900{color:rgb(147 197 253)!important}
.dark .hover\:text-violet-900:hover{color:rgb(147 197 253)!important}
.dark .border-violet-100{border-color:rgb(59 130 246 / .30)!important}
.dark .border-violet-200{border-color:rgb(59 130 246 / .30)!important}
.dark .border-violet-300{border-color:rgb(59 130 246 / .30)!important}
.dark .bg-teal-50{background-color:rgb(20 184 166 / .10)!important}
.dark .hover\:bg-teal-50:hover{background-color:rgb(20 184 166 / 0.16)!important}
.dark .bg-teal-100{background-color:rgb(20 184 166 / .16)!important}
.dark .hover\:bg-teal-100:hover{background-color:rgb(20 184 166 / 0.22)!important}
.dark .bg-teal-200{background-color:rgb(20 184 166 / .22)!important}
.dark .hover\:bg-teal-200:hover{background-color:rgb(20 184 166 / 0.28)!important}
.dark .text-teal-500{color:rgb(94 234 212)!important}
.dark .hover\:text-teal-500:hover{color:rgb(94 234 212)!important}
.dark .text-teal-600{color:rgb(94 234 212)!important}
.dark .hover\:text-teal-600:hover{color:rgb(94 234 212)!important}
.dark .text-teal-700{color:rgb(94 234 212)!important}
.dark .hover\:text-teal-700:hover{color:rgb(94 234 212)!important}
.dark .text-teal-800{color:rgb(94 234 212)!important}
.dark .hover\:text-teal-800:hover{color:rgb(94 234 212)!important}
.dark .text-teal-900{color:rgb(94 234 212)!important}
.dark .hover\:text-teal-900:hover{color:rgb(94 234 212)!important}
.dark .border-teal-100{border-color:rgb(20 184 166 / .30)!important}
.dark .border-teal-200{border-color:rgb(20 184 166 / .30)!important}
.dark .border-teal-300{border-color:rgb(20 184 166 / .30)!important}