/* ══════════════════════════════════════════════════════════
   DESIGN TOKENS  —  Touch2Me · Stitch Design System
   Sidebar (#0b1c30) · WhatsApp Green (#25D366) · Blue-tinted surfaces
   Based on Google Stitch project: 9495103547124218278
══════════════════════════════════════════════════════════ */

/* Utility — must come before component styles so components can override */
.hidden { display: none !important; }
:root {
  /* Sidebar */
  --sidebar-width: 240px;
  --sidebar-bg:    #0b1c30;

  /* Brand accent — WhatsApp Green (Stitch primary-container) */
  --accent:        #25D366;
  --accent-dark:   #128C7E;
  --accent-light:  #e6faf0;
  --accent-glow:   rgba(37,211,102,.18);

  /* Stitch surface scale (light) */
  --bg:            #f8f9ff;
  --bg-secondary:  #eff4ff;
  --card:          #ffffff;
  --surface-container: #e5eeff;
  --surface-container-high: #dce9ff;
  --border:        #d3e4fe;
  --border-light:  #eff4ff;

  /* Text — Stitch on-surface scale */
  --text-primary:   #0b1c30;
  --text-secondary: #3c4a3d;
  --text-muted:     #6c7b6b;

  /* Semantic — separate from accent */
  --green:       #22c55e;
  --green-light: #dcfce7;
  --red:         #ba1a1a;
  --red-light:   #ffdad6;
  --orange:      #f97316;
  --orange-light:#fff7ed;
  --amber:       #f59e0b;
  --amber-light: #fef3c7;
  --blue:        #34b7f1;
  --blue-light:  #dbeafe;
  --purple:      #8b5cf6;
  --purple-light:#ede9fe;
  --teal:        #006b5f;
  --teal-light:  #8cf1e1;
  --indigo:      #6366f1;
  --indigo-light:#eef2ff;

  /* WhatsApp chat colours */
  --bubble-sent:   #d9fdd3;
  --bubble-recv:   #ffffff;
  --wa-green:      #25D366;
  --wa-green-dark: #128C7E;
  --wa-green-light:#e6faf0;
  --wa-chat-bg:    #efeae2;
  --wa-tick-grey:  #8696a0;
  --wa-tick-blue:  #53bdeb;

  /* Radius — Stitch ROUND_EIGHT: 8px base */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  /* Shadows — Stitch elevation levels */
  --shadow-sm:   0 1px 3px rgba(11,28,48,.06), 0 1px 2px rgba(11,28,48,.04);
  --shadow-md:   0 4px 6px -1px rgba(11,28,48,.07), 0 2px 4px -1px rgba(11,28,48,.05);
  --shadow-lg:   0 10px 15px -3px rgba(11,28,48,.10), 0 4px 6px -2px rgba(11,28,48,.06);
  --shadow-card: 0 1px 3px rgba(11,28,48,.06), 0 1px 2px rgba(11,28,48,.04);

  /* Typography — Plus Jakarta Sans (headlines) + Inter (body) */
  --font-headline: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ══════════════════════════════════════════════════════════
   DARK MODE TOKENS
══════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  /* Stitch dark: inverse-surface (#213145) as card, deeper for bg */
  --bg:            #0f1923;
  --bg-secondary:  #131f2e;
  --card:          #213145;
  --surface-container: #1a2a3e;
  --surface-container-high: #1e3048;
  --border:        #2a3a52;
  --border-light:  #1e2d42;

  /* Text — Stitch inverse-on-surface (#eaf1ff) for primary */
  --text-primary:   #eaf1ff;
  --text-secondary: #94A3B8;
  --text-muted:     #64748B;

  /* Accent stays WhatsApp green */
  --accent-light:  rgba(37,211,102,.15);
  --accent-glow:   rgba(37,211,102,.28);

  /* Semantic light variants — glowing */
  --green-light:  rgba(34,197,94,.15);
  --red-light:    rgba(186,26,26,.18);
  --orange-light: rgba(249,115,22,.15);
  --amber-light:  rgba(245,158,11,.15);
  --blue-light:   rgba(52,183,241,.15);
  --purple-light: rgba(139,92,246,.15);
  --teal-light:   rgba(0,107,95,.20);
  --indigo-light: rgba(99,102,241,.15);

  /* WhatsApp dark chat theme */
  --bubble-sent:  #005c4b;
  --bubble-recv:  #202c33;
  --wa-chat-bg:   #0b141a;

  /* Shadows — Stitch dark uses border-glows over shadows */
  --shadow-sm:   0 1px 3px rgba(0,0,0,.5);
  --shadow-md:   0 4px 16px rgba(0,0,0,.6);
  --shadow-lg:   0 16px 48px rgba(0,0,0,.8);
  --shadow-card: 0 1px 4px rgba(0,0,0,.4);
}

