/* Medical Blue hospital dashboard theme */
:root {
    --hdc-primary: #0F4C81;
    --hdc-primary-dark: #0A3A63;
    --hdc-bg: #EAF6FF;
    --hdc-card-bg: #ffffff;
    --hdc-border: #d3e3f1;
    --hdc-text: #1c2c3a;
    --hdc-muted: #5d738a;
    --hdc-green: #28A745;
    --hdc-yellow: #FFC107;
    --hdc-red: #DC3545;
    --hdc-grey: #9e9e9e;
}
/* โหมดมืด (Dark Mode) */
body.hdc.dark {
    --hdc-bg: #0f1720;
    --hdc-card-bg: #1a2430;
    --hdc-border: #2a3a4a;
    --hdc-text: #e6edf3;
    --hdc-muted: #9fb0c0;
}
body.hdc.dark .hdc-panel, body.hdc.dark .kpi-card, body.hdc.dark .hdc-perf,
body.hdc.dark .hdc-pie, body.hdc.dark .hdc-exec { background: var(--hdc-card-bg); color: var(--hdc-text); }
body.hdc.dark .perf-table th, body.hdc.dark .hdc-legend { background: #141d28; color: var(--hdc-muted); }
body.hdc.dark .hdc-filterbar { background: #141d28; }
body.hdc.dark .hdc-attention { background: #2a1416; }

* { box-sizing: border-box; }

body.hdc {
    margin: 0;
    background: var(--hdc-bg);
    color: var(--hdc-text);
    font-family: "Sarabun", "Tahoma", "Segoe UI", sans-serif;
    font-size: 14px;
}

/* ===== Header ===== */
.hdc-header {
    background: linear-gradient(90deg, var(--hdc-primary), var(--hdc-primary-dark));
    color: #fff;
    padding: 12px 22px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 2px 6px rgba(0,0,0,.12);
}
.hdc-header .logo {
    width: 40px; height: 40px; border-radius: 50%;
    background: #fff; color: var(--hdc-primary);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 18px;
}
.hdc-header h1 { font-size: 18px; margin: 0; font-weight: 600; }
.hdc-header .sub { font-size: 12px; opacity: .85; }
.hdc-header-title { flex: 1; }
.hdc-user { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.hdc-user-name { white-space: nowrap; }
.hdc-logout-form { margin: 0; }
.hdc-logout-btn {
    background: rgba(255,255,255,.18); color: #fff;
    border: 1px solid rgba(255,255,255,.4); border-radius: 4px;
    padding: 5px 12px; font-size: 13px; cursor: pointer; font-family: inherit;
}
.hdc-logout-btn:hover { background: rgba(255,255,255,.3); }
.badge.stale {
    background: #fff3e0; color: #e65100; border: 1px solid #ffb74d;
    margin-left: 4px; font-size: 11px;
}

/* ===== Filter bar ===== */
.hdc-filterbar {
    background: #fff;
    border-bottom: 1px solid var(--hdc-border);
    padding: 10px 22px;
    display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
    position: sticky; top: 0; z-index: 20;
}
.hdc-filterbar label { font-size: 12px; color: var(--hdc-muted); margin-right: 6px; }
.hdc-filterbar select, .hdc-filterbar a.btn {
    border: 1px solid var(--hdc-border); border-radius: 6px;
    padding: 6px 12px; font-size: 14px; background: #fff; color: var(--hdc-text);
    text-decoration: none; cursor: pointer;
}
.hdc-filterbar a.btn:hover { background: var(--hdc-bg); }
.hdc-filterbar .spacer { flex: 1; }

/* ===== Summary chips ===== */
.hdc-summary { display: flex; gap: 10px; }
.hdc-chip {
    border-radius: 6px; padding: 4px 12px; font-size: 13px; font-weight: 600;
    color: #fff; display: flex; align-items: center; gap: 6px;
}
.hdc-chip .n { font-size: 16px; }
.chip-green { background: var(--hdc-green); }
.chip-yellow { background: var(--hdc-yellow); }
.chip-red { background: var(--hdc-red); }
.chip-total { background: #455a6b; }

/* ===== Layout ===== */
.hdc-wrap { padding: 18px 22px 40px; }
.hdc-section-title {
    font-size: 15px; font-weight: 700; margin: 22px 0 10px;
    padding-left: 10px; border-left: 4px solid var(--hdc-primary);
}

/* ===== KPI cards ===== */
.hdc-grid {
    display: grid; gap: 14px;
    grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
}
.kpi-card {
    background: var(--hdc-card-bg); border: 1px solid var(--hdc-border);
    border-radius: 10px; padding: 14px 16px; position: relative;
    border-left: 5px solid var(--hdc-grey);
    text-decoration: none; color: inherit; display: block;
    transition: box-shadow .15s, transform .15s;
}
.kpi-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.12); transform: translateY(-2px); }
.kpi-card.green { border-left-color: var(--hdc-green); }
.kpi-card.yellow { border-left-color: var(--hdc-yellow); }
.kpi-card.red { border-left-color: var(--hdc-red); }
.kpi-card.none { border-left-color: var(--hdc-grey); }
.kpi-card.info { border-left-color: #3a7bd5; }

.kpi-card .code { font-size: 11px; color: var(--hdc-muted); letter-spacing: .5px; }
.kpi-card .name { font-size: 13px; font-weight: 600; line-height: 1.35; margin: 2px 0 10px; min-height: 36px; }
.kpi-card .value { font-size: 30px; font-weight: 700; line-height: 1; }
.kpi-card .value .unit { font-size: 14px; font-weight: 500; color: var(--hdc-muted); margin-left: 3px; }
.kpi-card .meta { font-size: 12px; color: var(--hdc-muted); margin-top: 8px; display: flex; justify-content: space-between; }
.kpi-card .badge {
    position: absolute; top: 12px; right: 12px;
    font-size: 11px; font-weight: 700; color: #fff;
    padding: 3px 9px; border-radius: 20px;
}
.badge.green { background: var(--hdc-green); }
.badge.yellow { background: var(--hdc-yellow); }
.badge.red { background: var(--hdc-red); }
.badge.none { background: var(--hdc-grey); }
.badge.info { background: #3a7bd5; }

/* คำอธิบายสี + ความสดข้อมูล */
.hdc-legend {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    padding: 8px 22px; font-size: 12px; color: var(--hdc-muted);
    background: #f4f7fb; border-bottom: 1px solid #e3e9f0;
}
.hdc-legend .spacer { flex: 1; }
.hdc-legend .lg { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.hdc-legend .sw { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.hdc-legend .asof { font-weight: 600; color: #335; }

/* แผง insight "จุดที่ต้องให้ความสำคัญ" */
.hdc-attention {
    margin: 16px 22px 6px; border: 1px solid #f0b9b7; border-left: 5px solid #d9534f;
    background: #fdf3f3; border-radius: 8px; overflow: hidden;
}
.hdc-attention .att-head { padding: 9px 14px; font-weight: 700; color: #b02a26; background: #fbe9e8; }
.hdc-attention .att-list { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 14px; }
.att-item {
    display: inline-flex; align-items: baseline; gap: 8px; text-decoration: none;
    background: #fff; border: 1px solid #f0b9b7; border-radius: 6px; padding: 6px 12px;
}
.att-item:hover { box-shadow: 0 2px 8px rgba(217,83,79,.18); }
.att-item .att-val { font-weight: 700; color: #d9534f; font-size: 16px; }
.att-item .att-name { color: #333; font-size: 13px; }
.att-item .att-owner { color: var(--hdc-muted); font-size: 11px; }

/* หัวข้อกลุ่มเจ้าภาพ + สรุปรายเจ้าภาพ */
.hdc-owner-head {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    margin: 22px 22px 4px; padding-bottom: 6px; border-bottom: 2px solid var(--hdc-primary);
}
.hdc-owner-head .owner-name { font-size: 16px; font-weight: 700; color: var(--hdc-primary-dark); }
.hdc-owner-head .owner-sum { display: flex; gap: 6px; flex-wrap: wrap; }
.hdc-chip.chip-info { background: #eaf1fb; color: #2c5aa0; }

/* กราฟวิเคราะห์ (Pie + Radar) */
.hdc-charts { display: flex; flex-wrap: wrap; gap: 0; margin: 0; }
.hdc-charts .hdc-pie { flex: 1 1 360px; }
.hdc-pie { margin: 16px 22px 6px; border: 1px solid var(--hdc-border); border-radius: 8px; background: var(--hdc-card-bg); overflow: hidden; }
.hdc-pie .exec-head { padding: 9px 14px; font-weight: 700; color: var(--hdc-primary-dark); background: #f7f9fc; }
.hdc-pie .pie-box { height: 200px; padding: 12px; max-width: 460px; }

/* บทสรุปผู้บริหาร (Executive Summary) */
.hdc-exec {
    margin: 16px 22px 6px; border: 1px solid #cfe0f5; border-left: 5px solid var(--hdc-primary);
    background: linear-gradient(180deg,#f3f8fe,#fff); border-radius: 8px; overflow: hidden;
}
.hdc-exec .exec-head { padding: 9px 14px; font-weight: 700; color: var(--hdc-primary-dark); }
.hdc-exec .exec-body { margin: 0; padding: 4px 30px 14px; }
.hdc-exec .exec-body li { font-size: 13.5px; line-height: 1.7; color: #2a3b4d; }

/* ตารางผลงานรายเจ้าภาพ (Ranking + Heatmap) */
.hdc-perf { margin: 16px 22px; border: 1px solid #e3e9f0; border-radius: 8px; overflow-x: auto; background: #fff; }
.hdc-perf .perf-head { padding: 9px 14px; font-weight: 700; color: var(--hdc-primary-dark); background: #eef4fb; }
.perf-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.perf-table th, .perf-table td { padding: 6px 10px; border-bottom: 1px solid #eef1f4; text-align: center; }
.perf-table th { background: #f7f9fc; color: var(--hdc-muted); font-weight: 600; }
.perf-table td.oname { text-align: left; font-weight: 600; }
.perf-table td.rank { color: var(--hdc-muted); width: 44px; }
.perf-table .hm { display: inline-block; min-width: 26px; padding: 2px 6px; border-radius: 4px; font-weight: 700; color: #fff; }
.perf-table .hm:empty { background: #f0f2f5 !important; }
.hm-g { background: #2e9e4f; } .hm-y { background: #f0ad4e; } .hm-r { background: #d9534f; } .hm-i { background: #3a7bd5; }
.perf-table td.score { width: 160px; }
.score-bar { display: inline-block; width: 90px; height: 9px; background: #eef1f4; border-radius: 5px; overflow: hidden; vertical-align: middle; }
.score-bar > span { display: block; height: 100%; }
.score-num { font-weight: 700; margin-left: 6px; }

/* พิมพ์รายงาน */
@media print {
    .hdc-header, .hdc-filterbar, .hdc-legend .asof, .btn, button, .hdc-user { display: none !important; }
    .hdc-wrap { margin: 0; }
    .kpi-card, .hdc-perf, .hdc-attention, .hdc-owner-head { break-inside: avoid; box-shadow: none; }
    .kpi-card:hover { transform: none; box-shadow: none; }
    body { background: #fff; }
}

/* progress vs target */
.kpi-bar { height: 6px; background: #eef1f4; border-radius: 4px; margin-top: 10px; overflow: hidden; }
.kpi-bar > span { display: block; height: 100%; border-radius: 4px; }

/* ===== Detail / table ===== */
.hdc-panel {
    background: #fff; border: 1px solid var(--hdc-border); border-radius: 10px;
    padding: 18px; margin-bottom: 16px;
}
.hdc-panel h3 { margin: 0 0 12px; font-size: 15px; }
.kv { display: flex; gap: 28px; flex-wrap: wrap; }
.kv .item .l { font-size: 12px; color: var(--hdc-muted); }
.kv .item .v { font-size: 22px; font-weight: 700; }

table.hdc-table { width: 100%; border-collapse: collapse; font-size: 13px; }
table.hdc-table th, table.hdc-table td { padding: 8px 10px; text-align: right; border-bottom: 1px solid var(--hdc-border); }
table.hdc-table th:first-child, table.hdc-table td:first-child { text-align: left; }
table.hdc-table thead th { background: #f4f7fa; color: var(--hdc-muted); font-weight: 600; }
table.hdc-table tbody tr:nth-child(even) { background: #fafbfc; }
table.hdc-table tbody tr:hover { background: #eef5fc; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }

.breadcrumb { font-size: 13px; margin: 0 0 14px; color: var(--hdc-muted); }
.breadcrumb a { color: var(--hdc-primary); text-decoration: none; }
.chart-box { position: relative; height: 340px; }
.text-muted { color: var(--hdc-muted); }
.note { font-size: 12px; color: var(--hdc-muted); margin-top: 10px; }

/* ===== OPD เปิดผิดแผนก: แถบเลือกช่วงวันที่ + สรุปคู่แผนก ===== */
.wd-toolbar { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap;
    padding: 14px 16px; margin-bottom: 14px;
    background: var(--hdc-bg); border: 1px solid var(--hdc-border); border-radius: 10px; }
.wd-field { display: flex; flex-direction: column; gap: 4px; }
.wd-field label { font-size: 12px; color: var(--hdc-muted); font-weight: 600; }
.wd-field input[type=date] { border: 1px solid var(--hdc-border); border-radius: 7px;
    padding: 7px 10px; font-size: 13px; background: #fff; color: var(--hdc-text); }
.wd-toolbar .spacer { flex: 1; }
.btn-primary { background: var(--hdc-primary); color: #fff; border: 1px solid var(--hdc-primary);
    border-radius: 7px; padding: 8px 18px; font-size: 13px; font-weight: 600; cursor: pointer;
    text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.btn-primary:hover { background: var(--hdc-primary-dark); }
.btn-ghost { background: #fff; color: var(--hdc-primary); border: 1px solid var(--hdc-border);
    border-radius: 7px; padding: 8px 14px; font-size: 13px; font-weight: 600; cursor: pointer;
    text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.btn-ghost:hover { background: var(--hdc-bg); }
.wd-summary { display: flex; gap: 10px; flex-wrap: wrap; margin: 2px 0 14px; }
.wd-chip { display: inline-flex; align-items: baseline; gap: 6px; font-size: 12.5px;
    padding: 6px 13px; background: var(--hdc-bg); border: 1px solid var(--hdc-border);
    border-radius: 20px; color: var(--hdc-muted); }
.wd-chip b { color: var(--hdc-primary-dark); font-size: 14px; font-weight: 700; }
.wd-dept .n { font-weight: 600; color: var(--hdc-text); }
.wd-dept .c { font-size: 11px; color: var(--hdc-muted); }
.wd-arrow { color: var(--hdc-primary); font-weight: 700; text-align: center !important; font-size: 15px; }
.wd-count { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--hdc-primary-dark); }
.wd-pct { font-variant-numeric: tabular-nums; color: var(--hdc-muted); }
.wd-bar { position: relative; height: 6px; width: 90px; margin: 5px 0 0 auto;
    background: var(--hdc-border); border-radius: 4px; overflow: hidden; }
.wd-bar > span { position: absolute; left: 0; top: 0; bottom: 0;
    background: var(--hdc-primary); border-radius: 4px; }

body.hdc.dark .wd-toolbar, body.hdc.dark .wd-chip { background: #141d28; }
body.hdc.dark .wd-field input[type=date], body.hdc.dark .btn-ghost { background: #141d28; color: var(--hdc-text); }

/* ===== pnkhospital-style layout: sidebar(โลโก้+เมนู) + topbar ขาว(login) ===== */
:root { --sidebar-w: 235px; --topbar-h: 54px; }
body.hdc.pnk { background: var(--hdc-bg); }

.hdc-shell { display:flex; align-items:stretch; min-height:100vh; }

/* Sidebar */
.hdc-sidebar { position:fixed; top:0; left:0; bottom:0; width:var(--sidebar-w); z-index:40;
    background:var(--hdc-card-bg); border-right:1px solid var(--hdc-border); display:flex; flex-direction:column; }
.side-brand { display:flex; align-items:center; gap:10px; padding:15px 16px 13px; border-bottom:1px solid var(--hdc-border); }
.side-logo { width:40px; height:40px; object-fit:contain; flex:0 0 auto; }
.side-brand-text .t1 { font-size:16px; font-weight:800; color:var(--hdc-primary-dark); letter-spacing:.3px; }
.side-brand-text .t2 { font-size:11px; color:var(--hdc-muted); }
.menu-list { flex:1; overflow-y:auto; padding:10px 0; }
.menu-group { padding:13px 18px 5px; font-size:11px; font-weight:700; color:var(--hdc-muted); letter-spacing:.5px; }
.menu-item { display:flex; align-items:center; gap:11px; margin:2px 8px; padding:9px 12px; color:var(--hdc-text);
    text-decoration:none; font-size:14px; border-radius:8px; }
.menu-item:hover { background:rgba(15,76,129,.07); }
.menu-item.active { background:var(--hdc-primary); color:#fff; font-weight:600; box-shadow:0 2px 6px rgba(15,76,129,.3); }
.menu-item .mi-ic { width:20px; text-align:center; font-size:15px; }
.side-user { display:flex; align-items:center; gap:9px; padding:12px 14px; border-top:1px solid var(--hdc-border); }
.side-user .su-ic { width:34px; height:34px; border-radius:50%; background:var(--hdc-bg); display:flex; align-items:center; justify-content:center; font-size:16px; flex:0 0 auto; }
.su-text { flex:1; min-width:0; }
.su-name { font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.su-role { font-size:10.5px; color:var(--hdc-muted); letter-spacing:.5px; }
.su-logout-form { margin:0; }
.su-logout { background:var(--hdc-bg); border:1px solid var(--hdc-border); color:var(--hdc-muted); border-radius:6px; padding:5px 9px; font-size:12px; cursor:pointer; }
.su-logout:hover { background:#fde8e8; color:#c0392b; border-color:#f5c6cb; }

/* Content + white topbar */
.hdc-content { flex:1; margin-left:var(--sidebar-w); min-width:0; display:flex; flex-direction:column; }
.pnk-topbar { position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:12px;
    background:var(--hdc-card-bg); border-bottom:1px solid var(--hdc-border); padding:8px 20px; min-height:var(--topbar-h); }
.pnk-topbar .nav-toggle { display:none; background:var(--hdc-bg); border:1px solid var(--hdc-border); color:var(--hdc-text);
    font-size:17px; border-radius:7px; padding:4px 11px; cursor:pointer; }
.hdc-crumb { display:flex; align-items:center; gap:7px; font-size:13px; color:var(--hdc-muted); flex:1; }
.hdc-crumb a { color:var(--hdc-primary); text-decoration:none; }
.hdc-crumb a:hover { text-decoration:underline; }
.hdc-crumb .cur { color:var(--hdc-text); font-weight:600; }
.tb-right { display:flex; align-items:center; gap:8px; }
.tb-icon { background:var(--hdc-bg); border:1px solid var(--hdc-border); border-radius:7px; padding:5px 9px; cursor:pointer; font-size:14px; }
.tb-login { display:flex; gap:6px; margin:0; }
.tb-login input { border:1px solid var(--hdc-border); border-radius:7px; padding:6px 10px; font-size:13px; font-family:inherit; width:118px; background:var(--hdc-card-bg); color:var(--hdc-text); }
.tb-login-btn { background:var(--hdc-primary); color:#fff; border:none; border-radius:7px; padding:6px 14px; font-size:13px; font-weight:600; cursor:pointer; white-space:nowrap; }
.tb-login-btn:hover { background:var(--hdc-primary-dark); }
.hdc-main { flex:1; min-width:0; }
.hdc-filterbar { top:var(--topbar-h); }
.sidebar-backdrop { display:none; }

/* ===== Overview page ===== */
.ov { padding:20px 24px 40px; }
.ov-head { display:flex; align-items:flex-start; gap:16px; flex-wrap:wrap; margin-bottom:4px; }
.ov-title { flex:1; min-width:240px; }
.ov-title h1 { margin:0 0 6px; font-size:24px; color:var(--hdc-primary-dark); }
.ov-sub { display:flex; flex-wrap:wrap; gap:14px; font-size:13px; color:var(--hdc-muted); align-items:center; }
.ov-sub b { font-size:15px; }
.ov-sub .ok b { color:var(--hdc-green); } .ov-sub .wn b { color:#d39e00; } .ov-sub .bad b { color:var(--hdc-red); }
.ov-fy { display:flex; align-items:center; gap:8px; }
.ov-fy label { font-size:12px; color:var(--hdc-muted); }
.ov-fy select, .ov-link { border:1px solid var(--hdc-border); border-radius:8px; padding:7px 12px; font-size:14px; background:var(--hdc-card-bg); color:var(--hdc-text); text-decoration:none; cursor:pointer; }
.ov-hint { font-size:12.5px; color:var(--hdc-muted); margin:8px 0 14px; }

.cat-grid { display:grid; gap:16px; grid-template-columns:repeat(auto-fill, minmax(290px,1fr)); margin-bottom:26px; }
.cat-card { display:block; text-decoration:none; border-radius:16px; padding:16px 18px; color:#fff;
    background:linear-gradient(135deg,var(--c1),var(--c2)); box-shadow:0 6px 16px rgba(0,0,0,.12);
    transition:transform .15s, box-shadow .15s; }
.cat-card:hover { transform:translateY(-3px); box-shadow:0 10px 22px rgba(0,0,0,.20); }
.cat-card-top { display:flex; align-items:center; justify-content:space-between; }
.cat-ic { width:42px; height:42px; border-radius:12px; background:rgba(255,255,255,.22); display:flex; align-items:center; justify-content:center; font-size:20px; }
.cat-code { background:rgba(0,0,0,.18); font-size:11px; font-weight:700; padding:3px 10px; border-radius:20px; letter-spacing:.5px; }
.cat-name { font-size:16px; font-weight:700; margin:12px 0 2px; line-height:1.3; }
.cat-en { font-size:11.5px; opacity:.85; margin-bottom:6px; }
.cat-stats { display:flex; gap:8px; margin-top:12px; }
.cat-stats .cs { flex:1; background:rgba(255,255,255,.18); border-radius:10px; padding:8px 4px; text-align:center; }
.cs-n { display:block; font-size:22px; font-weight:800; line-height:1; }
.cs-l { font-size:11px; opacity:.92; }

.cat-sec { background:var(--hdc-card-bg); border:1px solid var(--hdc-border); border-radius:12px; margin-bottom:12px; overflow:hidden; scroll-margin-top:64px; }
.cat-sec > summary { display:flex; align-items:center; gap:12px; padding:14px 18px; cursor:pointer; list-style:none; border-left:5px solid var(--c1); }
.cat-sec > summary::-webkit-details-marker { display:none; }
.cat-sec > summary:hover { background:var(--hdc-bg); }
.sec-badge { background:var(--c1); color:#fff; font-size:11px; font-weight:700; padding:3px 11px; border-radius:20px; white-space:nowrap; }
.sec-name { font-size:15px; font-weight:700; flex:1; }
.sec-mini { display:flex; gap:5px; }
.sec-mini .mp { font-size:12px; font-weight:700; color:#fff; border-radius:6px; padding:1px 8px; }
.sec-mini .g { background:var(--hdc-green); } .sec-mini .y { background:#d39e00; } .sec-mini .r { background:var(--hdc-red); }
.sec-count { font-size:12.5px; color:var(--hdc-muted); white-space:nowrap; }
.sec-chev { transition:transform .2s; color:var(--hdc-muted); }
.cat-sec[open] .sec-chev { transform:rotate(180deg); }
.sec-body { border-top:1px solid var(--hdc-border); overflow-x:auto; }

.kpi-tbl { width:100%; border-collapse:collapse; font-size:14px; }
.kpi-tbl th { text-align:left; padding:9px 14px; font-size:12px; color:var(--hdc-muted); background:var(--hdc-bg); font-weight:600; border-bottom:1px solid var(--hdc-border); }
.kpi-tbl td { padding:10px 14px; border-bottom:1px solid var(--hdc-border); }
.kpi-tbl tbody tr { cursor:pointer; }
.kpi-tbl tbody tr:hover { background:var(--hdc-bg); }
.kpi-tbl tbody tr:last-child td { border-bottom:none; }
.kpi-tbl .c-st { width:26px; text-align:center; }
.kpi-tbl .dot { width:11px; height:11px; border-radius:50%; display:inline-block; background:var(--hdc-grey); }
.kpi-tbl .dot.green { background:var(--hdc-green); } .kpi-tbl .dot.yellow { background:#d39e00; } .kpi-tbl .dot.red { background:var(--hdc-red); }
.kpi-tbl .c-name .kn { display:block; }
.kpi-tbl .c-name .kc { font-size:11px; color:var(--hdc-muted); }
.kpi-tbl .c-val { text-align:right; white-space:nowrap; } .kpi-tbl .c-val b { font-size:15px; } .kpi-tbl .c-val .u { color:var(--hdc-muted); font-size:12px; }
.kpi-tbl .c-tg { text-align:right; color:var(--hdc-muted); white-space:nowrap; }
.kpi-tbl .c-stt { text-align:center; }
.st-badge { font-size:11.5px; font-weight:700; color:#fff; padding:3px 10px; border-radius:20px; background:var(--hdc-grey); white-space:nowrap; }
.st-badge.green { background:var(--hdc-green); } .st-badge.yellow { background:#d39e00; } .st-badge.red { background:var(--hdc-red); } .st-badge.none { background:#3a7bd5; }
.ov-note { font-size:12px; color:var(--hdc-muted); margin-top:18px; line-height:1.7; }
.ov-note a { color:var(--hdc-primary); }

@media (max-width:900px) {
  .pnk-topbar .nav-toggle { display:inline-block; }
  .hdc-sidebar { transform:translateX(-100%); transition:transform .2s; box-shadow:2px 0 14px rgba(0,0,0,.3); }
  .hdc-sidebar.open { transform:translateX(0); }
  .hdc-content { margin-left:0; }
  .sidebar-backdrop.show { display:block; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:35; }
  .tb-login input { width:90px; }
  .hdc-filterbar, .hdc-legend { flex-wrap:wrap; }
}
@media print {
  .hdc-sidebar, .pnk-topbar, .sidebar-backdrop { display:none !important; }
  .hdc-content { margin-left:0; }
}

/* ===== SVG icons ===== */
.svg-ic { display:inline-block; vertical-align:-3px; flex:0 0 auto; }
.svg-ic.mute { color:var(--hdc-muted); }
.menu-item .mi-ic { display:inline-flex; align-items:center; justify-content:center; width:20px; }
.menu-item .mi-ic .svg-ic { width:19px; height:19px; }
.cat-ic .svg-ic { width:24px; height:24px; color:#fff; }
.sec-chev { display:inline-flex; }
.sec-chev .svg-ic { width:18px; height:18px; vertical-align:0; }
.su-ic .svg-ic { width:18px; height:18px; color:var(--hdc-muted); }
.su-logout { display:inline-flex; line-height:0; }
.su-logout .svg-ic { width:16px; height:16px; vertical-align:0; }
.tb-icon, .nav-toggle, .tb-login-btn { display:inline-flex; align-items:center; gap:6px; line-height:0; }
.tb-icon .svg-ic, .nav-toggle .svg-ic { width:18px; height:18px; vertical-align:0; }
.tb-login-btn .svg-ic { width:15px; height:15px; vertical-align:0; }

/* Dark toggle: moon (light) ↔ sun (dark) */
#darkToggle .i-moon, #darkToggle .i-sun { display:inline-flex; }
#darkToggle .i-sun { display:none; }
body.hdc.dark #darkToggle .i-moon { display:none; }
body.hdc.dark #darkToggle .i-sun { display:inline-flex; }

/* ===== Search + filter toolbar ===== */
.ov-tools { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:6px 0 18px; }
.ov-search { display:flex; align-items:center; gap:8px; background:var(--hdc-card-bg); border:1px solid var(--hdc-border);
    border-radius:10px; padding:8px 12px; flex:1; min-width:230px; max-width:430px; }
.ov-search input { border:none; outline:none; background:transparent; font-family:inherit; font-size:14px; color:var(--hdc-text); width:100%; }
.ov-search-clear { background:none; border:none; cursor:pointer; color:var(--hdc-muted); padding:0; display:inline-flex; line-height:0; }
.ov-search-clear .svg-ic { width:16px; height:16px; vertical-align:0; }
.ov-filters { display:flex; gap:6px; flex-wrap:wrap; }
.fchip { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--hdc-border); background:var(--hdc-card-bg);
    color:var(--hdc-text); border-radius:20px; padding:7px 14px; font-size:13px; font-family:inherit; cursor:pointer; }
.fchip:hover { background:var(--hdc-bg); }
.fchip.active { background:var(--hdc-primary); color:#fff; border-color:var(--hdc-primary); }
.fdot { width:9px; height:9px; border-radius:50%; display:inline-block; }
.fdot.g { background:var(--hdc-green); } .fdot.y { background:#d39e00; } .fdot.r { background:var(--hdc-red); }
.fchip.active .fdot { box-shadow:0 0 0 2px rgba(255,255,255,.55); }
.ov-count { font-size:13px; color:var(--hdc-muted); margin-left:auto; font-weight:600; }

/* ===== Dark mode — ปรับให้อ่านง่าย/คอนทราสต์ดีขึ้น ===== */
body.hdc.dark { --hdc-primary:#4a90d9; --hdc-primary-dark:#86b9e6; }
body.hdc.dark .hdc-sidebar, body.hdc.dark .pnk-topbar { background:#141d28; }
body.hdc.dark .menu-item.active { box-shadow:none; color:#fff; }
body.hdc.dark .menu-item:hover { background:#202c3a; }
body.hdc.dark .cat-sec > summary:hover, body.hdc.dark .kpi-tbl tbody tr:hover,
body.hdc.dark .fchip:hover, body.hdc.dark .ov-fy select:hover { background:#202c3a; }
body.hdc.dark .kpi-tbl th { background:#101820; }
body.hdc.dark .su-logout:hover { background:#3a1f22; color:#ff8a80; border-color:#5a2a2e; }
body.hdc.dark .cat-card { box-shadow:0 6px 18px rgba(0,0,0,.5); }
body.hdc.dark .ov-search, body.hdc.dark .fchip, body.hdc.dark .ov-fy select,
body.hdc.dark .tb-login input, body.hdc.dark .ov-link { background:#141d28; }
body.hdc.dark .st-badge.none, body.hdc.dark .kpi-tbl .dot { color:#fff; }
.ov-link { display:inline-flex; align-items:center; gap:6px; }
.ov-link .svg-ic { width:16px; height:16px; vertical-align:0; }
.side-brand-text { min-width:0; }
.side-brand-text .t1 { line-height:1.15; }
.side-brand-text .t2 { line-height:1.25; margin-top:1px; }

/* ===== Favorite (รายการติดตาม) ===== */
.c-fav { width:38px; text-align:center; }
.fav-btn { background:none; border:none; cursor:pointer; color:var(--hdc-border); padding:5px; line-height:0; border-radius:6px; }
.fav-btn:hover { color:#e0a800; background:var(--hdc-bg); }
.fav-btn .svg-ic { width:18px; height:18px; vertical-align:0; }
.fav-btn.on { color:#f5a623; }
.fav-btn.on .svg-ic { fill:#f5a623; }
.fav-sec { background:var(--hdc-card-bg); border:1px solid var(--hdc-border); border-left:4px solid #f5a623;
    border-radius:12px; padding:14px 16px; margin-bottom:22px; }
.fav-head { font-size:15px; font-weight:700; color:var(--hdc-primary-dark); display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.fav-head .svg-ic { width:18px; height:18px; color:#f5a623; fill:#f5a623; }
.fav-count { color:var(--hdc-muted); font-weight:500; font-size:13px; }
.fav-grid { display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); }
.fav-card { display:block; text-decoration:none; color:inherit; background:var(--hdc-bg); border:1px solid var(--hdc-border);
    border-left:4px solid var(--hdc-grey); border-radius:10px; padding:12px 14px; transition:box-shadow .15s; }
.fav-card:hover { box-shadow:0 3px 10px rgba(0,0,0,.12); }
.fav-card.green { border-left-color:var(--hdc-green); } .fav-card.yellow { border-left-color:#d39e00; } .fav-card.red { border-left-color:var(--hdc-red); }
.fav-name { font-size:13px; font-weight:600; margin-bottom:6px; line-height:1.3; }
.fav-val { display:flex; align-items:center; gap:8px; } .fav-val b { font-size:20px; } .fav-val .u { color:var(--hdc-muted); font-size:12px; }

/* แจ้งเตือน guest: มีตัวชี้วัดภายในที่ต้องล็อกอิน */
.ov-locked { display:flex; align-items:center; gap:8px; background:#fff8e6; border:1px solid #f3d999;
    color:#8a6d1a; border-radius:10px; padding:11px 15px; font-size:13.5px; margin:6px 0 16px; }
.ov-locked .svg-ic { width:17px; height:17px; flex:0 0 auto; }
.ov-locked b { font-size:15px; }
.ov-locked a { color:var(--hdc-primary); font-weight:600; }
body.hdc.dark .ov-locked { background:#2a2410; border-color:#5a4d1a; color:#e0c878; }

/* ===== ช่วงเวลา (period selector) ===== */
.ov-period { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:2px 0 16px; }
.ovp-label { font-size:13px; color:var(--hdc-muted); }
.ovp-btn { text-decoration:none; border:1px solid var(--hdc-border); background:var(--hdc-card-bg); color:var(--hdc-text);
    border-radius:20px; padding:6px 15px; font-size:13px; }
.ovp-btn:hover { background:var(--hdc-bg); }
.ovp-btn.active { background:var(--hdc-primary); color:#fff; border-color:var(--hdc-primary); font-weight:600; }
.ovp-note { font-size:11.5px; color:var(--hdc-muted); margin-left:6px; }

/* ===== จัด column ตารางให้ตรงลำดับเดียวกันทุก section (fixed layout) ===== */
.kpi-tbl { table-layout: fixed; }
.kpi-tbl .c-st { width:34px; }
.kpi-tbl .c-val { width:130px; }
.kpi-tbl .c-tg { width:120px; }
.kpi-tbl .c-stt { width:96px; }
.kpi-tbl .c-fav { width:44px; }
.kpi-tbl .c-name .kn { overflow-wrap:anywhere; }

.report-table { table-layout: fixed; }
.report-table col.rc-name { width:24%; } .report-table col.rc-owner { width:13%; }
.report-table col.rc-unit { width:7%; } .report-table col.rc-q { width:8%; } .report-table col.rc-st { width:9%; }
.report-table td.l { overflow-wrap:anywhere; }