:root {
    --font-main: Inter, "Segoe UI", Roboto, Arial, sans-serif;
    --sidebar-width: 260px;
    --radius-xl: 18px;
    --radius-lg: 14px;
    --radius-md: 12px;
    --primary: #10b981;
    --primary-dark: #059669;
    --danger: #ef4444;
    --warning: #f59e0b;
    --success: #22c55e;
}

html[data-theme="dark"] {
    --bg: #0f1115;
    --surface: #171a20;
    --surface-2: #20242b;
    --surface-3: #252a32;
    --border: #2d333d;
    --text: #f8fafc;
    --muted: #9ca3af;
    --input: #22262e;
    --sidebar: #090c10;
    --sidebar-link: #151a20;
    --sidebar-link-active: #343a45;
    --shadow-soft: 0 12px 34px rgba(0,0,0,.24);
}

html[data-theme="light"] {
    --bg: #f4f6f8;
    --surface: #ffffff;
    --surface-2: #f8fafc;
    --surface-3: #eef2f7;
    --border: #e5e7eb;
    --text: #111827;
    --muted: #6b7280;
    --input: #ffffff;
    --sidebar: #07111f;
    --sidebar-link: rgba(255,255,255,.07);
    --sidebar-link-active: #ffffff;
    --shadow-soft: 0 8px 24px rgba(15,23,42,.07);
}

* {
    box-sizing: border-box;
}

html {
    font-size: 14px;
}

body {
    margin: 0;
    font-family: var(--font-main);
    font-size: 14px;
    line-height: 1.45;
    background: var(--bg);
    color: var(--text);
}

a {
    color: inherit;
}

.app-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr;
}

.sidebar {
    background: var(--sidebar);
    color: #fff;
    padding: 16px 14px;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    border-right: 1px solid rgba(255,255,255,.06);
}

.sidebar::-webkit-scrollbar,
.tabs-scroll::-webkit-scrollbar {
    height: 6px;
    width: 6px;
}

.sidebar::-webkit-scrollbar-thumb,
.tabs-scroll::-webkit-scrollbar-thumb {
    background: rgba(148,163,184,.35);
    border-radius: 999px;
}

.brand-box {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 20px;
    padding: 4px 2px;
}

.brand-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: linear-gradient(135deg, #10b981, #06b6d4);
    display: grid;
    place-items: center;
    font-weight: 950;
    color: #fff;
    flex: 0 0 auto;
}

.brand-icon.big {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    font-size: 18px;
}

.brand-title {
    font-size: 16px;
    font-weight: 950;
    line-height: 1.15;
}

.brand-subtitle {
    font-size: 11px;
    color: rgba(255,255,255,.62);
    margin-top: 3px;
}

.nav-label {
    margin: 16px 8px 7px;
    font-size: 10px;
    letter-spacing: .11em;
    color: rgba(255,255,255,.42);
    font-weight: 900;
}

.side-nav a {
    display: block;
    text-decoration: none;
    padding: 10px 12px;
    border-radius: 10px;
    margin-bottom: 6px;
    background: var(--sidebar-link);
    color: #fff;
    font-size: 13px;
    font-weight: 850;
    transition: background .14s ease, color .14s ease, transform .14s ease;
}

.side-nav a:hover {
    transform: translateX(2px);
}

html[data-theme="light"] .side-nav a:hover,
html[data-theme="light"] .side-nav a.active {
    background: #fff;
    color: #07111f;
}

html[data-theme="dark"] .side-nav a:hover,
html[data-theme="dark"] .side-nav a.active {
    background: var(--sidebar-link-active);
    color: #fff;
}

.main-content {
    min-width: 0;
    padding: 18px 20px;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    backdrop-filter: blur(14px);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 16px 18px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    box-shadow: var(--shadow-soft);
}

.page-title {
    margin: 0;
    font-size: 20px;
    font-weight: 950;
    letter-spacing: -.02em;
}

.page-subtitle {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 12px;
}

.top-actions,
.btn-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.btn {
    border: 0;
    border-radius: 10px;
    padding: 9px 12px;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    line-height: 1.2;
}

.btn-primary {
    background: var(--primary);
    color: #fff;
}

.btn-primary:hover {
    background: var(--primary-dark);
}

.btn-dark {
    background: #111827;
    color: #fff;
}

html[data-theme="dark"] .btn-dark {
    background: #2b313b;
}

.btn-light {
    background: var(--surface-2);
    color: var(--text);
    border: 1px solid var(--border);
}

.btn-danger {
    background: var(--danger);
    color: #fff;
}

.btn-sm {
    min-height: 31px;
    padding: 7px 10px;
    font-size: 12px;
}

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 16px;
    margin-bottom: 14px;
    box-shadow: var(--shadow-soft);
}

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 14px;
}

.kpi-label {
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
    margin-bottom: 7px;
}

.kpi-value {
    font-size: 24px;
    font-weight: 950;
    color: var(--text);
}

.kpi-note {
    color: var(--muted);
    font-size: 12px;
    margin-top: 6px;
}

.section-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.section-title {
    margin: 0 0 5px;
    font-size: 16px;
    font-weight: 950;
}

.section-subtitle {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.55;
}

.badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 5px 9px;
    font-size: 11px;
    font-weight: 950;
    white-space: nowrap;
}

.badge.success {
    background: rgba(34, 197, 94, .16);
    color: #22c55e;
}

.badge.muted {
    background: rgba(161, 161, 170, .16);
    color: var(--muted);
}

.module-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.module-card {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 15px;
}

.module-link {
    text-decoration: none;
    color: inherit;
    display: block;
    transition: transform .15s ease, border-color .15s ease;
}

.module-link:hover {
    transform: translateY(-2px);
    border-color: rgba(16,185,129,.45);
}

.module-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: rgba(16, 185, 129, .16);
    display: grid;
    place-items: center;
    font-size: 22px;
    margin-bottom: 12px;
}

.module-title {
    font-weight: 950;
    margin-bottom: 5px;
}

.module-text {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.55;
}

/* Forms */

.form-card {
    max-width: 1180px;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(260px, 1fr));
    gap: 14px 16px;
}

.form-grid.three,
.professional-form {
    grid-template-columns: repeat(3, minmax(230px, 1fr));
}

.form-group.full,
.full {
    grid-column: 1 / -1;
}

.form-group {
    min-width: 0;
}

label {
    display: block;
    margin-bottom: 7px;
    font-size: 12px;
    font-weight: 950;
    color: var(--text);
}

.required-star {
    color: var(--danger);
    margin-left: 3px;
}

input,
select,
textarea {
    width: 100%;
    background: var(--input);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 11px;
    padding: 0 12px;
    font-size: 13px;
    outline: none;
    transition: border-color .14s ease, box-shadow .14s ease, background .14s ease;
}

input,
select {
    height: 42px;
}

textarea {
    min-height: 96px;
    padding-top: 11px;
    padding-bottom: 11px;
    resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
    border-color: rgba(16,185,129,.75);
    box-shadow: 0 0 0 3px rgba(16,185,129,.14);
}

select {
    appearance: auto;
}

.form-actions {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

/* Setup */

.setup-tabs {
    padding: 10px;
}

.tabs-scroll {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
}

.setup-tab {
    flex: 0 0 auto;
    text-decoration: none;
    padding: 9px 12px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text);
    font-size: 12px;
    font-weight: 900;
}

.setup-tab.active,
.setup-tab:hover {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

.filter-row {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto auto;
    gap: 9px;
    margin-bottom: 14px;
    align-items: center;
}

.table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: 14px;
}

.data-table {
    width: 100%;
    min-width: 780px;
    border-collapse: collapse;
}

.data-table th,
.data-table td {
    padding: 11px 10px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    font-size: 12px;
    white-space: nowrap;
}

.data-table th {
    background: var(--surface-2);
    color: var(--text);
    font-weight: 950;
}

.data-table tbody tr:last-child td {
    border-bottom: 0;
}

.data-table tr:hover td {
    background: color-mix(in srgb, var(--surface-2) 78%, transparent);
}

.empty-cell {
    text-align: center !important;
    color: var(--muted);
    padding: 24px !important;
}

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

.table-actions form {
    margin: 0;
}

.alert {
    border-radius: 12px;
    padding: 11px 13px;
    font-size: 13px;
    font-weight: 850;
    margin-bottom: 14px;
}

.alert-danger {
    background: rgba(239, 68, 68, .16);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, .25);
}

.alert-success {
    background: rgba(34, 197, 94, .16);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, .25);
}

.code-box {
    font-family: Consolas, monospace;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 11px;
    color: var(--muted);
}

.user-chip {
    display: grid;
    line-height: 1.15;
    padding: 8px 11px;
    border-radius: 12px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    min-width: 130px;
}

.user-chip span {
    font-weight: 950;
    font-size: 12px;
}

.user-chip small {
    color: var(--muted);
    font-size: 10px;
    margin-top: 3px;
}

/* Auth Pages */

.auth-body {
    min-height: 100vh;
}

.auth-page {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 24px;
    padding: 28px;
    align-items: center;
}

.auth-left {
    min-height: calc(100vh - 56px);
    border-radius: 26px;
    padding: 34px;
    background:
        radial-gradient(circle at 20% 20%, rgba(16,185,129,.30), transparent 28%),
        radial-gradient(circle at 80% 30%, rgba(6,182,212,.24), transparent 30%),
        linear-gradient(135deg, #07111f, #111827);
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.auth-brand {
    display: flex;
    align-items: center;
    gap: 14px;
}

.auth-brand h1 {
    margin: 0;
    font-size: 30px;
    line-height: 1.1;
}

.auth-brand p {
    margin: 6px 0 0;
    color: rgba(255,255,255,.68);
}

.auth-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.auth-feature-card {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 16px;
    padding: 16px;
    backdrop-filter: blur(10px);
}

.auth-feature-card strong {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
}

.auth-feature-card span {
    color: rgba(255,255,255,.68);
    font-size: 13px;
    line-height: 1.5;
}

.auth-card {
    width: min(460px, 100%);
    justify-self: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 24px;
    box-shadow: var(--shadow-soft);
    padding: 24px;
}

.auth-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.auth-card h2 {
    margin: 0;
    font-size: 24px;
    font-weight: 950;
}

.auth-card p {
    margin: 5px 0 0;
    color: var(--muted);
    font-size: 13px;
}

.auth-theme-actions .btn {
    padding: 8px 10px;
    min-height: 34px;
}

.btn-full {
    width: 100%;
    height: 44px;
}

.auth-demo {
    margin-top: 16px;
    display: grid;
    gap: 7px;
    padding: 12px;
    border-radius: 14px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--muted);
    font-size: 12px;
}

.auth-demo code {
    color: var(--text);
    font-family: Consolas, monospace;
}

@media (max-width: 1200px) {
    .kpi-grid,
    .module-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .form-grid.three,
    .professional-form {
        grid-template-columns: repeat(2, minmax(240px, 1fr));
    }
}

@media (max-width: 980px) {
    .app-shell {
        grid-template-columns: 1fr;
    }

    .sidebar {
        position: relative;
        height: auto;
        border-bottom: 1px solid rgba(255,255,255,.1);
    }

    .side-nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }

    .side-nav a {
        margin-bottom: 0;
    }

    .nav-label {
        grid-column: 1 / -1;
    }

    .main-content {
        padding: 12px;
    }

    .auth-page {
        grid-template-columns: 1fr;
        padding: 14px;
    }

    .auth-left {
        min-height: auto;
    }

    .auth-feature-grid {
        margin-top: 28px;
    }

    .auth-card {
        width: 100%;
    }
}

@media (max-width: 700px) {
    body {
        font-size: 13px;
    }

    .topbar {
        flex-direction: column;
        align-items: stretch;
        border-radius: 14px;
    }

    .top-actions .btn {
        flex: 1;
    }

    .kpi-grid,
    .module-grid,
    .form-grid,
    .form-grid.three,
    .professional-form {
        grid-template-columns: 1fr;
    }

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

    .page-title {
        font-size: 18px;
    }

    .section-header {
        flex-direction: column;
        align-items: stretch;
    }

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

    .table-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .table-actions .btn,
    .table-actions form,
    .table-actions button {
        width: 100%;
    }

    .auth-left {
        padding: 22px;
        border-radius: 20px;
    }

    .auth-brand h1 {
        font-size: 22px;
    }

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

    .auth-card-head {
        flex-direction: column;
    }

    .auth-theme-actions {
        width: 100%;
    }

    .auth-theme-actions .btn {
        flex: 1;
    }

    .user-chip {
        width: 100%;
    }
}


/* ==========================================================
   Step 4 Employee Master
   ========================================================== */

.employee-table {
    min-width: 1120px;
}

.avatar-sm {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    object-fit: cover;
    display: inline-grid;
    place-items: center;
    font-size: 13px;
    font-weight: 950;
}

.avatar-xl {
    width: 92px;
    height: 92px;
    border-radius: 24px;
    object-fit: cover;
    display: inline-grid;
    place-items: center;
    font-weight: 950;
}

.avatar-placeholder {
    background: linear-gradient(135deg, rgba(16,185,129,.95), rgba(6,182,212,.95));
    color: #fff;
}

.strong-text {
    font-weight: 950;
    color: var(--text);
}

.muted-text,
.field-help {
    color: var(--muted);
    font-size: 12px;
    margin-top: 3px;
}

.employee-photo-row {
    display: flex;
    gap: 16px;
    align-items: center;
    padding: 14px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    border-radius: 16px;
    margin-bottom: 16px;
}

.photo-upload-box {
    flex: 1;
    min-width: 0;
}

.employee-profile-grid {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 14px;
    align-items: start;
}

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

.profile-photo-wrap {
    margin-bottom: 14px;
}

.profile-photo {
    width: 140px;
    height: 140px;
    border-radius: 32px;
    object-fit: cover;
    display: inline-grid;
    place-items: center;
    font-size: 42px;
    font-weight: 950;
}

.profile-card h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 950;
}

.profile-card p {
    margin: 6px 0 12px;
    color: var(--muted);
    font-size: 13px;
}

.profile-actions {
    justify-content: center;
    margin-top: 14px;
}

.details-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.details-grid > div {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 12px;
    min-width: 0;
}

.details-grid span {
    display: block;
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
    margin-bottom: 5px;
}

.details-grid strong {
    display: block;
    font-size: 13px;
    font-weight: 950;
    overflow-wrap: anywhere;
}

.document-form {
    margin-bottom: 16px;
}

.table-link {
    color: var(--primary);
    font-weight: 900;
    text-decoration: none;
}

.table-link:hover {
    text-decoration: underline;
}

@media (max-width: 1100px) {
    .employee-profile-grid {
        grid-template-columns: 1fr;
    }

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

@media (max-width: 700px) {
    .employee-photo-row {
        flex-direction: column;
        align-items: stretch;
    }

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

    .profile-photo {
        width: 112px;
        height: 112px;
        border-radius: 26px;
    }
}


/* ==========================================================
   Sidebar Toggle — Desktop Collapse + Mobile Drawer
   ========================================================== */

.sidebar-toggle-btn {
    width: 100%;
    min-height: 38px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.06);
    color: #fff;
    border-radius: 12px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-size: 13px;
    font-weight: 950;
    cursor: pointer;
}

.sidebar-toggle-btn:hover {
    background: rgba(255,255,255,.12);
}

.toggle-icon {
    font-size: 17px;
    line-height: 1;
}

.mobile-menu-btn {
    display: none;
    position: fixed;
    left: 12px;
    top: 12px;
    z-index: 80;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 13px;
    background: var(--primary);
    color: #fff;
    font-size: 20px;
    font-weight: 950;
    box-shadow: 0 12px 28px rgba(0,0,0,.22);
    cursor: pointer;
}

.sidebar-backdrop {
    display: none;
}

/* Desktop collapsed sidebar */
@media (min-width: 981px) {
    body.sidebar-collapsed .app-shell {
        grid-template-columns: 78px 1fr;
    }

    body.sidebar-collapsed .sidebar {
        padding-left: 10px;
        padding-right: 10px;
    }

    body.sidebar-collapsed .brand-box {
        justify-content: center;
        margin-bottom: 18px;
    }

    body.sidebar-collapsed .brand-box > div:not(.brand-icon) {
        display: none;
    }

    body.sidebar-collapsed .brand-icon {
        width: 44px;
        height: 44px;
        border-radius: 15px;
    }

    body.sidebar-collapsed .sidebar-toggle-btn {
        width: 44px;
        margin-left: auto;
        margin-right: auto;
        padding: 0;
    }

    body.sidebar-collapsed .sidebar-toggle-btn .toggle-text {
        display: none;
    }

    body.sidebar-collapsed .nav-label {
        height: 1px;
        margin: 14px 0 8px;
        overflow: hidden;
        color: transparent;
        border-top: 1px solid rgba(255,255,255,.12);
    }

    body.sidebar-collapsed .side-nav a {
        width: 44px;
        min-height: 42px;
        padding: 10px 0;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        overflow: hidden;
        white-space: nowrap;
        text-indent: -999px;
        position: relative;
    }

    body.sidebar-collapsed .side-nav a::first-letter {
        text-indent: 0;
    }

    body.sidebar-collapsed .side-nav a::after {
        content: attr(data-short);
        position: absolute;
        inset: 0;
        display: grid;
        place-items: center;
        text-indent: 0;
        font-size: 12px;
        font-weight: 950;
    }

    body.sidebar-collapsed .side-nav a[href*="dashboard"]::after { content: "D"; }
    body.sidebar-collapsed .side-nav a[href*="company"]::after { content: "C"; }
    body.sidebar-collapsed .side-nav a[href*="branches"]::after { content: "B"; }
    body.sidebar-collapsed .side-nav a[href*="departments"]::after { content: "DP"; }
    body.sidebar-collapsed .side-nav a[href*="designations"]::after { content: "DS"; }
    body.sidebar-collapsed .side-nav a[href*="employee-groups"]::after { content: "G"; }
    body.sidebar-collapsed .side-nav a[href*="employee-grades"]::after { content: "GR"; }
    body.sidebar-collapsed .side-nav a[href*="employees"]::after { content: "E"; }
    body.sidebar-collapsed .side-nav a[href="#"]:nth-of-type(9)::after { content: "A"; }
    body.sidebar-collapsed .side-nav a[href="#"]:nth-of-type(10)::after { content: "L"; }
    body.sidebar-collapsed .side-nav a[href="#"]:nth-of-type(11)::after { content: "S"; }
    body.sidebar-collapsed .side-nav a[href="#"]:nth-of-type(12)::after { content: "P"; }
    body.sidebar-collapsed .side-nav a[href="#"]:nth-of-type(13)::after { content: "R"; }
    body.sidebar-collapsed .side-nav a[href="#"]:nth-of-type(14)::after { content: "⚙"; }
    body.sidebar-collapsed .side-nav a[href="#"]:nth-of-type(15)::after { content: "U"; }
    body.sidebar-collapsed .side-nav a[href*="logout"]::after { content: "⎋"; }

    body.sidebar-collapsed .side-nav a:hover {
        transform: none;
    }
}

/* Mobile drawer */
@media (max-width: 980px) {
    .mobile-menu-btn {
        display: grid;
        place-items: center;
    }

    .app-shell {
        display: block;
    }

    .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        z-index: 90;
        width: min(290px, 86vw);
        height: 100vh;
        transform: translateX(-105%);
        transition: transform .22s ease;
        box-shadow: 18px 0 40px rgba(0,0,0,.35);
        border-right: 1px solid rgba(255,255,255,.08);
    }

    body.sidebar-open .sidebar {
        transform: translateX(0);
    }

    .sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 85;
        background: rgba(0,0,0,.50);
        opacity: 0;
        pointer-events: none;
        transition: opacity .2s ease;
    }

    body.sidebar-open .sidebar-backdrop {
        opacity: 1;
        pointer-events: auto;
    }

    .main-content {
        padding-top: 66px;
    }

    .side-nav {
        display: block;
    }

    .side-nav a {
        margin-bottom: 6px;
    }

    .nav-label {
        display: block;
    }

    .sidebar-toggle-btn {
        justify-content: center;
    }

    .topbar {
        top: 8px;
    }
}


/* ==========================================================
   Step 5 Attendance MVP
   ========================================================== */

.attendance-filter {
    display: grid;
    grid-template-columns: repeat(4, minmax(180px, 1fr)) auto;
    gap: 10px;
    align-items: end;
    margin-bottom: 14px;
}

.filter-buttons {
    display: flex;
    gap: 8px;
    align-items: center;
}

.attendance-table {
    min-width: 1180px;
}

.employee-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 220px;
}

.device-id-text {
    display: inline-block;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
}

.punch-card {
    max-width: 1250px;
}

.attendance-punch-grid {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 16px;
    align-items: start;
}

.punch-main {
    min-width: 0;
}

.attendance-status-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
}

.status-box {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 12px;
}

.status-box span {
    display: block;
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
    margin-bottom: 5px;
}

.status-box strong {
    display: block;
    font-size: 13px;
    overflow-wrap: anywhere;
}

.camera-panel {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 12px;
}

.camera-panel video,
.camera-panel img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 14px;
    background: #000;
    display: block;
}

.camera-help {
    color: var(--muted);
    font-size: 12px;
    margin-top: 10px;
    text-align: center;
}

input[readonly] {
    opacity: .78;
    cursor: not-allowed;
}

@media (max-width: 1200px) {
    .attendance-filter {
        grid-template-columns: repeat(2, minmax(180px, 1fr));
    }

    .filter-buttons {
        grid-column: 1 / -1;
    }

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

    .camera-panel {
        max-width: 420px;
    }
}

@media (max-width: 700px) {
    .attendance-filter,
    .attendance-status-grid {
        grid-template-columns: 1fr;
    }

    .filter-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-buttons .btn {
        width: 100%;
    }

    .camera-panel {
        max-width: none;
    }
}


/* ==========================================================
   Step 5B Biometric / ESS Attendance Flow
   ========================================================== */

.employee-self-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--surface-2);
    margin-bottom: 14px;
}

.employee-self-card strong {
    display: block;
    font-size: 17px;
    font-weight: 950;
}

.employee-self-card span {
    display: block;
    color: var(--muted);
    font-size: 13px;
    margin-top: 4px;
}

.biometric-flow {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.flow-step {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 12px;
    text-align: center;
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
}

.flow-step.active {
    background: rgba(16,185,129,.16);
    color: var(--primary);
    border-color: rgba(16,185,129,.35);
}

.ai-placeholder {
    border: 1px dashed rgba(16,185,129,.45);
    background: rgba(16,185,129,.08);
    border-radius: 16px;
    padding: 14px;
    margin: 14px 0;
}

.ai-placeholder h3 {
    margin: 0 0 7px;
    font-size: 15px;
    font-weight: 950;
}

.ai-placeholder p {
    margin: 0 0 10px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.6;
}

.ai-placeholder code {
    display: inline-block;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 7px 9px;
    font-size: 12px;
}

.attendance-event-table {
    min-width: 1080px;
}

.attendance-event-table input[type="text"] {
    min-width: 180px;
}

.check-cell {
    text-align: center !important;
}

.check-cell input[type="checkbox"] {
    width: 18px;
    height: 18px;
}

@media (max-width: 800px) {
    .biometric-flow {
        grid-template-columns: 1fr;
    }

    .employee-self-card {
        flex-direction: column;
        align-items: flex-start;
    }
}


/* ==========================================================
   Step 5C Employee Login + ESS
   ========================================================== */

.login-link-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding: 14px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    border-radius: 16px;
}

.login-link-card strong,
.login-link-card span,
.login-link-card small {
    display: block;
}

.login-link-card strong {
    font-size: 15px;
    font-weight: 950;
}

.login-link-card span {
    color: var(--muted);
    margin-top: 4px;
    font-size: 13px;
}

.login-link-card small {
    color: var(--muted);
    margin-top: 4px;
    font-size: 12px;
}

.ess-hero {
    display: grid;
    gap: 14px;
}

.ess-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

@media (max-width: 700px) {
    .login-link-card {
        flex-direction: column;
        align-items: stretch;
    }

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


/* ==========================================================
   Step 6 Leave Management
   ========================================================== */

.leave-table {
    min-width: 980px;
}

.reason-box {
    margin-top: 14px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface-2);
}

.reason-box strong {
    display: block;
    margin-bottom: 7px;
    font-weight: 950;
}

.reason-box p {
    margin: 0;
    color: var(--muted);
    line-height: 1.6;
}

.approval-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.approval-actions form {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
}

.leave-balance-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.leave-balance-card {
    border: 1px solid var(--border);
    background: var(--surface-2);
    border-radius: 16px;
    padding: 14px;
}

.leave-balance-card span {
    display: block;
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
}

.leave-balance-card strong {
    display: block;
    font-size: 28px;
    font-weight: 950;
    margin-top: 6px;
}

.leave-balance-card small {
    display: block;
    color: var(--muted);
    margin-top: 4px;
}

@media (max-width: 1000px) {
    .leave-balance-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

@media (max-width: 700px) {
    .leave-balance-grid,
    .approval-actions form {
        grid-template-columns: 1fr;
    }

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


/* ==========================================================
   Step 6B Admin Leave + Holiday Master
   ========================================================== */

.mini-filter {
    display: flex;
    gap: 8px;
    align-items: center;
}

.mini-filter input {
    width: 120px;
}

@media (max-width: 700px) {
    .mini-filter {
        width: 100%;
    }

    .mini-filter input,
    .mini-filter .btn {
        width: 100%;
    }
}


/* ==========================================================
   Step 7 Shift Management
   ========================================================== */

.shift-table {
    min-width: 980px;
}

.roster-table,
.impact-table {
    min-width: 1050px;
}

.roster-table td,
.impact-table td {
    vertical-align: top;
}

@media (max-width: 700px) {
    .shift-table input,
    .shift-table select {
        min-width: 130px;
    }
}


/* Step 7B Employee-wise weekly off */
.weekly-off-table {
    min-width: 1120px;
}


/* ==========================================================
   Step 8 Attendance Reports
   ========================================================== */

.report-filter {
    grid-template-columns: repeat(4, minmax(180px, 1fr)) auto;
}

.report-table {
    min-width: 1280px;
}

.monthly-report-table {
    min-width: 1320px;
}

.report-table th,
.report-table td,
.monthly-report-table th,
.monthly-report-table td {
    vertical-align: top;
}

@media (max-width: 1200px) {
    .report-filter {
        grid-template-columns: repeat(2, minmax(180px, 1fr));
    }
}

@media (max-width: 700px) {
    .report-filter {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================
   Step 9 Payroll Foundation
   ========================================================== */

.payroll-table {
    min-width: 1180px;
}

.check-inline {
    display: flex;
    gap: 16px;
    align-items: center;
    padding-top: 24px;
}

.check-inline label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0;
}

.check-inline input[type="checkbox"] {
    width: 18px;
    height: 18px;
}

.salary-items-box {
    margin-top: 16px;
    border-top: 1px solid var(--border);
    padding-top: 16px;
}

.salary-items-box h3 {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 950;
}

.payslip-card {
    max-width: 1040px;
    margin-left: auto;
    margin-right: auto;
}

.payslip-header {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
    padding: 18px;
    border-radius: 18px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    margin-bottom: 16px;
}

.payslip-header h2 {
    margin: 0;
    font-size: 24px;
    font-weight: 950;
}

.payslip-header p {
    margin: 5px 0 0;
    color: var(--muted);
}

.payslip-net {
    text-align: right;
}

.payslip-net span {
    display: block;
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
}

.payslip-net strong {
    display: block;
    font-size: 28px;
    font-weight: 950;
    color: var(--primary);
}

.payslip-summary-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
    margin: 16px 0;
}

.payslip-summary-grid > div {
    border: 1px solid var(--border);
    background: var(--surface-2);
    border-radius: 14px;
    padding: 12px;
}

.payslip-summary-grid span {
    display: block;
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
}

.payslip-summary-grid strong {
    display: block;
    font-size: 18px;
    font-weight: 950;
    margin-top: 5px;
}

.payslip-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.payslip-columns h3 {
    margin: 0 0 10px;
    font-size: 15px;
    font-weight: 950;
}

.payslip-mini-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
}

.payslip-mini-table td {
    padding: 11px;
    border-bottom: 1px solid var(--border);
}

.payslip-mini-table td:last-child {
    text-align: right;
    font-weight: 900;
}

.payslip-mini-table .total-row td {
    background: var(--surface-2);
    font-weight: 950;
}

.payslip-footer {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    text-align: right;
}

.payslip-footer strong {
    font-size: 18px;
}

.payslip-footer p {
    color: var(--muted);
    margin: 5px 0 0;
}

@media (max-width: 900px) {
    .payslip-summary-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

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

@media (max-width: 700px) {
    .payslip-header {
        flex-direction: column;
    }

    .payslip-net {
        text-align: left;
    }

    .payslip-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media print {
    .sidebar,
    .topbar,
    .print-hide,
    .mobile-menu-btn,
    .sidebar-backdrop {
        display: none !important;
    }

    .app-shell {
        display: block !important;
    }

    .main-content {
        padding: 0 !important;
    }

    body {
        background: #fff !important;
        color: #111 !important;
    }

    .card {
        box-shadow: none !important;
        border: 0 !important;
    }
}


/* ==========================================================
   Step 9B Proper Attendance Rules
   ========================================================== */

.rules-explain-box {
    margin-top: 16px;
    padding: 14px;
    border: 1px dashed rgba(16,185,129,.45);
    background: rgba(16,185,129,.08);
    border-radius: 16px;
}

.rules-explain-box h3 {
    margin: 0 0 8px;
    font-size: 15px;
    font-weight: 950;
}

.rules-explain-box p {
    margin: 5px 0;
    color: var(--muted);
    font-size: 13px;
}

.report-table,
.roster-table {
    min-width: 1450px;
}


/* ==========================================================
   Step 9C Professional Grouped Sidebar Menu
   ========================================================== */

.sidebar {
    overflow-y: auto;
    scrollbar-width: thin;
}

.sidebar::-webkit-scrollbar {
    width: 6px;
}

.sidebar::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.18);
    border-radius: 999px;
}

.grouped-side-nav {
    display: grid;
    gap: 6px;
}

.grouped-side-nav .nav-label {
    display: none;
}

.side-nav.grouped-side-nav a,
.menu-group-toggle {
    min-height: 36px;
    padding: 8px 10px;
    border-radius: 11px;
    font-size: 12px;
    line-height: 1.1;
}

.side-nav.grouped-side-nav a {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
}

.nav-ico {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    display: inline-grid;
    place-items: center;
    border-radius: 8px;
    background: rgba(255,255,255,.06);
    color: #cbd5e1;
    font-size: 10px;
    font-weight: 950;
}

.side-nav a.active .nav-ico,
.side-nav a:hover .nav-ico {
    background: rgba(16,185,129,.20);
    color: #fff;
}

.nav-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.menu-group-toggle {
    width: 100%;
    margin-top: 8px;
    border: 1px solid rgba(255,255,255,.07);
    background: rgba(255,255,255,.035);
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    cursor: pointer;
    font-weight: 950;
    letter-spacing: .04em;
}

.menu-group-toggle:hover {
    background: rgba(255,255,255,.07);
    color: #e5e7eb;
}

.menu-group-toggle b {
    font-size: 13px;
    transition: transform .18s ease;
}

.menu-group-toggle.is-collapsed b {
    transform: rotate(-90deg);
}

.menu-group {
    display: grid;
    gap: 5px;
    padding-left: 7px;
    margin-left: 5px;
    border-left: 1px solid rgba(255,255,255,.08);
}

.menu-group.is-collapsed {
    display: none;
}

.sidebar-toggle-btn {
    min-height: 34px;
    margin-bottom: 12px;
}

/* Collapsed desktop: icon-only menu with compact group buttons */
@media (min-width: 981px) {
    body.sidebar-collapsed .menu-group-toggle {
        width: 44px;
        height: 34px;
        min-height: 34px;
        padding: 0;
        justify-content: center;
        margin-left: auto;
        margin-right: auto;
        overflow: hidden;
    }

    body.sidebar-collapsed .menu-group-toggle span {
        display: none;
    }

    body.sidebar-collapsed .menu-group-toggle b {
        transform: none;
        font-size: 0;
    }

    body.sidebar-collapsed .menu-group-toggle b::after {
        content: "•";
        font-size: 18px;
        color: #94a3b8;
    }

    body.sidebar-collapsed .menu-group {
        border-left: 0;
        padding-left: 0;
        margin-left: 0;
    }

    body.sidebar-collapsed .side-nav.grouped-side-nav a {
        width: 44px;
        height: 38px;
        min-height: 38px;
        padding: 7px 0;
        justify-content: center;
        text-indent: 0;
    }

    body.sidebar-collapsed .side-nav.grouped-side-nav a::after {
        display: none !important;
    }

    body.sidebar-collapsed .nav-text {
        display: none;
    }

    body.sidebar-collapsed .nav-ico {
        flex-basis: 28px;
        width: 28px;
        height: 28px;
    }
}

/* Mobile sidebar keeps category groups compact */
@media (max-width: 980px) {
    .side-nav.grouped-side-nav a,
    .menu-group-toggle {
        min-height: 38px;
        font-size: 13px;
    }

    .menu-group {
        padding-left: 8px;
        margin-left: 6px;
    }

    .sidebar {
        padding-bottom: 26px;
    }
}


/* ==========================================================
   Step 9D Punch Sequence + Break Report
   ========================================================== */

.alert-warning {
    border: 1px solid rgba(245, 158, 11, .35);
    background: rgba(245, 158, 11, .12);
    color: #fbbf24;
}

.sequence-warning-box span {
    display: inline-block;
    margin-top: 6px;
    color: var(--muted);
    font-size: 12px;
}

.report-table {
    min-width: 1650px;
}


/* ==========================================================
   Step 10 Document Alerts + Notifications
   ========================================================== */

.document-alert-table {
    min-width: 1250px;
}

.notification-table {
    min-width: 1200px;
}

.danger-kpi .kpi-value {
    color: #ef4444;
}

.inline-action-form {
    display: grid;
    grid-template-columns: 120px 1fr auto;
    gap: 7px;
    align-items: center;
}

.channel-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    min-width: 340px;
}