/* Dark mode: bubble text colours */
[data-theme="dark"] .bubble.sent  { color: #e9edef; }
[data-theme="dark"] .bubble.received { color: #e9edef; }
[data-theme="dark"] .bubble-ts { color: #8696a0; }

/* Dark mode: data table row hover */
[data-theme="dark"] .data-table tr:hover td { background: var(--surface-container); }
[data-theme="dark"] .data-table th { background: var(--bg-secondary); }

/* Dark mode: sidebar stays deep navy */
[data-theme="dark"] #sidebar { background: #080E1C; }

/* Dark: modal overlay slightly different */
[data-theme="dark"] .modal-overlay { background: rgba(0,0,0,.7); }

/* ── Theme toggle button ── */
.theme-toggle-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: rgba(255,255,255,.4);
  font-size: 12px;
  font-weight: 500;
  font-family: var(--font);
  border-radius: 8px;
  transition: background .15s, color .15s;
  text-align: left;
}
.theme-toggle-btn:hover { background: rgba(255,255,255,.06); color: rgba(255,255,255,.75); }
.theme-toggle-track {
  width: 32px; height: 18px;
  border-radius: 999px;
  background: rgba(255,255,255,.15);
  position: relative;
  flex-shrink: 0;
  transition: background .2s;
}
[data-theme="dark"] .theme-toggle-track { background: var(--accent); }
.theme-toggle-thumb {
  position: absolute;
  top: 2px; left: 2px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #fff;
  transition: transform .2s;
}
[data-theme="dark"] .theme-toggle-thumb { transform: translateX(14px); }

/* ══════════════════════════════════════════════════════════
   RESET & BASE
══════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#app {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

#sidebar {
  width: var(--sidebar-width);
  min-width: var(--sidebar-width);
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

#main-content {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  min-width: 0;
}

/* ══════════════════════════════════════════════════════════
   SHARED CARD
══════════════════════════════════════════════════════════ */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  transition: box-shadow .2s;
}
.card:focus-within { box-shadow: var(--shadow-md); }

/* ══════════════════════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: var(--radius-sm);
  border: none;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  transition: all .18s;
  text-decoration: none;
  white-space: nowrap;
  letter-spacing: -.1px;
}
.btn-primary {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 2px 8px var(--accent-glow);
  font-family: var(--font);
  font-weight: 600;
}
.btn-primary:hover {
  background: var(--accent-dark);
  box-shadow: 0 4px 14px var(--accent-glow);
  transform: translateY(-1px);
}
.btn-primary:active { transform: scale(.98); }
.btn-secondary {
  background: transparent;
  color: var(--text-primary);
  border: 1.5px solid var(--border);
}
.btn-secondary:hover { background: var(--bg-secondary); border-color: var(--accent); color: var(--accent); }
.btn-ghost { background: transparent; color: var(--text-secondary); border: 1.5px solid transparent; }
.btn-ghost:hover { background: var(--bg-secondary); color: var(--text-primary); }
.btn-danger { background: var(--red); color: #fff; box-shadow: 0 2px 8px rgba(186,26,26,.25); }
.btn-danger:hover { background: #9b1212; transform: translateY(-1px); }
.btn-success { background: #22c55e; color: #fff; }
.btn-success:hover { background: #16a34a; transform: translateY(-1px); }

/* ══════════════════════════════════════════════════════════
   BADGES
══════════════════════════════════════════════════════════ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  letter-spacing: .1px;
}
.badge-green  { background: var(--green-light);  color: #15803d; }
.badge-red    { background: var(--red-light);    color: #dc2626; }
.badge-orange { background: var(--orange-light); color: #c2410c; }
.badge-amber  { background: var(--amber-light);  color: #b45309; }
.badge-blue   { background: var(--blue-light);   color: #1d4ed8; }
.badge-purple { background: var(--purple-light); color: #7c3aed; }
.badge-grey   { background: var(--border-light); color: var(--text-secondary); }
.badge-copper { background: var(--accent-light); color: var(--accent-dark); }

.tag-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
}

/* ══════════════════════════════════════════════════════════
   FORM ELEMENTS
══════════════════════════════════════════════════════════ */
input[type=text], input[type=email], input[type=url],
input[type=password], input[type=tel], input[type=number],
select {
  width: 100%;
  height: 44px;
  padding: 0 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-family: var(--font);
  color: var(--text-primary);
  background: var(--card);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-family: var(--font);
  color: var(--text-primary);
  background: var(--card);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(37,211,102,.20);
}

.form-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 5px;
  letter-spacing: .1px;
}

