/* WazzOCR shared design system — matches the FusionETA / wazzocr.fusioneta.com.my brand. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@600;700;800&display=swap');

:root {
  /* FusionETA brand tokens (from the live WazzOCR site) */
  --navy:#1A2E6F; --blue:#2D4DB3; --accent:#FF6B35;
  --ink:#16223F; --text:#1C2B3A; --muted:#6B7A8D; --line:#E2E8F0;
  --bg:#F4F6FB; --card:#FFFFFF; --navy-700:#1A2E6F;
  --ok:#15803D; --ok-bg:#ECFDF3; --bad:#B42318; --bad-bg:#FEF3F2; --warn:#B54708; --warn-bg:#FFFAEB;
  --grad:linear-gradient(135deg,#1A2E6F 0%,#2D4DB3 100%);
  --r:14px; --r-sm:9px;
  --shadow-sm:0 1px 2px rgba(16,35,92,.06);
  --shadow:0 1px 2px rgba(16,35,92,.04), 0 10px 28px rgba(16,35,92,.06);
  --shadow-lg:0 12px 40px rgba(16,35,92,.16);
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --head:'Plus Jakarta Sans','Inter',sans-serif;
}
* { box-sizing:border-box; }
html,body { margin:0; }
body { font-family:var(--font); color:var(--text); -webkit-font-smoothing:antialiased; min-height:100vh;
  background:var(--bg) radial-gradient(1000px 460px at 50% -240px, rgba(45,77,179,.07), transparent) no-repeat fixed; }
a { color:var(--navy); text-decoration:none; }
a:hover { text-decoration:underline; }
h1,h2,h3 { font-family:var(--head); color:var(--ink); }

/* ── Top bar ─────────────────────────────────────────────── */
.topbar { position:sticky; top:0; z-index:20; background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:saturate(180%) blur(12px); backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
  /* full-width bar, but content aligned to the centered 1280px content column */
  padding:.8rem max(1.25rem, calc((100% - 1280px) / 2 + 1.25rem));
  display:flex; align-items:center; justify-content:space-between; box-shadow:var(--shadow-sm); }
.topbar .brand { display:flex; align-items:center; gap:.6rem; font-family:var(--head); font-weight:800; color:var(--navy); font-size:1.1rem; }
.topbar .right { display:flex; align-items:center; gap:.75rem; }
.who { font-size:.82rem; color:var(--muted); display:inline-block; max-width:40vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:middle; }

/* ── Layout ──────────────────────────────────────────────── */
.container { max-width:1280px; margin:1.75rem auto; padding:0 1.25rem; }
.container.wide { max-width:1440px; }
.page-head { margin:0 0 1.4rem; }
.page-head h1 { margin:0; font-size:1.7rem; letter-spacing:-.02em; }
.page-head p { margin:.35rem 0 0; color:var(--muted); font-size:.9rem; }

/* ── Cards ───────────────────────────────────────────────── */
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow); padding:1.4rem 1.5rem; margin-bottom:1.25rem; }
.card h2 { margin:0 0 1rem; font-size:1.05rem; position:relative; padding-left:.72rem; }
.card h2::before { content:''; position:absolute; left:0; top:.18em; bottom:.18em; width:3px; border-radius:3px; background:var(--accent); }
.card.hero h2::before { display:none; }
.card h3 { margin:1.25rem 0 .6rem; font-size:.92rem; }
.eyebrow { font-family:var(--head); font-size:.7rem; font-weight:700; color:var(--accent); text-transform:uppercase; letter-spacing:.09em; }
.muted { color:var(--muted); font-size:.86rem; }

/* stat / counter */
.stat { display:flex; align-items:baseline; gap:.6rem; }
.stat .num { font-family:var(--head); font-size:2.8rem; font-weight:800; color:var(--navy); line-height:1; letter-spacing:-.02em; }
.stat .unit { color:var(--muted); font-weight:600; }