.channel-checks label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--muted);
}

.badge.danger {
    background: rgba(239,68,68,.14);
    color: #fca5a5;
    border-color: rgba(239,68,68,.22);
}

@media (max-width: 800px) {
    .inline-action-form {
        grid-template-columns: 1fr;
    }

    .channel-checks {
        min-width: 0;
    }
}


/* ==========================================================
   Step 11 Notification Settings + Leave Cancel
   ========================================================== */

.switch-line {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 900;
    color: var(--muted);
}

.switch-line input {
    width: 18px;
    height: 18px;
}

.sticky-form-actions {
    position: sticky;
    bottom: 12px;
    z-index: 10;
    margin-top: 14px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    box-shadow: var(--shadow);
}

.cancel-leave-box {
    margin-top: 16px;
    padding: 12px;
    border: 1px solid rgba(239, 68, 68, .25);
    background: rgba(239, 68, 68, .08);
    border-radius: 16px;
}

.cancel-leave-box form {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
}

@media (max-width: 700px) {
    .sticky-form-actions,
    .cancel-leave-box form {
        grid-template-columns: 1fr;
        flex-direction: column;
    }

    .sticky-form-actions .btn,
    .cancel-leave-box .btn {
        width: 100%;
    }
}


/* ==========================================================
   Step 12 Manual Attendance + Import
   ========================================================== */

.import-help-box {
    padding: 14px;
    border: 1px dashed rgba(16,185,129,.45);
    background: rgba(16,185,129,.08);
    border-radius: 16px;
    margin-bottom: 14px;
}

.import-help-box strong {
    display: block;
    font-size: 14px;
    font-weight: 950;
    margin-bottom: 6px;
}

.import-help-box code {
    display: block;
    padding: 10px;
    border-radius: 12px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    overflow-x: auto;
}

.import-help-box p {
    margin: 7px 0 0;
    color: var(--muted);
    font-size: 13px;
}

.import-table {
    min-width: 1100px;
}


/* Step 12B fixes */
.alert-warning {
    border: 1px solid rgba(245, 158, 11, .35);
    background: rgba(245, 158, 11, .12);
    color: #fbbf24;
}


/* ==========================================================
   Steps 13-18 Combined Foundation
   ========================================================== */

.correction-table {
    min-width: 1250px;
}

.reason-box {
    margin-top: 14px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface-2);
}

.reason-box strong {
    display: block;
    margin-bottom: 6px;
}

.reason-box p {
    margin: 0;
    color: var(--muted);
}

.approval-actions-grid {
    margin-top: 16px;
    display: grid;
    grid-template-columns: repeat(3, minmax(220px, 1fr));
    gap: 10px;
}

.approval-actions-grid form {
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface-2);
    display: grid;
    gap: 8px;
}

@media (max-width: 900px) {
    .approval-actions-grid {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================
   Step 19 Payroll Fix
   ========================================================== */

.badge.danger {
    background: rgba(239,68,68,.14);
    color: #fca5a5;
    border-color: rgba(239,68,68,.22);
}

.alert-warning {
    border: 1px solid rgba(245, 158, 11, .35);
    background: rgba(245, 158, 11, .12);
    color: #fbbf24;
}


/* ==========================================================
   Step 19B Payroll Rules + Validation
   ========================================================== */

.payroll-rule-card {
    border: 1px solid var(--border);
    background: var(--surface-2);
    border-radius: 16px;
    padding: 14px;
}

.alert-danger {
    border: 1px solid rgba(239,68,68,.35);
    background: rgba(239,68,68,.12);
    color: #fca5a5;
}


/* ==========================================================
   Step 20 Payroll Finalization + Payment
   ========================================================== */

.payroll-action-grid {
    margin: 16px 0;
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 12px;
}

.payroll-action-grid form {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    align-items: center;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface-2);
}

.payroll-action-grid form:nth-child(2) {
    grid-template-columns: 140px 1fr 1fr 1fr auto;
}

.compact-actions {
    gap: 6px;
    flex-wrap: wrap;
}

@media (max-width: 1000px) {
    .payroll-action-grid,
    .payroll-action-grid form,
    .payroll-action-grid form:nth-child(2) {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================
   Step 21 Biometric Device Management
   ========================================================== */

.biometric-device-table {
    min-width: 1500px;
}

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

.compact-actions form {
    margin: 0;
}

.btn-danger {
    background: #ef4444;
    color: #fff;
    border-color: rgba(239,68,68,.35);
}

.badge.danger {
    background: rgba(239,68,68,.14);
    color: #fca5a5;
    border-color: rgba(239,68,68,.22);
}


/* ==========================================================
   Step 22-23 ZKTeco Agent + ADMS
   ========================================================== */

.zkteco-table {
    min-width: 1250px;
}

.rules-explain-box code {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 8px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    margin-top: 4px;
}


/* ==========================================================
   Step 24 Suprema + Hikvision Vendor Integration
   ========================================================== */

.vendor-integration-note {
    padding: 14px;
    border-radius: 16px;
    border: 1px solid var(--border);
    background: var(--surface-2);
}


/* ==========================================================
   Step 22E Real Device + Sync Status
   ========================================================== */

.badge.info {
    background: rgba(59,130,246,.14);
    color: #93c5fd;
    border-color: rgba(59,130,246,.22);
}

.biometric-device-table {
    min-width: 1900px;
}

/* Step 22F Agent Config */
.check-inline label{display:flex;gap:8px;align-items:center;}


/* Step 22H Resync Control */
.mini-date {
    max-width: 125px;
    height: 32px;
    padding: 4px 6px;
    font-size: 11px;
}


/* Step 22I Manual Sync + ZKTeco Dashboard */
.biometric-device-table {
    min-width: 2200px;
}
.zkteco-table {
    min-width: 1300px;
}


/* ==========================================================
   Step 22N Process Device Logs
   ========================================================== */

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 14px 0;
}

.kpi-card {
    padding: 14px;
    border-radius: 16px;
    background: var(--surface-2);
    border: 1px solid var(--border);
}

.kpi-card span {
    display: block;
    color: var(--muted);
    font-size: 12px;
}

.kpi-card strong {
    display: block;
    font-size: 24px;
    margin-top: 6px;
}

@media (max-width: 800px) {
    .kpi-grid {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================
   Step 22O Attendance Device Source Filter
   ========================================================== */

.device-range-alert {
    margin: 12px 0;
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.badge.info {
    background: rgba(59,130,246,.14);
    color: #93c5fd;
    border-color: rgba(59,130,246,.22);
}

.attendance-filter {
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}


/* ==========================================================
   Step 22P Biometric Users + Templates
   ========================================================== */

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 14px 0;
}

@media (max-width: 900px) {
    .kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .kpi-grid {
        grid-template-columns: 1fr;
    }
}

.badge.danger {
    background: rgba(239,68,68,.14);
    color: #fca5a5;
    border-color: rgba(239,68,68,.22);
}


/* ==========================================================
   Step 22Q Browse Users + Selective Template Progress
   ========================================================== */

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

.bio-progress-card {
    border: 1px solid var(--border);
    background: var(--surface-2);
    border-radius: 16px;
    padding: 14px;
}

.bio-progress-title {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.bio-progress-title span,
.bio-progress-line span,
.bio-progress-footer span {
    color: var(--muted);
    font-size: 12px;
}

.bio-progress-line {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 12px;
    margin: 5px 0;
}

.bio-progress-line em {
    font-style: normal;
    text-align: right;
    max-width: 70%;
}

.progress-outer {
    width: 100%;
    height: 10px;
    border-radius: 999px;
    background: rgba(148,163,184,.20);
    overflow: hidden;
    margin-top: 10px;
}

.progress-inner {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #3b82f6, #22c55e);
    border-radius: 999px;
    transition: width .35s ease;
}

.bio-progress-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
}


/* ==========================================================
   Step 22R Device User -> Employee + Upload to Device
   ========================================================== */

.inner-action-card {
    margin-top: 14px;
    background: var(--surface-2);
}

.mini-section-title {
    margin: 0 0 10px;
    font-size: 15px;
}

.upload-target-box {
    margin-top: 12px;
}

.btn-xs {
    padding: 4px 7px;
    font-size: 11px;
}

.compact-progress {
    height: 8px;
    min-width: 120px;
}


/* ==========================================================
   Step 22S Browse Area Reset
   ========================================================== */

.browse-area-note .empty-cell {
    padding: 28px 14px;
    color: var(--muted);
}

.browse-area-note .section-subtitle strong {
    color: var(--text);
}


/* ==========================================================
   Step 22T Browse Status + Template Save Status
   ========================================================== */

.muted-text {
    color: var(--muted);
    font-size: 12px;
    margin-top: 4px;
}

.badge.success {
    background: rgba(34,197,94,.14);
    color: #86efac;
    border-color: rgba(34,197,94,.22);
}


/* ==========================================================
   Step 22U Browse Screen Cleanup
   ========================================================== */

.browse-area-note {
    scroll-margin-top: 20px;
}


/* ==========================================================
   Step 22Z Template Coverage Diagnostics
   ========================================================== */

.template-diagnostic-box {
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface-2);
    padding: 14px;
    margin: 12px 0 14px;
}

.template-diagnostic-box h3 {
    margin: 0 0 10px;
    font-size: 15px;
}

.diagnostic-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(120px, 1fr));
    gap: 10px;
}

.diagnostic-grid div {
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px;
    background: var(--surface);
}

.diagnostic-grid span {
    display: block;
    font-size: 11px;
    color: var(--muted);
}

.diagnostic-grid strong {
    display: block;
    font-size: 20px;
    margin-top: 4px;
}

.diagnostic-note {
    color: var(--muted);
    margin: 10px 0 0;
    font-size: 12px;
}

@media (max-width: 1100px) {
    .diagnostic-grid { grid-template-columns: repeat(2, minmax(120px, 1fr)); }
}


/* ==========================================================
   Step 23A Attendance Log Download Controls
   ========================================================== */

.compact-help-card {
    margin-top: 12px;
}

.check-inline label {
    display: flex;
    align-items: center;
    gap: 8px;
}

.compact-actions form {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}


/* ==========================================================
   Step 23A4 Device Action UI Clarity
   ========================================================== */

.compact-actions {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 8px;
}

.action-block {
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
    padding: 7px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    border-radius: 12px;
    min-width: 170px;
}

.action-block form {
    display: flex;
    gap: 6px;
    align-items: center;
}

.action-label {
    font-size: 11px;
    font-weight: 800;
    color: var(--text);
    opacity: .95;
}

.action-help {
    color: var(--muted);
    font-size: 10px;
    line-height: 1.25;
}

.action-download {
    border-color: rgba(59,130,246,.25);
}

.action-resync {
    border-color: rgba(245,158,11,.28);
}

.labelled-date {
    min-width: 126px;
}

.btn-warning {
    background: #f59e0b;
    color: #111827;
    border-color: #f59e0b;
}

.btn-warning:hover {
    filter: brightness(.95);
}


/* ==========================================================
   Step 23A5 Sync Now Immediate UI
   ========================================================== */

.action-syncnow {
    border-color: rgba(16,185,129,.32);
}

.action-resync {
    min-width: 190px;
}


/* ==========================================================
   Step 23B ADMS Push + Sync UI Cleanup
   ========================================================== */

.adms-info-card {
    margin-top: 12px;
}

.mode-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 12px 0;
}

.mode-box {
    border: 1px solid var(--border);
    background: var(--surface-2);
    border-radius: 16px;
    padding: 14px;
}

.mode-box h3 {
    margin: 0 0 6px;
    font-size: 15px;
}

.mode-box p {
    color: var(--muted);
    font-size: 12px;
    margin: 0 0 8px;
}

.mode-box code {
    display: inline-block;
    background: rgba(15,23,42,.25);
    border: 1px solid var(--border);
    padding: 6px 8px;
    border-radius: 9px;
    font-size: 11px;
}

@media (max-width: 900px) {
    .mode-grid {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================
   Step 23D Auto Process + Clean Sync Button
   ========================================================== */

.compact-actions > form {
    margin: 0;
}

.compact-actions .btn {
    white-space: nowrap;
}


/* ==========================================================
   Step 23E ADMS Auto Register
   ========================================================== */

.rules-explain-box .check-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-weight: 800;
}


/* ==========================================================
   Step 23F ADMS Live Test UI
   ========================================================== */

.adms-test-card .adms-url-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 12px 0;
}

.curl-box {
    border: 1px solid var(--border);
    background: var(--surface-2);
    border-radius: 16px;
    padding: 14px;
    margin: 12px 0;
}

.curl-box h3 {
    margin: 0 0 10px;
    font-size: 15px;
}

.curl-box label {
    display: block;
    font-size: 12px;
    font-weight: 800;
    margin: 10px 0 5px;
}

.curl-box pre {
    white-space: pre-wrap;
    word-break: break-word;
    border: 1px solid var(--border);
    background: rgba(15,23,42,.28);
    border-radius: 12px;
    padding: 10px;
    font-size: 12px;
    margin: 0;
}

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

@media (max-width: 1000px) {
    .adms-test-card .adms-url-grid,
    .kpi-grid.four {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================
   Step 23H ADMS Fingerprint Commands
   ========================================================== */

.adms-command-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 14px;
}

.command-box {
    border: 1px solid var(--border);
    background: var(--surface-2);
    border-radius: 16px;
    padding: 14px;
    display: grid;
    gap: 8px;
}

.command-box h3 {
    margin: 0 0 4px;
    font-size: 15px;
}

.command-box label {
    font-size: 12px;
    font-weight: 800;
}

.command-box input,
.command-box select {
    width: 100%;
}

@media (max-width: 900px) {
    .adms-command-grid {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================
   Step 24 Attendance Reports
   ========================================================== */

.report-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 14px 0;
}

.report-filter {
    grid-template-columns: repeat(6, minmax(150px, 1fr));
}

.report-table th,
.report-table td,
.monthly-report-table th,
.monthly-report-table td {
    white-space: nowrap;
}

@media (max-width: 1100px) {
    .report-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .report-filter {
        grid-template-columns: repeat(2, minmax(150px, 1fr));
    }
}

@media (max-width: 650px) {
    .report-kpi-grid,
    .report-filter {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================
   Step 24A Punch Logs Report
   ========================================================== */

.punch-times-cell {
    min-width: 260px;
    white-space: normal !important;
    line-height: 1.7;
    font-weight: 700;
    color: var(--text);
}

.punch-times-cell::first-letter {
    font-weight: 900;
}


/* ==========================================================
   Step 24B Punch Type Mapping
   ========================================================== */

.attendance-event-table .small-input {
    max-width: 96px;
    text-align: center;
    font-weight: 800;
}

.attendance-event-table input[type="text"] {
    min-width: 110px;
}


/* ==========================================================
   Step 24C ADMS Pending Approval
   ========================================================== */

.inline-approval-form {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) minmax(180px, 1.2fr) minmax(140px, 1fr) auto auto auto;
    gap: 8px;
    align-items: center;
    min-width: 760px;
}

.inline-approval-form input[type="text"] {
    min-width: 120px;
    font-size: 12px;
}

.mini-check {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    white-space: nowrap;
    color: var(--muted);
}

.adms-pending-card .table-wrap {
    overflow-x: auto;
}

@media (max-width: 1100px) {
    .inline-approval-form {
        grid-template-columns: 1fr;
        min-width: 280px;
    }
}


/* ==========================================================
   Step 24E ADMS Delete and Raw Events Page
   ========================================================== */

.raw-events-table .raw-mini,
.raw-events-table .raw-body-preview {
    max-width: 340px;
    white-space: normal !important;
    word-break: break-word;
    color: var(--muted);
    font-size: 12px;
}

.raw-events-table th,
.raw-events-table td {
    vertical-align: top;
}


/* ==========================================================
   Step 24F Device Form Collapse + Lowercase Punch Codes
   ========================================================== */

.collapsed-form-hint {
    border: 1px dashed var(--border);
    background: var(--surface-2);
    color: var(--muted);
    padding: 14px 16px;
    border-radius: 14px;
    font-size: 13px;
}

.attendance-event-table .small-input {
    text-transform: none !important;
    min-width: 160px;
    max-width: 260px;
}


/* ==========================================================
   Step 24G Local Agent Logs Page
   ========================================================== */

.local-logs-table .raw-mini,
.local-logs-table .raw-body-preview {
    max-width: 420px;
    white-space: normal !important;
    word-break: break-word;
    color: var(--muted);
    font-size: 12px;
}

.local-logs-table th,
.local-logs-table td {
    vertical-align: top;
}


/* ==========================================================
   Step 24H Universal Event Mapping
   ========================================================== */

.data-table code {
    display: inline-block;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 3px 6px;
    font-size: 12px;
    white-space: normal;
}


/* ==========================================================
   Step 25 Core Settings + Arabic Foundation
   ========================================================== */

.quick-lang-switch {
    position: fixed;
    top: 8px;
    right: 14px;
    z-index: 2000;
    display: flex;
    gap: 6px;
}

.quick-lang-switch a {
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 5px 9px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 800;
}

[dir="rtl"] body,
body.rtl-mode {
    direction: rtl;
    text-align: right;
}

[dir="rtl"] .sidebar {
    right: 0;
    left: auto;
}

[dir="rtl"] .app-main {
    margin-left: 0;
}

.settings-logo-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(160px, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.logo-preview-box {
    border: 1px solid var(--border);
    background: var(--surface-2);
    border-radius: 14px;
    padding: 12px;
}

.logo-preview-box label {
    display: block;
    font-weight: 800;
    margin-bottom: 8px;
}

.logo-preview-box img,
.empty-logo {
    width: 100%;
    height: 120px;
    object-fit: contain;
    border-radius: 12px;
    background: var(--surface);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    font-weight: 900;
    margin-bottom: 8px;
}

.settings-inline-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
    align-items: end;
    margin-bottom: 16px;
}

.check-inline {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    font-size: 13px;
}

.sub-section-header {
    margin-top: 20px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

@media (max-width: 900px) {
    .settings-logo-row {
        grid-template-columns: 1fr;
    }
    .quick-lang-switch {
        top: auto;
        bottom: 8px;
        right: 8px;
    }
}


/* ==========================================================
   Step 25B Users & Roles Polish
   ========================================================== */

.permission-box {
    margin-top: 18px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    border-radius: 16px;
    padding: 14px;
}

.permission-box h3 {
    margin: 0 0 12px;
    font-size: 16px;
}

.permission-module {
    margin-bottom: 16px;
}

.permission-module h4 {
    margin: 0 0 8px;
    color: var(--text);
    font-size: 14px;
}

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

.permission-check {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    padding: 9px 10px;
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: 12px;
    font-size: 13px;
}

.permission-check small {
    display: block;
    color: var(--muted);
    font-size: 11px;
    margin-top: 2px;
}


/* ==========================================================
   Step 25D Arabic Translation Foundation
   ========================================================== */

[dir="rtl"],
[dir="rtl"] body,
body.rtl-mode {
    font-family: "Tahoma", "Arial", sans-serif;
}

[dir="rtl"] .side-nav a,
[dir="rtl"] .menu-group-toggle,
[dir="rtl"] .nav-text,
[dir="rtl"] .page-title,
[dir="rtl"] .section-title,
[dir="rtl"] label,
[dir="rtl"] th,
[dir="rtl"] td {
    letter-spacing: 0;
}

[dir="rtl"] .btn-row,
[dir="rtl"] .table-actions,
[dir="rtl"] .filter-buttons {
    flex-direction: row-reverse;
}

[dir="rtl"] .form-grid,
[dir="rtl"] .professional-form {
    direction: rtl;
}

[dir="rtl"] input,
[dir="rtl"] select,
[dir="rtl"] textarea {
    text-align: right;
}

[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="password"],
[dir="rtl"] input[type="date"],
[dir="rtl"] input[type="time"],
[dir="rtl"] input[type="number"] {
    direction: ltr;
    text-align: left;
}


/* ==========================================================
   Step 28 Biometric Kiosk
   ========================================================== */

.kiosk-hero-card .biometric-flow {
    margin-top: 14px;
}

.kiosk-tab.hidden {
    display: none;
}

.camera-panel {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 14px;
}

.camera-panel video,
.camera-panel .selfie-preview {
    width: 100%;
    max-height: 360px;
    object-fit: cover;
    border-radius: 14px;
    background: #000;
    display: block;
    margin-bottom: 10px;
}

.camera-panel .selfie-preview[src=""],
.camera-panel .selfie-preview:not([src]) {
    display: none;
}

.camera-status {
    font-size: 12px;
    color: var(--muted);
    margin-top: 6px;
}

.ess-face-register-card {
    margin-bottom: 18px;
}

.biometric-flow .flow-step {
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text);
    cursor: pointer;
    border-radius: 999px;
    padding: 9px 14px;
    font-weight: 800;
}

.biometric-flow .flow-step.active {
    background: var(--primary);
    color: #fff;
}


/* ==========================================================
   Step 29 Mobile ESS App UI
   ========================================================== */

.ess-mobile-body {
    background: #f3f7fb !important;
    color: #090b23;
    font-family: "Inter", "Segoe UI", Arial, sans-serif;
    min-height: 100vh;
    padding-bottom: 95px;
}

.ess-mobile-shell {
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    padding: 16px 22px 110px;
}

.ess-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 6px 0 18px;
}

.ess-logo-mark {
    font-size: 23px;
    color: #2877f3;
    font-weight: 900;
    letter-spacing: .5px;
}

.ess-top-icons {
    display: flex;
    gap: 13px;
    color: #2877f3;
    font-size: 24px;
}

.ess-greeting-card,
.ess-mobile-card,
.ess-info-card,
.ess-empty-task-card,
.ess-task-card,
.ess-post-card,
.ess-profile-hero,
.ess-profile-card,
.ess-list-card,
.ess-attendance-card {
    background: #fff;
    border-radius: 28px;
    box-shadow: 0 10px 24px rgba(19, 54, 91, .07);
    border: 1px solid rgba(226, 236, 247, .9);
}

.ess-greeting-card {
    padding: 28px 22px 22px;
    display: grid;
    grid-template-columns: 1fr 72px;
    gap: 14px;
    align-items: start;
    margin-bottom: 18px;
}

.ess-greeting-card p {
    font-size: 31px;
    margin: 0;
    color: #10112c;
}

.ess-greeting-card h1 {
    font-size: 31px;
    margin: 2px 0 14px;
    color: #070721;
    font-weight: 900;
}

.ess-greeting-card span {
    color: #3d668f;
    font-size: 20px;
    display: block;
}

.ess-greeting-card strong {
    color: #2877f3;
    font-size: 24px;
    margin-top: 12px;
    display: block;
}

.ess-greeting-card img,
.ess-avatar {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    object-fit: cover;
    background: #e8f0f9;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2877f3;
    font-weight: 900;
    font-size: 24px;
}

.ess-avatar.small {
    width: 50px;
    height: 50px;
    font-size: 16px;
}

.ess-avatar.large {
    width: 96px;
    height: 96px;
    font-size: 34px;
}

.ess-big-outline-btn {
    grid-column: 1 / -1;
    border: 1.8px solid #16162a;
    border-radius: 999px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #17172f;
    text-decoration: none;
    font-weight: 800;
    font-size: 22px;
    margin-top: 4px;
}

.ess-big-outline-btn span {
    color: #ff5b78;
    margin-left: 8px;
}

.ess-info-card {
    display: grid;
    grid-template-columns: 52px 1fr 24px;
    gap: 12px;
    align-items: center;
    padding: 18px 22px;
    margin-bottom: 22px;
}

.ess-info-icon {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    background: #eef7ff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ess-info-card h3 {
    margin: 0;
    color: #070721;
    font-size: 22px;
}

.ess-info-card p {
    margin: 2px 0 0;
    color: #3d668f;
    font-size: 18px;
}

.ess-section-row,
.ess-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 22px 0 10px;
}

.ess-section-row h3,
.ess-page-header h1 {
    margin: 0;
    font-size: 22px;
    color: #090b23;
}

.ess-section-row a,
.ess-page-header a,
.ess-page-header span {
    color: #2877f3;
    text-decoration: none;
    font-size: 22px;
    font-weight: 800;
}

.ess-empty-task-card {
    padding: 26px 24px;
    text-align: center;
}

.ess-illustration {
    font-size: 88px;
    line-height: 1;
}

.ess-empty-task-card h3 {
    margin: 10px 0 4px;
    color: #070721;
    font-size: 22px;
}

.ess-empty-task-card p {
    margin: 0;
    color: #52739b;
    font-size: 18px;
}

.ess-mini-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 18px;
}

.ess-mini-grid a {
    background: #fff;
    border-radius: 24px;
    padding: 18px;
    text-decoration: none;
    color: #090b23;
    box-shadow: 0 10px 24px rgba(19, 54, 91, .06);
}

.ess-mini-grid span {
    font-size: 28px;
    display: block;
}

.ess-mini-grid b,
.ess-mini-grid small {
    display: block;
}

.ess-mini-grid small {
    color: #7b9abc;
    margin-top: 3px;
}

.ess-tabs {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid #ccd8e6;
    margin: 0 -22px 20px;
    padding: 0 22px;
}

.ess-tabs a {
    text-decoration: none;
    color: #426890;
    padding: 12px 0 14px;
    font-size: 18px;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
}

.ess-tabs a.active {
    color: #090b23;
    border-bottom-color: #2877f3;
    font-weight: 800;
}

.ess-task-list,
.ess-updates-list,
.ess-attendance-list {
    display: grid;
    gap: 18px;
}

.ess-task-card {
    padding: 22px;
}

.ess-task-badges {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
}

.ess-task-badges span {
    border-radius: 999px;
    padding: 9px 17px;
    font-weight: 800;
    font-size: 16px;
}

.ess-task-badges .status {
    background: #2877f3;
    color: #fff;
}

.ess-task-badges .priority {
    color: #21bf84;
    border: 1px solid #bbecd9;
    background: #effcf7;
}

.ess-task-card em {
    color: #2d5f8d;
    font-size: 15px;
}

.ess-task-card h2 {
    font-size: 24px;
    margin: 10px 0;
    line-height: 1.3;
}

.ess-task-card p {
    color: #45698e;
    font-size: 17px;
    line-height: 1.45;
}

.ess-date-row {
    color: #090b23;
    font-size: 18px;
    margin: 12px 0;
}

.ess-progress {
    height: 6px;
    border-radius: 999px;
    background: #eef3f9;
    overflow: hidden;
    margin-bottom: 8px;
}

.ess-progress div {
    background: #2877f3;
    height: 100%;
    border-radius: 999px;
}

.ess-progress-row {
    display: flex;
    justify-content: space-between;
    color: #090b23;
}

.ess-progress-row b {
    color: #2877f3;
}

.ess-message-pill {
    border: 1px solid #dce7f3;
    background: #fff;
    border-radius: 999px;
    padding: 9px 18px;
    margin-top: 14px;
    color: #090b23;
    font-weight: 700;
}

.ess-create-row {
    display: flex;
    justify-content: space-around;
    background: #fff;
    margin: -20px -22px 14px;
    padding: 16px 22px;
    border-bottom: 1px solid #e5edf6;
}

.ess-create-row a {
    color: #386b98;
    text-decoration: none;
    font-size: 18px;
}

.ess-post-card {
    padding: 18px;
    border-radius: 16px;
}

.ess-post-author {
    display: grid;
    grid-template-columns: 52px 1fr 24px;
    gap: 12px;
    align-items: center;
}

.ess-post-author span {
    display: block;
    color: #4f759b;
    font-size: 14px;
}

.ess-post-card p {
    font-size: 18px;
    color: #1c1d34;
    line-height: 1.45;
}

.ess-post-actions {
    display: flex;
    gap: 12px;
}

.ess-post-actions span {
    background: #f3f7fb;
    border-radius: 999px;
    padding: 10px 16px;
    color: #3e658d;
}

.ess-profile-hero {
    display: flex;
    gap: 20px;
    align-items: center;
    padding: 26px 22px;
    margin-bottom: 14px;
}

.ess-profile-hero img {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
}

.ess-profile-hero h2 {
    font-size: 31px;
    margin: 0 0 6px;
}

.ess-profile-hero p {
    color: #88a5c2;
    margin: 0;
    font-size: 18px;
}

.ess-profile-card {
    padding: 22px 24px;
    margin-bottom: 14px;
}

.ess-profile-card div {
    padding: 12px 0;
    border-bottom: 1px solid #edf2f8;
}

.ess-profile-card div:last-child {
    border-bottom: 0;
}

.ess-profile-card span {
    display: block;
    color: #9ab3cc;
    font-size: 18px;
    margin-bottom: 6px;
}

.ess-profile-card strong {
    font-size: 21px;
    color: #090b23;
}

.ess-list-card {
    padding: 12px 24px;
    margin-bottom: 18px;
}

.ess-list-card a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-decoration: none;
    color: #090b23;
    padding: 18px 0;
    border-bottom: 1px solid #edf2f8;
    font-size: 21px;
}

.ess-list-card a:last-child {
    border-bottom: 0;
}

.ess-list-card b {
    color: #2877f3;
}

.ess-attendance-card {
    padding: 18px 20px;
    display: grid;
    gap: 8px;
}

.ess-attendance-card div {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ess-attendance-card strong {
    font-size: 18px;
}

.ess-attendance-card span:not(.badge) {
    color: #2877f3;
    font-weight: 800;
}

.ess-attendance-card small {
    color: #6785a6;
}

.ess-bottom-nav {
    position: fixed;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: min(100%, 560px);
    height: 88px;
    background: #fff;
    border-radius: 28px 28px 0 0;
    box-shadow: 0 -8px 24px rgba(19, 54, 91, .12);
    display: grid;
    grid-template-columns: 1fr 1fr 86px 1fr 1fr;
    align-items: center;
    z-index: 1000;
    padding-bottom: env(safe-area-inset-bottom);
}

.ess-bottom-nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    color: #386b98;
    font-size: 13px;
}

.ess-bottom-nav a span {
    font-size: 28px;
}

.ess-bottom-nav a.active {
    color: #2877f3;
}

.ess-fab {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 0;
    background: #2877f3;
    color: #fff;
    font-size: 40px;
    box-shadow: 0 8px 16px rgba(40, 119, 243, .32);
    margin-top: -42px;
}

.ess-quick-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 1100;
}

.ess-quick-backdrop.show {
    display: block;
}

.ess-quick-menu {
    position: fixed;
    left: 50%;
    bottom: 102px;
    transform: translateX(-50%) translateY(20px);
    width: min(310px, calc(100% - 54px));
    background: #fff;
    border-radius: 22px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: .18s ease;
    z-index: 1200;
    box-shadow: 0 18px 40px rgba(0,0,0,.18);
}

