: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-radius: 14px;
    padding: 13px 16px;
    background: #ffffff;
    border: 2px solid #374151;
    color: #111827;
    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;
    color: #ffffff;
}

.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;
}

/* HR Admin dashboard real-data layout */
.cm-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin: 14px 0;
}

.cm-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.cm-card-header h2 {
    margin: 0;
}

.cm-card-header p {
    margin: 4px 0 0;
}

.compact-table td strong {
    display: block;
    font-weight: 600;
}

.compact-table td span {
    display: block;
    margin-top: 3px;
    color: #6b7280;
    font-size: 12px;
}

.cm-empty {
    padding: 22px !important;
    text-align: center;
    color: #6b7280;
}

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

/* Admin sidebar main section toggles */
.cm-sidebar .cm-nav-main-toggle {
    margin: 0;
}

.cm-sidebar .cm-nav-main-toggle > summary,
.cm-sidebar .cm-nav-nested-toggle > summary {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 40px;
    padding: 9px 10px;
    border-radius: 12px;
    list-style: none;
    cursor: pointer;
    user-select: none;
    color: #f9fafb;
    font-weight: 600;
    transition: background-color .16s ease, color .16s ease;
}

.cm-sidebar .cm-nav-main-toggle > summary::-webkit-details-marker,
.cm-sidebar .cm-nav-nested-toggle > summary::-webkit-details-marker {
    display: none;
}

.cm-sidebar .cm-nav-main-toggle > summary:hover,
.cm-sidebar .cm-nav-nested-toggle > summary:hover,
.cm-sidebar .cm-nav-main-toggle > summary.active,
.cm-sidebar .cm-nav-nested-toggle > summary.active {
    background: rgba(255, 255, 255, .09);
    color: #ffffff;
}

.cm-sidebar .cm-nav-chevron {
    margin-left: auto;
    color: #cbd5e1;
    font-size: 15px;
    line-height: 1;
    transform: rotate(0deg);
    transition: transform .16s ease, color .16s ease;
}

.cm-sidebar details[open] > summary .cm-nav-chevron {
    transform: rotate(90deg);
    color: #ffffff;
}

.cm-sidebar .cm-nav-submenu {
    display: grid;
    gap: 4px;
    margin: 7px 0 8px 17px;
    padding-left: 13px;
    border-left: 1px solid rgba(148, 163, 184, .28);
}

.cm-sidebar .cm-nav-submenu a {
    min-height: 38px;
    padding: 8px 10px;
    border-radius: 12px;
    color: #d1d5db;
    font-size: 13px;
}

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

.cm-sidebar .cm-nav-nested-toggle {
    margin: 0;
}

.cm-sidebar .cm-nav-nested-toggle > summary {
    min-height: 38px;
    padding: 8px 10px;
    color: #d1d5db;
    font-size: 13px;
    font-weight: 600;
}

.cm-sidebar .cm-nav-submenu-nested {
    margin: 5px 0 5px 14px;
    padding-left: 12px;
}

.cm-sidebar .cm-nav-submenu-nested a {
    min-height: 32px;
    padding: 7px 9px;
    font-size: 12.5px;
}

.cm-sidebar .cm-nav-submenu .cm-nav-icon {
    width: 24px !important;
    min-width: 24px !important;
    height: 24px !important;
    flex: 0 0 24px !important;
}

.cm-sidebar .cm-nav-submenu .cm-svg-icon svg {
    width: 18px !important;
    height: 18px !important;
}

/* HRIS security, linking, rules, payroll preview, and audit UI */
.cm-settings-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    align-items: end;
}

.cm-json-preview {
    max-width: 320px;
    max-height: 130px;
    overflow: auto;
    margin: 0;
    padding: 8px;
    border-radius: 10px;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    color: #374151;
    font-size: 11px;
    white-space: pre-wrap;
}

.cm-checkbox-row {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 8px;
    color: #374151;
    font-size: 13px;
}

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

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

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

/* Compact button padding and lighter button text */
.cm-button,
.cm-link-button,
.cm-sidebar .cm-nav a,
.cm-sidebar .cm-nav button,
.cm-sidebar .cm-nav summary,
button,
input[type="submit"],
input[type="button"] {
    font-weight: 500 !important;
}

.cm-button,
.cm-link-button {
    padding: 8px 12px !important;
    min-height: 36px !important;
    line-height: 1.2 !important;
    border-radius: 10px !important;
    font-size: 13px !important;
}

.cm-button.small,
.cm-link-button.small,
.cm-table .cm-button,
.cm-table .cm-link-button,
.compact-table .cm-button,
.compact-table .cm-link-button {
    padding: 6px 10px !important;
    min-height: 32px !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
}

.cm-sidebar .cm-nav a,
.cm-sidebar .cm-nav button,
.cm-sidebar .cm-nav summary {
    font-weight: 500 !important;
}

.cm-sidebar .cm-nav a,
.cm-sidebar .cm-nav button {
    min-height: 36px !important;
    padding: 8px 10px !important;
}

.cm-sidebar .cm-nav-main-toggle > summary,
.cm-sidebar .cm-nav-nested-toggle > summary {
    min-height: 36px !important;
    padding: 8px 10px !important;
    font-weight: 500 !important;
}

.cm-sidebar .cm-nav-submenu a {
    min-height: 34px !important;
    padding: 7px 9px !important;
    font-weight: 500 !important;
}

.cm-sidebar .cm-nav-submenu-nested a {
    min-height: 30px !important;
    padding: 6px 8px !important;
    font-weight: 500 !important;
}

.cm-page-actions .cm-button,
.cm-card-header .cm-link-button,
.cm-filter-form .cm-button,
.cm-form .cm-button {
    padding: 8px 12px !important;
    min-height: 36px !important;
    font-weight: 500 !important;
}

.cm-link-button.danger,
.cm-button.danger,
.cm-link-button.secondary,
.cm-button.secondary {
    font-weight: 500 !important;
}

/* Employee attendance automatic GPS capture */
.cm-gps-capture-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 12px 0 14px;
    padding: 12px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 10px 26px rgba(15, 23, 42, .06);
}

.cm-gps-capture-card strong {
    display: block;
    color: #111827;
    font-weight: 600;
    margin-bottom: 3px;
}

.cm-gps-capture-card p {
    margin: 0;
    color: #4b5563;
    font-size: 13px;
    line-height: 1.45;
    font-weight: 400;
}

.cm-gps-capture-card.is-capturing {
    border-color: rgba(97, 98, 254, .28);
    background: #f8f8ff;
}

.cm-gps-capture-card.is-success {
    border-color: rgba(22, 163, 74, .28);
    background: #f0fdf4;
}

.cm-gps-capture-card.is-error {
    border-color: rgba(220, 38, 38, .28);
    background: #fef2f2;
}

.cm-gps-spinner {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    border-radius: 999px;
    border: 3px solid rgba(97, 98, 254, .18);
    border-top-color: #6162FE;
    animation: cmGpsSpin .82s linear infinite;
}

.cm-gps-icon {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: #111827;
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
}

.cm-gps-capture-card.is-success .cm-gps-icon {
    background: #16a34a;
}

.cm-gps-capture-card.is-error .cm-gps-icon {
    background: #dc2626;
}

.cm-gps-retry-button {
    width: auto !important;
    margin-top: 9px;
    padding: 7px 10px !important;
    min-height: 32px !important;
    font-size: 12.5px !important;
}

.cm-gps-disabled {
    opacity: .64 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    transform: none !important;
}

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

@media (max-width: 640px) {
    .cm-gps-capture-card {
        margin: 10px 0 12px;
        padding: 11px 12px;
        border-radius: 14px;
    }

    .cm-gps-capture-card p {
        font-size: 12.5px;
    }
}

/* Center overlay GPS capture update */
.cm-gps-overlay {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(15, 23, 42, .55);
    backdrop-filter: blur(4px);
}

.cm-gps-overlay.is-visible {
    display: flex;
}

.cm-gps-overlay-card {
    width: min(360px, 92vw);
    display: grid;
    justify-items: center;
    gap: 10px;
    padding: 24px 22px;
    border-radius: 22px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .26);
    text-align: center;
}

.cm-gps-overlay-card h2 {
    margin: 0;
    color: #111827;
    font-size: 18px;
    line-height: 1.25;
    font-weight: 600;
}

.cm-gps-overlay-card p {
    margin: 0;
    color: #4b5563;
    font-size: 13px;
    line-height: 1.45;
    font-weight: 400;
}

.cm-gps-overlay-spinner {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 4px solid rgba(97, 98, 254, .16);
    border-top-color: #6162FE;
    animation: cmGpsSpin .82s linear infinite;
}

.cm-gps-overlay-open {
    overflow: hidden;
}

.cm-gps-capture-card.is-success {
    animation: cmGpsSuccessPulse .24s ease-out;
}

@keyframes cmGpsSuccessPulse {
    from {
        transform: scale(.99);
        opacity: .85;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* Employee attendance icons */
.cm-attendance-iconized {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.cm-attendance-inline-icon {
    width: 17px;
    height: 17px;
    min-width: 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: currentColor;
}

.cm-attendance-inline-icon svg {
    width: 17px;
    height: 17px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.cm-attendance-inline-icon.is-title {
    width: 28px;
    height: 28px;
    min-width: 28px;
    display: inline-flex;
    border-radius: 12px;
    background: #111827;
    color: #ffffff;
    margin-right: 1px;
}

.cm-attendance-inline-icon.is-title svg {
    width: 18px;
    height: 18px;
}

.cm-button .cm-attendance-inline-icon,
.cm-link-button .cm-attendance-inline-icon,
button .cm-attendance-inline-icon {
    width: 16px;
    height: 16px;
    min-width: 16px;
}

.cm-button .cm-attendance-inline-icon svg,
.cm-link-button .cm-attendance-inline-icon svg,
button .cm-attendance-inline-icon svg {
    width: 16px;
    height: 16px;
}

.cm-table th.cm-attendance-iconized,
.compact-table th.cm-attendance-iconized {
    justify-content: flex-start;
    gap: 6px;
}

.cm-field label.cm-attendance-iconized {
    display: inline-flex;
    gap: 6px;
}

@media (max-width: 640px) {
    .cm-attendance-inline-icon.is-title {
        width: 26px;
        height: 26px;
        min-width: 26px;
        border-radius: 10px;
    }

    .cm-attendance-inline-icon.is-title svg {
        width: 17px;
        height: 17px;
    }
}

/* Larger employee attendance Check In / Check Out buttons */
.employee-shell form[action*="attendance"] button,
.employee-shell form[action*="attendance"] input[type="submit"],
.employee-shell button[data-attendance-action="check_in"],
.employee-shell button[data-attendance-action="check_out"],
.employee-shell button[value="check_in"],
.employee-shell button[value="check_out"],
.employee-shell .cm-attendance-check-in,
.employee-shell .cm-attendance-check-out,
.employee-shell .cm-button.check-in,
.employee-shell .cm-button.check-out {
    min-height: 48px !important;
    padding: 13px 18px !important;
    border-radius: 14px !important;
    font-size: 15.5px !important;
    font-weight: 600 !important;
    letter-spacing: .005em !important;
    gap: 9px !important;
}

.employee-shell form[action*="attendance"] button .cm-attendance-inline-icon,
.employee-shell button[data-attendance-action="check_in"] .cm-attendance-inline-icon,
.employee-shell button[data-attendance-action="check_out"] .cm-attendance-inline-icon,
.employee-shell button[value="check_in"] .cm-attendance-inline-icon,
.employee-shell button[value="check_out"] .cm-attendance-inline-icon,
.employee-shell .cm-attendance-check-in .cm-attendance-inline-icon,
.employee-shell .cm-attendance-check-out .cm-attendance-inline-icon,
.employee-shell .cm-button.check-in .cm-attendance-inline-icon,
.employee-shell .cm-button.check-out .cm-attendance-inline-icon {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
}

.employee-shell form[action*="attendance"] button .cm-attendance-inline-icon svg,
.employee-shell button[data-attendance-action="check_in"] .cm-attendance-inline-icon svg,
.employee-shell button[data-attendance-action="check_out"] .cm-attendance-inline-icon svg,
.employee-shell button[value="check_in"] .cm-attendance-inline-icon svg,
.employee-shell button[value="check_out"] .cm-attendance-inline-icon svg,
.employee-shell .cm-attendance-check-in .cm-attendance-inline-icon svg,
.employee-shell .cm-attendance-check-out .cm-attendance-inline-icon svg,
.employee-shell .cm-button.check-in .cm-attendance-inline-icon svg,
.employee-shell .cm-button.check-out .cm-attendance-inline-icon svg {
    width: 20px !important;
    height: 20px !important;
    stroke-width: 2 !important;
}

.employee-shell form[action*="attendance"] button:hover:not(:disabled),
.employee-shell button[data-attendance-action="check_in"]:hover:not(:disabled),
.employee-shell button[data-attendance-action="check_out"]:hover:not(:disabled),
.employee-shell button[value="check_in"]:hover:not(:disabled),
.employee-shell button[value="check_out"]:hover:not(:disabled),
.employee-shell .cm-attendance-check-in:hover:not(:disabled),
.employee-shell .cm-attendance-check-out:hover:not(:disabled),
.employee-shell .cm-button.check-in:hover:not(:disabled),
.employee-shell .cm-button.check-out:hover:not(:disabled) {
    transform: translateY(-2px) scale(1.01);
}

.employee-shell form[action*="attendance"] button:active:not(:disabled),
.employee-shell button[data-attendance-action="check_in"]:active:not(:disabled),
.employee-shell button[data-attendance-action="check_out"]:active:not(:disabled),
.employee-shell button[value="check_in"]:active:not(:disabled),
.employee-shell button[value="check_out"]:active:not(:disabled),
.employee-shell .cm-attendance-check-in:active:not(:disabled),
.employee-shell .cm-attendance-check-out:active:not(:disabled),
.employee-shell .cm-button.check-in:active:not(:disabled),
.employee-shell .cm-button.check-out:active:not(:disabled) {
    transform: translateY(1px) scale(.985);
}

@media (max-width: 640px) {
    .employee-shell form[action*="attendance"] button,
    .employee-shell form[action*="attendance"] input[type="submit"],
    .employee-shell button[data-attendance-action="check_in"],
    .employee-shell button[data-attendance-action="check_out"],
    .employee-shell button[value="check_in"],
    .employee-shell button[value="check_out"],
    .employee-shell .cm-attendance-check-in,
    .employee-shell .cm-attendance-check-out,
    .employee-shell .cm-button.check-in,
    .employee-shell .cm-button.check-out {
        width: 100% !important;
        min-height: 52px !important;
        padding: 14px 18px !important;
        font-size: 16px !important;
    }
}

/* Active Check Out button color */
.employee-shell form[action*="attendance"] button[value="check_out"]:not(:disabled),
.employee-shell button[data-attendance-action="check_out"]:not(:disabled),
.employee-shell .cm-attendance-check-out:not(:disabled),
.employee-shell .cm-button.check-out:not(:disabled),
.employee-shell button[name="type"][value="check_out"]:not(:disabled) {
    background: #f97316 !important;
    border-color: #f97316 !important;
    color: #ffffff !important;
    box-shadow: 0 12px 26px rgba(249, 115, 22, .28) !important;
}

.employee-shell form[action*="attendance"] button[value="check_out"]:hover:not(:disabled),
.employee-shell button[data-attendance-action="check_out"]:hover:not(:disabled),
.employee-shell .cm-attendance-check-out:hover:not(:disabled),
.employee-shell .cm-button.check-out:hover:not(:disabled),
.employee-shell button[name="type"][value="check_out"]:hover:not(:disabled) {
    background: #ea580c !important;
    border-color: #ea580c !important;
    box-shadow: 0 16px 34px rgba(249, 115, 22, .36) !important;
}

.employee-shell form[action*="attendance"] button[value="check_out"]:active:not(:disabled),
.employee-shell button[data-attendance-action="check_out"]:active:not(:disabled),
.employee-shell .cm-attendance-check-out:active:not(:disabled),
.employee-shell .cm-button.check-out:active:not(:disabled),
.employee-shell button[name="type"][value="check_out"]:active:not(:disabled) {
    background: #c2410c !important;
    border-color: #c2410c !important;
    box-shadow: 0 7px 16px rgba(249, 115, 22, .28) !important;
}

.employee-shell form[action*="attendance"] button[value="check_out"]:disabled,
.employee-shell button[data-attendance-action="check_out"]:disabled,
.employee-shell .cm-attendance-check-out:disabled,
.employee-shell .cm-button.check-out:disabled,
.employee-shell button[name="type"][value="check_out"]:disabled {
    background: #9ca3af !important;
    border-color: #9ca3af !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

/* Employee attendance history cleanup */
.cm-attendance-history-panel {
    overflow: hidden;
}

.cm-attendance-history-panel h2,
.cm-attendance-history-panel h3,
.cm-attendance-history-panel strong {
    font-weight: 600;
}

.cm-attendance-history-wrap {
    overflow-x: auto;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    background: #ffffff;
}

.cm-attendance-history-table {
    width: 100%;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    min-width: 760px;
    overflow: hidden;
}

.cm-attendance-history-table thead th {
    padding: 12px 14px !important;
    background: #f8fafc !important;
    color: #374151 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    border-bottom: 1px solid #e5e7eb !important;
    white-space: nowrap !important;
}

.cm-attendance-history-table tbody td {
    padding: 13px 14px !important;
    color: #111827 !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    vertical-align: middle !important;
    border-bottom: 1px solid #edf2f7 !important;
}

.cm-attendance-history-table tbody tr:last-child td {
    border-bottom: 0 !important;
}

.cm-attendance-history-table tbody tr:hover td {
    background: #f9fafb !important;
}

.cm-attendance-history-badge,
.cm-attendance-source-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .03em;
    white-space: nowrap;
}

.cm-attendance-history-badge.is-in {
    background: rgba(97, 98, 254, .10);
    color: #4f46e5;
    border: 1px solid rgba(97, 98, 254, .22);
}

.cm-attendance-history-badge.is-out {
    background: rgba(249, 115, 22, .10);
    color: #c2410c;
    border: 1px solid rgba(249, 115, 22, .22);
}

.cm-attendance-source-chip {
    background: #f3f4f6;
    color: #374151;
    border: 1px solid #e5e7eb;
}

.cm-attendance-history-table td:last-child {
    max-width: 320px;
    color: #374151 !important;
}

@media (max-width: 640px) {
    .cm-attendance-history-wrap {
        border-radius: 14px;
    }

    .cm-attendance-history-table {
        min-width: 620px;
    }

    .cm-attendance-history-table thead th {
        padding: 10px 11px !important;
        font-size: 10.5px !important;
    }

    .cm-attendance-history-table tbody td {
        padding: 11px !important;
        font-size: 12.5px !important;
    }

    .cm-attendance-history-badge,
    .cm-attendance-source-chip {
        min-height: 22px;
        padding: 3px 8px;
        font-size: 11px;
    }
}

/* Attendance history without Source, Location, and Accuracy columns */
.cm-attendance-history-table {
    min-width: 560px !important;
}

@media (max-width: 640px) {
    .cm-attendance-history-table {
        min-width: 520px !important;
    }
}

/* Fix Attendance History column header alignment */
.cm-attendance-history-table th.cm-attendance-iconized {
    display: table-cell !important;
}

.cm-attendance-history-table th .cm-attendance-inline-icon {
    display: inline-flex !important;
    vertical-align: -3px !important;
    margin-right: 6px !important;
}

.cm-attendance-history-table th,
.cm-attendance-history-table td {
    text-align: left !important;
}

.cm-attendance-history-table th:nth-child(1),
.cm-attendance-history-table td:nth-child(1) {
    width: 24% !important;
}

.cm-attendance-history-table th:nth-child(2),
.cm-attendance-history-table td:nth-child(2) {
    width: 18% !important;
}

.cm-attendance-history-table th:nth-child(3),
.cm-attendance-history-table td:nth-child(3) {
    width: 24% !important;
}

.cm-attendance-history-table th:nth-child(4),
.cm-attendance-history-table td:nth-child(4) {
    width: 34% !important;
}

.cm-attendance-history-table .cm-attendance-history-badge {
    justify-content: flex-start !important;
    min-width: 118px !important;
}

.cm-attendance-history-table td:nth-child(3) {
    white-space: nowrap !important;
}

.cm-attendance-history-table td:nth-child(4) {
    color: #374151 !important;
    white-space: normal !important;
    word-break: break-word !important;
}

@media (max-width: 640px) {
    .cm-attendance-history-table {
        min-width: 560px !important;
    }

    .cm-attendance-history-table th:nth-child(1),
    .cm-attendance-history-table td:nth-child(1) {
        width: 25% !important;
    }

    .cm-attendance-history-table th:nth-child(2),
    .cm-attendance-history-table td:nth-child(2) {
        width: 18% !important;
    }

    .cm-attendance-history-table th:nth-child(3),
    .cm-attendance-history-table td:nth-child(3) {
        width: 25% !important;
    }

    .cm-attendance-history-table th:nth-child(4),
    .cm-attendance-history-table td:nth-child(4) {
        width: 32% !important;
    }
}

/* Employee mobile topbar menu icon and brand cleanup */
.employee-shell .cm-mobile-menu-button-iconized,
.cm-mobile-menu-button-iconized {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
}

.employee-shell .cm-mobile-menu-icon,
.cm-mobile-menu-icon {
    width: 18px;
    height: 18px;
    min-width: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: currentColor;
}

.employee-shell .cm-mobile-menu-icon svg,
.cm-mobile-menu-icon svg {
    width: 18px;
    height: 18px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.1;
    stroke-linecap: round;
}

.employee-shell .cm-mobile-topbar .cm-brand,
.employee-shell .cm-employee-topbar .cm-brand,
.employee-shell .cm-page-topbar .cm-brand {
    display: none !important;
}

@media (max-width: 768px) {
    .employee-shell .cm-topbar,
    .employee-shell .cm-mobile-topbar,
    .employee-shell .cm-employee-topbar,
    .employee-shell .cm-page-topbar {
        justify-content: flex-start !important;
    }
}

/* Employee profile two-column layout cleanup */
body.cm-employee-profile-polished .cm-employee-profile-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 12px 0 16px;
}

body.cm-employee-profile-polished .cm-employee-profile-info-card {
    margin: 0 !important;
    min-height: 92px;
    padding: 16px 18px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .04) !important;
}

body.cm-employee-profile-polished .cm-employee-profile-info-card:hover {
    border-color: #d1d5db !important;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .07) !important;
}

body.cm-employee-profile-polished .cm-employee-profile-info-card h1,
body.cm-employee-profile-polished .cm-employee-profile-info-card h2,
body.cm-employee-profile-polished .cm-employee-profile-info-card h3,
body.cm-employee-profile-polished .cm-employee-profile-info-card h4,
body.cm-employee-profile-polished .cm-employee-profile-info-card strong {
    font-weight: 600 !important;
}

body.cm-employee-profile-polished .cm-employee-profile-info-card p,
body.cm-employee-profile-polished .cm-employee-profile-info-card span,
body.cm-employee-profile-polished .cm-employee-profile-info-card div {
    line-height: 1.35;
}

body.cm-employee-profile-polished .cm-employee-profile-info-card > :first-child,
body.cm-employee-profile-polished .cm-employee-profile-info-card .cm-eyebrow,
body.cm-employee-profile-polished .cm-employee-profile-info-card label {
    color: #64748b !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: .07em !important;
    text-transform: uppercase !important;
}

body.cm-employee-profile-polished .cm-employee-profile-info-card > :nth-child(2),
body.cm-employee-profile-polished .cm-employee-profile-info-card strong,
body.cm-employee-profile-polished .cm-employee-profile-info-card h3 {
    color: #111827 !important;
    font-size: 15px !important;
}

@media (max-width: 640px) {
    body.cm-employee-profile-polished .cm-employee-profile-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin-top: 10px;
    }

    body.cm-employee-profile-polished .cm-employee-profile-info-card {
        min-height: 86px;
        padding: 13px 14px !important;
        border-radius: 14px !important;
    }

    body.cm-employee-profile-polished .cm-employee-profile-info-card > :nth-child(2),
    body.cm-employee-profile-polished .cm-employee-profile-info-card strong,
    body.cm-employee-profile-polished .cm-employee-profile-info-card h3 {
        font-size: 14px !important;
    }
}

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

/* Employee profile limited two-column cards */
body.cm-employee-profile-polished #cmEmployeeProfileGrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 12px 0 16px;
}

