/* ════════════════════════════════════════════════════════════════════
   UKKAZ — Visual Identity v2 ("Sovereign Intelligence")
   Loaded AFTER design.css, app.css, admin.css, mobile.css
   This file overlays the new identity without touching legacy CSS so
   each phase of the redesign is isolated and easily reverted.
   ════════════════════════════════════════════════════════════════════ */

@layer overrides {

/* ────────────────────────────────────────────────────────────────────
   1 · SIDEBAR — Dark navy, premium, distinct
   ──────────────────────────────────────────────────────────────────── */

.side-nav {
  background: var(--u-surface-dark) !important;
  border-inline-end: 1px solid rgba(255,255,255,.04) !important;
  color: var(--u-on-surface-dark);
  position: relative;
  isolation: isolate;
}

/* Subtle ambient gradient behind everything */
.side-nav::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 60% at 100% 0%, rgba(201, 162, 39, .10) 0%, transparent 55%),
    radial-gradient(80% 50% at 0% 100%, rgba(30, 58, 111, .35) 0%, transparent 60%);
  pointer-events: none;
  z-index: -1;
}

.side-inner {
  padding-block: 16px 10px;
}

/* ─── Brand block ─── */
.side-brand {
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 14px 20px 18px !important;
  margin-block-end: 6px;
  text-decoration: none;
  border-block-end: 1px solid rgba(255,255,255,.05);
  color: var(--u-on-surface-dark) !important;
}

/* Replace the legacy text "ع" mark with the SVG logo */
.side-brand .brand-mark {
  display: inline-block !important;
  width: 38px !important; height: 38px !important;
  background: url('/static/img/brand/favicon.svg') center/contain no-repeat !important;
  border-radius: 10px !important;
  color: transparent !important;
  font-size: 0 !important;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(201, 162, 39, .15);
}

.side-brand > div > span:first-child {
  color: #fff !important;
  font-weight: 800 !important;
  font-size: 16px !important;
  letter-spacing: -0.01em;
}
.side-brand > div > span:last-child {
  color: var(--u-on-surface-dark-muted) !important;
  font-size: 10.5px !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600 !important;
}

/* ─── Section labels ─── */
.side-label {
  color: rgba(255,255,255,.42) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  padding-inline: 22px !important;
  margin-block: 14px 6px !important;
  text-transform: uppercase;
}

/* ─── Nav links ─── */
.side-section { padding-inline: 12px; }

.side-link {
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 9px 11px !important;
  margin-block-end: 2px;
  border-radius: 9px !important;
  font-size: 13.5px;
  font-weight: 500 !important;
  color: rgba(231, 234, 241, .82) !important;
  text-decoration: none;
  transition: background var(--u-dur-fast) var(--u-ease-out),
              color var(--u-dur-fast) var(--u-ease-out),
              transform var(--u-dur-fast) var(--u-ease-out);
  position: relative;
}
.side-link:hover {
  background: rgba(255,255,255,.05) !important;
  color: #fff !important;
}
.side-link.active {
  background: linear-gradient(90deg, rgba(201,162,39,.18) 0%, rgba(201,162,39,.04) 100%) !important;
  color: #fff !important;
  font-weight: 700 !important;
  box-shadow: inset 0 0 0 1px rgba(201,162,39,.22);
}
html[dir="rtl"] .side-link.active {
  background: linear-gradient(-90deg, rgba(201,162,39,.18) 0%, rgba(201,162,39,.04) 100%) !important;
}
.side-link.active::before {
  content: "";
  position: absolute;
  inset-block: 6px;
  inset-inline-start: -8px;
  width: 3px;
  border-radius: 2px;
  background: var(--u-accent-400);
  box-shadow: 0 0 10px rgba(232,192,75,.6);
}

.side-icon {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 7px;
  background: rgba(255,255,255,.03);
  color: rgba(231, 234, 241, .65);
  flex-shrink: 0;
  transition: background var(--u-dur-fast), color var(--u-dur-fast);
}
.side-link:hover .side-icon { background: rgba(255,255,255,.06); color: var(--u-accent-300); }
.side-link.active .side-icon {
  background: linear-gradient(135deg, var(--u-accent-400), var(--u-accent-500)) !important;
  color: var(--u-brand-900) !important;
  box-shadow: 0 2px 6px rgba(201,162,39,.30);
}
.side-icon i, .side-icon svg { width: 15px; height: 15px; }

/* ─── Sidebar footer + plan chip — premium dark-glass ─────────────
   IMPORTANT: every visible property carries !important because legacy
   app.css declares these UNLAYERED (which would otherwise beat this
   `overrides` layer and leak a light background onto the dark sidebar). */
.side-footer {
  padding: 14px 14px 18px !important;
  margin-block-start: auto;
  border-block-start: 1px solid rgba(255,255,255,.07) !important;
  /* blends seamlessly into the navy sidebar — no more light block */
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.22) 100%) !important;
}

