/* ============================================================
   Aurum Operations Console — design system
   Tokens are raw RGB triplets so Tailwind can apply opacity.
   ============================================================ */

:root {
  /* dark is the default identity of the product */
  --bg: 9 12 20;
  --bg-soft: 13 17 27;
  --surface: 17 22 34;
  --surface-2: 24 30 44;
  --line: 38 46 64;
  --ink: 233 238 247;
  --muted: 150 161 183;
  --faint: 108 120 143;

  --brand: 124 92 255;
  --brand-2: 168 85 247;
  --gold: 245 179 60;
  --emerald: 34 197 126;
  --rose: 244 82 96;
  --sky: 56 163 245;
  --amber: 251 146 60;

  --grid: 255 255 255;
  --grid-a: .055;
  --shadow-a: .55;
  --sidebar-w: 248px;
  --topbar-h: 56px;
}

[data-theme="light"] {
  --bg: 244 246 251;
  --bg-soft: 255 255 255;
  --surface: 255 255 255;
  --surface-2: 245 247 251;
  --line: 226 231 240;
  --ink: 19 24 38;
  --muted: 92 104 128;
  --faint: 134 146 170;

  --brand: 109 74 255;
  --brand-2: 147 51 234;
  --gold: 202 138 4;
  --emerald: 16 158 92;
  --rose: 225 45 62;
  --sky: 14 130 220;
  --amber: 217 119 6;

  --grid: 15 23 42;
  --grid-a: .06;
  --shadow-a: .12;
}

* { -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }
body { overflow-x: hidden; }

::selection { background: rgb(var(--brand) / .28); }

/* scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgb(var(--line)); border-radius: 99px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: rgb(var(--faint) / .6); background-clip: content-box; }

/* ============================================================
   SHELL
   ============================================================ */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: 60;
  width: var(--sidebar-w);
  display: flex; flex-direction: column;
  background: rgb(var(--bg-soft));
  border-right: 1px solid rgb(var(--line));
  transform: translateX(-100%);
  transition: transform .32s cubic-bezier(.22,1,.36,1), width .26s cubic-bezier(.22,1,.36,1);
}
.sidebar::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(520px 320px at -10% 0%, rgb(var(--brand) / .13), transparent 62%);
}
body.nav-open .sidebar { transform: translateX(0); }

.sidebar-head { position: relative; display: flex; align-items: center; gap: .5rem; padding: 0 .9rem; height: var(--topbar-h); border-bottom: 1px solid rgb(var(--line)); }
.sidebar-nav { position: relative; flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: .55rem .55rem .75rem; }
.sidebar-foot { position: relative; border-top: 1px solid rgb(var(--line)); padding: .55rem .6rem; }

.main-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }

@media (min-width: 1024px) {
  .sidebar { transform: none; }
  .main-col { margin-left: var(--sidebar-w); transition: margin-left .26s cubic-bezier(.22,1,.36,1); }
  body.rail { --sidebar-w: 78px; }
  body.rail .nav-label { opacity: 0; pointer-events: none; width: 0; overflow: hidden; }
  body.rail .nav-section-title { opacity: 0; height: 8px; margin: 0; }
  body.rail .nav-item { justify-content: center; padding-inline: 0; }
  body.rail .sidebar-head { justify-content: center; }
}

.scrim { position: fixed; inset: 0; z-index: 55; background: rgb(2 4 10 / .62); backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity .28s; }
body.nav-open .scrim { opacity: 1; pointer-events: auto; }
@media (min-width: 1024px) { .scrim { display: none; } }

.topbar {
  position: sticky; top: 0; z-index: 40;
  height: var(--topbar-h); display: flex; align-items: center; gap: .5rem;
  padding: 0 .85rem; border-bottom: 1px solid rgb(var(--line));
  background: rgb(var(--bg) / .82); backdrop-filter: blur(14px) saturate(140%);
}
@media (min-width: 640px) { .topbar { padding: 0 1rem; gap: .55rem; } }

