#sawa-root{--ink:#1f2c38;--muted:#718096;--border:#e3e8ee;--accent:#17654a;color:var(--ink);font-family:system-ui,-apple-system,"Noto Sans Thai",sans-serif}#sawa-root *{box-sizing:border-box}#sawa-root .sawa{max-width:980px;margin:20px auto 65px;padding:0 14px}#sawa-root .sawa-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}#sawa-root .sawa-top strong{font-size:23px;display:block;letter-spacing:-.5px}#sawa-root .sawa-top small{color:var(--muted)}#sawa-root .sawa-link{font-size:13px;color:var(--ink)}#sawa-root .sawa-card{background:white;border:1px solid var(--border);box-shadow:0 8px 24px #18212b08;border-radius:17px;padding:22px;margin-bottom:15px}#sawa-root .sawa-card h2{font-size:22px;margin:0 0 9px}#sawa-root .sawa-card h3{font-size:17px;margin:0 0 16px}#sawa-root .sawa-card p{color:#657587}#sawa-root .sawa-greeting p{margin:3px 0}#sawa-root .sawa-actions{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-bottom:16px}#sawa-root button{cursor:pointer}#sawa-root .sawa-main{min-height:164px;border:0;border-radius:18px;background:#d9f2e6;color:#17593f;font-size:24px;font-weight:700;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}#sawa-root .sawa-main span{font-size:40px}#sawa-root .sawa-main.alt{background:#e7ecf7;color:#2e4676}#sawa-root .sawa-btn{display:inline-block;border:0;border-radius:10px;padding:11px 19px;background:var(--accent);color:white;text-decoration:none;font-weight:600;margin:5px 5px 5px 0}#sawa-root .sawa-btn.secondary{background:#edf1f5;color:#283c4c}#sawa-root .sawa-btn:disabled{opacity:.5}#sawa-root label{display:block;font-size:13px;font-weight:600;margin:10px 0}#sawa-root input:not([type=checkbox]),#sawa-root select,#sawa-root textarea{display:block;width:100%;border:1px solid #cbd5df;background:#fff;padding:11px 12px;border-radius:9px;color:var(--ink);margin-top:5px;font:inherit}#sawa-root .sawa-stack{display:grid;gap:9px}#sawa-root .sawa-line{display:flex;justify-content:space-between;gap:15px;padding:9px 0;border-bottom:1px solid var(--border)}#sawa-root .sawa-line span{color:var(--muted);font-size:13px}#sawa-root .sawa-muted{font-size:12px}#sawa-root .sawa-nav{display:flex;overflow:auto;gap:6px;margin-bottom:16px}#sawa-root .sawa-nav button{white-space:nowrap;padding:10px 14px;border-radius:10px;background:#f0f3f7;border:0;font-size:13px;color:#405365}#sawa-root .sawa-nav button.selected{background:var(--accent);color:white}#sawa-root .sawa-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}#sawa-root .sawa-metrics div{background:#f3f7f7;border-radius:12px;padding:16px}#sawa-root .sawa-metrics small{display:block;color:#667986}#sawa-root .sawa-metrics strong{font-size:30px}#sawa-root .sawa-table{overflow:auto;margin-top:15px}#sawa-root table{width:100%;border-collapse:collapse;font-size:13px}#sawa-root td,#sawa-root th{padding:10px;border-bottom:1px solid var(--border);text-align:left}#sawa-root td button{border:1px solid var(--border);background:white;border-radius:7px;padding:7px}#sawa-root .sawa-subcard{padding:17px;border:1px solid #d2dfd8;border-radius:14px;margin-top:15px}#sawa-root .sawa-fields{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}#sawa-root .sawa-wrap{display:flex;gap:15px;flex-wrap:wrap}#sawa-root .sawa-check{display:inline-flex;align-items:center;gap:5px}#sawa-root .sawa-alert{padding:12px;margin:10px 0;border-radius:9px}#sawa-root .sawa-ok{background:#dcf6e7;color:#175b3d}#sawa-root .sawa-bad{background:#ffeded;color:#9a2c2c}#sawa-root .sawa-center{text-align:center;max-width:420px;margin:60px auto}#sawa-root .sawa-error{color:#a52222}@media(max-width:600px){#sawa-root .sawa-main{min-height:145px;font-size:20px}#sawa-root .sawa-metrics{grid-template-columns:repeat(2,1fr)}#sawa-root .sawa-fields{grid-template-columns:1fr}#sawa-root .sawa-card{padding:16px}}

