/* HR Paper Mill — Staff / Admin dashboard (ใช้ token และ component จาก style.css)
   Breakpoints เดียวกับหน้าผู้ใช้สิทธิ์: 768 (rail) · 1024 (สองคอลัมน์) · 1100 (แถบข้างเต็ม) · 1280 (กว้าง) */

.staff { --content: 480px; }
.staff .bottomnav { grid-template-columns: repeat(var(--nav-n, 5), minmax(0, 1fr)); }
.staff .bottomnav .nav-item span:not(.nav-badge) { font-size: 11px; white-space: nowrap; }
.staff [data-perm][hidden] { display: none !important; }

.nav-item { position: relative; }
.thumb-empty { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-sm); background: var(--field); color: var(--dash); }
.nav-badge {
    position: absolute; top: 6px; left: calc(50% + 6px);
    min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
    background: var(--bad); color: var(--on-bad); font-size: 11px; font-weight: 600; line-height: 18px; text-align: center;
}

.btn-bad { background: var(--bad); color: var(--on-bad); border: 0; }
.btn-chip-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
@media (hover: hover) { .btn-chip-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); } }
.btn-chip .count-pill { margin-left: 2px; }

.count-pill {
    display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 20px; padding: 0 7px;
    border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 600; font-family: var(--mono);
}
.count-pill.is-bad { background: var(--bad); color: var(--on-bad); }

