:root{
    --primary:#2563eb;
    --secondary:#7c3aed;
    --dark:#172033;
    --bg:#f4f7fb;
    --card:#fff;
    --text:#172033;
    --muted:#64748b;
    --line:#e2e8f0;
    --success:#16a34a;
    --danger:#dc2626;
    --warning:#d97706;
}

*{
    box-sizing:border-box;
}

html,body{
    margin:0;
    padding:0;
    min-height:100%;
    overflow-x:hidden;
}

body{
    font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
    background:var(--bg);
    color:var(--text);
    line-height:1.45;
}

a{
    color:inherit;
}


/* ================================
   NAVIGATION - DESKTOP + MOBILE
================================ */

.nav{
    min-height:64px;
    background:linear-gradient(135deg,var(--primary),var(--secondary));
    color:#fff;
    padding:10px 22px;
    display:flex;
    align-items:center;
    gap:7px;
    box-shadow:0 5px 20px rgba(37,99,235,.20);
    position:sticky;
    top:0;
    z-index:100;
}

.nav .brand{
    font-size:20px;
    font-weight:800;
    margin-right:12px;
    white-space:nowrap;
}

.nav a{
    color:#fff !important;
    text-decoration:none;
    font-weight:700;
    padding:9px 14px;
    border-radius:10px;
    white-space:nowrap;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    transition:
        background-color .18s ease,
        color .18s ease,
        transform .12s ease,
        box-shadow .18s ease;
    
    /* Mobile tap support */
    -webkit-tap-highlight-color:rgba(255,255,255,.20);
}

/* Desktop mouse hover */
.nav a:hover{
    background:rgba(255,255,255,.20);
    color:#fff !important;
    transform:translateY(-1px);
}

/* Keyboard / mobile focus */
.nav a:focus{
    outline:none;
    background:rgba(255,255,255,.22);
    color:#fff !important;
}

/* Actual tap/click effect */
.nav a:active{
    background:#fff;
    color:#4338ca !important;
    transform:scale(.96);
}

/* Current page */
.nav a.active{
    background:#fff !important;
    color:#4338ca !important;
    box-shadow:0 3px 12px rgba(0,0,0,.20);
}

/* Current page + tap */
.nav a.active:active{
    background:#fff !important;
    color:#3730a3 !important;
    transform:scale(.97);
}

/* Logout */
.nav .logout{
    margin-left:auto;
    background:rgba(0,0,0,.16);
    color:#fff !important;
}

.nav .logout:hover{
    background:rgba(0,0,0,.30);
    color:#fff !important;
}

.nav .logout:active{
    background:#fff;
    color:#dc2626 !important;
    transform:scale(.96);
}


/* ================================
   MOBILE NAVIGATION
================================ */

@media(max-width:700px){

    .nav{
        position:static;
        padding:10px 12px;
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:7px;
    }

    .nav .brand{
        grid-column:1/-1;
        margin:0;
        padding:5px 2px;
        font-size:18px;
    }

    .nav a{
        width:100%;
        min-height:42px;
        padding:9px 8px;
        font-size:14px;
        text-align:center;
        overflow:hidden;
        text-overflow:ellipsis;
    }

    /* Mobile tap */
    .nav a:active{
        background:#fff !important;
        color:#4338ca !important;
        transform:scale(.96);
        box-shadow:0 3px 10px rgba(0,0,0,.18);
    }

    .nav a.active{
        background:#fff !important;
        color:#4338ca !important;
        box-shadow:0 3px 10px rgba(0,0,0,.18);
    }

    .nav .logout{
        margin:0;
    }

}
/* =========================
   MAIN
========================= */

.wrap{
    max-width:1180px;
    margin:28px auto;
    padding:0 18px;
}

.head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:15px;
    margin-bottom:20px;
}

.head h1{
    font-size:30px;
    margin:0 0 5px;
}

.muted{
    color:var(--muted);
}


/* =========================
   CARDS
========================= */

.card{
    background:var(--card);
    border:1px solid #eaf0f7;
    border-radius:18px;
    padding:22px;
    margin-bottom:18px;
    box-shadow:0 7px 25px rgba(15,23,42,.07);
}

.card h2{
    margin:0 0 14px;
    color:#13264a;
}


/* =========================
   GRID / STATS
========================= */

.grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
    gap:16px;
}

.stat{
    background:linear-gradient(135deg,#fff,#f8faff);
    border-left:5px solid var(--primary);
    border-radius:16px;
    padding:21px;
    box-shadow:0 6px 20px rgba(15,23,42,.06);
    min-width:0;
}

.stat .label{
    color:var(--muted);
    font-weight:700;
}

.stat .num{
    font-size:28px;
    font-weight:800;
    margin-top:7px;
    overflow-wrap:anywhere;
}


/* =========================
   FORMS
========================= */

.form-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
    gap:14px;
}

.full{
    grid-column:1/-1;
}

label{
    display:block;
    font-weight:700;
    font-size:14px;
    margin-bottom:6px;
}

input,
select,
textarea{
    width:100%;
    max-width:100%;
    border:1px solid #cbd5e1;
    border-radius:10px;
    padding:11px 12px;
    background:#fff;
    font:inherit;
    outline:0;
    min-height:44px;
}

textarea{
    resize:vertical;
}

input:focus,
select:focus,
textarea:focus{
    border-color:var(--primary);
    box-shadow:0 0 0 3px #dbeafe;
}


/* =========================
   BUTTONS
========================= */

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    border:0;
    border-radius:10px;
    padding:10px 15px;
    min-height:40px;
    background:linear-gradient(135deg,var(--primary),var(--secondary));
    color:#fff;
    text-decoration:none;
    font-weight:800;
    cursor:pointer;
    box-shadow:0 5px 14px rgba(37,99,235,.20);
    transition:.18s ease;
}

.btn:hover{
    filter:brightness(.97);
    transform:translateY(-1px);
}

.btn:active{
    transform:translateY(0) scale(.98);
}

.btn.secondary{
    background:#e8eefb;
    color:#1d4ed8;
    box-shadow:none;
}