.form-input {
  display: block;
  width: 100%;
  padding: 9px 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-family: var(--font);
  color: var(--text-primary);
  background: var(--card);
  outline: none;
  box-sizing: border-box;
  transition: border-color .15s, box-shadow .15s;
}
.form-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }

/* ══════════════════════════════════════════════════════════
   SPINNER
══════════════════════════════════════════════════════════ */
.spinner {
  width: 20px; height: 20px;
  border: 2.5px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .6s linear infinite;
  display: inline-block;
  flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ══════════════════════════════════════════════════════════
   PAGE WRAPPERS
══════════════════════════════════════════════════════════ */
.page-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 28px;
  border-bottom: 1px solid var(--border);
  background: var(--card);
  flex-shrink: 0;
  gap: 12px;
}
.page-header h1 {
  font-size: 20px;
  font-weight: 700;
  font-family: var(--font-headline);
  color: var(--text-primary);
  letter-spacing: -.3px;
}
.page-header p  { font-size: 12px; color: var(--text-secondary); margin-top: 2px; line-height: 1.4; }

/* Title + count on same line (Flup style) */
.page-title-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.page-title-row h1 {
  font-size: 20px;
  font-weight: 700;
  font-family: var(--font-headline);
  color: var(--text-primary);
  letter-spacing: -.3px;
  margin: 0;
}
.page-record-count {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
}

.page-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px 28px;
}

/* ══════════════════════════════════════════════════════════
   PILL TAB FILTERS  (Flup style)
   Usage: <div class="page-tabs">
            <button class="page-tab active">All <span class="page-tab-count">152</span></button>
            <button class="page-tab">Sent <span class="page-tab-count">77</span></button>
          </div>
══════════════════════════════════════════════════════════ */
.page-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 28px;
  background: var(--card);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  flex-wrap: wrap;
}

.page-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  background: transparent;
  font-size: 13px;
  font-weight: 500;
  font-family: var(--font);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background .13s, color .13s, border-color .13s;
  white-space: nowrap;
  letter-spacing: -.1px;
}
.page-tab:hover {
  background: var(--bg);
  color: var(--text-primary);
}
.page-tab.active {
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  border-color: transparent;
}
.page-tab.active:hover { background: var(--accent-dark); }

.page-tab-count {
  font-size: 11px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(0,0,0,.10);
  color: inherit;
  line-height: 1.5;
}
.page-tab:not(.active) .page-tab-count {
  background: var(--border-light);
  color: var(--text-muted);
}

/* ── Flat search bar variant ─────────────────────────── */
.search-bar {
  position: relative;
  flex: 1;
}
.search-bar input {
  padding-left: 36px;
  padding-right: 12px;
  height: 36px;
  background: var(--bg);
  border: 1.5px solid var(--border-light);
  border-radius: 999px;
  font-size: 13px;
  color: var(--text-primary);
  width: 100%;
}
.search-bar input:focus {
  border-color: var(--accent);
  background: var(--card);
  box-shadow: none;
}
.search-bar svg {
  position: absolute;
  left: 12px; top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════════
   TOP BAR
══════════════════════════════════════════════════════════ */
.top-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  background: var(--card);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.top-bar-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -.2px;
  white-space: nowrap;
}
.top-bar-search {
  flex: 1;
  position: relative;
  max-width: 340px;
}
.top-bar-search input {
  padding-left: 36px;
  background: var(--bg);
  border-color: transparent;
  border-radius: 999px;
  height: 36px;
  font-size: 13px;
}
.top-bar-search input:focus {
  background: var(--card);
  border-color: var(--accent);
  border-radius: 999px;
  box-shadow: none;
}
.top-bar-search svg {
  position: absolute;
  left: 12px; top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}
