/* ============================================================================
   AXADLE DIRECT — UNIFIED DESIGN SYSTEM
   Single source of truth for BOTH the frontend (cinematic OTT) and the
   admin (OTT control center). Mirrors the approved frontend palette so the
   two halves resolve to one brand. Loaded by:
     - app/Views/frontend/layouts/main.php  (frontend)
     - app/Views/admin/layouts/main.php     (admin)

   Token naming: we expose TWO aliases for every value so both the frontend
   (--ax-bg, --ax-accent…) and the legacy admin (--ax-bg-primary, --ax-teal…)
   keep working without rewriting 60+ views. Same value, two names.
   ========================================================================== */

:root {
    /* ── Surfaces ───────────────────────────────────────────────────────── */
    --ds-bg:            #030712;             /* deepest base */
    --ds-bg-2:          #050816;             /* page gradient stop */
    --ds-bg-3:          #0B1220;             /* raised sections / secondary */
    --ds-card:          #151D2E;             /* card base */
    --ds-card-2:        #1A2235;             /* card elevated / hover */
    --ds-glass:         rgba(11,18,32,.55);  /* glassmorphism fill */
    --ds-glass-2:       rgba(255,255,255,.06);

    /* ── Brand + accents ────────────────────────────────────────────────── */
    --ds-red:           #FF2A2A;             /* PRIMARY brand red (canonical) */
    --ds-red-2:         #E11D48;             /* secondary rose */
    --ds-blue:          #00A8FF;
    --ds-purple:        #7C3AED;
    --ds-gold:          #FBBF24;
    --ds-green:         #22C55E;
    --ds-gradient:      linear-gradient(135deg,#FF2A2A 0%,#E11D48 100%);

    /* ── Text ───────────────────────────────────────────────────────────── */
    --ds-text:          #FFFFFF;
    --ds-text-2:        #E5E7EB;
    --ds-muted:         #94A3B8;

    /* ── Lines + radius ─────────────────────────────────────────────────── */
    --ds-border:        rgba(255,255,255,.08);
    --ds-border-2:      rgba(255,255,255,.14);
    --ds-radius-sm:     8px;
    --ds-radius:        12px;
    --ds-radius-lg:     18px;
    --ds-radius-xl:     24px;

    /* ── Elevation + motion ─────────────────────────────────────────────── */
    --ds-shadow-sm:     0 2px 8px rgba(0,0,0,.35);
    --ds-shadow:        0 8px 24px rgba(0,0,0,.45);
    --ds-shadow-lg:     0 24px 60px rgba(0,0,0,.6);
    --ds-glow:          0 0 0 1px rgba(255,42,42,.40), 0 10px 34px rgba(255,42,42,.28);
    --ds-ease:          cubic-bezier(.22,.61,.36,1);

    /* ── Spacing rhythm (4px base) ──────────────────────────────────────── */
    --ds-s1: 4px;  --ds-s2: 8px;  --ds-s3: 12px; --ds-s4: 16px;
    --ds-s5: 20px; --ds-s6: 24px; --ds-s8: 32px; --ds-s10: 40px;

    /* ── Typography ─────────────────────────────────────────────────────── */
    --ds-font:          'Inter','Manrope','SF Pro Display',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    --ds-font-head:     'Manrope','Inter','SF Pro Display',sans-serif;
    --ds-font-mono:     'DM Mono','SFMono-Regular',ui-monospace,monospace;

    /* ───────────────────────────────────────────────────────────────────────
       FRONTEND ALIASES (existing frontend/layouts/main.php references these)
       ─────────────────────────────────────────────────────────────────────── */
    --ax-bg: var(--ds-bg);          --ax-bg-2: var(--ds-bg-2);   --ax-bg-3: var(--ds-bg-3);
    --ax-bg2: var(--ds-bg-3);       --ax-bg3: #111827;
    --ax-card: var(--ds-card);      --ax-card-2: var(--ds-card-2);
    --ax-accent: var(--ds-red);     --ax-accent-2: var(--ds-red-2);
    --ax-gold: var(--ds-gold);      --ax-navy: var(--ds-card-2);
    --ax-text: var(--ds-text);      --ax-text-2: var(--ds-text-2);  --ax-muted: var(--ds-muted);
    --ax-border: var(--ds-border);  --ax-glass: var(--ds-glass);    --ax-glass-brd: var(--ds-border);
    --ax-radius: var(--ds-radius);  --ax-radius-lg: var(--ds-radius-lg);
    --ax-gradient: var(--ds-gradient);
    --ax-shadow-sm: var(--ds-shadow-sm); --ax-shadow: var(--ds-shadow); --ax-shadow-lg: var(--ds-shadow-lg);
    --ax-glow: var(--ds-glow);      --ax-ease: var(--ds-ease);
    --ax-font: var(--ds-font);      --ax-font-head: var(--ds-font-head);

    /* ───────────────────────────────────────────────────────────────────────
       ADMIN ALIASES (existing admin/layouts/main.php + 60 views reference
       these). Remapped onto the unified palette — admin instantly inherits
       the red/Inter brand without editing any view.
       ─────────────────────────────────────────────────────────────────────── */
    --ax-bg-primary:    var(--ds-bg);
    --ax-bg-secondary:  var(--ds-bg-3);
    --ax-bg-card:       var(--ds-card);
    --ax-bg-hover:      var(--ds-card-2);
    --ax-teal:          var(--ds-red);     /* admin "accent" → brand red */
    --ax-text-primary:  var(--ds-text);
    --ax-text-muted:    var(--ds-muted);
}

/* ============================================================================
   COMPONENT LIBRARY  (.ds-* — usable in frontend AND admin)
   ========================================================================== */

/* ── Glass surface ──────────────────────────────────────────────────────── */
.ds-glass {
    background: var(--ds-glass);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border: 1px solid var(--ds-border);
}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.ds-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px 20px; border-radius: var(--ds-radius-sm); border: 1px solid transparent;
    font-family: var(--ds-font); font-size: 13.5px; font-weight: 700; line-height: 1;
    cursor: pointer; text-decoration: none; white-space: nowrap;
    transition: transform .2s var(--ds-ease), box-shadow .25s var(--ds-ease), background .2s, color .2s, border-color .2s;
}
.ds-btn-primary { background: var(--ds-gradient); color: #fff; box-shadow: var(--ds-shadow-sm); }
.ds-btn-primary:hover { transform: translateY(-2px); box-shadow: var(--ds-glow); color: #fff; }
.ds-btn-ghost { background: rgba(255,255,255,.04); border-color: var(--ds-border); color: var(--ds-text-2); }
.ds-btn-ghost:hover { background: rgba(255,255,255,.09); color: #fff; border-color: var(--ds-border-2); }
.ds-btn-danger { background: rgba(239,68,68,.14); border-color: rgba(239,68,68,.32); color: #f87171; }
.ds-btn-danger:hover { background: rgba(239,68,68,.24); }
.ds-btn-sm { padding: 6px 13px; font-size: 12px; }
.ds-btn-lg { padding: 13px 26px; font-size: 15px; }

/* ── Cards ──────────────────────────────────────────────────────────────── */
.ds-card {
    background: var(--ds-card); border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-lg); overflow: hidden;
}
.ds-card-glass {
    background: linear-gradient(145deg, rgba(19,25,36,.88), rgba(7,12,21,.72));
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-lg);
    box-shadow: 0 24px 70px rgba(0,0,0,.34);
    backdrop-filter: blur(22px) saturate(140%);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
}
.ds-card-head { padding: 18px 20px; border-bottom: 1px solid var(--ds-border); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ds-card-title { font-family: var(--ds-font-head); font-size: 15px; font-weight: 800; letter-spacing: -.01em; }
.ds-card-body { padding: 20px; }
.ds-card-hover { transition: transform .35s var(--ds-ease), box-shadow .35s var(--ds-ease); }
.ds-card-hover:hover { transform: translateY(-4px); box-shadow: var(--ds-shadow-lg); }

/* ── Stat / KPI card ────────────────────────────────────────────────────── */
.ds-stat {
    position: relative; overflow: hidden; padding: 20px;
    background: var(--ds-card); border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-lg);
    transition: transform .25s var(--ds-ease), box-shadow .25s;
}
.ds-stat:hover { transform: translateY(-3px); box-shadow: var(--ds-shadow); }
.ds-stat::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--ds-red); }
.ds-stat.is-red::before    { background: var(--ds-red); }
.ds-stat.is-blue::before   { background: var(--ds-blue); }
.ds-stat.is-purple::before { background: var(--ds-purple); }
.ds-stat.is-gold::before   { background: var(--ds-gold); }
.ds-stat.is-green::before  { background: var(--ds-green); }
.ds-stat-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 14px; }
.ds-stat.is-red    .ds-stat-icon { background: rgba(255,42,42,.15);  color: var(--ds-red); }
.ds-stat.is-blue   .ds-stat-icon { background: rgba(0,168,255,.15);  color: var(--ds-blue); }
.ds-stat.is-purple .ds-stat-icon { background: rgba(124,58,237,.18); color: #a78bfa; }
.ds-stat.is-gold   .ds-stat-icon { background: rgba(251,191,36,.15); color: var(--ds-gold); }
.ds-stat.is-green  .ds-stat-icon { background: rgba(34,197,94,.15);  color: var(--ds-green); }
.ds-stat-value { font-family: var(--ds-font-mono); font-size: 28px; font-weight: 700; line-height: 1; margin-bottom: 4px; }
.ds-stat-label { font-size: 13px; color: var(--ds-muted); font-weight: 600; }
.ds-stat-change { font-size: 12px; margin-top: 8px; font-weight: 600; }
.ds-stat-change.up { color: var(--ds-green); }
.ds-stat-change.down { color: #f87171; }

/* ── Tables ─────────────────────────────────────────────────────────────── */
.ds-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ds-table th { padding: 11px 14px; text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ds-muted); border-bottom: 1px solid var(--ds-border); }
.ds-table td { padding: 12px 14px; border-bottom: 1px solid var(--ds-border); vertical-align: middle; }
.ds-table tbody tr:last-child td { border-bottom: 0; }
.ds-table tbody tr { transition: background .15s; }
.ds-table tbody tr:hover td { background: var(--ds-card-2); }

/* ── Forms ──────────────────────────────────────────────────────────────── */
.ds-label { display: block; font-size: 13px; font-weight: 600; color: var(--ds-text); margin-bottom: 6px; }
.ds-input, .ds-select, .ds-textarea {
    width: 100%; font-family: var(--ds-font); font-size: 14px; color: var(--ds-text);
    background: var(--ds-bg-3); border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm); padding: 10px 14px; outline: none;
    transition: border-color .2s, box-shadow .2s;
}
.ds-textarea { min-height: 110px; resize: vertical; }
.ds-input:focus, .ds-select:focus, .ds-textarea:focus { border-color: var(--ds-red); box-shadow: 0 0 0 3px rgba(255,42,42,.15); }
.ds-input::placeholder, .ds-textarea::placeholder { color: var(--ds-muted); }
.ds-select option { background: var(--ds-bg-3); }

