/*
 * FOA Platform — Theme Bridge
 * Matches the UI-Prototype (React/styles.css) exactly.
 * Applied on top of Tabler — overrides where needed.
 * ─────────────────────────────────────────────────────
 */

/* ── FOA top progress bar ───────────────────────────── */
#foa-progress-bar {
  position:   fixed;
  top:        0;
  left:       0;
  width:      0%;
  height:     2px;
  background: var(--foa-primary, oklch(0.457 0.24 277.023));
  z-index:    9999;     /* above sidebar, topbar, modals */
  opacity:    0;
  pointer-events: none; /* never blocks clicks */
}

/* ═══════════════════════════════════════════════════════
   1. DESIGN TOKENS  (mirrors prototype :root)
   ═══════════════════════════════════════════════════════ */
:root {
  /* Colour palette — olive + indigo (Lyra preset) */
  --foa-bg:              oklch(1 0 0);
  --foa-fg:              oklch(0.153 0.006 107.1);
  --foa-card:            oklch(1 0 0);
  --foa-muted:           oklch(0.966 0.005 106.5);
  --foa-muted-fg:        oklch(0.58 0.031 107.3);
  --foa-border:          oklch(0.93 0.007 106.5);
  --foa-border-strong:   oklch(0.86 0.012 106.5);
  --foa-primary:         oklch(0.457 0.24 277.023);
  --foa-primary-fg:      oklch(0.962 0.018 272.314);
  --foa-primary-hover:   oklch(0.398 0.21 277.366);
  --foa-accent-soft:     oklch(0.95 0.04 277);
  --foa-destructive:     oklch(0.577 0.245 27.325);

  /* Sidebar tokens */
  --foa-sb-bg:           oklch(0.988 0.003 106.5);
  --foa-sb-fg:           oklch(0.153 0.006 107.1);
  --foa-sb-muted-fg:     oklch(0.58 0.031 107.3);
  --foa-sb-primary:      oklch(0.511 0.262 276.966);
  --foa-sb-primary-fg:   oklch(0.962 0.018 272.314);
  --foa-sb-accent:       oklch(0.966 0.005 106.5);
  --foa-sb-accent-fg:    oklch(0.228 0.013 107.4);
  --foa-sb-border:       oklch(0.93 0.007 106.5);

  /* Layout */
  --foa-sb-w:        248px;    /* prototype: 248px */
  --foa-header-h:    56px;     /* prototype: 56px */

  /* Typography */
  --foa-font: 'Geist Mono', ui-monospace, SFMono-Regular, 'JetBrains Mono', Menlo, monospace;

  /* Shadows (Lyra flat) */
  --foa-shadow-sm: 0 0 0 1px rgba(20,20,15,.04);
  --foa-shadow:    0 1px 0 0 rgba(20,20,15,.04), 0 0 0 1px rgba(20,20,15,.03);
  --foa-shadow-lg: 0 12px 24px -8px rgba(20,20,15,.18), 0 0 0 1px rgba(20,20,15,.08);
}

[data-bs-theme="dark"] {
  --foa-bg:            oklch(0.153 0.006 107.1);
  --foa-fg:            oklch(0.988 0.003 106.5);
  --foa-card:          oklch(0.228 0.013 107.4);
  --foa-muted:         oklch(0.286 0.016 107.4);
  --foa-muted-fg:      oklch(0.737 0.021 106.9);
  --foa-border:        oklch(1 0 0 / 10%);
  --foa-border-strong: oklch(1 0 0 / 18%);
  --foa-primary:       oklch(0.585 0.233 277.117);
  --foa-primary-hover: oklch(0.51 0.24 277);
  --foa-accent-soft:   oklch(0.32 0.12 277);

  --foa-sb-bg:         oklch(0.228 0.013 107.4);
  --foa-sb-fg:         oklch(0.988 0.003 106.5);
  --foa-sb-muted-fg:   oklch(0.737 0.021 106.9);
  --foa-sb-primary:    oklch(0.585 0.233 277.117);
  --foa-sb-accent:     oklch(0.286 0.016 107.4);
  --foa-sb-border:     oklch(1 0 0 / 10%);
}


/* ═══════════════════════════════════════════════════════
   2. BASE RESET  (matches prototype body)
   ═══════════════════════════════════════════════════════ */
html, body {
  font-family:             var(--foa-font);
  font-size:               13px;          /* prototype: 13px */
  line-height:             1.55;          /* prototype: 1.55 */
  letter-spacing:          -0.005em;
  -webkit-font-smoothing:  antialiased;
  text-rendering:          optimizeLegibility;
  font-feature-settings:   "ss01", "ss02", "cv11";
  background:              var(--foa-bg);
  color:                   var(--foa-fg);
}
button, input, select, textarea { font-family: var(--foa-font); }
a { text-decoration: none; }


/* ═══════════════════════════════════════════════════════
   3. SIDEBAR  (overrides foa-sidebar inline styles)
   ═══════════════════════════════════════════════════════ */