.top-bar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.icon-btn {
  width: 36px; height: 36px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border);
  background: var(--card);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-secondary);
  transition: all .15s;
}
.icon-btn:hover { background: var(--bg); color: var(--text-primary); border-color: #d6d3d1; }

.avatar-sm {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--accent);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 12px; font-weight: 700;
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════
   TABLES
══════════════════════════════════════════════════════════ */
.data-table { width: 100%; border-collapse: collapse; }
.data-table th {
  text-align: left;
  padding: 10px 16px;
  height: 40px;
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font);
  color: var(--text-muted);
  border-bottom: 1.5px solid var(--border);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: .08em;
  background: var(--bg-secondary);
}
.data-table td {
  padding: 0 16px;
  height: 52px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  font-size: 14px;
  font-family: var(--font);
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: var(--surface-container); }

/* ══════════════════════════════════════════════════════════
   PAGINATION
══════════════════════════════════════════════════════════ */
.pagination { display: flex; align-items: center; gap: 4px; justify-content: flex-end; }
.page-btn {
  width: 32px; height: 32px;
  border-radius: var(--radius-xs);
  border: 1.5px solid var(--border);
  background: var(--card);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-primary);
  transition: all .15s;
  font-family: var(--font);
}
.page-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: 0 4px 12px var(--accent-glow); }
.page-btn:hover:not(.active) { background: var(--bg); border-color: #d6d3d1; }
.page-btn:disabled { opacity: .4; cursor: not-allowed; }

/* ══════════════════════════════════════════════════════════
   EMPTY STATE
══════════════════════════════════════════════════════════ */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 60px 20px;
  color: var(--text-muted);
  text-align: center;
}
.empty-state svg { opacity: .3; }
.empty-state p { font-size: 13px; }

/* ══════════════════════════════════════════════════════════
   MODALS
══════════════════════════════════════════════════════════ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(12,10,9,.5);
  backdrop-filter: blur(3px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal {
  background: var(--card);
  border-radius: var(--radius-lg);
  width: 500px;
  max-width: 95vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  border: 1px solid var(--border);
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--border);
}
.modal-header h3 { font-size: 16px; font-weight: 700; letter-spacing: -.2px; }
.modal-body {
  padding: 20px 22px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 22px;
  border-top: 1px solid var(--border);
}
.modal-close {
  width: 30px; height: 30px;
  border-radius: 7px;
  border: none;
  background: var(--bg);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-secondary);
  transition: .12s;
}
.modal-close:hover { background: var(--red-light); color: var(--red); }

/* ══════════════════════════════════════════════════════════
   SIDEBAR OVERLAY
══════════════════════════════════════════════════════════ */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 199;
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  #app { padding-top: 54px; }

  #main-content {
    width: 100%;
    background: var(--card);
    padding-bottom: 62px;
  }

  .page-header { padding: 14px 16px; flex-wrap: wrap; gap: 8px; }
  .page-header h1 { font-size: 17px; }
  .page-body { padding: 14px; }

  .top-bar { padding: 8px 12px; gap: 8px; flex-wrap: wrap; }
  .top-bar-title { display: none; }
  .top-bar-search { max-width: 100%; flex: 1 1 auto; }
  .top-bar-actions { margin-left: auto; flex-shrink: 0; }

  .data-table th, .data-table td { padding: 10px 12px; font-size: 12px; }

  .modal-overlay { align-items: flex-end; }
  .modal {
    width: 100%;
    max-width: 100%;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    max-height: 92vh;
  }

  .pagination { justify-content: center; flex-wrap: wrap; }
}

