/* =========================================================
   Heartland Retail Tracker — Light-Only Theme (app.css)
   ========================================================= */

/* ========== Theme Tokens (Light only) ========== */
:root{
  --bg:#f5f7fa;
  --fg:#662d91;
  --muted:#8c5fb3;

  --card:#ffffff;
  --tile:#f4f5fb;
  --line:#d5d9e3;

  --nav-bg:#ffffff;
  --nav-border:#e7e9f2;
  --nav-active:#ede7f6;

  --accent:#662d91;   /* primary */
  --accent-2:#9b5de5; /* gradient partner */

  --pill-bg:#ede9ff;
  --pill-fg:#4b3b8b;

  --table-header-bg:#f3eefc;

  --input-bg:#ffffff;
  --input-fg:#4b3b63;
  --input-border:#cfd4e2;

  --ticker-speed:150s; /* default scroll speed */
}
.main-nav a{ color:#7a56b3; }
.table tbody tr:nth-child(odd){ background:#faf8ff; }


/* ========== Reset ========== */
*,*::before,*::after{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  font:14px/1.45 system-ui, Segoe UI, Roboto, Arial, sans-serif;
  background:var(--bg);
  color:var(--fg);
}
a{ color:var(--accent); text-decoration:none }
a:hover,a:focus{ text-decoration:underline }

/* ========== Header / Nav ========== */
.bar{
  display:flex; align-items:center; gap:14px;
  padding:10px 16px; background:var(--nav-bg);
  border-bottom:1px solid var(--nav-border);
  position:sticky; top:0; z-index:10;
}
.brand{ font-weight:700 }

.main-nav{ display:flex; gap:12px; margin-left:auto }
.main-nav a{
  color:#7a56b3;
  padding:6px 8px; border-radius:8px;
  transition:background .15s, color .15s, box-shadow .15s;
}
.main-nav a:hover,.main-nav a:focus,.main-nav a.active{
  background:var(--nav-active);
  color:var(--accent);
  outline:none;
}
.main-nav a:focus{ box-shadow:0 0 0 2px rgba(102,45,145,.25) }

.user-chip{
  color:var(--fg);
  background:var(--tile);
  border:1px solid var(--line);
  padding:6px 10px; border-radius:999px; white-space:nowrap;
}
.logout-link{
  color:#7a56b3; padding:6px 8px; border-radius:8px;
  transition:background .15s, color .15s;
}
.logout-link:hover,.logout-link:focus{
  background:var(--nav-active);
  color:var(--accent);
}

/* ========== Layout / Typography ========== */
.wrap{ max-width:min(1600px,96vw); margin:24px auto; padding:0 16px }
h1,h2,h3{ margin:8px 0 16px }
.small{ color:var(--muted); font-size:12px }

/* ========== Cards / Tiles / Buttons ========== */
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  padding:22px;
  box-shadow:0 8px 24px rgba(17,24,39,.06);
}
.tile{
  background:var(--tile);
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px;
}
.tile .label{ font-weight:600; margin-bottom:10px }
.controls{ display:flex; align-items:center; gap:8px }
.controls input{
  width:72px; padding:8px; text-align:center;
  border-radius:10px; border:1px solid var(--input-border);
  background:var(--input-bg); color:var(--input-fg);
}

.btn{
  border:0; border-radius:10px; padding:8px 10px;
  background:var(--accent); color:#fff; cursor:pointer;
  transition:filter .15s, transform .05s, background .15s;
}
.btn:hover{ filter:brightness(.95) }
.btn:active{ transform:translateY(1px) }

.btn.plus{
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
}
.btn.minus{
  background:#7a56b3;
}

/* ========== Auth ========== */
.auth{ display:grid; min-height:100vh; align-items:center; justify-items:center }
.card h1{ margin-top:0 }
.card .error{
  background:#fff2f2; border:1px solid #ffd6d6; color:#7a1f1f;
  padding:8px; border-radius:10px; margin:0 0 10px;
}

/* ========== Toast ========== */
#toast{
  position:fixed; right:16px; bottom:16px;
  background:#ffffff; color:var(--fg);
  padding:10px 14px; border-radius:10px;
  border:1px solid var(--line);
  box-shadow:0 10px 24px rgba(17,24,39,.12);
  opacity:0; transform:translateY(10px);
  transition:opacity .15s, transform .15s;
}
#toast.show{ opacity:1; transform:translateY(0) }

