/* ============================================================
   BANDWIDTH TIFFIN — Shared Theme & Design System
   Version: 1.0 — Extracted from Homepage / Admin / Dashboard
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=Playfair+Display:ital,wght@0,700;0,800;1,700&display=swap');

:root {
    /* ── Base Backgrounds — Dark Theme (default) ── */
    --theme-bg:       #1a1f25;
    --theme-surface1: #1a1f25;
    --theme-surface2: #21272e;
    --theme-surface3: #282f38;

    /* ── Primary Text ── */
    --theme-text-1:   #e4e9ef;
    --theme-text-2:   #8a9bb5;
    --theme-text-3:   #546073;

    /* ── Brand Accents ── */
    --theme-accent:          #e51c23;
    --theme-accent-light:    #ff4d54;
    --theme-accent-dark:     #b3151b;
    --theme-gold:            #f0932b;
    --theme-accent-gradient: linear-gradient(135deg, #e51c23 0%, #ff4d54 100%);
    --theme-accent-glow:     rgba(229, 28, 35, 0.3);

    /* ── Expanded Semantic Color Palette ── */
    --theme-blue:        #4CC9F0;
    --theme-blue-bg:     rgba(76, 201, 240, 0.10);
    --theme-blue-border: rgba(76, 201, 240, 0.25);
    --theme-teal:        #06D6A0;
    --theme-teal-bg:     rgba(6, 214, 160, 0.10);
    --theme-teal-border: rgba(6, 214, 160, 0.25);
    --theme-purple:      #9B72CF;
    --theme-purple-bg:   rgba(155, 114, 207, 0.10);
    --theme-purple-border: rgba(155, 114, 207, 0.25);
    --theme-orange:      #FB8500;
    --theme-orange-bg:   rgba(251, 133, 0, 0.10);
    --theme-orange-border: rgba(251, 133, 0, 0.25);
    --theme-amber:       #FFB703;
    --theme-amber-bg:    rgba(255, 183, 3, 0.10);
    --theme-amber-border: rgba(255, 183, 3, 0.25);

    /* ── Plan Tier Gradients ── */
    --theme-plan-basic:    linear-gradient(135deg, #1e3a5f 0%, #2d5a8e 100%);
    --theme-plan-improved: linear-gradient(135deg, #0a3d2e 0%, #0d5c40 100%);
    --theme-plan-premium:  linear-gradient(135deg, #4a2800 0%, #7a4500 100%);

    /* ── Borders & Spacing ── */
    --theme-border:        rgba(255, 255, 255, 0.06);
    --theme-border-hover:  rgba(229, 28, 35, 0.35);
    --theme-border-active: rgba(229, 28, 35, 0.55);
    --theme-radius:        16px;
    --theme-radius-lg:     24px;
    --theme-radius-pill:   50px;

    /* ── Shadows — Dark Neumorphic (deeper for more depth) ── */
    --theme-shadow-light:  5px 5px 12px rgba(0,0,0,0.45), -3px -3px 8px rgba(255,255,255,0.04);
    --theme-shadow:        8px 8px 18px rgba(0,0,0,0.55), -5px -5px 12px rgba(255,255,255,0.04);
    --theme-shadow-hard:   12px 12px 28px rgba(0,0,0,0.65), -6px -6px 16px rgba(255,255,255,0.03);
    --theme-shadow-inset:  inset 5px 5px 10px rgba(0,0,0,0.5), inset -4px -4px 8px rgba(255,255,255,0.04);
    --theme-shadow-accent: 0 8px 32px rgba(229, 28, 35, 0.25);
    --theme-trans:         0.3s cubic-bezier(0.25, 0.8, 0.25, 1);

    /* ── Status Colors ── */
    --theme-green:      #2ecc71;
    --theme-green-bg:   rgba(46, 204, 113, 0.12);
    --theme-yellow:     #f1c40f;
    --theme-yellow-bg:  rgba(241, 196, 15, 0.12);
    --theme-red:        #e74c3c;
    --theme-red-bg:     rgba(231, 76, 60, 0.12);

    /* ── Legacy Aliases (backwards compat) ── */
    --bg:             var(--theme-bg);
    --bg-app:         var(--theme-bg);
    --bg-card:        var(--theme-surface1);
    --bg-surface-1:   var(--theme-surface1);
    --bg-card2:       var(--theme-surface2);
    --bg-surface-2:   var(--theme-surface2);
    --bg-card3:       var(--theme-surface3);
    --bg-input:       var(--theme-surface3);
    --text:           var(--theme-text-1);
    --text-primary:   var(--theme-text-1);
    --text-muted:     var(--theme-text-2);
    --text-secondary: var(--theme-text-2);
    --text-dim:       var(--theme-text-3);
    --accent:           var(--theme-accent);
    --accent-primary:   var(--theme-accent);
    --accent-red:       var(--theme-accent);
    --accent-light:     var(--theme-accent-light);
    --accent-secondary: var(--theme-accent-light);
    --accent-dark:      var(--theme-accent-dark);
    --gold:             var(--theme-gold);
    --accent-gradient:  var(--theme-accent-gradient);
    --accent-glow:      var(--theme-accent-glow);
    --border:         var(--theme-border);
    --border-hover:   var(--theme-border-hover);
    --border-active:  var(--theme-border-active);
    --radius:         var(--theme-radius);
    --radius-lg:      var(--theme-radius-lg);
    --radius-pill:    var(--theme-radius-pill);
    --shadow:         var(--theme-shadow);
    --shadow-accent:  var(--theme-shadow-accent);
    --trans:          var(--theme-trans);
    --green:              var(--theme-green);
    --status-active:      var(--theme-green);
    --green-bg:           var(--theme-green-bg);
    --status-active-bg:   var(--theme-green-bg);
    --yellow:             var(--theme-yellow);
    --status-pending:     var(--theme-yellow);
    --yellow-bg:          var(--theme-yellow-bg);
    --status-pending-bg:  var(--theme-yellow-bg);
    --red-s:              var(--theme-red);
    --status-missed:      var(--theme-red);
    --red-bg:             var(--theme-red-bg);
    --status-missed-bg:   var(--theme-red-bg);
}

/* ══════════════════════════════════════════════════════
   LIGHT THEME OVERRIDES
   Applied when <html data-theme="light"> is set.
   All --theme-* vars are redefined; legacy aliases
   inherit automatically through the cascade.
══════════════════════════════════════════════════════ */
[data-theme="light"] {
    /* ── Backgrounds — warm cream, food-appropriate ── */
    --theme-bg:       #f5f0ea;
    --theme-surface1: #faf7f3;
    --theme-surface2: #ffffff;
    --theme-surface3: #f0ebe3;

    /* ── Text ── */
    --theme-text-1:   #1a1a1a;
    --theme-text-2:   #5a6170;
    --theme-text-3:   #9aa0aa;

    /* ── Brand accents unchanged (red/gold pop on cream) ── */
    --theme-accent:          #d4171e;
    --theme-accent-light:    #e83038;
    --theme-accent-dark:     #a81218;
    --theme-gold:            #d97706;
    --theme-accent-gradient: linear-gradient(135deg, #d4171e 0%, #e83038 100%);
    --theme-accent-glow:     rgba(212, 23, 30, 0.2);

    /* ── Semantic palette (same hues, adjusted for light) ── */
    --theme-blue:        #0284c7;
    --theme-blue-bg:     rgba(2, 132, 199, 0.08);
    --theme-blue-border: rgba(2, 132, 199, 0.2);
    --theme-teal:        #059669;
    --theme-teal-bg:     rgba(5, 150, 105, 0.08);
    --theme-teal-border: rgba(5, 150, 105, 0.2);
    --theme-purple:      #7c3aed;
    --theme-purple-bg:   rgba(124, 58, 237, 0.08);
    --theme-purple-border: rgba(124, 58, 237, 0.2);
    --theme-orange:      #ea6c00;
    --theme-orange-bg:   rgba(234, 108, 0, 0.08);
    --theme-orange-border: rgba(234, 108, 0, 0.2);
    --theme-amber:       #b45309;
    --theme-amber-bg:    rgba(180, 83, 9, 0.08);
    --theme-amber-border: rgba(180, 83, 9, 0.2);

    /* ── Plan tier gradients for light mode ── */
    --theme-plan-basic:    linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    --theme-plan-improved: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    --theme-plan-premium:  linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);

    /* ── Borders ── */
    --theme-border:        rgba(0, 0, 0, 0.08);
    --theme-border-hover:  rgba(212, 23, 30, 0.3);
    --theme-border-active: rgba(212, 23, 30, 0.5);

    /* ── Shadows — Light neumorphic (warm tones) ── */
    --theme-shadow-light:  4px 4px 10px rgba(0,0,0,0.08), -3px -3px 8px rgba(255,255,255,0.9);
    --theme-shadow:        6px 6px 16px rgba(0,0,0,0.12), -5px -5px 12px rgba(255,255,255,0.85);
    --theme-shadow-hard:   10px 10px 24px rgba(0,0,0,0.16), -6px -6px 16px rgba(255,255,255,0.8);
    --theme-shadow-inset:  inset 4px 4px 10px rgba(0,0,0,0.1), inset -3px -3px 8px rgba(255,255,255,0.9);
    --theme-shadow-accent: 0 8px 28px rgba(212, 23, 30, 0.18);

    /* ── Status Colors (slightly richer on light) ── */
    --theme-green:      #16a34a;
    --theme-green-bg:   rgba(22, 163, 74, 0.10);
    --theme-yellow:     #ca8a04;
    --theme-yellow-bg:  rgba(202, 138, 4, 0.10);
    --theme-red:        #dc2626;
    --theme-red-bg:     rgba(220, 38, 38, 0.10);
}

/* ─── Shared Base Typography ──────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; font-size:16px; }
/* Smooth theme transition — applied to every element so the switch
   feels like a gentle fade rather than a jarring snap.               */
*, *::before, *::after {
    transition: background-color 0.28s ease, border-color 0.28s ease, color 0.18s ease, box-shadow 0.28s ease;
}
/* But don't animate things that should be instant */
[data-theme] button, [data-theme] a, [data-theme] input, [data-theme] select, [data-theme] textarea {
    transition: background-color 0.28s ease, border-color 0.28s ease, color 0.18s ease, box-shadow 0.28s ease, transform 0.2s ease, opacity 0.2s ease;
}
body {
    font-family:'Outfit',sans-serif;
    color:var(--theme-text-1);
    background-color:var(--theme-bg);
    line-height:1.6; overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
}
a { color:inherit; text-decoration:none; transform:var(--theme-trans); }
ul { list-style:none; }
button { cursor:pointer; font-family:'Outfit',sans-serif; }
input,select,textarea { font-family:'Outfit',sans-serif; }
h1,h2,h3,h4,h5 { font-family:'Outfit',sans-serif; font-weight:700; line-height:1.2; }

/* Scrollbar */
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:var(--theme-bg); }
::-webkit-scrollbar-thumb { background:var(--theme-surface3); border-radius:4px; }

/* ─── Shared Components ───────────────────────────── */

/* Neumorphic Glass Card */
.glass-card, .neumorphic, .neumorphic-card {
    background:var(--theme-bg);
    border:1px solid var(--theme-border);
    border-radius:var(--theme-radius-lg);
    box-shadow:var(--theme-shadow);
    padding:clamp(14px, 3vw, 20px) clamp(16px, 3.5vw, 24px);
    transition:box-shadow var(--theme-trans), transform var(--theme-trans);
}
.glass-card:hover, .neumorphic-card:hover { 
    box-shadow:var(--theme-shadow-hard);
}

.neumorphic-inset {
    background:var(--theme-bg);
    border-radius:var(--theme-radius);
    box-shadow:var(--theme-shadow-inset);
    border: 1px solid rgba(0,0,0,0.1);
}

/* Primary Button */
.btn-primary {
    display:inline-flex; align-items:center; justify-content:center; gap:7px;
    background:var(--theme-accent-gradient);
    color:#fff;
    border:none; border-radius:var(--theme-radius);
    padding:12px 24px; font-weight:700; font-size:0.9rem;
    cursor:pointer; transition:all var(--theme-trans);
    box-shadow: 4px 4px 10px rgba(229,28,35,0.3), -2px -2px 8px rgba(255,82,82,0.2);
}
.btn-primary:hover {
    transform:translateY(-2px);
    box-shadow: 6px 6px 14px rgba(229,28,35,0.4), -2px -2px 10px rgba(255,82,82,0.25);
    filter:brightness(1.05);
}
.btn-primary:active { 
    transform:translateY(1px); 
    box-shadow: inset 4px 4px 8px rgba(0,0,0,0.2), inset -4px -4px 8px rgba(255,255,255,0.1); 
    background:var(--theme-accent);
}
.btn-primary:disabled { opacity:0.45; cursor:not-allowed; transform:none; filter:none; box-shadow:none; }

/* Ghost / Secondary Button (Neumorphic Style) */
.btn-ghost, .btn-secondary {
    display:inline-flex; align-items:center; justify-content:center; gap:7px;
    background:var(--theme-bg); color:var(--theme-text-1);
    border:none; border-radius:var(--theme-radius);
    padding:12px 24px; font-weight:600; font-size:0.9rem;
    cursor:pointer; transition:var(--theme-trans);
    box-shadow:var(--theme-shadow-light);
}
.btn-ghost:hover, .btn-secondary:hover {
    box-shadow:var(--theme-shadow);
    color:var(--theme-accent);
}
.btn-ghost:active, .btn-secondary:active {
    box-shadow:var(--theme-shadow-inset);
}

/* Base Modal Container */
.modal-overlay {
    position:fixed; inset:0;
    background:rgba(0,0,0,0.75);
    backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    display:flex; align-items:center; justify-content:center;
    z-index:9999; padding:20px; animation:fadeIn 0.22s ease;
}
@keyframes fadeIn { from{opacity:0;} to{opacity:1;} }

/* ─── Light-mode utility overrides ─────────────────── */
[data-theme="light"] select { color-scheme: light; }
[data-theme="light"] select option { background: var(--theme-surface2); color: var(--theme-text-1); }
[data-theme="light"] ::-webkit-scrollbar-track { background: var(--theme-surface3); }
[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.18); }
[data-theme="light"] .neumorphic-inset { border-color: rgba(0,0,0,0.07); }

/* ─── Plan tier badge colors ─────────────────────────
   Used across dashboard and admin to visually distinguish
   Basic / Improved / Premium plan tiers consistently.    */
.plan-badge-basic    { background: var(--theme-plan-basic);    color: var(--theme-blue);   border: 1px solid var(--theme-blue-border); }
.plan-badge-improved { background: var(--theme-plan-improved); color: var(--theme-teal);   border: 1px solid var(--theme-teal-border); }
.plan-badge-premium  { background: var(--theme-plan-premium);  color: var(--theme-amber);  border: 1px solid var(--theme-amber-border); }

/* ─── Theme Toggle Button ────────────────────────────
   Shared style used on both dashboard (Settings tab)
   and admin (header). JS adds class 'theme-toggle-btn'. */
.theme-toggle-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    background: var(--theme-surface2);
    border: 1px solid var(--theme-border);
    border-radius: var(--theme-radius-pill);
    padding: 7px 14px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.82rem; font-weight: 600;
    color: var(--theme-text-2);
    cursor: pointer;
    box-shadow: var(--theme-shadow-light);
}
.theme-toggle-btn:hover {
    color: var(--theme-text-1);
    border-color: var(--theme-border-hover);
}
.theme-toggle-btn .theme-icon { font-size: 1rem; line-height: 1; }

/* WhatsApp float button removed — support button now lives in the dashboard mobile-header */