/* ============================================================
   Covera v5 — Design System
   CosMaste "Premium Clinical" light-bento  ×  Covera navy/gold
   Apple Health · Notion · Linear  ·  IBM Plex Sans Thai
   ============================================================ */

:root {
  /* ── Fonts ── */
  --font: 'IBM Plex Sans Thai', ui-sans-serif, system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;

  /* ── Brand: Covera navy (primary) ── */
  --navy-900: #16285a;
  --navy-800: #1e3a8a;
  --navy-700: #2547c4;
  --navy-600: #2f5ae0;
  --navy-100: #e0e7ff;
  --navy-50:  #eef2ff;
  --primary: var(--navy-800);
  --primary-hover: var(--navy-700);

  /* ── Accent: gold ── */
  --gold:    #fbbf24;
  --gold-600:#f59e0b;
  --gold-50: #fffbeb;

  /* ── Surfaces (Apple bento: off-white page, white cards) ── */
  --bg:        #F5F5F7;   /* page bg, deepest */
  --bg-sub:    #F8FAFC;   /* sub-surface / hover */
  --surface:   #FFFFFF;   /* content + cards */
  --card:      #FFFFFF;
  --card-tint: #FAFBFC;

  /* ── Borders (visible hairlines) ── */
  --line:      #E2E8F0;   /* slate-200 default */
  --line-strong:#CBD5E1;  /* slate-300 hover */
  --line-ghost:#F1F5F9;   /* slate-100 subtle */

  /* ── Text (slate) ── */
  --ink:    #0f172a;   /* slate-900 headings/body */
  --ink-2:  #334155;   /* slate-700 strong body */
  --muted:  #64748b;   /* slate-500 secondary */
  --muted-2:#94a3b8;   /* slate-400 captions/disabled */

  /* ── Status ── */
  --ok:#16a34a;  --ok-50:#f0fdf4;  --ok-100:#dcfce7;
  --warn:#f59e0b; --warn-50:#fffbeb; --warn-100:#fef3c7;
  --danger:#dc2626; --danger-50:#fef2f2; --danger-100:#fee2e2;
  --info:#2563eb; --info-50:#eff6ff;

  /* ── Radius scale ── */
  --r-xs:6px; --r-sm:8px; --r-md:10px; --r-card:16px; --r-lg:14px; --r-xl:20px; --r-full:9999px;

  /* ── Elevation (Apple soft layered) ── */
  --sh-card: 0 1px 3px 0 rgba(15,23,42,.06), 0 1px 2px -1px rgba(15,23,42,.05);
  --sh-hover:0 8px 18px -6px rgba(15,23,42,.12), 0 2px 6px -2px rgba(15,23,42,.08), 0 0 0 1px rgba(30,58,138,.06);
  --sh-pop:  0 12px 30px -8px rgba(15,23,42,.16), 0 4px 10px -3px rgba(15,23,42,.08);
  --sh-nav:  0 1px 2px rgba(15,23,42,.04);

  /* ── Motion ── */
  --ease: cubic-bezier(.16,1,.3,1);
  --ease-snap: cubic-bezier(.32,.72,0,1);

  /* layout */
  --sidebar-w: 260px;
  --topbar-h: 58px;
}

* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { margin:0; padding:0; height:100%; }
html { font-family:var(--font); }

body {
  font-family:var(--font);
  color:var(--ink);
  font-size:15px;
  line-height:1.55;
  background:
    radial-gradient(ellipse 70% 55% at top left, rgba(30,58,138,.05) 0%, transparent 55%),
    var(--bg);
  background-attachment:fixed;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}