/* Shell dimensions */
.foa-sidebar {
  width:                   var(--foa-sb-w);       /* 248px */
  background:              rgba(251, 250, 248, 0.72);
  border-right:            1px solid var(--foa-sb-border);
  backdrop-filter:         blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
[data-bs-theme="dark"] .foa-sidebar {
  background: rgba(22, 20, 16, 0.72);
}

/* Brand row */
.foa-sb-brand {
  height:        var(--foa-header-h);     /* 56px */
  padding:       0 16px;
  border-bottom: 1px solid var(--foa-sb-border);
}
.foa-sb-logo {
  width: 28px; height: 28px;             /* prototype: 28px */
  background: var(--foa-sb-primary);
}
.foa-sb-name {
  font-size:      13px;                  /* prototype: 13px */
  font-weight:    600;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--foa-sb-fg);
}
.foa-sb-sub {
  font-size:      10.5px;                /* prototype: 10.5px */
  color:          var(--foa-sb-muted-fg);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 1px;
}

/* Nav scroll area */
.foa-sb-nav {
  padding: 14px 10px;                    /* prototype: 14px 10px */
}

/* Section labels — the small unclickable titles */
.foa-sb-section-label {
  padding:        14px 10px 6px;         /* prototype: 14px 10px 6px */
  font-size:      10px;                  /* prototype: 10px (was 9.5px) */
  font-weight:    600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          var(--foa-sb-muted-fg);
}
.foa-sb-section-label:first-child { padding-top: 4px; }

/* Nav items */
.foa-sb-item {
  gap:         10px;                     /* prototype: 10px */
  padding:     8px 10px;                 /* prototype: 8px 10px */
  font-size:   13px;                     /* prototype: 13px */
  font-weight: 500;
  color:       var(--foa-sb-fg);
  border-left: 2px solid transparent;
  margin:      1px 0;
  transition:  background 60ms, color 60ms, border-color 60ms;
}
.foa-sb-item:hover {
  background: var(--foa-sb-accent);
  color:      var(--foa-sb-fg);
}
.foa-sb-item.active {
  background:        var(--foa-sb-primary);
  color:             var(--foa-sb-primary-fg) !important;
  border-left-color: var(--foa-sb-primary);
  font-weight:       600;
}
.foa-sb-icon {
  font-size:  16px;                      /* prototype: 16px */
  color:      var(--foa-sb-muted-fg);
  opacity:    1;                         /* prototype doesn't dim icons */
}
.foa-sb-item:hover   .foa-sb-icon { color: var(--foa-sb-fg); }
.foa-sb-item.active  .foa-sb-icon { color: var(--foa-sb-primary-fg); }

/* User footer */
.foa-sb-footer  { padding: 10px; }
.foa-sb-user    { padding: 8px 10px; gap: 10px; }
.foa-sb-avatar  { width: 30px; height: 30px; font-size: 12px; font-weight: 600; } /* prototype: 30px */
.foa-sb-user-name { font-size: 13px; font-weight: 600; line-height: 1.2; }
.foa-sb-user-role { font-size: 10.5px; color: var(--foa-sb-muted-fg); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 2px; }

/* Sidebar layout offset */
@media (min-width: 992px) {
  .page { padding-left: var(--foa-sb-w) !important; }
}


/* ═══════════════════════════════════════════════════════
   4. TOPBAR / HEADER
   ═══════════════════════════════════════════════════════ */
.foa-topbar {
  height:     var(--foa-header-h);      /* 56px */
  padding:    0 24px;
  background: var(--foa-bg);
  border-bottom: 1px solid var(--foa-border);
  font-family: var(--foa-font);
}