body.cm-employee-profile-polished #cmEmployeeProfileGrid .cm-employee-profile-info-card {
    margin: 0 !important;
}

@media (max-width: 640px) {
    body.cm-employee-profile-polished #cmEmployeeProfileGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
}

@media (max-width: 390px) {
    body.cm-employee-profile-polished #cmEmployeeProfileGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Keep selected employee profile cards in two columns on mobile */
body.cm-employee-profile-polished #cmEmployeeProfileGrid,
.employee-shell body.cm-employee-profile-polished #cmEmployeeProfileGrid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

body.cm-employee-profile-polished #cmEmployeeProfileGrid .cm-employee-profile-info-card {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
}

@media (max-width: 640px) {
    body.cm-employee-profile-polished #cmEmployeeProfileGrid,
    .employee-shell body.cm-employee-profile-polished #cmEmployeeProfileGrid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    body.cm-employee-profile-polished #cmEmployeeProfileGrid .cm-employee-profile-info-card {
        min-height: 82px !important;
        padding: 12px 12px !important;
        border-radius: 14px !important;
    }
}

@media (max-width: 390px) {
    body.cm-employee-profile-polished #cmEmployeeProfileGrid,
    .employee-shell body.cm-employee-profile-polished #cmEmployeeProfileGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body.cm-employee-profile-polished #cmEmployeeProfileGrid .cm-employee-profile-info-card {
        padding: 11px 10px !important;
    }
}

/* Payroll salary setup dynamic income and deduction layout */
.salary-setup-layout {
    display: grid;
    gap: 14px;
}

.salary-form-section {
    padding: 16px;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .04);
}

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

.salary-section-header h2 {
    margin: 0;
    color: #111827;
    font-size: 16px;
    font-weight: 600;
}

.salary-section-header p {
    margin: 4px 0 0;
    color: #6b7280;
    font-size: 13px;
    font-weight: 400;
}

.salary-dynamic-list {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}

.salary-dynamic-row {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(120px, .7fr) auto;
    gap: 10px;
    align-items: end;
    padding: 12px;
    border: 1px dashed #d1d5db;
    border-radius: 14px;
    background: #f9fafb;
}

.income-section {
    border-left: 4px solid #6162FE;
}

.deduction-section {
    border-left: 4px solid #f97316;
}

.salary-add-row {
    white-space: nowrap;
}

@media (max-width: 780px) {
    .salary-section-header {
        display: grid;
    }

    .salary-dynamic-row {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .salary-add-row,
    .salary-remove-row {
        width: 100%;
        justify-content: center;
    }
}

/* Dynamic salary setup items */
.salary-setup-layout {
    display: grid;
    gap: 14px;
}

.salary-form-section {
    padding: 16px;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .04);
}

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

.salary-section-header h2 {
    margin: 0;
    color: #111827;
    font-size: 16px;
    font-weight: 600;
}

.salary-section-header p {
    margin: 4px 0 0;
    color: #6b7280;
    font-size: 13px;
    font-weight: 400;
}

.salary-dynamic-list {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}

.salary-dynamic-row {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(120px, .7fr) auto;
    gap: 10px;
    align-items: end;
    padding: 12px;
    border: 1px dashed #d1d5db;
    border-radius: 14px;
    background: #f9fafb;
}

.income-section {
    border-left: 4px solid #6162FE;
}

.deduction-section {
    border-left: 4px solid #f97316;
}

.salary-add-row {
    white-space: nowrap;
}

@media (max-width: 780px) {
    .salary-section-header {
        display: grid;
    }

    .salary-dynamic-row {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .salary-add-row,
    .salary-remove-row {
        width: 100%;
        justify-content: center;
    }
}

/* Payroll item edit dynamic income and deduction breakdowns */
.payroll-dynamic-wrap {
    display: grid;
    gap: 14px;
    margin: 14px 0;
}

.payroll-dynamic-section {
    padding: 16px;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .04);
}

.payroll-dynamic-list {
    display: grid;
    gap: 10px;
}

.payroll-dynamic-row {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(120px, .7fr) auto;
    gap: 10px;
    align-items: end;
    padding: 12px;
    border: 1px dashed #d1d5db;
    border-radius: 14px;
    background: #f9fafb;
}

.cm-hidden-payroll-other-field {
    display: none !important;
}

@media (max-width: 780px) {
    .payroll-dynamic-row {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .payroll-add-row,
    .payroll-remove-row {
        width: 100%;
        justify-content: center;
    }
}

/* Payroll item edit modern layout */
.payroll-item-edit-polished .cm-main > form,
.payroll-item-edit-polished form {
    display: block;
}

.payroll-edit-modern-layout {
    display: grid;
    gap: 14px;
    margin-top: 14px;
}

.payroll-edit-section {
    padding: 16px;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .04);
}

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

.payroll-edit-section .cm-field,
.payroll-edit-section .form-group {
    margin: 0 !important;
}

.payroll-edit-section .cm-field.full,
.payroll-edit-section .form-group.full {
    grid-column: 1 / -1;
}

.payroll-edit-section input,
.payroll-edit-section select,
.payroll-edit-section textarea {
    width: 100%;
}

.payroll-edit-section.summary-section {
    border-left: 4px solid #111827;
}

.payroll-edit-section.income-section {
    border-left: 4px solid #6162FE;
}

.payroll-edit-section.deduction-section {
    border-left: 4px solid #f97316;
}

.payroll-edit-section.review-section {
    border-left: 4px solid #64748b;
}

.payroll-edit-section.other-section {
    border-left: 4px solid #94a3b8;
}

.payroll-edit-dynamic-inner {
    margin-top: 14px;
    padding: 14px;
    border-radius: 16px;
    background: #f9fafb;
    border: 1px dashed #d1d5db;
    box-shadow: none;
}

.payroll-edit-dynamic-inner .salary-section-header {
    margin-bottom: 12px;
}

.payroll-edit-dynamic-inner .payroll-dynamic-list {
    margin-top: 0;
}

.payroll-edit-top-action {
    min-height: 36px !important;
    padding: 8px 12px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}

.payroll-item-edit-polished .compact-sticky,
.payroll-item-edit-polished .sticky-actions,
.payroll-item-edit-polished .cm-form-actions {
    margin-top: 14px;
}

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

@media (max-width: 720px) {
    .payroll-edit-section-grid {
        grid-template-columns: 1fr;
    }

    .payroll-edit-section {
        padding: 14px;
        border-radius: 16px;
    }

    .payroll-edit-modern-layout {
        gap: 12px;
    }
}

/* Disable experimental payroll item edit DOM layout polish */
.payroll-item-edit-polished .payroll-edit-modern-layout {
    display: contents !important;
}

.payroll-item-edit-polished .payroll-edit-section {
    all: unset;
}

.payroll-item-edit-polished .payroll-edit-section-grid {
    display: contents !important;
}

/* Payroll item edit UX v3 - stable professional layout */
.payroll-item-edit-ux-v3 .payroll-review-edit-card {
    padding: 18px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .05) !important;
}

.payroll-item-edit-ux-v3 .payroll-edit-inline-heading {
    grid-column: 1 / -1;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #edf2f7;
}

.payroll-item-edit-ux-v3 .payroll-edit-inline-heading h2 {
    margin: 0;
    color: #111827;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -.01em;
}

.payroll-item-edit-ux-v3 .payroll-edit-inline-heading p {
    margin: 4px 0 0;
    color: #6b7280;
    font-size: 13px;
    line-height: 1.45;
}

.payroll-item-edit-ux-v3 .cm-form-grid,
.payroll-item-edit-ux-v3 .payroll-review-edit-card > .cm-form-grid,
.payroll-item-edit-ux-v3 .payroll-review-edit-card {
    gap: 12px !important;
}

.payroll-item-edit-ux-v3 .payroll-review-edit-card .cm-field,
.payroll-item-edit-ux-v3 .payroll-review-edit-card .form-group {
    margin: 0 !important;
}

.payroll-item-edit-ux-v3 .payroll-review-edit-card label {
    margin-bottom: 6px !important;
    color: #334155 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: .07em !important;
    text-transform: uppercase !important;
}

.payroll-item-edit-ux-v3 .payroll-review-edit-card input,
.payroll-item-edit-ux-v3 .payroll-review-edit-card select,
.payroll-item-edit-ux-v3 .payroll-review-edit-card textarea {
    min-height: 40px !important;
    border-radius: 11px !important;
    border-color: #d1d5db !important;
    background: #ffffff !important;
    font-size: 13.5px !important;
    font-weight: 400 !important;
}

.payroll-item-edit-ux-v3 .payroll-review-edit-card input:focus,
.payroll-item-edit-ux-v3 .payroll-review-edit-card select:focus,
.payroll-item-edit-ux-v3 .payroll-review-edit-card textarea:focus {
    border-color: #6162FE !important;
    box-shadow: 0 0 0 3px rgba(97, 98, 254, .12) !important;
}

.payroll-item-edit-ux-v3 .payroll-review-summary-field {
    padding: 10px !important;
    border: 1px solid #edf2f7;
    border-radius: 14px;
    background: #f8fafc;
}

.payroll-item-edit-ux-v3 .payroll-review-income-field {
    padding: 10px !important;
    border: 1px solid rgba(97, 98, 254, .14);
    border-radius: 14px;
    background: rgba(97, 98, 254, .035);
}

.payroll-item-edit-ux-v3 .payroll-review-deduction-field {
    padding: 10px !important;
    border: 1px solid rgba(249, 115, 22, .16);
    border-radius: 14px;
    background: rgba(249, 115, 22, .035);
}

.payroll-item-edit-ux-v3 .payroll-review-full-field,
.payroll-item-edit-ux-v3 .payroll-review-edit-card .cm-field:has(textarea),
.payroll-item-edit-ux-v3 .payroll-review-edit-card .form-group:has(textarea) {
    grid-column: 1 / -1 !important;
}

.payroll-item-edit-ux-v3 .payroll-review-edit-card textarea {
    min-height: 86px !important;
    resize: vertical;
}

.payroll-item-edit-ux-v3 #payrollDynamicBreakdownWrap,
.payroll-item-edit-ux-v3 .payroll-review-dynamic-wrap {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
    width: 100% !important;
    margin: 4px 0 2px !important;
}

.payroll-item-edit-ux-v3 .payroll-review-dynamic-section,
.payroll-item-edit-ux-v3 #payrollDynamicBreakdownWrap > section {
    margin: 0 !important;
    padding: 15px !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

.payroll-item-edit-ux-v3 #payrollDynamicBreakdownWrap > .income-section {
    border: 1px solid rgba(97, 98, 254, .18) !important;
    border-left: 4px solid #6162FE !important;
}

.payroll-item-edit-ux-v3 #payrollDynamicBreakdownWrap > .deduction-section {
    border: 1px solid rgba(249, 115, 22, .18) !important;
    border-left: 4px solid #f97316 !important;
}

.payroll-item-edit-ux-v3 #payrollDynamicBreakdownWrap .salary-section-header {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-bottom: 12px !important;
}

.payroll-item-edit-ux-v3 #payrollDynamicBreakdownWrap .salary-section-header h2 {
    margin: 0 !important;
    color: #111827 !important;
    font-size: 15.5px !important;
    font-weight: 600 !important;
}

.payroll-item-edit-ux-v3 #payrollDynamicBreakdownWrap .salary-section-header p {
    max-width: 420px;
    margin: 3px 0 0 !important;
    color: #64748b !important;
    font-size: 12.5px !important;
    line-height: 1.35 !important;
}

.payroll-item-edit-ux-v3 .payroll-dynamic-row {
    grid-template-columns: minmax(0, 1.2fr) minmax(110px, .55fr) auto !important;
    gap: 9px !important;
    padding: 10px !important;
    border-radius: 13px !important;
    background: #f8fafc !important;
}

.payroll-item-edit-ux-v3 .payroll-add-row,
.payroll-item-edit-ux-v3 .payroll-remove-row {
    min-height: 36px !important;
    padding: 8px 11px !important;
    border-radius: 10px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
}

.payroll-item-edit-ux-v3 .payroll-remove-row {
    background: #b91c1c !important;
    border-color: #b91c1c !important;
    color: #ffffff !important;
}

.payroll-item-edit-ux-v3 .cm-hidden-payroll-other-field {
    display: none !important;
}

.payroll-item-edit-ux-v3 .payroll-review-edit-actions,
.payroll-item-edit-ux-v3 .cm-form-actions.payroll-review-edit-actions,
.payroll-item-edit-ux-v3 .sticky-actions.payroll-review-edit-actions {
    margin-top: 14px !important;
    padding: 12px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .05) !important;
}

