/* Algo Trading Portal - design system.
   Website_Bug_Improvements.txt Phases 5-8: one shared token set + component
   library for every template, replacing the per-page copy-pasted <style>
   blocks. Light is the default per :root; dark is selected both by OS
   preference (prefers-color-scheme) and by an explicit override
   (:root[data-theme]) so a future theme toggle can win over the OS setting
   in either direction. */

:root {
  color-scheme: light dark;

  --color-bg: #f3f5f6;
  --color-surface: #ffffff;
  --color-surface-raised: #f8fafa;
  --color-border: #dde3e5;
  --color-border-strong: #c4ccce;

  --color-text-primary: #131a1c;
  --color-text-secondary: #4c5a5d;
  --color-text-muted: #7c898b;
  --color-text-on-accent: #ffffff;

  --color-accent: #0d7d72;
  --color-accent-strong: #0a655c;
  --color-accent-soft: #dcf1ee;
  --color-accent-soft-text: #0a5b53;

  --color-positive: #0f8a5f;
  --color-positive-soft: #e0f5ea;
  --color-negative: #c23b3b;
  --color-negative-soft: #fbe6e6;
  --color-warning: #b26a12;
  --color-warning-soft: #faedd6;
  --color-danger: #b23a3a;
  --color-danger-soft: #f8e2e2;
  --color-info: #2f6fa8;
  --color-info-soft: #e2edf6;

  --focus-ring: 0 0 0 3px rgba(13, 125, 114, 0.35);

  --font-sans: -apple-system, "Segoe UI", "Inter", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.85rem;
  --text-base: 0.95rem;
  --text-md: 1.05rem;
  --text-lg: 1.25rem;
  --text-xl: 1.55rem;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  --shadow-card: 0 1px 2px rgba(19, 26, 28, 0.04), 0 8px 24px -12px rgba(19, 26, 28, 0.12);
  --shadow-none: none;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #0e1214;
    --color-surface: #161b1e;
    --color-surface-raised: #1d2327;
    --color-border: #262d31;
    --color-border-strong: #343d42;

    --color-text-primary: #eef2f2;
    --color-text-secondary: #a9b5b7;
    --color-text-muted: #758083;

    --color-accent: #2bb3a3;
    --color-accent-strong: #4cc9ba;
    --color-accent-soft: #16302d;
    --color-accent-soft-text: #6fd9cb;

    --color-positive: #3fbf85;
    --color-positive-soft: #133228;
    --color-negative: #e2685f;
    --color-negative-soft: #331919;
    --color-warning: #e0a94a;
    --color-warning-soft: #332711;
    --color-danger: #e2685f;
    --color-danger-soft: #331919;
    --color-info: #6fa8d8;
    --color-info-soft: #16242f;

    --shadow-card: 0 1px 0 rgba(0, 0, 0, 0.4), 0 12px 28px -14px rgba(0, 0, 0, 0.65);
  }
}

:root[data-theme="dark"] {
  --color-bg: #0e1214;
  --color-surface: #161b1e;
  --color-surface-raised: #1d2327;
  --color-border: #262d31;
  --color-border-strong: #343d42;
  --color-text-primary: #eef2f2;
  --color-text-secondary: #a9b5b7;
  --color-text-muted: #758083;
  --color-accent: #2bb3a3;
  --color-accent-strong: #4cc9ba;
  --color-accent-soft: #16302d;
  --color-accent-soft-text: #6fd9cb;
  --color-positive: #3fbf85;
  --color-positive-soft: #133228;
  --color-negative: #e2685f;
  --color-negative-soft: #331919;
  --color-warning: #e0a94a;
  --color-warning-soft: #332711;
  --color-danger: #e2685f;
  --color-danger-soft: #331919;
  --color-info: #6fa8d8;
  --color-info-soft: #16242f;
  --shadow-card: 0 1px 0 rgba(0, 0, 0, 0.4), 0 12px 28px -14px rgba(0, 0, 0, 0.65);
}

