:root{
  --niceso:#ed1c24;
  --niceso-dark:#c90f17;
  --navy:#102238;
  --navy-2:#172f4c;
  --ink:#182436;
  --muted:#748297;
  --bg:#f5f7fb;
  --surface:#ffffff;
  --surface-2:#f8fafc;
  --border:#e4e9f1;
  --shadow-sm:0 1px 3px rgba(16,34,56,.06);
  --shadow-md:0 10px 30px rgba(16,34,56,.08);
  --shadow-lg:0 24px 70px rgba(16,34,56,.18);
  --radius:14px;
  --sidebar-w:280px;
  --topbar-h:72px;
}
*{box-sizing:border-box}
html{min-height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;-webkit-font-smoothing:antialiased;line-height:1.5}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit}
.app-shell{min-height:100vh}

/* fallback utility system */
.container,.container-fluid{width:min(100%, 100% - 32px);margin-inline:auto}
.container{max-width:1140px}
.container-fluid{max-width:1700px}
.row{display:flex;flex-wrap:wrap;margin-inline:-8px}
.row>[class*="col"],.row>.col{padding-inline:8px;width:100%}
.col{flex:1 0 0}
.col-6{width:50%}
.col-12{width:100%}
.w-100{width:100%}.w-auto{width:auto}
.h-100{height:100%}
.d-none{display:none!important}.d-flex{display:flex!important}.d-inline-flex{display:inline-flex!important}.d-block{display:block!important}
.flex-grow-1{flex:1 1 auto}.flex-wrap{flex-wrap:wrap}.align-items-center{align-items:center}.align-items-start{align-items:flex-start}.align-items-end{align-items:flex-end}.justify-content-between{justify-content:space-between}.justify-content-center{justify-content:center}.text-center{text-align:center}.text-end{text-align:right}.text-dark{color:#1f2937!important}.small{font-size:.875em}
.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:1rem}
.g-2{gap:.5rem}.g-3{gap:1rem}
.m-auto{margin:auto}.mx-auto{margin-inline:auto}.ms-auto{margin-left:auto}.me-1{margin-right:.25rem}.me-2{margin-right:.5rem}.ms-1{margin-left:.25rem}.my-2{margin-block:.5rem}
.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:1rem}.mt-5{margin-top:3rem}
.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:1rem}.mb-4{margin-bottom:1.5rem}
.pb-3{padding-bottom:1rem}.p-3{padding:1rem}.py-4{padding-top:1.5rem;padding-bottom:1.5rem}.py-5{padding-top:3rem;padding-bottom:3rem}.px-3{padding-inline:1rem}.py-2{padding-block:.5rem}
.border{border:1px solid var(--border)!important}.border-2{border-width:2px!important}.border-bottom{border-bottom:1px solid var(--border)!important}.rounded{border-radius:12px!important}
.fade{transition:opacity .15s linear}.show{display:block}

/* responsive columns */
@media(min-width:768px){
  .col-md-3{width:25%}.col-md-4{width:33.333%}.col-md-5{width:41.666%}.col-md-6{width:50%}.col-md-8{width:66.666%}
  .d-md-none{display:none!important}.d-md-flex{display:flex!important}
}
@media(min-width:992px){
  .col-lg{flex:1 0 0}.col-lg-4{width:33.333%}.col-lg-5{width:41.666%}.col-lg-7{width:58.333%}.col-lg-8{width:66.666%}
  .d-lg-none{display:none!important}.d-lg-flex{display:flex!important}.ms-lg-auto{margin-left:auto}
}
@media(min-width:1200px){.d-xl-flex{display:flex!important}}
@media(min-width:576px){.d-sm-none{display:none!important}.d-sm-flex{display:flex!important}.d-sm-inline{display:inline!important}}

