/* TLH interface system: one work surface, explicit actions, readable state. */
:root{--bg:#F3F5F8;--surface:#FFF;--surface-2:#EFF2F6;--surface-inset:#F8FAFC;--text:#202632;--text-2:#606B7C;--text-3:#758094;--border:#E5EAF1;--border-strong:#CFD7E3;--sidebar-w:260px;--topbar-h:72px;--radius-sm:10px;--radius-md:16px;--radius-lg:20px}
html{scrollbar-gutter:stable}
html[data-navigating=true]::before{content:'';position:fixed;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,#D01B22,transparent);z-index:99999;animation:route-progress 1.2s ease-in-out infinite}
@keyframes route-progress{0%{transform:translateX(-70%)}100%{transform:translateX(70%)}}
@media(prefers-reduced-motion:reduce){html[data-navigating=true]::before{animation:none;background:#D01B22}}
body{font-weight:400;background:var(--bg)}
body :is(h1,h2,h3){font-weight:500;letter-spacing:-.3px}
body .page{max-width:1600px;width:100%;margin:0 auto;padding:32px 36px 60px}
body .page-head{margin-bottom:28px;gap:20px;align-items:center}
body .page-head h1{font-size:30px;font-weight:500;letter-spacing:-.8px;line-height:1.45}
body .page-head .sub{font-size:12px;color:var(--text-2);margin-top:6px;line-height:1.8}
body .head-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
body .sidebar{inset:12px auto 12px 12px;width:calc(var(--sidebar-w) - 24px);border-radius:20px;background:#1B202B;border:1px solid #2A303D;box-shadow:0 8px 28px #1B202B12}
body .sidebar-brand{padding:24px 16px;gap:10px}
body .sidebar-brand .brand-logo{width:40px;height:40px;border-radius:11px}
body .brand-name{font-size:12px;line-height:1.6}
body .sidebar .brand-sub{font-size:9px;color:#AEB8C9}
body .sidebar-nav{padding:0 12px 16px;scrollbar-width:thin;scrollbar-color:#414B5F transparent}
body .sidebar .nav-group-label{font-size:9px;letter-spacing:.5px;color:#97A4BA;padding:18px 12px 8px}
body .sidebar .nav-item{min-height:44px;padding:10px 12px;gap:10px;font-size:12px;border-radius:10px;margin:3px 0;color:#C5CEDE}
body .sidebar .nav-item svg{width:17px;height:17px}
body .sidebar .nav-item:hover{background:#2C3443;color:#FFF}
body .sidebar .nav-item.active{background:#D01B22;box-shadow:0 4px 10px #0002;color:#FFF}
body .sidebar .nav-item.active>.ic{color:#FFF}
body .sidebar-foot{padding:12px;margin:10px;border-radius:12px;background:#262D3A;border-color:#364052}
body .side-user .name{font-size:11px}
body .side-user .role{font-size:9px}
body .topbar{background:#FFFFFFE8;backdrop-filter:blur(14px);padding-inline:36px;border-bottom:1px solid var(--border);gap:12px}
body .topbar-title{font-size:12px;gap:10px}
body .workspace-label{font-size:9px;background:#F6F8FB;border-radius:7px;padding:5px 8px}
body .workspace-divider{font-size:16px;color:#C2CBDA}
body .avatar-btn{border-color:var(--border);padding:3px}
body .topbar-search[hidden]{display:none!important}
.workspace-jump{display:flex;align-items:center;gap:9px;min-height:38px;padding:7px 12px;border:1px solid var(--border);border-radius:10px;background:#FFF;color:var(--text-2);font:inherit;font-size:11px;cursor:pointer;white-space:nowrap}
.workspace-jump:hover{background:var(--surface-inset);border-color:var(--border-strong)}
.workspace-jump kbd{padding:1px 5px;border:1px solid var(--border);border-radius:4px;font:inherit;font-size:9px;color:var(--text-3);margin-left:12px}
.workspace-menu-search{margin-bottom:14px}
.workspace-menu-search .input{width:100%}
.workspace-menu-list{display:grid;gap:4px;max-height:48dvh;overflow:auto;overscroll-behavior:contain}
.workspace-menu-list a{display:flex;align-items:center;gap:12px;min-height:48px;padding:10px 12px;border-radius:10px;font-size:13px;color:var(--text)}
.workspace-menu-list a>svg:first-child{color:var(--red-600);flex:none}
.workspace-menu-list a>svg:last-child{margin-left:auto;color:var(--text-3)}
.workspace-menu-list a:hover,.workspace-menu-list a:focus-visible{background:var(--red-50);outline:0}
.workspace-menu-list a[aria-current=page]{background:var(--surface-2)}
.workspace-menu-list [hidden]{display:none}
body .btn{min-height:44px;border-radius:10px;font-size:12px;font-weight:500;padding:10px 15px;gap:8px}
body .btn-primary{background:#D01B22;border-color:#D01B22;color:#FFF;box-shadow:0 3px 7px #D01B2215}
body .btn-primary:hover:not(:disabled){background:#B61520;border-color:#B61520}
body .btn-outline{border-color:var(--border-strong);background:#FFF;color:#4A5669}
body .btn-outline:hover:not(:disabled){background:#F5F7FA;border-color:#AEBBD0}
body .btn-soft{background:#FFF0F1;border-color:#FFE0E3;color:#BA1720}
body .btn-sm{min-height:38px;font-size:11px;padding:8px 12px}
body .btn-icon,body .icon-btn{width:40px;height:40px;border-radius:10px}
body :is(.input,.select,.textarea){border:1px solid #DCE3ED;border-radius:10px;min-height:46px;background:#FFF;font-size:13px;color:var(--text);padding:11px 13px}
body :is(.input,.select,.textarea):focus{outline:none;border-color:#D01B22;box-shadow:0 0 0 3px #D01B2210}
body .field :is(label,span:first-child){font-size:12px;font-weight:400;color:var(--text-2)}
body .search-wrap{border:1px solid var(--border-strong);border-radius:10px;background:#FFF;min-height:44px}
body .search-wrap .input{border:0;box-shadow:none;background:transparent}
body .select-menu-trigger{border-color:#DCE3ED;border-radius:10px;min-height:46px;font-size:13px;padding:11px 13px}
body .select-menu-popup{border-color:#DCE3ED;border-radius:14px;box-shadow:0 12px 40px #17212B20,0 2px 5px #17212B06}
body .select-menu-option{font-size:13px}
body .select-menu-option[aria-selected=true]{background:#FFF0F1;color:#B61520}
body :is(.card,.hr-row,.labor-site,.entity-card,.user-card,.attendance-card){border:1px solid var(--border);border-radius:16px;box-shadow:0 2px 3px #23314A02,0 6px 18px #23314A03}
body .card-pad{padding:24px}
body :is(.stat-card,.hr-dash-metric){padding:22px;border-radius:16px;min-width:0}
body .stat-ico{width:40px;height:40px;border-radius:12px;background:#FFF1F3;color:var(--red-600)}
body .stat-num{font-size:32px;line-height:1.3;font-weight:500;letter-spacing:-1px}
body .stat-label{font-size:11px;color:var(--text-2)}
body .filter-bar,body .labor-filters,body .user-toolbar,body .dx-datebar{gap:12px;padding:16px!important;background:#FFF;border:1px solid var(--border);border-radius:14px;margin-bottom:16px}
body .user-toolbar .search-wrap{max-width:none!important;flex:1;min-width:180px}
body .user-toolbar>.select-menu{flex:0 1 220px;max-width:100%}
body .tbl th{padding:13px 18px;background:#F7F9FC;color:#737F92;font-size:11px;font-weight:400;white-space:nowrap;border-color:var(--border)}
body .tbl td{padding:16px 18px;font-size:12px;border-color:#EDF0F5;vertical-align:middle}
body .tbl tbody tr:hover{background:#FAFBFD}
body .cell-sub{font-size:10px;color:#7C8799;margin-top:3px}
body .badge,body .hr-status{border-radius:7px;font-size:10px;line-height:1.7;font-weight:400;padding:4px 8px}
body .section-title h2,body .labor-section-head h2{font-size:16px;font-weight:500}
body .data-tabs{display:flex;flex-wrap:nowrap;overflow:auto;max-width:100%;padding:4px;border-radius:11px;background:#E9EDF3;border:0;gap:3px;scrollbar-width:none}
body .data-tabs .chip{flex:none;min-height:38px;padding:8px 13px;border-radius:8px;font-size:12px;white-space:nowrap}
body .data-tabs .chip.active{background:#FFF;color:#B61520;box-shadow:0 1px 4px #2631450D}
body .view-toggle{padding:3px;border-radius:9px;background:#F0F3F7;border:1px solid var(--border)}
body .view-toggle button{min-height:34px;border-radius:6px;padding:7px 10px;font-size:10px;white-space:nowrap}
body .view-toggle button.active{background:#FFF;color:#B61520;box-shadow:0 1px 4px #2631450C}
body .dropdown-menu{padding:6px;border:1px solid var(--border);border-radius:14px;box-shadow:0 10px 36px #17212B1A}
body .dropdown-head{padding:12px;border-bottom:1px solid var(--border);margin-bottom:4px}
body .dropdown-item{font-size:12px;padding:11px 12px;min-height:44px;border-radius:9px}
body .modal-overlay{background:#111B2C70;backdrop-filter:blur(5px);padding:24px}
body .modal{border-radius:20px;box-shadow:0 24px 90px #111B2C40;border:1px solid #FFFFFF80;max-width:620px;max-height:calc(100dvh - 48px)}
body .modal-head{padding:22px 24px;border-color:var(--border);background:#FFF}
body .modal-head h3{font-size:16px;font-weight:500}
body .modal-body{padding:24px}
body .modal-foot{padding:16px 24px;background:#F9FAFC;border-color:var(--border);gap:8px;flex-wrap:wrap}
body.modal-open{overflow:hidden}
body .hr-row{padding:22px}
body .hr-row h3{font-size:15px;font-weight:500}
body .hr-row p{font-size:12px;line-height:1.8}
body .hr-row .row-actions{padding-top:12px;border-top:1px solid #F0F2F6;margin-top:16px}
body .hr-toolbar h2{font-size:16px}
body .hr-toolbar .chip{min-height:38px;border-radius:8px;font-size:11px}
body .hr-attachments{border-radius:12px;background:#FAFBFD}
body .hr-attachments>h4{font-size:12px;font-weight:500}
body .hr-details{gap:16px}
body .hr-details>div:has(>strong){border:1px solid var(--border);border-radius:12px;padding:16px;background:#FAFBFD}
body .hr-dash-metric.is-primary{background:linear-gradient(130deg,#D01B22,#B11420);border-color:#C41A25}
body .hr-dash-metric strong{font-size:32px;font-weight:500}
body .hr-dash-services{gap:10px}
body .hr-dash-services>a{border-radius:12px;padding:16px 12px}
body .hr-dash-panel-head{padding:20px 22px}
body .hr-dash-queue-row{padding:18px 22px}
body .hr-empty,body .center-empty{font-size:13px;color:var(--text-2);padding:40px 24px;line-height:1.8}
body .col{border-radius:16px;background:#EBEFF5;border:1px solid #E3E8F0}
body .col-head{padding:16px}
body .k-card{border-radius:12px;border-color:var(--border);box-shadow:0 2px 5px #17212B05}
body .labor-stats{border:1px solid var(--border);border-radius:16px;background:#FFF}
body .labor-stat{padding:22px}
body .labor-site-head{gap:16px}
body .labor-site h3{font-size:15px}
body .labor-site-price{font-size:26px;font-weight:500}
body .entity-card,body .user-card{padding:22px}
body .settings-grid{gap:20px}
body .settings-category-mobile{margin-bottom:20px}
body.employee-ui{background:#F4F6FA;color:var(--text)}
body .user-topbar,body.employee-home .user-topbar{background:#FFFFFFEB;backdrop-filter:blur(12px);border-bottom:1px solid var(--border);padding:14px max(24px,calc((100vw - 1152px)/2))}
body .company-brand{font-size:17px}
body .company-brand small{font-size:8px;letter-spacing:1px}
body .company-wrap{max-width:1200px;padding:32px 24px 144px}
body.employee-home .company-wrap{max-width:1152px;padding:32px 24px 144px}
body .employee-greeting h1{font-size:29px;font-weight:500;letter-spacing:-.7px}
body .employee-greeting small{font-size:12px}
body .employee-avatar{border-radius:15px;background:#FFE4E8;color:#AF1724;width:48px;height:48px}
body .employee-avatar>.avatar{width:100%;height:100%;border:0;border-radius:12px;object-fit:cover;font-size:15px;box-shadow:none}
body .company-brand~a[aria-label="บัญชีของฉัน"] .avatar{width:32px;height:32px;object-fit:cover}
body.employee-ui .company-nav .avatar{width:25px;height:25px;border:0;font-size:10px;box-shadow:none;object-fit:cover}
body .profile-avatar .profile-photo{width:86px;height:86px;border-radius:24px;font-size:26px;object-fit:cover}
.profile-header-avatar{display:inline-flex;align-items:center}
body .employee-search{border-radius:12px;min-height:48px;box-shadow:none}
body .employee-welcome-card{min-height:184px;border-radius:20px;padding:26px;background:linear-gradient(125deg,#D01B22,#B11420);box-shadow:0 10px 24px #B1142017}
body .employee-welcome-card h2{font-size:28px;line-height:1.45;letter-spacing:-.7px}
body .employee-service-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
body .employee-service{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;text-align:left;gap:14px;padding:22px 18px;min-height:94px;border-radius:14px;font-size:13px;font-weight:400;background:#FFF;border:1px solid var(--border)}
body .employee-service::after{content:'↗';margin-left:auto;color:#919CAE;font-size:17px}
body button.employee-service{font-family:inherit;cursor:pointer;width:100%}
body .employee-service-label{min-width:0}
body .employee-service-label b{display:block;font-size:13px;font-weight:400}
body .employee-service-label small{display:block;font-size:10px;line-height:1.7;color:var(--text-3);margin-top:4px}
body .employee-service-icon,body .employee-service-icon:is(.blue,.mint,.orange,.violet){width:46px;height:46px;border-radius:13px;background:#FFF0F2;color:#C61925;flex:none}
body .employee-service:hover{border-color:#F0A6AE;background:#FFFCFC;box-shadow:0 6px 14px #24324C06}
body .employee-section-head h2{font-size:16px;font-weight:500}
body .employee-request{padding:20px;border-radius:14px;box-shadow:0 2px 6px #23314A02}
body .employee-request b{font-size:14px;font-weight:500}
body .employee-live-requests{gap:10px}
body .employee-profile-strip{margin-top:20px;border-color:var(--border);padding:16px}
body .employee-install-card{border-color:var(--border);padding:16px}
body.employee-ui .company-nav{width:min(360px,calc(100% - 32px));padding:7px 10px;background:#B41520;box-shadow:0 8px 26px #92152029}
body.employee-ui .company-nav :is(a,button){height:48px;color:#FFFFFFCF}
body.employee-ui .company-nav :is(a,button).active{color:#B41520}
body .clock-card{padding:28px;border:1px solid var(--border);border-radius:20px;box-shadow:0 5px 16px #23314A04}
body .clock-time{font-size:54px;font-weight:500;letter-spacing:-1.5px}
body .work-context{border-radius:16px;border-color:var(--border)}
body .work-day-summary>div{border-radius:12px;background:#F5F7FB;padding:16px}
body .btn-checkin{border-radius:12px;min-height:54px;font-size:15px}
body .site-open{border-radius:12px;min-height:58px;background:#FFF;border-color:var(--border-strong)}
body .profile-head{border-radius:20px;padding:28px;background:#FFF;border:1px solid var(--border)}
body .profile-name{font-size:27px;font-weight:500}
body .profile-settings{gap:20px}
@media(min-width:1024px){body .hr-list{gap:12px}body .employee-hero{column-gap:36px}body .hr-dash-grid{gap:20px}}
@media(max-width:1200px){body .page{padding-inline:24px}body .topbar{padding-inline:24px}.workspace-jump kbd{display:none}body .topbar-search{max-width:230px}}
@media(max-width:992px){body .sidebar{inset:0 auto 0 0;width:260px;border-radius:0 20px 20px 0;transform:translateX(-100%)}body .sidebar.open{transform:none}.workspace-jump{padding:8px 10px}.workspace-jump>span{display:none}body .page{padding:28px 24px 100px}}
@media(max-width:768px){body .topbar{padding-inline:14px;gap:8px}body .topbar-title{font-size:11px;gap:7px}.workspace-jump{border:0;background:transparent;padding:8px;min-width:40px}body .workspace-label{font-size:8px;padding:4px 6px}body .workspace-divider{display:none}body .page{padding:24px 16px 124px}body .page-head{align-items:flex-start;gap:18px;flex-wrap:wrap;margin-bottom:22px}body .page-head h1{font-size:25px}body .page-head .sub{font-size:12px}body .head-actions{width:100%;gap:8px}body .head-actions>.btn{flex:1;justify-content:center;min-width:120px}body .btn-sm{min-height:42px}body :is(.input,.select,.textarea,.select-menu-trigger,.select-menu-search){font-size:16px}body .select-menu-option{font-size:14px;min-height:48px}body .filter-bar,body .labor-filters,body .user-toolbar,body .dx-datebar{padding:14px!important;gap:10px;border-radius:12px}body .user-toolbar>.select-menu{flex:1 1 100%}body .user-toolbar .search-wrap{min-width:0;flex:1 1 100%}body .data-tabs{width:100%;margin-bottom:18px}body .data-tabs .chip{min-height:42px;font-size:11px}body .bottom-nav{left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom));border:1px solid var(--border);border-radius:18px;padding:6px;background:#FFFFFFF5;box-shadow:0 8px 28px #17212B14}body .bnav-item{min-height:48px;border-radius:12px;font-size:9px;gap:4px}body .bnav-item.active{background:#FFF0F2;color:#C31924}body .modal-overlay{padding:12px}body .modal{border-radius:18px;max-height:calc(100dvh - 24px)}body .modal-head{padding:18px 20px}body .modal-body{padding:20px}body .modal-foot{padding:14px 20px}body .hr-row,body .entity-card,body .user-card{padding:18px}body .hr-row h3{font-size:14px}body .hr-row .row-actions>.btn{min-height:42px}body .hr-dash-metric{padding:17px}body .hr-dash-metric strong{font-size:26px}body .hr-dash-panel-head,body .hr-dash-queue-row{padding:18px}body .hr-dash-metrics{gap:10px}body .company-wrap,body.employee-home .company-wrap{padding:24px 20px 140px}body .user-topbar,body.employee-home .user-topbar{padding:14px 20px}body .employee-greeting h1{font-size:25px}body .employee-welcome-card{min-height:180px;padding:24px}body .employee-welcome-card h2{font-size:26px}body .employee-service-grid{gap:10px}body .employee-service{flex-direction:column;text-align:center;justify-content:center;gap:10px;padding:18px 4px;min-height:108px;font-size:11px}body .employee-service::after{display:none}body .employee-service-icon,body .employee-service-icon:is(.blue,.mint,.orange,.violet){width:44px;height:44px;border-radius:12px}body .employee-request{padding:18px}body .employee-request b{font-size:13px}body .clock-card{padding:22px}body .clock-time{font-size:48px}body .profile-head{padding:24px}body .profile-name{font-size:24px}}
@media(max-width:768px){body .employee-service-label b{font-size:11px}body .employee-service-label small{font-size:9px;margin-top:2px}}
@media(max-width:360px){body .topbar-title>.workspace-label{display:none}body .topbar-title{font-size:11px}body .topbar{gap:4px}body .page-head h1{font-size:23px}body .company-wrap,body.employee-home .company-wrap{padding-inline:16px}body .employee-service{font-size:10px}body .employee-greeting h1{font-size:22px}body .hr-dash-metric strong{font-size:23px}}
@media(prefers-reduced-motion:no-preference){body :is(.employee-service,.workspace-jump,.nav-item,.btn){transition:background .15s,border-color .15s,box-shadow .15s}}