/* key/value rows */
.kv { display:flex; gap:1rem; padding:.45rem 0; font-size:.9rem; border-bottom:1px dashed var(--line); }
.kv:last-child { border-bottom:none; }
.kv .k { color:var(--muted); min-width:160px; }
.kv > div { min-width:0; overflow-wrap:anywhere; }  /* long values wrap instead of overflowing the card */

/* ── Buttons ─────────────────────────────────────────────── */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
  border:1px solid transparent; border-radius:var(--r-sm); padding:.62rem 1.15rem;
  font-family:var(--font); font-weight:700; font-size:.88rem; cursor:pointer; transition:.18s; line-height:1; }
.btn-primary { background:var(--grad); color:#fff; box-shadow:0 2px 10px rgba(26,46,111,.26); }
.btn-primary:hover { filter:brightness(1.06); text-decoration:none; box-shadow:0 4px 16px rgba(26,46,111,.32); transform:translateY(-1px); }
.btn-accent { background:var(--accent); color:#fff; }
.btn-accent:hover { filter:brightness(1.05); text-decoration:none; }
.btn-ghost { background:#fff; border-color:var(--line); color:var(--text); }
.btn-ghost:hover { background:#F8FAFD; text-decoration:none; }
.btn-sm { padding:.42rem .75rem; font-size:.8rem; }
.btn[disabled] { opacity:.55; cursor:not-allowed; }
.linkbtn { background:none; border:none; color:var(--navy); font-weight:600; cursor:pointer; padding:0; font-size:.85rem; font-family:var(--font); }
.linkbtn:hover { color:var(--blue); }
.linkbtn.danger { color:var(--bad); }

/* ── Forms ───────────────────────────────────────────────── */
label.fld { display:block; font-size:.72rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; margin:.9rem 0 .35rem; }
input, select, textarea { width:100%; padding:.64rem .8rem; border:1px solid var(--line); border-radius:var(--r-sm);
  font-size:.92rem; font-family:inherit; color:var(--text); background:#fff; outline:none; transition:.15s; }
input:focus, select:focus, textarea:focus { border-color:var(--navy); box-shadow:0 0 0 3px rgba(26,46,111,.12); }
textarea { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.82rem; resize:vertical; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }
.field { margin:.6rem 0; }
.field label { display:block; font-size:.72rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; margin-bottom:.3rem; }

/* ── Tables ──────────────────────────────────────────────── */
.table { width:100%; border-collapse:separate; border-spacing:0; font-size:.875rem; }
.table th { text-align:left; font-size:.68rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; padding:.6rem .6rem; border-bottom:1px solid var(--line); background:#F7F9FC; }
.table thead th:first-child { border-top-left-radius:8px; } .table thead th:last-child { border-top-right-radius:8px; }
.table td { padding:.7rem .6rem; border-bottom:1px solid var(--line); vertical-align:middle; }
.table tbody tr:last-child td { border-bottom:none; }
.table tbody tr:hover td { background:#FAFBFE; }
.num-cell { font-variant-numeric:tabular-nums; }

/* ── Badges ──────────────────────────────────────────────── */
.badge { display:inline-flex; align-items:center; gap:.35rem; padding:.2rem .6rem; border-radius:999px; font-size:.72rem; font-weight:700; }
.badge:not(.neutral)::before { content:''; width:6px; height:6px; border-radius:50%; background:currentColor; flex-shrink:0; }
.badge.success { background:var(--ok-bg); color:var(--ok); }
.badge.failed  { background:var(--bad-bg); color:var(--bad); }
.badge.pending { background:var(--warn-bg); color:var(--warn); }
.badge.skipped { background:#F1F4F9; color:var(--muted); }
.badge.neutral { background:#FFF1EA; color:var(--accent); }

/* ── Tabs ────────────────────────────────────────────────── */
.tabs { display:inline-flex; gap:.2rem; background:#fff; border:1px solid var(--line); border-radius:12px; padding:.28rem; margin-bottom:1.25rem; box-shadow:var(--shadow-sm); }
.tabs button { border:none; background:transparent; color:var(--muted); font-family:var(--font); font-weight:700; font-size:.85rem; padding:.5rem 1rem; border-radius:8px; cursor:pointer; transition:.15s; }
.tabs button:hover { color:var(--text); }
.tabs button.active { background:var(--grad); color:#fff; }
.panel { display:none; } .panel.active { display:block; }

/* ── Phone restriction switch ───────────────────────────────── */
.switch-row { display:inline-flex; align-items:center; gap:.6rem; cursor:pointer; font-size:.95rem; flex-wrap:wrap; }
.switch { position:relative; display:inline-block; width:42px; height:24px; flex:0 0 auto; }
.switch input { position:absolute; inset:0; opacity:0; cursor:pointer; z-index:2; }
.switch-track { position:absolute; inset:0; border-radius:999px; background:#CBD5E1; transition:background .2s; }
.switch-thumb { position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; transition:left .2s; box-shadow:0 1px 3px rgba(0,0,0,.25); }
.switch.is-on .switch-track { background:var(--blue); }
.switch.is-on .switch-thumb { left:21px; }
.switch-label { font-weight:700; color:var(--ink); }
.switch-state { font-size:.8rem; color:var(--muted); font-weight:800; letter-spacing:.04em; }
.switch-state.is-on { color:var(--ok); }

/* ── Settings two-column layout (one card left, two stacked right) ── */
.settings-grid { display:grid; grid-template-columns:minmax(0,0.85fr) minmax(0,1.3fr); gap:1.25rem; align-items:stretch; }
.settings-grid .col-left, .settings-grid .col-right { display:flex; flex-direction:column; gap:1.25rem; }
.settings-grid .col-left .card, .settings-grid .col-right .card { margin-bottom:0; }
.settings-grid .col-left .card { flex:1; }  /* stretch the lone left card to match the right column height */
@media (max-width:880px){ .settings-grid { grid-template-columns:1fr; } }

/* ── Messages / empty ────────────────────────────────────── */
.msg { font-size:.85rem; padding:.6rem .8rem; border-radius:var(--r-sm); margin-top:.7rem; display:none; }
.msg.ok { background:var(--ok-bg); color:var(--ok); display:block; }
.msg.err { background:var(--bad-bg); color:var(--bad); display:block; }
.empty { text-align:center; color:var(--muted); font-size:.88rem; padding:1.5rem 0; }

/* ── Auth pages ──────────────────────────────────────────── */
.auth-bg { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:1.5rem;
  background:radial-gradient(1100px 560px at 50% -10%, rgba(255,107,53,.18), transparent), var(--grad); }
.auth-card { background:#fff; border-radius:18px; padding:2.25rem; width:100%; max-width:460px; box-shadow:var(--shadow-lg); }
.auth-card h1 { margin:.75rem 0 .25rem; font-size:1.45rem; text-align:center; }
.auth-card .sub { margin:0 0 1.5rem; color:var(--muted); font-size:.9rem; text-align:center; }
.google-btn { display:flex; align-items:center; justify-content:center; gap:.6rem; width:100%; padding:.72rem;
  border:1px solid var(--line); border-radius:var(--r-sm); background:#fff; color:var(--ink); font-weight:600; font-size:.9rem; cursor:pointer; }
.google-btn:hover { background:#F8FAFD; text-decoration:none; }
.xero-btn { display:flex; align-items:center; justify-content:center; gap:.75rem; width:100%; padding:.85rem;
  border:none; border-radius:var(--r-sm); background:#13B5EA; color:#fff; font-weight:600; font-size:1rem; cursor:pointer; margin-bottom:.6rem; }
.xero-btn:hover { background:#0fa3d4; text-decoration:none; color:#fff; }
.divider { display:flex; align-items:center; gap:.7rem; margin:1.1rem 0 .25rem; color:var(--muted); font-size:.76rem; }
.divider::before, .divider::after { content:''; flex:1; height:1px; background:var(--line); }
.links { margin-top:1.25rem; text-align:center; font-size:.85rem; }
.auth-foot { margin:1.1rem 0 0; padding-top:1rem; border-top:1px solid var(--line); text-align:center; font-size:.82rem; color:var(--muted); }
.auth-foot a { font-weight:600; }
.auth-contact { display:flex; flex-wrap:wrap; justify-content:center; gap:.4rem 1.1rem; margin-top:.55rem; font-size:.82rem; }
.auth-contact a { display:inline-flex; align-items:center; gap:.35rem; color:var(--muted); font-weight:600; }
.auth-contact a:hover { color:var(--navy); text-decoration:none; }
.auth-contact svg { color:var(--accent); flex-shrink:0; }

@media (max-width:600px){ .grid2 { grid-template-columns:1fr; } .kv { flex-direction:column; gap:.15rem; } .kv .k { min-width:0; } }

/* ── Searchable dropdown ── */
.sdrop { position:relative; display:inline-block; width:100%; }
.sdrop-btn { display:flex; align-items:center; justify-content:space-between; gap:.5rem; width:100%;
  padding:.55rem .8rem; border:1px solid var(--line); border-radius:var(--r-sm); background:#fff;
  font-family:var(--font); font-size:.9rem; color:var(--text); cursor:pointer; text-align:left; }
.sdrop-btn:hover { border-color:#cbd5e1; }
.sdrop-cur { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sdrop-caret { color:var(--muted); flex-shrink:0; }
.sdrop-panel { position:absolute; z-index:30; top:calc(100% + 4px); left:0; right:0; display:none;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-sm); box-shadow:var(--shadow);
  overflow:hidden; }
.sdrop-panel.open { display:block; }
.sdrop-search { width:100%; border:none; border-bottom:1px solid var(--line); border-radius:0;
  padding:.6rem .8rem; font-size:.88rem; outline:none; }
.sdrop-search:focus { box-shadow:none; border-bottom-color:var(--navy); }
.sdrop-list { max-height:260px; overflow-y:auto; }
.sdrop-opt { padding:.55rem .8rem; font-size:.88rem; cursor:pointer; }
.sdrop-opt:hover { background:#F4F6FB; }
.sdrop-opt.sel { background:#EEF2FF; color:var(--navy); font-weight:600; }
.sdrop-empty { padding:.7rem .8rem; color:var(--muted); font-size:.85rem; }

/* ── Copy icon button ── */
.copy-btn { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px;
  border:1px solid var(--line); border-radius:7px; background:#fff; color:var(--muted); cursor:pointer;
  flex-shrink:0; transition:.15s; }
.copy-btn:hover { background:#F4F6FB; color:var(--navy); border-color:#cbd5e1; }

/* ── Fixed-layout tables (consistent column widths page-to-page) ── */
.table.fixed { table-layout:fixed; }
.table.fixed td { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ── Filter bar (search + date range above a table) ── */
.filterbar { display:flex; flex-wrap:wrap; align-items:flex-end; gap:.6rem; margin:.2rem 0 1rem; }
.filterbar .fb-field { display:flex; flex-direction:column; gap:.25rem; }
.filterbar .fb-grow { flex:1; min-width:200px; }
.filterbar label { font-size:.66rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.filterbar input { padding:.5rem .7rem; font-size:.86rem; }
.filterbar input[type="date"] { min-width:140px; }
.filterbar .fb-count { font-size:.78rem; color:var(--muted); margin-left:auto; align-self:center; }

/* ── Styled file upload (custom, replaces the native control) ── */
.file-drop { display:flex; align-items:center; gap:.65rem; width:100%; padding:.85rem 1rem;
  border:1.5px dashed var(--line); border-radius:var(--r-sm); background:#FAFBFE; color:var(--muted);
  font-size:.88rem; cursor:pointer; transition:.15s; }
.file-drop:hover { border-color:var(--blue); background:#F4F6FB; color:var(--text); }
.file-drop.dragover { border-color:var(--blue); background:#EEF2FF; color:var(--navy); }
.file-drop svg { flex-shrink:0; color:var(--blue); }
.file-drop .fd-text { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.file-drop .fd-text strong { color:var(--navy); font-weight:600; }

/* ── Password show/hide toggle ── */
.pw-wrap { position:relative; }
.pw-wrap input { padding-right:2.7rem; }
.pw-toggle { position:absolute; right:.35rem; top:50%; transform:translateY(-50%);
  width:2rem; height:2rem; display:inline-flex; align-items:center; justify-content:center;
  border:none; background:none; color:var(--muted); cursor:pointer; border-radius:6px; padding:0; }
.pw-toggle:hover { color:var(--navy); background:#F4F6FB; }

/* ── Stat tiles (dashboard-style metric grid) ── */
.stat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:.85rem; }
.stat-tile { position:relative; border:1px solid var(--line); border-left:3px solid var(--line);
  border-radius:var(--r-sm); padding:.95rem 1.05rem; background:#FAFBFE;
  display:flex; flex-direction:column; gap:.3rem; transition:transform .15s ease, box-shadow .15s ease; }
.stat-tile:hover { transform:translateY(-2px); box-shadow:var(--shadow); }
.stat-tile .t-num { font-family:var(--head); font-size:2rem; font-weight:800; color:var(--ink); line-height:1; letter-spacing:-.02em; }
.stat-tile .t-label { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
.stat-tile .t-ico { position:absolute; top:.85rem; right:.9rem; opacity:.45; color:var(--muted); }
.stat-tile.ok .t-ico { color:var(--ok); } .stat-tile.bad .t-ico { color:var(--bad); } .stat-tile.warn .t-ico { color:var(--warn); }
.stat-tile.ok   { background:var(--ok-bg);  border-color:#CDEED8; border-left-color:var(--ok); } .stat-tile.ok .t-num   { color:var(--ok); }
.stat-tile.bad  { background:var(--bad-bg); border-color:#F6D4D0; border-left-color:var(--bad); } .stat-tile.bad .t-num  { color:var(--bad); }
.stat-tile.warn { background:var(--warn-bg);border-color:#F5E2BF; border-left-color:var(--warn); } .stat-tile.warn .t-num { color:var(--warn); }

/* clickable / hover accent on table rows */
.table tbody tr:hover td:first-child { box-shadow:inset 3px 0 0 var(--accent); }

/* ── FusionETA brand logo image ── */
.brand-logo { height:30px; width:auto; display:block; }
.brand-divider { width:1px; height:24px; background:var(--line); flex-shrink:0; }
.brand-name { font-family:var(--head); font-weight:800; color:var(--navy); }
.auth-logo  { height:42px; width:auto; display:block; margin:0 auto .75rem; }

/* ── Hero stat card (branded counter, echoes the login gradient) ── */
.card.hero { background:var(--grad); border:none; color:#fff; position:relative; overflow:hidden; }
.card.hero::before { content:''; position:absolute; right:-40px; top:-60px; width:240px; height:240px;
  background:radial-gradient(circle, rgba(255,107,53,.42), transparent 64%); pointer-events:none; }
.card.hero > * { position:relative; }
.card.hero .eyebrow { color:#FFCEB9; }
.card.hero .stat .num { color:#fff; }
.card.hero .stat .unit { color:rgba(255,255,255,.78); }
.card.hero .muted { color:rgba(255,255,255,.82); }

/* ── Misc polish ── */
.card { transition:box-shadow .2s ease; }
.empty { text-align:center; color:var(--muted); font-size:.9rem; padding:2rem 0; }
.tabs { background:rgba(255,255,255,.9); }

/* ── Count pill beside a card title ── */
.title-count { display:inline-flex; align-items:center; margin-left:.55rem; vertical-align:middle;
  font-family:var(--font); font-size:.72rem; font-weight:700; color:var(--muted);
  background:#EEF2F8; border-radius:999px; padding:.14rem .55rem; }

/* ── Stacked chart panels: card height = the taller panel, no jump on toggle ── */
.chart-stack { display:grid; }
.chart-stack > .cpanel { grid-column:1; grid-row:1; visibility:hidden; opacity:0; pointer-events:none; transition:opacity .15s ease; }
.chart-stack > .cpanel.active { visibility:visible; opacity:1; pointer-events:auto; }