.plan-chip {
  position: relative !important;
  display: flex !important;
  align-items: center;
  gap: 12px !important;
  padding: 12px 14px !important;
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 14px !important;
  color: #fff !important;
  text-decoration: none;
  overflow: hidden !important;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;
  transition: background .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease !important;
}
/* tier accent rail on the inline-start edge */
.plan-chip::before {
  content: "" !important;
  position: absolute !important;
  inset-inline-start: 0; inset-block: 0;
  width: 3px !important;
  background: var(--u-accent-400) !important;
  opacity: .9;
}
.plan-chip:hover {
  background: rgba(255,255,255,.085) !important;
  border-color: rgba(201,162,39,.35) !important;
  transform: translateY(-1px);
  box-shadow: 0 12px 28px -18px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.08) !important;
}
.plan-chip-icon {
  width: 38px !important; height: 38px !important;
  display: inline-flex !important; align-items: center; justify-content: center;
  border-radius: 11px !important;
  background: rgba(201,162,39,.14) !important;
  color: var(--u-accent-300) !important;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07) !important;
}
.plan-chip-icon i, .plan-chip-icon svg { width: 17px; height: 17px; }
.plan-chip .side-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.plan-chip-name {
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #fff !important;
  line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.plan-chip-sub {
  font-size: 10.5px !important;
  color: rgba(255,255,255,.62) !important;
  margin-block-start: 3px !important;
  display: flex; align-items: center; gap: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.plan-chip-renewal, .plan-chip-upgrade { display: inline-flex !important; align-items: center; gap: 4px; }

/* Paid (Pro / Business) — gold rail + gold icon */
.plan-chip.is-paid {
  background: linear-gradient(135deg, rgba(201,162,39,.18), rgba(201,162,39,.05)) !important;
  border-color: rgba(201,162,39,.34) !important;
}
.plan-chip.is-paid::before { background: linear-gradient(180deg, var(--u-accent-400), var(--u-accent-500)) !important; opacity: 1; }
.plan-chip.is-paid .plan-chip-icon {
  background: linear-gradient(135deg, var(--u-accent-400), var(--u-accent-500)) !important;
  color: var(--u-brand-900) !important;
  box-shadow: 0 4px 12px -4px rgba(201,162,39,.5) !important;
}

/* Corporate — emerald rail + emerald icon */
.plan-chip.is-corp {
  background: linear-gradient(135deg, rgba(16,185,129,.18), rgba(16,185,129,.045)) !important;
  border-color: rgba(16,185,129,.34) !important;
}
.plan-chip.is-corp::before { background: linear-gradient(180deg, #10B981, #059669) !important; opacity: 1; }
.plan-chip.is-corp .plan-chip-icon {
  background: linear-gradient(135deg, #10B981, #059669) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px -4px rgba(16,185,129,.55) !important;
}
.plan-chip.is-corp:hover { border-color: rgba(16,185,129,.55) !important; }
.plan-chip.is-corp .plan-chip-sub { color: rgba(209,250,229,.75) !important; }

/* Trial — amber rail + pulsing dot */
.plan-chip.is-trial {
  background: linear-gradient(135deg, rgba(245,158,11,.18), rgba(245,158,11,.05)) !important;
  border-color: rgba(245,158,11,.34) !important;
}
.plan-chip.is-trial::before { background: linear-gradient(180deg, #F59E0B, #D97706) !important; opacity: 1; }
.plan-chip.is-trial .plan-chip-icon {
  position: relative;
  background: rgba(245,158,11,.18) !important;
  color: #FBBF24 !important;
}
.plan-chip.is-trial .plan-chip-icon::after {
  content: "";
  position: absolute;
  inset-block-start: -2px; inset-inline-end: -2px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #F59E0B;
  border: 2px solid var(--u-surface-dark, #0F1D5C);
  animation: chip-pulse-v2 1.6s ease-in-out infinite;
}
@keyframes chip-pulse-v2 { 0%,100% { transform: scale(1); } 50% { transform: scale(1.3); } }
.plan-chip.is-trial .plan-chip-sub { color: rgba(254,243,199,.8) !important; }

/* Collapse button */
.side-collapse-btn {
  background: rgba(255,255,255,.06) !important;
  color: var(--u-on-surface-dark) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
}
.side-collapse-btn:hover {
  background: rgba(201,162,39,.18) !important;
  color: var(--u-accent-300) !important;
  border-color: rgba(201,162,39,.30) !important;
}

/* Scrollbar — subtle on dark */
.side-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.10) !important; }

/* ────────────────────────────────────────────────────────────────────
   2 · TOPBAR — Light, dense, premium
   ──────────────────────────────────────────────────────────────────── */

.app-topbar {
  background: rgba(255,255,255,.92) !important;
  backdrop-filter: saturate(150%) blur(12px);
  -webkit-backdrop-filter: saturate(150%) blur(12px);
  border-block-end: 1px solid var(--u-border) !important;
  padding-inline: 24px !important;
  height: 64px !important;
}

.global-search input {
  background: var(--u-bg-page) !important;
  border: 1px solid var(--u-border) !important;
  border-radius: 10px !important;
  font-size: 13.5px !important;
  height: 40px;
  transition: all var(--u-dur-fast);
}
.global-search input:focus {
  background: #fff !important;
  border-color: var(--u-accent-400) !important;
  box-shadow: var(--u-shadow-focus-gold) !important;
}
.global-search .search-icon { color: var(--u-text-muted); }

.top-actions { gap: 10px !important; }

/* Notification bell — refined */
.notif-btn {
  width: 40px; height: 40px;
  border-radius: 10px !important;
  background: var(--u-bg-page) !important;
  border: 1px solid var(--u-border) !important;
  color: var(--u-text-soft) !important;
  transition: all var(--u-dur-fast);
}
.notif-btn:hover {
  background: #fff !important;
  border-color: var(--u-accent-400) !important;
  color: var(--u-accent-500) !important;
}
.notif-badge {
  background: var(--u-danger-600) !important;
  color: #fff !important;
  font-weight: 800;
  border: 2px solid #fff;
}

/* User dropdown trigger — .user-info is the name+role TEXT holder INSIDE the
   rounded .user-chip pill. It must be transparent: this rule used to give it its
   own box (bg + 1px border + 10px radius + padding + 40px height), so a small
   square panel rendered inside the round pill next to the circular avatar —
   that's the lopsided/trapezoidal chip the user flagged. The .user-chip pill
   (app.css) owns the border/background/shape; this is just text. */
.user-info {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  height: auto;
}
.user-info:hover {
  background: transparent !important;
  border-color: transparent !important;
}

/* Language toggle */
.lang-toggle {
  background: var(--u-bg-page) !important;
  border: 1px solid var(--u-border) !important;
  border-radius: 8px !important;
  height: 38px; min-height: 38px; width: auto;
  padding: 0 14px;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 700; line-height: 1;
  color: var(--u-text-soft) !important;
  text-decoration: none; white-space: nowrap;
  transition: all var(--u-dur-fast);
}
.lang-toggle svg { width: 15px; height: 15px; flex-shrink: 0; }
.lang-toggle:hover {
  background: var(--u-primary-soft, #eef2fb) !important;
  border-color: var(--u-primary, #1E3A6F) !important;
  color: var(--u-primary, #1E3A6F) !important;
}

/* ── Custom checkbox / radio fix ──────────────────────────────────────────
   The global `input,select,textarea{width:100%;border;padding;background}` reset
   in app.css (un-layered) was overriding design.css's layered `.u-check` styles,
   rendering consent checkboxes as full-width text-field boxes and turning the
   `.u-check` <label> into a grid. brand-v2.css is un-layered and loads last, so
   these rules win and restore a proper, professional checkmark everywhere. */
.u-check {
  display: inline-flex !important;
  align-items: flex-start; gap: 10px;
  cursor: pointer; font-size: 13.5px; font-weight: 500;
  color: var(--u-text-default, #1f2937); line-height: 1.5;
}
.u-check input[type="checkbox"],
.u-check input[type="radio"] {
  appearance: none; -webkit-appearance: none;
  width: 20px !important; min-width: 20px; height: 20px; flex: 0 0 20px;
  margin: 1px 0 0 !important; padding: 0 !important;
  background: var(--u-bg-surface, #fff) !important;
  border: 1.5px solid var(--u-border-strong, #cbd5e1) !important;
  border-radius: 6px !important;
  display: grid; place-items: center;
  box-shadow: none !important;
  cursor: pointer; transition: background .15s, border-color .15s;
}
.u-check input[type="radio"] { border-radius: 50% !important; }
.u-check input[type="checkbox"]:hover,
.u-check input[type="radio"]:hover { border-color: var(--u-primary, #1E3A6F) !important; }
.u-check input[type="checkbox"]:checked,
.u-check input[type="radio"]:checked {
  background: var(--u-primary, #1E3A6F) !important;
  border-color: var(--u-primary, #1E3A6F) !important;
}
.u-check input[type="checkbox"]:checked::after {
  content: ""; width: 12px; height: 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat;
}
.u-check input[type="radio"]:checked::after {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: #fff;
}
.u-check input:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--u-primary, #1E3A6F) 30%, transparent) !important;
}
.u-check > span { flex: 1; min-width: 0; }

/* Field label + required asterisk: the global label{display:grid} reset pushed
   the red "*" onto its own row and changed the typography. Restore the
   design-system inline label so the asterisk sits next to the field name. */
.u-field-label {
  display: inline-flex !important;
  align-items: center; gap: 4px;
  font-size: 13px !important; font-weight: 600 !important;
  color: var(--u-text-strong, #0f1f3a) !important;
}
.u-field-label .u-field-req { color: var(--u-danger-600, #dc2626) !important; font-weight: 700; }

/* Admin-quick button */
.admin-quick-btn {
  background: linear-gradient(135deg, var(--u-brand-900), var(--u-brand-700)) !important;
  color: #fff !important;
  border-radius: 10px !important;
  padding: 8px 14px !important;
  font-size: 12.5px;
  font-weight: 700;
  height: 40px;
  box-shadow: var(--u-shadow-sm);
  transition: all var(--u-dur-fast);
}
.admin-quick-btn:hover {
  box-shadow: var(--u-shadow-md);
  transform: translateY(-1px);
}

/* ────────────────────────────────────────────────────────────────────
   3 · PAGE BACKGROUND — Warm ivory instead of cold grey
   ──────────────────────────────────────────────────────────────────── */

body { background: var(--u-bg-page) !important; }
.content-frame {
  background:
    radial-gradient(80% 50% at 100% 0%, rgba(201,162,39,.04) 0%, transparent 60%),
    radial-gradient(60% 40% at 0% 100%, rgba(30,58,111,.04) 0%, transparent 60%),
    var(--u-bg-page) !important;
}

/* ────────────────────────────────────────────────────────────────────
   4 · BUTTONS — Premium polish
   ──────────────────────────────────────────────────────────────────── */

.btn-primary,
.button.primary,
.u-btn.is-primary {
  background: linear-gradient(135deg, var(--u-brand-700), var(--u-brand-900)) !important;
  color: #fff !important;
  border: none !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 14px rgba(11,27,58,.18) !important;
  transition: all var(--u-dur-fast);
}
.btn-primary:hover,
.button.primary:hover,
.u-btn.is-primary:hover {
  box-shadow: 0 8px 22px rgba(11,27,58,.28) !important;
  transform: translateY(-1px);
}

.btn-gold,
.button.gold,
.u-btn.is-gold {
  background: linear-gradient(135deg, var(--u-accent-400), var(--u-accent-500)) !important;
  color: var(--u-brand-900) !important;
  border: none !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 14px rgba(201,162,39,.30) !important;
}

/* ────────────────────────────────────────────────────────────────────
   5 · CARDS — Subtle depth, never flat
   ──────────────────────────────────────────────────────────────────── */

.card,
.section-card,
.u-card {
  background: var(--u-bg-surface) !important;
  border: 1px solid var(--u-border) !important;
  border-radius: 14px !important;
  box-shadow: var(--u-shadow-sm) !important;
  transition: box-shadow var(--u-dur-base) var(--u-ease-out);
}
.card:hover,
.section-card:hover {
  box-shadow: var(--u-shadow-md) !important;
}

/* ════════════════════════════════════════════════════════════════════
   UNIFIED COMPONENT LIBRARY (.uk-*)
   These primitives replace ~75 page-specific variants. Pages adopt
   `.uk-*` classes alongside legacy class names; once a page is fully
   migrated, the legacy classes can be removed.
   ════════════════════════════════════════════════════════════════════ */

/* ── Container width cap — fixes "dead space on wide screens" ─────── */
.content-frame {
  padding: 26px 32px !important;
  max-width: 1440px;
  margin-inline: auto;
}
@media (max-width: 768px) { .content-frame { padding: 16px 14px !important; } }

/* ────────────────────────────────────────────────────────────────────
   uk-card — single card primitive replacing 25+ variants
   ──────────────────────────────────────────────────────────────────── */
.uk-card {
  background: var(--u-bg-surface);
  border: 1px solid var(--u-border);
  border-radius: 14px;
  box-shadow: var(--u-shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--u-dur-base) var(--u-ease-out),
              transform var(--u-dur-base) var(--u-ease-out);
}
.uk-card--padded   { padding: 20px; }
.uk-card--padded-lg{ padding: 28px; }
.uk-card--flat     { box-shadow: none; }
.uk-card--accent   { border-top: 3px solid var(--u-accent-400); }
.uk-card--interactive:hover { box-shadow: var(--u-shadow-md); transform: translateY(-1px); }

.uk-card__head {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 20px;
  border-block-end: 1px solid var(--u-border-soft);
  background: var(--u-bg-surface);
}
.uk-card__title {
  font-size: 14px; font-weight: 700; color: var(--u-text-strong);
  letter-spacing: -0.005em;
}
.uk-card__sub { font-size: 12px; color: var(--u-text-muted); margin: 0; }
.uk-card__actions { margin-inline-start: auto; display: flex; gap: 6px; }
.uk-card__body { padding: 20px; }
.uk-card__body--flush { padding: 0; }
.uk-card__foot {
  padding: 12px 20px;
  border-block-start: 1px solid var(--u-border-soft);
  background: var(--u-bg-surface-2);
  display: flex; align-items: center; gap: 10px;
}

/* ────────────────────────────────────────────────────────────────────
   uk-table — single table primitive
   ──────────────────────────────────────────────────────────────────── */
.uk-table-card {
  background: var(--u-bg-surface);
  border: 1px solid var(--u-border);
  border-radius: 14px;
  overflow: hidden;
}
.uk-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.uk-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
  color: var(--u-text-default);
}
.uk-table thead th {
  position: sticky; top: 0;
  background: var(--u-bg-surface-2);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--u-text-soft);
  padding: 12px 16px;
  text-align: start;
  border-block-end: 1px solid var(--u-border);
  white-space: nowrap;
}
.uk-table tbody td {
  padding: 12px 16px;
  border-block-end: 1px solid var(--u-border-soft);
  vertical-align: middle;
}
.uk-table tbody tr:last-child td { border-block-end: none; }
.uk-table tbody tr { transition: background var(--u-dur-fast); }
.uk-table tbody tr:hover { background: var(--u-primary-soft); }
.uk-table tbody tr:hover td { color: var(--u-text-strong); }
.uk-table .uk-table__num {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  text-align: end;
  white-space: nowrap;
}
.uk-table .uk-table__primary { font-weight: 600; color: var(--u-text-strong); }
.uk-table tbody tr.is-clickable { cursor: pointer; }
@media (max-width: 768px) {
  .uk-table { min-width: 760px; font-size: 12.5px; }
  .uk-table thead th, .uk-table tbody td { padding: 10px 12px; }
}

/* ────────────────────────────────────────────────────────────────────
   uk-filter — single filter bar primitive
   ──────────────────────────────────────────────────────────────────── */
.uk-filter {
  background: var(--u-bg-surface);
  border: 1px solid var(--u-border);
  border-radius: 14px;
  padding: 14px 18px;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.uk-filter--inline {
  background: var(--u-bg-surface-2);
  border: none;
  padding: 10px 14px;
  border-radius: 10px;
}
.uk-filter__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.uk-filter__field--grow { flex: 1; min-width: 200px; }
.uk-filter__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--u-text-muted);
  text-transform: uppercase;
}
.uk-filter__actions { margin-inline-start: auto; display: flex; gap: 8px; }
@media (max-width: 640px) {
  .uk-filter { padding: 12px; }
  .uk-filter__field--grow { flex: 1 1 100%; }
}

/* ────────────────────────────────────────────────────────────────────
   uk-btn — single button primitive, 3 sizes × 5 variants
   ──────────────────────────────────────────────────────────────────── */
.uk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 38px;
  padding: 0 16px;
  border-radius: 10px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  border: 1px solid transparent;
  background: var(--u-bg-surface);
  color: var(--u-text-default);
  transition: background var(--u-dur-fast),
              border-color var(--u-dur-fast),
              box-shadow var(--u-dur-fast),
              transform var(--u-dur-fast),
              color var(--u-dur-fast);
  white-space: nowrap;
  text-decoration: none;
  user-select: none;
}
.uk-btn:focus-visible { outline: none; box-shadow: var(--u-shadow-focus-gold); }
.uk-btn:disabled, .uk-btn.is-disabled { opacity: .55; cursor: not-allowed; }
.uk-btn i, .uk-btn svg { width: 15px; height: 15px; flex-shrink: 0; }

/* Sizes */
.uk-btn--sm { height: 32px; padding: 0 12px; font-size: 12px; border-radius: 8px; }
.uk-btn--lg { height: 44px; padding: 0 22px; font-size: 14px; border-radius: 12px; }

/* Variants */
.uk-btn--primary {
  background: linear-gradient(135deg, var(--u-brand-700), var(--u-brand-900));
  color: #fff !important;
  border-color: var(--u-brand-900);
  box-shadow: 0 4px 14px rgba(11,27,58,.18);
}
.uk-btn--primary:hover {
  box-shadow: 0 8px 22px rgba(11,27,58,.28);
  transform: translateY(-1px);
}

.uk-btn--gold {
  background: linear-gradient(135deg, var(--u-accent-400), var(--u-accent-500));
  color: var(--u-brand-900) !important;
  border-color: var(--u-accent-500);
  font-weight: 800;
  box-shadow: 0 4px 14px rgba(201,162,39,.30);
}
.uk-btn--gold:hover { box-shadow: 0 8px 22px rgba(201,162,39,.42); transform: translateY(-1px); }

.uk-btn--ghost {
  background: var(--u-bg-surface);
  border-color: var(--u-border);
  color: var(--u-text-default);
}
.uk-btn--ghost:hover {
  background: var(--u-bg-page);
  border-color: var(--u-accent-400);
  color: var(--u-brand-900);
}

.uk-btn--danger {
  background: var(--u-danger-50);
  border-color: var(--u-danger-100);
  color: var(--u-danger-700);
}
.uk-btn--danger:hover { background: var(--u-danger-600); color: #fff !important; border-color: var(--u-danger-600); }

.uk-btn--icon {
  width: 38px; height: 38px; padding: 0; border: 1px solid var(--u-border); background: var(--u-bg-surface);
  color: var(--u-text-soft);
}
.uk-btn--icon:hover { color: var(--u-accent-600); border-color: var(--u-accent-400); }
.uk-btn--icon.uk-btn--sm { width: 32px; height: 32px; }

/* ────────────────────────────────────────────────────────────────────
   uk-empty — unified empty state
   ──────────────────────────────────────────────────────────────────── */
.uk-empty {
  text-align: center;
  padding: 56px 24px;
  color: var(--u-text-muted);
}
.uk-empty__icon {
  width: 56px; height: 56px; margin: 0 auto 14px;
  display: grid; place-items: center;
  background: var(--u-bg-page);
  border: 1px solid var(--u-border);
  border-radius: 14px;
  color: var(--u-text-faint);
}
.uk-empty__icon i, .uk-empty__icon svg { width: 22px; height: 22px; }
.uk-empty__title { font-size: 15px; font-weight: 700; color: var(--u-text-default); margin-block-end: 4px; }
.uk-empty__msg { font-size: 13px; color: var(--u-text-muted); max-inline-size: 32em; margin: 0 auto 16px; }

/* ────────────────────────────────────────────────────────────────────
   uk-hero — unified page hero block
   ──────────────────────────────────────────────────────────────────── */
.uk-hero {
  background: var(--u-bg-surface);
  border: 1px solid var(--u-border);
  border-radius: 16px;
  padding: 24px 28px;
  display: flex;
  gap: 20px;
  align-items: flex-start;
  position: relative;
  overflow: hidden;
  margin-block-end: 22px;
}
.uk-hero--gradient {
  background: var(--u-grad-hero);
  border: none;
  color: #fff;
}
.uk-hero--gradient::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(70% 60% at 100% 0%, rgba(201,162,39,.14) 0%, transparent 60%),
    radial-gradient(60% 50% at 0% 100%, rgba(16,185,129,.10) 0%, transparent 60%);
  pointer-events: none;
}
.uk-hero__main { flex: 1; min-width: 0; position: relative; }
.uk-hero__eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--u-accent-500);
  margin-block-end: 6px;
  display: inline-flex; align-items: center; gap: 6px;
}
.uk-hero--gradient .uk-hero__eyebrow { color: var(--u-accent-300); }
.uk-hero__title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--u-text-strong);
  margin: 0 0 6px;
  line-height: 1.25;
}
.uk-hero--gradient .uk-hero__title { color: #fff; }
.uk-hero__sub {
  font-size: 13.5px;
  color: var(--u-text-soft);
  margin: 0;
  max-inline-size: 70ch;
}
.uk-hero--gradient .uk-hero__sub { color: rgba(255,255,255,.78); }
.uk-hero__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.uk-hero__aside {
  flex-shrink: 0;
  position: relative;
}
@media (max-width: 768px) {
  .uk-hero { padding: 18px 16px; flex-direction: column; gap: 14px; }
  .uk-hero__title { font-size: 18px; }
}

/* ────────────────────────────────────────────────────────────────────
   uk-kpi — unified KPI tile
   ──────────────────────────────────────────────────────────────────── */
.uk-kpi {
  background: var(--u-bg-surface);
  border: 1px solid var(--u-border);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  overflow: hidden;
  transition: border-color var(--u-dur-fast), box-shadow var(--u-dur-fast);
}
.uk-kpi:hover { border-color: var(--u-accent-400); box-shadow: var(--u-shadow-sm); }
.uk-kpi__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--u-text-muted);
}
.uk-kpi__value {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--u-text-strong);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.uk-kpi__delta {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--u-text-muted);
}
.uk-kpi__delta.is-up { color: var(--u-data-600); }
.uk-kpi__delta.is-down { color: var(--u-danger-600); }
.uk-kpi--with-icon { padding-inline-start: 60px; }
.uk-kpi__icon {
  position: absolute;
  inset-inline-start: 14px; inset-block-start: 16px;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: var(--u-primary-soft);
  color: var(--u-primary);
}
.uk-kpi__icon i, .uk-kpi__icon svg { width: 18px; height: 18px; }
.uk-kpi--gold .uk-kpi__icon { background: var(--u-accent-50); color: var(--u-accent-600); }
.uk-kpi--emerald .uk-kpi__icon { background: var(--u-data-50); color: var(--u-data-700); }
.uk-kpi--danger .uk-kpi__icon { background: var(--u-danger-50); color: var(--u-danger-700); }

/* ────────────────────────────────────────────────────────────────────
   uk-input / uk-select — unified form controls
   ──────────────────────────────────────────────────────────────────── */
.uk-input, .uk-select, .uk-textarea {
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--u-border);
  border-radius: 10px;
  background: var(--u-bg-surface);
  color: var(--u-text-default);
  font-family: inherit;
  font-size: 13px;
  transition: border-color var(--u-dur-fast), box-shadow var(--u-dur-fast);
  width: 100%;
}
.uk-textarea { height: auto; min-height: 92px; padding: 10px 12px; resize: vertical; }
.uk-input:focus, .uk-select:focus, .uk-textarea:focus {
  outline: none;
  border-color: var(--u-accent-400);
  box-shadow: var(--u-shadow-focus-gold);
}
.uk-select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'><path d='M3 4.5L6 7.5L9 4.5' stroke='%236B6B65' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-inline-end: 28px;
}
html[dir="rtl"] .uk-select { background-position: left 10px center; padding: 0 12px 0 28px; }

/* ────────────────────────────────────────────────────────────────────
   uk-pill — unified status pill
   ──────────────────────────────────────────────────────────────────── */
.uk-pill {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--u-bg-surface-3);
  color: var(--u-text-soft);
  line-height: 1.5;
  letter-spacing: 0.02em;
}
.uk-pill--success { background: var(--u-data-50); color: var(--u-data-700); }
.uk-pill--warn    { background: var(--u-warn-50); color: var(--u-warn-700); }
.uk-pill--danger  { background: var(--u-danger-50); color: var(--u-danger-700); }
.uk-pill--gold    { background: var(--u-accent-50); color: var(--u-accent-700); }
.uk-pill--info    { background: var(--u-info-50); color: var(--u-info-600); }
.uk-pill--dot { padding-inline-start: 6px; }
.uk-pill--dot::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; opacity: .9;
}

/* ────────────────────────────────────────────────────────────────────
   uk-grid — common grid layouts
   ──────────────────────────────────────────────────────────────────── */
.uk-grid { display: grid; gap: 16px; }
.uk-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.uk-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.uk-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.uk-grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.uk-grid--auto { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
@media (max-width: 1100px) {
  .uk-grid--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .uk-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .uk-grid--6, .uk-grid--4, .uk-grid--3, .uk-grid--2 { grid-template-columns: 1fr; }
}

/* ────────────────────────────────────────────────────────────────────
   uk-section-head — consistent section labels above content
   ──────────────────────────────────────────────────────────────────── */
.uk-section-head {
  display: flex; align-items: baseline; gap: 12px;
  margin-block: 6px 12px;
}
.uk-section-head__title {
  font-size: 14px; font-weight: 700; color: var(--u-text-strong);
  letter-spacing: -0.005em;
}
.uk-section-head__sub { font-size: 12px; color: var(--u-text-muted); }
.uk-section-head__actions { margin-inline-start: auto; }

/* ────────────────────────────────────────────────────────────────────
   6 · MOBILE — Brand mark stays SVG on narrow screens
   ──────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .side-brand { padding: 12px 16px !important; }
  .side-brand .brand-mark { width: 34px !important; height: 34px !important; }
  .app-topbar { padding-inline: 14px !important; height: 60px !important; }
}

/* ════════════════════════════════════════════════════════════════════
   SIDEBAR V2 — "Sovereign Navigator"
   New IA: Brand block + Cmd-K + 4 zones (Pinned/Discover/Intel/Tools)
        + Account footer. Linear+Stripe+Bloomberg patterns applied.
   ════════════════════════════════════════════════════════════════════ */

.side-nav-v2 {
  background: var(--u-surface-dark);
  color: var(--u-on-surface-dark);
  display: flex; flex-direction: column;
  width: 248px;
  position: relative;
  isolation: isolate;
  border-inline-end: 1px solid rgba(255,255,255,.04);
}
.side-nav-v2::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 60% at 100% 0%, rgba(201, 162, 39, .08) 0%, transparent 55%),
    radial-gradient(80% 50% at 0% 100%, rgba(30, 58, 111, .35) 0%, transparent 60%);
  pointer-events: none; z-index: -1;
}

/* Brand block — anchored, never fully collapses */
.snv-brand {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 14px 14px;
  border-block-end: 1px solid rgba(255,255,255,.06);
  text-decoration: none;
  color: var(--u-on-surface-dark);
}
.snv-brand-mark {
  flex: 0 0 36px;
  width: 36px; height: 36px;
  background: url('/static/img/brand/favicon.svg') center/contain no-repeat;
  border-radius: 9px;
  box-shadow: 0 4px 12px rgba(201,162,39,.18);
}
.snv-brand-text { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.snv-brand-text b {
  font-weight: 900;
  font-size: 15px;
  letter-spacing: -0.005em;
  color: #fff;
  white-space: nowrap;
}
.snv-brand-text em {
  font-style: normal;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(149, 161, 184, .8);
  margin-top: 1px;
}
.snv-brand-collapse {
  margin-inline-start: auto;
  width: 28px; height: 28px;
  border: none;
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.55);
  border-radius: 7px;
  cursor: pointer;
  display: grid; place-items: center;
  transition: all var(--u-dur-fast);
}
.snv-brand-collapse:hover {
  background: rgba(201,162,39,.18);
  color: var(--u-accent-300);
}
.snv-brand-collapse i, .snv-brand-collapse svg { width: 14px; height: 14px; }

/* Cmd+K trigger — premium signal */
.snv-cmdk {
  margin: 12px 12px 6px;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 10px;
  color: rgba(231, 234, 241, .6);
  font-size: 12.5px;
  cursor: pointer;
  transition: all var(--u-dur-fast);
  font-family: inherit;
}
.snv-cmdk:hover {
  background: rgba(255,255,255,.07);
  border-color: rgba(201,162,39,.30);
  color: #fff;
}
.snv-cmdk i, .snv-cmdk svg { width: 14px; height: 14px; flex-shrink: 0; }
.snv-cmdk kbd {
  margin-inline-start: auto;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 5px;
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.55);
  border: 1px solid rgba(255,255,255,.08);
}

/* Scrolling nav container */
.snv-scroll {
  flex: 1;
  overflow-y: auto;
  padding-block-end: 8px;
}
.snv-scroll::-webkit-scrollbar { width: 4px; }
.snv-scroll::-webkit-scrollbar-track { background: transparent; }
.snv-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.08); border-radius: 4px; }

