/* ==========================================================================
   AUREX ERP — Design System  (Golden-Ratio · Bento · Soft-Curved · Warm-Minimal)
   --------------------------------------------------------------------------
   Load this file LAST, after css.blade.php / app.css / vendor.css.
   It does three jobs:
     1) TOKENS      — the single source of colour / space / radius / type.
     2) COMPONENTS  — new .ax-* classes for hand-designed flagship screens.
     3) BRIDGE      — re-skins every LEGACY class (.box .btn .form-control
                      .table .modal-* .select2 .nav-tabs .pagination …) so the
                      whole existing app inherits the new look with no markup
                      change and no broken JS hooks.
   Nothing here changes behaviour — visuals only.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap');

/* ============================ 1. TOKENS ================================== */
:root{
  /* surfaces */
  --ax-canvas:#EFEDE8;  --ax-surface:#FFFFFF;  --ax-surface-2:#F7F5F1;  --ax-surface-3:#EBE8E1;
  /* ink */
  --ax-ink:#17191C;     --ax-ink-2:#6B6E73;    --ax-ink-3:#9C9EA3;
  /* lines */
  --ax-line:rgba(23,25,28,.075); --ax-line-2:rgba(23,25,28,.14);
  /* dark contrast card */
  --ax-ink-card:#1A1C1F; --ax-on-ink:#F4F1EC;
  /* accent — overridden at runtime from session('business.theme_color') */
  --ax-accent:#F0602E; --ax-accent-soft:rgba(240,96,46,.10); --ax-accent-line:rgba(240,96,46,.28); --ax-on-accent:#FFFFFF;
  /* semantic */
  --ax-success:#2E7D5B; --ax-success-soft:rgba(46,125,91,.10);
  --ax-warn:#B98411;    --ax-warn-soft:rgba(185,132,17,.12);
  --ax-danger:#C5493A;  --ax-danger-soft:rgba(197,73,58,.10);
  --ax-info:#4A6FA5;    --ax-info-soft:rgba(74,111,165,.10);
  --ax-grid:rgba(23,25,28,.07);

  /* radius */
  --ax-r-xl:26px; --ax-r-lg:21px; --ax-r-md:14px; --ax-r-sm:10px; --ax-r-input:12px; --ax-r-pill:999px;

  /* spacing — Fibonacci */
  --ax-1:5px; --ax-2:8px; --ax-3:13px; --ax-4:21px; --ax-5:34px; --ax-6:55px; --ax-7:89px;

  /* elevation & motion */
  --ax-shadow:0 1px 2px rgba(23,25,28,.04), 0 8px 24px -18px rgba(23,25,28,.35);
  --ax-shadow-pop:0 12px 30px -12px rgba(23,25,28,.35);
  --ax-row-h:52px;
  --ax-t:160ms cubic-bezier(.4,0,.2,1);
  --ax-font:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

:root[data-theme="dark"]{
  --ax-canvas:#111214; --ax-surface:#1A1C1F; --ax-surface-2:#212327; --ax-surface-3:#292C31;
  --ax-ink:#F2F0EC; --ax-ink-2:#9EA1A7; --ax-ink-3:#71747A;
  --ax-line:rgba(255,255,255,.075); --ax-line-2:rgba(255,255,255,.14);
  --ax-ink-card:#0A0B0C; --ax-on-ink:#F4F1EC;
  --ax-grid:rgba(255,255,255,.07);
  --ax-success:#4FA57C; --ax-success-soft:rgba(79,165,124,.12);
  --ax-warn:#D6A23A;    --ax-warn-soft:rgba(214,162,58,.14);
  --ax-danger:#E0705F;  --ax-danger-soft:rgba(224,112,95,.14);
  --ax-info:#7FA0D0;    --ax-info-soft:rgba(127,160,208,.14);
  --ax-shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px -18px rgba(0,0,0,.8);
}

/* ============================ 2. BASE =================================== */
html.tw-bg-white{background:var(--ax-canvas)!important}
body{
  background:var(--ax-canvas)!important;
  color:var(--ax-ink);
  font-family:var(--ax-font)!important;
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"tnum" 1,"cv05" 1;
  line-height:1.5;
}
.ax-scope, .ax-scope *{box-sizing:border-box}
::selection{background:var(--ax-accent-soft);color:var(--ax-ink)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--ax-line-2);border-radius:99px;border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:var(--ax-ink-3)}

.ax-tnum{font-feature-settings:"tnum" 1;font-variant-numeric:tabular-nums}
@keyframes axFadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes axShimmer{0%{opacity:.45}50%{opacity:.85}100%{opacity:.45}}
@keyframes axSpin{to{transform:rotate(360deg)}}
.ax-fade{animation:axFadeUp 220ms ease both}

