/* =============================================================
   style.css — THE ONE AND ONLY stylesheet for stock_website.
   Every color, size, spacing, radius, and font lives as a CSS
   variable on :root below.  Change one line up there → the whole
   site retones.  No second stylesheet, no inline styles, no
   <style> tags anywhere else.
   ============================================================= */

:root {

  /* ---------- BRAND COLORS  (LIGHT MODE DEFAULTS) ---------- */
  --c-page-bg:        #ffffff;   /* page background (always solid, never black per owner rule) */
  --c-text:           #1a1a1a;   /* primary body text — solid, no shadow */
  --c-text-soft:      #555555;   /* labels, captions */
  --c-text-inverse:   #ffffff;   /* text on dark / primary backgrounds */

  --c-primary:        #2e7d32;   /* main action color (green = money) */
  --c-primary-hover:  #1b5e20;
  --c-accent:         #1565c0;   /* secondary actions (blue) */
  --c-accent-hover:   #0d47a1;
  --c-danger:         #c62828;   /* destructive / errors */
  --c-danger-hover:   #8e0000;
  --c-warning:        #f57f17;
  --c-success:        #2e7d32;

  --c-card-bg:        #f7f9fc;   /* card background */
  --c-card-border:    #d6dde7;
  --c-card-hover:     #eef3fa;   /* card hover tint */

  --c-input-bg:       #ffffff;
  --c-input-border:   #b6bfcc;
  --c-input-focus:    #1565c0;

  --c-banner-info-bg:    #e3f2fd;
  --c-banner-info-text:  #0d47a1;
  --c-banner-warn-bg:    #fff8e1;
  --c-banner-warn-text:  #6d4c00;
  --c-banner-error-bg:   #ffebee;
  --c-banner-error-text: #8e0000;
  --c-banner-ok-bg:      #e8f5e9;
  --c-banner-ok-text:    #1b5e20;

  --c-header-bg:      var(--c-primary);   /* nav bar background */
  --c-header-text:    var(--c-text-inverse);

  /* ---------- TYPOGRAPHY ---------- */
  --f-family-body:    "Segoe UI", Tahoma, Verdana, Arial, sans-serif;
  --f-family-mono:    "Consolas", "Courier New", monospace;
  --f-size-base:      16px;      /* 16px = no iOS auto-zoom on inputs */
  --f-size-small:     14px;
  --f-size-large:     20px;
  --f-size-h1:        2.0rem;
  --f-size-h2:        1.5rem;
  --f-size-h3:        1.2rem;
  --f-weight-body:    400;
  --f-weight-bold:    700;
  --f-line-height:    1.5;

  /* ---------- SPACING ---------- */
  --space-0:          0;
  --space-1:          4px;
  --space-2:          8px;
  --space-3:          12px;
  --space-4:          16px;
  --space-5:          24px;
  --space-6:          32px;
  --space-7:          48px;

  /* ---------- LAYOUT ---------- */
  --max-content-w:    1200px;
  --breakpoint-mobile: 900px;   /* used by the @media query below */
  --radius-small:     4px;
  --radius:           8px;
  --radius-large:     14px;
  --shadow-card:      0 1px 3px rgba(0,0,0,0.08);
  --shadow-card-hover: 0 4px 12px rgba(0,0,0,0.12);

  /* ---------- TAP TARGETS ---------- */
  --tap-min:          44px;     /* owner rule: tap targets ≥ 38px (we use 44px) */
}

/* =============================================================
   DARK MODE  -  deep purple / blue with WHITE text.
   NEVER pure black per owner rule.  Applied two ways:
     (a) html.theme-dark    — user clicked the Dark toggle.
     (b) auto via prefers-color-scheme when html has class
         "theme-auto" (set by JS in header.php when there is no
         saved choice).
   ============================================================= */