/* ── Badges + status labels ─────────────────────────────────────────────── */
.ds-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; letter-spacing: .02em; }
.ds-badge-success { background: rgba(34,197,94,.16);  color: #4ade80; }
.ds-badge-warning { background: rgba(251,191,36,.16); color: #fbbf24; }
.ds-badge-danger  { background: rgba(239,68,68,.16);  color: #f87171; }
.ds-badge-info    { background: rgba(0,168,255,.16);  color: #38bdf8; }
.ds-badge-neutral { background: rgba(255,255,255,.08); color: var(--ds-text-2); }
.ds-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--ds-text-2); }
.ds-status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--ds-muted); }
.ds-status.is-live::before   { background: var(--ds-red); box-shadow: 0 0 0 3px rgba(255,42,42,.25); animation: ds-pulse 1.5s infinite; }
.ds-status.is-online::before { background: var(--ds-green); }
.ds-status.is-off::before    { background: var(--ds-muted); }
@keyframes ds-pulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }

/* ── Progress bar ───────────────────────────────────────────────────────── */
.ds-progress { width: 100%; height: 6px; border-radius: 999px; background: rgba(255,255,255,.1); overflow: hidden; }
.ds-progress > i { display: block; height: 100%; border-radius: 999px; background: var(--ds-gradient); }