.view { flex: 1; padding: .85rem .75rem 1.25rem; min-width: 0; }
@media (min-width: 640px) { .view { padding: 1rem 1rem 1.5rem; } }
@media (min-width: 1280px) { .view { padding: 1.15rem 1.5rem 1.75rem; } }

/* ============================================================
   NAV
   ============================================================ */
.nav-section-title {
  padding: .1rem .65rem; margin: .8rem 0 .28rem;
  font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: rgb(var(--faint)); transition: opacity .2s;
}
.nav-section-title:first-child { margin-top: .1rem; }

.nav-item {
  position: relative; display: flex; align-items: center; gap: .7rem;
  padding: .44rem .62rem; margin-bottom: 1px; border-radius: .6rem;
  font-size: 13px; font-weight: 500; color: rgb(var(--muted));
  transition: background .18s, color .18s, transform .18s;
}
.nav-item svg { width: 17px; height: 17px; stroke-width: 1.9; flex: none; }
.nav-item:hover { background: rgb(var(--surface-2)); color: rgb(var(--ink)); }
.nav-item.active { color: rgb(var(--ink)); font-weight: 650; background: linear-gradient(90deg, rgb(var(--brand) / .20), rgb(var(--brand) / .05)); }
.nav-item.active::before { content: ''; position: absolute; left: -.65rem; top: 50%; height: 20px; width: 3px; border-radius: 0 4px 4px 0; background: rgb(var(--brand)); transform: translateY(-50%); }
.nav-item.active svg { color: rgb(var(--brand)); }
.nav-badge { margin-left: auto; font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 99px; background: rgb(var(--rose) / .16); color: rgb(var(--rose)); }
body.rail .nav-badge { position: absolute; top: 4px; right: 8px; padding: 0 4px; }

.logo-mark {
  display: grid; place-items: center; border-radius: .85rem; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, rgb(var(--brand)), rgb(var(--brand-2)) 55%, rgb(var(--gold)));
  box-shadow: 0 10px 26px -12px rgb(var(--brand) / .9);
}

/* ============================================================
   ATOMS
   ============================================================ */
.card {
  background: rgb(var(--surface));
  border: 1px solid rgb(var(--line));
  border-radius: 1rem;
  box-shadow: 0 1px 2px rgb(0 0 0 / .04), 0 14px 34px -26px rgb(0 0 0 / var(--shadow-a));
  min-width: 0;   /* stop wide children blowing out their grid track */
}
.apexcharts-canvas { max-width: 100%; }
.spark-wrap, .card > div { min-width: 0; }
.card-glass {
  background: rgb(var(--surface) / .86);
  border: 1px solid rgb(var(--line));
  border-radius: 1.15rem;
  backdrop-filter: blur(18px) saturate(150%);
  box-shadow: 0 30px 70px -30px rgb(0 0 0 / .7);
}
.card-hover { transition: transform .22s cubic-bezier(.22,1,.36,1), border-color .22s, box-shadow .22s; }
.card-hover:hover { transform: translateY(-2px); border-color: rgb(var(--brand) / .42); box-shadow: 0 22px 46px -28px rgb(var(--brand) / .75); }

.icon-btn {
  display: grid; place-items: center; height: 32px; width: 32px; flex: none;
  border-radius: .7rem; color: rgb(var(--muted));
  border: 1px solid transparent; transition: all .18s;
}
.icon-btn svg { width: 17px; height: 17px; stroke-width: 1.9; }
.icon-btn:hover { background: rgb(var(--surface-2)); color: rgb(var(--ink)); border-color: rgb(var(--line)); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; height: 34px; padding: 0 .75rem; border-radius: .7rem; font-size: 13px; font-weight: 600; transition: all .18s; white-space: nowrap; }
.btn svg { width: 15px; height: 15px; stroke-width: 2; }
.btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; height: 34px; padding: 0 .8rem; border-radius: .7rem; font-size: 13px; font-weight: 650; color: #fff; white-space: nowrap;
  background: linear-gradient(135deg, rgb(var(--brand)), rgb(var(--brand-2)));
  box-shadow: 0 10px 24px -12px rgb(var(--brand) / .95); transition: all .18s; }