/* Zones */
.snv-zone { padding: 6px 10px 2px; }
.snv-zone-label {
  display: flex; align-items: center; width: 100%;
  padding: 8px 12px 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
  background: none; border: none; cursor: default;
  font-family: inherit;
}
.snv-zone-label.is-toggle {
  cursor: pointer;
  transition: color var(--u-dur-fast);
}
.snv-zone-label.is-toggle:hover { color: var(--u-accent-300); }
.snv-zone-chevron { margin-inline-start: auto; width: 13px; height: 13px; transition: transform var(--u-dur-fast); }
html[dir="rtl"] .snv-zone-chevron { margin-inline-start: auto; margin-inline-end: 0; }
.snv-zone[data-expanded="false"] .snv-zone-chevron { transform: rotate(-90deg); }
html[dir="rtl"] .snv-zone[data-expanded="false"] .snv-zone-chevron { transform: rotate(90deg); }
.snv-zone[data-expanded="false"] .snv-zone-body { display: none; }

/* Nav links */
.snv-link {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 11px;
  margin-block-end: 1px;
  border-radius: 8px;
  color: rgba(231, 234, 241, .85);
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
  transition: background var(--u-dur-fast), color var(--u-dur-fast);
}
.snv-link i[data-lucide], .snv-link svg {
  width: 16px; height: 16px;
  flex-shrink: 0;
  color: rgba(231, 234, 241, .55);
  transition: color var(--u-dur-fast);
}
.snv-link:hover {
  background: rgba(255,255,255,.05);
  color: #fff;
}
.snv-link:hover i[data-lucide], .snv-link:hover svg { color: var(--u-accent-300); }
.snv-link.is-active {
  background: linear-gradient(90deg, rgba(201,162,39,.16) 0%, rgba(201,162,39,.02) 100%);
  color: #fff;
  font-weight: 700;
}
html[dir="rtl"] .snv-link.is-active {
  background: linear-gradient(-90deg, rgba(201,162,39,.16) 0%, rgba(201,162,39,.02) 100%);
}
.snv-link.is-active i[data-lucide], .snv-link.is-active svg {
  color: var(--u-accent-400);
}
.snv-link.is-active::before {
  content: "";
  position: absolute;
  inset-block: 6px;
  inset-inline-end: -10px;
  width: 2px;
  background: var(--u-accent-400);
  border-radius: 2px;
  box-shadow: 0 0 8px rgba(232,192,75,.55);
}
.snv-link__label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Badges */
.snv-badge {
  font-size: 10.5px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
  min-width: 18px;
  text-align: center;
  line-height: 1.5;
}
.snv-badge--unread { background: var(--u-danger-600); color: #fff; }
.snv-badge--signal { background: rgba(201,162,39,.20); color: var(--u-accent-200); }
.snv-badge--overdue { background: rgba(220,38,38,.18); color: #fca5a5; border: 1px solid rgba(220,38,38,.35); }
.snv-badge--new {
  background: var(--u-data-600);
  color: #fff;
  font-size: 9px;
  padding: 1px 6px;
  letter-spacing: 0.05em;
}

/* Team CTA badge (for users without a team yet) */
.snv-link--cta {
  background: linear-gradient(90deg, rgba(201,162,39,.18), rgba(201,162,39,.04));
  border: 1px dashed rgba(201,162,39,.45);
}
.snv-link--cta:hover { background: linear-gradient(90deg, rgba(201,162,39,.28), rgba(201,162,39,.08)); }
.snv-link--cta i[data-lucide], .snv-link--cta svg { color: var(--u-accent-300); }
.snv-link--cta .snv-link__label { color: var(--u-accent-200); font-weight: 700; }

/* Account footer — merged user + plan */
.snv-account {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  border-block-start: 1px solid rgba(255,255,255,.06);
  background: linear-gradient(180deg, transparent 0%, rgba(11,27,58,.6) 100%);
  cursor: pointer;
  text-decoration: none;
  color: var(--u-on-surface-dark);
  transition: background var(--u-dur-fast);
}
.snv-account:hover { background: rgba(255,255,255,.04); }
.snv-account__avatar {
  width: 32px; height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--u-accent-400), var(--u-accent-500));
  color: var(--u-brand-900);
  display: grid; place-items: center;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0;
}
.snv-account__meta { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.snv-account__name {
  font-size: 12.5px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.snv-account__plan {
  font-size: 10.5px;
  font-weight: 600;
  color: rgba(149,161,184,.8);
  display: inline-flex; align-items: center; gap: 4px;
}
.snv-account__plan.is-paid { color: var(--u-accent-300); }
.snv-account__plan.is-corp { color: var(--u-data-300); }
.snv-account__plan i { width: 10px; height: 10px; }
.snv-account__caret {
  color: rgba(255,255,255,.40);
  width: 14px; height: 14px;
  flex-shrink: 0;
}

/* User menu (dropdown when account is clicked) */
.snv-user-menu {
  position: absolute;
  inset-block-end: calc(100% + 6px);
  inset-inline-start: 8px;
  inset-inline-end: 8px;
  background: #fff;
  border: 1px solid var(--u-border);
  border-radius: 10px;
  box-shadow: var(--u-shadow-xl);
  padding: 6px;
  display: none;
  z-index: 100;
}
.snv-account.is-open .snv-user-menu { display: block; }
.snv-user-menu a, .snv-user-menu button {
  display: flex; align-items: center; gap: 9px;
  width: 100%;
  padding: 7px 10px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--u-text-default);
  text-decoration: none;
  border: none; background: none;
  text-align: start;
  cursor: pointer;
  transition: all var(--u-dur-fast);
}
.snv-user-menu a:hover, .snv-user-menu button:hover { background: var(--u-primary-soft); color: var(--u-primary); }
.snv-user-menu a i, .snv-user-menu button i { width: 14px; height: 14px; color: var(--u-text-muted); }
.snv-user-menu a:hover i, .snv-user-menu button:hover i { color: var(--u-primary); }
.snv-user-menu hr { border: none; height: 1px; background: var(--u-border-soft); margin: 4px 0; }

/* Command palette modal — minimal v1 */
.cmdk-overlay {
  position: fixed; inset: 0;
  background: rgba(11, 27, 58, .55);
  backdrop-filter: blur(6px);
  z-index: 9000;
  display: none;
  align-items: flex-start; justify-content: center;
  padding-block-start: 12vh;
}
.cmdk-overlay.is-open { display: flex; }
.cmdk-modal {
  width: min(640px, 92vw);
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 32px 64px rgba(11,27,58,.36);
  overflow: hidden;
}
.cmdk-modal__head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  border-block-end: 1px solid var(--u-border-soft);
}
.cmdk-modal__input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 16px;
  font-family: inherit;
  background: transparent;
  color: var(--u-text-strong);
}
.cmdk-modal__input::placeholder { color: var(--u-text-faint); }
.cmdk-modal__esc {
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  background: var(--u-bg-page);
  border: 1px solid var(--u-border);
  border-radius: 6px;
  color: var(--u-text-muted);
  font-family: 'JetBrains Mono', monospace;
}
.cmdk-modal__list {
  max-height: 48vh;
  overflow-y: auto;
  padding: 8px;
}
.cmdk-section {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--u-text-muted);
  padding: 8px 10px 6px;
}
.cmdk-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13.5px;
  color: var(--u-text-default);
  text-decoration: none;
  cursor: pointer;
}
.cmdk-item:hover, .cmdk-item.is-active { background: var(--u-primary-soft); color: var(--u-text-strong); }
.cmdk-item i, .cmdk-item svg { width: 16px; height: 16px; color: var(--u-text-muted); flex-shrink: 0; }
.cmdk-item:hover i, .cmdk-item.is-active i { color: var(--u-primary); }
.cmdk-item__kbd {
  margin-inline-start: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--u-text-faint);
}