:root[data-theme="light"] {
  --color-bg: #f3f5f6;
  --color-surface: #ffffff;
  --color-surface-raised: #f8fafa;
  --color-border: #dde3e5;
  --color-border-strong: #c4ccce;
  --color-text-primary: #131a1c;
  --color-text-secondary: #4c5a5d;
  --color-text-muted: #7c898b;
  --color-accent: #0d7d72;
  --color-accent-strong: #0a655c;
  --color-accent-soft: #dcf1ee;
  --color-accent-soft-text: #0a5b53;
  --color-positive: #0f8a5f;
  --color-positive-soft: #e0f5ea;
  --color-negative: #c23b3b;
  --color-negative-soft: #fbe6e6;
  --color-warning: #b26a12;
  --color-warning-soft: #faedd6;
  --color-danger: #b23a3a;
  --color-danger-soft: #f8e2e2;
  --color-info: #2f6fa8;
  --color-info-soft: #e2edf6;
  --shadow-card: 0 1px 2px rgba(19, 26, 28, 0.04), 0 8px 24px -12px rgba(19, 26, 28, 0.12);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-sans);
  background: var(--color-bg);
  color: var(--color-text-primary);
  font-size: var(--text-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-weight: 650; letter-spacing: -0.01em; text-wrap: balance; }
h1 { font-size: var(--text-xl); }
h2 { font-size: var(--text-md); }
h3 { font-size: var(--text-base); }

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

:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }

.tabular-nums { font-variant-numeric: tabular-nums; }

/* ---------- Layout shell ---------- */

.shell { max-width: 1180px; margin: 0 auto; padding: var(--space-5) var(--space-5) var(--space-7); }
.shell-narrow { max-width: 440px; margin: 8vh auto; padding: 0 var(--space-5); }

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding: var(--space-4) 0 var(--space-5);
  margin-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-border);
}
.brand { display: flex; align-items: baseline; gap: var(--space-3); }
.brand-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.9rem; height: 1.9rem; border-radius: var(--radius-sm);
  background: var(--color-accent); color: var(--color-text-on-accent);
  font-weight: 700; font-size: 0.85rem; letter-spacing: -0.02em;
}
.brand h1 { font-size: 1.15rem; }
.topbar-meta { color: var(--color-text-muted); font-size: var(--text-xs); margin-top: 0.15rem; }

.nav { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.nav a, .nav-user {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  padding: 0.4rem 0.7rem;
  border-radius: var(--radius-sm);
}
.nav a:hover { color: var(--color-text-primary); background: var(--color-surface-raised); text-decoration: none; }
.nav a.current { color: var(--color-accent-soft-text); background: var(--color-accent-soft); }
.nav-user { color: var(--color-text-muted); }
.nav-sep { width: 1px; align-self: stretch; background: var(--color-border); margin: 0 var(--space-1); }

/* ---------- Cards ---------- */

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
}
.card > h2 { margin-bottom: var(--space-4); }
.card-note {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  margin: -0.3rem 0 var(--space-4);
}
.card-callout {
  border: 1px solid var(--color-warning);
  background: var(--color-warning-soft);
}

/* ---------- Forms ---------- */

label { display: block; font-size: var(--text-sm); font-weight: 600; color: var(--color-text-secondary); margin: var(--space-4) 0 0.3rem; }
label:first-child { margin-top: 0; }

input[type="text"], input[type="email"], input[type="password"], input[type="date"],
input[type="number"], select, textarea {
  width: 100%;
  font-family: inherit;
  font-size: var(--text-base);
  color: var(--color-text-primary);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.75rem;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: var(--focus-ring);
}
input::placeholder { color: var(--color-text-muted); }

.field-error { color: var(--color-negative); font-size: var(--text-xs); margin-top: 0.3rem; }
.field-hint { color: var(--color-text-muted); font-size: var(--text-xs); margin: 0 0 0.3rem; }