.btn.success{
    background:linear-gradient(135deg,#16a34a,#059669);
    color:#fff;
}

.btn.warning{
    background:linear-gradient(135deg,#f59e0b,#d97706);
}

.btn.danger{
    background:linear-gradient(135deg,#dc2626,#be123c);
}

.btn.small{
    font-size:13px;
    padding:7px 10px;
    min-height:36px;
}

.btn:disabled{
    opacity:.45;
    cursor:not-allowed;
    transform:none;
}


/* =========================
   ALERTS
========================= */

.alert{
    padding:13px 15px;
    border-radius:11px;
    margin-bottom:16px;
    font-weight:700;
}

.alert.ok{
    background:#dcfce7;
    color:#166534;
}

.alert.err{
    background:#fee2e2;
    color:#991b1b;
}


/* =========================
   ACTIONS
========================= */

.actions{
    display:flex;
    gap:7px;
    flex-wrap:wrap;
    align-items:center;
}

.actions form{
    display:flex;
    gap:7px;
    flex-wrap:wrap;
    align-items:center;
}


/* =========================
   TABLE
========================= */

.table-wrap{
    overflow:auto;
    border-radius:12px;
    -webkit-overflow-scrolling:touch;
}

table{
    width:100%;
    border-collapse:collapse;
}

th,
td{
    padding:12px 10px;
    border-bottom:1px solid var(--line);
    text-align:left;
    vertical-align:middle;
}

th{
    background:#edf4ff;
    color:#1e40af;
    font-size:13px;
    text-transform:uppercase;
    white-space:nowrap;
}

td{
    overflow-wrap:anywhere;
}

tr:hover td{
    background:#fafcff;
}


/* =========================
   BADGES
========================= */

.badge{
    display:inline-block;
    padding:5px 9px;
    border-radius:999px;
    font-size:12px;
    font-weight:800;
    white-space:nowrap;
}

.green{
    background:#dcfce7;
    color:#166534;
}

.red{
    background:#fee2e2;
    color:#991b1b;
}

.orange{
    background:#ffedd5;
    color:#9a3412;
}

.gray{
    background:#e2e8f0;
    color:#475569;
}

.empty{
    text-align:center;
    color:var(--muted);
    padding:25px;
}


/* =========================
   CAMERA
========================= */

.camera-card{
    text-align:center;
}

.camera{
    width:100%;
    max-width:430px;
    aspect-ratio:3/4;
    object-fit:cover;
    border-radius:18px;
    background:#0f172a;
    display:block;
    margin:14px auto;
    min-height:280px;
}

.preview{
    display:none;
}

.camera-buttons{
    display:flex;
    justify-content:center;
    gap:10px;
    flex-wrap:wrap;
}

.camera-buttons .btn{
    min-width:145px;
}

.status{
    font-weight:700;
    margin:10px;
}


/* =========================
   LOGIN
========================= */

.login-page{
    min-height:100vh;
    display:grid;
    place-items:center;
    padding:20px;
    background:linear-gradient(135deg,#eff6ff,#f5f3ff);
}

.login-box{
    width:min(430px,100%);
    background:#fff;
    border-radius:22px;
    padding:32px;
    box-shadow:0 20px 55px rgba(30,41,59,.13);
}

.logo{
    width:60px;
    height:60px;
    border-radius:17px;
    background:linear-gradient(135deg,var(--primary),var(--secondary));
    color:#fff;
    display:grid;
    place-items:center;
    font-weight:900;
    font-size:27px;
    margin-bottom:15px;
}

.login-box .btn{
    width:100%;
    margin-top:9px;
}


/* =========================
   LICENSE SUPPORT
========================= */

.license-support{
    background:#fff7ed;
    border:1px solid #fed7aa;
    color:#9a3412;
    padding:12px 16px;
    border-radius:12px;
    margin:0 0 18px;
    font-size:15px;
    line-height:1.5;
}

.license-support a{
    color:#9a3412;
    font-weight:800;
    text-decoration:none;
}

.license-support a:hover{
    text-decoration:underline;
}


/* =========================
   LOCATION
========================= */

.location-status{
    font-weight:700;
    margin:8px 0;
}

.location-map{
    width:100%;
    height:380px;
    border-radius:14px;
    overflow:hidden;
    margin:14px 0;
    border:1px solid #dbe3ef;
    background:#e2e8f0;
}

.employee-location-map{
    height:300px;
    max-width:760px;
    margin:14px auto;
}

.map-actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin:10px 0;
}

.map-import{
    display:flex;
    gap:10px;
    align-items:center;
    margin:10px 0;
    flex-wrap:wrap;
}

.map-import input{
    flex:1;
    min-width:240px;
}

.leaflet-container{
    font:inherit;
}


/* =========================
   FORMULA
========================= */

.formula{
    background:#eff6ff;
    border:1px solid #bfdbfe;
    border-radius:14px;
    padding:14px 16px;
    margin:10px 0 16px;
    color:#1e3a8a;
    line-height:1.6;
}

.card tfoot th,
.card tfoot td{
    background:#f8fafc;
    border-top:2px solid #cbd5e1;
}


/* =========================
   TABLET
========================= */

@media(max-width:900px){

    .nav{
        overflow-x:auto;
        white-space:nowrap;
    }

    .nav a{
        flex:0 0 auto;
    }

    .table-wrap table{
        min-width:900px;
    }
}


/* =========================
   MOBILE
========================= */

@media(max-width:700px){

    .nav{
        position:static;
        padding:10px 12px;
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:6px;
    }

    .nav .brand{
        grid-column:1/-1;
        margin:0;
        padding:4px 2px;
        font-size:18px;
    }

    .nav a{
        font-size:13px;
        padding:9px 8px;
        text-align:center;
        overflow:hidden;
        text-overflow:ellipsis;
    }

    .nav .logout{
        margin:0;
    }

    .wrap{
        padding:0 12px;
        margin:18px auto;
    }

    .head{
        align-items:flex-start;
    }

    .head h1{
        font-size:25px;
    }

    .card{
        padding:17px;
    }

    .form-grid{
        grid-template-columns:1fr;
    }

    .full{
        grid-column:auto;
    }

    .grid{
        grid-template-columns:1fr 1fr;
        gap:10px;
    }

    .stat{
        padding:15px 12px;
    }

    .stat .num{
        font-size:22px;
    }

    .camera{
        min-height:260px;
    }

    .camera-buttons .btn{
        width:100%;
        min-width:0;
    }

    .actions .btn{
        flex:0 0 auto;
    }

    .table-wrap table{
        min-width:860px;
    }

    .location-map{
        height:320px;
    }

    .employee-location-map{
        height:260px;
    }

    .map-actions .btn{
        width:100%;
    }

    .map-import .btn{
        width:100%;
    }

    .license-support{
        font-size:14px;
        padding:11px 12px;
    }

    .mms-whatsapp{
        right:12px;
        bottom:12px;
        width:58px;
        height:58px;
    }

    .mms-whatsapp__button{
        width:58px;
        height:58px;
        border-width:2px;
    }

    .mms-whatsapp__icon{
        width:35px;
        height:35px;
        max-width:35px;
        max-height:35px;
    }

    .mms-whatsapp__tip{
        display:none;
    }
}


/* =========================
   SMALL MOBILE
========================= */

@media(max-width:380px){

    .grid{
        grid-template-columns:1fr;
    }

    .mms-whatsapp{
        right:9px;
        bottom:9px;
        width:54px;
        height:54px;
    }

    .mms-whatsapp__button{
        width:54px;
        height:54px;
    }

    .mms-whatsapp__icon{
        width:32px;
        height:32px;
        max-width:32px;
        max-height:32px;
    }

    .login-box{
        padding:24px 18px;
    }
}

/* =========================================
   MOBILE-FIRST BOTTOM TAB NAVIGATION
   Desktop navigation stays unchanged.
========================================= */
.mobile-bottom-nav,
.mobile-more-panel{
    display:none;
}

@media(max-width:700px){
    body{
        padding-bottom:76px;
    }

    /* Hide the large desktop nav on phones. */
    body > .nav{
        display:none;
    }

    .wrap{
        width:100%;
        max-width:none;
        margin:0;
        padding:16px 12px 28px;
    }

    .head{
        align-items:flex-start;
        flex-direction:column;
        gap:10px;
    }

    .head h1{
        font-size:25px;
    }

    .card{
        border-radius:14px;
        padding:16px;
        margin-bottom:12px;
    }

    .mobile-bottom-nav{
        position:fixed;
        left:0;
        right:0;
        bottom:0;
        height:68px;
        display:grid;
        grid-template-columns:repeat(5,1fr);
        gap:0;
        background:rgba(255,255,255,.98);
        border-top:1px solid #dbe4ef;
        box-shadow:0 -8px 24px rgba(15,23,42,.10);
        z-index:9999;
        padding-bottom:env(safe-area-inset-bottom);
        backdrop-filter:blur(12px);
        -webkit-backdrop-filter:blur(12px);
    }

    .mobile-tab{
        min-width:0;
        min-height:68px;
        border:0;
        background:transparent;
        color:#64748b;
        text-decoration:none;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:3px;
        padding:7px 3px;
        font:700 11px/1.1 Inter,Arial,sans-serif;
        cursor:pointer;
        -webkit-tap-highlight-color:transparent;
    }

    .mobile-tab-icon{
        width:34px;
        height:34px;
        display:flex;
        align-items:center;
        justify-content:center;
        border-radius:12px;
        line-height:1;
        font-weight:800;
        background:#f3f6fb;
        transition:transform .16s ease,box-shadow .16s ease,background .16s ease;
    }
.mobile-tab-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.icon-home{color:#2563eb;background:#eaf2ff;}
.icon-staff{color:#7c3aed;background:#f1eaff;}
.icon-attend{color:#059669;background:#e7fbf3;}
.icon-salary{color:#d97706;background:#fff4dc;}
.icon-leave{color:#db2777;background:#ffeaf3;}
.icon-payslip{color:#0891b2;background:#e5f8fc;}
.icon-more{color:#64748b;background:#eef2f7;gap:3px;}
.icon-more i{width:4px;height:4px;border-radius:50%;background:currentColor;display:block;}
.mobile-tab.active{color:var(--primary);}
.mobile-tab.active .mobile-tab-icon{box-shadow:0 5px 14px rgba(37,99,235,.13);transform:translateY(-1px);}
.mobile-tab:active .mobile-tab-icon{transform:scale(.92);}

    .mobile-tab:active .mobile-tab-icon{
        transform:scale(.92);
    }

    .mobile-more-panel{
        position:fixed;
        inset:0;
        z-index:10000;
        background:rgba(15,23,42,.42);
        padding:18px 12px 86px;
        align-items:flex-end;
        justify-content:center;
    }

    .mobile-more-panel.show{
        display:flex;
    }

    .mobile-more-card{
        width:100%;
        max-width:520px;
        max-height:82vh;
        overflow:auto;
        background:#fff;
        border-radius:20px;
        padding:10px;
        box-shadow:0 20px 55px rgba(15,23,42,.28);
        animation:mobileMoreUp .18s ease-out;
    }

    .mobile-more-head{
        display:flex;
        align-items:center;
        justify-content:space-between;
        padding:10px 10px 12px;
        border-bottom:1px solid #eef2f7;
        margin-bottom:4px;
        color:#13264a;
    }

    .mobile-more-close{
        width:38px;
        height:38px;
        border:0;
        border-radius:12px;
        background:#f1f5f9;
        color:#334155;
        font-size:25px;
        line-height:1;
        cursor:pointer;
    }

    .mobile-more-card > a{
        display:flex;
        align-items:center;
        min-height:48px;
        padding:11px 12px;
        border-radius:12px;
        color:#1e293b;
        text-decoration:none;
        font-weight:700;
        margin:2px 0;
    }

    .mobile-more-card > a:active,
    .mobile-more-card > a:hover{
        background:#f1f5f9;
    }

    .mobile-more-card > a.danger-link{
        color:#dc2626;
        margin-top:7px;
        border-top:1px solid #eef2f7;
        border-radius:0 0 12px 12px;
        padding-top:15px;
    }

    body.mobile-menu-open{
        overflow:hidden;
    }

    /* Mobile table usability */
    .table-wrap,
    .responsive-table{
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
    }

    table{
        min-width:620px;
    }

    input,select,textarea,button,.btn{
        min-height:44px;
    }
}

@keyframes mobileMoreUp{
    from{transform:translateY(18px);opacity:.6}
    to{transform:translateY(0);opacity:1}
}

@media(prefers-reduced-motion:reduce){
    .mobile-more-card{animation:none}
}


/* =========================================================
   MMS PRO DESIGN SYSTEM — ADMIN + MOBILE UX
========================================================= */
:root{
  --primary:#2563eb;
  --primary-dark:#1d4ed8;
  --ink:#10233f;
  --muted:#64748b;
  --surface:#ffffff;
  --surface-soft:#f7f9fc;
  --line:#e5eaf1;
  --radius:14px;
}

body{background:#f5f7fb;color:var(--ink);}
button,a,input,select,textarea{font-family:inherit;}
button,.btn,a{touch-action:manipulation;}

.card{border:1px solid var(--line);box-shadow:0 4px 18px rgba(15,23,42,.055);}
.card h2{font-size:19px;letter-spacing:-.15px;}
.btn{border-radius:11px;min-height:44px;padding:10px 16px;box-shadow:0 4px 12px rgba(37,99,235,.15);}
.btn.secondary{background:#eef4ff;color:#1d4ed8;border:1px solid #dbe7ff;}
input,select,textarea{border-color:#d6dee9;border-radius:11px;}
input::placeholder,textarea::placeholder{color:#94a3b8;}

/* Desktop admin sidebar */
.admin-body{padding-left:252px;}
.admin-sidebar{
  position:fixed;inset:0 auto 0 0;width:252px;z-index:1000;
  display:flex;flex-direction:column;padding:18px 14px;
  background:#fff;border-right:1px solid #e6ebf2;
  box-shadow:8px 0 30px rgba(15,23,42,.045);
}
.admin-brand{display:flex;align-items:center;gap:11px;padding:4px 8px 20px;border-bottom:1px solid #eef2f7;}
.admin-brand-mark{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,#2563eb,#4f46e5);color:#fff;font-weight:900;box-shadow:0 7px 18px rgba(37,99,235,.22);}
.admin-brand strong{display:block;font-size:16px;line-height:1.15;}
.admin-brand small{display:block;margin-top:3px;color:#94a3b8;font-size:11px;font-weight:700;}
.admin-menu-label{font-size:10px;letter-spacing:1.2px;color:#94a3b8;font-weight:900;padding:19px 10px 7px;}
.admin-menu{display:flex;flex-direction:column;gap:3px;}
.admin-menu a{display:flex;align-items:center;gap:11px;min-height:45px;padding:9px 11px;border-radius:11px;color:#475569;text-decoration:none;font-weight:750;}
.admin-menu a:hover{background:#f4f7fb;color:#1e40af;}
.admin-menu a.active{background:#edf4ff;color:#1d4ed8;box-shadow:inset 3px 0 0 #2563eb;}
.menu-icon{width:24px;text-align:center;font-size:18px;font-weight:900;}
.admin-sidebar-spacer{flex:1;}
.admin-logout{display:flex;align-items:center;gap:10px;min-height:45px;padding:9px 12px;border-radius:11px;text-decoration:none;font-weight:800;color:#b91c1c;background:#fff5f5;border:1px solid #fee2e2;}
.admin-logout:hover{background:#fee2e2;}
.admin-mobile-header{display:none;}
.admin-bottom-nav{display:none;}
.admin-body>.wrap{max-width:1440px;margin:0 auto;padding:30px 28px 48px;}
.admin-body .head{margin-bottom:22px;}
.admin-body .head h1{font-size:30px;letter-spacing:-.5px;}
.admin-body .stat{border:1px solid var(--line);border-left:4px solid var(--primary);}

/* Dashboard */
.admin-dashboard-hero{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 24px;margin-bottom:18px;background:linear-gradient(135deg,#eff6ff,#f8faff);border:1px solid #dbeafe;border-radius:16px;}
.admin-dashboard-hero h1{margin:0 0 4px;}
.admin-dashboard-hero .hero-actions{display:flex;gap:9px;flex-wrap:wrap;}

/* Better mobile */
@media(max-width:900px){
  .admin-body{padding-left:0;padding-top:62px;}
  .admin-sidebar{display:none;}
  .admin-mobile-header{position:fixed;top:0;left:0;right:0;height:62px;z-index:9998;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;background:rgba(255,255,255,.97);border-bottom:1px solid #e5eaf1;box-shadow:0 4px 16px rgba(15,23,42,.06);backdrop-filter:blur(12px);}
  .admin-mobile-brand{display:flex;align-items:center;gap:9px;min-width:0;}
  .admin-mobile-brand .admin-brand-mark{width:34px;height:34px;border-radius:10px;}
  .admin-mobile-brand strong{font-size:14px;white-space:nowrap;}
  .admin-mobile-title{color:#64748b;font-size:12px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .admin-bottom-nav{display:grid;}
  .admin-body>.wrap{padding:18px 13px 90px;margin:0;}
  .admin-body .head h1{font-size:25px;}
  .admin-dashboard-hero{display:block;padding:17px;margin-bottom:13px;}
  .admin-dashboard-hero .hero-actions{margin-top:13px;}
  .admin-dashboard-hero .hero-actions .btn{flex:1 1 130px;}
}

@media(max-width:520px){
  .admin-body .grid{grid-template-columns:1fr 1fr;gap:9px;}
  .admin-body .stat{padding:14px 11px;border-radius:13px;}
  .admin-body .stat .label{font-size:12px;line-height:1.25;}
  .admin-body .stat .num{font-size:22px;margin-top:5px;}
  .admin-dashboard-hero .hero-actions .btn{width:100%;}
}

@media(max-width:380px){
  .admin-body .grid{grid-template-columns:1fr;}
}

/* =========================================================
   PAYROLL WORKSPACE
========================================================= */
.payroll-page{max-width:1480px;margin:0 auto;color:#172b4d;}
.payroll-page__heading{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:20px;}
.payroll-page__heading h1{margin:2px 0 5px;font-size:30px;letter-spacing:-.65px;}
.payroll-page__heading p:not(.eyebrow){margin:0;color:#64748b;}
.eyebrow{margin:0;color:#2563eb;font-size:11px;font-weight:900;letter-spacing:1.4px;}
.payroll-saved{margin-top:8px;padding:8px 11px;border-radius:9px;background:#ecfdf5;color:#047857;font-weight:800;font-size:12px;white-space:nowrap;}
.payroll-filter{display:grid;grid-template-columns:minmax(280px,1.35fr) minmax(190px,.7fr) auto;gap:14px;align-items:end;padding:17px;margin-bottom:14px;background:#fff;border:1px solid #e1e8f0;border-radius:15px;box-shadow:0 3px 15px rgba(15,23,42,.045);}
.payroll-filter label{font-size:12px;color:#475569;margin-bottom:6px;}.payroll-filter input,.payroll-filter select{height:42px;padding:9px 11px;}.payroll-filter__button .btn{height:42px;min-height:42px;white-space:nowrap;}
.payroll-rulebar{display:flex;gap:0;flex-wrap:wrap;margin-bottom:14px;padding:0 4px;background:#eef5ff;border:1px solid #d9e8ff;border-radius:10px;overflow:hidden;}
.payroll-rulebar span{padding:10px 14px;color:#53647a;font-size:12px;border-right:1px solid #d9e8ff;}.payroll-rulebar b{color:#183e77;}
.payroll-layout{display:grid;grid-template-columns:minmax(0,1fr) 315px;gap:15px;align-items:start;}.payroll-main{min-width:0;}.payroll-table-card,.payroll-summary,.payroll-save-card{background:#fff;border:1px solid #e2e8f0;border-radius:14px;box-shadow:0 4px 17px rgba(15,23,42,.045);}.payroll-card-title{display:flex;justify-content:space-between;align-items:center;padding:16px 17px 13px;border-bottom:1px solid #e8edf3;}.payroll-card-title h2,.payroll-summary h2{margin:0;font-size:15px;color:#17335e;}.payroll-card-title p{margin:3px 0 0;color:#718096;font-size:12px;}.payroll-card-title>span{font-size:11px;color:#64748b;font-weight:800;background:#f1f5f9;padding:5px 8px;border-radius:6px;}
.payroll-table-wrap{overflow:auto;max-height:660px;}.payroll-table{min-width:780px;font-size:12px;}.payroll-table th{position:sticky;top:0;z-index:1;background:#f5f8fc;color:#53647a;text-transform:none;font-size:11px;letter-spacing:0;padding:10px 11px;border-bottom:1px solid #e1e8f0;}.payroll-table td{padding:8px 11px;color:#34465f;border-bottom:1px solid #edf1f5;}.payroll-table tbody tr:hover td{background:#f8fbff;}.payroll-table tr.is-off td{background:#f0f9ff;}.payroll-badge{display:inline-flex;align-items:center;justify-content:center;min-width:70px;padding:4px 7px;border-radius:6px;font-size:11px;font-weight:800;}.payroll-badge--present{background:#d9fbe8;color:#087443;}.payroll-badge--half{background:#fff0cf;color:#aa6600;}.payroll-badge--absent{background:#ffe1e5;color:#c12142;}.payroll-badge--leave{background:#e6ddff;color:#6c35be;}.payroll-badge--off{background:#d9efff;color:#176bba;}.payroll-badge--pending{background:#fff4d6;color:#9a6700;}.payroll-badge--off-unpaid{background:#eef2f7;color:#64748b;}.payroll-off-notice{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 14px;padding:11px 14px;border:1px solid #f2d28b;border-radius:8px;background:#fffaf0;color:#815d10;font-size:12px;}.payroll-off-notice strong{color:#8b5d00;}.payroll-off-notice span{color:#6b7280;}.payroll-rulebar span:last-child{border-right:0;}
.payroll-save-card{display:grid;grid-template-columns:1fr auto;gap:15px;align-items:end;padding:15px;margin-top:15px;}.payroll-save-card label{font-size:12px;}.payroll-save-card textarea{min-height:54px;padding:8px 10px;}.payroll-actions{display:flex;gap:8px;}.payroll-actions .btn{white-space:nowrap;}
.payroll-sidebar{display:grid;gap:12px;}.payroll-summary{padding:14px;}.payroll-summary h2{padding-bottom:10px;border-bottom:1px solid #e9eef4;}.payroll-summary dl{margin:5px 0 0;}.payroll-summary dl>div{display:flex;justify-content:space-between;gap:10px;padding:7px 3px;border-bottom:1px solid #eff3f7;font-size:12px;}.payroll-summary dl>div:last-child{border-bottom:0;}.payroll-summary dt{color:#596a80;}.payroll-summary dd{margin:0;color:#1f3657;font-weight:850;}.payroll-subtotal{display:grid;gap:6px;margin-top:10px;padding:10px;border-radius:8px;font-size:11px;}.payroll-subtotal strong{font-size:12px;}.payroll-subtotal span{display:flex;justify-content:space-between;gap:8px;color:#53647a;}.payroll-subtotal b{color:#203a60;}.payroll-income{background:#edfcf4;color:#087443;}.payroll-deduction{background:#fff2f4;color:#bd2446;}.payroll-net{padding:17px;border:1px solid #9ee9c3;border-radius:14px;background:linear-gradient(135deg,#ecfff4,#f5fffa);}.payroll-net span,.payroll-net small{display:block;color:#168653;font-weight:800;}.payroll-net strong{display:block;margin:5px 0;color:#07964d;font-size:30px;letter-spacing:.3px;}.payroll-net small{color:#5e8b73;font-size:10px;font-weight:650;}
@media(max-width:1120px){.payroll-layout{grid-template-columns:minmax(0,1fr) 280px;}.payroll-rulebar span{padding:8px 10px;}}
@media(max-width:900px){.payroll-page__heading h1{font-size:25px;}.payroll-layout{grid-template-columns:1fr;}.payroll-sidebar{grid-template-columns:repeat(2,minmax(0,1fr));}.payroll-net{grid-column:1/-1;}.payroll-save-card{margin-bottom:12px;}}
@media(max-width:610px){.payroll-page__heading{display:block;}.payroll-saved{display:inline-block;margin-top:10px;}.payroll-filter{grid-template-columns:1fr;padding:13px;gap:10px;}.payroll-filter__button .btn{width:100%;}.payroll-rulebar{display:block;}.payroll-rulebar span{display:block;border-right:0;border-bottom:1px solid #d9e8ff;}.payroll-rulebar span:last-child{border-bottom:0;}.payroll-sidebar{grid-template-columns:1fr;}.payroll-net{grid-column:auto;}.payroll-save-card{grid-template-columns:1fr;}.payroll-actions .btn{flex:1;}.payroll-page__heading p:not(.eyebrow){font-size:13px;}.payroll-off-notice{display:block;}.payroll-off-notice span{display:block;margin-top:4px;}}

/* Prevent content from hiding behind the fixed mobile nav */
@media(max-width:700px){
  body{padding-bottom:82px;}
  .mobile-bottom-nav{height:72px;padding-bottom:env(safe-area-inset-bottom);}
  .mobile-tab{min-height:72px;font-size:10.5px;}
}

/* Desktop shell: calm dark navigation with a focused work header. */
@media(min-width:901px){
  .admin-body{padding-top:64px;background:#f4f7fb;}
  .admin-sidebar{width:252px;padding:17px 13px;background:linear-gradient(180deg,#102c4d,#16283e);border-right:0;box-shadow:none;}
  .admin-brand{border-color:rgba(255,255,255,.13);}.admin-brand strong{color:#fff;}.admin-brand small{color:#abc0d9;}.admin-brand-mark{background:linear-gradient(135deg,#1f88fa,#1761d1);}
  .admin-menu-label{color:#91a9c2;}.admin-menu a{color:#d9e7f5;}.admin-menu a:hover{background:rgba(255,255,255,.09);color:#fff;}.admin-menu a.active{background:#1475e8;color:#fff;box-shadow:inset 3px 0 0 #8bc6ff;}
  .admin-logout{background:rgba(239,68,68,.12);border-color:rgba(253,164,175,.18);color:#fecaca;}.admin-logout:hover{background:rgba(239,68,68,.22);}
  .admin-desktop-header{position:fixed;top:0;left:252px;right:0;height:64px;z-index:999;display:flex;align-items:center;justify-content:space-between;padding:0 28px;background:linear-gradient(90deg,#163a63,#1b3657);color:#fff;box-shadow:0 3px 16px rgba(15,39,67,.16);}.admin-desktop-header>strong{font-size:18px;letter-spacing:.1px;}.admin-desktop-header>div{display:flex;align-items:center;gap:10px;font-size:13px;}.admin-header-bell{font-size:19px;opacity:.9;}.admin-header-user{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#1475e8;font-size:12px;font-weight:900;}
}
@media(max-width:900px){.admin-desktop-header{display:none;}}

/* Colorful admin navigation icons */
.admin-menu .menu-icon{
  width:34px;height:34px;flex:0 0 34px;display:grid;place-items:center;
  border-radius:11px;font-size:0;position:relative;overflow:hidden;
  transition:transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.admin-menu .menu-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.admin-menu a:hover .menu-icon{transform:translateY(-1px);box-shadow:0 5px 12px rgba(15,23,42,.10);filter:saturate(1.08);}
.menu-dashboard{color:#2563eb;background:#eaf2ff;}
.menu-staff{color:#7c3aed;background:#f1eaff;}
.menu-attendance{color:#059669;background:#e6fbf3;}
.menu-leave{color:#db2777;background:#ffeaf3;}
.menu-salary{color:#d97706;background:#fff3dc;}
.menu-advance{color:#0891b2;background:#e6f8fc;}
.menu-export{color:#4f46e5;background:#eeedff;}
.menu-settings{color:#64748b;background:#eef2f7;}
.menu-license{color:#0f766e;background:#e5faf6;}
.admin-menu a.active .menu-icon{box-shadow:0 5px 14px rgba(0,0,0,.10);}
@media(min-width:901px){
  .admin-menu a.active .menu-icon{background:rgba(255,255,255,.96);}
}


/* Payroll note / snapshot UI */
.payroll-saved-note{margin-top:14px;padding:14px 16px;border:1px solid #bfdbfe;background:linear-gradient(135deg,#eff6ff,#f8fafc);border-radius:14px;color:#334155}
.payroll-saved-note strong{display:block;color:#1d4ed8;margin-bottom:5px}
.payroll-saved-note p{margin:0;white-space:pre-wrap;line-height:1.5}
.payslip-admin-note{border-left:4px solid #7c3aed;background:linear-gradient(135deg,#f5f3ff,#fafafa)}
.payslip-admin-note strong{display:block;color:#6d28d9;margin-bottom:5px}
.payslip-admin-note div{white-space:normal;line-height:1.55}

/* Commercial edition common page back button */
.page-back-wrap{display:flex;justify-content:flex-start;margin:22px 0 8px}
.page-back-btn{min-width:110px}
.stat{cursor:pointer;transition:transform .15s,box-shadow .15s}
.stat:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(15,23,42,.08)}
@media(max-width:650px){.page-back-wrap{padding-bottom:70px}}


/* =========================================================
   2026 LIQUID-GLASS ADMIN REFRESH
   Glass is kept strongest on navigation/controls and light on
   content surfaces so readability remains the priority.
========================================================= */
:root{
  --glass-border:rgba(255,255,255,.58);
  --glass-bg:rgba(255,255,255,.62);
  --glass-shadow:0 18px 45px rgba(15,23,42,.10), inset 0 1px 0 rgba(255,255,255,.72);
}
body.admin-body, body.employee-body{
  background:
    radial-gradient(circle at 12% 8%,rgba(59,130,246,.12),transparent 30%),
    radial-gradient(circle at 88% 18%,rgba(124,58,237,.12),transparent 28%),
    linear-gradient(135deg,#eef4ff 0%,#f8fbff 48%,#f2f7ff 100%);
}
.admin-sidebar{
  background:linear-gradient(180deg,rgba(16,44,77,.94),rgba(22,40,62,.91)) !important;
  backdrop-filter:blur(22px) saturate(135%);
  -webkit-backdrop-filter:blur(22px) saturate(135%);
}
.admin-desktop-header{
  background:linear-gradient(90deg,rgba(22,58,99,.92),rgba(27,54,87,.88)) !important;
  backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  border-bottom:1px solid rgba(255,255,255,.16);
}
.card,.stat,.payroll-table-card,.payroll-summary,.payroll-save-card,.payroll-filter,.payroll-net,.admin-dashboard-hero{
  background:linear-gradient(145deg,rgba(255,255,255,.78),rgba(255,255,255,.54)) !important;
  border-color:var(--glass-border) !important;
  box-shadow:var(--glass-shadow) !important;
  backdrop-filter:blur(18px) saturate(125%);
  -webkit-backdrop-filter:blur(18px) saturate(125%);
}
.btn,.mobile-tab,.nav a{
  border:1px solid rgba(255,255,255,.42);
  box-shadow:0 8px 22px rgba(37,99,235,.12),inset 0 1px 0 rgba(255,255,255,.42);
  backdrop-filter:blur(12px) saturate(125%);
  -webkit-backdrop-filter:blur(12px) saturate(125%);
}
input,select,textarea{
  background:rgba(255,255,255,.72) !important;
  border-color:rgba(148,163,184,.38) !important;
  box-shadow:inset 0 1px 1px rgba(15,23,42,.03),0 3px 12px rgba(15,23,42,.035);
}
.admin-menu a{border:1px solid transparent;}
.admin-menu a:hover,.admin-menu a.active{backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);}
.branding-preview{width:240px;min-height:80px;padding:10px;border-radius:16px;border:1px solid rgba(148,163,184,.28);background:rgba(255,255,255,.55);display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.75);}
.branding-preview img{max-width:240px;max-height:80px;width:auto;height:auto;object-fit:contain;}
.branding-signature-row{display:flex;gap:18px;flex-wrap:wrap;}
.branding-signature-row>div{min-width:180px;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.48);border:1px solid rgba(148,163,184,.25);}
.branding-signature-row img{display:block;max-width:220px;max-height:70px;margin-top:7px;object-fit:contain;}
.switch-row{display:flex;align-items:center;gap:9px;font-weight:750;min-height:42px;}
.switch-row input{width:18px;height:18px;box-shadow:none !important;}
.salary-edit-card{margin-bottom:16px;padding:18px;border:1px solid rgba(255,255,255,.7);border-radius:20px;background:linear-gradient(145deg,rgba(255,255,255,.82),rgba(238,246,255,.60));box-shadow:0 20px 55px rgba(37,99,235,.10),inset 0 1px 0 rgba(255,255,255,.85);backdrop-filter:blur(20px) saturate(130%);-webkit-backdrop-filter:blur(20px) saturate(130%);}
.salary-edit-head{display:grid;grid-template-columns:minmax(0,1fr) 190px 170px;gap:12px;align-items:center;margin-bottom:14px;}
.salary-edit-head h2{margin:0 0 4px;font-size:20px;color:#16335d;}.salary-edit-head p{margin:0;color:#64748b;font-size:12px;}
.salary-edit-kpi{padding:12px;border-radius:14px;background:rgba(255,255,255,.52);border:1px solid rgba(148,163,184,.22);}.salary-edit-kpi span{display:block;font-size:11px;color:#64748b}.salary-edit-kpi b{display:block;margin-top:4px;font-size:17px;color:#174ea6;}
.salary-edit-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;}
.salary-edit-field{padding:12px;border-radius:15px;background:rgba(255,255,255,.48);border:1px solid rgba(148,163,184,.24);min-width:0;}.salary-edit-field label{display:block;font-size:12px;font-weight:850;color:#334155;margin-bottom:7px;}.salary-edit-field input{width:100%;}.salary-edit-field small{display:block;margin-top:5px;color:#64748b;font-size:10px;line-height:1.35;}.salary-edit-field.readonly strong{display:block;font-size:18px;color:#174ea6;margin:8px 0 2px}.salary-edit-wide{grid-column:1/-1;}.salary-edit-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding-top:2px;}.salary-edit-actions .btn{min-width:190px;}
@media(max-width:1100px){.salary-edit-head{grid-template-columns:1fr 1fr;}.salary-edit-head>div:first-child{grid-column:1/-1;}.salary-edit-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:700px){.salary-edit-head{grid-template-columns:1fr;}.salary-edit-head>div:first-child{grid-column:auto;}.salary-edit-grid{grid-template-columns:1fr;}.salary-edit-wide{grid-column:auto;}.salary-edit-actions{display:block}.salary-edit-actions .btn{width:100%;margin-bottom:8px}.branding-preview{width:100%;max-width:240px;}.branding-signature-row{display:block}.branding-signature-row>div{margin-bottom:10px;}}
@media(prefers-reduced-transparency: reduce){.card,.stat,.salary-edit-card,.admin-sidebar,.admin-desktop-header{backdrop-filter:none;-webkit-backdrop-filter:none;background:#fff !important;}}

/* Employee portal glass navigation */
.employee-body .nav{
  background:linear-gradient(135deg,rgba(37,99,235,.90),rgba(124,58,237,.88)) !important;
  backdrop-filter:blur(22px) saturate(140%);
  -webkit-backdrop-filter:blur(22px) saturate(140%);
  border-bottom:1px solid rgba(255,255,255,.22);
}
.employee-body .nav .brand img{display:block;max-width:150px;max-height:42px;object-fit:contain;}
.employee-body .card,.employee-body .stat{
  background:linear-gradient(145deg,rgba(255,255,255,.82),rgba(255,255,255,.58)) !important;
  border-color:rgba(255,255,255,.68) !important;
  box-shadow:0 18px 45px rgba(15,23,42,.09),inset 0 1px 0 rgba(255,255,255,.8) !important;
  backdrop-filter:blur(18px) saturate(125%);
  -webkit-backdrop-filter:blur(18px) saturate(125%);
}
.mobile-bottom-nav{
  backdrop-filter:blur(20px) saturate(135%);
  -webkit-backdrop-filter:blur(20px) saturate(135%);
  background:rgba(255,255,255,.80) !important;
  border-top:1px solid rgba(255,255,255,.72) !important;
  box-shadow:0 -12px 30px rgba(15,23,42,.10) !important;
}

/* =========================================================
   2026 PAYROLL CALCULATION MATRIX — DESKTOP + MOBILE
   A clear data-layer table with restrained glass navigation.
========================================================= */
.salary-calc-card{
  margin:0 0 20px;
  border:1px solid rgba(255,255,255,.72);
  border-radius:24px;
  overflow:hidden;
  background:linear-gradient(145deg,rgba(255,255,255,.92),rgba(238,246,255,.76));
  box-shadow:0 22px 60px rgba(15,23,42,.11),inset 0 1px 0 rgba(255,255,255,.9);
  backdrop-filter:blur(20px) saturate(130%);
  -webkit-backdrop-filter:blur(20px) saturate(130%);
}
.salary-calc-header{
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:22px 24px;
  background:linear-gradient(115deg,#0f3d68 0%,#145d8d 45%,#176b84 100%);
  color:#fff;
}
.salary-calc-eyebrow{font-size:10px;font-weight:900;letter-spacing:1.8px;opacity:.72;margin-bottom:5px}
.salary-calc-header h2{margin:0;font-size:22px;letter-spacing:-.35px;color:#fff}
.salary-calc-header p{margin:6px 0 0;max-width:780px;font-size:12px;line-height:1.55;color:rgba(255,255,255,.80)}
.salary-calc-net-pill{min-width:190px;padding:13px 16px;border-radius:17px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.22);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.salary-calc-net-pill span{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.8px;color:rgba(255,255,255,.72);font-weight:800}
.salary-calc-net-pill strong{display:block;margin-top:4px;font-size:25px;color:#fff}
.salary-calc-table-wrap{overflow:auto}
.salary-calc-table{width:100%;min-width:940px;border-collapse:separate;border-spacing:0;font-size:12px}
.salary-calc-table thead th{
  position:sticky;top:0;z-index:3;text-align:left;padding:13px 15px;
  color:#fff;background:linear-gradient(90deg,#174d78,#176d88 52%,#278a8d);
  border-right:1px solid rgba(255,255,255,.15);font-size:11px;letter-spacing:.25px
}
.salary-calc-table thead th:first-child{padding-left:18px}
.salary-calc-table tbody td{padding:12px 15px;border-bottom:1px solid #e5edf3;border-right:1px solid #edf2f6;vertical-align:middle;color:#334155;background:rgba(255,255,255,.62)}
.salary-calc-table tbody tr:nth-child(even) td{background:rgba(246,250,253,.86)}
.salary-calc-table tbody tr:hover td{background:#eef8ff}
.salary-calc-table tbody tr:last-child td{border-bottom:0}
.salary-calc-table td strong{display:block;color:#183b61;font-size:12px}
.salary-calc-table td small{display:block;margin-top:3px;color:#718096;font-size:10px;line-height:1.35}
.salary-calc-table .col-component{width:25%}.salary-calc-table .col-owner{width:29%}.salary-calc-table .col-applied{width:18%}
.calc-auto{font-weight:800;color:#52667d;white-space:nowrap}
.applied-value{font-weight:900;color:#173d66;white-space:nowrap;font-size:13px}
.applied-value.positive{color:#087a4d}
.applied-value.negative{color:#c33a4d}
.not-editable{font-size:11px;color:#8a98a9;font-weight:700;font-style:italic}
.calc-input{width:100%;min-width:130px;height:38px;padding:8px 10px;border-radius:10px;border:1px solid #cbd8e5;background:#fff;box-shadow:inset 0 1px 2px rgba(15,23,42,.03)}
.calc-input:focus{outline:none;border-color:#3182ce;box-shadow:0 0 0 3px rgba(49,130,206,.13)}
.override-pair{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.mini-switch{display:flex;align-items:center;gap:6px;margin-bottom:7px;padding:7px 9px;border-radius:9px;background:#fff5dc;color:#8b5d00;font-weight:850;font-size:10px;border:1px solid #f4dfaa}
.mini-switch input{width:16px;height:16px;box-shadow:none!important}
.row-info td:first-child{border-left:4px solid #3182ce}
.row-income td:first-child{border-left:4px solid #20a66a}
.row-deduction td:first-child{border-left:4px solid #df5269}
.row-total td{background:linear-gradient(90deg,#e9f7ef,#effaf7)!important;border-top:2px solid #9ed8bb;border-bottom:0!important}
.row-total td:first-child{border-left:4px solid #168653}
.row-total td strong{font-size:14px;color:#126a45}
.row-total .net-value{font-size:19px;color:#087443}
.salary-calc-footer{display:flex;align-items:center;gap:12px;padding:15px 18px;background:rgba(241,247,252,.78);border-top:1px solid #dfe8f0}
.salary-calc-footer input{flex:1;min-width:0;height:42px}
.salary-save-btn{min-width:220px}

/* Fix pages that load the shared admin shell on small screens. */
@media(max-width:900px){
  .salary-calc-header{align-items:stretch;flex-direction:column;padding:18px}
  .salary-calc-net-pill{min-width:0}
}
@media(max-width:650px){
  .salary-calc-card{border-radius:18px;margin-bottom:15px}
  .salary-calc-header h2{font-size:19px}
  .salary-calc-header p{font-size:11px}
  .salary-calc-table{min-width:760px}
  .salary-calc-table thead th,.salary-calc-table tbody td{padding:10px 11px}
  .salary-calc-footer{display:block;padding:12px}
  .salary-calc-footer input{width:100%;margin-bottom:9px}
  .salary-save-btn{width:100%;min-width:0}
}

/* =========================================================
   FINAL UI POLISH — GRADIENT + LIQUID GLASS
========================================================= */
:root{
  --mms-blue:#2563eb;
  --mms-indigo:#4f46e5;
  --mms-purple:#8b5cf6;
  --mms-pink:#ec4899;
  --mms-cyan:#06b6d4;
  --mms-green:#10b981;
  --mms-navy:#102f52;
}

/* Sidebar: fixed navigation layer with its OWN vertical scroll */
.admin-sidebar{
  overflow-y:auto !important;
  overflow-x:hidden !important;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.35) transparent;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
.admin-sidebar::-webkit-scrollbar{width:7px}
.admin-sidebar::-webkit-scrollbar-track{background:transparent}
.admin-sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.30);border-radius:999px}
.admin-sidebar::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.52)}
.admin-sidebar-spacer{min-height:18px;flex:1 1 auto}

/* Rich gradient navigation icons */
.admin-menu .menu-icon,
.mobile-tab-icon{
  box-shadow:0 7px 18px rgba(15,23,42,.10),inset 0 1px 0 rgba(255,255,255,.65);
}
.admin-menu .menu-dashboard{background:linear-gradient(135deg,#dbeafe,#93c5fd);color:#1d4ed8}
.admin-menu .menu-staff{background:linear-gradient(135deg,#ede9fe,#c4b5fd);color:#6d28d9}
.admin-menu .menu-attendance{background:linear-gradient(135deg,#d1fae5,#6ee7b7);color:#047857}
.admin-menu .menu-leave{background:linear-gradient(135deg,#fce7f3,#f9a8d4);color:#be185d}
.admin-menu .menu-salary{background:linear-gradient(135deg,#fef3c7,#fbbf24);color:#b45309}
.admin-menu .menu-advance{background:linear-gradient(135deg,#cffafe,#67e8f9);color:#0e7490}
.admin-menu .menu-export{background:linear-gradient(135deg,#e0e7ff,#a5b4fc);color:#4338ca}
.admin-menu .menu-settings{background:linear-gradient(135deg,#e2e8f0,#cbd5e1);color:#475569}
.admin-menu .menu-license{background:linear-gradient(135deg,#ccfbf1,#5eead4);color:#0f766e}
.admin-menu a.active{
  color:#fff !important;
  background:linear-gradient(135deg,#1976ed,#6d3df5) !important;
  box-shadow:0 10px 24px rgba(37,99,235,.30),inset 0 1px 0 rgba(255,255,255,.24) !important;
}
.admin-menu a.active .menu-icon{background:rgba(255,255,255,.96) !important}

/* Gradient action buttons, but keep secondary/danger semantic colors */
.btn:not(.secondary):not(.warning):not(.danger){
  background:linear-gradient(135deg,#2563eb,#7c3aed) !important;
  color:#fff !important;
  border-color:transparent !important;
}
.btn:not(.secondary):not(.warning):not(.danger):hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(79,70,229,.26)}
.btn.secondary{background:linear-gradient(135deg,#eef2ff,#e0f2fe) !important;color:#3730a3 !important}
.btn.warning{background:linear-gradient(135deg,#fff7ed,#fef3c7) !important;color:#b45309 !important}
.btn.danger{background:linear-gradient(135deg,#fff1f2,#ffe4e6) !important;color:#be123c !important}

/* Settings / forms: obvious cards instead of raw browser HTML */
.admin-body .glass-panel{
  border-radius:20px !important;
  padding:22px !important;
  margin-bottom:18px !important;
}
.admin-body .glass-panel h2{font-size:20px;margin-top:0;color:#173d66}
.admin-body .form-grid{gap:14px !important}
.admin-body .form-grid>div{min-width:0}
.admin-body label{font-size:12px;font-weight:850;color:#334155}
.admin-body .formula{
  margin:16px 0;
  padding:15px 17px;
  border-radius:15px;
  background:linear-gradient(135deg,#eff6ff,#eef2ff 55%,#faf5ff);
  border:1px solid #dbeafe;
  color:#475569;
}

/* Salary matrix: stronger table hierarchy inspired by the supplied sample */
.salary-calc-card{border-radius:22px !important}
.salary-calc-table thead th{
  background:linear-gradient(100deg,#123f6b 0%,#0f668a 46%,#10a39a 100%) !important;
  font-size:12px !important;
  padding:15px 16px !important;
}
.salary-calc-table thead th:nth-child(3){background:linear-gradient(100deg,#5b21b6,#8b5cf6) !important}
.salary-calc-table thead th:nth-child(4){background:linear-gradient(100deg,#047857,#10b981) !important}
.salary-calc-table tbody td{background:#fff !important}
.salary-calc-table tbody tr:nth-child(even) td{background:#f4f8fc !important}
.salary-calc-table tbody tr.row-info td{background:linear-gradient(90deg,#f8fbff,#fff) !important}
.salary-calc-table tbody tr.row-income td{background:linear-gradient(90deg,#f0fdf8,#fff) !important}
.salary-calc-table tbody tr.row-deduction td{background:linear-gradient(90deg,#fff7f8,#fff) !important}
.salary-calc-table tbody tr:hover td{background:#edf6ff !important}
.salary-calc-table td:first-child{font-weight:750}
.salary-calc-table td:nth-child(2){background:#f7fbff !important}
.salary-calc-table td:nth-child(3){background:#fbf8ff !important}
.salary-calc-table td:nth-child(4){background:#f3fcf8 !important}
.salary-calc-table .calc-input{
  border:1px solid #c4d1e0 !important;
  background:#fff !important;
  min-height:42px;
  box-shadow:0 4px 12px rgba(15,23,42,.05),inset 0 1px 0 #fff;
}
.salary-calc-table .calc-input:focus{border-color:#7c3aed !important;box-shadow:0 0 0 4px rgba(124,58,237,.12) !important}
.salary-calc-table .not-editable{background:#f1f5f9 !important;color:#64748b !important;border-radius:8px}
.salary-calc-table .applied-value{font-size:14px}
.salary-calc-table .row-total td{background:linear-gradient(100deg,#e9f9f0,#f0fdfa,#eafbf3) !important;padding-top:15px;padding-bottom:15px}

/* Explicit section legend */
.salary-calc-eyebrow{color:#bfdbfe !important}
.salary-calc-header h2{font-size:24px !important}
.salary-calc-net-pill{background:linear-gradient(135deg,rgba(255,255,255,.18),rgba(255,255,255,.08)) !important}

/* Mobile: table scroll stays inside the card; sidebar is replaced by bottom nav */
@media(max-width:900px){
  .admin-sidebar{display:none !important}
  .admin-mobile-header{background:linear-gradient(135deg,rgba(16,47,82,.96),rgba(48,44,96,.94)) !important;color:#fff !important}
  .admin-mobile-title{color:rgba(255,255,255,.72) !important}
  .admin-mobile-brand strong{color:#fff !important}
  .admin-bottom-nav{background:rgba(248,250,252,.88) !important}
  .salary-calc-table-wrap{border-radius:0;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
}

/* Accessibility fallback */
@media(prefers-reduced-transparency:reduce){
  .admin-sidebar,.admin-desktop-header,.admin-mobile-header,.card,.salary-calc-card{backdrop-filter:none !important;-webkit-backdrop-filter:none !important}
}


/* =========================================================
   MMS 2026 NAVIGATION + GRADIENT CONTROL SYSTEM
   Glass is reserved for navigation/controls; content stays crisp.
========================================================= */
@media(min-width:901px){
  .admin-sidebar{overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:rgba(147,197,253,.45) transparent;overscroll-behavior:contain;}
  .admin-sidebar::-webkit-scrollbar{width:7px}.admin-sidebar::-webkit-scrollbar-track{background:transparent}.admin-sidebar::-webkit-scrollbar-thumb{background:linear-gradient(180deg,rgba(96,165,250,.65),rgba(167,139,250,.65));border-radius:999px}
  .admin-menu{gap:7px}.admin-menu a{position:relative;min-height:52px;padding:8px 10px;border:1px solid rgba(255,255,255,.06);border-radius:15px;transition:transform .18s ease,background .18s ease,box-shadow .18s ease,border-color .18s ease}
  .admin-menu a:hover{transform:translateX(2px);background:linear-gradient(100deg,rgba(37,99,235,.30),rgba(124,58,237,.18));border-color:rgba(147,197,253,.22);box-shadow:0 8px 22px rgba(0,0,0,.10)}
  .admin-menu a.active{transform:translateX(2px);background:linear-gradient(100deg,#1479ed 0%,#5b4ff0 52%,#8b5cf6 100%);border-color:rgba(255,255,255,.20);box-shadow:0 10px 26px rgba(37,99,235,.28),inset 0 1px 0 rgba(255,255,255,.22)}
  .admin-menu a.active::after{content:"";width:4px;height:28px;border-radius:999px;background:#fff;position:absolute;right:7px;opacity:.9}
  .admin-menu .menu-icon{width:38px;height:38px;flex-basis:38px;border-radius:12px;box-shadow:0 5px 13px rgba(15,23,42,.08),inset 0 1px 0 rgba(255,255,255,.75)}
  .admin-menu a.active .menu-icon{background:rgba(255,255,255,.96)}.admin-menu-secondary{margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.10)}
}
.btn{min-height:44px;border-radius:13px;background:linear-gradient(135deg,#2563eb 0%,#4f46e5 52%,#7c3aed 100%);border:1px solid rgba(255,255,255,.24);box-shadow:0 9px 22px rgba(79,70,229,.22),inset 0 1px 0 rgba(255,255,255,.20)}
.btn:hover{filter:saturate(1.08) brightness(1.03);box-shadow:0 12px 26px rgba(79,70,229,.27),inset 0 1px 0 rgba(255,255,255,.24)}
.btn.secondary{background:linear-gradient(135deg,#eef6ff,#e9e7ff);color:#274690;border-color:#d8e2f5;box-shadow:0 7px 16px rgba(37,99,235,.10)}
.btn.success{background:linear-gradient(135deg,#10b981,#059669,#047857)}.btn.warning{background:linear-gradient(135deg,#f59e0b,#f97316,#ea580c)}.btn.danger{background:linear-gradient(135deg,#ef4444,#e11d48,#be123c)}
.salary-calc-table thead th:nth-child(1){background:linear-gradient(135deg,#174ea6,#2563eb)}.salary-calc-table thead th:nth-child(2){background:linear-gradient(135deg,#0f766e,#0891b2)}.salary-calc-table thead th:nth-child(3){background:linear-gradient(135deg,#7c3aed,#a855f7)}.salary-calc-table thead th:nth-child(4){background:linear-gradient(135deg,#059669,#16a34a)}
.salary-calc-table tbody tr.row-info td:first-child{background:linear-gradient(90deg,rgba(219,234,254,.72),rgba(255,255,255,.72))}.salary-calc-table tbody tr.row-income td:first-child{background:linear-gradient(90deg,rgba(220,252,231,.82),rgba(255,255,255,.72))}.salary-calc-table tbody tr.row-deduction td:first-child{background:linear-gradient(90deg,rgba(255,228,230,.82),rgba(255,255,255,.72))}
.salary-calc-table .calc-input{border:1px solid #c8d6e5;background:linear-gradient(180deg,#fff,#f8fbff)}.salary-calc-table .calc-input:focus{border-color:#6d5dfc;box-shadow:0 0 0 3px rgba(109,93,252,.14),0 5px 15px rgba(37,99,235,.08)}.salary-calc-table .row-total td{background:linear-gradient(100deg,#e7f8ef,#edf7ff,#f2edff)!important}.salary-calc-footer{background:linear-gradient(90deg,rgba(239,246,255,.90),rgba(245,243,255,.90))}
@media(max-width:900px){.admin-mobile-header{background:linear-gradient(100deg,rgba(16,44,77,.96),rgba(37,99,235,.94),rgba(124,58,237,.92));color:#fff;border-bottom-color:rgba(255,255,255,.16)}.admin-mobile-title{color:rgba(255,255,255,.76)}.admin-mobile-brand strong{color:#fff}.admin-bottom-nav{background:rgba(10,30,53,.90)!important;border-top-color:rgba(255,255,255,.13)!important}.admin-bottom-nav .mobile-tab{color:#b8cbe0}.admin-bottom-nav .mobile-tab.active{color:#fff;background:linear-gradient(135deg,#2563eb,#7c3aed);border-radius:15px;margin:5px 3px}}

/* =========================================================
   MMS NAV v2 — scrollable main menu + gradient pill controls
   Inspired by the supplied two-tone button reference, adapted
   to the existing MMS blue/indigo/teal theme.
========================================================= */
@media(min-width:901px){
  .admin-sidebar{
    height:100vh !important;
    max-height:100vh !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
    display:flex !important;
    flex-direction:column !important;
  }
  .admin-menu-scroll{
    flex:1 1 auto !important;
    min-height:0 !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    padding:2px 5px 12px 2px !important;
    margin-right:-2px !important;
    scrollbar-width:thin;
    scrollbar-color:rgba(125,183,255,.72) transparent;
    overscroll-behavior:contain;
  }
  .admin-menu-scroll::-webkit-scrollbar{width:7px}
  .admin-menu-scroll::-webkit-scrollbar-track{background:transparent}
  .admin-menu-scroll::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#55a7ff,#8b5cf6,#22c7b8);border-radius:999px}
  .admin-sidebar-spacer{display:none !important}

  /* Each menu item becomes a clear icon + gradient label pill. */
  .admin-menu{gap:9px !important}
  .admin-menu a{
    min-height:54px !important;
    padding:0 !important;
    gap:0 !important;
    border:0 !important;
    border-radius:17px !important;
    overflow:hidden !important;
    background:transparent !important;
    box-shadow:none !important;
    transform:none !important;
  }
  .admin-menu a::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:17px;
    background:linear-gradient(100deg,rgba(255,255,255,.075),rgba(255,255,255,.025));
    opacity:1;
    pointer-events:none;
  }
  .admin-menu a:hover::before{background:linear-gradient(100deg,rgba(37,99,235,.35),rgba(124,58,237,.22))}
  .admin-menu a.active::after{display:none !important}
  .admin-menu a > span:last-child{
    position:relative;
    z-index:1;
    flex:1;
    min-width:0;
    height:54px;
    display:flex;
    align-items:center;
    padding:0 16px 0 13px;
    color:#edf6ff;
    font-size:15px;
    font-weight:850;
    letter-spacing:.05px;
    border-radius:0 17px 17px 0;
    background:linear-gradient(100deg,rgba(31,111,218,.22),rgba(81,64,180,.14));
    border:1px solid rgba(255,255,255,.08);
    border-left:0;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
    transition:.18s ease;
  }
  .admin-menu a:hover > span:last-child{background:linear-gradient(100deg,rgba(37,128,242,.62),rgba(124,58,237,.55));}
  .admin-menu a.active > span:last-child{
    color:#fff;
    background:linear-gradient(100deg,#1679ed 0%,#4e57ec 52%,#823df0 100%);
    border-color:rgba(255,255,255,.18);
    box-shadow:0 9px 22px rgba(37,99,235,.24),inset 0 1px 0 rgba(255,255,255,.22);
  }
  .admin-menu .menu-icon{
    position:relative;
    z-index:2;
    width:54px !important;
    height:54px !important;
    flex:0 0 54px !important;
    border-radius:17px 0 0 17px !important;
    box-shadow:0 5px 16px rgba(8,24,44,.16),inset 0 1px 0 rgba(255,255,255,.82) !important;
  }
  .admin-menu .menu-icon svg{width:21px;height:21px;stroke-width:2.15}
  .admin-menu a.active .menu-icon{background:linear-gradient(145deg,#fff,#eef5ff) !important;color:#2563eb !important}
  .admin-menu-secondary{margin-top:15px !important;padding-top:15px !important;border-top:1px solid rgba(255,255,255,.12) !important}
  .admin-menu-label{padding-left:10px !important}
}

/* Branding controls: visible remove actions, compact on mobile. */
.branding-current-box{min-width:0}
.branding-remove-form{margin-top:9px}
.btn-small{min-height:36px !important;padding:7px 11px !important;font-size:11px !important;border-radius:10px !important}
.branding-empty{padding-top:28px}
.branding-signature-row>div{position:relative}

/* Stronger mobile layout: no horizontal overflow, larger touch targets,
   gradient icon tabs and readable cards. */
@media(max-width:900px){
  html,body{max-width:100%;overflow-x:hidden}
  .admin-mobile-header{
    min-height:64px !important;
    padding:9px 14px !important;
    gap:10px;
    background:linear-gradient(105deg,#102f52 0%,#155fc2 52%,#663be0 100%) !important;
  }
  .admin-mobile-brand{min-width:0;flex:1}
  .admin-mobile-brand strong{font-size:14px !important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .admin-mobile-title{font-size:11px !important;white-space:nowrap}
  .admin-bottom-nav{
    left:8px !important;right:8px !important;bottom:8px !important;
    height:68px !important;
    border:1px solid rgba(255,255,255,.16) !important;
    border-radius:20px !important;
    padding:4px !important;
    box-shadow:0 14px 35px rgba(15,23,42,.25),inset 0 1px 0 rgba(255,255,255,.12) !important;
    backdrop-filter:blur(18px) saturate(150%) !important;
    -webkit-backdrop-filter:blur(18px) saturate(150%) !important;
  }
  .admin-bottom-nav .mobile-tab{
    min-height:58px !important;
    border-radius:15px !important;
    gap:3px !important;
    color:#d7e7fa !important;
    font-weight:800 !important;
  }
  .admin-bottom-nav .mobile-tab-icon{
    width:34px !important;height:34px !important;
    border-radius:11px !important;
    display:grid !important;place-items:center !important;
    background:linear-gradient(145deg,#e8f1ff,#dce8ff) !important;
    box-shadow:0 5px 14px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.9) !important;
  }
  .admin-bottom-nav .mobile-tab.active{background:linear-gradient(135deg,#1679ed,#653ce8) !important;color:#fff !important}
  .admin-bottom-nav .mobile-tab.active .mobile-tab-icon{background:#fff !important}
  .mobile-more-panel{z-index:3000 !important}
  .mobile-more-card{border-radius:24px !important;padding:15px !important;max-height:78vh !important;overflow:auto !important;background:rgba(11,34,59,.94) !important;backdrop-filter:blur(24px) saturate(150%) !important;-webkit-backdrop-filter:blur(24px) saturate(150%) !important}
  .mobile-more-card a{min-height:52px !important;border-radius:14px !important;background:linear-gradient(100deg,rgba(37,99,235,.18),rgba(124,58,237,.12)) !important;border:1px solid rgba(255,255,255,.09) !important}
  .admin-body .wrap{padding-left:12px !important;padding-right:12px !important}
  .admin-body .card,.admin-body .glass-panel{border-radius:18px !important;padding:16px !important}
  .form-grid{grid-template-columns:1fr !important}
  .form-grid .full{grid-column:auto !important}
  .branding-preview{width:100% !important;max-width:100% !important;height:auto;min-height:90px}
  .branding-preview img{max-width:100%;max-height:140px}
  .branding-signature-row{display:grid !important;grid-template-columns:1fr !important;gap:10px !important}
  .branding-signature-row>div{min-width:0 !important}
}

@media(max-width:520px){
  .admin-mobile-title{display:none !important}
  .admin-mobile-brand .admin-brand-mark{width:34px !important;height:34px !important}
  .admin-body .head{display:block !important}
  .admin-body .head h1{font-size:24px !important}
  .admin-bottom-nav .mobile-tab{font-size:9.5px !important}
  .admin-bottom-nav .mobile-tab-icon{width:31px !important;height:31px !important}
}

/* Salary / advance ledger and PDF actions */
.salary-pdf-actions{display:flex;justify-content:flex-end;gap:10px;padding:12px 0 2px;flex-wrap:wrap}
.salary-ledger-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:14px 0 18px}
.salary-ledger-summary>div{min-height:82px;padding:16px 18px;border:1px solid rgba(80,110,160,.18);border-radius:16px;background:rgba(255,255,255,.78);box-shadow:0 8px 24px rgba(40,70,120,.09);display:flex;flex-direction:column;justify-content:center}
.salary-ledger-summary small{display:block;font-size:12px;font-weight:800;letter-spacing:.2px;margin-bottom:7px}.salary-ledger-summary strong{font-size:21px;line-height:1.15}
.salary-ledger-summary .ledger-taken{background:linear-gradient(135deg,#eef6ff,#dcecff);border-color:#9fc6ff}
.salary-ledger-summary .ledger-taken small,.salary-ledger-summary .ledger-taken strong{color:#1769d2}
.salary-ledger-summary .ledger-recovered{background:linear-gradient(135deg,#fff1f3,#ffe0e5);border-color:#ff9aae}
.salary-ledger-summary .ledger-recovered small,.salary-ledger-summary .ledger-recovered strong{color:#c62845}
.salary-ledger-summary .ledger-balance{background:linear-gradient(135deg,#eef6ff,#dcecff);border-color:#9fc6ff}
.salary-ledger-summary .ledger-balance small,.salary-ledger-summary .ledger-balance strong{color:#1769d2}
.employee-advance-summary{max-width:1100px;margin:0 auto 16px}
.advance-ledger-card table td,.advance-ledger-card table th{vertical-align:top}
@media(max-width:700px){.salary-pdf-actions{justify-content:stretch}.salary-pdf-actions .btn{width:100%;text-align:center}.salary-ledger-summary{grid-template-columns:1fr}.employee-advance-summary{margin-top:12px}}

/* FINAL ADVANCE LEDGER SUMMARY - clear financial status cards */
.advance-summary-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:18px 0 20px}
.advance-total-box{min-height:112px;padding:18px 20px;border-radius:18px;border:1px solid rgba(20,50,100,.14);display:flex;flex-direction:column;justify-content:center;box-shadow:0 10px 28px rgba(30,55,100,.10);position:relative;overflow:hidden}
.advance-total-box:before{content:"";position:absolute;inset:0 auto 0 0;width:5px;border-radius:18px 0 0 18px}
.advance-total-box span{font-size:13px;font-weight:800;letter-spacing:.2px}
.advance-total-box strong{font-size:27px;line-height:1.15;margin:7px 0 5px}
.advance-total-box small{font-size:12px;opacity:.8}
.advance-total-blue{background:linear-gradient(135deg,#edf5ff,#dbeaff);border-color:#9fc6ff;color:#155fbe}
.advance-total-blue:before{background:#1769d2}
.advance-total-red{background:linear-gradient(135deg,#fff1f3,#ffe0e5);border-color:#ff9aac;color:#bf2342}
.advance-total-red:before{background:#d92d4c}
.advance-total-green{background:linear-gradient(135deg,#edfff5,#d7f7e5);border-color:#8fe0b2;color:#08783f}
.advance-total-green:before{background:#10a45a}
.employee-advance-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:18px 0 20px}
.employee-advance-summary>div{min-height:108px;padding:18px 20px;border-radius:18px;border:1px solid rgba(20,50,100,.14);display:flex;flex-direction:column;justify-content:center;box-shadow:0 10px 28px rgba(30,55,100,.10)}
.employee-advance-summary>div:nth-child(1){background:linear-gradient(135deg,#edf5ff,#dbeaff);border-color:#9fc6ff;color:#155fbe}
.employee-advance-summary>div:nth-child(2){background:linear-gradient(135deg,#fff1f3,#ffe0e5);border-color:#ff9aac;color:#bf2342}
.employee-advance-summary>div:nth-child(3){background:linear-gradient(135deg,#edfff5,#d7f7e5);border-color:#8fe0b2;color:#08783f}
.employee-advance-summary small{font-size:13px;font-weight:800;margin-bottom:7px}
.employee-advance-summary strong{font-size:27px;line-height:1.15}
.advance-ledger-title{display:flex;justify-content:space-between;gap:20px;align-items:flex-start}
.recovery-edit-card{border:1px solid rgba(78,82,220,.28);background:rgba(245,247,255,.82)}
@media(max-width:900px){.advance-summary-grid,.employee-advance-summary{grid-template-columns:1fr}.advance-total-box,.employee-advance-summary>div{min-height:94px}}

/* FINAL-FINAL ADVANCE LEDGER SUMMARY OVERRIDE - 2026-09-10 */
.advance-ledger-card .advance-summary-grid{display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:18px !important;margin:20px 0 24px !important;width:100% !important}
.advance-ledger-card .advance-total-box{box-sizing:border-box !important;display:flex !important;flex-direction:column !important;justify-content:center !important;align-items:flex-start !important;min-height:128px !important;padding:20px 22px !important;border-radius:20px !important;border:1px solid !important;box-shadow:0 10px 30px rgba(20,40,80,.12) !important;position:relative !important;overflow:hidden !important}
.advance-ledger-card .advance-total-box span{display:block !important;font-size:14px !important;font-weight:850 !important;line-height:1.25 !important;margin:0 !important}
.advance-ledger-card .advance-total-box strong{display:block !important;font-size:30px !important;font-weight:900 !important;line-height:1.15 !important;margin:9px 0 6px !important}
.advance-ledger-card .advance-total-box small{display:block !important;font-size:12px !important;line-height:1.35 !important;margin:0 !important}
.advance-ledger-card .advance-total-blue{background:linear-gradient(135deg,#eaf3ff,#d5e7ff) !important;border-color:#8bbcff !important;color:#145fbd !important}
.advance-ledger-card .advance-total-red{background:linear-gradient(135deg,#fff0f3,#ffdce3) !important;border-color:#ff8da3 !important;color:#bd2442 !important}
.advance-ledger-card .advance-total-green{background:linear-gradient(135deg,#eafff2,#d2f6e0) !important;border-color:#7ed9a5 !important;color:#08783f !important}
.advance-ledger-card .advance-total-blue:before{background:#1769d2 !important}
.advance-ledger-card .advance-total-red:before{background:#d92d4c !important}
.advance-ledger-card .advance-total-green:before{background:#10a45a !important}
@media(max-width:900px){.advance-ledger-card .advance-summary-grid{grid-template-columns:1fr !important}.advance-ledger-card .advance-total-box{min-height:105px !important}}


/* =========================================================
   MMS FINAL MOBILE EXPERIENCE — 2026-09-10
   Designed for 320px–768px screens: no accidental page overflow,
   comfortable touch targets, readable forms/cards, and scrollable data tables.
========================================================= */
@media(max-width:900px){
  *{box-sizing:border-box}
  html,body{width:100%;max-width:100%;overflow-x:hidden}
  body.admin-body,body.employee-body{min-width:0;padding-bottom:94px}

  /* Admin */
  .admin-body>.wrap{width:100%;max-width:100%;padding:14px 12px 108px !important;margin:0 !important}
  .admin-body .head{gap:10px;min-width:0}
  .admin-body .head h1{font-size:23px !important;line-height:1.18;overflow-wrap:anywhere}
  .admin-body .head p{font-size:13px;line-height:1.45}
  .admin-body .card,.admin-body .glass-panel,.admin-body .payroll-table-card,.admin-body .payroll-summary,.admin-body .payroll-save-card{width:100%;max-width:100%;min-width:0;padding:14px !important;border-radius:18px !important}
  .admin-body .grid,.admin-body .form-grid{grid-template-columns:1fr !important}
  .admin-body input,.admin-body select,.admin-body textarea{width:100%;max-width:100%;min-width:0;font-size:16px !important}
  .admin-body button,.admin-body .btn{min-height:46px;max-width:100%;touch-action:manipulation}
  .admin-body .actions{width:100%}
  .admin-body .actions .btn,.admin-body .actions button{flex:1 1 150px}

  /* Mobile tables: page stays fixed; only table area scrolls horizontally. */
  .admin-body .table-wrap,.admin-body .payroll-table-wrap,.admin-body .salary-calc-table-wrap,.admin-body .responsive-table{width:100%;max-width:100%;overflow-x:auto !important;overflow-y:hidden !important;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;border-radius:12px}
  .admin-body .table-wrap table,.admin-body .responsive-table table{min-width:720px !important;width:max-content;max-width:none}
  .admin-body .payroll-table{min-width:780px !important;width:max-content}
  .admin-body .salary-calc-table{min-width:760px !important;width:max-content}
  .admin-body th,.admin-body td{white-space:nowrap}
  .admin-body td:last-child,.admin-body th:last-child{white-space:normal}

  /* Advance ledger summary */
  .advance-ledger-card .advance-summary-grid{grid-template-columns:1fr !important;gap:10px !important;margin:14px 0 18px !important}
  .advance-ledger-card .advance-total-box{min-height:94px !important;padding:15px 17px !important;border-radius:16px !important}
  .advance-ledger-card .advance-total-box strong{font-size:25px !important}

  /* Payroll / salary */
  .payroll-page{width:100%;max-width:100%;min-width:0}
  .payroll-page__heading{display:block !important}
  .payroll-page__heading h1{font-size:23px !important;line-height:1.2}
  .payroll-filter{grid-template-columns:1fr !important;padding:12px !important}
  .payroll-filter input,.payroll-filter select{height:46px !important}
  .payroll-filter__button .btn{width:100%;height:46px !important}
  .payroll-rulebar{display:block !important}
  .payroll-rulebar span{display:block;border-right:0;border-bottom:1px solid #d9e8ff}
  .payroll-layout{grid-template-columns:1fr !important;min-width:0}
  .payroll-sidebar{grid-template-columns:1fr !important}
  .salary-calc-header{padding:15px !important}
  .salary-calc-header h2{font-size:19px !important}
  .salary-calc-table{min-width:760px !important}

  /* Mobile fixed nav */
  .admin-bottom-nav,.employee-body .mobile-bottom-nav{left:8px !important;right:8px !important;bottom:8px !important;width:auto !important;max-width:none !important;height:72px !important;border-radius:20px !important;padding:4px !important;z-index:9999 !important}
  .mobile-tab{min-width:0 !important;min-height:62px !important;padding:4px 2px !important}
  .mobile-tab span:last-child{max-width:64px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

  /* Employee mobile header + content */
  .employee-body .nav{display:none !important}
  .employee-mobile-header{position:fixed;display:flex;top:0;left:0;right:0;height:60px;z-index:9998;align-items:center;padding:8px 13px;background:linear-gradient(105deg,#175fca,#4f46e5,#7c3aed);box-shadow:0 5px 18px rgba(25,50,100,.18);color:#fff}
  .employee-mobile-brand{display:flex;align-items:center;gap:9px;min-width:0}
  .employee-mobile-logo{width:38px;height:38px;flex:0 0 38px;border-radius:11px;background:#fff;color:#2563eb;display:grid;place-items:center;font-weight:900;overflow:hidden}
  .employee-mobile-logo img{width:100%;height:100%;object-fit:contain}
  .employee-mobile-brand strong{display:block;font-size:14px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:65vw}
  .employee-mobile-brand small{display:block;font-size:10px;opacity:.82;margin-top:3px}
  .employee-body>.wrap{width:100%;max-width:100%;padding:76px 12px 108px !important;margin:0 !important}
  .employee-body .head h1{font-size:23px !important;line-height:1.2}
  .employee-body .card{width:100%;max-width:100%;min-width:0;padding:14px !important;border-radius:18px !important}
  .employee-body .form-grid{grid-template-columns:1fr !important}
  .employee-body input,.employee-body select,.employee-body textarea{width:100%;max-width:100%;min-width:0;font-size:16px !important}
  .employee-body .btn{min-height:46px;max-width:100%}
  .employee-body .actions .btn{width:100%}
  .employee-body .table-wrap,.employee-body .responsive-table{width:100%;max-width:100%;overflow-x:auto !important;overflow-y:hidden !important;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  .employee-body .table-wrap table,.employee-body .responsive-table table{min-width:720px !important;width:max-content;max-width:none}
  .employee-body th,.employee-body td{white-space:nowrap}
  .employee-body td:last-child,.employee-body th:last-child{white-space:normal}
  .employee-body .employee-advance-summary{grid-template-columns:1fr !important;gap:10px !important;margin:14px 0 18px}
  .employee-body .employee-advance-summary>div{min-height:92px;padding:15px 17px;border-radius:16px}
  .employee-body .employee-advance-summary strong{font-size:25px}

  /* Prevent long labels / URLs from stretching mobile cards. */
  .admin-body .formula,.employee-body .formula,
  .admin-body .alert,.employee-body .alert,
  .admin-body .notice,.employee-body .notice{max-width:100%;overflow-wrap:anywhere}
}

@media(max-width:480px){
  .admin-body>.wrap,.employee-body>.wrap{padding-left:10px !important;padding-right:10px !important}
  .admin-body .card,.admin-body .glass-panel,.employee-body .card{padding:12px !important}
  .admin-mobile-header{padding-left:10px !important;padding-right:10px !important}
  .admin-mobile-brand strong{font-size:13px !important}
  .admin-bottom-nav,.employee-body .mobile-bottom-nav{left:5px !important;right:5px !important;bottom:5px !important;height:70px !important}
  .mobile-tab{font-size:9px !important}
  .mobile-tab-icon{width:30px !important;height:30px !important}
}

@media(max-width:360px){
  .admin-mobile-brand strong{max-width:50vw}
  .mobile-tab{font-size:8.5px !important}
  .mobile-tab-icon{width:28px !important;height:28px !important}
}

/* =========================================================
   FINAL MOBILE MORE MENU CONTRAST + TOUCH FIX
   The glass menu uses a dark surface, so all labels/icons
   must use a light high-contrast foreground.
========================================================= */
@media(max-width:900px){
  .mobile-more-panel{
    background:rgba(2,12,27,.58) !important;
    padding:14px 10px calc(82px + env(safe-area-inset-bottom)) !important;
    align-items:flex-end !important;
  }
  .mobile-more-card{
    color:#f8fbff !important;
    background:linear-gradient(180deg,rgba(11,38,68,.98),rgba(8,27,49,.98)) !important;
    border:1px solid rgba(255,255,255,.18) !important;
    box-shadow:0 24px 70px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.10) !important;
  }
  .mobile-more-head{
    color:#ffffff !important;
    border-bottom-color:rgba(255,255,255,.24) !important;
    padding:10px 10px 14px !important;
  }
  .mobile-more-head strong{
    color:#ffffff !important;
    font-size:15px !important;
    letter-spacing:.1px;
  }
  .mobile-more-close{
    background:#f8fafc !important;
    color:#243b5a !important;
    border:1px solid rgba(255,255,255,.65) !important;
    box-shadow:0 4px 12px rgba(0,0,0,.15) !important;
  }
  .mobile-more-card > a,
  .mobile-more-card > a:visited{
    color:#f7fbff !important;
    background:linear-gradient(100deg,rgba(43,108,220,.28),rgba(118,72,210,.22)) !important;
    border:1px solid rgba(255,255,255,.14) !important;
    text-shadow:0 1px 1px rgba(0,0,0,.20);
  }
  .mobile-more-card > a:hover,
  .mobile-more-card > a:focus,
  .mobile-more-card > a:active{
    color:#ffffff !important;
    background:linear-gradient(100deg,rgba(55,126,242,.42),rgba(130,78,230,.36)) !important;
    border-color:rgba(255,255,255,.24) !important;
  }
  .mobile-more-card > a.danger-link,
  .mobile-more-card > a.danger-link:visited{
    color:#ff8d9b !important;
    border-top-color:rgba(255,255,255,.18) !important;
    background:rgba(220,38,38,.12) !important;
  }
  .mobile-more-card > a.danger-link:hover,
  .mobile-more-card > a.danger-link:active{
    color:#ffd0d5 !important;
    background:rgba(220,38,38,.22) !important;
  }
}


/* FINAL EMPLOYEE LOGO SAFETY FIX */
.employee-body .nav .employee-nav-brand{display:flex!important;align-items:center!important;justify-content:center!important;width:44px!important;height:44px!important;min-width:44px!important;max-width:44px!important;padding:0!important;margin:0 10px 0 0!important;overflow:hidden!important;flex:0 0 44px!important;}
.employee-body .nav .employee-nav-logo{display:block!important;width:42px!important;height:42px!important;max-width:42px!important;max-height:42px!important;min-width:42px!important;min-height:42px!important;object-fit:contain!important;object-position:center!important;}
@media(max-width:900px){.employee-body .nav .employee-nav-brand{display:none!important}.employee-body .employee-mobile-header{display:flex!important}}
@media(min-width:901px){.employee-body .employee-mobile-header{display:none!important}.employee-body .nav .employee-nav-brand{display:flex!important}}


/* MMS final: compact holiday selector + break time */
.holiday-select-all{margin-top:2px}.holiday-all-label{display:inline-flex!important;align-items:center;gap:9px;padding:10px 14px;border:1px solid rgba(37,99,235,.22);border-radius:12px;background:rgba(239,246,255,.9);cursor:pointer}.holiday-all-label input,.holiday-employee-option input{width:18px!important;height:18px!important;min-width:18px!important;margin:0!important;accent-color:#2563eb}.holiday-employee-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:9px;margin-top:8px}.holiday-employee-option{display:flex!important;align-items:center!important;gap:9px!important;min-height:50px;padding:9px 11px!important;margin:0!important;border:1px solid #dfe6f1;border-radius:11px;background:rgba(255,255,255,.78);cursor:pointer;box-sizing:border-box}.holiday-employee-option span{min-width:0;display:flex;flex-direction:column;line-height:1.15}.holiday-employee-option b{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.holiday-employee-option small{font-size:10px;color:#718096;margin-top:3px}.break-balance{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 14px}.break-balance span{padding:10px 13px;border-radius:12px;background:#f5f8ff;border:1px solid #dce6f7;font-size:13px}.break-summary-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.menu-break,.menu-backup{display:grid;place-items:center;font-size:18px;font-weight:800}.recovery-card form{display:flex;gap:12px;align-items:end;flex-wrap:wrap}.recovery-card input[type=file]{max-width:100%;padding:10px}.recovery-card code{background:#eef2ff;padding:2px 5px;border-radius:5px}@media(max-width:900px){.holiday-employee-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.break-summary-grid{grid-template-columns:1fr!important}}@media(max-width:480px){.holiday-employee-grid{grid-template-columns:1fr}.holiday-employee-option{min-height:48px}}
/* =========================================================
   BREAK TIME + IMPORT / EXPORT MENU ICONS
   ========================================================= */

.admin-menu .menu-break,
.admin-menu .menu-backup{
    display:grid;
    place-items:center;
    font-size:0;
}

.admin-menu .menu-break svg,
.admin-menu .menu-backup svg{
    width:19px;
    height:19px;
    fill:none;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
}

/* Break Time icon */
.admin-menu .menu-break{
    color:#d97706;
    background:linear-gradient(135deg,#fff7ed,#fed7aa);
}

/* Import / Export icon */
.admin-menu .menu-backup{
    color:#4338ca;
    background:linear-gradient(135deg,#e0e7ff,#a5b4fc);
}

/* Active tab */
.admin-menu a.active .menu-break,
.admin-menu a.active .menu-backup{
    background:rgba(255,255,255,.96) !important;
}

/* Hover */
.admin-menu a:hover .menu-break,
.admin-menu a:hover .menu-backup{
    transform:translateY(-1px);
    box-shadow:0 5px 12px rgba(15,23,42,.10);
}

/* Mobile safety */
@media(max-width:900px){
    .admin-menu .menu-break svg,
    .admin-menu .menu-backup svg{
        width:18px;
        height:18px;
    }
}