:root{font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:#18212f;background:#f4f6f9;--header:#172033;--primary:#1d4ed8;--border:#d7dce5}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-width:320px}body.menu-open{overflow:hidden}
.site-header{background:var(--header);color:#fff;min-height:60px;padding:0 18px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100;box-shadow:0 2px 12px #0002}
.brand{color:#fff;text-decoration:none;font-size:18px;font-weight:800;white-space:nowrap}.main-nav{display:flex;align-items:center;gap:4px}.nav-link{color:#e8edf7;text-decoration:none;font-size:14px;padding:9px 10px;border-radius:8px;white-space:nowrap}.nav-link:hover,.nav-link.active{background:#ffffff18;color:#fff}.nav-head,.menu-toggle,.menu-overlay{display:none}
main{max-width:1100px;margin:auto;padding:18px}h1{font-size:24px;margin:6px 0 18px}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}.card{background:#fff;border-radius:12px;padding:16px;box-shadow:0 3px 14px #00000010}.stat{font-size:30px;font-weight:800;margin-top:7px}.muted{color:#6a7280;font-size:13px}
form{background:#fff;padding:16px;border-radius:12px;margin-bottom:18px}.row{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}label{display:block;font-size:13px;font-weight:650;margin-bottom:5px}input,select,textarea,button{width:100%;padding:11px;border:1px solid #cfd5df;border-radius:8px;font:inherit}button{background:var(--primary);color:#fff;border:0;font-weight:700;cursor:pointer}.btn-danger{background:#b91c1c}.btn-secondary{background:#475569}
table{width:100%;border-collapse:collapse;background:#fff;border-radius:12px;overflow:hidden}th,td{padding:10px;border-bottom:1px solid #e7eaf0;text-align:left;font-size:13px}.alert{padding:12px;border-radius:8px;margin:10px 0}.ok{background:#dcfce7;color:#166534}.err{background:#fee2e2;color:#991b1b}video,canvas{width:100%;max-width:420px;border-radius:10px;background:#111}.badge{display:inline-block;padding:4px 8px;border-radius:99px;background:#e2e8f0;font-size:12px}.actions{display:flex;gap:8px}.actions form{padding:0;margin:0;background:none}.actions button{width:auto;padding:7px 10px}
@media(max-width:900px){
  .site-header{padding:0 14px;min-height:58px}.brand{font-size:17px}.menu-toggle{display:flex;width:44px;height:40px;padding:9px 10px;flex-direction:column;justify-content:center;gap:5px;background:#ffffff12;border:1px solid #ffffff2b;border-radius:9px}.menu-toggle span{display:block;width:100%;height:2px;background:#fff;border-radius:2px}
  .menu-overlay{display:block;position:fixed;inset:0;background:#0008;opacity:0;visibility:hidden;transition:.22s;z-index:109}.main-nav{display:flex;position:fixed;top:0;right:0;bottom:0;width:min(84vw,330px);padding:0 14px 24px;background:#fff;flex-direction:column;align-items:stretch;gap:4px;transform:translateX(105%);transition:transform .24s ease;z-index:110;box-shadow:-8px 0 24px #0003;overflow-y:auto}.nav-head{display:flex;align-items:center;justify-content:space-between;min-height:64px;color:#172033;border-bottom:1px solid #e7eaf0;margin-bottom:8px}.menu-close{display:block;width:40px;height:40px;padding:0;background:#eef2f7;color:#172033;font-size:28px;line-height:1}.nav-link{color:#263244;padding:13px 12px;border-radius:9px;font-size:15px}.nav-link:hover,.nav-link.active{background:#eaf0ff;color:#1745b8}.menu-open .main-nav{transform:translateX(0)}.menu-open .menu-overlay{opacity:1;visibility:visible}
  main{padding:14px 12px}h1{font-size:22px}.row{grid-template-columns:1fr}table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}.actions{min-width:max-content}
}
@media(min-width:901px){.main-nav{max-width:calc(100vw - 250px);overflow-x:auto;scrollbar-width:none}.main-nav::-webkit-scrollbar{display:none}}
.button-link{display:inline-flex;align-items:center;justify-content:center;padding:11px 16px;border-radius:9px;background:var(--primary);color:#fff;text-decoration:none;font-weight:750;white-space:nowrap}.employee-hero{background:linear-gradient(135deg,#172033,#29436f);color:#fff;border-radius:16px;padding:22px;margin-bottom:16px;display:flex;justify-content:space-between;align-items:center;gap:14px}.employee-hero h2{margin:3px 0 5px;font-size:28px}.employee-hero p,.employee-hero .eyebrow{margin:0;color:#dce6f8}.eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:11px;font-weight:800}.today-date{background:#ffffff18;padding:9px 12px;border-radius:9px;font-size:13px}.status-large{font-size:24px;font-weight:850;margin-top:8px;text-transform:capitalize}.stat-small{font-size:22px;font-weight:800;margin-top:8px}.attendance-cta{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:16px 0}.attendance-cta h3,.profile-grid h3{margin:0 0 7px}.badge.success{background:#dcfce7;color:#166534}.badge.warning{background:#fef3c7;color:#92400e}.profile-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.mini-list{display:grid;gap:2px}.mini-row{display:grid;grid-template-columns:70px 1fr 90px;align-items:center;gap:8px;padding:9px 0;border-bottom:1px solid #edf0f4;font-size:13px}.table-wrap{overflow:auto;border-radius:12px}
@media(max-width:700px){.employee-hero{align-items:flex-start;flex-direction:column}.employee-hero h2{font-size:24px}.attendance-cta{align-items:stretch;flex-direction:column}.button-link{width:100%}.profile-grid{grid-template-columns:1fr}.employee-summary{grid-template-columns:1fr 1fr}.employee-summary .card:first-child{grid-column:1/-1}.mini-row{grid-template-columns:58px 1fr 82px}}

/* v1.4.1 camera reliability */
#camera{width:100%;max-width:520px;min-height:280px;aspect-ratio:3/4;object-fit:cover;background:#111827;border-radius:18px;transform:scaleX(-1);display:block;margin:14px auto}
#snapshot{width:100%;max-width:520px;border-radius:18px;margin:14px auto}
.camera-status{padding:12px 14px;border-radius:12px;margin:10px 0;font-weight:600}
.camera-status.info{background:#eef2ff;color:#3730a3}
.camera-status.success{background:#ecfdf3;color:#067647}
.camera-status.error{background:#fef3f2;color:#b42318}
button:disabled{opacity:.55;cursor:not-allowed}

/* v1.5 CRUD controls */
.actions{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.inline-form{display:inline;margin:0;padding:0;background:transparent}.action-btn{display:inline-flex;width:auto;min-width:58px;align-items:center;justify-content:center;padding:7px 10px;border:0;border-radius:7px;font-size:12px;font-weight:750;text-decoration:none;color:#fff;cursor:pointer}.action-btn.view{background:#475569}.action-btn.edit{background:#0369a1}.action-btn.delete{background:#b91c1c}.detail-card{background:#fff;border-radius:12px;padding:18px;margin:16px 0;box-shadow:0 3px 14px #00000010}.detail-card h3{margin-top:0}.detail-card dl{display:grid;grid-template-columns:minmax(110px,180px) 1fr;gap:8px 16px;margin:0}.detail-card dt{font-weight:750;color:#475569}.detail-card dd{margin:0}.badge.danger{background:#fee2e2;color:#991b1b}small{color:#64748b}
@media(max-width:600px){.detail-card dl{grid-template-columns:1fr;gap:3px}.detail-card dd{margin-bottom:8px}.action-btn{min-width:54px;padding:7px 8px}}

/* v1.6 Exclusive glossy pink presentation theme */
:root{--header:#2b0a20;--primary:#ec2f87;--primary-dark:#9f174f;--pink:#ff4fa3;--rose:#b81357;--ink:#271827;--paper:#fff8fc;--border:#f1c9dd;background:radial-gradient(circle at top right,#ffe5f2 0,#f8f6fb 38%,#f2f4f8 100%);color:var(--ink)}
body{background:radial-gradient(circle at 90% 0,#ffd7eb 0,transparent 30%),linear-gradient(160deg,#fffafd 0,#f4f5fa 60%,#fff1f8 100%);min-height:100vh}
.site-header{background:linear-gradient(135deg,#230716 0,#6d123f 55%,#2a0a1e 100%);box-shadow:0 10px 30px #6d123f35;border-bottom:1px solid #ffffff24;min-height:72px}
.brand{display:flex;align-items:center;gap:11px;text-shadow:0 2px 9px #0008}.brand small{display:block;font-size:8px;letter-spacing:.22em;color:#ffc9e2;margin-bottom:2px}.brand-logo{width:42px;height:42px;border-radius:13px;object-fit:contain;background:#fff;padding:5px;box-shadow:inset 0 1px 0 #fff,0 6px 15px #0005;border:1px solid #ffffff80}
.page-title-wrap{margin:4px 0 20px}.page-kicker,.eyebrow{font-size:10px;font-weight:900;letter-spacing:.18em;color:#bd2a70}.page-title-wrap h1{font-size:clamp(28px,5vw,44px);line-height:1;margin:6px 0 0;background:linear-gradient(135deg,#201321,#8b164f 70%);-webkit-background-clip:text;background-clip:text;color:transparent}
.card,form,.detail-card,.preview-panel{border:1px solid #fff;background:linear-gradient(145deg,#ffffffee,#fff7fbdd);box-shadow:0 18px 45px #7d164a16, inset 0 1px 0 #fff;border-radius:22px;backdrop-filter:blur(14px)}
.card{position:relative;overflow:hidden}.card:before{content:"";position:absolute;inset:0 0 auto;height:4px;background:linear-gradient(90deg,#ff76b8,#e9287d,#951346)}.stat{color:#97164e;text-shadow:0 2px 0 #fff;font-size:38px}
button,.button-link,.glossy-btn,.action-btn{border:1px solid #ff97c5;background:linear-gradient(180deg,#ff85bd 0,#ed2d83 45%,#ad174f 100%);box-shadow:inset 0 2px 1px #ffffffaa,inset 0 -3px 7px #7e0b3c99,0 8px 18px #c41e6a35;text-shadow:0 1px 1px #76103b;color:#fff;transition:transform .16s ease,box-shadow .16s ease,filter .16s ease}.glossy-btn{padding:14px 18px;border-radius:14px;font-size:16px;font-weight:900}.glossy-btn:hover,button:hover,.button-link:hover,.action-btn:hover{filter:saturate(1.12) brightness(1.04);transform:translateY(-1px);box-shadow:inset 0 2px 1px #ffffffcc,inset 0 -3px 7px #7e0b3c99,0 12px 24px #c41e6a44}.glossy-btn:active,button:active{transform:translateY(1px)}
.btn-secondary,.action-btn.view{background:linear-gradient(180deg,#fff,#e9dce4);color:#5b2340;text-shadow:none;border-color:#efd0df;box-shadow:inset 0 2px 1px #fff,0 6px 14px #5f173120}.action-btn.edit{background:linear-gradient(180deg,#ff8ec4,#dc2677,#9c1348)}.btn-danger,.action-btn.delete{background:linear-gradient(180deg,#ff7d92,#dc284c,#8f102b);border-color:#ff9eac}
input,select,textarea{background:#fffafd;border:1px solid #e8bfd3;box-shadow:inset 0 2px 5px #6c14300c;outline:none;transition:.2s}input:focus,select:focus,textarea:focus{border-color:#ef4b96;box-shadow:0 0 0 4px #ef4b9618,inset 0 2px 5px #6c14300c}
table{border-radius:18px;box-shadow:0 16px 34px #73143e12;border:1px solid #f3dbe7}th{background:linear-gradient(180deg,#fff1f8,#fbe1ee);color:#762044;font-weight:900}tr:hover td{background:#fff7fb}.badge{background:linear-gradient(180deg,#fff,#f8dce9);border:1px solid #ecc2d6;color:#7a2248}
.main-nav{background:linear-gradient(180deg,#fff,#fff6fb)}.nav-link{font-weight:700}.nav-link.active{background:linear-gradient(135deg,#fff0f7,#ffd6e9);color:#951346;box-shadow:inset 0 1px 0 #fff,0 6px 18px #a7195b17}
.branding-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,.8fr);gap:18px;align-items:start}.lux-form{padding:22px}.section-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:18px}.section-heading h2,.preview-panel h2{margin:5px 0 0}.status-pill{display:inline-flex;padding:7px 10px;border-radius:99px;background:#e8fff2;color:#087541;font-size:11px;font-weight:850;border:1px solid #bcebd2}.switch-line{display:flex;align-items:center;gap:9px;margin:8px 0 12px;color:#6c3651;font-weight:750}.switch-line input{appearance:none;width:42px;height:23px;padding:0;margin:0;border-radius:99px;background:#e8d9e1;position:relative;cursor:pointer}.switch-line input:after{content:"";position:absolute;width:17px;height:17px;left:3px;top:2px;border-radius:50%;background:#fff;box-shadow:0 2px 5px #0003;transition:.2s}.switch-line input:checked{background:linear-gradient(90deg,#e82c82,#a81650)}.switch-line input:checked:after{left:20px}.danger-line{color:#9c2441}.master-switch{padding:14px;border:1px solid #f0cade;border-radius:14px;background:#fff5fa}.upload-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:16px 0}.upload-card{border:1px dashed #e7a8c7;border-radius:18px;padding:14px;background:linear-gradient(145deg,#fff,#fff4f9)}.upload-card img{width:110px;height:110px;display:block;object-fit:cover;border-radius:18px;margin:10px 0;box-shadow:0 8px 20px #78143d27}.upload-card .logo-preview{object-fit:contain;background:#fff}.preview-panel{padding:22px;position:sticky;top:92px}.developer-showcase{margin-top:20px;padding:22px;border-radius:24px;background:linear-gradient(145deg,#6d123f,#b51b60 55%,#f04e99);color:#fff;box-shadow:inset 0 1px 1px #ffffff77,0 20px 40px #81104340;display:flex;align-items:center;gap:15px}.developer-showcase img,.avatar-placeholder{width:78px;height:78px;border-radius:22px;object-fit:cover;background:#fff;color:#a81855;display:grid;place-items:center;font-weight:950;border:3px solid #ffffffaa;box-shadow:0 8px 18px #0004}.developer-showcase span{font-size:11px;color:#ffd9ea;text-transform:uppercase;letter-spacing:.1em}.developer-showcase h3{margin:5px 0 3px;font-size:22px}.developer-showcase p{margin:0;color:#ffe8f3}.preview-note{margin-top:14px;padding:13px;border-radius:14px;background:#fff0f7;color:#7f2950;font-size:13px}.developer-signature{max-width:1100px;margin:34px auto 8px;padding:15px 18px;border-radius:20px;background:linear-gradient(135deg,#2b0a20,#7e1749 55%,#b71e65);color:#fff;box-shadow:inset 0 1px 0 #ffffff55,0 18px 35px #6e123a30;display:flex;align-items:center;gap:14px;flex-wrap:wrap}.developer-signature>img{width:52px;height:52px;border-radius:15px;object-fit:cover;border:2px solid #fff}.developer-copy{display:grid;line-height:1.15}.developer-copy span{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:#ffc9e2}.developer-copy strong{font-size:18px;margin:3px 0}.developer-copy small{color:#ffe4f1}.developer-links{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}.developer-links a,.developer-links span{color:#fff;text-decoration:none;padding:7px 10px;border-radius:10px;background:#ffffff14;border:1px solid #ffffff24;font-size:12px}.developer-signature>p{width:100%;margin:0;color:#ffe9f3;font-size:12px}
@media(max-width:850px){.branding-grid{grid-template-columns:1fr}.preview-panel{position:static}.upload-grid{grid-template-columns:1fr}.developer-signature{margin-left:0;margin-right:0}.developer-links{margin-left:0;width:100%}}

/* v1.7 Premium login and report export */
.login-page{min-height:100vh;overflow-x:hidden;background:linear-gradient(145deg,#200516 0%,#72113f 47%,#f13e8c 100%);position:relative;color:#fff}.login-page:before{content:"";position:fixed;inset:0;background:radial-gradient(circle at 15% 18%,#ffacd388 0,transparent 23%),radial-gradient(circle at 86% 80%,#ffdae955 0,transparent 27%),linear-gradient(115deg,transparent 0 48%,#ffffff09 49% 51%,transparent 52%);pointer-events:none}.login-orb{position:fixed;border-radius:50%;filter:blur(3px);opacity:.52;box-shadow:inset 8px 8px 24px #ffffff55,inset -14px -14px 30px #5a052f88,0 25px 70px #22031366}.orb-one{width:190px;height:190px;background:linear-gradient(145deg,#ff9bca,#cc1f70);left:-55px;top:9%}.orb-two{width:125px;height:125px;background:linear-gradient(145deg,#fff,#ff81bd);right:4%;top:7%}.orb-three{width:240px;height:240px;background:linear-gradient(145deg,#a30f57,#ff78b7);right:-90px;bottom:-60px}.premium-login-shell{width:min(1120px,94vw);min-height:100vh;margin:auto;padding:34px 0;display:grid;grid-template-columns:1.08fr .92fr;align-items:center;gap:54px;position:relative;z-index:2}.login-showcase{padding:35px}.showcase-badge{display:inline-flex;padding:9px 13px;border-radius:999px;background:#ffffff14;border:1px solid #ffffff38;box-shadow:inset 0 1px 0 #ffffff55;font-size:11px;letter-spacing:.13em;font-weight:900}.login-company-logo,.login-logo-placeholder{width:92px;height:92px;margin:25px 0 22px;border-radius:28px;object-fit:contain;background:#fff;padding:10px;color:#a51458;display:grid;place-items:center;font-size:32px;font-weight:950;box-shadow:inset 0 2px 2px #fff,0 22px 48px #1d031855;border:1px solid #ffffffaa}.login-showcase h1{font-size:clamp(40px,5.2vw,69px);line-height:.98;letter-spacing:-.045em;color:#fff;margin:0;max-width:710px;text-shadow:0 7px 28px #2c031c70}.login-showcase h1 span{color:#ffd2e7}.login-showcase>p{font-size:17px;line-height:1.65;color:#ffe9f3;max-width:620px}.login-feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:28px}.login-feature-grid div{padding:16px;border:1px solid #ffffff2c;background:#ffffff10;border-radius:18px;backdrop-filter:blur(12px);box-shadow:inset 0 1px 0 #ffffff38}.login-feature-grid strong{display:block;font-size:22px}.login-feature-grid span{display:block;color:#ffd9e9;font-size:12px;margin-top:3px}.login-glass-card{padding:34px;border-radius:34px;background:linear-gradient(145deg,#ffffffee,#fff4f9d8);border:1px solid #ffffffd6;box-shadow:inset 0 2px 1px #fff,0 35px 90px #27021770,0 8px 20px #fff4;backdrop-filter:blur(24px);color:#2a1723;position:relative;overflow:hidden}.login-glass-card:before{content:"";position:absolute;left:0;right:0;top:0;height:7px;background:linear-gradient(90deg,#ffb4d5,#f52b83,#8f0f49)}.mobile-login-brand{display:none;align-items:center;gap:10px;font-weight:900}.mobile-login-brand img,.mini-logo{width:42px;height:42px;object-fit:contain;padding:4px;border-radius:13px;background:#fff;color:#a51458;display:grid;place-items:center;box-shadow:0 7px 16px #7b124b22}.login-heading{margin:8px 0 25px}.login-kicker{font-size:10px;letter-spacing:.18em;color:#b51d64;font-weight:950}.login-heading h2{font-size:39px;margin:6px 0 6px;letter-spacing:-.035em}.login-heading p{margin:0;color:#77626e}.premium-login-form{padding:0;margin:0;background:none;border:0;box-shadow:none;backdrop-filter:none}.premium-login-form label{font-size:13px;margin:15px 0 7px}.input-icon-wrap{position:relative}.input-icon-wrap input{height:58px;padding-left:46px;padding-right:70px;border-radius:16px;background:#fff;border-color:#edc7da;font-size:15px}.field-icon{position:absolute;left:17px;top:50%;transform:translateY(-50%);color:#c02a70;font-weight:900;z-index:1}.password-toggle{position:absolute;right:8px;top:8px;width:auto;height:42px;padding:0 13px;border-radius:11px;background:#fff0f7;color:#9f174f;text-shadow:none;box-shadow:none;border:1px solid #f0c9dc;font-size:12px}.login-options{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:15px 0}.remember-line{display:flex!important;align-items:center;gap:8px;margin:0!important;font-weight:650!important;color:#604756}.remember-line input{width:18px;height:18px;margin:0;padding:0;accent-color:#e52a80}.secure-note{font-size:11px;color:#7e6a76}.premium-login-button{height:60px;border-radius:17px;font-size:17px;display:flex;justify-content:center;gap:18px;align-items:center}.premium-login-button b{font-size:24px;line-height:1}.login-help{text-align:center;color:#74616d;font-size:12px;line-height:1.55;margin:18px 10px 8px}.login-credit{text-align:center;border-top:1px solid #eed6e2;margin-top:18px;padding-top:16px;color:#8d6b7d;font-size:11px}.login-credit strong{color:#a91758}.report-toolbar{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 22px;margin-bottom:18px;border-radius:24px;background:linear-gradient(135deg,#3b0928,#a51859 62%,#ec408d);color:#fff;box-shadow:inset 0 1px 0 #ffffff55,0 20px 40px #76133e30}.report-toolbar h2{margin:4px 0;font-size:22px}.report-toolbar .muted{color:#ffe2f0}.export-actions{display:flex;gap:9px;flex-wrap:wrap}.export-btn{width:auto;min-width:90px;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:12px 14px;border-radius:14px;color:#fff;text-decoration:none;font-weight:850;border:1px solid #ffffff50;box-shadow:inset 0 2px 1px #ffffff66,0 8px 16px #31051f30;transition:.16s}.export-btn:hover{transform:translateY(-2px);filter:brightness(1.07)}.export-btn.pdf{background:linear-gradient(180deg,#ff758b,#ce183d)}.export-btn.excel{background:linear-gradient(180deg,#55c98c,#167249)}.export-btn.csv{background:linear-gradient(180deg,#57a8ff,#145ec3)}.export-btn.print{background:linear-gradient(180deg,#fff,#ded9e1);color:#47283a;text-shadow:none;border-color:#fff}.report-filter{padding:18px}.filter-submit{align-self:end}.print-report-header{display:none}.report-section-title{margin-top:28px}.empty-cell{text-align:center!important;color:#7b6873;padding:28px!important}
@media(max-width:850px){.premium-login-shell{grid-template-columns:1fr;width:min(520px,92vw);padding:22px 0}.login-showcase{display:none}.login-glass-card{padding:25px 20px;border-radius:28px}.mobile-login-brand{display:flex;margin-bottom:26px}.login-heading h2{font-size:34px}.report-toolbar{align-items:flex-start;flex-direction:column}.export-actions{width:100%;display:grid;grid-template-columns:1fr 1fr}.export-btn{width:100%}.login-orb{opacity:.35}}
@media(max-width:420px){.premium-login-shell{width:94vw}.login-glass-card{padding:23px 17px}.login-options{align-items:flex-start;flex-direction:column}.input-icon-wrap input{height:56px}.login-heading h2{font-size:31px}}
@media print{body{background:#fff!important;color:#000!important}.site-header,.page-title-wrap,.developer-signature,.no-print{display:none!important}main{max-width:none!important;padding:0!important}.print-report-header{display:block;margin-bottom:18px}.print-report-header h2{margin:0 0 4px}table{box-shadow:none!important;border:1px solid #999!important;border-radius:0!important;display:table!important;font-size:10px}th,td{padding:5px!important;font-size:10px!important;color:#000!important}th{background:#eee!important}.table-wrap{overflow:visible!important}.report-section-title{page-break-before:auto}tr{page-break-inside:avoid}}

/* v1.8 Emerald Executive theme — original HRMS skin */
:root{--header:#062c25;--primary:#1fae78;--primary-dark:#0b6a4c;--ink:#f5fff9;--paper:#0b3a30;--border:#2d6b5c;--emerald-950:#031d18;--lime:#c8f25a}
html{background:var(--emerald-950)}
body:not(.login-page){color:#eefcf5;background:radial-gradient(circle at 12% 0,#176f582e 0,transparent 28%),radial-gradient(circle at 95% 18%,#b9ef5820 0,transparent 24%),linear-gradient(165deg,#031f19 0,#052c24 44%,#021712 100%)}
body:not(.login-page):before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.18;background-image:linear-gradient(#ffffff05 1px,transparent 1px),linear-gradient(90deg,#ffffff05 1px,transparent 1px);background-size:34px 34px}
.site-header{background:linear-gradient(135deg,#031d18,#0a4939 58%,#041f19);border-bottom:1px solid #83e9b82d;box-shadow:0 12px 34px #0008,inset 0 -1px 0 #bfffe321}.brand small{color:var(--lime)}
.page-kicker,.eyebrow{color:var(--lime)}.page-title-wrap h1{background:linear-gradient(135deg,#fff,#bff9d8 70%,#c8f25a);-webkit-background-clip:text;background-clip:text;color:transparent}
.card,form,.detail-card,.preview-panel,table,.table-wrap{color:#effcf6;background:linear-gradient(145deg,#0e493bdd,#072d25e8);border:1px solid #7be4b637;box-shadow:inset 0 1px 0 #d5ffed20,0 18px 44px #0007;backdrop-filter:blur(16px)}
.card{border-radius:24px}.card:before{background:linear-gradient(90deg,var(--lime),#35d69a,#0b7b58)}.stat,.stat-small,.status-large{color:#fff;text-shadow:0 2px 0 #000,0 0 20px #64efb34d}.muted,small{color:#b9d7ca}.card h2,.card h3,.detail-card h3{color:#fff}
input,select,textarea{color:#f6fff9;background:#082a23;border:1px solid #4b8d78;box-shadow:inset 0 2px 8px #0005}input::placeholder,textarea::placeholder{color:#88aa9d}select option{background:#082a23;color:#fff}input:focus,select:focus,textarea:focus{outline:none;border-color:var(--lime);box-shadow:0 0 0 3px #c8f25a24,inset 0 2px 8px #0005}label{color:#effcf6}
button,.button-link,.glossy-btn,.action-btn{color:#06251d;text-shadow:0 1px 0 #ffffffaa;border:1px solid #dcff8d;background:linear-gradient(180deg,#e1ff7d 0,#9fe13f 48%,#4f9d28 100%);box-shadow:inset 0 2px 1px #fff,inset 0 -4px 9px #2e6a22aa,0 10px 22px #0006,0 0 18px #b8f34a25}
.btn-secondary,.action-btn.view{color:#ecfff5;text-shadow:none;border-color:#69a891;background:linear-gradient(180deg,#2c6d59,#154a3b)}.action-btn.edit{color:#05241c;background:linear-gradient(180deg,#8ff5cd,#35c991,#13835c);border-color:#bdfce2}.btn-danger,.action-btn.delete{color:#fff;text-shadow:0 1px 1px #500;background:linear-gradient(180deg,#ff8e8e,#d94756,#8e1f32);border-color:#ffb3b3}
.alert.ok,.camera-status.success{background:#123f2f;color:#c9ffd8;border:1px solid #67d490}.alert.err,.camera-status.error{background:#4a2028;color:#ffd5da;border:1px solid #e16d7d}.camera-status.info{background:#153d38;color:#c9fff1;border:1px solid #4da891}.badge{background:#174b3d;color:#dffbef;border:1px solid #4d8d79}
th{color:var(--lime);background:#082d25}th,td{border-color:#2b5d4f}tr:hover td{background:#ffffff07}.employee-hero,.report-toolbar,.developer-showcase,.developer-signature{background:linear-gradient(135deg,#082f27,#0b5a45 58%,#103629);border:1px solid #8ce7bd42;box-shadow:inset 0 1px 0 #ffffff32,0 22px 46px #0007}.nav-link{color:#dff7ec}.nav-link:hover,.nav-link.active{background:linear-gradient(90deg,#3d936f55,#b8f34a22);color:#fff;box-shadow:inset 3px 0 0 var(--lime)}
@media(max-width:900px){.main-nav{background:linear-gradient(180deg,#062b24,#031d18);border-left:1px solid #75d4ae44}.nav-head{color:#fff;border-color:#4a7d6b}.menu-close{background:#123d32;color:#fff}.nav-link{color:#e9fff5}.nav-link:hover,.nav-link.active{background:#1d5b47;color:#fff}}
.login-page{min-height:100vh;color:#fff;background:radial-gradient(circle at 50% -10%,#1b755a 0,transparent 34%),linear-gradient(155deg,#021914 0,#07382d 54%,#021712 100%)}.login-page:before{background:linear-gradient(#ffffff05 1px,transparent 1px),linear-gradient(90deg,#ffffff05 1px,transparent 1px);background-size:36px 36px;opacity:.42}.login-orb{display:none}.premium-login-shell{width:min(470px,92vw);grid-template-columns:1fr;gap:0;padding:28px 0}.login-showcase{display:none!important}.login-glass-card{padding:30px 26px;border-radius:30px;color:#effcf6;background:linear-gradient(145deg,#0d4a3bde,#06271fef);border:1px solid #8ce7bd55;box-shadow:inset 0 1px 0 #eafff025,0 32px 85px #000a}.login-glass-card:before{height:5px;background:linear-gradient(90deg,var(--lime),#4ce0a6,#0d7253)}.mobile-login-brand{display:flex;margin-bottom:24px;color:#fff}.login-kicker{color:var(--lime)}.login-heading h2{color:#fff;font-size:38px}.login-heading p,.secure-note,.login-help,.login-credit{color:#b9d7ca}.login-credit{border-color:#417461}.login-credit strong{color:var(--lime)}.premium-login-form{background:none!important;border:0!important;box-shadow:none!important}.premium-login-form label{color:#effcf6}.input-icon-wrap input{color:#fff;background:#05251e;border-color:#477d6b}.field-icon{color:var(--lime)}.password-toggle{color:#eafff1;background:#103e32;border-color:#477d6b;text-shadow:none;box-shadow:none}.remember-line{color:#d8eee4!important}.remember-line input{accent-color:#9fe13f}.premium-login-button{color:#08251e}
.report-toolbar .muted{color:#c8dfd5}.export-btn.pdf{background:linear-gradient(180deg,#ff8989,#bf3449)}.export-btn.excel{background:linear-gradient(180deg,#77e5ae,#16805a)}.export-btn.csv{background:linear-gradient(180deg,#7fc8ff,#2877b9)}.export-btn.print{background:linear-gradient(180deg,#f4fff8,#bdd8ca);color:#123629}
@media(max-width:600px){.login-glass-card{padding:25px 18px;border-radius:25px}.login-heading h2{font-size:32px}.page-title-wrap h1{font-size:32px}.card,form,.detail-card{border-radius:20px}}


/* v1.9 Universal responsive layout — mobile, tablet, laptop and desktop */
:root{--desktop-sidebar:286px;--content-max:1540px}
body:not(.login-page){min-height:100vh}
.site-header{min-height:72px;padding:0 24px}
.brand{display:flex;align-items:center;gap:12px;font-size:19px;line-height:1.08}.brand span{display:grid;gap:4px}.brand small{font-size:10px;letter-spacing:.18em}.brand-logo{width:44px;height:44px;object-fit:cover;border-radius:13px;border:1px solid #b7f4d64d;box-shadow:0 7px 18px #0006}
main{width:100%;max-width:var(--content-max);padding:30px clamp(20px,3vw,48px) 48px}.page-title-wrap{margin-bottom:22px}.page-title-wrap h1{font-size:clamp(30px,3vw,46px);line-height:1.05;margin:7px 0 0}
.grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}.row{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.card,form,.detail-card{padding:clamp(18px,2vw,28px)}
.table-wrap{width:100%;overflow:auto;scrollbar-color:#4f927b #09281f;scrollbar-width:thin}.table-wrap table{min-width:820px}th,td{padding:13px 14px;font-size:14px}.actions{flex-wrap:wrap}.actions .action-btn,.actions button,.actions .button-link{min-width:72px}
.employee-hero{padding:30px}.employee-hero h2{font-size:clamp(28px,3vw,42px)}.profile-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.employee-summary{grid-template-columns:repeat(4,minmax(0,1fr))}
.report-toolbar{padding:24px 28px}.report-filter .row{grid-template-columns:repeat(5,minmax(150px,1fr))}.export-actions{justify-content:flex-end}
.developer-signature{display:grid;grid-template-columns:auto minmax(180px,1fr) auto;align-items:center;gap:18px}.developer-signature p{grid-column:1/-1}

/* Large desktop / laptop: persistent left navigation */
@media(min-width:1200px){
  body:not(.login-page){padding-left:var(--desktop-sidebar)}
  .site-header{position:fixed;left:0;top:0;bottom:0;width:var(--desktop-sidebar);height:100vh;padding:26px 18px;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;overflow-y:auto;border-right:1px solid #80e5ba33;border-bottom:0}
  .brand{padding:4px 8px 24px;border-bottom:1px solid #83e9b828;white-space:normal}.brand-logo{width:50px;height:50px}.brand span{font-size:18px}
  .main-nav{display:flex!important;position:static!important;transform:none!important;width:auto!important;max-width:none!important;overflow:visible!important;padding:22px 0 0!important;background:transparent!important;box-shadow:none!important;border:0!important;flex-direction:column;align-items:stretch;gap:7px}
  .nav-head,.menu-toggle,.menu-overlay{display:none!important}.nav-link{padding:13px 15px;font-size:15px;border-radius:14px;white-space:normal}
  main{margin:0 auto;min-height:100vh}.page-title-wrap{padding-top:4px}
  .grid .card{min-height:145px}.card:hover{transform:translateY(-3px);transition:transform .2s ease,box-shadow .2s ease;box-shadow:inset 0 1px 0 #d5ffed2e,0 25px 55px #0008}
}

/* Standard desktop and landscape tablet */
@media(min-width:901px) and (max-width:1199px){
  .site-header{min-height:76px}.main-nav{gap:3px}.nav-link{font-size:13px;padding:10px 8px}
  main{padding:28px 26px 44px}.grid{grid-template-columns:repeat(3,minmax(0,1fr))}.row{grid-template-columns:repeat(2,minmax(0,1fr))}.profile-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.employee-summary{grid-template-columns:repeat(3,minmax(0,1fr))}
  .report-filter .row{grid-template-columns:repeat(3,minmax(160px,1fr))}
}

/* Tablet: drawer navigation, two-column content */
@media(min-width:768px) and (max-width:900px){
  .site-header{min-height:72px;padding:0 22px}.brand{font-size:19px}.menu-toggle{width:50px;height:46px}
  .main-nav{width:min(52vw,390px)}main{padding:26px 24px 42px}.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.row{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.profile-grid,.employee-summary{grid-template-columns:repeat(2,minmax(0,1fr))}
  .attendance-cta{align-items:center;flex-direction:row}.button-link{width:auto}.report-filter .row{grid-template-columns:repeat(2,minmax(0,1fr))}.report-toolbar{align-items:center;flex-direction:row}.export-actions{width:auto;display:flex}
  .developer-signature{grid-template-columns:auto 1fr}.developer-links{grid-column:1/-1}
}

/* Phones */
@media(max-width:767px){
  .site-header{min-height:68px;padding:0 14px}.brand{font-size:17px;max-width:calc(100vw - 82px)}.brand-logo{width:40px;height:40px}.brand small{font-size:8px}.menu-toggle{width:48px;height:44px}
  .main-nav{width:min(88vw,350px)}main{padding:20px 14px 36px}.page-title-wrap{margin-bottom:18px}.page-title-wrap h1{font-size:32px}.page-kicker{font-size:9px}
  .grid,.row,.profile-grid,.employee-summary{grid-template-columns:1fr}.grid{gap:14px}.card,form,.detail-card{padding:18px}.card{min-height:unset}
  .table-wrap{margin-inline:-2px;border-radius:16px}.table-wrap table{min-width:720px}th,td{padding:11px 10px;font-size:12px}.actions{min-width:230px;flex-wrap:nowrap}
  .employee-hero{padding:21px}.employee-hero h2{font-size:27px}.attendance-cta{align-items:stretch;flex-direction:column}.button-link{width:100%}
  .report-toolbar{padding:20px 18px;align-items:flex-start;flex-direction:column}.export-actions{width:100%;display:grid;grid-template-columns:1fr 1fr}.export-btn{width:100%;min-width:0}.report-filter .row{grid-template-columns:1fr}
  .developer-signature{display:flex;align-items:flex-start;flex-direction:column}.developer-links{width:100%}
}

/* Very small phones */
@media(max-width:390px){.brand span{font-size:15px}.brand small{display:none}.brand-logo{width:36px;height:36px}.site-header{padding-inline:10px}.menu-toggle{width:44px}.page-title-wrap h1{font-size:28px}.export-actions{grid-template-columns:1fr}.card,form,.detail-card{padding:16px}}

/* Wide-screen login remains compact and centered */
@media(min-width:768px){.premium-login-shell{width:min(510px,92vw);padding:48px 0}.login-glass-card{padding:38px 36px}.login-heading h2{font-size:42px}}

/* v2.0 Adaptive desktop/tablet correction
   901-1199px now uses a proper drawer instead of squeezing every menu item
   into one horizontal row. Real desktop (1200px+) keeps the full sidebar. */
@media (min-width:901px) and (max-width:1199px){
  body:not(.login-page){padding-left:0}
  .site-header{
    min-height:76px;
    padding:0 24px;
    position:sticky;
    top:0;
    left:auto;
    width:auto;
    height:auto;
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    overflow:visible;
    border-right:0;
    border-bottom:1px solid #83e9b82d;
  }
  .brand{padding:0;border:0;white-space:nowrap}
  .menu-toggle{
    display:flex!important;
    width:52px;
    height:48px;
    padding:10px 11px;
    flex-direction:column;
    justify-content:center;
    gap:6px;
    border-radius:14px;
  }
  .menu-toggle span{display:block;width:100%;height:2px;background:#fff;border-radius:3px}
  .menu-overlay{
    display:block!important;
    position:fixed;
    inset:0;
    background:#000a;
    opacity:0;
    visibility:hidden;
    transition:.22s;
    z-index:109;
  }
  .main-nav{
    display:flex!important;
    position:fixed!important;
    top:0;
    right:0;
    bottom:0;
    width:min(420px,72vw)!important;
    max-width:none!important;
    padding:0 20px 28px!important;
    flex-direction:column;
    align-items:stretch;
    gap:7px!important;
    transform:translateX(105%);
    transition:transform .24s ease;
    z-index:110;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    background:linear-gradient(180deg,#062b24,#031d18)!important;
    border-left:1px solid #75d4ae44!important;
    box-shadow:-18px 0 48px #0008!important;
  }
  .nav-head{display:flex!important;align-items:center;justify-content:space-between;min-height:76px;color:#fff;border-bottom:1px solid #4a7d6b;margin-bottom:10px}
  .menu-close{display:block!important;background:#123d32;color:#fff}
  .nav-link{font-size:16px!important;padding:14px 16px!important;border-radius:14px;white-space:normal!important}
  .menu-open .main-nav{transform:translateX(0)}
  .menu-open .menu-overlay{opacity:1;visibility:visible}
  main{max-width:1180px;padding:30px 28px 48px}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
  .grid .card{min-height:138px}
  .row{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
  .profile-grid,.employee-summary{grid-template-columns:repeat(2,minmax(0,1fr))}
  .report-filter .row{grid-template-columns:repeat(2,minmax(180px,1fr))}
  .developer-showcase{grid-template-columns:minmax(0,1.45fr) minmax(300px,.75fr)!important;gap:24px}
}

/* More spacious true desktop presentation. */
@media (min-width:1200px){
  main{padding:38px clamp(34px,4vw,68px) 60px}
  .page-title-wrap h1{font-size:clamp(38px,3.2vw,54px)}
  .grid{grid-template-columns:repeat(4,minmax(210px,1fr));gap:24px}
  .grid .card{min-height:160px;padding:28px}
  .card .metric,.card strong.metric{font-size:clamp(32px,3vw,48px)}
  .developer-showcase{grid-template-columns:minmax(0,1.55fr) minmax(360px,.8fr)!important;gap:30px;align-items:start}
  .developer-showcase>form,.developer-showcase>.developer-preview{min-height:100%}
  .table-wrap table{min-width:100%}
}


/* Notification Center v2.1 */
.notification-status-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-bottom:20px}.status-panel{background:linear-gradient(145deg,#fff,#f7faf8);border:1px solid rgba(25,74,55,.12);border-radius:20px;padding:22px;box-shadow:0 16px 35px rgba(25,74,55,.08);display:grid;gap:7px}.status-panel span{font-weight:800;color:#173f31}.status-panel strong{font-size:1.8rem}.status-panel small{color:#61746c}.status-on{color:#087f5b}.status-off{color:#a53838}.notification-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.notification-form section{border:1px solid rgba(25,74,55,.12);border-radius:18px;padding:20px;background:#fbfdfc}.section-heading{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:14px}.section-heading span{font-size:.72rem;letter-spacing:.14em;font-weight:900;color:#8a2859}.section-heading h2{margin:3px 0 0}.switch-control{display:flex;align-items:center;gap:8px;cursor:pointer;margin:0}.switch-control input{position:absolute;opacity:0}.switch-control span{width:44px;height:24px;border-radius:999px;background:#cbd5d1;position:relative;transition:.2s}.switch-control span:after{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:white;box-shadow:0 2px 5px #0003;transition:.2s}.switch-control input:checked+span{background:#0b8f68}.switch-control input:checked+span:after{transform:translateX(20px)}.switch-control b{font-size:.82rem}.form-note{font-size:.88rem;color:#61746c;line-height:1.55}.routing-table{border:1px solid rgba(25,74,55,.13);border-radius:16px;overflow:hidden;margin-top:12px}.routing-head,.routing-row{display:grid;grid-template-columns:minmax(180px,1fr) 120px 120px;align-items:center;gap:12px;padding:13px 16px}.routing-head{background:#163f31;color:#fff}.routing-row:nth-child(odd){background:#f7faf8}.routing-row label{margin:0;display:flex;gap:7px;align-items:center}.routing-row input{width:auto}.test-columns{margin:22px 0}.log-status{display:inline-block;border-radius:999px;padding:4px 9px;font-size:.76rem;font-weight:900;text-transform:uppercase}.log-status.sent{background:#d9f7ea;color:#087f5b}.log-status.failed{background:#ffe1e1;color:#a53838}.log-status.skipped{background:#fff1c8;color:#896500}@media(max-width:800px){.notification-status-grid,.notification-columns{grid-template-columns:1fr}.routing-head,.routing-row{grid-template-columns:1fr 1fr 1fr}.routing-head b:first-child,.routing-row strong{grid-column:1/-1}.routing-head b:first-child{display:none}}

/* v2.2 Enterprise workspace polish */
.sidebar-user{display:flex;align-items:center;gap:12px;padding:14px;margin:2px 0 10px;border:1px solid #8ce7c833;border-radius:16px;background:#ffffff0a}.sidebar-avatar{width:42px;height:42px;display:grid;place-items:center;border-radius:14px;background:linear-gradient(145deg,#d7ff58,#8fd72f);color:#0b3528;font-size:18px;font-weight:950;box-shadow:0 8px 18px #0004}.sidebar-user strong,.sidebar-user span{display:block}.sidebar-user strong{font-size:14px;color:#fff}.sidebar-user span{font-size:11px;color:#9fd0bf;text-transform:uppercase;letter-spacing:.12em;margin-top:3px}.nav-link{display:flex!important;align-items:center;gap:12px}.nav-icon{width:31px;height:31px;display:grid;place-items:center;flex:0 0 31px;border-radius:10px;background:#ffffff0a;border:1px solid #ffffff10;font-size:15px}.nav-link.active .nav-icon,.nav-link:hover .nav-icon{background:#c9ff4a;color:#153b2d;border-color:#e5ff9c;box-shadow:0 7px 18px #9ee23333}
.dashboard-hero{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:30px 32px;margin-bottom:24px;border-radius:28px;background:radial-gradient(circle at 90% 10%,#b9ff5638,transparent 25%),linear-gradient(135deg,#0a362b,#12513f 58%,#092c25);border:1px solid #8ee6c040;color:#fff;box-shadow:inset 0 1px 0 #ffffff24,0 24px 60px #001b1580}.dashboard-hero h2{font-size:clamp(29px,4vw,48px);line-height:1.05;margin:7px 0 10px}.dashboard-hero p{margin:0;color:#b9d8cd;max-width:650px}.hero-kicker{font-size:10px;font-weight:950;letter-spacing:.2em;color:#cfff54}.hero-date{min-width:122px;padding:18px;border-radius:22px;text-align:center;background:#ffffff0c;border:1px solid #ffffff22}.hero-date strong,.hero-date span,.hero-date small{display:block}.hero-date strong{font-size:40px;line-height:1;color:#d7ff58}.hero-date span{font-weight:850;margin-top:5px}.hero-date small{color:#a7c7bc;margin-top:4px}.dashboard-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-bottom:22px}.metric-card{min-height:145px;padding:22px;border-radius:22px;display:flex;align-items:center;gap:17px;background:linear-gradient(145deg,#0b3028,#103d32);border:1px solid #8de4c02e;box-shadow:inset 0 1px 0 #ffffff16,0 18px 40px #001b155c}.metric-icon{width:52px;height:52px;display:grid;place-items:center;border-radius:16px;background:linear-gradient(145deg,#d8ff5f,#9cdc38);color:#0c3b2d;font-weight:950;font-size:22px;box-shadow:0 10px 24px #9cdd3440}.metric-card span,.metric-card strong,.metric-card small{display:block}.metric-card span{color:#a9c9bd;font-size:13px}.metric-card strong{font-size:36px;line-height:1;margin:7px 0;color:#fff}.metric-card small{color:#7fad9c}.dashboard-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(310px,.7fr);gap:22px}.dashboard-panel{padding:24px!important}.panel-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px}.panel-heading span{font-size:10px;font-weight:950;letter-spacing:.17em;color:#bada49}.panel-heading h3{margin:4px 0 0;font-size:23px}.panel-heading>strong{font-size:30px;color:#d4ff54}.quick-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.quick-actions a{display:flex;align-items:center;gap:13px;padding:16px;border-radius:17px;text-decoration:none;color:inherit;background:#ffffff08;border:1px solid #ffffff13;transition:.2s}.quick-actions a:hover{transform:translateY(-2px);background:#ffffff0e;border-color:#b5ee6350}.quick-actions b{width:42px;height:42px;display:grid;place-items:center;border-radius:13px;background:#cfff4d;color:#12392c;font-size:18px}.quick-actions span,.quick-actions small{display:block}.quick-actions span{font-weight:850}.quick-actions small{font-weight:500;color:#82aa9b;margin-top:3px}.progress-track{height:12px;border-radius:999px;overflow:hidden;background:#ffffff10;border:1px solid #ffffff12}.progress-track i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#9bd934,#d8ff5a);box-shadow:0 0 18px #c8ff4f55}.health-list{display:grid;gap:10px;margin-top:19px}.health-list div{display:flex;align-items:center;justify-content:space-between;padding:11px 13px;border-radius:13px;background:#ffffff08}.health-list span{color:#a4c5b9}.health-list b{font-size:16px}.table-wrap{box-shadow:0 18px 45px #001b1538;border:1px solid #8de3bf22}.table-wrap th{position:sticky;top:0;background:#123d31;color:#eafff6;text-transform:uppercase;letter-spacing:.07em;font-size:10px}.table-wrap tbody tr{transition:.18s}.table-wrap tbody tr:hover{background:#bfff4310}input:focus,select:focus,textarea:focus{outline:none;border-color:#bde855;box-shadow:0 0 0 4px #bde8551d}.notification-form section{box-shadow:0 14px 34px #001b151f}.menu-close{box-shadow:0 8px 18px #0003}
@media(max-width:1199px){.dashboard-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-layout{grid-template-columns:1fr}.sidebar-user{margin-top:12px}.main-nav .sidebar-user{background:#ffffff08}}
@media(max-width:767px){.dashboard-hero{padding:23px 20px;align-items:flex-start}.hero-date{display:none}.dashboard-metrics{grid-template-columns:1fr 1fr;gap:12px}.metric-card{min-height:118px;padding:16px;align-items:flex-start;flex-direction:column;gap:10px}.metric-icon{width:40px;height:40px;border-radius:12px;font-size:17px}.metric-card strong{font-size:29px}.metric-card small{font-size:10px}.quick-actions{grid-template-columns:1fr}.dashboard-panel{padding:19px!important}.nav-icon{width:34px;height:34px;flex-basis:34px}.sidebar-user{padding:13px}.main-nav{padding-inline:18px!important}}
@media(max-width:390px){.dashboard-metrics{grid-template-columns:1fr}.metric-card{flex-direction:row;align-items:center}.dashboard-hero h2{font-size:30px}}

/* Phase 2 — Employee Full Profile */
.employee-page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:22px}.employee-page-head span{font-size:10px;font-weight:950;letter-spacing:.18em;color:#c9ef56}.employee-page-head h2{font-size:clamp(28px,4vw,44px);margin:5px 0}.employee-page-head p{margin:0;color:#8fb3a5}.employee-form{padding:26px!important}.form-section-title{display:flex;align-items:center;gap:14px;margin:28px 0 16px;padding-top:20px;border-top:1px solid #ffffff12}.form-section-title:first-of-type{margin-top:0;padding-top:0;border-top:0}.form-section-title>span{width:42px;height:42px;display:grid;place-items:center;border-radius:13px;background:#cfff4f;color:#12392d;font-weight:950}.form-section-title h3,.form-section-title p{margin:0}.form-section-title p{color:#82aa9b;font-size:13px;margin-top:3px}.span-2{grid-column:span 2}.employee-profile-hero{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:22px;padding:26px;margin-bottom:22px;border:1px solid #8ee6c036;border-radius:26px;background:radial-gradient(circle at 90% 0,#c8ff4a1f,transparent 28%),linear-gradient(145deg,#0b3028,#103e32);box-shadow:0 20px 46px #001b1552}.employee-photo{width:108px;height:108px;border-radius:26px;overflow:hidden;display:grid;place-items:center;background:linear-gradient(145deg,#d8ff5c,#91d72f);color:#12392d;font-size:44px;font-weight:950;border:4px solid #ffffff14}.employee-photo img{width:100%;height:100%;object-fit:cover}.profile-code{font-size:11px;font-weight:950;letter-spacing:.16em;color:#cfff54}.employee-profile-hero h2{font-size:34px;margin:5px 0}.employee-profile-hero p{margin:0;color:#9fc3b5}.profile-badges{display:flex;gap:8px;margin-top:12px}.profile-actions{display:flex;gap:9px;flex-wrap:wrap}.profile-sections{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-bottom:22px}.profile-panel,.document-panel{padding:22px;border:1px solid #8de4c026;border-radius:22px;background:linear-gradient(145deg,#0b3028,#103c31);box-shadow:0 16px 38px #001b153b}.profile-panel h3{margin:0 0 16px;color:#eafff6}.profile-panel dl{display:grid;grid-template-columns:140px 1fr;gap:9px 14px;margin:0}.profile-panel dt{color:#82aa9b}.profile-panel dd{margin:0;color:#fff;overflow-wrap:anywhere}.document-upload{display:grid;grid-template-columns:repeat(4,minmax(150px,1fr)) auto;gap:12px;align-items:end;padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important}.document-grid{display:grid;gap:10px;margin-top:18px}.document-grid article{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:12px;padding:13px 15px;border-radius:14px;background:#ffffff08;border:1px solid #ffffff10}.document-grid strong,.document-grid small{display:block}.document-grid small{color:#8fb3a5;margin-top:3px}.document-grid form{padding:0!important;margin:0;background:none!important;border:0!important;box-shadow:none!important}.empty-note{color:#82aa9b}.employee-table-person{display:flex;align-items:center;gap:11px}.employee-table-person img,.employee-table-person>span{width:42px;height:42px;border-radius:13px;object-fit:cover;display:grid;place-items:center;background:#cfff4f;color:#12392d;font-weight:950;flex:0 0 42px}.employee-table-person strong,.employee-table-person small{display:block}.employee-table-person small{margin-top:3px;color:#82aa9b}.employee-table-person div{min-width:190px}@media(max-width:900px){.employee-profile-hero{grid-template-columns:auto 1fr}.profile-actions{grid-column:1/-1}.profile-sections{grid-template-columns:1fr}.document-upload{grid-template-columns:repeat(2,minmax(0,1fr))}.document-upload button{width:100%}}@media(max-width:620px){.employee-page-head{display:block}.employee-page-head .button-link{display:inline-block;margin-top:15px}.employee-form{padding:18px!important}.span-2{grid-column:auto}.employee-profile-hero{grid-template-columns:1fr;text-align:center}.employee-photo{margin:auto}.profile-badges,.profile-actions{justify-content:center}.profile-panel dl{grid-template-columns:1fr}.profile-panel dt{margin-top:7px}.document-upload{grid-template-columns:1fr}.document-grid article{grid-template-columns:1fr auto}.document-grid article form{grid-column:1/-1}.form-section-title{align-items:flex-start}}
@media print{.site-header,.main-nav,.menu-overlay,.employee-form,.document-upload,.profile-actions,.table-wrap,.page-title-wrap{display:none!important}.employee-profile-hero,.profile-panel,.document-panel{box-shadow:none!important;color:#000!important;background:#fff!important;border-color:#ccc!important}.profile-panel dd,.employee-profile-hero h2{color:#000!important}}

/* v2.4 — Clean universal login */
.clean-login-page{min-height:100svh;overflow:auto;background:radial-gradient(circle at 50% -15%,#1a654f 0,transparent 37%),linear-gradient(155deg,#031b16 0,#062d25 55%,#021510 100%);color:#eefbf5}
.clean-login-page:before{content:"";position:fixed;inset:0;pointer-events:none;background:linear-gradient(#ffffff04 1px,transparent 1px),linear-gradient(90deg,#ffffff04 1px,transparent 1px);background-size:38px 38px;opacity:.32}
.clean-login-page .login-orb,.clean-login-page .premium-login-shell{display:none!important}
.clean-login-shell{position:relative;z-index:1;min-height:100svh;display:grid;place-items:center;padding:clamp(18px,4vw,48px)}
.clean-login-card{width:min(100%,440px);padding:clamp(24px,4vw,36px);border-radius:28px;background:linear-gradient(145deg,#0b3b30f2,#06251ef5);border:1px solid #9bdec34a;box-shadow:inset 0 1px 0 #ffffff1f,0 28px 80px #0009;color:#eefbf5}
.clean-login-brand{display:flex;align-items:center;gap:14px;padding-bottom:22px;border-bottom:1px solid #ffffff12}
.clean-login-brand img,.clean-login-logo{width:58px;height:58px;flex:0 0 58px;border-radius:17px;object-fit:contain;padding:7px;background:#fff;color:#124536;display:grid;place-items:center;font-weight:950;font-size:20px;box-shadow:0 10px 28px #0005}
.clean-login-brand h1{margin:0;color:#fff;font-size:clamp(18px,4vw,24px);line-height:1.16;letter-spacing:-.02em}
.clean-login-brand p{margin:5px 0 0;color:#9fc8b8;font-size:12px}
.clean-login-heading{margin:25px 0 20px}.clean-login-heading h2{margin:0;color:#fff;font-size:clamp(28px,6vw,36px);letter-spacing:-.035em}.clean-login-heading p{margin:7px 0 0;color:#a8cabc;font-size:14px;line-height:1.5}
.clean-login-form{margin:0;padding:0;background:none!important;border:0!important;box-shadow:none!important;backdrop-filter:none!important}
.clean-login-form>label:not(.clean-remember){display:block;margin:15px 0 7px;color:#e8f8f1;font-size:13px;font-weight:750}
.clean-input-wrap{position:relative}.clean-input-wrap>span{position:absolute;left:16px;top:50%;transform:translateY(-50%);z-index:1;color:#c8f254;font-size:13px}
.clean-input-wrap input{width:100%;height:54px;padding:0 68px 0 44px;border-radius:14px;color:#fff;background:#041f19;border:1px solid #477a69;box-shadow:inset 0 1px 0 #ffffff09;font-size:15px;transition:border-color .18s,box-shadow .18s,background .18s}
.clean-input-wrap input::placeholder{color:#71988a}.clean-input-wrap input:focus{outline:none;border-color:#c4ef52;background:#06261f;box-shadow:0 0 0 4px #c6ef5118}
.clean-password-toggle{position:absolute;right:7px;top:7px;height:40px;width:auto;padding:0 12px;border:0;border-radius:10px;color:#dff5eb;background:#103e32;box-shadow:none;text-shadow:none;font-size:12px;font-weight:800}
.clean-password-toggle:hover{transform:none;filter:brightness(1.12)}
.clean-remember{display:flex!important;align-items:center;gap:9px;margin:15px 0 18px!important;color:#c7ddd4!important;font-size:12px;font-weight:650!important}.clean-remember input{width:17px;height:17px;margin:0;accent-color:#bde747}
.clean-login-button{width:100%;height:54px;border:0;border-radius:14px;display:flex;align-items:center;justify-content:center;gap:10px;color:#102c23;background:linear-gradient(180deg,#d6f85f,#a9dc39);box-shadow:inset 0 2px 1px #f5ffbd,0 12px 28px #8dc12f25;text-shadow:none;font-size:16px;font-weight:950;transition:transform .18s,filter .18s,opacity .18s}
.clean-login-button:hover{transform:translateY(-1px);filter:brightness(1.04)}.clean-login-button:disabled{cursor:wait;opacity:.78;transform:none}
.clean-login-spinner{display:none;width:17px;height:17px;border:2px solid #153a2b45;border-top-color:#153a2b;border-radius:50%;animation:cleanSpin .75s linear infinite}.clean-login-button.is-loading .clean-login-spinner{display:block}@keyframes cleanSpin{to{transform:rotate(360deg)}}
.clean-login-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:22px;padding-top:17px;border-top:1px solid #ffffff12;color:#86aa9c;font-size:10px;line-height:1.4}
.clean-login-card .alert{margin:0 0 16px;border-radius:12px}
@media(max-width:520px){.clean-login-shell{place-items:start center;padding:18px 14px}.clean-login-card{margin:auto 0;padding:23px 18px;border-radius:23px}.clean-login-brand img,.clean-login-logo{width:52px;height:52px;flex-basis:52px;border-radius:15px}.clean-login-heading{margin:21px 0 17px}.clean-input-wrap input,.clean-login-button{height:52px}.clean-login-footer{align-items:flex-start;flex-direction:column;gap:5px}}
@media(max-height:670px) and (min-width:521px){.clean-login-shell{padding:16px}.clean-login-card{padding:22px 28px}.clean-login-brand{padding-bottom:16px}.clean-login-heading{margin:17px 0 13px}.clean-login-form>label:not(.clean-remember){margin-top:10px}.clean-remember{margin:11px 0 13px!important}.clean-login-footer{margin-top:15px;padding-top:12px}}
@media(min-width:900px){.clean-login-card{width:min(100%,460px);padding:38px}.clean-login-shell{padding:54px}}


/* v2.5 company settings */
.company-settings-card{margin-bottom:28px}.company-logo-row{display:grid;grid-template-columns:110px 1fr;gap:20px;align-items:center;margin:18px 0}.company-logo-row .logo-preview{width:96px;height:96px;object-fit:contain;border-radius:18px;background:#fff;border:1px solid #dbe8e3;padding:10px}.company-settings-card input[type=color]{padding:5px;height:48px}.clean-login-button{background:linear-gradient(135deg,var(--company-accent,#08765d),#064c3e)}
@media(max-width:600px){.company-logo-row{grid-template-columns:1fr}.company-logo-row .logo-preview{width:82px;height:82px}}


/* v2.6 Global Report Branding */
.global-report-brand{display:flex;align-items:center;gap:18px;padding:18px 20px;margin:0 0 20px;border:1px solid #dbe7e3;border-radius:18px;background:#fff;box-shadow:0 10px 28px #183f3520}.report-company-logo{width:76px;height:76px;object-fit:contain;padding:6px;border:1px solid #dbe7e3;border-radius:14px;background:#fff}.global-report-brand-copy{min-width:0;flex:1}.global-report-brand h1{margin:0;font-size:25px}.global-report-brand p{margin:4px 0;color:#52655f}.report-tagline{font-weight:700}.report-meta{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px;padding-top:10px;border-top:1px solid #e5eeeb;font-size:12px}.report-meta strong{font-size:14px;color:#173f35}.report-meta span{color:#61746e}
@media(max-width:640px){.global-report-brand{align-items:flex-start;padding:14px;gap:12px}.report-company-logo{width:58px;height:58px}.global-report-brand h1{font-size:20px}.report-meta{display:grid;gap:4px}}
@media print{.global-report-brand{display:flex!important;box-shadow:none!important;border:0!important;border-bottom:2px solid #222!important;border-radius:0!important;padding:0 0 12px!important;margin:0 0 18px!important;background:#fff!important}.report-company-logo{display:block!important;width:65px!important;height:65px!important;border:1px solid #bbb!important}.global-report-brand h1,.global-report-brand p,.report-meta strong,.report-meta span{color:#000!important}.global-report-brand h1{font-size:20px!important}.report-meta{border-top:1px solid #bbb!important}.employee-profile-hero{page-break-after:avoid}.profile-sections{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important}.profile-panel{page-break-inside:avoid!important}}

/* v2.7.2 SMS credential input fix */
.api-key-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center}.api-key-row .compact-button{width:auto;min-width:72px;height:46px;padding:8px 12px}.notification-form input[readonly]{opacity:.78;cursor:not-allowed}.notification-form #smsSenderId,.notification-form #smsApiKey{opacity:1!important;cursor:text!important;pointer-events:auto!important;user-select:text!important;-webkit-user-select:text!important;background:#fff!important;color:#18251f!important}@media(max-width:600px){.api-key-row{grid-template-columns:1fr}.api-key-row .compact-button{width:100%}}
.table-subtext{display:block;color:#71857f;font-size:.78rem;margin-top:4px}.leave-action-form{min-width:240px}.leave-action-form textarea{min-height:64px}.leave-action-buttons{display:flex;gap:8px;margin-top:8px}.danger-button{background:#a83245!important}.badge.leave-pending{background:#fff0b8;color:#745500}.badge.leave-approved{background:#d8f7e8;color:#08765d}.badge.leave-rejected{background:#ffe0e3;color:#a83245}.leave-layout{align-items:start}

/* My Account */
.account-summary,.account-password-card{max-width:860px;margin-left:auto;margin-right:auto}.account-summary{margin-bottom:18px}.account-password-form{margin-top:18px}.account-password-card button{max-width:260px}@media(max-width:700px){.account-password-card button{max-width:none;width:100%}}

/* v3.1 — Modern Corporate Blue UI system */
:root{
  --ui-navy:#0b2340;--ui-navy-2:#12365f;--ui-blue:#2563eb;--ui-blue-dark:#1d4ed8;
  --ui-cyan:#0ea5e9;--ui-green:#10b981;--ui-amber:#f59e0b;--ui-red:#ef4444;
  --ui-bg:#f5f7fb;--ui-surface:#ffffff;--ui-text:#0f172a;--ui-muted:#64748b;
  --ui-border:#e2e8f0;--ui-shadow:0 8px 28px rgba(15,35,64,.08);
  --header:var(--ui-navy);--primary:var(--ui-blue);--border:var(--ui-border);
  color:var(--ui-text);background:var(--ui-bg)
}
body{background:var(--ui-bg)!important;color:var(--ui-text)!important;line-height:1.5}
.site-header{background:linear-gradient(180deg,var(--ui-navy),#071b32)!important;border:0!important;box-shadow:4px 0 24px rgba(2,17,35,.18)!important}
.brand{color:#fff!important;text-shadow:none!important}.brand small{color:#8fb6df!important;letter-spacing:.16em!important}.brand-logo{border-radius:12px!important;box-shadow:none!important;border:1px solid rgba(255,255,255,.18)!important}
.page-title-wrap{margin:0 0 22px!important}.page-kicker{color:var(--ui-blue)!important;letter-spacing:.13em!important}.page-title-wrap h1{color:var(--ui-text)!important;background:none!important;-webkit-text-fill-color:initial!important;font-size:clamp(27px,4vw,38px)!important;letter-spacing:-.025em!important}
.card,form,.detail-card,.preview-panel,.profile-panel,.document-panel{background:var(--ui-surface)!important;color:var(--ui-text)!important;border:1px solid var(--ui-border)!important;border-radius:16px!important;box-shadow:var(--ui-shadow)!important;backdrop-filter:none!important}
.card:before{height:3px!important;background:linear-gradient(90deg,var(--ui-blue),var(--ui-cyan))!important}.card h2,.card h3,.card strong,.detail-card h3,.profile-panel h3{color:var(--ui-text)!important;text-shadow:none!important}.muted,small,.profile-panel dt{color:var(--ui-muted)!important}
input,select,textarea{background:#fff!important;color:var(--ui-text)!important;border:1px solid #cbd5e1!important;border-radius:10px!important;box-shadow:none!important}input:focus,select:focus,textarea:focus{outline:none!important;border-color:var(--ui-blue)!important;box-shadow:0 0 0 3px rgba(37,99,235,.13)!important}
label{color:#334155!important}
button,.button-link,.glossy-btn{background:linear-gradient(180deg,#3b82f6,var(--ui-blue-dark))!important;color:#fff!important;border:1px solid #1d4ed8!important;border-radius:10px!important;box-shadow:0 5px 14px rgba(37,99,235,.2)!important;text-shadow:none!important}.btn-secondary{background:#475569!important;border-color:#475569!important}.btn-danger,.action-btn.delete{background:#dc2626!important;border-color:#b91c1c!important}.action-btn.edit{background:#0284c7!important}.action-btn.view{background:#475569!important}
table{background:#fff!important;border:1px solid var(--ui-border)!important;border-radius:14px!important;box-shadow:var(--ui-shadow)!important}th{background:#f8fafc!important;color:#475569!important;text-transform:uppercase!important;font-size:11px!important;letter-spacing:.06em!important}td{color:#1e293b!important;border-color:#edf2f7!important}
.alert.ok{background:#ecfdf5!important;color:#047857!important;border:1px solid #a7f3d0!important}.alert.err{background:#fff1f2!important;color:#be123c!important;border:1px solid #fecdd3!important}.badge.success{background:#ecfdf5!important;color:#047857!important}.badge.warning{background:#fffbeb!important;color:#b45309!important}.badge.danger{background:#fff1f2!important;color:#be123c!important}
.developer-signature{background:#fff!important;color:var(--ui-muted)!important;border:1px solid var(--ui-border)!important;box-shadow:var(--ui-shadow)!important}

@media(min-width:901px){
  body{padding-left:252px}
  .site-header{position:fixed!important;left:0;top:0;bottom:0;width:252px;height:100vh;min-height:0!important;padding:20px 14px!important;display:flex!important;flex-direction:column!important;align-items:stretch!important;justify-content:flex-start!important;z-index:120!important}
  .brand{height:auto!important;padding:0 8px 20px!important;border-bottom:1px solid rgba(255,255,255,.1)!important;margin-bottom:14px!important;white-space:normal!important}
  .brand-logo{width:44px!important;height:44px!important;flex:0 0 44px!important}.brand span{font-size:16px!important;line-height:1.2!important}
  .main-nav{position:static!important;transform:none!important;display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:3px!important;width:100%!important;max-width:none!important;padding:0!important;background:transparent!important;box-shadow:none!important;overflow-y:auto!important;overflow-x:hidden!important}
  .nav-head,.menu-toggle,.menu-overlay{display:none!important}.sidebar-user{order:-1;margin:0 0 12px!important;padding:12px!important;background:rgba(255,255,255,.07)!important;border:1px solid rgba(255,255,255,.1)!important;border-radius:12px!important;color:#fff!important}.sidebar-user span{color:#93b6d8!important}
  .nav-section{display:block!important;color:#6f96bc!important;font-size:10px!important;font-weight:800!important;letter-spacing:.13em!important;text-transform:uppercase!important;padding:14px 10px 5px!important}
  .nav-link{color:#cbd9e8!important;padding:10px 11px!important;border-radius:9px!important;font-size:13px!important;font-weight:650!important}.nav-link:hover{background:rgba(255,255,255,.08)!important;color:#fff!important}.nav-link.active{background:linear-gradient(90deg,var(--ui-blue),#3b82f6)!important;color:#fff!important;box-shadow:0 7px 18px rgba(37,99,235,.26)!important}
  .nav-icon{background:rgba(255,255,255,.08)!important;color:inherit!important;border:0!important;width:29px!important;height:29px!important;flex-basis:29px!important;border-radius:8px!important}
  main{max-width:1480px!important;margin:0 auto!important;padding:30px 34px!important}
}
@media(max-width:900px){
  .site-header{min-height:66px!important;padding:0 16px!important}.main-nav{background:#fff!important;color:var(--ui-text)!important;width:min(86vw,340px)!important;padding:0 16px 24px!important}.nav-head{color:var(--ui-text)!important}.sidebar-user{background:#f1f5f9!important;border:1px solid var(--ui-border)!important;color:var(--ui-text)!important}.sidebar-user span{color:var(--ui-muted)!important}.nav-section{display:block;color:#94a3b8;font-size:10px;font-weight:850;letter-spacing:.12em;text-transform:uppercase;padding:14px 10px 5px}.nav-link{color:#334155!important}.nav-link:hover,.nav-link.active{background:#eaf1ff!important;color:var(--ui-blue-dark)!important}.nav-icon{background:#eff6ff!important;color:var(--ui-blue)!important}.menu-toggle{background:rgba(255,255,255,.1)!important;border-color:rgba(255,255,255,.2)!important}.menu-close{background:#f1f5f9!important;color:#334155!important}
  main{padding:20px 14px!important}.page-title-wrap h1{font-size:28px!important}
}
@media(max-width:620px){.card,form,.detail-card,.profile-panel,.document-panel{border-radius:14px!important}.grid{gap:12px!important}.row{gap:11px!important}button,.button-link{min-height:44px}}

/* Make older emerald/pink components readable under the corporate theme */
.employee-hero,.employee-profile-hero,.dashboard-hero{background:linear-gradient(135deg,#0f2f55,#164978)!important;color:#fff!important;border-color:#2f6595!important}.employee-hero h2,.employee-profile-hero h2,.dashboard-hero h2{color:#fff!important}.employee-hero p,.employee-profile-hero p,.dashboard-hero p{color:#cfe2f5!important}.profile-code,.employee-page-head span{color:#93c5fd!important}.form-section-title>span,.employee-photo,.employee-table-person img,.employee-table-person>span{background:#dbeafe!important;color:#1d4ed8!important}.profile-panel,.document-panel{background:#fff!important}.profile-panel dd{color:var(--ui-text)!important}.profile-panel dt{color:var(--ui-muted)!important}

/* v3.2 — Option A: Clear Corporate Light UI (mobile-safe drawer) */
:root{
  --a-primary:#2563eb;--a-primary-dark:#1d4ed8;--a-navy:#0f2a4a;
  --a-bg:#f5f7fb;--a-surface:#ffffff;--a-border:#dfe5ee;
  --a-text:#162033;--a-muted:#64748b;--a-success:#16a34a;
  --a-danger:#dc2626;--a-warning:#d97706;--a-radius:14px;
  --a-shadow:0 8px 24px rgba(15,42,74,.08)
}
html,body{background:var(--a-bg)!important;color:var(--a-text)!important}
body{min-height:100vh!important;overflow-x:hidden!important;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif!important}
body.menu-open{overflow:hidden!important}
.site-header{
  position:sticky!important;inset:auto!important;top:0!important;width:100%!important;height:68px!important;min-height:68px!important;
  padding:0 18px!important;display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:space-between!important;
  background:linear-gradient(100deg,var(--a-navy),#173f70)!important;color:#fff!important;z-index:220!important;
  box-shadow:0 2px 12px rgba(15,42,74,.18)!important
}
.brand{display:flex!important;align-items:center!important;gap:10px!important;color:#fff!important;font-size:16px!important;line-height:1.15!important}
.brand small{display:block!important;color:#bfd4ec!important;font-size:9px!important;letter-spacing:.13em!important;margin-bottom:2px!important}
.brand-logo{width:38px!important;height:38px!important;object-fit:contain!important;border-radius:10px!important;background:#fff!important;padding:4px!important}
.menu-toggle{display:flex!important;width:44px!important;height:42px!important;padding:10px!important;flex-direction:column!important;justify-content:center!important;gap:5px!important;background:rgba(255,255,255,.1)!important;border:1px solid rgba(255,255,255,.25)!important;border-radius:10px!important;box-shadow:none!important}
.menu-toggle span{display:block!important;width:100%!important;height:2px!important;background:#fff!important;border-radius:5px!important}
.menu-overlay{display:block!important;position:fixed!important;inset:0!important;background:rgba(15,23,42,.48)!important;opacity:0!important;visibility:hidden!important;transition:.22s!important;z-index:228!important;backdrop-filter:blur(2px)!important}
.main-nav{
  display:flex!important;position:fixed!important;left:0!important;right:auto!important;top:0!important;bottom:0!important;
  width:min(86vw,320px)!important;max-width:320px!important;height:100dvh!important;padding:0 14px 24px!important;
  flex-direction:column!important;align-items:stretch!important;gap:3px!important;background:#fff!important;color:var(--a-text)!important;
  transform:translateX(-105%)!important;transition:transform .24s ease!important;z-index:230!important;
  box-shadow:12px 0 35px rgba(15,42,74,.2)!important;overflow-y:auto!important;overflow-x:hidden!important
}
.menu-open .main-nav{transform:translateX(0)!important}.menu-open .menu-overlay{opacity:1!important;visibility:visible!important}
.nav-head{display:flex!important;align-items:center!important;justify-content:space-between!important;min-height:68px!important;color:var(--a-text)!important;border-bottom:1px solid var(--a-border)!important;margin-bottom:10px!important}
.menu-close{display:grid!important;place-items:center!important;width:38px!important;height:38px!important;padding:0!important;border:0!important;border-radius:10px!important;background:#eef2f7!important;color:#334155!important;font-size:25px!important;box-shadow:none!important}
.sidebar-user{display:flex!important;align-items:center!important;gap:11px!important;margin:0 0 8px!important;padding:12px!important;background:#f5f8fc!important;border:1px solid var(--a-border)!important;border-radius:12px!important;color:var(--a-text)!important}
.sidebar-avatar{background:var(--a-primary)!important;color:#fff!important;box-shadow:none!important}.sidebar-user span{color:var(--a-muted)!important}
.nav-section{display:block!important;color:#8794a8!important;font-size:9px!important;font-weight:800!important;letter-spacing:.14em!important;text-transform:uppercase!important;padding:14px 10px 5px!important}
.nav-link{display:flex!important;align-items:center!important;gap:10px!important;color:#334155!important;text-decoration:none!important;font-size:14px!important;font-weight:650!important;padding:10px 11px!important;border-radius:10px!important;background:transparent!important;border:0!important}
.nav-link:hover,.nav-link.active{background:#eaf1ff!important;color:var(--a-primary-dark)!important}
.nav-icon{display:grid!important;place-items:center!important;width:32px!important;height:32px!important;flex:0 0 32px!important;border-radius:9px!important;background:#eff6ff!important;color:var(--a-primary)!important;border:0!important}
main{width:100%!important;max-width:1480px!important;margin:0 auto!important;padding:24px clamp(14px,3vw,36px) 44px!important;background:transparent!important}
.page-title-wrap{margin:0 0 20px!important;padding:0!important}.page-kicker{color:var(--a-primary)!important;font-size:10px!important;font-weight:800!important;letter-spacing:.12em!important}.page-title-wrap h1,h1{color:var(--a-text)!important;text-shadow:none!important}
section,.card,.panel,.dashboard-panel,.metric-card,.profile-panel,.document-panel,.employee-form,.table-wrap,.developer-signature,.employee-profile-hero,.dashboard-hero,.role-card,.permission-card{
  background:#fff!important;color:var(--a-text)!important;border-color:var(--a-border)!important;box-shadow:var(--a-shadow)!important;text-shadow:none!important
}
section h2,section h3,.card h2,.card h3,.panel h2,.panel h3,.dashboard-panel h2,.dashboard-panel h3,.profile-panel h3,.employee-profile-hero h2{color:var(--a-text)!important;text-shadow:none!important}
p,small,.muted,.helper,.subtitle,.employee-page-head p,.form-section-title p,.profile-panel dt,.employee-table-person small,.quick-actions small{color:var(--a-muted)!important}
input,select,textarea{background:#fff!important;color:var(--a-text)!important;border:1px solid #cbd5e1!important;box-shadow:none!important}
input:focus,select:focus,textarea:focus{outline:none!important;border-color:var(--a-primary)!important;box-shadow:0 0 0 3px rgba(37,99,235,.14)!important}
button,.button,.button-link,input[type=submit]{background:var(--a-primary)!important;color:#fff!important;border:1px solid var(--a-primary)!important;box-shadow:none!important;text-shadow:none!important}
button:hover,.button:hover,.button-link:hover,input[type=submit]:hover{background:var(--a-primary-dark)!important;border-color:var(--a-primary-dark)!important;transform:none!important;filter:none!important}
button.danger,.danger,.btn-danger{background:var(--a-danger)!important;border-color:var(--a-danger)!important;color:#fff!important}
.alert.ok{background:#ecfdf3!important;border-color:#86efac!important;color:#166534!important}.alert.err{background:#fff1f2!important;border-color:#fda4af!important;color:#9f1239!important}
table{background:#fff!important;color:var(--a-text)!important}th{background:#f1f5f9!important;color:#475569!important}td{border-color:#e5eaf1!important;color:var(--a-text)!important}tbody tr:hover{background:#f8fbff!important}
.badge,.pill{box-shadow:none!important}.dashboard-hero,.employee-profile-hero{background:#fff!important}.hero-date,.profile-code,.employee-page-head span,.form-section-title>span{color:var(--a-primary)!important}.form-section-title>span,.metric-icon,.quick-actions b,.employee-table-person>span{background:#eaf1ff!important;color:var(--a-primary)!important}
.metric-card strong,.panel-heading>strong{color:var(--a-text)!important}.progress-track{background:#e7edf5!important;border-color:#d8e0eb!important}.progress-track i{background:var(--a-primary)!important;box-shadow:none!important}
.quick-actions a,.health-list div,.document-grid article{background:#f8fafc!important;border-color:var(--a-border)!important;color:var(--a-text)!important}
.profile-panel dd,.employee-profile-hero h2{color:var(--a-text)!important}.employee-photo{background:#eaf1ff!important;color:var(--a-primary)!important;border-color:#d9e6ff!important}
.developer-signature{opacity:.9!important}
/* prevent legacy neon/emerald pseudo layers */
body:not(.clean-login-page)::before,body:not(.clean-login-page)::after,.dashboard-hero::before,.dashboard-panel::before,.employee-profile-hero::before{display:none!important}
/* keep login readable but switch its accents to the same blue family */
.clean-login-page{background:linear-gradient(135deg,#0f2a4a,#1e4f86)!important}.clean-login-card{background:rgba(8,30,55,.92)!important;border-color:rgba(255,255,255,.15)!important}.clean-login-button{background:var(--a-primary)!important;color:#fff!important;box-shadow:none!important}.clean-input-wrap input:focus{border-color:#60a5fa!important;box-shadow:0 0 0 4px rgba(96,165,250,.16)!important}.clean-login-form>label:not(.clean-remember),.clean-login-heading h2{color:#fff!important}
@media(min-width:900px){
  .site-header{padding-inline:28px!important}.main-nav{width:320px!important}.brand{font-size:17px!important}
  main{padding-top:30px!important}
}
@media(max-width:700px){
  .site-header{height:62px!important;min-height:62px!important;padding:0 13px!important}.brand-logo{width:34px!important;height:34px!important}.brand{font-size:14px!important}.brand small{font-size:8px!important}
  main{padding:17px 12px 34px!important}.page-title-wrap{margin-bottom:15px!important}.page-title-wrap h1{font-size:24px!important}
  section,.card,.panel,.dashboard-panel,.employee-form,.profile-panel,.document-panel{border-radius:13px!important}
  .row,.dashboard-metrics,.profile-sections{grid-template-columns:1fr!important}
}

/* v3.3 — Plain responsive login with bottom developer credit */
.minimal-login-page,
.minimal-login-page::before,
.minimal-login-page::after{
  background:#f5f7fb!important;
  background-image:none!important;
}
.minimal-login-page{min-height:100vh!important;min-height:100dvh!important;color:#162033!important;overflow:auto!important}
.minimal-login-page::before,.minimal-login-page::after{display:none!important;content:none!important}
.minimal-login-layout{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;padding:clamp(18px,3vw,34px)}
.minimal-login-main{width:100%;flex:1 0 auto;display:flex;align-items:center;justify-content:center;padding:28px 0}
.minimal-login-panel{width:min(100%,400px);margin:0;padding:0!important;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;color:#162033!important}
.minimal-login-brand{text-align:center;margin:0 0 30px}
.minimal-login-brand img,.minimal-login-logo{width:72px;height:72px;object-fit:contain;margin:0 auto 16px;padding:7px;border-radius:16px;background:#fff;border:1px solid #e2e8f0;box-shadow:none;color:#1d4ed8;display:grid;place-items:center;font-weight:900}
.minimal-login-brand h1{margin:0;color:#162033!important;font-size:clamp(23px,4vw,30px);line-height:1.2;letter-spacing:-.025em;text-shadow:none!important}
.minimal-login-brand p{margin:7px 0 0;color:#64748b!important;font-size:13px}
.minimal-login-form{margin:0;padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important}
.minimal-login-form>label:not(.minimal-remember){display:block;margin:16px 0 7px;color:#334155!important;font-size:13px;font-weight:700}
.minimal-login-form>input,.minimal-password-field input{width:100%;height:50px;padding:0 14px;border:1px solid #cbd5e1!important;border-radius:10px;background:#fff!important;color:#0f172a!important;box-shadow:none!important;font-size:15px}
.minimal-login-form>input:focus,.minimal-password-field input:focus{outline:none!important;border-color:var(--company-accent,#2563eb)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--company-accent,#2563eb) 16%,transparent)!important}
.minimal-password-field{position:relative}
.minimal-password-field input{padding-right:66px}
.minimal-password-field button{position:absolute;right:7px;top:7px;width:auto;height:36px;padding:0 10px;border:0!important;border-radius:7px;background:transparent!important;color:#475569!important;font-size:12px;font-weight:700;box-shadow:none!important}
.minimal-password-field button:hover{background:#f1f5f9!important;color:#1d4ed8!important}
.minimal-remember{display:flex;align-items:center;gap:9px;margin:15px 0 18px;color:#64748b!important;font-size:13px}
.minimal-remember input{width:16px;height:16px;accent-color:var(--company-accent,#2563eb)}
.minimal-login-button{width:100%;height:50px;display:flex;align-items:center;justify-content:center;gap:9px;border:1px solid var(--company-accent,#2563eb)!important;border-radius:10px;background:var(--company-accent,#2563eb)!important;color:#fff!important;box-shadow:none!important;font-size:15px;font-weight:800;text-shadow:none!important}
.minimal-login-button:hover{filter:brightness(.94)!important;transform:none!important}
.minimal-login-button:disabled{cursor:wait;opacity:.75}
.minimal-login-footer{flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:5px;min-height:30px;margin-top:auto;padding:12px 4px 2px;color:#94a3b8;font-size:11px;text-align:center;line-height:1.45}
.minimal-login-footer strong,.minimal-login-footer a{color:#64748b;font-weight:700;text-decoration:none}
.minimal-login-footer a:hover{color:var(--company-accent,#2563eb)}
.minimal-login-panel .alert{margin:0 0 18px;border-radius:10px}
@media(max-width:520px){
  .minimal-login-layout{padding:16px 18px 10px}
  .minimal-login-main{align-items:center;padding:18px 0 26px}
  .minimal-login-brand{margin-bottom:24px}
  .minimal-login-brand img,.minimal-login-logo{width:64px;height:64px;margin-bottom:14px}
  .minimal-login-footer{padding-bottom:max(4px,env(safe-area-inset-bottom));font-size:10px}
}
@media(max-height:620px){
  .minimal-login-layout{padding-top:12px;padding-bottom:8px}
  .minimal-login-main{align-items:flex-start;padding:8px 0 18px}
  .minimal-login-brand{margin-bottom:18px}
  .minimal-login-brand img,.minimal-login-logo{width:54px;height:54px;margin-bottom:10px}
  .minimal-login-form>label:not(.minimal-remember){margin-top:10px}
  .minimal-login-footer{margin-top:10px}
}

/* v3.4 — Handheld desktop-site mode correction
   Some mobile browsers request a ~980px desktop viewport. The early viewport
   script adds .handheld-desktop-mode so the interface remains touch-readable. */
html.handheld-desktop-mode{font-size:16px!important}
html.handheld-desktop-mode body{min-width:0!important;width:100%!important}
html.handheld-desktop-mode .site-header{height:68px!important;min-height:68px!important;padding:0 16px!important}
html.handheld-desktop-mode .brand{font-size:16px!important}
html.handheld-desktop-mode .brand-logo{width:40px!important;height:40px!important}
html.handheld-desktop-mode .menu-toggle{display:flex!important;width:46px!important;height:44px!important}
html.handheld-desktop-mode .main-nav{width:88vw!important;max-width:360px!important;padding:0 14px 24px!important}
html.handheld-desktop-mode .nav-head{min-height:66px!important}
html.handheld-desktop-mode .sidebar-user{padding:12px!important}
html.handheld-desktop-mode .nav-section{font-size:10px!important;padding:14px 10px 5px!important}
html.handheld-desktop-mode .nav-link{font-size:15px!important;min-height:50px!important;padding:8px 10px!important}
html.handheld-desktop-mode .nav-icon{width:36px!important;height:36px!important;flex-basis:36px!important}
html.handheld-desktop-mode main{width:100%!important;max-width:none!important;padding-left:18px!important;padding-right:18px!important}
html.handheld-desktop-mode .page-title-wrap h1{font-size:32px!important}
html.handheld-desktop-mode .grid{grid-template-columns:1fr!important}
html.handheld-desktop-mode .minimal-login-layout{width:100%!important;min-height:100vh!important;min-height:100dvh!important;padding:18px 20px 10px!important}
html.handheld-desktop-mode .minimal-login-main{align-items:center!important;padding:22px 0 30px!important}
html.handheld-desktop-mode .minimal-login-panel{width:100%!important;max-width:390px!important}
html.handheld-desktop-mode .minimal-login-brand{margin-bottom:24px!important}
html.handheld-desktop-mode .minimal-login-brand img,
html.handheld-desktop-mode .minimal-login-logo{width:66px!important;height:66px!important;margin-bottom:13px!important}
html.handheld-desktop-mode .minimal-login-brand h1{font-size:26px!important}
html.handheld-desktop-mode .minimal-login-brand p{font-size:13px!important}
html.handheld-desktop-mode .minimal-login-form>label:not(.minimal-remember){font-size:13px!important;margin-top:14px!important}
html.handheld-desktop-mode .minimal-login-form>input,
html.handheld-desktop-mode .minimal-password-field input{height:50px!important;font-size:16px!important}
html.handheld-desktop-mode .minimal-login-button{height:50px!important;font-size:16px!important}
html.handheld-desktop-mode .minimal-login-footer{font-size:10px!important;padding-bottom:max(5px,env(safe-area-inset-bottom))!important}

/* v3.5 — Corporate polish: visible login CTA, flat cards, compact header */
:root{
  --v35-blue:#2457d6;
  --v35-blue-dark:#1e46ad;
  --v35-border:#dce3ec;
  --v35-text:#162033;
  --v35-muted:#5f6f82;
  --v35-bg:#f4f7fb;
  --v35-shadow:0 4px 14px rgba(15,42,74,.055);
}
.site-header{
  height:60px!important;
  min-height:60px!important;
  padding:0 16px!important;
  box-shadow:0 2px 8px rgba(15,42,74,.14)!important;
}
.brand-logo{width:34px!important;height:34px!important;border-radius:9px!important}
.menu-toggle{width:42px!important;height:40px!important;border-radius:10px!important}

/* Dashboard: remove legacy glow/neon and unify all surfaces */
.dashboard-hero,.dashboard-panel,.metric-card,.card,
.dashboard-hero::before,.dashboard-hero::after,
.dashboard-panel::before,.dashboard-panel::after,
.metric-card::before,.metric-card::after,
.card::before,.card::after{
  background-image:none!important;
  filter:none!important;
  text-shadow:none!important;
}
.dashboard-hero,.dashboard-panel,.metric-card,.card{
  background:#fff!important;
  border:1px solid var(--v35-border)!important;
  box-shadow:var(--v35-shadow)!important;
}
.dashboard-hero{padding:22px 24px!important;margin-bottom:18px!important;border-radius:16px!important}
.dashboard-hero h2{font-size:clamp(26px,3vw,38px)!important;color:var(--v35-text)!important}
.dashboard-hero p{color:var(--v35-muted)!important;line-height:1.55!important}
.hero-kicker,.panel-heading span{color:var(--v35-blue)!important}
.hero-date{background:#f7f9fc!important;border:1px solid var(--v35-border)!important;color:var(--v35-text)!important;border-radius:14px!important}
.hero-date strong{color:var(--v35-blue)!important}.hero-date span{color:var(--v35-text)!important}.hero-date small{color:var(--v35-muted)!important}
.dashboard-metrics{gap:14px!important;margin-bottom:18px!important}
.metric-card{min-height:112px!important;padding:17px!important;border-radius:15px!important;gap:14px!important;overflow:visible!important}
.metric-icon{width:46px!important;height:46px!important;flex:0 0 46px!important;border-radius:12px!important;background:#edf3ff!important;color:var(--v35-blue)!important;box-shadow:none!important}
.metric-card span{color:#678077!important;font-size:13px!important}.metric-card strong{font-size:32px!important;color:var(--v35-text)!important;margin:5px 0!important}.metric-card small{color:var(--v35-muted)!important;font-size:12px!important}
.dashboard-layout{gap:16px!important}.dashboard-panel{padding:20px!important;border-radius:16px!important}.panel-heading{margin-bottom:14px!important}.panel-heading h3{font-size:21px!important}.panel-heading>strong{color:var(--v35-text)!important}
.quick-actions{gap:10px!important}.quick-actions a{padding:13px!important;border-radius:12px!important;background:#f8fafc!important;border:1px solid var(--v35-border)!important;transform:none!important;box-shadow:none!important}.quick-actions a:hover{background:#f1f5fb!important;border-color:#cbd7e8!important;transform:none!important}
.quick-actions b{width:38px!important;height:38px!important;border-radius:10px!important;background:#edf3ff!important;color:var(--v35-blue)!important;box-shadow:none!important}.quick-actions small{color:var(--v35-muted)!important}
.progress-track{height:10px!important;background:#e9eef5!important;border:1px solid #d9e1eb!important;box-shadow:none!important}.progress-track i{background:var(--v35-blue)!important;box-shadow:none!important}
.health-list{gap:8px!important;margin-top:15px!important}.health-list div{padding:10px 12px!important;border-radius:10px!important;background:#f8fafc!important;border:1px solid #edf1f5!important}.health-list span{color:#58716b!important}.health-list b{color:var(--v35-text)!important}

/* Login: compact vertical rhythm and force a visible blue submit button */
.minimal-login-page{background:var(--v35-bg)!important}
.minimal-login-layout{padding:18px clamp(18px,3vw,32px) 10px!important}
.minimal-login-main{padding:16px 0 24px!important}
.minimal-login-panel{max-width:390px!important}
.minimal-login-brand{margin-bottom:22px!important}
.minimal-login-brand img,.minimal-login-logo{width:64px!important;height:64px!important;margin-bottom:12px!important;border-radius:15px!important}
.minimal-login-brand h1{font-size:27px!important}
.minimal-login-brand p{margin-top:5px!important;color:var(--v35-muted)!important}
.minimal-login-form>label:not(.minimal-remember){margin:13px 0 6px!important;color:#334155!important}
.minimal-login-form>input,.minimal-password-field input{height:52px!important;border-color:#cbd5df!important;border-radius:11px!important}
.minimal-remember{margin:14px 0 16px!important}
.minimal-login-button,
.minimal-login-form button[type="submit"]{
  min-height:52px!important;
  height:52px!important;
  background:#2457d6!important;
  background-color:#2457d6!important;
  background-image:none!important;
  border:1px solid #2457d6!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  opacity:1!important;
  visibility:visible!important;
  box-shadow:none!important;
  text-shadow:none!important;
  border-radius:11px!important;
}
.minimal-login-button:hover,.minimal-login-form button[type="submit"]:hover{background:#1e46ad!important;border-color:#1e46ad!important;filter:none!important}
.minimal-login-button span{color:#fff!important;-webkit-text-fill-color:#fff!important}
.minimal-login-footer{padding-top:8px!important;color:#8a99ab!important}.minimal-login-footer strong,.minimal-login-footer a{color:#5f6f82!important}

@media(max-width:700px){
  .site-header{height:58px!important;min-height:58px!important}
  main{padding:15px 12px 30px!important}
  .dashboard-hero{padding:19px 18px!important;margin-bottom:14px!important}
  .dashboard-metrics{gap:11px!important}
  .metric-card{min-height:102px!important;padding:15px!important;flex-direction:row!important;align-items:center!important}
  .metric-card strong{font-size:30px!important}
  .dashboard-panel{padding:17px!important}
  .minimal-login-main{align-items:center!important;padding:10px 0 20px!important}
  .minimal-login-brand{margin-bottom:19px!important}
}
@media(max-height:650px){
  .minimal-login-main{align-items:flex-start!important;padding-top:4px!important}
  .minimal-login-brand{margin-bottom:14px!important}
  .minimal-login-brand img,.minimal-login-logo{width:52px!important;height:52px!important;margin-bottom:8px!important}
  .minimal-login-brand h1{font-size:24px!important}
  .minimal-login-form>label:not(.minimal-remember){margin-top:9px!important}
  .minimal-login-form>input,.minimal-password-field input,.minimal-login-button,.minimal-login-form button[type="submit"]{height:47px!important;min-height:47px!important}
  .minimal-remember{margin:10px 0 12px!important}
}
html.handheld-desktop-mode .site-header{height:60px!important;min-height:60px!important}
html.handheld-desktop-mode .minimal-login-main{padding:12px 0 22px!important}
html.handheld-desktop-mode .minimal-login-panel{max-width:390px!important}
html.handheld-desktop-mode .minimal-login-button{background:#2457d6!important;color:#fff!important}

/* v3.6 — unified header, clear switches, clean permissions */
.site-header{background:#12345b!important;background-image:none!important;min-height:68px!important;height:68px!important;padding:0 18px!important}
.brand{display:flex!important;align-items:center!important;justify-content:center!important;padding:0!important;margin:0!important;border:0!important;min-width:64px!important}
.brand>span{display:none!important}
.brand-logo{width:54px!important;height:54px!important;flex:0 0 54px!important;object-fit:contain!important;padding:5px!important;border-radius:14px!important;background:#fff!important;border:1px solid rgba(255,255,255,.9)!important;box-shadow:0 5px 16px rgba(0,0,0,.16)!important}
.menu-toggle{width:48px!important;height:48px!important;border-radius:13px!important}
body:has(.dashboard-metrics) main{padding-top:14px!important}
body:has(.dashboard-metrics) .page-title-wrap,body:has(.dashboard-metrics) .dashboard-hero{display:none!important}
.card,.dashboard-panel,.metric-card,.profile-panel,.preview-panel,.developer-signature,.permission-matrix fieldset,.permission-save-bar{background:#fff!important;background-image:none!important;color:#162033!important;border-color:#dce3ec!important;box-shadow:0 4px 14px rgba(15,42,74,.055)!important;text-shadow:none!important}
.card:before,.card:after,.developer-signature:before,.developer-signature:after{display:none!important}
.eyebrow,.developer-copy span{color:#2457d6!important}
.developer-signature{border-radius:16px!important}.developer-signature strong,.developer-signature p,.developer-links a,.developer-links span{color:#162033!important}.developer-links a,.developer-links span{background:#f4f7fb!important;border-color:#dce3ec!important}
.switch-line{gap:13px!important;color:#273449!important;font-weight:700!important}
.switch-line input[type="checkbox"]{-webkit-appearance:none!important;appearance:none!important;position:relative!important;display:inline-block!important;flex:0 0 52px!important;width:52px!important;height:30px!important;min-width:52px!important;padding:0!important;margin:0!important;border:2px solid #94a3b8!important;border-radius:999px!important;background:#cbd5e1!important;background-image:none!important;box-shadow:inset 0 1px 2px rgba(15,23,42,.12)!important;cursor:pointer!important;opacity:1!important}
.switch-line input[type="checkbox"]:after{content:""!important;position:absolute!important;top:3px!important;left:3px!important;width:20px!important;height:20px!important;border-radius:50%!important;background:#fff!important;box-shadow:0 2px 5px rgba(15,23,42,.3)!important;transition:left .18s ease!important}
.switch-line input[type="checkbox"]:checked{border-color:#2457d6!important;background:#2457d6!important}
.switch-line input[type="checkbox"]:checked:after{left:25px!important}.permission-matrix .switch-line strong{color:#162033!important}
.permission-save-bar{position:sticky!important;bottom:10px!important;z-index:20!important;display:flex!important;justify-content:flex-end!important;margin-top:18px!important;padding:12px!important;border:1px solid #dce3ec!important;border-radius:14px!important}
.permission-save-bar span{display:none!important}.permission-save-bar button{width:auto!important;min-width:190px!important;margin:0!important;min-height:48px!important;background:#2457d6!important;background-image:none!important;color:#fff!important;border-color:#2457d6!important;box-shadow:none!important}
@media(min-width:901px){.site-header{padding:22px 14px!important;height:100vh!important;min-height:0!important}.brand{padding:0 0 18px!important;margin:0 0 12px!important;border-bottom:1px solid rgba(255,255,255,.12)!important}.brand-logo{width:72px!important;height:72px!important;flex-basis:72px!important;border-radius:18px!important}}
@media(max-width:700px){.site-header{height:68px!important;min-height:68px!important}.brand-logo{width:52px!important;height:52px!important;flex-basis:52px!important}.permission-save-bar{bottom:6px!important;padding:9px!important}.permission-save-bar button{width:100%!important;min-width:0!important}}
html.handheld-desktop-mode .site-header{height:68px!important;min-height:68px!important}html.handheld-desktop-mode .brand-logo{width:52px!important;height:52px!important;flex-basis:52px!important}

/* v3.7 — Navigation drawer cleanup */
@media(max-width:1199px){
  .main-nav{
    width:min(84vw,330px)!important;
    padding:0 16px 22px!important;
    background:#fff!important;
    border-left:1px solid #dfe6ef!important;
    box-shadow:-10px 0 28px rgba(15,23,42,.18)!important;
  }
  .nav-head{
    min-height:62px!important;
    margin-bottom:10px!important;
    border-bottom:1px solid #e2e8f0!important;
    color:#172033!important;
  }
  .nav-head strong{font-size:17px!important;font-weight:800!important}
  .menu-close{
    width:44px!important;
    height:44px!important;
    border-radius:12px!important;
    background:#f1f5f9!important;
    color:#334155!important;
    box-shadow:none!important;
  }
  .sidebar-user{
    padding:12px!important;
    margin:0 0 12px!important;
    gap:11px!important;
    background:#f7f9fc!important;
    border:1px solid #dfe6ef!important;
    border-radius:13px!important;
    box-shadow:none!important;
  }
  .sidebar-avatar{
    width:44px!important;
    height:44px!important;
    flex:0 0 44px!important;
    border-radius:12px!important;
    background:#2563eb!important;
    color:#fff!important;
    box-shadow:none!important;
  }
  .sidebar-user strong{
    color:#172033!important;
    font-size:14px!important;
    font-weight:800!important;
    line-height:1.25!important;
  }
  .sidebar-user span{
    color:#64748b!important;
    font-size:10px!important;
    font-weight:700!important;
    letter-spacing:.11em!important;
    margin-top:3px!important;
  }
  .nav-section{
    color:#64748b!important;
    font-size:10px!important;
    font-weight:850!important;
    letter-spacing:.13em!important;
    padding:12px 10px 5px!important;
  }
  .nav-link{
    min-height:48px!important;
    padding:7px 10px!important;
    gap:10px!important;
    margin:1px 0!important;
    border-radius:11px!important;
    color:#334155!important;
    font-size:15px!important;
    box-shadow:none!important;
    border:0!important;
  }
  .nav-icon{
    width:36px!important;
    height:36px!important;
    flex:0 0 36px!important;
    border-radius:10px!important;
    background:#eff6ff!important;
    color:#2563eb!important;
    border:0!important;
    box-shadow:none!important;
  }
  .nav-link:hover{
    background:#f1f5f9!important;
    color:#1e40af!important;
    box-shadow:none!important;
  }
  .nav-link.active{
    background:#eaf1ff!important;
    color:#1d4ed8!important;
    box-shadow:none!important;
    border-left:0!important;
    outline:0!important;
  }
  .nav-link.active::before,.nav-link.active::after{display:none!important;content:none!important}
  .nav-link.active .nav-icon,.nav-link:hover .nav-icon{
    background:#dbeafe!important;
    color:#1d4ed8!important;
    border-color:transparent!important;
    box-shadow:none!important;
  }
}
html.handheld-desktop-mode .main-nav{width:min(84vw,330px)!important;max-width:330px!important}
html.handheld-desktop-mode .nav-link{min-height:48px!important;padding:7px 10px!important}
html.handheld-desktop-mode .nav-section{padding:12px 10px 5px!important;color:#64748b!important}

/* v3.8 — cache-safe navigation identity + mobile desktop-mode login */
.main-nav .sidebar-user{
  background:#f8fafc!important;
  border:1px solid #dbe3ed!important;
  color:#172033!important;
  box-shadow:none!important;
}
.main-nav .sidebar-user strong{
  display:block!important;
  color:#172033!important;
  -webkit-text-fill-color:#172033!important;
  opacity:1!important;
  visibility:visible!important;
  font-size:15px!important;
  font-weight:850!important;
  line-height:1.25!important;
  text-shadow:none!important;
}
.main-nav .sidebar-user span{
  display:block!important;
  color:#64748b!important;
  -webkit-text-fill-color:#64748b!important;
  opacity:1!important;
  font-size:10px!important;
  font-weight:750!important;
  letter-spacing:.11em!important;
  text-shadow:none!important;
}
.main-nav .nav-link.active{
  background:#eaf1ff!important;
  color:#1d4ed8!important;
  border:0!important;
  border-left:0!important;
  box-shadow:none!important;
  outline:0!important;
}
.main-nav .nav-link.active::before,
.main-nav .nav-link.active::after{
  content:none!important;
  display:none!important;
  background:none!important;
  box-shadow:none!important;
}

/* A coarse-pointer device may report a desktop viewport when “Desktop site” is enabled. */
html.touch-desktop-viewport .minimal-login-layout{
  width:420px!important;
  min-width:420px!important;
  max-width:420px!important;
  min-height:100vh!important;
  margin:0 auto!important;
  padding:20px 24px 12px!important;
}
html.touch-desktop-viewport .minimal-login-main{
  width:100%!important;
  min-height:calc(100vh - 54px)!important;
  padding:18px 0 28px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}
html.touch-desktop-viewport .minimal-login-panel{
  width:100%!important;
  min-width:0!important;
  max-width:372px!important;
}
html.touch-desktop-viewport .minimal-login-brand img,
html.touch-desktop-viewport .minimal-login-logo{
  width:72px!important;
  height:72px!important;
}
html.touch-desktop-viewport .minimal-login-brand h1{font-size:28px!important}
html.touch-desktop-viewport .minimal-login-brand p{font-size:13px!important}
html.touch-desktop-viewport .minimal-login-form>label:not(.minimal-remember){font-size:13px!important}
html.touch-desktop-viewport .minimal-login-form>input,
html.touch-desktop-viewport .minimal-password-field input,
html.touch-desktop-viewport .minimal-login-button{
  width:100%!important;
  min-height:54px!important;
  height:54px!important;
  font-size:15px!important;
}
html.touch-desktop-viewport .minimal-login-footer{
  width:100%!important;
  font-size:11px!important;
  padding:8px 0 0!important;
}


/* v3.9 — universal login sizing for phone, tablet, laptop, desktop and mobile Desktop site */
.minimal-login-layout{
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  min-height:100svh!important;
  padding:clamp(16px,3vw,32px)!important;
}
.minimal-login-main{
  width:100%!important;
  min-height:calc(100svh - 64px)!important;
  padding:clamp(16px,3vh,34px) 0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}
.minimal-login-panel{
  width:min(100%,440px)!important;
  max-width:440px!important;
  min-width:0!important;
  margin:0 auto!important;
}
.minimal-login-brand img,.minimal-login-logo{
  width:clamp(64px,8vw,82px)!important;
  height:clamp(64px,8vw,82px)!important;
}
.minimal-login-brand h1{font-size:clamp(27px,3vw,34px)!important}
.minimal-login-form>input,.minimal-password-field input,.minimal-login-button{
  min-height:54px!important;
  height:54px!important;
  font-size:15px!important;
}
.minimal-login-footer{
  width:100%!important;
  margin-top:auto!important;
  padding-top:12px!important;
  text-align:center!important;
}

/* Touch device using a wide desktop-like CSS viewport (Chrome “Desktop site”, tablets). */
html.touch-desktop-viewport .minimal-login-layout{
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  padding:clamp(28px,4vw,56px)!important;
}
html.touch-desktop-viewport .minimal-login-main{
  width:100%!important;
  min-height:calc(100svh - 72px)!important;
  padding:24px 0 34px!important;
}
html.touch-desktop-viewport .minimal-login-panel{
  width:min(72vw,640px)!important;
  max-width:640px!important;
  min-width:520px!important;
}
html.touch-desktop-viewport .minimal-login-brand{margin-bottom:30px!important}
html.touch-desktop-viewport .minimal-login-brand img,
html.touch-desktop-viewport .minimal-login-logo{
  width:96px!important;
  height:96px!important;
}
html.touch-desktop-viewport .minimal-login-brand h1{font-size:40px!important}
html.touch-desktop-viewport .minimal-login-brand p{font-size:17px!important}
html.touch-desktop-viewport .minimal-login-form>label:not(.minimal-remember){font-size:17px!important;margin-top:18px!important}
html.touch-desktop-viewport .minimal-login-form>input,
html.touch-desktop-viewport .minimal-password-field input,
html.touch-desktop-viewport .minimal-login-button{
  min-height:70px!important;
  height:70px!important;
  font-size:19px!important;
  border-radius:14px!important;
}
html.touch-desktop-viewport .minimal-password-field button{font-size:16px!important;padding-inline:22px!important}
html.touch-desktop-viewport .minimal-remember{font-size:16px!important;margin:18px 0 20px!important}
html.touch-desktop-viewport .minimal-remember input{width:24px!important;height:24px!important}
html.touch-desktop-viewport .minimal-login-footer{font-size:14px!important;padding-top:16px!important}

/* Compact phones in normal mobile mode. */
@media(max-width:479px){
  .minimal-login-layout{padding:14px 20px 10px!important}
  .minimal-login-panel{width:100%!important;max-width:390px!important}
  .minimal-login-main{min-height:calc(100svh - 56px)!important;padding:12px 0 20px!important}
  .minimal-login-brand img,.minimal-login-logo{width:68px!important;height:68px!important}
  .minimal-login-brand h1{font-size:28px!important}
}

/* Short-height landscape screens: keep all controls usable without overlap. */
@media(max-height:620px){
  .minimal-login-main{align-items:flex-start!important;padding-top:6px!important}
  .minimal-login-brand{margin-bottom:12px!important}
  .minimal-login-footer{position:static!important}
}

/* v4.0 — Premium navy glass login experience */
.premium-login-page{margin:0!important;min-height:100vh!important;min-height:100dvh!important;background:#061326!important;color:#eaf2ff!important;overflow-x:hidden!important;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif!important}
.premium-login-shell{position:relative!important;isolation:isolate!important;display:flex!important;flex-direction:column!important;min-height:100vh!important;min-height:100dvh!important;padding:clamp(18px,3vw,42px)!important;overflow:hidden!important;background:radial-gradient(circle at 13% 12%,rgba(37,99,235,.28),transparent 31%),radial-gradient(circle at 88% 82%,rgba(14,165,233,.18),transparent 30%),linear-gradient(135deg,#061326 0%,#081b36 48%,#0a2140 100%)!important}
.premium-login-grid{position:absolute!important;inset:0!important;z-index:-3!important;opacity:.18!important;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px)!important;background-size:52px 52px!important;mask-image:linear-gradient(to bottom,black,transparent 82%)!important}
.premium-login-orb{position:absolute!important;z-index:-2!important;border-radius:50%!important;filter:blur(2px)!important;pointer-events:none!important}
.orb-one{width:clamp(260px,34vw,520px)!important;height:clamp(260px,34vw,520px)!important;top:-18%!important;left:-9%!important;background:linear-gradient(145deg,rgba(59,130,246,.32),rgba(37,99,235,.03))!important;box-shadow:inset -30px -30px 80px rgba(2,8,23,.28),0 30px 90px rgba(37,99,235,.18)!important}
.orb-two{width:clamp(220px,29vw,430px)!important;height:clamp(220px,29vw,430px)!important;right:-10%!important;bottom:-18%!important;background:linear-gradient(145deg,rgba(14,165,233,.22),rgba(37,99,235,.02))!important;box-shadow:inset 24px 24px 70px rgba(255,255,255,.035),0 28px 90px rgba(14,165,233,.12)!important}
.premium-login-stage{position:relative!important;display:grid!important;grid-template-columns:minmax(0,1.08fr) minmax(400px,520px)!important;gap:clamp(40px,7vw,110px)!important;align-items:center!important;width:min(1180px,100%)!important;margin:auto!important;min-height:calc(100dvh - 120px)!important}
.premium-login-hero{padding:clamp(12px,3vw,42px)!important;max-width:660px!important}
.premium-brand-mark{position:relative!important;width:clamp(112px,11vw,156px)!important;height:clamp(112px,11vw,156px)!important;display:grid!important;place-items:center!important;margin-bottom:34px!important;border:1px solid rgba(255,255,255,.18)!important;border-radius:34px!important;background:linear-gradient(145deg,rgba(255,255,255,.19),rgba(255,255,255,.055))!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset -18px -18px 42px rgba(2,8,23,.25),0 30px 70px rgba(0,0,0,.25),0 0 0 10px rgba(255,255,255,.025)!important;backdrop-filter:blur(22px)!important;transform:perspective(700px) rotateY(-7deg) rotateX(4deg)!important}
.premium-brand-mark:after{content:""!important;position:absolute!important;inset:9px!important;border-radius:25px!important;border:1px solid rgba(255,255,255,.11)!important;pointer-events:none!important}
.premium-brand-mark img{width:76%!important;height:76%!important;object-fit:contain!important;filter:drop-shadow(0 12px 20px rgba(0,0,0,.32))!important}
.premium-brand-mark span{font-size:48px!important;font-weight:900!important;letter-spacing:-.06em!important;color:#fff!important}
.premium-kicker{display:inline-flex!important;align-items:center!important;gap:10px!important;margin-bottom:15px!important;color:#79b7ff!important;font-size:12px!important;font-weight:850!important;letter-spacing:.18em!important;text-transform:uppercase!important}
.premium-kicker:before{content:""!important;width:32px!important;height:2px!important;border-radius:99px!important;background:linear-gradient(90deg,#60a5fa,#22d3ee)!important;box-shadow:0 0 16px rgba(96,165,250,.7)!important}
.premium-hero-copy h1{margin:0!important;max-width:620px!important;color:#fff!important;font-size:clamp(40px,5.2vw,72px)!important;line-height:1.01!important;letter-spacing:-.055em!important;font-weight:900!important;text-shadow:0 12px 35px rgba(0,0,0,.24)!important}
.premium-hero-copy p{max-width:590px!important;margin:22px 0 0!important;color:#9fb4d1!important;font-size:clamp(15px,1.35vw,19px)!important;line-height:1.75!important}
.premium-feature-row{display:flex!important;flex-wrap:wrap!important;gap:11px!important;margin-top:38px!important}
.premium-feature-row span{display:inline-flex!important;align-items:center!important;gap:9px!important;padding:10px 13px!important;border:1px solid rgba(148,163,184,.17)!important;border-radius:999px!important;background:rgba(255,255,255,.045)!important;color:#b9c9de!important;font-size:11px!important;font-weight:750!important;backdrop-filter:blur(12px)!important}
.premium-feature-row i{font-style:normal!important;color:#60a5fa!important;font-size:9px!important;letter-spacing:.05em!important}
.premium-login-card{position:relative!important;width:100%!important;padding:clamp(28px,4vw,46px)!important;border:1px solid rgba(255,255,255,.2)!important;border-radius:30px!important;background:linear-gradient(145deg,rgba(255,255,255,.16),rgba(255,255,255,.07))!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.33),inset 0 -1px 0 rgba(255,255,255,.04),0 36px 90px rgba(0,0,0,.34),0 0 0 1px rgba(59,130,246,.05)!important;backdrop-filter:blur(30px) saturate(135%)!important;-webkit-backdrop-filter:blur(30px) saturate(135%)!important;overflow:hidden!important;transform:translateZ(0)!important}
.premium-card-shine{position:absolute!important;inset:-40% 48% 52% -30%!important;transform:rotate(-18deg)!important;background:linear-gradient(110deg,transparent,rgba(255,255,255,.16),transparent)!important;filter:blur(3px)!important;pointer-events:none!important}
.premium-login-heading{position:relative!important;margin-bottom:26px!important}
.premium-mobile-logo{display:none!important}
.premium-welcome{display:block!important;margin-bottom:8px!important;color:#7db8ff!important;font-size:11px!important;font-weight:850!important;letter-spacing:.17em!important;text-transform:uppercase!important}
.premium-login-heading h2{margin:0!important;color:#fff!important;font-size:clamp(26px,3vw,34px)!important;line-height:1.15!important;letter-spacing:-.035em!important;font-weight:900!important}
.premium-login-heading p{margin:10px 0 0!important;color:#aebed3!important;font-size:13px!important;line-height:1.6!important}
.premium-login-form{position:relative!important}
.premium-login-form>label:not(.premium-remember){display:block!important;margin:16px 0 7px!important;color:#dce8f8!important;font-size:12px!important;font-weight:800!important}
.premium-input-wrap{position:relative!important;display:flex!important;align-items:center!important;width:100%!important}
.premium-input-wrap input{width:100%!important;height:56px!important;padding:0 16px 0 47px!important;border:1px solid rgba(148,163,184,.28)!important;border-radius:14px!important;background:rgba(5,18,38,.52)!important;color:#fff!important;outline:0!important;box-shadow:inset 0 1px 2px rgba(0,0,0,.18),0 1px 0 rgba(255,255,255,.04)!important;font-size:14px!important;transition:border-color .2s ease,box-shadow .2s ease,background .2s ease!important}
.premium-input-wrap input::placeholder{color:#7186a2!important}
.premium-input-wrap input:focus{border-color:#60a5fa!important;background:rgba(7,25,52,.7)!important;box-shadow:0 0 0 4px rgba(59,130,246,.14),0 12px 30px rgba(0,0,0,.12)!important}
.premium-input-icon{position:absolute!important;left:16px!important;z-index:2!important;display:grid!important;place-items:center!important;width:20px!important;height:20px!important;color:#79b7ff!important;font-size:13px!important;font-weight:900!important;pointer-events:none!important}
.premium-password-field input{padding-right:70px!important}
.premium-password-field button{position:absolute!important;right:8px!important;z-index:2!important;height:40px!important;padding:0 12px!important;border:0!important;border-radius:10px!important;background:rgba(255,255,255,.07)!important;color:#b9cbe1!important;font-size:11px!important;font-weight:800!important;box-shadow:none!important}
.premium-password-field button:hover{background:rgba(255,255,255,.12)!important;color:#fff!important}
.premium-remember{display:flex!important;align-items:center!important;gap:9px!important;margin:17px 0 20px!important;color:#b8c6d8!important;font-size:12px!important;font-weight:700!important;cursor:pointer!important}
.premium-remember input{appearance:none!important;width:19px!important;height:19px!important;margin:0!important;border:1px solid rgba(148,163,184,.42)!important;border-radius:6px!important;background:rgba(4,15,32,.58)!important;display:grid!important;place-items:center!important}
.premium-remember input:checked{border-color:#3b82f6!important;background:#2563eb!important}
.premium-remember input:checked:after{content:"✓"!important;color:#fff!important;font-size:12px!important;font-weight:900!important}
.premium-login-button{position:relative!important;width:100%!important;height:58px!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:10px!important;border:1px solid rgba(147,197,253,.56)!important;border-radius:15px!important;background:linear-gradient(135deg,#3b82f6 0%,#2563eb 48%,#1d4ed8 100%)!important;color:#fff!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 14px 32px rgba(37,99,235,.34),0 2px 4px rgba(0,0,0,.18)!important;font-size:14px!important;font-weight:900!important;letter-spacing:.01em!important;text-shadow:0 1px 2px rgba(0,0,0,.18)!important;overflow:hidden!important;transition:transform .2s ease,box-shadow .2s ease,filter .2s ease!important}
.premium-login-button:before{content:""!important;position:absolute!important;inset:0!important;background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.22) 48%,transparent 72%)!important;transform:translateX(-120%)!important;transition:transform .65s ease!important}
.premium-login-button:hover{transform:translateY(-2px)!important;filter:brightness(1.04)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 19px 38px rgba(37,99,235,.4)!important}
.premium-login-button:hover:before{transform:translateX(120%)!important}
.premium-login-button:disabled{opacity:.76!important;cursor:wait!important;transform:none!important}
.premium-button-arrow{font-size:18px!important;line-height:1!important}
.premium-security-note{display:flex!important;align-items:center!important;justify-content:center!important;gap:7px!important;margin-top:18px!important;color:#8094af!important;font-size:10px!important;font-weight:700!important;text-align:center!important}
.premium-security-note span{color:#60a5fa!important;font-size:8px!important}
.premium-login-card .alert{position:relative!important;margin:0 0 18px!important;padding:12px 14px!important;border-radius:12px!important;font-size:12px!important}
.premium-login-footer{display:flex!important;justify-content:center!important;align-items:center!important;gap:5px!important;min-height:28px!important;margin-top:8px!important;color:#70839e!important;font-size:10px!important;text-align:center!important}
.premium-login-footer a,.premium-login-footer strong{color:#9bb4d4!important;font-weight:800!important;text-decoration:none!important}
@media(max-width:900px){.premium-login-shell{padding:18px!important}.premium-login-stage{grid-template-columns:1fr!important;width:min(500px,100%)!important;gap:18px!important;min-height:calc(100dvh - 72px)!important}.premium-login-hero{display:none!important}.premium-login-card{padding:30px!important;border-radius:25px!important}.premium-mobile-logo{display:grid!important;place-items:center!important;width:76px!important;height:76px!important;margin:0 0 22px!important;border:1px solid rgba(255,255,255,.2)!important;border-radius:20px!important;background:rgba(255,255,255,.1)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 15px 35px rgba(0,0,0,.22)!important}.premium-mobile-logo img{width:70%!important;height:70%!important;object-fit:contain!important}.premium-mobile-logo span{font-size:28px!important;font-weight:900!important;color:#fff!important}}
@media(max-width:520px){.premium-login-shell{padding:12px!important;justify-content:center!important}.premium-login-stage{min-height:auto!important;margin:auto!important}.premium-login-card{padding:24px 20px!important;border-radius:22px!important}.premium-mobile-logo{width:64px!important;height:64px!important;margin-bottom:18px!important;border-radius:17px!important}.premium-login-heading{margin-bottom:20px!important}.premium-login-heading h2{font-size:26px!important}.premium-input-wrap input{height:54px!important}.premium-login-button{height:56px!important}.premium-login-footer{margin-top:10px!important;padding-bottom:max(2px,env(safe-area-inset-bottom))!important}}
@media(max-height:660px) and (min-width:901px){.premium-login-stage{min-height:auto!important}.premium-brand-mark{width:100px!important;height:100px!important;margin-bottom:20px!important}.premium-feature-row{margin-top:22px!important}.premium-login-card{padding:28px 34px!important}.premium-login-heading{margin-bottom:18px!important}.premium-login-form>label:not(.premium-remember){margin-top:11px!important}.premium-input-wrap input{height:50px!important}.premium-login-button{height:52px!important}}
html.touch-desktop-viewport .premium-login-stage{grid-template-columns:minmax(0,1fr) minmax(440px,560px)!important;width:min(1280px,94vw)!important;min-height:calc(100dvh - 120px)!important}
html.touch-desktop-viewport .premium-login-card{width:100%!important;max-width:560px!important;min-width:0!important;padding:44px!important}
html.touch-desktop-viewport .premium-input-wrap input{height:64px!important;font-size:17px!important}
html.touch-desktop-viewport .premium-login-button{height:64px!important;font-size:17px!important}
html.touch-desktop-viewport .premium-login-form>label:not(.premium-remember){font-size:15px!important}
@media(prefers-reduced-motion:reduce){.premium-login-button,.premium-login-button:before,.premium-input-wrap input{transition:none!important}}

/* v4.1 — simplified premium login, larger logo and icon-only password visibility */
.premium-login-hero{display:flex!important;align-items:center!important;justify-content:center!important;padding:28px!important;text-align:center!important}
.premium-brand-mark{width:clamp(190px,22vw,280px)!important;height:clamp(190px,22vw,280px)!important;margin:0!important;border-radius:34%!important;padding:24px!important;background:linear-gradient(145deg,rgba(255,255,255,.18),rgba(255,255,255,.07))!important;border:1px solid rgba(255,255,255,.25)!important;box-shadow:inset 0 2px 2px rgba(255,255,255,.38),0 34px 80px rgba(0,0,0,.36),0 0 70px rgba(59,130,246,.16)!important;backdrop-filter:blur(22px)!important}
.premium-brand-mark img{width:100%!important;height:100%!important;object-fit:contain!important;filter:drop-shadow(0 14px 20px rgba(0,0,0,.28))!important}
.premium-hero-copy,.premium-feature-row{display:none!important}
.premium-login-heading{margin:0 0 24px!important;text-align:center!important}
.premium-login-heading h2{font-size:clamp(30px,3.2vw,40px)!important;letter-spacing:.02em!important;text-transform:uppercase!important}
.premium-welcome,.premium-login-heading p,.premium-security-note{display:none!important}
.premium-mobile-logo{width:124px!important;height:124px!important;margin:0 auto 22px!important;border-radius:30px!important;padding:12px!important}
.premium-mobile-logo img{width:100%!important;height:100%!important;object-fit:contain!important}
.premium-password-field input{padding-right:60px!important}
.premium-password-field .premium-eye-toggle{position:absolute!important;right:8px!important;top:50%!important;transform:translateY(-50%)!important;display:grid!important;place-items:center!important;width:42px!important;height:42px!important;padding:0!important;border:1px solid rgba(148,163,184,.24)!important;border-radius:11px!important;background:rgba(255,255,255,.07)!important;color:#9fc8ff!important;cursor:pointer!important;box-shadow:none!important}
.premium-eye-toggle svg{width:21px!important;height:21px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.8!important;stroke-linecap:round!important;stroke-linejoin:round!important}
.premium-eye-toggle .eye-closed{display:none!important}
.premium-eye-toggle.is-visible .eye-open{display:none!important}
.premium-eye-toggle.is-visible .eye-closed{display:block!important}
.premium-eye-toggle:hover,.premium-eye-toggle:focus-visible{background:rgba(96,165,250,.16)!important;color:#fff!important;outline:0!important;box-shadow:0 0 0 3px rgba(59,130,246,.14)!important}
.premium-login-footer{opacity:.78!important;font-size:9px!important}
@media(max-width:900px){
  .premium-login-card{padding:30px!important}
  .premium-mobile-logo{display:grid!important;width:132px!important;height:132px!important;margin:0 auto 22px!important}
}
@media(max-width:520px){
  .premium-login-card{padding:24px 20px!important}
  .premium-mobile-logo{width:112px!important;height:112px!important;margin-bottom:18px!important;border-radius:26px!important}
  .premium-login-heading h2{font-size:29px!important}
}
html.touch-desktop-viewport .premium-mobile-logo{width:150px!important;height:150px!important;margin:0 auto 26px!important}


/* v4.2 — single-logo centered login composition */
.premium-login-stage{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:min(560px,100%)!important;
  min-height:calc(100dvh - 96px)!important;
  margin:auto!important;
}
.premium-login-hero{display:none!important}
.premium-login-card{
  width:100%!important;
  max-width:540px!important;
  padding:clamp(28px,4vw,44px)!important;
}
.premium-mobile-logo{
  display:grid!important;
  place-items:center!important;
  width:clamp(116px,18vw,148px)!important;
  height:clamp(116px,18vw,148px)!important;
  margin:0 auto 22px!important;
  padding:14px!important;
  border:1px solid rgba(255,255,255,.2)!important;
  border-radius:30px!important;
  background:linear-gradient(145deg,rgba(255,255,255,.14),rgba(255,255,255,.055))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 18px 42px rgba(0,0,0,.24),0 0 34px rgba(59,130,246,.12)!important;
  backdrop-filter:blur(20px)!important;
}
.premium-mobile-logo img{width:100%!important;height:100%!important;object-fit:contain!important;filter:drop-shadow(0 10px 16px rgba(0,0,0,.24))!important}
.premium-login-heading{margin-bottom:22px!important}
.premium-input-wrap input:focus{box-shadow:0 0 0 3px rgba(59,130,246,.12),0 8px 20px rgba(0,0,0,.1)!important}
html.touch-desktop-viewport .premium-login-stage{
  display:flex!important;
  width:min(600px,92vw)!important;
  min-height:calc(100dvh - 110px)!important;
}
html.touch-desktop-viewport .premium-login-card{max-width:600px!important;padding:42px!important}
html.touch-desktop-viewport .premium-mobile-logo{width:154px!important;height:154px!important;margin:0 auto 25px!important}
@media(max-width:520px){
  .premium-login-shell{padding:12px!important}
  .premium-login-stage{width:100%!important;min-height:auto!important}
  .premium-login-card{padding:24px 20px!important}
  .premium-mobile-logo{width:116px!important;height:116px!important;margin-bottom:18px!important;border-radius:27px!important}
}

/* v4.3 — mobile and Chrome Desktop Site width correction */
@media (max-width: 700px){
  .premium-login-shell{
    padding:16px!important;
    justify-content:center!important;
    overflow-y:auto!important;
  }
  .premium-login-stage{
    width:100%!important;
    max-width:none!important;
    min-height:auto!important;
    margin:auto!important;
  }
  .premium-login-card{
    width:100%!important;
    max-width:none!important;
    padding:28px 24px!important;
    border-radius:26px!important;
  }
  .premium-mobile-logo{
    width:132px!important;
    height:132px!important;
    margin-bottom:20px!important;
  }
  .premium-login-heading h2{font-size:32px!important}
  .premium-input-wrap input{height:58px!important;font-size:15px!important}
  .premium-login-button{height:58px!important;font-size:15px!important}
}

/* Chrome “Desktop site” on phones keeps a wide CSS viewport. Fill that
   viewport so the browser's down-scaling does not make the form tiny. */
html.touch-desktop-viewport .premium-login-shell{
  padding:34px 3vw!important;
  justify-content:center!important;
  overflow-y:auto!important;
}
html.touch-desktop-viewport .premium-login-stage{
  width:94vw!important;
  max-width:none!important;
  min-height:auto!important;
  margin:auto!important;
}
html.touch-desktop-viewport .premium-login-card{
  width:100%!important;
  max-width:none!important;
  padding:58px 64px!important;
  border-radius:38px!important;
}
html.touch-desktop-viewport .premium-mobile-logo{
  width:190px!important;
  height:190px!important;
  margin:0 auto 32px!important;
  padding:20px!important;
  border-radius:42px!important;
}
html.touch-desktop-viewport .premium-login-heading{
  margin-bottom:32px!important;
}
html.touch-desktop-viewport .premium-login-heading h2{
  font-size:46px!important;
}
html.touch-desktop-viewport .premium-login-form>label:not(.premium-remember){
  margin:24px 0 10px!important;
  font-size:19px!important;
}
html.touch-desktop-viewport .premium-input-wrap input{
  height:78px!important;
  padding-left:64px!important;
  border-radius:20px!important;
  font-size:21px!important;
}
html.touch-desktop-viewport .premium-input-icon{
  left:22px!important;
  width:28px!important;
  height:28px!important;
  font-size:20px!important;
}
html.touch-desktop-viewport .premium-password-field input{
  padding-right:92px!important;
}
html.touch-desktop-viewport .premium-password-field .premium-eye-toggle{
  right:12px!important;
  width:58px!important;
  height:58px!important;
  border-radius:15px!important;
}
html.touch-desktop-viewport .premium-eye-toggle svg{
  width:28px!important;
  height:28px!important;
}
html.touch-desktop-viewport .premium-remember{
  gap:13px!important;
  margin:24px 0 28px!important;
  font-size:18px!important;
}
html.touch-desktop-viewport .premium-remember input{
  width:28px!important;
  height:28px!important;
  border-radius:8px!important;
}
html.touch-desktop-viewport .premium-login-button{
  height:78px!important;
  border-radius:20px!important;
  font-size:21px!important;
}
html.touch-desktop-viewport .premium-button-arrow{font-size:28px!important}
html.touch-desktop-viewport .premium-login-footer{
  margin-top:18px!important;
  font-size:13px!important;
}

/* v4.4 — true Chrome Desktop Site compensation and compact full-width login */
@media (max-width:700px){
  .premium-login-page{min-height:100dvh!important}
  .premium-login-shell{
    width:100%!important;
    min-height:100dvh!important;
    padding:16px!important;
    justify-content:center!important;
  }
  .premium-login-stage{
    width:100%!important;
    min-height:calc(100dvh - 62px)!important;
    display:flex!important;
    align-items:center!important;
  }
  .premium-login-card{
    width:100%!important;
    max-width:520px!important;
    margin:auto!important;
    padding:26px 22px!important;
  }
  .premium-mobile-logo{width:122px!important;height:122px!important}
  .premium-login-footer{margin-top:8px!important}
}

html.touch-desktop-viewport,
html.touch-desktop-viewport body{
  width:var(--desktop-site-width)!important;
  min-width:var(--desktop-site-width)!important;
  max-width:var(--desktop-site-width)!important;
  min-height:var(--desktop-site-height)!important;
  margin:0!important;
  overflow-x:hidden!important;
}
html.touch-desktop-viewport .premium-login-shell{
  zoom:var(--desktop-site-zoom)!important;
  width:var(--desktop-site-width)!important;
  min-width:var(--desktop-site-width)!important;
  max-width:var(--desktop-site-width)!important;
  min-height:var(--desktop-site-height)!important;
  padding:16px!important;
  box-sizing:border-box!important;
  justify-content:center!important;
  overflow-y:auto!important;
}
html.touch-desktop-viewport .premium-login-stage{
  width:100%!important;
  max-width:none!important;
  min-height:calc(var(--desktop-site-height) - 58px)!important;
  margin:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}
html.touch-desktop-viewport .premium-login-card{
  width:100%!important;
  max-width:none!important;
  margin:auto!important;
  padding:26px 22px!important;
  border-radius:25px!important;
}
html.touch-desktop-viewport .premium-mobile-logo{
  width:124px!important;
  height:124px!important;
  margin:0 auto 18px!important;
  padding:12px!important;
  border-radius:27px!important;
}
html.touch-desktop-viewport .premium-login-heading{margin-bottom:20px!important}
html.touch-desktop-viewport .premium-login-heading h2{font-size:31px!important}
html.touch-desktop-viewport .premium-login-form>label:not(.premium-remember){margin:15px 0 7px!important;font-size:13px!important}
html.touch-desktop-viewport .premium-input-wrap input{height:56px!important;padding-left:47px!important;border-radius:14px!important;font-size:15px!important}
html.touch-desktop-viewport .premium-input-icon{left:16px!important;width:20px!important;height:20px!important;font-size:13px!important}
html.touch-desktop-viewport .premium-password-field input{padding-right:64px!important}
html.touch-desktop-viewport .premium-password-field .premium-eye-toggle{right:7px!important;width:42px!important;height:42px!important;border-radius:11px!important}
html.touch-desktop-viewport .premium-eye-toggle svg{width:21px!important;height:21px!important}
html.touch-desktop-viewport .premium-remember{gap:9px!important;margin:16px 0 19px!important;font-size:12px!important}
html.touch-desktop-viewport .premium-remember input{width:19px!important;height:19px!important;border-radius:6px!important}
html.touch-desktop-viewport .premium-login-button{height:57px!important;border-radius:15px!important;font-size:15px!important}
html.touch-desktop-viewport .premium-button-arrow{font-size:22px!important}
html.touch-desktop-viewport .premium-login-footer{margin-top:8px!important;font-size:9px!important}


/* v4.5 — Stable Chrome Desktop Site layout (no zoom, no clipping) */
html.touch-desktop-viewport,
html.touch-desktop-viewport body{
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  min-height:100%!important;
  overflow-x:hidden!important;
  zoom:1!important;
  transform:none!important;
}
html.touch-desktop-viewport .premium-login-page{
  width:100%!important;
  min-width:0!important;
  min-height:100vh!important;
  overflow-x:hidden!important;
}
html.touch-desktop-viewport .premium-login-shell{
  zoom:1!important;
  transform:none!important;
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  min-height:100vh!important;
  padding:34px 4vw 26px!important;
  box-sizing:border-box!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  align-items:center!important;
}
html.touch-desktop-viewport .premium-login-stage{
  display:block!important;
  width:92vw!important;
  min-width:0!important;
  max-width:920px!important;
  min-height:0!important;
  margin:auto!important;
  transform:none!important;
}
html.touch-desktop-viewport .premium-login-card{
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  padding:58px 64px!important;
  border-radius:38px!important;
  box-sizing:border-box!important;
  transform:none!important;
}
html.touch-desktop-viewport .premium-login-heading{
  margin-bottom:34px!important;
  text-align:center!important;
}
html.touch-desktop-viewport .premium-mobile-logo{
  display:grid!important;
  place-items:center!important;
  width:150px!important;
  height:150px!important;
  margin:0 auto 28px!important;
  border-radius:36px!important;
}
html.touch-desktop-viewport .premium-mobile-logo img{
  width:78%!important;
  height:78%!important;
  object-fit:contain!important;
}
html.touch-desktop-viewport .premium-login-heading h2{
  font-size:52px!important;
  line-height:1.05!important;
}
html.touch-desktop-viewport .premium-login-form>label:not(.premium-remember){
  margin:25px 0 12px!important;
  font-size:22px!important;
}
html.touch-desktop-viewport .premium-input-wrap{
  border-radius:24px!important;
}
html.touch-desktop-viewport .premium-input-wrap input{
  height:88px!important;
  padding-left:82px!important;
  padding-right:104px!important;
  border-radius:24px!important;
  font-size:25px!important;
}
html.touch-desktop-viewport .premium-input-icon{
  left:28px!important;
  font-size:25px!important;
}
html.touch-desktop-viewport .premium-eye-toggle{
  right:12px!important;
  width:68px!important;
  height:64px!important;
  border-radius:18px!important;
}
html.touch-desktop-viewport .premium-eye-toggle svg{
  width:31px!important;
  height:31px!important;
}
html.touch-desktop-viewport .premium-remember{
  margin:24px 0 30px!important;
  gap:14px!important;
  font-size:20px!important;
}
html.touch-desktop-viewport .premium-remember input{
  width:30px!important;
  height:30px!important;
}
html.touch-desktop-viewport .premium-login-button{
  height:88px!important;
  border-radius:24px!important;
  font-size:25px!important;
}
html.touch-desktop-viewport .premium-button-arrow{
  font-size:34px!important;
}
html.touch-desktop-viewport .premium-login-footer{
  width:92vw!important;
  max-width:920px!important;
  margin:20px auto 0!important;
  font-size:15px!important;
  line-height:1.5!important;
}

/* v4.6 — normalize Android Chrome Desktop Site to the real device width.
   No zoom, transforms, fixed canvas widths, or touch-desktop enlargement. */
html.desktop-site-normalized,
html.desktop-site-normalized body{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  margin:0!important;
  overflow-x:hidden!important;
  zoom:1!important;
  transform:none!important;
}
html.desktop-site-normalized .premium-login-shell{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  min-height:100dvh!important;
  padding:18px 14px 14px!important;
  box-sizing:border-box!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow-x:hidden!important;
  zoom:1!important;
  transform:none!important;
}
html.desktop-site-normalized .premium-login-stage{
  width:100%!important;
  min-width:0!important;
  max-width:520px!important;
  min-height:0!important;
  margin:auto!important;
  display:block!important;
  transform:none!important;
}
html.desktop-site-normalized .premium-login-card{
  width:100%!important;
  min-width:0!important;
  max-width:520px!important;
  margin:0 auto!important;
  padding:28px 22px 26px!important;
  border-radius:26px!important;
  box-sizing:border-box!important;
  transform:none!important;
}
html.desktop-site-normalized .premium-login-heading{margin-bottom:20px!important;text-align:center!important}
html.desktop-site-normalized .premium-mobile-logo{
  width:126px!important;
  height:126px!important;
  margin:0 auto 18px!important;
  padding:12px!important;
  border-radius:28px!important;
}
html.desktop-site-normalized .premium-mobile-logo img{width:82%!important;height:82%!important;object-fit:contain!important}
html.desktop-site-normalized .premium-login-heading h2{font-size:32px!important;line-height:1.1!important}
html.desktop-site-normalized .premium-login-form>label:not(.premium-remember){margin:16px 0 8px!important;font-size:14px!important}
html.desktop-site-normalized .premium-input-wrap{width:100%!important;border-radius:15px!important;box-sizing:border-box!important}
html.desktop-site-normalized .premium-input-wrap input{
  width:100%!important;
  height:58px!important;
  min-width:0!important;
  padding:0 58px 0 48px!important;
  border-radius:15px!important;
  font-size:16px!important;
  box-sizing:border-box!important;
}
html.desktop-site-normalized .premium-input-icon{left:16px!important;font-size:15px!important}
html.desktop-site-normalized .premium-eye-toggle{right:7px!important;width:44px!important;height:44px!important;border-radius:12px!important}
html.desktop-site-normalized .premium-eye-toggle svg{width:22px!important;height:22px!important}
html.desktop-site-normalized .premium-remember{margin:17px 0 20px!important;gap:10px!important;font-size:13px!important}
html.desktop-site-normalized .premium-remember input{width:21px!important;height:21px!important}
html.desktop-site-normalized .premium-login-button{width:100%!important;height:58px!important;border-radius:15px!important;font-size:16px!important}
html.desktop-site-normalized .premium-button-arrow{font-size:23px!important}
html.desktop-site-normalized .premium-login-footer{width:100%!important;max-width:520px!important;margin:10px auto 0!important;font-size:10px!important}

@media (max-width:380px){
  html.desktop-site-normalized .premium-login-card{padding:24px 18px 22px!important}
  html.desktop-site-normalized .premium-mobile-logo{width:112px!important;height:112px!important}
}

/* v4.7 Telegram Notification Center */
.notification-status-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.routing-head,.routing-row{grid-template-columns:minmax(180px,1fr) 110px 110px 130px}
@media(max-width:900px){.notification-status-grid{grid-template-columns:1fr}.routing-head,.routing-row{grid-template-columns:1fr 1fr 1fr}.routing-head b:first-child,.routing-row strong{grid-column:1/-1}.routing-head b:first-child{display:none}.routing-head b:last-child,.routing-row label:last-child{grid-column:auto}}
@media(max-width:520px){.routing-head,.routing-row{grid-template-columns:1fr}.routing-head b{display:none}.routing-row strong{grid-column:auto}.routing-row label{padding:6px 0;border-top:1px solid rgba(15,23,42,.08)}}

/* v4.10 — mobile navigation + employee panel stability */
html,body{max-width:100%;overflow-x:hidden}
@media(max-width:900px){
  .site-header{
    position:sticky!important;
    top:0!important;
    left:auto!important;
    right:auto!important;
    width:100%!important;
    height:72px!important;
    min-height:72px!important;
    padding:0 16px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    z-index:1000!important;
  }
  .brand{display:flex!important;min-width:0!important;width:auto!important;margin:0!important;padding:0!important}
  .brand-logo{width:52px!important;height:52px!important;flex:0 0 52px!important;border-radius:14px!important;object-fit:contain!important}
  .menu-toggle{
    display:flex!important;
    visibility:visible!important;
    opacity:1!important;
    position:relative!important;
    right:auto!important;
    top:auto!important;
    flex:0 0 50px!important;
    width:50px!important;
    height:50px!important;
    z-index:1002!important;
  }
  .main-nav{width:min(88vw,360px)!important;max-width:360px!important}
  main{
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    padding:18px 16px 42px!important;
    overflow:visible!important;
  }
  .page-title-wrap{display:block!important;margin:0 0 16px!important;padding:0!important}
  .page-title-wrap h1{margin:0!important;font-size:30px!important;line-height:1.15!important;color:#172033!important}
  .dashboard-metrics,.grid,.row,.profile-grid,.employee-summary{width:100%!important;max-width:100%!important}
  .card,.dashboard-panel,.metric-card,.employee-hero,.attendance-cta{max-width:100%!important;min-width:0!important}
  .employee-hero{margin-top:0!important;padding:22px 20px!important;border-radius:18px!important}
  .employee-hero h2{font-size:32px!important;line-height:1.1!important;text-shadow:none!important;filter:none!important}
  .employee-hero p,.employee-hero .eyebrow,.today-date{text-shadow:none!important;filter:none!important}
  .employee-summary{display:grid!important;grid-template-columns:1fr!important;gap:14px!important}
  .employee-summary .card:first-child{grid-column:auto!important}
  .employee-summary .card{padding:20px!important;min-height:142px!important}
  .status-large,.stat-small{
    color:#172033!important;
    font-size:32px!important;
    line-height:1.15!important;
    font-weight:800!important;
    text-shadow:none!important;
    filter:none!important;
    -webkit-text-stroke:0!important;
    opacity:1!important;
  }
  .employee-summary .muted{color:#667085!important;font-size:16px!important}
  .attendance-cta{padding:22px!important}
  .attendance-cta h3{font-size:24px!important}
  .attendance-cta .muted{font-size:16px!important;line-height:1.55!important}
}
@media(max-width:420px){
  main{padding-inline:12px!important}
  .page-title-wrap h1{font-size:27px!important}
  .employee-hero h2{font-size:29px!important}
  .status-large,.stat-small{font-size:28px!important}
}

/* HRMS v5.2 — employee dashboard profile hero + universal responsive polish */
.employee-dashboard-hero{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:clamp(18px,4vw,46px)!important;
  min-height:230px;
  padding:clamp(28px,4vw,48px)!important;
  overflow:hidden;
}
.employee-hero-copy{min-width:0;display:flex;flex-direction:column;align-items:flex-start}
.employee-dashboard-hero .eyebrow{letter-spacing:.14em;text-transform:uppercase;font-weight:800}
.employee-dashboard-hero h2{margin:.35rem 0 .2rem!important;overflow-wrap:anywhere}
.employee-dashboard-hero .employee-code{margin:0!important;font-weight:700;letter-spacing:.04em}
.employee-dashboard-hero .today-date{display:inline-flex;margin-top:18px;padding:9px 14px;border:1px solid rgba(255,255,255,.22);border-radius:999px;background:rgba(255,255,255,.12);font-weight:700;line-height:1.2}
.employee-hero-photo-wrap{
  position:relative;
  width:clamp(132px,15vw,190px);
  height:clamp(132px,15vw,190px);
  flex:0 0 auto;
  border-radius:50%;
  padding:5px;
  background:rgba(255,255,255,.94);
  box-shadow:0 18px 44px rgba(4,20,38,.30),0 0 0 1px rgba(255,255,255,.35);
}
.employee-hero-photo,.employee-hero-photo-fallback{width:100%;height:100%;border-radius:50%;display:grid;place-items:center}
.employee-hero-photo{object-fit:cover;object-position:center;background:#eaf2fb}
.employee-hero-photo-fallback{font-size:clamp(44px,7vw,76px);font-weight:900;color:#164978;background:linear-gradient(145deg,#fff,#dbeafe)}
.employee-online-dot{position:absolute;right:8%;bottom:8%;width:18%;height:18%;min-width:18px;min-height:18px;border-radius:50%;background:#22c55e;border:clamp(3px,.4vw,5px) solid #fff;box-shadow:0 4px 12px rgba(0,0,0,.2)}

@media (min-width:1200px){
  .employee-dashboard-hero{min-height:260px}
  .employee-summary{grid-template-columns:1.25fr 1fr 1fr!important}
  .profile-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)!important}
}
@media (min-width:701px) and (max-width:1199px){
  .employee-dashboard-hero{min-height:220px}
  .employee-summary{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .employee-summary .card{min-width:0!important}
}
@media (max-width:700px){
  .employee-dashboard-hero{
    grid-template-columns:minmax(0,1fr) auto!important;
    min-height:0!important;
    gap:14px!important;
    padding:22px 18px!important;
  }
  .employee-hero-photo-wrap{width:104px;height:104px;padding:4px}
  .employee-dashboard-hero .today-date{margin-top:13px;padding:8px 11px;font-size:13px}
  .employee-dashboard-hero .eyebrow{font-size:12px}
  .employee-dashboard-hero .employee-code{font-size:14px}
}
@media (max-width:460px){
  .employee-dashboard-hero{grid-template-columns:minmax(0,1fr) 86px!important;gap:10px!important;padding:19px 15px!important}
  .employee-hero-photo-wrap{width:86px;height:86px}
  .employee-dashboard-hero h2{font-size:clamp(24px,8vw,29px)!important}
  .employee-dashboard-hero .today-date{white-space:normal}
}
@media (max-width:340px){
  .employee-dashboard-hero{grid-template-columns:1fr!important;text-align:center}
  .employee-hero-copy{align-items:center}
  .employee-hero-photo-wrap{grid-row:1;margin:auto;width:92px;height:92px}
}
@media (orientation:landscape) and (max-height:520px) and (max-width:1000px){
  .employee-dashboard-hero{min-height:0!important;padding:16px 20px!important}
  .employee-hero-photo-wrap{width:88px;height:88px}
  .employee-dashboard-hero .today-date{margin-top:9px}
}
@media print{
  .employee-hero-photo-wrap{box-shadow:none!important;border:1px solid #bbb!important}
  .employee-online-dot{display:none!important}
}


/* HRMS v5.2.1 — hard containment fix for employee hero photo */
.employee-dashboard-hero{overflow:hidden!important;isolation:isolate!important}
.employee-dashboard-hero .employee-hero-photo-wrap{
  position:relative!important;display:block!important;box-sizing:border-box!important;
  width:112px!important;height:112px!important;min-width:112px!important;max-width:112px!important;
  min-height:112px!important;max-height:112px!important;overflow:hidden!important;border-radius:50%!important;
  justify-self:end!important;align-self:center!important;flex:0 0 112px!important;
}
.employee-dashboard-hero .employee-hero-photo{
  display:block!important;position:static!important;inset:auto!important;transform:none!important;
  width:100%!important;height:100%!important;min-width:0!important;max-width:100%!important;
  min-height:0!important;max-height:100%!important;margin:0!important;padding:0!important;
  object-fit:cover!important;object-position:center!important;border-radius:50%!important;
}
.employee-dashboard-hero .employee-hero-photo-fallback{position:static!important;width:100%!important;height:100%!important}
@media(max-width:700px){
  .employee-dashboard-hero{grid-template-columns:minmax(0,1fr) 96px!important}
  .employee-dashboard-hero .employee-hero-photo-wrap{width:96px!important;height:96px!important;min-width:96px!important;max-width:96px!important;min-height:96px!important;max-height:96px!important;flex-basis:96px!important}
}
@media(max-width:380px){
  .employee-dashboard-hero{grid-template-columns:minmax(0,1fr) 78px!important}
  .employee-dashboard-hero .employee-hero-photo-wrap{width:78px!important;height:78px!important;min-width:78px!important;max-width:78px!important;min-height:78px!important;max-height:78px!important;flex-basis:78px!important}
}


/* ISP Business Finance ERP Stage 2 */
.finance-hero{display:flex;justify-content:space-between;align-items:end;gap:20px;padding:28px;border-radius:24px;background:linear-gradient(135deg,#0f2a4a,#164978);color:#fff;margin-bottom:20px}.finance-hero h2{margin:4px 0 8px;color:#fff}.finance-hero p{margin:0;color:#dbeafe}.finance-hero form{display:flex;gap:8px;align-items:center}.finance-hero input{background:#fff}.finance-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:18px 0}.finance-grid.compact{grid-template-columns:repeat(4,minmax(0,1fr))}.finance-card{background:#fff;border:1px solid #dbe5ef;border-radius:18px;padding:18px;box-shadow:0 8px 22px rgba(15,42,74,.07);min-width:0}.finance-card>span{font-size:26px;color:#2563eb}.finance-card small{display:block;color:#64748b;margin:7px 0}.finance-card strong{display:block;font-size:clamp(20px,2.2vw,30px);overflow-wrap:anywhere;color:#0f172a}.finance-card strong.negative{color:#dc2626}.finance-dashboard-block{margin:22px 0}.finance-dashboard-block .panel-heading{display:flex;justify-content:space-between;align-items:end}.business-actions{margin-top:18px}.form-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.calculation-strip{display:flex;gap:24px;flex-wrap:wrap;margin:16px 0;padding:14px 16px;border-radius:14px;background:#eff6ff;color:#1e3a8a}.calculation-strip b{font-size:20px;margin-left:8px}@media(max-width:900px){.finance-grid,.finance-grid.compact{grid-template-columns:repeat(2,minmax(0,1fr))}.form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.finance-hero{align-items:stretch;flex-direction:column}.finance-hero form{width:100%}.finance-hero form input{flex:1}}@media(max-width:520px){.finance-grid,.finance-grid.compact,.form-grid{grid-template-columns:1fr}.finance-hero{padding:20px}.finance-card{padding:16px}.finance-dashboard-block .panel-heading{align-items:flex-start;gap:10px;flex-direction:column}}

/* v6.1 Premium ERP Dashboard — additive; existing modules remain untouched */
.erp-dashboard{display:grid;gap:20px}.erp-hero{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:30px;border-radius:28px;color:#fff;background:radial-gradient(circle at 90% 15%,rgba(91,188,255,.45),transparent 32%),linear-gradient(135deg,#071b32 0%,#123f69 52%,#0f6f87 100%);box-shadow:0 22px 55px rgba(5,30,55,.24),inset 0 1px 0 rgba(255,255,255,.2)}.erp-hero:after{content:"";position:absolute;width:240px;height:240px;border-radius:50%;right:-80px;bottom:-150px;background:rgba(255,255,255,.11);filter:blur(2px)}.erp-hero-copy,.erp-health{position:relative;z-index:1}.erp-kicker,.erp-section-head span,.erp-module-head>div>span{display:block;font-size:11px;font-weight:900;letter-spacing:.17em;color:#7dd3fc}.erp-hero h2{margin:7px 0 5px;color:#fff;font-size:clamp(28px,3.2vw,46px);line-height:1.08}.erp-hero p{margin:0;color:#d9efff}.erp-health{min-width:220px;padding:18px 20px;border:1px solid rgba(255,255,255,.22);border-radius:20px;background:rgba(255,255,255,.12);backdrop-filter:blur(14px);box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}.erp-health span,.erp-health small{display:block;color:#d9efff}.erp-health strong{display:block;margin:5px 0;font-size:24px}.erp-kpi-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}.erp-kpi{position:relative;overflow:hidden;display:flex;align-items:center;gap:13px;min-width:0;padding:18px;border:1px solid rgba(255,255,255,.68);border-radius:22px;background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(242,248,255,.9));box-shadow:0 14px 34px rgba(24,48,82,.10),inset 0 1px 0 #fff;text-decoration:none;transition:transform .2s ease,box-shadow .2s ease}.erp-kpi:before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:var(--kpi)}.erp-kpi:hover{transform:translateY(-4px);box-shadow:0 20px 42px rgba(24,48,82,.16)}.erp-kpi-icon{display:grid;place-items:center;width:45px;height:45px;flex:0 0 45px;border-radius:15px;color:#fff;font-size:21px;font-weight:900;background:linear-gradient(145deg,var(--kpi-light),var(--kpi));box-shadow:0 9px 18px color-mix(in srgb,var(--kpi) 28%,transparent),inset 0 1px 0 rgba(255,255,255,.45)}.erp-kpi span,.erp-kpi small{display:block}.erp-kpi span{color:#64748b;font-size:12px;font-weight:800}.erp-kpi strong{display:block;margin:4px 0;color:#0f172a;font-size:clamp(18px,1.55vw,25px);line-height:1.1;overflow-wrap:anywhere}.erp-kpi small{color:#94a3b8;font-size:10px}.erp-kpi-collection{--kpi:#059669;--kpi-light:#34d399}.erp-kpi-expense,.erp-kpi-loss{--kpi:#e11d48;--kpi-light:#fb7185}.erp-kpi-cash{--kpi:#2563eb;--kpi-light:#60a5fa}.erp-kpi-profit{--kpi:#7c3aed;--kpi-light:#a78bfa}.erp-kpi-people{--kpi:#0891b2;--kpi-light:#22d3ee}.erp-kpi-payroll{--kpi:#d97706;--kpi-light:#fbbf24}.erp-section,.erp-module-card{border:1px solid #dce8f4;border-radius:24px;background:rgba(255,255,255,.94);box-shadow:0 13px 34px rgba(22,50,80,.08)}.erp-section{padding:22px}.erp-section-head,.erp-module-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}.erp-section-head span,.erp-module-head>div>span{color:#2875a7}.erp-section-head h3,.erp-module-head h3{margin:4px 0 0;color:#10243a}.erp-action-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-top:17px}.erp-action{--action:#2563eb;--action2:#60a5fa;position:relative;display:flex;align-items:center;gap:11px;min-width:0;padding:14px;border-radius:18px;color:#fff;text-decoration:none;background:linear-gradient(135deg,var(--action2),var(--action));box-shadow:0 11px 22px color-mix(in srgb,var(--action) 25%,transparent),inset 0 1px 0 rgba(255,255,255,.5);transition:transform .2s ease,filter .2s ease}.erp-action:after{content:"";position:absolute;left:8%;right:8%;top:5px;height:38%;border-radius:14px;background:linear-gradient(180deg,rgba(255,255,255,.42),transparent);pointer-events:none}.erp-action:hover{transform:translateY(-3px);filter:saturate(1.08)}.erp-action>b{position:relative;z-index:1;display:grid;place-items:center;width:37px;height:37px;flex:0 0 37px;border-radius:13px;background:rgba(255,255,255,.2);font-size:20px}.erp-action span{position:relative;z-index:1;min-width:0}.erp-action strong,.erp-action small{display:block}.erp-action strong{font-size:13px}.erp-action small{margin-top:2px;color:rgba(255,255,255,.82);font-size:9px;line-height:1.25}.erp-action i{position:relative;z-index:1;margin-left:auto;font-style:normal}.erp-action-cyan{--action:#0e7490;--action2:#22d3ee}.erp-action-green{--action:#047857;--action2:#34d399}.erp-action-rose{--action:#be123c;--action2:#fb7185}.erp-action-violet{--action:#6d28d9;--action2:#a78bfa}.erp-action-amber{--action:#b45309;--action2:#fbbf24}.erp-module-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.erp-module-card{padding:22px;min-width:0}.erp-module-head a{color:#2778ac;font-size:12px;font-weight:800;text-decoration:none}.erp-mini-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:17px}.erp-mini-grid>div{padding:13px;border:1px solid #e3edf6;border-radius:15px;background:linear-gradient(145deg,#fff,#f5f9fd)}.erp-mini-grid span,.erp-mini-grid strong{display:block}.erp-mini-grid span{color:#718096;font-size:11px}.erp-mini-grid strong{margin-top:4px;color:#10243a;font-size:21px}.erp-progress{margin-top:17px}.erp-progress>div:first-child{display:flex;justify-content:space-between;color:#53677b;font-size:12px}.erp-progress-track{height:9px;margin-top:8px;overflow:hidden;border-radius:999px;background:#e9f1f7}.erp-progress-track i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#14b8a6,#38bdf8);box-shadow:0 0 12px rgba(56,189,248,.5)}.erp-money-list{display:grid;gap:0;margin-top:13px}.erp-money-list>div{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:11px 0;border-bottom:1px dashed #dce7f0}.erp-money-list>div:last-child{border-bottom:0}.erp-money-list span{color:#60758b}.erp-money-list b{color:#10243a;text-align:right}.erp-money-list .is-negative{color:#dc2626}.erp-feature-stat{display:flex;justify-content:space-between;align-items:center;margin-top:17px;padding:17px;border-radius:18px;background:linear-gradient(135deg,#fff7ed,#ffedd5);color:#9a3412}.erp-feature-stat strong{font-size:30px}.erp-alert-count{display:grid;place-items:center;min-width:34px;height:34px;padding:0 9px;border-radius:999px;background:#fff1f2;color:#be123c;font-weight:900}.erp-alert-list{display:grid;margin-top:13px}.erp-alert-list a{display:grid;grid-template-columns:11px 1fr auto;align-items:center;gap:11px;padding:13px 0;border-bottom:1px dashed #dce7f0;color:#334155;text-decoration:none}.erp-alert-list a:last-child{border-bottom:0}.alert-dot{width:10px;height:10px;border-radius:50%;box-shadow:0 0 0 5px color-mix(in srgb,currentColor 12%,transparent)}.alert-dot.amber{color:#f59e0b;background:#f59e0b}.alert-dot.rose{color:#f43f5e;background:#f43f5e}.alert-dot.blue{color:#3b82f6;background:#3b82f6}
@media(max-width:1250px){.erp-kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.erp-action-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:800px){.erp-hero{align-items:stretch;flex-direction:column;padding:24px}.erp-health{min-width:0}.erp-module-grid{grid-template-columns:1fr}.erp-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.erp-action-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:460px){.erp-dashboard{gap:14px}.erp-hero{padding:20px;border-radius:22px}.erp-health{padding:15px}.erp-kpi-grid{grid-template-columns:1fr 1fr;gap:10px}.erp-kpi{display:block;padding:14px}.erp-kpi-icon{width:38px;height:38px;margin-bottom:10px}.erp-kpi strong{font-size:17px}.erp-kpi small{display:none}.erp-section,.erp-module-card{padding:17px;border-radius:20px}.erp-action-grid{grid-template-columns:1fr}.erp-action{padding:13px}.erp-mini-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.erp-module-head{align-items:flex-start}.erp-module-head a{white-space:nowrap}}


/* v6.1.2 definitive responsive shell hotfix */
@media (max-width:900px){
  .site-header{position:sticky!important;inset:auto!important;top:0!important;width:100%!important;height:68px!important;min-height:68px!important;padding:0 16px!important;display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:space-between!important;overflow:visible!important;z-index:120!important}
  .brand{margin:0!important;padding:0!important;border:0!important;display:flex!important;align-items:center!important;min-width:0!important}
  .brand-logo{width:52px!important;height:52px!important;flex:0 0 52px!important;display:block!important;object-fit:contain!important}
  .menu-toggle{display:flex!important;position:static!important;margin:0!important}
  .main-nav{position:fixed!important;top:0!important;right:0!important;bottom:0!important;left:auto!important;width:min(88vw,360px)!important;height:100dvh!important;max-width:360px!important;padding:0 16px 24px!important;display:flex!important;flex-direction:column!important;transform:translateX(105%)!important;overflow-y:auto!important;background:#fff!important;z-index:130!important}
  .menu-open .main-nav{transform:translateX(0)!important}
  .menu-overlay{position:fixed!important;inset:0!important;z-index:129!important}
  main{margin-left:0!important;width:100%!important;max-width:100%!important;padding-top:20px!important}
}
/* A phone using “Desktop site” still gets the compact mobile shell. */
html.handheld-device .site-header{position:sticky!important;inset:auto!important;top:0!important;width:100%!important;height:68px!important;min-height:68px!important;padding:0 16px!important;display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:space-between!important;overflow:visible!important}
html.handheld-device .brand{margin:0!important;padding:0!important;border:0!important}
html.handheld-device .brand-logo{width:52px!important;height:52px!important;flex:0 0 52px!important}
html.handheld-device .menu-toggle{display:flex!important;position:static!important}
html.handheld-device .main-nav{position:fixed!important;top:0!important;right:0!important;bottom:0!important;left:auto!important;width:min(88vw,360px)!important;height:100dvh!important;max-width:360px!important;padding:0 16px 24px!important;display:flex!important;flex-direction:column!important;transform:translateX(105%)!important;background:#fff!important;overflow-y:auto!important;z-index:130!important}
html.handheld-device.menu-open .main-nav{transform:translateX(0)!important}
html.handheld-device main{margin-left:0!important;width:100%!important;max-width:100%!important;padding-top:20px!important}

/* v6.1.3 mobile navigation visibility hotfix
   The menu-open class is applied to BODY, while handheld-device is on HTML.
   This selector must therefore include both elements; otherwise the dark
   overlay appears but the drawer remains translated off-screen. */
html.handheld-device body.menu-open .main-nav,
html.handheld-device body.menu-open #main-navigation{
  transform:translateX(0)!important;
  visibility:visible!important;
  opacity:1!important;
  pointer-events:auto!important;
}
html.handheld-device body.menu-open .menu-overlay{
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
}
@media (max-width:900px){
  body.menu-open .main-nav,
  body.menu-open #main-navigation{
    transform:translateX(0)!important;
    visibility:visible!important;
    opacity:1!important;
    pointer-events:auto!important;
  }
  body.menu-open .menu-overlay{
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }
}

/* v6.1.4 Unified Premium Button System
   One consistent, glossy, high-contrast action language across the ERP. */
:root{
  --btn-blue:#2563eb;--btn-blue-2:#3b82f6;
  --btn-green:#059669;--btn-green-2:#10b981;
  --btn-orange:#ea580c;--btn-orange-2:#f97316;
  --btn-red:#dc2626;--btn-red-2:#ef4444;
  --btn-gray:#475569;--btn-gray-2:#64748b;
}
button,
.button-link,
.btn,
.btn-primary,
.btn-secondary,
.danger-button,
.action-btn,
.export-btn,
.profile-actions a,
.profile-actions button,
.leave-action-buttons button,
.document-upload button,
.finance-hero button,
.report-filter button,
.erp-action{
  -webkit-appearance:none!important;
  appearance:none!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  min-height:48px!important;
  padding:12px 20px!important;
  border:1px solid rgba(255,255,255,.30)!important;
  border-radius:16px!important;
  color:#fff!important;
  font:inherit!important;
  font-weight:800!important;
  line-height:1.1!important;
  text-align:center!important;
  text-decoration:none!important;
  text-shadow:0 1px 1px rgba(0,0,0,.16)!important;
  background:linear-gradient(180deg,var(--btn-blue-2),var(--btn-blue))!important;
  box-shadow:0 10px 20px rgba(37,99,235,.24),inset 0 1px 0 rgba(255,255,255,.42),inset 0 -2px 0 rgba(0,0,0,.10)!important;
  cursor:pointer!important;
  position:relative!important;
  overflow:hidden!important;
  transition:transform .16s ease,box-shadow .16s ease,filter .16s ease!important;
}
button::before,
.button-link::before,
.btn::before,
.btn-primary::before,
.btn-secondary::before,
.danger-button::before,
.action-btn::before,
.export-btn::before,
.erp-action::before{
  content:"";
  position:absolute;
  left:7%;right:7%;top:4px;height:38%;
  border-radius:12px;
  background:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,0));
  pointer-events:none;
}
button:hover,.button-link:hover,.btn:hover,.btn-primary:hover,.btn-secondary:hover,
.danger-button:hover,.action-btn:hover,.export-btn:hover,.erp-action:hover{
  transform:translateY(-2px)!important;
  filter:saturate(1.08) brightness(1.02)!important;
}
button:active,.button-link:active,.btn:active,.btn-primary:active,.btn-secondary:active,
.danger-button:active,.action-btn:active,.export-btn:active,.erp-action:active{
  transform:translateY(0)!important;
  box-shadow:0 5px 12px rgba(15,23,42,.20),inset 0 2px 5px rgba(0,0,0,.14)!important;
}
button:disabled,.btn:disabled,[aria-disabled="true"]{
  opacity:.55!important;cursor:not-allowed!important;transform:none!important;filter:none!important;
}
/* Semantic colors */
.action-btn.view,.btn-view,.button-view,.export-btn:not(.danger),.erp-action,
button:not(.danger-button):not(.delete):not(.reject):not(.btn-secondary):not(.edit):not(.approve){
  --local1:var(--btn-blue-2);--local2:var(--btn-blue);
}
.action-btn.view,.btn-view,.button-view{
  background:linear-gradient(180deg,var(--btn-blue-2),var(--btn-blue))!important;
  box-shadow:0 10px 20px rgba(37,99,235,.24),inset 0 1px 0 rgba(255,255,255,.42),inset 0 -2px 0 rgba(0,0,0,.10)!important;
}
.action-btn.edit,.btn-edit,.button-edit,
button.edit,.edit-button{
  background:linear-gradient(180deg,var(--btn-orange-2),var(--btn-orange))!important;
  box-shadow:0 10px 20px rgba(234,88,12,.24),inset 0 1px 0 rgba(255,255,255,.42),inset 0 -2px 0 rgba(0,0,0,.10)!important;
}
.action-btn.delete,.danger-button,.btn-danger,.button-danger,
button.delete,button.reject,.delete-button,.reject-button{
  background:linear-gradient(180deg,var(--btn-red-2),var(--btn-red))!important;
  box-shadow:0 10px 20px rgba(220,38,38,.24),inset 0 1px 0 rgba(255,255,255,.42),inset 0 -2px 0 rgba(0,0,0,.10)!important;
}
.btn-success,.button-success,.approve-button,button.approve,
.leave-action-buttons button[value="approved"]{
  background:linear-gradient(180deg,var(--btn-green-2),var(--btn-green))!important;
  box-shadow:0 10px 20px rgba(5,150,105,.24),inset 0 1px 0 rgba(255,255,255,.42),inset 0 -2px 0 rgba(0,0,0,.10)!important;
}
.btn-secondary,.button-secondary,.btn-gray,.button-gray,
a.btn-secondary{
  background:linear-gradient(180deg,var(--btn-gray-2),var(--btn-gray))!important;
  box-shadow:0 10px 20px rgba(71,85,105,.22),inset 0 1px 0 rgba(255,255,255,.38),inset 0 -2px 0 rgba(0,0,0,.10)!important;
  color:#fff!important;
}
/* Keep status badges visually distinct from action buttons */
.badge,.status-badge{
  min-height:0!important;padding:7px 13px!important;border-radius:999px!important;
  box-shadow:none!important;text-shadow:none!important;font-weight:800!important;
}
/* Table action group: identical size and alignment */
.actions{display:flex!important;align-items:center!important;gap:10px!important;flex-wrap:wrap!important}
.actions .inline-form{display:inline-flex!important;margin:0!important}
.actions .action-btn,.actions button.action-btn{
  min-width:112px!important;min-height:52px!important;padding:13px 18px!important;border-radius:16px!important;
  font-size:16px!important;
}
/* Dashboard quick actions keep their individual colors but share exact shape/text treatment */
.erp-action{min-height:62px!important;border-radius:16px!important;color:#fff!important}
.erp-action strong,.erp-action small,.erp-action i{color:#fff!important}
/* Navigation links use the same clean high-contrast treatment when styled as buttons */
.main-nav .button-link,.main-nav button{width:100%!important}
@media(max-width:700px){
  button,.button-link,.btn,.btn-primary,.btn-secondary,.danger-button,.action-btn,.export-btn{
    min-height:50px!important;padding:13px 16px!important;border-radius:15px!important;font-size:15px!important;
  }
  .actions{display:grid!important;grid-template-columns:repeat(3,minmax(96px,1fr))!important;gap:10px!important;min-width:330px!important}
  .actions .action-btn,.actions button.action-btn{width:100%!important;min-width:0!important;font-size:15px!important}
}

/* v6.1.5 Premium Emerald Green Theme
   Replaces the remaining blue primary/action language with a unified emerald system. */
:root{
  --primary:#059669!important;
  --ui-blue:#059669!important;
  --ui-blue-dark:#047857!important;
  --a-primary:#059669!important;
  --a-primary-dark:#047857!important;
  --btn-blue:#047857!important;
  --btn-blue-2:#22c55e!important;
  --emerald-1:#34d399;
  --emerald-2:#10b981;
  --emerald-3:#059669;
  --emerald-4:#047857;
}
/* Primary controls, links and generic actions */
button:not(.danger-button):not(.delete):not(.reject):not(.btn-danger):not(.edit):not(.btn-edit):not(.button-edit):not(.btn-secondary):not(.button-secondary),
.button-link:not(.btn-danger):not(.button-danger):not(.btn-edit):not(.button-edit):not(.btn-secondary):not(.button-secondary),
.btn:not(.btn-danger):not(.btn-edit):not(.btn-secondary),
.btn-primary,
.action-btn.view,
.btn-view,
.button-view,
.export-btn:not(.danger),
.profile-actions a:not(.danger-button),
.document-upload button,
.finance-hero button,
.report-filter button{
  background:linear-gradient(180deg,var(--emerald-1),var(--emerald-3))!important;
  border-color:#34d399!important;
  color:#fff!important;
  box-shadow:0 11px 23px rgba(5,150,105,.28),inset 0 1px 0 rgba(255,255,255,.48),inset 0 -2px 0 rgba(0,0,0,.12)!important;
}
/* Dashboard quick actions: one premium green family, no blue/cyan/purple/orange blocks. */
.erp-action,
.erp-action-cyan,
.erp-action-green,
.erp-action-rose,
.erp-action-violet,
.erp-action-amber,
.quick-actions a{
  --action:var(--emerald-4)!important;
  --action2:var(--emerald-1)!important;
  background:linear-gradient(135deg,var(--emerald-1),var(--emerald-3) 58%,var(--emerald-4))!important;
  border:1px solid rgba(255,255,255,.30)!important;
  color:#fff!important;
  box-shadow:0 12px 25px rgba(5,150,105,.27),inset 0 1px 0 rgba(255,255,255,.48),inset 0 -2px 0 rgba(0,0,0,.11)!important;
}
.erp-action b,.quick-actions b{
  background:rgba(255,255,255,.20)!important;
  color:#fff!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28)!important;
}
.erp-action strong,.erp-action small,.erp-action i,.quick-actions span,.quick-actions small{color:#fff!important}
/* Active navigation and focus states follow emerald. */
.nav-link.active{
  background:linear-gradient(90deg,var(--emerald-4),var(--emerald-2))!important;
  color:#fff!important;
  box-shadow:0 8px 20px rgba(5,150,105,.28)!important;
}
@media(max-width:900px){
  .nav-link:hover,.nav-link.active{background:#e8fff5!important;color:#047857!important}
  .nav-icon{background:#dcfce7!important;color:#047857!important}
}
input:focus,select:focus,textarea:focus{
  border-color:#10b981!important;
  box-shadow:0 0 0 4px rgba(16,185,129,.15)!important;
}
.page-kicker,.erp-section-head span,.erp-module-head>div>span,.erp-module-head a{color:#059669!important}
.card:before{background:linear-gradient(90deg,#047857,#34d399)!important}
/* Dashboard KPI icon accents also use green instead of blue. */
.erp-kpi-icon{
  background:linear-gradient(145deg,#34d399,#059669)!important;
  color:#fff!important;
  box-shadow:0 10px 22px rgba(5,150,105,.24)!important;
}
/* Preserve semantic warning/danger colors. */
.action-btn.edit,.btn-edit,.button-edit,button.edit,.edit-button{
  background:linear-gradient(180deg,var(--btn-orange-2),var(--btn-orange))!important;
  border-color:#fb923c!important;
}
.action-btn.delete,.danger-button,.btn-danger,.button-danger,button.delete,button.reject,.delete-button,.reject-button{
  background:linear-gradient(180deg,var(--btn-red-2),var(--btn-red))!important;
  border-color:#f87171!important;
}
.btn-secondary,.button-secondary,.btn-gray,.button-gray,a.btn-secondary{
  background:linear-gradient(180deg,var(--btn-gray-2),var(--btn-gray))!important;
  border-color:#94a3b8!important;
}


/* === v6.1.6 Compact Premium Navigation === */
.main-nav{
  background:linear-gradient(180deg,#f9fffc 0%,#ffffff 100%)!important;
  border-left:1px solid #cfe9dc!important;
  box-shadow:-24px 0 60px rgba(8,71,52,.18)!important;
}
.nav-head{
  min-height:58px!important;
  margin:0 0 8px!important;
  padding:0 4px!important;
  border-bottom:1px solid #dceee5!important;
}
.nav-head strong{font-size:16px!important;color:#123b2f!important;letter-spacing:.01em!important}
.menu-close{
  width:42px!important;height:42px!important;border-radius:14px!important;
  color:#fff!important;background:linear-gradient(145deg,#34d399,#059669 65%,#047857)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 9px 20px rgba(5,150,105,.28)!important;
}
.sidebar-user{
  margin:0 0 10px!important;padding:10px 12px!important;gap:10px!important;
  border-radius:16px!important;border:1px solid #d5eadf!important;
  background:linear-gradient(145deg,#ffffff,#f0faf5)!important;
  box-shadow:0 8px 22px rgba(18,74,56,.07)!important;
}
.sidebar-avatar{
  width:40px!important;height:40px!important;border-radius:13px!important;
  background:linear-gradient(145deg,#34d399,#059669)!important;color:#fff!important;
  box-shadow:0 8px 18px rgba(5,150,105,.25)!important;
}
.sidebar-user strong{font-size:14px!important;color:#163c31!important}
.sidebar-user span{font-size:9px!important;color:#6b7f77!important;letter-spacing:.12em!important}
.nav-section{
  margin:8px 0 3px!important;padding:7px 10px 3px!important;
  font-size:8px!important;line-height:1!important;letter-spacing:.16em!important;
  color:#7a948a!important;
}
.nav-link{
  min-height:50px!important;margin:4px 0!important;padding:8px 10px!important;gap:10px!important;
  border-radius:15px!important;color:#29473d!important;font-size:15px!important;font-weight:750!important;
  border:1px solid transparent!important;transition:.18s ease!important;
}
.nav-link:hover{
  transform:translateX(2px)!important;
  color:#065f46!important;background:linear-gradient(135deg,#effcf5,#e2f8ec)!important;
  border-color:#c9ead9!important;
}
.nav-link.active{
  color:#fff!important;background:linear-gradient(135deg,#34d399,#059669 62%,#047857)!important;
  border-color:#70e0b3!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 10px 22px rgba(5,150,105,.25)!important;
}
.nav-icon{
  width:34px!important;height:34px!important;flex:0 0 34px!important;border-radius:12px!important;
  color:#08775b!important;background:linear-gradient(145deg,#e8fff3,#d4f8e5)!important;
  border:1px solid #c9ead9!important;box-shadow:none!important;font-size:14px!important;
}
.nav-link:hover .nav-icon{background:#fff!important;color:#059669!important;border-color:#aee5cd!important}
.nav-link.active .nav-icon{
  background:rgba(255,255,255,.18)!important;color:#fff!important;
  border-color:rgba(255,255,255,.3)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.25)!important;
}
@media(max-width:900px){
  .main-nav{width:min(88vw,360px)!important;padding:0 16px 22px!important}
  .nav-link{min-height:48px!important;font-size:14px!important}
  .nav-section{margin-top:6px!important}
}

/* === v6.1.7 Dashboard Premium 2030 Phase 1 === */
:root{
  --dash-ink:#0f2f25;--dash-muted:#6f847b;--dash-line:#d9ece3;
  --dash-soft:#f4fbf7;--dash-card:#ffffff;--dash-green:#059669;--dash-green2:#34d399;
}
body{background:linear-gradient(180deg,#f5fbf8 0%,#eef7f3 100%)!important}
main{max-width:1500px!important}
.erp-dashboard{gap:18px!important}
.erp-hero{
  min-height:210px!important;padding:30px 32px!important;border-radius:30px!important;
  background:
    radial-gradient(circle at 82% 18%,rgba(52,211,153,.28),transparent 28%),
    radial-gradient(circle at 96% 95%,rgba(255,255,255,.13),transparent 25%),
    linear-gradient(135deg,#082a23 0%,#0b4d3d 52%,#08745a 100%)!important;
  box-shadow:0 26px 70px rgba(5,74,55,.24),inset 0 1px 0 rgba(255,255,255,.18)!important;
}
.erp-kicker{color:#a7f3d0!important;letter-spacing:.18em!important}
.erp-hero h2{font-size:clamp(30px,4vw,50px)!important;letter-spacing:-.035em!important}
.erp-hero p{color:#d8f7ea!important;font-weight:650!important}
.erp-health{
  min-width:250px!important;padding:19px 20px!important;border-radius:22px!important;
  background:linear-gradient(145deg,rgba(255,255,255,.2),rgba(255,255,255,.08))!important;
  border:1px solid rgba(255,255,255,.28)!important;backdrop-filter:blur(18px)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.26),0 18px 36px rgba(0,0,0,.12)!important;
}
.erp-health-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.erp-health-top span{color:#d1fae5!important;font-size:10px!important;font-weight:900!important;letter-spacing:.16em!important}
.erp-health-top i{display:grid;place-items:center;width:34px;height:34px;border-radius:12px;background:#fff;color:#047857;font-style:normal;font-weight:950;box-shadow:0 8px 18px rgba(0,0,0,.16)}
.erp-health.is-risk .erp-health-top i{color:#be123c}
.erp-health strong{font-size:28px!important;letter-spacing:-.025em!important}
.erp-health small{color:#e4fff3!important;font-weight:700!important}
.erp-kpi-grid{gap:12px!important}
.erp-kpi{
  min-height:118px!important;padding:17px!important;border-radius:22px!important;
  background:linear-gradient(150deg,#ffffff 0%,#f6fcf9 100%)!important;
  border:1px solid #dceee5!important;box-shadow:0 14px 32px rgba(17,87,65,.09),inset 0 1px 0 #fff!important;
}
.erp-kpi:before{width:0!important}
.erp-kpi-icon{background:linear-gradient(145deg,#34d399,#059669)!important}
.erp-kpi strong{color:#102f26!important}
.erp-section,.erp-module-card{
  border:1px solid var(--dash-line)!important;border-radius:26px!important;
  background:linear-gradient(155deg,#fff 0%,#f9fdfb 100%)!important;
  box-shadow:0 16px 42px rgba(17,87,65,.075),inset 0 1px 0 #fff!important;
}
.erp-section{padding:23px!important}
.erp-section-head,.erp-module-head{align-items:center!important}
.erp-section-head h3,.erp-module-head h3{font-size:18px!important;color:var(--dash-ink)!important;letter-spacing:-.015em!important}
.erp-section-head span,.erp-module-head>div>span{color:#059669!important;font-size:9px!important;letter-spacing:.18em!important}
.erp-module-head a{padding:8px 12px;border-radius:11px;background:#e9fbf2;color:#047857!important;font-size:11px!important}
.erp-action-grid{gap:12px!important}
.erp-action{min-height:66px!important;border-radius:18px!important}
.erp-module-grid{gap:16px!important}
.erp-module-card{padding:22px!important}
.erp-mini-grid{gap:10px!important}
.erp-mini-grid>div{
  min-height:82px!important;padding:13px 14px!important;border-radius:17px!important;
  border:1px solid #dceee5!important;background:linear-gradient(145deg,#fff,#f0faf5)!important;
}
.erp-mini-grid span{color:#72877e!important;font-weight:700!important}
.erp-mini-grid strong{color:#123b2f!important;font-size:23px!important}
.erp-money-list{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;margin-top:16px!important}
.erp-money-list>div{
  display:block!important;min-height:74px!important;padding:12px 14px!important;border:1px solid #dceee5!important;
  border-radius:16px!important;background:#f7fcf9!important;
}
.erp-money-list>div:last-child{border-bottom:1px solid #dceee5!important}
.erp-money-list span,.erp-money-list b{display:block!important}
.erp-money-list span{font-size:10px!important;font-weight:800!important;color:#758a81!important;text-transform:uppercase!important;letter-spacing:.06em!important}
.erp-money-list b{margin-top:6px!important;color:#123b2f!important;text-align:left!important;font-size:16px!important}
.erp-feature-stat{background:linear-gradient(135deg,#ecfdf5,#d1fae5)!important;color:#047857!important}
.erp-alert-list a{padding:12px 13px!important;margin-top:8px!important;border:1px solid #dceee5!important;border-radius:14px!important;background:#f9fdfb!important}
.erp-alert-list a:last-child{border-bottom:1px solid #dceee5!important}
.developer-signature{
  max-width:1500px!important;margin:26px auto 10px!important;padding:13px 16px!important;border-radius:18px!important;
  background:linear-gradient(135deg,#0b3027,#075d48)!important;border:1px solid rgba(255,255,255,.12)!important;
  box-shadow:0 14px 32px rgba(5,74,55,.18),inset 0 1px 0 rgba(255,255,255,.18)!important;
}
.developer-brand-mark{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:linear-gradient(145deg,#34d399,#059669);color:#fff;font-weight:950;box-shadow:0 8px 18px rgba(0,0,0,.2)}
.developer-signature>img{width:44px!important;height:44px!important;border-radius:14px!important}
.developer-copy span{font-size:8px!important;color:#a7f3d0!important}.developer-copy strong{font-size:15px!important}.developer-copy small{font-size:10px!important;color:#d1fae5!important}
.developer-links a,.developer-links span{padding:6px 9px!important;font-size:10px!important;border-radius:9px!important}
.developer-signature>p{font-size:10px!important;color:#d1fae5!important}
@media(max-width:800px){
  .erp-hero{min-height:0!important;padding:23px!important}.erp-health{min-width:0!important}
  .erp-money-list{grid-template-columns:1fr 1fr!important}
  .developer-brand-mark{display:none}
}
@media(max-width:480px){
  .erp-hero{padding:20px!important;border-radius:23px!important}.erp-health{padding:15px!important}
  .erp-kpi{min-height:108px!important}.erp-section,.erp-module-card{border-radius:21px!important}
  .erp-money-list{grid-template-columns:1fr!important}
}

/* v6.2.0 — Smart Premium Table System (Admin + Employee Portal) */
:root{
  --smart-ink:#102f26;--smart-muted:#70857d;--smart-line:#dcebe4;--smart-soft:#f5fbf8;
  --smart-green:#059669;--smart-green-2:#22c55e;--smart-dark:#083c30;
}
.smart-table-shell{position:relative;margin:18px 0 24px;border:1px solid var(--smart-line);border-radius:24px;background:linear-gradient(155deg,#fff 0%,#f8fdfb 100%);box-shadow:0 18px 48px rgba(11,74,56,.10),inset 0 1px 0 #fff;overflow:hidden}
.smart-table-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px;border-bottom:1px solid var(--smart-line);background:linear-gradient(135deg,#f8fffb,#edf9f3)}
.smart-table-title{display:flex;align-items:center;gap:10px;min-width:0}.smart-table-title i{display:grid;place-items:center;width:36px;height:36px;border-radius:12px;background:linear-gradient(145deg,var(--smart-green-2),var(--smart-green));color:#fff;font-style:normal;font-weight:950;box-shadow:0 9px 20px rgba(5,150,105,.24)}
.smart-table-title strong{display:block;color:var(--smart-ink);font-size:14px}.smart-table-title small{display:block;margin-top:2px;color:var(--smart-muted);font-size:11px}
.smart-table-search{position:relative;min-width:220px}.smart-table-search input{width:100%;height:40px;padding:0 14px 0 38px;border:1px solid #cfe3da;border-radius:14px;background:#fff;color:var(--smart-ink);font-weight:700;box-shadow:inset 0 1px 2px rgba(16,47,38,.04)}.smart-table-search:before{content:'⌕';position:absolute;left:13px;top:7px;color:var(--smart-green);font-size:20px;font-weight:950;z-index:1}
.smart-table-shell>.table-wrap,.smart-table-shell .table-wrap{margin:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:transparent!important;overflow:auto!important}
.smart-table-shell table{width:100%!important;min-width:760px!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:#fff!important;border-collapse:separate!important;border-spacing:0!important}
.smart-table-shell thead th,.smart-table-shell tr:first-child th{position:sticky!important;top:0!important;z-index:3!important;padding:13px 14px!important;background:linear-gradient(135deg,#0b4c3c,#08765a)!important;color:#fff!important;border:0!important;border-bottom:1px solid rgba(255,255,255,.14)!important;text-transform:uppercase!important;letter-spacing:.075em!important;font-size:10px!important;font-weight:900!important;white-space:nowrap!important}
.smart-table-shell tbody td,.smart-table-shell tr:not(:first-child) td{padding:14px!important;color:#1b342c!important;border:0!important;border-bottom:1px solid #e8f1ed!important;background:#fff!important;vertical-align:middle!important;font-size:13px!important}
.smart-table-shell tbody tr:nth-child(even) td{background:#f8fcfa!important}.smart-table-shell tbody tr{transition:transform .16s ease,box-shadow .16s ease}.smart-table-shell tbody tr:hover td{background:#effaf5!important}.smart-table-shell tbody tr:last-child td{border-bottom:0!important}
.smart-table-shell td strong{color:var(--smart-ink)!important}.smart-table-shell td small,.smart-table-shell .table-subtext{color:var(--smart-muted)!important}
.smart-table-shell .actions{display:flex!important;align-items:center!important;gap:7px!important;flex-wrap:nowrap!important}.smart-table-shell .actions form{margin:0!important}.smart-table-shell .action-btn,.smart-table-shell .actions button,.smart-table-shell .actions .button-link{min-height:34px!important;padding:7px 11px!important;border-radius:11px!important;font-size:11px!important;line-height:1!important;box-shadow:0 7px 16px rgba(16,47,38,.12)!important}
.smart-table-empty{padding:38px 18px;text-align:center;color:var(--smart-muted)}.smart-table-empty b{display:block;margin-bottom:5px;color:var(--smart-ink);font-size:16px}
.smart-table-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 16px;border-top:1px solid var(--smart-line);background:#fbfefc;color:var(--smart-muted);font-size:11px;font-weight:700}
.smart-table-shell .badge{padding:6px 10px!important;border-radius:999px!important;font-weight:850!important;font-size:10px!important;border:1px solid transparent!important;white-space:nowrap!important}
.smart-table-shell .badge.success,.smart-table-shell .badge.present,.smart-table-shell .badge.active,.smart-table-shell .badge.paid{background:#dcfce7!important;color:#087443!important;border-color:#bbf7d0!important}.smart-table-shell .badge.warning,.smart-table-shell .badge.pending{background:#fff7d6!important;color:#8a5b00!important;border-color:#fde68a!important}.smart-table-shell .badge.danger,.smart-table-shell .badge.rejected,.smart-table-shell .badge.inactive{background:#ffe4e6!important;color:#a11b35!important;border-color:#fecdd3!important}
@media(max-width:720px){
  .smart-table-shell{border-radius:20px;margin:14px 0 20px;overflow:visible;background:transparent;border:0;box-shadow:none}
  .smart-table-toolbar{position:relative;display:grid;grid-template-columns:1fr;padding:13px;border:1px solid var(--smart-line);border-radius:18px;background:linear-gradient(145deg,#fff,#f1faf5);box-shadow:0 12px 28px rgba(11,74,56,.08);margin-bottom:10px}
  .smart-table-search{min-width:0;width:100%}.smart-table-search input{height:42px}
  .smart-table-shell>.table-wrap,.smart-table-shell .table-wrap{overflow:visible!important}
  .smart-table-shell table,.smart-table-shell tbody,.smart-table-shell tr,.smart-table-shell td{display:block!important;width:100%!important;min-width:0!important}
  .smart-table-shell thead,.smart-table-shell tr:first-child:has(th){display:none!important}
  .smart-table-shell tbody{display:grid!important;gap:11px!important}
  .smart-table-shell tbody tr,.smart-table-shell table>tr:not(:first-child){display:block!important;border:1px solid var(--smart-line)!important;border-radius:18px!important;background:linear-gradient(150deg,#fff,#f7fcf9)!important;box-shadow:0 12px 28px rgba(11,74,56,.08)!important;overflow:hidden!important}
  .smart-table-shell tbody td,.smart-table-shell table>tr:not(:first-child) td{display:grid!important;grid-template-columns:minmax(105px,38%) 1fr!important;gap:12px!important;align-items:start!important;padding:11px 13px!important;background:transparent!important;border-bottom:1px solid #e8f1ed!important;text-align:right!important;overflow-wrap:anywhere!important}
  .smart-table-shell tbody td:before,.smart-table-shell table>tr:not(:first-child) td:before{content:attr(data-label);text-align:left;color:#6c837a;font-size:9px;font-weight:900;letter-spacing:.07em;text-transform:uppercase;line-height:1.45}
  .smart-table-shell tbody td:last-child,.smart-table-shell table>tr:not(:first-child) td:last-child{border-bottom:0!important}
  .smart-table-shell td.actions{display:flex!important;justify-content:flex-end!important;align-items:center!important;flex-wrap:wrap!important}.smart-table-shell td.actions:before{margin-right:auto!important}
  .smart-table-shell .employee-table-person{justify-content:flex-end;text-align:left}.smart-table-shell .employee-table-person div{min-width:0}.smart-table-shell .actions{min-width:0!important}
  .smart-table-footer{margin-top:10px;border:1px solid var(--smart-line);border-radius:14px;background:#fff}
}
@media print{.smart-table-toolbar,.smart-table-footer{display:none!important}.smart-table-shell{border:0!important;box-shadow:none!important}.smart-table-shell table{display:table!important}.smart-table-shell thead{display:table-header-group!important}.smart-table-shell tr{display:table-row!important}.smart-table-shell td,.smart-table-shell th{display:table-cell!important}.smart-table-shell td:before{display:none!important}}

/* === v6.3.0 Smart Premium Forms & Page Layout === */
:root{
  --form-ink:#123b2f;--form-muted:#6f847b;--form-line:#d6eadf;
  --form-soft:#f4fbf7;--form-focus:#10b981;--form-danger:#e11d48;
}
form:not(.inline-form):not(.no-smart-form){
  --field-height:52px;
}
.card form:not(.inline-form),.employee-form,.lux-form,.document-upload,.permission-form{
  position:relative;
}
form:not(.inline-form) label{
  display:block;margin:0 0 7px;color:var(--form-ink);font-size:11px;font-weight:900;
  letter-spacing:.055em;text-transform:uppercase;
}
form:not(.inline-form) input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
form:not(.inline-form) select,
form:not(.inline-form) textarea{
  width:100%;min-height:var(--field-height);padding:12px 14px;border:1px solid var(--form-line);
  border-radius:15px;background:linear-gradient(180deg,#fff,#f9fdfb);color:#163c31;
  font:inherit;font-weight:700;outline:none;box-shadow:inset 0 1px 2px rgba(8,71,52,.035),0 1px 0 #fff;
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease,background .18s ease;
}
form:not(.inline-form) textarea{min-height:108px;resize:vertical;line-height:1.55}
form:not(.inline-form) input::placeholder,form:not(.inline-form) textarea::placeholder{color:#9aada5;font-weight:600}
form:not(.inline-form) input:not([type=checkbox]):not([type=radio]):focus,
form:not(.inline-form) select:focus,form:not(.inline-form) textarea:focus{
  border-color:#34d399;background:#fff;box-shadow:0 0 0 4px rgba(16,185,129,.12),0 10px 24px rgba(5,150,105,.08);
}
form:not(.inline-form) input[readonly],form:not(.inline-form) input:disabled,
form:not(.inline-form) select:disabled,form:not(.inline-form) textarea:disabled{
  background:#edf5f1;color:#74877f;border-color:#dce9e3;cursor:not-allowed;box-shadow:none;
}
form:not(.inline-form) input[type=file]{padding:8px;background:#fff}
form:not(.inline-form) input[type=file]::file-selector-button{
  min-height:34px;margin-right:10px;padding:7px 12px;border:0;border-radius:10px;color:#fff;font-weight:900;
  background:linear-gradient(145deg,#34d399,#059669);box-shadow:0 6px 14px rgba(5,150,105,.18);cursor:pointer;
}
form:not(.inline-form) input[type=color]{padding:5px;cursor:pointer}
form:not(.inline-form) small,.form-help{display:block;margin-top:7px;color:var(--form-muted);font-size:11px;line-height:1.45;font-weight:650}
.form-grid,.row{
  gap:15px!important;
}
.card:has(> form:not(.inline-form)),.smart-form-card{
  border:1px solid var(--form-line)!important;border-radius:24px!important;
  background:linear-gradient(155deg,#fff,#f8fcfa)!important;
  box-shadow:0 15px 40px rgba(17,87,65,.075),inset 0 1px 0 #fff!important;
}
.switch-line{
  min-height:48px;padding:9px 12px!important;border:1px solid var(--form-line);border-radius:14px;
  background:linear-gradient(145deg,#fff,#f4fbf7);display:flex!important;align-items:center;gap:10px;
  text-transform:none!important;letter-spacing:0!important;font-size:13px!important;
}
.switch-line input[type=checkbox]{width:20px;height:20px;accent-color:#059669;flex:0 0 20px}
.switch-line span{color:#234b3e;font-weight:800}

/* Employee form becomes a compact, collapsible step interface. */
.employee-form{
  padding:18px;border:1px solid var(--form-line);border-radius:28px;
  background:linear-gradient(155deg,#fff,#f7fcf9);box-shadow:0 18px 46px rgba(17,87,65,.09),inset 0 1px 0 #fff;
}
.smart-form-step{
  overflow:hidden;margin:0 0 14px;border:1px solid var(--form-line);border-radius:20px;
  background:#fff;box-shadow:0 10px 28px rgba(17,87,65,.055);transition:.2s ease;
}
.smart-form-step.is-open{border-color:#a9e6cb;box-shadow:0 14px 34px rgba(5,150,105,.095)}
.smart-form-step .form-section-title{
  margin:0!important;padding:15px 17px!important;cursor:pointer;user-select:none;
  background:linear-gradient(145deg,#f7fcf9,#eefaf4);border:0!important;display:flex!important;align-items:center!important;
}
.smart-form-step.is-open .form-section-title{background:linear-gradient(135deg,#ecfdf5,#dff8eb)}
.smart-form-step .form-section-title>span{
  display:grid!important;place-items:center;width:42px!important;height:42px!important;flex:0 0 42px!important;
  border-radius:14px!important;color:#fff!important;background:linear-gradient(145deg,#34d399,#059669)!important;
  box-shadow:0 8px 18px rgba(5,150,105,.2)!important;font-size:12px!important;font-weight:950!important;
}
.smart-form-step .form-section-title h3{margin:0!important;color:#123b2f!important;font-size:16px!important;letter-spacing:-.01em}
.smart-form-step .form-section-title p{margin:3px 0 0!important;color:#73877e!important;font-size:11px!important;font-weight:650}
.smart-form-step .form-section-title:after{
  content:'+';margin-left:auto;display:grid;place-items:center;width:32px;height:32px;border-radius:11px;
  background:#fff;color:#059669;font-size:20px;font-weight:800;box-shadow:0 5px 14px rgba(5,150,105,.1);
}
.smart-form-step.is-open .form-section-title:after{content:'−';background:#059669;color:#fff}
.smart-form-step>.row{display:none!important;padding:17px!important;margin:0!important;background:#fff}
.smart-form-step.is-open>.row{display:grid!important;animation:smartFormReveal .2s ease both}
@keyframes smartFormReveal{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
.employee-form>.smart-form-actions{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:5px 0 0;padding:15px 2px 0;border-top:1px solid var(--form-line);
}
.employee-form>.smart-form-actions p{margin:0}

/* Modern page headings and filter bars. */
main>h1,main>h2,.page-title-wrap h1,.page-title-wrap h2{
  color:#123b2f;letter-spacing:-.025em;
}
form.no-print,form[method=get]:not(.no-smart-form){
  padding:14px 16px;border:1px solid var(--form-line);border-radius:20px;
  background:linear-gradient(145deg,#fff,#f1faf5);box-shadow:0 10px 26px rgba(17,87,65,.06);
}
.alert{
  border-radius:16px!important;border-width:1px!important;box-shadow:0 10px 24px rgba(17,87,65,.07)!important;
}

@media(max-width:760px){
  form:not(.inline-form){--field-height:50px}
  .employee-form{padding:12px;border-radius:22px}
  .smart-form-step{border-radius:17px;margin-bottom:10px}
  .smart-form-step .form-section-title{padding:13px!important}
  .smart-form-step>.row{padding:13px!important}
  .smart-form-step .form-section-title>span{width:38px!important;height:38px!important;flex-basis:38px!important}
  .smart-form-step .form-section-title h3{font-size:14px!important}
  .smart-form-step .form-section-title p{font-size:10px!important}
  form.no-print,form[method=get]:not(.no-smart-form){padding:12px;border-radius:17px}
}
/* ISP Finance Phase 1 v6.4.0 */
.smart-list{display:grid;gap:10px}.smart-list>div{display:flex;justify-content:space-between;gap:16px;padding:12px 14px;border:1px solid rgba(16,185,129,.16);border-radius:14px;background:linear-gradient(135deg,rgba(236,253,245,.9),rgba(255,255,255,.98))}.smart-list span{color:#475569;font-weight:700}.smart-list b{color:#065f46}.table-wrap td small{display:block;color:#64748b;margin-top:3px}.status-badge{display:inline-flex;align-items:center;padding:5px 10px;border-radius:999px;font-size:12px;font-weight:800}.status-paid{background:#dcfce7;color:#166534}.status-partial{background:#fef3c7;color:#92400e}.status-due{background:#fee2e2;color:#991b1b}.btn-danger{background:linear-gradient(135deg,#ef4444,#b91c1c)!important;color:#fff!important;border:0!important;border-radius:12px!important;padding:8px 12px!important;font-weight:800!important;box-shadow:0 8px 18px rgba(185,28,28,.2)!important}

/* === v6.10.1 Global Drawer Clarity Fix ===
   Keep every page readable while the navigation drawer is open.
   The overlay is only a light click-catcher; it must never blur the app. */
.menu-overlay,
body.menu-open .menu-overlay,
html.handheld-device body.menu-open .menu-overlay{
  background:rgba(4,24,20,.16)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  filter:none!important;
}
body.menu-open main,
body.menu-open .page-shell,
body.menu-open .app-content,
body.menu-open .dashboard-shell,
body.menu-open .erp-dashboard,
html.handheld-device body.menu-open main{
  filter:none!important;
  opacity:1!important;
  transform:none;
}
@media (max-width:900px){
  body.menu-open .menu-overlay{opacity:1!important;visibility:visible!important}
  .main-nav{box-shadow:-14px 0 34px rgba(4,40,31,.22)!important}
}

/* v6.10.2 mobile file picker clarity */
@media(max-width:760px){
  form:not(.inline-form) input[type=file]{display:block;width:100%!important;max-width:100%!important;min-width:0!important;height:auto!important;padding:7px!important;font-size:11px!important;line-height:1.2!important;overflow:hidden!important;color:#536b62!important}
  form:not(.inline-form) input[type=file]::file-selector-button{max-width:145px!important;min-height:38px!important;margin:0 8px 0 0!important;padding:8px 11px!important;border-radius:11px!important;font-size:12px!important;white-space:nowrap!important}
  .proof-upload{min-width:0!important;width:100%!important;overflow:hidden!important}
}
\n\n/* v6.11.1 Desktop-site click and drawer interaction hotfix */
.menu-overlay{
  pointer-events:none!important;
  touch-action:manipulation!important;
}
body.menu-open .menu-overlay,
html.handheld-device body.menu-open .menu-overlay{
  pointer-events:auto!important;
}
.main-nav,
#main-navigation{
  pointer-events:none!important;
}
body.menu-open .main-nav,
body.menu-open #main-navigation,
html.handheld-device body.menu-open .main-nav,
html.handheld-device body.menu-open #main-navigation{
  pointer-events:auto!important;
}
.menu-toggle,.menu-close,.nav-link,button,a,input,select,textarea,label{
  touch-action:manipulation;
}
@media (min-width:901px){
  html:not(.handheld-device) .main-nav,
  html:not(.handheld-device) #main-navigation{
    pointer-events:auto!important;
  }
  html:not(.handheld-device) .menu-overlay{
    display:none!important;
    pointer-events:none!important;
  }
}

/* v6.11.2 final drawer interaction fix */
.menu-toggle{position:relative!important;z-index:141!important;pointer-events:auto!important}
.menu-close,[data-menu-close],#main-navigation a,#main-navigation button{pointer-events:auto!important}
body:not(.menu-open) .menu-overlay{opacity:0!important;visibility:hidden!important;pointer-events:none!important}
body.menu-open .menu-overlay{opacity:1!important;visibility:visible!important;pointer-events:auto!important}
body.menu-open #main-navigation{pointer-events:auto!important}
/* v6.15.0 workflow status language */
.status-pending{background:#ffedd5!important;color:#9a3412!important;border:1px solid #fdba74!important}
.status-returned{background:#dbeafe!important;color:#1d4ed8!important;border:1px solid #93c5fd!important}
.status-approved{background:#dcfce7!important;color:#166534!important;border:1px solid #86efac!important}
.status-rejected{background:#fee2e2!important;color:#991b1b!important;border:1px solid #fca5a5!important}