#sawa-root .sawa{max-width:1200px}#sawa-root .sawa-adminshell{display:grid;grid-template-columns:235px minmax(0,1fr);gap:18px}#sawa-root .sawa-side{background:#123a2c;color:white;border-radius:16px;padding:17px;min-height:560px;display:flex;flex-direction:column;gap:5px}#sawa-root .sawa-sidehead{font-size:18px;font-weight:800;margin:4px 0 19px}#sawa-root .sawa-side button{display:block;width:100%;text-align:left;border:0;border-radius:10px;padding:13px;color:#e5f5ed;background:transparent}#sawa-root .sawa-side button.selected{background:#285d49;color:white}#sawa-root .sawa-sidefoot{margin-top:auto;color:#c6dfd1;font-size:12px;padding:15px 3px}#sawa-root .sawa-toolbar{display:flex;align-items:center;gap:14px;margin:3px 0 15px}#sawa-root #sawa-hamburger{border:1px solid #d3dbdf;background:white;padding:7px 13px;border-radius:9px;font-size:21px}#sawa-root .sawa-cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;max-width:680px}#sawa-root .sawa-cal-grid b{text-align:center;color:#697986;padding:8px 0;font-size:12px}#sawa-root .sawa-cal-grid button{border:1px solid #d9e4de;background:#f4f7f6;border-radius:9px;min-height:53px;font-size:16px}#sawa-root .sawa-cal-grid button.on{background:#17654a;color:white;border-color:#17654a}#sawa-root .sawa-adminmain{min-width:0}@media(max-width:740px){#sawa-root .sawa-adminshell{display:block}#sawa-root .sawa-side{display:none;min-height:0;margin-bottom:12px}#sawa-root .sawa-side.open{display:flex}#sawa-root .sawa-cal-grid button{min-height:40px}}
/* V1.4: camera-first employee experience + unified HR panel */
#sawa-root .sawa-camera-card{padding:22px}
#sawa-root .sawa-camera-stage{position:relative;overflow:hidden;background:#111b22;border-radius:18px;max-width:580px;margin:14px auto;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center}
#sawa-root .sawa-camera-stage video,#sawa-root .sawa-camera-stage img{width:100%;height:100%;object-fit:cover;display:block}
#sawa-root .sawa-camera-stage video{transform:scaleX(-1)}
#sawa-root .sawa-camera-stage [hidden]{display:none!important}
#sawa-root .sawa-camera-actions{display:flex;flex-wrap:wrap;gap:7px;justify-content:center}
#sawa-root .sawa-camera-actions [hidden]{display:none!important}
#sawa-root .sawa-section-title{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
#sawa-root .sawa-section-title h3{margin:0}
#sawa-root .sawa-evidence{max-width:380px;width:100%;display:block;margin:12px auto;border-radius:12px}
#sawa-root .sawa-metrics{margin:18px 0}
#sawa-root #sawa-photo-view{margin-top:20px}
#sawa-root .sawa-table td{vertical-align:top}
#sawa-root .sawa-camera-card>p{color:#55687b}
#sawa-root .sawa-main:focus-visible,#sawa-root button:focus-visible{outline:3px solid #42a488;outline-offset:2px}
#sawa-root #sawa-cal-grid{margin:18px 0}
@media(max-width:680px){#sawa-root .sawa-actions{grid-template-columns:1fr 1fr;gap:8px}#sawa-root .sawa-main{font-size:18px;min-height:130px}#sawa-root .sawa-camera-stage{aspect-ratio:3/4}#sawa-root .sawa-table table{min-width:670px}#sawa-root .sawa-card{padding:16px}}

/* V1.4.1: quiet, responsive HR workspace; all rules scoped to this plugin. */
body.sawa-standalone{background:#f7f9fb;margin:0}
#sawa-root{--ink:#1b2935;--muted:#6b7b87;--border:#e3e9ee;--accent:#176a50;--soft:#f6f8fa;letter-spacing:0}
#sawa-root .sawa{max-width:1320px;margin:0 auto;padding:25px 24px 70px}
#sawa-root .sawa-top{padding:10px 3px 23px;border-bottom:1px solid #e8edf0;margin-bottom:24px}
#sawa-root .sawa-top strong{font-size:23px;letter-spacing:-.7px;font-weight:750}
#sawa-root .sawa-top small{font-size:12px;display:block;margin-top:2px}
#sawa-root .sawa-card{border-radius:19px;border-color:#e3e9ed;box-shadow:0 5px 24px rgba(26,48,65,.035)}
#sawa-root .sawa-side{background:#183b33;border:1px solid #214b42;border-radius:19px;padding:20px 12px;gap:5px;min-height:600px}
#sawa-root .sawa-sidehead{font-size:16px;font-weight:700;padding:6px 10px 15px;margin:0 0 9px;border-bottom:1px solid rgba(255,255,255,.13)}
#sawa-root .sawa-side button{font-size:14px;font-weight:550;line-height:1.45;border-radius:11px;padding:12px 14px}
#sawa-root .sawa-side button.selected{background:#316a56}
#sawa-root .sawa-sidefoot{border-top:1px solid rgba(255,255,255,.15);padding:15px 10px 0;font-size:11px;letter-spacing:.3px}
#sawa-root .sawa-adminshell{grid-template-columns:230px minmax(0,1fr);gap:20px}
#sawa-root .sawa-adminmain .sawa-card{padding:27px 28px;min-height:550px}
#sawa-root .sawa-toolbar{margin:2px 0 17px;padding-left:2px}
#sawa-root .sawa-toolbar strong{font-size:16px;color:#344958}
#sawa-root .sawa-date-caption{color:var(--muted);font-size:13px;font-weight:450;margin-left:10px}
#sawa-root .sawa-metrics div{background:#f4f7f7;padding:20px;border:1px solid #eaf0ee;border-radius:15px}
#sawa-root .sawa-metrics strong{display:block;font-size:32px;line-height:1.5;color:#1e4b3c}
#sawa-root button,#sawa-root input,#sawa-root select{transition:border-color .16s ease,background-color .16s ease,box-shadow .16s ease}
#sawa-root .sawa-btn{border-radius:10px;font-size:13px;font-weight:650;padding:11px 17px;margin:0;white-space:nowrap;min-height:42px}
#sawa-root .sawa-btn:hover:not(:disabled){filter:brightness(.96)}
#sawa-root .sawa-btn.secondary{background:#edf2f4;color:#344b59}
#sawa-root .sawa-people-heading{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;margin-bottom:23px}
#sawa-root .sawa-people-heading h2{font-size:22px;letter-spacing:-.6px;font-weight:750;margin:0 0 5px;color:#22313c}
#sawa-root .sawa-people-heading p{margin:0;font-size:13px;color:#71828e}
#sawa-root .sawa-heading-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
#sawa-root .sawa-list-toolbar{display:flex;align-items:center;justify-content:space-between;margin:0 0 12px}
#sawa-root .sawa-search{display:flex;align-items:center;gap:9px;min-width:200px;width:100%;max-width:390px;border:1px solid #d9e2e7;border-radius:11px;background:#fff;padding:0 12px;margin:0;color:#7b8c99;box-shadow:0 1px 2px #0f1d2410}
#sawa-root .sawa-search:focus-within{border-color:#208363;box-shadow:0 0 0 3px #1a765125}
#sawa-root .sawa-search span[aria-hidden]{font-size:22px;line-height:1}
#sawa-root input#sawa-employee-search{border:0;box-shadow:none!important;padding:12px 2px;background:transparent;margin:0;font-size:13px;outline:0;width:100%}
#sawa-root .sawa-staff-table{margin:0;border:1px solid #e5ebee;border-radius:14px;overflow-x:auto;overflow-y:hidden}
#sawa-root .sawa-staff-table table{min-width:520px;font-size:13px;border-collapse:collapse}
#sawa-root .sawa-staff-table thead{background:#f8fafb}
#sawa-root .sawa-staff-table th{font-size:12px;font-weight:650;color:#60717d;white-space:nowrap;padding:14px 16px}
#sawa-root .sawa-staff-table td{padding:14px 16px;vertical-align:middle;color:#334653}
#sawa-root .sawa-staff-table tbody tr:hover{background:#f9fbfb}
#sawa-root .sawa-staff-table tbody tr:last-child td{border-bottom:0}
#sawa-root .sawa-staff-table .sawa-col-action{width:86px}
#sawa-root .sawa-person{display:flex;align-items:center;gap:10px;min-width:130px}
#sawa-root .sawa-person strong{font-size:13px;font-weight:650;line-height:1.4;color:#253641}
#sawa-root .sawa-avatar{width:34px;height:34px;display:flex;justify-content:center;align-items:center;flex:0 0 34px;background:#e9f3ed;color:#1f6e54;border-radius:10px;font-weight:750;font-size:14px}
#sawa-root .sawa-username{font-size:12px;color:#697b87;overflow-wrap:anywhere}
#sawa-root .sawa-status{display:inline-flex;gap:7px;align-items:center;border-radius:999px;font-size:11px;font-weight:650;padding:6px 9px;white-space:nowrap}
#sawa-root .sawa-status>span{width:6px;height:6px;border-radius:50%;background:currentColor}
#sawa-root .sawa-status.is-active{background:#e6f6ec;color:#21684b}
#sawa-root .sawa-status.is-inactive{background:#f1f2f4;color:#707982}
#sawa-root .sawa-row-edit{background:white;border:1px solid #d6e0e5;border-radius:9px;color:#405867;font-weight:600;padding:8px 13px;font-size:12px}
#sawa-root .sawa-row-edit:hover{background:#f0f7f3;border-color:#9fcab4}
#sawa-root .sawa-empty{text-align:center;padding:42px 14px;color:#7a8a95!important}
#sawa-root .sawa-sr-only{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
#sawa-root .sawa-modal-backdrop{position:fixed;inset:0;background:rgba(16,31,40,.51);backdrop-filter:blur(3px);display:flex;justify-content:center;align-items:center;padding:20px;z-index:2147483000}
#sawa-root .sawa-modal-panel{width:min(100%,640px);max-height:min(90vh,850px);overflow:hidden;display:flex;flex-direction:column;background:#fff;border:1px solid #e4e9ed;border-radius:22px;box-shadow:0 24px 78px rgba(8,25,33,.24);color:#253843}
#sawa-root .sawa-modal-head{display:flex;align-items:flex-start;justify-content:space-between;padding:25px 27px 17px;gap:20px;border-bottom:1px solid #edf1f3}
#sawa-root .sawa-modal-head h2{font-size:21px;font-weight:750;letter-spacing:-.5px;margin:0 0 3px}
#sawa-root .sawa-modal-head p{margin:0;color:#758590;font-size:12px}
#sawa-root .sawa-close-icon{width:32px;height:32px;border-radius:10px;background:#f2f5f6;border:0;color:#697b86;font-size:24px;line-height:1}
#sawa-root .sawa-modal-form{min-height:0;display:flex;flex-direction:column}
#sawa-root .sawa-form-body{padding:22px 27px;overflow-y:auto;overscroll-behavior:contain}
#sawa-root .sawa-form-group{margin-bottom:19px;padding-bottom:20px;border-bottom:1px solid #edf1f3}
#sawa-root .sawa-form-group:last-of-type{margin-bottom:0;padding-bottom:4px;border-bottom:0}
#sawa-root .sawa-form-group h3{font-size:13px;font-weight:750;color:#415663;letter-spacing:.01em;margin:0 0 12px}
#sawa-root .sawa-form-body .sawa-fields{gap:8px 15px}
#sawa-root .sawa-form-body label:not(.sawa-switch-line):not(.sawa-location-pill){display:block;margin:0 0 10px;font-size:12px;font-weight:650;color:#405461}
#sawa-root .sawa-form-body input:not([type=checkbox]),#sawa-root .sawa-form-body select{height:43px;width:100%;padding:9px 12px;border:1px solid #d7e0e6;border-radius:10px;font-size:13px;margin-top:7px;background:#fff;box-shadow:0 1px 1px #10202006}
#sawa-root .sawa-form-body input[readonly]{background:#f5f7f8;color:#7b8991;cursor:not-allowed}
#sawa-root .sawa-form-body input:focus,#sawa-root .sawa-form-body select:focus{outline:2px solid #236b5050;outline-offset:1px;border-color:#358265}
#sawa-root .sawa-switch-line{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0!important}
#sawa-root .sawa-switch-line strong{display:block;font-size:13px;font-weight:700}
#sawa-root .sawa-switch-line small{font-size:11px;font-weight:400;color:#82919b;display:block;margin-top:3px}
#sawa-root .sawa-switch{display:inline-flex;position:relative;flex:none}
#sawa-root .sawa-switch input{position:absolute;opacity:0;inset:0;width:47px;height:27px;z-index:1;cursor:pointer}
#sawa-root .sawa-switch-track{width:46px;height:27px;display:inline-flex;background:#cbd5da;border-radius:999px;position:relative;transition:background .18s}
#sawa-root .sawa-switch-track:before{content:"";width:21px;height:21px;background:#fff;border-radius:50%;position:absolute;top:3px;left:3px;box-shadow:0 1px 3px #122b2640;transition:transform .18s}
#sawa-root .sawa-switch input:checked+.sawa-switch-track{background:#177152}
#sawa-root .sawa-switch input:checked+.sawa-switch-track:before{transform:translateX(19px)}
#sawa-root .sawa-switch input:focus-visible+.sawa-switch-track{outline:3px solid #17715290;outline-offset:3px}
#sawa-root .sawa-location-choices{display:flex;gap:9px;flex-wrap:wrap}
#sawa-root .sawa-location-pill{display:inline-flex!important;gap:9px;align-items:center;border:1px solid #dbe5e7;background:#f9fbfb;border-radius:11px;padding:11px 14px;min-height:42px;font-size:13px;font-weight:550;margin:0!important;cursor:pointer}
#sawa-root .sawa-location-pill:has(input:checked){background:#eef7f1;border-color:#a3d3b8;color:#185a42}
#sawa-root .sawa-location-pill input{accent-color:#176a50;width:16px;height:16px;margin:0}
#sawa-root .sawa-inline-note{font-size:12px;color:#7d8c97;margin:0}
#sawa-root .sawa-form-error{font-size:12px;background:#fff0ef;border:1px solid #f5cfcb;color:#a3312b;border-radius:10px;padding:10px 12px;margin:5px 0 0}
#sawa-root .sawa-form-error[hidden]{display:none}
#sawa-root .sawa-form-footer{display:flex;gap:9px;justify-content:flex-end;padding:15px 27px 20px;border-top:1px solid #edf1f3;background:#fff}
#sawa-root .sawa-form-footer .sawa-btn{min-width:110px}
@media(max-width:950px){#sawa-root .sawa-adminshell{grid-template-columns:190px minmax(0,1fr);gap:13px}#sawa-root .sawa-adminmain .sawa-card{padding:22px}}
@media(max-width:740px){#sawa-root .sawa{padding:15px 11px 45px}#sawa-root .sawa-adminshell{display:block}#sawa-root .sawa-side{min-height:0}#sawa-root .sawa-adminmain .sawa-card{padding:18px 14px}#sawa-root .sawa-people-heading{align-items:flex-start}#sawa-root .sawa-heading-actions{width:100%;justify-content:flex-start}#sawa-root .sawa-staff-table table{min-width:540px}#sawa-root .sawa-modal-backdrop{align-items:flex-end;padding:0}#sawa-root .sawa-modal-panel{width:100%;max-height:94vh;border-radius:22px 22px 0 0}#sawa-root .sawa-modal-head{padding:20px 20px 15px}#sawa-root .sawa-form-body{padding:18px 20px}#sawa-root .sawa-form-footer{padding:13px 20px 18px}#sawa-root .sawa-form-body .sawa-fields{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){#sawa-root *{scroll-behavior:auto!important;transition:none!important}}

/* Small screens: staff records become full-width cards, with no hidden action column. */
@media(max-width:600px){
 #sawa-root .sawa-staff-table{overflow:visible;border:0;border-radius:0}
 #sawa-root .sawa-staff-table table{display:block;min-width:0;width:100%}
 #sawa-root .sawa-staff-table thead{display:none}
 #sawa-root .sawa-staff-table tbody{display:grid;gap:10px}
 #sawa-root .sawa-staff-table tbody tr{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name status" "username action" "role action";align-items:center;column-gap:10px;row-gap:5px;background:white;border:1px solid #e2e9ed;border-radius:13px;padding:13px 12px}
 #sawa-root .sawa-staff-table tbody tr:hover{background:#fafcfc}
 #sawa-root .sawa-staff-table td{display:block!important;padding:0!important;border:0!important;min-width:0}
 #sawa-root .sawa-staff-table td:nth-child(1){grid-area:name}
 #sawa-root .sawa-staff-table td:nth-child(2){grid-area:username;padding-left:44px!important}
 #sawa-root .sawa-staff-table td:nth-child(3){grid-area:role;padding-left:44px!important;font-size:12px;color:#71828c}
 #sawa-root .sawa-staff-table td:nth-child(4){grid-area:status;justify-self:end}
 #sawa-root .sawa-staff-table td:nth-child(5){grid-area:action;align-self:end;justify-self:end}
 #sawa-root .sawa-staff-table td.sawa-empty{grid-area:1 / 1 / 4 / 3;padding:25px 5px!important}
 #sawa-root .sawa-person{min-width:0}
 #sawa-root .sawa-person strong{font-size:13px}
 #sawa-root .sawa-avatar{width:33px;height:33px;flex-basis:33px}
 #sawa-root .sawa-staff-table .sawa-row-edit{padding:7px 11px}
}

/* V1.4.5: compact date-filtered event history, review actions, responsive navigation. */
@media(min-width:741px){
 #sawa-root .sawa-adminshell.is-collapsed{grid-template-columns:minmax(0,1fr)}
 #sawa-root .sawa-adminshell.is-collapsed .sawa-side{display:none}
}
#sawa-root .sawa-event-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:18px}
#sawa-root .sawa-event-heading h3{margin:0 0 3px;font-size:20px;letter-spacing:-.35px}
#sawa-root .sawa-event-heading p{margin:0}
#sawa-root .sawa-event-total{font-size:12px;font-weight:650;border:1px solid #dce9e1;background:#f3f8f5;color:#34634d;border-radius:999px;padding:7px 12px;white-space:nowrap}
#sawa-root .sawa-event-filters{background:#f8fafb;border:1px solid #e6ecef;border-radius:14px;padding:12px;display:flex;flex-wrap:wrap;align-items:flex-end;gap:9px 11px}
#sawa-root .sawa-event-filters label{margin:0;font-size:11px;flex:1 1 122px;min-width:111px;color:#566c78}
#sawa-root .sawa-event-filters label:nth-of-type(4){min-width:144px;flex-grow:1.5}
#sawa-root .sawa-event-filters label[hidden]{display:none!important}
#sawa-root .sawa-event-filters input,#sawa-root .sawa-event-filters select{margin-top:5px;padding:9px 10px;min-height:42px;font-size:12px;border-radius:9px}
#sawa-root .sawa-event-filters button{min-height:42px;margin:0}
#sawa-root .sawa-event-table{margin-top:18px}
#sawa-root .sawa-event-table table{min-width:725px;font-size:12px}
#sawa-root .sawa-event-table th{white-space:nowrap;font-size:11px;color:#6c7e89;letter-spacing:.01em;font-weight:700}
#sawa-root .sawa-event-table td{padding:13px 9px;vertical-align:middle}
#sawa-root .sawa-event-table td strong{font-size:12px;font-weight:650;color:#233942}
#sawa-root .sawa-event-table .sawa-day-divider th{background:#f2f7f5;color:#235641;font-size:12px;padding:12px 13px;text-align:left;border-bottom:1px solid #dce8e2}
#sawa-root .sawa-event-table .sawa-day-divider span{font-weight:450;color:#678576;padding-left:12px;font-size:11px}
#sawa-root .sawa-event-time{font-variant-numeric:tabular-nums;font-weight:650;color:#334a55;white-space:nowrap}
#sawa-root .sawa-gps-detail{margin-top:3px;max-width:210px;color:#6d7e88;font-size:10px;font-weight:400}
#sawa-root .sawa-gps-detail summary{cursor:pointer;display:inline-flex;font-size:10px;text-decoration:underline;text-underline-offset:2px}
#sawa-root .sawa-gps-detail small{display:block;white-space:normal;line-height:1.6}
#sawa-root .sawa-review-tag{display:inline-flex;align-items:center;gap:4px;padding:5px 9px;border-radius:999px;font-size:11px;font-weight:650;white-space:nowrap}
#sawa-root .sawa-review-approved{background:#e8f5ee;color:#176447}
#sawa-root .sawa-review-pending{background:#fff3d8;color:#966a0b}
#sawa-root .sawa-review-cancelled{background:#eef1f4;color:#647580}
#sawa-root .sawa-event-table .sawa-event-cancelled td{color:#93a0a7;background:#fcfcfc}
#sawa-root .sawa-event-table button.sawa-icon-action,#sawa-root .sawa-event-table button.sawa-review-btn{border:1px solid #d5e5db;background:#fff;color:#1e6449;padding:7px 10px;border-radius:8px;font-size:11px;font-weight:650;white-space:nowrap}
#sawa-root .sawa-event-table button.sawa-review-btn:hover{background:#eff8f2}
#sawa-root .sawa-sync-label{color:#73868a;font-size:11px;white-space:nowrap}
#sawa-root .sawa-event-modal{width:min(100%,520px)}
#sawa-root .sawa-event-modal .sawa-event-location{background:#f4f8f5;border:1px solid #e3ebe5;border-radius:10px;padding:12px;color:#5f736a;margin:0 0 13px;font-size:12px}
#sawa-root .sawa-event-modal .sawa-form-body label{display:block;margin:0 0 14px;font-size:12px;font-weight:700;color:#3c5562}
#sawa-root .sawa-event-modal .sawa-form-body select,#sawa-root .sawa-event-modal .sawa-form-body textarea{margin-top:6px;font-size:13px}
#sawa-root .sawa-btn.sawa-danger{background:#fff1f0;color:#a63831;border:1px solid #f1cac7}
#sawa-root .sawa-review-footer{flex-wrap:wrap;gap:9px}
#sawa-root .sawa-review-footer .sawa-btn{flex:1 1 auto}
@media(max-width:740px){
 #sawa-root .sawa-event-filters{gap:9px}
 #sawa-root .sawa-event-filters label{flex:1 1 calc(50% - 10px)}
 #sawa-root .sawa-event-filters button{width:100%}
 #sawa-root .sawa-event-table{overflow:visible}
 #sawa-root .sawa-event-table table{display:block;min-width:0}
 #sawa-root .sawa-event-table thead{display:none}
 #sawa-root .sawa-event-table tbody{display:grid;gap:10px}
 #sawa-root .sawa-event-table tr.sawa-day-divider{display:block}
 #sawa-root .sawa-event-table tr.sawa-day-divider th{display:block;border-radius:9px}
 #sawa-root .sawa-event-table tr.sawa-event-entry{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;background:#fff;padding:14px;border:1px solid #e1e9ec;border-radius:13px;box-shadow:0 2px 6px #123c2510}
 #sawa-root .sawa-event-table tr.sawa-event-entry td{display:block;padding:0;border:0;min-width:0;overflow-wrap:anywhere}
 #sawa-root .sawa-event-table tr.sawa-event-entry td::before{display:block;content:attr(data-title);color:#86959e;font-weight:550;font-size:10px;margin-bottom:4px}
 #sawa-root .sawa-event-table tr.sawa-event-entry td:nth-child(4){grid-column:1 / -1}
 #sawa-root .sawa-event-table .sawa-gps-detail{max-width:none}
 #sawa-root .sawa-event-table .sawa-event-cancelled td{background:transparent}
 #sawa-root .sawa-event-table tr:not(.sawa-day-divider) td[colspan]{padding:22px}
}

/* V1.4.6: balanced filters and one-calendar date-range picker. */
#sawa-root .sawa-event-filters{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  padding:15px;
  align-items:end;
  overflow:visible;
}
#sawa-root .sawa-event-filters > label,
#sawa-root .sawa-event-date-field{display:block;min-width:0;flex:none;margin:0;font-size:12px;font-weight:650;color:#4e6773}
#sawa-root .sawa-event-date-field > label{display:block;margin:0;font-size:12px;font-weight:650;color:#4e6773}
#sawa-root .sawa-event-filters > label select{
  width:100%;height:46px;min-height:46px;margin-top:7px;
  padding:0 13px;font-size:13px;border:1px solid #cbd9dc;
  background-color:white;border-radius:11px;
}
#sawa-root .sawa-event-filter-action{min-width:0;align-self:end}
#sawa-root .sawa-event-filter-action .sawa-btn{
  margin:0;width:100%;min-height:46px;height:46px;
  border-radius:11px;font-size:13px;
}
#sawa-root .sawa-date-range-wrap{position:relative;margin-top:7px;min-width:0}
#sawa-root .sawa-date-trigger{
  display:flex;align-items:center;gap:9px;width:100%;height:46px;
  padding:0 12px;border:1px solid #cbd9dc;background:#fff;
  border-radius:11px;color:#263f47;text-align:left;font:inherit;
}
#sawa-root .sawa-date-trigger:hover{border-color:#648b7b}
#sawa-root .sawa-date-trigger:focus-visible{outline:3px solid #a5d5c0;outline-offset:2px}
#sawa-root .sawa-date-trigger #sawa-range-text{
  flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:650;
}
#sawa-root .sawa-calendar-icon{font-size:17px;color:#427360}
#sawa-root .sawa-date-chevron{color:#667c84;font-size:18px}
#sawa-root .sawa-date-panel{
  position:absolute;top:calc(100% + 9px);left:0;z-index:700;
  width:min(355px,calc(100vw - 52px));
  padding:14px;background:#fff;border:1px solid #dbe5e8;
  border-radius:16px;box-shadow:0 16px 45px #1d3d4a30;
  color:#28414b;
}
#sawa-root .sawa-date-panel[hidden]{display:none!important}
#sawa-root .sawa-cal-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:1px 0 13px}
#sawa-root .sawa-cal-heading strong{font-size:14px;font-weight:750}
#sawa-root .sawa-cal-arrow{
  border:1px solid #e1e9ec;border-radius:9px;background:#f7faf9;
  color:#315c4d;width:35px;height:33px;font-size:23px;line-height:1;
}
#sawa-root .sawa-cal-arrow:hover{background:#e8f3ef}
#sawa-root .sawa-cal-weekdays,#sawa-root .sawa-cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px}
#sawa-root .sawa-cal-weekdays span{text-align:center;color:#83939a;font-size:11px;font-weight:700;padding-bottom:7px}
#sawa-root .sawa-cal-day{
  border:0;border-radius:9px;background:transparent;min-height:35px;
  padding:0;color:#344d55;font-size:12px;font-weight:550;
}
#sawa-root .sawa-cal-day:hover{background:#e6f3eb}
#sawa-root .sawa-cal-day.is-other{color:#aebcc1}
#sawa-root .sawa-cal-day.is-in-range{background:#e2f1e9;border-radius:4px;color:#1b5b40}
#sawa-root .sawa-cal-day.is-selected{background:#216d51;border-radius:9px;color:#fff;font-weight:750}
#sawa-root .sawa-cal-day.is-today:not(.is-selected){box-shadow:inset 0 0 0 1px #458e70}
#sawa-root .sawa-cal-selection{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:3px 9px;
  padding:11px 2px 10px;margin-top:9px;border-top:1px solid #eaf0ed;
}
#sawa-root .sawa-cal-selection span{font-size:11px;color:#697e87}
#sawa-root .sawa-cal-selection strong{font-size:11px;color:#245a44;font-weight:700}
#sawa-root .sawa-cal-actions{display:flex;align-items:center;justify-content:space-between;gap:7px}
#sawa-root .sawa-cal-link{border:0;background:transparent;padding:6px 4px;font-size:12px;font-weight:650;color:#275f48}
#sawa-root .sawa-cal-actions .sawa-btn{margin:0;padding:10px 12px;font-size:12px;border-radius:9px;white-space:nowrap}
@media(min-width:1200px){
 #sawa-root .sawa-event-filters{grid-template-columns:minmax(235px,1.7fr) minmax(155px,1fr) minmax(140px,1fr) minmax(135px,.8fr)}
}
@media(max-width:500px){
 #sawa-root .sawa-event-filters{padding:12px;gap:11px}
 #sawa-root .sawa-event-date-field,#sawa-root .sawa-event-filter-action{grid-column:1 / -1}
 #sawa-root .sawa-date-panel{width:min(355px,calc(100vw - 70px))}
}