/* ============================ 3. APP SHELL ============================== */
.ax-shell{display:flex;min-height:100vh;background:var(--ax-canvas)}
/* nav rail */
.ax-rail{width:72px;flex:0 0 72px;padding:var(--ax-4) 0;display:flex;flex-direction:column;align-items:center;gap:var(--ax-4);position:sticky;top:0;height:100vh;z-index:40}
.ax-rail-logo{width:40px;height:40px;border-radius:13px;background:var(--ax-accent);display:flex;align-items:center;justify-content:center;color:var(--ax-on-accent);font-weight:700;font-size:16px;letter-spacing:-.02em;text-decoration:none}
.ax-rail-group{display:flex;flex-direction:column;gap:var(--ax-1);background:var(--ax-surface);border:1px solid var(--ax-line);border-radius:var(--ax-r-lg);padding:var(--ax-2)}
.ax-rail-btn{width:40px;height:40px;border:0;border-radius:13px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all var(--ax-t);background:transparent;color:var(--ax-ink-3);text-decoration:none;position:relative}
.ax-rail-btn:hover{background:var(--ax-surface-3);color:var(--ax-ink)}
.ax-rail-btn.is-active{background:var(--ax-ink-card);color:var(--ax-on-ink)}
.ax-rail-btn svg{width:19px;height:19px}
.ax-rail-btn[data-tip]::after{content:attr(data-tip);position:absolute;left:52px;top:50%;transform:translateY(-50%) scale(.96);white-space:nowrap;background:var(--ax-ink-card);color:var(--ax-on-ink);font-size:12px;font-weight:600;padding:6px 10px;border-radius:8px;opacity:0;pointer-events:none;transition:all 120ms ease;box-shadow:var(--ax-shadow-pop);z-index:60}
.ax-rail-btn[data-tip]:hover::after{opacity:1;transform:translateY(-50%) scale(1)}
.ax-rail-spacer{flex:1}

.ax-main{flex:1;min-width:0;display:flex;flex-direction:column;padding:var(--ax-4) var(--ax-4) var(--ax-4) 0;gap:var(--ax-4)}

/* top bar */
.ax-topbar{display:flex;align-items:center;gap:var(--ax-3);flex-wrap:wrap}
.ax-crumb{display:flex;align-items:center;gap:var(--ax-2);background:var(--ax-surface);border:1px solid var(--ax-line);border-radius:var(--ax-r-pill);padding:6px 6px 6px 14px;min-width:0}
.ax-crumb-root{font-size:12px;color:var(--ax-ink-3);white-space:nowrap}
.ax-crumb-leaf{font-size:13px;font-weight:600;padding:5px 12px;background:var(--ax-surface-3);border-radius:var(--ax-r-pill);white-space:nowrap;color:var(--ax-ink)}
.ax-topsearch{flex:1;display:flex;justify-content:center;min-width:180px}
.ax-topsearch > div{display:flex;align-items:center;gap:10px;background:var(--ax-surface);border:1px solid var(--ax-line);border-radius:var(--ax-r-pill);padding:10px 16px;width:100%;max-width:440px;transition:border-color var(--ax-t)}
.ax-topsearch > div:focus-within{border-color:var(--ax-accent-line)}
.ax-topsearch input{border:0;outline:0;background:transparent;flex:1;min-width:0;font-size:13px;color:var(--ax-ink)}
.ax-kbd{font-size:11px;color:var(--ax-ink-3);border:1px solid var(--ax-line-2);border-radius:6px;padding:2px 6px;font-weight:600}
.ax-topright{display:flex;align-items:center;gap:var(--ax-2)}
.ax-iconbtn{width:38px;height:38px;border:1px solid var(--ax-line);background:var(--ax-surface);border-radius:var(--ax-r-pill);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ax-ink-2);position:relative;transition:color var(--ax-t)}
.ax-iconbtn:hover{color:var(--ax-ink)}
.ax-dot{position:absolute;top:8px;right:9px;width:7px;height:7px;border-radius:99px;background:var(--ax-accent);border:2px solid var(--ax-surface)}
.ax-profile{display:flex;align-items:center;gap:10px;background:var(--ax-surface);border:1px solid var(--ax-line);border-radius:var(--ax-r-pill);padding:4px 14px 4px 4px;cursor:pointer;text-decoration:none}
.ax-avatar{width:30px;height:30px;border-radius:99px;background:var(--ax-ink-card);color:var(--ax-on-ink);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex:0 0 auto}
.ax-avatar--lg{width:44px;height:44px;border-radius:15px;font-size:14px;background:var(--ax-surface-3);color:var(--ax-ink-2)}
.ax-avatar--sq{border-radius:11px}

/* ---- sidebar bridge (server-rendered Menu::render output) -------------- */
/* keeps the labelled sidebar as an option; scroll + new skin              */
.side-bar{background:var(--ax-surface)!important;border-color:var(--ax-line)!important;width:230px!important}
.side-bar .side-bar-heading{color:var(--ax-on-accent)}
.sidebar-menu, .side-bar .sidebar-menu{list-style:none;margin:0;padding:var(--ax-2)}
.sidebar-menu>li>a{display:flex;align-items:center;gap:11px;padding:10px 12px;margin:1px 0;border-radius:var(--ax-r-md);font-size:13px;font-weight:500;color:var(--ax-ink-2);text-decoration:none;transition:all var(--ax-t)}
.sidebar-menu>li>a:hover{background:var(--ax-surface-2);color:var(--ax-ink)}
.sidebar-menu>li.active>a, .sidebar-menu>li.menu-open>a{background:var(--ax-ink-card);color:var(--ax-on-ink)}
.sidebar-menu>li>a>i, .sidebar-menu>li>a .fa{width:18px;text-align:center;font-size:15px;color:inherit}
.sidebar-menu .treeview-menu{list-style:none;padding:2px 0 2px 30px;margin:0}
.sidebar-menu .treeview-menu>li>a{display:block;padding:7px 12px;border-radius:var(--ax-r-sm);font-size:12.5px;color:var(--ax-ink-3);text-decoration:none;transition:all var(--ax-t)}
.sidebar-menu .treeview-menu>li>a:hover{background:var(--ax-surface-2);color:var(--ax-ink)}
.sidebar-menu .treeview-menu>li.active>a{color:var(--ax-accent);font-weight:600}
.sidebar-menu .header{font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--ax-ink-3);padding:14px 12px 6px}

