/* ═══════════════════════════════════════════════════════════════════
   FORTAX FCA — App Overlay Skin v2 (fca-app.css)
   Loads AFTER base.css + ThemeHelper block. Reskins EVERY app page to
   the Find CA reference: cream canvas, floating white 22px cards,
   dark ink pill topbar with readable translucent search, floating
   white sidenav, pill buttons, lime + lavender accents, Ubuntu.
   Light mode = the reference. Dark mode keeps base's premium
   near-black with lime/lavender accent locks.
   ═══════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────
   1. PALETTE HARD-LOCK — wins over ThemeHelper's DB-emitted vars.
   Old installs may carry crimson/saffron in the settings table; these
   !important locks make Fortax deterministic without any SQL.
   ───────────────────────────────────────────────────────────────── */
html:root {
  --client-1: #17161A !important;
  --client-2: #2A2930 !important;
  --client-3: rgba(201, 242, 78, 0.28) !important;
  --client-deep: #101014 !important;
  --advocate-1: #8B66E8 !important;
  --advocate-2: #7450D6 !important;
  --advocate-3: rgba(203, 185, 246, 0.30) !important;
  --advocate-deep: #14101E !important;
  --admin-1: #17161A !important;
  --admin-2: #2A2930 !important;
  --admin-3: rgba(201, 242, 78, 0.22) !important;
  --admin-deep: #101014 !important;
}
html[data-theme="client"] {
  --accent: #17161A !important; --accent-2: #2A2930 !important;
  --accent-soft: rgba(201, 242, 78, 0.28) !important; --accent-fg: #FFFFFF !important;
  --accent-glow: rgba(201, 242, 78, 0.35) !important;
}
html[data-theme="advocate"] {
  --accent: #8B66E8 !important; --accent-2: #7450D6 !important;
  --accent-soft: rgba(203, 185, 246, 0.30) !important; --accent-fg: #FFFFFF !important;
  --accent-glow: rgba(139, 102, 232, 0.30) !important;
}
html[data-theme="admin"] {
  --accent: #17161A !important; --accent-2: #2A2930 !important;
  --accent-soft: rgba(201, 242, 78, 0.22) !important; --accent-fg: #FFFFFF !important;
  --accent-glow: rgba(23, 22, 26, 0.30) !important;
}
html[data-mode="dark"][data-theme="client"] {
  --accent: #C9F24E !important; --accent-2: #B4E436 !important;
  --accent-soft: rgba(201, 242, 78, 0.12) !important; --accent-fg: #17161A !important;
  --accent-glow: rgba(201, 242, 78, 0.25) !important;
}
html[data-mode="dark"][data-theme="advocate"] {
  --accent: #CBB9F6 !important; --accent-2: #B49BEF !important;
  --accent-soft: rgba(203, 185, 246, 0.12) !important; --accent-fg: #17161A !important;
  --accent-glow: rgba(203, 185, 246, 0.22) !important;
}
html[data-mode="dark"][data-theme="admin"] {
  --accent: #F5F4F0 !important; --accent-2: #D9D5CD !important;
  --accent-soft: rgba(245, 244, 240, 0.10) !important; --accent-fg: #17161A !important;
  --accent-glow: rgba(245, 244, 240, 0.18) !important;
}

/* ─────────────────────────────────────────────────────────────────
   2. LIGHT CANVAS + TOKENS
   ───────────────────────────────────────────────────────────────── */