/* The HR history area can be narrow while the browser itself is wide.
   A container query switches to event cards based on ACTUAL available width,
   preventing clipped Photo/Sync/Review columns beside the desktop sidebar. */
#sawa-root .sawa-event-table{container-name:sawa-history;container-type:inline-size}
@container sawa-history (max-width:760px){
 #sawa-root .sawa-event-table table{display:block;min-width:0}
 #sawa-root .sawa-event-table thead{display:none}
 #sawa-root .sawa-event-table tbody{display:grid;gap:10px}
 #sawa-root .sawa-event-table tr.sawa-day-divider{display:block}
 #sawa-root .sawa-event-table tr.sawa-day-divider th{display:block;border-radius:9px}
 #sawa-root .sawa-event-table tr.sawa-event-entry{
   display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;
   background:#fff;padding:14px;border:1px solid #e1e9ec;
   border-radius:13px;box-shadow:0 2px 6px #123c2510;
 }
 #sawa-root .sawa-event-table tr.sawa-event-entry td{display:block;padding:0;border:0;min-width:0;overflow-wrap:anywhere}
 #sawa-root .sawa-event-table tr.sawa-event-entry td::before{
   display:block;content:attr(data-title);color:#86959e;
   font-weight:550;font-size:10px;margin-bottom:4px;
 }
 #sawa-root .sawa-event-table tr.sawa-event-entry td:nth-child(4){grid-column:1 / -1}
 #sawa-root .sawa-event-table .sawa-gps-detail{max-width:none}
 #sawa-root .sawa-event-table .sawa-event-cancelled td{background:transparent}
 #sawa-root .sawa-event-table tr:not(.sawa-day-divider) td[colspan]{padding:22px}
}
/* Four compact fields per row when the HR content panel has room,
   even if the surrounding browser is not very wide. */
