/* ═══════════════════════════════════════════════════════════════
   ASSETFLOW DESIGN SYSTEM v2.1
   Token-based CSS for theme4 dashboard & public pages
   Depends on: Bootstrap 5.x (loaded before this file)
   Fonts loaded via <link> in master layout (not @import here)
   Solid-blue pass: decorative gradient tokens flattened to solid
   blue; .stat-icon-blue / .stat-icon-green unified to one blue
   (#2563EB). Semantic tokens (success/warning/danger/info) kept
   untouched since they carry meaning independent of brand color.
   ═══════════════════════════════════════════════════════════════ */

/* ── Root Tokens ─────────────────────────────────────────────── */
:root {
  /* Backgrounds */
  --af-bg:         #0B0F19;
  --af-bg-elevated:#0F1623;
  --af-surface:    #151B2B;
  --af-surface-hover: #1A2235;
  --af-surface-raised:#1E2840;

  /* Primary — Institutional Blue */
  --af-primary:    #3B82F6;
  --af-primary-50: rgba(59,130,246,0.05);
  --af-primary-100:rgba(59,130,246,0.10);
  --af-primary-200:rgba(59,130,246,0.20);
  --af-primary-300:rgba(59,130,246,0.30);
  --af-primary-400:rgba(59,130,246,0.40);
  --af-primary-500:#3B82F6;
  --af-primary-600:#2563EB;
  --af-primary-700:#1D4ED8;

  /* Growth / Success */
  --af-success:    #10B981;
  --af-success-100:rgba(16,185,129,0.10);
  --af-success-200:rgba(16,185,129,0.20);

  /* Warning / Amber */
  --af-warning:    #F59E0B;
  --af-warning-100:rgba(245,158,11,0.10);
  --af-warning-200:rgba(245,158,11,0.20);

  /* Danger */
  --af-danger:     #EF4444;
  --af-danger-100: rgba(239,68,68,0.10);
  --af-danger-200: rgba(239,68,68,0.20);

  /* Info */
  --af-info:       #06B6D4;
  --af-info-100:   rgba(6,182,212,0.10);

  /* Text */
  --af-text-heading:   #F8FAFC;
  --af-text-body:      #CBD5E1;
  --af-text-muted:     #94A3B8;
  --af-text-faint:     #8A9BBB;
  --af-text-disabled:  #6B7B8F;

  /* Borders */
  --af-border:         rgba(148,163,184,0.08);
  --af-border-hover:   rgba(148,163,184,0.14);
  --af-border-active:  rgba(59,130,246,0.35);
  --af-border-glow:    rgba(59,130,246,0.15);

  /* Gradients — flattened to solid blue per solid-color brand pass */
  --af-gradient-primary: #2563EB;
  --af-gradient-glow:    rgba(37,99,235,0.12);

  /* Shadows */
  --af-shadow-sm:  0 1px 2px rgba(0,0,0,0.30);
  --af-shadow-md:  0 4px 12px rgba(0,0,0,0.35);
  --af-shadow-lg:  0 8px 24px rgba(0,0,0,0.40);
  --af-shadow-xl:  0 16px 48px rgba(0,0,0,0.50);
  --af-shadow-glow: 0 0 24px var(--af-border-glow);

  /* Glass */
  --af-glass-bg:   rgba(21,27,43,0.72);
  --af-glass-border:rgba(255,255,255,0.06);

  /* Spacing (4px base) */
  --af-space-1: 4px;
  --af-space-2: 8px;
  --af-space-3: 12px;
  --af-space-4: 16px;
  --af-space-5: 20px;
  --af-space-6: 24px;
  --af-space-8: 32px;
  --af-space-10:40px;
  --af-space-12:48px;
  --af-space-16:64px;

  /* Radii */
  --af-radius-sm:  6px;
  --af-radius-md:  10px;
  --af-radius-lg:  14px;
  --af-radius-xl:  20px;
  --af-radius-2xl: 28px;
  --af-radius-full:999px;

  /* Typography */
  --af-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --af-font-mono: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

  /* Transitions */
  --af-transition-fast:  150ms cubic-bezier(0.4,0,0.2,1);
  --af-transition-base:  250ms cubic-bezier(0.4,0,0.2,1);
  --af-transition-slow:  350ms cubic-bezier(0.4,0,0.2,1);
}

/* ── Base Overrides ──────────────────────────────────────────── */
* {
  font-family: var(--af-font-sans) !important;
}

/* Exempt icon font pseudo-elements from the universal font override.
   Without these exceptions the ::before glyphs for Phosphor, Bootstrap
   Icons, Font Awesome, Remixicon and Boxicons all render as blank squares
   because the Inter font has no glyph at those code-points. */
