:root {
    --cm-bg: #f3f4f6;
    --cm-bg-strong: #e5e7eb;
    --cm-surface: #ffffff;
    --cm-surface-soft: #f9fafb;
    --cm-text: #111827;
    --cm-muted: #6b7280;
    --cm-line: #d1d5db;
    --cm-line-soft: #e5e7eb;
    --cm-dark: #111827;
    --cm-dark-2: #1f2937;
    --cm-dark-3: #374151;
    --cm-success: #166534;
    --cm-warning: #92400e;
    --cm-danger: #991b1b;
    --cm-radius: 18px;
    --cm-shadow: 0 18px 50px rgba(17, 24, 39, .10);
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    background: radial-gradient(circle at top, #ffffff 0%, var(--cm-bg) 42%, var(--cm-bg-strong) 100%);
    color: var(--cm-text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body.cm-dashboard-body {
    background: #f3f4f6;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select,
textarea {
    font: inherit;
}

.cm-auth-page,
.cm-home-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
}

.cm-auth-card,
.cm-home-card {
    width: min(100%, 980px);
    background: rgba(255, 255, 255, .96);
    border: 1px solid var(--cm-line);
    border-radius: var(--cm-radius);
    box-shadow: var(--cm-shadow);
    overflow: hidden;
}

.cm-auth-card {
    width: min(100%, 440px);
}

.cm-card-header,
.cm-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--cm-line);
    background: #f8fafc;
}

.cm-card-footer {
    border-top: 1px solid var(--cm-line);
    border-bottom: 0;
    color: var(--cm-muted);
    font-size: 13px;
}

.cm-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    font-weight: 850;
    letter-spacing: -.02em;
}

.cm-brand span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cm-logo {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #111827, #6b7280);
    color: #ffffff;
    font-size: 12px;
    font-weight: 900;
}

.cm-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    border: 1px solid var(--cm-line);
    border-radius: 999px;
    padding: 7px 12px;
    background: #ffffff;
    font-size: 12px;
    font-weight: 800;
    color: #111827;
    white-space: nowrap;
}

.cm-badge.dark {
    border-color: rgba(255, 255, 255, .16);
    background: rgba(255, 255, 255, .08);
    color: #f9fafb;
}

.cm-card-body {
    padding: 34px 40px 40px;
}

.cm-title {
    margin: 0;
    font-size: clamp(34px, 5vw, 54px);
    line-height: .98;
    letter-spacing: -.06em;
}

.cm-auth-title {
    margin: 0 0 8px;
    font-size: 30px;
    line-height: 1.05;
    letter-spacing: -.04em;
}

.cm-lead {
    margin: 14px 0 0;
    max-width: 720px;
    color: #4b5563;
    font-size: 15px;
    line-height: 1.7;
}

.cm-form {
    display: grid;
    gap: 16px;
    margin-top: 24px;
}

.cm-field label {
    display: block;
    margin-bottom: 7px;
    font-size: 12px;
    font-weight: 800;
    color: #374151;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.cm-input {
    width: 100%;
    border: 1px solid var(--cm-line);
    border-radius: 14px;
    background: #ffffff;
    color: #111827;
    font-size: 15px;
    padding: 13px 14px;
    outline: 0;
    transition: border-color .16s ease, box-shadow .16s ease;
}

.cm-input:focus {
    border-color: #6b7280;
    box-shadow: 0 0 0 4px rgba(107, 114, 128, .15);
}

.cm-button,
.cm-link-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    border: 0;
    border-radius: 14px;
    padding: 13px 16px;
    background: #111827;
    color: #ffffff;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    transition: background .16s ease, border-color .16s ease, transform .16s ease;
}

.cm-button:hover,
.cm-link-button:hover {
    background: #374151;
}

.cm-button:active,
.cm-link-button:active {
    transform: translateY(1px);
}

.cm-link-button.secondary,
.cm-button.secondary {
    background: #ffffff;
    color: #111827;
    border: 1px solid var(--cm-line);
}

.cm-link-button.secondary:hover,
.cm-button.secondary:hover {
    background: #f3f4f6;
}

.cm-error,
.cm-warning,
.cm-success {
    border-radius: 14px;
    padding: 12px 14px;
    font-size: 13px;
    line-height: 1.5;
}

.cm-error {
    margin-top: 16px;
    border: 1px solid #fecaca;
    background: #fef2f2;
    color: var(--cm-danger);
}

.cm-warning {
    margin-bottom: 16px;
    border: 1px solid #fde68a;
    background: #fffbeb;
    color: var(--cm-warning);
}

.cm-success {
    border: 1px solid #bbf7d0;
    background: #f0fdf4;
    color: var(--cm-success);
}

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

.cm-info-card {
    border: 1px solid var(--cm-line);
    border-radius: 16px;
    background: #ffffff;
    padding: 18px;
}

.cm-info-card span {
    display: block;
    margin-bottom: 10px;
    color: var(--cm-muted);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.cm-info-card strong {
    display: block;
    font-size: 18px;
}

.cm-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 248px minmax(0, 1fr);
    background: #f3f4f6;
}

.cm-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    background: #111827;
    color: #f9fafb;
    padding: 18px;
    overflow-y: auto;
}

.cm-sidebar .cm-brand {
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(255, 255, 255, .14);
}

.cm-sidebar-meta {
    display: grid;
    gap: 8px;
    margin: 16px 0 4px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 14px;
    background: rgba(255, 255, 255, .06);
}

.cm-sidebar-meta strong {
    display: block;
    font-size: 13px;
}

.cm-sidebar-meta span {
    color: #d1d5db;
    font-size: 12px;
    word-break: break-word;
}

.cm-nav {
    display: grid;
    gap: 7px;
    margin-top: 18px;
}

.cm-nav-section {
    margin: 18px 0 6px;
    color: #9ca3af;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.cm-nav a,
.cm-nav button {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 0;
    border-radius: 12px;
    padding: 11px 12px;
    background: transparent;
    color: #d1d5db;
    font: inherit;
    font-size: 14px;
    font-weight: 750;
    text-align: left;
    cursor: pointer;
}

.cm-nav a.active,
.cm-nav a:hover,
.cm-nav button:hover {
    background: rgba(255, 255, 255, .10);
    color: #ffffff;
}

.cm-nav-icon {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: rgba(255, 255, 255, .09);
    font-size: 13px;
    font-weight: 900;
}

.cm-main {
    min-width: 0;
    padding: 24px;
}

.cm-topbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
}

.cm-eyebrow {
    margin: 0 0 6px;
    color: #6b7280;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.cm-topbar h1 {
    margin: 0;
    font-size: clamp(28px, 3vw, 38px);
    letter-spacing: -.05em;
    line-height: 1.05;
}

.cm-topbar p {
    margin: 8px 0 0;
    color: #6b7280;
    font-size: 14px;
    line-height: 1.5;
}

.cm-topbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

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

.cm-stat-card {
    border: 1px solid var(--cm-line-soft);
    border-radius: 18px;
    background: #ffffff;
    padding: 18px;
    box-shadow: 0 10px 28px rgba(17, 24, 39, .05);
}

.cm-stat-card span {
    display: block;
    color: var(--cm-muted);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.cm-stat-card strong {
    display: block;
    margin-top: 10px;
    font-size: 30px;
    letter-spacing: -.05em;
}

.cm-stat-card p {
    margin: 8px 0 0;
    color: #6b7280;
    font-size: 13px;
    line-height: 1.4;
}

.cm-content-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr);
    gap: 18px;
}

.cm-panel {
    border: 1px solid var(--cm-line-soft);
    border-radius: 18px;
    background: #ffffff;
    padding: 20px;
    box-shadow: 0 12px 30px rgba(17, 24, 39, .06);
}

.cm-panel + .cm-panel {
    margin-top: 18px;
}

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

.cm-panel h2 {
    margin: 0;
    font-size: 17px;
    letter-spacing: -.02em;
}

.cm-panel p {
    margin: 6px 0 0;
    color: #6b7280;
    font-size: 14px;
    line-height: 1.6;
}

.cm-module-list {
    display: grid;
    gap: 10px;
}

.cm-module-item {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--cm-line-soft);
    border-radius: 15px;
    background: #fafafa;
    padding: 12px;
}

.cm-module-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #111827;
    color: #ffffff;
    font-size: 13px;
    font-weight: 900;
}

.cm-module-title {
    display: block;
    font-size: 14px;
    font-weight: 850;
}

.cm-module-desc {
    display: block;
    margin-top: 4px;
    color: #6b7280;
    font-size: 12px;
    line-height: 1.4;
}

.cm-status-chip {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    border: 1px solid var(--cm-line);
    background: #ffffff;
    color: #374151;
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 850;
    white-space: nowrap;
}

.cm-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--cm-line-soft);
    border-radius: 16px;
}

.cm-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 650px;
}

.cm-table th,
.cm-table td {
    padding: 13px 14px;
    border-bottom: 1px solid var(--cm-line-soft);
    text-align: left;
    vertical-align: top;
    font-size: 13px;
}

