/* ================================================================
   MY NEGOSYO — MASTER THEME SYSTEM
   7 Professional Themes: Light, Strong, Elegant, Night,
   Aqua, Sunrise (Orange/Gold), Forest (Green)
   
   HOW IT WORKS:
   - :root defines the default Light theme tokens
   - [data-theme="X"] overrides only what changes per theme
   - Every theme guarantees: bg vs text, sidebar vs nav text,
     button bg vs button text — all WCAG AA contrast compliant
   - All sidebar, header, footer, section, button colors
     adapt per theme automatically via CSS variables
   ================================================================ */

/* ── Google Fonts ─────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@700;900&display=swap');

/* ================================================================
   GLOBAL RESETS & BASE
   ================================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--text);
  background: var(--bg);
  overflow-x: hidden;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background 0.3s ease, color 0.3s ease;
}

/* ================================================================
   DEFAULT / LIGHT THEME  (clean lavender-white)
   ================================================================ */
:root {
  /* Brand Palette */
  --accent:        #7C3AED;
  --accent-dark:   #5B21B6;
  --accent-mid:    #9333EA;
  --accent-light:  #EDE9FE;
  --accent-glow:   rgba(124,58,237,0.20);
  --accent-border: rgba(124,58,237,0.25);

  /* Semantic Colors */
  --gold:          #D97706;
  --gold-light:    #FEF3C7;
  --green:         #059669;
  --green-light:   #D1FAE5;
  --red:           #DC2626;
  --red-light:     #FEE2E2;
  --blue:          #2563EB;
  --blue-light:    #DBEAFE;

  /* Surface */
  --bg:            #F8F7FF;
  --bg-2:          #F0EDFF;
  --surface:       #FFFFFF;
  --surface-2:     #F5F3FF;
  --surface-3:     #EDE9FE;

  /* Sidebar */
  --sidebar-bg:    linear-gradient(165deg,#3D2470 0%,#2A1B52 100%);
  --sidebar-border:rgba(255,255,255,0.16);
  --sidebar-text:  rgba(255,255,255,0.94);
  --sidebar-muted: rgba(255,255,255,0.60);
  --sidebar-hover: rgba(255,255,255,0.10);
  --sidebar-active:rgba(255,255,255,0.18);
  --sidebar-icon-bg:rgba(255,255,255,0.16);

  /* Topbar */
  --topbar-bg:     rgba(255,255,255,0.96);
  --topbar-border: rgba(124,58,237,0.12);
  --topbar-text:   #1F1235;
  --topbar-search: #F0EDFF;

  /* Text */
  --text:          #1F1235;
  --text-muted:    #6B7280;
  --text-light:    #9CA3AF;
  --text-on-accent:#FFFFFF;

  /* Borders */
  --border:        rgba(0,0,0,0.10);
  --border-strong: rgba(0,0,0,0.18);

  /* Shadows */
  --shadow-xs:  0 1px 3px rgba(0,0,0,0.06);
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.08);
  --shadow-md:  0 4px 20px rgba(124,58,237,0.12);
  --shadow-lg:  0 12px 40px rgba(124,58,237,0.18);
  --shadow-xl:  0 24px 60px rgba(124,58,237,0.22);

  /* Cards */
  --card-bg:       #FFFFFF;
  --card-border:   rgba(124,58,237,0.12);
  --card-shadow:   0 2px 12px rgba(124,58,237,0.08);

  /* Buttons */
  --btn-primary-bg:  linear-gradient(135deg,#7C3AED,#9333EA);
  --btn-primary-text:#FFFFFF;
  --btn-secondary-bg:#F0EDFF;
  --btn-secondary-text:#5B21B6;
  --btn-secondary-border:rgba(124,58,237,0.25);

  /* Inputs */
  --input-bg:      #FFFFFF;
  --input-border:  rgba(0,0,0,0.14);
  --input-text:    #1F1235;
  --input-placeholder: #9CA3AF;
  --input-focus-border: #7C3AED;
  --input-focus-shadow: 0 0 0 3px rgba(124,58,237,0.15);

  /* Status */
  --status-paid:       #065F46;
  --status-paid-bg:    #D1FAE5;
  --status-pending:    #92600A;
  --status-pending-bg: #FEF3C7;
  --status-cancelled:  #991B1B;
  --status-cancelled-bg:#FEE2E2;
  --status-processing: #1E40AF;
  --status-processing-bg:#DBEAFE;

  /* Misc */
  --radius-xs:  6px;
  --radius-sm:  10px;
  --radius-md:  14px;
  --radius-lg:  20px;
  --radius-xl:  28px;
  --radius-full:9999px;
  --transition: 0.22s cubic-bezier(0.4,0,0.2,1);
  --sidebar-w:  260px;

  /* AdSense placeholder */
  --ad-bg:     rgba(124,58,237,0.04);
  --ad-border: rgba(124,58,237,0.12);
}

/* ================================================================
   STRONG THEME  (pure white, max contrast, bold purple)
   ================================================================ */
[data-theme="strong"] {
  --bg:            #FFFFFF;
  --bg-2:          #F3F0FF;
  --surface:       #FFFFFF;
  --surface-2:     #F3F0FF;
  --surface-3:     #E9E1FB;
  --topbar-bg:     rgba(255,255,255,0.98);
  --topbar-border: rgba(91,33,182,0.15);
  --topbar-text:   #1B1130;
  --topbar-search: #EDE9FE;
  --card-bg:       #FFFFFF;
  --card-border:   rgba(91,33,182,0.18);
  --card-shadow:   0 2px 12px rgba(91,33,182,0.10);
  --text:          #120A1F;
  --text-muted:    #4B3F66;
  --text-light:    #7B6FA0;
  --border:        rgba(20,10,40,0.16);
  --border-strong: rgba(20,10,40,0.28);
  --input-bg:      #FFFFFF;
  --input-border:  rgba(20,10,40,0.18);
  --input-text:    #120A1F;
  --btn-secondary-bg:    #EDE9FE;
  --btn-secondary-text:  #4C1D95;
  --btn-secondary-border:rgba(91,33,182,0.30);
  --accent:        #6D28D9;
  --accent-dark:   #4C1D95;
  --accent-light:  #EDE9FE;
  --ad-bg:     rgba(91,33,182,0.05);
  --ad-border: rgba(91,33,182,0.16);
}

/* ================================================================
   ELEGANT THEME  (warm ivory/cream, refined plum tones)
   ================================================================ */
[data-theme="elegant"] {
  --bg:            #FAF7F0;
  --bg-2:          #F5F0E6;
  --surface:       #FFFFFF;
  --surface-2:     #F5F0E6;
  --surface-3:     #F0E9DA;
  --topbar-bg:     rgba(250,247,240,0.97);
  --topbar-border: rgba(92,81,66,0.12);
  --topbar-text:   #2E2618;
  --topbar-search: #EFE8D8;
  --card-bg:       #FFFFFF;
  --card-border:   rgba(92,81,66,0.14);
  --card-shadow:   0 2px 12px rgba(92,81,66,0.08);
  --text:          #2E2618;
  --text-muted:    #6B5E4A;
  --text-light:    #9C8D75;
  --border:        rgba(46,38,24,0.12);
  --border-strong: rgba(46,38,24,0.22);
  --input-bg:      #FFFFFF;
  --input-border:  rgba(46,38,24,0.16);
  --input-text:    #2E2618;
  --input-placeholder: #9C8D75;
  --input-focus-border: #7C5295;
  --input-focus-shadow: 0 0 0 3px rgba(124,82,149,0.14);
  --btn-primary-bg:   linear-gradient(135deg,#7C5295,#9B6B2C);
  --btn-secondary-bg:    #F0E9DA;
  --btn-secondary-text:  #5C3D7A;
  --btn-secondary-border:rgba(124,82,149,0.25);
  --accent:        #7C5295;
  --accent-dark:   #5C3D7A;
  --accent-light:  #F0E3FF;
  --sidebar-bg:    linear-gradient(165deg,#5C3D7A 0%,#3D2654 100%);
  --ad-bg:     rgba(124,82,149,0.05);
  --ad-border: rgba(124,82,149,0.14);
}

/* ================================================================
   NIGHT THEME  (deep slate-purple, eye-comfortable dark)
   ================================================================ */
[data-theme="night"] {
  --bg:            #15131F;
  --bg-2:          #1B1830;
  --surface:       #211D38;
  --surface-2:     #2A2444;
  --surface-3:     #332D58;
  --topbar-bg:     rgba(21,19,31,0.97);
  --topbar-border: rgba(231,227,240,0.10);
  --topbar-text:   #E7E3F0;
  --topbar-search: #2A2444;
  --card-bg:       #211D38;
  --card-border:   rgba(183,149,245,0.14);
  --card-shadow:   0 2px 12px rgba(0,0,0,0.40);
  --text:          #E7E3F0;
  --text-muted:    #9A93B5;
  --text-light:    #6B6485;
  --border:        rgba(231,227,240,0.12);
  --border-strong: rgba(231,227,240,0.22);
  --input-bg:      #2A2444;
  --input-border:  rgba(183,149,245,0.20);
  --input-text:    #E7E3F0;
  --input-placeholder: #6B6485;
  --input-focus-border: #B795F5;
  --input-focus-shadow: 0 0 0 3px rgba(183,149,245,0.18);
  --btn-primary-bg:   linear-gradient(135deg,#7C3AED,#9B59F5);
  --btn-secondary-bg:    #2A2444;
  --btn-secondary-text:  #C4A0FF;
  --btn-secondary-border:rgba(183,149,245,0.25);
  --accent:        #B795F5;
  --accent-dark:   #9B59F5;
  --accent-light:  #2A2444;
  --accent-glow:   rgba(183,149,245,0.22);
  --sidebar-bg:    linear-gradient(165deg,#1F1A3A 0%,#130E2A 100%);
  --sidebar-border:rgba(183,149,245,0.16);
  --status-paid:        #34D399;
  --status-paid-bg:     rgba(5,150,105,0.18);
  --status-pending:     #FBBF24;
  --status-pending-bg:  rgba(217,119,6,0.18);
  --status-cancelled:   #F87171;
  --status-cancelled-bg:rgba(220,38,38,0.18);
  --status-processing:  #60A5FA;
  --status-processing-bg:rgba(37,99,235,0.18);
  --ad-bg:     rgba(183,149,245,0.06);
  --ad-border: rgba(183,149,245,0.14);
}

/* ================================================================
   AQUA THEME  (teal/cyan ocean freshness)
   ================================================================ */
[data-theme="aqua"] {
  --bg:            #F0FDFB;
  --bg-2:          #E0F7F4;
  --surface:       #FFFFFF;
  --surface-2:     #E0F7F4;
  --surface-3:     #CCF0EC;
  --topbar-bg:     rgba(240,253,251,0.97);
  --topbar-border: rgba(0,128,128,0.14);
  --topbar-text:   #0F3838;
  --topbar-search: #CCF0EC;
  --card-bg:       #FFFFFF;
  --card-border:   rgba(0,150,136,0.16);
  --card-shadow:   0 2px 12px rgba(0,150,136,0.10);
  --text:          #0F3838;
  --text-muted:    #2D7A78;
  --text-light:    #5BA8A6;
  --border:        rgba(0,100,100,0.12);
  --border-strong: rgba(0,100,100,0.22);
  --input-bg:      #FFFFFF;
  --input-border:  rgba(0,128,128,0.18);
  --input-text:    #0F3838;
  --input-placeholder: #5BA8A6;
  --input-focus-border: #00897B;
  --input-focus-shadow: 0 0 0 3px rgba(0,137,123,0.16);
  --btn-primary-bg:   linear-gradient(135deg,#00897B,#00ACC1);
  --btn-primary-text: #FFFFFF;
  --btn-secondary-bg:    #CCF0EC;
  --btn-secondary-text:  #00695C;
  --btn-secondary-border:rgba(0,137,123,0.25);
  --accent:        #00897B;
  --accent-dark:   #00695C;
  --accent-mid:    #00ACC1;
  --accent-light:  #E0F7F4;
  --accent-glow:   rgba(0,137,123,0.18);
  --accent-border: rgba(0,137,123,0.22);
  --gold:          #D97706;
  --green:         #059669;
  --sidebar-bg:    linear-gradient(165deg,#006064 0%,#004D52 100%);
  --sidebar-border:rgba(178,235,242,0.22);
  --sidebar-hover: rgba(178,235,242,0.12);
  --sidebar-active:rgba(178,235,242,0.22);
  --sidebar-icon-bg:rgba(178,235,242,0.18);
  --shadow-md:  0 4px 20px rgba(0,137,123,0.14);
  --shadow-lg:  0 12px 40px rgba(0,137,123,0.20);
  --ad-bg:     rgba(0,137,123,0.05);
  --ad-border: rgba(0,137,123,0.14);
}

/* ================================================================
   SUNRISE THEME  (warm amber/orange energetic)
   ================================================================ */
[data-theme="sunrise"] {
  --bg:            #FFFBF0;
  --bg-2:          #FFF3D0;
  --surface:       #FFFFFF;
  --surface-2:     #FFF3D0;
  --surface-3:     #FFE9B0;
  --topbar-bg:     rgba(255,251,240,0.97);
  --topbar-border: rgba(180,80,0,0.12);
  --topbar-text:   #3D1800;
  --topbar-search: #FFE9B0;
  --card-bg:       #FFFFFF;
  --card-border:   rgba(217,119,6,0.18);
  --card-shadow:   0 2px 12px rgba(217,119,6,0.10);
  --text:          #3D1800;
  --text-muted:    #7A4010;
  --text-light:    #B06020;
  --border:        rgba(100,40,0,0.12);
  --border-strong: rgba(100,40,0,0.22);
  --input-bg:      #FFFFFF;
  --input-border:  rgba(180,80,0,0.18);
  --input-text:    #3D1800;
  --input-placeholder: #B06020;
  --input-focus-border: #D97706;
  --input-focus-shadow: 0 0 0 3px rgba(217,119,6,0.16);
  --btn-primary-bg:   linear-gradient(135deg,#D97706,#F59E0B);
  --btn-primary-text: #3D1800;
  --btn-secondary-bg:    #FFE9B0;
  --btn-secondary-text:  #7A3B00;
  --btn-secondary-border:rgba(217,119,6,0.28);
  --accent:        #D97706;
  --accent-dark:   #B45309;
  --accent-mid:    #F59E0B;
  --accent-light:  #FFF3D0;
  --accent-glow:   rgba(217,119,6,0.18);
  --accent-border: rgba(217,119,6,0.25);
  --sidebar-bg:    linear-gradient(165deg,#7C2D12 0%,#431407 100%);
  --sidebar-border:rgba(254,215,170,0.22);
  --sidebar-hover: rgba(254,215,170,0.12);
  --sidebar-active:rgba(254,215,170,0.22);
  --sidebar-icon-bg:rgba(254,215,170,0.18);
  --shadow-md:  0 4px 20px rgba(217,119,6,0.14);
  --shadow-lg:  0 12px 40px rgba(217,119,6,0.20);
  --ad-bg:     rgba(217,119,6,0.05);
  --ad-border: rgba(217,119,6,0.15);
}

/* ================================================================
   FOREST THEME  (deep green, natural, refreshing)
   ================================================================ */
[data-theme="forest"] {
  --bg:            #F0FDF4;
  --bg-2:          #DCFCE7;
  --surface:       #FFFFFF;
  --surface-2:     #DCFCE7;
  --surface-3:     #BBF7D0;
  --topbar-bg:     rgba(240,253,244,0.97);
  --topbar-border: rgba(0,100,40,0.12);
  --topbar-text:   #052E16;
  --topbar-search: #BBF7D0;
  --card-bg:       #FFFFFF;
  --card-border:   rgba(5,150,105,0.16);
  --card-shadow:   0 2px 12px rgba(5,150,105,0.10);
  --text:          #052E16;
  --text-muted:    #166534;
  --text-light:    #4ADE80;
  --text-light:    #3D8B5A;
  --border:        rgba(0,80,30,0.12);
  --border-strong: rgba(0,80,30,0.22);
  --input-bg:      #FFFFFF;
  --input-border:  rgba(5,150,105,0.20);
  --input-text:    #052E16;
  --input-placeholder: #3D8B5A;
  --input-focus-border: #059669;
  --input-focus-shadow: 0 0 0 3px rgba(5,150,105,0.16);
  --btn-primary-bg:   linear-gradient(135deg,#059669,#16A34A);
  --btn-primary-text: #FFFFFF;
  --btn-secondary-bg:    #BBF7D0;
  --btn-secondary-text:  #065F46;
  --btn-secondary-border:rgba(5,150,105,0.25);
  --accent:        #059669;
  --accent-dark:   #065F46;
  --accent-mid:    #16A34A;
  --accent-light:  #DCFCE7;
  --accent-glow:   rgba(5,150,105,0.18);
  --accent-border: rgba(5,150,105,0.22);
  --sidebar-bg:    linear-gradient(165deg,#14532D 0%,#052E16 100%);
  --sidebar-border:rgba(187,247,208,0.22);
  --sidebar-hover: rgba(187,247,208,0.12);
  --sidebar-active:rgba(187,247,208,0.22);
  --sidebar-icon-bg:rgba(187,247,208,0.18);
  --shadow-md:  0 4px 20px rgba(5,150,105,0.14);
  --shadow-lg:  0 12px 40px rgba(5,150,105,0.20);
  --ad-bg:     rgba(5,150,105,0.05);
  --ad-border: rgba(5,150,105,0.14);
}

/* ================================================================
   GLOBAL COMPONENT STYLES (theme-aware via CSS variables)
   ================================================================ */

/* ── Sidebar ──────────────────────────────────────────── */
.sidebar {
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
}
.sidebar::before {
  background: radial-gradient(ellipse at top, rgba(255,255,255,0.08), transparent);
}
.sidebar-brand { border-bottom: 1px solid var(--sidebar-border); }
.sb-brand-name { color: var(--sidebar-text); }
.sb-brand-name span { color: rgba(255,255,255,0.80); }
.nav-item { color: var(--sidebar-text); }
.nav-item:hover {
  background: var(--sidebar-hover);
  color: var(--sidebar-text);
}
.nav-item.active {
  background: var(--sidebar-active);
  color: #FFFFFF;
}
.nav-icon { background: var(--sidebar-icon-bg); color: var(--sidebar-text); }
.nav-label { color: var(--sidebar-muted); }
.profile-mini { background: var(--sidebar-hover); }
.profile-name { color: var(--sidebar-text); font-weight: 700; }
.profile-role { color: var(--sidebar-muted); }
.sidebar-footer { border-top: 1px solid var(--sidebar-border); }
.btn-logout {
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--sidebar-border);
  color: var(--sidebar-muted);
}
.btn-logout:hover {
  background: rgba(255,255,255,0.15);
  color: var(--sidebar-text);
}

/* ── Topbar ───────────────────────────────────────────── */
.home-topbar, .topbar {
  background: var(--topbar-bg);
  border-bottom: 1px solid var(--topbar-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.topbar-search, .topbar-search input {
  background: var(--topbar-search);
  color: var(--topbar-text);
}
.topbar-search input::placeholder { color: var(--input-placeholder); }
.topbar-icon-btn {
  background: var(--topbar-search);
  color: var(--text-muted);
  border: 1px solid var(--border);
}
.topbar-icon-btn:hover { background: var(--accent-light); color: var(--accent); }
.topbar-avatar {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  font-weight: 700;
}

/* ── Cards ────────────────────────────────────────────── */
.stat-box, .biz-card, .prod-card, .order-card,
.chart-card, .table-card, .settings-card,
.insight-card, .panel, .bid-card, .chat-main,
.chat-sidebar, .composer, .fw-composer,
.pf-card, .negotiate-card, .courier-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
  color: var(--text);
}
.table-card-header, .chart-card-header {
  border-bottom: 1px solid var(--border);
  color: var(--text);
}

/* ── Buttons ──────────────────────────────────────────── */
.btn-primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border: none;
  font-weight: 700;
  border-radius: var(--radius-sm);
  padding: 10px 20px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: var(--transition);
  box-shadow: 0 2px 8px var(--accent-glow);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.875rem;
  letter-spacing: 0.01em;
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px var(--accent-glow);
  filter: brightness(1.06);
}
.btn-primary:active { transform: translateY(0); }

.btn-secondary {
  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-text);
  border: 1px solid var(--btn-secondary-border);
  font-weight: 600;
  border-radius: var(--radius-sm);
  padding: 10px 20px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: var(--transition);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.875rem;
}
.btn-secondary:hover {
  background: var(--accent-light);
  border-color: var(--accent-border);
  color: var(--accent-dark);
}

.btn-danger {
  background: var(--red-light);
  color: var(--red);
  border: 1px solid rgba(220,38,38,0.22);
}
.btn-danger:hover { background: var(--red); color: #FFFFFF; }

/* ── Forms / Inputs ───────────────────────────────────── */
input, select, textarea {
  background: var(--input-bg);
  color: var(--input-text);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.9rem;
  transition: var(--transition);
  outline: none;
  width: 100%;
}
input::placeholder, textarea::placeholder { color: var(--input-placeholder); }
input:focus, select:focus, textarea:focus {
  border-color: var(--input-focus-border);
  box-shadow: var(--input-focus-shadow);
  background: var(--input-bg);
}
select { cursor: pointer; }
label {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  display: block;
  margin-bottom: 6px;
}

/* ── Tables ───────────────────────────────────────────── */
.data-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.data-table th {
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 12px 16px;
  border-bottom: 2px solid var(--border);
  text-align: left;
}
.data-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  vertical-align: middle;
}
.data-table tr:hover td { background: var(--surface-2); }
.data-table tr:last-child td { border-bottom: none; }

/* ── Filter chips / tabs ──────────────────────────────── */
.filter-chip, .tab-btn {
  padding: 8px 18px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.82rem;
  cursor: pointer;
  transition: var(--transition);
  font-family: 'DM Sans', sans-serif;
}
.filter-chip:hover { border-color: var(--accent-border); color: var(--accent); }
.filter-chip.active, .tab-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--text-on-accent);
  box-shadow: 0 2px 10px var(--accent-glow);
}

/* ── Status chips ─────────────────────────────────────── */
.status-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.status-chip.status-active, .s-paid   { color:var(--status-paid); background:var(--status-paid-bg); }
.s-pending    { color:var(--status-pending); background:var(--status-pending-bg); }
.s-cancel     { color:var(--status-cancelled); background:var(--status-cancelled-bg); }
.s-processing { color:var(--status-processing); background:var(--status-processing-bg); }
.s-accepted   { color:var(--status-paid); background:var(--status-paid-bg); }
.s-completed  { color:var(--status-paid); background:var(--status-paid-bg); }

/* ── Toasts ───────────────────────────────────────────── */
.toast {
  position: fixed;
  bottom: 28px;
  right: 20px;
  z-index: 9999;
  background: var(--accent);
  color: #FFFFFF;
  padding: 14px 22px;
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  font-weight: 600;
  box-shadow: 0 8px 30px var(--accent-glow);
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 320px;
  animation: toastSlideUp 0.3s ease;
}
@keyframes toastSlideUp {
  from { opacity:0; transform:translateY(16px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ── Modals ───────────────────────────────────────────── */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 400;
  backdrop-filter: blur(6px);
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: fadeIn 0.2s ease;
}
.modal-overlay.show { display: flex; }
.modal {
  background: var(--surface);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  width: 100%;
  max-width: 680px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  animation: modalSlideUp 0.3s ease;
  overflow: hidden;
}
.modal-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--surface-2);
}
.modal-header h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 10px;
}
.modal-header h3 i { color: var(--accent); }
.modal-close {
  width: 32px; height: 32px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 50%;
  cursor: pointer;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  font-size: 0.85rem;
}
.modal-close:hover { background: var(--accent); color: #FFF; border-color: var(--accent); }
.modal-body { padding: 24px; overflow-y: auto; flex: 1; }
.modal-footer {
  padding: 18px 24px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  background: var(--surface-2);
}
@keyframes fadeIn { from{opacity:0;} to{opacity:1;} }
@keyframes modalSlideUp { from{opacity:0;transform:translateY(24px) scale(0.97);} to{opacity:1;transform:translateY(0) scale(1);} }

/* ── Form rows ────────────────────────────────────────── */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.form-row:last-child { margin-bottom: 0; }
.form-field { display: flex; flex-direction: column; }
.form-full { grid-column: 1 / -1; }

/* ── Page layout ──────────────────────────────────────── */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
  flex-wrap: wrap;
  gap: 12px;
}
.page-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.75rem;
  font-weight: 900;
  color: var(--text);
  line-height: 1.2;
}
.page-title span, .page-title em { color: var(--accent); font-style: normal; }
.page-content { padding: 28px 32px 80px; }
.main-content { margin-left: var(--sidebar-w); min-height: 100vh; background: var(--bg); }

/* ── Stat boxes ───────────────────────────────────────── */
.stats-bar { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; margin-bottom: 24px; }
.stat-box {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: var(--card-shadow);
  transition: var(--transition);
}
.stat-box:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.stat-box-icon {
  width: 44px; height: 44px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.stat-box.purple .stat-box-icon { background: var(--accent-light); color: var(--accent); }
.stat-box.green  .stat-box-icon { background: var(--green-light); color: var(--green); }
.stat-box.gold   .stat-box-icon { background: var(--gold-light); color: var(--gold); }
.stat-box.blue   .stat-box-icon { background: var(--blue-light); color: var(--blue); }
.stat-box-num { font-size: 1.5rem; font-weight: 800; color: var(--text); line-height: 1; margin-bottom: 2px; }
.stat-box-label { font-size: 0.75rem; color: var(--text-muted); font-weight: 500; }

/* ── AdSense Units ────────────────────────────────────── */
.mn-ad-unit {
  width: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--ad-bg);
  border: 1px dashed var(--ad-border);
  border-radius: var(--radius-md);
  margin: 28px 0;
  padding: 10px 0;
  min-height: 90px;
  position: relative;
  transition: var(--transition);
}
.mn-ad-unit ins { display: block; width: 100%; }
.mn-ad-label {
  position: absolute;
  top: 6px; left: 12px;
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--text-light);
  text-transform: uppercase;
  font-weight: 600;
}
/* 3 standard AdSense slot sizes */
.mn-ad-unit.leaderboard { min-height: 90px; }
.mn-ad-unit.rectangle   { min-height: 250px; max-width: 336px; margin: 24px auto; }
.mn-ad-unit.banner      { min-height: 60px; }

/* ── Mobile bottom nav ────────────────────────────────── */
.mob-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 64px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  z-index: 300;
  align-items: center;
  justify-content: space-around;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
}
.mob-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.62rem;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  transition: var(--transition);
}
.mob-nav-item i { font-size: 1.15rem; }
.mob-nav-item.active { color: var(--accent); }
.mob-nav-item:hover { color: var(--accent); }

/* ── Chat layout ──────────────────────────────────────── */
.chat-layout { display: grid; grid-template-columns: 300px 1fr; height: calc(100vh - 140px); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); box-shadow: var(--card-shadow); }
.chat-sidebar { background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; }
.chat-main { background: var(--surface); display: flex; flex-direction: column; }
.chat-messages { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 12px; background: var(--bg); }
.msg { max-width: 70%; padding: 12px 16px; border-radius: var(--radius-md); font-size: 0.875rem; line-height: 1.5; position: relative; }
.msg-out { background: var(--accent); color: #FFF; align-self: flex-end; border-bottom-right-radius: 4px; }
.msg-in  { background: var(--surface); color: var(--text); border: 1px solid var(--border); align-self: flex-start; border-bottom-left-radius: 4px; }
.msg-time { font-size: 0.65rem; opacity: 0.65; margin-top: 4px; text-align: right; }

/* ── Section dividers ─────────────────────────────────── */
.section-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.section-title i { color: var(--accent); }
.section-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
  margin-left: 12px;
}

/* ═══════════════════════════════════════
   MOBILE RESPONSIVE — full breakpoint system
   ═══════════════════════════════════════ */

/* Tablet — 1024px */
@media(max-width:1024px) {
  .stats-bar { grid-template-columns: repeat(2,1fr); }
  .page-content { padding: 24px 24px 80px; }
}

/* Tablet small — 900px */
@media(max-width:900px) {
  .sidebar { transform: translateX(-100%); transition: transform 0.3s ease; }
  .sidebar.open { transform: translateX(0); }
  .main-content { margin-left: 0; }
  .mob-bottom-nav { display: flex; }
  .page-content { padding: 20px 18px 80px; }
  .chat-layout { grid-template-columns: 1fr; height: auto; }
  .chat-sidebar { display: none; height: 300px; }
  .chat-sidebar.active { display: flex; }
}

/* Mobile large — 768px */
@media(max-width:768px) {
  .stats-bar { grid-template-columns: repeat(2,1fr); gap: 12px; }
  .form-row { grid-template-columns: 1fr; }
  .page-title { font-size: 1.4rem; }
  .table-card { overflow-x: auto; }
  .data-table { min-width: 560px; }
  .modal { max-width: 96vw; }
  .topbar-search { max-width: 200px; }
  .page-header { flex-direction: column; align-items: flex-start; }
}

/* Mobile medium — 600px */
@media(max-width:600px) {
  .stats-bar { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat-box { padding: 14px 12px; }
  .stat-box-num { font-size: 1.25rem; }
  .btn-primary, .btn-secondary { padding: 9px 16px; font-size: 0.82rem; }
  .modal-body { padding: 16px; }
  .modal-footer { padding: 14px 16px; }
  .mn-ad-unit.rectangle { max-width: 100%; }
}

/* Mobile small — 480px */
@media(max-width:480px) {
  .page-content { padding: 16px 14px 80px; }
  .stats-bar { grid-template-columns: 1fr 1fr; gap: 8px; }
  .page-title { font-size: 1.25rem; }
  .topbar-search { display: none; }
  input, select, textarea { font-size: 0.875rem; padding: 9px 12px; }
  .data-table { min-width: 480px; }
  .modal-header { padding: 14px 16px; }
}

/* Mobile XS — 380px */
@media(max-width:380px) {
  .stats-bar { grid-template-columns: 1fr; }
  .page-content { padding: 14px 12px 80px; }
  .mob-nav-item span { display: none; }
  .mob-nav-item i { font-size: 1.3rem; }
  .mob-bottom-nav { height: 56px; }
}