.checkbox-label { display: flex; align-items: center; gap: 0.4rem; font-weight: 500; }
.checkbox-label input[type="checkbox"] { width: auto; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-4); }
.grid-2 > div { min-width: 0; }

.inline-form { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; margin-top: var(--space-2); }
.inline-form label { margin: 0; font-size: var(--text-xs); color: var(--color-text-muted); display: flex; align-items: center; gap: 0.3rem; font-weight: 500; }
.inline-form input, .inline-form select { width: auto; padding: 0.4rem 0.6rem; font-size: var(--text-sm); }

/* ---------- Buttons ---------- */

button, .btn, input[type="submit"], input[type="button"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  padding: 0.5rem 0.9rem;
  text-decoration: none;
  width: auto;
  transition: background 120ms ease, border-color 120ms ease, opacity 120ms ease;
}
button, .btn.btn-primary, input[type="submit"] {
  background: var(--color-accent);
  color: var(--color-text-on-accent);
}
button:hover, .btn.btn-primary:hover, input[type="submit"]:hover { background: var(--color-accent-strong); text-decoration: none; }
button:disabled, input[type="submit"]:disabled { opacity: 0.55; cursor: not-allowed; }

.btn-secondary, button.btn-secondary {
  background: var(--color-surface-raised);
  color: var(--color-text-primary);
  border-color: var(--color-border-strong);
}
.btn-secondary:hover, button.btn-secondary:hover { background: var(--color-surface); border-color: var(--color-text-muted); }

button.danger, .btn.danger {
  background: var(--color-danger-soft);
  color: var(--color-danger);
  border-color: transparent;
}
button.danger:hover, .btn.danger:hover { background: var(--color-danger); color: #fff; }

button.full-width, input[type="submit"].full-width { width: 100%; margin-top: var(--space-5); padding: 0.7rem; font-size: var(--text-base); }

/* ---------- Badges ---------- */

.badge {
  display: inline-flex; align-items: center;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.badge.paper { background: var(--color-info-soft); color: var(--color-info); }
.badge.production { background: var(--color-warning-soft); color: var(--color-warning); }
.badge.active { background: var(--color-positive-soft); color: var(--color-positive); }
.badge.inactive, .badge.inactive-flag { background: var(--color-surface-raised); color: var(--color-text-muted); border: 1px solid var(--color-border); }
.badge.admin { background: var(--color-warning-soft); color: var(--color-warning); }
.badge.ok { background: var(--color-positive-soft); color: var(--color-positive); }
.badge.fail { background: var(--color-negative-soft); color: var(--color-negative); }
.badge.market-data { background: var(--color-accent-soft); color: var(--color-accent-strong); }

/* ---------- Flash / alerts ---------- */

.flash { padding: 0.7rem 0.9rem; border-radius: var(--radius-md); font-size: var(--text-sm); margin-bottom: var(--space-4); border: 1px solid transparent; }
.flash.error { background: var(--color-negative-soft); color: var(--color-negative); border-color: color-mix(in srgb, var(--color-negative) 30%, transparent); }
.flash.success { background: var(--color-positive-soft); color: var(--color-positive); border-color: color-mix(in srgb, var(--color-positive) 30%, transparent); }
.flash.password-reveal { background: var(--color-warning-soft); color: var(--color-warning); font-family: var(--font-mono); }
.flash.warning { background: var(--color-warning-soft); color: var(--color-warning); border-color: color-mix(in srgb, var(--color-warning) 30%, transparent); }

.errors { background: var(--color-negative-soft); border: 1px solid color-mix(in srgb, var(--color-negative) 30%, transparent); color: var(--color-negative); padding: var(--space-4); border-radius: var(--radius-md); margin-bottom: var(--space-5); }
.errors ul { margin: 0.4rem 0 0; padding-left: 1.2rem; }

.pending-note { background: var(--color-warning-soft); color: var(--color-warning); font-size: var(--text-xs); padding: 0.5rem 0.7rem; border-radius: var(--radius-sm); margin-bottom: var(--space-3); }

/* ---------- Tables ---------- */

.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
th, td { text-align: left; padding: 0.55rem 0.6rem; border-bottom: 1px solid var(--color-border); vertical-align: top; }
th { color: var(--color-text-muted); font-weight: 600; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.02em; }
tr:last-child td { border-bottom: none; }
tr.archived, tr.dim { opacity: 0.5; }

.empty-note { color: var(--color-text-muted); font-size: var(--text-sm); font-style: italic; }

/* ---------- Dashboard-specific components ---------- */

.stats { display: flex; gap: var(--space-6); flex-wrap: wrap; margin: var(--space-4) 0; }
.stat-label { color: var(--color-text-muted); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 0.2rem; }
.stat-value { font-size: var(--text-lg); font-weight: 650; font-variant-numeric: tabular-nums; }
.pnl-pos { color: var(--color-positive); }
.pnl-neg { color: var(--color-negative); }

.section-label { color: var(--color-text-muted); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.02em; margin: var(--space-4) 0 var(--space-2); }

.account-header { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); flex-wrap: wrap; }
.account-header h2 { font-size: var(--text-md); }
.account-id { color: var(--color-text-muted); font-size: var(--text-sm); }
.account-card.inactive { opacity: 0.6; }

.token-status { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); flex-wrap: wrap; }