/* Mobile: account caret hides, sidebar slides over */
@media (max-width: 768px) {
  .side-nav-v2 { width: 86vw; max-width: 320px; }
  .snv-cmdk { display: none; }   /* mobile uses topbar search instead */
}

/* ════════════════════════════════════════════════════════════════════
   ╔════════════════════════════════════════════════════════════════╗
   ║   UNIFIED PLATFORM SYSTEM (UI Phase 1)                          ║
   ║   One table, one filter — applied to ALL legacy classes         ║
   ║   via aliasing. Pages don't need to change markup.              ║
   ╚════════════════════════════════════════════════════════════════╝
   ════════════════════════════════════════════════════════════════════ */

/* ─── Global page tone (white-royal + navy) ─────────────────────── */
body {
  background: #FAFAF7 !important;   /* warm off-white */
}

/* ─── Unified TABLE-CARD wrapper ─────────────────────────────────────
   Aliases EVERY legacy table-card variant to one premium look.
   Applies to: .table-wrap, .te-table-card, .sup-table-card, .reg-table-card,
   .fpx-table-wrap, .sr-tbl-wrap, .wl-private-table-wrap, .ad-table-wrap.
   ──────────────────────────────────────────────────────────────────── */
.uk-table-card,
.table-wrap,
.te-table-card,
.sup-table-card,
.reg-table-card,
.fpx-table-wrap,
.sr-tbl-wrap,
.wl-private-table-wrap,
.ad-table-wrap,
.ip-rec-wrap {
  background: #FFFFFF !important;
  border: 1px solid #E8E6DD !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 1px 0 rgba(11,27,58,.03) !important;
}