/* ── Pagination ─────────────────────────────────────────────────────────── */
.ds-pagination { display: inline-flex; gap: 6px; }
.ds-pagination a, .ds-pagination span { min-width: 34px; height: 34px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--ds-radius-sm); border: 1px solid var(--ds-border); color: var(--ds-text-2); font-size: 13px; font-weight: 600; text-decoration: none; transition: all .2s; }
.ds-pagination a:hover { background: var(--ds-card-2); border-color: var(--ds-border-2); }
.ds-pagination .is-active { background: var(--ds-gradient); border-color: transparent; color: #fff; }

/* ── Tabs ───────────────────────────────────────────────────────────────── */
.ds-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--ds-border); }
.ds-tab { padding: 10px 16px; font-size: 13.5px; font-weight: 600; color: var(--ds-muted); border-bottom: 2px solid transparent; cursor: pointer; text-decoration: none; transition: color .2s, border-color .2s; }
.ds-tab:hover { color: var(--ds-text); }
.ds-tab.is-active { color: var(--ds-text); border-bottom-color: var(--ds-red); }

/* ── Pricing card ───────────────────────────────────────────────────────── */
.ds-price-card { position: relative; padding: 26px 22px; background: var(--ds-card); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-lg); transition: transform .3s var(--ds-ease), box-shadow .3s, border-color .3s; }
.ds-price-card:hover { transform: translateY(-5px); box-shadow: var(--ds-shadow-lg); }
.ds-price-card.is-featured { border-color: rgba(255,42,42,.5); box-shadow: var(--ds-glow); }
.ds-price-amount { font-family: var(--ds-font-head); font-size: 40px; font-weight: 900; line-height: 1; }