@media (max-width: 1180px) {
    .payroll-item-edit-ux-v3 #payrollDynamicBreakdownWrap,
    .payroll-item-edit-ux-v3 .payroll-review-dynamic-wrap {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 760px) {
    .payroll-item-edit-ux-v3 .payroll-review-edit-card {
        padding: 14px !important;
        border-radius: 16px !important;
    }

    .payroll-item-edit-ux-v3 #payrollDynamicBreakdownWrap .salary-section-header {
        display: grid !important;
    }

    .payroll-item-edit-ux-v3 .payroll-dynamic-row {
        grid-template-columns: 1fr !important;
    }

    .payroll-item-edit-ux-v3 .payroll-add-row,
    .payroll-item-edit-ux-v3 .payroll-remove-row {
        width: 100% !important;
        justify-content: center !important;
    }
}

/* Fix payroll item UX heading accidentally injected into admin sidebar */
.cm-sidebar .payroll-edit-inline-heading {
    display: none !important;
}

.cm-sidebar.payroll-review-edit-card,
.cm-sidebar .payroll-review-edit-card,
.cm-sidebar .payroll-review-edit-form {
    padding: initial !important;
    border: initial !important;
    border-radius: initial !important;
    background: initial !important;
    box-shadow: initial !important;
}

/* Payroll item regenerate warning modal */
.cm-payroll-regenerate-modal {
    position: fixed;
    top: 18px;
    left: 0;
    right: 0;
    z-index: 99999;
    display: flex;
    justify-content: center;
    padding: 0 16px;
    pointer-events: auto;
}

.cm-payroll-regenerate-card {
    width: min(620px, calc(100vw - 32px));
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 16px;
    border: 1px solid rgba(249, 115, 22, .28);
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 22px 55px rgba(15, 23, 42, .22);
    animation: cmPayrollRegenerateDrop .18s ease-out;
}

.cm-payroll-regenerate-icon {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: rgba(249, 115, 22, .11);
    color: #ea580c;
}

.cm-payroll-regenerate-icon svg {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.cm-payroll-regenerate-content h2 {
    margin: 0;
    color: #111827;
    font-size: 16px;
    font-weight: 650;
    letter-spacing: -.01em;
}

.cm-payroll-regenerate-content p {
    margin: 4px 0 0;
    color: #475569;
    font-size: 13px;
    line-height: 1.45;
}

.cm-payroll-regenerate-ok {
    min-height: 38px;
    padding: 9px 18px;
    border: 0;
    border-radius: 11px;
    background: #111827;
    color: #ffffff;
    font-size: 13px;
    font-weight: 650;
    cursor: pointer;
}

.cm-payroll-regenerate-ok:hover {
    background: #020617;
}

.cm-payroll-regenerate-ok:focus {
    outline: 3px solid rgba(97, 98, 254, .22);
    outline-offset: 2px;
}

@keyframes cmPayrollRegenerateDrop {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (max-width: 640px) {
    .cm-payroll-regenerate-card {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .cm-payroll-regenerate-ok {
        grid-column: 1 / -1;
        width: 100%;
    }
}

/* Employee attendance total clocked-in card */
.cm-clocked-hours-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 13px;
    align-items: center;
    margin: 16px 0 14px;
    padding: 16px 18px;
    border: 1px solid rgba(97, 98, 254, .18);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(97, 98, 254, .10), rgba(255, 255, 255, .92));
    box-shadow: 0 14px 34px rgba(15, 23, 42, .06);
}

.cm-clocked-hours-icon {
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: #6162FE;
    color: #ffffff;
    box-shadow: 0 12px 26px rgba(97, 98, 254, .26);
}

.cm-clocked-hours-icon svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.cm-clocked-hours-label {
    display: block;
    color: #475569;
    font-size: 11px;
    font-weight: 650;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.cm-clocked-hours-body strong {
    display: block;
    margin-top: 4px;
    color: #111827;
    font-size: 28px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: .02em;
    font-variant-numeric: tabular-nums;
}

.cm-clocked-hours-body strong.is-running {
    color: #4f46e5;
}

.cm-clocked-hours-body p {
    margin: 7px 0 0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.35;
}

@media (max-width: 640px) {
    .cm-clocked-hours-card {
        margin: 14px 0 12px;
        padding: 15px;
        border-radius: 17px;
    }

    .cm-clocked-hours-icon {
        width: 42px;
        height: 42px;
        border-radius: 15px;
    }

    .cm-clocked-hours-body strong {
        font-size: 25px;
    }

    .cm-clocked-hours-body p {
        font-size: 12.5px;
    }
}

/* Employee attendance total clocked-in card safe version */
.cm-attendance-hidden-metric {
    display: none !important;
}

.cm-clocked-hours-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 13px;
    align-items: center;
    margin: 16px 0 14px;
    padding: 16px 18px;
    border: 1px solid rgba(97, 98, 254, .18);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(97, 98, 254, .10), rgba(255, 255, 255, .94));
    box-shadow: 0 14px 34px rgba(15, 23, 42, .06);
}

.cm-clocked-hours-icon {
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: #6162FE;
    color: #ffffff;
    box-shadow: 0 12px 26px rgba(97, 98, 254, .26);
}

.cm-clocked-hours-icon svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.cm-clocked-hours-label {
    display: block;
    color: #475569;
    font-size: 11px;
    font-weight: 650;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.cm-clocked-hours-body strong {
    display: block;
    margin-top: 4px;
    color: #111827;
    font-size: 28px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: .02em;
    font-variant-numeric: tabular-nums;
}

.cm-clocked-hours-body strong.is-running {
    color: #4f46e5;
}

.cm-clocked-hours-body p {
    margin: 7px 0 0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.35;
}

@media (max-width: 640px) {
    .cm-clocked-hours-card {
        margin: 14px 0 12px;
        padding: 15px;
        border-radius: 17px;
    }

    .cm-clocked-hours-icon {
        width: 42px;
        height: 42px;
        border-radius: 15px;
    }

    .cm-clocked-hours-body strong {
        font-size: 25px;
    }

    .cm-clocked-hours-body p {
        font-size: 12.5px;
    }
}

/* Employee attendance compact total clocked-in display */
.cm-attendance-hidden-metric {
    display: none !important;
}

.compact-clocked-hours-card {
    display: block !important;
    margin: 14px 0 14px !important;
    padding: 16px 18px !important;
    border: 1px solid rgba(97, 98, 254, .20) !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .06) !important;
}

.compact-clocked-hours-card .cm-clocked-hours-body {
    text-align: center !important;
}

.compact-clocked-hours-card .cm-clocked-hours-label {
    display: block !important;
    color: #475569 !important;
    font-size: 11px !important;
    font-weight: 650 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
}

.compact-clocked-hours-card #cmClockedHoursTodayValue {
    display: block !important;
    margin-top: 8px !important;
    color: #111827 !important;
    font-size: 34px !important;
    line-height: 1 !important;
    font-weight: 750 !important;
    letter-spacing: .04em !important;
    font-variant-numeric: tabular-nums !important;
}

.compact-clocked-hours-card .cm-clocked-hours-units {
    width: min(300px, 100%) !important;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    margin: 8px auto 0 !important;
    color: #64748b !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
}

@media (max-width: 640px) {
    .compact-clocked-hours-card {
        margin: 13px 0 13px !important;
        padding: 15px !important;
        border-radius: 17px !important;
    }

    .compact-clocked-hours-card #cmClockedHoursTodayValue {
        font-size: 31px !important;
    }
}

/* Employee attendance backend-based total clocked-in display */
.cm-attendance-hidden-metric {
    display: none !important;
}

.compact-clocked-hours-card {
    display: block !important;
    margin: 14px 0 14px !important;
    padding: 16px 18px !important;
    border: 1px solid rgba(97, 98, 254, .20) !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .06) !important;
}

.compact-clocked-hours-card .cm-clocked-hours-body {
    text-align: center !important;
}

.compact-clocked-hours-card .cm-clocked-hours-label {
    display: block !important;
    color: #475569 !important;
    font-size: 11px !important;
    font-weight: 650 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
}

.compact-clocked-hours-card #cmClockedHoursTodayValue {
    display: block !important;
    margin-top: 8px !important;
    color: #111827 !important;
    font-size: 34px !important;
    line-height: 1 !important;
    font-weight: 750 !important;
    letter-spacing: .04em !important;
    font-variant-numeric: tabular-nums !important;
}

.compact-clocked-hours-card .cm-clocked-hours-units {
    width: min(300px, 100%) !important;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    margin: 8px auto 0 !important;
    color: #64748b !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
}

@media (max-width: 640px) {
    .compact-clocked-hours-card {
        margin: 13px 0 13px !important;
        padding: 15px !important;
        border-radius: 17px !important;
    }

    .compact-clocked-hours-card #cmClockedHoursTodayValue {
        font-size: 31px !important;
    }
}

/* Employee attendance backend-based total clocked-in display */
.cm-attendance-hidden-metric {
    display: none !important;
}

.compact-clocked-hours-card {
    display: block !important;
    margin: 14px 0 14px !important;
    padding: 16px 18px !important;
    border: 1px solid rgba(97, 98, 254, .20) !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .06) !important;
}

.compact-clocked-hours-card .cm-clocked-hours-body {
    text-align: center !important;
}

.compact-clocked-hours-card .cm-clocked-hours-label {
    display: block !important;
    color: #475569 !important;
    font-size: 11px !important;
    font-weight: 650 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
}

.compact-clocked-hours-card #cmClockedHoursTodayValue {
    display: block !important;
    margin-top: 8px !important;
    color: #111827 !important;
    font-size: 34px !important;
    line-height: 1 !important;
    font-weight: 750 !important;
    letter-spacing: .04em !important;
    font-variant-numeric: tabular-nums !important;
}

.compact-clocked-hours-card .cm-clocked-hours-units {
    width: min(300px, 100%) !important;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    margin: 8px auto 0 !important;
    color: #64748b !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
}

/* Attendance report updated columns */
.attendance-report-filter-card,
.attendance-report-table-card {
    margin-top: 14px;
}

.attendance-report-filters {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
    gap: 12px;
    align-items: end;
}

.attendance-report-filter-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    padding-bottom: 1px;
}

.attendance-report-table-meta {
    display: flex;
    gap: 6px;
    align-items: baseline;
    margin-bottom: 12px;
    color: #475569;
    font-size: 13px;
}

.attendance-report-table-meta strong {
    color: #111827;
    font-size: 16px;
    font-weight: 650;
}

.attendance-report-table-wrap {
    overflow-x: auto;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
}

.attendance-report-table {
    width: 100%;
    min-width: 1180px;
    border-collapse: separate;
    border-spacing: 0;
    background: #ffffff;
}

.attendance-report-table th {
    padding: 11px 12px;
    background: #f8fafc;
    color: #334155;
    border-bottom: 1px solid #e5e7eb;
    font-size: 11px;
    font-weight: 650;
    letter-spacing: .06em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.attendance-report-table td {
    padding: 11px 12px;
    border-bottom: 1px solid #eef2f7;
    color: #334155;
    font-size: 13px;
    vertical-align: middle;
    white-space: nowrap;
}

.attendance-report-table tbody tr:hover td {
    background: #fafafa;
}

.attendance-employee-cell {
    display: grid;
    gap: 2px;
}

.attendance-employee-cell strong {
    color: #111827;
    font-size: 13px;
    font-weight: 600;
}

.attendance-employee-cell span {
    color: #64748b;
    font-size: 12px;
}

.attendance-time-badge {
    display: inline-flex;
    min-width: 92px;
    justify-content: center;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 650;
}

.attendance-time-badge.check-in {
    background: rgba(97, 98, 254, .10);
    color: #4f46e5;
}

.attendance-time-badge.check-out {
    background: rgba(249, 115, 22, .12);
    color: #ea580c;
}

.attendance-location-cell {
    max-width: 210px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.attendance-map-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 6px 10px;
    border-radius: 999px;
    background: #111827;
    color: #ffffff;
    font-size: 12px;
    font-weight: 650;
    text-decoration: none;
}

.attendance-map-link:hover {
    background: #020617;
}

.attendance-muted {
    color: #94a3b8;
    font-size: 12px;
}

.attendance-empty-cell {
    padding: 28px !important;
    color: #64748b !important;
    text-align: center;
}

.attendance-report-pagination {
    margin-top: 14px;
}

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

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

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

    .attendance-report-filter-actions {
        display: grid;
    }

    .attendance-report-filter-actions .cm-button,
    .attendance-report-filter-actions .cm-link-button {
        width: 100%;
        justify-content: center;
    }
}

/* Admin attendance report detailed table */
.attendance-report-header {
    margin-bottom: 14px;
}

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

.attendance-summary-card {
    padding: 14px;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .04);
}

.attendance-summary-card span {
    display: block;
    color: #64748b;
    font-size: 12px;
    font-weight: 600;
}

.attendance-summary-card strong {
    display: block;
    margin-top: 6px;
    color: #111827;
    font-size: 22px;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}

.attendance-report-filter {
    display: grid;
    grid-template-columns: 160px 160px minmax(220px, 1fr) 110px auto;
    gap: 12px;
    align-items: end;
    margin-bottom: 14px;
    padding: 14px;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .04);
}

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

.attendance-report-card {
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .05);
    overflow: hidden;
}

.attendance-report-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.attendance-report-table {
    width: 100%;
    min-width: 1180px;
    border-collapse: separate;
    border-spacing: 0;
}

.attendance-report-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 12px 14px;
    border-bottom: 1px solid #e5e7eb;
    background: #f8fafc;
    color: #334155;
    font-size: 11px;
    font-weight: 650;
    letter-spacing: .06em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.attendance-report-table td {
    padding: 12px 14px;
    border-bottom: 1px solid #f1f5f9;
    color: #111827;
    font-size: 13px;
    vertical-align: middle;
    white-space: nowrap;
}

.attendance-report-table td strong {
    display: block;
    font-size: 13px;
    font-weight: 600;
}

.attendance-report-table td span {
    display: block;
    margin-top: 2px;
    color: #64748b;
    font-size: 12px;
}

.attendance-location-cell {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.attendance-total-hours {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 82px;
    padding: 5px 8px;
    border-radius: 999px;
    background: rgba(97, 98, 254, .10);
    color: #4f46e5 !important;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}

.attendance-total-hours.pending,
.attendance-status.pending {
    background: rgba(249, 115, 22, .10);
    color: #ea580c !important;
}

.attendance-map-link {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 6px 10px;
    border-radius: 999px;
    background: #111827;
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
}

.attendance-map-link:hover {
    background: #020617;
}

.attendance-muted {
    color: #94a3b8 !important;
}

.attendance-empty {
    padding: 24px !important;
    color: #64748b !important;
    text-align: center;
}

.attendance-report-pagination {
    padding: 12px 14px;
    border-top: 1px solid #f1f5f9;
}

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

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

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

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

    .attendance-filter-actions {
        display: grid;
    }

    .attendance-filter-actions .cm-button,
    .attendance-filter-actions .cm-link-button {
        width: 100%;
        justify-content: center;
    }
}

/* Admin attendance detailed overview */
.attendance-admin-header {
    margin-bottom: 14px;
}

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

.attendance-admin-summary-card {
    padding: 14px;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .04);
}

.attendance-admin-summary-card span {
    display: block;
    color: #64748b;
    font-size: 12px;
    font-weight: 600;
}

.attendance-admin-summary-card strong {
    display: block;
    margin-top: 6px;
    color: #111827;
    font-size: 22px;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}

.attendance-admin-filter {
    display: grid;
    grid-template-columns: 160px 160px minmax(220px, 1fr) 110px auto;
    gap: 12px;
    align-items: end;
    margin-bottom: 14px;
    padding: 14px;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .04);
}

.attendance-admin-filter-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.attendance-admin-card {
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .05);
    overflow: hidden;
}

.attendance-admin-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.attendance-admin-table {
    width: 100%;
    min-width: 1180px;
    border-collapse: separate;
    border-spacing: 0;
}

.attendance-admin-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 12px 14px;
    border-bottom: 1px solid #e5e7eb;
    background: #f8fafc;
    color: #334155;
    font-size: 11px;
    font-weight: 650;
    letter-spacing: .06em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.attendance-admin-table td {
    padding: 12px 14px;
    border-bottom: 1px solid #f1f5f9;
    color: #111827;
    font-size: 13px;
    vertical-align: middle;
    white-space: nowrap;
}

.attendance-admin-table td strong {
    display: block;
    font-size: 13px;
    font-weight: 600;
}

.attendance-admin-table td span {
    display: block;
    margin-top: 2px;
    color: #64748b;
    font-size: 12px;
}

.attendance-admin-location {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.attendance-admin-total {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 82px;
    padding: 5px 8px;
    border-radius: 999px;
    background: rgba(97, 98, 254, .10);
    color: #4f46e5 !important;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}

.attendance-admin-total.pending,
.attendance-admin-status.pending {
    background: rgba(249, 115, 22, .10);
    color: #ea580c !important;
}

.attendance-admin-map-link {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 6px 10px;
    border-radius: 999px;
    background: #111827;
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
}

.attendance-admin-map-link:hover {
    background: #020617;
}

.attendance-admin-muted {
    color: #94a3b8 !important;
}

.attendance-admin-empty {
    padding: 24px !important;
    color: #64748b !important;
    text-align: center;
}

.attendance-admin-pagination {
    padding: 12px 14px;
    border-top: 1px solid #f1f5f9;
}

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

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

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

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

    .attendance-admin-filter-actions {
        display: grid;
    }

    .attendance-admin-filter-actions .cm-button,
    .attendance-admin-filter-actions .cm-link-button {
        width: 100%;
        justify-content: center;
    }
}

/* Admin attendance page professional override */
.attendance-admin-page {
    display: grid !important;
    gap: 14px !important;
}

.attendance-admin-toolbar {
    display: flex !important;
    justify-content: space-between !important;
    gap: 14px !important;
    align-items: flex-start !important;
    margin-bottom: 2px !important;
}

.attendance-admin-toolbar h1 {
    margin: 2px 0 4px !important;
    color: #111827 !important;
    font-size: 26px !important;
    font-weight: 650 !important;
    letter-spacing: -.03em !important;
}

.attendance-admin-toolbar p {
    margin: 0 !important;
    color: #64748b !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
}

.attendance-admin-eyebrow {
    color: #64748b !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: .18em !important;
    text-transform: uppercase !important;
}

.attendance-admin-summary {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin: 0 !important;
}

.attendance-admin-summary-card {
    min-height: 86px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding: 16px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .05) !important;
}