/* Inner scroll wrap for horizontal-overflow safety */
.uk-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ─── Unified TABLE ──────────────────────────────────────────────────
   Aliases: .data-table, .te-table, .sup-table, .reg-table, .fpx-table,
            .sr-tbl, .ip-rec-table, .wl-private-table, .dt-table, .uk-table
   Every legacy class adopts the unified look automatically.
   ──────────────────────────────────────────────────────────────────── */
.uk-table,
table.data-table,
table.te-table,
table.sup-table,
table.reg-table,
table.fpx-table,
table.sr-tbl,
table.ip-rec-table,
table.wl-private-table,
table.dt-table,
table.ad-table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  font-family: var(--u-font-arabic) !important;
  font-size: 13.5px !important;
  color: var(--u-text-default) !important;
}

/* Header — uniform across every table */
.uk-table thead th,
table.data-table thead th,
table.te-table thead th,
table.sup-table thead th,
table.reg-table thead th,
table.fpx-table thead th,
table.sr-tbl thead th,
table.ip-rec-table thead th,
table.wl-private-table thead th,
table.dt-table thead th,
table.ad-table thead th {
  background: #F5F4EE !important;            /* paper */
  font-family: var(--u-font-arabic) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #6F6E6B !important;
  padding: 12px 16px !important;
  text-align: start !important;
  border-block-end: 1px solid #E8E6DD !important;
  white-space: nowrap !important;
}

