/* ============================================================================
   MyTraderOS — Design Tokens (Wave 0)
   ธีมม่วง MyTraderOS (dark) · extract จาก landing/mytraderos-*.html (LIVE = source of truth สี/ฟอนต์)
   map ทับกติกาสีเดิม D1: บทบาทที่เคยเป็นทอง (แบรนด์/นำทาง active/FAB/unlock) -> ม่วง brand
   profit/loss คงค่า D1 · warning = amber token แยก · เลขทุกตัวมาจาก API (client format เท่านั้น)
   หลักการ 4 เสียง: ม่วง=แบรนด์/นำทาง/unlock · เขียว-แดง=เงิน · ink=เนื้อหา · (cyan=AI มาตอน L1)
   ============================================================================ */
:root {
  /* --- พื้น/ผิว (LIGHT body · Wave 2.5 flip ตาม Claude Design mockup PALETTE.md) --- */
  --bg:#f6f6fa;                      /* page bg */
  --surface-1:#ffffff;               /* card base */
  --surface-2:#faf9fc;               /* elevated / input / hover / zebra header */
  --surface-3:#f1eff7;               /* popover / menu / chip ลอย (light) */
  --bg-grad:#f6f6fa;                 /* solid light (เดิม radial dark) */
  --sidebar-bg:#fbfbfd;              /* sidebar desktop (สว่าง) */

  /* --- ink / ตัวหนังสือ (text hierarchy · dark ink บนพื้นสว่าง) --- */
  --ink:#141026;
  --ink-dim:#41395c;                 /* body/secondary */
  --ink-mute:#6b6580;                /* caption/label */
  --ink-subtle:#9089a8;              /* faint caption */
  --ink-faint:#c3bdd4;               /* very faint / placeholder */

  /* --- แบรนด์ ม่วง (คงเดิม · brand-bright = accent text อ่านชัดบนพื้นขาว) --- */
  --brand:#6d3bf0;
  --brand-bright:#6d3bf0;            /* accent text/link/active บนพื้นสว่าง (อ่านชัด) */
  --brand-strong:#5b32d6;            /* nav active text / symbol chip */
  --brand-2:#c53bd0;                 /* magenta (ปลาย gradient) */
  --brand-3:#f0409a;                 /* pink (ปลายสุด gradient) */
  --brand-grad:linear-gradient(96deg, #6d3bf0 0%, #b02fd0 55%, #f0409a 100%);
  --brand-grad-icon:linear-gradient(135deg, #7c5cf0, #c53bd0);
  --brand-soft:#efeafd;              /* พื้น chip/hint อ่อน (ม่วงอ่อน) */
  --brand-edge:#d9cffa;              /* ขอบ active */

  /* --- ความหมายเงิน (คงค่า D1 — ห้ามใช้ม่วงแทน) --- */
  --profit:#4bb98a;
  --loss:#e0655c;

  /* --- warning amber (แยกจากแบรนด์ · ต้องมากับ icon+label เสมอ) --- */
  --warn:#c2820a;                    /* amber เข้มพอบนพื้นขาว */
  --sev-ok:var(--profit);
  --sev-warn:var(--warn);
  --sev-crit:var(--loss);
  --sev-info:var(--ink-dim);

  /* --- เส้น/พื้นสลับ/scrim --- */
  --hairline:#ececf2;                /* card/table border */
  --hairline-soft:#f4f2f9;           /* table row border อ่อน */
  --zebra:#faf9fc;
  --scrim:rgba(20,16,38,.45);

  /* --- CHROME (มืด — top bar/header คงโทนม่วงเข้ม ตาม mockup) --- */
  --chrome-bg:#120d28;
  --chrome-ink:#f4f1fb;
  --chrome-ink-dim:#c9c2e8;
  --chrome-ink-mute:#8079a3;
  --chrome-border:#322a55;
  --chrome-surface:#221a45;
  --chrome-active:#2a2050;

  /* --- spacing (base 4px) --- */
  --sp-0:2px; --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
  --sp-5:20px; --sp-6:24px; --sp-7:32px; --sp-8:48px;

  /* --- radius --- */
  --radius-sm:8px; --radius:12px; --radius-lg:16px; --radius-full:999px;

  /* --- touch/target --- */
  --tap-min:44px;

  /* --- shadow (light · subtle) --- */
  --shadow-1:0 1px 2px rgba(20,16,38,.05);
  --shadow-2:0 6px 20px rgba(20,16,38,.12);
  --shadow-brand:0 8px 18px rgba(109,59,240,.28);
  --shadow-sheet:0 -8px 28px rgba(20,16,38,.16);

  /* --- z-index scale --- */
  --z-dropdown:50; --z-sticky:80; --z-fab:90; --z-nav:100;
  --z-sheet:200; --z-modal:300; --z-toast:400; --z-tooltip:500;

  /* --- motion --- */
  --dur-fast:150ms; --dur-base:200ms; --dur-slow:250ms;
  --ease:cubic-bezier(.2,.7,.3,1);

  /* --- focus (นำทาง -> ม่วง) --- */
  --focus-ring:0 0 0 2px var(--bg), 0 0 0 4px var(--brand-bright);

  /* --- typography (self-host: Sora display · Figtree+Noto Sans Thai UI) --- */
  --font-ui:'Figtree','Noto Sans Thai',-apple-system,'Segoe UI',sans-serif;
  --font-display:'Sora','Noto Sans Thai',-apple-system,sans-serif;
  --font-mono:ui-monospace,'SF Mono','Cascadia Mono',Menlo,monospace;

  --fs-display:1.75rem;   /* 28 mobile -> 36 desktop */
  --fs-h1:1.5rem;         /* 24 */
  --fs-h2:1.25rem;        /* 20 */
  --fs-h3:1.0625rem;      /* 17 */
  --fs-body:.9375rem;     /* 15 · lh 1.65 */
  --fs-caption:.8125rem;  /* 13 */
  --fs-micro:.75rem;      /* 12 = floor */
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast:0ms; --dur-base:0ms; --dur-slow:0ms; }
}

/* ---------- base / reset ---------- */
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
html{ -webkit-text-size-adjust:100%; }
body{
  font-family:var(--font-ui);
  font-size:var(--fs-body);
  line-height:1.65;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;                 /* body ห้าม scroll แนวนอนทุกหน้า */
}
#root{ min-height:100dvh; }
h1,h2,h3,.disp{ font-family:var(--font-display); line-height:1.3; margin:0; }
a{ color:var(--brand-bright); text-decoration:none; }
button{ font-family:inherit; }

/* ตัวเลขเงิน/สถิติ: tabular-nums บังคับผ่าน .num (MoneyText/RText/StatTile) */
.num{ font-variant-numeric:tabular-nums; }
.mono{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; }

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

/* scrollbar (subtle) */
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-thumb{ background:var(--surface-3); border-radius:8px; }

/* ---------- responsive helpers (mobile-first 390px primary) ---------- */
.only-desktop{ display:none; }
.only-mobile{ display:flex; }
/* header chrome helpers (breakpoint 768px — ซ่อน/โชว์ element ใน top bar กันเบียดบนมือถือ) */
.hdr-hide-sm{ display:none; }
.hdr-only-sm{ display:inline-flex; }
@media (min-width:768px){
  .hdr-hide-sm{ display:inline; }
  .hdr-only-sm{ display:none !important; }
}
@media (min-width:1024px){
  .only-desktop{ display:block; }
  .only-mobile{ display:none !important; }
  :root{ --fs-display:2.25rem; }
  /* dashboard: heatmap + fees เรียงคู่บน desktop */
  .dash-2col{ grid-template-columns:1fr 1fr !important; }
}

/* ---------- card ---------- */
.card{
  background:var(--surface-1);
  border:1px solid var(--hairline);
  border-radius:var(--radius);
  padding:var(--sp-4);
  box-shadow:var(--shadow-1);
}
@media (min-width:1024px){ .card{ padding:var(--sp-5); } }

/* ---------- CHROME scope (top bar/header มืด) ----------
   ตั้ง custom prop ทับใน subtree เดียว → ลูกทุกตัว (chip/dropdown/toggle) render โทนมืดอัตโนมัติ
   โดยไม่ต้องแก้ inline style รายตัว */
.mtos-chrome{
  --ink:var(--chrome-ink);
  --ink-dim:var(--chrome-ink-dim);
  --ink-mute:var(--chrome-ink-mute);
  --ink-subtle:rgba(244,241,251,.4);
  --surface-2:var(--chrome-surface);
  --surface-3:var(--chrome-surface);
  --hairline:var(--chrome-border);
  --brand-bright:#a78bfa;
  --brand-strong:#a78bfa;
}

/* ---------- buttons (min-height tap 44px) ---------- */
.btn-primary,.btn-secondary,.btn-brand,.btn-ghost,.btn-danger{
  min-height:var(--tap-min);
  padding:0 var(--sp-5);
  border-radius:var(--radius-sm);
  font-family:var(--font-ui);
  font-weight:600;
  font-size:var(--fs-body);
  cursor:pointer;
  transition:filter var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:1px solid transparent;
}
.btn-primary{ background:var(--ink); color:var(--bg); }
.btn-primary:hover{ filter:brightness(.92); }
.btn-brand{ background:var(--brand-grad); color:#fff; box-shadow:var(--shadow-brand); }
.btn-brand:hover{ filter:brightness(1.06); }
.btn-secondary{ background:transparent; border-color:var(--hairline); color:var(--ink); }
.btn-secondary:hover{ background:var(--surface-2); }
.btn-ghost{ background:transparent; color:var(--ink-dim); border:none; }
.btn-ghost:hover{ color:var(--ink); }
.btn-danger{ background:transparent; border-color:var(--loss); color:var(--loss); }
button:disabled{ opacity:.38; cursor:not-allowed; }

/* ---------- form ---------- */
.lbl{ display:block; font-size:var(--fs-caption); color:var(--ink-mute); margin:var(--sp-3) 0 var(--sp-1); }
.inp{
  width:100%; min-height:var(--tap-min);
  background:var(--surface-2); border:1px solid var(--hairline);
  border-radius:var(--radius-sm); color:var(--ink);
  padding:0 var(--sp-3); font-family:var(--font-ui); font-size:var(--fs-body);
}
.inp:focus{ outline:none; border-color:var(--brand); box-shadow:var(--focus-ring); }

/* ---------- chip (state switcher) ---------- */
.chip,.chip-on{
  min-height:32px; padding:0 var(--sp-3); border-radius:var(--radius-full);
  font-size:var(--fs-caption); font-weight:600; cursor:pointer;
  border:1px solid var(--hairline); background:transparent; color:var(--ink-dim);
}
.chip-on{ border-color:var(--brand-edge); background:var(--brand-soft); color:var(--brand-bright); }

/* ---------- Wave 2: trade detail grid + trades table + filter bar ---------- */
/* detail-grid: มือถือ stack (header→emotion/note/tags→legs→ai) · desktop 2 คอลัมน์ (rail ขวา sticky) */
.detail-grid{ display:grid; gap:var(--sp-4); grid-template-columns:minmax(0,1fr);
  grid-template-areas:"header" "rail" "legs" "ai"; }
.detail-grid > *{ min-width:0; }   /* กัน track min-width:auto ทำ emotion picker ดันจอ (horizontal scroll) */
.detail-grid .a-header{ grid-area:header; }
.detail-grid .a-rail{ grid-area:rail; display:flex; flex-direction:column; gap:var(--sp-4); }
.detail-grid .a-rail > *{ min-width:0; }
.detail-grid .a-legs{ grid-area:legs; }
.detail-grid .a-ai{ grid-area:ai; }
@media (min-width:1024px){
  .detail-grid{ grid-template-columns:minmax(0,1fr) 360px;
    grid-template-areas:"header rail" "legs rail" "ai rail"; align-items:start; }
  .detail-grid .a-rail{ position:sticky; top:72px; }
}
/* trades table (desktop) */
.trades-table{ width:100%; border-collapse:collapse; }
.trades-table th{ text-align:left; font-size:var(--fs-micro); color:var(--ink-mute); font-weight:700;
  padding:10px var(--sp-3); background:var(--surface-2); border-bottom:1px solid var(--hairline); }
.trades-table td{ padding:11px var(--sp-3); border-bottom:1px solid var(--hairline-soft); font-size:var(--fs-caption); color:var(--ink-dim); }
.trades-table tbody tr{ cursor:pointer; }
.trades-table tbody tr:hover{ background:var(--surface-2); }
/* sticky filter bar ใต้ header */
.filterbar{ position:sticky; top:55px; z-index:var(--z-nav); background:var(--bg); padding:var(--sp-3) 0;
  margin:0 0 var(--sp-3); }

/* ---------- Wave 2.5: Trades KPI strip (4 ใบ · สะท้อน filter slice) ---------- */
.kpi-strip{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-3); margin-bottom:var(--sp-4); }
@media (min-width:1024px){ .kpi-strip{ grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; } }
.kpi-card{ background:var(--surface-1); border:1px solid var(--hairline); border-radius:var(--radius-lg);
  padding:var(--sp-4); box-shadow:var(--shadow-1); position:relative; min-width:0; }
.kpi-label{ font-size:var(--fs-micro); color:var(--ink-mute); font-weight:600; margin-bottom:6px; }
.kpi-value{ font-family:var(--font-display); font-weight:700; font-size:1.55rem; line-height:1.1; letter-spacing:-.5px; }
.kpi-pill{ display:inline-flex; align-items:center; gap:4px; min-height:22px; padding:0 8px; border-radius:var(--radius-full);
  font-size:11px; font-weight:700; font-variant-numeric:tabular-nums; }

/* ---------- Dashboard KPI cards (TradeZella-style · reuse .kpi-strip/.kpi-card) ---------- */
.dash-kpi-head{ display:flex; align-items:center; gap:6px; margin-bottom:8px; }
.dash-info{ display:inline-flex; align-items:center; justify-content:center; width:14px; height:14px; flex:0 0 auto;
  border-radius:50%; border:1px solid var(--hairline); color:var(--ink-mute); font-size:9px; font-weight:700;
  font-style:normal; line-height:1; cursor:help; }
.dash-count{ margin-left:auto; min-width:20px; height:20px; padding:0 6px; display:inline-flex; align-items:center;
  justify-content:center; border-radius:var(--radius-full); background:var(--surface-3); color:var(--ink-dim);
  font-size:11px; font-weight:700; font-variant-numeric:tabular-nums; }
.dash-sample-chip{ display:inline-block; font-size:var(--fs-micro); padding:2px 8px; border-radius:var(--radius-sm);
  background:var(--brand-soft); color:var(--brand-bright); font-weight:700; }

/* ---------- Wave 2.5: Calendar desktop (day list + sticky mini-cal) ---------- */
.cal-desktop{ display:flex; align-items:flex-start; gap:var(--sp-4); }
.cal-daylist{ flex:1 1 460px; min-width:0; display:flex; flex-direction:column; gap:var(--sp-3); }
.cal-minical{ flex:0 1 340px; position:sticky; top:72px; }
.daycard{ background:var(--surface-1); border:1px solid var(--hairline); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-1); overflow:hidden; scroll-margin-top:80px; }
.daycard-head{ display:flex; align-items:center; gap:var(--sp-3); width:100%; text-align:left;
  background:transparent; border:none; cursor:pointer; padding:var(--sp-4); min-height:60px; }