/* ============================ 4. PAGE HEADER =========================== */
.ax-page-header{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--ax-4);flex-wrap:wrap;padding:0 var(--ax-1)}
.ax-eyebrow{font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--ax-ink-3)}
.ax-title{font-size:34px;font-weight:600;letter-spacing:-.03em;line-height:1.1;color:var(--ax-ink)}
.ax-title--sm{font-size:26px;letter-spacing:-.025em}
.ax-subtitle{font-size:13px;color:var(--ax-ink-2);margin-top:8px}
.ax-header-actions{display:flex;gap:var(--ax-2);align-items:center;flex-wrap:wrap}

/* ============================ 5. BUTTONS =============================== */
.ax-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;border-radius:13px;padding:11px 16px;font-size:13px;font-weight:600;cursor:pointer;transition:all var(--ax-t);text-decoration:none;white-space:nowrap;line-height:1}
.ax-btn svg{width:15px;height:15px;flex:0 0 auto}
.ax-btn--ink{background:var(--ax-ink-card);color:var(--ax-on-ink);padding:11px 18px}
.ax-btn--ink:hover{opacity:.88;color:var(--ax-on-ink)}
.ax-btn--accent{background:var(--ax-accent);color:var(--ax-on-accent)}
.ax-btn--accent:hover{opacity:.9;color:var(--ax-on-accent)}
.ax-btn--secondary{background:var(--ax-surface);border-color:var(--ax-line-2);color:var(--ax-ink)}
.ax-btn--secondary:hover{background:var(--ax-surface-2);color:var(--ax-ink)}
.ax-btn--ghost{background:transparent;border-color:var(--ax-line-2);color:var(--ax-ink-2)}
.ax-btn--ghost:hover{background:var(--ax-surface-2);color:var(--ax-ink)}
.ax-btn--danger{background:transparent;border-color:var(--ax-line-2);color:var(--ax-ink-3)}
.ax-btn--danger:hover{color:var(--ax-danger);border-color:var(--ax-danger)}
.ax-btn--sm{padding:8px 13px;font-size:12px;border-radius:11px}
.ax-btn--pill{border-radius:var(--ax-r-pill)}
.ax-btn[disabled],.ax-btn:disabled{opacity:.5;cursor:not-allowed}
.ax-btn--block{width:100%}

/* ============================ 6. BENTO + CARDS ========================= */
.ax-bento{display:grid;gap:var(--ax-4);align-items:stretch}
.ax-bento--6238{grid-template-columns:minmax(0,61.8fr) minmax(0,38.2fr)}
.ax-bento--3862{grid-template-columns:minmax(0,38.2fr) minmax(0,61.8fr)}
.ax-bento--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.ax-bento--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.ax-bento--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.ax-bento--top{align-items:start}
.ax-stack{display:flex;flex-direction:column;gap:var(--ax-4)}

.ax-card{background:var(--ax-surface);border:1px solid var(--ax-line);border-radius:var(--ax-r-xl);padding:26px;transition:border-color var(--ax-t)}
.ax-card--pad-lg{padding:34px}
.ax-card--shadow{box-shadow:var(--ax-shadow)}
.ax-card--ink{background:var(--ax-ink-card);color:var(--ax-on-ink);border:0}
.ax-card--ink .ax-eyebrow,.ax-card--ink .ax-muted{color:rgba(255,255,255,.5)}
.ax-card--hover:hover{border-color:var(--ax-line-2)}
.ax-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--ax-4);flex-wrap:wrap}
.ax-card-title{font-size:16px;font-weight:600;letter-spacing:-.01em;color:inherit}
.ax-card-sub{font-size:12px;color:var(--ax-ink-3);margin-top:5px}
.ax-muted{color:var(--ax-ink-3)}
.ax-hairline{border:0;border-top:1px solid var(--ax-line);margin:var(--ax-4) 0}