/* Body cells */
.uk-table tbody td,
table.data-table tbody td,
table.te-table tbody td,
table.sup-table tbody td,
table.reg-table tbody td,
table.fpx-table tbody td,
table.sr-tbl tbody td,
table.ip-rec-table tbody td,
table.wl-private-table tbody td,
table.dt-table tbody td,
table.ad-table tbody td {
  padding: 14px 16px !important;
  border-block-end: 1px solid #E8E6DD !important;
  vertical-align: middle !important;
  color: var(--u-text-default) !important;
  background: #FFFFFF !important;
}

/* Last row no bottom border */
.uk-table tbody tr:last-child td,
table.data-table tbody tr:last-child td,
table.te-table tbody tr:last-child td,
table.sup-table tbody tr:last-child td,
table.reg-table tbody tr:last-child td,
table.fpx-table tbody tr:last-child td,
table.sr-tbl tbody tr:last-child td,
table.ip-rec-table tbody tr:last-child td,
table.wl-private-table tbody tr:last-child td,
table.dt-table tbody tr:last-child td,
table.ad-table tbody tr:last-child td { border-block-end: none !important; }

/* Hover */
.uk-table tbody tr:hover td,
table.data-table tbody tr:hover td,
table.te-table tbody tr:hover td,
table.sup-table tbody tr:hover td,
table.reg-table tbody tr:hover td,
table.fpx-table tbody tr:hover td,
table.sr-tbl tbody tr:hover td,
table.ip-rec-table tbody tr:hover td,
table.wl-private-table tbody tr:hover td,
table.dt-table tbody tr:hover td,
table.ad-table tbody tr:hover td {
  background: #FAFAF7 !important;
  color: var(--u-text-strong) !important;
}

/* Numbers in tables — tabular-nums everywhere */
.uk-table td.num, .uk-table td.uk-table__num,
table.data-table td.num, table.te-table td.num, table.sup-table td.num,
table.fpx-table td.num, table.wl-private-table td.num, table.ad-table td.num,
table .num, table .number, table .currency {
  font-family: var(--u-font-mono) !important;
  font-variant-numeric: tabular-nums !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
}

/* Mobile — horizontal scroll baseline */
@media (max-width: 768px) {
  .uk-table, table.data-table, table.te-table, table.sup-table,
  table.reg-table, table.fpx-table, table.sr-tbl, table.ip-rec-table,
  table.wl-private-table, table.dt-table {
    min-width: 760px;
    font-size: 12.5px !important;
  }
  .uk-table thead th, .uk-table tbody td,
  table.data-table thead th, table.data-table tbody td,
  table.te-table thead th, table.te-table tbody td,
  table.sup-table thead th, table.sup-table tbody td,
  table.reg-table thead th, table.reg-table tbody td,
  table.fpx-table thead th, table.fpx-table tbody td,
  table.sr-tbl thead th, table.sr-tbl tbody td,
  table.wl-private-table thead th, table.wl-private-table tbody td {
    padding: 10px 12px !important;
  }
}

/* ─── Table TOOLBAR (search + actions row above the table) ───────── */
.uk-table-toolbar {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  border-block-end: 1px solid #E8E6DD;
  background: #FFFFFF;
  flex-wrap: wrap;
}
.uk-table-toolbar__search {
  flex: 1; min-width: 220px;
  position: relative;
}
.uk-table-toolbar__search input {
  width: 100%;
  height: 38px;
  padding: 0 14px 0 40px;
  border: 1px solid #D6D2C4;
  border-radius: 9px;
  background: #FAFAF7;
  font-family: var(--u-font-arabic);
  font-size: 13.5px;
  color: var(--u-text-strong);
  outline: none;
  transition: all var(--u-dur-fast);
}
html[dir="rtl"] .uk-table-toolbar__search input { padding: 0 40px 0 14px; }
.uk-table-toolbar__search input:focus {
  background: #FFFFFF;
  border-color: var(--u-brand-600);
  box-shadow: 0 0 0 3px rgba(11,27,58,.10);
}
.uk-table-toolbar__search-icon {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 13px;
  transform: translateY(-50%);
  width: 16px; height: 16px;
  color: var(--u-text-muted);
  pointer-events: none;
}
html[dir="rtl"] .uk-table-toolbar__search-icon { inset-inline-start: auto; inset-inline-end: 13px; }
.uk-table-toolbar__actions { display: flex; gap: 8px; }

/* ─── Pagination footer ─────────────────────────────────────────── */
.uk-table-foot {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 20px;
  border-block-start: 1px solid #E8E6DD;
  background: #FAFAF7;
}
.uk-table-foot__info {
  font-family: var(--u-font-mono);
  font-size: 11.5px;
  color: var(--u-text-muted);
}
.uk-pager { display: flex; gap: 4px; margin-inline-start: auto; }
.uk-pager-btn {
  min-width: 30px; height: 30px;
  padding: 0 10px;
  display: inline-grid; place-items: center;
  background: #FFFFFF;
  border: 1px solid #E8E6DD;
  border-radius: 7px;
  font-family: var(--u-font-mono);
  font-size: 12px;
  color: var(--u-text-soft);
  cursor: pointer;
  transition: all var(--u-dur-fast);
  text-decoration: none;
}
.uk-pager-btn:hover { background: #F5F4EE; color: var(--u-text-strong); }
.uk-pager-btn.is-active {
  background: var(--u-brand-900);
  color: #FFFFFF;
  border-color: var(--u-brand-900);
}
.uk-pager-btn.is-disabled { opacity: .4; cursor: not-allowed; pointer-events: none; }

/* ═══════════════════════════════════════════════════════════════════
   UNIFIED FILTERS — smart, one-level, space-utilizing
   ═══════════════════════════════════════════════════════════════════ */

/* Filter bar — aliased across legacy filter classes */
.uk-filter,
.filter-card,
.sr-filters,
.ml-filter,
.te-filter,
.sup-filters,
.ent-filters,
.fpx-filters,
.wl-records-filters,
.opp-filters {
  background: #FFFFFF !important;
  border: 1px solid #E8E6DD !important;
  border-radius: 12px !important;
  padding: 14px 18px !important;
  display: flex !important;
  gap: 12px !important;
  align-items: flex-end !important;
  flex-wrap: wrap !important;
  box-shadow: 0 1px 0 rgba(11,27,58,.03);
}

/* Filter field — label above input */
.uk-filter__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 140px;
}
.uk-filter__field--grow { flex: 1; min-width: 220px; }
.uk-filter__label {
  font-family: var(--u-font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--u-text-muted);
}

