/* รายงาน LXML (24/9/2569) — หน้าตาชุดเดียวกับ Roster Matrix / หน้าตรวจสอบเวลา · ไม่มี style ฝังในหน้า (CSP style-src 'self') */
:root{
  --navy:#171e2e;--red:#c8102e;--ink:#0f172a;--muted:#64748b;--line:#e2e8f0;--soft:#f8fafc;
  --ok:#067647;--okbg:#ecfdf3;--bad:#b42318;--badbg:#fef3f2;--warn:#b54708;--warnbg:#fffaeb;--warnline:#fec84b;--badline:#fda29b;
  --d-fg:#05603a;--blue:#175cd3;
  font-family:"Leelawadee UI","Segoe UI",Tahoma,sans-serif;color:var(--ink);
}
*{box-sizing:border-box}
body{margin:0;background:#fff;line-height:1.5}
[hidden]{display:none!important}
button,input,select{font:inherit}
button{cursor:pointer}

.appbar{background:var(--navy);border-bottom:3px solid var(--red);padding:14px 26px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.brand strong{display:block;color:#fff;font-size:20px;letter-spacing:.01em}
.brand small{display:block;color:#94a3b8;font-size:11px;letter-spacing:.06em}
.appbar nav{display:flex;gap:10px;flex-wrap:wrap}
.appbar nav a{display:inline-flex;align-items:center;padding:8px 15px;border-radius:9px;background:#232c40;border:1px solid #33405c;color:#e8edf6;text-decoration:none;font-size:13px}
.appbar nav a:hover{border-color:#5b6b8f}
.appbar nav a.on{background:#e8edf6;border-color:#e8edf6;color:var(--navy);font-weight:700}

main{max-width:1200px;margin:0 auto;padding:22px 26px 60px}
h1{font-size:30px;margin:0 0 4px;letter-spacing:-.02em}
h2{font-size:18px;margin:0}
h3{font-size:15px;margin:14px 0 8px}
.lede{color:var(--muted);font-size:13px;margin:0 0 12px}
.note{color:var(--muted);font-size:12px;margin:8px 0}
.hint{color:var(--muted);font-size:12px}
#batchInfo p{font-size:13px;margin:8px 0}
.warnline{background:var(--warnbg);border:1px solid var(--warnline);color:var(--warn);border-radius:9px;padding:9px 12px;font-size:13px;margin:8px 0}
.error{background:var(--badbg);border:1px solid var(--badline);color:var(--bad);border-radius:9px;padding:10px 14px;font-size:13px;margin:10px 0}

.card{border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin:16px 0;background:#fff}
.card>header{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.card details>summary{cursor:pointer;list-style:none;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.card details>summary::-webkit-details-marker{display:none}
.card details>summary::before{content:"▸";color:#64748b}
.card details[open]>summary::before{content:"▾"}
.card details>summary small{color:var(--muted);font-size:12px}

.btn{height:38px;padding:0 16px;border-radius:8px;border:1px solid #cbd5e1;background:#fff;color:#334155;font-weight:600;font-size:13px;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.btn:hover{border-color:#94a3b8}
.btn:disabled{opacity:.5;cursor:default}
.btn.primary{background:var(--navy);border-color:var(--navy);color:#fff}
.btn.primary:hover{background:#26324a}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0 4px}

.tabs{display:inline-flex;border:1px solid #cbd5e1;border-radius:10px;overflow:hidden}
.tabs button{border:0;background:#fff;padding:8px 18px;font-size:13px;font-weight:600;color:#475467}
.tabs button.on{background:var(--navy);color:#fff}

.filters{background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:14px;display:flex;flex-wrap:wrap;gap:12px 18px;align-items:flex-end;margin-top:10px}
.filters label{display:flex;flex-direction:column;gap:5px;font-size:11px;color:var(--muted);font-weight:600}
.filters input{height:38px;padding:0 10px;border:1px solid #cbd5e1;border-radius:8px;background:#fff;color:var(--ink)}
.pane{display:flex;flex-direction:column;gap:4px}
.monthnav{display:flex;align-items:center;gap:6px}
.monthnav .nav{height:38px;width:38px;border:1px solid #cbd5e1;border-radius:8px;background:#fff;font-size:18px;line-height:1;color:#334155}

.live{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px;border-radius:999px;font-size:12px;font-weight:600;border:1px solid transparent;white-space:nowrap}
.live i{width:9px;height:9px;border-radius:50%;flex:0 0 9px}
.live.fresh{background:var(--okbg);color:var(--ok);border-color:#a6f4c5}
.live.fresh i{background:var(--ok)}
.live.loading{background:#eff5ff;color:var(--blue);border-color:#b2ddff}
.live.loading i{background:var(--blue);animation:pulse 1s infinite}
.live.error{background:var(--badbg);color:var(--bad);border-color:var(--badline)}
.live.error i{background:var(--bad)}
@keyframes pulse{0%{opacity:1}50%{opacity:.35}100%{opacity:1}}

.result{margin-top:14px}
.summary{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0 4px}
.stat{flex:1;min-width:140px;background:#fff;border:1px solid var(--line);border-radius:11px;padding:11px 13px}
.stat strong{display:block;font-size:22px;line-height:1.2}
.stat span{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}
.stat.d strong{color:var(--d-fg)} .stat.bad strong{color:var(--bad)} .stat.warn strong{color:var(--warn)}

.facts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:6px 18px}
.facts li{display:flex;justify-content:space-between;gap:10px;border-bottom:1px dashed var(--line);padding:5px 0;font-size:13px}
.facts li span{color:var(--muted)}
.facts li.ok b{color:var(--ok)} .facts li.warn b{color:var(--warn)}

label.inline{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--muted);font-weight:600;margin:12px 0 0;max-width:420px}
label.inline input{height:38px;padding:0 10px;border:1px solid #cbd5e1;border-radius:8px}

.issues{margin-top:18px;border-top:1px solid var(--line);padding-top:6px}
.list{border:1px solid var(--line);border-radius:10px;margin:8px 0;background:#fff}
.list>summary{cursor:pointer;padding:9px 12px;font-size:13px}
.list>summary b{color:var(--warn)}
.list>*:not(summary){margin:0 12px 10px}
table.mini{border-collapse:collapse;width:calc(100% - 24px);font-size:12.5px}
table.mini th,table.mini td{border-bottom:1px solid var(--line);padding:5px 8px;text-align:left;vertical-align:top}
table.mini th{background:var(--soft);font-weight:600;color:#475467}

.settings{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px 16px;margin-top:12px}
.settings label{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--muted);font-weight:600}
.settings input{height:38px;padding:0 10px;border:1px solid #cbd5e1;border-radius:8px;color:var(--ink)}
.settings .actions{grid-column:1/-1}

.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:var(--navy);color:#fff;padding:10px 18px;border-radius:10px;font-size:13px;box-shadow:0 10px 30px rgba(15,23,42,.25);z-index:50}
.toast.bad{background:var(--bad)}