:root{--ink:#152b2a;--muted:#5d6f6b;--paper:#f3f1e8;--panel:#fffdf8;--line:#dcded5;--green:#176c5b;--green-dark:#0f493f;--mint:#dcebe4;--coral:#a74431;--amber:#d99b3d;--night:#263d51;--shadow:0 18px 55px rgba(28,49,46,.08)}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:Tahoma,'Noto Sans Thai',system-ui,sans-serif}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.48}.hidden{display:none!important}.muted,.hint{color:var(--muted)}::selection{background:#b9dbcf;color:var(--green-dark)}*{scrollbar-color:#9dbab3 transparent;scrollbar-width:thin}
:focus-visible{outline:3px solid rgba(23,108,91,.55);outline-offset:2px;border-radius:4px}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.login-screen{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 15% 10%,#d9e9df 0,transparent 35%),radial-gradient(circle at 92% 90%,#eadcc5 0,transparent 35%),var(--paper)}.login-card{width:min(430px,100%);padding:44px;background:rgba(255,253,248,.92);border:1px solid rgba(23,108,91,.15);box-shadow:var(--shadow)}.login-card h1{font:800 38px/1.1 system-ui,sans-serif;margin:15px 0 9px}.brand-mark{width:62px;height:62px;display:grid;place-items:center;background:var(--green);color:white;border-radius:50%;font-size:30px;font-weight:700;box-shadow:inset 0 0 0 6px rgba(255,255,255,.14)}.brand-mark.small{width:39px;height:39px;font-size:19px;flex:0 0 auto}.login-card form{display:grid;gap:16px;margin-top:30px}
label{display:grid;gap:7px;color:#38504d;font-size:13px;font-weight:600}input,select,textarea{width:100%;border:1px solid var(--line);background:#fffefa;color:var(--ink);padding:12px 13px;border-radius:9px;outline:none;transition:.2s}input:focus,select:focus,textarea:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(23,108,91,.12)}button{border:0;border-radius:9px;padding:11px 16px;font-weight:700}.primary{background:var(--green);color:white}.primary:hover{background:var(--green-dark)}.secondary{background:var(--mint);color:var(--green-dark)}.ghost{background:transparent;border:1px solid var(--line);color:var(--ink)}.wide{width:100%}.form-error{min-height:20px;color:#b44834;margin:0;font-size:13px}
.app-shell{min-height:100vh;display:grid;grid-template-columns:236px 1fr}.sidebar{position:fixed;inset:0 auto 0 0;width:236px;background:#102a28;color:white;padding:25px 18px;display:flex;flex-direction:column;z-index:20}.brand{display:flex;align-items:center;gap:11px;padding:0 7px 25px;border-bottom:1px solid rgba(255,255,255,.1)}.brand strong{display:block;font-size:19px}.brand small{display:block;color:#9fc1ba;font-size:11px}.sidebar nav{display:grid;gap:5px;margin-top:24px}.nav-item{display:flex;gap:12px;align-items:center;text-align:left;color:#b8cbc7;background:transparent;padding:12px}.nav-item span{font-size:19px}.nav-item:hover,.nav-item.active{background:rgba(255,255,255,.09);color:white}.nav-item.active{box-shadow:inset 3px 0 var(--amber)}.sidebar-bottom{margin-top:auto}.status-line{display:flex;gap:9px;align-items:center;color:#a9c6c0;font-size:12px;margin:0 7px 17px}.status-line i{width:8px;height:8px;border-radius:50%;background:#68cc92;box-shadow:0 0 0 5px rgba(104,204,146,.1)}.sidebar .ghost{color:#dce8e5;border-color:rgba(255,255,255,.16)}
.sidebar-group-filter{margin-top:18px;padding:14px 7px;border-top:1px solid rgba(255,255,255,.1)}.sidebar-group-filter label{display:block;margin-bottom:6px;color:#9fc1ba;font-size:11px}.sidebar-group-filter select{padding:8px 9px;border-color:rgba(255,255,255,.18);background:#173936;color:#fff;font-size:13px}
main{grid-column:2;min-width:0}.topbar{height:108px;padding:25px 38px;display:flex;align-items:center;border-bottom:1px solid var(--line);background:rgba(243,241,232,.88);position:sticky;top:0;backdrop-filter:blur(12px);z-index:10}.topbar h2{margin:0;font-size:24px}.date-pill{margin-left:auto;border-left:1px solid var(--line);padding-left:24px;display:grid}.date-pill span{color:var(--muted);font-size:11px}.menu-button{display:none;background:transparent;font-size:23px}.view{display:none;padding:31px 38px 50px}.view.active{display:block}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:18px}.stat-card{background:var(--panel);border:1px solid var(--line);padding:20px;position:relative;overflow:hidden}.stat-card:after{content:'';position:absolute;width:54px;height:54px;border-radius:50%;right:-18px;top:-18px;background:var(--tone,#dcebe4)}.stat-label{color:var(--muted);font-size:12px}.stat-value{font:800 34px/1.1 system-ui,sans-serif;margin-top:8px}.stat-note{font-size:11px;margin-top:8px;color:var(--green)}
.page-heading{min-width:0}.page-heading span{display:block;margin-top:4px;color:var(--green);font-size:12px;font-weight:700}.readonly-notice{margin:18px 38px 0;padding:11px 14px;border:1px solid #e4d3ad;background:#fbf3df;color:#78581d;font-size:13px}.workspace-disabled{opacity:.52;pointer-events:none}.row-context{display:block;margin-top:3px;color:var(--muted);font-size:11px;font-weight:500}.status-active,.status-inactive{display:inline-flex;padding:3px 8px;border-radius:99px;font-size:11px;font-weight:700}.status-active{background:#def1e5;color:#267148}.status-inactive{background:#ecece5;color:#65716f}
.content-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.span-2{grid-column:span 2}.panel{background:var(--panel);border:1px solid var(--line);box-shadow:0 6px 24px rgba(28,49,46,.03);padding:23px}.panel-head,.toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:20px}.panel h3,.toolbar h3{margin:0;font-size:20px}.text-button{background:transparent;color:var(--green);padding:5px}.activity-list{display:grid}.activity-item{display:grid;grid-template-columns:43px 1fr auto;gap:12px;align-items:center;padding:14px 0;border-top:1px solid #ebece5}.activity-item:first-child{border-top:0}.avatar{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--mint);color:var(--green);font-weight:700}.activity-main strong{display:block}.activity-main small{color:var(--muted)}.time-block{text-align:right}.time-block strong{display:block}.badge{display:inline-block;border-radius:99px;padding:3px 8px;font-size:10px;font-weight:700}.badge.good{background:#def1e5;color:#267148}.badge.warn{background:#fae8cb;color:#946118}.badge.bad{background:#f6ded9;color:#a34332}.quick-panel form{display:grid;gap:16px}.action-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px}.hint{font-size:11px;margin:0}
.filters{display:flex;gap:8px}.filters input,.filters select{width:auto}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;min-width:780px}th{text-align:left;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.06em;padding:10px;border-bottom:1px solid var(--line)}td{padding:13px 10px;border-bottom:1px solid #ecece5;font-size:13px}.toolbar{margin-bottom:20px}.employee-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.employee-card{background:var(--panel);border:1px solid var(--line);padding:19px;display:grid;grid-template-columns:45px 1fr auto;gap:13px;align-items:start}.employee-card h4{margin:2px 0 3px}.employee-card p{margin:0;color:var(--muted);font-size:12px}.icon-button{background:transparent;font-size:20px;padding:3px 8px;color:var(--muted)}
.settings-grid{display:grid;grid-template-columns:1fr;gap:18px}.settings-form{display:grid;gap:18px}.three-cols,.two-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.two-cols{grid-template-columns:1fr 1fr}#shift-form .three-cols{grid-template-columns:repeat(2,minmax(0,1fr))}#shift-form fieldset{border:0;margin:0;padding:12px;display:grid;gap:9px;background:rgba(23,108,91,.05);border-radius:11px}#shift-form fieldset legend{font-size:12px;font-weight:700;color:var(--green-dark);padding:0 2px}.message-preview{margin:24px 0;padding:17px;background:#e7f2ed;border-radius:14px;display:grid;gap:7px}.message-preview small{color:var(--muted)}.message-preview span{background:white;border-radius:10px;padding:11px;font-size:12px}.info-panel ol{padding-left:20px;color:var(--muted);font-size:13px}.info-panel code{background:#ecece5;padding:2px 5px}
.filters-bar{display:flex;flex-wrap:wrap;gap:16px;align-items:end;width:100%}.filters-bar fieldset{border:0;padding:0;margin:0;display:grid;gap:5px}.filters-bar legend{font-size:11px;font-weight:700;color:#38504d;padding:0}.filters-inline{display:flex;gap:8px}.filter-actions{align-items:end;flex-wrap:wrap}.view.loading{opacity:.55;pointer-events:none}.wide-empty{grid-column:1/-1;border:1px dashed var(--line);border-radius:12px;background:rgba(255,253,248,.6)}
.danger{background:var(--coral);color:white}.danger:hover{background:#bf5540}
.toast-actions{margin-top:9px;display:flex;justify-content:flex-end}.toast .undo-button{background:rgba(255,255,255,.16);color:#fff;border-radius:7px;padding:6px 13px;font-size:13px;font-weight:700}.toast .undo-button:hover{background:rgba(255,255,255,.28)}.toast-error{background:#7c2d21}
.stat-card[data-stat]{cursor:pointer;transition:border-color .15s,transform .15s}.stat-card[data-stat]:hover{border-color:var(--green)}
.icon{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-3px;flex:0 0 auto}
.nav-item .icon{width:19px;height:19px}.icon-button .icon{width:17px;height:17px}.avatar .icon{width:20px;height:20px}
.badge{display:inline-flex;align-items:center;gap:4px}.badge .icon{width:11px;height:11px;stroke-width:2.4}
.admin-dialog-icon .icon{width:23px;height:23px;stroke-width:2}.admin-security-note .icon{width:13px;height:13px;vertical-align:-2px}
.menu-button .icon{width:22px;height:22px}
#danger-panel{border-color:#e7c4bb;background:#fdf4f1}#danger-panel h3{color:#8f3a2b}
.sidebar-scrim{display:none}
@media(max-width:720px){.sidebar-scrim.open{display:block;position:fixed;inset:0;background:rgba(10,30,28,.45);z-index:15}}
dialog{width:min(560px,calc(100% - 28px));border:0;padding:0;background:var(--panel);border-radius:20px;overflow:hidden;box-shadow:0 24px 80px rgba(10,30,28,.25)}dialog::backdrop{background:rgba(10,30,28,.48);backdrop-filter:blur(4px)}#employee-form{padding:25px;display:grid;gap:16px}.dialog-head,.dialog-actions{display:flex;justify-content:space-between;align-items:center}.dialog-head h3{margin:0}.dialog-actions{justify-content:flex-end;gap:9px;margin-top:6px}.check-row{display:flex;align-items:center;gap:8px}.check-row input{width:auto}.toast{position:fixed;right:24px;bottom:24px;background:#102a28;color:white;padding:13px 17px;border-radius:10px;box-shadow:var(--shadow);transform:translateY(80px);opacity:0;transition:.25s;z-index:100;overflow:hidden}.toast.inside-dialog{position:absolute;left:24px;right:24px;bottom:82px;text-align:center;transform:translateY(16px);z-index:5}.toast.show{transform:none;opacity:1}.empty{padding:28px;text-align:center;color:var(--muted)}
#confirm-form{padding:25px;display:grid;gap:16px}
#leave-form{padding:25px;display:grid;gap:16px}
#employee-form .dialog-head,#shift-form .dialog-head,#attendance-form .dialog-head,#confirm-form .dialog-head,#leave-form .dialog-head{margin:-25px -25px 0;padding:22px 25px 19px;background:linear-gradient(135deg,#edf6f1 0%,#fffdf8 72%);border-bottom:1px solid #e3e7df}
.dialog-head .icon-button{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.72);border:1px solid var(--line);font-size:20px;line-height:1;flex:0 0 auto}
.field-error{color:#b44834;font-size:11px;font-weight:600}
.filters-inline .field-error{flex:1 0 100%}
input.invalid,select.invalid,textarea.invalid{border-color:#b44834;box-shadow:0 0 0 3px rgba(180,72,52,.12)}
.toast-timer{position:absolute;left:0;bottom:0;height:3px;width:100%;background:rgba(255,255,255,.45);transform-origin:left;animation:toast-timer linear forwards;pointer-events:none}
@keyframes toast-timer{from{transform:scaleX(1)}to{transform:scaleX(0)}}
.audit-action{display:inline-block;background:var(--mint);color:var(--green-dark);border-radius:99px;padding:3px 9px;font-size:11px;font-weight:700;white-space:nowrap}
#audit-table td{vertical-align:top}#audit-table .audit-detail{max-width:420px;overflow-wrap:anywhere;color:var(--muted)}
@media(max-width:1050px){.stats-grid{grid-template-columns:repeat(2,1fr)}.content-grid{grid-template-columns:1fr}.span-2{grid-column:auto}.employee-grid{grid-template-columns:repeat(2,1fr)}.settings-grid{grid-template-columns:1fr}}
@media(max-width:720px){.app-shell{display:block}.sidebar{transform:translateX(-100%);transition:.25s}.sidebar.open{transform:none}.menu-button{display:block}.topbar{height:89px;padding:18px 16px;gap:10px}.topbar h2{font-size:19px}.date-pill{display:none}.view{padding:20px 14px 40px}.stats-grid{grid-template-columns:1fr 1fr;gap:9px}.stat-card{padding:15px}.stat-value{font-size:28px}.employee-grid{grid-template-columns:1fr}.stack-mobile{align-items:flex-start;flex-direction:column}.filters-bar{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:12px}.filters-bar .filter-actions{grid-column:1/-1}.filters-inline{flex-wrap:wrap}.filters-inline>*{flex:1 1 auto}.filters-bar input,.filters-bar select{width:100%}.three-cols,.two-cols,#shift-form .three-cols{grid-template-columns:1fr}.login-card{padding:30px 24px}}
#shift-form,#attendance-form{padding:25px;display:grid;gap:16px}
#group-form{padding:25px;display:grid;gap:16px}#group-form .dialog-head{margin:-25px -25px 0;padding:22px 25px 19px;background:linear-gradient(135deg,#edf6f1 0%,#fffdf8 72%);border-bottom:1px solid #e3e7df}
.card-actions{display:grid;gap:7px;min-width:72px}.card-actions button{padding:7px 10px;font-size:12px}.history-pager{display:flex;justify-content:center;align-items:center;gap:14px;margin-top:20px}.history-pager button:disabled{opacity:.4;cursor:not-allowed}.filters{flex-wrap:wrap}

#admin-user-dialog{width:min(640px,calc(100% - 28px));border-radius:20px;overflow:hidden;background:#fffdf8}
#admin-user-form{display:grid}
.admin-dialog-head{padding:24px 28px 21px;align-items:flex-start;background:linear-gradient(135deg,#edf6f1 0%,#fffdf8 72%);border-bottom:1px solid #e3e7df}
.admin-dialog-title{display:flex;align-items:flex-start;gap:14px;min-width:0}
.admin-dialog-icon{width:44px;height:44px;flex:0 0 44px;border-radius:13px;display:grid;place-items:center;background:var(--green);color:#fff;font-size:23px;box-shadow:0 8px 20px rgba(23,108,91,.18)}
.admin-dialog-head h3{font-size:22px;line-height:1.25}
.admin-dialog-subtitle{margin:5px 0 0;color:var(--muted);font-size:12px;font-weight:400;line-height:1.45}
.admin-dialog-head>.close-admin-user{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.72);border:1px solid var(--line);font-size:20px;line-height:1}
.admin-user-fields{padding:25px 28px;display:grid;gap:19px}
.admin-user-fields label{gap:8px}
.admin-user-fields .field-label{font-size:13px;color:var(--ink)}
.admin-user-fields input{min-height:50px;padding:13px 14px;border-radius:11px;background:#fff}
.admin-user-fields input::placeholder{color:#98a4a1;font-weight:400}
.admin-user-fields input[readonly]{background:#f1f2ed;color:#71807e;cursor:not-allowed}
.password-field-wrap{position:relative}
.password-field-wrap input{padding-right:78px}
.password-field-wrap button{position:absolute;right:7px;top:7px;bottom:7px;padding:0 12px;border-radius:8px;background:var(--mint);color:var(--green-dark);font-size:12px}
.admin-user-fields .hint{display:block;font-weight:400;line-height:1.45}
.admin-active-row{padding:14px 15px;border:1px solid #dce5de;border-radius:12px;background:#f3f8f5;align-items:flex-start}
.admin-active-row input{min-height:auto;margin-top:3px}
.admin-active-row span{display:grid;gap:2px;color:var(--ink)}
.admin-active-row small{color:var(--muted);font-weight:400}
.admin-dialog-actions{margin:0;padding:17px 28px;background:#f7f6ef;border-top:1px solid #e5e5dc;justify-content:space-between;gap:15px}
.admin-dialog-actions>div{display:flex;gap:9px}
.admin-security-note{color:var(--muted);font-size:11px;font-weight:500}

@media(max-width:620px){#admin-user-dialog{width:calc(100% - 20px);border-radius:16px}.admin-dialog-head{padding:20px}.admin-dialog-icon{width:40px;height:40px;flex-basis:40px}.admin-dialog-subtitle{max-width:250px}.admin-user-fields{padding:21px 20px;gap:17px}.admin-dialog-actions{padding:15px 20px;align-items:stretch;flex-direction:column}.admin-dialog-actions>div{display:grid;grid-template-columns:1fr 1.35fr}.admin-dialog-actions button{width:100%}.admin-security-note{text-align:center;order:2}}

.bulk-bar{display:flex;align-items:center;gap:10px;padding:12px 14px;margin-top:12px;background:#f0f5f2;border:1px solid #dce5de;border-radius:10px;font-size:13px;font-weight:600}.bulk-bar span{flex:1;color:var(--green-dark)}.bulk-bar button{padding:7px 14px;font-size:12px}
#leave-table th:first-child,#leave-table td:first-child{width:40px;text-align:center}
#leave-original-text{background:#f5f5f0;color:var(--muted);font-style:italic;resize:none}
@media(max-width:720px){.bulk-bar{flex-wrap:wrap;gap:8px}.bulk-bar span{flex:1 0 100%}}
@media(max-width:720px){.readonly-notice{margin:12px 14px 0}.page-heading span{max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sidebar-group-filter select{font-size:16px}}

.attendance-mode{display:flex;border:1px solid var(--line);border-radius:9px;overflow:hidden;flex:0 0 auto;margin-left:auto}
.attendance-mode button{border-radius:0;background:transparent;border:0;padding:8px 14px;font-size:13px;color:var(--ink)}
.attendance-mode button[aria-selected="true"]{background:var(--mint);color:var(--green-dark)}
#view-attendance .panel-head{align-items:flex-start;flex-wrap:wrap}
#view-attendance .filters-bar{flex:1 0 100%}
#roster-grid-wrap{overflow:visible;max-height:none}
.roster-month{margin:0 0 10px;font-size:15px;font-weight:700;color:var(--green-dark)}
.roster-grid{width:100%;min-width:0;table-layout:fixed;border-collapse:collapse}
.roster-grid th,.roster-grid td{text-align:center;padding:4px 2px;font-size:11px;border:1px solid var(--line);letter-spacing:0;text-transform:none}
.roster-grid .meta-seq,.roster-grid .meta-code{white-space:nowrap}
.roster-grid .meta-seq{width:32px}
.roster-grid .meta-code{width:64px}
.roster-grid .meta-name{width:80px;white-space:normal;overflow-wrap:anywhere;line-height:1.25;font-weight:600}
.roster-grid .day-head{white-space:nowrap;font-weight:700;color:var(--muted)}
.roster-grid .day-n,.roster-grid .day-w{display:block;line-height:1.15}
.roster-grid .day-w{font-size:9px;font-weight:600}
.roster-grid tbody td{white-space:nowrap;font-weight:700}
.cell-morning{background:#FFE699;color:var(--ink)}
.cell-both{background:#FFE699;color:var(--ink)}
.cell-night{background:#2F75B5;color:#fff}
.cell-off{background:#7030A0;color:#fff}
.cell-pending{background:#F7F7F3;color:var(--muted)}
.cell-leave{background:#FF0000;color:#fff}
.roster-foot-am td,.roster-foot-am th{background:#FFF2CC;font-weight:700}
.roster-foot-pm td,.roster-foot-pm th{background:#C9DAF8;font-weight:700}
.roster-legend{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:12px 0 0;font-size:12px;color:var(--muted)}
.roster-legend span{display:inline-flex;align-items:center;justify-content:center;min-width:28px;padding:3px 7px;border-radius:6px;font-weight:700}
@media(max-width:720px){
  #roster-grid-wrap{overflow:auto}
  #roster-grid-wrap .roster-grid{min-width:720px;table-layout:auto}
  #roster-grid-wrap .roster-grid .meta{position:sticky;background:var(--panel);z-index:2}
  #roster-grid-wrap .roster-grid thead th{position:sticky;top:0;z-index:3;background:#efece3}
  #roster-grid-wrap .roster-grid thead .meta{z-index:4}
  #roster-grid-wrap .roster-grid .meta-seq{left:0}
  #roster-grid-wrap .roster-grid .meta-code{left:32px}
  #roster-grid-wrap .roster-grid .meta-name{left:96px}
}




.roster-grid td.sum-note,.roster-grid th.sum-note{text-align:left;white-space:normal;overflow-wrap:anywhere;font-weight:600}
.roster-grid .note-manual{display:inline}
.summary-block{margin-top:22px}
#summary-grid{overflow:visible;max-height:none}
#summary-grid .roster-grid{width:max-content;max-width:100%;min-width:0;table-layout:auto}
#summary-grid .roster-grid .day-head{width:4.5rem}
#summary-grid .roster-grid td.sum-note{min-width:14rem;max-width:28rem}
#summary-grid .sum-act{width:36px;padding:2px;border-left:0}
#summary-grid .sum-act .note-edit{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border-radius:6px;background:transparent;border:0}
#summary-grid .sum-act .note-edit .icon{width:15px;height:15px}
@media(max-width:720px){
  #summary-grid{overflow:auto}
  #summary-grid .roster-grid{width:max-content;min-width:0}
}
/* Remediation: responsive containment, accessible targets, and readable summary. */
.settings-grid,.settings-grid>*{min-width:0}.settings-grid .table-wrap{max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain}
.text-button,.icon-button,.card-actions button,.bulk-bar button,.attendance-mode button{min-width:44px;min-height:44px}
.dialog-head .icon-button,.admin-dialog-head>.close-admin-user{width:44px;height:44px}.password-field-wrap button{min-height:44px;top:3px;bottom:3px}
.leave-check,#leave-select-all{width:24px;height:24px}
.cell-leave-mixed{background:#f4d5cf;color:#713326}
#summary-grid{max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain}
#summary-grid .summary-table{width:max-content;max-width:none;min-width:1040px;table-layout:auto}
#summary-grid .summary-table .meta-name{width:130px;min-width:130px;white-space:normal;overflow-wrap:normal}
#summary-grid .summary-table td.sum-note,#summary-grid .summary-table th.sum-note{position:relative;min-width:220px;max-width:360px;padding-right:52px}
#summary-grid .summary-table .note-edit{position:absolute;right:4px;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border-radius:8px}
#summary-grid .summary-table .note-auto{color:var(--muted);font-weight:500}.summary-total th,.summary-total td{background:#f0f4ef;font-weight:700}
@media(max-width:720px){#summary-grid .summary-table{min-width:1040px}.settings-grid table{min-width:680px}.settings-grid .panel{padding:18px}.settings-grid .table-wrap{width:100%}}
/* Roster Day Editor + supplementary daily states. */
.roster-grid td.roster-day-cell{padding:0}
.roster-cell-button{width:100%;min-width:32px;min-height:44px;padding:4px 2px;border:0;border-radius:0;background:transparent;color:inherit;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font:inherit;cursor:pointer}
.roster-cell-button:focus-visible{outline:3px solid #0b6b5b;outline-offset:-3px;position:relative;z-index:1}
.roster-cell-primary{font-weight:800;line-height:1.1}
.roster-cell-extras{display:flex;flex-wrap:wrap;justify-content:center;gap:2px;white-space:normal;line-height:1.1}
.roster-extra{display:inline-flex;align-items:center;justify-content:center;border-radius:5px;padding:1px 4px;font-size:8px;font-weight:800;background:rgba(255,255,255,.84);color:#24312f;border:1px solid rgba(0,0,0,.12)}
.roster-extra.ot{background:#dff4e9;color:#175a47}.roster-extra.ot-leave{background:#fff0ca;color:#725000}.roster-extra.hour-leave{background:#f3e5ff;color:#593679}
.roster-guide{margin-top:12px;display:grid;gap:7px;font-size:12px;color:var(--muted)}
.roster-guide-row{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px}.roster-guide-label{font-weight:800;color:var(--ink);min-width:82px}
.roster-guide-token{display:inline-flex;gap:5px;align-items:center}.roster-guide-token>span{display:inline-flex;min-width:28px;min-height:26px;padding:3px 7px;border-radius:6px;align-items:center;justify-content:center;font-weight:800}
.roster-guide-note{margin:0;padding:8px 10px;border-left:3px solid var(--green);background:rgba(23,108,91,.06);border-radius:0 8px 8px 0}
.day-editor-dialog{width:min(760px,calc(100% - 24px));max-width:760px;max-height:88%;overflow:auto}
.day-editor-dialog>.dialog-head{position:sticky;top:0;background:var(--panel);z-index:3;padding-bottom:10px}
.day-editor-section{margin:14px 0;padding:14px;border:1px solid var(--line);border-radius:12px;display:grid;gap:10px;background:#fffdf8}
.day-editor-section-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.day-editor-section h4,.day-editor-section h5{margin:0}.day-editor-section small{color:var(--muted)}
.day-editor-list{display:grid;gap:8px}.day-attendance-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px;border-radius:10px;background:#f5f4ef}.day-attendance-main{display:grid;gap:2px}.day-attendance-main small{color:var(--muted)}
.day-editor-create{display:grid;gap:10px;padding-top:10px;border-top:1px dashed var(--line)}
.day-editor-dialog button{min-height:44px}
.day-editor-dialog input,.day-editor-dialog select{min-height:44px}
@media(max-width:720px){.roster-cell-button{min-width:38px;min-height:46px}.roster-extra{font-size:8px}.day-editor-dialog{width:calc(100% - 16px)}.day-editor-dialog .two-cols{grid-template-columns:1fr}.roster-guide-label{min-width:100%}}


/* Desktop density: compact operational grid without reducing touch targets. */
@media (min-width:721px) and (pointer:fine){
  #view-attendance.roster-mode{padding:16px 28px 30px}
  #view-attendance.roster-mode .panel{padding:14px 16px 16px}
  #view-attendance.roster-mode .panel-head{flex-wrap:nowrap;align-items:end;gap:10px;margin-bottom:8px}
  #view-attendance.roster-mode .panel-head>div:first-child{display:none}
  #view-attendance.roster-mode .filters-bar{order:1;flex:1 1 auto;width:auto;gap:8px;flex-wrap:nowrap}
  #view-attendance.roster-mode .attendance-mode{order:2;margin-left:auto}
  #view-attendance.roster-mode .filters-bar fieldset{gap:3px}
  #view-attendance.roster-mode .filters-bar select,#view-attendance.roster-mode .filter-actions button,#view-attendance.roster-mode .attendance-mode button{min-height:34px;padding:6px 10px;font-size:12px}
  #view-attendance.roster-mode .filter-actions{flex-wrap:nowrap;gap:6px}
  #view-attendance.roster-mode .roster-month{margin-bottom:5px;font-size:14px}
  #view-attendance.roster-mode #roster-grid-wrap .roster-grid th,#view-attendance.roster-mode #roster-grid-wrap .roster-grid td{padding:2px 1px;font-size:10px;line-height:1.05}
  #view-attendance.roster-mode .roster-cell-button{min-height:30px;padding:1px;gap:0}
  #view-attendance.roster-mode .roster-cell-extras{gap:1px;flex-wrap:nowrap;max-width:100%}
  #view-attendance.roster-mode .roster-extra{padding:0 2px;border-radius:3px;font-size:7px;line-height:1.25;white-space:nowrap}
  #view-attendance.roster-mode .roster-foot-am td,#view-attendance.roster-mode .roster-foot-am th,#view-attendance.roster-mode .roster-foot-pm td,#view-attendance.roster-mode .roster-foot-pm th{height:20px;padding:1px}
  #view-attendance.roster-mode .roster-guide{grid-template-columns:auto minmax(280px,1fr);align-items:center;gap:6px 10px;margin-top:6px;font-size:10px}
  #view-attendance.roster-mode .roster-guide-row{gap:4px 7px;flex-wrap:nowrap}
  #view-attendance.roster-mode .roster-guide-label{min-width:auto;font-size:10px}
  #view-attendance.roster-mode .roster-guide-label.supplement{margin-left:5px}
  #view-attendance.roster-mode .roster-guide-token{gap:3px;white-space:nowrap}
  #view-attendance.roster-mode .roster-guide-token>span{min-width:22px;min-height:20px;padding:1px 5px}
  #view-attendance.roster-mode .roster-guide-note{padding:4px 7px;font-size:10px;line-height:1.25}
  #view-attendance.roster-mode .summary-block{margin-top:10px}
  #view-attendance.roster-mode #summary-title{margin-bottom:5px;font-size:14px}
  #view-attendance.roster-mode #summary-grid .summary-table th,#view-attendance.roster-mode #summary-grid .summary-table td{padding:4px 6px;font-size:10px;line-height:1.15}
  #view-attendance.roster-mode #summary-grid .summary-table td.sum-note,#view-attendance.roster-mode #summary-grid .summary-table th.sum-note{padding-right:34px}
  #view-attendance.roster-mode #summary-grid .summary-table .note-edit{width:28px;height:28px;min-width:28px;min-height:28px}
  #view-attendance.roster-mode .roster-scroll{max-height:255px;overflow:auto;overscroll-behavior:contain}
}

/* Day Editor: progressive desktop layout, one-column touch layout. */
.day-editor-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:10px 14px 0}
.day-editor-summary>div{padding:8px 10px;border:1px solid var(--line);border-radius:9px;background:#f6f7f2;display:grid;gap:2px;min-width:0}
.day-editor-summary small{font-size:10px;color:var(--muted)}.day-editor-summary strong{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.day-editor-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr);gap:10px;margin:10px 14px 0;align-items:start}
.day-editor-grid .day-editor-section{margin:0}.day-editor-attendance{grid-row:1/span 2}.day-editor-leave{grid-column:2;grid-row:1}.day-editor-overtime{grid-column:2;grid-row:2}
.day-editor-toggle{padding:6px 9px;font-size:11px;white-space:nowrap}.day-editor-actions{margin:10px 14px 14px}
@media (min-width:721px) and (pointer:fine){
  .day-editor-dialog{width:min(900px,calc(100% - 32px));max-width:900px;max-height:calc(100vh - 32px)}
  .day-editor-dialog>.dialog-head{padding:12px 14px 9px}.day-editor-dialog>.dialog-head p{margin:4px 0 0;font-size:12px}
  .day-editor-section{padding:11px;gap:8px}.day-editor-section small{font-size:10px}.day-editor-section label{gap:4px;font-size:11px}
  .day-editor-dialog button,.day-editor-dialog input,.day-editor-dialog select{min-height:34px}
  .day-editor-dialog input,.day-editor-dialog select{padding:7px 9px}
  .day-editor-dialog .empty{padding:14px}.day-attendance-item{padding:8px}.day-editor-create{gap:8px;padding-top:8px}
  .day-editor-dialog .two-cols{gap:8px}.day-editor-dialog .dialog-actions button{padding:7px 12px}
}
@media(max-width:720px){
  .day-editor-summary{margin:10px 10px 0;gap:6px}.day-editor-summary>div{padding:7px}.day-editor-summary strong{font-size:11px}
  .day-editor-grid{grid-template-columns:1fr;margin:10px;gap:10px}.day-editor-attendance,.day-editor-leave,.day-editor-overtime{grid-column:auto;grid-row:auto}
  .day-editor-actions{margin:10px}.day-editor-toggle{min-height:44px}
}

@media (min-width:721px) and (pointer:fine){
  .day-editor-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .day-editor-attendance,.day-editor-leave,.day-editor-overtime{grid-column:auto;grid-row:1}
  .day-editor-grid.attendance-open{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(250px,.8fr)}
  .day-editor-grid.attendance-open .day-editor-attendance{grid-column:1/span 2;grid-row:1/span 2}
  .day-editor-grid.attendance-open .day-editor-leave{grid-column:3;grid-row:1}
  .day-editor-grid.attendance-open .day-editor-overtime{grid-column:3;grid-row:2}
}

/* Monthly Note compact editor. */
#note-dialog{width:min(520px,calc(100% - 28px));max-height:calc(100vh - 32px);overflow:hidden}
#note-form{padding:14px 18px 12px;display:grid;gap:7px}
#note-form .dialog-head{margin:-14px -18px 0;padding:10px 18px 8px;background:linear-gradient(135deg,#edf6f1 0%,#fffdf8 72%);border-bottom:1px solid #e3e7df}
#note-emp-label{margin:0;font-size:12px;line-height:1.35}
#note-form label{gap:4px}
#note-input{min-height:64px;max-height:144px;padding:9px 11px;line-height:1.4;resize:none;overflow-y:hidden}
#note-form .hint{margin:-1px 0 0;line-height:1.25}
.note-dialog-actions{justify-content:space-between;gap:10px;margin-top:2px}
.note-dialog-actions-main{display:flex;gap:8px;margin-left:auto}
@media (pointer:fine) and (min-width:721px){
  #note-dialog .dialog-head .icon-button{width:36px;height:36px;min-width:36px;min-height:36px}
  #note-form .note-dialog-actions button{min-height:36px;padding:5px 12px;line-height:1.2}
}
@media(max-width:620px){
  #note-dialog{width:calc(100% - 20px);max-height:calc(100vh - 20px)}
  #note-form{padding:17px 16px 15px;gap:10px}
  #note-form .dialog-head{margin:-17px -16px 0;padding:14px 16px 12px}
  #note-input{min-height:78px;max-height:180px}
  .note-dialog-actions{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center}
  .note-dialog-actions-main{margin-left:0}
  #note-form .note-dialog-actions button{min-height:44px}
}
.manual-status{display:grid;gap:3px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#f8f8f3}.manual-status small{color:var(--muted)}.manual-recovery{display:grid;gap:12px;padding:12px;border:1px solid #e8d29a;border-radius:12px;background:#fff9e9}.manual-recovery-head{display:grid;gap:3px}.manual-recovery-head strong{color:#8a5b12}.manual-recovery-head span{font-size:12px;color:var(--muted)}