/* Unified inputs / selects inside filters */
.uk-filter input,
.uk-filter select,
.uk-input,
.uk-select,
.filter-card input,
.filter-card select,
.sr-filters input,
.sr-filters select,
.ml-filter input,
.ml-filter select,
.te-filter input,
.te-filter select,
.sup-filters input,
.sup-filters select,
.ent-filters input,
.ent-filters select,
.fpx-filters input,
.fpx-filters select {
  height: 36px !important;
  padding: 0 12px !important;
  border: 1px solid #D6D2C4 !important;
  border-radius: 8px !important;
  background: #FFFFFF !important;
  font-family: var(--u-font-arabic) !important;
  font-size: 13px !important;
  color: var(--u-text-strong) !important;
  outline: none !important;
  transition: all var(--u-dur-fast) !important;
}
.uk-filter input:focus,
.uk-filter select:focus,
.uk-input:focus, .uk-select:focus,
.filter-card input:focus, .filter-card select:focus,
.sr-filters input:focus, .sr-filters select:focus,
.ml-filter input:focus, .ml-filter select:focus,
.te-filter input:focus, .te-filter select:focus,
.sup-filters input:focus, .sup-filters select:focus,
.ent-filters input:focus, .ent-filters select:focus,
.fpx-filters input:focus, .fpx-filters select:focus {
  border-color: var(--u-brand-600) !important;
  box-shadow: 0 0 0 3px rgba(11,27,58,.10) !important;
}

/* Native select arrow */
.uk-filter select, .uk-select,
.filter-card select, .sr-filters select, .ml-filter select,
.te-filter select, .sup-filters select, .ent-filters select, .fpx-filters select {
  appearance: none !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M3 4.5L6 7.5L9 4.5' stroke='%236F6E6B' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: left 10px center !important;
  padding-inline-end: 12px !important;
  padding-inline-start: 30px !important;
}
html[dir="rtl"] .uk-filter select,
html[dir="rtl"] .uk-select,
html[dir="rtl"] .filter-card select,
html[dir="rtl"] .sr-filters select,
html[dir="rtl"] .ml-filter select,
html[dir="rtl"] .te-filter select,
html[dir="rtl"] .sup-filters select,
html[dir="rtl"] .ent-filters select,
html[dir="rtl"] .fpx-filters select {
  background-position: left 10px center !important;
  padding: 0 12px 0 30px !important;
}

.uk-filter__actions {
  display: flex; gap: 8px;
  margin-inline-start: auto;
}

/* ─── Active filter chips strip ─────────────────────────────────── */
.uk-filter__active {
  display: flex; gap: 8px; flex-wrap: wrap;
  width: 100%;
  margin-block-start: 12px;
  padding-block-start: 12px;
  border-block-start: 1px solid #E8E6DD;
  align-items: center;
}
.uk-filter__active-label {
  font-size: 11.5px;
  color: var(--u-text-muted);
  font-weight: 600;
  margin-inline-end: 2px;
}
.uk-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 4px 4px 11px;
  background: #F5F4EE;
  border: 1px solid #E8E6DD;
  border-radius: 999px;
  font-size: 12.5px;
  color: var(--u-text-default);
  font-weight: 500;
}
html[dir="rtl"] .uk-chip { padding: 4px 11px 4px 4px; }
.uk-chip__x {
  width: 18px; height: 18px;
  display: grid; place-items: center;
  border-radius: 50%;
  cursor: pointer;
  color: var(--u-text-muted);
  background: transparent;
  border: none;
  transition: all var(--u-dur-fast);
}
.uk-chip__x:hover { background: #E8E6DD; color: var(--u-danger-700); }
.uk-chip__x svg, .uk-chip__x i { width: 11px; height: 11px; }
.uk-chip__reset {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--u-danger-600);
  background: transparent;
  border: none;
  padding: 6px 8px;
  cursor: pointer;
  margin-inline-start: auto;
}
.uk-chip__reset:hover { text-decoration: underline; }

/* ─── Saved-view tabs (quick filters) ───────────────────────────── */
.uk-views {
  display: flex; gap: 4px; flex-wrap: wrap;
  padding: 5px;
  background: #F5F4EE;
  border: 1px solid #E8E6DD;
  border-radius: 11px;
  margin-block-end: 14px;
  width: fit-content;
  max-width: 100%;
}
.uk-view-tab {
  padding: 7px 14px;
  font-family: var(--u-font-arabic);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--u-text-soft);
  text-decoration: none;
  cursor: pointer;
  border-radius: 7px;
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent;
  border: none;
  transition: all var(--u-dur-fast);
}
.uk-view-tab:hover { color: var(--u-text-strong); }
.uk-view-tab.is-active {
  background: #FFFFFF;
  color: var(--u-text-strong);
  box-shadow: 0 1px 0 rgba(11,27,58,.04);
}
.uk-view-tab__count {
  font-family: var(--u-font-mono);
  font-size: 10.5px;
  padding: 1px 6px;
  background: #F5F4EE;
  border-radius: 999px;
  color: var(--u-text-muted);
  font-weight: 500;
}
.uk-view-tab.is-active .uk-view-tab__count {
  background: rgba(11,27,58,.08);
  color: var(--u-brand-700);
}
.uk-view-tab--new {
  color: var(--u-text-muted);
  border: 1px dashed #D6D2C4;
}
.uk-view-tab--new:hover { color: var(--u-brand-600); border-color: var(--u-brand-600); }

/* ─── Date range with presets ───────────────────────────────────── */
.uk-daterange {
  display: inline-flex; gap: 4px;
  padding: 4px;
  background: #F5F4EE;
  border: 1px solid #E8E6DD;
  border-radius: 9px;
}
.uk-daterange-btn {
  padding: 6px 12px;
  font-family: var(--u-font-arabic);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--u-text-soft);
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all var(--u-dur-fast);
}
.uk-daterange-btn:hover { color: var(--u-text-strong); }
.uk-daterange-btn.is-active {
  background: #FFFFFF;
  color: var(--u-text-strong);
  box-shadow: 0 1px 0 rgba(11,27,58,.04);
}