@media (max-width: 480px) {
  .page-body { padding: 10px; }
  .page-header { padding: 12px; }
  .btn { padding: 7px 14px; font-size: 12px; }
  .badge { padding: 2px 8px; font-size: 10px; }
  .hide-mobile { display: none !important; }
}

/* ══════════════════════════════════════════════════════════
   GLOBAL MOBILE TOP BAR
══════════════════════════════════════════════════════════ */
#mobile-topbar { display: none; }

@media (max-width: 768px) {
  #mobile-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 54px;
    background: var(--sidebar-bg);
    z-index: 150;
    padding: 0 18px;
    border-bottom: 1px solid rgba(255,255,255,.06);
  }

  .mob-brand { display: flex; align-items: center; gap: 9px; }
  .mob-brand-logo {
    width: 28px; height: 28px;
    background: var(--accent);
    border-radius: 7px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 3px 10px rgba(37,211,102,.4);
  }
  .mob-brand-name {
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -.2px;
    font-family: var(--font);
  }

  .mob-profile {
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
    display: flex; align-items: center; justify-content: center;
  }
  .mob-avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid rgba(255,255,255,.15);
  }
}

/* ══════════════════════════════════════════════════════════
   BOTTOM NAV
══════════════════════════════════════════════════════════ */
#bottom-nav { display: none; }

@media (max-width: 768px) {
  #bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: 62px;
    background: var(--card);
    border-top: 1px solid var(--border);
    z-index: 150;
    box-shadow: 0 -2px 16px rgba(0,0,0,.06);
  }

  .bottom-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    transition: color .15s;
    padding: 6px 4px;
    -webkit-tap-highlight-color: transparent;
  }
  .bottom-nav-item.active { color: var(--accent); }
  .bnav-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .1px;
    line-height: 1;
    font-family: var(--font);
  }
}

/* ══════════════════════════════════════════════════════════
   MORE SHEET
══════════════════════════════════════════════════════════ */
#more-sheet-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 300;
  opacity: 0;
  transition: opacity .25s;
}
#more-sheet-overlay.open { display: block; opacity: 1; }

#more-sheet {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--card);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  z-index: 301;
  padding: 10px 18px 36px;
  transform: translateY(100%);
  transition: transform .3s cubic-bezier(.32,0,.67,0);
  box-shadow: 0 -8px 48px rgba(0,0,0,.12);
}
#more-sheet.open {
  transform: translateY(0);
  transition: transform .32s cubic-bezier(.33,1,.68,1);
}

