/* =====================================================================
   AutoX CRM — design system
   Layered on Bootstrap 5.3. Tokens first, then layout, then components.
   ===================================================================== */

@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url("../vendor/fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-display: swap; src: url("../vendor/fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url("../vendor/fonts/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 700; font-display: swap; src: url("../vendor/fonts/inter-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Jakarta"; font-weight: 600; font-display: swap; src: url("../vendor/fonts/plus-jakarta-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Jakarta"; font-weight: 700; font-display: swap; src: url("../vendor/fonts/plus-jakarta-sans-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Jakarta"; font-weight: 800; font-display: swap; src: url("../vendor/fonts/plus-jakarta-sans-latin-800-normal.woff2") format("woff2"); }

:root {
  --ax-accent: #2f6bff;
  --ax-accent-rgb: 47, 107, 255;
  --ax-sidebar: #0b1530;
  --ax-sidebar-2: #111d3d;
  --ax-sidebar-text: #aab6d3;
  --ax-sidebar-muted: #6c7a9c;
  --ax-sidebar-active: #ffffff;

  --ax-bg: #f4f6fb;
  --ax-surface: #ffffff;
  --ax-surface-2: #f8f9fc;
  --ax-border: #e4e8f1;
  --ax-border-strong: #d3d9e6;
  --ax-text: #111a2e;
  --ax-text-2: #4a5672;
  --ax-text-3: #7b869f;

  --ax-success: #16a34a; --ax-success-bg: #e9f8ef;
  --ax-warning: #c2780a; --ax-warning-bg: #fdf4e3;
  --ax-danger: #dc2626;  --ax-danger-bg: #fdecec;
  --ax-info: #0e7fa8;    --ax-info-bg: #e6f5fa;
  --ax-violet: #7c3aed;  --ax-violet-bg: #f1ebfe;
  --ax-neutral: #5b6680; --ax-neutral-bg: #eef1f6;

  --ax-radius: 10px;
  --ax-radius-sm: 7px;
  --ax-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .05);
  --ax-shadow-lg: 0 12px 32px -8px rgba(16, 24, 40, .18), 0 4px 8px -4px rgba(16, 24, 40, .06);
  --ax-sidebar-w: 256px;
  --ax-sidebar-w-collapsed: 72px;
  --ax-topbar-h: 60px;

  --bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bs-body-font-size: .875rem;
  --bs-body-color: var(--ax-text);
  --bs-body-bg: var(--ax-bg);
  --bs-border-color: var(--ax-border);
  --bs-primary: var(--ax-accent);
  --bs-primary-rgb: var(--ax-accent-rgb);
  --bs-link-color: var(--ax-accent);
  --bs-link-color-rgb: var(--ax-accent-rgb);
  --bs-link-hover-color: var(--ax-accent);
  --bs-border-radius: var(--ax-radius-sm);
  --bs-focus-ring-color: rgba(var(--ax-accent-rgb), .22);
}

[data-bs-theme="dark"] {
  --ax-sidebar: #070d1d;
  --ax-sidebar-2: #0e1730;
  --ax-bg: #0b1222;
  --ax-surface: #111a2e;
  --ax-surface-2: #0f1729;
  --ax-border: #1f2a42;
  --ax-border-strong: #2a3754;
  --ax-text: #e6ebf5;
  --ax-text-2: #a9b4cc;
  --ax-text-3: #7a87a3;
  --ax-success-bg: rgba(22, 163, 74, .14);
  --ax-warning-bg: rgba(217, 140, 20, .14);
  --ax-danger-bg: rgba(220, 38, 38, .15);
  --ax-info-bg: rgba(14, 127, 168, .16);
  --ax-violet-bg: rgba(124, 58, 237, .16);
  --ax-neutral-bg: rgba(148, 163, 184, .12);
  --ax-success: #4ade80; --ax-warning: #f5b544; --ax-danger: #f87171; --ax-info: #38bdf8; --ax-violet: #a78bfa; --ax-neutral: #a3afc6;
  --ax-shadow: 0 1px 2px rgba(0, 0, 0, .3);
  --ax-shadow-lg: 0 16px 40px -10px rgba(0, 0, 0, .6);
  --bs-body-color: var(--ax-text);
  --bs-body-bg: var(--ax-bg);
  --bs-border-color: var(--ax-border);
  --bs-secondary-color: var(--ax-text-3);
  --bs-tertiary-bg: var(--ax-surface-2);
}

/* ---------- Base ---------- */
html, body { height: 100%; }
body { background: var(--ax-bg); color: var(--ax-text); -webkit-font-smoothing: antialiased; font-feature-settings: "cv11", "ss01"; }
h1, h2, h3, h4, h5, .display-font { font-family: "Jakarta", "Inter", sans-serif; letter-spacing: -.015em; color: var(--ax-text); }
h1 { font-size: 1.375rem; font-weight: 700; }
h2 { font-size: 1.125rem; font-weight: 700; }
h3 { font-size: 1rem; font-weight: 700; }
a { text-decoration: none; }
.text-2 { color: var(--ax-text-2) !important; }
.text-3 { color: var(--ax-text-3) !important; }
.tnum { font-variant-numeric: tabular-nums; }
.icon { width: 1.125rem; height: 1.125rem; flex-shrink: 0; vertical-align: -.2em; }
.icon-sm { width: .95rem; height: .95rem; }
.icon-lg { width: 1.5rem; height: 1.5rem; }
.icon-xl { width: 2.25rem; height: 2.25rem; stroke-width: 1.6; }
:focus-visible { outline: 2px solid rgba(var(--ax-accent-rgb), .55); outline-offset: 2px; }
::selection { background: rgba(var(--ax-accent-rgb), .18); }

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

.sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: 1040;
  width: var(--ax-sidebar-w); display: flex; flex-direction: column;
  background: var(--ax-sidebar); color: var(--ax-sidebar-text);
  transition: width .2s ease, transform .2s ease;
  border-right: 1px solid rgba(255, 255, 255, .04);
}
.sidebar-brand { display: flex; align-items: center; gap: .7rem; height: var(--ax-topbar-h); padding: 0 1.15rem; color: #fff; flex-shrink: 0; }
.brand-mark {
  width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0;
  background: linear-gradient(140deg, var(--ax-accent), #5b8cff); color: #fff;
  font-family: "Jakarta", sans-serif; font-weight: 800; font-size: 1rem; letter-spacing: -.04em;
  box-shadow: 0 6px 16px -6px rgba(var(--ax-accent-rgb), .8);
}
.brand-mark img { width: 100%; height: 100%; object-fit: contain; border-radius: 9px; background: #fff; }
.brand-text { line-height: 1.1; overflow: hidden; white-space: nowrap; }
.brand-text strong { font-family: "Jakarta", sans-serif; font-weight: 800; font-size: 1.02rem; letter-spacing: -.02em; display: block; }
.brand-text small { color: var(--ax-sidebar-muted); font-size: .7rem; }

.sidebar-nav { flex: 1; overflow-y: auto; padding: .5rem .75rem 1rem; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.12) transparent; }
.nav-section { font-size: .66rem; font-weight: 600; text-transform: uppercase; letter-spacing: .09em; color: var(--ax-sidebar-muted); padding: 1.1rem .65rem .4rem; white-space: nowrap; }
.nav-item-x {
  display: flex; align-items: center; gap: .75rem; padding: .55rem .65rem; margin: 1px 0;
  color: var(--ax-sidebar-text); border-radius: 8px; font-weight: 500; font-size: .845rem; white-space: nowrap;
  transition: background .12s, color .12s; position: relative;
}
.nav-item-x .icon { opacity: .85; }
.nav-item-x:hover { background: rgba(255, 255, 255, .055); color: #fff; }
.nav-item-x.active { background: var(--ax-sidebar-2); color: var(--ax-sidebar-active); }
.nav-item-x.active::before { content: ""; position: absolute; left: -.75rem; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--ax-accent); }
.nav-item-x.active .icon { opacity: 1; color: #8fb0ff; }
.nav-badge { margin-left: auto; font-size: .68rem; font-weight: 600; background: rgba(255,255,255,.1); color: #fff; border-radius: 99px; padding: .05rem .45rem; }

.sidebar-footer { padding: .9rem 1.15rem 1.1rem; border-top: 1px solid rgba(255,255,255,.05); font-size: .7rem; color: var(--ax-sidebar-muted); white-space: nowrap; overflow: hidden; }

.main { flex: 1; min-width: 0; margin-left: var(--ax-sidebar-w); transition: margin-left .2s ease; display: flex; flex-direction: column; }

.topbar {
  position: sticky; top: 0; z-index: 1030; height: var(--ax-topbar-h);
  display: flex; align-items: center; gap: .75rem; padding: 0 1.5rem;
  background: color-mix(in srgb, var(--ax-surface) 88%, transparent);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--ax-border);
}
.icon-btn {
  width: 36px; height: 36px; border-radius: 9px; display: inline-grid; place-items: center;
  border: 1px solid transparent; background: transparent; color: var(--ax-text-2); position: relative; padding: 0;
}
.icon-btn:hover { background: var(--ax-surface-2); border-color: var(--ax-border); color: var(--ax-text); }
.icon-btn .dot { position: absolute; top: 6px; right: 6px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 99px; background: var(--ax-danger); color: #fff; font-size: .62rem; font-weight: 700; display: grid; place-items: center; border: 2px solid var(--ax-surface); }

.crumbs { display: flex; align-items: center; gap: .35rem; font-size: .8rem; color: var(--ax-text-3); min-width: 0; }
.crumbs a { color: var(--ax-text-3); }
.crumbs a:hover { color: var(--ax-text); }
.crumbs .current { color: var(--ax-text); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.search-trigger {
  display: flex; align-items: center; gap: .55rem; width: 300px; max-width: 34vw; height: 36px; padding: 0 .7rem;
  border: 1px solid var(--ax-border); border-radius: 9px; background: var(--ax-surface-2); color: var(--ax-text-3); font-size: .82rem;
}
.search-trigger:hover { border-color: var(--ax-border-strong); color: var(--ax-text-2); }
.kbd { margin-left: auto; font-size: .68rem; border: 1px solid var(--ax-border-strong); border-radius: 5px; padding: 0 .35rem; color: var(--ax-text-3); background: var(--ax-surface); }

.user-chip { display: flex; align-items: center; gap: .55rem; padding: .2rem .35rem .2rem .2rem; border-radius: 99px; border: 1px solid transparent; background: none; color: var(--ax-text); }
.user-chip:hover { border-color: var(--ax-border); background: var(--ax-surface-2); }
.avatar { width: 32px; height: 32px; border-radius: 50%; display: inline-grid; place-items: center; font-weight: 600; font-size: .74rem; flex-shrink: 0; color: #fff; background: linear-gradient(135deg, #3d63dd, #7c4dff); letter-spacing: .02em; }
.avatar-lg { width: 56px; height: 56px; font-size: 1.1rem; }
.avatar-sm { width: 26px; height: 26px; font-size: .64rem; }

.content { padding: 1.5rem 1.75rem 3rem; max-width: 1480px; width: 100%; }

/* Collapsed sidebar */
body.sidebar-collapsed .sidebar { width: var(--ax-sidebar-w-collapsed); }
body.sidebar-collapsed .main { margin-left: var(--ax-sidebar-w-collapsed); }
body.sidebar-collapsed .brand-text,
body.sidebar-collapsed .nav-item-x span,
body.sidebar-collapsed .nav-badge,
body.sidebar-collapsed .sidebar-footer { display: none; }
body.sidebar-collapsed .nav-section { font-size: 0; padding: .6rem 0; border-top: 1px solid rgba(255,255,255,.06); margin: .5rem .4rem 0; }
body.sidebar-collapsed .nav-item-x { justify-content: center; padding: .6rem; }
body.sidebar-collapsed .sidebar-brand { justify-content: center; padding: 0; }

/* Mobile */
.sidebar-backdrop { display: none; }
@media (max-width: 991.98px) {
  .sidebar { transform: translateX(-100%); width: var(--ax-sidebar-w) !important; box-shadow: var(--ax-shadow-lg); }
  .main, body.sidebar-collapsed .main { margin-left: 0; }
  body.sidebar-open .sidebar { transform: none; }
  body.sidebar-open .sidebar-backdrop { display: block; position: fixed; inset: 0; background: rgba(5, 10, 25, .45); z-index: 1035; }
  body.sidebar-collapsed .brand-text, body.sidebar-collapsed .nav-item-x span, body.sidebar-collapsed .sidebar-footer { display: revert; }
  .content { padding: 1.1rem 1rem 2.5rem; }
  .topbar { padding: 0 1rem; }
  .search-trigger { width: 36px; padding: 0; justify-content: center; }
  .search-trigger .label, .search-trigger .kbd { display: none; }
}

/* ---------- Page header ---------- */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.35rem; flex-wrap: wrap; }
.page-head h1 { margin: 0; }
.page-head .sub { color: var(--ax-text-3); margin: .25rem 0 0; font-size: .85rem; }
.page-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

/* ---------- Panels / cards ---------- */
.panel { background: var(--ax-surface); border: 1px solid var(--ax-border); border-radius: var(--ax-radius); box-shadow: var(--ax-shadow); }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .95rem 1.15rem; border-bottom: 1px solid var(--ax-border); }
.panel-head h2, .panel-head h3 { margin: 0; font-size: .93rem; }
.panel-head .hint { color: var(--ax-text-3); font-size: .78rem; }
.panel-body { padding: 1.15rem; }
.panel-foot { padding: .8rem 1.15rem; border-top: 1px solid var(--ax-border); background: var(--ax-surface-2); border-radius: 0 0 var(--ax-radius) var(--ax-radius); }

.stat { padding: 1rem 1.15rem; display: flex; flex-direction: column; gap: .35rem; height: 100%; }
.stat-label { font-size: .76rem; color: var(--ax-text-3); font-weight: 500; display: flex; align-items: center; gap: .4rem; }
.stat-value { font-family: "Jakarta", sans-serif; font-size: 1.6rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat-meta { font-size: .75rem; color: var(--ax-text-3); }
a.stat:hover { background: var(--ax-surface-2); }
.stat-icon { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: rgba(var(--ax-accent-rgb), .1); color: var(--ax-accent); }

/* ---------- Tables ---------- */
.table-x { width: 100%; margin: 0; border-collapse: separate; border-spacing: 0; font-size: .84rem; }
.table-x th {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; color: var(--ax-text-3);
  padding: .65rem 1.15rem; background: var(--ax-surface-2); border-bottom: 1px solid var(--ax-border); white-space: nowrap; text-align: left;
}
.table-x td { padding: .75rem 1.15rem; border-bottom: 1px solid var(--ax-border); vertical-align: middle; color: var(--ax-text); }
.table-x tbody tr:last-child td { border-bottom: 0; }
.table-x tbody tr:hover td { background: var(--ax-surface-2); }
.table-x .num { text-align: right; font-variant-numeric: tabular-nums; }
.table-wrap { overflow-x: auto; }
.cell-user { display: flex; align-items: center; gap: .65rem; min-width: 200px; }
.cell-user .name { font-weight: 600; color: var(--ax-text); }
.cell-user .meta { font-size: .76rem; color: var(--ax-text-3); }

/* ---------- Pills ---------- */
.pill { display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; font-weight: 600; padding: .18rem .55rem; border-radius: 99px; white-space: nowrap; line-height: 1.35; }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .85; }
.pill-success { color: var(--ax-success); background: var(--ax-success-bg); }
.pill-warning { color: var(--ax-warning); background: var(--ax-warning-bg); }
.pill-danger  { color: var(--ax-danger);  background: var(--ax-danger-bg); }
.pill-info    { color: var(--ax-info);    background: var(--ax-info-bg); }
.pill-violet  { color: var(--ax-violet);  background: var(--ax-violet-bg); }
.pill-neutral { color: var(--ax-neutral); background: var(--ax-neutral-bg); }
.pill-accent  { color: var(--ax-accent);  background: rgba(var(--ax-accent-rgb), .1); }

/* ---------- Buttons & forms ---------- */
.btn { font-weight: 600; font-size: .83rem; border-radius: 8px; padding: .48rem .9rem; display: inline-flex; align-items: center; gap: .45rem; justify-content: center; }
.btn-sm { padding: .3rem .6rem; font-size: .78rem; }
.btn-primary { --bs-btn-bg: var(--ax-accent); --bs-btn-border-color: var(--ax-accent); --bs-btn-hover-bg: #2259e6; --bs-btn-hover-border-color: #2259e6; --bs-btn-active-bg: #1b4ccc; --bs-btn-disabled-bg: var(--ax-accent); --bs-btn-disabled-border-color: var(--ax-accent); box-shadow: 0 1px 2px rgba(16,24,40,.08), inset 0 1px 0 rgba(255,255,255,.12); }
.btn-light-x { background: var(--ax-surface); border: 1px solid var(--ax-border-strong); color: var(--ax-text); box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.btn-light-x:hover { background: var(--ax-surface-2); color: var(--ax-text); border-color: var(--ax-border-strong); }
.btn-ghost { background: transparent; border: 1px solid transparent; color: var(--ax-text-2); }
.btn-ghost:hover { background: var(--ax-surface-2); color: var(--ax-text); }
.btn-danger-x { background: var(--ax-surface); border: 1px solid color-mix(in srgb, var(--ax-danger) 35%, transparent); color: var(--ax-danger); }
.btn-danger-x:hover { background: var(--ax-danger-bg); color: var(--ax-danger); }

.form-label { font-weight: 600; font-size: .8rem; color: var(--ax-text-2); margin-bottom: .35rem; }
.form-control, .form-select { font-size: .86rem; border-color: var(--ax-border-strong); border-radius: 8px; padding: .5rem .75rem; background-color: var(--ax-surface); color: var(--ax-text); }
.form-control:focus, .form-select:focus { border-color: rgba(var(--ax-accent-rgb), .6); box-shadow: 0 0 0 3px rgba(var(--ax-accent-rgb), .14); }
.form-control::placeholder { color: var(--ax-text-3); }
.form-text { color: var(--ax-text-3); font-size: .76rem; }
.form-check-input { border: 1.5px solid #a7b1c6; background-color: var(--ax-surface); }
[data-bs-theme="dark"] .form-check-input { border-color: #46557a; }
.form-check-input:checked { background-color: var(--ax-accent); border-color: var(--ax-accent); }
.form-check-input:disabled { opacity: .35; }
.form-switch .form-check-input { width: 2.3em; height: 1.25em; cursor: pointer; }
.form-control-color { width: 3rem; padding: .3rem; height: 38px; }
.input-icon { position: relative; }
.input-icon .icon { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); color: var(--ax-text-3); pointer-events: none; }
.input-icon .form-control { padding-left: 2.3rem; }
.form-section + .form-section { border-top: 1px solid var(--ax-border); margin-top: 1.25rem; padding-top: 1.25rem; }
.secret-state { display: inline-flex; align-items: center; gap: .35rem; font-size: .75rem; }

/* ---------- Alerts / flash ---------- */
.flash { display: flex; gap: .7rem; align-items: flex-start; padding: .8rem 1rem; border-radius: 9px; font-size: .84rem; margin-bottom: 1.1rem; border: 1px solid transparent; }
.flash-success { background: var(--ax-success-bg); color: var(--ax-success); border-color: color-mix(in srgb, var(--ax-success) 20%, transparent); }
.flash-error   { background: var(--ax-danger-bg);  color: var(--ax-danger);  border-color: color-mix(in srgb, var(--ax-danger) 20%, transparent); }
.flash-warning { background: var(--ax-warning-bg); color: var(--ax-warning); border-color: color-mix(in srgb, var(--ax-warning) 22%, transparent); }
.flash-info    { background: var(--ax-info-bg);    color: var(--ax-info);    border-color: color-mix(in srgb, var(--ax-info) 20%, transparent); }
.flash .body { color: var(--ax-text); }
.flash strong { color: inherit; }

/* ---------- Empty state ---------- */
.empty { text-align: center; padding: 3rem 1rem; color: var(--ax-text-3); }
.empty .icon-wrap { width: 52px; height: 52px; border-radius: 14px; display: inline-grid; place-items: center; background: var(--ax-surface-2); border: 1px solid var(--ax-border); margin-bottom: .9rem; color: var(--ax-text-2); }
.empty h3 { color: var(--ax-text); margin-bottom: .3rem; }

/* ---------- Toolbar / filters ---------- */
.toolbar { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; padding: .85rem 1.15rem; border-bottom: 1px solid var(--ax-border); }
.toolbar .form-control, .toolbar .form-select { height: 36px; padding-top: .3rem; padding-bottom: .3rem; }
.toolbar .grow { flex: 1 1 220px; max-width: 340px; }
.pager { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem 1.15rem; border-top: 1px solid var(--ax-border); font-size: .8rem; color: var(--ax-text-3); }

/* ---------- Settings layout ---------- */
.settings-grid { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.settings-nav { position: sticky; top: calc(var(--ax-topbar-h) + 1.25rem); }
.settings-nav a { display: flex; align-items: center; gap: .65rem; padding: .55rem .75rem; border-radius: 8px; color: var(--ax-text-2); font-weight: 500; font-size: .84rem; }
.settings-nav a:hover { background: var(--ax-surface); color: var(--ax-text); }
.settings-nav a.active { background: var(--ax-surface); color: var(--ax-text); box-shadow: var(--ax-shadow); border: 1px solid var(--ax-border); }
.settings-nav a.active .icon { color: var(--ax-accent); }
@media (max-width: 991.98px) { .settings-grid { grid-template-columns: 1fr; } .settings-nav { position: static; display: flex; overflow-x: auto; gap: .25rem; } .settings-nav a { white-space: nowrap; } }

/* ---------- Permission matrix ---------- */
.matrix { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .82rem; }
.matrix th { background: var(--ax-surface-2); font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ax-text-3); padding: .6rem .5rem; text-align: center; border-bottom: 1px solid var(--ax-border); }
.matrix th:first-child { text-align: left; padding-left: 1.15rem; }
.matrix td { padding: .5rem; text-align: center; border-bottom: 1px solid var(--ax-border); }
.matrix td:first-child { text-align: left; padding-left: 1.15rem; font-weight: 500; min-width: 190px; }
.matrix tr.group td { background: var(--ax-surface-2); font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ax-text-3); font-weight: 700; padding: .55rem 1.15rem; text-align: left; }
.matrix .na { color: var(--ax-border-strong); }
.matrix .form-check-input { margin: 0; cursor: pointer; }
.matrix .form-select { font-size: .76rem; padding: .2rem 1.6rem .2rem .5rem; height: 28px; min-width: 112px; }
.matrix tr:hover td:not(.group td) { background: rgba(var(--ax-accent-rgb), .025); }

/* ---------- Dropdowns ---------- */
.dropdown-menu { --bs-dropdown-bg: var(--ax-surface); --bs-dropdown-border-color: var(--ax-border); --bs-dropdown-link-color: var(--ax-text); --bs-dropdown-link-hover-bg: var(--ax-surface-2); --bs-dropdown-link-active-bg: rgba(var(--ax-accent-rgb), .12); --bs-dropdown-link-active-color: var(--ax-text); font-size: .84rem; border-radius: 10px; box-shadow: var(--ax-shadow-lg); padding: .35rem; }
.dropdown-item { border-radius: 6px; padding: .45rem .65rem; display: flex; align-items: center; gap: .6rem; }
.dropdown-header { font-size: .7rem; text-transform: uppercase; letter-spacing: .07em; }

.notif-menu { width: 360px; max-width: calc(100vw - 2rem); padding: 0; }
.notif-menu .head { display: flex; justify-content: space-between; align-items: center; padding: .75rem 1rem; border-bottom: 1px solid var(--ax-border); }
.notif-list { max-height: 380px; overflow-y: auto; }
.notif { display: flex; gap: .7rem; padding: .75rem 1rem; border-bottom: 1px solid var(--ax-border); color: var(--ax-text); }
.notif:hover { background: var(--ax-surface-2); color: var(--ax-text); }
.notif.unread { background: rgba(var(--ax-accent-rgb), .045); }
.notif .ndot { width: 8px; height: 8px; border-radius: 50%; background: var(--ax-accent); margin-top: .4rem; flex-shrink: 0; }
.notif.read .ndot { background: transparent; }
.notif .t { font-weight: 600; font-size: .82rem; }
.notif .b { font-size: .78rem; color: var(--ax-text-2); }
.notif .w { font-size: .7rem; color: var(--ax-text-3); margin-top: .15rem; }

/* ---------- Search palette ---------- */
.palette .modal-content { border: 1px solid var(--ax-border); border-radius: 14px; background: var(--ax-surface); box-shadow: var(--ax-shadow-lg); overflow: hidden; }
.palette .search-input { border: 0; border-bottom: 1px solid var(--ax-border); border-radius: 0; font-size: 1rem; padding: 1rem 1rem 1rem 2.9rem; box-shadow: none !important; }
.palette .input-icon .icon { left: 1.1rem; }
.palette .results { max-height: 420px; overflow-y: auto; padding: .4rem; }
.palette .group-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ax-text-3); font-weight: 700; padding: .6rem .7rem .3rem; }
.palette .hit { display: flex; align-items: center; gap: .7rem; padding: .55rem .7rem; border-radius: 8px; color: var(--ax-text); }
.palette .hit .sub { font-size: .76rem; color: var(--ax-text-3); }
.palette .hit:hover, .palette .hit.active { background: rgba(var(--ax-accent-rgb), .09); color: var(--ax-text); }
.palette .foot { display: flex; gap: 1rem; padding: .55rem 1rem; border-top: 1px solid var(--ax-border); font-size: .72rem; color: var(--ax-text-3); background: var(--ax-surface-2); }

/* ---------- Auth & installer layout ---------- */
.auth-wrap { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.auth-aside {
  position: relative; overflow: hidden; color: #dfe6f8; padding: 3rem; display: flex; flex-direction: column; justify-content: space-between;
  background: radial-gradient(1200px 600px at -10% -10%, #1b2f66 0%, transparent 60%), radial-gradient(900px 500px at 120% 110%, #13306e 0%, transparent 55%), var(--ax-sidebar);
}
.auth-aside::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 44px 44px; mask-image: radial-gradient(ellipse at 30% 40%, #000 20%, transparent 70%); pointer-events: none; }
.auth-aside > * { position: relative; z-index: 1; }
.auth-aside h2 { color: #fff; font-size: 2.1rem; font-weight: 800; line-height: 1.15; letter-spacing: -.035em; max-width: 26ch; }
.auth-aside .lead-x { color: #aebbd9; max-width: 46ch; font-size: .95rem; margin-top: 1rem; }
.auth-points { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: .8rem; }
.auth-points li { display: flex; gap: .7rem; align-items: center; color: #cdd6ec; font-size: .88rem; }
.auth-points .icon { color: #8fb0ff; }
.auth-main { display: flex; align-items: center; justify-content: center; padding: 2.5rem 1.5rem; background: var(--ax-surface); }
.auth-card { width: 100%; max-width: 400px; }
.auth-card h1 { font-size: 1.5rem; font-weight: 800; }
.auth-foot { font-size: .74rem; color: var(--ax-text-3); margin-top: 2rem; }
@media (max-width: 991.98px) { .auth-wrap { grid-template-columns: 1fr; } .auth-aside { display: none; } }

.install-wrap { min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: 2.5rem 1rem; background: var(--ax-bg); }
.install-card { width: 100%; max-width: 760px; }
.steps { display: flex; gap: .35rem; margin: 1.25rem 0 1.5rem; }
.steps .s { flex: 1; height: 5px; border-radius: 99px; background: var(--ax-border); }
.steps .s.done { background: var(--ax-accent); }
.steps .s.now { background: linear-gradient(90deg, var(--ax-accent), rgba(var(--ax-accent-rgb), .35)); }
.check-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .65rem 0; border-bottom: 1px dashed var(--ax-border); font-size: .86rem; }
.check-row:last-child { border-bottom: 0; }

/* ---------- Misc ---------- */
.kv { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: .6rem 1rem; font-size: .85rem; }
.kv dt { color: var(--ax-text-3); font-weight: 500; }
.kv dd { margin: 0; color: var(--ax-text); word-break: break-word; }
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { display: flex; gap: .8rem; padding: .7rem 1.15rem; border-bottom: 1px solid var(--ax-border); }
.timeline li:last-child { border-bottom: 0; }
.timeline .ic { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--ax-surface-2); border: 1px solid var(--ax-border); color: var(--ax-text-2); flex-shrink: 0; }
.timeline .what { font-size: .84rem; }
.timeline .when { font-size: .74rem; color: var(--ax-text-3); }
.checklist li { display: flex; gap: .75rem; align-items: center; padding: .75rem 1.15rem; border-bottom: 1px solid var(--ax-border); }
.checklist li:last-child { border-bottom: 0; }
.checklist .tick { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--ax-border-strong); flex-shrink: 0; }
.checklist .tick.ok { background: var(--ax-success); border-color: var(--ax-success); color: #fff; }
.checklist .tick .icon { width: .8rem; height: .8rem; stroke-width: 3; }
.progress-x { height: 6px; border-radius: 99px; background: var(--ax-neutral-bg); overflow: hidden; }
.progress-x > span { display: block; height: 100%; background: var(--ax-accent); border-radius: 99px; }
.code-box { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .8rem; background: var(--ax-surface-2); border: 1px solid var(--ax-border); border-radius: 8px; padding: .55rem .75rem; word-break: break-all; }
.diff { width: 100%; font-size: .8rem; }
.diff td, .diff th { padding: .45rem .7rem; border-bottom: 1px solid var(--ax-border); vertical-align: top; word-break: break-word; }
.diff .old { background: var(--ax-danger-bg); }
.diff .new { background: var(--ax-success-bg); }
.modal-content { background: var(--ax-surface); border-color: var(--ax-border); border-radius: 12px; }
.temp-pass { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 1.05rem; font-weight: 700; letter-spacing: .06em; }
hr { border-color: var(--ax-border); opacity: 1; }

/* ---------- Kanban ---------- */
.kanban { display: flex; gap: .85rem; overflow-x: auto; padding-bottom: 1rem; align-items: flex-start; scroll-snap-type: x proximity; }
.kanban-col { flex: 0 0 272px; background: var(--ax-surface-2); border: 1px solid var(--ax-border); border-radius: var(--ax-radius); display: flex; flex-direction: column; max-height: calc(100vh - 210px); scroll-snap-align: start; }
.kanban-col header { display: flex; align-items: center; gap: .5rem; padding: .7rem .8rem .3rem; font-size: .82rem; }
.kanban-col header .dot { width: 9px; height: 9px; border-radius: 50%; }
.kanban-col header .count { margin-left: auto; font-size: .72rem; color: var(--ax-text-3); background: var(--ax-surface); border: 1px solid var(--ax-border); border-radius: 99px; padding: 0 .45rem; }
.kanban-col .sum { font-size: .72rem; color: var(--ax-text-3); padding: 0 .8rem .4rem; }
.kanban-list { padding: .35rem .55rem .7rem; overflow-y: auto; min-height: 80px; flex: 1; display: flex; flex-direction: column; gap: .5rem; }
.kanban-col.drop .kanban-list { background: rgba(var(--ax-accent-rgb), .06); border-radius: 8px; outline: 2px dashed rgba(var(--ax-accent-rgb), .35); outline-offset: -4px; }
.kcard { background: var(--ax-surface); border: 1px solid var(--ax-border); border-radius: 8px; padding: .65rem .7rem; box-shadow: var(--ax-shadow); font-size: .82rem; cursor: grab; }
.kcard[draggable="false"] { cursor: default; }
.kcard.dragging { opacity: .5; }
.kcard:hover { border-color: var(--ax-border-strong); }

/* ---------- Chat / inbox ---------- */
.inbox { display: grid; grid-template-columns: 330px minmax(0, 1fr); height: calc(100vh - 170px); min-height: 520px; }
.inbox-list { border-right: 1px solid var(--ax-border); overflow-y: auto; }
.inbox-item { display: flex; gap: .65rem; padding: .75rem .9rem; border-bottom: 1px solid var(--ax-border); color: var(--ax-text); }
.inbox-item:hover, .inbox-item.active { background: var(--ax-surface-2); color: var(--ax-text); }
.inbox-item .preview { font-size: .77rem; color: var(--ax-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thread { display: flex; flex-direction: column; min-width: 0; }
.thread-body { flex: 1; overflow-y: auto; padding: 1rem 1.25rem; background: var(--ax-surface-2); display: flex; flex-direction: column; gap: .45rem; }
.bubble { max-width: 72%; padding: .5rem .75rem; border-radius: 12px; font-size: .85rem; box-shadow: var(--ax-shadow); word-wrap: break-word; }
.bubble.in { align-self: flex-start; background: var(--ax-surface); border: 1px solid var(--ax-border); border-bottom-left-radius: 4px; }
.bubble.out { align-self: flex-end; background: rgba(var(--ax-accent-rgb), .12); border: 1px solid rgba(var(--ax-accent-rgb), .2); border-bottom-right-radius: 4px; }
.bubble .meta { font-size: .68rem; color: var(--ax-text-3); margin-top: .2rem; text-align: right; }
.bubble.note { align-self: center; background: var(--ax-warning-bg); border: 1px dashed color-mix(in srgb, var(--ax-warning) 40%, transparent); max-width: 85%; }
@media (max-width: 991.98px) { .inbox { grid-template-columns: 1fr; height: auto; } .inbox-list { max-height: 300px; border-right: 0; border-bottom: 1px solid var(--ax-border); } }

/* ---------- Calendar ---------- */
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--ax-border); border-left: 1px solid var(--ax-border); }
.cal .dow { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ax-text-3); padding: .45rem .6rem; background: var(--ax-surface-2); border-right: 1px solid var(--ax-border); border-bottom: 1px solid var(--ax-border); font-weight: 600; }
.cal .day { min-height: 112px; padding: .35rem .45rem; border-right: 1px solid var(--ax-border); border-bottom: 1px solid var(--ax-border); font-size: .75rem; }
.cal .day.muted { background: var(--ax-surface-2); color: var(--ax-text-3); }
.cal .day.today .num { background: var(--ax-accent); color: #fff; border-radius: 99px; padding: 0 .4rem; }
.cal .num { font-weight: 600; display: inline-block; margin-bottom: .25rem; }
.cal .ev { display: block; padding: .15rem .35rem; border-radius: 5px; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ax-text); background: rgba(var(--ax-accent-rgb), .1); border-left: 3px solid var(--ax-accent); }
.cal .ev:hover { color: var(--ax-text); background: rgba(var(--ax-accent-rgb), .18); }

/* ---------- Line items ---------- */
.items-table input, .items-table select { font-size: .82rem; padding: .35rem .5rem; }
.items-table td { vertical-align: top; }
.totals { max-width: 360px; margin-left: auto; }
.totals .row-x { display: flex; justify-content: space-between; padding: .3rem 0; font-size: .86rem; }
.totals .grand { border-top: 2px solid var(--ax-border-strong); margin-top: .3rem; padding-top: .5rem; font-weight: 700; font-size: 1.05rem; }
.stage-track { display: flex; gap: .3rem; flex-wrap: wrap; }
.stage-track .st { flex: 1 1 90px; text-align: center; font-size: .7rem; padding: .45rem .3rem; border-radius: 7px; background: var(--ax-neutral-bg); color: var(--ax-text-3); font-weight: 600; }
.stage-track .st.done { background: var(--ax-success-bg); color: var(--ax-success); }
.stage-track .st.now { background: var(--ax-accent); color: #fff; }
.asset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .85rem; }
.asset { border: 1px solid var(--ax-border); border-radius: 10px; overflow: hidden; background: var(--ax-surface); }
.asset .thumb { aspect-ratio: 4/3; background: var(--ax-surface-2); display: grid; place-items: center; overflow: hidden; }
.asset .thumb img, .asset .thumb video { width: 100%; height: 100%; object-fit: cover; }
.asset .info { padding: .55rem .65rem; font-size: .78rem; }
.pre-wrap { white-space: pre-wrap; }
.doc-actions form { display: inline; }
.table-x td.num, .table-x th.num { white-space: nowrap; }