#app { min-height:100vh; }
button { font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
input, select, textarea { font-family:inherit; font-size:inherit; color:inherit; }
a { color:inherit; text-decoration:none; }

/* clickable cursor */
button, a, [role="button"], label[for], select, summary, .clickable { cursor:pointer; }

.mono { font-family:var(--mono); font-feature-settings:"tnum","cv11"; font-variant-numeric:tabular-nums; }
.muted { color:var(--muted); }
.muted-2 { color:var(--muted-2); }

/* ============================================================
   App shell (web): sidebar + main
   ============================================================ */
.webapp { display:flex; min-height:100vh; }

.sidebar {
  width:var(--sidebar-w); flex:0 0 var(--sidebar-w);
  background:linear-gradient(180deg, #1f2837 0%, #11161f 100%);
  border-right:1px solid rgba(255,255,255,.06);
  display:flex; flex-direction:column;
  padding:14px 14px 10px;
  position:sticky; top:0; height:100vh; overflow-y:auto;
  scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.18) transparent;
}
.sidebar::-webkit-scrollbar { width:7px; }
.sidebar::-webkit-scrollbar-thumb { background:rgba(255,255,255,.16); border-radius:7px; }
.sb-brand { padding:6px 6px 18px; }
.sb-logo-plate {
  display:inline-flex; align-items:center; justify-content:center;
  background:#fff; border-radius:12px; padding:9px 14px;
  box-shadow:0 2px 10px rgba(0,0,0,.22); border:1px solid rgba(255,255,255,.5);
}
.sb-sectlabel {
  font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:rgba(255,255,255,.4); padding:0 10px; margin:14px 0 6px;
}
.sb-nav { display:flex; flex-direction:column; gap:2px; }
.sb-item {
  display:flex; align-items:center; gap:11px;
  padding:9px 11px; border-radius:var(--r-md);
  font-size:14px; font-weight:500; color:rgba(255,255,255,.72);
  position:relative; transition:background .15s var(--ease), color .15s var(--ease);
  text-align:left; width:100%;
}
.sb-item:hover { background:rgba(255,255,255,.08); color:#fff; }
.sb-item.active { background:rgba(255,255,255,.12); color:#fff; font-weight:600; }
.sb-item.active .sb-ind { position:absolute; left:-14px; top:50%; transform:translateY(-50%); width:3px; height:20px; border-radius:3px; background:var(--gold); }
.sb-item > span:first-of-type, .sb-item > span:not(.sb-ind) { flex:1; }
.sb-foot { margin-top:auto; padding-top:12px; }
.sb-agent {
  display:flex; align-items:center; gap:10px; padding:9px 10px;
  border-radius:var(--r-md); border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.06);
  transition:border-color .15s, background .15s;
}
.sb-agent:hover { border-color:rgba(255,255,255,.2); background:rgba(255,255,255,.1); }
.sb-agent .r-name, .sb-agent > div > div:first-child { color:#fff; }
.sb-agent > div > div:last-child { color:rgba(255,255,255,.55) !important; }

.web-main { flex:1; min-width:0; display:flex; flex-direction:column; }

/* Topbar */
.topbar {
  height:var(--topbar-h); flex:0 0 var(--topbar-h);
  display:flex; align-items:center; gap:14px;
  padding:0 24px;
  background:rgba(255,255,255,.78); backdrop-filter:blur(12px) saturate(160%);
  border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:20;
}
.topbar .tb-title { font-size:17px; font-weight:700; letter-spacing:-.01em; }
.topbar .tb-search {
  margin-left:auto; display:flex; align-items:center; gap:8px;
  background:var(--bg-sub); border:1px solid var(--line); border-radius:var(--r-full);
  padding:7px 14px; min-width:220px; color:var(--muted);
}
.topbar .tb-search input { background:none; border:none; outline:none; width:100%; font-size:13.5px; }
.tb-iconbtn {
  width:38px; height:38px; border-radius:var(--r-full);
  display:flex; align-items:center; justify-content:center;
  color:var(--ink-2); position:relative; transition:background .15s;
}
.tb-iconbtn:hover { background:var(--bg-sub); }
.tb-dot { position:absolute; top:8px; right:9px; width:7px; height:7px; border-radius:50%; background:var(--danger); border:2px solid var(--surface); }

.web-content { flex:1; overflow-y:auto; padding:24px; }
.web-content.full { padding:0; }
.web-mobilenav { display:none; }

/* Chromeless screens (login/present/customer view) */
.screen { min-height:100vh; }
.scroll { width:100%; }
.web-center { max-width:480px; margin:0 auto; }
.read-col { max-width:760px; margin:0 auto; }
.form-col { max-width:440px; margin:0 auto; }
.pad { padding:24px; }

/* ============================================================
   Page header
   ============================================================ */
.page { max-width:1180px; margin:0 auto; }
.page-wide { max-width:100%; }
.page-header { display:flex; align-items:flex-end; gap:16px; margin-bottom:20px; }
.ph-title { font-size:24px; font-weight:700; letter-spacing:-.02em; line-height:1.2; }
.ph-sub { font-size:14px; color:var(--muted); margin-top:4px; }
.ph-actions { margin-left:auto; display:flex; gap:10px; align-items:center; }

.section-label { font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--muted-2); margin-bottom:10px; }

/* ============================================================
   Card
   ============================================================ */
.card {
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-card); box-shadow:var(--sh-card);
  padding:20px;
}
.card.flat { box-shadow:none; }
.card.tint { background:var(--card-tint); }
.card.pad-sm { padding:14px; }
.card.pad-lg { padding:26px; }
.card-hover { transition:box-shadow .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease); }
.card-hover:hover { box-shadow:var(--sh-hover); border-color:var(--line-strong); }
.card-header { display:flex; align-items:center; gap:12px; margin:-4px 0 14px; }
.card-title { font-size:15.5px; font-weight:700; }

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 18px; border-radius:var(--r-md);
  font-size:14px; font-weight:600; letter-spacing:.01em;
  transition:background .15s var(--ease), box-shadow .15s, transform .08s, border-color .15s, color .15s;
  white-space:nowrap;
}
.btn:active { transform:translateY(1px); }
.btn-primary { background:var(--navy-800); color:#fff; box-shadow:0 1px 2px rgba(30,58,138,.25); }
.btn-primary:hover { background:var(--navy-700); box-shadow:0 6px 16px -4px rgba(30,58,138,.4); }
.btn-gold { background:var(--gold); color:#3a2c05; box-shadow:0 1px 2px rgba(245,158,11,.3); }
.btn-gold:hover { background:var(--gold-600); }
.btn-soft { background:var(--navy-50); color:var(--navy-800); }
.btn-soft:hover { background:var(--navy-100); }
.btn-outline { background:var(--surface); border:1px solid var(--line); color:var(--ink-2); }
.btn-outline:hover { border-color:var(--line-strong); background:var(--bg-sub); }
.btn-ghost { background:transparent; color:var(--ink-2); }
.btn-ghost:hover { background:var(--bg-sub); }
.btn-danger { background:var(--danger-50); color:var(--danger); }
.btn-danger:hover { background:var(--danger-100); }
.btn-block { width:100%; }
.btn-sm { padding:7px 13px; font-size:13px; border-radius:var(--r-sm); }
.btn-xs { padding:5px 10px; font-size:12px; border-radius:var(--r-sm); gap:5px; }
.btn-lg { padding:13px 22px; font-size:15.5px; }

.iconbtn {
  width:40px; height:40px; border-radius:var(--r-md);
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--ink-2); transition:background .15s;
}
.iconbtn:hover { background:var(--bg-sub); }
.iconbtn.ghost:hover { background:rgba(255,255,255,.14); }

/* ============================================================
   KPI cards
   ============================================================ */
.kpi-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.kpi {
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-card);
  box-shadow:var(--sh-card); padding:18px;
  transition:box-shadow .18s var(--ease), transform .18s var(--ease);
}
.kpi:hover { box-shadow:var(--sh-hover); transform:translateY(-1px); }
.k-ico { width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center; margin-bottom:14px; }
.k-val { font-family:var(--mono); font-size:26px; font-weight:700; letter-spacing:-.02em; line-height:1.05; color:var(--ink); font-variant-numeric:tabular-nums; }
.k-label { font-size:13px; color:var(--muted); margin-top:4px; }
.k-trend { font-size:12px; font-weight:600; display:inline-flex; align-items:center; gap:3px; margin-top:8px; }
.k-trend.up { color:var(--ok); } .k-trend.down { color:var(--danger); }