.cm-table th {
    background: #f9fafb;
    color: #374151;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

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

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

.cm-quick-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.cm-quick-card {
    border: 1px solid var(--cm-line-soft);
    border-radius: 16px;
    background: #fafafa;
    padding: 14px;
}

.cm-quick-card strong {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
}

.cm-quick-card span {
    color: #6b7280;
    font-size: 12px;
    line-height: 1.5;
}

.cm-mobile-header {
    display: none;
}

.cm-mobile-menu {
    display: none;
}

.cm-employee-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: stretch;
    border: 1px solid var(--cm-line-soft);
    border-radius: 22px;
    background: linear-gradient(135deg, #111827, #374151);
    color: #ffffff;
    padding: 22px;
    margin-bottom: 18px;
    box-shadow: 0 18px 45px rgba(17, 24, 39, .16);
}

.cm-employee-hero h1 {
    margin: 0;
    font-size: clamp(28px, 4vw, 42px);
    line-height: 1.05;
    letter-spacing: -.05em;
}

.cm-employee-hero p {
    margin: 10px 0 0;
    color: #d1d5db;
    font-size: 14px;
    line-height: 1.6;
}

.cm-hero-side {
    min-width: 220px;
    border-radius: 18px;
    background: rgba(255, 255, 255, .09);
    border: 1px solid rgba(255, 255, 255, .14);
    padding: 16px;
}

.cm-hero-side span {
    display: block;
    color: #d1d5db;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.cm-hero-side strong {
    display: block;
    margin-top: 8px;
    font-size: 24px;
    letter-spacing: -.04em;
}

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

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

@media (max-width: 1160px) {
    .cm-stat-grid,
    .cm-employee-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

@media (max-width: 860px) {
    .cm-auth-page,
    .cm-home-page {
        padding: 14px;
    }

    .cm-shell {
        display: block;
    }

    .cm-sidebar {
        display: none;
    }

    .cm-mobile-header {
        position: sticky;
        top: 0;
        z-index: 50;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 14px 16px;
        background: #111827;
        color: #ffffff;
    }

    .cm-mobile-menu {
        display: none;
        background: #1f2937;
        color: #ffffff;
        padding: 10px 16px 16px;
    }

    .cm-mobile-menu.is-open {
        display: block;
    }

    .cm-mobile-menu .cm-nav {
        margin-top: 0;
    }

    .cm-mobile-header .cm-button,
    .cm-mobile-header .cm-link-button {
        min-height: 36px;
        padding: 8px 12px;
        font-size: 12px;
    }

    .cm-main {
        padding: 16px;
    }

    .cm-topbar {
        display: block;
    }

    .cm-topbar-actions {
        margin-top: 14px;
    }

    .cm-grid,
    .cm-stat-grid,
    .cm-quick-grid,
    .cm-employee-grid,
    .cm-team-grid {
        grid-template-columns: 1fr;
    }

    .cm-card-body {
        padding: 26px 22px 30px;
    }

    .cm-card-header {
        padding: 16px;
    }

    .cm-employee-hero {
        grid-template-columns: 1fr;
        padding: 18px;
    }

    .cm-hero-side {
        min-width: 0;
    }

    .cm-module-item {
        grid-template-columns: 38px minmax(0, 1fr);
    }

    .cm-module-item .cm-status-chip {
        grid-column: 1 / -1;
        width: fit-content;
    }
}

@media (max-width: 480px) {
    .cm-main {
        padding: 12px;
    }

    .cm-panel,
    .cm-stat-card {
        padding: 16px;
    }

    .cm-title {
        font-size: 34px;
    }

    .cm-auth-title {
        font-size: 26px;
    }
}


/* Phase 4 User Management Styles */
.cm-filter-form {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) 220px 180px auto;
    gap: 14px;
    align-items: end;
}

.cm-filter-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cm-select {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, #6b7280 50%), linear-gradient(135deg, #6b7280 50%, transparent 50%);
    background-position: calc(100% - 18px) calc(50% - 3px), calc(100% - 13px) calc(50% - 3px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 34px;
}

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

.cm-form-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.cm-checkbox-field {
    display: flex;
    align-items: end;
    min-height: 74px;
}

.cm-checkbox-label {
    display: flex !important;
    align-items: center;
    gap: 10px;
    margin: 0 !important;
    padding: 13px 14px;
    border: 1px solid var(--cm-line);
    border-radius: 14px;
    background: #ffffff;
    color: #111827 !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.cm-checkbox-label input {
    width: 16px;
    height: 16px;
}

.cm-table-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.cm-button.compact,
.cm-link-button.compact {
    min-height: 34px;
    padding: 8px 10px;
    border-radius: 10px;
    font-size: 12px;
}

.cm-button.danger,
.cm-link-button.danger {
    background: #991b1b;
    color: #ffffff;
}

.cm-button.danger:hover,
.cm-link-button.danger:hover {
    background: #7f1d1d;
}

.cm-button.full,
.cm-link-button.full {
    width: 100%;
}

.cm-status-chip.danger {
    border-color: #fecaca;
    background: #fef2f2;
    color: #991b1b;
}

.cm-empty-state {
    padding: 22px;
    text-align: center;
    color: #6b7280;
    font-weight: 700;
}

.cm-pagination {
    margin-top: 16px;
}

.cm-pagination nav {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    color: #374151;
    font-size: 13px;
}

.cm-pagination a,
.cm-pagination span {
    border-radius: 10px;
}

@media (max-width: 980px) {
    .cm-filter-form {
        grid-template-columns: 1fr 1fr;
    }

    .cm-filter-actions {
        grid-column: 1 / -1;
    }
}

@media (max-width: 640px) {
    .cm-filter-form,
    .cm-form-grid {
        grid-template-columns: 1fr;
    }

    .cm-filter-actions,
    .cm-form-actions,
    .cm-table-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .cm-filter-actions .cm-button,
    .cm-filter-actions .cm-link-button,
    .cm-form-actions .cm-button,
    .cm-form-actions .cm-link-button,
    .cm-table-actions .cm-button,
    .cm-table-actions .cm-link-button {
        width: 100%;
    }

    .cm-checkbox-field {
        min-height: auto;
    }
}


/* Phase 5 Employee Master File Styles */
.employee-filter {
    grid-template-columns: minmax(220px, 1fr) 220px 200px 180px auto;
}

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

.cm-form-grid.three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

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

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

.cm-input textarea,
textarea.cm-input {
    resize: vertical;
    min-height: 90px;
}

.sticky-actions {
    position: sticky;
    bottom: 16px;
    z-index: 20;
    display: flex;
    justify-content: flex-end;
    padding: 14px;
    border: 1px solid var(--cm-line-soft);
    border-radius: 18px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 18px 40px rgba(17, 24, 39, .12);
    backdrop-filter: blur(12px);
}

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

.cm-detail-grid.one {
    grid-template-columns: 1fr;
}

.cm-detail-grid div {
    border: 1px solid var(--cm-line-soft);
    border-radius: 15px;
    background: #fafafa;
    padding: 13px 14px;
}

.cm-detail-grid div.full {
    grid-column: 1 / -1;
}

.cm-detail-grid span {
    display: block;
    color: #6b7280;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.cm-detail-grid strong {
    display: block;
    margin-top: 7px;
    color: #111827;
    font-size: 14px;
    line-height: 1.5;
    word-break: break-word;
}

@media (max-width: 1180px) {
    .employee-filter,
    .cm-form-grid.four,
    .cm-form-grid.three {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .employee-filter,
    .cm-form-grid.two,
    .cm-form-grid.three,
    .cm-form-grid.four,
    .cm-detail-grid {
        grid-template-columns: 1fr;
    }

    .sticky-actions {
        position: static;
        align-items: stretch;
        flex-direction: column;
    }

    .sticky-actions .cm-button,
    .sticky-actions .cm-link-button {
        width: 100%;
    }
}


/* Phase 6 Compact UI and Setup Styles */
body {
    font-size: 14px;
}

.cm-shell {
    grid-template-columns: 230px minmax(0, 1fr);
}

.cm-sidebar {
    padding: 14px;
}

.cm-sidebar .cm-brand {
    padding-bottom: 14px;
    font-weight: 700;
}

.cm-logo {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
    border-radius: 9px;
    font-size: 11px;
}

.cm-sidebar-meta {
    margin: 12px 0 2px;
    padding: 10px;
    border-radius: 12px;
}

.cm-sidebar-meta strong {
    font-size: 12px;
    font-weight: 650;
}

.cm-sidebar-meta span {
    font-size: 11px;
}

.cm-nav {
    gap: 5px;
    margin-top: 12px;
}

.cm-nav-section {
    margin: 13px 0 4px;
    font-size: 9px;
    font-weight: 750;
}

.cm-nav a,
.cm-nav button {
    gap: 8px;
    border-radius: 10px;
    padding: 8px 9px;
    font-size: 13px;
    font-weight: 600;
}

.cm-nav-icon {
    width: 22px;
    height: 22px;
    border-radius: 7px;
    font-size: 11px;
    font-weight: 700;
}

.cm-main {
    padding: 18px;
}

.cm-topbar {
    margin-bottom: 14px;
}

.cm-topbar.compact {
    margin-bottom: 12px;
}

.cm-topbar h1 {
    font-size: clamp(24px, 2.4vw, 32px);
    font-weight: 700;
    letter-spacing: -.035em;
}

.cm-topbar p {
    margin-top: 5px;
    font-size: 13px;
}

.cm-eyebrow {
    margin-bottom: 4px;
    font-size: 10px;
    font-weight: 750;
}

.cm-panel {
    border-radius: 15px;
    padding: 16px;
}

.cm-panel.compact-panel {
    padding: 14px;
}

.cm-panel + .cm-panel {
    margin-top: 12px;
}

.cm-panel-header {
    margin-bottom: 12px;
}

.cm-panel h2 {
    font-size: 15px;
    font-weight: 700;
}

.cm-panel p {
    font-size: 13px;
}

.cm-stat-grid {
    gap: 10px;
    margin-bottom: 12px;
}

.cm-stat-card {
    border-radius: 15px;
    padding: 14px;
}

.cm-stat-card span {
    font-size: 10px;
    font-weight: 750;
}

.cm-stat-card strong {
    margin-top: 6px;
    font-size: 24px;
    font-weight: 700;
}

.cm-stat-card p {
    margin-top: 6px;
    font-size: 12px;
}

.cm-input {
    border-radius: 11px;
    padding: 10px 11px;
    font-size: 13px;
}

.cm-field label {
    margin-bottom: 5px;
    font-size: 10px;
    font-weight: 700;
}

.cm-field-help {
    margin: 5px 0 0;
    color: #6b7280;
    font-size: 11px !important;
    line-height: 1.4;
}

.cm-button,
.cm-link-button {
    min-height: 38px;
    border-radius: 11px;
    padding: 10px 13px;
    font-size: 13px;
    font-weight: 650;
}

.cm-badge,
.cm-status-chip {
    padding: 5px 9px;
    font-size: 10px;
    font-weight: 700;
}

.cm-table th,
.cm-table td {
    padding: 10px 11px;
    font-size: 12px;
}

.cm-table th {
    font-size: 10px;
    font-weight: 750;
}

.compact-table th,
.compact-table td {
    padding: 9px 10px;
}

.cm-filter-form {
    gap: 10px;
}

.setup-filter {
    grid-template-columns: minmax(220px, 1fr) 160px auto;
}

.position-filter {
    grid-template-columns: minmax(220px, 1fr) 220px 160px auto;
}

.employee-filter {
    grid-template-columns: minmax(220px, 1fr) 200px 180px 160px auto;
}

.cm-form.compact-form {
    gap: 12px;
}

.cm-form-grid {
    gap: 12px;
}

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

.cm-checkbox-label {
    padding: 10px 11px;
    border-radius: 11px;
    font-size: 13px !important;
    font-weight: 650 !important;
}

.cm-checkbox-field {
    min-height: 60px;
}

.cm-button.compact,
.cm-link-button.compact {
    min-height: 30px;
    padding: 6px 9px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 650;
}

.sticky-actions.compact-sticky {
    padding: 10px;
    border-radius: 14px;
}

.cm-success,
.cm-warning,
.cm-error {
    padding: 10px 12px;
    border-radius: 12px;
    font-size: 12px;
    margin-bottom: 12px;
}

.cm-empty-state {
    padding: 16px;
    font-weight: 600;
}

@media (max-width: 980px) {
    .setup-filter,
    .position-filter,
    .employee-filter {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 700px) {
    .setup-filter,
    .position-filter,
    .employee-filter,
    .cm-form-grid.two {
        grid-template-columns: 1fr;
    }

    .cm-main {
        padding: 12px;
    }

    .cm-panel,
    .cm-panel.compact-panel {
        padding: 12px;
    }
}


/* Phase 7 Attendance Styles */
.attendance-action-grid {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(320px, .55fr);
    gap: 12px;
    margin-bottom: 12px;
}

.attendance-action-card {
    min-height: 100%;
}

.attendance-location-box {
    margin-bottom: 12px;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 12px;
    background: #f9fafb;
    color: #374151;
    font-size: 12px;
    line-height: 1.45;
}

.attendance-location-box.is-good {
    border-color: #bbf7d0;
    background: #f0fdf4;
    color: #166534;
}

.attendance-location-box.is-warning {
    border-color: #fde68a;
    background: #fffbeb;
    color: #92400e;
}

.attendance-buttons {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.attendance-check-in {
    background: #111827;
}

.attendance-check-out {
    background: #ffffff;
}

.attendance-timeline {
    display: grid;
    gap: 10px;
}

.attendance-timeline-item {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--cm-line-soft);
    border-radius: 13px;
    background: #fafafa;
}

.attendance-dot {
    width: 10px;
    height: 10px;
    margin-top: 4px;
    border-radius: 999px;
    background: #111827;
}

.attendance-timeline-item strong {
    display: block;
    font-size: 12px;
    font-weight: 700;
}

.attendance-timeline-item span,
.attendance-timeline-item p {
    display: block;
    margin: 3px 0 0;
    color: #6b7280;
    font-size: 12px;
    line-height: 1.4;
}

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

.attendance-review-grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(300px, .45fr);
}

.attendance-filter {
    grid-template-columns: minmax(190px, 1fr) 145px 145px 180px 160px 140px auto;
}

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

.cm-module-item[href] {
    color: inherit;
    text-decoration: none;
}

.cm-module-item[href]:hover {
    background: #f3f4f6;
    border-color: #d1d5db;
}

@media (max-width: 1280px) {
    .attendance-filter {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .attendance-filter .cm-filter-actions {
        grid-column: 1 / -1;
    }
}

@media (max-width: 980px) {
    .attendance-action-grid,
    .attendance-review-grid {
        grid-template-columns: 1fr;
    }

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

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


/* Employee Attendance Sequence Update */
.attendance-buttons .cm-button:disabled,
.attendance-buttons .cm-button[disabled] {
    cursor: not-allowed;
    opacity: .45;
    background: #d1d5db;
    color: #6b7280;
    border: 1px solid #d1d5db;
    transform: none;
}

.attendance-buttons .cm-button:disabled:hover,
.attendance-buttons .cm-button[disabled]:hover {
    background: #d1d5db;
    color: #6b7280;
}

.attendance-sequence-note {
    margin: 2px 0 0;
    color: #6b7280;
    font-size: 12px;
    line-height: 1.45;
}

.cm-mobile-menu .cm-nav {
    margin-top: 0;
}


/* Phase 8 Leave Management and Filter Polish */
.professional-filter-panel {
    overflow: hidden;
}

.professional-filter-panel .cm-panel-header {
    padding-bottom: 10px;
    border-bottom: 1px solid var(--cm-line-soft);
}

.attendance-filter {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    align-items: end;
}

.attendance-filter .cm-filter-actions {
    grid-column: auto;
    display: flex;
    align-items: end;
    justify-content: flex-start;
    gap: 8px;
    min-width: 0;
}

.attendance-filter .cm-filter-actions .cm-button,
.attendance-filter .cm-filter-actions .cm-link-button {
    white-space: nowrap;
}

.leave-filter {
    grid-template-columns: minmax(190px, 1.2fr) repeat(4, minmax(140px, 1fr)) auto;
    align-items: end;
}

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

.leave-create-grid {
    grid-template-columns: minmax(0, 1fr) 300px;
}

.leave-side-list {
    display: grid;
    gap: 9px;
}

.leave-side-item {
    border: 1px solid var(--cm-line-soft);
    border-radius: 12px;
    background: #fafafa;
    padding: 10px;
}

.leave-side-item strong {
    display: block;
    font-size: 13px;
    font-weight: 700;
}

.leave-side-item span {
    display: block;
    margin-top: 4px;
    color: #6b7280;
    font-size: 12px;
}

.leave-status {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 5px 9px;
    border: 1px solid #d1d5db;
    background: #ffffff;
    color: #374151;
    font-size: 10px;
    font-weight: 700;
}

.leave-status.pending {
    border-color: #fde68a;
    background: #fffbeb;
    color: #92400e;
}

.leave-status.approved {
    border-color: #bbf7d0;
    background: #f0fdf4;
    color: #166534;
}

.leave-status.declined,
.leave-status.cancelled {
    border-color: #fecaca;
    background: #fef2f2;
    color: #991b1b;
}

.leave-review-table {
    min-width: 1050px;
}

.leave-action-stack {
    display: grid;
    gap: 7px;
}

.leave-action-stack form {
    display: flex;
    gap: 7px;
    align-items: center;
}

.compact-input {
    min-height: 30px;
    padding: 6px 9px;
    font-size: 12px;
}

@media (max-width: 1360px) {
    .leave-filter,
    .attendance-filter {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .leave-filter .cm-filter-actions,
    .attendance-filter .cm-filter-actions {
        grid-column: 1 / -1;
    }
}

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

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

@media (max-width: 640px) {
    .leave-filter,
    .attendance-filter,
    .leave-balance-grid {
        grid-template-columns: 1fr !important;
    }

    .leave-action-stack form {
        align-items: stretch;
        flex-direction: column;
    }

    .leave-action-stack .cm-button,
    .leave-action-stack .cm-input {
        width: 100%;
    }
}


/* Phase 9 Payroll Foundation Styles */
.payroll-period-filter {
    grid-template-columns: minmax(240px, 1fr) 180px auto;
    align-items: end;
}

.payroll-salary-filter {
    grid-template-columns: minmax(240px, 1fr) 180px 160px auto;
    align-items: end;
}

.payroll-item-filter {
    grid-template-columns: minmax(260px, 1.2fr) minmax(220px, 1fr) 150px auto;
    align-items: end;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--cm-line-soft);
}

.payroll-generate-form {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) auto;
    gap: 10px;
    align-items: end;
}

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

.payroll-status {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 5px 9px;
    border: 1px solid #d1d5db;
    background: #ffffff;
    color: #374151;
    font-size: 10px;
    font-weight: 700;
}

.payroll-status.draft {
    border-color: #d1d5db;
    background: #f9fafb;
    color: #374151;
}

.payroll-status.open,
.payroll-status.reviewed,
.payroll-status.generated {
    border-color: #bbf7d0;
    background: #f0fdf4;
    color: #166534;
}

.payroll-status.processing {
    border-color: #fde68a;
    background: #fffbeb;
    color: #92400e;
}

.payroll-status.closed {
    border-color: #fecaca;
    background: #fef2f2;
    color: #991b1b;
}

@media (max-width: 1180px) {
    .payroll-period-filter,
    .payroll-salary-filter,
    .payroll-item-filter,
    .payroll-generate-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .payroll-period-filter .cm-filter-actions,
    .payroll-salary-filter .cm-filter-actions,
    .payroll-item-filter .cm-filter-actions {
        grid-column: 1 / -1;
    }
}

@media (max-width: 640px) {
    .payroll-period-filter,
    .payroll-salary-filter,
    .payroll-item-filter,
    .payroll-generate-form {
        grid-template-columns: 1fr;
    }
}


/* Employee Payslip and Attendance History Update */
.attendance-single-grid {
    display: grid;
    grid-template-columns: minmax(0, 760px);
    gap: 12px;
    margin-bottom: 12px;
}

.employee-attendance-filter {
    grid-template-columns: 180px 180px auto;
    align-items: end;
}

.enhanced-pagination {
    display: flex;
    justify-content: flex-end;
}

.enhanced-pagination nav {
    width: 100%;
}

.enhanced-pagination .hidden {
    display: none;
}

.payslip-table {
    min-width: 940px;
}

.payslip-document {
    border: 1px solid var(--cm-line-soft);
    border-radius: 18px;
    background: #ffffff;
    padding: 20px;
    box-shadow: 0 18px 50px rgba(17, 24, 39, .08);
}

.payslip-head,
.payslip-row,
.payslip-net {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.payslip-head {
    padding-bottom: 14px;
    border-bottom: 1px solid var(--cm-line-soft);
}

.payslip-head h2 {
    margin: 0;
    color: #111827;
    font-size: 20px;
    font-weight: 700;
}

.payslip-head p,
.payslip-info-grid p,
.payslip-remarks p {
    margin: 4px 0 0;
    color: #6b7280;
    font-size: 12px;
}

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

.payslip-info-grid div {
    border: 1px solid var(--cm-line-soft);
    border-radius: 14px;
    background: #fafafa;
    padding: 12px;
}

.payslip-info-grid span,
.payslip-net span,
.payslip-remarks span {
    display: block;
    color: #6b7280;
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .10em;
    text-transform: uppercase;
}

.payslip-info-grid strong {
    display: block;
    margin-top: 5px;
    color: #111827;
    font-size: 13px;
    font-weight: 700;
}

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

.payslip-box {
    border: 1px solid var(--cm-line-soft);
    border-radius: 15px;
    padding: 14px;
    background: #ffffff;
}

.payslip-box h3 {
    margin: 0 0 10px;
    color: #111827;
    font-size: 14px;
    font-weight: 700;
}

.payslip-row {
    padding: 9px 0;
    border-bottom: 1px solid #f3f4f6;
    color: #374151;
    font-size: 13px;
}

.payslip-row strong {
    color: #111827;
    font-weight: 700;
}

.payslip-row.total {
    border-bottom: 0;
    color: #111827;
    font-weight: 700;
}

.payslip-net {
    margin-top: 14px;
    border-radius: 16px;
    background: #111827;
    color: #ffffff;
    padding: 16px;
}

.payslip-net span {
    color: #d1d5db;
}

.payslip-net strong {
    font-size: 24px;
    font-weight: 800;
}

.payslip-remarks {
    margin-top: 14px;
    border: 1px solid var(--cm-line-soft);
    border-radius: 14px;
    background: #fafafa;
    padding: 12px;
}

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

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

@media (max-width: 640px) {
    .employee-attendance-filter,
    .payslip-info-grid {
        grid-template-columns: 1fr;
    }

    .payslip-document {
        padding: 14px;
    }

    .payslip-head,
    .payslip-net {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media print {
    body {
        background: #ffffff !important;
    }

    .cm-sidebar,
    .cm-mobile-header,
    .cm-mobile-menu,
    .cm-topbar .cm-topbar-actions {
        display: none !important;
    }

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

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

    .payslip-document {
        box-shadow: none !important;
        border: 1px solid #d1d5db !important;
    }
}


/* Payslip Download Update */
.payslip-two-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 640px) {
    .payslip-two-grid {
        grid-template-columns: 1fr;
    }
}


/* Phase 9 Payroll Cleanup Styles */
.payroll-cleanup-table {
    min-width: 1220px;
}

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

.payroll-action-grid form,
.cm-topbar-actions form {
    margin: 0;
}

.payroll-action-grid .cm-button,
.payroll-action-grid .cm-link-button {
    width: 100%;
    justify-content: center;
}

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

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

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

@media (max-width: 640px) {
    .payslip-four-grid {
        grid-template-columns: 1fr;
    }
}


/* Phase 10 Reports Audit Logs Security Styles */
.report-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.report-card {
    display: block;
    border: 1px solid var(--cm-line-soft);
    border-radius: 16px;
    background: #ffffff;
    padding: 16px;
    color: inherit;
    text-decoration: none;
    box-shadow: 0 14px 40px rgba(17, 24, 39, .06);
    transition: transform .15s ease, border-color .15s ease;
}

.report-card:hover {
    border-color: #9ca3af;
    transform: translateY(-1px);
}

.report-card span {
    display: block;
    color: #6b7280;
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .10em;
    text-transform: uppercase;
}

.report-card strong {
    display: block;
    margin-top: 8px;
    color: #111827;
    font-size: 18px;
    font-weight: 700;
}

.report-card p {
    margin: 8px 0 0;
    color: #4b5563;
    font-size: 13px;
    line-height: 1.5;
}

.reports-filter {
    grid-template-columns: minmax(220px, 1.2fr) repeat(3, minmax(150px, 1fr)) auto;
    align-items: end;
}

.reports-filter.long {
    grid-template-columns: minmax(220px, 1.2fr) 145px 145px 170px 160px 130px auto;
}

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

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

@media (max-width: 1280px) {
    .reports-filter,
    .reports-filter.long {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .reports-filter .cm-filter-actions {
        grid-column: 1 / -1;
    }
}

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

@media (max-width: 640px) {
    .report-card-grid,
    .reports-filter,
    .reports-filter.long {
        grid-template-columns: 1fr;
    }
}

/* Reports dropdown sidebar */
.cm-nav-dropdown {
    margin: 2px 0;
}

.cm-nav-dropdown summary {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 8px 10px;
    border-radius: 10px;
    color: #374151;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    list-style: none;
    user-select: none;
}

.cm-nav-dropdown summary::-webkit-details-marker {
    display: none;
}

.cm-nav-dropdown summary:hover,
.cm-nav-dropdown summary.active {
    background: #f3f4f6;
    color: #111827;
}

.cm-nav-caret {
    margin-left: auto;
    color: #6b7280;
    font-size: 11px;
    transition: transform .15s ease;
}

.cm-nav-dropdown[open] .cm-nav-caret {
    transform: rotate(180deg);
}

.cm-nav-submenu {
    display: grid;
    gap: 2px;
    margin: 4px 0 6px 25px;
    padding-left: 9px;
    border-left: 1px solid #d1d5db;
}

.cm-nav-submenu a {
    min-height: 30px;
    padding: 7px 9px;
    border-radius: 9px;
    color: #4b5563;
    font-size: 12px;
    font-weight: 500;
}

.cm-nav-submenu a:hover,
.cm-nav-submenu a.active {
    background: #f9fafb;
    color: #111827;
}


/* Reports dropdown sidebar color fix */
.cm-sidebar .cm-nav-dropdown summary {
    color: #e5e7eb;
}

.cm-sidebar .cm-nav-dropdown summary .cm-nav-icon {
    color: #e5e7eb;
    background: rgba(255, 255, 255, .10);
}

.cm-sidebar .cm-nav-dropdown summary .cm-nav-caret {
    color: #cbd5e1;
}

.cm-sidebar .cm-nav-dropdown summary:hover,
.cm-sidebar .cm-nav-dropdown summary.active {
    background: rgba(255, 255, 255, .08);
    color: #ffffff;
}

.cm-sidebar .cm-nav-dropdown summary:hover .cm-nav-icon,
.cm-sidebar .cm-nav-dropdown summary.active .cm-nav-icon {
    color: #ffffff;
    background: rgba(255, 255, 255, .16);
}

.cm-sidebar .cm-nav-submenu {
    border-left-color: rgba(255, 255, 255, .20);
}

.cm-sidebar .cm-nav-submenu a {
    color: #d1d5db;
}

.cm-sidebar .cm-nav-submenu a:hover,
.cm-sidebar .cm-nav-submenu a.active {
    background: rgba(255, 255, 255, .08);
    color: #ffffff;
}

/* Payroll generation notification clarity */
.cm-error {
    margin-bottom: 12px;
    border: 1px solid #fecaca;
    border-radius: 14px;
    background: #fef2f2;
    color: #991b1b;
    padding: 12px 14px;
    font-size: 13px;
    font-weight: 650;
}

.cm-success {
    margin-bottom: 12px;
    border: 1px solid #bbf7d0;
    border-radius: 14px;
    background: #f0fdf4;
    color: #166534;
    padding: 12px 14px;
    font-size: 13px;
    font-weight: 650;
}

.payroll-error-panel {
    border-color: #fecaca;
    background: #fff7f7;
}

.payroll-error-panel .cm-panel-header {
    border-bottom: 1px solid #fecaca;
}

.payroll-error-panel h2 {
    color: #991b1b;
}

.payroll-skipped-table {
    min-width: 760px;
}

.payroll-skipped-table th {
    background: #fef2f2;
}

.payroll-skipped-table td {
    color: #7f1d1d;
}

/* Employee attendance button enhancement */
.attendance-action-card {
    position: relative;
    overflow: hidden;
}

.attendance-action-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at top right, rgba(17, 24, 39, .08), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,.65), rgba(243,244,246,.50));
    pointer-events: none;
}

.attendance-action-card > * {
    position: relative;
    z-index: 1;
}

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

.attendance-buttons .cm-button {
    min-height: 64px;
    border-radius: 18px;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    box-shadow: 0 16px 36px rgba(17, 24, 39, .16);
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        background .18s ease,
        border-color .18s ease,
        opacity .18s ease;
}

.attendance-buttons .cm-button:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 22px 46px rgba(17, 24, 39, .22);
}

.attendance-buttons .cm-button:active:not(:disabled) {
    transform: translateY(0) scale(.99);
    box-shadow: 0 12px 28px rgba(17, 24, 39, .16);
}

.attendance-buttons .cm-button:disabled {
    cursor: not-allowed;
    opacity: .48;
    box-shadow: none;
    filter: grayscale(.35);
}

.attendance-check-in {
    background: linear-gradient(135deg, #111827, #374151);
    border-color: #111827;
    color: #ffffff;
}

.attendance-check-in:hover:not(:disabled) {
    background: linear-gradient(135deg, #020617, #1f2937);
}

.attendance-check-out {
    background: linear-gradient(135deg, #f9fafb, #e5e7eb);
    border-color: #9ca3af;
    color: #111827;
}

.attendance-check-out:hover:not(:disabled) {
    background: linear-gradient(135deg, #ffffff, #d1d5db);
    border-color: #6b7280;
}

.attendance-sequence-note {
    margin: 12px 0 0;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: rgba(255, 255, 255, .72);
    padding: 10px 12px;
    color: #4b5563;
    font-size: 13px;
}

@media (max-width: 640px) {
    .attendance-buttons {
        grid-template-columns: 1fr;
    }

    .attendance-buttons .cm-button {
        min-height: 60px;
        font-size: 15px;
    }
}

/* Attendance map button */
.cm-map-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 7px 10px;
    border-radius: 999px;
    border: 1px solid #d1d5db;
    background: #ffffff;
    color: #111827;
    font-size: 11px;
    font-weight: 750;
    text-decoration: none;
    white-space: nowrap;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.cm-map-button:hover {
    background: #f3f4f6;
    box-shadow: 0 10px 24px rgba(17, 24, 39, .12);
    transform: translateY(-1px);
}

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

.admin-adjustment-form {
    grid-template-columns: minmax(220px, 1.2fr) 150px 130px 140px minmax(220px, 1fr) auto;
    align-items: end;
}

@media (max-width: 1280px) {
    .admin-adjustment-form {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .admin-adjustment-form .cm-filter-actions {
        grid-column: 1 / -1;
    }
}

@media (max-width: 640px) {
    .admin-adjustment-form {
        grid-template-columns: 1fr;
    }
}

/* High accuracy GPS capture UI */
.gps-quality-panel {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 12px 0;
}

.gps-quality-panel div {
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: rgba(255, 255, 255, .72);
    padding: 10px 12px;
}

.gps-quality-panel span {
    display: block;
    color: #6b7280;
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.gps-quality-panel strong {
    display: block;
    margin-top: 4px;
    color: #111827;
    font-size: 15px;
    font-weight: 800;
}

.attendance-location-box.is-bad {
    border-color: #fecaca;
    background: #fef2f2;
    color: #991b1b;
}

.gps-retry-button {
    margin-top: 12px;
    width: 100%;
    justify-content: center;
}

@media (max-width: 640px) {
    .gps-quality-panel {
        grid-template-columns: 1fr;
    }
}

/* Employee login install app footer */
.cm-login-install-footer {
    display: flex;
    justify-content: center;
    margin-top: 18px;
    padding: 8px 0 0;
}

.cm-install-app-link {
    border: 0;
    background: transparent;
    color: #374151;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 4px;
    transition: color .15s ease, transform .15s ease;
}

.cm-install-app-link:hover {
    color: #111827;
    transform: translateY(-1px);
}

.cm-install-app-link:active {
    transform: translateY(0);
}

/* PWA install modal */
.cm-install-app-link.is-ready {
    color: #111827;
}

.cm-pwa-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(17, 24, 39, .50);
    backdrop-filter: blur(6px);
}

.cm-pwa-modal.is-open {
    display: flex;
}

.cm-pwa-modal-card {
    position: relative;
    width: min(420px, 100%);
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    background: #ffffff;
    padding: 22px;
    box-shadow: 0 24px 70px rgba(17, 24, 39, .28);
}

.cm-pwa-modal-card h2 {
    margin: 0 34px 10px 0;
    color: #111827;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.02em;
}

.cm-pwa-modal-body {
    color: #374151;
    font-size: 14px;
    line-height: 1.6;
}

.cm-pwa-modal-body p {
    margin: 0 0 10px;
}

.cm-pwa-modal-body ol {
    margin: 0 0 10px;
    padding-left: 20px;
}

.cm-pwa-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    background: #f9fafb;
    color: #111827;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
}

.cm-pwa-modal-ok {
    width: 100%;
    margin-top: 14px;
    justify-content: center;
}

@media (max-width: 520px) {
    .cm-pwa-modal {
        align-items: flex-end;
        padding: 12px;
    }

    .cm-pwa-modal-card {
        border-radius: 18px;
    }
}

/* PWA install trigger refinements */
.cm-install-app-trigger {
    width: 100%;
    justify-content: center;
    cursor: pointer;
}

.cm-install-app-trigger.is-ready {
    border-color: #111827;
    background: #111827;
    color: #ffffff;
}

/* Login password hide/show toggle */
.cm-password-field {
    position: relative;
    display: flex;
    align-items: center;
}

.cm-password-field .cm-input {
    padding-right: 46px;
}

.cm-password-toggle {
    position: absolute;
    right: 10px;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #6b7280;
    cursor: pointer;
    font-family: 'Material Icons', 'Material Symbols Outlined', sans-serif;
    font-size: 20px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s ease, color .15s ease, transform .15s ease;
}

.cm-password-toggle:hover {
    background: #f3f4f6;
    color: #111827;
}

.cm-password-toggle:active {
    transform: scale(.96);
}

/* Password toggle alignment fix */
.cm-auth-card .cm-password-field {
    position: relative;
    width: 100%;
    display: block;
}

.cm-auth-card .cm-password-field .cm-input {
    width: 100%;
    padding-right: 76px;
}

.cm-auth-card .cm-password-toggle {
    position: absolute;
    top: 50%;
    right: 9px;
    width: 56px;
    height: 28px;
    transform: translateY(-50%);
    border: 1px solid #d1d5db;
    border-radius: 999px;
    background: #f9fafb;
    color: #374151;
    cursor: pointer;
    font-family: inherit;
    font-size: 11px;
    font-weight: 750;
    line-height: 1;
    letter-spacing: .02em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.cm-auth-card .cm-password-toggle:hover {
    background: #111827;
    border-color: #111827;
    color: #ffffff;
}

.cm-auth-card .cm-password-toggle:active {
    transform: translateY(-50%) scale(.97);
}

/* Local Material Symbols sidebar icons */
.cm-sidebar .cm-nav-icon.material-symbols-rounded,
.cm-employee-sidebar .cm-nav-icon.material-symbols-rounded {
    font-family: 'Material Symbols Rounded';
    font-size: 18px;
    font-weight: normal;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    color: inherit;
    font-variation-settings:
        'FILL' 0,
        'wght' 300,
        'GRAD' 0,
        'opsz' 24;
}

.cm-nav-icon.material-symbols-rounded {
    font-family: 'Material Symbols Rounded';
    font-size: 18px;
    font-weight: normal;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    font-variation-settings:
        'FILL' 0,
        'wght' 300,
        'GRAD' 0,
        'opsz' 24;
}

/* Material Symbols local sidebar icon alignment fix */
.cm-sidebar .cm-nav-icon,
.cm-employee-sidebar .cm-nav-icon {
    width: 22px;
    min-width: 22px;
    height: 22px;
    flex: 0 0 22px;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cm-sidebar .cm-nav-symbol,
.cm-employee-sidebar .cm-nav-symbol,
.cm-nav-icon .cm-nav-symbol {
    width: 18px;
    height: 18px;
    overflow: hidden;
    font-family: 'Material Symbols Rounded' !important;
    font-size: 18px !important;
    font-weight: normal !important;
    line-height: 1 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    color: inherit !important;
    font-feature-settings: 'liga' !important;
    -webkit-font-feature-settings: 'liga' !important;
    -webkit-font-smoothing: antialiased !important;
    text-rendering: optimizeLegibility !important;
    font-variation-settings:
        'FILL' 0,
        'wght' 300,
        'GRAD' 0,
        'opsz' 24 !important;
}

.cm-sidebar a,
.cm-sidebar summary,
.cm-employee-sidebar a,
.cm-employee-sidebar summary {
    gap: 10px;
}

/* Offline SVG sidebar icons */
.cm-sidebar .cm-svg-icon,
.cm-employee-sidebar .cm-svg-icon,
.cm-svg-icon {
    width: 22px;
    min-width: 22px;
    height: 22px;
    flex: 0 0 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.cm-sidebar .cm-svg-icon svg,
.cm-employee-sidebar .cm-svg-icon svg,
.cm-svg-icon svg {
    width: 17px;
    height: 17px;
    display: block;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

.cm-sidebar a,
.cm-sidebar summary,
.cm-employee-sidebar a,
.cm-employee-sidebar summary {
    gap: 10px;
}

/* Final sidebar SVG icon cleanup */
.cm-sidebar .cm-nav-icon,
.cm-employee-sidebar .cm-nav-icon {
    width: 22px !important;
    min-width: 22px !important;
    height: 22px !important;
    flex: 0 0 22px !important;
    overflow: hidden !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0 !important;
    letter-spacing: 0 !important;
    text-indent: 0 !important;
}

.cm-sidebar .cm-svg-icon svg,
.cm-employee-sidebar .cm-svg-icon svg,
.cm-svg-icon svg {
    width: 17px !important;
    height: 17px !important;
    display: block !important;
    stroke: currentColor !important;
    stroke-width: 1.7 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    fill: none !important;
}

.cm-sidebar .material-symbols-rounded,
.cm-employee-sidebar .material-symbols-rounded,
.cm-sidebar .cm-nav-symbol,
.cm-employee-sidebar .cm-nav-symbol {
    display: none !important;
}

/* Audit logs report and input security cleanup */
.audit-log-filter {
    grid-template-columns: minmax(220px, 1.2fr) minmax(180px, 1fr) 130px 160px 145px 145px auto;
    align-items: end;
}

.audit-log-table {
    min-width: 1180px;
}

.audit-json-details summary {
    cursor: pointer;
    color: #111827;
    font-size: 12px;
    font-weight: 750;
}

.audit-json-details pre {
    max-width: 420px;
    max-height: 220px;
    overflow: auto;
    margin: 8px 0 0;
    padding: 10px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #f9fafb;
    color: #374151;
    font-size: 11px;
    white-space: pre-wrap;
    word-break: break-word;
}

.audit-uri {
    max-width: 320px;
    word-break: break-word;
}

.cm-status-pill.success {
    background: #ecfdf5;
    color: #166534;
    border-color: #bbf7d0;
}

.cm-status-pill.danger {
    background: #fef2f2;
    color: #991b1b;
    border-color: #fecaca;
}

@media (max-width: 1280px) {
    .audit-log-filter {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .audit-log-filter .cm-filter-actions {
        grid-column: 1 / -1;
    }
}

@media (max-width: 720px) {
    .audit-log-filter {
        grid-template-columns: 1fr;
    }
}

/* Reports storage information */
.storage-stat-grid {
    margin-bottom: 14px;
}

.storage-breakdown-panel {
    margin-bottom: 14px;
}

.storage-breakdown-table {
    min-width: 820px;
}

.storage-breakdown-table td:nth-child(2),
.storage-breakdown-table th:nth-child(2) {
    width: 160px;
    white-space: nowrap;
}

.storage-breakdown-table td:nth-child(3) {
    color: #4b5563;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: 12px;
    word-break: break-all;
}

/* Sidebar icon size increase */
.cm-sidebar .cm-nav-icon,
.cm-employee-sidebar .cm-nav-icon {
    width: 28px !important;
    min-width: 28px !important;
    height: 28px !important;
    flex: 0 0 28px !important;
}

.cm-sidebar .cm-svg-icon svg,
.cm-employee-sidebar .cm-svg-icon svg,
.cm-svg-icon svg {
    width: 21px !important;
    height: 21px !important;
    stroke-width: 1.65 !important;
}

.cm-sidebar a,
.cm-sidebar summary,
.cm-employee-sidebar a,
.cm-employee-sidebar summary {
    gap: 11px !important;
}

/* Super admin real dashboard */
.dashboard-stat-grid,
.dashboard-storage-grid {
    margin-bottom: 14px;
}

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

.cm-dashboard-grid.three-column {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dashboard-mini-list,
.dashboard-activity-list {
    display: grid;
    gap: 8px;
}

.dashboard-mini-row,
.dashboard-activity-item {
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #ffffff;
    padding: 10px 12px;
}

.dashboard-mini-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.dashboard-mini-row span,
.dashboard-activity-item span,
.dashboard-metric-grid span,
.dashboard-payroll-total span {
    color: #6b7280;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.dashboard-mini-row strong,
.dashboard-activity-item strong {
    color: #111827;
    font-size: 13px;
    font-weight: 750;
}

.dashboard-activity-item span {
    display: block;
    margin-top: 3px;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
}

.dashboard-metric-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.dashboard-metric-grid div,
.dashboard-payroll-total {
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #ffffff;
    padding: 11px 12px;
}

.dashboard-metric-grid strong {
    display: block;
    margin-top: 4px;
    color: #111827;
    font-size: 22px;
    font-weight: 800;
}

.dashboard-payroll-total {
    margin-top: 10px;
}

.dashboard-payroll-total strong {
    display: block;
    margin-top: 4px;
    color: #111827;
    font-size: 20px;
    font-weight: 800;
}

.dashboard-payroll-total p {
    margin: 3px 0 0;
    color: #6b7280;
    font-size: 12px;
}

.full-width-link {
    width: 100%;
    justify-content: center;
    margin-top: 12px;
}

@media (max-width: 1100px) {
    .cm-dashboard-grid,
    .cm-dashboard-grid.three-column {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .dashboard-metric-grid {
        grid-template-columns: 1fr;
    }
}

/* Payslip release email notification */
.payslip-email-panel {
    margin-bottom: 14px;
}

.payslip-email-status-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.payslip-email-status-grid div {
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #ffffff;
    padding: 10px 12px;
}

.payslip-email-status-grid span {
    display: block;
    color: #6b7280;
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.payslip-email-status-grid strong {
    display: block;
    margin-top: 4px;
    color: #111827;
    font-size: 13px;
    font-weight: 750;
    word-break: break-word;
}

.cm-status-pill.warning {
    background: #fffbeb;
    color: #92400e;
    border-color: #fde68a;
}

.cm-status-pill.neutral {
    background: #f3f4f6;
    color: #374151;
    border-color: #d1d5db;
}

@media (max-width: 720px) {
    .payslip-email-status-grid {
        grid-template-columns: 1fr;
    }
}

/* Work schedule setup */
.schedule-assignment-form {
    grid-template-columns: minmax(260px, 1.3fr) minmax(220px, 1fr) 150px 150px minmax(180px, 1fr) auto;
    align-items: end;
}

.schedule-assignment-table-wrap {
    margin-top: 14px;
}

.work-schedule-table {
    min-width: 1100px;
}

.workday-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.workday-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    padding: 5px 8px;
    font-size: 11px;
    font-weight: 750;
    white-space: nowrap;
}

.workday-chip.work {
    background: #ecfdf5;
    border-color: #bbf7d0;
    color: #166534;
}

.workday-chip.ot {
    background: #fffbeb;
    border-color: #fde68a;
    color: #92400e;
}

.workday-chip.rest {
    background: #f3f4f6;
    border-color: #e5e7eb;
    color: #6b7280;
}

.work-schedule-days-card {
    margin-top: 14px;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    background: #f9fafb;
    padding: 14px;
}

.work-schedule-days-card h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
}

.work-schedule-days-card p {
    margin: 5px 0 12px;
    color: #6b7280;
    font-size: 13px;
}

.work-schedule-days-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(150px, 1fr));
    gap: 10px;
}

.work-schedule-day-box {
    border: 1px solid #e5e7eb;
    border-radius: 15px;
    background: #ffffff;
    padding: 11px;
}

.work-schedule-day-title {
    margin-bottom: 8px;
    color: #111827;
    font-size: 13px;
    font-weight: 800;
}

@media (max-width: 1440px) {
    .work-schedule-days-grid {
        grid-template-columns: repeat(4, minmax(150px, 1fr));
    }

    .schedule-assignment-form {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .schedule-assignment-form .cm-filter-actions {
        grid-column: 1 / -1;
    }
}

@media (max-width: 780px) {
    .work-schedule-days-grid,
    .schedule-assignment-form {
        grid-template-columns: 1fr;
    }
}

/* Employee profile page */
.employee-profile-hero {
    display: grid;
    grid-template-columns: minmax(280px, .95fr) minmax(320px, 1.6fr);
    gap: 14px;
    margin-bottom: 14px;
}

.employee-avatar-card,
.employee-profile-summary-grid div,
.profile-definition-list div,
.profile-mini-row,
.profile-activity-item {
    border: 1px solid #e5e7eb;
    background: #ffffff;
    border-radius: 16px;
}

.employee-avatar-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px;
}

.employee-avatar {
    width: 62px;
    height: 62px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #111827;
    color: #ffffff;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: .04em;
}

.employee-avatar-card h2 {
    margin: 0;
    color: #111827;
    font-size: 20px;
    font-weight: 800;
}

.employee-avatar-card p {
    margin: 4px 0 8px;
    color: #6b7280;
    font-size: 13px;
}

.employee-profile-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.employee-profile-summary-grid div {
    padding: 13px;
}

.employee-profile-summary-grid span,
.profile-definition-list dt,
.profile-mini-row span,
.profile-activity-item span {
    color: #6b7280;
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.employee-profile-summary-grid strong,
.profile-definition-list dd,
.profile-mini-row strong,
.profile-activity-item strong {
    display: block;
    margin-top: 4px;
    color: #111827;
    font-size: 13px;
    font-weight: 750;
    word-break: break-word;
}

.employee-profile-stats {
    margin-bottom: 14px;
}

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

.employee-profile-grid.three-column {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.profile-definition-list {
    display: grid;
    gap: 8px;
    margin: 0;
}

.profile-definition-list div {
    padding: 10px 12px;
}

.profile-definition-list dt {
    margin: 0;
}

.profile-definition-list dd {
    margin: 0;
    text-transform: none;
    letter-spacing: 0;
}

.profile-schedule-days {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}

.profile-mini-list,
.profile-activity-list {
    display: grid;
    gap: 8px;
}

.profile-mini-row,
.profile-activity-item {
    padding: 10px 12px;
}

.profile-mini-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.profile-activity-item span {
    display: block;
    margin-top: 3px;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
}

@media (max-width: 1180px) {
    .employee-profile-hero,
    .employee-profile-grid,
    .employee-profile-grid.three-column {
        grid-template-columns: 1fr;
    }

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

@media (max-width: 640px) {
    .employee-avatar-card {
        align-items: flex-start;
    }

    .employee-profile-summary-grid {
        grid-template-columns: 1fr;
    }
}

/* Employee mobile menu final behavior */
.cm-mobile-menu-backdrop {
    display: none;
}

.cm-mobile-topbar {
    display: none;
}

@media (min-width: 901px) {
    .employee-shell .cm-employee-sidebar {
        transform: none !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .employee-shell .cm-main {
        min-width: 0;
    }

    .cm-mobile-topbar,
    .cm-mobile-menu-button,
    .cm-mobile-menu-backdrop {
        display: none !important;
    }

    body.cm-mobile-menu-open {
        overflow: auto !important;
    }
}

@media (max-width: 900px) {
    .employee-shell {
        display: block;
    }

    .cm-mobile-topbar {
        position: sticky;
        top: 0;
        z-index: 1200;
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 10px 12px;
        border-bottom: 1px solid #e5e7eb;
        background: rgba(255, 255, 255, .94);
        backdrop-filter: blur(10px);
    }

    .cm-mobile-menu-button {
        display: inline-flex !important;
    }

    .employee-shell .cm-employee-sidebar {
        position: fixed !important;
        top: 0;
        left: 0;
        z-index: 1300;
        width: min(290px, 86vw);
        height: 100vh;
        max-height: 100vh;
        overflow-y: auto;
        transform: translateX(-105%);
        transition: transform .22s ease, box-shadow .22s ease;
        box-shadow: none;
    }

    .employee-shell .cm-employee-sidebar.is-open {
        transform: translateX(0);
        box-shadow: 22px 0 60px rgba(15, 23, 42, .35);
    }

    .cm-mobile-menu-backdrop {
        position: fixed;
        inset: 0;
        z-index: 1250;
        display: none;
        background: rgba(15, 23, 42, .52);
        backdrop-filter: blur(2px);
    }

    .cm-mobile-menu-backdrop.is-open {
        display: block;
    }

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

    .employee-shell .cm-main {
        width: 100%;
        min-height: 100vh;
    }
}

/* Employee sidebar/menu visibility hard fix */
.cm-mobile-menu-backdrop {
    display: none;
}

.cm-mobile-topbar {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid #e5e7eb;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(10px);
}

.cm-mobile-menu-button {
    display: inline-flex !important;
}

@media (min-width: 901px) {
    .employee-shell .cm-employee-sidebar {
        position: sticky !important;
        top: 0 !important;
        left: 0 !important;
        z-index: 20 !important;
        height: 100vh !important;
        transform: none !important;
        visibility: visible !important;
        opacity: 1 !important;
        display: block !important;
    }

    body.cm-desktop-sidebar-hidden .employee-shell .cm-employee-sidebar {
        display: none !important;
    }

    body.cm-desktop-sidebar-hidden .employee-shell {
        grid-template-columns: 1fr !important;
    }

    .employee-shell .cm-main {
        min-width: 0;
    }

    .cm-mobile-menu-backdrop,
    .cm-mobile-menu-backdrop.is-open {
        display: none !important;
    }

    body.cm-mobile-menu-open {
        overflow: auto !important;
    }
}

@media (max-width: 900px) {
    .employee-shell {
        display: block !important;
    }

    .cm-mobile-topbar {
        position: sticky !important;
        top: 0 !important;
        z-index: 1200 !important;
    }

    .employee-shell .cm-employee-sidebar,
    #cmMobileMenu {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        z-index: 1400 !important;
        width: min(300px, 88vw) !important;
        height: 100vh !important;
        max-height: 100vh !important;
        overflow-y: auto !important;
        transform: translateX(-105%) !important;
        transition: transform .22s ease, box-shadow .22s ease !important;
        box-shadow: none !important;
        visibility: visible !important;
        opacity: 1 !important;
        display: block !important;
    }

    .employee-shell .cm-employee-sidebar.is-open,
    #cmMobileMenu.is-open,
    body.cm-mobile-menu-open #cmMobileMenu {
        transform: translateX(0) !important;
        box-shadow: 22px 0 60px rgba(15, 23, 42, .36) !important;
    }

    .cm-mobile-menu-backdrop {
        position: fixed !important;
        inset: 0 !important;
        z-index: 1300 !important;
        display: none;
        background: rgba(15, 23, 42, .52) !important;
        backdrop-filter: blur(2px);
    }

    .cm-mobile-menu-backdrop.is-open,
    body.cm-mobile-menu-open .cm-mobile-menu-backdrop {
        display: block !important;
    }

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

    .employee-shell .cm-main {
        width: 100% !important;
        min-height: 100vh !important;
    }
}

/* Hide employee Menu button on desktop only */
@media (min-width: 901px) {
    .employee-shell ~ .cm-mobile-topbar,
    .cm-mobile-topbar,
    .cm-mobile-menu-button,
    #cmMobileMenuToggle {
        display: none !important;
        visibility: hidden !important;
    }
}

@media (max-width: 900px) {
    .cm-mobile-topbar {
        display: flex !important;
        visibility: visible !important;
    }

    .cm-mobile-menu-button,
    #cmMobileMenuToggle {
        display: inline-flex !important;
        visibility: visible !important;
    }
}

/* Employee leaves mobile balance cards */
@media (max-width: 720px) {
    .employee-leave-mobile-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .employee-leave-mobile-grid > .employee-leave-mobile-card,
    .employee-leave-mobile-card {
        position: relative !important;
        min-height: 108px !important;
        padding: 13px 10px 11px !important;
        border-radius: 18px !important;
        border: 1px solid #e5e7eb !important;
        background: #ffffff !important;
        box-shadow: 0 10px 24px rgba(15, 23, 42, .06) !important;
        overflow: hidden !important;
    }

    .employee-leave-mobile-card .leave-mobile-code {
        width: 42px;
        height: 32px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 8px;
        border-radius: 12px;
        background: #111827;
        color: #ffffff;
        font-size: 13px;
        font-weight: 850;
        letter-spacing: .04em;
    }

    .employee-leave-mobile-card h1,
    .employee-leave-mobile-card h2,
    .employee-leave-mobile-card h3,
    .employee-leave-mobile-card strong {
        font-size: 18px !important;
        line-height: 1.15 !important;
        font-weight: 800 !important;
    }

    .employee-leave-mobile-card span,
    .employee-leave-mobile-card p {
        font-size: 11px !important;
        line-height: 1.35 !important;
    }

    .employee-leave-mobile-card .cm-muted {
        font-size: 10px !important;
    }
}

@media (max-width: 380px) {
    .employee-leave-mobile-grid {
        gap: 8px !important;
    }

    .employee-leave-mobile-card {
        min-height: 98px !important;
        padding: 11px 9px !important;
    }

    .employee-leave-mobile-card .leave-mobile-code {
        width: 38px;
        height: 30px;
        font-size: 12px;
    }
}

/* Employee leaves mobile icon cards */
@media (max-width: 720px) {
    .employee-leave-mobile-card .leave-mobile-code {
        display: none !important;
    }

    .employee-leave-mobile-card .leave-mobile-icon {
        width: 44px;
        height: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 8px;
        border-radius: 13px;
        background: #111827;
        color: #ffffff;
        overflow: hidden;
    }

    .employee-leave-mobile-card .leave-mobile-icon svg {
        width: 21px;
        height: 21px;
        display: block;
        stroke: currentColor;
        stroke-width: 1.75;
        stroke-linecap: round;
        stroke-linejoin: round;
        fill: none;
    }

    .employee-leave-mobile-card .leave-mobile-icon-lwop svg {
        width: 22px;
        height: 22px;
    }

    .employee-leave-mobile-card .leave-mobile-icon-bd svg {
        width: 23px;
        height: 23px;
    }
}

@media (max-width: 380px) {
    .employee-leave-mobile-card .leave-mobile-icon {
        width: 40px;
        height: 32px;
    }

    .employee-leave-mobile-card .leave-mobile-icon svg {
        width: 19px;
        height: 19px;
    }
}

/* Employee leave mobile icons without background */
@media (max-width: 720px) {
    .employee-leave-mobile-card .leave-mobile-icon {
        width: 34px !important;
        height: 34px !important;
        margin-bottom: 8px !important;
        border-radius: 0 !important;
        background: transparent !important;
        color: #111827 !important;
        box-shadow: none !important;
        border: 0 !important;
    }

    .employee-leave-mobile-card .leave-mobile-icon svg {
        width: 25px !important;
        height: 25px !important;
        stroke: currentColor !important;
        stroke-width: 1.8 !important;
        fill: none !important;
    }

    .employee-leave-mobile-card .leave-mobile-icon-bd svg,
    .employee-leave-mobile-card .leave-mobile-icon-lwop svg {
        width: 26px !important;
        height: 26px !important;
    }
}

@media (max-width: 380px) {
    .employee-leave-mobile-card .leave-mobile-icon {
        width: 30px !important;
        height: 30px !important;
    }

    .employee-leave-mobile-card .leave-mobile-icon svg {
        width: 23px !important;
        height: 23px !important;
    }
}

/* PWA install modal */
.cm-install-pwa-button {
    width: 100%;
    justify-content: center;
    cursor: pointer;
}

.cm-install-pwa-button.is-disabled {
    opacity: .68;
    cursor: not-allowed;
}

.cm-pwa-modal {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(15, 23, 42, .58);
    backdrop-filter: blur(4px);
}

.cm-pwa-modal.is-open {
    display: flex;
}

.cm-pwa-modal-card {
    width: min(420px, 94vw);
    border-radius: 20px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .28);
    padding: 20px;
    position: relative;
}

.cm-pwa-modal-card h2 {
    margin: 0 36px 10px 0;
    color: #111827;
    font-size: 20px;
    font-weight: 800;
}

.cm-pwa-modal-body {
    color: #374151;
    font-size: 14px;
    line-height: 1.55;
}

.cm-pwa-modal-body p {
    margin: 0 0 10px;
}

.cm-pwa-steps {
    margin: 10px 0 0;
    padding-left: 20px;
}

.cm-pwa-steps li {
    margin: 7px 0;
}

.cm-pwa-modal-close {
    position: absolute;
    top: 13px;
    right: 14px;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 999px;
    background: #f3f4f6;
    color: #111827;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.cm-pwa-modal-ok {
    width: 100%;
    margin-top: 14px;
}

/* Employee attendance Check In button polish */
.employee-attendance-actions button[name="type"][value="check_in"],
.employee-attendance-actions .cm-button.check-in,
.employee-attendance-actions .cm-check-in-button,
form[action*="attendance"] button[value="check_in"],
button[data-attendance-action="check_in"],
.cm-attendance-check-in,
.cm-button.check-in {
    background: #6162FE !important;
    border-color: #6162FE !important;
    color: #ffffff !important;
    box-shadow: 0 12px 26px rgba(97, 98, 254, .28) !important;
    transform: translateY(0) scale(1);
    transition:
        transform .16s ease,
        box-shadow .16s ease,
        background-color .16s ease,
        border-color .16s ease,
        opacity .16s ease !important;
}

.employee-attendance-actions button[name="type"][value="check_in"]:hover:not(:disabled),
.employee-attendance-actions .cm-button.check-in:hover:not(:disabled),
.employee-attendance-actions .cm-check-in-button:hover:not(:disabled),
form[action*="attendance"] button[value="check_in"]:hover:not(:disabled),
button[data-attendance-action="check_in"]:hover:not(:disabled),
.cm-attendance-check-in:hover:not(:disabled),
.cm-button.check-in:hover:not(:disabled) {
    background: #5051f4 !important;
    border-color: #5051f4 !important;
    box-shadow: 0 16px 34px rgba(97, 98, 254, .36) !important;
    transform: translateY(-2px) scale(1.01);
}

.employee-attendance-actions button[name="type"][value="check_in"]:active:not(:disabled),
.employee-attendance-actions .cm-button.check-in:active:not(:disabled),
.employee-attendance-actions .cm-check-in-button:active:not(:disabled),
form[action*="attendance"] button[value="check_in"]:active:not(:disabled),
button[data-attendance-action="check_in"]:active:not(:disabled),
.cm-attendance-check-in:active:not(:disabled),
.cm-button.check-in:active:not(:disabled) {
    background: #4849dc !important;
    border-color: #4849dc !important;
    box-shadow: 0 7px 16px rgba(97, 98, 254, .28) !important;
    transform: translateY(1px) scale(.985);
}

.employee-attendance-actions button[name="type"][value="check_in"]:disabled,
.employee-attendance-actions .cm-button.check-in:disabled,
.employee-attendance-actions .cm-check-in-button:disabled,
form[action*="attendance"] button[value="check_in"]:disabled,
button[data-attendance-action="check_in"]:disabled,
.cm-attendance-check-in:disabled,
.cm-button.check-in:disabled {
    background: #9ca3af !important;
    border-color: #9ca3af !important;
    color: #ffffff !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
    opacity: .72 !important;
    transform: none !important;
}

/* Employee portal font weight softening */
.employee-shell .cm-main,
.employee-shell .cm-main p,
.employee-shell .cm-main span,
.employee-shell .cm-main td,
.employee-shell .cm-main th,
.employee-shell .cm-main label,
.employee-shell .cm-main input,
.employee-shell .cm-main select,
.employee-shell .cm-main textarea,
.employee-shell .cm-main button,
.employee-shell .cm-main a {
    font-weight: 400;
}

.employee-shell .cm-main h1,
.employee-shell .cm-main h2,
.employee-shell .cm-main h3,
.employee-shell .cm-main h4,
.employee-shell .cm-topbar h1,
.employee-profile-hero h2,
.employee-avatar-card h2,
.cm-panel-header h2 {
    font-weight: 650 !important;
}

.employee-shell .cm-main strong,
.employee-shell .cm-stat-card strong,
.employee-profile-summary-grid strong,
.profile-definition-list dd,
.profile-mini-row strong,
.profile-activity-item strong,
.dashboard-metric-grid strong,
.dashboard-payroll-total strong {
    font-weight: 600 !important;
}

.employee-shell .cm-main .cm-eyebrow,
.employee-shell .cm-main .cm-stat-card span,
.employee-profile-summary-grid span,
.profile-definition-list dt,
.profile-mini-row span,
.profile-activity-item span,
.employee-leave-mobile-card span,
.employee-leave-mobile-card p,
.payslip-email-status-grid span {
    font-weight: 500 !important;
    letter-spacing: .025em !important;
}

.employee-shell .cm-main .cm-button,
.employee-shell .cm-main .cm-link-button,
.employee-shell .cm-main .cm-status-pill,
.employee-shell .cm-main .workday-chip,
.employee-shell .cm-main .leave-mobile-icon,
.employee-shell .cm-main .employee-avatar {
    font-weight: 600 !important;
}

.employee-shell .cm-table th,
.employee-shell .compact-table th {
    font-weight: 600 !important;
}

.employee-shell .cm-table td,
.employee-shell .compact-table td {
    font-weight: 400 !important;
}

.employee-shell .cm-muted,
.employee-shell .cm-lead,
.employee-shell .cm-card-body p {
    font-weight: 400 !important;
}