@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap');

:root{--ink:#152b2a;--muted:#5d6f6b;--paper:#f3f1e8;--panel:#fffdf8;--line:#dcded5;--green:#176c5b;--green-dark:#0f493f;--mint:#dcebe4;--coral:#d7654b;--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:'IBM Plex Sans Thai',sans-serif}button,input,select,textarea{font:inherit}button{cursor:pointer}.hidden{display:none!important}.muted,.hint{color:var(--muted)}
: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 Manrope,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)}
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 Manrope,sans-serif;margin-top:8px}.stat-note{font-size:11px;margin-top:8px;color:var(--green)}
.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}
.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}}