/* ============================ 7. KPI / METRIC ========================= */
.ax-kpi{background:var(--ax-surface);border:1px solid var(--ax-line);border-radius:var(--ax-r-lg);padding:var(--ax-4);display:flex;align-items:flex-end;justify-content:space-between;gap:var(--ax-4);transition:border-color var(--ax-t)}
.ax-kpi:hover{border-color:var(--ax-line-2)}
.ax-kpi-value{font-size:26px;font-weight:700;letter-spacing:-.03em;margin-top:10px;color:var(--ax-ink)}
.ax-kpi-value--xl{font-size:44px;line-height:1}
.ax-kpi-value--lg{font-size:34px}
.ax-kpi-meta{display:flex;align-items:center;gap:8px;margin-top:8px}
.ax-delta{display:inline-flex;align-items:center;gap:5px;border-radius:var(--ax-r-pill);padding:5px 10px;font-size:12px;font-weight:700}
.ax-delta--up{background:var(--ax-success-soft);color:var(--ax-success)}
.ax-delta--down{background:var(--ax-danger-soft);color:var(--ax-danger)}
.ax-delta svg{width:12px;height:12px}
.ax-context{font-size:12px;color:var(--ax-ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ax-metric-footer{display:flex;border-top:1px solid var(--ax-line);padding-top:16px}
.ax-metric-footer > div{flex:1;padding-left:16px;border-left:1px solid var(--ax-line)}
.ax-metric-footer > div:first-child{padding-left:0;border-left:0}
.ax-metric-footer .l{font-size:11px;color:var(--ax-ink-3);font-weight:600;letter-spacing:.04em}
.ax-metric-footer .v{font-size:16px;font-weight:600;margin-top:5px;letter-spacing:-.01em}

/* ============================ 8. SEGMENTED / TABS / PILLS ============= */
.ax-seg{display:inline-flex;background:var(--ax-surface-2);border-radius:var(--ax-r-pill);padding:4px;gap:2px}
.ax-seg button,.ax-seg a{border:0;cursor:pointer;font-size:12px;font-weight:600;padding:7px 13px;border-radius:var(--ax-r-pill);transition:all var(--ax-t);background:transparent;color:var(--ax-ink-3);text-decoration:none;line-height:1}
.ax-seg button.is-active,.ax-seg a.is-active{background:var(--ax-surface);color:var(--ax-ink);box-shadow:0 1px 2px rgba(23,25,28,.06)}
.ax-seg--ink button.is-active,.ax-seg--ink a.is-active{background:var(--ax-ink-card);color:var(--ax-on-ink)}
.ax-seg--sq{border-radius:11px}
.ax-seg--sq button,.ax-seg--sq a{border-radius:9px}

.ax-tabs{display:flex;gap:var(--ax-1);border-bottom:1px solid var(--ax-line)}
.ax-tabs a,.ax-tabs button{padding:11px 4px;margin:0 12px -1px 0;font-size:13px;font-weight:600;color:var(--ax-ink-3);background:transparent;border:0;border-bottom:2px solid transparent;cursor:pointer;text-decoration:none;transition:color var(--ax-t)}
.ax-tabs a:hover,.ax-tabs button:hover{color:var(--ax-ink)}
.ax-tabs a.is-active,.ax-tabs button.is-active{color:var(--ax-ink);border-bottom-color:var(--ax-accent)}

/* ============================ 9. STATUS BADGE ========================= */
.ax-badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;padding:5px 10px;border-radius:var(--ax-r-pill);background:var(--ax-surface-3);color:var(--ax-ink-3);line-height:1}
.ax-badge .d{width:5px;height:5px;border-radius:99px;background:currentColor;flex:0 0 auto}
.ax-badge--success{background:var(--ax-success-soft);color:var(--ax-success)}
.ax-badge--warn{background:var(--ax-warn-soft);color:var(--ax-warn)}
.ax-badge--danger{background:var(--ax-danger-soft);color:var(--ax-danger)}
.ax-badge--info{background:var(--ax-info-soft);color:var(--ax-info)}
.ax-badge--accent{background:var(--ax-accent-soft);color:var(--ax-accent)}

/* ============================ 10. DATA TABLE (new) ==================== */
.ax-tablewrap{background:var(--ax-surface);border:1px solid var(--ax-line);border-radius:var(--ax-r-xl);overflow:hidden}
.ax-toolbar{display:flex;align-items:center;gap:var(--ax-2);padding:16px 21px;border-bottom:1px solid var(--ax-line);flex-wrap:wrap}
.ax-search{display:flex;align-items:center;gap:9px;background:var(--ax-surface-2);border:1px solid transparent;border-radius:11px;padding:9px 13px;flex:1;min-width:200px;max-width:340px;transition:border-color var(--ax-t)}
.ax-search:focus-within{border-color:var(--ax-accent-line)}
.ax-search input{border:0;outline:0;background:transparent;flex:1;min-width:0;font-size:13px;color:var(--ax-ink)}
.ax-toolbar-spacer{flex:1}
.ax-chip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--ax-line-2);background:transparent;border-radius:11px;padding:9px 13px;font-size:12px;font-weight:600;cursor:pointer;color:var(--ax-ink-2);transition:all var(--ax-t);text-decoration:none}
.ax-chip:hover{color:var(--ax-ink);background:var(--ax-surface-2)}
.ax-chip svg{width:14px;height:14px}

.ax-bulkbar{display:flex;align-items:center;gap:var(--ax-3);padding:11px 21px;background:var(--ax-accent-soft);border-bottom:1px solid var(--ax-accent-line)}
.ax-bulkbar .sep{width:1px;height:16px;background:var(--ax-accent-line)}
.ax-bulk-act{border:0;background:transparent;font-size:12px;font-weight:600;cursor:pointer;color:var(--ax-ink-2)}
.ax-bulk-act:hover{color:var(--ax-ink)}
.ax-bulk-act--danger{color:var(--ax-danger)}