@container sawa-history (min-width:500px) and (max-width:760px){
 #sawa-root .sawa-event-table tr.sawa-event-entry{
  grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 11px;
  padding:13px 14px;
 }
 #sawa-root .sawa-event-table tr.sawa-event-entry td:nth-child(4){grid-column:auto}
}
/* Override the legacy small-screen rule that made every filter button 100% wide. */
#sawa-root .sawa-event-filters .sawa-cal-heading .sawa-cal-arrow{
 width:34px;min-width:34px;flex:0 0 34px;
}
#sawa-root .sawa-event-filters .sawa-cal-heading strong{
 flex:1 1 auto;min-width:0;text-align:center;white-space:nowrap;
}
#sawa-root .sawa-event-filters .sawa-cal-actions .sawa-cal-link,
#sawa-root .sawa-event-filters .sawa-cal-actions .sawa-btn{width:auto;flex:0 0 auto;}


/* V1.4.7: one consistent control system across HR and employee screens.
   Draw the SAME chevron for native selects and the single-calendar trigger;
   do not depend on browser-native select arrows or a font glyph. */
#sawa-root {
  --sawa-control-height:46px;
  --sawa-control-radius:11px;
  --sawa-control-stroke:#cbd9dc;
  --sawa-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='m5 7.5 5 5 5-5' stroke='%235c7480' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
