/* ==========================================================================
   Gentyre Sales — ใช้โทนเดียวกับ Dashboard HTML เดิม ผู้ใช้จะได้ไม่ต้องหัดดูใหม่
   ========================================================================== */
:root{
  --accent:#ec6b1c; --accent-dark:#c9550f; --accent-light:#fff1e6;
  --navy:#22287a; --blue:#2a4b9b; --blue-light:#eaedf9;
  --ink:#16202e; --muted:#64748b; --line:#e2e8f0; --bg:#f4f6fa; --card:#fff; --soft:#f8fafc;
  --ok:#0f9d58; --warn:#b7791f; --warn-bg:#fdf6e3; --bad:#d93025; --bad-bg:#fdecea; --ok-bg:#e8f6ee;
  --shadow:0 1px 3px rgba(34,40,122,.08),0 4px 16px rgba(34,40,122,.06);
  --radius:12px;
  color-scheme:light;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%}
body{font-family:'Sarabun',-apple-system,'Segoe UI',Tahoma,sans-serif;background:var(--bg);color:var(--ink);font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{line-height:1.3}
.num,td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.muted{color:var(--muted)}
.tiny{font-size:11.5px;color:var(--muted)}
.up{color:var(--ok)} .down{color:var(--bad)}
.nowrap{white-space:nowrap}
.spacer{flex:1}
.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.stack{display:flex;flex-direction:column;gap:14px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:1100px){.grid2,.grid3{grid-template-columns:1fr}}

/* ============================== โครงหน้า */
.app{display:flex;min-height:100vh}
.side{width:232px;flex:none;background:linear-gradient(175deg,var(--navy),#12164a);color:#fff;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.side .brand{display:flex;align-items:center;gap:10px;padding:18px 16px 14px;border-bottom:1px solid rgba(255,255,255,.12)}
.side .mark{width:46px;height:38px;border-radius:9px;background:#fff;display:grid;place-items:center;padding:4px 5px;flex:none}
.side .mark img{width:100%;height:auto;display:block}
.side h1{font-size:14.5px;font-weight:700}
.side h1 small{display:block;font-size:11px;opacity:.65;font-weight:400}
.side nav{flex:1;overflow-y:auto;padding:10px 8px}
.side .grp{font-size:10.5px;letter-spacing:.9px;opacity:.5;padding:12px 12px 5px;font-weight:600}
.side nav a{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:9px;color:#dbe6f5;font-size:13.5px;font-weight:500}
.side nav a:hover{background:rgba(255,255,255,.08);color:#fff;text-decoration:none}
.side nav a.on{background:var(--accent);color:#fff;box-shadow:0 2px 10px rgba(236,107,28,.35)}
.side nav a .ic{width:18px;text-align:center;opacity:.9}
.side .me{padding:12px 16px;border-top:1px solid rgba(255,255,255,.12);font-size:12.5px}
.side .me b{display:block;font-size:13px}
.side .me .r{opacity:.65}
.side .me form{margin-top:8px;display:flex;gap:6px}
.side .me button,.side .me a.lnk{background:rgba(255,255,255,.1);border:0;color:#fff;border-radius:7px;padding:4px 10px;font-size:12px;cursor:pointer}
.side .me a.lnk:hover{text-decoration:none;background:rgba(255,255,255,.18)}
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.top{display:flex;align-items:center;gap:12px;padding:16px 24px 6px;flex-wrap:wrap}
.top h2{font-size:20px;font-weight:700}
.top .sub{color:var(--muted);font-size:13px}
.content{padding:10px 24px 40px;display:flex;flex-direction:column;gap:14px}
.menu-btn{display:none}
@media (max-width:900px){
  .app{flex-direction:column}
  .side{width:auto;height:auto;position:static}
  .side nav{display:none;padding-bottom:8px}
  .side.open nav{display:block}
  .side .me{display:none}
  .side.open .me{display:block}
  .menu-btn{display:block;margin-left:auto;background:rgba(255,255,255,.12);border:0;color:#fff;border-radius:8px;padding:6px 12px;cursor:pointer}
  .top{padding:14px 16px 4px}
  .content{padding:8px 16px 32px}
}

/* ============================== การ์ด */
.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);min-width:0}
.card>.hd{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.card>.hd h3{font-size:14.5px;font-weight:700}
.card>.hd .note{font-size:12px;color:var(--muted)}
.card>.bd{padding:14px 16px}
.card.flat{box-shadow:none;border:1px solid var(--line)}

/* ============================== KPI */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.kpi{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px 16px;border-top:3px solid var(--kc,var(--blue))}
.kpi .lb{font-size:12.5px;color:var(--muted);font-weight:600;display:flex;align-items:center;gap:6px}
.kpi .vl{font-size:24px;font-weight:700;margin-top:2px;font-variant-numeric:tabular-nums;letter-spacing:-.3px}
.kpi .vl .un{font-size:12px;font-weight:500;color:var(--muted);margin-left:5px}
.kpi .dt{font-size:12px;color:var(--muted);margin-top:3px}
.kpi.accent{--kc:var(--accent)}
.card .kpis .kpi{box-shadow:none;border:1px solid var(--line);border-top:3px solid var(--kc,var(--blue))}

/* ============================== ตาราง */
.tblwrap{overflow:auto;max-width:100%}
table.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{background:var(--soft);color:#334155;font-weight:600;text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);position:sticky;top:0;white-space:nowrap;z-index:1}
.tbl td{padding:7px 10px;border-bottom:1px solid #eef2f6;vertical-align:top}
.tbl tbody tr:hover td{background:#fafbff}
.tbl tfoot td{font-weight:700;background:var(--soft);border-top:2px solid var(--line)}
.tbl tr.clk{cursor:pointer}
.tbl tr.gap td{background:#fffbf0}
.tbl .dash{color:#b6c0cc}
.tbl.compact td,.tbl.compact th{padding:5px 8px}
.bar{height:6px;background:#eef2f6;border-radius:4px;overflow:hidden;min-width:60px}
.bar i{display:block;height:100%;background:var(--blue);border-radius:4px}
.rank{color:var(--muted);width:28px}

/* ============================== ชิป / ข้อความแจ้ง */
.chip{display:inline-block;padding:1px 8px;border-radius:999px;font-size:11.5px;font-weight:600;background:#eef2f6;color:#334155;white-space:nowrap}
.chip.warn{background:#fff3d6;color:#8a5a00}
.chip.bad{background:var(--bad-bg);color:#8b1a12}
.chip.ok{background:var(--ok-bg);color:#0b6b3b}
.chip.blue{background:var(--blue-light);color:var(--blue)}
.hint{background:var(--blue-light);border-left:3px solid var(--blue);padding:9px 13px;border-radius:0 8px 8px 0;font-size:13px;color:#123a6b}
.hint.warn{background:var(--warn-bg);border-left-color:#e8a317;color:#6b4d00}
.hint.bad{background:var(--bad-bg);border-left-color:var(--bad);color:#8b1a12}
.hint.ok{background:var(--ok-bg);border-left-color:var(--ok);color:#0b5a32}
.flash{margin:0}
.swatch{display:inline-block;width:10px;height:10px;border-radius:3px;flex:none}

/* ============================== ปุ่ม / ฟอร์ม */
.btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:#fff;border-radius:8px;padding:7px 13px;font-weight:600;font-size:13px;cursor:pointer;color:var(--ink);white-space:nowrap}
.btn:hover{border-color:#cbd5e1;background:var(--soft);text-decoration:none}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary:hover{background:var(--accent-dark)}
.btn.blue{background:var(--blue);border-color:var(--blue);color:#fff}
.btn.danger{color:var(--bad);border-color:#f3c2bd}
.btn.danger:hover{background:var(--bad-bg)}
.btn.sm{padding:4px 10px;font-size:12px}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.seg{display:inline-flex;background:#eef2f6;border-radius:9px;padding:3px;gap:2px;flex-wrap:wrap}
.seg a,.seg button{border:0;background:transparent;padding:5px 12px;border-radius:7px;font-size:12.5px;font-weight:600;color:#475569;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.seg a:hover{text-decoration:none;color:var(--ink)}
.seg .on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.08)}
label.f{display:flex;flex-direction:column;gap:3px;font-size:12px;font-weight:600;color:var(--muted)}
input.in,select.in,textarea.in{border:1px solid #cfd8e3;border-radius:8px;padding:6px 10px;background:#fff;color:var(--ink);font-size:13px;min-width:0}
input.in:focus,select.in:focus,textarea.in:focus{outline:2px solid rgba(42,75,155,.25);border-color:var(--blue)}
.field-err{color:var(--bad);font-size:12px}
form.inline{display:inline}

/* ============================== แถบตัวกรอง */
.filters{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.filters .fr{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end}
.filters .fr>*{flex:0 1 auto}
.filters input.in,.filters select.in{width:150px}
.filters input[type=date].in{width:145px}
.filters .quick{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.filters .quick a{font-size:12px;padding:3px 10px;border-radius:999px;background:#eef2f6;color:#334155;font-weight:600}
.filters .quick a:hover{background:var(--blue-light);text-decoration:none}
.filters .quick a.on{background:var(--blue);color:#fff}
details.ms{position:relative}
details.ms>summary{list-style:none;border:1px solid #cfd8e3;border-radius:8px;padding:6px 28px 6px 10px;background:#fff;cursor:pointer;width:170px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px;position:relative}
details.ms>summary::after{content:'▾';position:absolute;right:10px;top:6px;color:var(--muted)}
details.ms>summary::-webkit-details-marker{display:none}
details.ms[open]>summary{border-color:var(--blue)}
details.ms .pop{position:absolute;z-index:20;top:calc(100% + 4px);left:0;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 30px rgba(15,23,42,.15);padding:8px;max-height:320px;overflow:auto;min-width:230px}
details.ms .pop label{display:flex;gap:8px;align-items:center;padding:4px 6px;border-radius:6px;font-size:13px;cursor:pointer;white-space:nowrap}
details.ms .pop label:hover{background:var(--soft)}
.active-filters{display:flex;gap:6px;flex-wrap:wrap;align-items:center;font-size:12px}
.active-filters .chip{background:var(--blue-light);color:var(--blue)}

/* ============================== กราฟ */
.chartbox{position:relative;height:300px}
.chartbox.sm{height:240px}

/* ============================== อัปโหลด */
.drop{border:2px dashed #cbd5e1;border-radius:var(--radius);padding:26px;text-align:center;background:var(--soft);transition:.15s}
.drop.over{border-color:var(--accent);background:var(--accent-light)}
.drop input[type=file]{margin:10px auto;display:block}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}
.stat-grid div{background:var(--soft);border-radius:8px;padding:8px 10px}
.stat-grid b{display:block;font-size:16px;font-variant-numeric:tabular-nums}
.stat-grid span{font-size:11.5px;color:var(--muted)}
.issues{max-height:180px;overflow:auto;font-size:12.5px;border:1px solid var(--line);border-radius:8px;padding:6px 10px;background:#fff}
.issues li{margin:3px 0 3px 16px}

/* ============================== หน้า Login */
.auth{min-height:100vh;display:grid;place-items:center;background:linear-gradient(160deg,var(--navy),#12164a 60%,#0c0f33);padding:20px}
.auth .box{background:#fff;border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.35);padding:30px 28px;width:100%;max-width:380px}
.auth .box img{height:54px;display:block;margin:0 auto 10px}
.auth .box h1{text-align:center;font-size:18px;margin-bottom:2px}
.auth .box p.s{text-align:center;color:var(--muted);font-size:13px;margin-bottom:18px}
.auth .box label.f{margin-bottom:12px}
.auth .box input.in{padding:9px 12px;font-size:14px}
.auth .box .btn{width:100%;justify-content:center;padding:10px}

/* ============================== ช่องแก้ในตาราง / toast */
.in.saving{border-color:#e8a317}
.in.saved{border-color:var(--ok);background:#f3fbf6}
.in.err{border-color:var(--bad);background:#fff5f4}
.tbl td .in{padding:4px 8px;font-size:12.5px}
#toasts{position:fixed;right:18px;bottom:18px;display:flex;flex-direction:column;gap:8px;z-index:100}
.toast{background:#16202e;color:#fff;padding:9px 14px;border-radius:9px;font-size:13px;box-shadow:0 6px 24px rgba(0,0,0,.25);max-width:420px;transition:.35s}
.toast.ok{border-left:4px solid var(--ok)} .toast.bad{border-left:4px solid var(--bad)} .toast.warn{border-left:4px solid #e8a317}
.toast.out{opacity:0;transform:translateY(8px)}
.bulkbar{background:var(--blue-light);border-bottom:1px solid var(--line);padding:9px 14px}
.side nav a.soon{opacity:.45;cursor:default}
.side nav a.soon:hover{background:none}
.side nav a .tag{margin-left:auto;font-size:9.5px;background:rgba(255,255,255,.14);padding:1px 6px;border-radius:999px}
.mono{font-family:ui-monospace,Consolas,monospace;font-size:12.5px}
.cardnote{padding:9px 14px;font-size:12px;color:var(--muted)}

@media print{
  .side,.filters,.noprint,.top .row{display:none!important}
  body{background:#fff}
  .card,.kpi{box-shadow:none;border:1px solid var(--line)}
  .content{padding:0}
}