.ax-grid{display:grid;gap:var(--ax-3);align-items:center}
.ax-grid-head{padding:11px 21px;border-bottom:1px solid var(--ax-line);background:var(--ax-surface-2)}
.ax-grid-head span{font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--ax-ink-3)}
.ax-grid-row{padding:0 21px;min-height:var(--ax-row-h);border-bottom:1px solid var(--ax-line);transition:background 140ms ease}
.ax-grid-row:hover{background:var(--ax-surface-2)}
.ax-grid-row.is-selected{background:var(--ax-surface-2)}
.ax-r{text-align:right}.ax-c{text-align:center}
.ax-cell-strong{font-size:13px;font-weight:600;color:var(--ax-ink)}
.ax-cell{font-size:13px;color:var(--ax-ink-2)}
.ax-cell-num{font-size:13px;font-weight:600;text-align:right;font-variant-numeric:tabular-nums}

.ax-tablefoot{display:flex;align-items:center;justify-content:space-between;gap:var(--ax-3);padding:16px 21px;flex-wrap:wrap}
.ax-pagenav{display:flex;gap:var(--ax-1);align-items:center}
.ax-pagenav button,.ax-pagenav a{height:32px;min-width:32px;padding:0 12px;border:1px solid var(--ax-line-2);background:transparent;border-radius:9px;font-size:12px;font-weight:600;cursor:pointer;color:var(--ax-ink-2);display:inline-flex;align-items:center;justify-content:center;text-decoration:none;transition:all var(--ax-t)}
.ax-pagenav button:hover,.ax-pagenav a:hover{background:var(--ax-surface-2);color:var(--ax-ink)}
.ax-pagenav .is-active{background:var(--ax-ink-card);color:var(--ax-on-ink);border-color:transparent}

/* row-action kebab */
.ax-kebab{width:28px;height:28px;border:0;background:transparent;border-radius:9px;cursor:pointer;color:var(--ax-ink-3);display:inline-flex;align-items:center;justify-content:center;transition:all var(--ax-t)}
.ax-kebab:hover{background:var(--ax-surface-3);color:var(--ax-ink)}

/* checkbox accent */
.ax-check{width:15px;height:15px;accent-color:var(--ax-accent);cursor:pointer}

/* ============================ 11. FORMS (new) ======================== */
.ax-field{display:flex;flex-direction:column;gap:7px;margin-bottom:var(--ax-4)}
.ax-label{font-size:12px;font-weight:600;color:var(--ax-ink-2);letter-spacing:.01em}
.ax-label .req{color:var(--ax-danger)}
.ax-input,.ax-select,.ax-textarea{width:100%;border:1px solid var(--ax-line-2);background:var(--ax-surface);border-radius:var(--ax-r-input);padding:10px 13px;font-size:13px;color:var(--ax-ink);transition:all var(--ax-t);outline:0;font-family:inherit}
.ax-input::placeholder,.ax-textarea::placeholder{color:var(--ax-ink-3)}
.ax-input:focus,.ax-select:focus,.ax-textarea:focus{border-color:var(--ax-accent-line);box-shadow:0 0 0 3px var(--ax-accent-soft)}
.ax-textarea{resize:vertical;min-height:88px}
.ax-help{font-size:12px;color:var(--ax-ink-3)}
.ax-field.has-error .ax-input,.ax-field.has-error .ax-select{border-color:var(--ax-danger)}
.ax-error{font-size:12px;color:var(--ax-danger)}
.ax-form-section{padding-top:var(--ax-4)}
.ax-form-section + .ax-form-section{margin-top:var(--ax-4);border-top:1px solid var(--ax-line)}
.ax-section-title{font-size:14px;font-weight:600;color:var(--ax-ink);margin-bottom:var(--ax-3)}
.ax-switch{position:relative;width:38px;height:22px;border-radius:99px;background:var(--ax-surface-3);cursor:pointer;transition:background var(--ax-t);border:0;flex:0 0 auto}
.ax-switch::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:99px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform var(--ax-t)}
.ax-switch.is-on{background:var(--ax-accent)}
.ax-switch.is-on::after{transform:translateX(16px)}

/* ============================ 12. MISC UI ============================ */
.ax-empty{padding:75px 21px;text-align:center}
.ax-empty-ic{width:46px;height:46px;border-radius:16px;background:var(--ax-surface-2);display:flex;align-items:center;justify-content:center;margin:0 auto;color:var(--ax-ink-3)}
.ax-empty-title{font-size:15px;font-weight:600;margin-top:16px;color:var(--ax-ink)}
.ax-empty-sub{font-size:13px;color:var(--ax-ink-3);margin-top:6px}

.ax-progress{height:7px;border-radius:99px;background:var(--ax-surface-3);overflow:hidden}
.ax-card--ink .ax-progress{background:rgba(255,255,255,.1)}
.ax-progress > span{display:block;height:100%;border-radius:99px;background:var(--ax-accent)}

.ax-timeline{display:flex;flex-direction:column}
.ax-tl-row{display:flex;gap:var(--ax-3)}
.ax-tl-rail{display:flex;flex-direction:column;align-items:center;flex:0 0 auto}
.ax-tl-dot{width:9px;height:9px;border-radius:99px;margin-top:5px;background:var(--ax-ink-3)}
.ax-tl-line{width:1px;flex:1;background:var(--ax-line-2)}
.ax-tl-body{padding-bottom:18px;min-width:0}
.ax-tl-title{font-size:13px;font-weight:600;line-height:1.4}
.ax-tl-meta{font-size:12px;color:var(--ax-ink-3);margin-top:2px}