.ess-quick-menu.show {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.ess-quick-menu a {
    display: grid;
    grid-template-columns: 34px 1fr 18px;
    gap: 10px;
    align-items: center;
    padding: 16px 18px;
    border-bottom: 1px solid #e8eef5;
    text-decoration: none;
    color: #090b23;
    font-size: 18px;
}

.ess-quick-menu a:last-child {
    border-bottom: 0;
}

.ess-quick-menu span {
    font-size: 24px;
}

.ess-muted {
    color: #7896b7;
}

@media (min-width: 700px) {
    .ess-mobile-body {
        background: #e9f1fa !important;
    }
}


/* ==========================================================
   Step 30 Advanced Biometric Registration
   ========================================================== */

.bio-wizard-grid {
    display: grid;
    grid-template-columns: minmax(320px, 1.1fr) minmax(320px, .9fr);
    gap: 18px;
    align-items: start;
}

.bio-wizard-panel,
.bio-camera-panel {
    border: 1px solid var(--border);
    background: var(--surface-2);
    border-radius: 18px;
    padding: 16px;
}

.bio-step-title {
    font-weight: 900;
    margin: 0 0 10px;
    color: var(--text);
}

.bio-choice-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 10px 0 16px;
}

.bio-choice-row label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    padding: 9px 13px;
    font-weight: 800;
    cursor: pointer;
}

.employee-search-list {
    max-height: 220px;
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    margin: 8px 0;
}

.employee-search-list button {
    width: 100%;
    display: grid;
    grid-template-columns: 90px 1fr auto;
    gap: 10px;
    align-items: center;
    border: 0;
    border-bottom: 1px solid var(--border);
    background: transparent;
    color: var(--text);
    padding: 10px 12px;
    text-align: left;
    cursor: pointer;
}

.employee-search-list button:last-child {
    border-bottom: 0;
}

.employee-search-list button:hover {
    background: rgba(16, 185, 129, .08);
}

.employee-search-list em {
    color: var(--success);
    font-size: 11px;
    font-style: normal;
    font-weight: 900;
}

.selected-employee-pill {
    border: 1px dashed var(--primary);
    border-radius: 12px;
    padding: 9px 10px;
    color: var(--primary);
    font-weight: 900;
    margin-bottom: 14px;
}

.face-circle-wrap {
    position: relative;
    width: min(360px, 100%);
    aspect-ratio: 1 / 1;
    margin: 0 auto 14px;
    border-radius: 50%;
    overflow: hidden;
    background: #05070d;
    box-shadow: inset 0 0 0 8px rgba(255,255,255,.04), 0 12px 30px rgba(0,0,0,.18);
}

.face-circle-wrap video,
.face-circle-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.face-circle-wrap img[src=""],
.face-circle-wrap img:not([src]) {
    display: none;
}

.face-circle-ring {
    position: absolute;
    inset: 18px;
    border-radius: 50%;
    border: 5px solid rgba(16, 185, 129, .8);
    box-shadow: 0 0 0 999px rgba(0,0,0,.08), 0 0 22px rgba(16,185,129,.45);
    pointer-events: none;
    animation: pulseFaceRing 1.8s infinite ease-in-out;
}

.face-circle-ring.verify {
    border-color: rgba(59, 130, 246, .85);
    box-shadow: 0 0 0 999px rgba(0,0,0,.08), 0 0 22px rgba(59,130,246,.45);
}

@keyframes pulseFaceRing {
    0%, 100% { transform: scale(1); opacity: .95; }
    50% { transform: scale(.97); opacity: .65; }
}

.face-depth-guide {
    position: absolute;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%);
    background: rgba(15,23,42,.82);
    color: #fff;
    border-radius: 999px;
    padding: 7px 12px;
    font-weight: 900;
    font-size: 12px;
    white-space: nowrap;
}

.voice-command-box {
    text-align: center;
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: 16px;
    padding: 13px;
    margin-bottom: 12px;
}

.voice-command-box strong {
    display: block;
    font-size: 18px;
    color: var(--primary);
    margin-bottom: 4px;
}

.voice-command-box span {
    color: var(--muted);
    font-size: 12px;
}

.liveness-command-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.liveness-chip {
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: 12px;
    padding: 9px 10px;
    color: var(--muted);
    font-weight: 800;
    text-align: center;
}

.liveness-chip.done {
    background: rgba(16, 185, 129, .12);
    color: var(--success);
    border-color: rgba(16, 185, 129, .35);
}

@media (max-width: 900px) {
    .bio-wizard-grid {
        grid-template-columns: 1fr;
    }

    .employee-search-list button {
        grid-template-columns: 70px 1fr;
    }

    .employee-search-list em {
        grid-column: 1 / -1;
    }
}


/* ==========================================================
   Step 30B Auto Face Identify Punch Fix
   ========================================================== */
.identified-employee-box {
    grid-column: 1 / -1;
    border: 1px dashed var(--primary);
    background: rgba(59, 130, 246, .08);
    color: var(--primary);
    border-radius: 14px;
    padding: 10px 12px;
    margin-bottom: 10px;
    font-weight: 900;
}


/* ==========================================================
   Step 30H FaceID Style Registration / Verify / Punch
   ========================================================== */

.face-circle-wrap {
    border: 2px solid rgba(44, 211, 190, .45);
}

.faceid-scan-arc {
    position: absolute;
    inset: 12px;
    border-radius: 50%;
    border: 8px solid transparent;
    border-top-color: #2cd3be;
    border-right-color: #2cd3be;
    filter: drop-shadow(0 0 10px rgba(44, 211, 190, .65));
    animation: faceidScanRotate 1.35s linear infinite;
    pointer-events: none;
}

.faceid-scan-arc.verify {
    border-top-color: #2563eb;
    border-right-color: #2cd3be;
}

.faceid-dot-grid {
    position: absolute;
    inset: 30%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    opacity: .65;
    pointer-events: none;
}

.faceid-dot-grid span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(44, 211, 190, .8);
    justify-self: center;
    align-self: center;
    animation: faceidDotPulse 1.2s ease-in-out infinite;
}

.faceid-dot-grid span:nth-child(2) { animation-delay: .15s; }
.faceid-dot-grid span:nth-child(3) { animation-delay: .3s; }
.faceid-dot-grid span:nth-child(4) { animation-delay: .45s; }

.faceid-progress-ring {
    --faceid-progress: 0%;
    width: 78px;
    height: 78px;
    border-radius: 50%;
    margin: 0 auto 12px;
    background:
        radial-gradient(circle at center, var(--surface-2) 58%, transparent 59%),
        conic-gradient(#2cd3be var(--faceid-progress), rgba(148, 163, 184, .25) 0);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 22px rgba(44, 211, 190, .18);
    font-weight: 900;
    color: #2cd3be;
}

.faceid-progress-ring.verify {
    background:
        radial-gradient(circle at center, var(--surface-2) 58%, transparent 59%),
        conic-gradient(#2563eb var(--faceid-progress), rgba(148, 163, 184, .25) 0);
    color: #2563eb;
}

.faceid-success .face-circle-ring,
.faceid-success .faceid-scan-arc {
    border-color: #10b981 !important;
    animation-duration: .75s;
}

.faceid-failed .face-circle-ring,
.faceid-failed .faceid-scan-arc {
    border-color: #ef4444 !important;
    filter: drop-shadow(0 0 10px rgba(239, 68, 68, .45));
}

.faceid-detecting .face-depth-guide {
    background: rgba(44, 211, 190, .85);
}

.faceid-failed .face-depth-guide {
    background: rgba(239, 68, 68, .85);
}

.faceid-success .face-depth-guide {
    background: rgba(16, 185, 129, .85);
}

@keyframes faceidScanRotate {
    to { transform: rotate(360deg); }
}

@keyframes faceidDotPulse {
    0%, 100% { transform: scale(.7); opacity: .45; }
    50% { transform: scale(1.25); opacity: 1; }
}

@media (max-width: 700px) {
    .faceid-progress-ring {
        width: 68px;
        height: 68px;
        font-size: 12px;
    }

    .faceid-scan-arc {
        border-width: 6px;
    }
}


/* ==========================================================
   Step 30J Kiosk Auto Punch Buttons + Thank You
   ========================================================== */

.punch-type-button-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(160px, 1fr));
    gap: 14px;
    margin-top: 10px;
}