/* Breadcrumbs */
.foa-tb-crumbs {
  font-size:      12px;                 /* prototype: 12px */
  font-weight:    500;
  color:          var(--foa-muted-fg);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.foa-crumb-sep   { color: var(--foa-border-strong); }
.foa-crumb-link  { color: var(--foa-muted-fg); }
.foa-crumb-link:hover { color: var(--foa-fg); }
.foa-crumb-current {
  color:       var(--foa-fg);           /* prototype: <b> = foreground */
  font-weight: 600;
}

/* Search */
.foa-tb-search {
  height:     32px;                     /* prototype: 32px */
  padding:    0 10px;
  background: var(--foa-muted);
  border:     1px solid var(--foa-border);
  max-width:  380px;                    /* prototype: 380px */
  font-size:  12.5px;                   /* prototype: 12.5px */
}
.foa-tb-search kbd {
  font:    500 10px/1 var(--foa-font);
  padding: 2px 5px;
  background: var(--foa-card);
  border: 1px solid var(--foa-border);
  color:  var(--foa-muted-fg);
}

/* Topbar action buttons */
.foa-tb-btn {
  width: 32px; height: 32px;
  font-size: 16px;
  color: var(--foa-muted-fg);
}
.foa-tb-btn:hover {
  background: var(--foa-muted);
  color: var(--foa-fg);
}


/* ═══════════════════════════════════════════════════════
   5. PAGE CONTENT AREA
   ═══════════════════════════════════════════════════════ */
.page-body { padding: 0px 28px; } 

/* Page header (title + sub) — for pages that render their own heading */
.foa-page-hd {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
}
.foa-page-title {
  font-size:      22px;                 /* prototype: 22px */
  font-weight:    600;
  letter-spacing: -0.025em;
  line-height:    1.15;
  margin: 0;
  text-transform: uppercase;
}
.foa-page-sub {
  font-size:  12.5px;
  color:      var(--foa-muted-fg);
  margin-top: 6px;
  max-width:  680px;
  letter-spacing: 0;
}
.foa-page-actions { display: flex; gap: 6px; flex-shrink: 0; }


/* ═══════════════════════════════════════════════════════
   6–11. Tabler defaults kept as-is.
   Only FOA-specific foa-* classes are overridden here.
   ═══════════════════════════════════════════════════════ */

/* FOA accent button — use class="btn foa-btn-accent" */
.foa-btn-accent {
  background:   var(--foa-primary);
  color:        var(--foa-primary-fg);
  border-color: var(--foa-primary);
}
.foa-btn-accent:hover {
  background:   var(--foa-primary-hover);
  border-color: var(--foa-primary-hover);
  color:        var(--foa-primary-fg);
}

/* FOA ghost button — use class="btn foa-btn-ghost" */
.foa-btn-ghost {
  background:   transparent;
  border-color: transparent;
  color:        var(--foa-fg);
}
.foa-btn-ghost:hover { background: var(--foa-muted); }

/* ═══════════════════════════════════════════════════════
   12. STAT TILES
   ═══════════════════════════════════════════════════════ */
.foa-stat {
  padding:    18px;
  background: var(--foa-card);
  border:     1px solid var(--foa-border);
}
.foa-stat-label {
  font-size:      10.5px;               /* prototype: 10.5px */
  font-weight:    600;
  color:          var(--foa-muted-fg);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.foa-stat-value {
  font-size:            26px;           /* prototype: 26px */
  font-weight:          600;
  letter-spacing:       -0.04em;
  line-height:          1.05;
  font-variant-numeric: tabular-nums;
  margin-top:           2px;
}
.foa-stat-delta {
  font-size: 11.5px;
  color:     var(--foa-muted-fg);
  display:   flex;
  align-items: center;
  gap: 5px;
}
.foa-stat-delta.pos { color: oklch(0.62 0.16 145); }
.foa-stat-delta.neg { color: var(--foa-destructive); }


/* ═══════════════════════════════════════════════════════
   13. TABLER OVERRIDE — radius + primary colour only
   Let Tabler handle all surface/border/text vars so
   dark mode works correctly on cards and components.
   ═══════════════════════════════════════════════════════ */
:root {
  /* Strip rounded corners to match prototype flat style */
  --tblr-border-radius:      0px;
  --tblr-border-radius-sm:   0px;
  --tblr-border-radius-lg:   0px;
  --tblr-border-radius-xl:   0px;
  --tblr-border-radius-pill: 0px;

  /* Brand colour — indigo (Lyra preset) */
  --tblr-primary:     oklch(0.457 0.24 277.023);
  --tblr-primary-rgb: 71, 56, 202;

  /* Font — already set in head.blade.php inline style, kept here as fallback */
  --tblr-body-font-family: var(--foa-font);
  --tblr-body-font-size:   13px;

  /* DO NOT override --tblr-bg-surface, --tblr-body-color,
     --tblr-border-color or --tblr-muted here — Tabler's own
     dark-mode block ([data-bs-theme="dark"]) handles those. */
}

/* ── Rebate Upload Dropzone ──────────────────────────────────────────────── */
.foa-dropzone {
    border: 2px dashed var(--foa-border);
    padding: 48px 24px;
    text-align: center;
    cursor: pointer;
    transition: border-color 180ms ease, background 180ms ease;
}
.foa-dropzone:hover,
.foa-dropzone.dragover {
    border-color: var(--foa-primary);
    background: rgba(67, 56, 202, 0.03);
}
.foa-dropzone input[type="file"] {
    display: none;
}

/* ═══════════════════════════════════════════════════════
   Impersonation — return-to-super-admin button shown in
   the topbar when super admin has quick-logged in as another user.
   ═══════════════════════════════════════════════════════ */
.foa-impersonate-btn {
    display:         inline-flex;
    align-items:     center;
    gap:             5px;
    padding:         4px 12px;
    border-radius:   5px;
    border:          1px solid oklch(0.75 0.13 60);
    background:      oklch(0.92 0.08 80);
    color:           oklch(0.35 0.12 55);
    font-size:       12px;
    font-weight:     600;
    cursor:          pointer;
    transition:      background 150ms, border-color 150ms;
    white-space:     nowrap;
}
.foa-impersonate-btn:hover {
    background:    oklch(0.86 0.11 78);
    border-color:  oklch(0.65 0.15 60);
}
[data-bs-theme="dark"] .foa-impersonate-btn {
    background:    oklch(0.30 0.08 60);
    border-color:  oklch(0.42 0.10 60);
    color:         oklch(0.88 0.08 80);
}
[data-bs-theme="dark"] .foa-impersonate-btn:hover {
    background:    oklch(0.36 0.10 60);
}