.ax-list-row{display:flex;gap:var(--ax-3);align-items:flex-start;padding:12px;border-radius:var(--ax-r-md);cursor:pointer;transition:background 140ms ease;text-decoration:none;color:inherit}
.ax-list-row:hover{background:var(--ax-surface-2);color:inherit}

/* skeleton */
.ax-skeleton{background:var(--ax-surface-3);border-radius:var(--ax-r-sm);animation:axShimmer 1.4s ease infinite}
.ax-spinner{width:18px;height:18px;border:2px solid var(--ax-line-2);border-top-color:var(--ax-accent);border-radius:99px;animation:axSpin .7s linear infinite}

/* drawer */
.ax-drawer-backdrop{position:fixed;inset:0;background:rgba(23,25,28,.4);opacity:0;pointer-events:none;transition:opacity 180ms ease;z-index:1200}
.ax-drawer-backdrop.is-open{opacity:1;pointer-events:auto}
.ax-drawer{position:fixed;top:0;right:0;height:100vh;width:min(480px,92vw);background:var(--ax-surface);border-left:1px solid var(--ax-line);box-shadow:var(--ax-shadow-pop);transform:translateX(100%);transition:transform 220ms cubic-bezier(.4,0,.2,1);z-index:1210;display:flex;flex-direction:column}
.ax-drawer.is-open{transform:none}
.ax-drawer-head{display:flex;align-items:center;justify-content:space-between;gap:var(--ax-3);padding:var(--ax-4);border-bottom:1px solid var(--ax-line)}
.ax-drawer-body{padding:var(--ax-4);overflow:auto;flex:1}

/* chart helpers */
.ax-chart{position:relative}
.ax-chart svg{width:100%;height:auto;display:block;overflow:visible}
.ax-legend{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--ax-ink-2)}
.ax-legend .sw{width:8px;height:8px;border-radius:3px;flex:0 0 auto}
.ax-donut-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}