/* ============================================================
   Chips / badges
   ============================================================ */
.chip {
  display:inline-flex; align-items:center; gap:6px;
  height:28px; padding:0 11px; border-radius:var(--r-full);
  font-size:12.5px; font-weight:600; background:var(--bg-sub); color:var(--ink-2);
}
.chip.sm { height:24px; font-size:11.5px; padding:0 9px; }
.badge {
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 9px; border-radius:var(--r-full);
  font-size:11px; font-weight:700; letter-spacing:.02em;
}
.badge.warn { background:var(--warn-50); color:var(--gold-600); }
.badge.danger { background:var(--danger-50); color:var(--danger); }
.badge.ok { background:var(--ok-50); color:var(--ok); }
.badge.info { background:var(--info-50); color:var(--info); }
.badge.navy { background:var(--navy-50); color:var(--navy-800); }

/* ============================================================
   Avatar / company badge
   ============================================================ */
.avatar {
  width:44px; height:44px; border-radius:13px;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:700; font-size:17px; flex:0 0 auto;
}
.avatar.sm { width:36px; height:36px; border-radius:11px; font-size:14px; }
.avatar.lg { width:60px; height:60px; border-radius:18px; font-size:23px; }
.companybadge { display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; flex:0 0 auto; letter-spacing:-.02em; }