#sawa-root select,
#sawa-root .sawa-event-filters > label select,
#sawa-root .sawa-form-body select {
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  box-sizing:border-box;
  display:block;
  min-width:0;
  width:100%;
  height:var(--sawa-control-height);
  min-height:var(--sawa-control-height);
  border-radius:var(--sawa-control-radius);
  border:1px solid var(--sawa-control-stroke);
  background-color:#fff;
  background-image:var(--sawa-chevron);
  background-position:right 15px center;
  background-repeat:no-repeat;
  background-size:18px 18px;
  padding:0 46px 0 14px;
  color:#263e48;
  font-family:inherit;
  font-size:13px;
  font-weight:600;
  line-height:normal;
  text-align:left;
  text-overflow:ellipsis;
}
#sawa-root select::-ms-expand{display:none}
#sawa-root select:focus-visible,
#sawa-root input:not([type=checkbox]):focus-visible,
#sawa-root textarea:focus-visible {
  outline:2px solid #2d8967;
  outline-offset:2px;
  border-color:#2d8967;
}
#sawa-root select:disabled {background-color:#f4f6f7;color:#71838d;cursor:not-allowed}
#sawa-root .sawa-date-trigger {
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  box-sizing:border-box;
  height:var(--sawa-control-height);
  min-height:var(--sawa-control-height);
  border-radius:var(--sawa-control-radius);
  border:1px solid var(--sawa-control-stroke);
  background-color:#fff;
  background-image:var(--sawa-chevron);
  background-position:right 15px center;
  background-repeat:no-repeat;
  background-size:18px 18px;
  padding:0 46px 0 14px;
  font-family:inherit;
  font-size:13px;
  font-weight:600;
  line-height:normal;
  color:#263e48;
}
#sawa-root .sawa-date-trigger #sawa-range-text {font-size:13px;font-weight:600;min-width:0}
#sawa-root .sawa-date-chevron{display:none}
#sawa-root .sawa-calendar-icon{display:inline-flex;align-items:center;justify-content:center;flex:none;width:18px;height:18px;color:#43765e;font-size:0}
#sawa-root .sawa-calendar-icon svg{display:block;width:18px;height:18px;stroke:currentColor}
#sawa-root .sawa-date-trigger:hover,
#sawa-root select:hover:not(:disabled){border-color:#9aafaf}
#sawa-root .sawa-date-trigger:focus-visible{outline:2px solid #2d8967;outline-offset:2px;border-color:#2d8967}
/* Labels, text controls and buttons share the same vertical rhythm. */
#sawa-root .sawa-event-date-field > label,
#sawa-root .sawa-event-filters > label {font-size:12px;font-weight:650;line-height:18px}
#sawa-root .sawa-event-filters{align-items:end;column-gap:12px;row-gap:14px}
#sawa-root .sawa-event-date-field,
#sawa-root .sawa-event-filters > label,
#sawa-root .sawa-event-filter-action{min-width:0}
#sawa-root .sawa-event-filters select,
#sawa-root .sawa-event-filters .sawa-date-trigger,
#sawa-root .sawa-event-filter-action .sawa-btn{margin-top:7px;height:var(--sawa-control-height);min-height:var(--sawa-control-height)}
#sawa-root .sawa-event-filter-action .sawa-btn{margin-top:0}
#sawa-root .sawa-event-filters select {padding-right:46px}
#sawa-root .sawa-form-body input:not([type=checkbox]),
#sawa-root .sawa-form-body select {height:var(--sawa-control-height);min-height:var(--sawa-control-height)}
#sawa-root .sawa-fields > label {min-width:0}
#sawa-root input:not([type=checkbox]):not([type=hidden]):not([type=radio]),
#sawa-root textarea {min-width:0;max-width:100%}
#sawa-root textarea {resize:vertical;line-height:1.5;padding:11px 13px;min-height:92px}
#sawa-root .sawa-btn {display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;line-height:1.35;text-align:center}
#sawa-root .sawa-event-filters .sawa-btn {min-height:var(--sawa-control-height)}
#sawa-root .sawa-form-footer {flex-wrap:wrap;align-items:center}
#sawa-root .sawa-form-footer .sawa-btn {min-height:44px}
#sawa-root .sawa-modal-head {min-width:0}
#sawa-root .sawa-modal-head > div {min-width:0;overflow-wrap:anywhere}
#sawa-root .sawa-modal-form, #sawa-root .sawa-adminmain, #sawa-root .sawa-card {min-width:0}
/* The date-range popover has fixed icon/button alignment without overflowing
   even when selecting a long Thai date on a 320px phone. */