.section-title { font-size: 15px; margin-bottom: 10px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.card-head .card-title { margin: 0; display: inline-flex; align-items: center; gap: 8px; }
.legend { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.lg { display: inline-block; width: 10px; height: 10px; border-radius: 3px; vertical-align: middle; }
.lg-self { background: var(--accent); }
.lg-agent { background: var(--warn); }
.lg-anom { background: var(--surface); box-shadow: inset 0 0 0 2px var(--bad); }
.lg-miss { background: var(--bad-soft); }
.legend .lg + * , .legend .lg { margin-left: 4px; }

/* --- Live indicator & toast --- */
.live { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex: none; box-shadow: 0 0 0 0 rgba(20, 108, 46, .4); animation: live-pulse 2s infinite; display: inline-block; }
.live.is-paused .live-dot { background: var(--dash); animation: none; }
@keyframes live-pulse { 70% { box-shadow: 0 0 0 6px rgba(20, 108, 46, 0); } 100% { box-shadow: 0 0 0 0 rgba(20, 108, 46, 0); } }

.toast {
    position: fixed; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 120; transform: translateX(-50%);
    max-width: calc(100% - 32px); padding: 10px 16px; border-radius: var(--r-md);
    background: var(--ink); color: var(--surface); font-size: 14px; font-weight: 500;
}
@media (min-width: 768px) { .toast { bottom: 24px; } }

/* --- Login (staff) --- */
.auth-buttons { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
.google-btn-slot { min-height: 44px; display: flex; justify-content: center; }
.google-btn-slot:empty { display: none; }
.btn-line { background: #06C755; color: #fff; border: 0; min-height: 44px; font-size: 15px; }
@media (hover: hover) { .btn-line:hover { background: #05B34C; } }
.btn-line:disabled { background: var(--not-ready); color: var(--ink-2); }
.line-logo { width: 22px; height: 22px; }
.auth-note { margin-top: 16px; }
.banner-info .ic { flex: none; margin-top: 2px; }

.pending-page { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 24px var(--gutter); }
.pending-card { width: 100%; max-width: 440px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 28px 24px; }
.pending-card h1 { font-size: 22px; }
.pending-card .kv { text-align: left; }
.pending-card .foot-row { width: 100%; margin-top: 8px; }

/* --- Layout --- */
.foot-row { display: flex; gap: 10px; flex-direction: row; flex-wrap: wrap; }
.foot-row > .btn { flex: 1 1 120px; width: auto; }
.view-head p { min-height: 1.2em; }

.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.kpi { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); min-width: 0; }
.kpi small { font-size: 12px; color: var(--muted); }
.kpi b { font-size: 28px; line-height: 1.15; font-variant-numeric: tabular-nums; }
.kpi b .of { font-size: 15px; color: var(--muted); font-weight: 500; }
.kpi span { font-size: 12px; color: var(--muted); }
.kpi.is-ok b { color: var(--ok); }
.kpi.is-warn b { color: var(--warn); }
.kpi.is-bad b { color: var(--bad); }
button.kpi { text-align: left; cursor: pointer; font: inherit; color: inherit; }
@media (hover: hover) { button.kpi:hover { border-color: var(--accent); } }
.kpi-meter { height: 6px; margin-top: 6px; border-radius: 3px; background: var(--line-soft); overflow: hidden; }
.kpi-meter i { display: block; height: 100%; background: var(--ok); border-radius: 3px; }

.ov-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }

.trend { display: flex; align-items: flex-end; gap: 3px; height: 140px; }
.trend .bar { flex: 1; display: flex; flex-direction: column-reverse; min-width: 0; height: 100%; justify-content: flex-start; }
.trend .bar i { display: block; width: 100%; }
.trend .bar .s { background: var(--accent); border-radius: 2px 2px 0 0; }
.trend .bar .a { background: var(--warn); border-radius: 2px 2px 0 0; }
.trend .bar .s + .a { border-radius: 2px 2px 0 0; }
.trend .bar.is-today { outline: 2px solid var(--accent-soft); outline-offset: 1px; border-radius: 3px; }
.trend .bar.empty-bar::after { content: ""; display: block; height: 4px; background: var(--line-soft); border-radius: 2px; }
.trend-axis { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11px; color: var(--muted); }

.feed { display: flex; flex-direction: column; }
.feed-item, .person {
    display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 0; min-height: 52px;
    background: none; border: 0; border-top: 1px solid var(--line-soft); text-align: left; color: inherit; font: inherit;
}
.feed > :first-child, .people-list > :first-child { border-top: 0; }
button.feed-item, button.person { cursor: pointer; }
@media (hover: hover) { button.feed-item:hover, button.person:hover { background: var(--field); } }
.feed-item .avatar, .person .avatar { width: 36px; height: 36px; font-size: 14px; }
.fi-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.fi-text b { font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fi-text small { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fi-side { display: flex; align-items: center; gap: 6px; flex: none; }
.people-list { display: flex; flex-direction: column; max-height: 420px; overflow: auto; }
.people-list .empty, .feed .empty { padding: 20px 8px; }
.call-btn { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-box); background: var(--accent-soft); color: var(--accent); flex: none; }
.mini-meter { width: 64px; height: 6px; border-radius: 3px; background: var(--line-soft); overflow: hidden; }
.mini-meter i { display: block; height: 100%; border-radius: 3px; background: var(--accent); }
.mini-meter.is-warn i { background: var(--warn); }
.mini-meter.is-bad i { background: var(--bad); }

.badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 500; white-space: nowrap; background: var(--line-soft); color: var(--ink-2); }
.badge .ic { width: 12px; height: 12px; }
.badge.is-ok { background: var(--ok-soft); color: var(--ok); }
.badge.is-warn { background: var(--warn-soft); color: var(--warn); }
.badge.is-bad { background: var(--bad-soft); color: var(--bad); }
.badge.is-accent { background: var(--accent-soft); color: var(--accent); }

/* --- Toolbar & filters --- */
.toolbar { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.toolbar-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.toolbar-row > * { flex: none; }
.toolbar-row .grow { flex: 1 1 220px; }
.input-sm { height: 40px; font-size: 14px; padding: 0 12px; border-width: 1px; }
.search-field { position: relative; display: flex; align-items: center; min-width: 0; }
.search-field .ic { position: absolute; left: 12px; color: var(--muted); pointer-events: none; }
.search-field .input { padding-left: 36px; width: 100%; }
.select-lg { height: 48px; width: 100%; font-size: 15px; font-weight: 400; }
.period { max-width: 520px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.period-inputs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.period-inputs > [hidden] { display: none !important; }
.range-sep { font-size: 13px; color: var(--muted); }
.view-toggle { grid-template-columns: repeat(2, auto); }
.view-toggle button { display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; }
.chips-row { display: flex; flex-wrap: wrap; gap: 6px; }
.chips-row:empty { display: none; }
.fchip {
    display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 0 6px 0 12px;
    border-radius: 999px; background: var(--accent-soft); color: var(--accent); border: 0; font-size: 13px; font-weight: 500; cursor: pointer;
}
.fchip .ic { width: 14px; height: 14px; }

.sumstrip { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.sumstrip:empty { display: none; }
.stat { display: inline-flex; align-items: baseline; gap: 6px; padding: 8px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); font-size: 13px; color: var(--muted); }
.stat b { font-size: 17px; color: var(--ink); font-variant-numeric: tabular-nums; }
.stat.is-warn b { color: var(--warn); }
.stat.is-bad b { color: var(--bad); }

.new-banner {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px;
    padding: 8px 8px 8px 14px; border-radius: var(--r-md); background: var(--ok-soft); color: var(--ok); font-size: 14px;
}
.new-banner > span { display: inline-flex; align-items: center; gap: 8px; }

.filter-body { display: flex; flex-direction: column; gap: 18px; }
.fgroup { border: 0; padding: 0; margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.fgroup legend { font-size: 14px; font-weight: 600; margin-bottom: 8px; padding: 0; }
.fcount { font-weight: 500; color: var(--accent); font-size: 13px; }
.check-list { max-height: 220px; overflow: auto; border: 1px solid var(--line); border-radius: var(--r-md); padding: 4px; }
.check-list label { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 8px; border-radius: var(--r-sm); cursor: pointer; font-size: 14px; }
.check-list label:hover { background: var(--field); }
.check-list input, .check-row input, .perm-list input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); flex: none; }
.check-list small { color: var(--muted); margin-left: auto; font-family: var(--mono); font-size: 12px; }
.check-row { display: flex; flex-wrap: wrap; gap: 8px; }
.check-row label, .perm-list label {
    display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px;
    border: 1px solid var(--line); border-radius: var(--r-md); font-size: 14px; cursor: pointer;
}
.check-row label:has(input:checked), .perm-list label:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.seg-wrap { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.segmented button[aria-checked="true"] { background: var(--surface); color: var(--ink); font-weight: 600; }

/* --- Data table → cards on phones --- */
.table-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; overflow-x: auto; }
.dtable { width: 100%; border-collapse: collapse; font-size: 14px; }
.dtable th { text-align: left; font-size: 12px; font-weight: 600; color: var(--muted); background: var(--field); padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.dtable td { padding: 10px 12px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; overflow-wrap: anywhere; }
.dtable tr:last-child td { border-bottom: 0; }
.dtable tbody tr { cursor: pointer; }
@media (hover: hover) { .dtable tbody tr:hover td { background: var(--field); } }
.dtable tr.is-deleted td { color: var(--muted); }
.dtable tr.is-deleted .cell-person b { text-decoration: line-through; }
.dtable tr.is-new td:first-child { box-shadow: inset 3px 0 0 var(--ok); }
.cell-person { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cell-person .avatar { width: 32px; height: 32px; font-size: 13px; }
.cell-person > span { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; line-height: 1.3; }
.cell-person b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell-person small, .cell-sub { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.cell-when b { display: block; font-weight: 500; white-space: nowrap; }
.thumb { width: 44px; height: 44px; border-radius: var(--r-sm); object-fit: cover; background: var(--line-soft); display: block; }
.thumb.is-loading { background: linear-gradient(90deg, var(--line-soft) 0%, var(--field) 50%, var(--line-soft) 100%); background-size: 200% 100%; animation: skel-shimmer 1.4s ease-in-out infinite; }
.row-btns { display: flex; gap: 4px; justify-content: flex-end; }
.row-btns .icon-btn { margin: 0; width: 36px; height: 36px; }
.table-empty { padding: 40px 16px; }
.skel-row td { cursor: default; }

/* ตารางกลายเป็นการ์ดบนมือถือและแท็บเล็ต (จอแคบกว่า 1024px) */
@media (max-width: 1023px) {
    .dtable, .dtable tbody, .dtable tr, .dtable td { display: block; width: 100%; }
    .dtable thead { display: none; }
    .dtable tr { position: relative; display: flex; flex-direction: column; padding: 12px 14px; border-bottom: 1px solid var(--line-soft); }
    .dtable td.td-main { order: -1; }
    .dtable tr:last-child { border-bottom: 0; }
    .dtable td { border: 0; padding: 3px 0; display: flex; align-items: center; gap: 8px; min-width: 0; }
    .dtable td[data-label]::before { content: attr(data-label); flex: none; width: 92px; font-size: 12px; color: var(--muted); }
    .dtable td.td-main { padding-bottom: 6px; padding-right: 56px; }
    .dtable td.td-main::before { display: none; }
    .dtable td.td-thumb { position: absolute; top: 12px; right: 14px; width: auto; padding: 0; }
    .dtable td.td-thumb::before { display: none; }
    .dtable td.td-actions { justify-content: flex-end; }
    .dtable td.td-actions::before { display: none; }
    .dtable td:empty { display: none; }
}

.pager { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: 12px; font-size: 13px; color: var(--muted); }
.pager:empty { display: none; }
.pager-btns { display: flex; gap: 6px; align-items: center; }

/* --- Map --- */
.map-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.map { height: min(65dvh, 620px); min-height: 320px; background: var(--field); }
.map .leaflet-popup-content { font-family: var(--font); font-size: 13px; line-height: 1.5; margin: 10px 12px; }
.map .leaflet-popup-content b { display: block; }
.map-fallback { display: grid; place-items: center; height: 100%; padding: 24px; text-align: center; color: var(--muted); }

/* --- Dialog forms --- */
.sheet-form { display: flex; flex-direction: column; min-height: 0; flex: 1; max-height: inherit; }
.sheet-form .sheet-body { flex: 1; }
.form-grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px 12px; }
.form-grid-2 .span-2 { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field .input { height: 48px; }
.textarea { height: auto !important; min-height: 72px; padding: 10px 14px; resize: vertical; line-height: 1.5; font-size: 15px; }
.input.mono { font-family: var(--mono); letter-spacing: 2px; text-transform: uppercase; }
.rf-photo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rf-photo img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--r-sm); border: 1px solid var(--line); }
.danger-zone { display: grid; gap: 4px; justify-items: start; padding-top: 14px; border-top: 1px solid var(--line); }
#pfIdHint.is-error { color: var(--bad); }
#pfIdHint.is-warn { color: var(--warn); }
.pf-pic { display: flex; align-items: flex-start; gap: 14px; min-width: 0; }
.pf-pic .avatar { flex: none; }
.pf-pic-main { flex: 1; min-width: 0; display: grid; gap: 8px; }
.pf-pic-main .row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pf-pic-main .input:disabled { color: var(--muted); }
@media (max-width: 420px) { .form-grid-2 { grid-template-columns: minmax(0, 1fr); } }

.export-options { display: flex; flex-direction: column; gap: 10px; }
.export-opt {
    display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px; text-align: left;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); cursor: pointer; color: inherit; font: inherit;
}
.export-opt b { display: block; font-size: 15px; }
.export-opt small { display: block; font-size: 12px; color: var(--muted); }
@media (hover: hover) { .export-opt:hover { border-color: var(--accent); background: var(--field); } }
.icon-box.is-ok { background: var(--ok-soft); color: var(--ok); }
.icon-box.is-bad { background: var(--bad-soft); color: var(--bad); }
.icon-box.is-accent { background: var(--accent-soft); color: var(--accent); }

.rec-body { display: flex; flex-direction: column; gap: 14px; }
.rec-photo { border-radius: var(--r-md); min-height: 200px; }
.rec-photo img { max-height: 46dvh; }
.rec-kv { margin-top: 0; }
.rec-kv dd { text-align: right; overflow-wrap: anywhere; }
.rec-kv a { color: var(--accent); }

.p-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.p-head h2 { overflow-wrap: anywhere; }
.p-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.p-stats .kpi { padding: 10px 12px; }
.p-stats .kpi b { font-size: 22px; }
.cal-card { border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px; }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.cal-head .icon-btn { margin: 0; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-dow { font-size: 11px; color: var(--muted); text-align: center; padding: 2px 0; }
.cal-day {
    aspect-ratio: 1; min-height: 32px; display: grid; place-items: center; border-radius: 8px;
    font-size: 12px; font-family: var(--mono); background: var(--field); color: var(--muted); position: relative;
}
.cal-day.is-self { background: var(--accent); color: var(--on-accent); }
.cal-day.is-agent { background: var(--warn); color: var(--on-warn); }
.cal-day.is-miss { background: var(--bad-soft); color: var(--bad); }
.cal-day.is-anom { box-shadow: inset 0 0 0 2px var(--bad); }
.cal-day.is-self.is-anom, .cal-day.is-agent.is-anom { box-shadow: inset 0 0 0 2px var(--surface), 0 0 0 2px var(--bad); }
.cal-day.is-today { outline: 2px solid var(--ink); outline-offset: 1px; }
.cal-day.is-future { background: transparent; }
.cal-legend { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 10px; font-size: 12px; color: var(--muted); }
.cal-legend span { display: inline-flex; align-items: center; gap: 6px; }

/* --- Admin --- */
.adm-tabs { grid-template-columns: repeat(2, auto); justify-content: start; margin-bottom: 16px; max-width: 420px; }
.adm-tabs button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 16px; }
.pending-list { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
.pending-item { display: flex; flex-direction: column; gap: 12px; padding: 14px; background: var(--surface); border: 1px solid var(--warn); border-radius: var(--r-lg); }
.pending-item .cell-person .avatar { width: 40px; height: 40px; }
.pending-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pending-actions .select { flex: 1 1 160px; height: 44px; }
.pending-actions .btn { width: auto; flex: 1 1 120px; min-height: 44px; }
.perm-list { display: flex; flex-wrap: wrap; gap: 8px; }
.perm-list label:has(input:disabled) { opacity: .6; cursor: not-allowed; }
.danger-zone { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--bad-line); border-radius: var(--r-md); }
.danger-zone b { font-size: 14px; color: var(--bad); }
.perm-view { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.perm-view li { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.perm-view li .ic { width: 18px; height: 18px; color: var(--ok); }
.perm-view li.is-off { color: var(--muted); }
.perm-view li.is-off .ic { color: var(--dash); }
.log-details { font-family: var(--mono); font-size: 11px; color: var(--muted); max-width: 360px; overflow-wrap: anywhere; }
.role-help .kv dd { text-align: right; }

/* --- Responsive --- */
@media (min-width: 600px) {
    .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .p-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .pending-list { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
}
@media (min-width: 768px) {
    .staff { --content: 760px; }
    .viewer.sheet, #recordModal { max-width: 760px; }
    #participantModal { max-width: 720px; }
}
@media (min-width: 1024px) {
    .staff { --content: 1180px; }
    .kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .ov-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; }
    .staff .acc-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (min-width: 1280px) {
    .staff { --content: 1320px; }
}
@media (max-width: 599px) {
    .period { max-width: none; }
    .toolbar-row .select { flex: 1 1 120px; }
    .view-toggle { flex: 1 1 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .head-actions .btn-chip { flex: 1; }
    .head-actions { width: 100%; }
    /* ปุ่มเล็ก (เช่น รีเฟรช) อยู่บรรทัดเดียวกับหัวเรื่อง ชิดขวาบน */
    .view-head-row:has(.head-inline) { flex-wrap: nowrap; }
    .view-head-row:has(.head-inline) > div:first-child { flex: 1 1 auto; min-width: 0; }
    .head-actions.head-inline { width: auto; flex: none; margin-top: 2px; }
}
@media (prefers-reduced-motion: reduce) {
    .live-dot, .thumb.is-loading { animation: none; }
}

/* --- Avatar with optional photo (ตัวอักษรย่อแสดงจนกว่ารูปจะโหลดได้) --- */
.avatar { position: relative; }
.avatar > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.text-bad { color: var(--bad); }
.pdf-bad { color: var(--bad); font-weight: 600; font-size: 11px; }

/* แถบข้างเต็ม: ตัวเลขรออนุมัติอยู่ท้ายแถว ไม่ทับข้อความ */
@media (min-width: 1100px) {
    .sidenav .nav-badge { position: static; margin-left: auto; }
}
/* มือถือ: KPI ใบสุดท้ายที่เหลือเดี่ยวให้เต็มแถว */
@media (max-width: 599px) {
    .kpis > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* เป้ากดใหญ่พอสำหรับนิ้ว: ปุ่มซูมแผนที่ และลิงก์ในตารางข้อมูล */
.map .leaflet-bar a { width: 40px; height: 40px; line-height: 40px; font-size: 20px; }
.kv dd a { display: inline-block; padding: 10px 0; margin: -10px 0; }

/* แท็บเล็ต: การ์ดรายการวางสองคอลัมน์ข้อมูลให้กระชับ */
@media (min-width: 600px) and (max-width: 1023px) {
    .dtable tbody { display: grid; grid-template-columns: minmax(0, 1fr); }
    .dtable td[data-label]::before { width: 110px; }
}
/* ปฏิทินไม่ขยายเกินจำเป็นบนจอกว้าง */
.cal-head, .cal-grid, .cal-legend { max-width: 440px; margin-left: auto; margin-right: auto; }
.cal-day { min-height: 0; }

/* ช่องวันที่ในแถบตัวกรอง: ยืดหดตามพื้นที่ ไม่ล้นขอบบน iPhone */
.toolbar-row input[type="date"] { width: auto; flex: 1 1 140px; min-width: 0; }
@media (max-width: 767px) {
    /* iPhone ซูมหน้าเมื่อแตะช่องที่ตัวอักษรเล็กกว่า 16px */
    .input-sm, .toolbar-row .select, .search-field .input { font-size: 16px; }
    .toolbar-row .range-sep { flex: none; }
}

/* --- Dashboard: กราฟ เทียบเดือน แผนที่ จุดขาย --- */
.chart-box { min-height: 120px; }
.chart-skel { display: block; height: 150px; border-radius: 12px; }
.chart-hint { margin: 8px 0 0; font-size: 12px; color: var(--muted); }
.seg-sm button { min-height: 36px; padding: 0 14px; font-size: 13px; }
.legend-row { display: flex; gap: 14px; margin-top: 8px; }
.legend-row span { display: inline-flex; align-items: center; gap: 6px; }
.lg-dash { width: 14px; height: 0; border-top: 2px dashed var(--muted); border-radius: 0; background: none; }
.cmp-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.cmp-stats > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: var(--r-md); background: var(--surface); min-width: 0; }
.cmp-stats small { font-size: 12px; color: var(--muted); }
.cmp-stats b { font-size: 22px; font-weight: 500; line-height: 1.2; font-variant-numeric: tabular-nums; }
.cmp-stats span:not(.delta) { font-size: 11px; color: var(--muted); }
.delta { display: inline-flex; align-self: flex-start; align-items: center; gap: 2px; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 500; white-space: nowrap; }
.delta.is-up { background: var(--ok-soft); color: var(--ok); }
.delta.is-down { background: var(--bad-soft); color: var(--bad); }
.gauge-box { position: relative; min-height: 160px; }
.split-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; padding: 10px 12px; border-radius: var(--r-md); background: var(--surface); }
.split-stats div { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; }
.split-stats small { font-size: 12px; color: var(--muted); }
.split-stats b { grid-column: 2; font-size: 16px; font-variant-numeric: tabular-nums; }
.ov-map { height: 300px; border-radius: var(--r-md); overflow: hidden; background: var(--container); z-index: 0; }
.ov-map .map-fallback { display: grid; place-items: center; height: 100%; padding: 16px; text-align: center; color: var(--muted); font-size: 13px; }
.map-tip { font-family: var(--font); font-size: 12px; line-height: 1.45; border-radius: 10px; }
.site-rank { margin-top: 12px; display: flex; flex-direction: column; }
.rank-head, .rank-row { display: grid; grid-template-columns: minmax(0, 1.6fr) 56px minmax(0, 1fr); gap: 10px; align-items: center; }
.rank-head { padding: 0 8px 6px; font-size: 11px; color: var(--muted); }
.rank-row { width: 100%; padding: 8px; border: 0; border-radius: 10px; background: none; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.rank-row + .rank-row { border-top: 1px solid var(--line-soft); }
@media (hover: hover) { .rank-row:hover { background: var(--surface); } }
.rank-name { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; align-items: center; min-width: 0; }
.rank-name b { font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-name small { grid-column: 2; font-size: 11px; color: var(--muted); }
.rank-bar { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rank-bar i { flex: 1; height: 6px; border-radius: 3px; background: var(--accent); max-width: 100%; }
.rank-bar b { font-size: 12px; min-width: 2.5em; text-align: right; }
/* KPI: บอกว่ากดดูรายการได้ */
.kpi { position: relative; transition: transform .15s, box-shadow .15s, border-color .15s; }
.kpi-go { display: inline-flex; align-items: center; gap: 2px; margin-top: auto; padding-top: 8px; align-self: flex-start; font-size: 12px; font-weight: 500; color: var(--accent); }
.kpi-go .ic { width: 14px; height: 14px; }
@media (hover: hover) { button.kpi:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0, 0, 0, .08); border-color: var(--accent); } }
button.kpi:active { transform: scale(.98); }
@media (max-width: 479px) {
    .cmp-stats { grid-template-columns: 1fr; }
    .cmp-stats > div { display: grid; grid-template-columns: 1fr auto; align-items: baseline; column-gap: 8px; }
    .cmp-stats small, .cmp-stats span:not(.delta) { grid-column: 1 / -1; }
    .cmp-stats b { grid-column: 1; }
    .cmp-stats .delta { grid-column: 2; grid-row: 2; }
    .ov-map { height: 240px; }
}
.map-tools { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.link-btn { padding: 0; border: 0; background: none; color: var(--accent); font: inherit; text-align: left; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
/* --- บันทึกการติดต่อ --- */
.contact-log { padding: 14px; border-radius: var(--r-md); background: var(--field); }
.contact-quick { display: flex; flex-wrap: wrap; gap: 8px; }
.contact-quick .btn-chip.is-on { background: var(--accent-soft); border-color: var(--accent); color: var(--on-accent-soft); }
.contact-form { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.contact-form textarea { height: auto; padding: 10px 12px; resize: vertical; font-size: 16px; }
.reason-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.reason-chips .reason { cursor: pointer; border: 0; font: inherit; font-size: 12px; padding: 4px 10px; }
.contact-list { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-direction: column; gap: 8px; }
.contact-list li { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; }
.contact-list .badge { flex: none; }
.cl-text { display: flex; flex-direction: column; min-width: 0; }
.cl-text small { color: var(--muted); font-size: 11px; }
.fi-text .contacted { display: inline-flex; align-items: center; gap: 3px; color: var(--ok); }
/* --- รายงานสำเร็จรูป --- */
.rep-title { margin: 20px 0 10px; }
.rep-card { padding: 14px; border-radius: var(--r-md); background: var(--field); margin-bottom: 10px; }
.rep-head { display: flex; gap: 12px; align-items: flex-start; }
.rep-head b { display: block; font-weight: 500; }
.rep-head small { display: block; color: var(--muted); font-size: 12px; }
.rep-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.rep-actions .input-sm, .rep-actions .select { width: auto; flex: 0 1 170px; min-width: 0; }

/* หัวตารางกดเรียงได้ (ผู้ใช้สิทธิ์) */
.dtable th[aria-sort] { padding: 0; }
.th-sort {
    display: inline-flex; align-items: center; gap: 4px; width: 100%; min-height: 40px; padding: 10px 12px;
    background: none; border: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; white-space: nowrap;
}
.th-sort .th-arrow { width: 14px; height: 14px; opacity: .45; flex: none; transition: transform var(--dur, .2s) ease, opacity .15s; }
.th-sort.is-on { color: var(--ink); }
.th-sort.is-on .th-arrow { opacity: 1; color: var(--accent); }
.th-sort .th-arrow.is-desc { transform: rotate(180deg); }
@media (hover: hover) { .th-sort:hover { color: var(--ink); background: var(--line-soft); } .th-sort:hover .th-arrow { opacity: .9; } }
.th-sort:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 4px; }

/* กรองด่วนพร้อมจำนวน */
.part-quick:empty { display: none; }
.qchip {
    display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 6px 0 12px; border-radius: 999px;
    border: 1px solid var(--line); background: var(--surface); color: var(--ink-2, var(--ink)); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
}
.qchip.is-on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.qchip.is-on .count-pill { background: rgba(255, 255, 255, .22); color: inherit; }
.qchip.is-bad:not(.is-on) .count-pill { background: var(--bad); color: var(--on-bad); }
@media (hover: hover) { .qchip:not(.is-on):hover { background: var(--field); } }
.qchip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* เลือกการเรียง: แสดงเฉพาะตอนตารางเป็นการ์ด (ไม่มีหัวตาราง) */
@media (min-width: 1024px) { .only-cards { display: none; } }
@media (max-width: 599px) {
    /* อยู่ในระยะขอบเดียวกับช่องอื่น ปัดซ้าย-ขวาได้ ขอบขวาจางลงบอกว่ายังมีต่อ */
    .part-quick { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 2px 28px 2px 0; scroll-snap-type: x proximity; scroll-padding: 0;
        -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
    .part-quick .qchip { min-height: 34px; font-size: 13px; }
    /* ปุ่มกรองด่วนทำหน้าที่เดียวกับช่องเลือกสถานะ: บนมือถือซ่อนช่องเลือก ลดความยาวหน้า */
    #partState { display: none; }
    .part-quick::-webkit-scrollbar { display: none; }
    .qchip { flex: none; scroll-snap-align: start; }
}

/* ตัวเลขนับขึ้นในหัวตัวเลขใหญ่: ใช้ขนาด/สี/น้ำหนักของตัวเลขเดิม (ไม่โดนสไตล์ข้อความรองของการ์ด) */
.kpi b > .count, .cmp-stats b > .count, .stat b > .count { font-size: inherit; color: inherit; font-weight: inherit; line-height: inherit; }

/* =====================================================
   สถิติการใช้งาน (คล้าย Google Analytics)
   ===================================================== */
.an-toolbar { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
.an-seg { max-width: 100%; }
.an-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .an-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .an-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.kpi .kpi-dur { font-size: 22px; line-height: 1.3; }
.kpi-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 2px; }
.kpi-foot > span:not(.delta) { font-size: 12px; color: var(--muted); }

.an-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
@media (min-width: 1024px) { .an-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .an-wide { grid-column: 1 / -1; } }
@media (min-width: 1280px) { .an-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } .an-grid .an-wide:first-child { grid-column: 1; } }
.an-chart { min-height: 220px; }
.an-chart-sm { min-height: 90px; margin: 4px 0 8px; }
.an-single { display: grid; place-items: center; align-content: center; gap: 4px; min-height: 180px; text-align: center; }
.an-single b { font-size: 48px; font-weight: 400; line-height: 1; }
.an-single span { font-size: 13px; color: var(--muted); }
.an-note { margin: 20px 4px 0; line-height: 1.6; }

/* เรียลไทม์ */
.an-realtime .card-title { gap: 8px; }
.an-rt-top { display: flex; align-items: baseline; gap: 10px; }
.an-rt-top b { font-size: 44px; font-weight: 400; line-height: 1.1; font-variant-numeric: tabular-nums; }
.an-rt-top span { font-size: 13px; color: var(--muted); }
.an-list { list-style: none; margin: 0; padding: 0; display: grid; }
.an-list li { display: flex; justify-content: space-between; gap: 8px; padding: 8px 2px; border-top: 1px solid var(--line-soft); font-size: 14px; }
.an-list li small { color: var(--muted); font-size: 12px; margin-left: 4px; }

/* ขั้นตอน (funnel) */
.funnel { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.funnel-top { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; }
.funnel-top b { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 8px; border-radius: 50%; background: var(--container); font-size: 12px; }
.funnel-top small { color: var(--muted); }
.funnel-bar { height: 10px; margin-top: 6px; border-radius: 999px; background: var(--container); overflow: hidden; }
.funnel-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #126EE4, #0850D1); transition: width .5s ease; }
.funnel-drop { display: block; margin-top: 3px; font-size: 12px; color: var(--bad); }
.an-outcomes { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line-soft); display: grid; gap: 8px; }
.an-out { display: flex; flex-wrap: wrap; gap: 6px; }

/* ตารางหน้า / เหตุการณ์ */
.an-table { display: grid; }
.an-row { display: grid; grid-template-columns: minmax(0, 1fr) 52px 52px 72px; gap: 8px; align-items: center; padding: 9px 4px; border-top: 1px solid var(--line-soft); font-size: 14px; }
.an-row > span:not(.an-name) { text-align: right; }
.an-row-ev { grid-template-columns: minmax(0, 1fr) 56px 56px; }
.an-head { border-top: 0; padding-top: 0; font-size: 12px; color: var(--muted); }
.an-name { position: relative; display: flex; flex-direction: column; min-width: 0; }
.an-name b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-name small { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-name code { font-family: var(--mono); font-size: 11px; }
.an-bar { display: block; height: 3px; margin-top: 4px; border-radius: 2px; background: var(--accent); opacity: .7; }
details.an-ev > summary { list-style: none; cursor: pointer; border-radius: 10px; }
details.an-ev > summary::-webkit-details-marker { display: none; }
@media (hover: hover) { details.an-ev > summary:hover { background: var(--hover); } }
.an-labels { list-style: none; margin: 0 0 8px; padding: 6px 10px; border-radius: 12px; background: var(--surface); display: grid; gap: 2px; font-size: 13px; }
.an-labels li { display: flex; justify-content: space-between; gap: 8px; }
.an-labels li span { overflow-wrap: anywhere; color: var(--ink-2); }
@media (max-width: 420px) { .an-row { grid-template-columns: minmax(0, 1fr) 44px 44px 64px; gap: 6px; font-size: 13px; } }

/* อุปกรณ์ / ที่มา: แถบสัดส่วน */
.an-tech { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 18px 24px; }
.an-block h4 { margin: 0 0 8px; font-size: 13px; font-weight: 500; color: var(--muted); }
.an-share { display: grid; grid-template-columns: minmax(0, 1fr) minmax(60px, 1fr) 40px; gap: 8px; align-items: center; padding: 4px 0; font-size: 14px; }
.an-share > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-share-bar { height: 8px; border-radius: 999px; background: var(--container); overflow: hidden; }
.an-share-bar i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.an-share b { font-size: 13px; text-align: right; font-weight: 500; }

/* แผนภาพความร้อน วัน × ชั่วโมง */
.heat { overflow-x: auto; overscroll-behavior-x: contain; }
.heat-grid { display: grid; grid-template-columns: 28px repeat(24, minmax(12px, 1fr)); gap: 3px; min-width: 420px; }
.heat-h { font-size: 10px; color: var(--muted); text-align: left; }
.heat-d { font-size: 12px; color: var(--muted); align-self: center; }
.heat-c { aspect-ratio: 1; min-height: 12px; border-radius: 3px; background: var(--container); position: relative; overflow: hidden; }
.heat-c::after { content: ""; position: absolute; inset: 0; background: var(--accent); opacity: var(--a, 0); }
.heat-legend { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-top: 10px; font-size: 12px; color: var(--muted); }
.heat-legend i { width: 14px; height: 14px; border-radius: 3px; background: var(--container); position: relative; overflow: hidden; }
.heat-legend i::after { content: ""; position: absolute; inset: 0; background: var(--accent); opacity: var(--a); }
.heat-legend span { margin: 0 4px; }
.an-head > span:first-child { text-align: left; }

/* ความปลอดภัย (ผู้ดูแลระบบ) */
.adm-tabs { grid-template-columns: repeat(4, auto); max-width: 620px; }
.adm-tabs button { white-space: nowrap; }
@media (max-width: 479px) { .adm-tabs { grid-template-columns: repeat(4, minmax(0, auto)); justify-content: stretch; max-width: none; } .adm-tabs button { padding: 0 6px; font-size: 13px; gap: 4px; } }
@media (max-width: 359px) { .adm-tabs button { padding: 0 3px; font-size: 12px; } .adm-tabs .count-pill { min-width: 16px; padding: 0 4px; } }
.sec-status { display: grid; gap: 14px; }
.sec-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sec-top > div { flex: 1 1 14em; display: flex; flex-direction: column; min-width: 0; }
.sec-top b { font-size: 18px; font-weight: 500; }
.sec-top small { font-size: 13px; color: var(--muted); }
.sec-dot { width: 14px; height: 14px; border-radius: 50%; flex: none; background: var(--ok); box-shadow: 0 0 0 6px var(--ok-soft); }
.sec-status.is-warn .sec-dot { background: var(--warn); box-shadow: 0 0 0 6px var(--warn-soft); }
.sec-status.is-bad .sec-dot { background: var(--bad); box-shadow: 0 0 0 6px var(--bad-soft); }
.sec-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sec-stats > div { display: flex; flex-direction: column; padding: 12px 14px; border-radius: var(--r-md); background: var(--surface); }
.sec-stats small, .sec-stats span { font-size: 12px; color: var(--muted); }
.sec-stats b { font-size: 26px; font-weight: 500; line-height: 1.2; }
.sec-events { list-style: none; margin: 0; padding: 0; display: grid; }
.sec-events li { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line-soft); }
.sec-events li:first-child { border-top: 0; }
.sec-events .badge { flex: none; }
.sec-ev-text { display: flex; flex-direction: column; min-width: 0; font-size: 14px; overflow-wrap: anywhere; }
.sec-ev-text small { font-size: 12px; color: var(--muted); }
.sec-how ol { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 6px; font-size: 14px; color: var(--ink-2); }
.sec-stats b > .count { font-size: inherit; color: inherit; font-weight: inherit; }

/* ผู้ต้องสงสัย / เครื่องที่ถูกบล็อก */
.sec-note { margin: -4px 0 10px; }
.threats { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.threat { display: grid; gap: 6px; padding: 12px 14px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line-soft); border-left: 4px solid var(--outline); min-width: 0; }
.threat.sev-critical { border-left-color: var(--bad); }
.threat.sev-high { border-left-color: var(--warn); }
.threat-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.threat-top b { font-size: 15px; font-weight: 500; flex: 1 1 10em; min-width: 0; }
.threat-st { font-size: 12px; color: var(--muted); }
.threat-st.is-new { color: var(--bad); font-weight: 600; }
.threat-detail { margin: 0; font-size: 14px; color: var(--ink-2); overflow-wrap: anywhere; }
.threat-meta { margin: 0; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.threat-meta code, .threat-top code { font-family: var(--mono); font-size: 12px; }
.threat-tip { margin: 0; padding: 8px 10px; border-radius: 10px; background: var(--field); font-size: 13px; color: var(--ink-2); }
.threat-actions { display: flex; flex-wrap: wrap; gap: 6px; }