.ph::before,
.ph-fill::before,
.ph-duotone::before,
.ph-bold::before,
.ph-thin::before,
.ph-light::before {
  font-family: "Phosphor" !important;
}

.bi::before {
  font-family: "bootstrap-icons" !important;
}

[class*="fa-"]::before,
.fas::before, .far::before, .fal::before, .fab::before, .fad::before {
  font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands", "Font Awesome 5 Free", "Font Awesome 5 Brands" !important;
}

[class*="ri-"]::before {
  font-family: "remixicon" !important;
}

[class*="bx"]::before,
[class*="bxs-"]::before,
[class*="bxl-"]::before {
  font-family: "boxicons" !important;
}

/* Preserve reduced-motion: only animate/transition durations, not font */
@media (prefers-reduced-motion: reduce) {
  *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

html, body {
  background: var(--af-bg) !important;
  color: var(--af-text-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Override Bootstrap defaults for dark mode */
.bg-body, .bg-light, .bg-white {
  background: var(--af-surface) !important;
}

.text-dark { color: var(--af-text-heading) !important; }
.text-muted { color: var(--af-text-muted) !important; }
.text-primary { color: var(--af-primary) !important; }
.text-success { color: var(--af-success) !important; }
.text-warning { color: var(--af-warning) !important; }
.text-danger { color: var(--af-danger) !important; }

.border { border-color: var(--af-border) !important; }
.border-top { border-top-color: var(--af-border) !important; }
.border-bottom { border-bottom-color: var(--af-border) !important; }

/* ── Forms ───────────────────────────────────────────────────── */
.form-control, .form-select {
  background: var(--af-bg-elevated) !important;
  border: 1.5px solid var(--af-border) !important;
  border-radius: var(--af-radius-md) !important;
  color: var(--af-text-heading) !important;
  font-size: 0.9375rem;
  padding: 0.65rem 0.9rem;
  transition: border-color var(--af-transition-fast), box-shadow var(--af-transition-fast);
}

.form-control::placeholder, .form-select::placeholder {
  color: var(--af-text-faint);
}

.form-control:focus, .form-select:focus {
  border-color: var(--af-primary-400) !important;
  box-shadow: 0 0 0 3px var(--af-primary-100), 0 0 20px var(--af-border-glow) !important;
  background: var(--af-surface) !important;
  outline: none !important;
}

.form-label {
  font-family: var(--af-font-mono) !important;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--af-text-muted);
  margin-bottom: var(--af-space-2);
}

/* ── Tables ──────────────────────────────────────────────────── */
.table {
  color: var(--af-text-body);
  --bs-table-bg: transparent;
  --bs-table-color: var(--af-text-body);
  --bs-table-border-color: var(--af-border);
}

.table thead th {
  font-family: var(--af-font-mono);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--af-text-faint);
  border-bottom-width: 1px;
  border-bottom-color: var(--af-border);
  padding: var(--af-space-3) var(--af-space-4);
  white-space: nowrap;
}

.table tbody td {
  padding: var(--af-space-3) var(--af-space-4);
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
  border-color: var(--af-border);
}

.table tbody tr {
  transition: background var(--af-transition-fast);
}

.table tbody tr:hover {
  background: var(--af-primary-50);
}

/* ── Modals ──────────────────────────────────────────────────── */
.modal-content {
  background: var(--af-surface) !important;
  border: 1px solid var(--af-border) !important;
  border-radius: var(--af-radius-xl) !important;
  box-shadow: var(--af-shadow-xl), 0 0 0 1px rgba(255,255,255,0.03) inset !important;
}

.modal-header {
  border-bottom-color: var(--af-border) !important;
  padding: var(--af-space-5) var(--af-space-6);
}

.modal-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--af-text-heading);
  letter-spacing: -0.01em;
}

.modal-body {
  padding: var(--af-space-6);
}

.modal-footer {
  border-top-color: var(--af-border) !important;
  padding: var(--af-space-4) var(--af-space-6);
  gap: var(--af-space-3);
}

.btn-close {
  filter: invert(1);
  opacity: 0.4;
  transition: opacity var(--af-transition-fast);
}

.btn-close:hover { opacity: 0.8; }

/* ── Dropdowns ───────────────────────────────────────────────── */
.dropdown-menu {
  background: var(--af-surface-raised) !important;
  border: 1px solid var(--af-border-hover) !important;
  border-radius: var(--af-radius-lg) !important;
  box-shadow: var(--af-shadow-xl), 0 0 40px rgba(0,0,0,0.30) !important;
  padding: var(--af-space-2) !important;
  min-width: 220px;
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--af-space-3);
  padding: var(--af-space-2) var(--af-space-3) !important;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--af-text-muted) !important;
  border-radius: var(--af-radius-md);
  transition: all var(--af-transition-fast);
}