.punch-type-btn {
    border: 0;
    border-radius: 20px;
    padding: 18px 16px;
    color: #fff;
    font-size: 18px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 12px 24px rgba(15, 23, 42, .18);
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

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

.punch-type-btn.active {
    outline: 4px solid rgba(44, 211, 190, .35);
    transform: translateY(-2px);
}

.punch-type-btn.clock-in {
    background: linear-gradient(135deg, #10b981, #2cd3be);
}

.punch-type-btn.clock-out {
    background: linear-gradient(135deg, #2563eb, #7c3aed);
}

.kiosk-thankyou-panel {
    border-radius: 18px;
    padding: 16px 18px;
    margin: 12px 0;
    background: linear-gradient(135deg, rgba(16,185,129,.15), rgba(44,211,190,.12));
    border: 1px solid rgba(16,185,129,.35);
    color: var(--text);
    text-align: center;
}

.kiosk-thankyou-panel strong {
    display: block;
    font-size: 28px;
    color: #10b981;
    margin-bottom: 6px;
}

.kiosk-thankyou-panel span {
    display: block;
    font-weight: 900;
    color: var(--text);
}

@media (max-width: 700px) {
    .punch-type-button-row {
        grid-template-columns: 1fr;
    }

    .punch-type-btn {
        font-size: 16px;
        padding: 16px;
    }
}


/* ==========================================================
   Step 30K All Attendance Event Buttons + ESS Normal View
   ========================================================== */

.punch-type-button-row.all-events {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.punch-type-btn.other-event {
    background: linear-gradient(135deg, #64748b, #0f172a);
}

.punch-type-btn.other-event.active {
    outline-color: rgba(100, 116, 139, .4);
}


/* ==========================================================
   Step 30L Face Verification Result + Admin Delete
   ========================================================== */

.verified-result-card {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 14px;
    align-items: center;
    border-radius: 18px;
    padding: 16px;
    margin: 12px 0;
    background: linear-gradient(135deg, rgba(16,185,129,.18), rgba(44,211,190,.12));
    border: 1px solid rgba(16,185,129,.38);
}

.verified-result-card.hidden {
    display: none;
}

.verified-result-card .verified-icon {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: #10b981;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    font-weight: 900;
}

.verified-result-card b,
.verified-result-card span {
    display: block;
}

.verified-result-card b {
    font-size: 20px;
    color: #10b981;
}

.verified-result-card span {
    font-weight: 800;
    color: var(--text);
    margin-top: 3px;
}

.ess-own-face-status-card {
    border: 1px solid var(--border);
    background: var(--surface-2);
    border-radius: 16px;
    padding: 14px 16px;
    margin: 12px 0 16px;
}

.ess-own-face-status-card strong,
.ess-own-face-status-card span,
.ess-own-face-status-card small {
    display: block;
}

.ess-own-face-status-card strong {
    color: var(--primary);
    font-size: 16px;
}

.ess-own-face-status-card span {
    margin-top: 4px;
    font-weight: 800;
}

.ess-own-face-status-card small {
    margin-top: 4px;
    color: var(--muted);
}


/* ==========================================================
   Step 30M GPS Address Punch Fix
   ========================================================== */

.gps-address-box {
    border: 1px solid rgba(59, 130, 246, .25);
    background: rgba(59, 130, 246, .08);
    border-radius: 16px;
    padding: 12px 14px;
    margin: 10px 0 12px;
}

.gps-address-box strong,
.gps-address-box span,
.gps-address-box small {
    display: block;
}

.gps-address-box strong {
    color: var(--primary);
    font-size: 13px;
    margin-bottom: 4px;
}

.gps-address-box span {
    font-weight: 800;
    color: var(--text);
    line-height: 1.35;
}

.gps-address-box small {
    margin-top: 5px;
    color: var(--muted);
    font-size: 12px;
}


/* ==========================================================
   Step 30P Sequence Warning — No False Thank You
   ========================================================== */

.kiosk-warning-panel {
    border-radius: 18px;
    padding: 16px 18px;
    margin: 12px 0;
    background: linear-gradient(135deg, rgba(245,158,11,.18), rgba(239,68,68,.12));
    border: 1px solid rgba(245,158,11,.45);
    color: var(--text);
    text-align: center;
}

.kiosk-warning-panel.hidden {
    display: none;
}

.kiosk-warning-panel strong {
    display: block;
    font-size: 24px;
    color: #f59e0b;
    margin-bottom: 7px;
}

.kiosk-warning-panel span {
    display: block;
    font-weight: 900;
    color: var(--text);
    line-height: 1.35;
}


/* ==========================================================
   Step 30Q Registration No False Success
   ========================================================== */

.kiosk-thankyou-panel.registration-saving {
    background: linear-gradient(135deg, rgba(59,130,246,.16), rgba(44,211,190,.10));
    border-color: rgba(59,130,246,.35);
}

.kiosk-thankyou-panel.registration-saving strong {
    color: #2563eb;
}

.kiosk-thankyou-panel.registration-success {
    background: linear-gradient(135deg, rgba(16,185,129,.18), rgba(44,211,190,.12));
    border-color: rgba(16,185,129,.38);
}

.kiosk-thankyou-panel.registration-success strong {
    color: #10b981;
}

.kiosk-thankyou-panel.registration-error {
    background: linear-gradient(135deg, rgba(239,68,68,.16), rgba(245,158,11,.10));
    border-color: rgba(239,68,68,.38);
}

.kiosk-thankyou-panel.registration-error strong {
    color: #ef4444;
}


/* ==========================================================
   Step 30R Event Layout Permission + Kiosk Reference UI
   ========================================================== */

.kiosk-punch-reference {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
    background:
        radial-gradient(circle at 50% 42%, rgba(0, 224, 193, .16), transparent 34%),
        linear-gradient(180deg, rgba(8,18,34,.96), rgba(4,10,20,.98));
    border: 1px solid rgba(0, 224, 193, .32);
    box-shadow: 0 20px 60px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.03);
}

.kiosk-time-panel {
    text-align: center;
    border-radius: 0;
    padding: 30px 16px 26px;
    background: rgba(15, 23, 42, .50);
    margin: -8px -8px 16px;
}

.kiosk-time-panel strong {
    display: block;
    font-size: clamp(44px, 8vw, 76px);
    line-height: 1;
    color: #00b894;
    letter-spacing: 2px;
    font-weight: 950;
}

.kiosk-time-panel span {
    display: block;
    margin-top: 14px;
    font-size: clamp(30px, 5vw, 54px);
    line-height: 1;
    color: #00b894;
    letter-spacing: 3px;
    font-weight: 950;
}

.kiosk-punch-reference .attendance-punch-grid {
    display: flex;
    flex-direction: column-reverse;
    gap: 18px;
}

.kiosk-punch-reference .bio-camera-panel {
    background:
        radial-gradient(circle at center, rgba(44, 211, 190, .15), transparent 45%),
        rgba(15, 23, 42, .65);
    border-radius: 22px;
    border: 1px solid rgba(148, 163, 184, .20);
}

.kiosk-punch-reference .face-circle-wrap {
    max-width: 360px;
    border-color: rgba(44, 211, 190, .38);
    box-shadow: 0 0 45px rgba(44, 211, 190, .12), inset 0 0 0 1px rgba(255,255,255,.04);
}

.kiosk-punch-reference .punch-type-button-row.all-events {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 18px;
}

.kiosk-punch-reference .punch-type-btn {
    min-height: 62px;
    border-radius: 16px;
    font-size: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.kiosk-punch-reference .punch-type-btn.other-event {
    background: linear-gradient(135deg, #334e72, #172b4a);
}

.kiosk-punch-reference .event-icon {
    font-size: 24px;
    line-height: 1;
}

.kiosk-punch-reference .muted-help {
    display: block;
    text-align: center;
    color: rgba(226, 232, 240, .75);
    font-size: 14px;
    margin-top: 18px;
}

.kiosk-punch-reference .gps-address-box {
    background: rgba(0, 224, 193, .08);
    border-color: rgba(0, 224, 193, .22);
}

.kiosk-punch-reference .gps-address-box strong {
    color: #00d9b8;
}

.kiosk-punch-reference .section-header {
    display: none;
}

@media (max-width: 700px) {
    .kiosk-punch-reference .punch-type-button-row.all-events {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================
   Step 30S No Fake Thank You + Mobile Kiosk Fullscreen
   ========================================================== */

.kiosk-only-tabs {
    max-width: 760px;
    margin: 0 auto 10px;
    padding: 10px;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.kiosk-only-tabs .biometric-flow {
    margin: 0;
}

body:has(.kiosk-punch-reference) .page-header,
body:has(.kiosk-punch-reference) .topbar,
body:has(.kiosk-punch-reference) .theme-toggle,
body:has(.kiosk-punch-reference) .user-chip,
body:has(.kiosk-punch-reference) .alert-success {
    display: none !important;
}

body:has(.kiosk-punch-reference) .main-content,
body:has(.kiosk-punch-reference) .content,
body:has(.kiosk-punch-reference) .app-content {
    padding-top: 8px !important;
}

body:has(.kiosk-punch-reference) {
    background: #030712;
}

.kiosk-punch-reference .kiosk-thankyou-panel.hidden,
.kiosk-punch-reference .verified-result-card.hidden,
.kiosk-punch-reference .kiosk-warning-panel.hidden {
    display: none !important;
}

.kiosk-punch-reference .kiosk-thankyou-panel:not(.hidden) {
    display: block !important;
}

.kiosk-punch-reference .verified-result-card:not(.hidden) {
    display: grid !important;
}

.kiosk-punch-reference .kiosk-warning-panel:not(.hidden) {
    display: block !important;
}

@media (max-width: 768px) {
    body:has(.kiosk-punch-reference) .sidebar {
        display: none !important;
    }

    body:has(.kiosk-punch-reference) .main-content,
    body:has(.kiosk-punch-reference) .content,
    body:has(.kiosk-punch-reference) .app-main,
    body:has(.kiosk-punch-reference) main {
        margin-left: 0 !important;
        width: 100% !important;
        padding: 4px !important;
    }

    .kiosk-only-tabs,
    .kiosk-punch-reference {
        max-width: 100%;
        width: 100%;
        border-radius: 14px;
        margin: 0 auto 8px;
    }

    .kiosk-punch-reference .kiosk-time-panel {
        padding: 20px 10px 18px;
        margin: -8px -8px 10px;
    }

    .kiosk-punch-reference .kiosk-time-panel strong {
        font-size: 44px;
    }

    .kiosk-punch-reference .kiosk-time-panel span {
        font-size: 34px;
        margin-top: 8px;
    }

    .kiosk-punch-reference .bio-camera-panel {
        padding: 10px;
    }

    .kiosk-punch-reference .face-circle-wrap {
        max-width: 280px;
    }

    .kiosk-punch-reference .punch-type-btn {
        min-height: 52px;
        font-size: 15px;
        border-radius: 14px;
    }

    .kiosk-punch-reference .punch-type-button-row.all-events {
        gap: 10px;
    }

    .gps-address-box,
    .identified-employee-box {
        font-size: 12px;
    }
}


/* ==========================================================
   Step 30T PWA Install
   ========================================================== */
.pwa-install-btn {
    position: fixed;
    top: 12px;
    right: 118px;
    z-index: 1000;
    border: 0;
    border-radius: 999px;
    padding: 8px 12px;
    background: linear-gradient(135deg, #10b981, #2563eb);
    color: #fff;
    font-weight: 900;
    font-size: 12px;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(0,0,0,.2);
}

body:has(.kiosk-punch-reference) .pwa-install-btn {
    right: 12px;
    top: 8px;
    opacity: .9;
}

@media (max-width: 700px) {
    .pwa-install-btn {
        right: 10px;
        top: 8px;
        padding: 7px 10px;
        font-size: 11px;
    }
}


/* ==========================================================
   Step 30U Mobile Kiosk Final Layout + Stop Scan
   ========================================================== */

.kiosk-only-tabs {
    max-width: 760px !important;
    margin: 8px auto 0 !important;
    padding: 16px !important;
    border-radius: 22px !important;
    background: linear-gradient(180deg, rgba(8,18,34,.96), rgba(4,10,20,.98)) !important;
    border: 1px solid rgba(0, 224, 193, .25) !important;
    box-shadow: 0 18px 55px rgba(0,0,0,.35) !important;
}

.kiosk-brand-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 4px 14px;
    border-bottom: 1px solid rgba(148,163,184,.16);
    margin-bottom: 12px;
}

.kiosk-brand-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #20e3c1;
    border: 2px solid rgba(32,227,193,.7);
    font-size: 24px;
    box-shadow: 0 0 20px rgba(32,227,193,.18);
}

.kiosk-brand-header strong,
.kiosk-brand-header span {
    display: block;
}

.kiosk-brand-header strong {
    font-size: 23px;
    color: #fff;
    line-height: 1.1;
}

.kiosk-brand-header span {
    font-size: 13px;
    color: rgba(203,213,225,.75);
    margin-top: 4px;
}

.kiosk-only-tabs .biometric-flow {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0 !important;
    overflow: hidden;
    border: 1px solid rgba(148,163,184,.18);
    border-radius: 13px;
    background: rgba(15,23,42,.45);
}

.kiosk-only-tabs .flow-step {
    min-height: 46px !important;
    border-radius: 0 !important;
    border: 0 !important;
    border-right: 1px solid rgba(148,163,184,.16) !important;
    background: transparent !important;
    color: rgba(226,232,240,.78) !important;
    font-size: 13px !important;
    white-space: nowrap;
}

.kiosk-only-tabs .flow-step:last-child {
    border-right: 0 !important;
}

.kiosk-only-tabs .flow-step.active {
    color: #fff !important;
    background: linear-gradient(135deg, #10b981, #14b8a6) !important;
}

.kiosk-punch-reference {
    max-width: 760px !important;
    margin: 0 auto 12px !important;
    padding: 0 16px 16px !important;
    border-radius: 0 0 22px 22px !important;
    border-top: 0 !important;
}

.kiosk-punch-reference .kiosk-time-panel {
    padding: 26px 12px 24px !important;
    margin: 0 -16px 8px !important;
    border-bottom: 1px solid rgba(148,163,184,.08);
}

.kiosk-punch-reference .kiosk-time-panel strong {
    font-size: clamp(40px, 8vw, 62px) !important;
}

.kiosk-punch-reference .kiosk-time-panel span {
    font-size: clamp(30px, 6vw, 50px) !important;
    margin-top: 8px !important;
}

.kiosk-punch-reference .attendance-punch-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
}

.kiosk-punch-reference .bio-camera-panel {
    order: 1 !important;
    max-width: 600px;
    width: 100%;
    margin: 0 auto !important;
    padding: 12px !important;
}

.kiosk-punch-reference .punch-main {
    order: 2 !important;
}

.kiosk-punch-reference .gps-address-box {
    order: 3 !important;
}

.kiosk-punch-reference .face-circle-wrap {
    width: min(340px, 82vw) !important;
    max-width: 340px !important;
    margin: 0 auto 8px !important;
}

.kiosk-punch-reference .faceid-progress-ring {
    width: 58px !important;
    height: 58px !important;
    margin-bottom: 8px !important;
    font-size: 12px !important;
}

.kiosk-punch-reference #punch_camera_status,
.kiosk-punch-reference #punch_gps_status {
    font-size: 12px !important;
    line-height: 1.25 !important;
    margin: 4px 0 !important;
}

.kiosk-punch-reference .form-group.full > label {
    display: none !important;
}

.kiosk-punch-reference .punch-type-button-row.all-events {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px 14px !important;
    margin-top: 4px !important;
}

.kiosk-punch-reference .punch-type-btn {
    min-height: 50px !important;
    padding: 10px 12px !important;
    border-radius: 14px !important;
    font-size: 15px !important;
    box-shadow: 0 8px 18px rgba(0,0,0,.18) !important;
}

.kiosk-punch-reference .event-icon {
    font-size: 18px !important;
}

.kiosk-punch-reference .muted-help {
    margin-top: 12px !important;
    font-size: 12px !important;
}

.kiosk-punch-reference .identified-employee-box {
    margin: 8px 0 10px !important;
    padding: 10px 12px !important;
    font-size: 13px !important;
}

.kiosk-punch-reference .gps-address-box {
    margin: 12px 0 0 !important;
    padding: 12px !important;
}

.kiosk-punch-reference .kiosk-thankyou-panel,
.kiosk-punch-reference .kiosk-warning-panel,
.kiosk-punch-reference .verified-result-card {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(92vw, 420px);
    z-index: 5000;
    box-shadow: 0 25px 80px rgba(0,0,0,.65);
}

.punch-type-btn.disabled-during-result {
    opacity: .55 !important;
    pointer-events: none !important;
}

body:has(.kiosk-punch-reference) .quick-lang-switch {
    bottom: 10px !important;
    right: 10px !important;
    top: auto !important;
}

body:has(.kiosk-punch-reference) .pwa-install-btn {
    top: 10px !important;
    right: 10px !important;
    transform: scale(.88);
    transform-origin: top right;
}

@media (max-width: 768px) {
    .kiosk-only-tabs {
        margin: 6px 8px 0 !important;
        padding: 12px !important;
        border-radius: 18px 18px 0 0 !important;
    }

    .kiosk-brand-header {
        padding-bottom: 10px !important;
        margin-bottom: 10px !important;
    }

    .kiosk-brand-icon {
        width: 38px !important;
        height: 38px !important;
        border-radius: 12px !important;
        font-size: 20px !important;
    }

    .kiosk-brand-header strong {
        font-size: 18px !important;
    }

    .kiosk-brand-header span {
        font-size: 11px !important;
    }

    .kiosk-only-tabs .biometric-flow {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .kiosk-only-tabs .flow-step {
        min-height: 42px !important;
        font-size: 11px !important;
        padding: 8px 3px !important;
    }

    .kiosk-punch-reference {
        margin: 0 8px 10px !important;
        padding: 0 10px 12px !important;
        border-radius: 0 0 18px 18px !important;
    }

    .kiosk-punch-reference .kiosk-time-panel {
        padding: 16px 8px 14px !important;
        margin: 0 -10px 8px !important;
    }

    .kiosk-punch-reference .kiosk-time-panel strong {
        font-size: 36px !important;
        letter-spacing: 1px !important;
    }

    .kiosk-punch-reference .kiosk-time-panel span {
        font-size: 28px !important;
        letter-spacing: 2px !important;
    }

    .kiosk-punch-reference .bio-camera-panel {
        padding: 8px !important;
        border-radius: 18px !important;
    }

    .kiosk-punch-reference .face-circle-wrap {
        width: min(250px, 70vw) !important;
        max-width: 250px !important;
    }

    .kiosk-punch-reference .faceid-scan-arc {
        inset: 9px !important;
        border-width: 5px !important;
    }

    .kiosk-punch-reference .face-circle-ring {
        inset: 14px !important;
        border-width: 4px !important;
    }

    .kiosk-punch-reference .face-depth-guide {
        font-size: 10px !important;
        padding: 5px 9px !important;
        bottom: 14px !important;
    }

    .kiosk-punch-reference .faceid-progress-ring {
        width: 48px !important;
        height: 48px !important;
    }

    .kiosk-punch-reference .punch-type-button-row.all-events {
        gap: 8px !important;
    }

    .kiosk-punch-reference .punch-type-btn {
        min-height: 46px !important;
        padding: 8px 10px !important;
        font-size: 13px !important;
        border-radius: 12px !important;
    }

    .kiosk-punch-reference .event-icon {
        font-size: 16px !important;
    }

    .kiosk-punch-reference .gps-address-box {
        font-size: 12px !important;
    }
}

@media (max-width: 390px) {
    .kiosk-punch-reference .face-circle-wrap {
        width: min(220px, 68vw) !important;
        max-width: 220px !important;
    }

    .kiosk-punch-reference .punch-type-btn {
        font-size: 12px !important;
        min-height: 42px !important;
    }
}


/* ==========================================================
   Step 30V Kiosk Scan Lock + Event Type Final Polish
   ========================================================== */

.kiosk-punch-reference .identified-employee-box:empty {
    display: none !important;
}

.kiosk-punch-reference .section-header {
    display: none !important;
}

.kiosk-punch-reference .kiosk-time-panel strong {
    font-size: clamp(34px, 6vw, 52px) !important;
}

.kiosk-punch-reference .kiosk-time-panel span {
    font-size: clamp(24px, 4.5vw, 42px) !important;
}

.kiosk-punch-reference .bio-camera-panel {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

.kiosk-punch-reference .punch-type-btn {
    min-height: 44px !important;
    padding: 8px 10px !important;
    font-size: 14px !important;
}

.kiosk-punch-reference .face-circle-wrap {
    align-self: center !important;
}

@media (max-width: 768px) {
    .kiosk-punch-reference .kiosk-time-panel {
        padding: 12px 8px 10px !important;
    }

    .kiosk-punch-reference .kiosk-time-panel strong {
        font-size: 30px !important;
    }

    .kiosk-punch-reference .kiosk-time-panel span {
        font-size: 24px !important;
    }

    .kiosk-punch-reference .face-circle-wrap {
        width: min(230px, 64vw) !important;
        max-width: 230px !important;
    }

    .kiosk-punch-reference .punch-type-button-row.all-events {
        gap: 7px !important;
    }

    .kiosk-punch-reference .punch-type-btn {
        min-height: 40px !important;
        padding: 7px 9px !important;
        font-size: 12.5px !important;
    }
}

@media (max-width: 390px) {
    .kiosk-punch-reference .kiosk-time-panel strong {
        font-size: 28px !important;
    }

    .kiosk-punch-reference .kiosk-time-panel span {
        font-size: 22px !important;
    }

    .kiosk-punch-reference .face-circle-wrap {
        width: min(205px, 62vw) !important;
        max-width: 205px !important;
    }

    .kiosk-punch-reference .punch-type-btn {
        min-height: 38px !important;
        font-size: 12px !important;
    }
}


/* ==========================================================
   Step 30W Kiosk Popup / GPS / Fullscreen Fix
   ========================================================== */

body:has(.kiosk-punch-reference) {
    overflow-x: hidden;
    overscroll-behavior: none;
}

body:has(.kiosk-punch-reference) .kiosk-punch-reference {
    min-height: 100dvh;
}

.kiosk-punch-reference .attendance-punch-grid {
    display: flex !important;
    flex-direction: column !important;
}

.kiosk-punch-reference .bio-camera-panel {
    order: 1 !important;
}

.kiosk-punch-reference .gps-address-box {
    order: 2 !important;
}

.kiosk-punch-reference .punch-main {
    order: 3 !important;
}

.kiosk-punch-reference .punch-type-button-row.all-events {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
}

.kiosk-punch-reference .punch-type-btn {
    min-height: 40px !important;
    padding: 7px 8px !important;
    font-size: 12px !important;
    border-radius: 12px !important;
}

.kiosk-punch-reference .event-icon {
    font-size: 14px !important;
}

.kiosk-punch-reference .kiosk-thankyou-panel,
.kiosk-punch-reference .kiosk-warning-panel,
.kiosk-punch-reference .verified-result-card {
    max-height: 72dvh;
    overflow: auto;
    text-align: center;
}

.kiosk-punch-reference .kiosk-warning-panel {
    background: linear-gradient(135deg, rgba(245,158,11,.94), rgba(127,29,29,.92)) !important;
    border: 1px solid rgba(245,158,11,.85) !important;
    color: #fff !important;
}

.kiosk-punch-reference .kiosk-warning-panel strong {
    color: #fff !important;
}

.kiosk-punch-reference .kiosk-warning-panel span {
    color: #fff !important;
    font-size: 14px !important;
}

.kiosk-punch-reference .verified-result-card:not(.hidden) + .kiosk-warning-panel:not(.hidden),
.kiosk-punch-reference .kiosk-warning-panel:not(.hidden) ~ .verified-result-card {
    display: none !important;
}

@media (max-width: 768px) {
    .kiosk-punch-reference .punch-type-button-row.all-events {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 7px !important;
    }

    .kiosk-punch-reference .punch-type-btn {
        min-height: 38px !important;
        padding: 6px 6px !important;
        font-size: 11.5px !important;
        border-radius: 11px !important;
        gap: 5px !important;
    }

    .kiosk-punch-reference .event-icon {
        font-size: 13px !important;
    }

    .kiosk-punch-reference .gps-address-box {
        margin: 8px 0 10px !important;
    }
}

@media (max-width: 390px) {
    .kiosk-punch-reference .punch-type-btn {
        font-size: 10.5px !important;
        min-height: 36px !important;
    }
}


/* ==========================================================
   Step 30X Kiosk Clean Fullscreen Refresh
   ========================================================== */

body:has(.kiosk-punch-reference) .quick-lang-switch,
body:has(.kiosk-punch-reference) .pwa-install-btn,
body:has(.kiosk-punch-reference) [data-pwa-install-btn] {
    display: none !important;
}

body:has(.kiosk-punch-reference) {
    background: #020617 !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
    touch-action: manipulation;
}

body:has(.kiosk-punch-reference) .main-content,
body:has(.kiosk-punch-reference) .content,
body:has(.kiosk-punch-reference) .app-main,
body:has(.kiosk-punch-reference) main {
    min-height: 100dvh !important;
    height: 100dvh !important;
    overflow: hidden !important;
}

.kiosk-punch-reference {
    min-height: 100dvh !important;
    height: 100dvh !important;
    overflow: hidden !important;
    padding-bottom: 66px !important;
}

.kiosk-punch-reference .attendance-punch-grid {
    height: calc(100dvh - 190px) !important;
    overflow: hidden !important;
}

.kiosk-punch-reference .bio-camera-panel {
    flex: 0 0 auto !important;
}

.kiosk-punch-reference .punch-main {
    flex: 0 0 auto !important;
}

.kiosk-punch-reference .gps-address-box {
    flex: 0 0 auto !important;
}

.kiosk-punch-reference .punch-type-button-row.all-events {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    justify-items: stretch !important;
    gap: 8px !important;
}

.kiosk-punch-reference .punch-type-btn {
    width: 100% !important;
    min-width: 0 !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: nowrap !important;
}

.kiosk-punch-reference .kiosk-thankyou-panel {
    display: block;
    text-align: center !important;
    padding: 18px 16px !important;
}

.kiosk-punch-reference .kiosk-thankyou-panel.hidden {
    display: none !important;
}

.kiosk-punch-reference .kiosk-result-icon {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: #10b981;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
    font-size: 34px;
    font-weight: 950;
}

.kiosk-punch-reference #punchSuccessTitle {
    display: block;
    font-size: 26px !important;
    color: #10b981 !important;
    line-height: 1.1 !important;
    margin: 0 0 8px !important;
}

.kiosk-punch-reference #punchSuccessEmployee {
    display: block;
    font-size: 16px !important;
    color: #fff !important;
    line-height: 1.45 !important;
    word-break: break-word;
}

.kiosk-punch-reference #punchSuccessEmployee b {
    color: rgba(255,255,255,.82);
}

.kiosk-punch-reference .verified-result-card {
    display: none !important;
}

.kiosk-refresh-btn {
    position: fixed;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    z-index: 7000;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    border: 1px solid rgba(44,211,190,.45);
    background: linear-gradient(135deg, #10b981, #2563eb);
    color: #fff;
    font-size: 28px;
    font-weight: 900;
    box-shadow: 0 14px 34px rgba(0,0,0,.45);
    cursor: pointer;
}

@media (max-width: 768px) {
    .kiosk-punch-reference {
        padding-bottom: 70px !important;
    }

    .kiosk-punch-reference .attendance-punch-grid {
        height: auto !important;
    }

    .kiosk-punch-reference .face-circle-wrap {
        width: min(205px, 58vw) !important;
        max-width: 205px !important;
    }

    .kiosk-punch-reference .kiosk-time-panel strong {
        font-size: 28px !important;
    }

    .kiosk-punch-reference .kiosk-time-panel span {
        font-size: 21px !important;
    }

    .kiosk-punch-reference .punch-type-button-row.all-events {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 7px !important;
    }

    .kiosk-punch-reference .punch-type-btn {
        min-height: 36px !important;
        padding: 5px 5px !important;
        font-size: 10.5px !important;
        gap: 4px !important;
        border-radius: 10px !important;
    }

    .kiosk-punch-reference .event-icon {
        font-size: 11px !important;
    }

    .kiosk-punch-reference .gps-address-box {
        padding: 9px 10px !important;
        margin: 7px 0 8px !important;
    }

    .kiosk-punch-reference .gps-address-box span,
    .kiosk-punch-reference .gps-address-box small {
        font-size: 11px !important;
        line-height: 1.35 !important;
    }

    .kiosk-refresh-btn {
        width: 52px;
        height: 52px;
        font-size: 24px;
        bottom: 10px;
    }
}


/* ==========================================================
   Step 30Y Kiosk Button Width + Refresh Center + Hide Menu
   ========================================================== */

/* Hide menu / hamburger only on biometric kiosk page */
body:has(.kiosk-punch-reference) .menu-toggle,
body:has(.kiosk-punch-reference) .sidebar-toggle,
body:has(.kiosk-punch-reference) .mobile-menu-toggle,
body:has(.kiosk-punch-reference) .hamburger,
body:has(.kiosk-punch-reference) .hamburger-btn,
body:has(.kiosk-punch-reference) button[aria-label="Menu"],
body:has(.kiosk-punch-reference) .top-demo-header,
body:has(.kiosk-punch-reference) .sidebar {
    display: none !important;
}

/* Let kiosk content use the full available viewport */
body:has(.kiosk-punch-reference) .main-content,
body:has(.kiosk-punch-reference) .content,
body:has(.kiosk-punch-reference) .app-content,
body:has(.kiosk-punch-reference) .app-main,
body:has(.kiosk-punch-reference) main {
    margin-left: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Stretch kiosk to viewport width while keeping nice max width on large displays */
.kiosk-only-tabs,
.kiosk-punch-reference {
    width: min(100vw, 760px) !important;
    max-width: min(100vw, 760px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

/* Full-width, evenly aligned 3-column button grid */
.kiosk-punch-reference .punch-main,
.kiosk-punch-reference .form-grid,
.kiosk-punch-reference .professional-form,
.kiosk-punch-reference .form-group.full,
.kiosk-punch-reference .punch-type-button-row.all-events {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.kiosk-punch-reference .punch-type-button-row.all-events {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
    justify-content: stretch !important;
    align-items: stretch !important;
    margin: 12px 0 0 !important;
}

.kiosk-punch-reference .punch-type-btn {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 44px !important;
    padding: 8px 6px !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* GPS should also stretch naturally */
.kiosk-punch-reference .gps-address-box {
    width: 100% !important;
    max-width: 100% !important;
}

/* Refresh button exactly bottom center */
.kiosk-refresh-btn {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 14px) !important;
    transform: translateX(-50%) !important;
    z-index: 9999 !important;
    margin: 0 !important;
}

@media (max-width: 768px) {
    .kiosk-only-tabs,
    .kiosk-punch-reference {
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        border-radius: 0 !important;
    }

    .kiosk-punch-reference {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .kiosk-punch-reference .punch-type-button-row.all-events {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
    }

    .kiosk-punch-reference .punch-type-btn {
        min-height: 42px !important;
        font-size: 11px !important;
        padding: 7px 4px !important;
    }

    .kiosk-refresh-btn {
        width: 54px !important;
        height: 54px !important;
        bottom: calc(env(safe-area-inset-bottom, 0px) + 12px) !important;
    }
}

@media (max-width: 390px) {
    .kiosk-punch-reference {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .kiosk-punch-reference .punch-type-button-row.all-events {
        gap: 6px !important;
    }

    .kiosk-punch-reference .punch-type-btn {
        min-height: 40px !important;
        font-size: 10px !important;
        padding: 6px 3px !important;
    }
}


/* ==========================================================
   Step 30Z Kiosk Voice Prompts
   ========================================================== */

.kiosk-punch-reference .voice-status-pill {
    width: 100%;
    border: 1px dashed rgba(44, 211, 190, .55);
    background: rgba(44, 211, 190, .08);
    color: #2cd3be;
    border-radius: 14px;
    padding: 10px 12px;
    margin: 8px 0 10px;
    font-weight: 900;
    text-align: center;
    line-height: 1.35;
}

.kiosk-punch-reference .voice-status-pill.hidden {
    display: none !important;
}

@media (max-width: 768px) {
    .kiosk-punch-reference .voice-status-pill {
        font-size: 11px;
        padding: 8px 10px;
        margin: 6px 0 8px;
    }
}


/* ==========================================================
   Step 30AA Voice Trim + Refresh Near Time
   ========================================================== */

/* Refresh button is now inside the time panel, right side */
.kiosk-punch-reference .kiosk-time-panel {
    position: relative !important;
}

.kiosk-punch-reference .kiosk-refresh-btn {
    position: absolute !important;
    left: auto !important;
    right: 14px !important;
    top: 14px !important;
    bottom: auto !important;
    transform: none !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 14px !important;
    font-size: 22px !important;
    z-index: 20 !important;
    margin: 0 !important;
}

@media (max-width: 768px) {
    .kiosk-punch-reference .kiosk-refresh-btn {
        right: 10px !important;
        top: 10px !important;
        width: 38px !important;
        height: 38px !important;
        border-radius: 12px !important;
        font-size: 19px !important;
    }
}

@media (max-width: 390px) {
    .kiosk-punch-reference .kiosk-refresh-btn {
        right: 8px !important;
        top: 8px !important;
        width: 34px !important;
        height: 34px !important;
        font-size: 17px !important;
    }
}


/* ==========================================================
   Step 30AC Register Flow Preserve Punch
   ========================================================== */

.kiosk-register-reference {
    max-width: 760px !important;
    margin: 0 auto 12px !important;
    padding: 0 16px 16px !important;
    border-radius: 0 0 22px 22px !important;
    border-top: 0 !important;
    min-height: 100dvh;
    background:
        radial-gradient(circle at 50% 35%, rgba(0, 224, 193, .13), transparent 38%),
        linear-gradient(180deg, rgba(8,18,34,.96), rgba(4,10,20,.98)) !important;
}

.kiosk-register-reference .register-time-panel {
    position: relative !important;
    text-align: center;
    padding: 22px 12px 18px !important;
    margin: 0 -16px 12px !important;
    background: rgba(15, 23, 42, .48);
    border-bottom: 1px solid rgba(148,163,184,.08);
}

.kiosk-register-reference .register-time-panel strong {
    display: block;
    font-size: clamp(30px, 6vw, 48px) !important;
    color: #00b894;
    font-weight: 950;
    letter-spacing: 1px;
}

.kiosk-register-reference .register-time-panel span {
    display: block;
    font-size: 14px !important;
    color: rgba(226,232,240,.8);
    margin-top: 6px;
    font-weight: 800;
}

.register-step-panel {
    width: 100%;
    max-width: 620px;
    margin: 0 auto 14px;
    background: rgba(15,23,42,.64);
    border: 1px solid rgba(148,163,184,.18);
    border-radius: 22px;
    padding: 16px;
}

.register-card-title {
    font-size: 17px;
    font-weight: 950;
    color: #fff;
    margin-bottom: 12px;
}

.register-choice-grid {
    display: grid;
    gap: 12px;
}

.register-choice-grid.two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.register-choice-grid.three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.register-choice-btn {
    border: 0;
    border-radius: 18px;
    min-height: 82px;
    padding: 14px 12px;
    color: #fff;
    background: linear-gradient(135deg, #334e72, #172b4a);
    box-shadow: 0 10px 24px rgba(0,0,0,.22);
    cursor: pointer;
    text-align: center;
}

.register-choice-btn.primary {
    background: linear-gradient(135deg, #10b981, #14b8a6);
}

.register-choice-btn span,
.register-choice-btn small {
    display: block;
}

.register-choice-btn span {
    font-size: 18px;
    font-weight: 950;
}

.register-choice-btn small {
    margin-top: 6px;
    color: rgba(255,255,255,.76);
    font-size: 12px;
    line-height: 1.3;
}

.register-search-box input,
.compact-register-form input {
    min-height: 48px !important;
    border-radius: 14px !important;
}

.register-employee-list {
    max-height: 340px;
    overflow: auto;
    padding-right: 4px;
}

.register-employee-list button {
    border-radius: 15px !important;
    margin-bottom: 8px;
}

.register-back-btn {
    border: 0;
    border-radius: 999px;
    padding: 8px 12px;
    margin-bottom: 10px;
    background: rgba(148,163,184,.16);
    color: #fff;
    font-weight: 900;
    cursor: pointer;
}

.selected-employee-pill.strong {
    font-size: 15px;
    color: #2cd3be;
    font-weight: 950;
    border-color: rgba(44,211,190,.36);
    background: rgba(44,211,190,.08);
    margin-bottom: 12px;
}

.finger-status-text {
    margin-top: 12px;
    color: rgba(226,232,240,.78);
    font-weight: 800;
    text-align: center;
}

.register-next-btn {
    width: 100%;
    margin-top: 12px;
    min-height: 46px;
    border-radius: 14px;
}

.register-camera-panel {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    background:
        radial-gradient(circle at center, rgba(44, 211, 190, .15), transparent 45%),
        rgba(15, 23, 42, .65);
    border-radius: 22px;
    border: 1px solid rgba(148, 163, 184, .20);
    padding: 14px;
}

.register-face-circle {
    width: min(330px, 76vw) !important;
    max-width: 330px !important;
    margin: 0 auto 8px !important;
}

.register-voice-box {
    max-width: 620px;
    margin: 0 auto 12px;
    text-align: center;
}

@media (max-width: 768px) {
    .kiosk-register-reference {
        width: 100vw !important;
        max-width: 100vw !important;
        margin: 0 !important;
        padding: 0 12px 14px !important;
        border-radius: 0 !important;
    }

    .kiosk-register-reference .register-time-panel {
        padding: 14px 42px 12px !important;
        margin: 0 -12px 10px !important;
    }

    .kiosk-register-reference .register-time-panel strong {
        font-size: 28px !important;
    }

    .kiosk-register-reference .register-time-panel span {
        font-size: 11px !important;
    }

    .register-step-panel {
        border-radius: 18px;
        padding: 12px;
    }

    .register-choice-grid.two,
    .register-choice-grid.three {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .register-choice-btn {
        min-height: 56px;
        border-radius: 14px;
        padding: 10px;
    }

    .register-choice-btn span {
        font-size: 15px;
    }

    .register-choice-btn small {
        font-size: 11px;
        margin-top: 3px;
    }

    .register-face-circle {
        width: min(230px, 64vw) !important;
        max-width: 230px !important;
    }

    .register-employee-list {
        max-height: 290px;
    }
}


/* ==========================================================
   Step 30AD Professional Register Wizard
   ========================================================== */

.register-hidden-fields {
    display: none !important;
}

.register-wizard-page {
    max-width: 760px !important;
    width: min(100vw, 760px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    min-height: 100dvh;
    background:
        radial-gradient(circle at 50% 28%, rgba(0, 224, 193, .14), transparent 38%),
        linear-gradient(180deg, rgba(8,18,34,.98), rgba(4,10,20,.99)) !important;
    border: 1px solid rgba(0,224,193,.22) !important;
}

.register-wizard-shell {
    width: 100%;
    max-width: 680px;
    margin: 0 auto;
}

.register-wizard-top {
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    align-items: center;
    gap: 10px;
    padding: 16px 0 12px;
    border-bottom: 1px solid rgba(148,163,184,.14);
    margin-bottom: 12px;
}

.register-wizard-top strong,
.register-wizard-top span {
    display: block;
    text-align: center;
}

.register-wizard-top strong {
    color: #fff;
    font-size: 22px;
    font-weight: 950;
    line-height: 1.1;
}

.register-wizard-top span {
    color: rgba(226,232,240,.72);
    font-size: 12px;
    font-weight: 800;
    margin-top: 4px;
}

.register-home-btn,
.register-refresh-btn {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    border: 1px solid rgba(44,211,190,.35);
    background: rgba(44,211,190,.12);
    color: #2cd3be;
    font-size: 20px;
    font-weight: 950;
    cursor: pointer;
}

.register-progress-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 14px;
}

.register-progress-row span {
    height: 8px;
    border-radius: 999px;
    background: rgba(148,163,184,.25);
    color: transparent;
    overflow: hidden;
}

.register-progress-row span.active,
.register-progress-row span.done {
    background: linear-gradient(135deg, #10b981, #2cd3be);
}

.register-wizard-step {
    display: none !important;
    animation: registerStepIn .18s ease-out;
}

.register-wizard-step.active {
    display: block !important;
}

@keyframes registerStepIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.register-big-title {
    color: #fff;
    font-size: clamp(24px, 5vw, 38px);
    font-weight: 950;
    text-align: center;
    margin: 12px 0 6px;
}

.register-step-subtitle {
    color: rgba(226,232,240,.72);
    text-align: center;
    margin: 0 0 16px;
    font-weight: 700;
    font-size: 13px;
}

.register-choice-grid {
    display: grid;
    gap: 12px;
    width: 100%;
}

.register-choice-grid.two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.register-choice-grid.three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.register-choice-btn {
    border: 0;
    border-radius: 20px;
    min-height: 96px;
    padding: 16px 14px;
    color: #fff;
    background: linear-gradient(135deg, #334e72, #172b4a);
    box-shadow: 0 14px 30px rgba(0,0,0,.25);
    cursor: pointer;
    text-align: center;
}

.register-choice-btn.primary {
    background: linear-gradient(135deg, #10b981, #14b8a6);
}

.register-choice-btn span,
.register-choice-btn small {
    display: block;
}

.register-choice-btn span {
    font-size: 19px;
    font-weight: 950;
}

.register-choice-btn small {
    margin-top: 7px;
    color: rgba(255,255,255,.74);
    font-size: 12px;
    line-height: 1.35;
}

.register-search-box input,
.register-new-form input {
    width: 100%;
    min-height: 52px;
    border-radius: 16px;
    border: 1px solid rgba(148,163,184,.25);
    background: rgba(15,23,42,.65);
    color: #fff;
    padding: 0 14px;
    font-weight: 800;
}

.register-new-form {
    display: grid;
    gap: 10px;
    max-width: 520px;
    margin: 0 auto;
}

.register-new-form label {
    color: rgba(226,232,240,.84);
    font-size: 13px;
    font-weight: 900;
}

.register-new-form label span {
    color: #ef4444;
}

.register-employee-list {
    max-height: 420px;
    overflow: auto;
    padding: 4px 4px 4px 0;
    margin-top: 10px;
}

.register-employee-list button {
    width: 100%;
    display: grid !important;
    grid-template-columns: 90px 1fr auto;
    gap: 10px;
    align-items: center;
    border-radius: 16px !important;
    margin-bottom: 8px;
    border: 1px solid rgba(148,163,184,.18);
    background: rgba(15,23,42,.65);
    color: #fff;
    padding: 12px;
    cursor: pointer;
    text-align: left;
}

.register-employee-list button strong {
    color: #2cd3be;
}

.register-employee-list button span {
    color: rgba(255,255,255,.9);
    font-weight: 800;
}

.register-employee-list button em {
    color: #10b981;
    font-style: normal;
    font-size: 11px;
    font-weight: 950;
}

.register-selected-card,
.selected-employee-pill {
    color: #2cd3be;
    font-weight: 950;
    border: 1px solid rgba(44,211,190,.34);
    background: rgba(44,211,190,.08);
    border-radius: 16px;
    padding: 12px 14px;
    text-align: center;
    margin: 0 0 14px;
}

.register-back-btn {
    border: 0;
    border-radius: 999px;
    padding: 8px 13px;
    margin-bottom: 10px;
    background: rgba(148,163,184,.16);
    color: #fff;
    font-weight: 900;
    cursor: pointer;
}

.register-main-action {
    width: 100%;
    max-width: 520px;
    min-height: 50px;
    border: 0;
    border-radius: 16px;
    display: block;
    margin: 14px auto 0;
    color: #fff;
    font-weight: 950;
    background: linear-gradient(135deg, #10b981, #2563eb);
    box-shadow: 0 14px 30px rgba(0,0,0,.24);
    cursor: pointer;
}

.finger-status-text {
    margin-top: 12px;
    color: rgba(226,232,240,.78);
    font-weight: 800;
    text-align: center;
}

.register-camera-panel {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    background:
        radial-gradient(circle at center, rgba(44, 211, 190, .15), transparent 45%),
        rgba(15, 23, 42, .65);
    border-radius: 22px;
    border: 1px solid rgba(148, 163, 184, .20);
    padding: 14px;
}

.register-face-circle {
    width: min(330px, 76vw) !important;
    max-width: 330px !important;
    margin: 0 auto 8px !important;
}

.register-voice-box {
    max-width: 620px;
    margin: 0 auto 12px;
    text-align: center;
}

@media (max-width: 768px) {
    .register-wizard-page {
        width: 100vw !important;
        max-width: 100vw !important;
        margin: 0 !important;
        padding: 0 12px 14px !important;
        border-radius: 0 !important;
    }

    .register-wizard-top {
        grid-template-columns: 38px 1fr 38px;
        padding-top: 12px;
    }

    .register-home-btn,
    .register-refresh-btn {
        width: 36px;
        height: 36px;
        border-radius: 12px;
        font-size: 17px;
    }

    .register-wizard-top strong {
        font-size: 18px;
    }

    .register-choice-grid.two,
    .register-choice-grid.three {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .register-choice-btn {
        min-height: 58px;
        border-radius: 15px;
        padding: 10px 12px;
    }

    .register-choice-btn span {
        font-size: 15px;
    }

    .register-choice-btn small {
        font-size: 11px;
        margin-top: 3px;
    }

    .register-employee-list {
        max-height: 52dvh;
    }

    .register-employee-list button {
        grid-template-columns: 74px 1fr;
    }

    .register-employee-list button em {
        grid-column: 1 / -1;
    }

    .register-face-circle {
        width: min(230px, 64vw) !important;
        max-width: 230px !important;
    }
}


/* ==========================================================
   Step 30AE Register No Fake Success + Search Fix
   ========================================================== */

#registrationSuccessPanel.hidden {
    display: none !important;
}

.employee-search-empty {
    display: none;
    color: rgba(226, 232, 240, .75);
    text-align: center;
    border: 1px dashed rgba(148, 163, 184, .28);
    border-radius: 14px;
    padding: 14px;
    margin-top: 8px;
    font-weight: 800;
    background: rgba(15, 23, 42, .35);
}


/* ==========================================================
   Step 30AF Register Search + Camera Fix
   ========================================================== */

.register-search-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    width: 100%;
}

.register-search-row input {
    width: 100%;
}

.register-search-row button {
    border: 0;
    border-radius: 14px;
    padding: 0 16px;
    min-height: 52px;
    color: #fff;
    font-weight: 950;
    background: linear-gradient(135deg, #10b981, #2563eb);
    cursor: pointer;
}

.register-employee-list button.search-hidden {
    display: none !important;
}

#livenessCommandGrid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin: 8px 0;
}

@media (max-width: 768px) {
    .register-search-row {
        grid-template-columns: 1fr;
    }

    .register-search-row button {
        min-height: 42px;
    }
}

.kiosk-build-marker{
    display:block;
    margin-top:4px;
    font-size:10px;
    color:rgba(44,211,190,.75);
    font-weight:900;
    letter-spacing:.5px;
}


/* ==========================================================
   Step 30AW — Theme, Standard Font, Login Polish
   ========================================================== */

/* Light theme must make menu/sidebar light also */
html[data-theme="light"] {
    --sidebar: #ffffff;
    --sidebar-link: #f3f6fb;
    --sidebar-link-active: #e9fdf6;
}

html[data-theme="light"] .sidebar {
    background: #ffffff !important;
    color: #111827 !important;
    border-right: 1px solid #e5e7eb !important;
    box-shadow: 8px 0 26px rgba(15,23,42,.05);
}

html[data-theme="light"] .brand-title,
html[data-theme="light"] .side-nav a {
    color: #111827 !important;
}

html[data-theme="light"] .brand-subtitle,
html[data-theme="light"] .nav-label {
    color: #6b7280 !important;
}

html[data-theme="light"] .side-nav a {
    background: #f6f8fb !important;
    border: 1px solid #e9edf3;
}

html[data-theme="light"] .side-nav a:hover,
html[data-theme="light"] .side-nav a.active {
    background: #e9fdf6 !important;
    color: #047857 !important;
    border-color: rgba(16,185,129,.28);
}

html[data-theme="light"] body.sidebar-collapsed .nav-label {
    border-top-color: #e5e7eb !important;
}

/* Compact professional standard font sizing */
html {
    font-size: 13px;
}

body {
    font-size: 13px;
    line-height: 1.38;
}

.page-title {
    font-size: 18px;
}

.page-subtitle,
.section-subtitle,
.kpi-label,
.kpi-note,
.muted-text,
.field-help {
    font-size: 11px;
}

.section-title {
    font-size: 15px;
}

.brand-title {
    font-size: 14px;
}

.brand-subtitle {
    font-size: 10px;
}

.nav-label {
    font-size: 9px;
    margin: 13px 8px 6px;
}

.side-nav a {
    font-size: 12px;
    padding: 8px 10px;
    border-radius: 9px;
    margin-bottom: 5px;
}

.sidebar {
    padding: 13px 12px;
}

.brand-box {
    margin-bottom: 15px;
    gap: 9px;
}

.brand-icon {
    width: 36px;
    height: 36px;
    border-radius: 12px;
}

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

.main-content {
    padding: 14px 16px;
}

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

.btn {
    min-height: 32px;
    padding: 7px 10px;
    font-size: 11px;
    border-radius: 9px;
}

.btn-sm {
    min-height: 28px;
    padding: 6px 9px;
    font-size: 11px;
}

input,
select,
textarea {
    font-size: 12px !important;
}

.form-group label,
.table th,
.table td,
.professional-table th,
.professional-table td {
    font-size: 12px;
}

.kpi-value {
    font-size: 21px;
}

.module-card {
    padding: 12px;
}

.module-icon {
    width: 36px;
    height: 36px;
    font-size: 18px;
    margin-bottom: 9px;
}

.badge {
    font-size: 10px;
    padding: 4px 8px;
}

/* Login page polish */
.auth-body {
    min-height: 100vh;
    background:
        radial-gradient(circle at top left, rgba(16,185,129,.15), transparent 26%),
        radial-gradient(circle at bottom right, rgba(6,182,212,.13), transparent 28%),
        var(--bg);
}

.auth-page {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(320px, .95fr) minmax(340px, .75fr);
    gap: 18px;
    padding: 20px;
    align-items: center;
}

.auth-left {
    min-height: calc(100vh - 40px);
    border-radius: 22px;
    padding: 26px;
    background:
        radial-gradient(circle at 18% 20%, rgba(16,185,129,.28), transparent 26%),
        radial-gradient(circle at 82% 30%, rgba(6,182,212,.22), transparent 30%),
        linear-gradient(135deg, #07111f, #172033);
}

html[data-theme="light"] .auth-left {
    background:
        radial-gradient(circle at 18% 20%, rgba(16,185,129,.16), transparent 26%),
        radial-gradient(circle at 82% 30%, rgba(6,182,212,.13), transparent 30%),
        linear-gradient(135deg, #ffffff, #eef7f4);
    color: #111827;
    border: 1px solid #e5e7eb;
}

html[data-theme="light"] .auth-brand p,
html[data-theme="light"] .auth-feature-card span {
    color: #6b7280;
}

.auth-brand h1 {
    font-size: 24px;
    letter-spacing: -.03em;
}

.auth-brand p {
    font-size: 12px;
}

.auth-feature-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.auth-feature-card {
    padding: 12px;
    border-radius: 14px;
}

html[data-theme="light"] .auth-feature-card {
    background: rgba(255,255,255,.78);
    border-color: #e5e7eb;
}

.auth-feature-card strong {
    font-size: 12px;
    margin-bottom: 5px;
}

.auth-feature-card span {
    font-size: 11px;
    line-height: 1.42;
}

.auth-card {
    width: min(410px, 100%);
    border-radius: 20px;
    padding: 20px;
}

.auth-card h2 {
    font-size: 21px;
}

.auth-card p {
    font-size: 12px;
}

.auth-card-head {
    margin-bottom: 15px;
}

.auth-card .form-group {
    margin-bottom: 12px;
}

.auth-card input {
    min-height: 40px !important;
    border-radius: 11px !important;
}

.auth-theme-actions .btn {
    min-height: 30px;
    padding: 6px 9px;
    font-size: 11px;
}

.btn-full {
    height: 40px;
}

.auth-demo {
    margin-top: 13px;
    padding: 10px;
    border-radius: 12px;
    font-size: 11px;
}

/* Mobile login and menu polish */
@media (max-width: 980px) {
    .sidebar {
        border-bottom: 1px solid var(--border);
    }

    html[data-theme="light"] .sidebar {
        border-bottom-color: #e5e7eb !important;
    }

    .auth-page {
        grid-template-columns: 1fr;
        padding: 12px;
        gap: 12px;
    }

    .auth-left {
        min-height: auto;
        padding: 18px;
        border-radius: 18px;
    }

    .auth-feature-grid {
        margin-top: 18px;
    }
}

@media (max-width: 700px) {
    html {
        font-size: 12.5px;
    }

    body {
        font-size: 12px;
    }

    .main-content {
        padding: 10px;
    }

    .topbar {
        padding: 10px;
    }

    .page-title {
        font-size: 16px;
    }

    .side-nav a {
        font-size: 11px;
        padding: 8px 9px;
    }

    .auth-left {
        padding: 16px;
    }

    .auth-brand h1 {
        font-size: 19px;
    }

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

    .auth-card {
        padding: 16px;
        border-radius: 17px;
    }

    .auth-card h2 {
        font-size: 19px;
    }
}


/* Step 30AW extra: light theme grouped sidebar buttons */
html[data-theme="light"] .menu-group-toggle,
html[data-theme="light"] .sidebar-toggle-btn {
    background: #f6f8fb !important;
    color: #374151 !important;
    border-color: #e5e7eb !important;
}

html[data-theme="light"] .menu-group-toggle:hover,
html[data-theme="light"] .sidebar-toggle-btn:hover {
    background: #e9fdf6 !important;
    color: #047857 !important;
}

html[data-theme="light"] .menu-group {
    border-left-color: #e5e7eb !important;
}

html[data-theme="light"] .nav-ico {
    background: #e8eef7 !important;
    color: #475569 !important;
}

html[data-theme="light"] .side-nav a.active .nav-ico,
html[data-theme="light"] .side-nav a:hover .nav-ico {
    background: rgba(16,185,129,.18) !important;
    color: #047857 !important;
}

html[data-theme="light"] .mobile-menu-btn {
    background: #ffffff !important;
    color: #047857 !important;
    border: 1px solid #d1fae5 !important;
}

html[data-theme="light"] .sidebar-backdrop {
    background: rgba(15,23,42,.30);
}


/* Step 30AW login premium elements */
.auth-hero-content {
    max-width: 620px;
    margin: auto 0;
    padding: 20px 0;
}

.auth-badge,
.auth-small-label {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    border-radius: 999px;
    padding: 5px 10px;
    font-size: 10px;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
    background: rgba(16,185,129,.15);
    color: #34d399;
    border: 1px solid rgba(16,185,129,.25);
}

html[data-theme="light"] .auth-badge,
html[data-theme="light"] .auth-small-label {
    color: #047857;
    background: #dffbef;
    border-color: #a7f3d0;
}

.auth-hero-content h2 {
    margin: 14px 0 8px;
    font-size: clamp(26px, 4vw, 42px);
    line-height: 1.04;
    letter-spacing: -.045em;
    color: #fff;
}

html[data-theme="light"] .auth-hero-content h2 {
    color: #111827;
}

.auth-hero-content p {
    max-width: 520px;
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: rgba(255,255,255,.72);
}

html[data-theme="light"] .auth-hero-content p {
    color: #6b7280;
}

.auth-card-premium {
    position: relative;
    overflow: hidden;
}

.auth-card-premium::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: linear-gradient(90deg, #10b981, #06b6d4, #2563eb);
}

.auth-login-form {
    display: grid;
    gap: 2px;
}

.auth-footer-note {
    margin-top: 12px;
    text-align: center;
    color: var(--muted);
    font-size: 10px;
}

@media (max-width: 980px) {
    .auth-hero-content {
        padding: 14px 0;
    }

    .auth-hero-content h2 {
        font-size: 24px;
    }
}


/* ==========================================================
   Step 30AX — Biometric Page Theme + Normal Page Mode
   ========================================================== */

/* Biometric page should respect admin light/dark theme */
.kiosk-only-tabs,
.kiosk-hero-card,
.punch-card,
.kiosk-tab,
.register-wizard-page {
    background: var(--surface) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
    box-shadow: var(--shadow-soft) !important;
}

.kiosk-only-tabs {
    max-width: 980px !important;
    margin: 0 auto 12px !important;
    padding: 12px !important;
    border-radius: 16px !important;
}

.kiosk-only-tabs .biometric-flow {
    background: var(--surface-2) !important;
    border-color: var(--border) !important;
}

.kiosk-only-tabs .flow-step {
    color: var(--text) !important;
    background: transparent !important;
    font-size: 12px !important;
    min-height: 38px !important;
}

.kiosk-only-tabs .flow-step.active,
.kiosk-only-tabs .flow-step:hover {
    background: rgba(16,185,129,.13) !important;
    color: var(--primary) !important;
}

html[data-theme="light"] .register-wizard-page {
    background:
        radial-gradient(circle at 50% 18%, rgba(16,185,129,.10), transparent 34%),
        #ffffff !important;
    color: #111827 !important;
}

html[data-theme="dark"] .register-wizard-page {
    background:
        radial-gradient(circle at 50% 28%, rgba(0, 224, 193, .14), transparent 38%),
        linear-gradient(180deg, rgba(8,18,34,.98), rgba(4,10,20,.99)) !important;
}

html[data-theme="light"] .register-wizard-top {
    border-bottom-color: #e5e7eb !important;
}

html[data-theme="light"] .register-wizard-top strong,
html[data-theme="light"] .register-big-title {
    color: #111827 !important;
}

html[data-theme="light"] .register-wizard-top span,
html[data-theme="light"] .register-step-subtitle {
    color: #6b7280 !important;
}

html[data-theme="light"] .register-camera-panel {
    background: #f8fafc !important;
    border-color: #e5e7eb !important;
}

html[data-theme="light"] .register-search-box input,
html[data-theme="light"] .register-new-form input {
    background: #ffffff !important;
    color: #111827 !important;
    border-color: #d1d5db !important;
}

html[data-theme="light"] .register-employee-list button {
    background: #ffffff !important;
    color: #111827 !important;
    border-color: #e5e7eb !important;
}

html[data-theme="light"] .register-employee-list button span,
html[data-theme="light"] .register-new-form label {
    color: #111827 !important;
}

html[data-theme="light"] .register-choice-btn {
    color: #111827 !important;
    background: linear-gradient(135deg, #ffffff, #eef7f4) !important;
    border: 1px solid #d1fae5 !important;
}

html[data-theme="light"] .register-choice-btn.primary {
    color: #ffffff !important;
    background: linear-gradient(135deg, #10b981, #14b8a6) !important;
}

html[data-theme="light"] .register-choice-btn small {
    color: #6b7280 !important;
}

html[data-theme="light"] .register-choice-btn.primary small {
    color: rgba(255,255,255,.78) !important;
}

html[data-theme="light"] .voice-command-card,
html[data-theme="light"] .kiosk-thankyou-panel,
html[data-theme="light"] .kiosk-result-card,
html[data-theme="light"] .kiosk-warning-panel {
    background: #ffffff !important;
    color: #111827 !important;
    border-color: #e5e7eb !important;
}

html[data-theme="light"] .voice-command-card *,
html[data-theme="light"] .kiosk-thankyou-panel *,
html[data-theme="light"] .kiosk-result-card *,
html[data-theme="light"] .kiosk-warning-panel * {
    color: inherit;
}

html[data-theme="light"] .faceid-circle,
html[data-theme="light"] .register-face-circle,
html[data-theme="light"] .punch-face-circle {
    background: #f8fafc !important;
    border-color: #d1fae5 !important;
}

html[data-theme="light"] #advanced_register_camera_status,
html[data-theme="light"] #advanced_register_gps_status,
html[data-theme="light"] #punchGpsStatus,
html[data-theme="light"] .finger-status-text {
    color: #475569 !important;
}

/* Make biometric page normal, not forced kiosk-style full page */
body:not(.kiosk-lock-mode) .kiosk-only-tabs,
body:not(.kiosk-lock-mode) .kiosk-tab {
    width: 100% !important;
}

@media (max-width: 768px) {
    .kiosk-only-tabs {
        border-radius: 14px !important;
        padding: 10px !important;
    }

    .register-wizard-page {
        width: 100% !important;
        max-width: 100% !important;
        min-height: auto !important;
        border-radius: 16px !important;
        padding: 12px !important;
    }
}


/* ==========================================================
   Step 30AY — Topbar Overlap + Sidebar Submenu Font Polish
   ========================================================== */

/* Prevent fixed PWA/lang buttons from overlapping theme buttons/user chip */
.pwa-install-btn {
    position: fixed !important;
    top: 8px !important;
    right: 132px !important;
    z-index: 1200 !important;
    min-height: 28px !important;
    padding: 6px 10px !important;
    font-size: 11px !important;
}

.quick-lang-switch {
    position: fixed !important;
    top: 8px !important;
    right: 12px !important;
    z-index: 1200 !important;
    gap: 5px !important;
}

.quick-lang-switch a {
    min-height: 28px !important;
    padding: 5px 8px !important;
    font-size: 11px !important;
}

/* Keep page topbar actions below fixed install/lang row on desktop */
.topbar {
    padding-top: 18px !important;
}

.top-actions {
    gap: 6px !important;
}

/* More compact and cleaner user chip */
.user-chip {
    min-width: 118px !important;
    padding: 7px 9px !important;
    border-radius: 11px !important;
}

.user-chip span {
    font-size: 11px !important;
}

.user-chip small {
    font-size: 9px !important;
}

/* Sidebar menu: main group can stay strong, sub category links should not be bold */
.menu-group .side-nav a,
.side-nav .menu-group a,
.grouped-side-nav .menu-group a,
.menu-group a {
    font-weight: 650 !important;
    font-size: 11.5px !important;
    letter-spacing: 0 !important;
}

.menu-group-toggle {
    font-weight: 760 !important;
    font-size: 12px !important;
    letter-spacing: .01em !important;
}

.side-nav > a {
    font-weight: 780 !important;
}

.nav-text {
    font-weight: inherit !important;
}

.menu-group .nav-ico {
    font-size: 9px !important;
    font-weight: 700 !important;
}

/* Light theme submenu softer style */
html[data-theme="light"] .menu-group a {
    background: #f8fafc !important;
    border-color: #e8edf4 !important;
    color: #1f2937 !important;
}

html[data-theme="light"] .menu-group a:hover,
html[data-theme="light"] .menu-group a.active {
    background: #ecfdf5 !important;
    color: #047857 !important;
}

/* Mobile: keep install/lang on one row and avoid overlap with theme buttons */
@media (max-width: 700px) {
    .pwa-install-btn {
        top: 6px !important;
        right: 118px !important;
        min-height: 26px !important;
        padding: 5px 8px !important;
        font-size: 10px !important;
    }

    .quick-lang-switch {
        top: 6px !important;
        right: 8px !important;
    }

    .quick-lang-switch a {
        min-height: 26px !important;
        padding: 4px 7px !important;
        font-size: 10px !important;
    }

    .topbar {
        padding-top: 38px !important;
    }

    .top-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        width: 100% !important;
    }

    .top-actions .btn,
    .top-actions .user-chip {
        width: 100% !important;
    }

    .user-chip {
        grid-column: 1 / -1;
        text-align: center;
    }

    .menu-group a {
        font-size: 11px !important;
        font-weight: 620 !important;
    }
}


/* ==========================================================
   Step 30AZ — Move Install/Language Into Sidebar
   ========================================================== */

/* No floating install/lang controls on topbar anymore */
.pwa-install-btn,
.quick-lang-switch {
    display: none !important;
}

/* Sidebar utility area before logout */
.sidebar-utility-box {
    display: grid;
    gap: 7px;
    padding: 8px;
    margin: 8px 0 6px;
    border: 1px solid rgba(148,163,184,.18);
    border-radius: 12px;
    background: rgba(255,255,255,.035);
}

html[data-theme="light"] .sidebar-utility-box {
    background: #f8fafc;
    border-color: #e5e7eb;
}

.sidebar-install-btn {
    width: 100%;
    min-height: 32px;
    border: 0;
    border-radius: 10px;
    padding: 7px 9px;
    display: flex !important;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    background: linear-gradient(135deg, #10b981, #2563eb);
    color: #fff;
    font-size: 11.5px;
    font-weight: 760;
    text-align: left;
}

.sidebar-install-btn .nav-ico {
    background: rgba(255,255,255,.18) !important;
    color: #fff !important;
}

.sidebar-lang-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.sidebar-lang-row a {
    min-height: 30px !important;
    padding: 7px 8px !important;
    border-radius: 9px !important;
    text-align: center;
    text-decoration: none;
    font-size: 11px !important;
    font-weight: 700 !important;
    background: rgba(255,255,255,.06) !important;
    color: #e5e7eb !important;
    border: 1px solid rgba(255,255,255,.09) !important;
}

html[data-theme="light"] .sidebar-lang-row a {
    background: #ffffff !important;
    color: #111827 !important;
    border-color: #e5e7eb !important;
}

.sidebar-lang-row a:hover {
    background: rgba(16,185,129,.14) !important;
    color: #10b981 !important;
}

/* Since floating controls are removed, topbar no longer needs extra padding */
.topbar {
    padding-top: 12px !important;
}

@media (max-width: 700px) {
    .topbar {
        padding-top: 10px !important;
    }

    .top-actions {
        display: flex !important;
        flex-wrap: wrap !important;
    }

    .top-actions .btn {
        flex: 1 1 auto !important;
    }

    .top-actions .user-chip {
        flex: 1 1 100% !important;
    }
}


/* ==========================================================
   Step 31A — ESS Complete Foundation Mobile UI
   ========================================================== */

.ess-mobile-body {
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    font-size: 13px;
}

.ess-mobile-shell {
    width: min(560px, 100%);
    min-height: 100vh;
    margin: 0 auto;
    padding: 14px 14px 94px;
}

.ess-top-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 18px;
    border-radius: 24px;
    background:
        radial-gradient(circle at 85% 20%, rgba(16,185,129,.18), transparent 32%),
        var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-soft);
    margin-bottom: 14px;
}

.ess-top-hero span,
.ess-top-hero p,
.ess-muted {
    color: var(--muted);
}

.ess-top-hero h1 {
    margin: 3px 0;
    font-size: 24px;
    line-height: 1.1;
}

.ess-install-mini {
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, #10b981, #2563eb);
    color: #fff;
    font-weight: 850;
    padding: 7px 10px;
    font-size: 11px;
}

.ess-clock-card,
.ess-mobile-card,
.ess-profile-card,
.ess-profile-hero {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 15px;
    margin-bottom: 13px;
    box-shadow: var(--shadow-soft);
}

.ess-clock-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.ess-clock-card span,
.ess-clock-card small {
    display: block;
    color: var(--muted);
    font-size: 12px;
}

.ess-clock-card strong {
    display: block;
    font-size: 18px;
    margin: 3px 0;
}

.ess-clock-card a,
.ess-section-line a,
.ess-page-header a {
    text-decoration: none;
    color: #fff;
    background: var(--primary);
    border-radius: 999px;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 850;
}

.ess-action-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 13px;
}

.ess-action-grid.two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ess-action-grid a {
    text-decoration: none;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 14px;
    box-shadow: var(--shadow-soft);
}

.ess-action-grid b,
.ess-list-row b {
    display: block;
    font-size: 13px;
    margin-bottom: 4px;
}

.ess-action-grid span,
.ess-list-row span {
    color: var(--muted);
    font-size: 11px;
    line-height: 1.4;
}

.ess-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 4px 0 14px;
}

.ess-page-header h1 {
    margin: 0;
    font-size: 20px;
}

.ess-page-header a {
    min-width: 34px;
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
}

.ess-section-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.ess-section-line h2,
.ess-mobile-card h2 {
    margin: 0 0 8px;
    font-size: 15px;
}

.ess-list-row,
.ess-balance-row {
    padding: 11px 0;
    border-bottom: 1px solid var(--border);
}

.ess-list-row:last-child,
.ess-balance-row:last-child {
    border-bottom: 0;
}

.ess-balance-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.ess-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 12px;
}

.ess-tabs a {
    text-align: center;
    text-decoration: none;
    padding: 11px 8px;
    color: var(--muted);
    font-weight: 760;
    font-size: 12px;
}

.ess-tabs a.active {
    color: var(--primary);
    border-bottom: 2px solid var(--primary);
}

.ess-form {
    display: grid;
    gap: 11px;
}

.ess-form label {
    display: grid;
    gap: 6px;
    font-size: 12px;
    color: var(--muted);
    font-weight: 760;
}

.ess-form input,
.ess-form textarea,
.ess-form select {
    width: 100%;
    border: 1px solid var(--border);
    background: var(--input);
    color: var(--text);
    border-radius: 12px;
    padding: 10px 11px;
    font-size: 13px !important;
}

.ess-two-col {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.danger-expired b,
.danger-urgent b {
    color: var(--danger);
}

.danger-soon b {
    color: var(--warning);
}

.ess-bottom-nav {
    position: fixed;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: min(560px, 100%);
    height: 72px;
    padding: 8px 16px calc(8px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--surface) 96%, transparent);
    backdrop-filter: blur(18px);
    border: 1px solid var(--border);
    border-bottom: 0;
    border-radius: 24px 24px 0 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;
    z-index: 1200;
    box-shadow: 0 -12px 30px rgba(15,23,42,.12);
}

.ess-bottom-nav a {
    text-decoration: none;
    display: grid;
    place-items: center;
    gap: 2px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 760;
}

.ess-bottom-nav a span {
    font-size: 19px;
}

.ess-bottom-nav a.active {
    color: var(--primary);
}

.ess-fab {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    border: 0;
    background: linear-gradient(135deg, #10b981, #2563eb);
    color: #fff;
    font-size: 28px;
    margin: -30px auto 0;
    box-shadow: 0 12px 28px rgba(37,99,235,.35);
}

.ess-quick-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,.45);
    opacity: 0;
    pointer-events: none;
    z-index: 1190;
}

.ess-quick-backdrop.show {
    opacity: 1;
    pointer-events: auto;
}

.ess-quick-menu {
    position: fixed;
    left: 50%;
    bottom: 84px;
    transform: translateX(-50%) translateY(20px);
    width: min(360px, calc(100% - 36px));
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 22px;
    box-shadow: 0 18px 44px rgba(0,0,0,.20);
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    z-index: 1210;
}

.ess-quick-menu.show {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.ess-quick-menu a {
    display: grid;
    grid-template-columns: 34px 1fr 20px;
    align-items: center;
    gap: 10px;
    padding: 13px 16px;
    color: var(--text);
    text-decoration: none;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
    font-weight: 760;
}

.ess-quick-menu a:last-child {
    border-bottom: 0;
}

@media (max-width: 420px) {
    .ess-mobile-shell {
        padding: 10px 10px 92px;
    }

    .ess-action-grid {
        gap: 8px;
    }

    .ess-action-grid a {
        padding: 12px;
    }

    .ess-two-col {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================
   Step 31B — ESS Theme + Desktop View + Punch Return
   ========================================================== */

/* Force ESS to respect selected light/dark theme, overriding older hardcoded mobile CSS */
html[data-theme="light"] .ess-mobile-body {
    background: #f4f7fb !important;
    color: #111827 !important;
}

html[data-theme="dark"] .ess-mobile-body {
    background: #0b1220 !important;
    color: #f8fafc !important;
}

html[data-theme="light"] .ess-top-hero,
html[data-theme="light"] .ess-clock-card,
html[data-theme="light"] .ess-mobile-card,
html[data-theme="light"] .ess-profile-card,
html[data-theme="light"] .ess-profile-hero,
html[data-theme="light"] .ess-action-grid a,
html[data-theme="light"] .ess-bottom-nav,
html[data-theme="light"] .ess-quick-menu {
    background: #ffffff !important;
    color: #111827 !important;
    border-color: #e5e7eb !important;
}

html[data-theme="dark"] .ess-top-hero,
html[data-theme="dark"] .ess-clock-card,
html[data-theme="dark"] .ess-mobile-card,
html[data-theme="dark"] .ess-profile-card,
html[data-theme="dark"] .ess-profile-hero,
html[data-theme="dark"] .ess-action-grid a,
html[data-theme="dark"] .ess-bottom-nav,
html[data-theme="dark"] .ess-quick-menu {
    background: #111827 !important;
    color: #f8fafc !important;
    border-color: #253044 !important;
}

html[data-theme="light"] .ess-action-grid b,
html[data-theme="light"] .ess-mobile-card h2,
html[data-theme="light"] .ess-clock-card strong,
html[data-theme="light"] .ess-top-hero h1,
html[data-theme="light"] .ess-page-header h1,
html[data-theme="light"] .ess-list-row b,
html[data-theme="light"] .ess-balance-row b {
    color: #111827 !important;
}

html[data-theme="dark"] .ess-action-grid b,
html[data-theme="dark"] .ess-mobile-card h2,
html[data-theme="dark"] .ess-clock-card strong,
html[data-theme="dark"] .ess-top-hero h1,
html[data-theme="dark"] .ess-page-header h1,
html[data-theme="dark"] .ess-list-row b,
html[data-theme="dark"] .ess-balance-row b {
    color: #ffffff !important;
}

html[data-theme="light"] .ess-action-grid span,
html[data-theme="light"] .ess-list-row span,
html[data-theme="light"] .ess-clock-card span,
html[data-theme="light"] .ess-clock-card small,
html[data-theme="light"] .ess-top-hero p,
html[data-theme="light"] .ess-top-hero span,
html[data-theme="light"] .ess-muted {
    color: #64748b !important;
}

html[data-theme="dark"] .ess-action-grid span,
html[data-theme="dark"] .ess-list-row span,
html[data-theme="dark"] .ess-clock-card span,
html[data-theme="dark"] .ess-clock-card small,
html[data-theme="dark"] .ess-top-hero p,
html[data-theme="dark"] .ess-top-hero span,
html[data-theme="dark"] .ess-muted {
    color: #a8b3c7 !important;
}

/* Desktop ESS should look like back-office content, not narrow phone app */
.ess-desktop-page {
    width: 100%;
}

@media (min-width: 901px) {
    .ess-desktop-page .ess-mobile-shell {
        max-width: 100% !important;
        width: 100% !important;
        padding: 0 !important;
        min-height: auto !important;
    }

    .ess-desktop-page .ess-top-hero {
        border-radius: 16px !important;
        padding: 18px 20px !important;
        display: flex !important;
    }

    .ess-desktop-page .ess-top-hero h1 {
        font-size: 22px !important;
    }

    .ess-desktop-page .ess-clock-card,
    .ess-desktop-page .ess-mobile-card,
    .ess-desktop-page .ess-profile-card,
    .ess-desktop-page .ess-profile-hero {
        border-radius: 15px !important;
        padding: 16px !important;
    }

    .ess-desktop-page .ess-action-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

    .ess-desktop-page .ess-action-grid.two {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }

    .ess-desktop-page .ess-action-grid a {
        border-radius: 14px !important;
        min-height: 84px !important;
    }

    .ess-desktop-page .ess-bottom-nav,
    .ess-desktop-page .ess-quick-menu,
    .ess-desktop-page .ess-quick-backdrop {
        display: none !important;
    }
}

/* ESS biometric punch return note */
.ess-kiosk-return-note {
    max-width: 980px;
    margin: 0 auto 12px;
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(16,185,129,.12);
    border: 1px solid rgba(16,185,129,.24);
    color: var(--primary);
    font-size: 12px;
    font-weight: 800;
}


/* Step 31C — User to Employee ESS link helper */
.field-help {
    display: block;
    margin-top: 6px;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.45;
}

.permission-box .section-subtitle {
    margin: 0 0 12px;
}


/* ==========================================================
   Step 31E — ESS Dark Visibility + Employee Menu + ESS Kiosk Mode
   ========================================================== */

/* ESS dark theme font/contrast hardening */
html[data-theme="dark"] .ess-mobile-body,
html[data-theme="dark"] .ess-mobile-shell,
html[data-theme="dark"] .ess-desktop-page {
    color: #f8fafc !important;
}

html[data-theme="dark"] .ess-top-hero,
html[data-theme="dark"] .ess-clock-card,
html[data-theme="dark"] .ess-mobile-card,
html[data-theme="dark"] .ess-profile-card,
html[data-theme="dark"] .ess-profile-hero,
html[data-theme="dark"] .ess-action-grid a,
html[data-theme="dark"] .ess-list-row,
html[data-theme="dark"] .ess-balance-row {
    background: #151b28 !important;
    color: #f8fafc !important;
    border-color: #303a4d !important;
}

html[data-theme="dark"] .ess-mobile-card *,
html[data-theme="dark"] .ess-action-grid a *,
html[data-theme="dark"] .ess-clock-card *,
html[data-theme="dark"] .ess-top-hero * {
    text-shadow: none !important;
}

html[data-theme="dark"] .ess-muted,
html[data-theme="dark"] .ess-action-grid span,
html[data-theme="dark"] .ess-list-row span,
html[data-theme="dark"] .ess-clock-card span,
html[data-theme="dark"] .ess-clock-card small,
html[data-theme="dark"] .ess-top-hero p,
html[data-theme="dark"] .ess-top-hero span {
    color: #cbd5e1 !important;
}

html[data-theme="dark"] .ess-page-header h1,
html[data-theme="dark"] .ess-top-hero h1,
html[data-theme="dark"] .ess-clock-card strong,
html[data-theme="dark"] .ess-action-grid b,
html[data-theme="dark"] .ess-mobile-card h2,
html[data-theme="dark"] .ess-list-row b {
    color: #ffffff !important;
}

/* Employee-only menu should remain clean and ESS-focused */
.employee-only-utility {
    display: block !important;
}

/* ESS biometric full screen kiosk only when opened from ESS */
.ess-biometric-fullscreen {
    position: fixed !important;
    inset: 0 !important;
    z-index: 5000 !important;
    overflow-y: auto !important;
    background: #06111f !important;
    padding: 10px !important;
}

html[data-theme="light"] .ess-biometric-fullscreen {
    background: #f4f7fb !important;
}

.ess-biometric-fullscreen .kiosk-only-tabs,
.ess-biometric-fullscreen .punch-card,
.ess-biometric-fullscreen .register-wizard-page {
    max-width: 620px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.ess-biometric-fullscreen .kiosk-hero-card {
    margin-top: 6px !important;
}

/* Hide the normal admin chrome visually behind ESS fullscreen biometric page */
body.ess-biometric-body .mobile-menu-btn,
body.ess-biometric-body .sidebar,
body.ess-biometric-body .sidebar-backdrop,
body.ess-biometric-body .topbar {
    display: none !important;
}

body.ess-biometric-body .app-shell {
    display: block !important;
}

body.ess-biometric-body .main-content {
    padding: 0 !important;
    margin: 0 !important;
}

.ess-biometric-fullscreen .ess-kiosk-return-note {
    max-width: 620px !important;
}


/* ==========================================================
   Step 31F — ESS Permission Sidebar + Dark Profile Visibility
   ========================================================== */

/* Employee-only users should have ESS-focused sidebar */
.employee-only-utility {
    margin-top: 8px !important;
}

/* ESS profile list card must respect dark theme */
.ess-list-card {
    background: var(--surface) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    margin-bottom: 13px !important;
    box-shadow: var(--shadow-soft) !important;
}

.ess-list-card a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 13px 15px !important;
    color: var(--text) !important;
    text-decoration: none !important;
    border-bottom: 1px solid var(--border) !important;
    background: transparent !important;
}

.ess-list-card a:last-child {
    border-bottom: 0 !important;
}

.ess-list-card span {
    color: var(--text) !important;
    font-weight: 650 !important;
    font-size: 13px !important;
}

.ess-list-card b {
    color: var(--primary) !important;
    font-size: 16px !important;
}

/* Extra dark theme contrast for ESS profile */
html[data-theme="dark"] .ess-list-card,
html[data-theme="dark"] .ess-list-card a,
html[data-theme="dark"] .ess-profile-card,
html[data-theme="dark"] .ess-profile-hero {
    background: #151b28 !important;
    color: #f8fafc !important;
    border-color: #303a4d !important;
}

html[data-theme="dark"] .ess-list-card span,
html[data-theme="dark"] .ess-profile-card strong,
html[data-theme="dark"] .ess-profile-hero h2,
html[data-theme="dark"] .ess-profile-card h3 {
    color: #ffffff !important;
}

html[data-theme="dark"] .ess-profile-card span,
html[data-theme="dark"] .ess-profile-hero p {
    color: #cbd5e1 !important;
}

html[data-theme="dark"] .ess-profile-card div {
    border-bottom-color: #334155 !important;
}

/* Desktop ESS profile inside admin shell should not stretch awkwardly */
@media (min-width: 901px) {
    .ess-desktop-page .ess-profile-hero,
    .ess-desktop-page .ess-profile-card,
    .ess-desktop-page .ess-list-card {
        max-width: none !important;
        width: 100% !important;
    }

    .ess-desktop-page .ess-list-card a {
        min-height: 44px !important;
    }
}


/* ==========================================================
   Step 31G — ESS Attendance Status + Detailed Records Export
   ========================================================== */

.ess-today-status-card {
    align-items: stretch !important;
    display: grid !important;
    grid-template-columns: minmax(240px, 1.4fr) minmax(260px, 1.2fr) auto !important;
    gap: 14px !important;
}

.ess-status-main strong {
    font-size: 18px !important;
    line-height: 1.25 !important;
}

.ess-working-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.ess-working-summary div {
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--surface-2) 70%, transparent);
    border-radius: 13px;
    padding: 10px;
}

.ess-working-summary b {
    display: block;
    color: var(--primary);
    font-size: 16px;
    margin-bottom: 3px;
}

.ess-working-summary span {
    display: block;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.25;
}

.ess-attendance-table-card {
    overflow: hidden;
}

.ess-attendance-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: 14px;
}

.ess-attendance-table {
    width: 100%;
    min-width: 1500px;
    border-collapse: collapse;
    font-size: 11px;
}

.ess-attendance-table th,
.ess-attendance-table td {
    padding: 9px 10px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    white-space: nowrap;
    color: var(--text);
}

.ess-attendance-table th {
    background: color-mix(in srgb, var(--surface-2) 85%, transparent);
    font-weight: 850;
    color: var(--text);
}

.ess-attendance-table td a {
    color: var(--primary);
    font-weight: 800;
}

.ess-attendance-mobile-list {
    display: none;
}

.ess-day-summary-card {
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: 15px;
    padding: 12px;
    margin-top: 10px;
}

.ess-day-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.ess-day-title b {
    color: var(--text);
}

.ess-day-title span {
    color: var(--primary);
    font-size: 11px;
    font-weight: 850;
}

.ess-day-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 8px;
}

.ess-day-grid div {
    padding: 8px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--surface-2) 85%, transparent);
    border: 1px solid var(--border);
}

.ess-day-grid small {
    display: block;
    color: var(--muted);
    font-size: 10px;
}

.ess-day-grid strong {
    display: block;
    color: var(--text);
    font-size: 12px;
    margin-top: 3px;
}

html[data-theme="dark"] .ess-working-summary div,
html[data-theme="dark"] .ess-day-grid div,
html[data-theme="dark"] .ess-day-summary-card,
html[data-theme="dark"] .ess-attendance-table th {
    background: #151b28 !important;
    border-color: #303a4d !important;
}

html[data-theme="dark"] .ess-attendance-table td,
html[data-theme="dark"] .ess-attendance-table th {
    color: #f8fafc !important;
    border-color: #303a4d !important;
}

@media (max-width: 700px) {
    .ess-today-status-card {
        grid-template-columns: 1fr !important;
    }

    .ess-working-summary {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .ess-attendance-table-wrap {
        display: none;
    }

    .ess-attendance-mobile-list {
        display: block;
    }
}


/* ==========================================================
   Step 31H — ESS Attendance Image Thumbnail + GPS Map Link
   ========================================================== */

.ess-att-image-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    text-decoration: none !important;
    color: var(--primary) !important;
    font-weight: 800 !important;
    font-size: 11px !important;
}

.ess-att-image-link img {
    width: 34px !important;
    height: 34px !important;
    object-fit: cover !important;
    border-radius: 9px !important;
    border: 1px solid var(--border) !important;
    background: var(--surface-2) !important;
}

.ess-map-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 28px !important;
    padding: 6px 10px !important;
    border-radius: 999px !important;
    background: rgba(16,185,129,.13) !important;
    color: var(--primary) !important;
    border: 1px solid rgba(16,185,129,.22) !important;
    text-decoration: none !important;
    font-size: 11px !important;
    font-weight: 850 !important;
}

.ess-map-link::before {
    content: "📍";
    margin-right: 4px;
}

.ess-day-media-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 9px;
}

html[data-theme="dark"] .ess-att-image-link img {
    border-color: #303a4d !important;
}

html[data-theme="dark"] .ess-map-link {
    background: rgba(16,185,129,.18) !important;
    border-color: rgba(16,185,129,.28) !important;
}


/* ==========================================================
   Step 31I — ESS Profile Polish + Edit/Upload Approval + Smart Punch
   ========================================================== */

.ess-dashboard-profile-hero {
    position: relative;
    display: grid !important;
    place-items: center !important;
    text-align: center !important;
    padding: 18px 16px !important;
}

.ess-dashboard-profile-hero .ess-install-mini {
    position: absolute;
    right: 14px;
    top: 14px;
}

.ess-dashboard-avatar-wrap {
    margin-bottom: 10px;
}

.ess-dashboard-avatar,
.ess-profile-avatar-img {
    width: 72px !important;
    height: 72px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    display: grid !important;
    place-items: center !important;
    background: linear-gradient(135deg, #10b981, #2563eb) !important;
    color: #ffffff !important;
    font-weight: 950 !important;
    font-size: 26px !important;
    border: 3px solid rgba(255,255,255,.75) !important;
    box-shadow: 0 10px 24px rgba(15,23,42,.18) !important;
}

.ess-dashboard-name-block span,
.ess-profile-title-center p,
.ess-profile-title-center small {
    color: var(--muted) !important;
    font-size: 11px !important;
}

.ess-dashboard-name-block h1 {
    font-size: 17px !important;
    line-height: 1.2 !important;
    margin: 3px 0 !important;
    letter-spacing: -.02em !important;
}

.ess-dashboard-name-block p {
    margin: 0 !important;
    font-size: 12px !important;
    color: var(--muted) !important;
}

.ess-profile-hero-polished {
    display: grid !important;
    place-items: center !important;
    text-align: center !important;
    gap: 10px !important;
    padding: 18px !important;
}

.ess-profile-avatar-wrap {
    display: flex;
    justify-content: center;
}

.ess-profile-title-center h2 {
    font-size: 17px !important;
    line-height: 1.2 !important;
    margin: 4px 0 !important;
    letter-spacing: -.02em !important;
}

.ess-profile-title-center p,
.ess-profile-title-center small {
    display: block !important;
    margin: 2px 0 !important;
}

.ess-profile-info-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0 !important;
}

.ess-profile-info-grid > div {
    padding: 12px !important;
    border-bottom: 1px solid var(--border) !important;
}

.ess-profile-info-grid span,
.ess-profile-detail-grid span {
    font-size: 11px !important;
    color: var(--muted) !important;
}

.ess-profile-info-grid strong,
.ess-profile-detail-grid strong {
    display: block !important;
    font-size: 13px !important;
    color: var(--text) !important;
    margin-top: 4px !important;
    overflow-wrap: anywhere !important;
}

.ess-profile-accordion details {
    border-bottom: 1px solid var(--border) !important;
}

.ess-profile-accordion details:last-child {
    border-bottom: 0 !important;
}

.ess-profile-accordion summary {
    cursor: pointer !important;
    list-style: none !important;
    padding: 13px 15px !important;
    color: var(--text) !important;
    font-size: 13px !important;
    font-weight: 760 !important;
    display: flex !important;
    justify-content: space-between !important;
}

.ess-profile-accordion summary::after {
    content: "›";
    color: var(--primary);
    font-size: 18px;
}

.ess-profile-accordion details[open] summary::after {
    transform: rotate(90deg);
}

.ess-profile-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 0 15px 14px;
}

.ess-profile-detail-grid > div {
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px;
    background: color-mix(in srgb, var(--surface-2) 82%, transparent);
}

.ess-profile-edit-card h2 {
    font-size: 15px !important;
    margin-bottom: 5px !important;
}

html[data-theme="dark"] .ess-profile-detail-grid > div {
    background: #111827 !important;
    border-color: #303a4d !important;
}

html[data-theme="dark"] .ess-dashboard-name-block h1,
html[data-theme="dark"] .ess-profile-title-center h2,
html[data-theme="dark"] .ess-profile-info-grid strong,
html[data-theme="dark"] .ess-profile-detail-grid strong {
    color: #ffffff !important;
}

@media (max-width: 520px) {
    .ess-profile-info-grid,
    .ess-profile-detail-grid {
        grid-template-columns: 1fr !important;
    }

    .ess-dashboard-avatar,
    .ess-profile-avatar-img {
        width: 64px !important;
        height: 64px !important;
        font-size: 23px !important;
    }

    .ess-dashboard-name-block h1,
    .ess-profile-title-center h2 {
        font-size: 16px !important;
    }
}


/* ==========================================================
   Step 31J — ESS Dashboard Header + Punch Button Polish
   ========================================================== */

.ess-dashboard-profile-hero {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 22px 16px 20px !important;
}

.ess-dashboard-avatar-wrap {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    margin: 0 auto 12px !important;
}

.ess-dashboard-avatar {
    width: 92px !important;
    height: 92px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    font-size: 30px !important;
    margin: 0 auto !important;
    border: 4px solid rgba(255,255,255,.86) !important;
    box-shadow: 0 12px 30px rgba(15,23,42,.20) !important;
}

.ess-dashboard-name-block {
    width: 100% !important;
    text-align: center !important;
}

.ess-dashboard-name-block span {
    display: block !important;
    text-align: center !important;
    font-size: 11px !important;
    margin-bottom: 4px !important;
}

.ess-dashboard-name-block h1 {
    text-align: center !important;
    font-size: 16px !important;
    line-height: 1.22 !important;
    margin: 0 0 4px !important;
    letter-spacing: -.015em !important;
}

.ess-dashboard-name-block p {
    text-align: center !important;
    font-size: 11.5px !important;
    margin: 0 !important;
}

/* Move install button away from header */
.ess-install-bottom-wrap {
    display: flex;
    justify-content: center;
    margin: 8px 0 4px;
}

.ess-install-mini.bottom {
    position: static !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Smart punch button center text */
.ess-clock-card > a,
.ess-today-status-card > a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
    min-height: 40px !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    border-radius: 999px !important;
    padding: 10px 16px !important;
}

@media (max-width: 520px) {
    .ess-dashboard-avatar {
        width: 86px !important;
        height: 86px !important;
        font-size: 28px !important;
    }

    .ess-dashboard-profile-hero {
        padding: 20px 14px 18px !important;
    }
}


/* ==========================================================
   Step 31K — ESS Manager + HR Approval Screens
   ========================================================== */

.approval-status-grid,
.approval-detail-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.approval-status-grid > div,
.approval-detail-grid > div {
    border: 1px solid var(--border);
    background: var(--surface-2);
    border-radius: 13px;
    padding: 12px;
}

.approval-status-grid span,
.approval-detail-grid span {
    display: block;
    color: var(--muted);
    font-size: 11px;
    margin-bottom: 7px;
}

.approval-status-grid strong,
.approval-detail-grid strong {
    display: block;
    color: var(--text);
    font-size: 13px;
}

.approval-action-grid {
    display: grid;
    gap: 14px;
}

.approval-action-grid textarea {
    width: 100%;
    margin: 8px 0 12px;
    border: 1px solid var(--border);
    background: var(--input);
    color: var(--text);
    border-radius: 12px;
    padding: 10px;
}

.button-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

html[data-theme="dark"] .approval-status-grid > div,
html[data-theme="dark"] .approval-detail-grid > div {
    background: #151b28 !important;
    border-color: #303a4d !important;
}

@media (max-width: 800px) {
    .approval-status-grid,
    .approval-detail-grid {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================
   Step 31M — Configurable Approval Workflow
   ========================================================== */

.approval-help-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.approval-help-grid > div,
.approval-current-step-box {
    border: 1px solid var(--border);
    background: var(--surface-2);
    border-radius: 14px;
    padding: 13px;
}

.approval-help-grid b,
.approval-current-step-box strong {
    display: block;
    color: var(--text);
    font-size: 13px;
    margin-bottom: 5px;
}

.approval-help-grid span,
.approval-current-step-box span,
.approval-current-step-box small {
    display: block;
    color: var(--muted);
    font-size: 11px;
}

.workflow-step-editor {
    display: grid;
    gap: 10px;
}

.workflow-step-row {
    display: grid;
    grid-template-columns: 42px 1.2fr 1fr 1fr auto;
    align-items: end;
    gap: 10px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    border-radius: 14px;
    padding: 12px;
}

.step-number {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #10b981, #2563eb);
    color: #fff;
    font-weight: 900;
}

html[data-theme="dark"] .approval-help-grid > div,
html[data-theme="dark"] .approval-current-step-box,
html[data-theme="dark"] .workflow-step-row {
    background: #151b28 !important;
    border-color: #303a4d !important;
}

@media (max-width: 900px) {
    .approval-help-grid {
        grid-template-columns: 1fr;
    }

    .workflow-step-row {
        grid-template-columns: 1fr;
    }

    .step-number {
        width: 30px;
        height: 30px;
    }
}


/* ==========================================================
   Step 31P — ESS Bottom Nav Active State Fix
   ========================================================== */

.ess-bottom-nav {
    grid-template-columns: repeat(5, 1fr) !important;
    align-items: center !important;
    justify-items: center !important;
    gap: 0 !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
}

.ess-bottom-nav a {
    min-width: 0 !important;
    width: 100% !important;
    height: 54px !important;
    display: grid !important;
    place-items: center !important;
    align-content: center !important;
    justify-content: center !important;
    gap: 3px !important;
    text-align: center !important;
    border-radius: 16px !important;
    font-weight: 760 !important;
    line-height: 1 !important;
    color: var(--muted) !important;
}

.ess-bottom-nav a span {
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    line-height: 22px !important;
    text-align: center !important;
    font-size: 18px !important;
    margin: 0 auto !important;
    color: currentColor !important;
}

.ess-bottom-nav a b {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
    margin: 0 !important;
    color: currentColor !important;
}

.ess-bottom-nav a.active {
    color: var(--primary) !important;
    background: transparent !important;
}

.ess-bottom-nav a.active span,
.ess-bottom-nav a.active b {
    color: var(--primary) !important;
}

.ess-fab {
    grid-column: auto !important;
    justify-self: center !important;
    align-self: center !important;
    display: grid !important;
    place-items: center !important;
    text-align: center !important;
    line-height: 1 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 !important;
}

/* Prevent active Attendance page from shifting/cropping in mobile layout */
@media (max-width: 560px) {
    .ess-bottom-nav {
        width: 100% !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
        border-radius: 22px 22px 0 0 !important;
    }

    .ess-bottom-nav a {
        height: 52px !important;
    }

    .ess-fab {
        width: 56px !important;
        height: 56px !important;
        font-size: 26px !important;
        margin-top: -28px !important;
    }
}

html[data-theme="dark"] .ess-bottom-nav a {
    color: #9ca3af !important;
}

html[data-theme="dark"] .ess-bottom-nav a.active {
    color: #10d7a3 !important;
}


/* ==========================================================
   Step 31Q — ESS Bottom Nav Sticky Safe-Area Fix
   ==========================================================
   Fix: on some mobile pages, especially Attendance, browser scroll/address-bar
   resizing was clipping the bottom navigation half. This final override lifts
   the nav safely above the screen bottom and removes the cropping behavior.
*/

.ess-mobile-body {
    padding-bottom: 104px !important;
    min-height: 100dvh !important;
    overflow-x: hidden !important;
}

.ess-mobile-shell {
    padding-bottom: 128px !important;
    min-height: 100dvh !important;
}

.ess-bottom-nav {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    bottom: calc(12px + env(safe-area-inset-bottom)) !important;
    transform: translateX(-50%) !important;
    width: min(94vw, 520px) !important;
    height: 70px !important;
    min-height: 70px !important;
    max-height: 70px !important;
    overflow: visible !important;
    border-radius: 24px !important;
    padding: 8px 10px !important;
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    box-shadow: 0 18px 42px rgba(15, 23, 42, .18) !important;
    z-index: 99999 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr 74px 1fr 1fr !important;
    align-items: center !important;
    justify-items: center !important;
    will-change: transform !important;
}

.ess-bottom-nav a {
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-rows: 24px 14px !important;
    align-content: center !important;
    justify-items: center !important;
    gap: 3px !important;
    overflow: visible !important;
}

.ess-bottom-nav a span {
    width: 24px !important;
    height: 24px !important;
    line-height: 24px !important;
    font-size: 17px !important;
    display: block !important;
    text-align: center !important;
    overflow: visible !important;
}

.ess-bottom-nav a b {
    height: 14px !important;
    line-height: 14px !important;
    font-size: 9.5px !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: visible !important;
}

.ess-bottom-nav a.active,
.ess-bottom-nav a.active span,
.ess-bottom-nav a.active b {
    color: var(--primary) !important;
    transform: none !important;
    translate: none !important;
}

.ess-fab {
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    min-height: 58px !important;
    max-width: 58px !important;
    max-height: 58px !important;
    margin: -30px auto 0 !important;
    position: relative !important;
    top: 0 !important;
    transform: none !important;
    display: grid !important;
    place-items: center !important;
    line-height: 1 !important;
    font-size: 28px !important;
    overflow: visible !important;
    z-index: 100000 !important;
}

/* Old mobile override used left:0/right:0 on small screens; neutralize it. */
@media (max-width: 560px) {
    .ess-bottom-nav {
        left: 50% !important;
        right: auto !important;
        bottom: calc(12px + env(safe-area-inset-bottom)) !important;
        transform: translateX(-50%) !important;
        width: calc(100vw - 24px) !important;
        height: 70px !important;
        min-height: 70px !important;
        max-height: 70px !important;
        border-radius: 24px !important;
        padding: 8px 10px !important;
    }

    .ess-bottom-nav a {
        height: 52px !important;
        min-height: 52px !important;
        max-height: 52px !important;
    }

    .ess-fab {
        width: 58px !important;
        height: 58px !important;
        font-size: 28px !important;
        margin-top: -30px !important;
    }
}

/* Some Android browsers resize visual viewport while scrolling; fixed element stays visible. */
@supports (height: 100dvh) {
    .ess-bottom-nav {
        bottom: calc(12px + env(safe-area-inset-bottom)) !important;
    }
}


/* ==========================================================
   Step 31S — ESS Bottom Nav Scroll Lock Fix
   ==========================================================
   Video issue: while scrolling Attendance, mobile browser viewport changes made
   the fixed bottom menu move up/down. This locks the bottom nav to the stable
   small viewport height (svh), not the dynamic browser chrome viewport.
*/

:root {
    --ess-bottom-nav-height: 70px;
    --ess-bottom-nav-gap: 12px;
}

.ess-mobile-body {
    padding-bottom: calc(var(--ess-bottom-nav-height) + 48px + env(safe-area-inset-bottom)) !important;
}

.ess-mobile-shell {
    padding-bottom: calc(var(--ess-bottom-nav-height) + 72px + env(safe-area-inset-bottom)) !important;
}

/* Use top + 100svh instead of bottom so it will not jump when Chrome address bar changes. */
.ess-bottom-nav {
    position: fixed !important;
    top: calc(100svh - var(--ess-bottom-nav-height) - var(--ess-bottom-nav-gap) - env(safe-area-inset-bottom)) !important;
    bottom: auto !important;
    left: 50% !important;
    right: auto !important;
    transform: translate3d(-50%, 0, 0) !important;
    width: min(94vw, 520px) !important;
    height: var(--ess-bottom-nav-height) !important;
    min-height: var(--ess-bottom-nav-height) !important;
    max-height: var(--ess-bottom-nav-height) !important;
    overflow: visible !important;
    contain: layout paint !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
    will-change: transform !important;
}

/* fallback for browsers that do not support svh */
@supports not (height: 100svh) {
    .ess-bottom-nav {
        top: auto !important;
        bottom: calc(12px + env(safe-area-inset-bottom)) !important;
    }
}

@media (max-width: 560px) {
    .ess-bottom-nav {
        top: calc(100svh - var(--ess-bottom-nav-height) - var(--ess-bottom-nav-gap) - env(safe-area-inset-bottom)) !important;
        bottom: auto !important;
        left: 50% !important;
        right: auto !important;
        transform: translate3d(-50%, 0, 0) !important;
        width: calc(100vw - 24px) !important;
        height: var(--ess-bottom-nav-height) !important;
        min-height: var(--ess-bottom-nav-height) !important;
        max-height: var(--ess-bottom-nav-height) !important;
    }
}

/* Keep all icons/text locked in same place while scrolling */
.ess-bottom-nav a,
.ess-bottom-nav a.active,
.ess-bottom-nav a span,
.ess-bottom-nav a b,
.ess-fab {
    transform: none !important;
    translate: none !important;
}


/* ==========================================================
   Step 31T — ESS Bottom Nav Clean Style Restore
   ==========================================================
   Keep Step 31S scroll-lock fix, but remove the heavy boxed look.
   Restore the cleaner floating nav shape and keep + button centered/perfect.
*/

.ess-bottom-nav {
    /* Keep stable scroll-lock position from Step 31S */
    position: fixed !important;
    top: calc(100svh - 70px - 12px - env(safe-area-inset-bottom)) !important;
    bottom: auto !important;
    left: 50% !important;
    right: auto !important;
    transform: translate3d(-50%, 0, 0) !important;

    /* Clean visual style */
    width: min(94vw, 520px) !important;
    height: 70px !important;
    min-height: 70px !important;
    max-height: 70px !important;
    padding: 8px 10px !important;
    border-radius: 26px 26px 0 0 !important;
    border: 0 !important;
    border-top: 1px solid rgba(148, 163, 184, .22) !important;
    border-left: 1px solid rgba(148, 163, 184, .14) !important;
    border-right: 1px solid rgba(148, 163, 184, .14) !important;
    background: color-mix(in srgb, var(--surface) 96%, transparent) !important;
    box-shadow: 0 -14px 34px rgba(15, 23, 42, .12) !important;
    overflow: visible !important;

    display: grid !important;
    grid-template-columns: 1fr 1fr 74px 1fr 1fr !important;
    align-items: center !important;
    justify-items: center !important;
    z-index: 99999 !important;
}

.ess-bottom-nav a {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 14px !important;
}

.ess-bottom-nav a.active {
    background: transparent !important;
    box-shadow: none !important;
}

.ess-fab {
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    min-height: 64px !important;
    max-width: 64px !important;
    max-height: 64px !important;
    margin: -34px auto 0 !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #12c7a5, #2563eb) !important;
    box-shadow: 0 18px 36px rgba(37, 99, 235, .34) !important;
    color: #ffffff !important;
    font-size: 30px !important;
    font-weight: 900 !important;
    border: 0 !important;
    display: grid !important;
    place-items: center !important;
    line-height: 1 !important;
    padding: 0 !important;
    overflow: visible !important;
}

@media (max-width: 560px) {
    .ess-bottom-nav {
        width: calc(100vw - 26px) !important;
        height: 70px !important;
        min-height: 70px !important;
        max-height: 70px !important;
        border-radius: 24px 24px 0 0 !important;
        padding: 8px 10px !important;
    }

    .ess-fab {
        width: 64px !important;
        height: 64px !important;
        min-width: 64px !important;
        min-height: 64px !important;
        margin-top: -34px !important;
        font-size: 30px !important;
    }
}

html[data-theme="dark"] .ess-bottom-nav {
    background: rgba(15, 23, 42, .96) !important;
    border-top-color: rgba(148, 163, 184, .22) !important;
    border-left-color: rgba(148, 163, 184, .12) !important;
    border-right-color: rgba(148, 163, 184, .12) !important;
}

html[data-theme="light"] .ess-bottom-nav {
    background: rgba(255, 255, 255, .96) !important;
}


/* ==========================================================
   Step 31U — ESS Bottom Nav Font Style Fix
   ==========================================================
   Fix: when Attendance tab becomes active, browser/font rendering was making
   label look italic. Force normal style for all nav states.
*/

.ess-bottom-nav,
.ess-bottom-nav *,
.ess-bottom-nav a,
.ess-bottom-nav a span,
.ess-bottom-nav a b,
.ess-bottom-nav a.active,
.ess-bottom-nav a.active span,
.ess-bottom-nav a.active b,
.ess-fab {
    font-style: normal !important;
    font-family: inherit !important;
    text-decoration: none !important;
    letter-spacing: 0 !important;
}

.ess-bottom-nav a b {
    font-weight: 800 !important;
    transform: none !important;
    skew: none !important;
}

.ess-bottom-nav a.active b {
    font-weight: 850 !important;
    font-style: normal !important;
    transform: none !important;
    skew: none !important;
}


/* ==========================================================
   Step 31V — ESS Bottom Menu Final Sample Match
   ==========================================================
   Goal: match provided sample image:
   - clean rounded top menu
   - + button perfectly centered and not cut
   - Attendance active state same as Home
   - all labels clear, non-italic, visible
*/

:root {
    --ess-bottom-nav-height: 78px;
    --ess-bottom-nav-gap: 0px;
    --ess-fab-size: 72px;
}

.ess-mobile-body {
    padding-bottom: calc(118px + env(safe-area-inset-bottom)) !important;
}

.ess-mobile-shell {
    padding-bottom: calc(132px + env(safe-area-inset-bottom)) !important;
}

.ess-bottom-nav {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: 0 !important;
    transform: translate3d(-50%, 0, 0) !important;

    width: min(100vw, 540px) !important;
    height: var(--ess-bottom-nav-height) !important;
    min-height: var(--ess-bottom-nav-height) !important;
    max-height: var(--ess-bottom-nav-height) !important;

    display: grid !important;
    grid-template-columns: 1fr 1fr 86px 1fr 1fr !important;
    align-items: center !important;
    justify-items: center !important;
    gap: 0 !important;

    padding: 12px 14px calc(8px + env(safe-area-inset-bottom)) !important;
    border-radius: 28px 28px 0 0 !important;
    border: 1px solid rgba(148, 163, 184, .22) !important;
    border-bottom: 0 !important;
    background: rgba(15, 23, 42, .98) !important;
    box-shadow: 0 -12px 34px rgba(2, 6, 23, .22) !important;
    overflow: visible !important;
    z-index: 99999 !important;
    contain: none !important;
    isolation: isolate !important;
}

html[data-theme="light"] .ess-bottom-nav {
    background: rgba(15, 23, 42, .98) !important;
    border-color: rgba(148, 163, 184, .22) !important;
}

html[data-theme="dark"] .ess-bottom-nav {
    background: rgba(15, 23, 42, .98) !important;
    border-color: rgba(148, 163, 184, .22) !important;
}

.ess-bottom-nav a {
    width: 100% !important;
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
    padding: 0 !important;
    margin: 0 !important;

    display: grid !important;
    grid-template-rows: 24px 16px !important;
    align-content: center !important;
    align-items: center !important;
    justify-content: center !important;
    justify-items: center !important;
    gap: 4px !important;

    background: transparent !important;
    border: 0 !important;
    border-radius: 14px !important;
    box-shadow: none !important;
    text-align: center !important;
    color: #9ca3af !important;
    text-decoration: none !important;
    font-family: inherit !important;
    font-style: normal !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
    transform: none !important;
    translate: none !important;
    overflow: visible !important;
}

.ess-bottom-nav a span {
    display: block !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    line-height: 24px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    text-align: center !important;
    font-size: 18px !important;
    color: currentColor !important;
    font-style: normal !important;
    font-weight: 800 !important;
    transform: none !important;
    translate: none !important;
    overflow: visible !important;
}

.ess-bottom-nav a b {
    display: block !important;
    width: 100% !important;
    height: 16px !important;
    line-height: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    white-space: nowrap !important;
    font-size: 10.5px !important;
    color: currentColor !important;
    font-family: inherit !important;
    font-style: normal !important;
    font-weight: 850 !important;
    letter-spacing: 0 !important;
    transform: none !important;
    translate: none !important;
    overflow: visible !important;
}

.ess-bottom-nav a.active,
.ess-bottom-nav a.active span,
.ess-bottom-nav a.active b {
    color: #10d7a3 !important;
    background: transparent !important;
    font-style: normal !important;
    transform: none !important;
    translate: none !important;
}

.ess-fab {
    width: var(--ess-fab-size) !important;
    height: var(--ess-fab-size) !important;
    min-width: var(--ess-fab-size) !important;
    min-height: var(--ess-fab-size) !important;
    max-width: var(--ess-fab-size) !important;
    max-height: var(--ess-fab-size) !important;

    grid-column: 3 !important;
    align-self: start !important;
    justify-self: center !important;
    margin: -34px auto 0 !important;
    padding: 0 !important;

    display: grid !important;
    place-items: center !important;
    border-radius: 999px !important;
    border: 0 !important;
    background: linear-gradient(135deg, #12c7a5, #2563eb) !important;
    color: #ffffff !important;
    box-shadow: 0 18px 38px rgba(37, 99, 235, .38) !important;

    font-size: 34px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    font-style: normal !important;
    text-align: center !important;
    transform: none !important;
    translate: none !important;
    overflow: visible !important;
    z-index: 100000 !important;
}

@media (max-width: 560px) {
    .ess-bottom-nav {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 78px !important;
        min-height: 78px !important;
        max-height: 78px !important;
        padding: 12px 14px calc(8px + env(safe-area-inset-bottom)) !important;
        border-radius: 28px 28px 0 0 !important;
        grid-template-columns: 1fr 1fr 86px 1fr 1fr !important;
    }

    .ess-fab {
        width: 72px !important;
        height: 72px !important;
        min-width: 72px !important;
        min-height: 72px !important;
        max-width: 72px !important;
        max-height: 72px !important;
        margin-top: -34px !important;
        font-size: 34px !important;
    }

    .ess-bottom-nav a b {
        font-size: 10.5px !important;
    }
}

/* Use stable viewport only when browser supports it, but keep visual bottom full-width look. */
@supports (height: 100svh) {
    .ess-bottom-nav {
        bottom: 0 !important;
        top: auto !important;
    }
}


/* ==========================================================
   Step 31W — ESS Leave Footer + Bottom Nav Theme/Shrink Fix
   ========================================================== */

/* Make ESS bottom nav follow light/dark theme properly */
html[data-theme="light"] .ess-bottom-nav {
    background: rgba(255, 255, 255, .98) !important;
    border-color: rgba(148, 163, 184, .28) !important;
    box-shadow: 0 -12px 34px rgba(15, 23, 42, .12) !important;
}

html[data-theme="light"] .ess-bottom-nav a {
    color: #64748b !important;
}

html[data-theme="light"] .ess-bottom-nav a.active,
html[data-theme="light"] .ess-bottom-nav a.active span,
html[data-theme="light"] .ess-bottom-nav a.active b {
    color: #10b981 !important;
}

html[data-theme="dark"] .ess-bottom-nav {
    background: rgba(15, 23, 42, .98) !important;
    border-color: rgba(148, 163, 184, .22) !important;
    box-shadow: 0 -12px 34px rgba(2, 6, 23, .22) !important;
}

html[data-theme="dark"] .ess-bottom-nav a {
    color: #9ca3af !important;
}

html[data-theme="dark"] .ess-bottom-nav a.active,
html[data-theme="dark"] .ess-bottom-nav a.active span,
html[data-theme="dark"] .ess-bottom-nav a.active b {
    color: #10d7a3 !important;
}

/* Stop Attendance button / any bottom item from shrinking on tap/click/focus */
.ess-bottom-nav,
.ess-bottom-nav a,
.ess-bottom-nav a:active,
.ess-bottom-nav a:focus,
.ess-bottom-nav a:focus-visible,
.ess-bottom-nav a.active,
.ess-bottom-nav a.active:active,
.ess-bottom-nav a.active:focus,
.ess-bottom-nav a span,
.ess-bottom-nav a b {
    transform: none !important;
    scale: 1 !important;
    zoom: 1 !important;
    transition-property: color, background-color, border-color, box-shadow !important;
    font-style: normal !important;
    text-decoration: none !important;
    outline: none !important;
}

.ess-bottom-nav a {
    -webkit-tap-highlight-color: transparent !important;
    touch-action: manipulation !important;
    box-sizing: border-box !important;
}

/* Keep dimensions identical for Home and Attendance active state */
.ess-bottom-nav a,
.ess-bottom-nav a.active {
    width: 100% !important;
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
    padding: 0 !important;
    margin: 0 !important;
}

.ess-bottom-nav a b,
.ess-bottom-nav a.active b {
    font-size: 10.5px !important;
    font-weight: 850 !important;
    line-height: 16px !important;
    height: 16px !important;
}

.ess-fab,
.ess-fab:active,
.ess-fab:focus {
    transform: none !important;
    scale: 1 !important;
    outline: none !important;
}

/* ESS leave pages use mobile layout spacing */
.ess-mobile-body .form-card,
.ess-mobile-body .card {
    max-width: 100% !important;
}


/* ==========================================================
   Step 31X — ESS Footer Bottom Menu Center Fix
   ==========================================================
   Fix: bottom footer/menu bar not centered on mobile pages.
   Keep the sample style but center the nav container exactly.
*/

.ess-bottom-nav {
    left: 50% !important;
    right: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: translateX(-50%) !important;
    width: min(calc(100vw - 16px), 520px) !important;
    max-width: 520px !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

@media (max-width: 560px) {
    .ess-bottom-nav {
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }
}

/* Center every footer item and keep the + button exactly on the middle column */
.ess-bottom-nav a,
.ess-bottom-nav .ess-fab {
    justify-self: center !important;
    align-self: center !important;
}

.ess-fab {
    grid-column: 3 !important;
    margin-left: auto !important;
    margin-right: auto !important;
}


/* ==========================================================
   Step 31Y — ESS Biometric Kiosk Clean Mobile View
   ========================================================== */

.ess-kiosk-mode-html,
.ess-kiosk-mode-body {
    background: #050b14 !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    overflow-x: hidden !important;
}

body.ess-kiosk-mode-body .topbar,
body.ess-kiosk-mode-body .sidebar,
body.ess-kiosk-mode-body .mobile-menu-btn,
body.ess-kiosk-mode-body .sidebar-backdrop,
body.ess-kiosk-mode-body .app-header,
body.ess-kiosk-mode-body .page-header {
    display: none !important;
}

body.ess-kiosk-mode-body .app-shell,
body.ess-kiosk-mode-body .main-content {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    background: #050b14 !important;
}

body.ess-kiosk-mode-body .ess-biometric-fullscreen {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    z-index: 999999 !important;
    overflow-y: auto !important;
    background: #050b14 !important;
    padding: 8px !important;
}

body.ess-kiosk-mode-body .kiosk-only-tabs,
body.ess-kiosk-mode-body .ess-kiosk-return-note {
    display: none !important;
}

body.ess-kiosk-mode-body .punch-card,
body.ess-kiosk-mode-body .kiosk-punch-reference,
body.ess-kiosk-mode-body .register-wizard-page {
    max-width: 560px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* If opened from ESS and face is already registered, no tabs are shown; punch screen starts clean. */
body.ess-kiosk-mode-body .kiosk-tab:not(.hidden) {
    display: block !important;
}

@media (max-width: 640px) {
    body.ess-kiosk-mode-body .ess-biometric-fullscreen {
        padding: 0 !important;
    }

    body.ess-kiosk-mode-body .punch-card,
    body.ess-kiosk-mode-body .kiosk-punch-reference,
    body.ess-kiosk-mode-body .register-wizard-page {
        border-radius: 0 !important;
        min-height: 100dvh !important;
        margin: 0 !important;
        border-left: 0 !important;
        border-right: 0 !important;
    }
}


/* ==========================================================
   Step 31Z — ESS Biometric Page Bottom Menu
   ========================================================== */

body.ess-kiosk-mode-body .ess-bottom-nav {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 1000000 !important;
}

body.ess-kiosk-mode-body .ess-biometric-fullscreen {
    padding-bottom: 104px !important;
}

body.ess-kiosk-mode-body .punch-card,
body.ess-kiosk-mode-body .kiosk-punch-reference,
body.ess-kiosk-mode-body .register-wizard-page {
    padding-bottom: 108px !important;
}

@media (max-width: 640px) {
    body.ess-kiosk-mode-body .ess-biometric-fullscreen {
        padding-bottom: 108px !important;
    }

    body.ess-kiosk-mode-body .punch-card,
    body.ess-kiosk-mode-body .kiosk-punch-reference,
    body.ess-kiosk-mode-body .register-wizard-page {
        padding-bottom: 118px !important;
    }
}


/* ==========================================================
   Step 32A — Biometric Kiosk Footer + Light Theme + Auto GPS Fix
   ========================================================== */

/* Biometric ESS page should respect Light theme */
html[data-theme="light"] body.ess-kiosk-mode-body,
html[data-theme="light"] body.ess-kiosk-mode-body .app-shell,
html[data-theme="light"] body.ess-kiosk-mode-body .main-content,
html[data-theme="light"] body.ess-kiosk-mode-body .ess-biometric-fullscreen {
    background: #f3f6fb !important;
    color: #0f172a !important;
}

html[data-theme="light"] body.ess-kiosk-mode-body .punch-card,
html[data-theme="light"] body.ess-kiosk-mode-body .kiosk-punch-reference,
html[data-theme="light"] body.ess-kiosk-mode-body .register-wizard-page,
html[data-theme="light"] body.ess-kiosk-mode-body .camera-shell,
html[data-theme="light"] body.ess-kiosk-mode-body .gps-location-card,
html[data-theme="light"] body.ess-kiosk-mode-body .kiosk-time-panel {
    background: #ffffff !important;
    color: #0f172a !important;
    border-color: #dbe5f2 !important;
}

html[data-theme="light"] body.ess-kiosk-mode-body .camera-stage,
html[data-theme="light"] body.ess-kiosk-mode-body .face-circle-wrap {
    background: #e8eef7 !important;
}

html[data-theme="light"] body.ess-kiosk-mode-body .camera-status,
html[data-theme="light"] body.ess-kiosk-mode-body .section-subtitle {
    color: #64748b !important;
}

/* Biometric direct nav-only footer should show icons/text, not a blank box */
body.ess-kiosk-mode-body .ess-kiosk-bottom-nav,
body.ess-kiosk-mode-body .ess-bottom-nav {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

body.ess-kiosk-mode-body .ess-bottom-nav a,
body.ess-kiosk-mode-body .ess-bottom-nav a span,
body.ess-kiosk-mode-body .ess-bottom-nav a b,
body.ess-kiosk-mode-body .ess-fab {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
}

body.ess-kiosk-mode-body .ess-bottom-nav a {
    display: grid !important;
    color: #9ca3af !important;
}

body.ess-kiosk-mode-body .ess-bottom-nav a.active,
body.ess-kiosk-mode-body .ess-bottom-nav a.active span,
body.ess-kiosk-mode-body .ess-bottom-nav a.active b {
    color: #10d7a3 !important;
}

html[data-theme="light"] body.ess-kiosk-mode-body .ess-bottom-nav {
    background: rgba(255,255,255,.98) !important;
    border-color: rgba(148, 163, 184, .28) !important;
    box-shadow: 0 -12px 34px rgba(15, 23, 42, .12) !important;
}

html[data-theme="light"] body.ess-kiosk-mode-body .ess-bottom-nav a {
    color: #64748b !important;
}

html[data-theme="light"] body.ess-kiosk-mode-body .ess-bottom-nav a.active,
html[data-theme="light"] body.ess-kiosk-mode-body .ess-bottom-nav a.active span,
html[data-theme="light"] body.ess-kiosk-mode-body .ess-bottom-nav a.active b {
    color: #10b981 !important;
}

/* keep buttons above footer */
body.ess-kiosk-mode-body .ess-biometric-fullscreen {
    padding-bottom: 118px !important;
}

body.ess-kiosk-mode-body .punch-card,
body.ess-kiosk-mode-body .kiosk-punch-reference,
body.ess-kiosk-mode-body .register-wizard-page {
    padding-bottom: 128px !important;
}

/* improve punch buttons in light theme */
html[data-theme="light"] body.ess-kiosk-mode-body .punch-type-btn:not(.clock-in):not(.clock-out) {
    background: #1e3a5f !important;
    color: #ffffff !important;
}

html[data-theme="light"] body.ess-kiosk-mode-body .punch-type-btn {
    box-shadow: 0 10px 22px rgba(15,23,42,.10) !important;
}


/* ==========================================================
   Step 32C — Registered Users Scroll + Search
   ========================================================== */

#kiosk-tab-status {
    max-height: none !important;
    overflow: visible !important;
}

#kiosk-tab-status .registered-user-search-box {
    display: grid;
    gap: 6px;
    margin: 12px 0 14px;
}

#kiosk-tab-status .registered-user-search-box input {
    width: 100%;
    height: 42px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--input);
    color: var(--text);
    padding: 0 14px;
    font-size: 13px;
    font-weight: 750;
    outline: none;
}

#kiosk-tab-status .registered-user-search-box input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(16,185,129,.12);
}

#kiosk-tab-status .registered-user-search-box small {
    color: var(--muted);
    font-size: 11px;
}

#kiosk-tab-status .registered-users-scroll {
    max-height: calc(100vh - 250px);
    max-height: calc(100dvh - 250px);
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--border);
    border-radius: 14px;
}

#kiosk-tab-status .registered-users-table {
    min-width: 980px;
    margin: 0;
}

#kiosk-tab-status .registered-users-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--surface-2);
}

body.ess-kiosk-mode-body #kiosk-tab-status,
body.ess-kiosk-mode-body #kiosk-tab-status .registered-users-scroll {
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
}

html[data-theme="dark"] #kiosk-tab-status .registered-users-table thead th {
    background: #151b28 !important;
}

html[data-theme="light"] #kiosk-tab-status .registered-users-table thead th {
    background: #f8fafc !important;
}

@media (max-width: 700px) {
    #kiosk-tab-status {
        padding-bottom: 110px !important;
    }

    #kiosk-tab-status .registered-users-scroll {
        max-height: calc(100dvh - 230px);
    }

    #kiosk-tab-status .registered-user-search-box input {
        height: 40px;
        font-size: 12px;
    }
}


/* ==========================================================
   Step 32D — Face Registration Manager Page
   ========================================================== */

.face-reg-search-box {
    display: grid;
    gap: 6px;
    margin-top: 14px;
}

.face-reg-search-box input {
    width: 100%;
    height: 42px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--input);
    color: var(--text);
    padding: 0 14px;
    font-size: 13px;
    font-weight: 750;
    outline: none;
}