.attendance-admin-summary-card span {
    display: block !important;
    color: #64748b !important;
    font-size: 11px !important;
    font-weight: 650 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
}

.attendance-admin-summary-card strong {
    display: block !important;
    margin-top: 8px !important;
    color: #111827 !important;
    font-size: 24px !important;
    line-height: 1 !important;
    font-weight: 650 !important;
    font-variant-numeric: tabular-nums !important;
}

.attendance-admin-filter {
    display: grid !important;
    grid-template-columns: 160px 160px minmax(260px, 1fr) 110px auto !important;
    gap: 12px !important;
    align-items: end !important;
    margin: 0 !important;
    padding: 14px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .04) !important;
}

.attendance-admin-filter .cm-field {
    margin: 0 !important;
}

.attendance-admin-filter label {
    display: block !important;
    margin-bottom: 6px !important;
    color: #475569 !important;
    font-size: 11px !important;
    font-weight: 650 !important;
    letter-spacing: .07em !important;
    text-transform: uppercase !important;
}

.attendance-admin-filter input,
.attendance-admin-filter select {
    width: 100% !important;
    min-height: 38px !important;
    border-radius: 11px !important;
    border: 1px solid #d1d5db !important;
    background: #ffffff !important;
    color: #111827 !important;
    font-size: 13px !important;
}

.attendance-admin-filter-actions {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
}

.attendance-admin-filter-actions .cm-button,
.attendance-admin-filter-actions .cm-link-button {
    min-height: 38px !important;
    padding: 9px 14px !important;
    border-radius: 11px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
}

.attendance-admin-card {
    border: 1px solid #e5e7eb !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    box-shadow: 0 16px 38px rgba(15, 23, 42, .05) !important;
    overflow: hidden !important;
}

.attendance-admin-card-header {
    display: flex !important;
    justify-content: space-between !important;
    gap: 12px !important;
    align-items: center !important;
    padding: 14px 16px !important;
    border-bottom: 1px solid #eef2f7 !important;
    background: #ffffff !important;
}

.attendance-admin-card-header h2 {
    margin: 0 !important;
    color: #111827 !important;
    font-size: 16px !important;
    font-weight: 650 !important;
}

.attendance-admin-card-header p {
    margin: 4px 0 0 !important;
    color: #64748b !important;
    font-size: 12.5px !important;
}

.attendance-admin-table-wrap {
    width: 100% !important;
    overflow-x: auto !important;
}

.attendance-admin-table {
    width: 100% !important;
    min-width: 1220px !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

.attendance-admin-table th {
    padding: 11px 14px !important;
    border-bottom: 1px solid #e5e7eb !important;
    background: #f8fafc !important;
    color: #334155 !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: .06em !important;
    text-align: left !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
}

.attendance-admin-table td {
    padding: 11px 14px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    color: #111827 !important;
    font-size: 12.8px !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
}

.attendance-admin-table tr:hover td {
    background: #f8fafc !important;
}

.attendance-admin-table td strong {
    display: block !important;
    color: #111827 !important;
    font-size: 12.8px !important;
    font-weight: 650 !important;
}

.attendance-admin-table td span {
    display: block !important;
    margin-top: 2px !important;
    color: #64748b !important;
    font-size: 12px !important;
}

.attendance-admin-location {
    max-width: 220px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.attendance-admin-time {
    display: inline-flex !important;
    align-items: center !important;
    min-width: 86px !important;
    padding: 5px 8px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    font-weight: 650 !important;
    font-variant-numeric: tabular-nums !important;
}

.attendance-admin-time.in {
    background: rgba(97, 98, 254, .10) !important;
    color: #4f46e5 !important;
}

.attendance-admin-time.out {
    background: rgba(249, 115, 22, .10) !important;
    color: #ea580c !important;
}

.attendance-admin-total {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 86px !important;
    padding: 5px 8px !important;
    border-radius: 999px !important;
    background: rgba(16, 185, 129, .11) !important;
    color: #047857 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    font-variant-numeric: tabular-nums !important;
}

.attendance-admin-total.pending,
.attendance-admin-status.pending {
    display: inline-flex !important;
    align-items: center !important;
    min-width: 76px !important;
    padding: 5px 8px !important;
    border-radius: 999px !important;
    background: rgba(249, 115, 22, .11) !important;
    color: #ea580c !important;
    font-size: 12px !important;
    font-weight: 650 !important;
}

.attendance-admin-map-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 30px !important;
    padding: 6px 10px !important;
    border-radius: 999px !important;
    background: #111827 !important;
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

.attendance-admin-map-link:hover {
    background: #020617 !important;
}

.attendance-admin-muted {
    color: #94a3b8 !important;
    font-size: 12px !important;
}

.attendance-admin-empty {
    padding: 28px !important;
    color: #64748b !important;
    text-align: center !important;
}

.attendance-admin-pagination {
    padding: 12px 16px !important;
    border-top: 1px solid #f1f5f9 !important;
    background: #ffffff !important;
}

@media (max-width: 1200px) {
    .attendance-admin-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .attendance-admin-filter {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .attendance-admin-search-field,
    .attendance-admin-filter-actions {
        grid-column: 1 / -1 !important;
    }
}

@media (max-width: 680px) {
    .attendance-admin-toolbar h1 {
        font-size: 23px !important;
    }

    .attendance-admin-summary,
    .attendance-admin-filter {
        grid-template-columns: 1fr !important;
    }

    .attendance-admin-filter-actions {
        display: grid !important;
    }

    .attendance-admin-filter-actions .cm-button,
    .attendance-admin-filter-actions .cm-link-button {
        width: 100% !important;
        justify-content: center !important;
    }
}

/* Attendance check-in rules setup */
.attendance-rule-page {
    display: grid;
    gap: 14px;
}

.attendance-rule-header h1 {
    margin: 2px 0 4px;
    color: #111827;
    font-size: 26px;
    font-weight: 650;
    letter-spacing: -.03em;
}

.attendance-rule-header p {
    margin: 0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.45;
}

.attendance-rule-eyebrow {
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.attendance-rule-note {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 12px 14px;
    border: 1px solid rgba(97, 98, 254, .18);
    border-radius: 16px;
    background: rgba(97, 98, 254, .06);
    color: #334155;
    font-size: 13px;
}

.attendance-rule-card {
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 16px 38px rgba(15, 23, 42, .05);
    overflow: hidden;
}

.attendance-rule-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.attendance-rule-table {
    width: 100%;
    min-width: 860px;
    border-collapse: separate;
    border-spacing: 0;
}

.attendance-rule-table th {
    padding: 12px 14px;
    border-bottom: 1px solid #e5e7eb;
    background: #f8fafc;
    color: #334155;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-align: left;
    text-transform: uppercase;
}

.attendance-rule-table td {
    padding: 12px 14px;
    border-bottom: 1px solid #f1f5f9;
    color: #111827;
    font-size: 13px;
    vertical-align: middle;
}

.attendance-rule-table td strong {
    font-weight: 650;
}

.attendance-rule-code {
    display: inline-flex;
    padding: 5px 9px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #334155;
    font-size: 12px;
    font-weight: 700;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.attendance-rule-select {
    min-width: 280px;
    min-height: 38px;
    border-radius: 11px;
    font-size: 13px;
}

.attendance-rule-badge {
    display: inline-flex;
    min-width: 128px;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 650;
}

.attendance-rule-badge.allow {
    background: rgba(16, 185, 129, .11);
    color: #047857;
}

.attendance-rule-badge.restrict {
    background: rgba(249, 115, 22, .12);
    color: #ea580c;
}

.attendance-rule-empty {
    padding: 24px !important;
    color: #64748b !important;
    text-align: center;
}

.attendance-rule-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 14px;
    border-top: 1px solid #f1f5f9;
    background: #ffffff;
}

.attendance-rule-actions .cm-button,
.attendance-rule-actions .cm-link-button {
    min-height: 38px;
    padding: 9px 14px;
    border-radius: 11px;
    font-size: 13px;
    font-weight: 600;
}

@media (max-width: 680px) {
    .attendance-rule-note,
    .attendance-rule-actions {
        display: grid;
    }

    .attendance-rule-actions .cm-button,
    .attendance-rule-actions .cm-link-button {
        width: 100%;
        justify-content: center;
    }
}

/* Admin sidebar HRIS logo and larger navigation icons */
.cm-sidebar .cm-brand {
    gap: 10px !important;
}

.cm-sidebar .cm-logo.cm-logo-image {
    width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .18) !important;
}

.cm-sidebar .cm-logo.cm-logo-image img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: contain !important;
}

.cm-sidebar .cm-nav-icon {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    border-radius: 10px !important;
    font-size: 15px !important;
}

.cm-sidebar .cm-nav-icon.cm-svg-icon svg {
    width: 20px !important;
    height: 20px !important;
    stroke-width: 1.9 !important;
}

.cm-sidebar .cm-nav a,
.cm-sidebar .cm-nav button,
.cm-sidebar .cm-nav summary {
    gap: 11px !important;
    min-height: 43px !important;
}

.cm-sidebar .cm-nav-submenu a .cm-nav-icon,
.cm-sidebar .cm-nav-submenu .cm-nav-icon {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
}

.cm-sidebar .cm-nav-submenu a .cm-nav-icon svg,
.cm-sidebar .cm-nav-submenu .cm-nav-icon svg {
    width: 18px !important;
    height: 18px !important;
}

/* Admin sidebar larger navigation icons v2 */
.cm-sidebar .cm-nav-icon {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    border-radius: 12px !important;
    font-size: 17px !important;
}

.cm-sidebar .cm-nav-icon.cm-svg-icon svg {
    width: 24px !important;
    height: 24px !important;
    stroke-width: 2 !important;
}

.cm-sidebar .cm-nav a,
.cm-sidebar .cm-nav button,
.cm-sidebar .cm-nav summary {
    gap: 12px !important;
    min-height: 48px !important;
    padding-top: 7px !important;
    padding-bottom: 7px !important;
}

.cm-sidebar .cm-nav-submenu a .cm-nav-icon,
.cm-sidebar .cm-nav-submenu .cm-nav-icon {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-radius: 11px !important;
}

.cm-sidebar .cm-nav-submenu a .cm-nav-icon svg,
.cm-sidebar .cm-nav-submenu .cm-nav-icon svg {
    width: 22px !important;
    height: 22px !important;
    stroke-width: 2 !important;
}

.cm-sidebar .cm-logo.cm-logo-image {
    width: 38px !important;
    height: 38px !important;
    border-radius: 12px !important;
}

/* Employee attendance history sessions table */
.cm-attendance-history-session-card .cm-old-attendance-history-table {
    display: none !important;
}

.cm-attendance-history-sessions {
    margin-top: 12px;
}

.cm-attendance-history-top {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 12px;
}

.cm-attendance-history-top h3 {
    margin: 0;
    color: #111827;
    font-size: 16px;
    font-weight: 650;
}

.cm-attendance-history-top p {
    margin: 4px 0 0;
    color: #64748b;
    font-size: 12.5px;
}

.cm-attendance-history-table-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    background: #ffffff;
}

.cm-attendance-history-table {
    width: 100%;
    min-width: 720px;
    border-collapse: separate;
    border-spacing: 0;
}

.cm-attendance-history-table th {
    padding: 11px 13px;
    border-bottom: 1px solid #e5e7eb;
    background: #f8fafc;
    color: #334155;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.cm-attendance-history-table td {
    padding: 12px 13px;
    border-bottom: 1px solid #f1f5f9;
    color: #111827;
    font-size: 13px;
    vertical-align: middle;
    white-space: nowrap;
}

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

.cm-attendance-history-table td strong {
    font-weight: 650;
}

.cm-history-check,
.cm-history-total {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 88px;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}

.cm-history-check.in {
    background: rgba(97, 98, 254, .10);
    color: #4f46e5;
}

.cm-history-check.out {
    background: rgba(249, 115, 22, .11);
    color: #ea580c;
}

.cm-history-check.out.pending,
.cm-history-total.pending {
    background: rgba(148, 163, 184, .15);
    color: #64748b;
}

.cm-history-total {
    background: rgba(16, 185, 129, .11);
    color: #047857;
}

.cm-history-remarks {
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cm-attendance-history-empty {
    padding: 22px !important;
    color: #64748b !important;
    text-align: center;
}

.cm-attendance-history-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    align-items: center;
    margin-top: 12px;
    color: #64748b;
    font-size: 12.5px;
}

.cm-attendance-history-page-btn {
    min-height: 34px;
    padding: 7px 12px;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    background: #ffffff;
    color: #111827;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}

.cm-attendance-history-page-btn:disabled {
    opacity: .45;
    cursor: not-allowed;
}

@media (max-width: 640px) {
    .cm-attendance-history-table {
        min-width: 660px;
    }

    .cm-attendance-history-footer {
        justify-content: center;
    }
}

/* Employee attendance history sessions safe display */
.cm-old-attendance-history-table {
    display: none !important;
}

.cm-attendance-history-sessions {
    margin-top: 12px !important;
}

.cm-attendance-history-top {
    display: flex !important;
    justify-content: space-between !important;
    gap: 12px !important;
    align-items: flex-start !important;
    margin-bottom: 12px !important;
}

.cm-attendance-history-top h3 {
    margin: 0 !important;
    color: #111827 !important;
    font-size: 16px !important;
    font-weight: 650 !important;
}

.cm-attendance-history-top p {
    margin: 4px 0 0 !important;
    color: #64748b !important;
    font-size: 12.5px !important;
}

.cm-attendance-history-table-wrap {
    width: 100% !important;
    overflow-x: auto !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 16px !important;
    background: #ffffff !important;
}

.cm-attendance-history-table {
    width: 100% !important;
    min-width: 720px !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

.cm-attendance-history-table th {
    padding: 11px 13px !important;
    border-bottom: 1px solid #e5e7eb !important;
    background: #f8fafc !important;
    color: #334155 !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: .06em !important;
    text-align: left !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
}

.cm-attendance-history-table td {
    padding: 12px 13px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    color: #111827 !important;
    font-size: 13px !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
}

.cm-history-check,
.cm-history-total {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 88px !important;
    padding: 5px 9px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    font-weight: 650 !important;
    font-variant-numeric: tabular-nums !important;
}

.cm-history-check.in {
    background: rgba(97, 98, 254, .10) !important;
    color: #4f46e5 !important;
}

.cm-history-check.out {
    background: rgba(249, 115, 22, .11) !important;
    color: #ea580c !important;
}

.cm-history-check.out.pending,
.cm-history-total.pending {
    background: rgba(148, 163, 184, .15) !important;
    color: #64748b !important;
}

.cm-history-total {
    background: rgba(16, 185, 129, .11) !important;
    color: #047857 !important;
}

.cm-history-remarks {
    max-width: 260px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.cm-attendance-history-empty {
    padding: 22px !important;
    color: #64748b !important;
    text-align: center !important;
}

.cm-attendance-history-footer {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    align-items: center !important;
    margin-top: 12px !important;
    color: #64748b !important;
    font-size: 12.5px !important;
}

.cm-attendance-history-page-btn {
    min-height: 34px !important;
    padding: 7px 12px !important;
    border: 1px solid #d1d5db !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    color: #111827 !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
}

.cm-attendance-history-page-btn:disabled {
    opacity: .45 !important;
    cursor: not-allowed !important;
}

/* Force employee attendance history updated columns */
.cm-employee-history-old-hidden {
    display: none !important;
}

.cm-employee-history-card {
    margin-top: 14px !important;
    padding: 18px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .05) !important;
}

.cm-employee-history-header {
    margin-bottom: 12px !important;
}

.cm-employee-history-header h2 {
    margin: 0 !important;
    color: #111827 !important;
    font-size: 17px !important;
    font-weight: 650 !important;
}

.cm-employee-history-header p {
    margin: 4px 0 0 !important;
    color: #64748b !important;
    font-size: 12.5px !important;
}

.cm-employee-history-table-wrap {
    width: 100% !important;
    overflow-x: auto !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 16px !important;
    background: #ffffff !important;
}

.cm-employee-history-table {
    width: 100% !important;
    min-width: 720px !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

.cm-employee-history-table th {
    padding: 11px 13px !important;
    border-bottom: 1px solid #e5e7eb !important;
    background: #f8fafc !important;
    color: #334155 !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: .06em !important;
    text-align: left !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
}

.cm-employee-history-table td {
    padding: 12px 13px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    color: #111827 !important;
    font-size: 13px !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
}

.cm-employee-history-table td strong {
    font-weight: 650 !important;
}

.cm-employee-history-pill {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 90px !important;
    padding: 5px 9px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    font-weight: 650 !important;
    font-variant-numeric: tabular-nums !important;
}

.cm-employee-history-pill.checkin {
    background: rgba(97, 98, 254, .10) !important;
    color: #4f46e5 !important;
}

.cm-employee-history-pill.checkout {
    background: rgba(249, 115, 22, .11) !important;
    color: #ea580c !important;
}

.cm-employee-history-pill.total {
    background: rgba(16, 185, 129, .11) !important;
    color: #047857 !important;
}

.cm-employee-history-pill.pending {
    background: rgba(148, 163, 184, .15) !important;
    color: #64748b !important;
}

.cm-employee-history-remarks {
    max-width: 260px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.cm-employee-history-empty {
    padding: 22px !important;
    color: #64748b !important;
    text-align: center !important;
}

.cm-employee-history-footer {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    align-items: center !important;
    margin-top: 12px !important;
    color: #64748b !important;
    font-size: 12.5px !important;
}

.cm-employee-history-footer button {
    min-height: 34px !important;
    padding: 7px 12px !important;
    border: 1px solid #d1d5db !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    color: #111827 !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
}

.cm-employee-history-footer button:disabled {
    opacity: .45 !important;
    cursor: not-allowed !important;
}

/* Employee attendance history plain text timing values */
.cm-employee-history-pill,
.cm-employee-history-text {
    display: inline !important;
    min-width: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #374151 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    font-variant-numeric: tabular-nums !important;
}

.cm-employee-history-pill.checkin,
.cm-employee-history-pill.checkout,
.cm-employee-history-pill.total,
.cm-employee-history-pill.pending,
.cm-employee-history-text.checkin,
.cm-employee-history-text.checkout,
.cm-employee-history-text.total,
.cm-employee-history-text.pending {
    background: transparent !important;
    color: #374151 !important;
}

.cm-employee-history-text.total.below-required,
.cm-employee-history-pill.total.below-required {
    color: #dc2626 !important;
}

.cm-employee-history-text.total.pending,
.cm-employee-history-pill.total.pending {
    color: #64748b !important;
}

.employee-shell .leave-balance-grid .cm-stat-card.leave-balance-card,
.employee-shell .leave-balance-grid .cm-stat-card.employee-leave-mobile-card {
    position: relative;
    min-height: 170px !important;
    padding: 18px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    overflow: hidden !important;
}

.employee-shell .leave-balance-grid .cm-stat-card.leave-balance-card::before,
.employee-shell .leave-balance-grid .cm-stat-card.leave-balance-card::after,
.employee-shell .leave-balance-grid .cm-stat-card.employee-leave-mobile-card::before,
.employee-shell .leave-balance-grid .cm-stat-card.employee-leave-mobile-card::after,
.employee-shell .leave-balance-grid .cm-stat-card .leave-mobile-icon::before,
.employee-shell .leave-balance-grid .cm-stat-card .leave-mobile-icon::after {
    content: none !important;
    display: none !important;
}

.employee-shell .leave-balance-grid .cm-stat-card .leave-mobile-icon,
.employee-shell .leave-balance-grid .cm-stat-card .leave-balance-card-icon {
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    min-height: 54px !important;
    max-width: 54px !important;
    max-height: 54px !important;
    border-radius: 16px !important;
    background: #f3f4f6 !important;
    color: #374151 !important;
    display: grid !important;
    place-items: center !important;
    margin: 0 0 26px 0 !important;
    padding: 0 !important;
    box-shadow: inset 0 0 0 1px #e5e7eb !important;
    overflow: hidden !important;
    transform: none !important;
}

.employee-shell .leave-balance-grid .cm-stat-card .leave-mobile-icon svg,
.employee-shell .leave-balance-grid .cm-stat-card .leave-balance-card-icon svg {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    max-width: 28px !important;
    max-height: 28px !important;
    display: block !important;
    fill: currentColor !important;
    stroke: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    transform: none !important;
}

.employee-shell .leave-balance-grid .cm-stat-card .leave-code,
.employee-shell .leave-balance-grid .cm-stat-card.leave-balance-card > span {
    color: #64748b !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: .04em !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
}

.employee-shell .leave-balance-grid .cm-stat-card.leave-balance-card > strong {
    color: #0f172a !important;
    font-size: 24px !important;
    font-weight: 650 !important;
    line-height: 1.1 !important;
}

.employee-shell .leave-balance-grid .cm-stat-card.leave-balance-card > p {
    color: #475569 !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    margin: 0 !important;
}

@media (max-width: 768px) {
    .employee-shell .leave-balance-grid .cm-stat-card.leave-balance-card,
    .employee-shell .leave-balance-grid .cm-stat-card.employee-leave-mobile-card {
        min-height: 145px !important;
        padding: 16px !important;
    }

    .employee-shell .leave-balance-grid .cm-stat-card .leave-mobile-icon,
    .employee-shell .leave-balance-grid .cm-stat-card .leave-balance-card-icon {
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
        min-height: 46px !important;
        max-width: 46px !important;
        max-height: 46px !important;
        border-radius: 14px !important;
        margin-bottom: 18px !important;
    }

    .employee-shell .leave-balance-grid .cm-stat-card .leave-mobile-icon svg,
    .employee-shell .leave-balance-grid .cm-stat-card .leave-balance-card-icon svg {
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
        min-height: 24px !important;
        max-width: 24px !important;
        max-height: 24px !important;
    }
}

/* CM HRIS employee leaves no-icon professional layout start */
.employee-shell .cm-main .leave-page {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.employee-shell .cm-main .leave-page-header {
    align-items: flex-start;
    margin-bottom: 0;
}

.employee-shell .cm-main .leave-page-header h1 {
    letter-spacing: -0.04em;
}

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

.employee-shell .cm-main .leave-summary-strip article {
    min-height: 74px;
    padding: 14px 16px;
    border: 1px solid #dfe5ec;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
}

.employee-shell .cm-main .leave-summary-strip span,
.employee-shell .cm-main .leave-balance-card-top .leave-name,
.employee-shell .cm-main .leave-balance-main span,
.employee-shell .cm-main .leave-balance-meta span,
.employee-shell .cm-main .leave-history-count {
    display: block;
    color: #5f6f84;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
}

.employee-shell .cm-main .leave-summary-strip strong {
    display: block;
    margin-top: 8px;
    color: #0f172a;
    font-size: 24px;
    font-weight: 650;
    letter-spacing: -0.04em;
}

.employee-shell .cm-main .leave-balance-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(210px, 1fr));
    gap: 10px;
    margin: 0;
}

.employee-shell .cm-main .leave-balance-card,
.employee-shell .cm-main .leave-empty-card {
    min-height: 168px;
    padding: 16px;
    border: 1px solid #dfe5ec;
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.045);
}

.employee-shell .cm-main .leave-balance-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 14px;
}

.employee-shell .cm-main .leave-balance-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.employee-shell .cm-main .leave-code {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 28px;
    padding: 0 10px;
    border: 1px solid #d7dee8;
    border-radius: 999px;
    background: #f5f7fa;
    color: #1f2937;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.employee-shell .cm-main .leave-balance-card-top .leave-name {
    max-width: 150px;
    text-align: right;
}

.employee-shell .cm-main .leave-balance-main strong {
    display: block;
    color: #061326;
    font-size: 34px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.055em;
}

.employee-shell .cm-main .leave-balance-main span {
    margin-top: 6px;
}

.employee-shell .cm-main .leave-balance-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.employee-shell .cm-main .leave-balance-meta div {
    padding: 10px 12px;
    border: 1px solid #e5eaf0;
    border-radius: 12px;
    background: #f8fafc;
}

.employee-shell .cm-main .leave-balance-meta strong {
    display: block;
    margin-top: 4px;
    color: #111827;
    font-size: 15px;
    font-weight: 650;
}

.employee-shell .cm-main .leave-empty-card {
    grid-column: 1 / -1;
}

.employee-shell .cm-main .leave-empty-card strong {
    display: block;
    color: #0f172a;
    font-size: 15px;
    font-weight: 650;
}

.employee-shell .cm-main .leave-empty-card p {
    margin-top: 6px;
    color: #64748b;
    font-size: 13px;
}

.employee-shell .cm-main .leave-history-panel {
    margin-top: 0;
}

.employee-shell .cm-main .leave-history-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.employee-shell .cm-main .leave-history-count {
    padding: 7px 10px;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: #f8fafc;
    white-space: nowrap;
}

.employee-shell .cm-main .leave-table-wrap {
    border-radius: 14px;
    overflow: hidden;
}

.employee-shell .cm-main .leave-history-table th {
    background: #f8fafc;
    color: #334155;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.065em;
}

.employee-shell .cm-main .leave-history-table td {
    vertical-align: middle;
}

.employee-shell .cm-main .leave-mobile-icon,
.employee-shell .cm-main .employee-leave-mobile-card .leave-mobile-icon,
.employee-shell .cm-main .leave-balance-card .leave-mobile-icon,
.employee-shell .cm-main .leave-balance-grid .leave-mobile-icon {
    display: none !important;
}

.employee-shell .cm-main .employee-leave-mobile-card {
    min-height: auto !important;
    padding-top: 16px !important;
}

@media (max-width: 1180px) {
    .employee-shell .cm-main .leave-summary-strip,
    .employee-shell .cm-main .leave-balance-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .employee-shell .cm-main .leave-page {
        gap: 12px;
    }

    .employee-shell .cm-main .leave-page-header {
        gap: 12px;
    }

    .employee-shell .cm-main .leave-summary-strip,
    .employee-shell .cm-main .leave-balance-grid {
        grid-template-columns: 1fr;
    }

    .employee-shell .cm-main .leave-summary-strip article {
        min-height: 64px;
        padding: 12px 14px;
    }

    .employee-shell .cm-main .leave-summary-strip strong {
        font-size: 22px;
    }

    .employee-shell .cm-main .leave-balance-card {
        min-height: 150px;
        padding: 14px;
    }

    .employee-shell .cm-main .leave-balance-main strong {
        font-size: 30px;
    }

    .employee-shell .cm-main .leave-history-header {
        flex-direction: column;
    }
}
/* CM HRIS employee leaves no-icon professional layout end */

/* Keep Setup submenu icons clean and prevent fallback ligature text from overflowing. */
.cm-sidebar .material-icons,
.cm-sidebar .material-symbols-outlined,
.cm-sidebar .material-symbols-rounded,
.cm-sidebar .cm-menu-icon,
.cm-sidebar .cm-nav-icon,
.cm-sidebar .cm-sidebar-icon {
    font-family: 'Material Symbols Outlined', 'Material Icons', sans-serif;
    font-weight: normal;
    font-style: normal;
    font-size: 22px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    font-feature-settings: 'liga';
    overflow: hidden;
}


/* Leave Credit Policies sidebar icon hard fix */
.cm-sidebar a[href*="leave-credit-policies"] .material-icons,
.cm-sidebar a[href*="leave-credit-policies"] .material-icons-outlined,
.cm-sidebar a[href*="leave-credit-policies"] .material-symbols-rounded,
.cm-sidebar a[href*="leave-credit-policies"] .material-symbols-outlined,
.employee-shell a[href*="leave-credit-policies"] .material-icons,
.employee-shell a[href*="leave-credit-policies"] .material-icons-outlined,
.employee-shell a[href*="leave-credit-policies"] .material-symbols-rounded,
.employee-shell a[href*="leave-credit-policies"] .material-symbols-outlined,
aside a[href*="leave-credit-policies"] .material-icons,
aside a[href*="leave-credit-policies"] .material-icons-outlined,
aside a[href*="leave-credit-policies"] .material-symbols-rounded,
aside a[href*="leave-credit-policies"] .material-symbols-outlined {
    font-family: 'Material Icons', 'Material Symbols Rounded', 'Material Symbols Outlined' !important;
    font-weight: normal !important;
    font-style: normal !important;
    font-size: 22px !important;
    line-height: 1 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    word-wrap: normal !important;
    direction: ltr !important;
    -webkit-font-feature-settings: 'liga' !important;
    -webkit-font-smoothing: antialiased !important;
    font-feature-settings: 'liga' !important;
}

/* Employee Leaves professional layout override */
.employee-shell .leave-balance-summary,
.employee-shell .employee-leave-summary,
.employee-shell .leave-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 12px 0 16px;
}

.employee-shell .leave-balance-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px !important;
    align-items: stretch !important;
    margin-top: 14px !important;
}

