:root{

    --primary:#2563EB;
    --success:#16A34A;
    --warning:#F59E0B;
    --danger:#DC2626;

    --bg:#F4F7FB;
    --card:#FFFFFF;

    --text:#1E293B;
    --sub:#64748B;

    --radius:18px;

    --shadow:
        0 8px 25px rgba(0,0,0,.08);

}

*{

    box-sizing:border-box;

}

body{

    margin:0;

    background:#E5E7EB;

    color:var(--text);

    font-family:
    Inter,
    Arial,
    sans-serif;

    display:flex;

    justify-content:center;

}

.page{

    padding:20px;

    padding-bottom:90px;

}

.card{

    background:var(--card);

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    padding:18px;

    margin-bottom:18px;

}

.title{

    font-size:28px;

    font-weight:700;

}

.subtitle{

    color:var(--sub);

    margin-bottom:6px;

}

.primaryButton{

    width:100%;

    border:none;

    border-radius:14px;

    padding:16px;

    background:var(--primary);

    color:white;

    font-size:17px;

    font-weight:600;

    cursor:pointer;

    transition:
        transform .15s ease,
        box-shadow .15s ease,
        filter .15s ease;

}

.primaryButton:hover:not(:disabled){

    filter:brightness(.96);

    box-shadow:0 8px 18px rgba(37,99,235,.2);

}

.primaryButton:active:not(:disabled){

    transform:translateY(1px) scale(.99);

}

.primaryButton:focus-visible{

    outline:3px solid rgba(37,99,235,.3);

    outline-offset:2px;

}

.quickAction{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

}

.activityList{

    display:grid;

    gap:10px;

}

.activityItem{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:12px;

    padding:10px 0;

    border-bottom:1px solid #E5E7EB;

}

.activityItem:last-child{

    border-bottom:none;

}

.breakSessions{
.timelineRow{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    padding:11px 0;
    border-bottom:1px solid #E5E7EB;
}

.timelineRow span{
    color:#475569;
}

.timelineRow strong{
    white-space:nowrap;
}

    margin-top:8px;

    border-top:1px solid #E5E7EB;

}

.dashboardTimeGrid{

    display:grid;

    grid-template-columns:repeat(3,minmax(0,1fr));

    gap:8px;

    margin-top:14px;

}

.attendanceContext{
    color:#64748B;
    font-size:12px;
    margin:-6px 0 12px;
}

.weeklyOffGrid{
    display:grid;
    grid-template-columns:minmax(86px,1fr) repeat(5,42px);
    align-items:stretch;
    margin-top:8px;
    overflow:hidden;
    border:1px solid #E2E8F0;
    border-radius:8px;
}

.weeklyOffGrid > *{
    min-height:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-right:1px solid #E2E8F0;
    border-bottom:1px solid #E2E8F0;
    font-size:12px;
}

.weeklyOffGrid > :nth-child(6n){
    border-right:0;
}

.weeklyOffGrid .weeklyOffHeader{
    background:#F8FAFC;
    color:#475569;
    font-weight:700;
}

.weeklyOffGrid .weeklyOffDay{
    justify-content:flex-start;
    padding-left:10px;
    color:#334155;
    font-weight:600;
}

.weeklyOffGrid label{
    cursor:pointer;
}

.weeklyOffGrid input{
    width:18px;
    height:18px;
    margin:0;
    accent-color:#2563EB;
}

.dashboardTimeGrid div{

    background:#F8FAFC;

    border:1px solid #E2E8F0;

    border-radius:8px;

    padding:10px;

    text-align:center;

}

.dashboardTimeGrid span,
.dashboardTimeGrid strong{

    display:block;

}

.dashboardTimeGrid span{

    color:#64748B;

    font-size:11px;

}

.dashboardTimeGrid strong{

    margin-top:4px;

    font-size:13px;

}

.reportPrintHeader{

    display:none;

}

.reportShopName{

    font-size:24px;

    font-weight:800;

}

.reportTitle{

    font-size:18px;

    font-weight:700;

    margin-top:4px;

}

.reportGenerated{

    color:#64748B;

    font-size:12px;

    margin-top:4px;

}

@media print{

    @page{
        size:A4;
        margin:16mm;
    }

    body{
        display:block;
        background:#fff;
    }

    .appContainer{
        width:100%;
        max-width:none;
    }

    .page{
        padding:0;
    }

    #appHeader,
    #appBottom,
    .reportFilters,
    .subtitle{
        display:none !important;
    }

    .reportPrintHeader{
        display:block;
        margin-bottom:18px;
        padding-bottom:12px;
        border-bottom:2px solid #1E293B;
    }

    .employee-card{
        break-inside:avoid;
        box-shadow:none;
        border:1px solid #D1D5DB;
        border-radius:8px;
    }

    .card{
        box-shadow:none;
    }

}

.successButton{

    background:var(--success);

}

.warningButton{

    background:var(--warning);

}

.dangerButton{

    background:var(--danger);

}

.input{

    width:100%;

    border:1px solid #DDD;

    border-radius:12px;

    padding:14px;

    font-size:15px;

    margin-top:6px;

}

.listTile{

    display:flex;

    align-items:center;

    justify-content:space-between;

    background:white;

    border-radius:16px;

    padding:16px;

    margin-bottom:12px;

    box-shadow:var(--shadow);

}

