:root{
 --brand:#146b3a; --brand2:#1f8a4c; --brand-dark:#0d4f2b;
 --accent:#79c143; --ink:#13231b; --muted:#66756d;
 --surface:#ffffff; --bg:#f3f7f4; --line:#e3ebe6;
 --shadow:0 10px 30px rgba(18,48,32,.07);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
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;font-size:15px}
a{color:var(--brand)}
.app-navbar{height:72px;position:sticky;top:0;z-index:1035;background:rgba(255,255,255,.96)!important;border-bottom:1px solid var(--line)!important;box-shadow:0 2px 14px rgba(20,60,38,.05)!important}
.brand-logo{height:50px;width:50px;object-fit:contain}
.brand-text{font-size:1.04rem;letter-spacing:-.01em;color:#15241b}
.brand-text strong{font-weight:800}
.brand-text small{font-size:.82rem;color:#87948e}
.welcome-user{font-weight:600;color:#4d5d54}
.app-shell{min-height:calc(100vh - 72px)}
.sidebar{min-height:calc(100vh - 72px);background:#fff;border-right:1px solid var(--line);padding-top:22px!important}
.sidebar:before{content:"HR MANAGEMENT";display:block;color:#98a59f;font-size:.68rem;font-weight:800;letter-spacing:.12em;padding:0 13px 10px}
.sidebar nav,.mobile-menu{display:flex;flex-direction:column;gap:4px}
.nav-link-item{display:flex;align-items:center;gap:11px;padding:11px 13px;text-decoration:none;color:#385247;border-radius:11px;font-weight:600;transition:.18s}
.nav-link-item i{width:20px;text-align:center;color:#718079;font-size:1rem}
.nav-link-item:hover{background:#edf7f0;color:var(--brand);transform:translateX(2px)}
.nav-link-item.active{background:#e8f5ec;color:var(--brand);font-weight:800}
.nav-link-item.active i{color:var(--brand)}
.main-content{min-width:0;padding:28px!important;overflow-x:hidden}
.page-title{font-size:1.8rem;font-weight:800;letter-spacing:-.03em;margin:0}
.page-subtitle{color:var(--muted);margin-top:4px}
.card{border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);background:var(--surface)}
.stat-card{min-height:138px;position:relative;overflow:hidden}
.stat-card:after{content:"";position:absolute;right:-25px;top:-35px;width:120px;height:120px;border-radius:50%;background:#eff8f1}
.stat-label{font-size:.84rem;color:var(--muted);font-weight:700}
.stat{font-size:2rem;font-weight:850;letter-spacing:-.04em;margin-top:8px;position:relative;z-index:1}
.stat-icon{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:#e8f5ec;color:var(--brand);font-size:1.1rem;position:relative;z-index:1}
.quick-card{height:100%;display:flex;flex-direction:column;gap:8px;text-decoration:none;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:15px;padding:19px;box-shadow:0 4px 16px rgba(16,42,28,.04);transition:.18s}
.quick-card:hover{border-color:#a9d6b7;box-shadow:0 10px 25px rgba(25,105,58,.09);transform:translateY(-2px);color:var(--ink)}
.quick-card .quick-icon{width:38px;height:38px;border-radius:10px;background:#edf7f0;color:var(--brand);display:flex;align-items:center;justify-content:center}
.quick-card strong{font-size:1rem}.quick-card span{font-size:.86rem;color:var(--muted);line-height:1.45}
.form-control,.form-select{border-radius:10px;border-color:#d7e1db;min-height:44px;background:#fff}
.form-control:focus,.form-select:focus{border-color:#69ad80;box-shadow:0 0 0 .2rem rgba(31,138,76,.11)}
.form-label{font-size:.84rem;font-weight:700;color:#405149}
.btn{border-radius:10px;touch-action:manipulation;font-weight:700;padding:.58rem .9rem}
.btn-primary{--bs-btn-bg:var(--brand);--bs-btn-border-color:var(--brand);--bs-btn-hover-bg:var(--brand-dark);--bs-btn-hover-border-color:var(--brand-dark)}
.btn-outline-primary{--bs-btn-color:var(--brand);--bs-btn-border-color:#9ac7a8;--bs-btn-hover-bg:var(--brand);--bs-btn-hover-border-color:var(--brand)}
.table{margin-bottom:0}.table th{font-size:.76rem;text-transform:uppercase;letter-spacing:.04em;color:#718078;background:#f8faf9}.table td,.table th{vertical-align:middle;white-space:nowrap;padding:.8rem .75rem;border-color:#edf1ee}
.table-responsive{border-radius:12px}
.clock-box{font-weight:800;background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 14px;color:var(--brand)}
.profile-hero{background:linear-gradient(135deg,#fff 0%,#eef8f1 100%);border:1px solid #dcebe1;border-radius:18px}
.profile-avatar{width:70px;height:70px;border-radius:18px;display:flex;align-items:center;justify-content:center;background:#dff0e4;color:var(--brand);font-size:1.35rem;font-weight:850}
.detail-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.detail-item{padding:14px;border:1px solid var(--line);border-radius:12px;background:#fbfdfc;min-width:0}
.info-label{font-size:.72rem;color:#7a8981;text-transform:uppercase;letter-spacing:.06em;font-weight:750}
.info-value{font-weight:650;margin-top:5px;overflow-wrap:anywhere}
.section-title{font-size:1rem;font-weight:800;margin-bottom:14px}
.badge{font-weight:700}
.search-box{position:relative}.search-box .form-control{padding-left:42px}.search-icon{position:absolute;left:14px;top:39px;color:#829089}
.employee-result{cursor:pointer;border:1px solid var(--line);border-radius:12px;padding:13px;background:#fff}.employee-result:hover{border-color:#9ac7a8;background:#f5fbf7}
.offcanvas{width:300px!important}.mobile-menu .nav-link-item{font-size:.98rem}
.login-page{min-height:100vh;background:radial-gradient(circle at 10% 10%,#e9f6ed,transparent 32%),linear-gradient(135deg,#f6faf7,#eef5f1)}
.login-card{border:1px solid #dce9e0;border-radius:22px;box-shadow:0 25px 70px rgba(19,61,38,.12)}
.login-logo{width:100px;height:100px;object-fit:contain}.login-brand{font-weight:850;letter-spacing:-.03em}
.empty-state{padding:44px 20px;text-align:center;color:var(--muted)}
@media(max-width:1199.98px){.detail-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:991.98px){
 .main-content{padding:20px!important}.app-navbar{height:64px}.app-shell{min-height:calc(100vh - 64px)}
 .brand-logo{height:42px;width:42px}.brand-text{font-size:.96rem}.brand-text small{display:none}
 .sidebar{min-height:calc(100vh - 64px)}
}
@media(max-width:575.98px){
 body{font-size:14px}.main-content{padding:14px!important}.page-title{font-size:1.45rem}
 .card{border-radius:13px}.stat-card{min-height:112px;padding:16px!important}.stat{font-size:1.55rem}
 .quick-card{padding:15px}.detail-grid{grid-template-columns:1fr}.profile-avatar{width:58px;height:58px}
 .table{font-size:.84rem}.btn-lg{width:100%;margin:4px 0!important}.clock-box{width:100%;text-align:center}
}

/* V12 mobile usability fixes */
.mobile-menu .nav-link-item{min-height:46px}
.header-actions{flex-shrink:0}
.employee-checkin-card{border:1px solid #dcebe1;border-radius:18px;background:linear-gradient(135deg,#ffffff,#f1f9f4)}
.checkin-action{min-height:54px;font-size:1rem;padding:.8rem 1.1rem}
.checkin-action:disabled{opacity:.55;cursor:not-allowed}
.attendance-actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap}
@media(max-width:575.98px){
 .app-navbar{height:58px;padding-top:0!important;padding-bottom:0!important}
 .app-navbar .container-fluid{padding-left:10px!important;padding-right:10px!important;min-width:0}
 .app-navbar .navbar-brand{min-width:0;max-width:calc(100vw - 112px);overflow:hidden}
 .app-navbar .brand-logo{height:36px;width:36px;flex:0 0 36px}
 .app-navbar .brand-text{font-size:.86rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .header-actions{gap:5px!important}
 .header-actions .header-attendance{display:none}
 .header-actions .logout-text{display:none}
 .header-actions .btn{width:40px;height:40px;padding:0;display:grid;place-items:center}
 .header-actions .btn i{margin:0!important}
 .main-content{padding:12px!important}
 .page-title{font-size:1.35rem;line-height:1.2}
 .page-subtitle{font-size:.88rem}
 .employee-checkin-card{padding:15px!important}
 .employee-checkin-card .checkin-action{width:100%;margin:0!important}
 .attendance-actions{display:grid;grid-template-columns:1fr;gap:10px}
 .attendance-actions .btn{width:100%;margin:0!important}
 .stat-card{min-height:130px}
 .quick-card{min-height:150px}
}
@media(min-width:576px) and (max-width:991.98px){
 .header-actions .header-attendance{display:none}
}