/* ── GridMaster100 Theme Variables ─────────────────────────────────────────── */

:root, [data-theme="dark"] {
  --bg:           #0f0e17;
  --bg2:          #16213e;
  --bg3:          #0f3460;
  --surface:      rgba(15,52,96,0.45);
  --surface2:     rgba(15,52,96,0.60);
  --surface3:     rgba(10,36,64,0.85);
  --border:       rgba(233,69,96,0.20);
  --border2:      rgba(255,255,255,0.07);
  --border3:      rgba(233,69,96,0.40);
  --text:         #e8e8f0;
  --text2:        #94a3b8;
  --text3:        #64748b;
  --text-muted:   #475569;
  --glass:        rgba(255,255,255,0.05);
  --glass-border: rgba(255,255,255,0.10);
  --input-bg:     rgba(15,52,96,0.60);
  --card-bg:      #1e293b;
  --card-border:  rgba(233,69,96,0.50);
  --row-total-bg: rgba(10,36,64,0.85);
  --hero-grad:    radial-gradient(ellipse 80% 60% at 50% -10%,#1a1060 0%,#0f0e17 70%);
  --grid-stroke:  #e94560;
  --output-color: #b8d4f0;
  --toast-bg:     #1e293b;
  --modal-bg:     rgba(0,0,0,0.80);
  --scrollbar-track: #0f0e17;
  --scrollbar-thumb: #1e3a5f;
  --nav-bg:       rgba(15,14,23,0.95);
  --tab-bg:       rgba(15,52,96,0.40);
  --tab-active:   rgba(233,69,96,0.20);
  --toggle-bg:    rgba(15,52,96,0.60);
}

/* ══════════════════════════════════════════════════════════════════════════════
   LIGHT THEME — Rich Daytime Design
   Page: soft blue-grey gradient
   Cards: white with colored left-border accents + shadows
   ══════════════════════════════════════════════════════════════════════════════ */
[data-theme="light"] {
  --bg:           #edf0f7;
  --bg2:          #e2e7f3;
  --bg3:          #cdd5e8;
  --surface:      #ffffff;
  --surface2:     #ffffff;
  --surface3:     #f4f6fc;
  --border:       rgba(233,69,96,0.20);
  --border2:      rgba(99,115,143,0.18);
  --border3:      rgba(233,69,96,0.50);
  --text:         #1a2035;
  --text2:        #4a5568;
  --text3:        #6b7a99;
  --text-muted:   #9aa5be;
  --glass:        rgba(255,255,255,0.90);
  --glass-border: rgba(99,115,143,0.20);
  --input-bg:     #f8faff;
  --card-bg:      #ffffff;
  --card-border:  rgba(233,69,96,0.35);
  --row-total-bg: #eef2fc;
  --hero-grad:    radial-gradient(ellipse 80% 60% at 50% -10%,#dce6ff 0%,#edf0f7 70%);
  --grid-stroke:  #e94560;
  --output-color: #1e293b;
  --toast-bg:     #ffffff;
  --modal-bg:     rgba(10,18,40,0.60);
  --scrollbar-track: #e2e7f3;
  --scrollbar-thumb: #b0bcda;
  --nav-bg:       rgba(255,255,255,0.98);
  --tab-bg:       rgba(237,240,247,0.80);
  --tab-active:   rgba(233,69,96,0.08);
  --toggle-bg:    rgba(237,240,247,0.95);
}

/* ── Body: rich gradient background ──────────────────────────────────────── */
[data-theme="light"] body {
  background: linear-gradient(145deg, #dde4f5 0%, #e8edf8 40%, #edf0f7 100%) !important;
  background-attachment: fixed !important;
  color: #1a2035 !important;
}

/* ── Nav ─────────────────────────────────────────────────────────────────── */
[data-theme="light"] nav,
[data-theme="light"] .nav-bg {
  background: #ffffff !important;
  border-bottom: 2px solid rgba(233,69,96,0.12) !important;
  box-shadow: 0 2px 20px rgba(26,32,53,0.10) !important;
}

[data-theme="light"] nav .font-bold { color: #111827 !important; }
[data-theme="light"] nav .text-gray-400,
[data-theme="light"] nav .text-sm   { color: #374151 !important; }
[data-theme="light"] nav .text-white { color: #111827 !important; }

/* ── Tab bar ──────────────────────────────────────────────────────────────── */
[data-theme="light"] .tab-bar {
  background: #f0f3fb !important;
  border-bottom: 1px solid rgba(99,115,143,0.14) !important;
  box-shadow: 0 2px 16px rgba(26,32,53,0.08) !important;
  backdrop-filter: none !important;
  padding: 8px 0 !important;
}

[data-theme="light"] .tab-btn {
  color: #1f2937 !important;
  background: rgba(255,255,255,0.60) !important;
  border: 1px solid rgba(99,115,143,0.14) !important;
  font-weight: 700 !important;
  box-shadow: 0 1px 3px rgba(26,32,53,0.06) !important;
  transform: none !important;
}

[data-theme="light"] .tab-btn.active {
  color: #ffffff !important;
  background: linear-gradient(135deg,#e94560,#c23150) !important;
  border-color: transparent !important;
  box-shadow: 0 4px 16px rgba(233,69,96,0.35), 0 1px 0 rgba(255,255,255,0.20) inset !important;
  transform: translateY(-1px) !important;
}

[data-theme="light"] .tab-btn:hover:not(.active) {
  color: #3d4f6e !important;
  background: rgba(255,255,255,0.90) !important;
  border-color: rgba(99,115,143,0.22) !important;
  box-shadow: 0 2px 8px rgba(26,32,53,0.10) !important;
}

/* ── Glass nav overlay ─────────────────────────────────────────────────── */
[data-theme="light"] .glass {
  background: rgba(255,255,255,0.95) !important;
  border-color: rgba(99,115,143,0.18) !important;
  backdrop-filter: blur(12px) !important;
}

/* ── Cards — white with rich shadow + subtle colored top border ─────────── */
[data-theme="light"] .glass-card {
  background: #ffffff !important;
  border: 1px solid rgba(99,115,143,0.16) !important;
  border-top: 3px solid rgba(233,69,96,0.55) !important;
  box-shadow:
    0 4px 6px rgba(26,32,53,0.05),
    0 10px 30px rgba(26,32,53,0.09),
    0 0 0 0px transparent !important;
  border-radius: 14px !important;
}

/* ── Section heading text ─────────────────────────────────────────────── */
[data-theme="light"] .text-gray-400 { color: #374151 !important; }
[data-theme="light"] .text-gray-500 { color: #1f2937 !important; }
[data-theme="light"] .text-gray-300 { color: #4b5563 !important; }
[data-theme="light"] .text-white    { color: #111827 !important; }

/* ── Inputs / Textareas ──────────────────────────────────────────────── */
[data-theme="light"] input,
[data-theme="light"] textarea,
[data-theme="light"] input[type="number"] {
  background: #f8faff !important;
  color: #1a2035 !important;
  border: 1.5px solid #cdd5e8 !important;
  box-shadow: inset 0 1px 3px rgba(26,32,53,0.06) !important;
}

[data-theme="light"] input:focus,
[data-theme="light"] textarea:focus,
[data-theme="light"] input[type="number"]:focus {
  border-color: #e94560 !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(233,69,96,0.14), inset 0 1px 3px rgba(26,32,53,0.04) !important;
}

[data-theme="light"] input::placeholder,
[data-theme="light"] textarea::placeholder { color: #9aa5be !important; }

/* contenteditable inputText */
[data-theme="light"] #inputText {
  background: #f8faff !important;
  color: #1a2035 !important;
  border: 1.5px solid #cdd5e8 !important;
  box-shadow: inset 0 1px 4px rgba(26,32,53,0.06) !important;
}

[data-theme="light"] #inputText:focus {
  border-color: #e94560 !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(233,69,96,0.13) !important;
}

[data-theme="light"] #inputText:empty:before { color: #9aa5be !important; }

/* ── Buttons ──────────────────────────────────────────────────────────── */
[data-theme="light"] .btn-primary {
  background: linear-gradient(135deg,#e94560,#c23150) !important;
  color: #fff !important;
  box-shadow: 0 4px 16px rgba(233,69,96,0.35) !important;
}

[data-theme="light"] .btn-primary:hover {
  box-shadow: 0 6px 22px rgba(233,69,96,0.45) !important;
}

[data-theme="light"] .btn-secondary {
  background: #ffffff !important;
  color: #111827 !important;
  border: 1.5px solid #cdd5e8 !important;
  box-shadow: 0 1px 6px rgba(26,32,53,0.08) !important;
  font-weight: 700 !important;
}

[data-theme="light"] .btn-secondary:hover {
  background: #fff0f3 !important;
  border-color: rgba(233,69,96,0.50) !important;
  color: #e94560 !important;
}

[data-theme="light"] .btn-danger {
  background: #f4f6fc !important;
  color: #1f2937 !important;
  border: 1.5px solid #cdd5e8 !important;
  box-shadow: 0 1px 4px rgba(26,32,53,0.06) !important;
  font-weight: 700 !important;
}

[data-theme="light"] .btn-danger:hover {
  background: #fff0f3 !important;
  color: #e94560 !important;
  border-color: rgba(233,69,96,0.40) !important;
}

/* ── Grid boxes ───────────────────────────────────────────────────────── */
[data-theme="light"] .box {
  background: #ffffff !important;
  border: 1px solid #dde4f0 !important;
  box-shadow: 0 1px 5px rgba(26,32,53,0.07) !important;
  color: #1a2035 !important;
}

[data-theme="light"] .box:hover {
  background: #fff5f7 !important;
  border-color: rgba(233,69,96,0.40) !important;
  box-shadow: 0 2px 10px rgba(233,69,96,0.12) !important;
}

[data-theme="light"] .box.active {
  background: linear-gradient(135deg,#fff0f3,#ffe8ed) !important;
  border-color: #e94560 !important;
  box-shadow: 0 0 0 2px rgba(233,69,96,0.22), 0 3px 10px rgba(233,69,96,0.18) !important;
}

[data-theme="light"] .box.row-max {
  background: linear-gradient(135deg,#fffbeb,#fef3c7) !important;
  border-color: #f59e0b !important;
  box-shadow: 0 0 0 2px rgba(245,158,11,0.22), 0 3px 10px rgba(245,158,11,0.18) !important;
}

[data-theme="light"] .box.row-max .box-val { color: #c47a0a !important; }

[data-theme="light"] .box.table-max {
  background: linear-gradient(135deg,#f0fdf4,#dcfce7) !important;
  border-color: #22c55e !important;
  box-shadow: 0 0 0 2px rgba(34,197,94,0.22), 0 3px 10px rgba(34,197,94,0.15) !important;
}

[data-theme="light"] .box.table-max .box-val { color: #15803d !important; }

[data-theme="light"] .box-num   { color: #374151 !important; font-weight: 700 !important; }
[data-theme="light"] .box-val   { color: #be1239 !important; font-weight: 800 !important; }
[data-theme="light"] .box-count { color: #4b5563 !important; font-weight: 600 !important; }

/* ── Row totals ──────────────────────────────────────────────────── */
[data-theme="light"] .row-total {
  background: linear-gradient(135deg,#eef2fc,#e8edf8) !important;
  border: 1px solid #cdd5e8 !important;
  color: #1f2937 !important;
  font-weight: 700 !important;
  box-shadow: 0 1px 5px rgba(26,32,53,0.07) !important;
}

[data-theme="light"] .row-total span { color: #be1239 !important; font-weight: 800 !important; }

/* ── Output boxes ─────────────────────────────────────────────────── */
[data-theme="light"] .output-box {
  background: #f4f7ff !important;
  border: 1.5px solid #cdd5e8 !important;
  color: #111827 !important;
  font-weight: 600 !important;
  box-shadow: inset 0 2px 6px rgba(26,32,53,0.06) !important;
  font-size: 0.84rem !important;
  line-height: 1.7 !important;
}

[data-theme="light"] .output-box .masked-val { color: #6b7280 !important; }

/* ── Grand total ─────────────────────────────────────────────────── */
[data-theme="light"] #grandTotal,
[data-theme="light"] #inoutTotal { color: #e94560 !important; }

/* ── Grid section wrapper ─────────────────────────────────────────── */
[data-theme="light"] #gridSection,
[data-theme="light"] [class*="glass-card"] {
  background: #ffffff !important;
}

/* ── Paste separator ─────────────────────────────────────────────── */
[data-theme="light"] .paste-sep {
  border-color: rgba(233,69,96,0.28) !important;
  color: rgba(233,69,96,0.45) !important;
}

/* ── vtag ─────────────────────────────────────────────────────────── */
[data-theme="light"] .vtag {
  background: rgba(233,69,96,0.08) !important;
  color: #c23150 !important;
  border-color: rgba(233,69,96,0.28) !important;
}

/* ── Password warning ──────────────────────────────────────────── */
[data-theme="light"] #pwWarning {
  background: rgba(245,158,11,0.09) !important;
  border-color: rgba(245,158,11,0.30) !important;
  color: #92400e !important;
}

/* ── Modals ────────────────────────────────────────────────────── */
[data-theme="light"] #creditConfirmModal > div,
[data-theme="light"] #dupModal > div,
[data-theme="light"] #duplicateModal > div,
[data-theme="light"] #resetConfirmModal > div,
[data-theme="light"] #validationModal > div,
[data-theme="light"] #riskModal > div {
  background: #ffffff !important;
  border: 1px solid #dde4f0 !important;
  color: #1a2035 !important;
  box-shadow: 0 24px 64px rgba(10,18,40,0.22) !important;
}

[data-theme="light"] .credit-modal-box {
  background: #ffffff !important;
  border: 1px solid #dde4f0 !important;
  color: #1a2035 !important;
  box-shadow: 0 24px 64px rgba(10,18,40,0.22) !important;
}

[data-theme="light"] .credit-modal-counter {
  background: #f4f6fc !important;
  border-color: #dde4f0 !important;
}

[data-theme="light"] .credit-modal-warning {
  background: rgba(251,191,36,0.10) !important;
  border-color: rgba(251,191,36,0.30) !important;
  color: #92400e !important;
}

/* ── Inline dark bg overrides ─────────────────────────────────── */
[data-theme="light"] [style*="background:#0f172a"],
[data-theme="light"] [style*="background:#1e293b"],
[data-theme="light"] [style*="background:rgba(15,23,42"],
[data-theme="light"] [style*="background:rgba(30,41,59"] {
  background: #f4f6fc !important;
  color: #1a2035 !important;
  border-color: #dde4f0 !important;
}

[data-theme="light"] [style*="color:#94a3b8"],
[data-theme="light"] [style*="color:#64748b"] { color: #374151 !important; }
[data-theme="light"] [style*="color:#e8e8f0"],
[data-theme="light"] [style*="color:#b8d4f0"] { color: #111827 !important; }

/* ── Hero bg ──────────────────────────────────────────────────── */
[data-theme="light"] .hero-bg {
  background: var(--hero-grad) !important;
}

/* ── Credit copy button ──────────────────────────────────────── */
[data-theme="light"] .credit-copy-btn {
  background: linear-gradient(135deg,#fff8e1,#fef3c7) !important;
  border-color: rgba(245,158,11,0.55) !important;
  box-shadow: 0 2px 12px rgba(245,158,11,0.15), 0 2px 8px rgba(26,32,53,0.08) !important;
}

[data-theme="light"] .credit-copy-btn:hover {
  box-shadow: 0 4px 20px rgba(245,158,11,0.28), 0 4px 12px rgba(26,32,53,0.10) !important;
  border-color: rgba(245,158,11,0.80) !important;
}

[data-theme="light"] .credit-copy-label { color: #92400e !important; }

/* ── Colored section status badges ───────────────────────────── */
[data-theme="light"] .text-yellow-400 { color: #c47a0a !important; }
[data-theme="light"] .text-green-400  { color: #15803d !important; }
[data-theme="light"] .text-red-400    { color: #dc2626 !important; }
[data-theme="light"] .text-blue-400   { color: #2563eb !important; }

/* ── Toast ────────────────────────────────────────────────────── */
[data-theme="light"] #toast {
  background: linear-gradient(135deg,#e94560,#c23150) !important;
  color: #fff !important;
  box-shadow: 0 8px 28px rgba(233,69,96,0.30) !important;
}
[data-theme="light"] #toast.success {
  background: linear-gradient(135deg,#22c55e,#16a34a) !important;
  box-shadow: 0 8px 28px rgba(34,197,94,0.28) !important;
}

/* ── Admin table ─────────────────────────────────────────────── */
[data-theme="light"] table tr:nth-child(even) { background: rgba(237,240,247,0.70) !important; }
[data-theme="light"] table tr:hover           { background: rgba(233,69,96,0.05) !important; }
[data-theme="light"] table th                 { background: #eef2fc !important; color: #4a5568 !important; border-color: #dde4f0 !important; }
[data-theme="light"] table td                 { color: #1a2035 !important; border-color: #dde4f0 !important; }

/* ── Scrollbars ──────────────────────────────────────────────── */
[data-theme="light"] ::-webkit-scrollbar-track { background: #e2e7f3; }
[data-theme="light"] ::-webkit-scrollbar-thumb { background: #b0bcda; border-radius: 4px; }
[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: #8898bb; }

/* ── Background grid SVG ─────────────────────────────────────── */
[data-theme="light"] .bg-grid { opacity: 0.04 !important; }

/* ── Theme toggle button ─────────────────────────────────────── */
.theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 20px;
  border: 1px solid var(--border3);
  background: var(--toggle-bg);
  color: var(--text2);
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 600;
  transition: all 0.2s;
  white-space: nowrap;
  min-height: 34px;
  touch-action: manipulation;
}

.theme-toggle-btn:hover {
  border-color: #e94560;
  color: #e94560;
}

/* ── Scrollbars (dark default) ────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--scrollbar-track, #0f0e17); }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb, #1e3a5f); border-radius: 4px; }

/* ──────────────────────────────────────────────────────────────────
   FREE-PAGE READABILITY RULE
   Pages that opt in with <html data-default-theme="..."> must use:
     • Light mode  → pure dark text  (#000)
     • Dark mode   → pure white text (#fff)
   Brand accents, button text, badges, and inputs are intentionally
   excluded so colored UI keeps its meaning.
   ────────────────────────────────────────────────────────────────── */

/* Light: force black text everywhere except interactive/brand elements */
html[data-default-theme] [data-theme="light"] body,
html[data-default-theme][data-theme="light"] body,
html[data-default-theme][data-theme="light"] body p,
html[data-default-theme][data-theme="light"] body span,
html[data-default-theme][data-theme="light"] body div,
html[data-default-theme][data-theme="light"] body h1,
html[data-default-theme][data-theme="light"] body h2,
html[data-default-theme][data-theme="light"] body h3,
html[data-default-theme][data-theme="light"] body h4,
html[data-default-theme][data-theme="light"] body h5,
html[data-default-theme][data-theme="light"] body h6,
html[data-default-theme][data-theme="light"] body li,
html[data-default-theme][data-theme="light"] body a,
html[data-default-theme][data-theme="light"] body label,
html[data-default-theme][data-theme="light"] body td,
html[data-default-theme][data-theme="light"] body th,
html[data-default-theme][data-theme="light"] body small {
  color: #000000 !important;
}

/* Dark: force pure white text everywhere except interactive/brand elements */
html[data-default-theme][data-theme="dark"] body,
html[data-default-theme][data-theme="dark"] body p,
html[data-default-theme][data-theme="dark"] body span,
html[data-default-theme][data-theme="dark"] body div,
html[data-default-theme][data-theme="dark"] body h1,
html[data-default-theme][data-theme="dark"] body h2,
html[data-default-theme][data-theme="dark"] body h3,
html[data-default-theme][data-theme="dark"] body h4,
html[data-default-theme][data-theme="dark"] body h5,
html[data-default-theme][data-theme="dark"] body h6,
html[data-default-theme][data-theme="dark"] body li,
html[data-default-theme][data-theme="dark"] body a,
html[data-default-theme][data-theme="dark"] body label,
html[data-default-theme][data-theme="dark"] body td,
html[data-default-theme][data-theme="dark"] body th,
html[data-default-theme][data-theme="dark"] body small {
  color: #ffffff !important;
}

/* Preserve brand accent + interactive button text on both modes */
html[data-default-theme] .gm-accent,
html[data-default-theme] .gm-muted,
html[data-default-theme] .accent,
html[data-default-theme] .text-red-500,
html[data-default-theme] .text-red-400,
html[data-default-theme] .text-red-600 { color: #e94560 !important; }

/* Site-header brand name: the header bar is always dark in both themes, so the
   brand text is always light. Exempt it from the blanket body-text override. */
html[data-default-theme] .brand-name,
html[data-default-theme][data-theme="light"] .brand-name,
html[data-default-theme][data-theme="dark"] .brand-name { color: #e8e8f0 !important; }
html[data-default-theme] .brand-name .accent,
html[data-default-theme][data-theme="light"] .brand-name .accent,
html[data-default-theme][data-theme="dark"] .brand-name .accent { color: #e94560 !important; }
html[data-default-theme] .brand-name .muted,
html[data-default-theme][data-theme="light"] .brand-name .muted,
html[data-default-theme][data-theme="dark"] .brand-name .muted { color: rgba(233,69,96,0.85) !important; }

html[data-default-theme] .btn-primary,
html[data-default-theme] .gm-nav-tab.is-primary,
html[data-default-theme] button.btn-primary,
html[data-default-theme] .tab-btn.active { color: #ffffff !important; }

/* Inputs: keep their own contrast (already styled) — do not override */
html[data-default-theme] input,
html[data-default-theme] textarea,
html[data-default-theme] select { color: inherit; }

/* ── Smooth theme transitions ──────────────────────────────────── */
*, *::before, *::after {
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.15s ease;
}
.box, .reveal, [style*="animation"] {
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.15s ease, box-shadow 0.25s ease;
}