.btn-primary svg { width: 15px; height: 15px; stroke-width: 2.1; }
.btn-primary:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }
.btn-ghost { background: rgb(var(--surface-2)); color: rgb(var(--ink)); border: 1px solid rgb(var(--line)); }
.btn-ghost:hover { border-color: rgb(var(--brand) / .5); color: rgb(var(--ink)); }
.btn-soft { background: rgb(var(--brand) / .12); color: rgb(var(--brand)); border: 1px solid rgb(var(--brand) / .22); }
.btn-soft:hover { background: rgb(var(--brand) / .2); }
.btn-danger { background: rgb(var(--rose) / .13); color: rgb(var(--rose)); border: 1px solid rgb(var(--rose) / .25); }
.btn-danger:hover { background: rgb(var(--rose) / .22); }
.btn:disabled, .btn-primary:disabled { opacity: .45; pointer-events: none; }

.chip { display: inline-flex; align-items: center; gap: .3rem; height: 27px; padding: 0 .6rem; border-radius: 99px; font-size: 12px; font-weight: 600; color: rgb(var(--muted)); border: 1px solid rgb(var(--line)); background: rgb(var(--surface-2)); transition: all .18s; white-space: nowrap; }
.chip:hover { color: rgb(var(--ink)); border-color: rgb(var(--brand) / .45); }
.chip.on { background: rgb(var(--brand) / .14); border-color: rgb(var(--brand) / .45); color: rgb(var(--brand)); }

.badge { display: inline-flex; align-items: center; gap: .3rem; padding: 2px 9px; border-radius: 99px; font-size: 11px; font-weight: 650; line-height: 1.5; white-space: nowrap; }
.badge i, .badge svg { width: 12px; height: 12px; }
.b-emerald { background: rgb(var(--emerald) / .14); color: rgb(var(--emerald)); }
.b-rose    { background: rgb(var(--rose) / .14);    color: rgb(var(--rose)); }
.b-amber   { background: rgb(var(--amber) / .15);   color: rgb(var(--amber)); }
.b-sky     { background: rgb(var(--sky) / .14);     color: rgb(var(--sky)); }
.b-brand   { background: rgb(var(--brand) / .15);   color: rgb(var(--brand)); }
.b-gold    { background: rgb(var(--gold) / .16);    color: rgb(var(--gold)); }
.b-muted   { background: rgb(var(--faint) / .14);   color: rgb(var(--muted)); }

.dot { height: 7px; width: 7px; border-radius: 99px; flex: none; }