/* ============================ 13. LEGACY BRIDGE ====================== */
/* .box → card ----------------------------------------------------------- */
.box{background:var(--ax-surface)!important;border:1px solid var(--ax-line)!important;border-radius:var(--ax-r-xl)!important;box-shadow:none!important;margin-bottom:var(--ax-4)!important;border-top-width:1px!important}
.box.box-solid{background:var(--ax-surface)!important}
.box.box-primary,.box.box-info,.box.box-success,.box.box-warning,.box.box-danger{border-top:1px solid var(--ax-line)!important}
.box-header{padding:21px 26px 0!important;border:0!important;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.box-header.with-border{border:0!important}
.box-title{font-size:16px!important;font-weight:600!important;letter-spacing:-.01em;color:var(--ax-ink)!important;margin:0}
.box-body{padding:21px 26px!important}
.box-footer{padding:16px 26px!important;border-top:1px solid var(--ax-line)!important;background:transparent!important;border-radius:0 0 var(--ax-r-xl) var(--ax-r-xl)!important}
.box .box-tools .btn{background:transparent}
.nav-tabs-custom{box-shadow:none;background:var(--ax-surface);border:1px solid var(--ax-line);border-radius:var(--ax-r-xl)}
.nav-tabs-custom>.nav-tabs{border-bottom:1px solid var(--ax-line);padding:0 var(--ax-4)}

/* .btn → ax-btn --------------------------------------------------------- */
.btn{border-radius:12px!important;font-weight:600!important;border:1px solid transparent;transition:all var(--ax-t);box-shadow:none!important;font-size:13px}
.btn-flat{border-radius:12px!important}
.btn-primary{background:var(--ax-ink-card)!important;border-color:transparent!important;color:var(--ax-on-ink)!important}
.btn-primary:hover,.btn-primary:focus{opacity:.9;color:var(--ax-on-ink)!important}
.btn-success{background:var(--ax-success)!important;border-color:transparent!important;color:#fff!important}
.btn-info{background:var(--ax-info)!important;border-color:transparent!important;color:#fff!important}
.btn-warning{background:var(--ax-warn)!important;border-color:transparent!important;color:#fff!important}
.btn-danger{background:var(--ax-danger)!important;border-color:transparent!important;color:#fff!important}
.btn-default,.btn-white{background:var(--ax-surface)!important;border:1px solid var(--ax-line-2)!important;color:var(--ax-ink)!important}
.btn-default:hover,.btn-white:hover{background:var(--ax-surface-2)!important}
.btn-link{color:var(--ax-accent)!important;box-shadow:none}
.btn-xs{padding:5px 9px!important;font-size:11px!important;border-radius:9px!important}
.btn-sm{padding:8px 12px!important;font-size:12px!important;border-radius:11px!important}
.btn-lg{padding:13px 20px!important;font-size:15px!important;border-radius:14px!important}
/* DaisyUI leftovers already in app */
.tw-dw-btn{border-radius:12px!important;font-weight:600}
.tw-dw-btn-primary{background:var(--ax-ink-card)!important;border-color:transparent!important}
.tw-dw-btn-neutral{background:var(--ax-surface-3)!important;color:var(--ax-ink)!important;border-color:transparent!important}

/* forms ----------------------------------------------------------------- */
.form-control{border:1px solid var(--ax-line-2)!important;border-radius:var(--ax-r-input)!important;background:var(--ax-surface)!important;color:var(--ax-ink)!important;box-shadow:none!important;font-size:13px!important;height:auto!important;padding:9px 13px!important;transition:all var(--ax-t)}
.form-control:focus{border-color:var(--ax-accent-line)!important;box-shadow:0 0 0 3px var(--ax-accent-soft)!important}
.form-control::placeholder{color:var(--ax-ink-3)!important}
.form-group>label,label.control-label,.control-label{font-size:12px!important;font-weight:600!important;color:var(--ax-ink-2)!important;margin-bottom:6px}
.help-block{font-size:12px!important;color:var(--ax-ink-3)!important}
.has-error .form-control{border-color:var(--ax-danger)!important}
.has-error .help-block,.has-error .control-label,.text-danger{color:var(--ax-danger)!important}
.input-group{border-radius:var(--ax-r-input)}
.input-group .form-control{border-radius:0}
.input-group .form-control:first-child{border-top-left-radius:var(--ax-r-input)!important;border-bottom-left-radius:var(--ax-r-input)!important}
.input-group-addon{background:var(--ax-surface-2)!important;border:1px solid var(--ax-line-2)!important;color:var(--ax-ink-3)!important;border-radius:var(--ax-r-input) 0 0 var(--ax-r-input)!important;font-size:13px}
.input-group-btn:last-child>.btn{border-radius:0 var(--ax-r-input) var(--ax-r-input) 0!important}
.input-group-btn:first-child>.btn{border-radius:var(--ax-r-input) 0 0 var(--ax-r-input)!important}
input[type=checkbox],input[type=radio]{accent-color:var(--ax-accent)}

/* tables ---------------------------------------------------------------- */
.table{color:var(--ax-ink)}
.table>thead>tr>th{border-bottom:1px solid var(--ax-line-2)!important;font-size:11px!important;font-weight:600!important;letter-spacing:.06em;text-transform:uppercase;color:var(--ax-ink-3)!important;padding:12px 14px!important;vertical-align:middle}
.table>tbody>tr>td{border-top:1px solid var(--ax-line)!important;padding:14px!important;font-size:13px;vertical-align:middle;color:var(--ax-ink)}
.table-hover>tbody>tr:hover{background:var(--ax-surface-2)!important}
.table-striped>tbody>tr:nth-of-type(odd){background:var(--ax-surface-2)!important}
.table-bordered,.table-bordered>thead>tr>th,.table-bordered>tbody>tr>td{border-color:var(--ax-line)!important}
.table-condensed>tbody>tr>td,.table-condensed>thead>tr>th{padding:9px 12px!important}

/* DataTables ------------------------------------------------------------ */
.dataTables_wrapper{padding:0}
.dataTables_wrapper .dataTables_filter input{border:1px solid var(--ax-line-2)!important;border-radius:11px!important;padding:8px 12px!important;background:var(--ax-surface)!important;color:var(--ax-ink)!important;box-shadow:none!important;font-size:13px}
.dataTables_wrapper .dataTables_length select{border:1px solid var(--ax-line-2)!important;border-radius:9px!important;padding:6px 10px!important;background:var(--ax-surface)!important;color:var(--ax-ink)!important}
.dataTables_wrapper .dataTables_info{font-size:12px;color:var(--ax-ink-3);padding-top:16px}
.dataTables_wrapper .dataTables_paginate .paginate_button{border:1px solid var(--ax-line-2)!important;border-radius:9px!important;background:transparent!important;color:var(--ax-ink-2)!important;padding:6px 12px!important;margin:0 2px}
.dataTables_wrapper .dataTables_paginate .paginate_button.current{background:var(--ax-ink-card)!important;color:var(--ax-on-ink)!important;border-color:transparent!important}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover{background:var(--ax-surface-2)!important;color:var(--ax-ink)!important;border-color:var(--ax-line-2)!important}
table.dataTable thead .sorting:after,table.dataTable thead .sorting_asc:after,table.dataTable thead .sorting_desc:after{opacity:.35}

/* modals ---------------------------------------------------------------- */
.modal-content{border:1px solid var(--ax-line)!important;border-radius:var(--ax-r-lg)!important;box-shadow:var(--ax-shadow-pop)!important;background:var(--ax-surface)!important}
.modal-header{border-bottom:1px solid var(--ax-line)!important;padding:21px 26px!important}
.modal-title{font-size:18px!important;font-weight:600!important;letter-spacing:-.01em;color:var(--ax-ink)!important}
.modal-body{padding:26px!important}
.modal-footer{border-top:1px solid var(--ax-line)!important;padding:16px 26px!important}
.modal-backdrop.in{opacity:.4}
.close{color:var(--ax-ink-3)!important;opacity:1;text-shadow:none;font-weight:400;transition:color var(--ax-t)}
.close:hover{color:var(--ax-ink)!important}

/* tabs ------------------------------------------------------------------ */
.nav-tabs{border-bottom:1px solid var(--ax-line)!important}
.nav-tabs>li>a{border:0!important;border-bottom:2px solid transparent!important;border-radius:0!important;color:var(--ax-ink-3)!important;font-size:13px;font-weight:600;padding:11px 14px;margin-right:6px;background:transparent!important;transition:color var(--ax-t)}
.nav-tabs>li>a:hover{background:transparent!important;color:var(--ax-ink)!important}
.nav-tabs>li.active>a,.nav-tabs>li.active>a:hover,.nav-tabs>li.active>a:focus{border-bottom-color:var(--ax-accent)!important;color:var(--ax-ink)!important;background:transparent!important}

/* pagination (bootstrap) ------------------------------------------------ */
.pagination>li>a,.pagination>li>span{border:1px solid var(--ax-line-2)!important;color:var(--ax-ink-2)!important;background:transparent!important;margin:0 2px;border-radius:9px!important;font-size:12px;font-weight:600}
.pagination>.active>a,.pagination>.active>span{background:var(--ax-ink-card)!important;color:var(--ax-on-ink)!important;border-color:transparent!important}

/* labels/badges --------------------------------------------------------- */
.label{border-radius:var(--ax-r-pill)!important;font-weight:600!important;font-size:11px;padding:4px 9px}
.label-success{background:var(--ax-success-soft)!important;color:var(--ax-success)!important}
.label-danger{background:var(--ax-danger-soft)!important;color:var(--ax-danger)!important}
.label-warning{background:var(--ax-warn-soft)!important;color:var(--ax-warn)!important}
.label-info{background:var(--ax-info-soft)!important;color:var(--ax-info)!important}
.label-primary,.label-default{background:var(--ax-surface-3)!important;color:var(--ax-ink-2)!important}

/* alerts / callouts ----------------------------------------------------- */
.alert{border:1px solid var(--ax-line)!important;border-radius:var(--ax-r-md)!important;font-size:13px}
.alert-success{background:var(--ax-success-soft)!important;border-color:transparent!important;color:var(--ax-success)!important}
.alert-danger{background:var(--ax-danger-soft)!important;border-color:transparent!important;color:var(--ax-danger)!important}
.alert-warning{background:var(--ax-warn-soft)!important;border-color:transparent!important;color:var(--ax-warn)!important}
.alert-info{background:var(--ax-info-soft)!important;border-color:transparent!important;color:var(--ax-info)!important}

/* select2 --------------------------------------------------------------- */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple{border:1px solid var(--ax-line-2)!important;border-radius:var(--ax-r-input)!important;background:var(--ax-surface)!important;min-height:40px}
.select2-container--default .select2-selection--single .select2-selection__rendered{color:var(--ax-ink)!important;line-height:38px!important;padding-left:13px}
.select2-container--default .select2-selection--single .select2-selection__arrow{height:38px!important}
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single{border-color:var(--ax-accent-line)!important;box-shadow:0 0 0 3px var(--ax-accent-soft)!important}
.select2-dropdown{border:1px solid var(--ax-line-2)!important;border-radius:var(--ax-r-md)!important;box-shadow:var(--ax-shadow-pop)!important;background:var(--ax-surface)!important;overflow:hidden}
.select2-container--default .select2-results__option--highlighted[aria-selected]{background:var(--ax-accent)!important;color:var(--ax-on-accent)!important}
.select2-container--default .select2-search--dropdown .select2-search__field{border:1px solid var(--ax-line-2)!important;border-radius:9px!important;padding:7px 10px}
.select2-container--default .select2-selection--multiple .select2-selection__choice{background:var(--ax-surface-3)!important;border:0!important;border-radius:8px!important;color:var(--ax-ink)!important;font-size:12px}

/* content header / spacing bridge -------------------------------------- */
.content-header{padding:0 var(--ax-1) var(--ax-3)!important}
.content-header>h1{font-size:26px!important;font-weight:600!important;letter-spacing:-.025em;color:var(--ax-ink)!important}
.content-header>h1 small{font-size:13px!important;color:var(--ax-ink-2)!important;font-weight:500!important}
.content{padding:0!important}
section.content, section.content-header{background:transparent}

/* popovers / tooltips --------------------------------------------------- */
.popover{border:1px solid var(--ax-line-2)!important;border-radius:var(--ax-r-md)!important;box-shadow:var(--ax-shadow-pop)!important;font-family:var(--ax-font)}
.tooltip-inner{background:var(--ax-ink-card)!important;border-radius:8px!important;font-size:12px;padding:6px 10px}

/* small helpers referenced by legacy markup ---------------------------- */
.bg-white{background:var(--ax-surface)!important}
.text-primary{color:var(--ax-accent)!important}
.text-muted{color:var(--ax-ink-3)!important}
.cursor-pointer{cursor:pointer}
.no-padding{padding:0!important}

/* ============================ 14. RESPONSIVE ========================= */
@media (max-width:1080px){
  .ax-bento--6238,.ax-bento--3862,.ax-bento--2,.ax-bento--3,.ax-bento--4{grid-template-columns:minmax(0,1fr)!important}
}
@media (max-width:920px){
  .ax-rail{width:60px;flex-basis:60px}
  .ax-main{padding:var(--ax-3) var(--ax-3) var(--ax-3) 0;gap:var(--ax-3)}
  .ax-title{font-size:26px}
}
@media (max-width:640px){
  .ax-topsearch{order:3;flex-basis:100%}
  .ax-card{padding:var(--ax-4)}
  .ax-grid-head{display:none}
}

/* ============================ 15. PRINT / MOTION ===================== */
@media print{
  .ax-rail,.ax-topbar,.no-print{display:none!important}
  .ax-main{padding:0}
  .ax-card{box-shadow:none;border:1px solid #ddd}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}