.employee-shell .leave-balance-grid .cm-stat-card,
.employee-shell .leave-balance-grid .cm-leave-balance-card {
    min-height: 118px !important;
    height: auto !important;
    padding: 18px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    gap: 10px !important;
    border: 1px solid #dfe3ea !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04) !important;
}

.employee-shell .leave-balance-grid .cm-stat-card span:first-child,
.employee-shell .leave-balance-grid .cm-leave-balance-card span:first-child {
    display: inline-flex !important;
    width: fit-content !important;
    min-width: 0 !important;
    height: auto !important;
    padding: 4px 9px !important;
    border-radius: 999px !important;
    background: #f1f5f9 !important;
    color: #475569 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .08em !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
}

.employee-shell .leave-balance-grid .cm-stat-card strong,
.employee-shell .leave-balance-grid .cm-leave-balance-card strong {
    display: block !important;
    margin: 0 !important;
    color: #0f172a !important;
    font-size: 28px !important;
    font-weight: 650 !important;
    line-height: 1 !important;
}

.employee-shell .leave-balance-grid .cm-stat-card p,
.employee-shell .leave-balance-grid .cm-leave-balance-card p {
    margin: 0 !important;
    color: #475569 !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;
}

.employee-shell .leave-mobile-icon,
.employee-shell .cm-main .leave-mobile-icon,
.employee-shell .employee-leave-mobile-card .leave-mobile-icon {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.employee-shell .employee-leave-mobile-card {
    min-height: 118px !important;
    padding: 18px !important;
    border-radius: 16px !important;
    background: #ffffff !important;
}

.employee-shell .compact-panel {
    margin-top: 14px !important;
}

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

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

@media (max-width: 720px) {
    .employee-shell .leave-balance-grid,
    .employee-shell .leave-balance-summary,
    .employee-shell .employee-leave-summary,
    .employee-shell .leave-summary-grid {
        grid-template-columns: 1fr !important;
    }

    .employee-shell .leave-balance-grid .cm-stat-card,
    .employee-shell .leave-balance-grid .cm-leave-balance-card {
        min-height: 104px !important;
    }
}

/* CM HRIS employee leaves professional layout start */
.employee-leaves-page {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.employee-leaves-header {
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 0;
}

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

.leave-summary-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 14px 16px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.04);
}

.leave-summary-card span {
    display: block;
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.2;
    margin-bottom: 6px;
    text-transform: uppercase;
}

.leave-summary-card strong {
    color: #0f172a;
    display: block;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.1;
}

.employee-leaves-page .employee-leave-balance-grid,
.employee-leaves-page .leave-balance-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(220px, 1fr)) !important;
    gap: 12px !important;
    margin: 0 !important;
}

.employee-leaves-page .cm-leave-balance-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    box-shadow: 0 14px 35px rgba(15, 23, 42, 0.05) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    min-height: auto !important;
    padding: 16px !important;
}