/* topbar + sidebar */
.topbar{height:var(--topbar-h);background:rgba(255,255,255,.96);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 24px;position:fixed;left:var(--sidebar-w);right:0;top:0;z-index:1020;backdrop-filter:blur(8px)}
.topbar-menu{width:42px;height:42px;border:1px solid var(--border);border-radius:11px;background:#fff;color:var(--ink);font-size:1.25rem;display:inline-flex;align-items:center;justify-content:center;margin-right:12px;cursor:pointer}
.topbar-title{display:flex;flex-direction:column;line-height:1.15;min-width:0}.topbar-title b{font-size:1.06rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.topbar-kicker{font-size:.68rem;letter-spacing:.12em;font-weight:800;color:var(--niceso);margin-bottom:4px}.topbar-company{display:flex;align-items:center;gap:8px;color:#68778c;font-size:.88rem;padding-right:16px;border-right:1px solid var(--border)}
.user-menu{border:0;background:transparent;display:flex;align-items:center;gap:10px;padding:5px 7px;border-radius:12px;color:var(--ink);cursor:pointer}.user-menu:hover{background:#f5f7fa}.user-avatar{width:38px;height:38px;border-radius:11px;background:#fff1f2;color:var(--niceso);border:1px solid #ffd7d9;display:inline-flex;align-items:center;justify-content:center;font-weight:800}.user-meta{display:flex;flex-direction:column;align-items:flex-start;line-height:1.1}.user-meta b{font-size:.85rem;max-width:170px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user-meta small{font-size:.67rem;color:var(--muted);margin-top:4px;letter-spacing:.04em}.user-chevron{font-size:.7rem;color:#8995a5}
.dropdown{position:relative}.dropdown-menu{position:absolute;top:calc(100% + 10px);right:0;display:none;min-width:210px;background:#fff;border:1px solid var(--border);border-radius:12px;padding:8px;box-shadow:var(--shadow-md);list-style:none;margin:0}.dropdown:hover .dropdown-menu,.dropdown:focus-within .dropdown-menu{display:block}.dropdown-menu-end{right:0;left:auto}.dropdown-item{display:block;padding:9px 12px;border-radius:10px;color:var(--ink)}.dropdown-item:hover{background:#f5f7fb}.dropdown-divider{height:1px;background:var(--border);border:0;margin:8px 0}.text-danger{color:#c62828!important}.text-secondary{color:var(--muted)!important}
.user-dropdown{min-width:210px;border-radius:12px;padding:8px}

.sidebar{position:fixed;left:0;top:0;bottom:0;width:var(--sidebar-w);background:linear-gradient(180deg,#102238 0%,#0d1c2e 100%);color:#fff;z-index:1040;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;box-shadow:8px 0 24px rgba(15,34,56,.08)}
.sidebar-brand{height:76px;display:flex;gap:12px;align-items:center;padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.08);position:sticky;top:0;background:#102238;z-index:2}.sidebar-logo{width:46px;height:46px;object-fit:cover;border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,.18)}.sidebar-brand-copy{min-width:0}.sidebar-brand-copy b{display:block;font-size:.96rem;letter-spacing:.03em}.sidebar-brand-copy small{display:block;color:#98abc0;font-size:.72rem;margin-top:2px}.sidebar-close{margin-left:auto;border:0;background:rgba(255,255,255,.08);color:#fff;width:36px;height:36px;border-radius:10px;cursor:pointer}
.sidebar-user-card{margin:14px 14px 4px;padding:12px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.045);border-radius:13px;display:flex;align-items:center;gap:10px}.sidebar-user-icon{width:36px;height:36px;border-radius:10px;background:rgba(237,28,36,.16);color:#ff7a7f;display:flex;align-items:center;justify-content:center;font-size:1.1rem}.sidebar-user-card>div:last-child{min-width:0;display:flex;flex-direction:column}.sidebar-user-card small{font-size:.66rem;color:#8398ad}.sidebar-user-card b{font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}.sidebar-user-card span{font-size:.61rem;color:#ff878b;font-weight:800;letter-spacing:.07em;margin-top:2px}
.sidebar-nav{padding:8px 12px 16px;flex:1}.sidebar-nav a{display:flex;align-items:center;gap:11px;color:#c7d1dd;text-decoration:none;padding:10px 11px;border-radius:9px;margin:2px 0;font-size:.86rem;transition:background .15s,color .15s,transform .15s}.sidebar-nav a i{width:21px;text-align:center;font-size:1.02rem;color:#8fa4b9}.sidebar-nav a:hover{background:rgba(255,255,255,.055);color:#fff}.sidebar-nav a.active{background:linear-gradient(90deg,rgba(237,28,36,.22),rgba(237,28,36,.08));color:#fff;box-shadow:inset 3px 0 0 var(--niceso)}.sidebar-nav a.active i{color:#ff676d}.nav-group{font-size:.64rem;text-transform:uppercase;letter-spacing:.11em;color:#637b94;margin:17px 10px 6px;font-weight:800}.sidebar-footer{margin:0 14px 14px;border-top:1px solid rgba(255,255,255,.07);padding:14px 3px 2px;color:#748aa0;font-size:.68rem;display:flex;align-items:center;gap:7px}.sidebar-backdrop{display:none}

/* Main app styles */
.content-wrap{margin-left:var(--sidebar-w);padding-top:var(--topbar-h)}.app-main{min-height:calc(100vh - var(--topbar-h))}.page-title{font-size:1.55rem;font-weight:760;margin:0;letter-spacing:-.02em}.section-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:20px}.small-muted{font-size:.83rem;color:var(--muted);margin-top:3px}
.card{border:1px solid var(--border);border-radius:14px;background:#fff;box-shadow:var(--shadow-sm);overflow:hidden}.card-header{background:#fff;border-bottom:1px solid var(--border);padding:1rem 1.15rem;font-weight:700}.card-body{padding:1rem 1.15rem}.metric{border:1px solid #e8edf4;box-shadow:0 5px 18px rgba(21,47,76,.045)}.metric .icon{font-size:1.45rem;width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:#f4f7fb;color:#315d8d}.kpi-number{font-size:1.9rem;font-weight:780;letter-spacing:-.03em}
.table-responsive{width:100%;overflow:auto}.table{width:100%;border-collapse:separate;border-spacing:0;margin-bottom:0;background:#fff}.table thead th{font-size:.72rem;text-transform:uppercase;letter-spacing:.045em;color:#64738a;background:#f8fafc;border-bottom:1px solid #e9edf3;white-space:nowrap}.table td,.table th{vertical-align:middle;padding:.78rem .75rem;border-bottom:1px solid #edf0f4;text-align:left}.table-sm td,.table-sm th{padding:.55rem .6rem}.table-hover tbody tr:hover{background:#fbfcfd}.table-borderless td,.table-borderless th{border:0}
.form-control,.form-select{display:block;width:100%;border:1px solid #dce3ec;border-radius:9px;min-height:42px;padding:.65rem .85rem;background:#fff;color:var(--ink)}textarea.form-control{min-height:110px;resize:vertical}.form-control:focus,.form-select:focus{outline:none;border-color:#f48a8e;box-shadow:0 0 0 .2rem rgba(237,28,36,.1)}.form-label,label{display:inline-block;font-size:.83rem;font-weight:650;color:#48586c;margin-bottom:.42rem}.form-check{display:flex;align-items:center;gap:.5rem}.form-check-input{width:1rem;height:1rem}.form-check-label{margin:0}.input-group{display:flex;align-items:stretch;width:100%}.input-group>.form-control,.input-group>.form-select{position:relative;flex:1 1 auto;min-width:0}.input-group-text{display:inline-flex;align-items:center;padding:.65rem .85rem;background:#fff;border:1px solid #dce3ec;color:#77879a}.hris-input-group .input-group-text{border-radius:10px 0 0 10px}.hris-input-group .form-control{border-left:0;border-radius:0}.hris-input-group .password-toggle{border:1px solid #dce3ec;border-left:0;background:#fff;color:#76869a;border-radius:0 10px 10px 0}.hris-input-group .password-toggle:hover{background:#f4f6f9;color:#34475c}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.35rem;padding:.68rem 1rem;border:1px solid transparent;border-radius:9px;font-weight:650;cursor:pointer;line-height:1.2;background:#fff;color:var(--ink)}.btn:hover{transform:translateY(-1px)}.btn-sm{padding:.45rem .72rem;font-size:.84rem;border-radius:8px}.btn-lg{padding:.9rem 1.15rem;font-size:1rem;border-radius:11px}.btn-primary{background:#243d5a;border-color:#243d5a;color:#fff}.btn-primary:hover{background:#172f4c;border-color:#172f4c;color:#fff}.btn-success{background:#218454;border-color:#218454;color:#fff}.btn-danger{background:#cf3c3c;border-color:#cf3c3c;color:#fff}.btn-outline-primary{background:#fff;border-color:#284b70;color:#284b70}.btn-outline-dark{background:#fff;border-color:#2f3945;color:#2f3945}.btn-outline-danger{background:#fff;border-color:#c44;color:#c44}.btn-outline-secondary{background:#fff;border-color:#d5dde6;color:#526274}.btn-niceso{background:var(--niceso);border-color:var(--niceso);color:#fff}.btn-niceso:hover,.btn-niceso:focus{background:var(--niceso-dark);border-color:var(--niceso-dark);color:#fff}.btn-close{margin-left:auto;background:transparent;border:0;cursor:pointer;opacity:.7;font-size:1rem}
.badge{display:inline-block;padding:.38em .62em;border-radius:999px;font-size:.74rem;font-weight:700}.bg-success,.text-bg-light{background:#eaf7ee!important;color:#207d46!important}.bg-danger{background:#fff0f0!important;color:#b4232a!important}.bg-warning{background:#fff6de!important;color:#89681a!important}.bg-secondary{background:#eef2f6!important;color:#5b6c7c!important}
.alert{position:relative;padding:1rem 1rem;border:1px solid transparent;border-radius:11px;margin-bottom:1rem}.alert-success{background:#edf8f1;border-color:#d6eddd;color:#246d42}.alert-danger{background:#fff0f0;border-color:#f2d4d6;color:#b4232a}.alert-warning{background:#fff7e4;border-color:#f4e2aa;color:#8a6715}.alert-info{background:#eef6ff;border-color:#d5e7fb;color:#1e5d9a}.alert-link{font-weight:700;text-decoration:underline}.alert-dismissible{padding-right:2.75rem}
.list-group{display:flex;flex-direction:column;padding-left:0;margin-bottom:0;border:1px solid var(--border);border-radius:12px;overflow:hidden}.list-group-flush{border-radius:0;border-width:0}.list-group-item{display:block;padding:.85rem 1rem;background:#fff;border-bottom:1px solid var(--border)}.list-group-item:last-child{border-bottom:0}
.modal{position:fixed;inset:0;display:none;overflow-y:auto;background:rgba(15,26,40,.48);padding:1.25rem;z-index:1055}.modal.show{display:block}.modal-dialog{position:relative;max-width:720px;margin:2rem auto}.modal-lg{max-width:980px}.modal-content{border:0;border-radius:16px;background:#fff;box-shadow:var(--shadow-lg)}.modal-header,.modal-footer{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.15rem;border-bottom:1px solid var(--border)}.modal-footer{border-bottom:0;border-top:1px solid var(--border)}.modal-body{padding:1rem 1.15rem}.modal-title{margin:0;font-size:1.08rem;font-weight:760}
.print-letter{background:#fff;max-width:850px;margin:auto;padding:54px;color:#111}

/* HRIS login */
.hris-login-page{background:#edf1f6;min-height:100vh}.hris-login-shell{min-height:100vh;display:grid;grid-template-columns:minmax(410px,46%) 1fr}.hris-login-brand{background:linear-gradient(145deg,#0f2239 0%,#132d49 68%,#0d1c2f 100%);color:#fff;padding:42px clamp(38px,5vw,76px);display:flex;flex-direction:column;position:relative;overflow:hidden}.hris-login-brand:before{content:"";position:absolute;width:380px;height:380px;border-radius:50%;right:-150px;top:-130px;background:rgba(237,28,36,.12)}.hris-login-brand:after{content:"";position:absolute;width:240px;height:240px;border-radius:50%;left:-110px;bottom:90px;border:45px solid rgba(255,255,255,.03)}.login-brand-top{display:flex;align-items:center;gap:15px;position:relative;z-index:1}.login-logo{width:58px;height:58px;object-fit:cover;border-radius:14px;box-shadow:0 10px 28px rgba(0,0,0,.22)}.login-brand-name{font-weight:850;font-size:1.17rem;letter-spacing:.06em}.login-brand-sub{font-size:.76rem;color:#a9bacb;margin-top:2px}.login-brand-copy{margin:auto 0;position:relative;z-index:1;max-width:610px}.login-eyebrow{display:inline-block;font-size:.68rem;font-weight:800;letter-spacing:.14em;color:#ff858a;margin-bottom:18px}.login-brand-copy h1{font-size:clamp(2.2rem,4.3vw,4.2rem);line-height:1.04;letter-spacing:-.045em;font-weight:780;margin:0 0 22px}.login-brand-copy p{font-size:1rem;line-height:1.75;color:#b7c4d1;max-width:560px;margin:0}.login-feature-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:34px;max-width:520px}.login-feature-grid div{border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.045);border-radius:11px;padding:12px 14px;display:flex;align-items:center;gap:10px;color:#d7e0e9;font-size:.82rem}.login-feature-grid i{color:#ff777c;font-size:1.08rem}.login-brand-footer{position:relative;z-index:1;font-size:.67rem;color:#71869b;letter-spacing:.12em;font-weight:700}
.hris-login-form-wrap{background:#f8fafc;display:flex;align-items:center;justify-content:center;padding:40px}.hris-login-form-panel{width:100%;max-width:470px}.login-heading{margin-bottom:28px}.login-pill{display:inline-flex;align-items:center;gap:6px;background:#eef3f8;color:#53677e;border:1px solid #e1e7ee;padding:6px 9px;border-radius:999px;font-size:.7rem;font-weight:750;margin-bottom:16px}.login-heading h2{font-size:2rem;font-weight:780;letter-spacing:-.035em;margin:0 0 7px}.login-heading p{color:var(--muted);margin:0}.login-form .form-label{font-size:.82rem}.login-security-note{margin-top:24px;padding:14px;border-top:1px solid var(--border);display:flex;gap:10px;color:#7d8998;font-size:.74rem;line-height:1.55}.login-security-note i{color:#53708d;font-size:1rem}.mobile-brand{display:none;align-items:center;gap:10px;margin-bottom:28px}.mobile-brand img{width:44px;height:44px;border-radius:10px}.mobile-brand div{display:flex;flex-direction:column}.mobile-brand b{font-size:.92rem}.mobile-brand small{font-size:.68rem;color:var(--muted)}

/* setup page */
.setup-page{min-height:100vh;background:linear-gradient(180deg,#eef2f7 0%,#f6f9fc 100%)}.setup-card{max-width:920px;background:#fff;border:1px solid var(--border);border-radius:18px;padding:30px;box-shadow:0 18px 50px rgba(16,34,56,.08)}.setup-brand{display:flex;align-items:center;gap:14px;margin-bottom:26px}.setup-brand img{width:78px;height:78px;border-radius:18px;object-fit:cover;box-shadow:0 8px 20px rgba(237,28,36,.15)}.setup-brand h1{font-size:1.65rem;margin:0;font-weight:800;letter-spacing:-.02em}.setup-brand p{margin:4px 0 0;color:var(--muted);font-size:.86rem}.setup-status-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:22px 0}.setup-status{border:1px solid var(--border);border-radius:14px;padding:16px;display:flex;align-items:center;gap:12px;min-height:88px}.setup-status>i{font-size:1.35rem}.setup-status div{display:flex;flex-direction:column}.setup-status b{font-size:.85rem}.setup-status span{font-size:.74rem;color:var(--muted)}.setup-status.ok{background:#f4fbf7;border-color:#d9efe0;color:#207d46}.setup-status.wait{background:#fffaf0;border-color:#f3e7c5;color:#8a6b1a}.setup-status.bad{background:#fff4f4;border-color:#f4d6d8;color:#b4232a}.setup-section{margin-top:20px;border-top:1px solid var(--border);padding-top:24px;display:flex;gap:14px;align-items:flex-start}.step-number{flex:0 0 38px;width:38px;height:38px;border-radius:12px;background:#fff1f2;color:var(--niceso);display:flex;align-items:center;justify-content:center;font-weight:850}.setup-section h2,.setup-complete h2{font-size:1.16rem;font-weight:780;margin:2px 0 6px}.setup-section p,.setup-complete p{color:var(--muted);font-size:.9rem;line-height:1.65}.setup-complete{margin-top:22px;border-top:1px solid var(--border);padding-top:24px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}.setup-complete-icon{width:48px;height:48px;border-radius:14px;background:#eaf8ef;color:#23894c;display:flex;align-items:center;justify-content:center;font-size:1.3rem}.setup-note{margin-top:24px;padding:13px 14px;border-radius:10px;background:#f7f9fc;color:#69798e;font-size:.79rem;display:flex;gap:9px;align-items:flex-start}

@media(max-width:991.98px){
  :root{--topbar-h:66px}
  .sidebar{transform:translateX(-100%);transition:transform .22s ease}.sidebar.show{transform:translateX(0)}.topbar{left:0;padding:0 14px}.content-wrap{margin-left:0}.sidebar-backdrop{position:fixed;inset:0;background:rgba(7,19,32,.48);z-index:1035}.sidebar-backdrop.show{display:block}.hris-login-shell{grid-template-columns:1fr}.hris-login-brand{display:none}.hris-login-form-wrap{min-height:100vh}.mobile-brand{display:flex!important}
}
@media(max-width:575.98px){
  .container,.container-fluid{width:min(100%, 100% - 24px)}
  .hris-login-form-wrap{padding:24px 18px}.hris-login-form-panel{max-width:none}.login-heading h2{font-size:1.65rem}.setup-card{padding:20px;border-radius:14px}.setup-status-grid{grid-template-columns:1fr}.setup-section,.setup-complete{flex-wrap:wrap}.setup-complete .btn{width:100%;margin-left:0!important}.section-head{align-items:flex-start;flex-direction:column}.section-head>.btn,.section-head>.d-flex{width:100%}.section-head>.btn{display:block}.topbar-title b{font-size:.94rem}.topbar-kicker{font-size:.61rem}
}
@media print{.sidebar,.topbar,.no-print,.sidebar-backdrop{display:none!important}.content-wrap{margin:0;padding:0}body{background:#fff}.print-letter{max-width:none;padding:0}.card{border:0;box-shadow:none}.container-fluid{padding:0!important}}

/* Data tools: filter, export, pagination, upload */
.table-tools{margin:0 0 14px;padding:14px;border:1px solid var(--border);border-radius:14px;background:linear-gradient(180deg,#fff,#fbfcfe);box-shadow:0 3px 12px rgba(16,34,56,.035)}
.table-tools-main{display:grid;grid-template-columns:minmax(210px,1.5fr) minmax(150px,.8fr) minmax(150px,.9fr) repeat(2,minmax(135px,.65fr)) minmax(90px,.4fr);gap:10px;align-items:end}
.table-tools-main .tool-date:only-of-type{display:none}.tool-field{min-width:0}.tool-field label{display:block;margin:0 0 5px;font-size:.69rem;font-weight:800;color:#65758a;text-transform:uppercase;letter-spacing:.055em}.tool-control,.tool-select,.tool-input{height:40px;width:100%;border:1px solid #dce3ec;border-radius:9px;background:#fff;color:var(--ink)}.tool-control,.tool-select{padding:0 10px}.tool-input{display:flex;align-items:center;overflow:hidden}.tool-input span{padding-left:11px;color:#8795a5;font-size:1.1rem}.tool-input input{border:0;outline:0;width:100%;height:100%;padding:0 10px;background:transparent;min-width:0}.tool-control:focus,.tool-select:focus,.tool-input:focus-within{outline:none;border-color:#ee8a8e;box-shadow:0 0 0 3px rgba(237,28,36,.08)}
.table-tools-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:11px;padding-top:11px;border-top:1px dashed #e3e8ef}.tool-btn{min-height:38px;display:inline-flex;align-items:center;justify-content:center;padding:0 12px;border:1px solid #243d5a;border-radius:9px;background:#243d5a;color:#fff!important;font-size:.78rem;font-weight:750;cursor:pointer;text-decoration:none;white-space:nowrap}.tool-btn:hover{filter:brightness(.96)}.tool-btn.secondary{background:#fff;border-color:#d7dfe8;color:#4b5c70!important}.tool-btn.upload{background:var(--niceso);border-color:var(--niceso);margin-left:auto}.tool-btn:disabled{opacity:.45;cursor:not-allowed;filter:none}
.table-pager{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:13px;padding:11px 2px 0;border-top:1px solid #edf0f4}.table-count{font-size:.78rem;color:var(--muted);font-weight:600}.pager-actions{display:flex;align-items:center;gap:8px}.page-info{font-size:.76rem;color:#5d6e81;min-width:95px;text-align:center;font-weight:700}.sortable-head{cursor:pointer;user-select:none;padding-right:24px!important;position:relative}.sortable-head:after{content:'↕';position:absolute;right:8px;color:#aab4bf;font-size:.72rem}.sortable-head[data-sort="asc"]:after{content:'↑';color:var(--niceso)}.sortable-head[data-sort="desc"]:after{content:'↓';color:var(--niceso)}
.table-empty-result tbody:after{content:'Tidak ada data sesuai filter';display:block;padding:22px;color:var(--muted);font-size:.85rem}

/* Import / preview workspace */
.import-page{background:#f4f7fb;min-height:100vh}.import-shell{min-height:100vh}.import-head{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:20px;padding:16px 0}.import-logo{width:58px;height:58px;object-fit:cover;border-radius:14px;box-shadow:0 7px 20px rgba(237,28,36,.14)}.import-section-title{font-size:1rem;font-weight:800;margin:0 0 5px}.import-fields{display:flex;flex-wrap:wrap;gap:6px}.import-fields span{display:inline-flex;align-items:center;gap:2px;background:#f5f7fa;border:1px solid #e3e8ef;border-radius:999px;padding:5px 8px;font-size:.7rem;color:#5b6d80}.import-fields em{font-style:normal;color:var(--niceso);font-weight:900}.import-invalid{background:#fff8f8!important}.import-invalid td{border-color:#f5dfdf!important}.import-page .card-header{padding:14px 16px}.import-page .table-tools{margin-top:0}.import-page .table-responsive{max-height:none}

@media(max-width:1250px){.table-tools-main{grid-template-columns:repeat(3,minmax(0,1fr))}.tool-search{grid-column:span 2}.tool-btn.upload{margin-left:0}}
@media(max-width:767.98px){.table-tools-main{grid-template-columns:1fr 1fr}.tool-search{grid-column:1/-1}.column-value-wrap{grid-column:span 1}.table-tools-actions{display:grid;grid-template-columns:1fr 1fr}.tool-btn.upload{margin-left:0}.table-pager{align-items:flex-start;flex-direction:column}.pager-actions{width:100%;justify-content:space-between}.import-head{align-items:flex-start;flex-direction:column}.import-head>.btn{width:100%}}
@media(max-width:480px){.table-tools-main{grid-template-columns:1fr}.tool-search,.column-value-wrap{grid-column:auto}.table-tools-actions{grid-template-columns:1fr}.tool-btn{width:100%}.page-info{min-width:75px}.pager-actions .tool-btn{width:auto}.import-logo{width:50px;height:50px}}

/* Attendance camera + verification */
.attendance-capture-card{overflow:visible}.attendance-camera-stage{position:relative;overflow:hidden;border-radius:16px;background:#0c1726;aspect-ratio:4/3;min-height:280px;border:1px solid #21344b}.attendance-camera-stage video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1);background:#0b1522}.camera-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:28px;color:#dce5ef;background:radial-gradient(circle at 50% 30%,#1b3552 0,#0c1726 72%)}.camera-placeholder i{font-size:2.2rem;color:#ff6f75;margin-bottom:10px}.camera-placeholder b{font-size:1rem}.camera-placeholder span{font-size:.78rem;color:#9eb0c4;max-width:320px;margin-top:5px}.camera-badge{position:absolute;top:12px;left:12px;display:flex;align-items:center;gap:6px;padding:7px 10px;border-radius:999px;background:rgba(7,18,32,.72);color:#fff;font-size:.72rem;font-weight:750;backdrop-filter:blur(5px)}
.attendance-controls{display:flex;gap:8px;flex-wrap:wrap}.captured-photo-wrap{margin-top:12px;padding:10px;border:1px solid #dfe6ee;border-radius:12px;background:#f8fafc;display:flex;gap:12px;align-items:center}.captured-photo-wrap[hidden]{display:none!important}.captured-photo-wrap img{width:82px;height:82px;object-fit:cover;border-radius:10px;transform:scaleX(1)}.captured-photo-wrap div{display:flex;flex-direction:column}.captured-photo-wrap b{font-size:.84rem}.captured-photo-wrap span{font-size:.72rem;color:var(--muted);margin-top:3px}
.attendance-location-box{display:flex;align-items:flex-start;gap:10px;padding:12px;border:1px solid #dfe6ee;border-radius:12px;background:#fbfcfe}.attendance-location-icon{width:38px;height:38px;border-radius:10px;background:#eef5ff;color:#315f93;display:flex;align-items:center;justify-content:center;flex:0 0 38px}.attendance-location-box b{font-size:.82rem}.attendance-address{font-size:.73rem;color:#485b70;margin-top:4px;line-height:1.45;word-break:break-word}.attendance-requirements{display:flex;gap:8px;flex-wrap:wrap}.attendance-requirements span{display:inline-flex;align-items:center;gap:5px;padding:6px 9px;border-radius:999px;background:#f1f4f7;color:#7a8898;font-size:.71rem;font-weight:700}.attendance-requirements span.ok{background:#eaf8ef;color:#267649}.attendance-today{padding:10px 12px;border-radius:11px;background:#f7f9fc;border:1px solid #e7ebf0}.attendance-today>b{font-size:.78rem}.attendance-today>div{display:flex;gap:18px;margin-top:4px;font-size:.75rem;color:#596a7c}
.attendance-policy-list{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}.attendance-policy-list>div{display:flex;gap:10px;align-items:flex-start;padding:11px;border:1px solid #e5eaf0;border-radius:11px;background:#fbfcfd}.attendance-policy-list i{width:34px;height:34px;flex:0 0 34px;border-radius:9px;background:#fff1f2;color:var(--niceso);display:flex;align-items:center;justify-content:center}.attendance-policy-list span{display:flex;flex-direction:column}.attendance-policy-list b{font-size:.78rem}.attendance-policy-list small{font-size:.69rem;color:var(--muted);margin-top:2px;line-height:1.4}
.attendance-thumb{display:inline-flex;align-items:center;gap:6px;font-size:.7rem;font-weight:700;color:#315d8d}.attendance-thumb img{width:44px;height:44px;border-radius:8px;object-fit:cover;border:1px solid #dfe6ee}.attendance-location-cell{min-width:260px;max-width:360px;font-size:.72rem;line-height:1.45}.attendance-location-cell div+div{margin-top:5px}.attendance-location-cell b{color:#35495e;margin-right:4px}
.attendance-confirm-grid{display:grid;grid-template-columns:minmax(260px,.9fr) minmax(280px,1.1fr);gap:18px}.attendance-confirm-photo{background:#0d1827;border-radius:14px;overflow:hidden;min-height:270px;display:flex;align-items:center;justify-content:center}.attendance-confirm-photo img{width:100%;height:100%;object-fit:contain}.attendance-confirm-info{display:flex;flex-direction:column;border:1px solid #e4e9ef;border-radius:14px;overflow:hidden}.attendance-confirm-info>div{padding:11px 13px;border-bottom:1px solid #edf0f3;display:flex;flex-direction:column;gap:3px}.attendance-confirm-info>div:last-child{border-bottom:0}.attendance-confirm-info span{font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;color:#8290a0;font-weight:800}.attendance-confirm-info b{font-size:.83rem;line-height:1.45;word-break:break-word}.attendance-confirm-warning{margin-top:14px;padding:11px 13px;border-radius:10px;background:#f5f8fb;color:#5b6c7f;font-size:.76rem;display:flex;gap:8px;align-items:flex-start}.attendance-confirm-warning i{color:#376891}.attendance-submit-choice:disabled,.attendance-controls .btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.spinner-border{display:inline-block;width:1rem;height:1rem;border:.16em solid currentColor;border-right-color:transparent;border-radius:50%;animation:hris-spin .75s linear infinite}.spinner-border-sm{width:.85rem;height:.85rem;border-width:.13em}@keyframes hris-spin{to{transform:rotate(360deg)}}
.page-data-actions{margin-left:auto}

@media(max-width:767.98px){.attendance-policy-list{grid-template-columns:1fr}.attendance-confirm-grid{grid-template-columns:1fr}.attendance-camera-stage{min-height:230px}.attendance-controls .btn{flex:1 1 46%}.attendance-location-box{flex-wrap:wrap}.attendance-location-box .btn{width:100%}.attendance-confirm-photo{min-height:220px}.attendance-location-cell{min-width:220px}.page-data-actions{width:100%;margin-left:0}.page-data-actions .btn{flex:1}}
.camera-placeholder[hidden]{display:none!important}

/* Employee self-service dashboard */
.employee-hero{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:26px 28px;border-radius:20px;background:linear-gradient(135deg,#102238 0%,#183a60 72%,#223f61 100%);color:#fff;position:relative;overflow:hidden;box-shadow:0 14px 34px rgba(16,34,56,.16)}
.employee-hero:after{content:"";position:absolute;width:220px;height:220px;border-radius:50%;right:-80px;top:-110px;background:rgba(237,28,36,.18)}.employee-hero-copy{position:relative;z-index:1}.employee-eyebrow{font-size:.68rem;font-weight:850;letter-spacing:.14em;color:#ff8d92;margin-bottom:8px}.employee-hero h1{margin:0 0 5px;font-size:clamp(1.65rem,3vw,2.35rem);letter-spacing:-.03em}.employee-hero p{margin:0;color:#b9c7d5;font-size:.9rem}.employee-hero-status{position:relative;z-index:1;min-width:235px;padding:15px 17px;border-radius:14px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.08);backdrop-filter:blur(8px);display:flex;flex-direction:column}.employee-hero-status span{font-size:.66rem;text-transform:uppercase;letter-spacing:.08em;color:#9fb0c1;font-weight:800}.employee-hero-status b{font-size:1rem;margin:4px 0}.employee-hero-status small{font-size:.72rem;color:#c5d1dc}.employee-hero-status.done{box-shadow:inset 3px 0 0 #55c680}.employee-hero-status.active{box-shadow:inset 3px 0 0 #54a8ff}.employee-hero-status.wait{box-shadow:inset 3px 0 0 #f3b851}
.employee-quick-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.employee-quick{display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:11px;background:#fff;border:1px solid var(--border);border-radius:14px;padding:14px 15px;box-shadow:var(--shadow-sm);transition:transform .15s ease,border-color .15s ease}.employee-quick:hover{transform:translateY(-2px);border-color:#cad5e1}.employee-quick>i:first-child{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:#f1f5f9;color:#365e89;font-size:1.1rem}.employee-quick.primary>i:first-child{background:#fff0f1;color:var(--niceso)}.employee-quick div{min-width:0;display:flex;flex-direction:column}.employee-quick b{font-size:.82rem}.employee-quick span{font-size:.69rem;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.employee-quick>i:last-child{color:#9aa6b3;font-size:.75rem}.metric-foot{display:block;color:#8a97a5;margin-top:3px;font-size:.67rem}
.employee-schedule-main{display:flex;align-items:center;gap:16px}.employee-date-box{width:64px;height:70px;border-radius:15px;background:#fff1f2;color:var(--niceso);display:flex;flex-direction:column;align-items:center;justify-content:center;flex:0 0 64px}.employee-date-box b{font-size:1.45rem;line-height:1}.employee-date-box span{font-size:.68rem;text-transform:uppercase;margin-top:4px;font-weight:800}.employee-schedule-main h3{margin:8px 0 2px;font-size:1.24rem}.employee-schedule-main p{margin:0;color:var(--muted);font-size:.76rem}.employee-attendance-times{display:grid;grid-template-columns:1fr 1fr;gap:10px}.employee-attendance-times>div{padding:12px;border-radius:12px;background:#f8fafc;border:1px solid #e8edf3;display:flex;flex-direction:column}.employee-attendance-times span{font-size:.67rem;color:var(--muted);text-transform:uppercase;font-weight:800;letter-spacing:.05em}.employee-attendance-times b{font-size:1.05rem;margin-top:3px}
.employee-upcoming-list{display:grid;grid-template-columns:1fr 1fr;gap:9px}.employee-upcoming-item{display:grid;grid-template-columns:58px 1fr;gap:10px;align-items:center;padding:10px;border:1px solid #e8edf3;border-radius:12px}.employee-upcoming-item>div:first-child{display:flex;flex-direction:column;align-items:center;border-right:1px solid #edf0f4}.employee-upcoming-item>div:first-child b{font-size:.85rem}.employee-upcoming-item>div:first-child span{font-size:.64rem;color:var(--muted)}.employee-upcoming-item>div:last-child{display:flex;flex-direction:column}.employee-upcoming-item strong{font-size:.78rem}.employee-upcoming-item>div:last-child span{font-size:.68rem;color:var(--muted);margin-top:2px}
.employee-request-row,.employee-warning-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid #edf0f4}.employee-request-row:last-child,.employee-warning-row:last-child{border-bottom:0}.employee-request-row>div,.employee-warning-row>div{display:flex;flex-direction:column;min-width:0}.employee-request-row b,.employee-warning-row b{font-size:.8rem}.employee-request-row span,.employee-warning-row span{font-size:.7rem;color:var(--muted);margin-top:2px}.employee-profile-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.employee-profile-grid>div{padding:11px 12px;border-radius:11px;background:#f8fafc;border:1px solid #e9edf3;display:flex;flex-direction:column}.employee-profile-grid span{font-size:.66rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-weight:800}.employee-profile-grid b{font-size:.8rem;margin-top:3px}.employee-warning-card{border-color:#f0dfaa}.empty-state-inline{display:flex;align-items:center;gap:12px;color:#6d7d90}.empty-state-inline>i{width:40px;height:40px;border-radius:11px;background:#f2f5f8;display:flex;align-items:center;justify-content:center;color:#7e90a3}.empty-state-inline>div{display:flex;flex-direction:column}.empty-state-inline b{font-size:.82rem}.empty-state-inline span{font-size:.72rem;color:var(--muted);margin-top:2px}

/* Attendance capture page + standalone report */
.attendance-status-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.attendance-status-strip>div{background:#fff;border:1px solid var(--border);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column}.attendance-status-strip span{font-size:.66rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-weight:800}.attendance-status-strip b{font-size:.9rem;margin-top:3px}.attendance-primary-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.attendance-primary-actions .btn{min-height:48px}.attendance-report-table .attendance-location-cell span{display:block;margin-top:2px;color:#5f7083}.attendance-report-table td{vertical-align:top}

@media(max-width:1100px){.employee-quick-grid{grid-template-columns:1fr 1fr}.employee-upcoming-list{grid-template-columns:1fr}}
@media(max-width:767.98px){.employee-hero{align-items:flex-start;flex-direction:column;padding:22px 20px}.employee-hero-status{width:100%;min-width:0}.employee-quick-grid{grid-template-columns:1fr}.employee-profile-grid,.employee-attendance-times{grid-template-columns:1fr 1fr}.attendance-status-strip{grid-template-columns:1fr 1fr}.attendance-primary-actions{grid-template-columns:1fr}.attendance-primary-actions .btn{width:100%}}
@media(max-width:430px){.employee-profile-grid{grid-template-columns:1fr}.attendance-status-strip{grid-template-columns:1fr 1fr}.employee-hero h1{font-size:1.55rem}}