/* ============================================================
   Forms
   ============================================================ */
.field { margin-bottom:16px; }
.label { display:block; font-size:13px; font-weight:600; color:var(--ink-2); margin-bottom:7px; }
.input, .select, textarea.input {
  width:100%; padding:11px 14px; border-radius:var(--r-md);
  border:1px solid var(--line); background:var(--surface); font-size:14.5px;
  transition:border-color .15s, box-shadow .15s; outline:none;
}
.input:focus, .select:focus, textarea.input:focus { border-color:var(--navy-600); box-shadow:0 0 0 3px rgba(47,90,224,.12); }
.input-icon { position:relative; }
.input-icon .input { padding-left:42px; }
.input-icon > svg { position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--muted-2); }

.seg { display:flex; gap:4px; background:var(--bg-sub); border:1px solid var(--line); padding:4px; border-radius:var(--r-md); }
.seg button { flex:1; padding:8px 12px; border-radius:var(--r-sm); font-size:13.5px; font-weight:600; color:var(--muted); transition:all .15s; }
.seg button.active { background:var(--surface); color:var(--navy-800); box-shadow:var(--sh-card); }

/* OTP */
.otp-wrap { display:flex; gap:10px; justify-content:center; }
.otp-cell { width:46px; height:56px; border-radius:var(--r-md); border:1.5px solid var(--line); display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:24px; font-weight:600; background:var(--surface); transition:all .15s; }
.otp-cell.filled { border-color:var(--navy-600); color:var(--navy-800); }
.otp-cell.cursor { border-color:var(--navy-600); box-shadow:0 0 0 3px rgba(47,90,224,.12); }
.keypad { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; max-width:300px; margin:0 auto; }
.key { height:58px; border-radius:var(--r-md); background:var(--surface); border:1px solid var(--line); font-size:22px; font-weight:600; font-family:var(--mono); transition:background .12s; }
.key:hover { background:var(--bg-sub); }
.key.blank { background:none; border:none; }

/* ============================================================
   Table
   ============================================================ */
.tbl { width:100%; border-collapse:collapse; font-size:14px; }
.tbl th { text-align:left; font-size:11.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--muted-2); padding:0 14px 11px; border-bottom:1px solid var(--line); }
.tbl td { padding:13px 14px; border-bottom:1px solid var(--line-ghost); }
.tbl tr:last-child td { border-bottom:none; }
.tbl tr.clickable:hover td { background:var(--bg-sub); }

/* list rows */
.row {
  display:flex; align-items:center; gap:14px; padding:13px 16px;
  border-radius:var(--r-lg); border:1px solid var(--line); background:var(--card);
  transition:box-shadow .15s, border-color .15s, transform .12s;
}
.row.clickable:hover { box-shadow:var(--sh-hover); border-color:var(--line-strong); }

/* ============================================================
   Layout helpers
   ============================================================ */
.stack { display:flex; flex-direction:column; }
.flexrow { display:flex; align-items:center; gap:10px; }
.spacer { flex:1; }
.grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.grid-2-1 { display:grid; grid-template-columns:2fr 1fr; gap:20px; }
.divider { height:1px; background:var(--line); margin:16px 0; border:none; }

/* progress bar */
.bar { height:8px; border-radius:var(--r-full); background:var(--line-ghost); overflow:hidden; }
.bar > i { display:block; height:100%; border-radius:var(--r-full); background:var(--navy-700); transition:width .8s var(--ease); }

/* ============================================================
   Toast
   ============================================================ */
.toast {
  position:fixed; bottom:28px; left:50%; transform:translateX(-50%);
  background:var(--ink); color:#fff; padding:13px 20px; border-radius:var(--r-full);
  display:flex; align-items:center; gap:10px; font-size:14px; font-weight:500;
  box-shadow:var(--sh-pop); z-index:200;
}

/* ── navy promo panel (gradient CTA card) ── */
.navy-panel {
  position:relative; overflow:hidden; border-radius:var(--r-card);
  background:linear-gradient(150deg, var(--navy-800), var(--navy-900));
  color:#fff; padding:22px; box-shadow:0 8px 24px -8px rgba(30,58,138,.5);
}
.navy-panel .glow { position:absolute; right:-30px; top:-40px; width:160px; height:160px; border-radius:50%; background:radial-gradient(circle, rgba(251,191,36,.28), transparent 70%); pointer-events:none; }