:root.theme-dark,
:root.theme-auto[data-prefers="dark"] {
  --c-page-bg:        #211a35;   /* deep purple-blue (never black) */
  --c-text:           #ececf5;   /* near-white, solid (no shadow) */
  --c-text-soft:      #a8a8c0;   /* soft labels, still readable */
  --c-text-inverse:   #ffffff;

  --c-primary:        #4caf50;   /* slightly brighter green for dark bg */
  --c-primary-hover:  #66bb6a;
  --c-accent:         #5b8def;
  --c-accent-hover:   #7aa3ff;
  --c-danger:         #ef5350;
  --c-danger-hover:   #ff6b68;

  --c-card-bg:        #2e2552;   /* card lighter than page bg */
  --c-card-border:    #3d3560;
  --c-card-hover:     #38305f;

  --c-input-bg:       #2a2348;
  --c-input-border:   #4a4470;
  --c-input-focus:    #8aa8ff;

  --c-banner-info-bg:    #1e2848;
  --c-banner-info-text:  #c8dbff;
  --c-banner-warn-bg:    #3a2a14;
  --c-banner-warn-text:  #f5d68a;
  --c-banner-error-bg:   #3a1518;
  --c-banner-error-text: #ffb0b8;
  --c-banner-ok-bg:      #1a3520;
  --c-banner-ok-text:    #a8e6b5;

  --c-header-bg:      #3a2862;   /* deep eggplant purple, not green */
  --c-header-text:    #ffffff;   /* WHITE letters per owner rule */
}

/* In dark mode, give inputs a visible focus ring AND keep
   placeholder text readable. */
:root.theme-dark .form-group input::placeholder,
:root.theme-dark .form-group textarea::placeholder,
:root.theme-auto[data-prefers="dark"] .form-group input::placeholder,
:root.theme-auto[data-prefers="dark"] .form-group textarea::placeholder {
  color: var(--c-text-soft);
  opacity: 1;
}

/* The "off" status badge in dark mode reads as "muted purple",
   not the light-mode gray. */
:root.theme-dark .badge--off,
:root.theme-auto[data-prefers="dark"] .badge--off {
  background: #3d3560;
  color: #c8c4d8;
}

/* Theme toggle button — sits inside the green/purple header bar. */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 6px 14px;
  margin-left: var(--space-4);
  border: 1px solid rgba(255,255,255,0.45);
  background: transparent;
  color: var(--c-header-text);
  font: inherit;
  font-weight: var(--f-weight-bold);
  border-radius: var(--radius-small);
  cursor: pointer;
}
.theme-toggle:hover {
  background: rgba(255,255,255,0.12);
}

/* =============================================================
   RESET / BASE
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--c-page-bg);
  color: var(--c-text);
  font-family: var(--f-family-body);
  font-size: var(--f-size-base);
  font-weight: var(--f-weight-body);
  line-height: var(--f-line-height);
}

h1, h2, h3, h4 {
  margin: 0 0 var(--space-4) 0;
  font-weight: var(--f-weight-bold);
  color: var(--c-text);          /* solid, never shadowed */
}
h1 { font-size: var(--f-size-h1); }
h2 { font-size: var(--f-size-h2); }
h3 { font-size: var(--f-size-h3); }

p { margin: 0 0 var(--space-4) 0; }

a {
  color: var(--c-accent);
  text-decoration: none;
}
a:hover { color: var(--c-accent-hover); text-decoration: underline; }

/* =============================================================
   PAGE WRAPPER + HEADER + FOOTER
   ============================================================= */
.page-wrap {
  max-width: var(--max-content-w);
  margin: 0 auto;
  padding: var(--space-5) var(--space-4);
}