.dropdown-item:hover, .dropdown-item:focus {
  background: var(--af-primary-100) !important;
  color: var(--af-text-heading) !important;
}

.dropdown-item.text-danger:hover {
  background: var(--af-danger-100) !important;
  color: var(--af-danger) !important;
}

.dropdown-divider {
  border-color: var(--af-border) !important;
  margin: var(--af-space-2) var(--af-space-3) !important;
}

/* ── Preloader ───────────────────────────────────────────────── */
#preloader, .preloader-holder {
  background: var(--af-bg) !important;
}

/* ── Scrollbar ───────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(148,163,184,0.15); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(148,163,184,0.25); }

/* ── Utility classes ─────────────────────────────────────────── */
.af-mono { font-family: var(--af-font-mono); }

/* ── Animations ──────────────────────────────────────────────── */
@keyframes afFadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes afFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes afPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(0.92); }
}

@keyframes afShimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes afTicker {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.af-animate-fade-up {
  animation: afFadeUp 0.5s cubic-bezier(0.22,1,0.36,1) both;
}

.af-animate-fade-in {
  animation: afFadeIn 0.35s ease both;
}

/* Stagger delays */
.af-d-1 { animation-delay: 0.04s; }
.af-d-2 { animation-delay: 0.08s; }
.af-d-3 { animation-delay: 0.12s; }
.af-d-4 { animation-delay: 0.16s; }
.af-d-5 { animation-delay: 0.20s; }
.af-d-6 { animation-delay: 0.24s; }

/* ── Utilities ───────────────────────────────────────────────── */
.af-font-mono { font-family: var(--af-font-mono) !important; }
.af-tabular { font-variant-numeric: tabular-nums; }

.af-glass {
  background: var(--af-glass-bg);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid var(--af-glass-border);
}

.af-glass-strong {
  background: rgba(15,22,35,0.88);
  backdrop-filter: blur(24px) saturate(1.3);
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
  border: 1px solid var(--af-glass-border);
}

/* Skeleton loading */
.af-skeleton {
  background: linear-gradient(90deg, var(--af-surface) 25%, var(--af-surface-raised) 50%, var(--af-surface) 75%);
  background-size: 200% 100%;
  animation: afShimmer 1.5s infinite;
  border-radius: var(--af-radius-md);
}

/* ── Icon size utilities ─────────────────────────────────────── */
.afx-icon-xs  { font-size: 0.75rem; }
.afx-icon-sm  { font-size: 1rem;    }
.afx-icon-md  { font-size: 1.25rem; }
.afx-icon-lg  { font-size: 1.5rem;  }
.afx-icon-xl  { font-size: 2rem;    }
.afx-icon-2xl { font-size: 2.5rem;  }

/* ── Stat icon wrappers ──────────────────────────────────────── */
/* .stat-icon-blue and .stat-icon-green unified to one solid brand
   blue (#2563EB) — both class names remain usable in templates so
   no blade changes are required. */
.stat-icon-wrap { width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.stat-icon-blue   { background:rgba(37,99,235,0.12); color:#2563eb; }
.stat-icon-green  { background:rgba(37,99,235,0.12); color:#2563eb; }
.stat-icon-amber  { background:rgba(251,191,36,0.12); color:#fbbf24; }
.stat-icon-red    { background:rgba(239,68,68,0.12); color:#ef4444; }
.stat-icon-purple { background:rgba(124,58,237,0.12); color:#7c3aed; }
.stat-icon-gray   { background:rgba(255,255,255,0.06); color:rgba(255,255,255,0.4); }

/* ── Brand-normalized legacy aliases ── */
:root {
  --cw-blue: var(--af-primary-600);
  --cw-green: var(--af-success);
  --cw-red: var(--af-danger);
  --cw-purple: var(--af-primary-600);
  --cw-pink: var(--af-primary-600);
  --cw-amber: var(--af-warning);
  --cw-teal: var(--af-info);
  --wd-mu3: var(--af-text-muted);
  --tf-mu3: var(--af-text-muted);
  --pf-mu3: var(--af-text-muted);
}

.af-page-hero { display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; padding:22px 24px; margin-bottom:18px; border-radius:24px; border:1px solid rgba(37,99,235,.22); background:linear-gradient(135deg, rgba(37,99,235,.16), rgba(37,99,235,.08) 52%, rgba(15,23,42,.9)); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 18px 44px rgba(3,7,18,.28); }
.af-page-eyebrow { display:inline-flex; align-items:center; gap:8px; margin-bottom:10px; color:var(--af-primary); font-size:0.7rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; font-family:var(--af-font-mono); }
.af-page-title { margin:0 0 8px; color:var(--af-text-heading); font-size:clamp(1.25rem, 2.2vw, 1.7rem); font-weight:800; letter-spacing:-0.03em; line-height:1.16; text-shadow:0 0 30px rgba(37,99,235,.16); }
.af-page-copy { margin:0; max-width:720px; color:var(--af-text-muted); font-size:0.94rem; line-height:1.7; }
.af-page-pills { display:flex; flex-wrap:wrap; gap:8px; }
.af-page-pill { display:inline-flex; align-items:center; gap:7px; padding:8px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.05); color:var(--af-text-heading); font-size:0.76rem; font-weight:600; backdrop-filter:blur(10px); }
.af-form-input { background:var(--af-bg-elevated)!important; border:1.5px solid var(--af-border)!important; border-radius:var(--af-radius-md)!important; color:var(--af-text-heading)!important; font-size:0.9375rem; padding:0.65rem 0.9rem; transition:border-color var(--af-transition-fast), box-shadow var(--af-transition-fast); }
.af-form-input:focus { border-color:var(--af-primary-400)!important; box-shadow:0 0 0 3px var(--af-primary-100), 0 0 20px var(--af-border-glow)!important; background:var(--af-surface)!important; outline:none!important; }
.af-btn-ghost { display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:var(--af-radius-md); font-weight:600; letter-spacing:-0.01em; text-decoration:none; border:1px solid var(--af-border-hover); background:var(--af-bg-elevated); color:var(--af-text-body); cursor:pointer; padding:8px 16px; font-size:0.8125rem; transition:all var(--af-transition-fast); }
.af-btn-ghost:hover { border-color:var(--af-border-active); color:var(--af-text-heading); background:var(--af-surface); }

/* ── Table overflow utility ──────────────────────────────────── */
.af-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.af-data-table { min-width: 600px; border-collapse: separate; border-spacing: 0; }
.af-data-table thead th { background: var(--af-bg-elevated); color: var(--af-text-muted); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 12px 14px; border-bottom: 1px solid var(--af-border); white-space: nowrap; }
.af-data-table tbody td { padding: 13px 14px; border-bottom: 1px solid var(--af-border); color: var(--af-text-body); font-size: 0.875rem; vertical-align: middle; }
.af-data-table tbody tr:last-child td { border-bottom: none; }
.af-data-table tbody tr:hover td { background: var(--af-surface-hover); }
.af-mono { font-family: var(--af-font-mono); font-size: 0.82rem; letter-spacing: 0.03em; color: var(--af-text-muted); }

/* ── Shell / page-layout container ──────────────────────────── */
.af-shell { width: 100%; padding: 0 20px 40px; box-sizing: border-box; }
@media (max-width: 576px) { .af-shell { padding: 0 12px 24px; } }

/* ── Hero responsive adjustments ────────────────────────────── */
@media (max-width: 768px) {
  .af-page-hero { flex-direction: column; align-items: flex-start; padding: 18px 16px; }
  .af-page-title { font-size: 1.1rem; }
  .af-page-pills { gap: 6px; }
  .af-page-pill { padding: 6px 10px; font-size: 0.72rem; }
}

/* ══ Mobile Sidebar Drawer ══════════════════════════════════════
   Triggered by .sidebar-open on <body>. Sidebar slides in from
   the left over an overlay backdrop. No JS framework required.
═══════════════════════════════════════════════════════════════ */
.af-mob-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.05);
  color: var(--af-text-heading);
  cursor: pointer;
  font-size: 1.1rem;
  transition: background var(--af-transition-fast);
}
.af-mob-toggle:hover { background: rgba(255,255,255,0.10); }

@media (max-width: 991px) {
  .af-mob-toggle { display: flex; }
  .d-sidebar {
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
    display: block !important;   /* override the earlier display:none */
    z-index: 1050;
  }
  body.sidebar-open .d-sidebar { transform: translateX(0); }
  .af-sidebar-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.65);
    backdrop-filter: blur(4px);
    z-index: 1049;
    opacity: 0; pointer-events: none;
    transition: opacity 0.3s ease;
  }
  body.sidebar-open .af-sidebar-overlay { opacity: 1; pointer-events: all; }
}

/* ── Sidebar close button (mobile only) ─────────────────────── */
.af-sidebar-close {
  display: none;
  margin: 12px 12px 4px auto;
  width: 32px; height: 32px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.05);
  color: var(--af-text-heading);
  cursor: pointer;
  align-items: center; justify-content: center;
  font-size: 0.9rem;
  transition: background var(--af-transition-fast);
}
@media (max-width: 991px) { .af-sidebar-close { display: flex; } }