/* =============================================================
   Telesales UI — hệ thiết kế dùng chung cho web service Sherpa ASR
   Bảng màu GHN (kem/cam), font Inter + mono, dark-mode tự động.
   Trích & hợp nhất từ telesales.html / telesales_batch.html / telesales_dict.html
   ============================================================= */

:root{
  --bg:#faf6f0;--surface:#fff;--surface2:#f4ede3;--ink:#211d17;--ink2:#5c5347;--ink3:#8a7f70;
  --line:#e6dccd;--line2:#d6c8b3;--accent:#ec6519;--accent2:#b8460c;--accentsoft:#fbe6d5;
  --agent:#b8460c;--cust:#2f6ea5;
  --ok:#2f7d5b;--oksoft:#dcefe4;--warn:#b0740f;--warnsoft:#f7ecd3;--bad:#bb3320;--badsoft:#f6ddd6;--err:#bb3320;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --sans:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#16130e;--surface:#201b14;--surface2:#2a241b;--ink:#f2ebe0;--ink2:#c3b8a6;--ink3:#8f8474;
  --line:#352d22;--line2:#4a3f30;--accent:#f7853d;--accent2:#f7a066;--accentsoft:#3a2414;
  --agent:#f7a066;--cust:#7fb0e0;
  --ok:#6bc79b;--oksoft:#16281f;--warn:#e0ac54;--warnsoft:#2c2313;--bad:#e78169;--badsoft:#2e1912;--err:#e78169;
}}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.55}
a{color:var(--accent2)}
.hidden{display:none}
/* Thuộc tính hidden phải luôn thắng các rule display của component (vd .tile) */
[hidden]{display:none !important}

/* Layout */
.wrap{max-width:52rem;margin:0 auto;padding:28px 18px 80px}
.wrap.wide{max-width:60rem}

/* Header */
header{display:flex;align-items:center;gap:12px;padding-bottom:18px;border-bottom:1px solid var(--line);margin-bottom:22px}
header .logo{width:34px;height:34px;border-radius:9px;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:18px;flex:0 0 auto}
header h1{font-size:19px;margin:0;letter-spacing:-.01em}
header .sub{font-family:var(--mono);font-size:11px;color:var(--ink3)}
header .sp{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
a.nav,a.back{font-size:13px;color:var(--ink3);text-decoration:none;border:1px solid var(--line);padding:6px 11px;border-radius:8px;white-space:nowrap}
a.nav:hover,a.back:hover{border-color:var(--line2);color:var(--ink2)}
a.back{margin-left:auto}

/* Cards */
.card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:18px 20px;margin-bottom:16px}
.mlabel{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);margin:0 0 10px}
.sec-title{font-weight:700;font-size:15px;margin:0 0 10px;display:flex;align-items:center;gap:8px}
.count{font-family:var(--mono);font-size:12px;color:var(--ink3);font-weight:400}