.site-header {
  background: var(--c-header-bg);
  color: var(--c-header-text);
  padding: var(--space-4) var(--space-5);
}
.site-header__inner {
  max-width: var(--max-content-w);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.site-header__title {
  font-size: var(--f-size-large);
  font-weight: var(--f-weight-bold);
  color: var(--c-header-text);
  text-decoration: none;
}
.site-header__title:hover {
  color: var(--c-header-text);
  text-decoration: none;
}
.site-header__nav a {
  color: var(--c-header-text);
  margin-left: var(--space-4);
}
.site-header__nav a:hover {
  color: var(--c-header-text);
  text-decoration: underline;
}

.site-footer {
  margin-top: var(--space-7);
  padding: var(--space-5) var(--space-4);
  text-align: center;
  color: var(--c-text-soft);
  font-size: var(--f-size-small);
  border-top: 1px solid var(--c-card-border);
}

/* =============================================================
   CARDS / TILES (whole rectangle is the click target — owner rule)
   ============================================================= */
.card {
  background: var(--c-card-bg);
  border: 1px solid var(--c-card-border);
  border-radius: var(--radius);
  padding: var(--space-5);
  box-shadow: var(--shadow-card);
  margin-bottom: var(--space-4);
}
.clickable-card,
.card[data-href] {
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s, transform 0.05s;
}
.clickable-card:hover,
.card[data-href]:hover {
  background: var(--c-card-hover);
  box-shadow: var(--shadow-card-hover);
}
.clickable-card:active,
.card[data-href]:active {
  transform: translateY(1px);
}

/* =============================================================
   BUTTONS
   ============================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-min);
  padding: var(--space-3) var(--space-5);
  border: none;
  border-radius: var(--radius-small);
  font-family: var(--f-family-body);
  font-size: var(--f-size-base);
  font-weight: var(--f-weight-bold);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s;
}
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn--primary  { background: var(--c-primary);  color: var(--c-text-inverse); }
.btn--primary:hover  { background: var(--c-primary-hover); color: var(--c-text-inverse); text-decoration: none; }
.btn--accent   { background: var(--c-accent);   color: var(--c-text-inverse); }
.btn--accent:hover   { background: var(--c-accent-hover);  color: var(--c-text-inverse); text-decoration: none; }
.btn--danger   { background: var(--c-danger);   color: var(--c-text-inverse); }
.btn--danger:hover   { background: var(--c-danger-hover);  color: var(--c-text-inverse); text-decoration: none; }
.btn--ghost    {
  background: transparent;
  color: var(--c-text);
  border: 1px solid var(--c-card-border);
}
.btn--ghost:hover { background: var(--c-card-hover); text-decoration: none; }
.btn--block    { width: 100%; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: var(--space-4) 0;
}

/* =============================================================
   FORMS
   ============================================================= */
.form-group { margin-bottom: var(--space-4); }
.form-group label {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--c-text);
  font-weight: var(--f-weight-bold);
  font-size: var(--f-size-small);
}
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="number"],
.form-group select,
.form-group textarea {
  width: 100%;
  min-height: var(--tap-min);
  padding: var(--space-3);
  background: var(--c-input-bg);
  color: var(--c-text);
  border: 1px solid var(--c-input-border);
  border-radius: var(--radius-small);
  font-family: inherit;
  font-size: var(--f-size-base);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: 2px solid var(--c-input-focus);
  outline-offset: -2px;
}
.form-help {
  margin-top: var(--space-1);
  font-size: var(--f-size-small);
  color: var(--c-text-soft);
}

/* =============================================================
   BANNERS / MESSAGES
   ============================================================= */
.banner {
  padding: var(--space-4);
  border-radius: var(--radius-small);
  margin-bottom: var(--space-4);
  font-weight: var(--f-weight-bold);
}
.banner--info   { background: var(--c-banner-info-bg);  color: var(--c-banner-info-text); }
.banner--warn   { background: var(--c-banner-warn-bg);  color: var(--c-banner-warn-text); }
.banner--error  { background: var(--c-banner-error-bg); color: var(--c-banner-error-text); }
.banner--ok     { background: var(--c-banner-ok-bg);    color: var(--c-banner-ok-text); }

/* =============================================================
   GRID HELPERS
   ============================================================= */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }

/* =============================================================
   AUTH FORM (centered card on its own page)
   ============================================================= */
.auth-card {
  max-width: 420px;
  margin: var(--space-6) auto;
}
.auth-card h1 {
  margin-bottom: var(--space-5);
  text-align: center;
}
.auth-footnote {
  text-align: center;
  margin-top: var(--space-4);
  color: var(--c-text-soft);
  font-size: var(--f-size-small);
}

/* =============================================================
   KPI / BIG-NUMBER TILES
   ============================================================= */
.kpi-big {
  font-size: 2rem;
  font-weight: var(--f-weight-bold);
  margin: 0;
  color: var(--c-text);
}
.kpi-medium {
  font-size: 1.4rem;
  font-weight: var(--f-weight-bold);
  margin: 0;
  color: var(--c-text);
}

/* =============================================================
   USER / DATA TABLE
   ============================================================= */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--f-size-small);
}
.data-table th,
.data-table td {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--c-card-border);
}
.data-table th {
  background: var(--c-card-hover);
  color: var(--c-text);
  font-weight: var(--f-weight-bold);
}

/* =============================================================
   STATUS BADGES + TOGGLE ROWS  (dashboard settings sections)
   ============================================================= */
.badge {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  border-radius: 999px;
  font-size: var(--f-size-small);
  font-weight: var(--f-weight-bold);
  letter-spacing: 0.02em;
}
.badge--ok    { background: var(--c-banner-ok-bg);    color: var(--c-banner-ok-text); }
.badge--warn  { background: var(--c-banner-warn-bg);  color: var(--c-banner-warn-text); }
.badge--error { background: var(--c-banner-error-bg); color: var(--c-banner-error-text); }
.badge--info  { background: var(--c-banner-info-bg);  color: var(--c-banner-info-text); }
.badge--off   { background: #e5e7eb;                  color: #475569; }

.toggle-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--c-card-border);
}
.toggle-row:last-child { border-bottom: none; }
.toggle-row input[type="checkbox"] {
  width: 22px;
  height: 22px;
  cursor: pointer;
  flex-shrink: 0;
}
.toggle-row label {
  font-weight: var(--f-weight-bold);
  cursor: pointer;
  flex: 1;
}
.toggle-row .toggle-row__hint {
  color: var(--c-text-soft);
  font-weight: var(--f-weight-body);
  font-size: var(--f-size-small);
  margin-left: var(--space-2);
}