.face-reg-search-box input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(16,185,129,.12);
}

.face-reg-search-box small {
    color: var(--muted);
    font-size: 11px;
}

.face-reg-scroll {
    max-height: calc(100vh - 230px);
    max-height: calc(100dvh - 230px);
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--border);
    border-radius: 14px;
}

.face-reg-table {
    min-width: 980px;
    margin: 0;
}

.face-reg-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--surface-2);
}

.face-reg-actions {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}

.face-reg-actions form {
    margin: 0;
}

html[data-theme="dark"] .face-reg-table thead th {
    background: #151b28 !important;
}

html[data-theme="light"] .face-reg-table thead th {
    background: #f8fafc !important;
}

@media (max-width: 700px) {
    .face-reg-scroll {
        max-height: calc(100dvh - 210px);
    }
}


/* ==========================================================
   Step 32E — Biometric Light Theme Popup Readability Fix
   ========================================================== */

/* Main overlay / message panels on biometric kiosk */
html[data-theme="light"] body.ess-kiosk-mode-body .punch-result-overlay,
html[data-theme="light"] body.ess-kiosk-mode-body .punch-success-panel,
html[data-theme="light"] body.ess-kiosk-mode-body .kiosk-result-panel,
html[data-theme="light"] body.ess-kiosk-mode-body .attendance-result-panel,
html[data-theme="light"] body.ess-kiosk-mode-body .face-result-panel,
html[data-theme="light"] body.ess-kiosk-mode-body .biometric-result-panel,
html[data-theme="light"] body.ess-kiosk-mode-body .kiosk-message-panel,
html[data-theme="light"] body.ess-kiosk-mode-body #punchSuccessPanel,
html[data-theme="light"] body.ess-kiosk-mode-body #identifiedEmployeeBox {
    background: rgba(255, 255, 255, .96) !important;
    color: #0f172a !important;
    border: 1px solid rgba(15, 23, 42, .12) !important;
    box-shadow: 0 18px 38px rgba(15, 23, 42, .18) !important;
    text-shadow: none !important;
}

