:root { --bg:#f5f6f8; --card:#fff; --text:#1d2330; --muted:#6b7280; --line:#e3e6ea; --soft:#eef1f5;
        --ok:#16a34a; --bad:#dc2626; --warn:#d97706; --accent:#2563eb; --accent-soft:#dbe7fe; }
@media (prefers-color-scheme: dark) {
  :root { --bg:#14171c; --card:#1d2128; --text:#e8eaee; --muted:#9aa1ad; --line:#2c323b; --soft:#252a33;
          --accent-soft:#1e3a6b; }
}
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:15px/1.5 system-ui, "Noto Sans Thai", sans-serif; }
[hidden] { display:none !important; }
h1 { font-size:20px; margin:0 0 12px; } h2 { font-size:17px; margin:0 0 10px; } h3 { font-size:15px; margin:12px 0 6px; }
a { color:var(--accent); }
.muted { color:var(--muted); } .err { color:var(--bad); min-height:1.5em; margin:8px 0 0; }
.ok { color:var(--ok); } .bad { color:var(--bad); } .warn { color:var(--warn); }

/* form */
label { display:block; font-size:13px; color:var(--muted); margin:10px 0 3px; }
input, select, textarea { width:100%; padding:8px 10px; font:inherit; border:1px solid var(--line); border-radius:8px;
  background:var(--bg); color:var(--text); }
textarea { min-height:70px; resize:vertical; }
input[type=checkbox] { width:auto; margin-right:6px; }
button { padding:8px 14px; font:inherit; border:1px solid var(--line); border-radius:8px; cursor:pointer;
  background:var(--card); color:var(--text); }
button:disabled { opacity:.45; cursor:default; }
button.primary { background:var(--accent); border-color:var(--accent); color:#fff; }
button.call { background:var(--ok); border-color:var(--ok); color:#fff; }
button.hang { background:var(--bad); border-color:var(--bad); color:#fff; }
button.ghost { background:transparent; border-color:transparent; color:var(--muted); }
button.small { padding:3px 8px; font-size:13px; }
button.wide { width:100%; margin-top:16px; }
.row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.row > * { flex:0 0 auto; }
.grow { flex:1 1 auto !important; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:0 12px; }
.grid3 { display:grid; grid-template-columns:repeat(3, 1fr); gap:0 12px; }

/* layout */
.login { max-width:380px; margin:10vh auto; padding:0 16px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px; margin-bottom:12px; }
.top { display:flex; align-items:center; gap:16px; padding:8px 16px; background:var(--card); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:5; flex-wrap:wrap; }
.brand { font-size:16px; }
.tabs { display:flex; gap:4px; flex:1 1 auto; flex-wrap:wrap; }
.tabs button { border:0; background:transparent; color:var(--muted); }
.tabs button.on { background:var(--accent-soft); color:var(--text); }
.me { display:flex; align-items:center; gap:8px; }
.me select { width:auto; padding:4px 8px; }
.view { padding:16px; max-width:1400px; margin:0 auto; }
.split { display:grid; grid-template-columns:340px 1fr; gap:16px; align-items:start; }
@media (max-width: 900px) { .split, .grid2, .grid3 { grid-template-columns:1fr; } }

/* badge / pill */
.badge { font-size:12px; padding:2px 8px; border-radius:999px; background:var(--soft); color:var(--muted); white-space:nowrap; }
.badge.ok { background:#dcfce7; color:#166534; } .badge.bad { background:#fee2e2; color:#991b1b; }
.badge.warn { background:#fef3c7; color:#92400e; } .badge.info { background:var(--accent-soft); color:var(--text); }
@media (prefers-color-scheme: dark) {
  .badge.ok { background:#14532d; color:#bbf7d0; } .badge.bad { background:#7f1d1d; color:#fecaca; }
  .badge.warn { background:#78350f; color:#fde68a; }
}

/* softphone */
.dial { font-size:22px; letter-spacing:1px; text-align:center; }
.keypad { display:grid; grid-template-columns:repeat(3, 1fr); gap:6px; margin-top:8px; }
.keypad button { font-size:18px; padding:10px 0; }
.callstate { text-align:center; font-size:15px; margin:10px 0 4px; }
.callstate .timer { font-variant-numeric:tabular-nums; font-size:24px; display:block; }
.phonebtns { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:8px; }
.phonebtns .call, .phonebtns .hang { grid-column:span 2; padding:12px; font-size:17px; }

/* target */
.target-tel { font-size:24px; font-weight:600; letter-spacing:.5px; }
.kv { display:grid; grid-template-columns:max-content 1fr; gap:2px 12px; font-size:14px; }
.kv dt { color:var(--muted); } .kv dd { margin:0; }
.results { display:grid; grid-template-columns:repeat(4, 1fr); gap:6px; }
@media (max-width: 600px) { .results { grid-template-columns:repeat(2, 1fr); } }
.results button.on { background:var(--accent); border-color:var(--accent); color:#fff; }
.wrap { border:2px solid var(--warn); }

/* table */
.tablewrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:14px; }
th, td { text-align:left; padding:6px 8px; border-bottom:1px solid var(--line); vertical-align:top; }
th { color:var(--muted); font-weight:500; white-space:nowrap; }
td.num, th.num { text-align:right; font-variant-numeric:tabular-nums; }
tr.click { cursor:pointer; } tr.click:hover { background:var(--soft); }
.pager { display:flex; gap:8px; align-items:center; justify-content:flex-end; margin-top:8px; font-size:13px; }
.empty { color:var(--muted); text-align:center; padding:24px; }
.filters { display:flex; gap:8px; flex-wrap:wrap; align-items:end; margin-bottom:10px; }
.filters > div { min-width:140px; }
.filters label { margin-top:0; }

/* modal */
.modal-bg { position:fixed; inset:0; background:rgba(0,0,0,.45); display:flex; align-items:flex-start; justify-content:center;
  padding:5vh 16px; z-index:20; overflow:auto; }
.modal { background:var(--card); border-radius:12px; padding:18px; width:min(720px, 100%); }
.modal .actions { display:flex; justify-content:flex-end; gap:8px; margin-top:16px; }

/* toast */
.toasts { position:fixed; right:16px; bottom:16px; display:flex; flex-direction:column; gap:8px; z-index:30; }
.toast { background:var(--text); color:var(--bg); padding:10px 14px; border-radius:8px; max-width:360px; box-shadow:0 4px 12px rgba(0,0,0,.2); }
.toast.bad { background:var(--bad); color:#fff; }

/* stat tiles */
.stats { display:grid; grid-template-columns:repeat(auto-fill, minmax(130px, 1fr)); gap:8px; margin-bottom:12px; }
.stat { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:10px 12px; }
.stat b { display:block; font-size:22px; font-variant-numeric:tabular-nums; }
.stat span { font-size:12px; color:var(--muted); }
/* popup สายเข้า + โปรโมชั่น */
.callpop { position:fixed; top:64px; right:16px; width:min(440px, calc(100vw - 32px)); z-index:15;
  max-height:calc(100vh - 80px); overflow:auto;
  background:var(--card); border:2px solid var(--accent); border-radius:12px; padding:12px 14px;
  box-shadow:0 10px 30px rgba(0,0,0,.25); display:flex; flex-direction:column; gap:4px; }
.callpop[hidden] { display:none; }
.callpop.ringing { animation:callpop-ring 1s ease-in-out infinite; }
@keyframes callpop-ring { 50% { border-color:var(--ok); box-shadow:0 0 0 6px rgba(22,163,74,.25); } }
.callpop .pop-tel { font-size:22px; font-weight:700; }
.callpop .pop-btns { display:flex; gap:6px; flex-wrap:wrap; margin-top:6px; }
.callpop .pop-btns button { flex:1; white-space:nowrap; }
details.promo { border-top:1px solid var(--line); padding:8px 0; }
details.promo summary { cursor:pointer; }
details.promo .price { color:var(--ok, #166534); font-weight:600; }
details.promo .kv { margin:6px 0 0 16px; }
/* ใบสั่งขาย */
.so-form h3 { margin:14px 0 6px; font-size:15px; }
.so-form .grid2 { display:grid; grid-template-columns:1fr 1fr; gap:4px 12px; }
.so-lines td { vertical-align:top; } .so-lines select { width:100%; margin-bottom:4px; }
.so-totals > div { display:flex; justify-content:space-between; padding:2px 0; }
.so-totals .net { font-weight:700; font-size:17px; border-top:1px solid var(--line); margin-top:4px; padding-top:6px; }
.modal { max-height:calc(100vh - 40px); overflow:auto; }
@media (max-width:640px) { .so-form .grid2 { grid-template-columns:1fr; } }
/* ออกอากาศตอนนี้ */
.airing.airing-inbound { border:2px solid var(--ok); }
.air-ch { border-top:1px solid var(--line); padding:10px 0; }
.air-ch-name { font-weight:700; margin-bottom:6px; }
.air-now { display:flex; gap:12px; align-items:flex-start; background:var(--soft); border-radius:10px; padding:10px 12px; margin-bottom:6px; }
.air-now .grow { flex:1; }
.air-name { font-size:18px; font-weight:700; margin:4px 0 2px; }
.airing .price { color:var(--ok); font-weight:700; }
.air-script { white-space:pre-wrap; margin-top:6px; font-size:14px; }
.air-next { font-size:13px; color:var(--muted); margin:2px 0 4px; }
.air-row { display:flex; gap:10px; align-items:center; padding:3px 0; font-size:14px; }
.air-row.on { font-weight:700; color:var(--ok); }
.air-row .grow { flex:1; }
/* สินค้าในกล่องเด้ง */
.pop-products { margin-top:8px; border-top:1px solid var(--line); padding-top:8px; }
.pop-head { font-size:13px; font-weight:700; color:var(--muted); margin-bottom:6px; }
.pop-list { max-height:260px; overflow:auto; }
.pop-item { display:flex; gap:10px; align-items:flex-start; padding:6px 0; border-bottom:1px solid var(--line); }
.pop-item:last-child { border-bottom:0; }
.pop-item .grow { flex:1; min-width:0; }
.pop-item-name { font-weight:600; }
.pop-item.on { background:var(--soft); border-radius:10px; padding:10px; border:0; margin-bottom:6px; }
.pop-item.on .pop-item-name { font-size:18px; font-weight:700; }
.pop-products .price { color:var(--ok); font-weight:700; }
.pop-remark { margin-top:2px; }
.pop-script { white-space:pre-wrap; font-size:13px; margin-top:4px; color:var(--muted); }
/* สายเข้า: สินค้าของช่องที่ลูกค้าโทรมา (รายการซ้าย · รายละเอียดขวา) */
.callpop.compact { width:min(340px, calc(100vw - 32px)); }
@media (min-width:1200px) { body.callpop-open .view { padding-right:372px; } }
.prod-wrap { container-type:inline-size; }
.prod { display:grid; grid-template-columns:minmax(200px, 32%) 1fr; gap:14px; align-items:start; margin-top:12px; }
.prod-list { display:flex; flex-direction:column; gap:6px; max-height:70vh; overflow:auto; }
.prod-item { text-align:left; padding:8px 10px; border-radius:10px; background:var(--card); }
.prod-item:hover { background:var(--soft); }
.prod-item.on { background:var(--accent-soft); border-color:var(--accent); }
.prod-item-name { font-weight:600; font-size:14px; line-height:1.35; }
.prod .price { color:var(--ok); font-weight:700; }
.prod-detail { min-width:0; }
.prod-top { display:flex; gap:12px; align-items:flex-start; background:var(--soft); border-radius:12px; padding:12px 14px; }
.prod-name { font-size:20px; font-weight:700; line-height:1.3; margin:4px 0; }
.prod-price { font-size:24px; }
.prod-order { padding:12px 20px; font-size:17px; white-space:nowrap; }
.prod-secs { display:grid; grid-template-columns:1fr 1fr; gap:0 16px; }
.prod-sec h3 { margin:14px 0 6px; font-size:14px; color:var(--muted); }
.prod-sec .kv { margin:0; }
.prod-script { white-space:pre-wrap; background:var(--soft); border-radius:10px; padding:10px 12px; }
.prod-sheet { width:100%; height:480px; border:1px solid var(--line); border-radius:10px; background:#fff; }
@container (max-width:720px) { .prod, .prod-secs { grid-template-columns:1fr; }
  .prod-list { flex-direction:row; overflow-x:auto; max-height:none; } .prod-item { flex:0 0 220px; } }
@media (max-width:640px) { .prod-top { flex-direction:column; } .prod-order { width:100%; } }