#sawa-root .sawa-date-panel {max-width:calc(100vw - 32px)}
#sawa-root .sawa-cal-heading .sawa-cal-arrow {display:inline-flex;align-items:center;justify-content:center;padding:0;line-height:1}
#sawa-root .sawa-cal-actions {flex-wrap:wrap}
#sawa-root .sawa-cal-actions .sawa-btn {margin-left:auto}
#sawa-root .sawa-cal-grid .sawa-cal-day{display:inline-flex;align-items:center;justify-content:center}
/* History rows and employee lists should never push controls offscreen. */
#sawa-root .sawa-line {align-items:center;min-width:0}
#sawa-root .sawa-line > * {min-width:0;overflow-wrap:anywhere}
#sawa-root .sawa-line span {text-align:right;line-height:1.5}
#sawa-root .sawa-event-table .sawa-icon-action,
#sawa-root .sawa-event-table .sawa-review-btn,
#sawa-root .sawa-row-edit {display:inline-flex;justify-content:center;align-items:center;min-height:36px}
@media(max-width:740px){
  #sawa-root .sawa-line {align-items:flex-start;flex-direction:column;gap:3px}
  #sawa-root .sawa-line span {text-align:left}
  #sawa-root .sawa-form-footer .sawa-btn {flex:1 1 125px}
  #sawa-root .sawa-event-heading h3{font-size:18px}
  #sawa-root .sawa-event-heading .sawa-event-total {align-self:flex-start}
}
@media(max-width:360px){
  #sawa-root .sawa-event-filters {grid-template-columns:1fr}
  #sawa-root .sawa-event-date-field,#sawa-root .sawa-event-filter-action{grid-column:auto}
  #sawa-root .sawa-modal-head {padding:16px 15px}
  #sawa-root .sawa-form-body {padding:16px 15px}
  #sawa-root .sawa-form-footer {padding:12px 15px 16px}
}

