:root{
 --imc:#2fbf5b;--imc-dark:#0d7f38;--ink:#14251b;--muted:#6f7c75;
 --bg:#f5f8f6;--card:#fff;--line:#e7eee9;--danger:#e34d59;--warning:#f0a53a;
}
*{box-sizing:border-box} body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
a{text-decoration:none}.app-shell{min-height:100vh}.sidebar{position:fixed;left:0;top:0;bottom:0;width:250px;background:#101612;color:#fff;padding:22px 16px;z-index:20}
.brand{display:flex;align-items:center;gap:12px;padding:6px 8px 24px}.brand img{width:48px;height:60px;object-fit:cover;border-radius:12px;background:#000}.brand strong{font-size:16px;line-height:1.2}.brand small{display:block;color:#9ca9a1;margin-top:3px}
.nav-title{font-size:11px;text-transform:uppercase;color:#718078;letter-spacing:.08em;padding:14px 10px 7px}.nav-item{display:flex;gap:11px;align-items:center;color:#cbd5ce;padding:11px 12px;border-radius:12px;margin:3px 0;font-size:14px}.nav-item:hover,.nav-item.active{background:#1d2a21;color:#fff}.nav-item.active{box-shadow:inset 3px 0 var(--imc)}.logout{position:absolute;bottom:18px;left:16px;right:16px}
.main{margin-left:250px;min-height:100vh}.topbar{height:72px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 28px;position:sticky;top:0;z-index:10}.page{padding:28px;max-width:1400px;margin:auto}
.welcome h1{font-size:26px;margin:0}.muted{color:var(--muted)}.profile{display:flex;align-items:center;gap:10px}.avatar{width:38px;height:38px;border-radius:50%;background:#dff5e6;color:#167d3c;display:grid;place-items:center;font-weight:700}.avatar-img{object-fit:contain;padding:2px;background:#fff;border:1px solid #dcebe0}.avatar-default{object-fit:contain}
.grid{display:grid;gap:16px}.grid-4{grid-template-columns:repeat(4,1fr)}.grid-5{grid-template-columns:repeat(5,1fr)}.grid-2{grid-template-columns:repeat(2,1fr)}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:0 5px 20px rgba(20,37,27,.04)}.card-body{padding:20px}.stat{display:flex;justify-content:space-between;align-items:center}.stat .icon{width:46px;height:46px;border-radius:14px;background:#e7f8ec;display:grid;place-items:center;color:var(--imc-dark);font-size:20px}.stat h2{margin:6px 0 0;font-size:28px}.section-title{font-size:17px;font-weight:700;margin-bottom:15px}
.btn{border-radius:11px;border:0;padding:10px 15px;font-weight:600}.btn-primary{background:var(--imc);color:#fff}.btn-primary:hover{background:var(--imc-dark);color:#fff}.btn-light{background:#f0f5f2;color:var(--ink)}.btn-danger{background:#fde8ea;color:#b62e3b}.btn-success{background:#e4f7e9;color:#18783a}
.table-wrap{overflow:auto}.table{margin:0;background:#fff}.table th{font-size:12px;text-transform:uppercase;color:#748078;background:#f8faf9;border-bottom:1px solid var(--line)}.table td,.table th{padding:13px 12px;vertical-align:middle;border-color:var(--line)}
.badge{border-radius:30px;padding:6px 10px;font-size:11px}.badge-pending{background:#fff3df;color:#9a6100}.badge-approved{background:#e5f7ea;color:#18783a}.badge-rejected{background:#fde8ea;color:#b62e3b}
.quick{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.quick a{padding:16px;border:1px solid var(--line);border-radius:15px;color:var(--ink);background:#fff}.quick a:hover{border-color:#b8e8c6;transform:translateY(-1px)}.quick b{display:block;margin-top:8px;font-size:14px}
.mobile-menu{display:none}.mobile-bottom{display:none}
.form-control,.form-select{border-radius:11px;border-color:#dfe8e2;padding:11px 12px}.form-control:focus,.form-select:focus{border-color:#65cf82;box-shadow:0 0 0 .2rem rgba(47,191,91,.12)}
.login-page{min-height:100vh;background:linear-gradient(135deg,#effaf2,#f7fbf8);display:grid;place-items:center;padding:20px}.login-card{width:min(430px,100%);background:#fff;border:1px solid var(--line);border-radius:24px;padding:32px;box-shadow:0 20px 50px rgba(20,37,27,.08)}.login-logo{width:96px;height:96px;object-fit:contain;border-radius:20px;background:#fff;display:block;margin:0 auto 18px}.login-card h1{text-align:center;font-size:24px}.login-card .subtitle{text-align:center;color:var(--muted);margin-bottom:25px}
@media(max-width:900px){.sidebar{display:none}.main{margin-left:0}.topbar{height:64px;padding:0 16px}.page{padding:18px 14px 90px}.mobile-menu{display:block;border:0;background:#f0f5f2;border-radius:10px;padding:8px 10px}.grid-4{grid-template-columns:repeat(2,1fr)}.grid-5{grid-template-columns:repeat(3,1fr)}.grid-2{grid-template-columns:1fr}.quick{grid-template-columns:repeat(2,1fr)}.mobile-bottom{display:flex;position:fixed;bottom:0;left:0;right:0;height:66px;background:#fff;border-top:1px solid var(--line);z-index:30;justify-content:space-around;align-items:center}.mobile-bottom a{font-size:10px;color:#718078;text-align:center}.mobile-bottom a.active{color:var(--imc-dark);font-weight:700}.mobile-bottom span{display:block;font-size:20px;margin-bottom:2px}.topbar .desktop-user{display:none}}
@media(max-width:480px){.grid-4{grid-template-columns:1fr 1fr}.grid-5{grid-template-columns:1fr 1fr}.stat h2{font-size:23px}.welcome h1{font-size:21px}.card-body{padding:16px}.quick a{padding:13px}}

/* v7 */
html[data-theme="dark"]{--bg:#0f1511;--card:#172019;--line:#2a382e;--ink:#edf5ef;--muted:#9eaaa2}
html[data-theme="dark"] body{background:var(--bg);color:var(--ink)}
html[data-theme="dark"] .topbar,html[data-theme="dark"] .mobile-bottom{background:#151d17;color:var(--ink);border-color:var(--line)}
html[data-theme="dark"] .card,html[data-theme="dark"] .quick a{background:var(--card);border-color:var(--line);color:var(--ink)}
html[data-theme="dark"] .table{--bs-table-bg:#172019;--bs-table-color:#edf5ef;--bs-table-border-color:#2a382e}
html[data-theme="dark"] .table th{background:#1d2921;color:#b6c1b9}
html[data-theme="dark"] .form-control,html[data-theme="dark"] .form-select{background:#121a14;color:#edf5ef;border-color:#35443a}
html[data-theme="dark"] .btn-light{background:#253229;color:#edf5ef}
html[data-theme="dark"] .dropdown-menu{background:#172019;border-color:#2a382e}
html[data-theme="dark"] .dropdown-item{color:#edf5ef}.dropdown-item:hover{background:#253229}
.sidebar-toggle{border:0;background:#eef5f0;color:#294132;border-radius:10px;padding:8px 11px;font-size:18px;cursor:pointer}
.top-user{position:relative}.profile-btn{border:0;background:transparent;display:flex;align-items:center;gap:9px;padding:3px 7px;border-radius:12px}.profile-btn:hover{background:#f1f5f2}
.user-label{display:flex;flex-direction:column;text-align:left;line-height:1.2}.user-label small{color:var(--muted);font-size:11px;text-transform:capitalize}
.profile-photo-large{width:88px;height:88px;object-fit:cover;border-radius:50%;border:3px solid #dcebe0}.profile-photo-default{object-fit:cover;background:#fff;padding:0}.avatar-lg{width:88px;height:88px;border-radius:50%;font-size:30px}
html[data-sidebar="collapsed"] .sidebar{width:78px;padding-left:10px;padding-right:10px}
html[data-sidebar="collapsed"] .main{margin-left:78px}
html[data-sidebar="collapsed"] .brand{justify-content:center;padding-left:0;padding-right:0}
html[data-sidebar="collapsed"] .brand-text,html[data-sidebar="collapsed"] .nav-title,html[data-sidebar="collapsed"] .nav-item span{display:none}
html[data-sidebar="collapsed"] .nav-item{justify-content:center;padding:12px 8px;font-size:20px}
html[data-sidebar="collapsed"] .logout{left:10px;right:10px}
@media(max-width:900px){
 .sidebar{display:block;transform:translateX(-100%);width:270px;transition:transform .2s ease;box-shadow:10px 0 30px rgba(0,0,0,.15)}
 .main{margin-left:0!important}.sidebar-toggle{display:block}.sidebar .logout{display:none}
 body.menu-open .sidebar{transform:translateX(0)}
 .topbar{gap:10px}.user-label{display:none}.profile-btn{padding:2px}.page{overflow-x:hidden}.table-wrap{max-width:100%}
}
@media(min-width:901px){.sidebar-toggle{display:block}}


/* v10 - collapsible navigation sections */
.nav-section-title{display:flex;align-items:center;justify-content:space-between;cursor:pointer;user-select:none}
.nav-section-title b{font-size:15px;font-weight:600;color:#718078;transition:transform .18s}
.nav-section-title.is-collapsed b{transform:none}.nav-section-title:focus{outline:2px solid var(--imc);outline-offset:2px;border-radius:7px}
.nav-section{overflow:hidden;max-height:900px;transition:max-height .2s ease,opacity .18s ease}
.nav-section.is-collapsed{max-height:0!important;opacity:0;visibility:hidden;margin:0;padding:0;pointer-events:none}

.info-box{padding:15px 17px;border:1px solid var(--line);background:#f8fbf9;border-radius:14px}
.info-box b{display:block;margin-bottom:10px}
.info-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.info-grid small{display:block;color:var(--muted);font-size:11px;text-transform:uppercase}
.info-grid strong{display:block;margin-top:3px}
@media(max-width:700px){.info-grid{grid-template-columns:repeat(2,1fr)}}
html[data-theme="dark"] .info-box{background:#1d2921;border-color:var(--line)}

.birthday-list{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.birthday-item{display:flex;align-items:center;gap:11px;padding:12px;border:1px solid var(--line);border-radius:14px;background:#fbfdfb}
.birthday-item small{display:block;margin-top:3px}
html[data-theme="dark"] .birthday-item{background:#151d17}
@media(max-width:900px){.birthday-list{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.birthday-list{grid-template-columns:1fr}}

/* Login anti-autofill: visible password proxy is a text field, visually masked. */
.login-password-proxy{-webkit-text-security:disc;text-security:disc;}

/* PWA install helper */
.install-help{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;padding:20px}.install-help-card{position:relative;width:min(420px,100%);background:#fff;border-radius:18px;padding:24px;box-shadow:0 20px 60px rgba(0,0,0,.25);color:#152019}.install-help-card h2{font-size:20px;margin:0 28px 14px 0}.install-help-card p{line-height:1.55;margin:0 0 10px}.install-help-note{font-size:13px;color:#66736b}.install-help-close{position:absolute;right:10px;top:8px;border:0;background:transparent;font-size:30px;line-height:1;color:#5b665f;cursor:pointer;padding:2px 8px}.install-help-close:focus{outline:2px solid #2bc35a;outline-offset:2px}
@media(max-width:576px){.install-help{padding:14px}.install-help-card{padding:20px}.login-card{padding:26px 20px}.login-logo{max-width:96px;max-height:110px;width:auto;height:auto;object-fit:contain}}

.table-search-bar{max-width:620px}.table-search-bar .table-search-input{min-height:38px}.table-search-bar .muted{font-size:1.05rem}