.employee-leaves-page .leave-card-top {
    align-items: flex-start;
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.employee-leaves-page .leave-code {
    color: #475569;
    display: inline-flex;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.employee-leaves-page .leave-card-top h2 {
    color: #0f172a;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
    margin: 0;
}

.employee-leaves-page .leave-card-top strong {
    color: #020617;
    font-size: 26px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.employee-leaves-page .leave-card-progress {
    background: #edf2f7;
    border-radius: 999px;
    height: 8px;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.employee-leaves-page .leave-card-progress span {
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
}

.employee-leaves-page .leave-card-progress .used {
    background: #334155;
}

.employee-leaves-page .leave-card-progress .pending {
    background: #94a3b8;
    left: auto;
    right: 0;
}

.employee-leaves-page .leave-card-meta {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(3, 1fr);
}

.employee-leaves-page .leave-card-meta span {
    color: #64748b;
    font-size: 12px;
    line-height: 1.2;
}

.employee-leaves-page .leave-card-meta b {
    color: #0f172a;
    display: block;
    font-size: 14px;
    font-weight: 800;
    margin-top: 3px;
}

.employee-leaves-page .cm-leave-empty-card {
    background: #ffffff;
    border: 1px dashed #cbd5e1;
    border-radius: 16px;
    color: #475569;
    grid-column: 1 / -1;
    padding: 18px;
}

.employee-leaves-page .cm-leave-empty-card strong {
    color: #0f172a;
    display: block;
    margin-bottom: 4px;
}

.employee-leaves-page .employee-leave-history-panel {
    margin-top: 4px;
}

.employee-leaves-page .employee-leave-history-header {
    align-items: center;
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.employee-leaves-page .employee-leave-history-header span {
    color: #475569;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.employee-leaves-page .employee-leave-history-table th {
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.employee-leaves-page .leave-mobile-icon,
.employee-leaves-page .employee-leave-mobile-card .leave-mobile-icon,
.employee-leaves-page .employee-leave-mobile-card::before,
.employee-leaves-page .employee-leave-mobile-card::after {
    display: none !important;
}

@media (max-width: 1200px) {
    .employee-leaves-summary {
        grid-template-columns: repeat(2, minmax(150px, 1fr));
    }

    .employee-leaves-page .employee-leave-balance-grid,
    .employee-leaves-page .leave-balance-grid {
        grid-template-columns: repeat(2, minmax(220px, 1fr)) !important;
    }
}

@media (max-width: 768px) {
    .employee-leaves-header {
        flex-direction: column;
    }

    .employee-leaves-header .cm-topbar-actions {
        width: 100%;
    }

    .employee-leaves-header .cm-link-button {
        justify-content: center;
        width: 100%;
    }

    .employee-leaves-summary,
    .employee-leaves-page .employee-leave-balance-grid,
    .employee-leaves-page .leave-balance-grid {
        grid-template-columns: 1fr !important;
    }

    .employee-leaves-page .leave-card-meta {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 480px) {
    .employee-leaves-page .leave-card-meta {
        grid-template-columns: 1fr;
    }
}
/* CM HRIS employee leaves professional layout end */

.cm-employee-leave-policy-panel {
    margin-top: 18px;
    padding: 18px;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
}

.cm-employee-leave-policy-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.cm-employee-leave-policy-head h2 {
    margin: 0;
    color: #111827;
    font-size: 17px;
    font-weight: 650;
}

.cm-employee-leave-policy-head p {
    margin: 4px 0 0;
    color: #6b7280;
    font-size: 13px;
}

.cm-employee-leave-policy-form {
    display: grid;
    grid-template-columns: minmax(180px, 240px) minmax(240px, 1fr) auto;
    gap: 14px;
    align-items: end;
}

.cm-employee-leave-policy-current {
    min-height: 42px;
    padding: 10px 12px;
    border: 1px solid #eef2f7;
    border-radius: 12px;
    background: #f9fafb;
}

.cm-employee-leave-policy-current span,
.cm-employee-leave-policy-form label span {
    display: block;
    margin-bottom: 5px;
    color: #6b7280;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.cm-employee-leave-policy-current strong {
    color: #111827;
    font-size: 14px;
    font-weight: 650;
}

.cm-employee-leave-policy-form select {
    width: 100%;
    min-height: 42px;
    padding: 9px 12px;
    border: 1px solid #d1d5db;
    border-radius: 12px;
    background: #ffffff;
    color: #111827;
    font-size: 14px;
}

@media (max-width: 820px) {
    .cm-employee-leave-policy-form {
        grid-template-columns: 1fr;
    }
}

/* HRIS FIX: leave credit policies sidebar icon v5 start */
.leave-credit-policy-sidebar-link > span:first-child,
a[href*="/admin/leave-credit-policies"] > span:first-child {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    overflow: hidden !important;
    font-size: 0 !important;
    line-height: 0 !important;
    color: #d9e1ef !important;
    text-indent: -9999px !important;
    white-space: nowrap !important;
}

.leave-credit-policy-sidebar-link > span:first-child::before,
a[href*="/admin/leave-credit-policies"] > span:first-child::before {
    content: "" !important;
    display: block !important;
    width: 21px !important;
    height: 21px !important;
    flex: 0 0 21px !important;
    background-color: currentColor !important;
    text-indent: 0 !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 -960 960 960' width='24'%3E%3Cpath d='M240-120q-33 0-56.5-23.5T160-200v-560q0-33 23.5-56.5T240-840h320l240 240v400q0 33-23.5 56.5T720-120H240Zm280-440v-200H240v560h480v-360H520ZM320-440h320v-80H320v80Zm0 120h320v-80H320v80Zm0 120h200v-80H320v80Zm-80-560v200-200 560-560Z'/%3E%3C/svg%3E") center / contain no-repeat !important;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 -960 960 960' width='24'%3E%3Cpath d='M240-120q-33 0-56.5-23.5T160-200v-560q0-33 23.5-56.5T240-840h320l240 240v400q0 33-23.5 56.5T720-120H240Zm280-440v-200H240v560h480v-360H520ZM320-440h320v-80H320v80Zm0 120h320v-80H320v80Zm0 120h200v-80H320v80Zm-80-560v200-200 560-560Z'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

.leave-credit-policy-sidebar-link > span:first-child *,
a[href*="/admin/leave-credit-policies"] > span:first-child * {
    display: none !important;
}

.leave-credit-policy-sidebar-link.active > span:first-child,
a[href*="/admin/leave-credit-policies"].active > span:first-child,
a[href*="/admin/employee-leave-policies"].active > span:first-child {
    color: #ffffff !important;
}
/* HRIS FIX: leave credit policies sidebar icon v5 end */

/* Leave Credit Policies sidebar icon stable SVG override */
.cm-sidebar .cm-nav-submenu a.leave-credit-policy-sidebar-link > span.cm-nav-icon.cm-svg-icon,
aside .cm-nav-submenu a.leave-credit-policy-sidebar-link > span.cm-nav-icon.cm-svg-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    border-radius: 14px !important;
    font-size: 0 !important;
    line-height: 0 !important;
    color: inherit !important;
}

.cm-sidebar .cm-nav-submenu a.leave-credit-policy-sidebar-link > span.cm-nav-icon.cm-svg-icon::before,
aside .cm-nav-submenu a.leave-credit-policy-sidebar-link > span.cm-nav-icon.cm-svg-icon::before {
    content: none !important;
    display: none !important;
}

.cm-sidebar .cm-nav-submenu a.leave-credit-policy-sidebar-link > span.cm-nav-icon.cm-svg-icon svg,
aside .cm-nav-submenu a.leave-credit-policy-sidebar-link > span.cm-nav-icon.cm-svg-icon svg {
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.8 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

/* CM HRIS setup submenu no icons final */
.cm-setup-dropdown .cm-nav-submenu a {
    display: flex !important;
    grid-template-columns: 1fr !important;
    align-items: center !important;
    gap: 0 !important;
    padding-left: 18px !important;
}

.cm-setup-dropdown .cm-nav-submenu a > span[aria-hidden="true"],
.cm-setup-dropdown .cm-nav-submenu a > span.cm-nav-icon,
.cm-setup-dropdown .cm-nav-submenu a > span.cm-svg-icon,
.cm-setup-dropdown .cm-nav-submenu a > span.material-icons,
.cm-setup-dropdown .cm-nav-submenu a > span.material-icons-outlined,
.cm-setup-dropdown .cm-nav-submenu a > span.material-symbols-rounded,
.cm-setup-dropdown .cm-nav-submenu a > span.material-symbols-outlined,
.cm-setup-dropdown .cm-nav-submenu a > svg {
    display: none !important;
}

.cm-setup-dropdown .cm-nav-submenu a[href*="leave-credit-policies"] > span:first-child,
.cm-setup-dropdown .cm-nav-submenu a[href*="employee-leave-policies"] > span:first-child {
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
    font-family: inherit !important;
    font-weight: inherit !important;
}

.cm-setup-dropdown .cm-nav-submenu a[href*="leave-credit-policies"] > span:first-child::before,
.cm-setup-dropdown .cm-nav-submenu a[href*="employee-leave-policies"] > span:first-child::before {
    content: none !important;
    display: none !important;
}

/* CM HRIS final setup submenu no-icons fix */
html body .cm-setup-dropdown .cm-setup-submenu.no-sub-icons {
    display: grid !important;
    gap: 6px !important;
    padding-top: 8px !important;
}

html body .cm-setup-dropdown .cm-setup-submenu.no-sub-icons a.cm-setup-link,
html body aside .cm-setup-dropdown .cm-setup-submenu.no-sub-icons a.cm-setup-link,
html body .cm-sidebar .cm-setup-dropdown .cm-setup-submenu.no-sub-icons a.cm-setup-link {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    min-height: 38px !important;
    width: 100% !important;
    padding: 9px 14px 9px 18px !important;
    border-radius: 12px !important;
    text-decoration: none !important;
}

html body .cm-setup-dropdown .cm-setup-submenu.no-sub-icons a.cm-setup-link > span,
html body .cm-setup-dropdown .cm-setup-submenu.no-sub-icons a.cm-setup-link > span:first-child,
html body .cm-setup-dropdown .cm-setup-submenu.no-sub-icons a.cm-setup-link > span:last-child,
html body aside .cm-setup-dropdown .cm-setup-submenu.no-sub-icons a.cm-setup-link > span,
html body .cm-sidebar .cm-setup-dropdown .cm-setup-submenu.no-sub-icons a.cm-setup-link > span {
    display: inline !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    text-indent: 0 !important;
    white-space: normal !important;
    color: inherit !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.15 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

html body .cm-setup-dropdown .cm-setup-submenu.no-sub-icons a.cm-setup-link > span::before,
html body .cm-setup-dropdown .cm-setup-submenu.no-sub-icons a.cm-setup-link > span::after,
html body .cm-setup-dropdown .cm-setup-submenu.no-sub-icons a.cm-setup-link::before,
html body .cm-setup-dropdown .cm-setup-submenu.no-sub-icons a.cm-setup-link::after {
    content: none !important;
    display: none !important;
}

html body .cm-setup-dropdown .cm-setup-submenu.no-sub-icons a.cm-setup-link .material-icons,
html body .cm-setup-dropdown .cm-setup-submenu.no-sub-icons a.cm-setup-link .material-symbols-rounded,
html body .cm-setup-dropdown .cm-setup-submenu.no-sub-icons a.cm-setup-link .material-symbols-outlined,
html body .cm-setup-dropdown .cm-setup-submenu.no-sub-icons a.cm-setup-link .cm-nav-icon,
html body .cm-setup-dropdown .cm-setup-submenu.no-sub-icons a.cm-setup-link svg {
    display: none !important;
}

/* Attendance office-only restriction alert */
.cm-attendance-access-alert {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 12px;
    align-items: flex-start;
    margin: 0 0 16px;
    padding: 14px 16px;
    border: 1px solid #fecaca;
    border-left: 5px solid #dc2626;
    border-radius: 16px;
    background: #fff7f7;
    color: #7f1d1d;
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.08);
}

.cm-attendance-access-alert-icon {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: #fee2e2;
    color: #b91c1c;
}

.cm-attendance-access-alert-icon svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.cm-attendance-access-alert-body strong {
    display: block;
    margin: 0 0 3px;
    font-size: 14px;
    font-weight: 700;
    color: #991b1b;
}

.cm-attendance-access-alert-body p {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    color: #7f1d1d;
}

@media (max-width: 640px) {
    .cm-attendance-access-alert {
        grid-template-columns: 34px 1fr;
        gap: 10px;
        padding: 12px;
        border-radius: 14px;
    }

    .cm-attendance-access-alert-icon {
        width: 34px;
        height: 34px;
        border-radius: 12px;
    }
}


/* CM HRIS attendance blocked/error alert cleanup */
body:has(.attendance-check-in) .cm-alert.error,
body:has(.attendance-check-in) .cm-alert.danger,
body:has(.attendance-check-in) .cm-attendance-alert,
body:has(.attendance-check-in) .attendance-alert,
body:has(.attendance-check-in) .attendance-flash-alert,
body:has(.attendance-check-in) .employee-attendance-alert,
body:has(.attendance-check-in) .attendance-office-only-alert {
    display: block !important;
    width: 100% !important;
    margin: 0 0 16px !important;
    padding: 13px 15px !important;
    border: 1px solid #fecaca !important;
    border-radius: 14px !important;
    background: #fff7f7 !important;
    color: #991b1b !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
    font-weight: 500 !important;
    box-shadow: 0 8px 22px rgba(127, 29, 29, 0.06) !important;
}

body:has(.attendance-check-in) .cm-alert.error::before,
body:has(.attendance-check-in) .cm-alert.danger::before,
body:has(.attendance-check-in) .cm-attendance-alert::before,
body:has(.attendance-check-in) .attendance-alert::before,
body:has(.attendance-check-in) .attendance-flash-alert::before,
body:has(.attendance-check-in) .employee-attendance-alert::before,
body:has(.attendance-check-in) .attendance-office-only-alert::before,
body:has(.attendance-check-in) .cm-alert.error::after,
body:has(.attendance-check-in) .cm-alert.danger::after,
body:has(.attendance-check-in) .cm-attendance-alert::after,
body:has(.attendance-check-in) .attendance-alert::after,
body:has(.attendance-check-in) .attendance-flash-alert::after,
body:has(.attendance-check-in) .employee-attendance-alert::after,
body:has(.attendance-check-in) .attendance-office-only-alert::after {
    content: none !important;
    display: none !important;
}

body:has(.attendance-check-in) .cm-alert.error .material-symbols-rounded,
body:has(.attendance-check-in) .cm-alert.error .material-symbols-outlined,
body:has(.attendance-check-in) .cm-alert.error .material-icons,
body:has(.attendance-check-in) .cm-alert.error .material-icons-outlined,
body:has(.attendance-check-in) .cm-alert.error .cm-alert-icon,
body:has(.attendance-check-in) .cm-alert.error .attendance-alert-icon,
body:has(.attendance-check-in) .cm-alert.error svg,
body:has(.attendance-check-in) .cm-alert.danger .material-symbols-rounded,
body:has(.attendance-check-in) .cm-alert.danger .material-symbols-outlined,
body:has(.attendance-check-in) .cm-alert.danger .material-icons,
body:has(.attendance-check-in) .cm-alert.danger .material-icons-outlined,
body:has(.attendance-check-in) .cm-alert.danger .cm-alert-icon,
body:has(.attendance-check-in) .cm-alert.danger .attendance-alert-icon,
body:has(.attendance-check-in) .cm-alert.danger svg,
body:has(.attendance-check-in) .cm-attendance-alert .material-symbols-rounded,
body:has(.attendance-check-in) .cm-attendance-alert .material-symbols-outlined,
body:has(.attendance-check-in) .cm-attendance-alert .material-icons,
body:has(.attendance-check-in) .cm-attendance-alert .material-icons-outlined,
body:has(.attendance-check-in) .cm-attendance-alert .cm-alert-icon,
body:has(.attendance-check-in) .cm-attendance-alert .attendance-alert-icon,
body:has(.attendance-check-in) .cm-attendance-alert svg,
body:has(.attendance-check-in) .attendance-alert .material-symbols-rounded,
body:has(.attendance-check-in) .attendance-alert .material-symbols-outlined,
body:has(.attendance-check-in) .attendance-alert .material-icons,
body:has(.attendance-check-in) .attendance-alert .material-icons-outlined,
body:has(.attendance-check-in) .attendance-alert .cm-alert-icon,
body:has(.attendance-check-in) .attendance-alert .attendance-alert-icon,
body:has(.attendance-check-in) .attendance-alert svg,
body:has(.attendance-check-in) .attendance-office-only-alert .material-symbols-rounded,
body:has(.attendance-check-in) .attendance-office-only-alert .material-symbols-outlined,
body:has(.attendance-check-in) .attendance-office-only-alert .material-icons,
body:has(.attendance-check-in) .attendance-office-only-alert .material-icons-outlined,
body:has(.attendance-check-in) .attendance-office-only-alert .cm-alert-icon,
body:has(.attendance-check-in) .attendance-office-only-alert .attendance-alert-icon,
body:has(.attendance-check-in) .attendance-office-only-alert svg {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

body:has(.attendance-check-in) .cm-alert.error strong,
body:has(.attendance-check-in) .cm-alert.danger strong,
body:has(.attendance-check-in) .cm-attendance-alert strong,
body:has(.attendance-check-in) .attendance-alert strong,
body:has(.attendance-check-in) .attendance-office-only-alert strong {
    display: block !important;
    margin-bottom: 4px !important;
    color: #7f1d1d !important;
    font-size: 14px !important;
    font-weight: 700 !important;
}

/* CM HRIS attendance blocked alert clean reset */
.cm-attendance-blocked-alert {
    display: block !important;
    width: 100% !important;
    margin: 0 0 16px 0 !important;
    padding: 13px 15px !important;
    border: 1px solid #fecaca !important;
    border-left: 4px solid #dc2626 !important;
    border-radius: 12px !important;
    background: #fef2f2 !important;
    color: #7f1d1d !important;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04) !important;
}

.cm-attendance-blocked-alert strong {
    display: block !important;
    margin: 0 0 4px 0 !important;
    color: #991b1b !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
}

.cm-attendance-blocked-alert p {
    margin: 0 !important;
    color: #7f1d1d !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
}

.cm-attendance-blocked-alert svg,
.cm-attendance-blocked-alert .material-symbols-rounded,
.cm-attendance-blocked-alert .material-symbols-outlined,
.cm-attendance-blocked-alert .material-icons,
.cm-attendance-blocked-alert .material-icons-outlined,
.cm-attendance-blocked-alert::before,
.cm-attendance-blocked-alert::after {
    display: none !important;
    content: none !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 0 !important;
    max-height: 0 !important;
    border: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    overflow: hidden !important;
}

body:has(.attendance-check-in) main > svg,
body:has(.attendance-check-in) main > .material-symbols-rounded,
body:has(.attendance-check-in) main > .material-symbols-outlined,
body:has(.attendance-check-in) main > .material-icons,
body:has(.attendance-check-in) main > .material-icons-outlined,
body:has(.attendance-check-in) main > [class*="alert-icon"],
body:has(.attendance-check-in) main > [class*="warning-icon"] {
    display: none !important;
    content: none !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 0 !important;
    max-height: 0 !important;
    border: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    overflow: hidden !important;
}

@media (max-width: 640px) {
    .cm-attendance-blocked-alert {
        margin-bottom: 12px !important;
        padding: 12px 13px !important;
        border-radius: 10px !important;
    }

    .cm-attendance-blocked-alert strong {
        font-size: 13px !important;
    }

    .cm-attendance-blocked-alert p {
        font-size: 12px !important;
    }
}

/* CM HRIS attendance blocked message red text */
.cm-attendance-blocked-red,
.cm-attendance-blocked-red *,
.cm-attendance-blocked-alert,
.cm-attendance-blocked-alert *,
.attendance-blocked-alert,
.attendance-blocked-alert *,
.attendance-office-only-alert,
.attendance-office-only-alert *,
.cm-alert.danger.cm-attendance-blocked-red,
.cm-alert.danger.cm-attendance-blocked-red *,
.cm-alert.error.cm-attendance-blocked-red,
.cm-alert.error.cm-attendance-blocked-red * {
    color: #b91c1c !important;
}

.cm-attendance-blocked-red strong,
.cm-attendance-blocked-red .alert-title,
.cm-attendance-blocked-alert strong,
.cm-attendance-blocked-alert .alert-title,
.attendance-blocked-alert strong,
.attendance-blocked-alert .alert-title,
.attendance-office-only-alert strong,
.attendance-office-only-alert .alert-title {
    color: #991b1b !important;
}


/* CM HRIS final text-only red attendance blocked alert */
.cm-attendance-blocked-alert-red {
    display: grid !important;
    gap: 4px !important;
    margin: 0 0 16px 0 !important;
    padding: 12px 14px !important;
    border: 1px solid #fecaca !important;
    border-left: 4px solid #dc2626 !important;
    border-radius: 12px !important;
    background: #fef2f2 !important;
    box-shadow: none !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

.cm-attendance-blocked-alert-red,
.cm-attendance-blocked-alert-red strong,
.cm-attendance-blocked-alert-red span,
.cm-attendance-blocked-alert-red p,
.cm-attendance-blocked-alert-red div {
    color: #b91c1c !important;
}

.cm-attendance-blocked-alert-red strong {
    display: block !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
}

.cm-attendance-blocked-alert-red span {
    display: block !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
    font-weight: 500 !important;
}

.cm-attendance-blocked-alert-red::before,
.cm-attendance-blocked-alert-red::after,
.cm-attendance-blocked-alert-red *::before,
.cm-attendance-blocked-alert-red *::after {
    content: none !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    border: 0 !important;
    background: transparent !important;
}


/* CM HRIS attendance blocked red text-only alert */
.cm-attendance-blocked-red {
    width: min(100%, 760px) !important;
    margin: 16px 0 18px !important;
    padding: 12px 14px !important;
    border: 1px solid #fecaca !important;
    border-radius: 12px !important;
    background: #fff5f5 !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

.cm-attendance-blocked-red,
.cm-attendance-blocked-red * {
    color: #b91c1c !important;
}

.cm-attendance-blocked-red strong {
    display: block !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;
}

.cm-attendance-blocked-red span {
    display: block !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
    font-weight: 500 !important;
}

.cm-attendance-blocked-red svg,
.cm-attendance-blocked-red .material-icons,
.cm-attendance-blocked-red .material-symbols-rounded,
.cm-attendance-blocked-red .material-symbols-outlined,
.cm-attendance-blocked-red::before,
.cm-attendance-blocked-red::after {
    display: none !important;
    content: none !important;
}

.cm-alert.danger,
.cm-alert.danger * {
    color: #b91c1c !important;
}

.cm-alert.danger svg,
.cm-alert.danger .material-icons,
.cm-alert.danger .material-symbols-rounded,
.cm-alert.danger .material-symbols-outlined {
    display: none !important;
}


/* CM HRIS attendance blocked alert final */
.cm-attendance-blocked-alert {
    display: block !important;
    width: 100% !important;
    max-width: 760px !important;
    box-sizing: border-box !important;
    margin: 0 0 16px 0 !important;
    padding: 12px 14px !important;
    border: 1px solid #fecaca !important;
    border-radius: 14px !important;
    background: #fff5f5 !important;
    color: #b91c1c !important;
    box-shadow: 0 8px 22px rgba(185, 28, 28, 0.06) !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
}

.cm-attendance-blocked-alert::before,
.cm-attendance-blocked-alert::after,
.cm-attendance-blocked-alert *::before,
.cm-attendance-blocked-alert *::after {
    display: none !important;
    content: none !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
}

.cm-attendance-blocked-title {
    display: block !important;
    margin: 0 0 4px 0 !important;
    color: #991b1b !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
}

.cm-attendance-blocked-message {
    display: block !important;
    margin: 0 !important;
    color: #b91c1c !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.45 !important;
}
/* End CM HRIS attendance blocked alert final */

/* CM HRIS attendance blocked red alert final */
.cm-attendance-blocked-alert {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 0 14px 0 !important;
    padding: 12px 14px !important;
    border: 1px solid #fecaca !important;
    border-radius: 12px !important;
    background: #fff5f5 !important;
    color: #b91c1c !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
    box-shadow: none !important;
}

.cm-attendance-blocked-alert::before,
.cm-attendance-blocked-alert::after,
.cm-attendance-blocked-alert *::before,
.cm-attendance-blocked-alert *::after {
    content: none !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

.cm-attendance-blocked-title {
    display: block !important;
    margin: 0 0 3px 0 !important;
    padding: 0 !important;
    color: #991b1b !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
}

.cm-attendance-blocked-message {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #b91c1c !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
}

.cm-attendance-blocked-alert svg,
.cm-attendance-blocked-alert .material-icons,
.cm-attendance-blocked-alert .material-symbols-rounded,
.cm-attendance-blocked-alert .cm-alert-icon {
    display: none !important;
}

/* Attendance blocked red text final override */
.attendance-blocked-red-card {
    display: block !important;
    margin: 0 0 14px 0 !important;
    padding: 12px 14px !important;
    border: 1px solid #fecaca !important;
    border-radius: 12px !important;
    background: #fef2f2 !important;
    box-shadow: none !important;
    color: #b91c1c !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
}

.attendance-blocked-red-card strong,
.attendance-blocked-red-card span,
.attendance-blocked-red-card div,
.attendance-blocked-red-card p {
    color: #b91c1c !important;
}

.attendance-blocked-red-card strong {
    display: block !important;
    margin: 0 0 4px 0 !important;
    font-weight: 700 !important;
}

.attendance-blocked-red-card::before,
.attendance-blocked-red-card::after,
.attendance-blocked-red-card *::before,
.attendance-blocked-red-card *::after {
    content: none !important;
    display: none !important;
}

.cm-alert.danger {
    color: #b91c1c !important;
}

.cm-alert.danger * {
    color: #b91c1c !important;
}

/* CM mobile floating icon dock start */
.cm-mobile-floating-icon-dock {
    display: none;
}

.cm-mobile-floating-icon-dock button,
.cm-mobile-floating-icon-dock a {
    font-family: inherit;
}

@media (max-width: 768px) {
    .cm-original-mobile-menu-container-hidden {
        display: none !important;
    }

    .cm-mobile-floating-icon-dock {
        position: fixed;
        left: 50%;
        right: auto;
        bottom: max(14px, env(safe-area-inset-bottom));
        z-index: 9999;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 8px;
        border: 1px solid rgba(148, 163, 184, 0.28);
        border-radius: 999px;
        background: rgba(15, 23, 42, 0.92);
        box-shadow: 0 18px 45px rgba(15, 23, 42, 0.28);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        transform: translateX(-50%);
        opacity: 1;
        transition: opacity 180ms ease, transform 180ms ease;
    }

    .cm-mobile-floating-icon-dock.cm-scroll-hidden {
        opacity: 0;
        pointer-events: none;
        transform: translate(-50%, calc(100% + 28px));
    }

    .cm-mobile-floating-icon-dock .cm-mobile-dock-item {
        width: 44px;
        height: 44px;
        min-width: 44px;
        border: 0;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #e5e7eb;
        background: transparent;
        text-decoration: none;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: background 160ms ease, color 160ms ease, transform 160ms ease;
    }

    .cm-mobile-floating-icon-dock .cm-mobile-dock-item:active {
        transform: scale(0.94);
    }

    .cm-mobile-floating-icon-dock .cm-mobile-dock-item.active {
        color: #ffffff;
        background: rgba(99, 102, 241, 0.95);
    }

    .cm-mobile-floating-icon-dock .cm-mobile-dock-item svg {
        width: 21px;
        height: 21px;
        display: block;
        stroke: currentColor;
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    body {
        padding-bottom: calc(78px + env(safe-area-inset-bottom));
    }
}

@media (min-width: 769px) {
    .cm-mobile-floating-icon-dock {
        display: none !important;
    }

    .cm-original-mobile-menu-container-hidden {
        display: initial;
    }
}
/* CM mobile floating icon dock end */

/* CM mobile floating icon dock size override start */
@media (max-width: 768px) {
    .cm-mobile-floating-icon-dock {
        bottom: max(18px, env(safe-area-inset-bottom)) !important;
        gap: 9px !important;
        padding: 11px !important;
        border-radius: 999px !important;
        box-shadow: 0 22px 55px rgba(15, 23, 42, 0.34) !important;
    }

    .cm-mobile-floating-icon-dock .cm-mobile-dock-item {
        width: 56px !important;
        height: 56px !important;
        min-width: 56px !important;
        border-radius: 999px !important;
    }

    .cm-mobile-floating-icon-dock .cm-mobile-dock-item svg {
        width: 28px !important;
        height: 28px !important;
        stroke-width: 2.2 !important;
    }

    .cm-mobile-floating-icon-dock.cm-scroll-hidden {
        transform: translate(-50%, calc(100% + 34px)) !important;
    }

    body {
        padding-bottom: calc(104px + env(safe-area-inset-bottom)) !important;
    }
}
/* CM mobile floating icon dock size override end */

/* Admin Attendance Total Late column */
.admin-attendance-total-late-cell {
    white-space: nowrap;
}

.admin-attendance-total-late {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 74px;
    border-radius: 999px;
    padding: 4px 9px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
}

.admin-attendance-total-late.is-late {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

.admin-attendance-total-late.is-ontime {
    background: #f8fafc;
    color: #334155;
    border: 1px solid #e2e8f0;
}

.admin-attendance-total-late.is-neutral {
    background: #f8fafc;
    color: #64748b;
    border: 1px solid #e2e8f0;
}


/* CM HRIS pagination arrow size fix start */
.cm-pagination svg,
.cm-table-pagination svg,
.cm-report-pagination svg,
nav[role="navigation"] svg,
nav[aria-label="Pagination Navigation"] svg,
.pagination svg,
[aria-label="Pagination Navigation"] svg {
    width: 16px !important;
    height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    display: inline-block !important;
    vertical-align: middle !important;
    flex-shrink: 0 !important;
}

.cm-pagination a,
.cm-pagination span,
.cm-table-pagination a,
.cm-table-pagination span,
.cm-report-pagination a,
.cm-report-pagination span,
nav[role="navigation"] a,
nav[role="navigation"] span,
nav[aria-label="Pagination Navigation"] a,
nav[aria-label="Pagination Navigation"] span,
[aria-label="Pagination Navigation"] a,
[aria-label="Pagination Navigation"] span {
    line-height: 1.2 !important;
}

.cm-pagination [aria-hidden="true"],
.cm-table-pagination [aria-hidden="true"],
.cm-report-pagination [aria-hidden="true"],
nav[role="navigation"] [aria-hidden="true"],
nav[aria-label="Pagination Navigation"] [aria-hidden="true"],
[aria-label="Pagination Navigation"] [aria-hidden="true"] {
    font-size: 14px !important;
    line-height: 1 !important;
}

.cm-pagination,
.cm-table-pagination,
.cm-report-pagination,
nav[aria-label="Pagination Navigation"],
[aria-label="Pagination Navigation"] {
    font-size: 13px !important;
}
/* CM HRIS pagination arrow size fix end */


/* HR Modules sidebar hierarchy */
.cm-hr-modules-submenu .cm-setup-link,
.cm-reports-submenu .cm-setup-link {
    min-height: 34px;
    padding-top: 7px;
    padding-bottom: 7px;
    gap: 8px;
}

.cm-nav-nested-dropdown {
    margin: 2px 0;
}

.cm-nav-nested-dropdown > summary {
    cursor: pointer;
    list-style: none;
}

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

.cm-nav-nested-dropdown[open] > summary .cm-nav-chevron {
    transform: rotate(90deg);
}

.cm-nav-submenu-nested {
    margin-left: 12px;
    padding-left: 10px;
    border-left: 1px solid rgba(148, 163, 184, 0.32);
}

.cm-reports-submenu .cm-setup-link {
    font-size: 12.5px;
}

/* CM HRIS sidebar icon size and weight refinement */
.cm-sidebar .cm-nav-icon,
.cm-admin-sidebar .cm-nav-icon,
aside .cm-nav-icon {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    border-radius: 12px !important;
}

.cm-sidebar .cm-nav-icon svg,
.cm-admin-sidebar .cm-nav-icon svg,
aside .cm-nav-icon svg {
    width: 24px !important;
    height: 24px !important;
    stroke-width: 1.45 !important;
}

.cm-sidebar .cm-nav-icon svg *,
.cm-admin-sidebar .cm-nav-icon svg *,
aside .cm-nav-icon svg * {
    stroke-width: 1.45 !important;
}

.cm-sidebar summary .cm-nav-icon,
.cm-admin-sidebar summary .cm-nav-icon,
aside summary .cm-nav-icon {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
}

.cm-sidebar .cm-setup-main-icon svg,
.cm-admin-sidebar .cm-setup-main-icon svg,
aside .cm-setup-main-icon svg {
    width: 24px !important;
    height: 24px !important;
    stroke-width: 1.45 !important;
}

/* CM HRIS setup main icon visibility fix */
html body .cm-setup-dropdown > summary {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

html body .cm-setup-dropdown > summary .cm-setup-main-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    border-radius: 12px !important;
}

html body .cm-setup-dropdown > summary .cm-setup-main-icon svg {
    display: block !important;
    width: 24px !important;
    height: 24px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.45 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

html body .cm-setup-dropdown > summary .cm-setup-main-icon svg * {
    stroke-width: 1.45 !important;
}

/* CM HRIS employee attendance total late column */
.employee-attendance-total-late-head,
.employee-attendance-total-late-cell {
    white-space: nowrap;
}

.employee-attendance-total-late-cell {
    color: #374151;
    font-weight: 600;
}

.employee-attendance-total-late-cell.is-late {
    color: #dc2626;
    font-weight: 700;
}

.employee-attendance-total-late-cell.is-on-time {
    color: #374151;
    font-weight: 600;
}

.employee-attendance-total-late-cell.is-empty {
    color: #64748b;
    font-weight: 500;
}

/* CM HRIS Attendance Extract page */
.attendance-extract-page {
    display: grid;
    gap: 16px;
}

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

.attendance-extract-summary article {
    padding: 14px 16px;
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
}

.attendance-extract-summary span {
    display: block;
    color: #64748b;
    font-size: 12px;
    margin-bottom: 4px;
}

.attendance-extract-summary strong {
    color: #111827;
    font-size: 22px;
    font-weight: 650;
}

.attendance-extract-filter {
    display: grid;
    grid-template-columns: 160px 160px minmax(220px, 1fr) 110px auto;
    gap: 10px;
    align-items: end;
}

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

.attendance-extract-disabled {
    color: #b91c1c;
    font-size: 12px;
    font-weight: 600;
}

.attendance-extract-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.attendance-extract-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 1120px;
}

.attendance-extract-table th {
    padding: 10px 12px;
    text-align: left;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
    border-bottom: 1px solid rgba(148, 163, 184, 0.28);
    background: #f8fafc;
    white-space: nowrap;
}

.attendance-extract-table td {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
    font-size: 13px;
    color: #334155;
    vertical-align: middle;
}

.attendance-extract-table td strong {
    display: block;
    color: #111827;
    font-weight: 650;
}

.attendance-extract-table td span {
    display: block;
    color: #64748b;
    font-size: 12px;
}

.attendance-extract-late {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 74px;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 12px !important;
    font-weight: 650;
}

.attendance-extract-late.is-late {
    color: #dc2626 !important;
    background: #fee2e2;
}

.attendance-extract-late.is-ontime {
    color: #374151 !important;
    background: #f3f4f6;
}

.attendance-extract-late.is-neutral {
    color: #64748b !important;
    background: #f8fafc;
}

.attendance-extract-status {
    display: inline-flex !important;
    width: max-content;
    padding: 5px 9px;
    border-radius: 999px;
    background: #f8fafc;
    color: #334155 !important;
    font-size: 12px !important;
    font-weight: 650;
}

.attendance-extract-map {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 6px 10px;
    border-radius: 10px;
    background: #111827;
    color: #ffffff !important;
    font-size: 12px;
    font-weight: 650;
    text-decoration: none;
}

.attendance-extract-pagination {
    margin-top: 14px;
}

.attendance-extract-pagination svg,
.attendance-extract-page nav svg {
    width: 18px !important;
    height: 18px !important;
}

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

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

/* CM HRIS employee leaves aesthetic line color */
.employee-leaves-v2 .employee-leaves-v2-bar,
.employee-leaves-v2-bar {
    background: linear-gradient(90deg, #eef2ff 0%, #f5f3ff 55%, #fdf2f8 100%) !important;
    border: 1px solid rgba(129, 140, 248, 0.18) !important;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

.employee-leaves-v2 .employee-leaves-v2-bar-fill,
.employee-leaves-v2-bar-fill {
    background: linear-gradient(90deg, #6366f1 0%, #8b5cf6 55%, #ec4899 100%) !important;
    box-shadow: 0 6px 16px rgba(99, 102, 241, 0.22) !important;
}

.employee-leaves-v2 .employee-leaves-v2-card,
.employee-leaves-v2-card,
.employee-leaves-v2 .employee-leaves-v2-panel,
.employee-leaves-v2-panel {
    border-color: #e5e7eb !important;
}

.employee-leaves-v2 .employee-leaves-v2-table th,
.employee-leaves-v2-table th,
.employee-leaves-v2 .employee-leaves-v2-table td,
.employee-leaves-v2-table td {
    border-bottom-color: #e5e7eb !important;
}

.employee-leaves-v2 .employee-leaves-v2-summary-card,
.employee-leaves-v2-summary-card {
    border-color: #e5e7eb !important;
}
/* END CM HRIS employee leaves aesthetic line color */

/* CM HRIS employee leaves line thickness refinement */
.employee-leaves-v2-bar {
    height: 9px !important;
    min-height: 9px !important;
    border-radius: 999px !important;
}

.employee-leaves-v2-bar-fill {
    height: 9px !important;
    min-height: 9px !important;
    border-radius: 999px !important;
}

.employee-leaves-v2-table th,
.employee-leaves-v2-table td {
    border-bottom-width: 1.25px !important;
}

.employee-leaves-v2-card,
.employee-leaves-v2-panel,
.employee-leaves-v2-summary-card {
    border-width: 1.25px !important;
}

/* CM HRIS employee login professional polish */
body:has(form[action*="employee/login"]),
.cm-auth-body,
.cm-login-body,
.employee-login-body {
    font-family: "Inter", "Instrument Sans", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-weight: 400 !important;
    letter-spacing: -0.01em;
    text-rendering: geometricPrecision;
}

body:has(form[action*="employee/login"]) h1,
body:has(form[action*="employee/login"]) h2,
.cm-auth-body h1,
.cm-auth-body h2,
.cm-login-body h1,
.cm-login-body h2,
.employee-login-body h1,
.employee-login-body h2 {
    font-weight: 560 !important;
    letter-spacing: -0.035em !important;
}

body:has(form[action*="employee/login"]) p,
body:has(form[action*="employee/login"]) label,
body:has(form[action*="employee/login"]) span,
body:has(form[action*="employee/login"]) input,
body:has(form[action*="employee/login"]) button,
.cm-auth-body p,
.cm-auth-body label,
.cm-auth-body span,
.cm-auth-body input,
.cm-auth-body button,
.cm-login-body p,
.cm-login-body label,
.cm-login-body span,
.cm-login-body input,
.cm-login-body button {
    font-weight: 400 !important;
}

.cm-login-logo-image,
.cm-auth-body .cm-login-logo-image,
.cm-login-body .cm-login-logo-image,
body:has(form[action*="employee/login"]) .cm-login-logo-image {
    width: 82px !important;
    height: 82px !important;
    margin: 0 auto 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 24px !important;
    background: rgba(255, 255, 255, 0.92) !important;
    border: 1px solid rgba(148, 163, 184, 0.28) !important;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12) !important;
    overflow: hidden !important;
}

.cm-login-logo-image img,
.cm-auth-body .cm-login-logo-image img,
.cm-login-body .cm-login-logo-image img,
body:has(form[action*="employee/login"]) .cm-login-logo-image img {
    width: 62px !important;
    height: 62px !important;
    object-fit: contain !important;
    display: block !important;
}

body:has(form[action*="employee/login"]) .cm-button,
body:has(form[action*="employee/login"]) button[type="submit"],
body:has(form[action*="employee/login"]) .cm-pwa-install-detected-button,
.cm-auth-body .cm-button,
.cm-auth-body button[type="submit"],
.cm-auth-body .cm-pwa-install-detected-button,
.cm-login-body .cm-button,
.cm-login-body button[type="submit"],
.cm-login-body .cm-pwa-install-detected-button {
    background: linear-gradient(135deg, #6162fe 0%, #4f46e5 100%) !important;
    border-color: #6162fe !important;
    color: #ffffff !important;
    font-weight: 520 !important;
    box-shadow: 0 14px 28px rgba(97, 98, 254, 0.25) !important;
}

body:has(form[action*="employee/login"]) .cm-button:hover,
body:has(form[action*="employee/login"]) button[type="submit"]:hover,
body:has(form[action*="employee/login"]) .cm-pwa-install-detected-button:hover,
.cm-auth-body .cm-button:hover,
.cm-auth-body button[type="submit"]:hover,
.cm-auth-body .cm-pwa-install-detected-button:hover,
.cm-login-body .cm-button:hover,
.cm-login-body button[type="submit"]:hover,
.cm-login-body .cm-pwa-install-detected-button:hover {
    background: linear-gradient(135deg, #5556f6 0%, #4338ca 100%) !important;
    border-color: #5556f6 !important;
    transform: translateY(-1px);
}

body:has(form[action*="employee/login"]) .cm-link-button.secondary,
.cm-auth-body .cm-link-button.secondary,
.cm-login-body .cm-link-button.secondary {
    color: #4f46e5 !important;
    border-color: rgba(97, 98, 254, 0.28) !important;
    background: rgba(97, 98, 254, 0.07) !important;
    font-weight: 500 !important;
}

.cm-pwa-install-detected-button[hidden],
[data-pwa-install-detected="1"][hidden] {
    display: none !important;
}

/* CM HRIS admin login professional polish */
body:has(form[action*="admin/login"]),
.admin-login-body,
.cm-admin-login-body,
.cm-auth-body,
.cm-login-body {
    font-family: "Inter", "Instrument Sans", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-weight: 400 !important;
    letter-spacing: -0.01em;
    text-rendering: geometricPrecision;
}

body:has(form[action*="admin/login"]) h1,
body:has(form[action*="admin/login"]) h2,
.admin-login-body h1,
.admin-login-body h2,
.cm-admin-login-body h1,
.cm-admin-login-body h2,
.cm-auth-body h1,
.cm-auth-body h2,
.cm-login-body h1,
.cm-login-body h2 {
    font-weight: 560 !important;
    letter-spacing: -0.035em !important;
}

body:has(form[action*="admin/login"]) p,
body:has(form[action*="admin/login"]) label,
body:has(form[action*="admin/login"]) span,
body:has(form[action*="admin/login"]) input,
body:has(form[action*="admin/login"]) button,
.admin-login-body p,
.admin-login-body label,
.admin-login-body span,
.admin-login-body input,
.admin-login-body button,
.cm-admin-login-body p,
.cm-admin-login-body label,
.cm-admin-login-body span,
.cm-admin-login-body input,
.cm-admin-login-body button {
    font-weight: 400 !important;
}

.cm-login-logo-image,
.admin-login-body .cm-login-logo-image,
.cm-admin-login-body .cm-login-logo-image,
body:has(form[action*="admin/login"]) .cm-login-logo-image {
    width: 82px !important;
    height: 82px !important;
    margin: 0 auto 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 24px !important;
    background: rgba(255, 255, 255, 0.92) !important;
    border: 1px solid rgba(148, 163, 184, 0.28) !important;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12) !important;
    overflow: hidden !important;
}

.cm-login-logo-image img,
.admin-login-body .cm-login-logo-image img,
.cm-admin-login-body .cm-login-logo-image img,
body:has(form[action*="admin/login"]) .cm-login-logo-image img {
    width: 62px !important;
    height: 62px !important;
    object-fit: contain !important;
    display: block !important;
}

body:has(form[action*="admin/login"]) .cm-button,
body:has(form[action*="admin/login"]) button[type="submit"],
body:has(form[action*="admin/login"]) .cm-pwa-install-detected-button,
.admin-login-body .cm-button,
.admin-login-body button[type="submit"],
.admin-login-body .cm-pwa-install-detected-button,
.cm-admin-login-body .cm-button,
.cm-admin-login-body button[type="submit"],
.cm-admin-login-body .cm-pwa-install-detected-button {
    background: linear-gradient(135deg, #6162fe 0%, #4f46e5 100%) !important;
    border-color: #6162fe !important;
    color: #ffffff !important;
    font-weight: 520 !important;
    box-shadow: 0 14px 28px rgba(97, 98, 254, 0.25) !important;
}

body:has(form[action*="admin/login"]) .cm-button:hover,
body:has(form[action*="admin/login"]) button[type="submit"]:hover,
body:has(form[action*="admin/login"]) .cm-pwa-install-detected-button:hover,
.admin-login-body .cm-button:hover,
.admin-login-body button[type="submit"]:hover,
.admin-login-body .cm-pwa-install-detected-button:hover,
.cm-admin-login-body .cm-button:hover,
.cm-admin-login-body button[type="submit"]:hover,
.cm-admin-login-body .cm-pwa-install-detected-button:hover {
    background: linear-gradient(135deg, #5556f6 0%, #4338ca 100%) !important;
    border-color: #5556f6 !important;
    transform: translateY(-1px);
}

body:has(form[action*="admin/login"]) .cm-link-button.secondary,
.admin-login-body .cm-link-button.secondary,
.cm-admin-login-body .cm-link-button.secondary {
    color: #4f46e5 !important;
    border-color: rgba(97, 98, 254, 0.28) !important;
    background: rgba(97, 98, 254, 0.07) !important;
    font-weight: 500 !important;
}

.cm-pwa-install-detected-button[hidden],
[data-pwa-install-detected="1"][hidden] {
    display: none !important;
}

/* CM HRIS employee profile gender avatar */
.employee-profile-gender-avatar {
    width: 58px;
    height: 58px;
    min-width: 58px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent !important;
    color: #334155;
    border: 1.5px solid rgba(100, 116, 139, 0.36);
    box-shadow: none !important;
}

.employee-profile-gender-avatar svg {
    width: 35px;
    height: 35px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.employee-profile-gender-avatar.is-male {
    color: #2563eb;
    border-color: rgba(37, 99, 235, 0.34);
    background: transparent !important;
}

.employee-profile-gender-avatar.is-female {
    color: #db2777;
    border-color: rgba(219, 39, 119, 0.34);
    background: transparent !important;
}

.employee-profile-gender-avatar.is-neutral {
    color: #475569;
    border-color: rgba(71, 85, 105, 0.32);
    background: transparent !important;
}

@media (max-width: 640px) {
    .employee-profile-gender-avatar {
        width: 54px;
        height: 54px;
        min-width: 54px;
        border-radius: 17px;
    }

    .employee-profile-gender-avatar svg {
        width: 32px;
        height: 32px;
    }
}

/* CM HRIS employee leaves mobile summary row fixed */
@media (max-width: 768px) {
    .employee-leaves-mobile-summary-grid {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 8px !important;
        width: 100% !important;
        margin: 12px 0 14px !important;
    }

    .employee-leaves-mobile-summary-grid > * {
        min-width: 0 !important;
        width: auto !important;
        min-height: 74px !important;
        padding: 10px 8px !important;
        border-radius: 12px !important;
    }

    .employee-leaves-mobile-summary-grid span,
    .employee-leaves-mobile-summary-grid small,
    .employee-leaves-mobile-summary-grid p:first-child {
        display: block !important;
        margin: 0 !important;
        font-size: 8.5px !important;
        line-height: 1.15 !important;
        letter-spacing: .035em !important;
        white-space: normal !important;
    }

    .employee-leaves-mobile-summary-grid strong,
    .employee-leaves-mobile-summary-grid h2,
    .employee-leaves-mobile-summary-grid h3,
    .employee-leaves-mobile-summary-grid .cm-stat-value {
        display: block !important;
        margin-top: 7px !important;
        font-size: 17px !important;
        line-height: 1.05 !important;
        font-weight: 500 !important;
    }

    .employee-leaves-mobile-summary-grid + * {
        clear: both !important;
    }
}

@media (max-width: 390px) {
    .employee-leaves-mobile-summary-grid {
        gap: 6px !important;
    }

    .employee-leaves-mobile-summary-grid > * {
        min-height: 70px !important;
        padding: 9px 6px !important;
    }

    .employee-leaves-mobile-summary-grid span,
    .employee-leaves-mobile-summary-grid small,
    .employee-leaves-mobile-summary-grid p:first-child {
        font-size: 7.8px !important;
    }

    .employee-leaves-mobile-summary-grid strong,
    .employee-leaves-mobile-summary-grid h2,
    .employee-leaves-mobile-summary-grid h3,
    .employee-leaves-mobile-summary-grid .cm-stat-value {
        font-size: 15px !important;
    }
}

/* CM HRIS employee leaves file button color */
.employee-shell .cm-main:has(.employee-leaves-mobile-summary-grid) .cm-topbar-actions .cm-button,
.employee-shell .cm-main:has(.employee-leaves-mobile-summary-grid) a[href*="/employee/leaves/create"],
.employee-shell .cm-main:has(.employee-leaves-mobile-summary-grid) a[href*="leaves/create"] {
    background: #6162FE !important;
    border-color: #6162FE !important;
    color: #ffffff !important;
    box-shadow: 0 12px 24px rgba(97, 98, 254, 0.22) !important;
}

.employee-shell .cm-main:has(.employee-leaves-mobile-summary-grid) .cm-topbar-actions .cm-button:hover,
.employee-shell .cm-main:has(.employee-leaves-mobile-summary-grid) a[href*="/employee/leaves/create"]:hover,
.employee-shell .cm-main:has(.employee-leaves-mobile-summary-grid) a[href*="leaves/create"]:hover {
    background: #5051E8 !important;
    border-color: #5051E8 !important;
    box-shadow: 0 14px 28px rgba(97, 98, 254, 0.30) !important;
}

.employee-shell .cm-main:has(.employee-leaves-mobile-summary-grid) .cm-topbar-actions .cm-button:active,
.employee-shell .cm-main:has(.employee-leaves-mobile-summary-grid) a[href*="/employee/leaves/create"]:active,
.employee-shell .cm-main:has(.employee-leaves-mobile-summary-grid) a[href*="leaves/create"]:active {
    background: #4647D6 !important;
    border-color: #4647D6 !important;
    transform: translateY(1px);
}

/* CM HRIS exact File Leave button theme color */
.employee-leaves-file-button,
a.employee-leaves-file-button,
button.employee-leaves-file-button {
    background: #6162FE !important;
    border-color: #6162FE !important;
    color: #ffffff !important;
    box-shadow: 0 12px 24px rgba(97, 98, 254, 0.22) !important;
}

.employee-leaves-file-button:hover,
a.employee-leaves-file-button:hover,
button.employee-leaves-file-button:hover {
    background: #5051E8 !important;
    border-color: #5051E8 !important;
    color: #ffffff !important;
    box-shadow: 0 14px 28px rgba(97, 98, 254, 0.30) !important;
}

.employee-leaves-file-button:active,
a.employee-leaves-file-button:active,
button.employee-leaves-file-button:active {
    background: #4647D6 !important;
    border-color: #4647D6 !important;
    transform: translateY(1px);
}

/* CM HRIS File Leave button vertical gradient */
.employee-leaves-file-button,
a.employee-leaves-file-button,
button.employee-leaves-file-button {
    background: linear-gradient(to top, #6162FE 0%, #648EF0 50%, #66B1E5 100%) !important;
    border-color: transparent !important;
    color: #ffffff !important;
    box-shadow: 0 14px 28px rgba(97, 98, 254, 0.24) !important;
}

.employee-leaves-file-button:hover,
a.employee-leaves-file-button:hover,
button.employee-leaves-file-button:hover {
    background: linear-gradient(to top, #5657ee 0%, #5d86e8 50%, #5da9dc 100%) !important;
    border-color: transparent !important;
    color: #ffffff !important;
    box-shadow: 0 16px 32px rgba(97, 98, 254, 0.32) !important;
}

.employee-leaves-file-button:active,
a.employee-leaves-file-button:active,
button.employee-leaves-file-button:active {
    background: linear-gradient(to top, #4c4ddd 0%, #557adc 50%, #559bcf 100%) !important;
    border-color: transparent !important;
    transform: translateY(1px);
}

/* CM HRIS Submit Leave Request button vertical gradient */
.employee-leave-submit-button,
button.employee-leave-submit-button,
.cm-form-actions .employee-leave-submit-button,
.employee-shell .cm-main button.employee-leave-submit-button {
    background: linear-gradient(to top, #6162FE 0%, #648EF0 50%, #66B1E5 100%) !important;
    border-color: transparent !important;
    color: #ffffff !important;
    box-shadow: 0 14px 28px rgba(97, 98, 254, 0.24) !important;
}

.employee-leave-submit-button:hover,
button.employee-leave-submit-button:hover,
.cm-form-actions .employee-leave-submit-button:hover,
.employee-shell .cm-main button.employee-leave-submit-button:hover {
    background: linear-gradient(to top, #5657ee 0%, #5d86e8 50%, #5da9dc 100%) !important;
    border-color: transparent !important;
    color: #ffffff !important;
    box-shadow: 0 16px 32px rgba(97, 98, 254, 0.32) !important;
}

.employee-leave-submit-button:active,
button.employee-leave-submit-button:active,
.cm-form-actions .employee-leave-submit-button:active,
.employee-shell .cm-main button.employee-leave-submit-button:active {
    background: linear-gradient(to top, #4c4ddd 0%, #557adc 50%, #559bcf 100%) !important;
    border-color: transparent !important;
    transform: translateY(1px);
}

/* CM HRIS secure leave attachment buttons */
.employee-leaves-v2-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.employee-leaves-v2-attachment {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    justify-content: center;
    padding: 7px 10px;
    border-radius: 10px;
    background: #111827;
    color: #ffffff !important;
    font-size: 11px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

.employee-leaves-v2-attachment:hover {
    background: #020617;
}

.cm-leave-attachment-panel {
    margin: 14px 0;
}

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

.cm-secure-attachment-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 14px;
    background: rgba(248, 250, 252, 0.88);
}

.cm-secure-attachment-row strong {
    display: block;
    color: #111827;
    font-size: 13px;
    font-weight: 550;
    line-height: 1.25;
    word-break: break-word;
}

.cm-secure-attachment-row span {
    display: block;
    margin-top: 3px;
    color: #64748b;
    font-size: 11px;
    font-weight: 400;
}

.cm-secure-attachment-button {
    white-space: nowrap;
    background: #111827 !important;
    color: #ffffff !important;
    border-color: #111827 !important;
}

@media (max-width: 640px) {
    .employee-leaves-v2-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .employee-leaves-v2-attachment,
    .employee-leaves-v2-actions form,
    .employee-leaves-v2-actions button {
        width: 100%;
    }

    .cm-secure-attachment-row {
        align-items: stretch;
        flex-direction: column;
    }

    .cm-secure-attachment-button {
        width: 100%;
        justify-content: center;
    }
}

/* CM HRIS admin leave attachment action button */
.admin-leave-action-stack {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.admin-leave-attachment-action {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    justify-content: center;
    padding: 7px 10px;
    border-radius: 10px;
    background: #111827;
    color: #ffffff !important;
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}

.admin-leave-attachment-action:hover {
    background: #020617;
    color: #ffffff !important;
}

@media (max-width: 768px) {
    .admin-leave-action-stack {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-leave-attachment-action {
        width: 100%;
    }
}

/* CM HRIS leave attachment view button gradient */
.employee-leaves-v2-attachment,
.admin-leave-attachment-action,
.cm-secure-attachment-button {
    background: linear-gradient(to top, #6162FE 0%, #648EF0 50%, #66B1E5 100%) !important;
    border-color: transparent !important;
    color: #ffffff !important;
    box-shadow: 0 10px 20px rgba(97, 98, 254, 0.22) !important;
}

.employee-leaves-v2-attachment:hover,
.admin-leave-attachment-action:hover,
.cm-secure-attachment-button:hover {
    background: linear-gradient(to top, #5657ee 0%, #5d86e8 50%, #5da9dc 100%) !important;
    border-color: transparent !important;
    color: #ffffff !important;
    box-shadow: 0 12px 24px rgba(97, 98, 254, 0.30) !important;
}

.employee-leaves-v2-attachment:active,
.admin-leave-attachment-action:active,
.cm-secure-attachment-button:active {
    background: linear-gradient(to top, #4c4ddd 0%, #557adc 50%, #559bcf 100%) !important;
    border-color: transparent !important;
    transform: translateY(1px);
}

/* CM HRIS permanent user delete confirmation */
.cm-permanent-delete-user-form {
    display: inline-block;
    margin: 0;
}

.cm-delete-user-confirmation {
    position: relative;
    display: inline-block;
}

.cm-delete-user-confirmation > summary {
    list-style: none;
    cursor: pointer;
}

.cm-delete-user-confirmation > summary::-webkit-details-marker {
    display: none;
}

.cm-delete-user-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 40;
    width: min(360px, 88vw);
    padding: 14px;
    border: 1px solid rgba(220, 38, 38, 0.22);
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.18);
    color: #111827;
    text-align: left;
}

.cm-delete-user-panel strong {
    display: block;
    margin-bottom: 6px;
    color: #991b1b;
    font-size: 13px;
    font-weight: 700;
}

.cm-delete-user-panel p {
    margin: 0 0 10px;
    color: #6b7280;
    font-size: 12px;
    line-height: 1.5;
}

.cm-delete-user-panel label {
    display: block;
    margin-bottom: 10px;
}

.cm-delete-user-panel label span {
    display: block;
    margin-bottom: 4px;
    color: #374151;
    font-size: 12px;
    font-weight: 600;
}

.cm-delete-user-panel .cm-input {
    width: 100%;
    font-size: 12px;
}

/* CM HRIS employee active checkout transparent button start */
.employee-shell .attendance-buttons button[name="type"][value="check_out"]:not(:disabled),
.employee-shell .attendance-buttons .attendance-check-out:not(:disabled),
.employee-shell form[action*="attendance"] button[name="type"][value="check_out"]:not(:disabled),
.employee-shell form[action*="attendance"] button[value="check_out"]:not(:disabled),
.employee-shell button[data-attendance-action="check_out"]:not(:disabled),
.employee-shell .cm-attendance-check-out:not(:disabled),
.employee-shell .cm-button.check-out:not(:disabled) {
    background: transparent !important;
    background-image: none !important;
    color: #111827 !important;
    border: 4px solid #f97316 !important;
    box-shadow: none !important;
}

.employee-shell .attendance-buttons button[name="type"][value="check_out"]:not(:disabled) *,
.employee-shell .attendance-buttons .attendance-check-out:not(:disabled) *,
.employee-shell form[action*="attendance"] button[name="type"][value="check_out"]:not(:disabled) *,
.employee-shell form[action*="attendance"] button[value="check_out"]:not(:disabled) *,
.employee-shell button[data-attendance-action="check_out"]:not(:disabled) *,
.employee-shell .cm-attendance-check-out:not(:disabled) *,
.employee-shell .cm-button.check-out:not(:disabled) * {
    color: #111827 !important;
    stroke: #111827 !important;
    fill: none !important;
}

.employee-shell .attendance-buttons button[name="type"][value="check_out"]:not(:disabled):hover,
.employee-shell .attendance-buttons .attendance-check-out:not(:disabled):hover,
.employee-shell form[action*="attendance"] button[name="type"][value="check_out"]:not(:disabled):hover,
.employee-shell form[action*="attendance"] button[value="check_out"]:not(:disabled):hover,
.employee-shell button[data-attendance-action="check_out"]:not(:disabled):hover,
.employee-shell .cm-attendance-check-out:not(:disabled):hover,
.employee-shell .cm-button.check-out:not(:disabled):hover {
    background: rgba(249, 115, 22, 0.08) !important;
    background-image: none !important;
    color: #111827 !important;
    border-color: #f97316 !important;
    box-shadow: none !important;
}
/* CM HRIS employee active checkout transparent button end */