/* Warning/action required overlay */
html[data-theme="light"] body.ess-kiosk-mode-body .punch-success-panel.warning,
html[data-theme="light"] body.ess-kiosk-mode-body .attendance-warning,
html[data-theme="light"] body.ess-kiosk-mode-body .warning-panel,
html[data-theme="light"] body.ess-kiosk-mode-body .kiosk-warning,
html[data-theme="light"] body.ess-kiosk-mode-body #punchSuccessPanel.warning {
    background: #fff7ed !important;
    color: #7c2d12 !important;
    border: 1px solid #fdba74 !important;
    box-shadow: 0 18px 38px rgba(124, 45, 18, .16) !important;
}

/* Success overlay */
html[data-theme="light"] body.ess-kiosk-mode-body .punch-success-panel.success,
html[data-theme="light"] body.ess-kiosk-mode-body .success-panel,
html[data-theme="light"] body.ess-kiosk-mode-body .kiosk-success,
html[data-theme="light"] body.ess-kiosk-mode-body #punchSuccessPanel.success {
    background: #ecfdf5 !important;
    color: #064e3b !important;
    border: 1px solid #6ee7b7 !important;
    box-shadow: 0 18px 38px rgba(6, 78, 59, .14) !important;
}

/* Failed/error overlay */
html[data-theme="light"] body.ess-kiosk-mode-body .punch-success-panel.failed,
html[data-theme="light"] body.ess-kiosk-mode-body .punch-success-panel.error,
html[data-theme="light"] body.ess-kiosk-mode-body .error-panel,
html[data-theme="light"] body.ess-kiosk-mode-body .kiosk-error,
html[data-theme="light"] body.ess-kiosk-mode-body #punchSuccessPanel.failed,
html[data-theme="light"] body.ess-kiosk-mode-body #punchSuccessPanel.error {
    background: #fef2f2 !important;
    color: #7f1d1d !important;
    border: 1px solid #fca5a5 !important;
    box-shadow: 0 18px 38px rgba(127, 29, 29, .14) !important;
}