.daycard-caret{ transition:transform var(--dur-base) var(--ease); color:var(--ink-mute); font-size:14px; flex:0 0 auto; }
.daycard-caret.open{ transform:rotate(90deg); }
.daycard-body{ padding:0 var(--sp-4) var(--sp-4); }
.daystat-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-3) var(--sp-4); }
@media (min-width:1024px){ .daystat-grid{ grid-template-columns:repeat(4,1fr); } }
.daystat-label{ font-size:var(--fs-micro); color:var(--ink-mute); }
.daystat-value{ font-family:var(--font-display); font-weight:700; font-size:1.05rem; margin-top:2px; }
.daycard-split{ display:grid; grid-template-columns:1fr; gap:var(--sp-4); }
@media (min-width:1024px){ .daycard-split{ grid-template-columns:minmax(0,1.1fr) minmax(0,1.4fr); } }

/* ---------- keyframes ---------- */
@keyframes mtos-shimmer{ 0%{ background-position:200% 0; } 100%{ background-position:-200% 0; } }
@keyframes mtos-fade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes mtos-slideup{ from{ transform:translateY(16px); opacity:.4; } to{ transform:translateY(0); opacity:1; } }
@media (prefers-reduced-motion: reduce){
  .card,.btn-primary,.btn-secondary,.btn-brand{ transition:none; }
  [style*="animation"]{ animation:none !important; }
}