/* =============================================================================
   platform-signal.css — FoodSquare "Signal" Theme
   Version: 2026-06-20
   
   LOAD ORDER in every Signal-themed page <head>:
     <link rel="stylesheet" href="/biz/assets/platform.css?v=20260620">
     <link rel="stylesheet" href="/biz/assets/platform-signal.css?v=20260620">
   
   ACTIVATION: add class="theme-signal" to the <body> tag of each page.
   All overrides are scoped to body.theme-signal so other brands are unaffected.
   
   Applies to: landcraft/dashboard.php, home.php, index.php, overview.php
   Does NOT apply to: royce, jacadi, lemill, ot, lr, accts, hr dashboards
   ============================================================================= */


/* ─────────────────────────────────────────────────────────────────────────────
   FONT STACK
   Replace the existing Google Fonts import in each page <head> with:
   
   <link href="https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700;800&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">
   ───────────────────────────────────────────────────────────────────────────── */

body.theme-signal {
  font-family: var(--font-body);
}

body.theme-signal .mono,
body.theme-signal .kpi-value,
body.theme-signal .kpi-label,
body.theme-signal .section-meta,
body.theme-signal .chart-subtitle,
body.theme-signal .range-label,
body.theme-signal .range-info,
body.theme-signal .user-pill,
body.theme-signal .data-table th,
body.theme-signal .logo-badge {
  font-family: var(--font-mono);
}


/* ─────────────────────────────────────────────────────────────────────────────
   CSS CUSTOM PROPERTIES
   Paste this :root block into each dashboard's inline <style>, replacing
   the existing dark :root definition.
   ───────────────────────────────────────────────────────────────────────────── */
/*
:root {
  --bg:            #0C0906;
  --surface:       #160F08;
  --card:          #1A1310;
  --border:        #2A2018;
  --border-bright: #3D2A1C;
  --text:          #FFF2E2;
  --muted:         #7A6555;
  --dim:           #3D2A1C;
  --accent:        #EA3D26;
  --gold:          #FBBF24;
  --danger:        #F87171;
  --warning:       #FB923C;
  --success:       #4ADE80;
  --swiggy:        #FC8019;
  --zomato:        #CB202D;
  --shopify:       #96BF48;
}
*/


/* ─────────────────────────────────────────────────────────────────────────────
   LIGHT MODE — content area brightens; header + tab bar stay dark/red
   ───────────────────────────────────────────────────────────────────────────── */

html.light-mode body.theme-signal {
  --bg:            #F7F2EC;
  --surface:       #FFFFFF;
  --card:          #FFFFFF;
  --border:        #EAE2D8;
  --border-bright: #D8CCB8;
  --text:          #1C0D04;
  --muted:         #7A6555;
  --dim:           #B8A898;
}


/* ─────────────────────────────────────────────────────────────────────────────
   HEADER — full-bleed brand red bar (replaces dark glass bar)
   ───────────────────────────────────────────────────────────────────────────── */

body.theme-signal .header {
  background: #EA3D26;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: none;
}

/* Keep red header in light mode too */
html.light-mode body.theme-signal .header {
  background: #EA3D26;
}

body.theme-signal .logo-name {
  color: #fff;
}

body.theme-signal .logo-badge {
  border-color: rgba(255,255,255,.2);
  color: rgba(255,255,255,.45);
  font-family: var(--font-mono);
}

/* Logo image: force white on red background */
body.theme-signal .header-logo {
  filter: brightness(0) invert(1);
}
html.light-mode body.theme-signal .header-logo {
  filter: brightness(0) invert(1); /* Still white — header stays red */
}

body.theme-signal .user-pill {
  color: rgba(255,255,255,.65);
}

body.theme-signal .role-badge {
  background: rgba(0,0,0,.18);
  color: rgba(255,255,255,.8);
}

body.theme-signal .role-admin,
body.theme-signal .role-superadmin {
  background: rgba(0,0,0,.22);
  color: #fff;
}