/* ── Empty state ────────────────────────────────────────────────────────── */
.ds-empty { text-align: center; padding: 56px 24px; color: var(--ds-muted); }
.ds-empty i { font-size: 46px; opacity: .35; display: block; margin-bottom: 12px; }
.ds-empty strong { display: block; color: var(--ds-text); font-size: 16px; font-weight: 700; margin-bottom: 4px; }

/* ── Skeleton loader ────────────────────────────────────────────────────── */
.ds-skeleton { position: relative; overflow: hidden; background: var(--ds-bg-3); border-radius: var(--ds-radius); }
.ds-skeleton::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent); animation: ds-shimmer 1.4s infinite; }
@keyframes ds-shimmer { 100% { transform: translateX(100%); } }

/* ── Toast notification ─────────────────────────────────────────────────── */
.ds-toast { position: fixed; right: 24px; bottom: 24px; z-index: 6000; display: flex; align-items: center; gap: 10px; padding: 13px 18px; border-radius: var(--ds-radius); background: rgba(20,26,38,.96); border: 1px solid var(--ds-border-2); box-shadow: var(--ds-shadow-lg); color: var(--ds-text); font-size: 13.5px; font-weight: 600; opacity: 0; transform: translateY(14px); transition: all .3s var(--ds-ease); pointer-events: none; }
.ds-toast.is-show { opacity: 1; transform: translateY(0); }
.ds-toast.is-success { border-left: 3px solid var(--ds-green); }
.ds-toast.is-error { border-left: 3px solid #f87171; }

/* ── Modal ──────────────────────────────────────────────────────────────── */
.ds-modal-backdrop { position: fixed; inset: 0; z-index: 5000; background: rgba(3,7,13,.7); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; pointer-events: none; transition: opacity .2s; }
.ds-modal-backdrop.is-open { opacity: 1; pointer-events: auto; }
.ds-modal { width: min(560px, 100%); background: var(--ds-card); border: 1px solid var(--ds-border-2); border-radius: var(--ds-radius-lg); box-shadow: var(--ds-shadow-lg); transform: scale(.96); transition: transform .2s var(--ds-ease); }
.ds-modal-backdrop.is-open .ds-modal { transform: scale(1); }

/* ── Dropdown ───────────────────────────────────────────────────────────── */
.ds-dropdown { position: absolute; min-width: 200px; padding: 6px; background: rgba(20,26,38,.98); border: 1px solid var(--ds-border-2); border-radius: var(--ds-radius); box-shadow: var(--ds-shadow-lg); z-index: 1500; }
.ds-dropdown a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--ds-radius-sm); font-size: 13.5px; color: var(--ds-text-2); text-decoration: none; transition: background .15s, color .15s; }
.ds-dropdown a:hover { background: var(--ds-card-2); color: #fff; }

/* ── Avatar ─────────────────────────────────────────────────────────────── */
.ds-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,42,42,.6); }

/* ── Scrollbars (shared) ────────────────────────────────────────────────── */
.ds-scope ::-webkit-scrollbar { width: 6px; height: 6px; }
.ds-scope ::-webkit-scrollbar-track { background: transparent; }
.ds-scope ::-webkit-scrollbar-thumb { background: var(--ds-border-2); border-radius: 3px; }