/* All text inside biometric popups should be readable */
html[data-theme="light"] body.ess-kiosk-mode-body .punch-result-overlay *,
html[data-theme="light"] body.ess-kiosk-mode-body .punch-success-panel *,
html[data-theme="light"] body.ess-kiosk-mode-body .kiosk-result-panel *,
html[data-theme="light"] body.ess-kiosk-mode-body .attendance-result-panel *,
html[data-theme="light"] body.ess-kiosk-mode-body .face-result-panel *,
html[data-theme="light"] body.ess-kiosk-mode-body .biometric-result-panel *,
html[data-theme="light"] body.ess-kiosk-mode-body .kiosk-message-panel *,
html[data-theme="light"] body.ess-kiosk-mode-body #punchSuccessPanel *,
html[data-theme="light"] body.ess-kiosk-mode-body #identifiedEmployeeBox * {
    color: inherit !important;
    text-shadow: none !important;
}

/* Specific title/body colors */
html[data-theme="light"] body.ess-kiosk-mode-body #punchSuccessTitle,
html[data-theme="light"] body.ess-kiosk-mode-body #punchSuccessEmployee,
html[data-theme="light"] body.ess-kiosk-mode-body #punchSuccessMessage {
    color: inherit !important;
    text-shadow: none !important;
}

/* If panel is blank white due to missing class, give readable defaults and spacing */
html[data-theme="light"] body.ess-kiosk-mode-body #punchSuccessPanel {
    min-height: 86px !important;
    padding: 14px 16px !important;
    border-radius: 18px !important;
    display: grid;
    place-items: center;
    text-align: center;
}

/* Keep GPS card readable behind popup */
html[data-theme="light"] body.ess-kiosk-mode-body .gps-address-box,
html[data-theme="light"] body.ess-kiosk-mode-body .gps-location-card {
    background: #ecfeff !important;
    color: #0f172a !important;
    border-color: #67e8f9 !important;
}

html[data-theme="light"] body.ess-kiosk-mode-body .gps-address-box *,
html[data-theme="light"] body.ess-kiosk-mode-body .gps-location-card * {
    color: #0f172a !important;
    text-shadow: none !important;
}

/* ==========================================================
   Step 34M Biometric Production UI Polish
   Uses global HRMS theme + global RTL/LTR settings only.
   No page-level theme or language override.
   ========================================================== */

/* Shared page refinement */
.biometric-device-table,
.zkteco-table,
.data-table {
    border-collapse: separate;
    border-spacing: 0;
}

/* Use global theme variables from admin.css */
body .adms-action-box,
body .mode-box,
body .device-command-box,
body .device-action-notes,
body .collapsed-form-hint,
body .vendor-integration-note,
body .employee-upload-scroll,
body .rules-explain-box,
body .curl-box,
body .adms-url-grid > div {
    background: var(--surface-2) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
    box-shadow: none !important;
}

html[data-theme="dark"] body .adms-action-box,
html[data-theme="dark"] body .mode-box,
html[data-theme="dark"] body .device-command-box,
html[data-theme="dark"] body .device-action-notes,
html[data-theme="dark"] body .collapsed-form-hint,
html[data-theme="dark"] body .vendor-integration-note,
html[data-theme="dark"] body .employee-upload-scroll,
html[data-theme="dark"] body .rules-explain-box,
html[data-theme="dark"] body .curl-box,
html[data-theme="dark"] body .adms-url-grid > div {
    background: linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 90%, #020617 10%), var(--surface-2)) !important;
}

/* Professional section headers */
body .section-header {
    gap: 14px;
}

body .section-title {
    letter-spacing: -0.015em;
}

body .section-subtitle {
    max-width: 900px;
}

/* Device/ZKTeco action cards */
.adms-action-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 14px;
}

.adms-action-box,
.mode-box {
    border-radius: 18px !important;
    padding: 15px !important;
}

.adms-action-box h3,
.mode-box h3,
.curl-box h3 {
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 950;
    color: var(--text);
}

.adms-action-box .mini-note,
.mode-box p,
.curl-box label,
.field-help,
.mini-label,
.muted-text {
    color: var(--muted) !important;
}

.adms-action-box form {
    display: grid;
    gap: 8px;
}

.adms-action-box .inline-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.adms-action-box input,
.adms-action-box select,
.employee-upload-controls input,
.employee-upload-controls select,
.inline-approval-form input {
    min-height: 38px;
}

/* Warning/info blocks that work in both themes */
.adms-warning {
    margin: 8px 0;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(245, 158, 11, .28) !important;
    background: rgba(245, 158, 11, .10) !important;
    color: var(--text) !important;
    font-size: 12px;
    line-height: 1.55;
}

html[data-theme="light"] .adms-warning {
    color: #92400e !important;
}

.rules-explain-box {
    border-style: solid !important;
    border-radius: 18px !important;
    padding: 14px 16px !important;
    margin-top: 12px !important;
}

.rules-explain-box p {
    margin: 6px 0 !important;
}

.rules-explain-box code,
.data-table code,
pre,
code {
    border-color: var(--border) !important;
    background: var(--surface-3) !important;
    color: var(--text) !important;
}

/* Better tables */
.table-wrap {
    border-radius: 18px !important;
    border: 1px solid var(--border) !important;
    background: var(--surface) !important;
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--surface) 85%, #fff 15%);
}

.data-table th {
    position: sticky;
    top: 0;
    z-index: 2;
    font-size: 11px !important;
    text-transform: uppercase;
    letter-spacing: .035em;
    color: var(--muted) !important;
    background: var(--surface-2) !important;
}

.data-table td {
    vertical-align: middle;
}

.data-table tbody tr:hover td {
    background: color-mix(in srgb, var(--surface-2) 78%, transparent) !important;
}

html[data-theme="dark"] .data-table tbody tr:hover td {
    background: color-mix(in srgb, var(--surface-3) 72%, transparent) !important;
}

/* Compact professional action bars */
.compact-actions {
    gap: 6px !important;
    align-items: center !important;
}

.compact-actions form,
.device-command-form,
.inline-approval-form {
    margin: 0 !important;
}

.device-command-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 8px;
    border-radius: 14px !important;
    margin: 4px 0;
}

.device-action-notes {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 8px;
    border-radius: 14px !important;
    margin-top: 6px;
}

.btn,
button.btn,
a.btn {
    white-space: nowrap;
}

.btn-sm {
    min-height: 30px;
}

/* Status badges */
.badge {
    border: 1px solid transparent;
}

.badge.success {
    border-color: rgba(34,197,94,.18);
}

.badge.info {
    border-color: rgba(59,130,246,.22);
}

.badge.danger {
    border-color: rgba(239,68,68,.24);
}

.badge.muted {
    border-color: color-mix(in srgb, var(--border) 88%, transparent);
}

/* Biometric counts */
.bio-count-stack {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
    min-width: 220px;
}

.bio-count-stack .badge {
    font-size: 11px;
    padding: 4px 7px;
}

/* Employee upload area */
.employee-upload-controls {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
    margin: 10px 0;
}

.employee-upload-scroll {
    max-height: 280px;
    overflow: auto;
    border-radius: 16px !important;
    margin: 8px 0 12px;
}

.employee-upload-scroll table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 12px;
}

.employee-upload-scroll th,
.employee-upload-scroll td {
    padding: 9px 10px;
    border-bottom: 1px solid var(--border);
    text-align: left;
}

.employee-upload-scroll th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--surface-2);
    color: var(--muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .035em;
}

/* Approval form */
.inline-approval-form {
    display: grid;
    grid-template-columns: repeat(3, minmax(120px, 1fr)) auto;
    gap: 7px;
    align-items: end;
    min-width: 640px;
}

.inline-approval-form .mini-check {
    align-self: center;
}

/* Use global RTL support, only fix biometric-specific horizontal layouts */
[dir="rtl"] .data-table th,
[dir="rtl"] .data-table td,
[dir="rtl"] .employee-upload-scroll th,
[dir="rtl"] .employee-upload-scroll td {
    text-align: right;
}

[dir="rtl"] .section-header,
[dir="rtl"] .btn-row,
[dir="rtl"] .compact-actions,
[dir="rtl"] .device-command-box,
[dir="rtl"] .device-action-notes,
[dir="rtl"] .bio-count-stack {
    direction: rtl;
}

[dir="rtl"] .inline-grid,
[dir="rtl"] .employee-upload-controls,
[dir="rtl"] .adms-action-grid {
    direction: rtl;
}

/* Mobile polish */
@media (max-width: 1100px) {
    .inline-approval-form {
        grid-template-columns: 1fr;
        min-width: 0;
    }
}

@media (max-width: 800px) {
    .adms-action-grid,
    .adms-action-box .inline-grid,
    .employee-upload-controls {
        grid-template-columns: 1fr !important;
    }

    .compact-actions,
    .btn-row,
    .device-command-box {
        align-items: stretch !important;
    }

    .compact-actions .btn,
    .compact-actions button,
    .compact-actions form,
    .device-command-form,
    .device-command-box .btn,
    .btn-row .btn {
        width: 100%;
    }

    .data-table {
        min-width: 980px;
    }

    .biometric-device-table {
        min-width: 1800px;
    }
}

/* ==========================================================
   Step 35E1 ZKTeco Employee Upload Compact Layout Fix
   ========================================================== */
.zk-employee-upload-card {
    padding: 12px !important;
    border-radius: 16px !important;
    max-width: 100% !important;
}

.zk-employee-upload-card .zk-upload-head {
    margin-bottom: 8px !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid var(--border);
}

.zk-employee-upload-card .section-title {
    font-size: 14px !important;
    font-weight: 800 !important;
}

.zk-employee-upload-card .section-subtitle,
.zk-employee-upload-card .mini-note,
.zk-employee-upload-card small {
    font-size: 11px !important;
    line-height: 1.35 !important;
}

.zk-employee-upload-card label,
.zk-employee-upload-card .mini-label {
    font-size: 11px !important;
    font-weight: 700 !important;
    margin-bottom: 4px !important;
}

.zk-employee-upload-card input,
.zk-employee-upload-card select {
    height: 34px !important;
    min-height: 34px !important;
    border-radius: 9px !important;
    font-size: 12px !important;
    padding: 0 9px !important;
}

.zk-employee-upload-card input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    min-height: 16px !important;
    padding: 0 !important;
    margin: 0 !important;
    accent-color: var(--primary);
    flex: 0 0 auto;
}

.zk-employee-upload-card .employee-upload-controls {
    grid-template-columns: repeat(4, minmax(180px, 1fr)) !important;
    gap: 8px !important;
    margin: 8px 0 !important;
}

.zk-upload-options-row {
    display: grid;
    grid-template-columns: repeat(5, minmax(120px, max-content)) repeat(2, minmax(150px, 1fr));
    gap: 8px;
    align-items: end;
    margin: 8px 0 10px;
    padding: 9px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: var(--surface-2);
}

.zk-upload-options-row .mini-check {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    margin: 0 !important;
    padding: 7px 8px !important;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    line-height: 1.1;
    white-space: nowrap;
}

.zk-small-select {
    margin: 0 !important;
}

.zk-upload-help {
    padding: 8px 10px !important;
    margin: 6px 0 8px !important;
    border-radius: 13px !important;
}

.zk-upload-help summary {
    cursor: pointer;
    font-size: 12px;
    font-weight: 800;
    color: var(--text);
}

.zk-upload-help p {
    margin: 5px 0 !important;
    font-size: 11px !important;
    line-height: 1.4 !important;
}

.zk-upload-dual-grid {
    display: grid;
    grid-template-columns: minmax(300px, .85fr) minmax(420px, 1.15fr);
    gap: 10px;
    margin-top: 8px;
}

.zk-upload-panel {
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface-2);
    overflow: hidden;
}

.zk-upload-panel-head {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: center;
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}

.zk-upload-panel-head h3 {
    margin: 0 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
}

.zk-upload-panel-head small {
    color: var(--muted);
    text-align: right;
}

.zk-upload-table-scroll {
    max-height: 210px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
}

.zk-upload-table-scroll table {
    font-size: 11px !important;
}

.zk-upload-table-scroll th,
.zk-upload-table-scroll td {
    padding: 7px 9px !important;
    font-size: 11px !important;
    vertical-align: middle !important;
}

.zk-upload-table-scroll td strong {
    font-size: 11px !important;
    font-weight: 750 !important;
}

.zk-upload-table-scroll td small {
    display: block;
    color: var(--muted);
    margin-top: 2px;
}

.zk-upload-footer {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    align-items: center;
    margin-top: 9px;
}

.zk-upload-footer .adms-warning {
    margin: 0 !important;
    padding: 7px 9px !important;
    font-size: 11px !important;
    border-radius: 10px !important;
}

html[dir="rtl"] .zk-upload-panel-head small,
[dir="rtl"] .zk-upload-panel-head small {
    text-align: left;
}

@media (max-width: 1200px) {
    .zk-employee-upload-card .employee-upload-controls,
    .zk-upload-options-row,
    .zk-upload-dual-grid {
        grid-template-columns: 1fr 1fr !important;
    }
}

@media (max-width: 760px) {
    .zk-employee-upload-card .employee-upload-controls,
    .zk-upload-options-row,
    .zk-upload-dual-grid,
    .zk-upload-footer {
        grid-template-columns: 1fr !important;
    }
    .zk-upload-panel-head {
        align-items: flex-start;
        flex-direction: column;
    }
    .zk-upload-panel-head small {
        text-align: left;
    }
}

/* ==========================================================
   Step 35E3 Employee Master Standard Compact UI Hotfix
   ========================================================== */
:root {
    --std-font-size: 12px;
    --std-label-size: 11px;
    --std-card-pad: 12px;
    --std-input-height: 34px;
    --std-radius: 12px;
}

/* Standard compact employee list */
.employee-list-card.compact-admin-card {
    padding: 12px !important;
    border-radius: 14px !important;
}
.employee-list-card .section-header,
.employee-form-card .section-header,
.employee-profile-grid .section-header {
    margin-bottom: 10px !important;
    padding-bottom: 8px !important;
}
.employee-list-card .section-title,
.employee-form-card .section-title,
.employee-profile-grid .section-title {
    font-size: 14px !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
}
.employee-list-card .section-subtitle,
.employee-form-card .section-subtitle {
    font-size: 11px !important;
    line-height: 1.35 !important;
}
.employee-filter-row {
    grid-template-columns: minmax(260px, 1fr) auto auto !important;
    gap: 6px !important;
    margin-bottom: 8px !important;
}
.employee-filter-row input {
    height: 34px !important;
    font-size: 12px !important;
    border-radius: 9px !important;
}
.employee-list-table-wrap {
    max-height: 58vh;
    overflow: auto;
    border-radius: 12px !important;
}
.employee-compact-table {
    min-width: 1220px !important;
}
.employee-compact-table th,
.employee-compact-table td {
    padding: 7px 8px !important;
    font-size: 11px !important;
    vertical-align: middle !important;
}
.employee-compact-table th {
    font-weight: 800 !important;
    letter-spacing: .02em;
    text-transform: uppercase;
}
.employee-compact-table .badge {
    padding: 3px 7px !important;
    font-size: 10px !important;
    font-weight: 800 !important;
}
.compact-avatar,
.employee-compact-table .avatar-sm {
    width: 30px !important;
    height: 30px !important;
    border-radius: 9px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
}
.emp-code-text,
.emp-name-text,
.strong-text {
    font-weight: 800 !important;
}
.compact-meta {
    font-size: 10px !important;
    max-width: 260px;
    white-space: normal;
    line-height: 1.25;
}
.employee-row-actions {
    gap: 4px !important;
    flex-wrap: nowrap !important;
}
.employee-row-actions .btn,
.employee-row-actions button {
    min-height: 26px !important;
    padding: 5px 7px !important;
    font-size: 10.5px !important;
    border-radius: 8px !important;
    font-weight: 800 !important;
}

/* Compact bulk delete / selection bar */
.employee-bulk-toolbar {
    display: grid !important;
    grid-template-columns: auto 70px 170px 140px auto !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 7px 8px !important;
    margin: 6px 0 8px !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    background: var(--surface-2) !important;
}
.employee-bulk-toolbar .mini-check {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 !important;
    font-size: 11px !important;
    font-weight: 750 !important;
    color: var(--text) !important;
    white-space: nowrap !important;
}
.employee-bulk-toolbar .muted-text {
    font-size: 10.5px !important;
    margin: 0 !important;
    white-space: nowrap !important;
}
.employee-bulk-toolbar input[type="password"],
.employee-bulk-toolbar input[type="text"] {
    height: 30px !important;
    font-size: 11px !important;
    padding: 0 9px !important;
    border-radius: 8px !important;
    width: 100% !important;
}
.employee-bulk-toolbar .btn {
    min-height: 30px !important;
    height: 30px !important;
    padding: 0 10px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    border-radius: 8px !important;
}
.employee-bulk-toolbar input[type="checkbox"],
.employee-compact-table input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    padding: 0 !important;
    border-radius: 4px !important;
}
.employee-bulk-toolbar input:disabled,
.employee-bulk-toolbar button:disabled {
    opacity: .52;
}

/* Standard compact employee profile */
.employee-profile-grid {
    grid-template-columns: 260px 1fr !important;
    gap: 12px !important;
}
.employee-profile-grid .card {
    padding: 12px !important;
    border-radius: 14px !important;
}
.profile-photo {
    width: 96px !important;
    height: 96px !important;
    border-radius: 22px !important;
    font-size: 28px !important;
    font-weight: 800 !important;
}
.profile-card h2 {
    font-size: 15px !important;
    font-weight: 800 !important;
}
.profile-card p {
    font-size: 11px !important;
    margin: 4px 0 8px !important;
}
.details-grid {
    gap: 8px !important;
}
.details-grid > div {
    padding: 9px 10px !important;
    border-radius: 11px !important;
}
.details-grid span {
    font-size: 10px !important;
    font-weight: 750 !important;
    margin-bottom: 3px !important;
}
.details-grid strong {
    font-size: 11.5px !important;
    font-weight: 750 !important;
}

/* Standard compact employee create/edit form */
.employee-form-compact .form-card,
.employee-form-card {
    max-width: 1120px !important;
    padding: 12px !important;
    border-radius: 14px !important;
    margin-bottom: 10px !important;
}
.employee-form-compact .professional-form {
    grid-template-columns: repeat(3, minmax(210px, 1fr)) !important;
    gap: 10px 12px !important;
}
.employee-form-compact label,
.employee-form-card label {
    font-size: 11px !important;
    font-weight: 750 !important;
    margin-bottom: 5px !important;
}
.employee-form-compact input,
.employee-form-compact select,
.employee-form-compact textarea,
.employee-form-card input,
.employee-form-card select,
.employee-form-card textarea {
    height: 34px !important;
    font-size: 12px !important;
    padding: 0 10px !important;
    border-radius: 9px !important;
}
.employee-form-compact textarea,
.employee-form-card textarea {
    min-height: 70px !important;
    padding-top: 8px !important;
}
.employee-form-compact .field-help,
.employee-form-card .field-help {
    font-size: 10.5px !important;
    line-height: 1.3 !important;
    margin-top: 3px !important;
}
.employee-photo-row-compact,
.employee-form-compact .employee-photo-row {
    padding: 10px !important;
    gap: 12px !important;
    border-radius: 13px !important;
    margin-bottom: 12px !important;
}
.employee-form-compact .avatar-xl {
    width: 72px !important;
    height: 72px !important;
    border-radius: 18px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
}
.employee-form-compact input[type="file"] {
    padding: 5px 8px !important;
    height: 34px !important;
}
.employee-form-compact .form-actions {
    margin-top: 10px !important;
    padding-top: 10px !important;
}
.employee-form-compact .btn,
.employee-form-card .btn {
    min-height: 30px !important;
    padding: 6px 10px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    border-radius: 8px !important;
}

@media (max-width: 1200px) {
    .employee-bulk-toolbar {
        grid-template-columns: 1fr 80px 160px 130px auto !important;
    }
    .employee-form-compact .professional-form {
        grid-template-columns: repeat(2, minmax(220px, 1fr)) !important;
    }
}
@media (max-width: 760px) {
    .employee-filter-row,
    .employee-bulk-toolbar,
    .employee-form-compact .professional-form {
        grid-template-columns: 1fr !important;
    }
    .employee-profile-grid {
        grid-template-columns: 1fr !important;
    }
    .employee-row-actions {
        flex-wrap: wrap !important;
    }
}

/* ==========================================================
   Step 35E4 Employee Page Standard Size / Alignment Hotfix
   ========================================================== */
:root {
    --emp-std-font: 11.5px;
    --emp-std-label: 10.5px;
    --emp-std-strong: 12px;
    --emp-std-input: 32px;
    --emp-std-radius: 10px;
}

/* reduce heavy/dark text only inside employee pages */
.employee-profile-grid,
.employee-biometric-card,
.employee-list-card,
.employee-form-compact {
    font-size: var(--emp-std-font) !important;
}
.employee-profile-grid h2,
.employee-biometric-card h2,
.employee-biometric-card h3,
.employee-form-compact h2,
.employee-list-card h2,
.employee-profile-grid strong,
.employee-biometric-card strong,
.employee-form-compact strong,
.employee-list-card strong {
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    color: var(--text) !important;
}
.employee-profile-grid .section-title,
.employee-biometric-card .section-title,
.employee-form-compact .section-title,
.employee-list-card .section-title {
    font-size: 13px !important;
    font-weight: 750 !important;
}
.employee-profile-grid .section-subtitle,
.employee-biometric-card .section-subtitle,
.employee-form-compact .section-subtitle,
.employee-list-card .section-subtitle {
    font-size: 10.5px !important;
    line-height: 1.3 !important;
    color: var(--muted) !important;
}

/* employee details: smaller boxes, aligned in one tight grid */
.employee-profile-grid {
    grid-template-columns: 240px minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: start !important;
}
.employee-profile-grid .card {
    padding: 10px !important;
    border-radius: 12px !important;
}
.profile-card {
    padding-top: 12px !important;
}
.profile-photo {
    width: 82px !important;
    height: 82px !important;
    border-radius: 20px !important;
    font-size: 24px !important;
}
.profile-card h2 {
    font-size: 13px !important;
    margin-top: 8px !important;
}
.profile-card p {
    font-size: 10.5px !important;
    margin: 3px 0 7px !important;
}
.profile-actions .btn {
    min-height: 28px !important;
    padding: 5px 9px !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
}
.details-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
}
.details-grid > div {
    min-height: 44px !important;
    padding: 7px 9px !important;
    border-radius: 9px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}
.details-grid span {
    font-size: var(--emp-std-label) !important;
    font-weight: 650 !important;
    margin-bottom: 2px !important;
    color: var(--muted) !important;
}
.details-grid strong {
    font-size: 11px !important;
    font-weight: 650 !important;
    line-height: 1.25 !important;
}

/* biometric card: compact, balanced columns, no two-line label noise */
.employee-biometric-card {
    padding: 10px !important;
    border-radius: 12px !important;
}
.employee-biometric-card .compact-section-header {
    margin-bottom: 8px !important;
    padding-bottom: 7px !important;
}
.emp-bio-tabs {
    gap: 5px !important;
    margin-bottom: 8px !important;
}
.emp-bio-tab {
    min-height: 28px !important;
    padding: 5px 10px !important;
    border-radius: 999px !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
}
.bio-sync-kpi-grid.compact {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 6px !important;
    margin-bottom: 8px !important;
}
.bio-sync-kpi {
    min-height: 56px !important;
    padding: 7px 8px !important;
    border-radius: 9px !important;
}
.bio-sync-kpi span,
.bio-sync-kpi small {
    font-size: 10px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
}
.bio-sync-kpi strong {
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
}
.employee-bio-layout {
    display: grid !important;
    grid-template-columns: minmax(0, .95fr) minmax(360px, .85fr) !important;
    gap: 8px !important;
    align-items: start !important;
}
.employee-bio-panel {
    padding: 8px !important;
    border-radius: 10px !important;
    background: var(--surface-2) !important;
    border: 1px solid var(--border) !important;
}
.emp-bio-panel-title-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin: 0 0 6px !important;
    min-height: 24px !important;
}
.emp-bio-panel-title-row h3,
.employee-bio-panel > h3,
.employee-bio-status-box h3 {
    margin: 0 !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    color: var(--text) !important;
}
.bio-device-toolbar {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 0 !important;
    flex-wrap: nowrap !important;
}
.mini-check,
.bio-device-toolbar .mini-check,
.bio-check-grid .mini-check {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    margin: 0 !important;
    font-size: 10.5px !important;
    font-weight: 650 !important;
    white-space: nowrap !important;
    color: var(--text) !important;
}
.employee-biometric-card input[type="checkbox"],
.employee-biometric-card input[type="radio"] {
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
    padding: 0 !important;
    margin: 0 !important;
}
.bio-device-select-list {
    max-height: 172px !important;
    overflow-y: auto !important;
    display: grid !important;
    gap: 5px !important;
}
.bio-device-option {
    min-height: 42px !important;
    padding: 6px 8px !important;
    border-radius: 9px !important;
    gap: 7px !important;
    display: grid !important;
    grid-template-columns: 18px minmax(0, 1fr) auto !important;
    align-items: center !important;
}
.bio-device-option strong {
    font-size: 11px !important;
    font-weight: 700 !important;
}
.bio-device-option small,
.bio-device-option em {
    font-size: 9.8px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    color: var(--muted) !important;
}
.emp-sync-options-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px 8px !important;
}
.emp-sync-options-grid .form-group {
    margin: 0 !important;
}
.emp-sync-options-grid label,
.employee-biometric-card label {
    font-size: var(--emp-std-label) !important;
    font-weight: 650 !important;
    margin-bottom: 3px !important;
    color: var(--text) !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
}
.employee-biometric-card select,
.employee-biometric-card input[type="number"],
.employee-biometric-card input[type="text"] {
    height: 30px !important;
    font-size: 11px !important;
    padding: 0 8px !important;
    border-radius: 8px !important;
}
.bio-check-grid.compact {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px 10px !important;
    margin: 8px 0 !important;
}
.bio-sync-note.compact {
    padding: 6px 8px !important;
    font-size: 10.5px !important;
    line-height: 1.3 !important;
    border-radius: 8px !important;
}
.employee-biometric-card .form-actions.compact-actions {
    margin-top: 7px !important;
    padding-top: 7px !important;
}
.employee-biometric-card .btn {
    min-height: 28px !important;
    padding: 5px 9px !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
}