.avatar { border-radius: 99px; object-fit: cover; background: rgb(var(--surface-2)); border: 1px solid rgb(var(--line)); }
.avatar-fb { display: grid; place-items: center; border-radius: 99px; font-weight: 700; letter-spacing: .02em; color: #fff; flex: none; }

.tnum { font-family: '"IBM Plex Mono"', ui-monospace, monospace; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

.field { width: 100%; height: 36px; padding: 0 .8rem; border-radius: .7rem; font-size: 13.5px; color: rgb(var(--ink)); background: rgb(var(--surface-2)); border: 1px solid rgb(var(--line)); transition: all .18s; }
.field:focus { outline: none; border-color: rgb(var(--brand) / .65); box-shadow: 0 0 0 3px rgb(var(--brand) / .16); }
.field::placeholder { color: rgb(var(--faint)); }
textarea.field { height: auto; padding: .6rem .8rem; line-height: 1.5; }
select.field { appearance: none; background-image: linear-gradient(45deg, transparent 50%, rgb(var(--faint)) 50%), linear-gradient(135deg, rgb(var(--faint)) 50%, transparent 50%); background-position: calc(100% - 16px) 17px, calc(100% - 11px) 17px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 2rem; }
.field-label { display: block; margin-bottom: .35rem; font-size: 11.5px; font-weight: 600; color: rgb(var(--muted)); }
.field.invalid { border-color: rgb(var(--rose) / .7); box-shadow: 0 0 0 3px rgb(var(--rose) / .14); }

.kbd { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: 5px; font-size: 10px; font-weight: 600; color: rgb(var(--faint)); background: rgb(var(--surface-2)); border: 1px solid rgb(var(--line)); }

.search-trigger { display: flex; align-items: center; gap: .5rem; height: 34px; padding: 0 .7rem; border-radius: .7rem; min-width: 38px; max-width: 380px; flex: 1 1 auto; background: rgb(var(--surface-2)); border: 1px solid rgb(var(--line)); transition: all .18s; }
.search-trigger:hover { border-color: rgb(var(--brand) / .45); }
@media (max-width: 767px) { .search-trigger { flex: none; width: 34px; padding: 0; justify-content: center; } }

.toggle { position: relative; height: 22px; width: 40px; flex: none; border-radius: 99px; background: rgb(var(--line)); transition: background .22s; }
.toggle::after { content: ''; position: absolute; top: 3px; left: 3px; height: 16px; width: 16px; border-radius: 99px; background: #fff; transition: transform .22s cubic-bezier(.22,1,.36,1); box-shadow: 0 2px 6px rgb(0 0 0 / .35); }
.toggle.on { background: linear-gradient(135deg, rgb(var(--brand)), rgb(var(--brand-2))); }
.toggle.on::after { transform: translateX(18px); }

.notif-dot { position: absolute; top: 3px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 99px; background: rgb(var(--rose)); color: #fff; font-size: 9.5px; font-weight: 800; display: grid; place-items: center; border: 2px solid rgb(var(--bg)); }

.progress { height: 6px; border-radius: 99px; background: rgb(var(--line)); overflow: hidden; }
.progress > span { display: block; height: 100%; border-radius: 99px; transition: width .8s cubic-bezier(.22,1,.36,1); }

.divider { height: 1px; background: rgb(var(--line)); }

/* metric micro-visuals */
.spark-wrap { height: 32px; margin: 0 -4px -8px; }
.stat-tile { position: relative; overflow: hidden; }
.stat-tile::after { content: ''; position: absolute; right: -30px; top: -30px; height: 110px; width: 110px; border-radius: 99px; background: radial-gradient(circle, rgb(var(--brand) / .16), transparent 70%); pointer-events: none; }

/* ============================================================
   TABLES (DataTables skinned)
   ============================================================ */
.tbl-shell { border: 1px solid rgb(var(--line)); border-radius: 1rem; overflow: hidden; background: rgb(var(--surface)); }
.tbl-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; padding: .55rem .65rem; border-bottom: 1px solid rgb(var(--line)); background: rgb(var(--surface)); }
.tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

table.dataTable { width: 100% !important; margin: 0 !important; border-collapse: separate !important; border-spacing: 0; font-size: 12.5px; }
table.dataTable thead th {
  position: sticky; top: 0; z-index: 2;
  background: rgb(var(--surface-2)); color: rgb(var(--faint));
  font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  padding: .5rem .7rem !important; text-align: left; white-space: nowrap;
  border-bottom: 1px solid rgb(var(--line)) !important;
}
table.dataTable tbody td { padding: .55rem .7rem !important; border-top: 1px solid rgb(var(--line) / .7) !important; color: rgb(var(--ink)); vertical-align: middle; }
table.dataTable tbody tr { transition: background .15s; }
table.dataTable tbody tr:hover { background: rgb(var(--brand) / .055); }
table.dataTable tbody tr:first-child td { border-top: 0 !important; }
table.dataTable.no-footer { border-bottom: 0 !important; }
table.dataTable thead th.sorting, table.dataTable thead th.sorting_asc, table.dataTable thead th.sorting_desc { background-image: none !important; cursor: pointer; padding-right: 1.4rem !important; }
table.dataTable thead th.sorting::after, table.dataTable thead th.sorting_asc::after, table.dataTable thead th.sorting_desc::after {
  content: '↕'; position: absolute; right: .6rem; opacity: .4; font-size: 11px;
}
table.dataTable thead th.sorting_asc::after { content: '↑'; opacity: 1; color: rgb(var(--brand)); }
table.dataTable thead th.sorting_desc::after { content: '↓'; opacity: 1; color: rgb(var(--brand)); }
table.dataTable thead th { position: sticky; }
.dataTables_wrapper .dataTables_info { color: rgb(var(--faint)); font-size: 11.5px; padding: .55rem .8rem !important; }
.dataTables_wrapper .dataTables_paginate { padding: .45rem .65rem !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button {
  border: 1px solid rgb(var(--line)) !important; background: rgb(var(--surface-2)) !important;
  color: rgb(var(--muted)) !important; border-radius: .55rem !important; margin: 0 2px !important;
  padding: .32rem .7rem !important; font-size: 12px !important; min-width: 0 !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current { background: rgb(var(--brand)) !important; border-color: rgb(var(--brand)) !important; color: #fff !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: rgb(var(--brand) / .18) !important; color: rgb(var(--ink)) !important; border-color: rgb(var(--brand) / .5) !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled { opacity: .38; pointer-events: none; }
.dt-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; border-top: 1px solid rgb(var(--line)); background: rgb(var(--surface)); }
.dataTables_empty { padding: 3rem 1rem !important; text-align: center !important; color: rgb(var(--faint)) !important; }

/* ============================================================
   OVERLAYS
   ============================================================ */
.search-overlay { position: fixed; inset: 0; z-index: 90; display: none; padding: 8vh 1rem 1rem; background: rgb(2 4 10 / .6); backdrop-filter: blur(6px); }
.search-overlay.open { display: block; animation: fade .18s ease both; }
.search-panel { max-width: 660px; margin: 0 auto; overflow: hidden; animation: pop .24s cubic-bezier(.22,1,.36,1) both; }
.sr-item { display: flex; align-items: center; gap: .7rem; padding: .55rem .7rem; border-radius: .7rem; cursor: pointer; }
.sr-item:hover, .sr-item.sel { background: rgb(var(--brand) / .13); }
.sr-group { padding: .7rem .7rem .3rem; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgb(var(--faint)); }

.notif-panel { position: fixed; top: calc(var(--topbar-h) + 6px); right: .75rem; z-index: 80; width: min(400px, calc(100vw - 1.5rem)); display: none; }
.notif-panel.open { display: block; animation: pop .22s cubic-bezier(.22,1,.36,1) both; }

.modal-back { position: fixed; inset: 0; z-index: 100; display: flex; align-items: flex-end; justify-content: center; padding: 0; background: rgb(2 4 10 / .62); backdrop-filter: blur(5px); animation: fade .2s ease both; }
@media (min-width: 640px) { .modal-back { align-items: center; padding: 1.25rem; } }
.modal-card { width: 100%; max-height: 92vh; display: flex; flex-direction: column; overflow: hidden; border-radius: 1.25rem 1.25rem 0 0; animation: slideup .3s cubic-bezier(.22,1,.36,1) both; }
@media (min-width: 640px) { .modal-card { border-radius: 1.25rem; animation: pop .26s cubic-bezier(.22,1,.36,1) both; } }
.modal-head { display: flex; align-items: flex-start; gap: .7rem; padding: .85rem 1rem; border-bottom: 1px solid rgb(var(--line)); }
.modal-body { padding: 1rem; overflow-y: auto; }
.modal-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; padding: .75rem 1rem; border-top: 1px solid rgb(var(--line)); background: rgb(var(--surface-2) / .6); }

.drawer-back { position: fixed; inset: 0; z-index: 100; background: rgb(2 4 10 / .62); backdrop-filter: blur(5px); animation: fade .2s ease both; }
.drawer-card { position: absolute; inset: 0 0 0 auto; width: min(560px, 100%); display: flex; flex-direction: column; background: rgb(var(--surface)); border-left: 1px solid rgb(var(--line)); animation: slidein .3s cubic-bezier(.22,1,.36,1) both; }

.toast-root { position: fixed; z-index: 120; right: .75rem; bottom: .75rem; display: flex; flex-direction: column; gap: .5rem; width: min(360px, calc(100vw - 1.5rem)); pointer-events: none; }
.toast { display: flex; align-items: flex-start; gap: .65rem; padding: .75rem .85rem; border-radius: .9rem; pointer-events: auto; background: rgb(var(--surface) / .95); border: 1px solid rgb(var(--line)); box-shadow: 0 24px 50px -24px rgb(0 0 0 / .8); backdrop-filter: blur(14px); animation: toastin .32s cubic-bezier(.22,1,.36,1) both; }
.toast.out { animation: toastout .24s ease forwards; }
.toast-ico { display: grid; place-items: center; height: 30px; width: 30px; flex: none; border-radius: .6rem; }

/* ============================================================
   POS
   ============================================================ */
.pos-cart { max-height: calc(100vh - var(--topbar-h) - 3rem); }
@media (min-width: 1280px) {
  .pos-cart { position: sticky; top: calc(var(--topbar-h) + 1rem); }
}
@media (max-width: 1279px) {
  .pos-cart {
    position: fixed; inset: auto 0 0 0; z-index: 45;
    max-height: 86vh; border-radius: 1.25rem 1.25rem 0 0;
    transform: translateY(102%); transition: transform .32s cubic-bezier(.22,1,.36,1);
    box-shadow: 0 -20px 50px -20px rgb(0 0 0 / .7);
  }
  .pos-cart.open { transform: none; }
  #pos-bar { box-shadow: 0 -10px 30px -20px rgb(0 0 0 / .8); }
  body:has(#pos-bar) .view { padding-bottom: 5.5rem; }
}
@media (min-width: 1280px) { #pos-bar { display: none; } }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Wide tables scroll inside their own container rather than squashing to
   unreadable widths on tablets and phones. */
.tbl-scroll > table { min-width: 760px; }

/* ============================================================
   ANIMATION
   ============================================================ */
@keyframes fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.985) } to { opacity: 1; transform: none } }
@keyframes slideup { from { transform: translateY(100%) } to { transform: none } }
@keyframes slidein { from { transform: translateX(100%) } to { transform: none } }
@keyframes toastin { from { opacity: 0; transform: translateX(28px) scale(.97) } to { opacity: 1; transform: none } }
@keyframes toastout { to { opacity: 0; transform: translateX(28px) scale(.97) } }
@keyframes riseIn { from { opacity: 0; transform: translateY(12px) } to { opacity: 1; transform: none } }
@keyframes shimmer { 100% { transform: translateX(100%) } }
@keyframes pulseSoft { 0%,100% { opacity: 1 } 50% { opacity: .55 } }
@keyframes bootBar { 0% { transform: translateX(-110%) } 100% { transform: translateX(320%) } }

.rise { opacity: 0; animation: riseIn .5s cubic-bezier(.22,1,.36,1) forwards; animation-delay: var(--d, 0ms); }
.animate-pulse-soft { animation: pulseSoft 1.8s ease-in-out infinite; }
.boot-bar { background: linear-gradient(90deg, transparent, rgb(var(--brand)), transparent); animation: bootBar 1.05s ease-in-out infinite; }

.skel { position: relative; overflow: hidden; background: rgb(var(--surface-2)); border-radius: .6rem; }
.skel::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgb(var(--grid) / .07), transparent); animation: shimmer 1.35s infinite; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ============================================================
   VENDOR OVERRIDES
   ============================================================ */
.tippy-box { background: rgb(var(--surface-2)); color: rgb(var(--ink)); border: 1px solid rgb(var(--line)); border-radius: .6rem; font-size: 12px; font-weight: 500; box-shadow: 0 18px 40px -20px rgb(0 0 0 / .8); }
.tippy-box .tippy-content { padding: .45rem .6rem; line-height: 1.45; }
.tippy-box[data-placement^='top'] > .tippy-arrow::before { border-top-color: rgb(var(--surface-2)); }
.tippy-box[data-placement^='bottom'] > .tippy-arrow::before { border-bottom-color: rgb(var(--surface-2)); }
.tippy-box[data-placement^='left'] > .tippy-arrow::before { border-left-color: rgb(var(--surface-2)); }
.tippy-box[data-placement^='right'] > .tippy-arrow::before { border-right-color: rgb(var(--surface-2)); }

.apexcharts-tooltip, .apexcharts-tooltip.apexcharts-theme-dark, .apexcharts-tooltip.apexcharts-theme-light {
  background: rgb(var(--surface-2)) !important; border: 1px solid rgb(var(--line)) !important;
  box-shadow: 0 18px 40px -20px rgb(0 0 0 / .8) !important; border-radius: .7rem !important; color: rgb(var(--ink)) !important;
}
.apexcharts-tooltip-title { background: rgb(var(--surface)) !important; border-bottom: 1px solid rgb(var(--line)) !important; font-weight: 700 !important; font-size: 11.5px !important; }
.apexcharts-xaxistooltip, .apexcharts-yaxistooltip { background: rgb(var(--surface-2)) !important; border-color: rgb(var(--line)) !important; color: rgb(var(--ink)) !important; }
.apexcharts-menu { background: rgb(var(--surface-2)) !important; border-color: rgb(var(--line)) !important; }
.apexcharts-menu-item:hover { background: rgb(var(--brand) / .2) !important; }
.apexcharts-legend-text { color: rgb(var(--muted)) !important; font-family: inherit !important; }

.swal2-popup { background: rgb(var(--surface)) !important; color: rgb(var(--ink)) !important; border: 1px solid rgb(var(--line)); border-radius: 1.15rem !important; font-family: inherit !important; }
.swal2-title { color: rgb(var(--ink)) !important; font-size: 1.15rem !important; font-weight: 700 !important; }
.swal2-html-container { color: rgb(var(--muted)) !important; font-size: .92rem !important; }
.swal2-styled.swal2-confirm { background: linear-gradient(135deg, rgb(var(--brand)), rgb(var(--brand-2))) !important; border-radius: .7rem !important; font-weight: 600 !important; box-shadow: none !important; }
.swal2-styled.swal2-cancel { background: rgb(var(--surface-2)) !important; color: rgb(var(--ink)) !important; border: 1px solid rgb(var(--line)) !important; border-radius: .7rem !important; font-weight: 600 !important; }
.swal2-container { backdrop-filter: blur(4px); }
.swal2-icon { border-color: currentColor !important; }

.flatpickr-calendar { background: rgb(var(--surface)) !important; border: 1px solid rgb(var(--line)) !important; box-shadow: 0 26px 60px -26px rgb(0 0 0 / .85) !important; border-radius: .9rem !important; }
.flatpickr-calendar.arrowTop::before, .flatpickr-calendar.arrowTop::after { border-bottom-color: rgb(var(--surface)) !important; }
.flatpickr-months .flatpickr-month, .flatpickr-current-month .flatpickr-monthDropdown-months, .flatpickr-weekday { color: rgb(var(--ink)) !important; fill: rgb(var(--ink)) !important; background: transparent !important; }
.flatpickr-day { color: rgb(var(--muted)) !important; border-radius: .5rem !important; }
.flatpickr-day:hover { background: rgb(var(--surface-2)) !important; border-color: transparent !important; }
.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange { background: rgb(var(--brand)) !important; border-color: rgb(var(--brand)) !important; color: #fff !important; }
.flatpickr-day.inRange { background: rgb(var(--brand) / .16) !important; border-color: transparent !important; box-shadow: none !important; color: rgb(var(--ink)) !important; }
.flatpickr-day.flatpickr-disabled, .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { color: rgb(var(--faint) / .5) !important; }
.numInputWrapper span { border-color: rgb(var(--line)) !important; }

/* theme icon swap */
.theme-sun { display: none; }
[data-theme="light"] .theme-sun { display: block; }
[data-theme="light"] .theme-moon { display: none; }

/* print */
@media print {
  .sidebar, .topbar, .toast-root, #scrim, footer, .no-print { display: none !important; }
  .main-col { margin-left: 0 !important; }
  .view { padding: 0 !important; }
  .card { break-inside: avoid; box-shadow: none; }
  body { background: #fff; }
}