/* Radio row (Paper / Live mode) */
.radio-row {
  display: flex;
  gap: var(--space-4);
  margin: var(--space-3) 0;
}
.radio-row label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--c-card-border);
  border-radius: var(--radius-small);
  cursor: pointer;
  font-weight: var(--f-weight-bold);
}
.radio-row label:hover { background: var(--c-card-hover); }
.radio-row input[type="radio"] { width: 18px; height: 18px; cursor: pointer; }

/* Small monospace value (masked keys, account numbers) */
.text-mono {
  font-family: var(--f-family-mono);
  font-size: var(--f-size-small);
  background: var(--c-card-hover);
  padding: 2px var(--space-2);
  border-radius: var(--radius-small);
}

/* Section heading bar inside a card */
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.section-head h2 { margin: 0; }

/* Inline help text */
.muted {
  color: var(--c-text-soft);
  font-size: var(--f-size-small);
}

/* =============================================================
   GEAR BUTTON  (sits in nav, top-right of the header bar)
   ============================================================= */
.gear-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-left: var(--space-3);
  border: 1px solid rgba(255,255,255,0.45);
  background: transparent;
  color: var(--c-header-text);
  border-radius: var(--radius-small);
  cursor: pointer;
  padding: 0;
}
.gear-btn:hover { background: rgba(255,255,255,0.12); }
.gear-btn svg   { display: block; }

/* =============================================================
   MODAL  (Settings popup with tab strip)
   ============================================================= */
.modal {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  display: none;
  z-index: 9999;
}
.modal.is-open { display: block; }

.modal__backdrop {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: rgba(0, 0, 0, 0.55);
}

.modal__dialog {
  position: relative;
  margin: 5vh auto 0;
  width: 92%;
  max-width: 720px;          /* ~7.5 inches at 96 DPI */
  max-height: 88vh;
  background: var(--c-card-bg);
  color: var(--c-text);
  border: 1px solid var(--c-card-border);
  border-radius: var(--radius);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  background: var(--c-card-hover);
  border-bottom: 1px solid var(--c-card-border);
}
.modal__header h2 { margin: 0; font-size: var(--f-size-h3); }

.modal__close {
  background: transparent;
  border: none;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  color: var(--c-text);
  min-width: var(--tap-min);
  min-height: var(--tap-min);
  border-radius: var(--radius-small);
}
.modal__close:hover { background: var(--c-card-border); }

.modal__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 0 var(--space-3);
  border-bottom: 1px solid var(--c-card-border);
  background: var(--c-card-bg);
}
.modal__tab {
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  color: var(--c-text-soft);
  font-family: inherit;
  font-size: var(--f-size-base);
  font-weight: var(--f-weight-bold);
  min-height: var(--tap-min);
}
.modal__tab:hover  { color: var(--c-text); }
.modal__tab.active {
  color: var(--c-accent);
  border-bottom-color: var(--c-accent);
}

.modal__body {
  padding: var(--space-5);
  overflow-y: auto;
  flex: 1;
}
.modal__panel        { display: none; }
.modal__panel.active { display: block; }

.modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--c-card-border);
  background: var(--c-card-bg);
}

body.no-scroll { overflow: hidden; }

/* =============================================================
   MOBILE — single breakpoint at 900px per owner rule
   ============================================================= */
@media (max-width: 900px) {
  .page-wrap { padding: var(--space-4) var(--space-3); }
  .site-header { padding: var(--space-3); }
  .site-header__inner { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
  .site-header__nav a { margin-left: 0; margin-right: var(--space-3); }

  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }

  .btn { width: 100%; }
  .btn-row { flex-direction: column; }

  h1 { font-size: 1.6rem; }
  h2 { font-size: 1.3rem; }

  /* Modal fills the screen on phones. */
  .modal__dialog {
    margin: 0;
    width: 100%;
    max-width: none;
    max-height: 100vh;
    height: 100vh;
    border-radius: 0;
    border: none;
  }
}