/* Final screen audit: work locations and leave approval are consistent with
   staff/review controls, including 320px mobile layouts. */
#sawa-root .sawa-location-list {margin:13px 0 20px}
#sawa-root .sawa-location-item {display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 0;border-bottom:1px solid var(--border)}
#sawa-root .sawa-location-item > div {min-width:0;overflow-wrap:anywhere}
#sawa-root .sawa-location-item strong {display:block;font-size:14px;margin-bottom:4px}
#sawa-root .sawa-location-item small {display:block;color:var(--muted);font-size:12px;line-height:1.5}
#sawa-root .sawa-location-item .sawa-row-edit {flex:none;min-width:62px}
#sawa-root .sawa-location-actions {display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:16px}
#sawa-root .sawa-location-actions .sawa-btn {margin:0}
#sawa-root .sawa-leave-table {margin-top:12px}
#sawa-root .sawa-leave-table table {min-width:650px}
#sawa-root .sawa-leave-table td {vertical-align:middle}
#sawa-root .sawa-leave-table td strong {font-weight:650}
#sawa-root .sawa-leave-actions {display:flex;flex-wrap:wrap;gap:7px;align-items:center}
#sawa-root .sawa-leave-actions .sawa-row-edit {min-height:36px}
#sawa-root .sawa-leave-actions .sawa-leave-reject {color:#a54843;background:#fff8f7;border-color:#ecd5d3}
#sawa-root .sawa-leave-empty td {text-align:center;color:var(--muted);padding:20px 12px}
@media(max-width:740px){
  #sawa-root .sawa-leave-table {overflow:visible}
  #sawa-root .sawa-leave-table table {display:block;width:100%;min-width:0}
  #sawa-root .sawa-leave-table thead {display:none}
  #sawa-root .sawa-leave-table tbody {display:grid;gap:10px}
  #sawa-root .sawa-leave-table tr.sawa-leave-entry {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:14px;border-radius:12px;border:1px solid #e1e9ec;background:#fff}
  #sawa-root .sawa-leave-table tr.sawa-leave-entry td {display:block;border:0;padding:0;min-width:0;overflow-wrap:anywhere}
  #sawa-root .sawa-leave-table tr.sawa-leave-entry td::before {content:attr(data-title);display:block;font-size:11px;color:#788b95;font-weight:600;margin-bottom:5px}
  #sawa-root .sawa-leave-table tr.sawa-leave-entry td:nth-child(4),
  #sawa-root .sawa-leave-table tr.sawa-leave-entry td:nth-child(6) {grid-column:1 / -1}
  #sawa-root .sawa-leave-table tr.sawa-leave-empty {display:block}
  #sawa-root .sawa-leave-table tr.sawa-leave-empty td {display:block}
  #sawa-root .sawa-location-actions .sawa-btn {flex:1 1 138px}
}