.filters {
  display: flex; gap: var(--space-4); align-items: flex-end; flex-wrap: wrap;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-4);
  margin-bottom: var(--space-5); box-shadow: var(--shadow-card);
}
.filters > div { display: flex; flex-direction: column; }
.filters label { margin: 0 0 0.3rem; }
.filters select, .filters input { padding: 0.45rem 0.6rem; font-size: var(--text-sm); }
.filters button { align-self: flex-end; }

.meta { font-family: var(--font-mono); font-size: 0.72rem; color: var(--color-text-muted); max-width: 260px; overflow-wrap: anywhere; }

.access-list { list-style: none; margin: 0.4rem 0 0; padding: 0; font-size: var(--text-xs); }
.access-list li { margin-bottom: 0.35rem; display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.access-list form { display: inline; }

.cred-form { display: grid; gap: var(--space-3); max-width: 420px; margin-top: var(--space-3); }

details { margin-bottom: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 0.7rem 1rem; }
details summary { cursor: pointer; font-size: var(--text-base); font-weight: 600; }
details[open] summary { margin-bottom: var(--space-2); }

.footer-link { text-align: center; margin-top: var(--space-5); font-size: var(--text-sm); color: var(--color-text-secondary); }

.session-timeout-banner {
  display: none; position: fixed; bottom: var(--space-5); right: var(--space-5); max-width: 320px;
  background: var(--color-warning-soft); color: var(--color-warning);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  font-size: var(--text-sm); box-shadow: var(--shadow-card); z-index: 100;
}

/* ---------- Responsive ---------- */

@media (max-width: 720px) {
  .shell { padding: var(--space-4) var(--space-4) var(--space-6); }
  .topbar { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
  .nav { width: 100%; }
  .nav-sep { display: none; }
  .stats { gap: var(--space-4); }
  .grid-2 { grid-template-columns: 1fr; }
  .filters { flex-direction: column; align-items: stretch; }
  .filters button { align-self: stretch; }
  table.responsive-cards thead { display: none; }
  table.responsive-cards, table.responsive-cards tbody, table.responsive-cards tr, table.responsive-cards td { display: block; width: 100%; }
  table.responsive-cards tr { border: 1px solid var(--color-border); border-radius: var(--radius-md); margin-bottom: var(--space-3); padding: var(--space-2) var(--space-3); }
  table.responsive-cards td { border-bottom: none; padding: 0.3rem 0; }
  table.responsive-cards td::before { content: attr(data-label); display: block; font-size: var(--text-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.02em; }
}

@media (max-width: 480px) {
  .shell-narrow { margin: 4vh auto; }
  h1 { font-size: var(--text-lg); }
}