/* ========== Forms (light-normalized) ========== */
input[type="file"],
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="date"],
input[type="search"],
select,
textarea,
.form-ctrl{
  background:var(--input-bg);
  color:var(--input-fg);
  border:1px solid var(--input-border);
  border-radius:8px;
  padding:6px 8px;
}
input:focus,select:focus,textarea:focus,.form-ctrl:focus{
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 2px rgba(102,45,145,.2);
}

input[type="file"]{
  border-radius:8px; padding:6px 10px;
  color:var(--fg); background:#fff;
}

/* ========== Tables ========== */
.table-wrap{ overflow-x:auto }
.table{
  width:100%; border-collapse:collapse; table-layout:auto; background:transparent;
  border:1px solid var(--line); border-radius:12px; overflow:hidden;
}
.table th,.table td{
  border-bottom:1px solid var(--line);
  padding:8px 10px; white-space:nowrap; text-align:left;
  color:var(--fg); background:#fff;
}
.table thead th{
  background:var(--table-header-bg);
  color:#2a2258;
  box-shadow:0 1px 0 var(--line);
}
.table tbody tr:nth-child(odd){ background:#faf8ff }
.table tbody tr:hover{ background:rgba(107,92,255,.10) }

.sticky{ position:sticky; top:0; background:var(--table-header-bg) }
.badge{
  display:inline-block; padding:2px 6px; border-radius:8px;
  background:var(--pill-bg); color:var(--pill-fg);
  border:1px solid rgba(107,92,255,.25); font-size:12px;
}
.table .actions{ display:flex; gap:6px; flex-wrap:nowrap }
.table .actions .btn{ padding:6px 8px; font-size:12px }
.table th.actions-col,.table td.actions-col{
  position:sticky; right:0; background:#fff; z-index:2; box-shadow:-1px 0 0 var(--line);
}

/* Leads table alignment */
.leads-table th:not(:first-child), .leads-table td:not(:first-child){ text-align:center }
.leads-table th:first-child, .leads-table td:first-child{ text-align:left }

/* ========== Date Picker wrapper ========== */
.date-picker{ display:flex; align-items:center; gap:6px }
.date-picker input[type="date"]{
  padding:6px; border-radius:8px; border:1px solid var(--line);
  background:var(--card); color:var(--fg);
}

.nps-ticker-wrap{
  position:relative; overflow:hidden; height:46px;
  border-radius:12px; padding:0 8px; display:flex; align-items:center;
  border:1px solid var(--ticker-border, #dcd9ff);
  background:linear-gradient(
    90deg,
    var(--ticker-start, #4b2a85),
    var(--ticker-end,   #6a39b0)
  );
}
.nps-ticker{
  display:flex !important; align-items:center;
  flex-wrap:nowrap !important; white-space:nowrap !important;
  gap:40px; height:100%;
}
.nps-ticker-track{
  display:inline-flex !important; flex-wrap:nowrap !important; align-items:center;
  gap:32px; white-space:nowrap !important; will-change:transform;
  transform:translateX(100%);
  animation:ticker-rtl var(--ticker-speed,150s) linear infinite;
  animation-delay:.3s;
  width:max-content;
}
.elev-chunk{
  display:inline-flex; align-items:center; gap:10px;
  padding:6px 12px; border-radius:10px; color:#fff; flex:0 0 auto;
}
.elev-chunk .pill{
  display:inline-flex; align-items:center; justify-content:center;
  padding:4px 10px; border-radius:999px; font-size:12px; font-weight:700;
  border:1px solid rgba(255,255,255,.25); line-height:1; white-space:nowrap;
  max-width:100%;
}
.nps-ticker a{
  color:#FFE47A !important; text-decoration:underline !important; font-weight:700;
}
.nps-ticker-wrap::before,
.nps-ticker-wrap::after{
  content:""; position:absolute; top:0; bottom:0; width:48px; pointer-events:none; z-index:2;
}
.nps-ticker-wrap::before{
  left:0; background:linear-gradient(90deg,rgba(29,16,64,1) 0%,rgba(29,16,64,0) 100%);
}
.nps-ticker-wrap::after{
  right:0; background:linear-gradient(270deg,rgba(29,16,64,1) 0%,rgba(29,16,64,0) 100%);
}
@keyframes ticker-rtl{
  0%{ transform:translateX(100%) }
  100%{ transform:translateX(-100%) }
}
@media (prefers-reduced-motion: reduce){
  .nps-ticker-track{ animation:none; transform:translateX(0) }
}

/* ========== Utilities ========== */
.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px }
.muted{ color:var(--muted) }
.center{ text-align:center }
.right{ text-align:right }

/* === Pill (uses per-row CSS vars) === */
.pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px; border-radius:999px; line-height:1;
  font-size:12px; font-weight:700;
  background:var(--pill-bg, #ede9ff);
  color:var(--pill-fg, #4b3b8b);
  border:1px solid var(--pill-border, rgba(107,92,255,.25));
  white-space:nowrap;
}

.ticker-preview{
  width:120px; height:14px; border-radius:999px;
  border:1px solid var(--ticker-border, #dcd9ff);
  background:linear-gradient(
    90deg,
    var(--ticker-start, #4b2a85),
    var(--ticker-end,   #6a39b0)
  );
}

.btn.ghost{
  background:#fff;
  color:var(--accent);
  border:1px solid var(--accent);
}
.btn.ghost:hover{ filter:brightness(0.98) }

.table .actions .btn{
  background:#fff;
  color:var(--accent);
  border:1px solid var(--accent);
}
.table .actions .btn:hover{ filter:brightness(0.98) }

/* --- Top Rep Enhancements --- */
.nav-badge-1 {
  background: #7b66ff;
  color: #fff;
  font-weight: 700;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  margin-left: 6px;
  vertical-align: middle;
}
.avatar.glow-ring {
  box-shadow: 0 0 0 3px #7b66ff, 0 0 8px #bba3ff;
  border-radius: 50%;
  transition: box-shadow .3s ease-in-out;
}
.leaderboard-card .is-top-1 {
  background: linear-gradient(90deg, rgba(255,215,0,.08), rgba(255,215,0,0));
}
.crown {
  font-size: 16px;
  margin-right: 6px;
}
.streak {
  color: #ff7b00;
  font-size: 13px;
  margin-left: 4px;
  font-weight: 700;
}

/* NPS/Elevations ticker close button */
/* NPS/Elevations ticker close button */
.nps-ticker-close{
  position:absolute; right:6px; top:6px;
  appearance:none; border:0; cursor:pointer;
  width:28px; height:28px; border-radius:8px;
  background:rgba(255,255,255,.15); color:#fff; font-weight:700;
}
.nps-ticker-close:hover{ background:rgba(255,255,255,.25) }

/* Start-visible, continuous scroll (so it doesn't “pause” before moving) */
@keyframes ticker-start-visible {
  0%   { transform: translateX(0%) }
  100% { transform: translateX(-100%) }
}
/* Target your existing track element by id */
#elevTicker {
  animation-name: ticker-start-visible !important;
  animation-duration: var(--ticker-speed, 100s) !important;
  animation-timing-function: linear !important;
  animation-iteration-count: infinite !important;
  animation-delay: 0s !important;
}

/* Close (✕) button polish — uses the button already in your markup */
.nps-ticker-close{
  position:absolute; right:6px; top:6px;
  appearance:none; border:0; cursor:pointer;
  width:28px; height:28px; border-radius:8px;
  background:rgba(255,255,255,.15); color:#fff; font-weight:700;
}
.nps-ticker-close:hover{ background:rgba(255,255,255,.25) }

/* ==== Global Notice banner ==== */
.notice-wrap { margin: 10px 0 16px; }
.notice {
  border:1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  background: #ffffff;
  box-shadow: 0 6px 16px rgba(17,24,39,.06);
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 10px;
  align-items: start;
}
.notice .icon { font-size: 18px; line-height: 1; margin-top: 2px; }
.notice .title { font-weight: 800; color: #1f2340; margin-bottom: 4px; }
.notice .msg { color: var(--fg); }
.notice .right { display:flex; align-items:center; gap:8px; }
.notice .pill { padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; border:1px solid rgba(107,92,255,.25); }

.notice.info    { border-color:#dbeafe; background:#f8fbff; }
.notice.info .icon { color:#2563eb; }
.notice.warning { border-color:#fde68a; background:#fffbeb; }
.notice.warning .icon { color:#ca8a04; }
.notice.critical{ border-color:#fecaca; background:#fff1f2; }
.notice.critical .icon { color:#dc2626; }

/* editor button + modal bits reused from your theme */
.btn.notice-edit { background:#563590; }

/* ==== Region toolbar: mobile visibility & layout fixes ==== */
@media (max-width: 768px) {
  /* Card look so it doesn't blend into the header */
  .toolbar{
    background:#fff;
    border:1px solid #e6e8ef;
    border-radius:12px;
    padding:12px;
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    align-items:flex-end;
    box-shadow:0 8px 24px rgba(86,53,144,.08);
  }

  /* Make labels readable and placed above inputs */
  .toolbar label,
  .toolbar .small,
  .toolbar span.small{
    display:block;
    width:100%;
    margin:0 0 6px;
    color:#1a1b24 !important;
    font-weight:600;
  }

  /* Date inputs */
  .toolbar input[type="date"]{
    width:100%;
    color:#1a1b24 !important;
    background:#fff !important;
    border:1px solid #cfd4e2 !important;
    border-radius:10px;
    height:38px;
    line-height:38px;
    padding:6px 10px;
  }

  /* Buttons: full-width so they don't clip */
  .toolbar .btn{
    width:100%;
    border-radius:10px;
    height:38px;
  }
  .toolbar .btn.ghost{
    color:#563590 !important;
    background:#fff;
    border:1px solid #d9d6f2;
  }
}

/* --- Fix iOS/Safari date inputs that look blank until focused --- */
.toolbar input[type="date"]{
  background:#fff !important;
  color:#1a1b24 !important;
  -webkit-text-fill-color:#1a1b24 !important; /* iOS */
  border:1px solid #cfd4e2 !important;
  border-radius:10px;
}

/* Make the inner date text visible (iOS WebKit parts) */
.toolbar input[type="date"]::-webkit-datetime-edit,
.toolbar input[type="date"]::-webkit-datetime-edit-fields-wrapper,
.toolbar input[type="date"]::-webkit-datetime-edit-text,
.toolbar input[type="date"]::-webkit-datetime-edit-month-field,
.toolbar input[type="date"]::-webkit-datetime-edit-day-field,
.toolbar input[type="date"]::-webkit-datetime-edit-year-field{
  color:#1a1b24 !important;
}

/* Placeholder color (when shown) */
.toolbar input[type="date"]::placeholder{
  color:#6b7280 !important;
  opacity:1;
}

/* Calendar icon stays visible on light background */
.toolbar input[type="date"]::-webkit-calendar-picker-indicator{
  filter: invert(20%); /* darken the icon a bit */
}

.tnps-green  { background:#1e8e3e; color:#fff; padding:4px 8px; border-radius:6px; font-weight:600; }
.tnps-lime   { background:#8bc34a; color:#000; padding:4px 8px; border-radius:6px; font-weight:600; }
.tnps-yellow { background:#c79200; color:#000; padding:4px 8px; border-radius:6px; font-weight:600; }
.tnps-orange { background:#ef6c00; color:#fff; padding:4px 8px; border-radius:6px; font-weight:600; }
.tnps-red    { background:#c62828; color:#fff; padding:4px 8px; border-radius:6px; font-weight:600; }

.tnps-small {
    display:block;
    font-size:11px;
    font-weight:500;
}

/* ========== Global dialog / modal centering ========== */
dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  max-height: 90vh;
  overflow-y: auto;
  border-radius: 14px;
  border: 1px solid var(--line);
  padding: 0;
  box-shadow: 0 12px 48px rgba(17,24,39,.22);
}
dialog::backdrop {
  background: rgba(0,0,0,.42);
}







/* =========================================================
   Dark Mode — set data-theme="dark" on <html>
   CSS variables cascade to all children automatically.
   ========================================================= */
html[data-theme="dark"] {
  --bg:#0f0f1a;
  --fg:#e2d9f3;
  --muted:#9b8ec4;
  --card:#1a1a2e;
  --tile:#1e1e32;
  --line:#2e2e4a;
  --nav-bg:#14142a;
  --nav-border:#2a2a42;
  --nav-active:#2a1f4a;
  --accent:#b794f4;
  --accent-2:#9b5de5;
  --pill-bg:#2d1f4a;
  --pill-fg:#c4a8f5;
  --table-header-bg:#1e1a32;
  --input-bg:#1e1e32;
  --input-fg:#e2d9f3;
  --input-border:#3a3a5a;
}

/* Body background + text pick up the vars automatically via the base rules,
   but we force it here in case any page sets explicit colours */
html[data-theme="dark"] body {
  background: var(--bg) !important;
  color: var(--fg) !important;
}

/* Nav */
html[data-theme="dark"] .bar {
  background: var(--nav-bg);
  border-color: var(--nav-border);
}
html[data-theme="dark"] .main-nav a { color: #b794f4; }
html[data-theme="dark"] .more-dropdown {
  background: var(--card);
  border-color: var(--line);
}
html[data-theme="dark"] .mobile-drawer { background: var(--nav-bg); }

/* Cards, tiles, panels */
html[data-theme="dark"] .card,
html[data-theme="dark"] .tile,
html[data-theme="dark"] .panel {
  background: var(--card);
  border-color: var(--line);
}

/* Tables */
html[data-theme="dark"] .table th,
html[data-theme="dark"] .table td {
  background: var(--card);
  color: var(--fg);
  border-color: var(--line);
}
html[data-theme="dark"] .table thead th { background: var(--table-header-bg); }
html[data-theme="dark"] .table tbody tr:nth-child(odd) td { background: #16162a; }
html[data-theme="dark"] .table tbody tr:hover td { background: rgba(183,148,244,.08); }

/* Buttons */
html[data-theme="dark"] .btn {
  background: var(--card);
  color: var(--fg);
  border-color: var(--line);
}
html[data-theme="dark"] .btn:hover { background: var(--tile); }

/* Inputs */
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .form-ctrl {
  background: var(--input-bg) !important;
  color: var(--input-fg) !important;
  border-color: var(--input-border) !important;
}

/* Links */
html[data-theme="dark"] a { color: var(--accent); }

/* Badges */
html[data-theme="dark"] .badge { opacity: .9; }

/* User chip */
html[data-theme="dark"] .user-chip {
  background: var(--tile);
  border-color: var(--line);
  color: var(--fg);
}

/* Theme toggle button in nav */
.theme-toggle-nav {
  background: none;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 5px 9px;
  cursor: pointer;
  color: var(--muted);
  font-size: 15px;
  line-height: 1;
  transition: border-color .15s, background .15s;
  flex-shrink: 0;
}
.theme-toggle-nav:hover {
  background: var(--nav-active);
  color: var(--fg);
}

/* =========================================================
   Dark Mode — Hardcoded color overrides for self-contained pages
   These rules override hardcoded #fff / #f7f4ff etc on pages
   that have their own inline style blocks.
   ========================================================= */

/* Date inputs — market.php and region.php force white */
html[data-theme="dark"] input[type="date"],
html[data-theme="dark"] input[type="date"]::-webkit-datetime-edit,
html[data-theme="dark"] input[type="date"]::-webkit-datetime-edit-fields-wrapper {
  background: var(--input-bg) !important;
  color: var(--input-fg) !important;
  -webkit-text-fill-color: var(--input-fg) !important;
  border-color: var(--input-border) !important;
}

/* my_sales cards and tiles */
html[data-theme="dark"] .lead-card { background: var(--card) !important; color: var(--fg) !important; border-color: var(--line) !important; }
html[data-theme="dark"] .tile { background: var(--tile) !important; border-color: var(--line) !important; }
html[data-theme="dark"] .notice { background: var(--card) !important; border-color: var(--line) !important; }
html[data-theme="dark"] .notice .title { color: var(--fg) !important; }

/* goals_bulk.php */
html[data-theme="dark"] .section { background: var(--card) !important; border-color: var(--line) !important; }
html[data-theme="dark"] thead th { background: var(--table-header-bg) !important; color: var(--accent) !important; }
html[data-theme="dark"] tbody tr:nth-child(odd) td { background: #16162a !important; }
html[data-theme="dark"] tbody tr:hover td { background: rgba(183,148,244,.08) !important; }
html[data-theme="dark"] .pill { background: var(--tile) !important; color: var(--fg) !important; border-color: var(--line) !important; }

/* store_leaders.php */
html[data-theme="dark"] .store-row { background: var(--card) !important; border-color: var(--line) !important; }
html[data-theme="dark"] .store-row:hover { background: var(--tile) !important; }
html[data-theme="dark"] .chip-warn { background: #3a2000 !important; color: #ffaa40 !important; }
html[data-theme="dark"] .chip-ok { background: #0a2e14 !important; color: #4ade80 !important; }
html[data-theme="dark"] .chip-total { background: var(--pill-bg) !important; color: var(--pill-fg) !important; }
html[data-theme="dark"] .badge-sm { background: #0a2e14 !important; color: #4ade80 !important; }
html[data-theme="dark"] .badge-asm { background: #0a1a3a !important; color: #60a5fa !important; }
html[data-theme="dark"] .badge-mm { background: #2d1f4a !important; color: #c4b5f5 !important; }
html[data-theme="dark"] .badge-empty { background: var(--tile) !important; color: var(--muted) !important; }
html[data-theme="dark"] .leader-detail-row { background: var(--tile) !important; border-color: var(--line) !important; }

/* emails.php */
html[data-theme="dark"] table.emails th { background: var(--table-header-bg) !important; }
html[data-theme="dark"] .badge.sent { background: #0a2e14 !important; color: #4ade80 !important; border-color: #166534 !important; }
html[data-theme="dark"] .badge.queued { background: #3a2000 !important; color: #ffaa40 !important; border-color: #92400e !important; }
html[data-theme="dark"] .badge.failed { background: #3a0a0a !important; color: #f87171 !important; border-color: #991b1b !important; }
html[data-theme="dark"] .modal-body { background: var(--card) !important; }

/* stats_rollups.php */
html[data-theme="dark"] .stat-card { background: var(--card) !important; border-color: var(--line) !important; }

/* region.php responsive table rows */
html[data-theme="dark"] .table.responsive tr { background: var(--card) !important; border-color: var(--line) !important; }

/* Generic — catch all remaining hardcoded whites */
html[data-theme="dark"] [style*="background:#fff"],
html[data-theme="dark"] [style*="background: #fff"],
html[data-theme="dark"] [style*="background:white"],
html[data-theme="dark"] [style*="background: white"] {
  background: var(--card) !important;
}
html[data-theme="dark"] [style*="color:#111"],
html[data-theme="dark"] [style*="color:#222"],
html[data-theme="dark"] [style*="color:#333"],
html[data-theme="dark"] [style*="color:#1a"] {
  color: var(--fg) !important;
}