/* Buttons */
.btn{background:var(--accent);color:#fff;border:0;padding:11px 18px;border-radius:9px;font-weight:700;font-size:14px;cursor:pointer;font-family:var(--sans)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-ghost{background:var(--surface);color:var(--ink2);border:1px solid var(--line2);font-weight:600}
.btn-block{width:100%}
#run{width:100%;margin-top:18px;background:var(--accent);color:#fff;border:0;padding:13px;border-radius:9px;font-weight:700;font-size:15px;cursor:pointer}
#run:disabled{opacity:.5;cursor:not-allowed}

/* Toggle switch */
.sw{width:42px;height:24px;border-radius:999px;background:var(--line2);position:relative;flex:0 0 auto;cursor:pointer;transition:background .15s;border:0}
.sw.on{background:var(--accent)}
.sw i{position:absolute;top:2.5px;left:2.5px;width:19px;height:19px;border-radius:50%;background:#fff;transition:left .15s}
.sw.on i{left:20.5px}

/* Segmented control */
.seg{display:inline-flex;border:1px solid var(--line2);border-radius:8px;overflow:hidden}
.seg button{border:0;background:var(--surface);color:var(--ink2);font-family:var(--mono);font-size:12px;padding:6px 12px;cursor:pointer}
.seg button.on{background:var(--accent);color:#fff}

/* Option row (label + control) */
.opt{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.opt:last-child{border-bottom:0}
.opt .t{font-size:14.5px}.opt .d{font-size:12px;color:var(--ink3);margin-top:2px}

/* Inputs */
input,textarea,select{font-family:inherit}
.input{border:1px solid var(--line2);border-radius:8px;padding:9px 11px;background:var(--surface);color:var(--ink);font-size:14px;width:100%}
textarea.input{font-family:var(--mono);font-size:12.5px}
.field{display:flex;border:1px solid var(--line2);border-radius:9px;overflow:hidden}
.field input{flex:1;border:0;padding:11px 13px;font-family:var(--mono);font-size:12.5px;background:var(--surface);color:var(--ink);min-width:0}
.field .tag{background:var(--surface2);border-left:1px solid var(--line);padding:0 12px;font-size:11px;color:var(--ink3);display:flex;align-items:center}

/* Status text */
#status,.status{margin-top:14px;font-family:var(--mono);font-size:13px;color:var(--ink2);min-height:18px}
#status.err,.status.err{color:var(--err)}
#meta,.meta{font-family:var(--mono);font-size:12px;color:var(--ink3);margin:2px 0 14px}

/* Transcript turns */
.turn{display:flex;gap:10px;padding:7px 0;font-size:14.5px;border-bottom:1px solid var(--line)}
.turn:last-child{border-bottom:0}
.who{font-family:var(--mono);font-size:11px;font-weight:700;flex:0 0 92px;padding-top:2px}
.who.a{color:var(--agent)}.who.c{color:var(--cust)}
.ts{color:var(--ink3);font-size:11px;font-family:var(--mono)}

/* Tables */
table{border-collapse:collapse;width:100%;font-size:13.5px}
th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
th{font-family:var(--mono);font-size:11px;text-transform:uppercase;color:var(--ink3);letter-spacing:.04em}
td.name{font-family:var(--mono);word-break:break-all}
.scrollx{overflow-x:auto}

/* Pills / badges */
.pill{font-family:var(--mono);font-size:11px;font-weight:700;padding:3px 9px;border-radius:6px;white-space:nowrap}
.pill.done{background:var(--oksoft);color:var(--ok)}
.pill.proc{background:var(--warnsoft);color:var(--warn)}
.pill.queue{background:var(--surface2);color:var(--ink3)}
.pill.err{background:var(--badsoft);color:var(--bad)}

/* Modal */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.5);display:none;align-items:flex-start;justify-content:center;padding:30px 16px;overflow:auto;z-index:50}
.modal.on{display:flex}
.sheet{background:var(--bg);border:1px solid var(--line2);border-radius:14px;max-width:52rem;width:100%;padding:20px 22px}
.sheet .top{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.sheet h2{font-size:16px;margin:0;font-family:var(--mono);word-break:break-all}
.sheet .x{margin-left:auto;border:0;background:var(--surface2);color:var(--ink);border-radius:8px;padding:6px 12px;cursor:pointer}

/* Auth wall */
.authwall{text-align:center;padding:60px 20px;color:var(--ink2)}
.authwall a{color:var(--accent2)}

/* Code blocks (API docs) */
pre.code{background:var(--surface2);border:1px solid var(--line);border-radius:9px;padding:14px 16px;overflow-x:auto;font-family:var(--mono);font-size:12.5px;color:var(--ink);line-height:1.6;margin:10px 0}
code.inline{font-family:var(--mono);font-size:.9em;background:var(--surface2);padding:1px 5px;border-radius:4px;color:var(--accent2)}

/* Grid of nav cards (home) */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.tile{display:block;text-decoration:none;color:inherit;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:18px 18px;transition:border-color .15s,transform .1s}
.tile:hover{border-color:var(--accent);transform:translateY(-2px)}
.tile .ic{font-size:26px}
.tile h3{margin:8px 0 4px;font-size:15.5px}
.tile p{margin:0;font-size:12.5px;color:var(--ink3);line-height:1.5}

/* Stat row */
.stats{display:flex;gap:18px;flex-wrap:wrap;font-family:var(--mono);font-size:13px;color:var(--ink2)}
.stats b{color:var(--accent2)}