.employeeMobileRow{ display:flex; align-items:center; gap:8px; }
.employeeContactActions{ display:inline-flex; gap:6px; }
.employeeContactButton{
    display:inline-flex; align-items:center; justify-content:center;
    width:26px; height:26px; border-radius:50%;
    background:#F1F5F9; color:#334155;
    text-decoration:none;
}
.employeeContactButton .material-symbols-rounded{ font-size:15px; }
.employeeContactButton svg{ width:14px; height:14px; }
.employeeContactButton:hover{ background:#E2E8F0; }
.employeeContactButtonWhatsapp{ background:#DCFCE7; color:#166534; }
.employeeContactButtonWhatsapp:hover{ background:#BBF7D0; }
.listTitle{

    font-size:17px;

    font-weight:600;

}

.listSub{

    color:var(--sub);

    margin-top:5px;

}

.bottomNav{

    position:fixed;

    bottom:0;

    width:100%;

    max-width:480px;

    height:72px;

    background:white;

    display:flex;

    justify-content:space-around;

    align-items:center;

    box-shadow:0 -4px 20px rgba(0,0,0,.08);

    border-top:1px solid #E5E7EB;

}

.bottomNav a{

    text-decoration:none;

    color:#444;
    min-width:64px;
    min-height:52px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:2px;

}

.employeeReportButton{background:#D97706;}
.employeeConsentRow{display:flex;align-items:flex-start;gap:9px;margin-top:12px;line-height:1.4}.employeeConsentRow input{width:18px;height:18px;flex:none;accent-color:var(--primary)}.employeeRequiredConsent{padding:12px;border:1px solid #F59E0B;border-radius:8px;background:#FFFBEB}.employeeEmailResult{font-size:12px;line-height:1.5;margin:-5px 0 16px}.emailResultSent{color:#166534}.emailResultFailed{color:#B45309;background:#FFFBEB;border-radius:7px;padding:9px}
.pendingLeaveNotice{width:100%;border:1px solid #F59E0B;border-left:5px solid #F59E0B;border-radius:10px;background:#FFFBEB;color:#78350F;padding:13px 15px;margin:0 0 18px;display:flex;align-items:center;gap:11px;text-align:left;cursor:pointer}.pendingLeaveNotice[hidden]{display:none}.pendingLeaveNotice>span:nth-child(2){flex:1}.pendingLeaveNotice strong,.pendingLeaveNotice small{display:block}.pendingLeaveNotice small{color:#92400E;margin-top:2px}
/* License already in its grace window is more urgent than a routine approval-pending notice. */
.pendingLeaveNotice.urgentNotice{border-color:#DC2626;border-left-color:#DC2626;background:#FEF2F2;color:#7F1D1D}.pendingLeaveNotice.urgentNotice small{color:#991B1B}.quickAction{position:relative}.quickActionBadge{position:absolute;top:7px;right:8px;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:#DC2626;color:#fff;font-size:11px;line-height:22px;text-align:center}

.bottomNav a .material-symbols-rounded{ font-size:25px; }
.bottomNav a small{ font-size:11px; line-height:1.2; }

.bottomNav a{

    color:#777;

    transition:.2s;

}

.bottomNav a.active{

    color:var(--primary);

    transform:scale(1.15);

}

.appContainer{

    width:100%;

    max-width:480px;

    min-height:100vh;

    background:var(--bg);

    position:relative;

    overflow:hidden;

    box-shadow:0 0 30px rgba(0,0,0,.15);

}

/* ===== Dashboard ===== */

.topbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:24px;

}

.welcome{

    font-size:16px;

    color:var(--sub);

}

.employeeName{

    font-size:28px;

    font-weight:700;

    margin-top:4px;

}

.avatar{

    width:56px;

    height:56px;

    border-radius:50%;

    background:var(--primary);

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

}

.avatar .material-symbols-rounded{

    font-size:32px;

}

.attendanceCard{

    background:white;

    border-radius:18px;

    padding:20px;

    margin-bottom:20px;

    box-shadow:var(--shadow);

}

.smallTitle{

    color:var(--sub);

    margin-bottom:15px;

}

.attendanceButton{

    width:100%;

    border:none;

    border-radius:14px;

    background:var(--primary);

    color:white;

    padding:16px;

    font-size:18px;

    font-weight:600;

}

.summaryGrid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:15px;

    margin-bottom:20px;

}

.summaryCard{

    background:white;

    border-radius:16px;

    padding:20px;

    text-align:center;

    box-shadow:var(--shadow);

}

.count{

    font-size:30px;

    font-weight:bold;

    margin-bottom:8px;

}

.quickActions{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:15px;

}

.quickActions button{

    border:none;

    background:white;

    border-radius:16px;

    padding:18px;

    font-size:15px;

    font-weight:600;

    box-shadow:var(--shadow);

    cursor:pointer;

}

/* ===== DigiBillMate Header ===== */

.hero{

    background:#2563EB;

    color:#fff;

    padding:14px 18px;

    min-height:86px;

    display:flex;

    align-items:center;

    box-shadow:0 3px 12px rgba(37,99,235,.18);

}

.hero-top{

    width:100%;

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.hero-left{

    display:flex;

    align-items:center;

    gap:14px;

}

.hero-logo{

    width:52px;

    height:52px;

    border-radius:14px;

    background:#fff;

    padding:4px;

    object-fit:contain;

    flex-shrink:0;

}

.hero-title{

    font-size:17px;

    font-weight:700;

    line-height:1.2;

}

.hero-subtitle{

    margin-top:2px;

    font-size:13px;

    color:rgba(255,255,255,.85);

}

.hero-back{

    position:absolute;

    top:18px;

    right:72px;

}

.hero-actions{

    display:flex;

    align-items:center;

    gap:10px;

}
.hero-icon-btn{

    width:44px;

    height:44px;

    border:none;

    border-radius:12px;

    background:rgba(255,255,255,.15);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    transition:.2s;

}


/* ---------- Touch Feedback ---------- */

button,
.primaryButton,
.listTile,
.summaryCard,
.bottomNav a,
.hero-icon-btn{

    transition:
        transform .15s ease,
        opacity .15s ease,
        box-shadow .15s ease;

    -webkit-tap-highlight-color:transparent;

}

button:active,
.primaryButton:active,
.listTile:active,
.summaryCard:active,
.bottomNav a:active,
.hero-icon-btn:hover{

    background:rgba(255,255,255,.22);

}

.hero-icon-btn:active{

    transform:scale(.95);

}

.hero-icon-btn .material-symbols-rounded{

    font-size:30px;

}

button:hover,
.listTile:hover,
.summaryCard:hover{

    box-shadow:
        0 12px 24px rgba(37,99,235,.15);

}

.bottomNav a.active{

    color:var(--primary);

}

.bottomNav a.active .material-symbols-rounded{

    transform:scale(1.15);

}

.bottomNav a{

    transition:.2s;

}

.workforceTab{
    width:100%;
    min-height:136px;
    border:2px solid transparent;
    color:var(--text);
    font:inherit;
    cursor:pointer;
}

.workforceTab.active{
    border-color:var(--primary);
    box-shadow:0 8px 20px rgba(37,99,235,.16);
}
.splitCount{ display:flex; justify-content:center; gap:8px; }

.workforcePanel{ margin-bottom:20px; }
.workforcePanelHeader,
.workforceRowHeader{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
}
.workforceMeta{ color:#64748B; font-size:13px; margin-top:3px; }
.workforceList{ margin-top:14px; }
.workforceRow{ padding:14px 0; border-top:1px solid #E5E7EB; }
.workforceRow:first-child{ border-top:0; padding-top:0; }
.workforceRow:last-child{ padding-bottom:0; }
.workforceRowHeader strong,
.workforceRowHeader small{ display:block; }
.workforceRowHeader small{ color:#64748B; margin-top:2px; }
.workforceBadge{
    flex:none;
    padding:4px 8px;
    border-radius:6px;
    background:#F1F5F9;
    color:#475569;
    font-size:11px;
    font-weight:700;
}
.status-present{ background:#DCFCE7; color:#166534; }
.status-on_leave{ background:#FEF3C7; color:#92400E; }
.status-absent{ background:#FEE2E2; color:#991B1B; }
.status-pending{ background:#DBEAFE; color:#1E40AF; }
.workforceDetails{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:6px 12px;
    margin-top:10px;
    color:#475569;
    font-size:13px;
}
.workforceDetails span{ overflow-wrap:anywhere; }
.workforceEmpty{ color:#64748B; padding:8px 0; }
.workforceActions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-top:12px;
}
.workforceActions button{
    min-height:40px;
    border-radius:8px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:5px;
    font:inherit;
    font-weight:700;
    cursor:pointer;
}
.workforceActions .material-symbols-rounded{ font-size:20px; }
.workforceApprove{ border:1px solid #16A34A; background:#DCFCE7; color:#166534; }
.workforceReject{ border:1px solid #DC2626; background:#FEE2E2; color:#991B1B; }
.workforceActions button:disabled{ opacity:.55; cursor:not-allowed; }
/* The toggle deliberately reads as a quiet text link, not a button: it doesn't
   do anything by itself, it opens a menu of pill actions that do. Giving it
   the same bordered-pill weight as those actions made it look like one more
   thing to tap rather than the door to the (rarely needed) correction tool. */
.workforceFix{ margin-top:10px; }
.workforceFixToggle{
    display:inline-flex; align-items:center; gap:4px;
    width:auto; min-height:0; padding:2px 0; border:0; background:none;
    color:#64748B; font:inherit; font-size:12px; font-weight:600; cursor:pointer;
    text-decoration:underline; text-decoration-color:#CBD5E1; text-underline-offset:3px;
}
.workforceFixToggle .material-symbols-rounded{ font-size:15px; }
.workforceFixMenu{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.workforceFixMenu small{ display:block; width:100%; color:#64748B; }
.workforceFixAction{
    min-height:0; padding:6px 11px; border-radius:999px; border:1px solid #93C5FD;
    background:#EFF6FF; color:#1D4ED8; font:inherit; font-size:12px; font-weight:700; cursor:pointer;
}
.workforceFixAction:disabled{ opacity:.55; cursor:not-allowed; }
.workforceFixDanger{ border-color:#FCA5A5; background:#FEF2F2; color:#B91C1C; }
.attendanceTimeEditor{
    width:100%; margin-top:8px; padding:10px; border:1px solid #BFDBFE;
    border-radius:10px; background:#F8FAFC;
    display:flex; flex-wrap:wrap; gap:8px;
    /* The parent fix menu is itself a stretching flex container, so without
       these the wrapped rows absorb its full height and the form balloons. */
    align-items:flex-start; align-content:flex-start; align-self:flex-start;
}
.attendanceTimeEditor label{
    display:flex; flex-direction:column; gap:4px; flex:1 1 140px;
    font-size:12px; font-weight:700; color:#334155;
    /* Time inputs render their own clock affordance; below this they clip. */
    min-width:130px;
}
.attendanceTimeEditor input{
    padding:8px; border:1px solid #CBD5E1; border-radius:8px;
    font:inherit; font-size:14px; background:#FFF; color:#0F172A;
}
.attendanceTimeEditor small{ width:100%; color:#64748B; }
.attendanceTimeEditorActions{ display:flex; gap:6px; width:100%; align-items:center; }
.workforceNeedsReviewHint{ display:block; margin-top:4px; color:#B45309; font-weight:700; }
/* display:block above has the same specificity as the browser's own
   [hidden]{display:none} rule, and wins since it's the later, author rule -
   so setting the hidden PROPERTY in JS had no visible effect. This explicit,
   higher-specificity override is what actually hides it. */
.workforceNeedsReviewHint[hidden]{ display:none; }

.supportSection{ margin:22px 0; }
.supportActions{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    margin-top:10px;
}
.supportAction{
    min-height:92px;
    padding:12px 8px;
    border:1px solid #DCE5F2;
    border-radius:8px;
    background:#fff;
    color:#1E293B;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    text-align:center;
    text-decoration:none;
    box-shadow:0 4px 14px rgba(15,23,42,.05);
}
.supportAction .material-symbols-rounded{ color:var(--primary); font-size:25px; }
.supportAction > span:nth-child(2){ font-weight:700; font-size:14px; }
.supportAction small{ color:#64748B; font-size:10px; overflow-wrap:anywhere; }
.supportAction:hover{ border-color:var(--primary); box-shadow:0 8px 18px rgba(37,99,235,.12); }
.supportAction:active{ transform:scale(.98); }

/* ===== Responsive application shell ===== */
@media (min-width:768px) {
    body{
        align-items:flex-start;
        padding:18px;
    }

    .appContainer{
        max-width:1180px;
        border-radius:8px;
        overflow:visible;
    }

    .page{
        width:100%;
        max-width:none;
        margin:0;
        padding:28px 32px 96px;
    }

    .hero{
        padding:16px 28px;
        border-radius:8px 8px 0 0;
    }

    .bottomNav{
        left:50%;
        transform:translateX(-50%);
        width:calc(100% - 36px);
        max-width:1180px;
        border-radius:8px 8px 0 0;
    }

    .summaryGrid{
        grid-template-columns:repeat(4,minmax(0,1fr));
    }

    #employeeList,
    #attendanceList,
    #leaveList,
    #holidayList{
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:16px;
        align-items:start;
    }

    #employeeList .employee-card,
    #attendanceList .employee-card,
    #leaveList .employee-card,
    #holidayList .listTile{
        height:100%;
        margin-bottom:0;
    }

    .supportActions{
        grid-template-columns:repeat(4,minmax(0,1fr));
    }

    .authContainer{
        max-width:620px;
    }
}

@media (min-width:1100px) {
    .page{
        padding-left:40px;
        padding-right:40px;
    }

    .topbar{
        margin-bottom:28px;
    }

    .employeeName{
        font-size:30px;
    }

    .card{
        padding:22px;
    }

    .summaryCard{
        min-height:126px;
        display:flex;
        flex-direction:column;
        justify-content:center;
    }
}

/* ===== Platform Administration ===== */
.adminContainer{ max-width:1280px; }
.adminHeader{ background:#0F172A;color:#fff;padding:22px 28px;display:flex;justify-content:space-between;align-items:center;gap:18px; }
.adminHeader small{color:#93C5FD;font-weight:700}.adminHeader h1{font-size:26px;margin:4px 0}.adminHeader p{color:#CBD5E1;margin:0;font-size:13px}
.adminLogout,.adminCompact{width:auto;display:inline-flex;align-items:center;justify-content:center;gap:6px}.adminLogout{border:1px solid #475569;border-radius:8px;background:#1E293B;color:#fff;padding:10px 14px;font-weight:700;cursor:pointer}
.adminStats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:22px}.adminStats div{background:#fff;border:1px solid #E2E8F0;border-radius:8px;padding:18px}.adminStats strong,.adminStats span{display:block}.adminStats strong{font-size:28px}.adminStats span{color:#64748B;margin-top:5px}
.adminSection{background:#fff;border:1px solid #E2E8F0;border-radius:8px;padding:22px}.adminSectionHead{display:flex;justify-content:space-between;align-items:center;gap:16px}.adminSectionHead h2{font-size:20px}.adminSectionHead p{color:#64748B;margin-top:4px}.adminSection .input[type="search"]{margin:18px 0}
.adminShopList{display:grid;gap:14px}.adminShop{--shop-hue:210;border:1px solid hsl(var(--shop-hue) 55% 85%);border-left:5px solid hsl(var(--shop-hue) 65% 45%);border-radius:10px;padding:16px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:16px;background:hsl(var(--shop-hue) 60% 99%);box-shadow:0 1px 3px rgba(15,23,42,.06)}.adminShop h3{font-size:17px}.adminShop p{color:#64748B;font-size:13px;margin-top:5px}.adminShopInfo{display:flex;align-items:flex-start;gap:12px}.adminShopAvatar{flex-shrink:0;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;background:hsl(var(--shop-hue) 65% 90%);color:hsl(var(--shop-hue) 65% 28%)}.adminShopActions{display:flex;align-items:center;gap:10px}.licenseBadge{border-radius:6px;padding:5px 8px;font-size:11px;font-weight:800}.license-active{background:#DCFCE7;color:#166534}.license-grace{background:#FEF3C7;color:#92400E}.license-locked,.license-expired,.license-missing{background:#FEE2E2;color:#991B1B}
.adminAccounts{grid-column:1/-1;border-top:1px dashed hsl(var(--shop-hue) 55% 80%);padding-top:12px;margin-top:2px;display:grid;gap:8px}.adminAccount{display:flex;justify-content:space-between;align-items:center;gap:12px;background:hsl(var(--shop-hue) 65% 95%);border:1px solid hsl(var(--shop-hue) 55% 88%);border-radius:8px;padding:10px 12px}.adminAccount strong,.adminAccount span{display:block}.adminAccount span{color:#64748B;font-size:12px;margin-top:3px}.accountSecurityActions{display:grid;gap:10px}.securityNote{font-size:12px;line-height:1.5;margin:14px 0!important}
.adminDangerZone{margin-top:18px;padding-top:16px;border-top:1px solid #FCA5A5}.adminDangerZone h3{color:#991B1B;font-size:14px}.adminDangerZone p{color:#7F1D1D;font-size:12px;margin:6px 0 12px;line-height:1.5}
.adminTabs{display:flex;gap:6px;margin-bottom:20px;border-bottom:1px solid #CBD5E1}.adminTab{border:0;background:transparent;color:#64748B;padding:11px 18px;font-weight:700;cursor:pointer;border-bottom:3px solid transparent}.adminTab.active{color:#2563EB;border-bottom-color:#2563EB}.adminReportStats{margin-bottom:18px}.adminStorageSection{margin-bottom:18px}.adminStorageGrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:18px}.adminStorageGrid div{background:#F8FAFC;border:1px solid #E2E8F0;border-radius:8px;padding:14px}.adminStorageGrid span,.adminStorageGrid strong{display:block}.adminStorageGrid span{color:#64748B;font-size:12px}.adminStorageGrid strong{font-size:20px;margin-top:5px}.storageProgress{height:10px;background:#E2E8F0;border-radius:999px;overflow:hidden;margin-top:14px}.storageProgress span{display:block;height:100%;width:0;background:#2563EB;transition:width .25s ease}.storageProgress span.storageWarning{background:#DC2626}.adminNotice{background:#FFF7ED;color:#9A3412;border:1px solid #FED7AA;border-radius:8px;padding:12px;margin-top:14px;font-size:13px}.adminStorageDetails{margin-top:16px}.adminStorageDetails summary{cursor:pointer;color:#475569;font-weight:700}.storageTableList{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:12px}.storageTableList div{display:flex;justify-content:space-between;gap:12px;background:#F8FAFC;border-radius:6px;padding:9px 11px;font-size:13px}.adminReportFilters{display:grid;grid-template-columns:minmax(260px,1fr) 190px 190px;gap:10px;margin:18px 0}.adminReportTableWrap{overflow:auto;border:1px solid #E2E8F0;border-radius:8px}.adminReportTable{width:100%;border-collapse:collapse;min-width:940px}.adminReportTable th,.adminReportTable td{text-align:left;padding:12px;border-bottom:1px solid #E2E8F0;font-size:13px}.adminReportTable th{background:#F8FAFC;color:#475569;font-size:11px;text-transform:uppercase;letter-spacing:.03em}.adminReportTable tbody tr:last-child td{border-bottom:0}.adminReportTable tbody tr:hover{background:#F8FAFC}.adminReportCount{color:#64748B;font-size:13px;margin:12px 0 0}.adminEmpty{text-align:center!important;color:#64748B;padding:30px!important}
.adminDialog{width:min(520px,calc(100% - 28px));border:0;border-radius:8px;padding:24px;color:#1E293B}.adminDialog::backdrop{background:rgba(15,23,42,.68)}.adminDialog h2{margin-bottom:5px}.adminDialog p{color:#64748B;margin-bottom:16px}.adminDialog label{display:block;margin-top:14px;font-weight:600;font-size:13px}.dialogActions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}.adminSecondary{background:#64748B}
.adminManageDialog{width:min(850px,calc(100% - 28px));max-width:850px;max-height:90vh;overflow:auto}.adminManageGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.adminManageGrid section{border:1px solid #E2E8F0;border-radius:8px;padding:16px}.adminManageGrid h3{margin:0;color:#334155}.adminCheckRow{display:flex!important;align-items:center;gap:8px}.adminCheckRow input{width:18px;height:18px;accent-color:#2563EB}.adminEmailUsage{display:grid;gap:6px;background:#F8FAFC;border-radius:7px;padding:11px;margin-top:14px;font-size:12px;color:#64748B}.adminEmailUsage span{display:flex;justify-content:space-between;gap:12px}.adminEmailUsage strong{color:#1E293B;text-align:right}
.licenseSummary{background:#fff;border:1px solid #DCE5F2;border-left:4px solid #2563EB;border-radius:8px;padding:14px 16px;margin-bottom:18px;display:flex;justify-content:space-between;gap:14px;align-items:center}.licenseSummary strong,.licenseSummary span{display:block}.licenseSummary span{color:#64748B;font-size:13px;margin-top:3px}
@media(max-width:767px){.adminHeader{padding:18px}.adminHeader h1{font-size:20px}.adminLogout{font-size:0}.adminLogout span{font-size:22px}.adminStats,.adminStorageGrid{grid-template-columns:repeat(2,1fr)}.adminSection{padding:16px}.adminSectionHead,.adminShop{align-items:flex-start}.adminSectionHead{flex-direction:column}.adminShopActions{flex-direction:column;align-items:flex-end}.adminShop{padding:14px}.adminCompact{padding:10px 12px;font-size:13px}.adminReportFilters{grid-template-columns:1fr}.storageTableList{grid-template-columns:1fr}.adminManageGrid{grid-template-columns:1fr}}

/* Payroll */
.payrollHeader,.payrollSectionHead{display:flex;justify-content:space-between;align-items:center;gap:16px}.payrollHeader{margin-bottom:18px}.payrollHeader label{min-width:190px;font-size:12px;color:#64748B}.payrollHeader .input{margin-top:5px}.payrollSummary .count,.payrollReportSummary .count{font-size:24px}.payrollTabs{display:flex;gap:6px;border-bottom:1px solid #E2E8F0;margin:4px 0 18px;overflow:auto}.payrollTab{border:0;background:transparent;padding:12px 16px;color:#64748B;font-weight:700;white-space:nowrap;border-bottom:3px solid transparent;cursor:pointer}.payrollTab.active{color:#2563EB;border-bottom-color:#2563EB}.payrollSectionHead{margin-bottom:16px}.payrollSectionHead .primaryButton{width:auto}.payrollHeaderActions{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap}.payrollGenerateButton{min-width:190px;display:inline-flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap}.payrollGenerateButton .material-symbols-rounded{font-size:22px}.payrollEmailSummary{display:flex;gap:16px;align-items:center;flex-wrap:wrap;background:#EFF6FF;border:1px solid #BFDBFE;color:#1E3A8A;border-radius:8px;padding:11px 13px;margin-bottom:14px}.payrollTableWrap{overflow:auto}.payrollTable{width:100%;border-collapse:collapse;min-width:1370px}.payrollTable th,.payrollTable td{text-align:left;padding:11px 10px;border-bottom:1px solid #E2E8F0;font-size:12px}.payrollTable th{background:#F8FAFC;color:#64748B;text-transform:uppercase;font-size:10px}.payrollTable td small{display:block;color:#64748B;margin-top:3px}.payrollStatus,.payrollEmailStatus{display:inline-block;padding:4px 7px;border-radius:6px;font-size:10px;font-weight:800}.payrollStatus.status-paid,.payrollEmailStatus.email-sent{background:#DCFCE7;color:#166534}.payrollStatus.status-generated,.payrollEmailStatus.email-pending{background:#DBEAFE;color:#1E40AF}.payrollStatus.status-not_generated{background:#F1F5F9;color:#475569}.payrollEmailStatus.email-failed{background:#FEE2E2;color:#991B1B}.payrollReviewButton{border:1px solid #CBD5E1;background:#fff;border-radius:7px;padding:7px 9px;color:#1D4ED8;font-weight:700;cursor:pointer}.payrollTwoColumn{display:grid;grid-template-columns:minmax(280px,.8fr) minmax(360px,1.2fr);gap:18px}.payrollTwoColumn label,.payrollDialog label{display:block;margin-top:14px;font-size:13px;font-weight:600}.payrollTwoColumn .input,.payrollDialog .input{margin-top:6px}.advanceList{display:grid;gap:9px;margin-top:14px}.advanceRow{display:flex;justify-content:space-between;align-items:center;gap:16px;background:#F8FAFC;border:1px solid #E2E8F0;border-radius:8px;padding:12px}.advanceRow strong,.advanceRow span{display:block}.advanceRow span{font-size:12px;color:#64748B;margin-top:4px}.advanceRow>div:last-child{text-align:right}.payrollDialog{position:fixed;inset:0;margin:auto;width:min(620px,calc(100% - 28px));max-width:620px;max-height:min(88vh,780px);overflow:auto;padding:24px}.payrollDialog form{min-width:0}.payrollBreakdown{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:14px 0}.payrollBreakdown div{display:flex;justify-content:space-between;gap:8px;background:#F8FAFC;padding:9px;border-radius:7px;font-size:12px}.payrollBreakdown strong{text-align:right}.payrollDialog small{display:block;color:#64748B;margin-top:4px}.payrollDialog .input:disabled{background:#F1F5F9;color:#64748B;cursor:not-allowed}.payrollNet{display:flex;justify-content:space-between;align-items:center;background:#EFF6FF;color:#1E3A8A;border-radius:8px;padding:14px;margin-top:16px}.payrollNet strong{font-size:22px}.payrollDialogActions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.payrollDialogActions .primaryButton{width:100%;min-height:52px;padding:12px;font-size:15px}.payrollResetButton{background:#D97706}.payrollEmailButton{background:#7C3AED;display:flex;align-items:center;justify-content:center;gap:6px}.payrollEmailButton:disabled{opacity:.55;cursor:not-allowed}.payrollCloseButton{grid-column:1/-1}
.payrollSummaryCard{text-align:center}.payrollSummaryCard:focus-visible{outline:3px solid rgba(37,99,235,.28);outline-offset:2px}.payrollOverviewPanel{margin-bottom:18px}.payrollOverviewPanel .advanceList{margin-top:14px}.payrollOverviewPanel .workforcePanelHeader>.material-symbols-rounded{color:var(--primary);font-size:28px}
.payrollInactiveBadge{display:inline-block;margin-left:6px;padding:2px 7px;border-radius:6px;font-size:10px;font-weight:800;background:#FEF3C7;color:#92400E;vertical-align:middle}
.payrollCalendarPanel{margin-bottom:18px}.payrollCalendarPanel .workforcePanelHeader>.material-symbols-rounded{color:var(--primary);font-size:28px}.payrollCalendarStats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:14px}.payrollCalendarStat{background:#F8FAFC;border:1px solid #E2E8F0;border-radius:8px;padding:12px}.payrollCalendarStat strong{display:block;font-size:24px;line-height:1.1;color:#0F172A}.payrollCalendarStat span{display:block;font-size:12px;font-weight:700;color:#334155;margin-top:4px}.payrollCalendarStat small{display:block;font-size:11px;color:#64748B;margin-top:3px}
@media(max-width:767px){.payrollCalendarStats{grid-template-columns:repeat(2,minmax(0,1fr))}.payrollCalendarStat strong{font-size:20px}}
@media(max-width:767px){.payrollHeader,.payrollSectionHead{align-items:stretch;flex-direction:column}.payrollHeader label{min-width:0}.payrollHeaderActions{display:grid;grid-template-columns:1fr}.payrollSectionHead .primaryButton{width:100%}.payrollTwoColumn{grid-template-columns:1fr}.payrollBreakdown{grid-template-columns:1fr}.advanceRow{align-items:flex-start}.payrollSummary,.payrollReportSummary{grid-template-columns:repeat(2,minmax(0,1fr))}.payrollSummary .count,.payrollReportSummary .count{font-size:19px}}

/* Read-only shop email service status. Platform administrators own these controls. */
.emailSettingsHelp{color:#64748B;font-size:13px;margin:6px 0 16px}.emailSettingsGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.emailSettingsGrid>div{display:flex;justify-content:space-between;gap:12px;background:#F8FAFC;border:1px solid #E2E8F0;border-radius:8px;padding:12px}.emailSettingsGrid span{color:#64748B;font-size:12px}.emailSettingsGrid strong{color:#0F172A;font-size:12px;text-align:right;overflow-wrap:anywhere}.emailConnectionStatus{display:inline-block;padding:3px 7px;border-radius:999px}.email-connection-configured{background:#DCFCE7;color:#166534!important}.email-connection-not_configured{background:#FEF3C7;color:#92400E!important}.email-connection-disabled{background:#F1F5F9;color:#475569!important}
@media(max-width:767px){.emailSettingsGrid{grid-template-columns:1fr}}
.workforceOverviewHeader{
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:16px;
    margin:4px 0 16px;
}

.dashboardDateField{min-width:180px;margin:0;}
.dashboardDateField span{display:block;font-size:13px;color:#64748B;margin-bottom:5px;}
.dashboardDateField .input{margin:0;}

@media(max-width:600px){
    .workforceOverviewHeader{align-items:stretch;flex-direction:column;gap:10px;}
    .dashboardDateField{min-width:0;width:100%;}
}

/* Interactive employee records and compact workforce cards */
.employeeRecord{cursor:pointer;border:1px solid transparent;}
.employeeRecord:hover,.employeeRecord:focus-visible{border-color:#93C5FD;transform:translateY(-2px);outline:none;}
.employeeRecord:active{transform:scale(.985);background:#EFF6FF;box-shadow:0 4px 12px rgba(37,99,235,.18);}
.pageBackButton{width:46px;height:46px;border:0;border-radius:12px;display:grid;place-items:center;background:#EFF6FF;color:#2563EB;cursor:pointer;}
.pageBackButton:hover,.pageBackButton:focus-visible{background:#DBEAFE;outline:3px solid rgba(37,99,235,.18);}
.workforceExpandAll{border:1px solid #BFDBFE;background:#EFF6FF;color:#1D4ED8;border-radius:8px;padding:8px 11px;font:inherit;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap;}
.workforceRow{padding:0;border-top:1px solid #E5E7EB;}
.workforceRow:first-child{border-top:0;}
.workforceRowHeader.workforceRowToggle{width:100%;padding:14px 0;border:0;background:transparent;color:inherit;text-align:left;cursor:pointer;}
.workforceRowHeader.workforceRowToggle:hover{box-shadow:none;color:#1D4ED8;}
.workforceRowHeader.workforceRowToggle:focus-visible{outline:3px solid rgba(37,99,235,.22);outline-offset:3px;border-radius:6px;}
.workforceChevron{transition:transform .18s ease;color:#64748B;}
.workforceRow.expanded .workforceChevron{transform:rotate(180deg);}
.workforceDetailWrap{display:none;padding:0 0 14px;}
.workforceRow.expanded .workforceDetailWrap{display:block;}

/* Owner-friendly expandable payroll cards */
.payrollEmployeeList{display:grid;gap:10px;}
.payrollEmployeeCard{border:1px solid #E2E8F0;border-radius:12px;background:#fff;overflow:hidden;transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease;}
.payrollEmployeeCard:hover{border-color:#93C5FD;box-shadow:0 8px 20px rgba(37,99,235,.10);}
.payrollEmployeeToggle{width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:16px;padding:15px;border:0;background:#fff;color:#0F172A;text-align:left;cursor:pointer;}
.payrollEmployeeToggle:hover{box-shadow:none;background:#F8FAFC;}
.payrollEmployeeToggle:active{transform:scale(.995);background:#EFF6FF;}
.payrollEmployeeToggle:focus-visible{outline:3px solid rgba(37,99,235,.25);outline-offset:-3px;}
.payrollEmployeeToggle strong,.payrollEmployeeToggle small{display:block;}
.payrollEmployeeToggle small{color:#64748B;margin-top:4px;font-size:12px;}
.payrollEmployeeAmount{text-align:right;}
.payrollCardChevron{color:#64748B;transition:transform .18s ease;}
.payrollEmployeeDetails{display:none;border-top:1px solid #E2E8F0;padding:0 15px 15px;background:#FCFDFE;}
.payrollEmployeeCard.expanded .payrollEmployeeDetails{display:block;}
.payrollEmployeeCard.expanded .payrollCardChevron{transform:rotate(180deg);}
.payrollCardFooter{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.payrollRecoveryHelp{color:#92400E!important;background:#FFFBEB;border-radius:7px;padding:8px 10px;margin-top:8px!important;}
@media(max-width:600px){.payrollEmployeeToggle{grid-template-columns:minmax(0,1fr) auto;}.payrollEmployeeAmount{grid-row:2;text-align:left}.payrollCardChevron{grid-column:2;grid-row:1/3}.payrollCardFooter{align-items:stretch;flex-direction:column}.payrollHeaderActions{grid-template-columns:1fr!important}.payrollGenerateButton{width:100%;}}

/* Payroll action and export layout */
.payrollSectionHead{align-items:flex-start;}
.payrollHeaderActions{display:grid;grid-template-columns:repeat(3,minmax(155px,1fr));width:min(100%,690px);gap:10px;}
.payrollHeaderActions .payrollGenerateButton{width:100%;min-width:0;margin:0;}
.payrollExportBar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 14px;margin:4px 0 14px;border:1px solid #DBEAFE;border-radius:10px;background:#F8FAFC;}
.payrollExportBar strong,.payrollExportBar small{display:block;}
.payrollExportBar small{color:#64748B;margin-top:3px;}
.payrollExportBar>div:last-child{display:flex;gap:8px;}
.payrollExportBar .primaryButton{width:auto;min-width:100px;margin:0;display:inline-flex;align-items:center;justify-content:center;gap:6px;}
@media(max-width:900px){.payrollSectionHead{flex-direction:column}.payrollHeaderActions{width:100%;grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:600px){.payrollHeaderActions{grid-template-columns:1fr}.payrollExportBar{align-items:stretch;flex-direction:column}.payrollExportBar>div:last-child{display:grid;grid-template-columns:1fr 1fr}.payrollExportBar .primaryButton{width:100%;min-width:0}}

/* Payroll email monitoring */
.payrollMailTableWrap{overflow:auto;}
.payrollMailTable{width:100%;border-collapse:collapse;min-width:920px;}
.payrollMailTable th,.payrollMailTable td{padding:11px 10px;border-bottom:1px solid #E2E8F0;text-align:left;font-size:12px;vertical-align:top;}
.payrollMailTable th{background:#F8FAFC;color:#475569;font-size:10px;text-transform:uppercase;letter-spacing:.03em;}
.payrollMailTable tbody tr{transition:background .15s ease;}
.payrollMailTable tbody tr:hover{background:#EFF6FF;}
.payrollMailDetail{max-width:260px;white-space:normal;overflow-wrap:anywhere;color:#475569;}

/* Clear, distinct payroll action colours without warning colours. */
.payrollResetButton{background:#0F766E;}
.payrollUnpaidButton{background:#475569;}
.payrollExpandButton{background:#64748B;}
.payrollExportCsvButton{background:#0E7490;}
.payrollExportPdfButton{background:#4F46E5;}

/* Attendance approval: clear owner review cards. */
.attendanceApprovalIntro{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin:0 0 18px;}.attendanceApprovalIntro p{margin:5px 0 0;color:#64748B;font-size:13px;max-width:650px;}.attendanceApprovalCount,.attendanceApprovalStatus{display:inline-flex;align-items:center;white-space:nowrap;border-radius:999px;font-size:12px;font-weight:800;}.attendanceApprovalCount{padding:7px 10px;background:#FEF3C7;color:#92400E;}.attendanceApprovalList{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;}.attendanceApprovalCard{background:#fff;border:1px solid #E2E8F0;border-radius:14px;padding:18px;box-shadow:0 10px 24px rgba(15,23,42,.06);}.attendanceApprovalCardHead{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;}.attendanceApprovalCardHead strong,.attendanceApprovalCardHead span{display:block;}.attendanceApprovalCardHead strong{font-size:18px;color:#0F172A;}.attendanceApprovalCardHead>div>span{color:#64748B;font-size:13px;margin-top:4px;}.attendanceApprovalStatus{padding:5px 8px;background:#FEF3C7;color:#92400E;}.attendanceApprovalDetails{display:grid;gap:9px;margin:16px 0;color:#475569;font-size:13px;}.attendanceApprovalDetails>div{display:flex;gap:8px;align-items:flex-start;}.attendanceApprovalDetails .material-symbols-rounded{font-size:18px;color:#2563EB;}.attendanceApprovalHours{display:block;margin:0 0 14px;font-size:13px;font-weight:700;color:#0F172A;}.attendanceApprovalHoursRow{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:6px;}.attendanceApprovalHours .input{margin-top:0;}.attendanceApprovalHours small{display:block;margin-top:5px;font-weight:500;color:#64748B;font-size:12px;}.attendanceApprovalActions{display:flex;justify-content:flex-end;gap:9px;border-top:1px solid #E2E8F0;padding-top:14px;}.attendanceApprovalActions .primaryButton{width:auto;min-width:120px;display:inline-flex;justify-content:center;align-items:center;gap:5px;}.attendanceApproveButton{background:#16A34A;}.attendanceRejectButton{background:#475569;}@media(max-width:767px){.attendanceApprovalIntro{flex-direction:column;}.attendanceApprovalList{grid-template-columns:1fr;}.attendanceApprovalActions{justify-content:stretch;}.attendanceApprovalActions .primaryButton{flex:1;min-width:0;}}