.more-sheet-handle {
  width: 36px; height: 4px;
  background: var(--border);
  border-radius: 99px;
  margin: 0 auto 16px;
}
.more-sheet-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .7px;
  margin-bottom: 14px;
  font-family: var(--font);
}
.more-sheet-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.more-sheet-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 14px 8px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--border);
  background: var(--bg);
  cursor: pointer;
  color: var(--text-primary);
  transition: background .15s, border-color .15s;
  -webkit-tap-highlight-color: transparent;
}
.more-sheet-item:hover,
.more-sheet-item.active {
  background: var(--accent-light);
  border-color: var(--accent);
  color: var(--accent-dark);
}
.more-sheet-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--card);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent);
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.more-sheet-item.active .more-sheet-icon,
.more-sheet-item:hover .more-sheet-icon {
  background: var(--accent);
  color: #fff;
}
.more-sheet-label {
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  line-height: 1.2;
  font-family: var(--font);
}
.more-sheet-logout .more-sheet-icon { color: var(--red); background: var(--red-light); }
.more-sheet-logout:hover .more-sheet-icon { background: var(--red); color: #fff; }
.more-sheet-logout:hover { border-color: var(--red); color: var(--red); background: var(--red-light); }

/* ══════════════════════════════════════════════════════════
   DARK MODE — GLOBAL OVERRIDES
   Fixes hardcoded colors across all page CSS files
══════════════════════════════════════════════════════════ */

/* ── Inbox / Chat panel ── */
[data-theme="dark"] .conv-list-panel,
[data-theme="dark"] .chat-panel,
[data-theme="dark"] .contact-panel       { background: var(--card); }
[data-theme="dark"] .conv-item           { border-color: var(--border); }
[data-theme="dark"] .conv-item:hover,
[data-theme="dark"] .conv-item.active    { background: var(--surface-container); }
[data-theme="dark"] .conv-list-header,
[data-theme="dark"] .chat-header,
[data-theme="dark"] .contact-panel-header { background: var(--card); border-color: var(--border); }
[data-theme="dark"] .conv-list-search    { background: var(--surface-container); border-color: var(--border); }
[data-theme="dark"] .conv-list-search input { background: transparent; color: var(--text-primary); }
[data-theme="dark"] #chat-messages       { background: var(--wa-chat-bg); }
[data-theme="dark"] .chat-input-area     { background: var(--card); border-color: var(--border); }
[data-theme="dark"] #chat-input          { background: var(--surface-container); color: var(--text-primary); border-color: var(--border); }
[data-theme="dark"] .bubble.received     { background: var(--bubble-recv); color: #e9edef; }
[data-theme="dark"] .bubble.sent         { background: var(--bubble-sent); color: #e9edef; }
[data-theme="dark"] .bubble.received.with-tail::after { border-right-color: var(--bubble-recv); }
[data-theme="dark"] .bubble.sent.with-tail::after     { border-left-color: var(--bubble-sent); }
[data-theme="dark"] .date-sep span       { background: #182229; color: #8696a0; }
[data-theme="dark"] .window-banner       { background: #1a2c35; border-color: #2a3f4a; color: #8696a0; }
[data-theme="dark"] .emoji-picker-popup,
[data-theme="dark"] .attach-menu-popup   { background: #202c33; border-color: #2a3a42; }
[data-theme="dark"] .emoji-item:hover    { background: #2a3a42; }
[data-theme="dark"] .attach-menu-item:hover { background: #2a3a42; }
[data-theme="dark"] .attach-menu-item   { color: var(--text-primary); }
[data-theme="dark"] .chat-attach-btn,
[data-theme="dark"] .chat-emoji-btn,
[data-theme="dark"] .chat-template-btn  { color: #8696a0; }
[data-theme="dark"] .chat-attach-btn:hover,
[data-theme="dark"] .chat-emoji-btn:hover,
[data-theme="dark"] .chat-template-btn:hover { background: #2a3a42; color: var(--text-primary); }
[data-theme="dark"] .chat-send-btn      { background: var(--wa-green); }
[data-theme="dark"] .conv-tab           { color: #8696a0; }
[data-theme="dark"] .conv-tab.active    { color: var(--accent); border-color: var(--accent); }
[data-theme="dark"] .template-modal     { background: var(--card); border-color: var(--border); }
[data-theme="dark"] .template-search    { background: var(--surface-container); border-color: var(--border); color: var(--text-primary); }

/* ── Cards / Modals / Dropdowns ── */
[data-theme="dark"] .card               { background: var(--card); border-color: var(--border); }
[data-theme="dark"] .modal              { background: var(--card); border-color: var(--border); }
[data-theme="dark"] .modal-header       { border-color: var(--border); }
[data-theme="dark"] .modal-footer       { border-color: var(--border); }
[data-theme="dark"] .modal-close        { background: var(--surface-container); color: var(--text-secondary); }
[data-theme="dark"] .page-header        { background: var(--card); border-color: var(--border); }
[data-theme="dark"] .top-bar            { background: var(--card); border-color: var(--border); }
[data-theme="dark"] .page-tabs          { background: var(--card); border-color: var(--border); }
[data-theme="dark"] .icon-btn           { background: var(--card); border-color: var(--border); }
[data-theme="dark"] .icon-btn:hover     { background: var(--surface-container); }

/* ── Forms ── */
[data-theme="dark"] input[type=text],
[data-theme="dark"] input[type=email],
[data-theme="dark"] input[type=password],
[data-theme="dark"] input[type=tel],
[data-theme="dark"] input[type=number],
[data-theme="dark"] input[type=url],
[data-theme="dark"] textarea,
[data-theme="dark"] select,
[data-theme="dark"] .form-input         { background: var(--surface-container); color: var(--text-primary); border-color: var(--border); }

/* ── Tables ── */
[data-theme="dark"] .data-table th      { background: var(--bg-secondary); color: var(--text-muted); border-color: var(--border); }
[data-theme="dark"] .data-table td      { border-color: var(--border); color: var(--text-primary); }
[data-theme="dark"] .data-table tr:hover td { background: var(--surface-container); }

/* ── Badges — light variants need darker bg in dark mode ── */
[data-theme="dark"] .badge-green  { background: rgba(34,197,94,.15);  color: #4ade80; }
[data-theme="dark"] .badge-red    { background: rgba(239,68,68,.15);  color: #f87171; }
[data-theme="dark"] .badge-orange { background: rgba(249,115,22,.15); color: #fb923c; }
[data-theme="dark"] .badge-amber  { background: rgba(245,158,11,.15); color: #fbbf24; }
[data-theme="dark"] .badge-blue   { background: rgba(59,130,246,.15); color: #60a5fa; }
[data-theme="dark"] .badge-purple { background: rgba(139,92,246,.15); color: #a78bfa; }
[data-theme="dark"] .badge-grey   { background: var(--surface-container); color: var(--text-secondary); }

/* ── Bottom nav & Mobile topbar ── */
[data-theme="dark"] #bottom-nav { background: var(--sidebar-bg); border-color: var(--border); }
[data-theme="dark"] .bottom-nav-item { color: #475569; }
[data-theme="dark"] .bottom-nav-item.active { color: var(--accent); }
[data-theme="dark"] #more-sheet { background: #111827; }
[data-theme="dark"] .more-sheet-item { background: var(--surface-container); border-color: var(--border); color: var(--text-primary); }
[data-theme="dark"] .more-sheet-handle { background: var(--border); }

/* ── Billing cards ── */
[data-theme="dark"] .billing-overview-card,
[data-theme="dark"] .billing-usage-item,
[data-theme="dark"] .billing-txn-card,
[data-theme="dark"] .billing-insight-card,
[data-theme="dark"] .billing-support-card,
[data-theme="dark"] .billing-refund-card { background: var(--card); border-color: var(--border); }
[data-theme="dark"] .billing-usage-bar   { background: var(--surface-container); }
[data-theme="dark"] .billing-support-btn.email { background: var(--surface-container); color: var(--text-primary); border-color: var(--border); }
[data-theme="dark"] .billing-support-btn.whatsapp { background: rgba(34,197,94,.12); color: #4ade80; border-color: rgba(34,197,94,.3); }
[data-theme="dark"] .billing-plan-card   { background: var(--card); border-color: var(--border); }
[data-theme="dark"] .billing-plan-card.current { border-color: var(--accent); }

/* ── Settings ── */
[data-theme="dark"] .settings-nav-item  { color: var(--text-secondary); }
[data-theme="dark"] .settings-nav-item:hover,
[data-theme="dark"] .settings-nav-item.active { background: var(--surface-container); color: var(--text-primary); }
[data-theme="dark"] .settings-panel     { background: var(--card); }

/* ── Contacts / Leads / Campaign tables ── */
[data-theme="dark"] .stage-badge        { border-color: var(--border); }
[data-theme="dark"] .lead-card          { background: var(--card); border-color: var(--border); }

/* ── Inbox — text color overrides (hardcoded WA colors) ── */
[data-theme="dark"] .conv-list-title,
[data-theme="dark"] .conv-item-name,
[data-theme="dark"] .conv-item-last-msg,
[data-theme="dark"] .conv-tab,
[data-theme="dark"] #chat-input,
[data-theme="dark"] .contact-detail-name,
[data-theme="dark"] .contact-detail-row-val,
[data-theme="dark"] .attach-menu-item     { color: var(--text-primary); }

[data-theme="dark"] .compose-btn,
[data-theme="dark"] .chat-header-name,
[data-theme="dark"] .chat-header-status,
[data-theme="dark"] .conv-list-search input { color: var(--text-primary); }

[data-theme="dark"] .conv-item-last-msg,
[data-theme="dark"] .conv-time,
[data-theme="dark"] .contact-detail-phone,
[data-theme="dark"] .contact-detail-row-label,
[data-theme="dark"] .contact-detail-row svg,
[data-theme="dark"] .conv-list-search svg  { color: var(--text-muted); }

[data-theme="dark"] .conv-list-panel       { border-color: var(--border); }

[data-theme="dark"] .compose-btn:hover { background: #2a3a42; color: var(--text-primary); }
[data-theme="dark"] .chat-template-btn:hover { background: #2a3a42; color: var(--text-primary); }
[data-theme="dark"] .chat-input-emoji-btn:hover { background: #2a3a42; }

[data-theme="dark"] .conv-list-header  { background: #141f26; border-color: var(--border); }
[data-theme="dark"] .chat-header       { background: #1f2c33; border-color: #2a3a42; }
[data-theme="dark"] .conv-tab.active   { color: var(--accent); border-color: var(--accent); }
[data-theme="dark"] .conv-item.active  { background: #1f2c33; }
[data-theme="dark"] .conv-item:hover   { background: #182229; }

[data-theme="dark"] .window-banner     { background: #182229; border-color: #2a3a42; }

[data-theme="dark"] .chat-input-area   { background: #1f2c33; border-color: #2a3a42; }
[data-theme="dark"] #chat-input        { background: #2a3a42; color: var(--text-primary); }

[data-theme="dark"] .contact-panel     { background: #111b21; border-color: #2a3a42; }
[data-theme="dark"] .contact-panel-header { background: #1f2c33; border-color: #2a3a42; }
[data-theme="dark"] .contact-detail-section { border-color: #2a3a42; }
[data-theme="dark"] .contact-detail-section-title { background: #141f26; color: var(--text-muted); }

[data-theme="dark"] .emoji-picker-popup { background: #1f2c33; border-color: #2a3a42; }
[data-theme="dark"] .attach-menu-popup  { background: #1f2c33; border-color: #2a3a42; }

[data-theme="dark"] .template-modal     { background: #1a1a1a; }
[data-theme="dark"] .template-modal-header { border-color: var(--border); }
[data-theme="dark"] .template-search    { background: var(--surface-container); border-color: var(--border); color: var(--text-primary); }
[data-theme="dark"] .template-item      { border-color: var(--border); }
[data-theme="dark"] .template-item:hover { background: var(--surface-container); }
[data-theme="dark"] .template-item-name  { color: var(--text-primary); }
[data-theme="dark"] .template-item-body  { color: var(--text-secondary); }

/* ── Page-specific modal / panel backgrounds ── */
[data-theme="dark"] .csv-import-modal,
[data-theme="dark"] .compose-modal,
[data-theme="dark"] .team-modal         { background: var(--card); border-color: var(--border); }

/* ── Billing dark overrides ── */
[data-theme="dark"] .billing-plan-card.trial-card    { border-color: #22c55e; background: rgba(34,197,94,.08); }
[data-theme="dark"] .billing-cancel-btn:hover        { background: rgba(239,68,68,.12); }
[data-theme="dark"] .billing-card-btn.outline        { background: var(--surface-container); color: var(--text-primary); border-color: var(--border); }
[data-theme="dark"] .billing-card-btn.outline:hover  { background: #2f2f2f; border-color: #3a3a3a; }
[data-theme="dark"] .billing-card-btn.trial-btn      { background: rgba(34,197,94,.1); color: #4ade80; border-color: rgba(34,197,94,.3); }
[data-theme="dark"] .billing-card-btn.trial-btn:hover { background: rgba(34,197,94,.18); }
[data-theme="dark"] .billing-card-btn.current-btn    { background: var(--surface-container); border-color: var(--border); color: var(--text-muted); }
[data-theme="dark"] .billing-txn-status.failed       { background: rgba(239,68,68,.15); color: #f87171; }
[data-theme="dark"] .billing-txn-status.refunded     { background: rgba(245,158,11,.15); color: #fbbf24; }
[data-theme="dark"] .billing-status-badge.suspended  { background: rgba(239,68,68,.15); color: #f87171; }
[data-theme="dark"] .billing-status-badge.cancelled  { background: var(--surface-container); color: var(--text-muted); }
[data-theme="dark"] .billing-trial-track             { background: var(--surface-container); }
[data-theme="dark"] .billing-support-btn.email       { background: var(--surface-container); color: var(--text-primary); border-color: var(--border); }