body.theme-signal .role-ho_team {
  background: rgba(0,0,0,.18);
  color: rgba(255,255,255,.75);
}

body.theme-signal .role-user {
  background: rgba(0,0,0,.14);
  color: rgba(255,255,255,.6);
}

body.theme-signal .btn-admin {
  background: rgba(0,0,0,.2);
  color: rgba(255,255,255,.82);
  border-color: transparent;
}

body.theme-signal .btn-logout {
  background: rgba(0,0,0,.14);
  color: rgba(255,255,255,.5);
  border-color: transparent;
}

body.theme-signal .btn-sm:hover {
  opacity: 1;
  background: rgba(0,0,0,.32);
}

body.theme-signal .theme-toggle {
  border-color: rgba(255,255,255,.2);
  color: rgba(255,255,255,.55);
  background: transparent;
}

body.theme-signal .theme-toggle:hover {
  border-color: rgba(255,255,255,.4);
  color: #fff;
}

body.theme-signal .live-dot {
  background: rgba(255,255,255,.7);
}


/* ─────────────────────────────────────────────────────────────────────────────
   TABS BAR — warm dark surface beneath the red header
   ───────────────────────────────────────────────────────────────────────────── */

body.theme-signal .tabs-bar {
  background: #160F08;
  border-bottom: 1px solid #2A1E14;
  /* Signal: tabs WRAP to a second row instead of scrolling horizontally.
     A horizontal scrollbar on a primary nav is poor UX — let it flow. */
  flex-wrap: wrap;
  overflow-x: visible;
  row-gap: 0;
}

/* Keep dark tab bar in light mode */
html.light-mode body.theme-signal .tabs-bar {
  background: #160F08;
  border-bottom-color: #2A1E14;
}

/* Mobile keeps wrap too — platform.css forces scroll there, so re-assert. */
@media (max-width: 768px) {
  body.theme-signal .tabs-bar {
    flex-wrap: wrap;
    overflow-x: visible;
  }
}

body.theme-signal .tab {
  color: #5A4030;
}

body.theme-signal .tab:hover {
  color: #FFF2E2;
}

body.theme-signal .tab.active {
  color: #FFF2E2;
  border-bottom-color: #EA3D26;
}

html.light-mode body.theme-signal .tab {
  color: #5A4030;
}

html.light-mode body.theme-signal .tab:hover {
  color: #FFF2E2;
}

html.light-mode body.theme-signal .tab.active {
  color: #FFF2E2;
  border-bottom-color: #EA3D26;
}


/* ─────────────────────────────────────────────────────────────────────────────
   RANGE BAR — warm dark in dark mode, light surface in light mode
   ───────────────────────────────────────────────────────────────────────────── */

body.theme-signal .range-bar {
  background: #160F08;
  border-bottom: 1px solid #2A1E14;
}

html.light-mode body.theme-signal .range-bar {
  background: #FFFFFF;
  border-bottom: 1px solid #EAE2D8;
}

body.theme-signal .range-label {
  color: #3D2A1C;
}

body.theme-signal .range-btn {
  color: #4A3020;
  border-color: #2A2018;
  font-family: var(--font-body);
}

body.theme-signal .range-btn:hover {
  color: #FFF2E2;
  border-color: #4A3020;
}

body.theme-signal .range-btn.active {
  background: #EA3D26;
  color: #fff;
  border-color: #EA3D26;
}

html.light-mode body.theme-signal .range-btn {
  color: #7A6555;
  border-color: #EAE2D8;
}

html.light-mode body.theme-signal .range-btn:hover {
  color: #1C0D04;
  border-color: #D8CCB8;
}

html.light-mode body.theme-signal .range-btn.active {
  background: #EA3D26;
  color: #fff;
  border-color: #EA3D26;
}

body.theme-signal .range-info {
  color: #3D2A1C;
}

body.theme-signal .refresh-btn {
  color: #4A3020;
  border-color: #2A2018;
  font-family: var(--font-body);
}