html[data-mode="light"] {
  --bg: #F2EFE8;
  --bg-soft: #ECE8DD;
  --surface: #FFFFFF;
  --surface-2: #F8F6F0;
  --surface-3: #EFEBE1;
  --surface-glass: rgba(255, 255, 255, 0.88);
  --border: rgba(23, 22, 26, 0.09);
  --border-strong: rgba(23, 22, 26, 0.16);
  --input: #F8F6F0;
}
html[data-mode="light"] body { background: #F2EFE8; }
html[data-mode="light"] .app-shell { background: #F2EFE8; }

/* ─────────────────────────────────────────────────────────────────
   3. TOPBAR → dark ink pill (reference navbar)
   ───────────────────────────────────────────────────────────────── */
html[data-mode="light"] .topbar {
  background: #17161A;
  border: 1px solid #17161A;
  border-bottom: 1px solid #17161A;
  border-radius: 999px;
  margin: 14px 20px 6px;
  padding: 8px 12px;
  min-height: 58px;
  box-shadow: 0 10px 28px rgba(23, 22, 26, 0.18);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html[data-mode="light"] .topbar,
html[data-mode="light"] .topbar a,
html[data-mode="light"] .topbar button { color: #F5F4F0; }
html[data-mode="light"] .topbar svg { stroke: #F5F4F0; color: #F5F4F0; }

/* Search — translucent white pill, WHITE readable text (beats the
   generic input rule's :not() specificity via !important) */
html[data-mode="light"] .topbar-search input {
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 999px !important;
  color: #FFFFFF !important;
  height: 42px;
  padding: 0 16px 0 42px;
}
html[data-mode="light"] .topbar-search input::placeholder {
  color: rgba(255, 255, 255, 0.60) !important;
}
html[data-mode="light"] .topbar-search input:focus {
  background: rgba(255, 255, 255, 0.16) !important;
  border-color: #C9F24E !important;
  box-shadow: 0 0 0 3px rgba(201, 242, 78, 0.25) !important;
}
html[data-mode="light"] .topbar-search svg {
  color: rgba(255, 255, 255, 0.65);
  stroke: rgba(255, 255, 255, 0.65);
  left: 16px;
}

/* Icon buttons — soft white circles on ink */
html[data-mode="light"] .topbar-icon-btn,
html[data-mode="light"] .topbar-toggle {
  width: 40px; height: 40px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
html[data-mode="light"] .topbar-icon-btn:hover,
html[data-mode="light"] .topbar-toggle:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.25);
}
html[data-mode="light"] .topbar-actions { gap: 8px; }
html[data-mode="light"] .topbar .badge-count,
html[data-mode="light"] .topbar .badge-dot {
  background: #C9F24E; color: #17161A; border-color: #17161A;
}
html[data-mode="light"] .topbar .btn-primary {
  background: #C9F24E; border-color: #C9F24E; color: #17161A;
}
html[data-mode="light"] .topbar .btn-primary svg { stroke: #17161A; color: #17161A; }

/* ─────────────────────────────────────────────────────────────────
   4. SIDENAV → floating white rounded panel (desktop only; the
   mobile drawer keeps base.css behavior untouched)
   ───────────────────────────────────────────────────────────────── */
@media (min-width: 901px) {
  html[data-mode="light"] .sidenav {
    background: #FFFFFF;
    margin: 14px 0 14px 14px;
    height: calc(100dvh - 28px);
    top: 14px;
    border: 1px solid var(--border);
    border-right: 1px solid var(--border);
    border-radius: 22px;
    box-shadow: 0 6px 24px rgba(23, 22, 26, 0.05);
    overflow: hidden;
  }
}
html[data-mode="light"] .sidenav-link { border-radius: 999px; margin: 1px 8px; }
html[data-mode="light"] .sidenav-link.is-active {
  background: #17161A;
  color: #FFFFFF;
}
html[data-mode="light"] .sidenav-link.is-active::before { display: none; }
html[data-mode="light"] .sidenav-link.is-active svg { color: #C9F24E; stroke: #C9F24E; }
html[data-mode="light"] .sidenav-badge { background: #C9F24E; color: #17161A; }
html[data-mode="light"] .sidenav-avatar { background: #CBB9F6; color: #17161A; font-weight: 700; }
html[data-mode="light"] .sidenav-brand { border-bottom: 1px solid var(--border); }
html[data-mode="light"] .sidenav-foot { border-top: 1px solid var(--border); }
html[data-mode="light"] .sidenav-user { border-radius: 16px; background: var(--surface-2); }

/* ─────────────────────────────────────────────────────────────────
   5. CARDS / PANELS
   ───────────────────────────────────────────────────────────────── */
html[data-mode="light"] .card,
html[data-mode="light"] .card-glass,
html[data-mode="light"] .panel {
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: 0 6px 24px rgba(23, 22, 26, 0.05);
}
html[data-mode="light"] .card::after { display: none; }
html[data-mode="light"] .card.is-interactive:hover {
  border-color: var(--border-strong);
  box-shadow: 0 10px 30px rgba(23, 22, 26, 0.10);
  transform: translateY(-2px);
}
html[data-mode="light"] .stat { border-radius: 22px; background: #FFFFFF; border: 1px solid var(--border); }
html[data-mode="light"] .stat.lime  { background: #C9F24E; border-color: #C9F24E; }
html[data-mode="light"] .stat.lavender { background: #CBB9F6; border-color: #CBB9F6; }

/* Dashboard hero stat → ink card with lime number */
html[data-mode="light"] .stat-hero {
  background: linear-gradient(135deg, #17161A 0%, #26252C 100%);
  border-color: #17161A;
  border-radius: 22px;
  box-shadow: 0 12px 32px -8px rgba(23, 22, 26, 0.35);
}
html[data-mode="light"] .stat-hero .stat-value { color: #C9F24E; }
html[data-mode="light"] .stat-hero .stat-label { color: rgba(255, 255, 255, 0.75); }
html[data-mode="light"] .stat-hero .stat-label svg { color: #C9F24E; }

/* ─────────────────────────────────────────────────────────────────
   6. BUTTONS → pills
   ───────────────────────────────────────────────────────────────── */
html[data-mode="light"] .btn { border-radius: 999px; }
html[data-mode="light"] .btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-fg);
  box-shadow: 0 6px 18px rgba(23, 22, 26, 0.18);
}
html[data-mode="light"] .btn-ghost,
html[data-mode="light"] .btn-outline {
  background: #FFFFFF;
  border: 1px solid var(--border-strong);
}
html[data-mode="light"] .btn-ghost:hover:not(:disabled),
html[data-mode="light"] .btn-outline:hover:not(:disabled) { background: var(--surface-2); }

/* ─────────────────────────────────────────────────────────────────
   7. INPUTS → cream fill, lavender focus (app body only — the
   topbar search above overrides with !important)
   ───────────────────────────────────────────────────────────────── */
html[data-mode="light"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
html[data-mode="light"] select,
html[data-mode="light"] textarea {
  background: #F8F6F0;
  border: 1px solid var(--border);
  border-radius: 14px;
}
html[data-mode="light"] input:focus,
html[data-mode="light"] select:focus,
html[data-mode="light"] textarea:focus {
  border-color: #CBB9F6;
  box-shadow: 0 0 0 3px rgba(203, 185, 246, 0.35);
  outline: none;
}

/* ─────────────────────────────────────────────────────────────────
   8. TABLES / CHIPS / BADGES
   ───────────────────────────────────────────────────────────────── */
html[data-mode="light"] table thead th,
html[data-mode="light"] .table thead th { background: #F2EFE8; color: #46454C; }
html[data-mode="light"] table tbody tr:hover td,
html[data-mode="light"] .table tbody tr:hover td { background: #F8F6F0; }
html[data-mode="light"] .chip,
html[data-mode="light"] .tag,
html[data-mode="light"] .pill {
  border-radius: 999px;
  background: #F2EFE8;
  border: 1px solid var(--border);
}
html[data-mode="light"] .badge-success,
html[data-mode="light"] .status-verified,
html[data-mode="light"] .status-completed,
html[data-mode="light"] .status-confirmed,
html[data-mode="light"] .status-active {
  background: rgba(201, 242, 78, 0.45); color: #3D5200; border-color: rgba(201, 242, 78, 0.9);
}
html[data-mode="light"] .status-pending,
html[data-mode="light"] .status-proposed {
  background: rgba(203, 185, 246, 0.35); color: #4A2E8F; border-color: rgba(203, 185, 246, 0.8);
}

/* ─────────────────────────────────────────────────────────────────
   9. ATTENTION BANNER (KYC etc.) → soft amber, ink action
   ───────────────────────────────────────────────────────────────── */
html[data-mode="light"] .banner {
  background: #FCF3DC;
  border: 1px solid #EBD9A8;
  border-radius: 18px;
}
html[data-mode="light"] .banner-icon { color: #8A6400; }
html[data-mode="light"] .banner .btn-primary { background: #17161A; border-color: #17161A; color: #FFFFFF; }

/* ─────────────────────────────────────────────────────────────────
   10. QUICK-ACTION TILES (dashboards)
   ───────────────────────────────────────────────────────────────── */
html[data-mode="light"] .qa-item { border-radius: 18px; background: #FFFFFF; }
html[data-mode="light"] .qa-item:hover { border-color: #17161A; }
html[data-mode="light"] .qa-ic { background: rgba(201, 242, 78, 0.5); color: #17161A; border-radius: 12px; }
html[data-mode="light"] .qa-item-hot { background: rgba(203, 185, 246, 0.35); border-color: #CBB9F6; }
html[data-mode="light"] .qa-item-hot .qa-ic { background: #17161A; color: #C9F24E; }
html[data-mode="light"] .qa-item-hot .qa-ic svg { stroke: #C9F24E; }

/* ─────────────────────────────────────────────────────────────────
   11. BOTTOM MOBILE NAV → floating white pill
   ───────────────────────────────────────────────────────────────── */
html[data-mode="light"] .bottomnav {
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 999px;
  margin: 0 12px 12px;
  box-shadow: 0 -6px 24px rgba(23, 22, 26, 0.10);
}
html[data-mode="light"] .bottomnav-tab.is-active { color: #17161A; }
html[data-mode="light"] .bottomnav-tab.is-active::before {
  background: #C9F24E; height: 3px; border-radius: 3px;
}

/* ─────────────────────────────────────────────────────────────────
   12. AUTH PAGES
   ───────────────────────────────────────────────────────────────── */
html[data-mode="light"] .auth-shell { background: #F2EFE8; }
html[data-mode="light"] .auth-card {
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: 0 10px 34px rgba(23, 22, 26, 0.08);
}
html[data-mode="light"] .auth-panel--art {
  background:
    radial-gradient(680px 420px at 85% -10%, rgba(203, 185, 246, 0.55), transparent 60%),
    radial-gradient(560px 420px at -10% 110%, rgba(201, 242, 78, 0.5), transparent 60%),
    #F8F6F0;
}
html[data-mode="light"] .auth-link { color: #17161A; font-weight: 600; }

/* ─────────────────────────────────────────────────────────────────
   13. MODALS / DROPDOWNS / MISC POLISH
   ───────────────────────────────────────────────────────────────── */
html[data-mode="light"] .modal,
html[data-mode="light"] .modal-card,
html[data-mode="light"] .drawer,
html[data-mode="light"] .dropdown-menu {
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: 0 18px 50px rgba(23, 22, 26, 0.16);
}
html[data-mode="light"] .page-title,
html[data-mode="light"] h1.display { letter-spacing: -0.5px; }
html[data-mode="light"] ::-webkit-scrollbar-thumb { background: #D9D4C7; border-radius: 999px; }
html[data-mode="light"] ::-webkit-scrollbar-track { background: transparent; }
@media (min-width: 901px) {
  html[data-mode="light"] .main { padding-top: 14px; }
}

/* ─────────────────────────────────────────────────────────────────
   14. DARK-MODE NUDGES (keep base's premium dark; align accents)
   ───────────────────────────────────────────────────────────────── */
html[data-mode="dark"] .btn { border-radius: 999px; }
html[data-mode="dark"] .sidenav-link { border-radius: 999px; margin: 1px 8px; }
html[data-mode="dark"] input:focus,
html[data-mode="dark"] select:focus,
html[data-mode="dark"] textarea:focus {
  border-color: rgba(201, 242, 78, 0.7);
  box-shadow: 0 0 0 3px rgba(201, 242, 78, 0.18);
}