/* employee index bulk delete: one-line compact, no full-width huge box */
.employee-bulk-toolbar {
    grid-template-columns: auto 58px 145px 115px auto !important;
    max-width: 640px !important;
    width: auto !important;
    padding: 6px 7px !important;
    gap: 6px !important;
}
.employee-bulk-toolbar input[type="password"],
.employee-bulk-toolbar input[type="text"] {
    height: 28px !important;
    font-size: 10.5px !important;
}
.employee-bulk-toolbar .btn {
    height: 28px !important;
    min-height: 28px !important;
    font-size: 10.5px !important;
}

/* create/edit: standard field height, less bold */
.employee-form-compact label,
.employee-form-card label {
    font-size: 10.8px !important;
    font-weight: 650 !important;
}
.employee-form-compact input,
.employee-form-compact select,
.employee-form-compact textarea,
.employee-form-card input,
.employee-form-card select,
.employee-form-card textarea {
    height: 32px !important;
    font-size: 11.5px !important;
    border-radius: 8px !important;
}
.employee-form-compact .form-card,
.employee-form-card {
    padding: 10px !important;
    border-radius: 12px !important;
}
.employee-form-compact .professional-form {
    gap: 8px 10px !important;
}

@media (max-width: 1180px) {
    .employee-bio-layout {
        grid-template-columns: 1fr !important;
    }
    .bio-sync-kpi-grid.compact {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 760px) {
    .details-grid,
    .emp-sync-options-grid,
    .bio-check-grid.compact,
    .bio-sync-kpi-grid.compact {
        grid-template-columns: 1fr !important;
    }
    .emp-bio-panel-title-row,
    .bio-device-toolbar {
        align-items: flex-start !important;
        flex-direction: column !important;
        gap: 6px !important;
    }
    .employee-bulk-toolbar {
        max-width: none !important;
        width: 100% !important;
        grid-template-columns: 1fr !important;
    }
}


/* Step 35E6: Employee bulk delete clean row - no overlapping help text */
.employee-bulk-toolbar.employee-bulk-toolbar-clean {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    max-width: none !important;
    width: 100% !important;
    padding: 7px 8px !important;
    margin: 6px 0 8px !important;
    border-radius: 11px !important;
    background: var(--surface-2) !important;
    border: 1px solid var(--border) !important;
}
.employee-bulk-select {
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex: 0 0 auto !important;
    min-width: 220px !important;
}
.employee-bulk-confirm {
    display: grid !important;
    grid-template-columns: 180px 130px auto !important;
    align-items: center !important;
    gap: 7px !important;
    flex: 0 1 430px !important;
    margin-left: auto !important;
}
html[dir="rtl"] .employee-bulk-confirm {
    margin-left: 0 !important;
    margin-right: auto !important;
}
.employee-bulk-toolbar-clean .employee-delete-note {
    display: none !important;
}
.employee-bulk-toolbar-clean .mini-check {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 !important;
    font-size: 11px !important;
    font-weight: 650 !important;
    color: var(--text) !important;
    white-space: nowrap !important;
}
.employee-bulk-toolbar-clean .muted-text {
    font-size: 10.5px !important;
    white-space: nowrap !important;
    margin: 0 !important;
    color: var(--muted) !important;
}
.employee-bulk-toolbar-clean input[type="password"],
.employee-bulk-toolbar-clean input[type="text"] {
    height: 28px !important;
    font-size: 10.8px !important;
    padding: 0 9px !important;
    border-radius: 8px !important;
    min-width: 0 !important;
}
.employee-bulk-toolbar-clean .btn {
    height: 28px !important;
    min-height: 28px !important;
    padding: 0 10px !important;
    font-size: 10.5px !important;
    font-weight: 750 !important;
    border-radius: 8px !important;
    white-space: nowrap !important;
}
.employee-bulk-toolbar-clean input[type="checkbox"] {
    width: 15px !important;
    height: 15px !important;
    min-width: 15px !important;
    margin: 0 !important;
}
@media (max-width: 900px) {
    .employee-bulk-toolbar.employee-bulk-toolbar-clean {
        align-items: stretch !important;
    }
    .employee-bulk-select,
    .employee-bulk-confirm {
        width: 100% !important;
        min-width: 0 !important;
        flex: 1 1 100% !important;
        margin-left: 0 !important;
    }
    .employee-bulk-confirm {
        grid-template-columns: 1fr 115px auto !important;
    }
}
@media (max-width: 620px) {
    .employee-bulk-confirm {
        grid-template-columns: 1fr !important;
    }
    .employee-bulk-toolbar-clean .btn {
        width: 100% !important;
    }
}

/* Step 35E11 - compact biometric enrollment auto sync controls */
.bio-auto-sync-card .bio-auto-sync-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.bio-auto-sync-card form {
    border: 1px solid var(--border);
    background: var(--surface-2);
    border-radius: 14px;
    padding: 12px;
}
.bio-auto-sync-card h3 {
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: 800;
}
.bio-auto-sync-card p,
.bio-auto-sync-card .field-help {
    margin: 0 0 8px;
    font-size: 11px;
    color: var(--muted);
    line-height: 1.4;
}
.bio-auto-sync-card label {
    font-size: 11px;
    font-weight: 700;
    margin-bottom: 4px;
}
.bio-auto-sync-card input,
.bio-auto-sync-card select {
    height: 34px;
    font-size: 12px;
    border-radius: 9px;
    padding: 0 9px;
}
.bio-auto-sync-card input[type="checkbox"],
.bio-auto-sync-card input[type="radio"],
.bio-device-check-grid input[type="checkbox"],
.bio-check-row input[type="checkbox"],
.data-table input[type="checkbox"] {
    width: 15px !important;
    height: 15px !important;
    min-width: 15px !important;
    min-height: 15px !important;
    padding: 0 !important;
    margin: 0 6px 0 0;
    vertical-align: middle;
}
.bio-device-check-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 10px;
    max-height: 92px;
    overflow: auto;
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: 10px;
    padding: 8px;
    margin: 6px 0 8px;
}
.bio-device-check-grid label,
.bio-check-row label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    font-size: 11px;
    font-weight: 600;
    color: var(--text);
}
.bio-check-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    align-items: center;
    margin: 8px 0;
}
.bio-auto-sync-card .btn-sm {
    min-height: 30px;
    padding: 6px 10px;
    font-size: 11px;
}
.bio-auto-sync-card .bio-inline-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    align-items: end;
}
.bio-auto-sync-card .bio-sync-note {
    border: 1px solid rgba(16,185,129,.22);
    background: rgba(16,185,129,.08);
    color: var(--muted);
    border-radius: 10px;
    padding: 8px 10px;
    font-size: 11px;
    margin-bottom: 10px;
}
@media (max-width: 1100px) {
    .bio-auto-sync-card .bio-auto-sync-grid,
    .bio-device-check-grid,
    .bio-auto-sync-card .bio-inline-grid { grid-template-columns: 1fr; }
}



/* Step 35E17 Device auto biometric options compact */
.bio-auto-option.check-inline {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3px;
    align-content: start;
    padding: 0;
}
.bio-auto-option.check-inline label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.25;
}
.bio-auto-option.check-inline input[type="checkbox"] {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
}
.bio-auto-option .field-help {
    margin: 0 0 0 22px;
    font-size: 11px;
    line-height: 1.35;
    color: var(--muted);
}


/* Step 35E24 Employee bulk status compact toolbar */
.employee-bulk-toolbar-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px !important;
    border-radius: 12px !important;
}
.employee-bulk-toolbar-status .employee-bulk-select,
.employee-bulk-toolbar-status .employee-bulk-status-box,
.employee-bulk-toolbar-status .employee-bulk-confirm {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
}
.employee-bulk-toolbar-status select,
.employee-bulk-toolbar-status input {
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 9px !important;
    font-size: 11px !important;
    border-radius: 8px !important;
}
.employee-bulk-toolbar-status .employee-bulk-status-box select {
    width: 132px;
}
.employee-bulk-toolbar-status .employee-bulk-confirm input[type="password"] {
    width: 180px;
}
.employee-bulk-toolbar-status .employee-bulk-confirm input[type="text"] {
    width: 120px;
}
.employee-bulk-toolbar-status .btn-sm {
    min-height: 30px !important;
    padding: 6px 10px !important;
    font-size: 11px !important;
}
@media (max-width: 1100px) {
    .employee-bulk-toolbar-status,
    .employee-bulk-toolbar-status .employee-bulk-select,
    .employee-bulk-toolbar-status .employee-bulk-status-box,
    .employee-bulk-toolbar-status .employee-bulk-confirm {
        flex-wrap: wrap;
        justify-content: flex-start;
    }
}


/* Step 35E28 — Employee/device name mismatch compact UI */
.bio-name-mismatch-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    margin: 0 0 10px;
    border: 1px solid rgba(245, 158, 11, .35);
    background: rgba(245, 158, 11, .10);
    border-radius: 12px;
    font-size: 12px;
}
.bio-name-mismatch-box strong { display:block; font-size:12px; font-weight:800; color:var(--text); }
.bio-name-mismatch-box span { display:block; font-size:11px; color:var(--muted); margin-top:2px; }
.badge.warning { background: rgba(245,158,11,.16); color: #d97706; }
html[data-theme="dark"] .badge.warning { color: #fbbf24; }
.compact-actions form { margin:0; }
.compact-actions { gap:5px; }


/* Step 35E33 - ZKTeco clean UI + normal checkboxes */
.zkteco-page .rules-explain-box.zkteco-old-help,
.zkteco-old-help { display:none !important; }
.adms-settings-compact {
    display:grid;
    grid-template-columns:repeat(2,minmax(260px,1fr));
    gap:10px;
    margin:10px 0 12px;
}
.adms-check-row {
    display:grid !important;
    grid-template-columns:18px 1fr;
    gap:8px 10px;
    align-items:start;
    padding:10px 12px;
    border:1px solid var(--border);
    background:var(--surface-2);
    border-radius:12px;
    margin:0 !important;
    font-size:12px !important;
    font-weight:700 !important;
}
.adms-check-row input[type=checkbox],
.mini-check input[type=checkbox],
.data-table input[type=checkbox],
.table-wrap input[type=checkbox] {
    width:16px !important;
    height:16px !important;
    min-width:16px !important;
    min-height:16px !important;
    max-width:16px !important;
    max-height:16px !important;
    padding:0 !important;
    margin:1px 0 0 !important;
    border-radius:4px !important;
    accent-color:var(--primary);
}
.adms-check-row span {
    font-size:12px;
    font-weight:800;
    color:var(--text);
    line-height:1.25;
}
.adms-check-row small {
    grid-column:2;
    color:var(--muted);
    font-size:11px;
    line-height:1.35;
    margin-top:-2px;
}
.mini-check {
    display:inline-flex !important;
    align-items:center !important;
    gap:7px !important;
    font-size:12px !important;
    font-weight:700 !important;
    line-height:1.2 !important;
}
@media (max-width:800px){.adms-settings-compact{grid-template-columns:1fr;}}

/* Step 35E34 ZKTeco pagination / clean snapshots */
.zk-table-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 8px 0 10px;
    padding: 8px 10px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 12px;
    font-size: 12px;
}
.zk-pager-left,
.zk-pager-right {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.zk-pager-right label {
    margin: 0;
    font-size: 11px;
    font-weight: 700;
    color: var(--muted);
}
.zk-page-size {
    width: 78px;
    height: 32px;
    min-height: 32px;
    padding: 0 8px;
    border-radius: 9px;
    font-size: 12px;
}
.zk-page-label,
.zk-pager-count {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}
.zk-table-pager .btn[disabled] {
    opacity: .45;
    cursor: not-allowed;
}
@media (max-width: 700px) {
    .zk-table-pager {
        align-items: stretch;
        flex-direction: column;
    }
    .zk-pager-right {
        justify-content: space-between;
    }
}

/* Step 35E35 ZKTeco clean header + bottom pager */
.zk-top-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}
.zk-top-actions .btn {
    min-height: 30px;
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 800;
}
.zk-table-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 4px 0;
    margin-top: 8px;
    font-size: 11px;
    color: var(--muted);
}
.zk-pager-right {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.zk-pager-right label {
    margin: 0;
    font-size: 11px;
    font-weight: 750;
    color: var(--muted);
}
.zk-page-size {
    width: 74px;
    height: 30px;
    padding: 0 8px;
    font-size: 11px;
}
.zk-page-label, .zk-pager-count {
    white-space: nowrap;
}
.adms-test-card {
    border-style: dashed;
}
@media (max-width: 700px) {
    .zk-table-pager {
        flex-direction: column;
        align-items: stretch;
    }
    .zk-pager-right {
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .zk-top-actions {
        justify-content: flex-start;
    }
}

/* Step 35E36 - ZKTeco section pager must stay below table + compact empty snapshots */
.zk-paged-section .table-wrap.compact-table-wrap {
    margin-bottom: 0 !important;
}
.zk-paged-section .zk-pager-slot {
    margin-top: 8px !important;
}
.zk-paged-section .zk-table-pager {
    position: static !important;
    inset: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding: 6px 2px 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}
.zk-paged-section .zk-pager-left,
.zk-paged-section .zk-pager-right {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
}
.zk-paged-section .zk-pager-count,
.zk-paged-section .zk-page-label,
.zk-paged-section .zk-pager-right label {
    font-size: 11px !important;
    font-weight: 650 !important;
    color: var(--muted) !important;
}
.zk-paged-section .zk-page-size {
    width: 64px !important;
    height: 28px !important;
    min-height: 28px !important;
    font-size: 11px !important;
    padding: 0 6px !important;
}
.local-snapshot-section .table-wrap {
    max-height: 180px !important;
    overflow: auto !important;
}
.local-snapshot-section .empty-cell {
    padding: 14px 10px !important;
    height: auto !important;
}
.local-snapshot-section {
    padding-bottom: 12px !important;
}
@media (max-width: 700px) {
    .zk-paged-section .zk-table-pager {
        align-items: stretch !important;
        flex-direction: column !important;
    }
    .zk-paged-section .zk-pager-right {
        justify-content: flex-start !important;
    }
}


/* Step 35E37 - Same dark bottom pager for all ZKTeco paged sections */
.zk-paged-section .zk-pager-slot {
    margin-top: 0 !important;
}
.zk-paged-section .zk-table-pager {
    width: 100% !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 8px 12px !important;
    background: #151a21 !important;
    color: #eef2f7 !important;
    border: 1px solid #252c36 !important;
    border-top: 0 !important;
    border-radius: 0 0 12px 12px !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
}
html[data-theme="light"] .zk-paged-section .zk-table-pager {
    background: #151a21 !important;
    color: #eef2f7 !important;
    border-color: #252c36 !important;
}
.zk-paged-section .zk-pager-count,
.zk-paged-section .zk-page-label,
.zk-paged-section .zk-pager-right label {
    color: #e5e7eb !important;
    font-size: 11px !important;
    font-weight: 650 !important;
}
.zk-paged-section .zk-pager-left,
.zk-paged-section .zk-pager-right {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}
.zk-paged-section .zk-page-size {
    width: 70px !important;
    height: 28px !important;
    min-height: 28px !important;
    border-radius: 9px !important;
    background: #111827 !important;
    border: 1px solid #10b981 !important;
    color: #fff !important;
    font-size: 11px !important;
    padding: 0 7px !important;
}
.zk-paged-section .zk-table-pager .btn {
    min-height: 28px !important;
    padding: 5px 9px !important;
    font-size: 11px !important;
    border-radius: 8px !important;
    background: #20242b !important;
    color: #e5e7eb !important;
    border: 1px solid #2d333d !important;
}
.zk-paged-section .zk-table-pager .btn[disabled] {
    opacity: .45 !important;
    cursor: not-allowed !important;
}
.zk-paged-section .table-wrap.compact-table-wrap {
    border-radius: 12px 12px 0 0 !important;
    border-bottom: 0 !important;
    margin-bottom: 0 !important;
}
@media (max-width:700px){
    .zk-paged-section .zk-table-pager {align-items: stretch !important; flex-direction: column !important;}
    .zk-paged-section .zk-pager-right {justify-content: flex-start !important;}
}

/* Step 35E38 - ZKTeco pager follows global light/dark theme */
.zk-paged-section .zk-table-pager {
    background: var(--surface-2) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
    border-top: 0 !important;
    box-shadow: none !important;
}
html[data-theme="light"] .zk-paged-section .zk-table-pager {
    background: #f8fafc !important;
    color: #111827 !important;
    border-color: #e5e7eb !important;
}
html[data-theme="dark"] .zk-paged-section .zk-table-pager {
    background: #151a21 !important;
    color: #eef2f7 !important;
    border-color: #252c36 !important;
}
.zk-paged-section .zk-pager-count,
.zk-paged-section .zk-page-label,
.zk-paged-section .zk-pager-right label {
    color: var(--text) !important;
    font-size: 11px !important;
    font-weight: 650 !important;
}
html[data-theme="light"] .zk-paged-section .zk-pager-count,
html[data-theme="light"] .zk-paged-section .zk-page-label,
html[data-theme="light"] .zk-paged-section .zk-pager-right label {
    color: #374151 !important;
}
html[data-theme="dark"] .zk-paged-section .zk-pager-count,
html[data-theme="dark"] .zk-paged-section .zk-page-label,
html[data-theme="dark"] .zk-paged-section .zk-pager-right label {
    color: #e5e7eb !important;
}
.zk-paged-section .zk-page-size {
    background: var(--input) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
}
html[data-theme="light"] .zk-paged-section .zk-page-size {
    background: #ffffff !important;
    color: #111827 !important;
    border-color: #d1d5db !important;
}
html[data-theme="dark"] .zk-paged-section .zk-page-size {
    background: #111827 !important;
    color: #ffffff !important;
    border-color: #10b981 !important;
}
.zk-paged-section .zk-table-pager .btn {
    background: var(--surface-3) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
}
html[data-theme="light"] .zk-paged-section .zk-table-pager .btn {
    background: #ffffff !important;
    color: #111827 !important;
    border-color: #d1d5db !important;
}
html[data-theme="dark"] .zk-paged-section .zk-table-pager .btn {
    background: #20242b !important;
    color: #e5e7eb !important;
    border-color: #2d333d !important;
}
.zk-paged-section .table-wrap.compact-table-wrap {
    border-color: var(--border) !important;
}


/* Step 35E39 ZKTeco clean toolbar + normal checkbox/select-all */
.zk-shortcut-card {
    padding: 10px 14px;
}
.zk-shortcut-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.zk-shortcut-title {
    font-size: 13px;
    font-weight: 800;
    color: var(--text);
}
.zk-top-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}
.zk-check-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 6px 0;
}
.mini-check {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 12px;
    font-weight: 650;
    line-height: 1.25;
    white-space: nowrap;
}
.mini-check input[type="checkbox"],
.zk-select-all,
.zk-upload-table-scroll input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 4px;
    vertical-align: middle;
}
.zk-upload-footer.clean {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 10px;
}
.zk-upload-footer.clean .mini-note {
    color: var(--muted);
    font-size: 12px;
}
@media (max-width: 800px) {
    .zk-shortcut-row,
    .zk-upload-footer.clean {
        align-items: stretch;
        flex-direction: column;
    }
    .zk-top-actions .btn {
        flex: 1 1 auto;
    }
}

/* Step 35E41 - ZKTeco employee upload proper paged windows */
.zk-employee-upload-card .zk-upload-dual-grid {
    grid-template-columns: minmax(360px, .9fr) minmax(520px, 1.1fr) !important;
    gap: 12px !important;
    align-items: stretch !important;
}
.zk-employee-upload-card .zk-upload-panel {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    overflow: hidden !important;
}
.zk-employee-upload-card .zk-upload-panel-head {
    min-height: 38px !important;
    padding: 8px 10px !important;
}
.zk-employee-upload-card .zk-upload-table-scroll {
    max-height: 360px !important;
    min-height: 160px !important;
    overflow: auto !important;
    border-radius: 0 !important;
}
.zk-employee-upload-card .zk-upload-table-scroll table {
    width: 100% !important;
    border-collapse: collapse !important;
}
.zk-employee-upload-card .zk-upload-table-scroll thead th {
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;
    background: var(--surface-2) !important;
}
html[data-theme="light"] .zk-employee-upload-card .zk-upload-table-scroll thead th {
    background: #f8fafc !important;
}
html[data-theme="dark"] .zk-employee-upload-card .zk-upload-table-scroll thead th {
    background: #20242b !important;
}
.zk-employee-upload-card .zk-upload-table-scroll th,
.zk-employee-upload-card .zk-upload-table-scroll td {
    height: 34px !important;
    padding: 6px 9px !important;
}
.zk-employee-upload-card .zk-upload-pager-slot {
    margin-top: auto !important;
}
.zk-employee-upload-card .zk-upload-pager-slot .zk-table-pager {
    width: 100% !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 7px 10px !important;
    border: 1px solid var(--border) !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    background: var(--surface) !important;
    color: var(--text) !important;
    border-radius: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    box-shadow: none !important;
}
html[data-theme="light"] .zk-employee-upload-card .zk-upload-pager-slot .zk-table-pager {
    background: #ffffff !important;
    color: #111827 !important;
}
html[data-theme="dark"] .zk-employee-upload-card .zk-upload-pager-slot .zk-table-pager {
    background: #151a21 !important;
    color: #eef2f7 !important;
}
.zk-employee-upload-card .zk-upload-pager-slot .zk-pager-left,
.zk-employee-upload-card .zk-upload-pager-slot .zk-pager-right {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    flex-wrap: wrap !important;
}
.zk-employee-upload-card .zk-upload-pager-slot .zk-pager-count,
.zk-employee-upload-card .zk-upload-pager-slot .zk-page-label,
.zk-employee-upload-card .zk-upload-pager-slot label {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--text) !important;
}
.zk-employee-upload-card .zk-upload-pager-slot .zk-page-size {
    width: 66px !important;
    height: 27px !important;
    min-height: 27px !important;
    font-size: 11px !important;
    padding: 0 7px !important;
    background: var(--input) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;
}
.zk-employee-upload-card .zk-upload-pager-slot .btn {
    min-height: 27px !important;
    padding: 4px 8px !important;
    font-size: 11px !important;
    border-radius: 8px !important;
}
.zk-employee-upload-card .zk-upload-footer.clean {
    margin-top: 10px !important;
}
@media (max-width: 1200px) {
    .zk-employee-upload-card .zk-upload-dual-grid {
        grid-template-columns: 1fr !important;
    }
}
@media (max-width: 700px) {
    .zk-employee-upload-card .zk-upload-pager-slot .zk-table-pager {
        align-items: stretch !important;
        flex-direction: column !important;
    }
    .zk-employee-upload-card .zk-upload-pager-slot .zk-pager-right {
        justify-content: flex-start !important;
    }
}

/* Step 35E42 - ZKTeco employee upload two-panel professional layout */
.zk-upload-redesign-card {
    padding: 14px !important;
}
.zk-upload-redesign-card .zk-upload-head {
    margin-bottom: 10px !important;
}
.zk-upload-master-grid {
    display: grid;
    grid-template-columns: minmax(360px, 0.95fr) minmax(420px, 1.05fr);
    gap: 12px;
    align-items: stretch;
    margin-bottom: 12px;
}
.zk-upload-settings-box {
    border: 1px solid var(--border);
    background: var(--surface-2);
    border-radius: 16px;
    padding: 12px;
    min-width: 0;
}
.zk-upload-box-title {
    font-size: 13px;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 8px;
}
.zk-upload-rules-mini {
    margin: 0 0 10px !important;
    padding: 8px 10px !important;
    background: var(--surface) !important;
}
.zk-upload-settings-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: 0 !important;
}
.zk-upload-settings-grid > div {
    min-width: 0;
}
.zk-upload-options-compact {
    grid-template-columns: repeat(2, minmax(120px, 1fr)) !important;
    gap: 8px !important;
    margin: 10px 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}
.zk-upload-options-compact .mini-check,
.zk-upload-options-compact .zk-small-select {
    min-height: 34px;
}
.zk-target-device-window,
.zk-employees-full-window {
    min-width: 0;
}
.zk-target-device-window .zk-upload-table-scroll {
    max-height: 230px !important;
    min-height: 170px !important;
}
.zk-employees-full-window {
    margin-top: 10px;
}
.zk-employees-full-window .zk-upload-table-scroll {
    max-height: 310px !important;
    min-height: 190px !important;
}
.zk-upload-redesign-card .zk-upload-panel-head h3 {
    font-size: 14px !important;
    font-weight: 800 !important;
}
.zk-upload-redesign-card .zk-upload-panel-head small {
    font-size: 11px !important;
    color: var(--muted) !important;
}
.zk-upload-redesign-card .zk-upload-table-scroll th,
.zk-upload-redesign-card .zk-upload-table-scroll td {
    padding: 8px 10px !important;
}
.zk-upload-redesign-card .zk-upload-footer.clean {
    margin-top: 10px !important;
    padding-top: 10px !important;
    border-top: 1px solid var(--border);
}
@media (max-width: 1250px) {
    .zk-upload-master-grid {
        grid-template-columns: 1fr;
    }
    .zk-upload-settings-grid,
    .zk-upload-options-compact {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 760px) {
    .zk-upload-settings-grid,
    .zk-upload-options-compact {
        grid-template-columns: 1fr !important;
    }
}

/* ==========================================================
   Step 35E43 - ZKTeco Employee Upload Settings Alignment Fix
   ========================================================== */
.zk-upload-redesign-card .zk-upload-settings-box {
    padding: 14px !important;
}

.zk-upload-redesign-card .zk-upload-box-title {
    margin-bottom: 10px !important;
    font-size: 13px !important;
    font-weight: 760 !important;
    line-height: 1.2 !important;
}

.zk-upload-redesign-card .zk-upload-settings-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px 12px !important;
    align-items: start !important;
}

.zk-upload-redesign-card .zk-upload-settings-grid > div {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    min-width: 0 !important;
}

.zk-upload-redesign-card .mini-label,
.zk-upload-redesign-card .zk-small-select .mini-label {
    display: block !important;
    margin: 0 !important;
    min-height: 15px !important;
    font-size: 11px !important;
    font-weight: 650 !important;
    line-height: 1.2 !important;
    color: var(--muted) !important;
    letter-spacing: 0 !important;
}

.zk-upload-redesign-card .zk-upload-settings-grid select,
.zk-upload-redesign-card .zk-upload-settings-grid input,
.zk-upload-redesign-card .zk-upload-options-compact select {
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 10px !important;
    border-radius: 10px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
}

.zk-upload-redesign-card .zk-upload-options-compact {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(116px, 1fr)) !important;
    gap: 8px !important;
    align-items: end !important;
    margin-top: 12px !important;
}

.zk-upload-redesign-card .zk-upload-options-compact .mini-check {
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    border: 1px solid var(--border) !important;
    border-radius: 10px !important;
    background: var(--surface) !important;
    font-size: 12px !important;
    font-weight: 650 !important;
    line-height: 1 !important;
    color: var(--text) !important;
    margin: 0 !important;
}

.zk-upload-redesign-card .zk-upload-options-compact .mini-check input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
}

.zk-upload-redesign-card .zk-upload-options-compact .zk-small-select {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    min-width: 0 !important;
    margin: 0 !important;
    grid-column: span 2;
}

.zk-upload-redesign-card .zk-upload-options-compact .zk-small-select select {
    width: 100% !important;
}

.zk-upload-redesign-card .zk-upload-help.zk-upload-rules-mini {
    border-radius: 12px !important;
    margin-bottom: 12px !important;
}

.zk-upload-redesign-card .zk-upload-help.zk-upload-rules-mini summary {
    font-size: 12px !important;
    font-weight: 700 !important;
}

.zk-upload-redesign-card .zk-upload-help.zk-upload-rules-mini p {
    font-size: 11px !important;
    line-height: 1.45 !important;
    margin: 6px 0 0 !important;
    color: var(--muted) !important;
}

@media (max-width: 1500px) {
    .zk-upload-redesign-card .zk-upload-settings-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    .zk-upload-redesign-card .zk-upload-options-compact {
        grid-template-columns: repeat(3, minmax(120px, 1fr)) !important;
    }
    .zk-upload-redesign-card .zk-upload-options-compact .zk-small-select {
        grid-column: span 1;
    }
}

@media (max-width: 760px) {
    .zk-upload-redesign-card .zk-upload-settings-grid,
    .zk-upload-redesign-card .zk-upload-options-compact {
        grid-template-columns: 1fr !important;
    }
    .zk-upload-redesign-card .zk-upload-options-compact .zk-small-select {
        grid-column: auto;
    }
}


/* ==========================================================
   Step 35E44 ZKTeco manual cards clean alignment
   ========================================================== */
.zk-page .adms-action-grid,
.adms-action-grid {
    align-items: stretch;
}

.zk-page .adms-action-box,
.adms-action-box {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.zk-page .adms-action-box h3,
.adms-action-box h3 {
    margin: 0 0 10px;
    min-height: 34px;
    display: flex;
    align-items: center;
    font-size: 13px;
    font-weight: 850;
    line-height: 1.25;
}

.zk-page .adms-action-box form,
.adms-action-box form {
    display: flex;
    flex-direction: column;
    gap: 9px;
    flex: 1 1 auto;
}

.zk-page .adms-action-box form + form,
.adms-action-box form + form {
    margin-top: 10px;
    flex: 0 0 auto;
}

.zk-page .adms-action-box input,
.zk-page .adms-action-box select,
.adms-action-box input,
.adms-action-box select {
    height: 38px;
    min-height: 38px;
    font-size: 12px;
}

.zk-page .adms-action-box .inline-grid,
.adms-action-box .inline-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.zk-page .adms-action-box .btn,
.adms-action-box .btn {
    width: 100%;
    margin-top: auto;
    min-height: 34px;
}

.zk-page .adms-action-box label.mini-check,
.adms-action-box label.mini-check,
.zk-page .zk-check-row .mini-check,
.zk-check-row .mini-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 26px;
    margin: 0;
    font-size: 12px;
    font-weight: 750;
    line-height: 1.2;
    white-space: nowrap;
}

.zk-page .adms-action-box input[type="checkbox"],
.adms-action-box input[type="checkbox"],
.zk-page .zk-check-row input[type="checkbox"],
.zk-check-row input[type="checkbox"] {
    width: 15px !important;
    height: 15px !important;
    min-width: 15px !important;
    min-height: 15px !important;
    padding: 0 !important;
    margin: 0 !important;
    flex: 0 0 15px;
    accent-color: var(--primary);
}

.zk-check-row {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

@media (max-width: 900px) {
    .zk-page .adms-action-box .inline-grid,
    .adms-action-box .inline-grid {
        grid-template-columns: 1fr;
    }
}


/* Step 35E45 - ZKTeco log clear buttons */
.compact-section-head {
    align-items: center;
    margin-bottom: 10px;
}
.compact-section-head form {
    margin: 0;
}


/* ==========================================================
   Step 35F17 — Normal checkbox size for device/settings pages
   ========================================================== */
input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
    padding: 0 !important;
    margin: 0 7px 0 0 !important;
    display: inline-block !important;
    vertical-align: middle !important;
    accent-color: var(--primary);
}
.check-inline,
.device-bulk-controls label,
.device-action-menu label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}
.check-inline input[type="checkbox"],
.device-bulk-controls input[type="checkbox"],
.device-check-cell input[type="checkbox"] {
    flex: 0 0 16px !important;
}