body.theme-signal .refresh-btn:hover {
  color: #FFF2E2;
  border-color: #5A4030;
}

body.theme-signal .range-select {
  background: #1A1310;
  color: #FFF2E2;
  border-color: #2A2018;
  font-family: var(--font-body);
}

body.theme-signal .custom-apply-btn {
  background: #EA3D26;
  color: #fff;
  border-color: #EA3D26;
}


/* ─────────────────────────────────────────────────────────────────────────────
   KPI CARDS — coloured top border per metric type
   Always set --kpi-color on the .kpi-card element. See SIGNAL.md for the
   per-metric colour map. Default fallback = #EA3D26 (brand red).
   ───────────────────────────────────────────────────────────────────────────── */

body.theme-signal .kpi-card {
  border-radius: 8px;
  border-top: 3px solid var(--kpi-color, #EA3D26);
}

/* Remove the old 2px ::before top line */
body.theme-signal .kpi-card::before {
  display: none;
}

body.theme-signal .kpi-label {
  color: var(--muted);
}

body.theme-signal .kpi-value {
  font-weight: 600;
}

body.theme-signal .kpi-sub {
  color: var(--muted);
}

body.theme-signal .badge-up {
  background: rgba(74,222,128,.12);
  color: #4ADE80;
}

body.theme-signal .badge-down {
  background: rgba(248,113,113,.12);
  color: #F87171;
}

body.theme-signal .badge-warn {
  background: rgba(251,191,36,.12);
  color: #FBBF24;
}

body.theme-signal .badge-info {
  background: rgba(234,61,38,.12);
  color: #EA3D26;
}


/* ─────────────────────────────────────────────────────────────────────────────
   SECTION HEADERS + CHART CARDS
   ───────────────────────────────────────────────────────────────────────────── */

body.theme-signal .section-title {
  font-family: var(--font-head);
  font-style: normal;
  font-weight: 500;
  font-size: 21px;
  letter-spacing: -.02em;
  color: var(--text);
}

body.theme-signal .section-meta {
  color: var(--muted);
}

body.theme-signal .chart-card {
  border-radius: 8px;
}

body.theme-signal .chart-title {
  color: var(--muted);
  font-family: var(--font-body);
}

body.theme-signal .chart-subtitle {
  color: var(--dim);
}


/* ─────────────────────────────────────────────────────────────────────────────
   ALERTS
   ───────────────────────────────────────────────────────────────────────────── */

body.theme-signal .alert-crisis {
  background: rgba(248,113,113,.07);
  border-color: rgba(248,113,113,.28);
}

body.theme-signal .alert-warning {
  background: rgba(251,191,36,.07);
  border-color: rgba(251,191,36,.28);
}

body.theme-signal .alert-crisis .alert-title {
  color: #F87171;
}

body.theme-signal .alert-warning .alert-title {
  color: #FBBF24;
}


/* ─────────────────────────────────────────────────────────────────────────────
   PAGER BUTTONS
   ───────────────────────────────────────────────────────────────────────────── */

body.theme-signal .pager-btn {
  background: var(--card);
  border-color: var(--border);
  color: var(--muted);
  font-family: var(--font-body);
}

body.theme-signal .pager-btn:hover {
  border-color: #EA3D26;
  color: var(--text);
}

body.theme-signal .pager-btn.active {
  background: #EA3D26;
  color: #fff;
  border-color: #EA3D26;
  font-weight: 700;
}


/* ─────────────────────────────────────────────────────────────────────────────
   STATUS PILLS + DATA TABLES
   ───────────────────────────────────────────────────────────────────────────── */

body.theme-signal .pill-scale   { background: rgba(74,222,128,.12);  color: #4ADE80; }
body.theme-signal .pill-pause   { background: rgba(248,113,113,.12); color: #F87171; }
body.theme-signal .pill-monitor { background: rgba(251,191,36,.12);  color: #FBBF24; }
body.theme-signal .pill-refresh { background: rgba(138,180,255,.12); color: #8AB4FF; }

body.theme-signal .status-paid,
body.theme-signal .status-fulfilled {
  background: rgba(74,222,128,.12);
  color: #4ADE80;
}

body.theme-signal .status-unfulfilled {
  background: rgba(251,191,36,.12);
  color: #FBBF24;
}

body.theme-signal .status-in-progress {
  background: rgba(234,61,38,.12);
  color: #EA3D26;
}

body.theme-signal .status-return,
body.theme-signal .status-refunded {
  background: rgba(248,113,113,.12);
  color: #F87171;
}

/* Table header band — Option 2: raised warm band + red accent underline.
   Broad `th` selector is the safety net so NO table header is missed on a
   Signal page. Covers both light-mode conventions: html.light-mode (home/
   overview/admin/index) AND body.theme-signal.light-mode (dashboard). */
body.theme-signal .data-table th,
body.theme-signal table.mx th,
body.theme-signal th {
  font-family: var(--font-mono);
  background: #2E2218;
  color: #F5E9D8;
  border-bottom: 2px solid #EA3D26;
  font-weight: 600;
}
html.light-mode body.theme-signal .data-table th,
html.light-mode body.theme-signal table.mx th,
html.light-mode body.theme-signal th,
body.theme-signal.light-mode .data-table th,
body.theme-signal.light-mode table.mx th,
body.theme-signal.light-mode th {
  background: #F4EADF;
  color: #3A2A1A;
  border-bottom: 2px solid #EA3D26;
}

body.theme-signal .data-table tr:hover td {
  background: rgba(255,242,226,.02);
}

body.theme-signal .mtd-highlight {
  background: rgba(234,61,38,.06);
  font-weight: 600;
}

body.theme-signal .mtd-growth-pos { color: #4ADE80; }
body.theme-signal .mtd-growth-neg { color: #F87171; }

body.theme-signal .mtd-section {
  background: var(--surface);
  color: var(--text);
}


/* ─────────────────────────────────────────────────────────────────────────────
   LOADING OVERLAY
   ───────────────────────────────────────────────────────────────────────────── */

body.theme-signal .loading-overlay {
  background: rgba(12,9,6,.8);
}

body.theme-signal .spinner {
  border-color: #2A2018;
  border-top-color: #EA3D26;
}

body.theme-signal .loading-text {
  color: var(--muted);
}


/* ─────────────────────────────────────────────────────────────────────────────
   CHANNEL CARDS
   ───────────────────────────────────────────────────────────────────────────── */

body.theme-signal .channel-card {
  border-radius: 8px;
}

body.theme-signal .channel-stat-label {
  font-family: var(--font-mono);
  color: var(--muted);
}

body.theme-signal .channel-stat-value {
  font-family: var(--font-mono);
}


/* ─────────────────────────────────────────────────────────────────────────────
   MOBILE RESPONSIVE — Signal additions (≤768px)
   These sit on top of platform.css's existing mobile layer.
   ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  body.theme-signal .header {
    height: 48px;
    padding: 0 12px;
  }

  body.theme-signal .logo-badge {
    display: none;
  }

  /* Tagline separator hidden on small screens */
  body.theme-signal .header-tagline {
    display: none;
  }

  body.theme-signal .tabs-bar {
    padding: 0 12px;
  }

  body.theme-signal .range-bar {
    padding: 8px 12px;
  }

  body.theme-signal .kpi-card {
    border-radius: 6px;
  }
}

@media (max-width: 400px) {
  body.theme-signal .header {
    padding: 0 10px;
    height: 44px;
  }
}


/* ─────────────────────────────────────────────────────────────────────────────
   TOAST NOTIFICATIONS — warm palette
   ───────────────────────────────────────────────────────────────────────────── */

body.theme-signal .biz-toast {
  background: #2A2018;
  color: #FFF2E2;
}

body.theme-signal .biz-toast-success { background: #14532D; }
body.theme-signal .biz-toast-error   { background: #7F1D1D; }