/* ─── Common pill styles for tables/status ─────────────────────── */
.uk-pill, .pill-status, .status-pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--u-font-arabic);
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  line-height: 1.5;
}
.uk-pill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .9; }
.uk-pill--success { background: #E7F3EB; color: var(--u-success-700); }
.uk-pill--warn    { background: #FAF1DC; color: var(--u-warn-700); }
.uk-pill--danger  { background: #F8E5E5; color: var(--u-danger-700); }
.uk-pill--info    { background: #E2EAF3; color: var(--u-info-600); }
.uk-pill--neutral { background: #F5F4EE; color: var(--u-text-soft); }

/* ─── Buttons inside toolbars (compact) ─────────────────────────── */
.uk-filter__actions .uk-btn,
.uk-table-toolbar__actions .uk-btn {
  height: 36px;
  padding: 0 14px;
  font-size: 12.5px;
}

/* ─── Smart search with token chips inside input ───────────────── */
.uk-smart-search {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 12px;
  background: #FAFAF7;
  border: 1.5px solid #D6D2C4;
  border-radius: 10px;
  transition: all var(--u-dur-fast);
  flex-wrap: wrap;
}
.uk-smart-search:focus-within {
  background: #FFFFFF;
  border-color: var(--u-brand-600);
  box-shadow: 0 0 0 3px rgba(11,27,58,.10);
}
.uk-smart-search > .uk-smart-search__icon {
  width: 16px; height: 16px; color: var(--u-text-muted); flex-shrink: 0;
}
.uk-smart-token {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px;
  background: rgba(11,27,58,.06);
  color: var(--u-brand-700);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
}
.uk-smart-token .key { opacity: .65; font-weight: 500; }
.uk-smart-token .val { font-family: var(--u-font-mono); }
.uk-smart-token__x {
  width: 14px; height: 14px;
  display: grid; place-items: center;
  border-radius: 3px;
  cursor: pointer;
  background: transparent;
  border: none;
  color: currentColor;
}
.uk-smart-token__x:hover { background: rgba(11,27,58,.10); }
.uk-smart-search input {
  flex: 1;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  font-family: var(--u-font-arabic) !important;
  font-size: 13.5px !important;
  min-width: 100px !important;
  padding: 0 !important;
  height: auto !important;
  box-shadow: none !important;
}

/* ─── Mobile responsive — filters stack on small screens ────────── */
@media (max-width: 768px) {
  .uk-filter,
  .filter-card, .sr-filters, .ml-filter, .te-filter,
  .sup-filters, .ent-filters, .fpx-filters {
    padding: 12px !important;
    gap: 8px !important;
  }
  .uk-filter__field, .uk-filter__field--grow {
    min-width: 100% !important;
    flex: 1 1 100% !important;
  }
  .uk-filter__actions {
    width: 100%;
    margin-inline-start: 0;
  }
  .uk-filter__actions .uk-btn { flex: 1; }
  .uk-views { width: 100%; overflow-x: auto; flex-wrap: nowrap; }
  .uk-view-tab { white-space: nowrap; }
}

/* ────────────────────────────────────────────────────────────────────
   Final tone tweaks: shadows, surfaces — white-royal feel
   ──────────────────────────────────────────────────────────────────── */
.content-frame {
  background:
    radial-gradient(80% 50% at 100% 0%, rgba(11,27,58,.03) 0%, transparent 60%),
    radial-gradient(60% 40% at 0% 100%, rgba(11,27,58,.025) 0%, transparent 60%),
    #FAFAF7 !important;
}

/* All cards a bit lighter shadow */
.card, .section-card, .uk-card {
  box-shadow: 0 1px 0 rgba(11,27,58,.04) !important;
}

/* ────────────────────────────────────────────────────────────────────
   Cross-page card alias — every page's card prefix shares one look
   ──────────────────────────────────────────────────────────────────── */
.uk-card,
.ucc-focus-card, .ucc-kpi,
.ip-card, .ip-kpi, .md-card, .md-kpi,
.ml-opp-card, .ns-card, .ntf-stat,
.wl-create-card, .wl-rules-card, .wl-searches-card, .wl-tips-card,
.fav-card, .pd-card, .cs-plan-card, .cs-next-card, .co-card,
.cc-card, .ca-card, .px-card, .acpt-card, .ent-card,
.tf-card, .tfd-card, .api-create-card, .ps-card,
.team-members-card, .team-activity-card,
.td2-card, .td2-hero {
  background: #FFFFFF !important;
  border: 1px solid #E8E6DD !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 0 rgba(11,27,58,.03) !important;
  transition: box-shadow var(--u-dur-base);
}
.ucc-focus-card:hover, .ip-card:hover, .md-card:hover,
.ml-opp-card:hover, .fav-card:hover, .ent-card:hover {
  box-shadow: 0 4px 12px rgba(11,27,58,.06) !important;
}

/* KPI shared treatment */
.uk-kpi, .ucc-kpi, .ip-kpi, .ad-kpi, .md-kpi, .ml-kpi, .ntf-stat, .wl-stat, .team-stat, .panel-kpi {
  background: #FFFFFF !important;
  border: 1px solid #E8E6DD !important;
  border-radius: 12px !important;
  padding: 16px 18px !important;
  box-shadow: 0 1px 0 rgba(11,27,58,.03) !important;
}

/* Empty state — single look */
.uk-empty, .empty, .sr-empty, .fav-empty, .ntf-empty, .wl-empty,
.fpx-empty, .reg-empty, .sup-empty, .ucc-empty, .ip-empty,
.api-empty, .mt-empty, .td-empty, .blog-empty, .adm-empty {
  text-align: center;
  padding: 56px 24px !important;
  color: var(--u-text-muted);
  background: transparent;
}

/* Hero — same surface across page-heroes */
.uk-hero, .ip-hero, .ns-hero, .pd-hero, .ad-hero, .ucc-hero,
.fpx-hero, .sr-hero, .api-hero, .legal-hero, .px-hero,
.mod-idx-hero, .cs-hero, .cc-hero {
  background: #FFFFFF !important;
  border: 1px solid #E8E6DD !important;
  border-radius: 14px !important;
  padding: 24px 28px !important;
  box-shadow: 0 1px 0 rgba(11,27,58,.03);
}

/* ════════════════════════════════════════════════════════════════════
   FIXED SHELL — Sidebar + Topbar locked; ONLY .content-frame scrolls.

   Model: the shell is a non-scrolling box exactly one viewport tall
   (height:100dvh + overflow:hidden). The sidebar and topbar therefore
   physically CANNOT move — there is no page scroll for them to follow.
   The single scroll region is .content-frame. This is immune to the
   position:sticky / position:fixed pitfalls that `body{overflow-x:hidden}`,
   ancestor transforms, or backdrop-filters would otherwise introduce.
   ════════════════════════════════════════════════════════════════════ */

/* ─── Shell containment (all widths) ────────────────────────────── */
.app-shell {
  height: 100vh !important;            /* fallback for browsers without dvh */
  height: 100dvh !important;           /* follows mobile toolbar show/hide */
  overflow: hidden !important;
  /* One full-height row that NEVER grows past the viewport. minmax(0,1fr)
     drops the content min-track so children resolve height:100% cleanly and
     their own overflow (not the shell's) does the scrolling. */
  grid-template-rows: minmax(0, 1fr) !important;
}
.app-shell .app-main {
  margin-inline: 0 !important;         /* the grid owns the columns — no margin push */
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}
.app-shell .app-topbar {
  position: relative !important;       /* NOT sticky: a flex band that never scrolls */
  inset: auto !important;
  flex: 0 0 auto !important;
  z-index: 30;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-block-end: 1px solid #E8E6DD;
}
.app-shell .content-frame {
  flex: 1 1 auto !important;           /* the ONE scroll region of the app */
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;   /* momentum scroll on iOS */
  /* Scroll container spans the FULL width so the scrollbar hugs the screen
     edge (just like the old body scroll). The content stays capped + centred
     via symmetric padding instead of max-width, so nothing shifts visually. */
  max-width: none !important;
  margin-inline: 0 !important;
  padding-block: 26px !important;
  padding-inline: max(24px, calc((100% - 1440px) / 2)) !important;
}
@media (max-width: 768px) {
  .app-shell .content-frame { padding-block: 16px !important; padding-inline: 14px !important; }
}
.app-shell .content-frame::-webkit-scrollbar { width: 11px; }
.app-shell .content-frame::-webkit-scrollbar-track { background: transparent; }
.app-shell .content-frame::-webkit-scrollbar-thumb {
  background: rgba(11, 27, 58, .18);
  border-radius: 99px;
  border: 3px solid transparent;
  background-clip: content-box;
}
.app-shell .content-frame::-webkit-scrollbar-thumb:hover {
  background: rgba(11, 27, 58, .32);
  background-clip: content-box;
}

/* ─── Desktop (≥901px): sidebar is an in-flow, full-height grid column
       with its OWN internal scroll. ───────────────────────────────── */
@media (min-width: 901px) {
  /* Hold the two-column grid from 901px up. Legacy app.css collapses it to a
     single column at ≤1280px, which would break the in-flow sidebar. */
  .app-shell { grid-template-columns: var(--sidebar, 240px) minmax(0, 1fr) !important; }
  .app-shell.sidebar-collapsed { grid-template-columns: 64px minmax(0, 1fr) !important; }

  .app-shell .side-nav {
    position: relative !important;     /* in flow — the non-scrolling shell locks it */
    inset: auto !important;
    transform: none !important;
    height: 100% !important;           /* fill the 100dvh grid row */
    min-height: 0 !important;
    width: auto !important;            /* the grid track defines the width */
    overflow-y: auto !important;       /* sidebar scrolls internally if it overflows */
    overflow-x: hidden !important;
    box-shadow: none !important;
    z-index: 40;
  }
}

/* ─── Admin shell — same pattern ────────────────────────────────── */
@media (min-width: 901px) {
  .adm-shell .adm-sidebar {
    position: fixed !important;
    inset-block-start: 0;
    inset-inline-start: 0;
    height: 100vh;
    width: 264px;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 40;
  }
  html[dir="rtl"] .adm-shell .adm-sidebar {
    inset-inline-start: auto;
    inset-inline-end: 0;
  }
  .adm-shell .adm-main {
    margin-inline-start: 264px;
    min-height: 100vh;
  }
  html[dir="rtl"] .adm-shell .adm-main {
    margin-inline-start: 0;
    margin-inline-end: 264px;
  }
  /* Admin topbar sticky */
  .adm-shell .adm-topbar {
    position: sticky !important;
    inset-block-start: 0;
    z-index: 30;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: saturate(180%) blur(16px);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
  }
}

/* ─── Mobile (≤900px): sidebar becomes a slide-over (existing behavior) */
@media (max-width: 900px) {
  /* Reset any fixed positioning, fall back to translate-based slide */
  .app-shell .side-nav,
  .adm-shell .adm-sidebar {
    position: fixed !important;
    inset-block: 0;
    inset-inline-start: 0;
    height: 100vh;
    z-index: 60;
    box-shadow: var(--u-shadow-xl);
  }
  html[dir="rtl"] .app-shell .side-nav,
  html[dir="rtl"] .adm-shell .adm-sidebar {
    inset-inline-start: auto;
    inset-inline-end: 0;
  }
  /* No margin push on main when sidebar is overlay */
  .app-shell .app-main,
  .adm-shell .adm-main {
    margin-inline: 0 !important;
  }
}

} /* /@layer overrides */