/* ── filter chips (scroll row) ── */
.chip-scroll { display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; }
.chip-scroll::-webkit-scrollbar { display:none; }
.fchip {
  flex:0 0 auto; padding:7px 14px; border-radius:var(--r-full);
  font-size:13px; font-weight:600; color:var(--muted); background:var(--bg-sub);
  border:1px solid var(--line); transition:all .15s;
}
.fchip:hover { border-color:var(--line-strong); }
.fchip.on { background:var(--navy-800); color:#fff; border-color:var(--navy-800); }

/* ── list row text ── */
.r-main { flex:1; min-width:0; }
.r-name { font-size:15.5px; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.r-sub { font-size:13px; color:var(--muted); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.r-meta { text-align:right; }

/* ── helpers ── */
.t-navy, .navy-t { color:var(--navy-800); }
.t-gold { color:var(--gold-600); }
.center { text-align:center; }
.maxw { max-width:1180px; margin:0 auto; }

/* ── card header (chart titles) ── */
.card-h { display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.ch-title { font-size:16px; font-weight:700; }
.ch-sub { font-size:12.5px; color:var(--muted); margin-top:2px; }

/* ── progress (legacy alias of .bar) ── */
.progress { height:8px; border-radius:var(--r-full); background:var(--line-ghost); overflow:hidden; }
.progress > i { display:block; height:100%; border-radius:var(--r-full); background:var(--navy-700); transition:width .8s var(--ease); }

/* ── two-column layout (legacy alias) ── */
.cols.c-2 { display:grid; grid-template-columns:1.6fr 1fr; gap:20px; align-items:start; }
.grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.grid2 { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
@media (max-width:1024px){ .cols.c-2{ grid-template-columns:1fr; } .grid3{ grid-template-columns:1fr; } }
@media (max-width:768px){ .grid2{ grid-template-columns:1fr; } }

/* chip color variants used by screens */
.chip.warn { background:var(--warn-50); color:var(--gold-600); }
.chip.danger { background:var(--danger-50); color:var(--danger); }
.chip.ok { background:var(--ok-50); color:var(--ok); }
.chip.gold { background:var(--gold-50); color:var(--gold-600); }
.chip.gray { background:var(--bg-sub); color:var(--ink-2); }

/* statusbar (mobile chrome — hidden on web) */
.statusbar { display:none; }
.device-cam { display:none; }
.appbar { display:flex; align-items:center; gap:8px; padding:14px 20px; }
.appbar .title { font-size:20px; font-weight:700; }
.appbar .sub { font-size:13px; color:var(--muted); }

/* ============================================================
   Animations
   ============================================================ */
@keyframes slide-up { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
.slide-up { animation:slide-up .4s var(--ease) both; }
@keyframes fade-in { from { opacity:0; } to { opacity:1; } }
.fade-in { animation:fade-in .3s ease both; }

/* ============================================================
   Responsive — mobile: hide sidebar, show bottom nav
   ============================================================ */
@media (max-width: 1024px) {
  .kpi-grid { grid-template-columns:repeat(2,1fr); }
  .grid-2-1 { grid-template-columns:1fr; }
  .grid-3 { grid-template-columns:1fr; }
}
@media (max-width: 768px) {
  .sidebar { display:none; }
  .topbar .tb-search { display:none; }
  .web-content { padding:16px 14px 84px; }
  .kpi-grid { grid-template-columns:repeat(2,1fr); gap:12px; }
  .grid-2 { grid-template-columns:1fr; }
  .page-header { flex-direction:column; align-items:flex-start; gap:10px; }
  .ph-actions { margin-left:0; width:100%; }
  .web-mobilenav { display:block; position:fixed; bottom:0; left:0; right:0; z-index:50; }
  .bottomnav {
    display:flex; background:rgba(255,255,255,.92); backdrop-filter:blur(12px);
    border-top:1px solid var(--line); padding:8px 6px calc(8px + env(safe-area-inset-bottom));
  }
  .navtab { flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; padding:5px 0; color:var(--muted-2); font-size:0; }
  .navtab .nt-label { font-size:10.5px; font-weight:600; }
  .navtab.active { color:var(--navy-800); }
}