html,
body {
    min-height: 100%;
    font-family: var(--font-body);
}

/* Evaluation template configuration */
.evaluation-config-page {
    min-width: 0;
    padding-top: 0 !important;
}

.evaluation-config-page .evaluation-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

.evaluation-config-page .evaluation-template-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 410px);
    gap: 24px;
    align-items: end;
    margin-bottom: 14px !important;
    padding: 16px 20px 18px !important;
    border-radius: 8px !important;
}

.evaluation-config-page .evaluation-card-header {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 2px !important;
}

.evaluation-config-page .evaluation-card-title {
    font-weight: 700 !important;
}

.evaluation-config-page .evaluation-card-header .mud-button-root {
    border-radius: var(--radius-xs) !important;
}

.evaluation-config-page .evaluation-template-grid {
    min-width: 0;
}

.evaluation-config-page .evaluation-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(88px, 1fr));
    align-self: center;
    min-width: 0;
}

.evaluation-config-page .evaluation-summary__item {
    display: grid;
    gap: 6px;
    place-items: center;
    min-height: 62px;
    padding: 4px 18px;
    border-left: 1px solid var(--mud-palette-lines-default);
}

.evaluation-config-page .evaluation-summary__item:first-child {
    border-left: 0;
}

.evaluation-config-page .evaluation-summary__item span {
    color: var(--mud-palette-text-primary);
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1;
}

.evaluation-config-page .evaluation-summary__item small {
    color: var(--mud-palette-text-secondary);
    font-size: 0.82rem;
    font-weight: 600;
}

/* Employee evaluation create */
.employee-evaluation-create .evaluation-create-filter {
    border-radius: 8px !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06) !important;
}

.employee-evaluation-create .evaluation-create-filter .mud-grid-item {
    display: flex;
}

.employee-evaluation-create .evaluation-create-filter .select-paging,
.employee-evaluation-create .evaluation-create-field-shell {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.employee-evaluation-create .evaluation-create-filter .select-paging__label {
    min-height: 1.1rem;
    margin-bottom: 0.35rem;
}

.employee-evaluation-create .evaluation-create-field-shell .mud-input-control {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.employee-evaluation-create .evaluation-create-field .mud-input {
    height: 2.625rem !important;
    min-height: 2.625rem !important;
}

.employee-evaluation-create .evaluation-create-field .mud-input-slot {
    align-items: center !important;
    min-height: 0 !important;
}

.employee-evaluation-create .evaluation-create-field input {
    height: 100% !important;
    min-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.employee-evaluation-create .evaluation-create-summary-item {
    display: block !important;
}

.employee-evaluation-create .evaluation-create-summary-divider {
    width: 100%;
    margin: 0.85rem 0 1.35rem;
    border-color: #dfe7f1;
}

.employee-evaluation-create .evaluation-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-width: 0;
}

.employee-evaluation-create .evaluation-summary__title {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    min-width: 280px;
}

.employee-evaluation-create .evaluation-summary__title .mud-typography {
    color: #0f172a;
    font-size: 1rem;
    font-weight: 800;
}

.employee-evaluation-create .evaluation-summary__title-icon,
.employee-evaluation-create .evaluation-summary__metric-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 50%;
}

.employee-evaluation-create .evaluation-summary__title-icon {
    width: 54px;
    height: 54px;
    background: #eff6ff;
    color: #2563eb;
}

.employee-evaluation-create .evaluation-summary__title-icon .mud-icon-root {
    font-size: 1.7rem;
}

.employee-evaluation-create .evaluation-summary__metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(130px, 1fr));
    gap: 0.9rem;
    align-items: center;
}

.employee-evaluation-create .evaluation-summary__metric {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-height: 54px;
    padding: 0.5rem 0.85rem;
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 8px;
}

.employee-evaluation-create .evaluation-summary__metric span:not(.evaluation-summary__metric-icon) {
    display: block;
    color: #475569;
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1.2;
}

.employee-evaluation-create .evaluation-summary__metric b {
    display: block;
    margin-top: 0.1rem;
    color: #0f172a;
    font-size: 1.05rem;
    font-weight: 900;
    line-height: 1.1;
}

.employee-evaluation-create .evaluation-summary__metric-icon {
    width: 38px;
    height: 38px;
}

.employee-evaluation-create .evaluation-summary__metric-icon .mud-icon-root {
    font-size: 1.25rem;
}

.employee-evaluation-create .evaluation-summary__metric--score {
    background: linear-gradient(90deg, #eff6ff 0%, #f8fbff 100%);
}

.employee-evaluation-create .evaluation-summary__metric--score .evaluation-summary__metric-icon {
    background: #dbeafe;
    color: #2563eb;
}

.employee-evaluation-create .evaluation-summary__metric--average {
    background: linear-gradient(90deg, #ecfdf5 0%, #f7fffb 100%);
}

.employee-evaluation-create .evaluation-summary__metric--average .evaluation-summary__metric-icon {
    background: #d1fae5;
    color: #10b981;
}

.employee-evaluation-create .evaluation-summary__metric--percent {
    background: linear-gradient(90deg, #f5f3ff 0%, #fbfaff 100%);
}

.employee-evaluation-create .evaluation-summary__metric--percent .evaluation-summary__metric-icon {
    background: #ede9fe;
    color: #8b5cf6;
}

.employee-evaluation-create .evaluation-weight-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 34px;
    padding: 0 0.75rem;
    border-radius: 8px;
    background: #eff6ff;
    color: #2563eb;
    font-weight: 800;
    line-height: 1;
}

.employee-evaluation-create .evaluation-converted-score {
    display: inline-flex;
    justify-content: flex-end;
    min-width: 34px;
    color: #2563eb;
    font-size: 0.98rem;
    font-weight: 900;
}

.employee-evaluation-detail .evaluation-detail-summary-card {
    border-radius: 8px !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06) !important;
}

.employee-evaluation-detail .evaluation-detail-summary {
    padding: 1rem 1.4rem;
}

.employee-evaluation-detail .evaluation-detail-summary__top {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.2rem;
    align-items: center;
}

.employee-evaluation-detail .evaluation-detail-summary__bottom {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(520px, 1.6fr);
    gap: 1.2rem;
    align-items: center;
}

.employee-evaluation-detail .evaluation-detail-summary__divider {
    margin: 0.9rem 0;
    border-color: #e5eaf1;
}

.employee-evaluation-detail .evaluation-detail-info,
.employee-evaluation-detail .evaluation-detail-metric {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.employee-evaluation-detail .evaluation-detail-info__icon,
.employee-evaluation-detail .evaluation-detail-metric__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #eef3ff;
    color: #2563eb;
}

.employee-evaluation-detail .evaluation-detail-info__icon .mud-icon-root,
.employee-evaluation-detail .evaluation-detail-metric__icon .mud-icon-root {
    font-size: 1.25rem;
}

.employee-evaluation-detail .evaluation-detail-info span:not(.evaluation-detail-info__icon),
.employee-evaluation-detail .evaluation-detail-metric span:not(.evaluation-detail-metric__icon),
.employee-evaluation-detail .evaluation-detail-comment span {
    display: block;
    color: #1f2937;
    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1.2;
}

.employee-evaluation-detail .evaluation-detail-info b,
.employee-evaluation-detail .evaluation-detail-metric b,
.employee-evaluation-detail .evaluation-detail-comment b {
    display: block;
    margin-top: 0.25rem;
    color: #111827;
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.25;
    word-break: normal;
}

.employee-evaluation-detail .evaluation-detail-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(130px, 1fr));
    gap: 0.9rem;
    align-items: center;
}

.employee-evaluation-detail .evaluation-detail-metric {
    min-height: 54px;
    padding: 0.5rem 0.85rem;
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 8px;
}

.employee-evaluation-detail .evaluation-detail-metric b {
    font-size: 1.15rem;
    font-weight: 900;
    white-space: nowrap;
}

.employee-evaluation-detail .evaluation-detail-metric--score .evaluation-detail-metric__icon {
    background: #dbeafe;
    color: #2563eb;
}

.employee-evaluation-detail .evaluation-detail-metric--score {
    background: linear-gradient(90deg, #eff6ff 0%, #f8fbff 100%);
}

.employee-evaluation-detail .evaluation-detail-metric--average .evaluation-detail-metric__icon {
    background: #d1fae5;
    color: #10b981;
}

.employee-evaluation-detail .evaluation-detail-metric--average {
    background: linear-gradient(90deg, #ecfdf5 0%, #f7fffb 100%);
}

.employee-evaluation-detail .evaluation-detail-metric--percent .evaluation-detail-metric__icon {
    background: #ede9fe;
    color: #8b5cf6;
}

.employee-evaluation-detail .evaluation-detail-metric--percent {
    background: linear-gradient(90deg, #f5f3ff 0%, #fbfaff 100%);
}

.employee-evaluation-detail .evaluation-detail-comment {
    display: grid;
    gap: 0.2rem;
}

@media (max-width: 1199.98px) {
    .employee-evaluation-create .evaluation-summary {
        align-items: stretch;
        flex-direction: column;
    }

    .employee-evaluation-create .evaluation-summary__metrics {
        grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    }

    .employee-evaluation-create .evaluation-summary__title {
        min-width: 0;
    }

    .employee-evaluation-detail .evaluation-detail-summary {
        padding: 2rem;
    }

    .employee-evaluation-detail .evaluation-detail-summary__top {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .employee-evaluation-detail .evaluation-detail-summary__bottom {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .employee-evaluation-detail .evaluation-detail-summary {
        padding: 1.25rem;
    }

    .employee-evaluation-detail .evaluation-detail-summary__top,
    .employee-evaluation-detail .evaluation-detail-summary__bottom,
    .employee-evaluation-detail .evaluation-detail-metrics {
        grid-template-columns: 1fr;
    }

    .employee-evaluation-detail .evaluation-detail-summary__divider {
        margin: 1.4rem 0;
    }

    .employee-evaluation-detail .evaluation-detail-metric {
        padding: 0.5rem 0.85rem;
    }

    .employee-evaluation-create .evaluation-summary__metrics {
        grid-template-columns: 1fr;
    }
}

.evaluation-config-page .evaluation-workspace {
    display: grid;
    grid-template-columns: minmax(260px, 360px) minmax(420px, 1fr) minmax(520px, 1.35fr);
    gap: 14px;
    align-items: stretch;
    min-width: 0;
}

.evaluation-config-page .evaluation-panel {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 560px;
    overflow: hidden;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    background: var(--mud-palette-surface);
}

.evaluation-config-page .evaluation-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 56px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.evaluation-config-page .evaluation-panel__header .mud-typography {
    min-width: 0;
    overflow: hidden;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.evaluation-config-page .evaluation-list {
    display: grid;
    gap: 0;
    flex: 1 1 auto;
    align-content: start;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 6px;
}

.evaluation-config-page .evaluation-list-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 30px;
    gap: 4px;
    align-items: center;
    box-sizing: border-box;
    max-width: 100%;
    min-height: 72px;
    overflow: hidden;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.evaluation-config-page .evaluation-list-item.is-selected {
    margin: 0 0 8px;
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 45%, white);
    border-radius: 6px;
    background: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent);
}

.evaluation-config-page .evaluation-list-item__main {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    min-width: 0;
    padding: 10px 0 10px 12px;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.evaluation-config-page .evaluation-list-item__body {
    display: grid;
    gap: 4px;
    justify-items: start;
    min-width: 0;
}

.evaluation-config-page .evaluation-list-item__title {
    width: 100%;
    overflow: hidden;
    color: var(--mud-palette-text-primary);
    font-weight: 700;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.evaluation-config-page .evaluation-list-item.is-selected .evaluation-list-item__title {
    color: var(--mud-palette-primary);
}

.evaluation-config-page .evaluation-list-item__description,
.evaluation-config-page .evaluation-list-item__meta {
    width: 100%;
    overflow: hidden;
    color: var(--mud-palette-text-secondary);
    font-size: 0.84rem;
    font-weight: 600;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.evaluation-config-page .evaluation-list-item__actions {
    display: flex;
    justify-content: center;
    min-width: 0;
    padding-right: 4px;
}

.evaluation-config-page .evaluation-list-item__actions .mud-icon-button-label {
    justify-content: center;
}

.evaluation-config-page .evaluation-empty {
    display: grid;
    gap: 12px;
    place-items: center;
    flex: 1 1 auto;
    min-height: 220px;
    padding: 24px;
    text-align: center;
}

.evaluation-config-page .evaluation-table,
.evaluation-config-page .evaluation-level-table {
    min-width: 100%;
    overflow: hidden;
    border: 1px solid var(--color-line) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}

.evaluation-config-page .evaluation-table-shell {
    padding: 14px 14px 0;
}

.evaluation-config-page .evaluation-table .mud-table-container,
.evaluation-config-page .evaluation-level-table .mud-table-container {
    border-radius: inherit !important;
}

.evaluation-config-page .evaluation-panel .mud-table-head .mud-table-cell {
    height: 42px;
    background: color-mix(in srgb, var(--mud-palette-background) 82%, white);
    color: var(--mud-palette-text-primary);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.2;
}

.evaluation-config-page .evaluation-panel .mud-table-body .mud-table-row {
    height: 56px;
}

.evaluation-config-page .evaluation-panel .mud-table-cell {
    padding: 0.44rem 0.62rem !important;
    border-bottom: 1px solid var(--color-line-soft) !important;
}

.evaluation-config-page .evaluation-table .mud-table-body .mud-table-row:last-child .mud-table-cell,
.evaluation-config-page .evaluation-level-table .mud-table-body .mud-table-row:last-child .mud-table-cell {
    border-bottom: 0 !important;
}

.evaluation-config-page .evaluation-table .mud-table-root,
.evaluation-config-page .evaluation-level-table .mud-table-root {
    box-shadow: none !important;
}

.evaluation-config-page .evaluation-select-cell {
    cursor: pointer;
}

.evaluation-config-page .evaluation-row-button {
    display: grid;
    gap: 2px;
    max-width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.evaluation-config-page .evaluation-row-button span,
.evaluation-config-page .evaluation-row-button small {
    overflow: hidden;
    text-overflow: ellipsis;
}

.evaluation-config-page .evaluation-row-button span {
    font-weight: 700;
    white-space: nowrap;
}

.evaluation-config-page .evaluation-row-button small {
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.evaluation-config-page .evaluation-row-selected {
    background: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent);
    color: var(--mud-palette-primary);
    font-weight: 700;
}

.evaluation-config-page .evaluation-panel__footer {
    margin-top: auto;
    padding: 12px 16px 16px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.evaluation-config-page .evaluation-add-dashed {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 46px;
    border: 1px dashed color-mix(in srgb, var(--mud-palette-primary) 35%, var(--mud-palette-lines-default));
    border-radius: 6px;
    background: transparent;
    color: var(--mud-palette-primary);
    font-weight: 700;
    cursor: pointer;
}

.evaluation-config-page .evaluation-add-dashed:hover {
    background: color-mix(in srgb, var(--mud-palette-primary) 6%, transparent);
}

@media (max-width: 1399px) {
    .evaluation-config-page .evaluation-workspace {
        grid-template-columns: minmax(250px, 330px) minmax(0, 1fr);
    }

    .evaluation-config-page .evaluation-panel--levels {
        grid-column: 1 / -1;
    }
}

@media (max-width: 959px) {

    .evaluation-config-page .evaluation-template-card,
    .evaluation-config-page .evaluation-workspace {
        grid-template-columns: 1fr;
    }

    .evaluation-config-page .evaluation-header-actions {
        justify-content: flex-end;
        flex-wrap: wrap;
    }

    .evaluation-config-page .evaluation-template-card {
        display: block;
    }

    .evaluation-config-page .evaluation-card-header {
        margin-bottom: 14px !important;
    }

    .evaluation-config-page .evaluation-summary {
        margin-top: 14px;
    }

    .evaluation-config-page .evaluation-panel {
        min-height: auto;
    }
}

@media (max-width: 599px) {
    .evaluation-config-page .evaluation-header-actions {
        justify-content: stretch;
    }

    .evaluation-config-page .evaluation-header-actions>* {
        flex: 1 1 auto;
    }

    .evaluation-config-page .evaluation-summary {
        grid-template-columns: 1fr;
    }

    .evaluation-config-page .evaluation-summary__item {
        border-top: 1px solid var(--mud-palette-lines-default);
        border-left: 0;
    }

    .evaluation-config-page .evaluation-summary__item:first-child {
        border-top: 0;
    }

    .evaluation-config-page .evaluation-panel__header {
        align-items: flex-start;
        flex-direction: column;
    }
}

:root {
    --primary-600: #2859A4;
    --primary-700: #1F4783;
    --app-scrollbar-size: 4px;
    --app-scrollbar-thumb: rgba(148, 163, 184, 0.62);
    --app-scrollbar-thumb-hover: rgba(100, 116, 139, 0.72);
}

body,
.mud-layout {
    overflow-x: hidden;
}

html,
body,
* {
    scrollbar-color: var(--app-scrollbar-thumb) transparent;
    scrollbar-width: thin;
}

::-webkit-scrollbar,
*::-webkit-scrollbar {
    width: var(--app-scrollbar-size);
    height: var(--app-scrollbar-size);
}

::-webkit-scrollbar-track,
*::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-thumb {
    border-radius: var(--radius-pill);
    background: var(--app-scrollbar-thumb);
}

::-webkit-scrollbar-thumb:hover,
*::-webkit-scrollbar-thumb:hover {
    background: var(--app-scrollbar-thumb-hover);
}

a {
    color: inherit;
}

#app {
    min-height: 100vh;
}

#blazor-error-ui {
    color-scheme: light;
    background: rgba(16, 25, 52, 0.95);
    color: #f5f7fb;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(10px);
    box-sizing: border-box;
    display: none;
    left: 50%;
    right: auto;
    bottom: 1rem;
    width: min(52rem, calc(100vw - 2rem));
    transform: translateX(-50%);
    padding: 0.95rem 4rem 0.95rem 1rem;
    position: fixed;
    z-index: 2000;
}

#blazor-error-ui .reload {
    color: #a7bbff;
    font-weight: 700;
    margin-left: 0.5rem;
    text-decoration: none;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 1rem;
    top: 0.7rem;
    width: 1.75rem;
    height: 1.75rem;
    line-height: 1.7rem;
    text-align: center;
    border-radius: var(--radius-pill);
    color: #dce5f5;
    background: rgba(255, 255, 255, 0.06);
}

.text-danger {
    color: var(--color-danger-fg);
}

.mud-dialog-title {
    color: var(--primary-600) !important;
}

#app .app-boot-loader .loading-progress {
    position: absolute;
    inset: 0;
    display: block;
    width: 8rem;
    height: 8rem;
}

#app .app-boot-loader .loading-progress circle {
    fill: none;
    stroke: var(--color-line);
    stroke-width: 0.55rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}

#app .app-boot-loader .loading-progress circle:last-child {
    stroke: var(--color-primary);
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}

#app .app-boot-loader .loading-progress-text {
    text-align: center;
    font-weight: 800;
    font-size: 1rem;
    line-height: 1.4;
    color: var(--color-primary);
    margin-top: 1rem;
}

#app .app-boot-loader .loading-progress-text:after {
    content: var(--blazor-load-percentage-text, "Loading");
}

#app .app-boot-loader {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #ffffff;
}

#app .app-boot-loader__ring {
    position: relative;
    width: 8rem;
    height: 8rem;
    display: grid;
    place-items: center;
}

#app .app-boot-loader__logo {
    position: relative;
    z-index: 1;
    display: block;
    width: 3.6rem !important;
    height: 3.6rem !important;
    max-width: 3.6rem !important;
    max-height: 3.6rem !important;
    object-fit: contain;
}

.app-shell {
    min-height: 100vh;
    --app-shell-drawer-width: 265px;
    --mud-drawer-width-left: var(--app-shell-drawer-width);
}

.shell-topbar {
    position: static !important;
    width: calc(100% - var(--app-shell-drawer-width)) !important;
    margin-left: var(--app-shell-drawer-width) !important;
    height: 56px !important;
    max-height: 56px !important;
    padding: 0 !important;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.92) !important;
    border-bottom: 1px solid var(--color-line-soft);
    backdrop-filter: blur(20px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    transition: width 0.22s ease, margin-left 0.22s ease;
}

.shell-topbar .mud-toolbar {
    width: 100%;
    height: 56px;
    min-height: 56px !important;
    padding: 0 2rem 0 1.5rem;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    min-width: 0;
    gap: 0.75rem;
}

.shell-topbar .mud-typography-h5 {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.45;
    color: var(--color-text);
    text-transform: uppercase;
}

.shell-topbar__title {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding-block: 0.125rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shell-topbar__back-btn {
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    border-radius: var(--radius-sm) !important;
    color: var(--color-text-muted) !important;
    transition: all 0.2s ease !important;
}

.shell-topbar__back-btn:hover {
    background: var(--color-bg-soft) !important;
    color: var(--color-primary) !important;
}

.shell-topbar__divider {
    width: 1px;
    height: 18px;
    background-color: var(--color-line-soft);
    align-self: center;
}

.shell-search {
    display: flex;
    align-items: center;
    width: min(100%, 420px);
    padding: 0.4rem 0.9rem;
    border-radius: var(--radius-sm);
    background: var(--color-bg-soft);
    border: 1px solid var(--color-line);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.shell-search:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.08);
}

.shell-search__icon {
    color: var(--color-text-faint);
    margin-right: 0.55rem;
}

.shell-search__input {
    flex: 1;
}

.shell-search__input .mud-input-root,
.shell-search__input .mud-input-slot {
    background: transparent !important;
    padding: 0 !important;
}

.shell-topbar__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
    min-width: 0;
    flex: 0 1 auto;
    flex-wrap: nowrap;
}

.shell-action-btn {
    width: 38px !important;
    height: 38px !important;
    border-radius: var(--radius-sm) !important;
    background: var(--color-bg-soft) !important;
    color: var(--color-text-muted) !important;
    transition: all 0.2s ease !important;
}

.shell-action-btn:hover {
    background: var(--color-surface-deep) !important;
    color: var(--color-primary) !important;
}

.shell-attendance-btn {
    height: 38px !important;
    min-width: 0 !important;
    padding: 0 0.9rem !important;
    border-radius: var(--radius-sm) !important;
    background: rgba(37, 99, 235, 0.1) !important;
    color: var(--color-primary) !important;
    font-family: var(--font-heading) !important;
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    transition: background 0.2s ease, color 0.2s ease !important;
}

.shell-attendance-btn:hover {
    background: rgba(37, 99, 235, 0.16) !important;
    color: var(--color-primary) !important;
}

.shell-attendance-btn .mud-button-icon-start {
    margin-left: 0 !important;
    margin-right: 0.45rem !important;
}

.shell-attendance-btn .mud-icon-root {
    width: 1.12rem !important;
    height: 1.12rem !important;
    font-size: 1.12rem !important;
}

.shell-sidebar-toggle-item {
    width: 100%;
    min-height: 38px;
    margin: 0.12rem 0;
    padding: 0 0.5rem;
    border-radius: var(--radius-sm);
    border: 0;
    background: rgba(14, 42, 94, 0.28);
    color: rgba(255, 255, 255, 0.94);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.shell-sidebar-toggle-item:hover,
.shell-sidebar-toggle-item:focus-visible {
    background: rgba(14, 42, 94, 0.42);
    color: #ffffff;
    outline: none;
}

.shell-sidebar-toggle-icon {
    width: 1.1rem;
    height: 1.1rem;
    flex: 0 0 1.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: inherit;
}

.shell-sidebar-toggle-icon .mud-icon-root {
    width: 1.1rem !important;
    height: 1.1rem !important;
    font-size: 1.1rem !important;
    color: inherit !important;
}

.shell-sidebar-toggle-label {
    min-width: 0;
    color: inherit;
    font-family: var(--font-heading);
    font-size: 0.94rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.shell-user {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-left: 1rem;
    margin-left: 0.5rem;
    border-left: 1px solid var(--color-line);
    cursor: pointer;
    transition: opacity 0.2s ease;
    min-width: 0;
    max-width: min(100%, 320px);
    flex-shrink: 1;
}

.shell-user:hover {
    opacity: 0.85;
}

.shell-user__meta {
    display: flex;
    flex-direction: column;
    text-align: right;
    line-height: 1.3;
    min-width: 0;
}

.shell-user__role {
    color: var(--color-text-faint);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shell-user__name {
    color: var(--color-text);
    font-size: 0.9rem;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shell-user__avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    font-weight: 700;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    overflow: hidden;
    border: 2px solid #f1f5f9;
}

.shell-user__avatar img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #fff;
    display: block;
}

.shell-drawer {
    width: var(--app-shell-drawer-width) !important;
    top: 0 !important;
    height: 100vh !important;
    padding: 1.25rem 0.7rem 1rem;
    box-sizing: border-box;
    overflow-x: hidden;
    background: var(--color-primary);
    border-right: 0 !important;
    transition: width 0.22s ease, padding 0.22s ease;
}

.shell-brand {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.35rem 0.45rem 1.1rem;
    min-width: 0;
    transition: padding 0.22s ease;
}

.shell-brand__logo {
    width: 42px;
    height: 42px;
    border-radius: var(--radius-md);
    object-fit: contain;
    background: #fff;
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.16);
}

.shell-brand__title {
    font-family: var(--font-heading);
    font-size: 1.55rem;
    font-weight: 800;
    color: #fff;
    line-height: 1;
    overflow-wrap: anywhere;
    transition: opacity 0.16s ease;
}

.shell-brand__subtitle {
    margin-top: 0.24rem;
    color: rgba(255, 255, 255, 0.85);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.54rem;
    font-weight: 700;
    overflow-wrap: anywhere;
    transition: opacity 0.16s ease;
}

.shell-nav {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    margin-right: -1.25rem;
    padding-right: 1.25rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
    transition: margin 0.22s ease, padding 0.22s ease;
}

.shell-nav--mobile {
    display: none;
}

.shell-nav--desktop {
    position: relative;
    overflow: hidden;
}

.shell-nav__layer {
    position: absolute;
    inset: 0;
    min-width: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 1.25rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-0.35rem);
    transition:
        opacity 0.14s ease,
        transform 0.16s ease,
        visibility 0s linear 0.16s;
}

.shell-nav__layer--expanded {
    transform: translateX(0.35rem);
}

.app-shell--nav-compact .shell-nav__layer--collapsed,
.app-shell:not(.app-shell--nav-compact) .shell-nav__layer--expanded {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0);
    transition-delay: 0s;
}

.shell-nav::-webkit-scrollbar,
.shell-nav__layer::-webkit-scrollbar {
    width: 2px;
}

.shell-nav::-webkit-scrollbar-track,
.shell-nav__layer::-webkit-scrollbar-track {
    background: transparent;
}

.shell-nav::-webkit-scrollbar-thumb,
.shell-nav__layer::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-pill);
}

.shell-nav:hover::-webkit-scrollbar-thumb,
.shell-nav__layer:hover::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
}

.shell-navmenu {
    gap: 0.25rem;
}

.shell-navmenu__group .shell-navmenu__group-toggle {
    padding: 0 0.5rem;
}

.shell-navmenu .mud-nav-link,
.shell-navmenu__group-toggle {
    min-height: 38px;
    margin: 0.12rem 0;
    border-radius: var(--radius-sm);
    color: rgba(255, 255, 255, 0.92);
    font-weight: 600;
    min-width: 0;
    box-sizing: border-box;
    transition: 0.2s ease;
}

.shell-navmenu .shell-navmenu__dashboard>.mud-nav-link {
    display: flex !important;
    align-items: center;
    width: 100%;
    min-height: 38px;
    margin: 0;
    padding: 0 0.5rem !important;
    box-sizing: border-box;
    font-family: var(--font-heading);
    font-size: 0.94rem;
    line-height: 1.2;
}

.shell-navmenu .shell-navmenu__dashboard>.mud-nav-link .mud-nav-link-text {
    width: auto;
    text-align: left;
    margin-left: 0 !important;
    margin-inline-start: 0 !important;
    font-size: 0.94rem !important;
    line-height: 1.2;
}

.shell-navmenu .shell-navmenu__dashboard>.mud-nav-link .mud-nav-link-icon {
    flex: 0 0 1.2rem;
    margin: 0 0.65rem 0 0 !important;
}

.shell-navmenu .mud-nav-link .mud-nav-link-icon,
.shell-navmenu__group-toggle .mud-icon-root {
    width: 1.1rem !important;
    height: 1.1rem !important;
    font-size: 1.1rem !important;
}

.shell-navmenu .mud-nav-link .mud-nav-link-icon,
.shell-navmenu .mud-nav-link .mud-nav-link-text,
.shell-navmenu__group-toggle .mud-icon-root,
.shell-navmenu__group-toggle span {
    color: inherit !important;
}

.shell-navmenu .mud-nav-link .mud-nav-link-text,
.shell-navmenu__group-toggle span {
    font-weight: 600 !important;
    min-width: 0;
    white-space: wrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
    overflow-wrap: normal;
    /* line-height: 1.25; */
}

.shell-navmenu .mud-nav-link:hover,
.shell-navmenu__group-toggle:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.shell-navmenu .mud-nav-link:focus-visible,
.shell-navmenu__group-toggle:focus-visible {
    outline: none;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
}

.shell-navmenu .mud-nav-link.active {
    position: relative;
    background: rgba(255, 255, 255, 0.12) !important;
    background-color: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.shell-navmenu .mud-nav-link.active .mud-nav-link-icon,
.shell-navmenu .mud-nav-link.active .mud-nav-link-text {
    color: #ffffff !important;
    font-weight: 600 !important;
}

.shell-navmenu__group {
    margin: 0.22rem 0;
    min-width: 0;
}

.shell-navmenu__group-toggle {
    width: 100%;
    border: 0;
    background: transparent;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-family: var(--font-heading);
    font-size: 0.94rem;
    font-weight: 600;
    cursor: pointer;
}

.shell-navmenu__chevron {
    flex: 0 0 auto;
    margin-left: auto;
    transition: transform 0.25s ease;
}

.shell-navmenu__group.is-open .shell-navmenu__chevron {
    transform: rotate(180deg);
}

.shell-navmenu__group-items {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.25s ease;
    margin-left: 0.65rem;
    border-left: 1px solid rgba(255, 255, 255, 0.14);
    min-width: 0;
}

.shell-navmenu__group-items>* {
    overflow: hidden;
    min-width: 0;
}

.shell-navmenu__group-items.is-open {
    grid-template-rows: 1fr;
}

.shell-navmenu__group-items .mud-nav-link {
    display: flex !important;
    align-items: center !important;
    min-height: 32px;
    margin: 0.16rem 0.35rem;
    padding-inline: 0.62rem 0.35rem;
    padding-block: 0 !important;
    font-size: 0.86rem;
    font-weight: 500;
}

.shell-navmenu__group-items .mud-nav-link .mud-nav-link-icon {
    display: none !important;
}

.shell-navmenu__group-items .mud-nav-link.active {
    background: rgba(255, 255, 255, 0.08) !important;
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
    box-shadow: inset 0 0 0 1px rgba(214, 229, 255, 0.58);
}

.shell-navmenu__group-items .mud-nav-link .mud-nav-link-text {
    font-weight: 500 !important;
}

.shell-navmenu__group-items .mud-nav-link.active .mud-nav-link-text {
    color: #ffffff !important;
    font-weight: 600 !important;
}

.shell-navmenu--collapsed {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
}

.shell-navmenu--collapsed .shell-navmenu__group {
    width: 100%;
    margin: 0.25rem 0;
    display: flex;
    justify-content: center;
}

.shell-navmenu--collapsed .shell-navmenu__collapsed-menu {
    width: 100%;
    display: flex;
    justify-content: center;
}

.shell-navmenu--collapsed .shell-navmenu__group>.mud-tooltip-root {
    width: 100%;
    display: flex;
    justify-content: center;
}

.shell-navmenu--collapsed .shell-navmenu__collapsed-link {
    width: 100%;
    display: flex;
    justify-content: center;
}

.shell-navmenu--collapsed .shell-navmenu__collapsed-link>.mud-nav-link,
.shell-navmenu__collapsed-trigger {
    width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0 !important;
    margin: 0 auto;
    border: 0 !important;
    border-radius: var(--radius-sm);
    background: transparent;
    box-shadow: none !important;
    color: rgba(255, 255, 255, 0.92);
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer;
    transition: 0.2s ease;
    outline: none !important;
}

.shell-navmenu--collapsed .shell-navmenu__collapsed-link>.mud-nav-link {
    flex: 0 0 44px;
    line-height: 1;
}

.shell-navmenu--collapsed .shell-navmenu__collapsed-link>.mud-nav-link:hover,
.shell-navmenu__collapsed-trigger:hover,
.shell-navmenu--collapsed .shell-navmenu__collapsed-link>.mud-nav-link.active,
.shell-navmenu__collapsed-trigger.is-active {
    background: rgba(255, 255, 255, 0.14) !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #ffffff !important;
    outline: none !important;
}

.shell-navmenu--collapsed .shell-navmenu__collapsed-link .mud-nav-link-icon,
.shell-navmenu__collapsed-trigger .mud-icon-root {
    width: 1.35rem !important;
    height: 1.35rem !important;
    font-size: 1.35rem !important;
    color: inherit !important;
    margin: 0 !important;
}

.shell-navmenu--collapsed .shell-navmenu__collapsed-link .mud-nav-link-text {
    display: none !important;
}

.shell-navmenu-popover__title {
    padding: 0.75rem 1rem 0.45rem;
    color: var(--color-text-muted);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.shell-navmenu-popover__item {
    min-height: 36px !important;
    color: var(--color-text) !important;
    font-size: 0.92rem !important;
    font-weight: 500 !important;
}

.shell-navmenu-popover__item.is-active {
    color: var(--color-primary) !important;
    font-weight: 700 !important;
}

.shell-drawer__footer {
    display: flex;
    justify-content: center;
    margin-top: auto;
    padding: 1rem 0.5rem 0;
    flex-shrink: 0;
}

.shell-drawer__footer .mud-tooltip-root {
    width: 100%;
}

.shell-upgrade {
    padding: 1.2rem;
    border-radius: var(--radius-md);
    color: rgba(255, 255, 255, 0.82);
    background: linear-gradient(135deg, var(--color-primary-soft) 0%, var(--color-primary) 100%);
    box-shadow: 0 18px 30px rgba(37, 61, 144, 0.22);
}

.shell-upgrade__title {
    color: #fff;
    font-family: var(--font-heading);
    font-weight: 800;
    margin-bottom: 0.35rem;
}

.shell-upgrade__text {
    font-size: 0.82rem;
    line-height: 1.45;
}

.shell-footer-link {
    justify-content: flex-start !important;
    color: var(--color-text-muted) !important;
    padding-inline: 0.2rem !important;
    margin-top: 0.7rem;
}

.shell-footer-link--danger {
    color: var(--color-danger-fg) !important;
}

.shell-content {
    margin-left: var(--app-shell-drawer-width);
    min-height: calc(100vh - 56px);
    padding-top: 0 !important;
    background: #ffffff !important;
    transition: margin-left 0.22s ease;
}

.shell-content__inner {
    padding: var(--space-page-y) var(--space-page-x) 0;
    min-height: calc(100vh - 56px);
    background: #ffffff;
}

.shell-content__inner>.mud-container {
    max-width: 100% !important;
}

.app-page {
    padding: 0 0 var(--space-page-bottom) !important;
}

.app-page--medium {
    max-width: 960px !important;
}

.app-filter-card,
.app-section-card,
.app-data-card--padded {
    padding: var(--space-card) !important;
}

.app-filter-card {
    margin-bottom: var(--space-section-gap) !important;
}

.app-section-card {
    margin-bottom: var(--space-section-gap) !important;
}

.app-data-card {
    overflow: hidden;
}

.app-state {
    padding: var(--space-state);
}

.app-empty-text {
    padding: var(--space-card) !important;
}

.app-table-page {
    min-width: 0;
}

.app-table-toolbar {
    margin-bottom: var(--space-section-gap) !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

.app-table-toolbar__filters,
.app-table-toolbar__actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

/* Limit max width of text fields in toolbar to keep search boxes uniform */
.app-table-toolbar__search-field {
    width: 560px !important;
    max-width: 560px !important;
    min-width: 360px !important;
    flex: 0 1 560px !important;
}

/* Standardize dropdown selector width in toolbar */
.app-table-toolbar .mud-select,
.app-table-toolbar .mud-input-control.mud-select {
    /*    width: 220px !important;*/
    min-width: 220px !important;
    /*    flex: 0 0 auto;*/
}

.employee-evaluations-filter {
    display: flex;
    /* flex-wrap: wrap; */
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    min-width: 0;
}

.employee-evaluations-filter__date {
    flex: 0 0 220px;
}

.employee-evaluations-filter__template {
    flex: 0 0 280px;
}

.employee-evaluations-filter__employee {
    flex: 1 1 360px;
    min-width: 280px;
}

.app-table-toolbar__filters {
    justify-content: flex-start;
}

.app-table-toolbar__actions {
    justify-content: flex-end;
}

.app-table-toolbar .mud-input-outlined,
.app-table-toolbar .mud-input-outlined>.mud-input-outlined-border,
.app-table-toolbar .mud-input-control .mud-input-slot {
    border-radius: var(--radius-xs) !important;
}

.app-table-toolbar .mud-input-outlined {
    overflow: hidden;
}

.app-table-toolbar .mud-button-root:not(.mud-switch-base) {
    border-radius: var(--radius-xs) !important;
    min-height: 42px;
    padding-inline: 1.2rem;
}

.positions-page .app-table-toolbar__search-field {
    width: 420px !important;
    max-width: 420px !important;
    min-width: 240px !important;
    flex: 1 1 420px !important;
}

.positions-page .app-table-toolbar .mud-select,
.positions-page .app-table-toolbar .mud-input-control.mud-select {
    width: 210px !important;
    max-width: 220px !important;
    min-width: 190px !important;
    flex: 0 0 210px !important;
}

.positions-page .positions-toolbar__add-button {
    width: auto !important;
    max-width: 190px !important;
    white-space: nowrap;
    padding-inline: 0.95rem !important;
}

.leave-my-requests-toolbar__balance {
    flex: 0 0 170px !important;
    width: 170px !important;
    min-width: 170px !important;
}

.leave-my-requests-toolbar .leave-my-requests-toolbar__field,
.leave-my-requests-toolbar .mud-input-control.leave-my-requests-toolbar__field,
.leave-my-requests-toolbar .mud-select.leave-my-requests-toolbar__field {
    flex: 0 0 240px !important;
    width: 240px !important;
    min-width: 220px !important;
    max-width: 240px !important;
}

.app-table-card {
    overflow: hidden;
}

.app-table-card__body {
    position: relative;
    min-width: 0;
}

.app-table-card__overlay {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.68);
    pointer-events: auto;
}

.app-table-card {
    scrollbar-color: var(--app-scrollbar-thumb) transparent;
    scrollbar-width: thin;
}

.app-table-card *::-webkit-scrollbar {
    width: var(--app-scrollbar-size);
    height: var(--app-scrollbar-size);
}

.app-table-card *::-webkit-scrollbar-track {
    background: transparent;
}

.app-table-card *::-webkit-scrollbar-thumb {
    border-radius: var(--radius-pill);
    background: var(--app-scrollbar-thumb);
}

.app-table-card *::-webkit-scrollbar-thumb:hover {
    background: var(--app-scrollbar-thumb-hover);
}

.app-table-container {
    width: 100%;
}

.app-table-container--scroll {
    min-height: 0;
    overflow-x: auto;
}

.app-table {
    width: 100%;
}

.app-table--horizontal-scroll .mud-table-cell {
    white-space: nowrap;
}

.app-table--horizontal-scroll .mud-table-root {
    min-width: var(--app-table-min-width, max-content);
}

.app-table .mud-table-cell {
    vertical-align: middle;
}

.app-table-cell {
    vertical-align: middle;
}

.app-table .app-table-header,
.app-table .mud-table-head .mud-table-cell {
    color: var(--color-text);
    font-weight: 600;
    background: var(--color-bg-soft);
    text-transform: uppercase;
}

.app-table--compact .mud-table-cell,
.app-table--review .mud-table-cell {
    padding: 0.44rem 0.75rem !important;
}

.app-table--compact .mud-table-head .mud-table-cell,
.app-table--review .mud-table-head .mud-table-cell {
    padding-top: 0.48rem !important;
    padding-bottom: 0.48rem !important;
}

.app-table--clickable-rows .mud-table-body .mud-table-row {
    cursor: pointer;
}

.contract-template-fields-table {
    border: 1px solid var(--color-line);
    border-radius: var(--radius-sm) !important;
    box-shadow: none !important;
    overflow: hidden;
}

.contract-template-fields-table .mud-table-container {
    border-radius: inherit !important;
}

.contract-template-fields-table .mud-table-body .mud-table-row:last-child .mud-table-cell {
    border-bottom: 0 !important;
}

.contract-template-field-required-cell {
    text-align: center;
}

.contract-template-field-required-cell .mud-switch {
    margin: 0;
}

.contract-template-field-required-cell .mud-switch-base.mud-button-root {
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 9px !important;
    border-radius: 50% !important;
}

.app-table-cell-main {
    color: var(--color-text);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.35;
}

.app-table-cell-sub {
    color: var(--color-text-muted);
    font-size: 0.76rem;
    line-height: 1.35;
}

.app-table-actions {
    width: 1%;
    white-space: nowrap;
    text-align: center;
}

.app-table-actions .mud-icon-button,
.app-table-action-button {
    width: 2rem !important;
    height: 2rem !important;
    padding: 0.25rem !important;
}

.employee-contracts-approval-cell {
    text-align: center;
}

.employee-contracts-approval-cell .mud-typography {
    display: block;
    text-align: center;
}

.employee-contracts-approval-cell .workflow-progress {
    margin-right: auto;
    margin-left: auto;
}

.app-table--sticky-actions .app-table-actions {
    position: sticky;
    right: 0;
    z-index: 2;
    min-width: 8.25rem;
    background: var(--color-surface);
    box-shadow: -1px 0 0 var(--color-line-soft);
}

.app-table--sticky-actions .mud-table-head .app-table-actions {
    z-index: 4;
    background: var(--color-bg-soft);
}

.app-table--sticky-actions .mud-table-row:hover .app-table-actions {
    background: #fafcff;
}

.app-data-grid {
    width: 100%;
}

.app-data-grid .mud-table-container {
    min-height: 0;
}

.app-data-grid--scroll-x .mud-table-cell {
    white-space: nowrap;
}

.app-data-grid--scroll-x .mud-table-root {
    min-width: var(--app-data-grid-min-width, max-content);
    overflow: visible;
    background: transparent;
}

.app-data-grid--fill-x.app-data-grid--scroll-x .mud-table,
.app-data-grid--fill-x.app-data-grid--scroll-x .mud-table-root,
.app-data-grid--fill-x.app-data-grid--scroll-x .mud-table-container {
    width: 100%;
    min-width: var(--app-data-grid-min-width, 0px);
}

.app-data-grid-fill-column {
    width: auto !important;
    min-width: 24px !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
    background: #ffffff;
}

.app-data-grid .mud-table-head .app-data-grid-fill-column {
    background: var(--color-bg-soft);
}

.app-data-grid .mud-table-cell {
    vertical-align: middle;
}

.app-data-grid .app-table-header,
.app-data-grid .mud-table-head .mud-table-cell {
    color: var(--color-text);
    font-weight: 600;
    background: var(--color-bg-soft);
}

.app-data-grid--compact .mud-table-cell {
    padding: 0.44rem 0.75rem !important;
}

.app-data-grid--compact .mud-table-head .mud-table-cell {
    padding-top: 0.48rem !important;
    padding-bottom: 0.48rem !important;
}

.app-data-grid-actions {
    position: sticky !important;
    right: 0;
    z-index: 2;
    width: 148px;
    min-width: 148px;
    white-space: nowrap;
    text-align: center;
    background: #ffffff;
    box-shadow: -1px 0 0 var(--color-line-soft);
}

.app-data-grid-actions.app-data-grid-actions--single {
    width: 96px;
    min-width: 96px;
}

.app-data-grid .mud-table-head .app-data-grid-actions {
    z-index: 4;
    background: var(--color-bg-soft);
}

.app-data-grid .mud-table-body .mud-table-cell.sticky-right.app-data-grid-actions {
    background-color: #ffffff;
}

.app-data-grid .mud-table-head .mud-table-cell.sticky-right.app-data-grid-actions {
    background-color: var(--color-bg-soft);
}

.app-data-grid .mud-table-head .app-data-grid-actions .column-header {
    justify-content: center;
}

.app-data-grid .mud-table-head .app-data-grid-center .column-header,
.app-data-grid .mud-table-head .app-data-grid-center .column-header>span,
.app-data-grid .mud-table-body .app-data-grid-center {
    justify-content: center !important;
    text-align: center !important;
}

.app-data-grid .mud-table-body .app-data-grid-center .app-badge {
    margin-left: auto;
    margin-right: auto;
}

.app-data-grid .mud-table-row:hover .app-data-grid-actions {
    background: #ffffff;
}

.app-data-grid-actions .mud-icon-button {
    width: 2rem !important;
    height: 2rem !important;
    padding: 0.25rem !important;
}

.attendance-history-grid__center {
    text-align: center !important;
}

.app-data-grid .mud-table-head .attendance-history-grid__center .column-header,
.app-data-grid .mud-table-head .attendance-history-grid__center .column-header>span,
.app-data-grid .mud-table-body .attendance-history-grid__center {
    justify-content: center !important;
    text-align: center !important;
}

.app-data-grid .mud-table-body .attendance-history-grid__center .mud-tooltip-root,
.app-data-grid .mud-table-body .attendance-history-grid__center .mud-chip,
.app-data-grid .mud-table-body .attendance-history-grid__center .app-badge {
    margin-left: auto;
    margin-right: auto;
}

.app-table-loading-content {
    display: flex;
    min-height: 8rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
}

.app-table-empty {
    display: block;
    padding: 1.25rem 1rem !important;
    color: var(--color-text-muted);
    text-align: center;
}

.app-table-error {
    padding: 1rem;
}

.app-table-state {
    padding: 1.25rem;
}

.app-table-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    width: 100%;
    min-height: 2.75rem;
    margin-top: 0.25rem;
    padding: 0.45rem 0.75rem !important;
    border-top: 1px solid var(--color-line-soft);
    background: transparent !important;
    box-shadow: none !important;
}

.app-table-pagination__info {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem 0.7rem;
    min-width: 0;
}

.app-table-pagination__size {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    white-space: nowrap;
}

.app-table-pagination__label {
    color: var(--color-text-muted);
    font-weight: 500;
    line-height: 1.25;
}

.app-table-pagination__select {
    width: 5.75rem;
    flex: 0 0 auto;
}

.app-table-pagination__select .mud-input-control {
    margin: 0 !important;
}

.app-table-pagination__select .mud-input {
    min-height: 2rem;
    font-size: 0.8125rem;
    border-radius: 999px !important;
}

.app-table-pagination__select .mud-input-slot {
    padding-top: 0.28rem !important;
    padding-bottom: 0.28rem !important;
}

.app-table-pagination__range {
    color: var(--color-primary);
    font-weight: 600;
    line-height: 1.25;
    white-space: nowrap;
}

.app-table-pagination__nav {
    flex: 0 0 auto;
}

.app-table-pagination__nav .mud-pagination {
    gap: 0.2rem;
}

.app-table-pagination__nav .mud-pagination-item {
    margin: 0 !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
}

.app-table-pagination__nav .mud-button-root {
    min-width: 2.25rem !important;
    width: 2.25rem !important;
    min-height: 2.25rem !important;
    height: 2.25rem !important;
    padding: 0 !important;
    border-radius: 0.65rem !important;
    flex: 0 0 2.25rem !important;
}

.app-table-pagination__nav .mud-pagination-item:not(.mud-selected-item) {
    color: var(--color-text-muted);
    border-color: var(--color-line-soft);
    background: transparent;
}

.app-table-pagination__nav .mud-pagination-item.mud-selected-item {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 28%, transparent) !important;
}

.app-table-pagination__nav .mud-button-root.mud-selected-item {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 28%, transparent) !important;
}

.app-table-pagination__nav .mud-icon-root {
    font-size: 1.15rem !important;
}

.select-paging {
    position: relative;
    width: 100%;
    min-width: 0;
}

.select-paging.is-open {
    z-index: 1300;
}

.select-paging__label {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--color-text);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.25;
}

.select-paging__control {
    position: relative;
    min-width: 0;
}

.select-paging__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    min-height: 2.625rem;
    padding: 0.45rem 2.35rem 0.45rem 0.75rem;
    border: 1px solid var(--color-line-soft);
    border-radius: var(--radius-xs);
    background: var(--mud-palette-surface, #fff);
    color: var(--color-text);
    cursor: pointer;
    text-align: left;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.select-paging__trigger:hover,
.select-paging.is-open .select-paging__trigger {
    border-color: color-mix(in srgb, var(--color-primary) 52%, var(--color-line-soft));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 12%, transparent);
}

.select-paging__trigger:disabled {
    cursor: not-allowed;
    opacity: 0.68;
}

.select-paging__trigger.has-value {
    padding-right: 3.85rem;
}

.select-paging.is-readonly .select-paging__trigger {
    cursor: default;
    background: color-mix(in srgb, var(--mud-palette-surface, #fff) 88%, var(--color-line-soft));
}

.select-paging__value,
.select-paging__placeholder {
    display: block;
    min-width: 0;
    overflow: hidden;
    font-size: 0.875rem;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.select-paging__placeholder {
    color: var(--color-text-muted);
}

.select-paging__chevron {
    position: absolute;
    right: 0.7rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    color: var(--color-text-muted);
    pointer-events: none;
}

.select-paging__clear {
    position: absolute;
    top: 50%;
    right: 2.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: 0;
    border-radius: var(--radius-xs);
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    transform: translateY(-50%);
}

.select-paging__clear:hover {
    background: color-mix(in srgb, var(--color-line-soft) 70%, transparent);
    color: var(--color-text);
}

.select-paging__clear .mud-icon-root,
.select-paging__chevron .mud-icon-root {
    font-size: 1.15rem;
}

.select-paging__backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: transparent;
}

.select-paging__dropdown {
    position: absolute;
    top: calc(100% + 0.35rem);
    right: 0;
    left: 0;
    z-index: 1001;
    display: flex;
    min-width: 18rem;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--color-line-soft);
    border-radius: var(--radius-xs);
    background: var(--mud-palette-surface, #fff);
    box-shadow: 0 0.85rem 2rem rgba(15, 23, 42, 0.16);
}

.select-paging__dropdown.is-open-up {
    top: auto;
    bottom: calc(100% + 0.35rem);
}

.mud-dialog:has(.select-paging.is-open),
.mud-dialog-content:has(.select-paging.is-open),
.mud-paper:has(.select-paging.is-open),
.app-section-card:has(.select-paging.is-open),
.app-data-card:has(.select-paging.is-open) {
    overflow: visible !important;
}

.workflow-viewer-card {
    overflow: hidden;
}

.workflow-viewer-card hrm-workflow-viewer {
    display: block;
    width: 100%;
    min-height: 420px;
}

.select-paging__search {
    flex: 0 0 auto;
    padding: 0.65rem;
    border-bottom: 1px solid var(--color-line-soft);
}

.select-paging__search-input,
.select-paging__search-input .mud-input-control {
    width: 100%;
    margin: 0 !important;
}

.select-paging__progress {
    flex: 0 0 auto;
}

.select-paging__body {
    flex: 1 1 auto;
    min-height: 3.5rem;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-color: color-mix(in srgb, var(--color-text-muted) 48%, transparent) transparent;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
}

.select-paging__body::-webkit-scrollbar {
    width: 0.5rem;
}

.select-paging__body::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-text-muted) 42%, transparent);
}

.select-paging__body::-webkit-scrollbar-track {
    background: transparent;
}

.select-paging__list {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.35rem;
}

.select-paging__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    width: 100%;
    min-height: 2.4rem;
    padding: 0.5rem 0.65rem;
    border: 0;
    border-radius: var(--radius-xs);
    background: transparent;
    color: var(--color-text);
    cursor: pointer;
    font-size: 0.875rem;
    line-height: 1.35;
    text-align: left;
}

.select-paging__item:hover:not(:disabled) {
    background: color-mix(in srgb, var(--color-primary) 9%, transparent);
}

.select-paging__item.is-selected {
    background: color-mix(in srgb, var(--color-primary) 13%, transparent);
    color: var(--color-primary);
    font-weight: 600;
}

.select-paging__item:disabled {
    cursor: wait;
    opacity: 0.62;
}

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

.select-paging__item-check {
    flex: 0 0 auto;
    color: var(--color-primary);
    font-size: 1.1rem !important;
}

.select-paging__state {
    display: flex;
    min-height: 4.5rem;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.9rem;
    color: var(--color-text-muted);
    font-size: 0.875rem;
    line-height: 1.35;
    text-align: center;
}

.select-paging__state--error {
    color: var(--mud-palette-error, #d32f2f);
}

.select-paging__pagination {
    flex: 0 0 auto;
    border-top: 1px solid var(--color-line-soft);
    background: var(--mud-palette-surface, #fff);
}

.select-paging__pagination.is-disabled {
    pointer-events: none;
    opacity: 0.62;
}

.select-paging__pagination .app-table-pagination {
    min-height: 2.5rem;
    margin-top: 0;
    padding: 0.4rem 0.55rem !important;
    border-top: 0;
}

.select-paging-dialog-trigger .select-paging__chevron .mud-icon-root {
    font-size: 1rem;
}

.select-paging-dialog {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 0.45fr);
    gap: 1rem;
    min-height: 28rem;
}

.select-paging-dialog__panel {
    display: flex;
    min-width: 0;
    min-height: 28rem;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--color-line-soft);
    border-radius: var(--radius-xs);
    background: var(--mud-palette-surface, #fff);
}

.select-paging-dialog__panel-header {
    display: flex;
    min-height: 3rem;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 0.9rem;
    border-bottom: 1px solid var(--color-line-soft);
    background: color-mix(in srgb, var(--color-primary) 4%, transparent);
}

.select-paging-dialog__panel-header .mud-typography {
    min-width: 0;
}

.select-paging-dialog__count {
    display: inline-flex;
    flex: 0 0 auto;
    min-width: 1.55rem;
    height: 1.55rem;
    align-items: center;
    justify-content: center;
    padding: 0 0.45rem;
    border-radius: 999px;
    background: var(--mud-palette-primary, var(--color-primary));
    color: var(--mud-palette-primary-text, #fff);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
}

.select-paging-dialog__search {
    padding: 0.75rem 0.9rem;
    border-bottom: 1px solid var(--color-line-soft);
}

.select-paging-dialog__list,
.select-paging-dialog__selected-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 0.45rem;
}

.select-paging-dialog__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    min-height: 2.8rem;
    padding: 0.55rem 0.65rem;
    border: 0;
    border-radius: var(--radius-xs);
    background: transparent;
    color: var(--color-text);
    cursor: pointer;
    text-align: left;
}

.select-paging-dialog__item:hover:not(:disabled) {
    background: color-mix(in srgb, var(--color-primary) 9%, transparent);
}

.select-paging-dialog__item.is-selected {
    background: color-mix(in srgb, var(--color-primary) 13%, transparent);
    color: var(--color-primary);
    font-weight: 600;
}

.select-paging-dialog__item:disabled {
    cursor: not-allowed;
    opacity: 0.72;
}

.select-paging-dialog__item-main {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.15rem;
}

.select-paging-dialog__item-text,
.select-paging-dialog__selected-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.select-paging-dialog__item-reason {
    overflow: hidden;
    color: var(--mud-palette-warning, #ff9800);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.select-paging-dialog__item-icon {
    flex: 0 0 auto;
    color: var(--color-primary);
    font-size: 1.1rem !important;
}

.select-paging-dialog__item-icon.is-warning {
    color: var(--mud-palette-warning, #ff9800);
}

.select-paging-dialog__selected-item {
    display: flex;
    min-height: 2.65rem;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.45rem 0.35rem 0.45rem 0.65rem;
    border-bottom: 1px solid color-mix(in srgb, var(--color-line-soft) 70%, transparent);
}

.select-paging-dialog__selected-item:last-child {
    border-bottom: 0;
}

.select-paging-dialog__state {
    display: flex;
    min-height: 5rem;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.9rem;
    color: var(--color-text-muted);
    font-size: 0.875rem;
    line-height: 1.35;
    text-align: center;
}

.select-paging-dialog__state--error {
    color: var(--mud-palette-error, #d32f2f);
}

.select-paging-dialog__panel .select-paging__pagination {
    border-top: 1px solid var(--color-line-soft);
}

/* Role groups page */
.role-groups-card {
    padding: 1rem !important;
}

.role-groups-toolbar {
    margin-bottom: var(--space-section-gap);
}

.role-groups-heading {
    margin-bottom: 0.95rem;
}

.role-groups-heading__title {
    color: var(--color-text);
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0;
}

.role-groups-heading__subtitle {
    color: var(--color-text-muted);
}

.role-groups-count {
    display: inline-flex;
    align-items: center;
    min-height: 1.4rem;
    padding: 0 0.55rem;
    border: 1px solid rgba(40, 89, 164, 0.16);
    border-radius: var(--radius-pill);
    color: var(--primary-600);
    background: rgba(40, 89, 164, 0.08);
    font-size: 0.74rem;
    font-weight: 700;
    white-space: nowrap;
}

.role-groups-filter {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-xs);
    background: #f8fafc;
}

.role-groups-filter__button {
    min-height: 2.15rem;
    padding: 0 0.75rem;
    border: 0;
    border-radius: var(--radius-xs);
    color: var(--color-text-muted);
    background: transparent;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}

.role-groups-filter__button:hover {
    color: var(--primary-600);
    background: rgba(40, 89, 164, 0.07);
}

.role-groups-filter__button--active {
    color: var(--primary-600);
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.1);
}

.role-groups-name-cell,
.role-groups-permissions,
.role-groups-scope {
    min-width: 0;
}

.role-groups-name-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    flex: 0 0 2rem;
    border-radius: var(--radius-xs);
    color: var(--primary-600);
    background: rgba(40, 89, 164, 0.1);
    font-size: 0.84rem;
    font-weight: 800;
}

.role-groups-muted-pill,
.role-groups-scope-chip {
    display: inline-flex;
    align-items: center;
    min-height: 1.55rem;
    padding: 0 0.55rem;
    border-radius: var(--radius-pill);
    font-size: 0.76rem;
    font-weight: 700;
    white-space: nowrap;
}

.role-groups-muted-pill,
.role-groups-scope-chip--muted {
    color: #64748b;
    background: #f1f5f9;
}

.role-groups-scope-chip--department {
    color: #2859a4;
    background: rgba(40, 89, 164, 0.09);
}

.role-groups-scope-chip--system {
    color: #047857;
    background: rgba(16, 185, 129, 0.1);
}

.role-groups-toolbar .role-groups-search {
    width: min(34rem, 100%);
}

.role-groups-toolbar .role-groups-search .mud-input-control {
    margin-top: 0;
}

.role-groups-toolbar .role-groups-add-button {
    min-height: 2.55rem;
    border-radius: var(--radius-xs);
    padding-left: 1rem;
    padding-right: 1rem;
    font-weight: 800;
}

.role-groups-card .role-groups-grid .mud-table-root {
    border: 1px solid var(--color-line-soft);
    border-radius: var(--radius-xs);
}

.role-groups-card .role-groups-grid .mud-table-head .mud-table-cell {
    height: 2.9rem;
    color: #1e293b;
    font-size: 0.82rem;
    background: #f1f5fb;
}

.role-groups-card .role-groups-grid .mud-table-body .mud-table-cell {
    min-height: 4.65rem;
    padding-top: 0.72rem !important;
    padding-bottom: 0.72rem !important;
    border-bottom-color: var(--color-line-soft);
}

.role-groups-card .role-groups-grid .mud-table-row:hover .mud-table-cell {
    background: #fbfdff;
}

.role-groups-card .role-groups-actions {
    width: 148px !important;
    min-width: 148px !important;
    text-align: center;
    white-space: nowrap;
}

.role-groups-card .role-groups-action-button {
    width: 2rem !important;
    height: 2rem !important;
    border-radius: var(--radius-xs);
    background: transparent;
}

.role-groups-card .role-groups-action-button:hover {
    background: rgba(40, 89, 164, 0.08);
}

.role-groups-card .role-groups-action-button--danger:hover {
    background: rgba(239, 68, 68, 0.1);
}

.role-groups-card .role-groups-permission-chip {
    max-width: 18rem;
    height: 1.6rem;
    border: 1px solid rgba(40, 89, 164, 0.12);
    border-radius: var(--radius-pill);
    color: #1e3a8a;
    background: rgba(40, 89, 164, 0.07);
    font-size: 0.76rem;
    font-weight: 700;
}

.role-groups-card .role-groups-permission-chip .mud-chip-content {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.role-groups-card .role-groups-more-chip {
    height: 1.6rem;
    border: 1px solid rgba(40, 89, 164, 0.18);
    border-radius: var(--radius-pill);
    color: var(--primary-600);
    background: #ffffff;
    font-size: 0.76rem;
    font-weight: 800;
}

@media (max-width: 960px) {
    .role-groups-card {
        padding: 0.75rem !important;
    }

    .role-groups-filter {
        width: 100%;
        overflow-x: auto;
    }

    .role-groups-filter__button {
        flex: 1 0 auto;
    }

    .role-groups-toolbar .role-groups-search,
    .role-groups-toolbar .role-groups-add-button {
        width: 100%;
    }
}

@media (max-width: 599.98px) {

    .app-table-toolbar,
    .app-table-pagination {
        padding: 0.6rem 0.75rem !important;
    }

    .app-table-toolbar__filters,
    .app-table-toolbar__actions,
    .app-table-pagination {
        align-items: stretch;
        justify-content: flex-start;
    }

    .app-table-toolbar__filters,
    .app-table-toolbar__actions,
    .app-table-pagination,
    .app-table-pagination__info {
        flex-direction: column;
    }

    .app-table-toolbar__search-field,
    .app-table-toolbar .mud-select,
    .app-table-toolbar .mud-input-control.mud-select,
    .leave-my-requests-toolbar__balance,
    .leave-my-requests-toolbar .leave-my-requests-toolbar__field,
    .leave-my-requests-toolbar .mud-input-control.leave-my-requests-toolbar__field,
    .leave-my-requests-toolbar .mud-select.leave-my-requests-toolbar__field {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: 1 1 auto !important;
    }

    .app-table-pagination__range {
        white-space: normal;
    }

    .app-table-pagination__nav {
        align-self: flex-start;
    }

    .select-paging__dropdown {
        right: auto;
        left: 0;
        width: min(100vw - 2rem, 100%);
        min-width: 0;
    }

    .select-paging__pagination .app-table-pagination {
        align-items: stretch;
    }

    .select-paging-dialog {
        grid-template-columns: minmax(0, 1fr);
    }

    .select-paging-dialog,
    .select-paging-dialog__panel {
        min-height: 20rem;
    }
}

.auth-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(420px, 0.9fr);
    background:
        radial-gradient(circle at 20% 20%, rgba(112, 163, 255, 0.16), transparent 28%),
        linear-gradient(135deg, #edf5ff 0%, #e6f0ff 45%, #f7f9fd 100%);
}

.auth-shell__hero {
    position: relative;
    overflow: hidden;
    padding: 5rem 6vw;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.auth-shell__hero::before,
.auth-shell__hero::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(12px);
}

.auth-shell__hero::before {
    width: 420px;
    height: 420px;
    left: -120px;
    bottom: -120px;
    background: rgba(74, 125, 255, 0.12);
}

.auth-shell__hero::after {
    width: 280px;
    height: 280px;
    right: -80px;
    top: 40%;
    background: rgba(244, 163, 29, 0.12);
}

.auth-shell__brand {
    position: relative;
    z-index: 1;
    font-family: var(--font-heading);
    color: var(--color-primary-soft);
    font-size: 2.1rem;
    font-weight: 800;
}

.auth-shell__copy {
    position: relative;
    z-index: 1;
    max-width: 720px;
}

.auth-shell__eyebrow {
    font-family: var(--font-heading);
    font-size: clamp(2.8rem, 5vw, 5rem);
    line-height: 0.98;
    font-weight: 800;
    color: var(--color-primary-soft);
}

.auth-shell__copy h1 {
    margin: 0.15em 0 0.2em;
    font-family: var(--font-heading);
    font-size: clamp(4.2rem, 7vw, 7rem);
    line-height: 0.95;
    color: var(--color-accent);
}

.auth-shell__copy p {
    max-width: 560px;
    color: var(--color-text-muted);
    font-size: 1.5rem;
    line-height: 1.65;
}

.auth-preview {
    position: relative;
    z-index: 1;
    width: min(560px, 100%);
    padding: 1.8rem;
    border-radius: var(--radius-xl);
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.65);
    box-shadow: 0 22px 60px rgba(37, 61, 144, 0.12);
    backdrop-filter: blur(18px);
}

.auth-preview__chrome {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.4rem;
}

.auth-preview__chrome span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: block;
}

.auth-preview__chrome span:nth-child(1) {
    background: rgba(248, 113, 113, 0.45);
}

.auth-preview__chrome span:nth-child(2) {
    background: rgba(250, 204, 21, 0.45);
}

.auth-preview__chrome span:nth-child(3) {
    background: rgba(74, 222, 128, 0.45);
}

.auth-preview__card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.1rem;
    border-radius: var(--radius-md);
}

.auth-preview__card+.auth-preview__card {
    margin-top: 1rem;
}

.auth-preview__card--primary {
    background: rgba(4, 36, 121, 0.05);
}

.auth-preview__card--accent {
    background: rgba(244, 163, 29, 0.08);
}

.auth-preview__icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.72);
    color: var(--color-primary-soft);
}

.auth-preview__lines {
    flex: 1;
}

.auth-preview__lines span {
    display: block;
    height: 10px;
    border-radius: var(--radius-pill);
    background: rgba(37, 61, 144, 0.14);
}

.auth-preview__lines span:first-child {
    width: 42%;
    margin-bottom: 0.55rem;
}

.auth-preview__lines span:last-child {
    width: 28%;
    opacity: 0.7;
}

.auth-preview strong {
    color: var(--color-primary);
    font-size: 1.35rem;
    font-weight: 800;
}

.auth-shell__form {
    display: grid;
    place-items: center;
    padding: 2rem;
    background: rgba(255, 255, 255, 0.55);
}

.auth-shell__panel {
    width: min(520px, 100%);
    padding: 2rem;
}

.auth-shell__panel>* {
    width: 100%;
}

.home-dashboard {
    padding: 0 0 var(--space-page-bottom) !important;
}

.home-summary {
    margin-bottom: 0;
}

.home-dashboard>.mud-grid+.mud-grid {
    margin-top: var(--space-section-gap);
}

.home-summary-card,
.home-panel {
    height: 100%;
    padding: 1.15rem;
    border-radius: var(--radius-lg) !important;
    background: rgba(255, 255, 255, 0.92) !important;
    box-shadow: 0 20px 48px rgba(4, 36, 121, 0.06) !important;
}

.home-summary-card__top,
.home-panel__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.home-summary-card__label,
.home-panel__eyebrow {
    display: block;
    color: var(--color-text-faint);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.home-summary-card__icon {
    color: var(--color-primary-soft);
}

.home-summary-card__value {
    margin: 0.9rem 0 0.55rem;
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-size: clamp(2.4rem, 3vw, 3rem);
    font-weight: 800;
    line-height: 1;
}

.home-summary-card p,
.home-roadmap__item p,
.home-empty-state p,
.home-note-tile p {
    margin: 0;
    color: var(--color-text-muted);
    line-height: 1.7;
}

.home-panel__header {
    margin-bottom: 1.25rem;
}

.home-panel__header h2 {
    margin: 0.35rem 0 0;
    color: var(--color-text);
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.home-roadmap {
    display: grid;
    gap: 1rem;
}

.home-roadmap__item {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 1rem;
    align-items: flex-start;
    padding: 1rem 1rem 1rem 0.35rem;
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, rgba(247, 249, 253, 0.92) 0%, rgba(255, 255, 255, 0.95) 100%);
}

.home-roadmap__dot {
    width: 14px;
    height: 14px;
    margin-top: 0.3rem;
    border-radius: 50%;
    background: #cad4e4;
    box-shadow: 0 0 0 8px rgba(202, 212, 228, 0.2);
}

.home-roadmap__item.is-active .home-roadmap__dot {
    background: var(--color-accent);
    box-shadow: 0 0 0 8px rgba(244, 163, 29, 0.18);
}

.home-roadmap__item strong,
.home-action-list__item strong,
.home-note-tile strong,
.home-empty-state strong {
    display: block;
    color: var(--color-text);
    font-size: 1rem;
    font-weight: 800;
}

.home-roadmap__item p {
    margin-top: 0.35rem;
}

.home-empty-state {
    min-height: 100%;
    display: grid;
    align-content: center;
    justify-items: start;
    gap: 0.85rem;
    padding: 1rem 0.2rem 0.4rem;
}

.home-empty-state__art {
    width: 100%;
    min-height: 180px;
    display: grid;
    place-items: center;
    gap: 0.9rem;
    padding: 1.25rem;
    border-radius: var(--radius-xl);
    background:
        linear-gradient(180deg, rgba(244, 247, 252, 0.95) 0%, rgba(255, 255, 255, 1) 100%);
    border: 1px dashed rgba(187, 198, 217, 0.9);
}

.home-empty-state__art span {
    display: block;
    width: min(100%, 260px);
    border-radius: var(--radius-pill);
    background: rgba(37, 61, 144, 0.1);
}

.home-empty-state__art span:nth-child(1) {
    height: 14px;
}

.home-empty-state__art span:nth-child(2) {
    height: 56px;
    border-radius: var(--radius-md);
}

.home-empty-state__art span:nth-child(3) {
    height: 96px;
    border-radius: var(--radius-lg);
}

.home-action-list {
    display: grid;
    gap: 0.9rem;
}

.home-action-list__item {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 0.9rem;
    align-items: start;
    padding: 1rem;
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: inherit;
    background: linear-gradient(180deg, rgba(247, 249, 253, 0.88) 0%, rgba(255, 255, 255, 0.98) 100%);
    border: 1px solid rgba(231, 236, 244, 0.95);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.home-action-list__item .mud-icon-root {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-md);
    background: rgba(37, 61, 144, 0.08);
    color: var(--color-primary);
}

.home-action-list__item span {
    display: block;
    margin-top: 0.35rem;
    color: var(--color-text-muted);
    line-height: 1.65;
}

.home-action-list__item:hover {
    transform: translateY(-1px);
    border-color: rgba(37, 61, 144, 0.12);
    box-shadow: 0 14px 28px rgba(4, 36, 121, 0.06);
}

.home-note-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
}

.home-note-tile {
    padding: 1rem;
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, rgba(249, 251, 255, 0.95) 0%, rgba(255, 255, 255, 0.98) 100%);
    border: 1px solid rgba(231, 236, 244, 0.95);
}

.home-note-tile p {
    margin-top: 0.35rem;
}

.rounded-hover {
    border-radius: var(--radius-md) !important;
}

@media (max-width: 899.98px) {
    .home-note-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 599.98px) {
    .home-dashboard {
        padding-inline: 0 !important;
    }

    .home-summary-card,
    .home-panel {
        border-radius: var(--radius-lg) !important;
    }

    .home-panel__header,
    .home-summary-card__top {
        flex-direction: column;
    }
}

.company-page {
    --company-card-radius: 8px;
    --company-border: #e6ebf3;
    --company-border-soft: #eef2f7;
    --company-soft-bg: #f8fafc;
    padding: 0 0 var(--space-page-bottom) !important;
}

.company-state {
    padding: var(--space-card-lg);
}

.company-state--loading {
    min-height: 220px;
    display: grid;
    place-items: center;
}

.company-hero,
.company-panel {
    border-radius: var(--company-card-radius) !important;
    border: 1px solid var(--company-border) !important;
    background: #ffffff !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04) !important;
}

.company-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    min-height: 82px;
    margin-bottom: 0.85rem;
    padding: 0.9rem 1rem;
}

.company-hero__identity {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1 1 auto;
}

.company-avatar {
    position: relative;
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--color-primary);
    background: #dcecff;
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 800;
}

.company-avatar__camera {
    position: absolute;
    right: -2px;
    bottom: -1px;
    width: 19px;
    height: 19px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--color-primary);
    background: #ffffff;
    border: 1px solid var(--company-border);
    box-shadow: 0 2px 5px rgba(15, 23, 42, 0.08);
}

.company-avatar__camera .mud-icon-root {
    width: 12px;
    height: 12px;
    font-size: 12px;
}

.company-hero__copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.company-hero__title {
    color: var(--color-text);
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.company-hero__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-text-muted);
    font-size: 0.72rem;
    font-weight: 650;
}

.company-hero__meta span:not(.company-status-chip) {
    display: inline-flex;
    min-height: 22px;
    align-items: center;
    padding: 0 0.55rem;
    border-radius: 4px;
    background: #f8fafc;
    border: 1px solid var(--company-border-soft);
}

.company-hero__actions {
    flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.company-page .company-hero__actions .mud-button-root:not(.mud-switch-base) {
    min-height: 34px;
    border-radius: var(--radius-xs) !important;
    font-size: 0.76rem !important;
    font-weight: 700 !important;
    text-transform: none !important;
}

.company-hero__actions .mud-button-filled-primary:not(:disabled),
.company-hero__actions .mud-button-filled-primary:not(:disabled) .mud-button-label,
.company-hero__actions .mud-button-filled-primary:not(:disabled) .mud-icon-root {
    color: #ffffff !important;
}

.company-hero__actions .mud-button-root:last-child:not(:disabled),
.company-hero__actions .mud-button-root:last-child:not(:disabled) span,
.company-hero__actions .mud-button-root:last-child:not(:disabled) .mud-icon-root {
    color: #ffffff !important;
}

.company-page .company-hero__actions .company-save-button.mud-button-root {
    background: var(--color-primary) !important;
    color: #ffffff !important;
}

.company-page .company-hero__actions .company-save-button.mud-button-root .mud-button-label,
.company-page .company-hero__actions .company-save-button.mud-button-root .mud-icon-root {
    color: #ffffff !important;
}

.company-page .company-hero__actions .company-save-button.mud-button-root:hover {
    background: var(--color-primary) !important;
    opacity: 0.9 !important;
}

.company-page .company-hero__actions .company-save-button.mud-button-root:disabled {
    background: var(--color-primary) !important;
    color: #ffffff !important;
    opacity: 0.55 !important;
}

.company-page .company-hero__actions .company-save-button.mud-button-root:disabled .mud-button-label,
.company-page .company-hero__actions .company-save-button.mud-button-root:disabled .mud-icon-root {
    color: #ffffff !important;
    opacity: 1 !important;
}

.company-status-chip {
    display: inline-flex;
    min-height: 22px;
    align-items: center;
    gap: 0.3rem;
    padding: 0 0.55rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
}

.company-status-chip::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: currentColor;
}

.company-status-chip--active {
    color: #128a4a;
    background: #eaf8ef;
    border: 1px solid #c9efd8;
}

.company-status-chip--inactive {
    color: #9a6700;
    background: #fff7e6;
    border: 1px solid #f5dfad;
}

.company-status-chip--closed {
    color: #b42318;
    background: #fff1f0;
    border: 1px solid #f8c9c4;
}

.company-layout {
    align-items: flex-start;
}

.company-panel {
    padding: 0.95rem;
}

.company-panel--overview {
    position: sticky;
    top: 76px;
}

.company-panel__header {
    margin-bottom: 0.8rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--company-border);
}

.company-panel__header h2 {
    margin: 0;
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1.3;
}

.company-overview-list {
    display: flex;
    flex-direction: column;
}

.company-overview-row {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 0.65rem;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--company-border-soft);
}

.company-overview-row .mud-icon-root {
    width: 16px;
    height: 16px;
    color: var(--color-primary);
    font-size: 16px;
}

.company-overview-row span {
    display: block;
    color: var(--color-primary);
    font-size: 0.72rem;
    font-weight: 600;
}

.company-overview-row strong {
    display: block;
    margin-top: 0.2rem;
    color: var(--color-text);
    font-size: 0.78rem;
    font-weight: 650;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.company-panel--form {
    padding: 1rem 1.1rem;
}

.company-form-section {
    padding: 0 0 0.95rem;
}

.company-form-section+.company-form-section {
    padding-top: 0.2rem;
}

.company-form-section__header {
    display: flex;
    align-items: center;
    margin-bottom: 0.55rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--company-border);
}

.company-form-section__header h3 {
    margin: 0;
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-size: 0.82rem;
    font-weight: 800;
}

.company-form-section__header h3 span {
    font-weight: 900;
}

.company-field label {
    display: block;
    margin: 0 0 0.35rem;
    color: #475569 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: 0.01em;
}

.company-required {
    color: var(--mud-palette-error);
}

.company-field .mud-input-control {
    margin: 0;
}

.company-field .mud-input-outlined,
.company-field .mud-select,
.company-field .mud-picker {
    border-radius: 6px !important;
    background: #ffffff !important;
    transition: all 0.2s ease-in-out !important;
}

.company-field .mud-input-control .mud-input-slot,
.company-field .mud-input-adornment,
.company-field .mud-picker .mud-picker-input-control {
    background: transparent !important;
}

.company-field .mud-input.mud-input-outlined .mud-input-outlined-border,
.company-field .mud-picker.mud-rounded,
.company-field .mud-picker .mud-picker-container {
    border-radius: 6px !important;
    border-color: #e2e8f0 !important;
    border-width: 1px !important;
    transition: all 0.2s ease-in-out !important;
}

/* Hover State */
.company-field .mud-input-outlined:hover .mud-input-outlined-border {
    border-color: #cbd5e1 !important;
}

/* Focus State */
.company-field .mud-input-outlined.mud-input-focus,
.company-field .mud-input-outlined.mud-input-focused,
.company-field .mud-input-control:focus-within .mud-input-outlined {
    background-color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(21, 101, 192, 0.15) !important;
}

.company-field .mud-input-outlined.mud-input-focus .mud-input-outlined-border,
.company-field .mud-input-outlined.mud-input-focused .mud-input-outlined-border,
.company-field .mud-input-control:focus-within .mud-input-outlined .mud-input-outlined-border {
    border-color: var(--color-primary) !important;
    border-width: 1px !important;
}

.company-field .mud-input-adornment,
.company-field .mud-input-slot .mud-icon-root {
    color: var(--color-text-muted) !important;
}

.company-field textarea,
.company-field input {
    color: var(--color-text) !important;
    font-size: 0.78rem !important;
    font-weight: 500 !important;
}

.company-note {
    display: flex;
    gap: 0.55rem;
    margin-top: 0.9rem;
    padding: 0.75rem;
    border-radius: 6px;
    background: #eff6ff;
    border: 1px solid #d7e8ff;
}

.company-note .mud-icon-root {
    width: 16px;
    height: 16px;
    margin-top: 0.05rem;
    color: var(--color-primary);
    font-size: 16px;
}

.company-note strong {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-size: 0.78rem;
    font-weight: 800;
}

.company-note p {
    margin: 0;
    color: var(--color-text-muted);
    line-height: 1.55;
    font-size: 0.72rem;
}

.company-static-value {
    display: inline-flex;
    width: 100%;
    min-height: 36px;
    align-items: center;
    padding: 0 0.65rem;
    border-radius: 4px;
    background: #ffffff;
    border: 1px solid #dce3ec;
    color: var(--color-text) !important;
    font-weight: 500 !important;
}

/* Company Redesign: Linear/Stripe Inspired Styles */

/* 1. Header (Company Hero) Meta Details */
.company-hero__meta-details {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0 1.5rem;
    flex: 0 0 auto;
    border-left: 1px solid var(--company-border-soft);
}

.company-meta-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-text-muted);
    font-size: 0.76rem;
}

.company-meta-item strong {
    color: var(--color-text);
    font-weight: 600;
}

.company-meta-item .mud-icon-root {
    color: var(--color-primary);
    width: 14px;
    height: 14px;
    font-size: 14px;
}

.company-more-button {
    border-color: var(--company-border-soft) !important;
    color: var(--color-text-muted) !important;
    padding: 7px !important;
}

/* 2. Navigation Horizontal Tabs */
.company-nav-tabs {
    display: flex;
    gap: 1.5rem;
    margin: 1.25rem 0 1.5rem 0;
    border-bottom: 1px solid var(--company-border-soft);
    padding-bottom: 0.1rem;
}

.company-nav-link {
    color: var(--color-text-muted);
    font-size: 0.8rem;
    font-weight: 600;
    padding-bottom: 0.65rem;
    text-decoration: none !important;
    border-bottom: 2px solid transparent;
    transition: all 0.2s ease;
}

.company-nav-link:hover {
    color: var(--color-primary);
}

.company-nav-link.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

/* 3. Section Stack Cards */
.company-sections-stack {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.company-section-card {
    padding: 1.25rem 1.5rem;
    border-radius: 6px;
    background: #ffffff;
    border: 1px solid var(--company-border-soft);
    transition: box-shadow 0.15s ease;
}

.company-section-card:hover {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.company-section-card__header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.5rem !important;
    padding-bottom: 0.65rem;
    border-bottom: 1px solid var(--company-border-soft);
}

.company-section-card__header .mud-icon-root {
    color: var(--color-primary);
    width: 18px;
    height: 18px;
    font-size: 18px;
}

.company-section-card__header h3 {
    margin: 0;
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-size: 0.86rem;
    font-weight: 700;
}

.company-section-card__body {
    padding-top: 0.25rem;
}

/* 4. Footer legal notice */
.company-footer-notice {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 2rem;
    margin-bottom: 1.5rem;
    padding: 0.85rem;
    border-radius: 6px;
    background: #f8fafc;
    border: 1px solid var(--company-border-soft);
    color: var(--color-primary);
    font-size: 0.9rem;
    text-align: center;
}

.company-footer-notice .mud-icon-root {
    color: var(--color-primary);
    width: 14px;
    height: 14px;
    font-size: 14px;
}

.company-actions {
    margin-top: 0.25rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(228, 234, 243, 0.95);
    flex-wrap: wrap;
}

@media (max-width: 1199.98px) {
    .company-panel--overview {
        position: static;
    }

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

    .auth-shell__hero {
        display: none;
    }

    .auth-shell__form {
        min-height: 100vh;
        background:
            radial-gradient(circle at top left, rgba(112, 163, 255, 0.13), transparent 28%),
            linear-gradient(180deg, #edf5ff 0%, #f7f9fd 100%);
    }

    .auth-shell__panel {
        max-width: 560px;
        padding: 1.5rem;
    }
}

@media (max-width: 959.98px) {
    .company-hero {
        align-items: flex-start;
        flex-direction: column;
    }

    .company-hero__actions {
        width: 100%;
        justify-content: flex-start;
    }

    .company-panel {
        padding: 0.9rem;
    }

    .company-panel__header {
        flex-direction: column;
    }

    .shell-topbar {
        left: 0 !important;
        width: 100% !important;
        margin-left: 0;
        padding: 0 !important;
    }

    .shell-topbar .mud-toolbar {
        padding: 0 1rem;
    }

    .shell-drawer__footer {
        display: none;
    }

    .shell-nav--desktop {
        display: none;
    }

    .shell-nav--mobile {
        display: block;
    }

    .shell-content {
        margin-left: 0;
    }

    .shell-content__inner {
        padding: var(--space-page-y) var(--space-page-x) 0;
    }

    .shell-user__meta {
        display: none;
    }

    .shell-user {
        padding-left: 0;
        border-left: 0;
        margin-left: 0;
    }
}

@media (min-width: 960px) {
    .app-shell--collapsed {
        --app-shell-drawer-width: 72px;
        --mud-drawer-width-left: var(--app-shell-drawer-width);
    }

    .app-shell--collapsed .shell-drawer {
        padding: 1rem 0.5rem;
    }

    .app-shell--collapsed .shell-brand,
    .app-shell--nav-compact .shell-brand {
        justify-content: center;
        padding: 0.5rem 0 1.25rem;
    }

    .app-shell--nav-compact:not(.app-shell--collapsed) .shell-brand {
        width: 56px;
    }

    .app-shell--collapsed .shell-brand>div,
    .app-shell--nav-compact .shell-brand>div {
        display: none;
    }

    .app-shell--collapsed .shell-brand__logo,
    .app-shell--nav-compact .shell-brand__logo {
        width: 40px;
        height: 40px;
    }

    .app-shell--collapsed .shell-nav,
    .app-shell--nav-compact .shell-nav {
        margin-right: 0;
        padding-right: 0;
        overflow: visible;
    }

    .app-shell--nav-compact .shell-nav__layer {
        right: 0;
        padding-right: 0;
    }

    .app-shell--nav-compact:not(.app-shell--collapsed) .shell-nav__layer--collapsed {
        width: 44px;
    }

    .app-shell--collapsed .shell-sidebar-toggle-item {
        justify-content: center;
        width: 44px;
        min-height: 44px;
        margin: 0 auto;
        padding: 0;
    }

    .app-shell.mud-drawer-open-responsive-md-left.mud-drawer-left-clipped-never .shell-topbar {
        margin-left: var(--app-shell-drawer-width) !important;
        width: calc(100% - var(--app-shell-drawer-width)) !important;
    }
}

@media (max-width: 599.98px) {
    .company-hero {
        padding: 0.85rem;
    }

    .company-hero__identity {
        align-items: flex-start;
    }

    .company-avatar {
        width: 46px;
        height: 46px;
        flex-basis: 46px;
        border-radius: 12px;
        font-size: 0.9rem;
    }

    .company-hero__title {
        white-space: normal;
    }

    .company-hero__actions,
    .company-hero__actions .mud-button-root,
    .company-actions,
    .company-actions .mud-button-root {
        width: 100%;
    }

    .company-actions {
        flex-direction: column;
    }

    .shell-search {
        width: 100%;
        max-width: none;
    }

    .shell-topbar__actions {
        gap: 0.35rem;
        margin-left: 0.5rem;
    }

    .shell-topbar .mud-toolbar {
        gap: 0.5rem;
    }

    .auth-shell__panel {
        padding: 1rem;
    }
}

/* ===================== VIS LOGIN DESIGN ===================== */
.vis-login-page {
    min-height: 100vh;
    background: #ffffff;
    display: flex;
    flex-direction: column;
}

.vis-login-hero {
    position: relative;
    padding: 20px 0;
    color: #f2f7ff;
    overflow: hidden;
    background:
        radial-gradient(1200px at -10% 10%,
            rgba(255, 255, 255, 0.18),
            transparent 60%),
        radial-gradient(900px at 110% 20%,
            rgba(255, 255, 255, 0.12),
            transparent 55%),
        linear-gradient(135deg, #0d4d96 0%, #1f70d6 100%);
    animation: heroGradientShift 12s ease-in-out infinite;
}

.vis-login-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(115deg,
            rgba(255, 255, 255, 0.08) 0%,
            rgba(255, 255, 255, 0.03) 40%,
            transparent 65%,
            rgba(255, 255, 255, 0.08) 100%);
    opacity: 0.6;
    mix-blend-mode: screen;
    pointer-events: none;
}

.vis-login-hero::before {
    content: "";
    position: absolute;
    width: 1200px;
    height: 1200px;
    top: -900px;
    right: -400px;
    background: radial-gradient(circle,
            rgba(255, 255, 255, 0.22) 0%,
            rgba(255, 255, 255, 0.08) 40%,
            transparent 70%);
    animation: heroPulse 14s ease-in-out infinite;
    opacity: 0.6;
    pointer-events: none;
}

.hero-floating-sphere,
.hero-floating-line {
    position: absolute;
    border-radius: var(--radius-pill);
    opacity: 0.35;
    mix-blend-mode: screen;
    background: rgba(255, 255, 255, 0.2);
    pointer-events: none;
}

.hero-floating-sphere {
    width: 180px;
    height: 180px;
    left: 12%;
    top: 30px;
    animation: heroFloatA 10s ease-in-out infinite;
}

.hero-floating-line {
    width: 260px;
    height: 70px;
    right: 15%;
    bottom: -20px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.2), transparent);
    animation: heroFloatB 11s ease-in-out infinite;
}

@keyframes heroGradientShift {

    0%,
    100% {
        background-position:
            0 0,
            0 0,
            0 0;
    }

    50% {
        background-position:
            40px 30px,
            -40px -30px,
            0 0;
    }
}

@keyframes heroPulse {

    0%,
    100% {
        transform: scale(0.95) translate(0, 0);
        opacity: 0.5;
    }

    50% {
        transform: scale(1.05) translate(-20px, 20px);
        opacity: 0.75;
    }
}

@keyframes heroFloatA {

    0%,
    100% {
        transform: translateY(0) translateX(0);
    }

    50% {
        transform: translateY(-20px) translateX(10px);
    }
}

@keyframes heroFloatB {

    0%,
    100% {
        transform: translateY(0) translateX(0);
        opacity: 0.35;
    }

    50% {
        transform: translateY(-15px) translateX(-20px);
        opacity: 0.55;
    }
}

.vis-hero-content {
    position: relative;
    z-index: 1;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
    text-align: center;
}

.vis-hero-content h1 {
    font-size: 2.8rem;
    font-weight: 700;
    margin-bottom: 12px;
    letter-spacing: 0.4px;
}

.vis-hero-content p {
    font-size: 1.15rem;
    opacity: 0.92;
    margin: 0;
}

.vis-login-body {
    background: #ffffff;
}

.vis-login-container {
    position: relative;
    max-width: 1180px;
    margin: 0px auto;
}

.vis-login-left {
    background: #ffffff;
    border-radius: var(--radius-md);
    padding: 36px;
    width: 100%;
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

.vis-login-poster {
    border: 1px solid #e1e9ff;
    border-radius: var(--radius-md);
    padding: 32px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
    flex: 1 1 0;
    min-height: 470px;
}

.poster-header {
    text-align: center;
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 3px solid var(--color-primary);
}

.visnam-logo {
    display: flex;
    align-items: center;
    justify-content: center;
}

.visnam-logo img {
    height: 56px;
    object-fit: contain;
}

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

.menu-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    background: #f8fbff;
    border-radius: var(--radius-sm);
    border: 1px solid #dbe7ff;
    transition: all 0.25s ease;
    text-decoration: none;
    color: var(--color-text);
    font-weight: 600;
    font-size: 1rem;
}

.menu-item:hover {
    transform: translateX(6px);
    box-shadow: 0 10px 20px rgba(30, 111, 214, 0.15);
    border-color: var(--color-primary);
    background: #ffffff;
    text-decoration: none !important;
}

.menu-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-sm);
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 6px 14px rgba(59, 130, 246, 0.18);
}

.menu-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.vis-login-footer {
    background: #ffffff;
    padding-bottom: 20px;
    border-top: 1px solid #e5e7eb;
}

.footer-container {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 36px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
    color: var(--color-text);
    font-size: 0.95rem;
    line-height: 1.6;
}

.footer-info {
    flex: 1;
    padding-top: 24px;
}

.footer-title {
    text-transform: uppercase;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 6px;
}

.footer-company {
    font-weight: 700;
    margin-bottom: 6px;
}

.footer-line {
    margin: 2px 0;
}

.footer-hotline {
    color: #f97316;
    font-weight: 700;
}

.footer-container a {
    color: var(--color-primary);
}

.footer-container a:hover {
    text-decoration: underline;
}

.footer-brand {
    /* flex: 0 0 200px; */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding-top: 24px;
}

.footer-logo {
    width: 204px;
    height: auto;
    object-fit: contain;
}

.vis-login-form {
    background: #ffffff;
    border-radius: var(--radius-md);
    padding: 48px 44px;
    border: 1px solid var(--color-line);
    flex: 0 0 420px;
    min-height: 532px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
}

.vis-login-form__logo {
    width: 100px;
    height: 100px;
    object-fit: contain;
    align-self: center;
    margin-bottom: 8px;
}

.vis-login-form h2 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 30px;
    color: var(--color-primary);
    text-align: center;
}

.form-field {
    margin-bottom: 20px;
}

.form-field label {
    display: block;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 8px;
}

.app-dialog-form-grid {
    align-items: flex-start;
}

.app-dialog-form-field {
    min-width: 0;
}

.app-dialog-form-label {
    color: var(--color-text-muted);
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.25;
    margin-bottom: 0.35rem;
}

.app-dialog-form-field .mud-input>input,
.app-dialog-form-field .mud-input>textarea,
.app-dialog-form-field .mud-input-slot,
.app-dialog-form-field .mud-input-text {
    color: var(--color-text);
    font-size: 0.95rem;
    font-weight: 600;
}

.vis-login-label {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 8px;
}

.vis-login-required {
    color: var(--color-danger-fg);
}

.vis-login-form .mud-input>input,
.vis-login-form .mud-input-slot,
.vis-login-form .mud-input-text {
    color: var(--color-text) !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
}

.vis-login-form .mud-input>input::placeholder,
.vis-login-form .mud-input-slot::placeholder,
.vis-login-form .mud-input-text::placeholder {
    color: var(--color-text-faint) !important;
    font-weight: 500;
    opacity: 1;
}

.vis-login-form .mud-input-adornment,
.vis-login-form .mud-icon-root {
    color: var(--color-text-muted) !important;
}

.vis-login-form .mud-input-control {
    margin: 0;
}

.vis-login-form .mud-input-outlined {
    background: var(--color-surface-muted) !important;
    border-radius: var(--radius-sm) !important;
    min-height: 30px;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.vis-login-form .mud-input-outlined .mud-input-slot {
    min-height: 30px;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
}

.vis-login-form .mud-input-outlined .mud-input-adornment {
    min-height: 30px;
}

.vis-login-form .mud-input-outlined>.mud-input-outlined-border {
    border-color: var(--color-line) !important;
    border-radius: var(--radius-sm) !important;
    transition: border-color 0.2s ease, border-width 0.2s ease;
}

.vis-login-form .mud-input-outlined:hover {
    background: #ffffff !important;
}

.vis-login-form .mud-input-outlined:hover>.mud-input-outlined-border {
    border-color: rgba(40, 89, 164, 0.34) !important;
}

.vis-login-form .mud-input-outlined.mud-input-focused {
    background: #ffffff !important;
    box-shadow: 0 0 0 4px rgba(40, 89, 164, 0.12);
}

.vis-login-form .mud-input-outlined.mud-input-focused>.mud-input-outlined-border {
    border-color: var(--color-primary) !important;
    border-width: 1px !important;
}

.form-field .form-control {
    width: 100%;
    padding: 12px 16px;
    font-size: 0.95rem;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-xs);
    transition: all 0.25s ease;
    background: var(--color-surface-muted);
    color: var(--color-text);
}

.form-field .form-control:focus {
    outline: none;
    border-color: var(--color-primary);
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(40, 89, 164, 0.14);
}

.mud-button-root.btn-login-new {
    width: 100%;
    padding: 14px 22px;
    border: none;
    border-radius: var(--radius-sm) !important;
    background: var(--color-primary) !important;
    color: #ffffff;
    font-weight: 700;
    font-size: 1.05rem;
    transition: all 0.25s ease;
    margin-top: 8px;
    box-shadow: 0 8px 16px rgba(40, 89, 164, 0.1) !important;
}

.mud-button-root.btn-login-new .mud-button-label {
    color: #ffffff;
}

.mud-button-root.btn-login-new:hover:not(:disabled) {
    transform: translateY(-2px);
    background: var(--color-primary-strong) !important;
    opacity: 1;
    box-shadow: 0 16px 30px rgba(40, 89, 164, 0.28) !important;
}

.mud-button-root.btn-login-new:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.password-field {
    position: relative;
    display: flex;
    align-items: center;
}

.password-field .form-control {
    padding-right: 44px;
}

.password-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    padding: 0;
    cursor: pointer;
}

.password-field--error .password-toggle {
    /* Khi MudTextField hiển thị helper/error text, chiều cao component tăng lên.
       Tinh chỉnh icon lên để khớp vị trí input. */
    top: calc(50% - 12px);
}

.password-toggle:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ===================== END VIS LOGIN DESIGN ===================== */

/* ===================== TOGGLE SWITCH DESIGN ===================== */
.toggle-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.switch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 26px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #cbd5e1;
    transition: 0.3s;
    border-radius: var(--radius-xl);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
}

.slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.switch input:checked+.slider {
    background: linear-gradient(135deg, var(--primary-600), var(--primary-700));
}

.switch input:checked+.slider:before {
    transform: translateX(22px);
}

.mud-input-control.mud-input-number-control .mud-input-numeric-spin {
    right: 8px !important;
}

/* Căn dialog vào vùng content (bên phải sidebar) thay vì giữa toàn màn hình.
   Chỉ áp dụng trên desktop (md+) — mobile sidebar ẩn nên không cần shift. */
@media (min-width: 960px) {
    body:has(.app-shell) .mud-dialog-container {
        padding-left: 310px;
    }

    body:has(.app-shell--collapsed) .mud-dialog-container {
        padding-left: 84px;
    }
}

/* Danh sách lỗi parse Import chấm công (B275817): MudTable 4 cột Dòng/Trường/Giá trị/Mô tả.
   MudAlert content area mặc định không stretch — force full width + scroll dọc. */
.app-error-alert .mud-alert-message {
    width: 100%;
}

.app-error-table-wrap {
    max-height: 320px;
    overflow-y: auto;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.5);
}

.app-error-table .mud-table-cell {
    padding: 6px 10px;
    font-size: 0.875rem;
}

.app-error-table .mud-table-cell code {
    background: rgba(0, 0, 0, 0.05);
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 0.85em;
}

/* List lỗi/cảnh báo dạng đơn giản (BE-returned strings từ kết quả Import / Xử lý). */
.app-error-list-grid {
    max-height: 320px;
    overflow-y: auto;
    padding-right: 8px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    column-gap: 16px;
    row-gap: 4px;
    width: 100%;
}

.app-error-list-item {
    font-size: 0.875rem;
    line-height: 1.5;
    padding: 2px 0;
}

.app-error-list-item::before {
    content: "•";
    margin-right: 6px;
    opacity: 0.6;
}

.mud-typography-h6 {
    display: flex !important;
    align-items: center !important;
}

.attendance-condition-map {
    width: 100%;
    height: 360px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
    overflow: hidden;
}

.attendance-location-search-results {
    max-height: 180px;
    overflow-y: auto;
}

.attendance-location-search-item {
    display: block;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.attendance-location-search-item:hover {
    background: var(--mud-palette-action-default-hover);
}

.system-config-page {
    padding-top: 1.35rem !important;
}

.system-config-card {
    overflow: hidden;
    border-radius: var(--radius-sm) !important;
}

.system-config-tabs {
    background: var(--color-surface);
}

.system-config-tabs .mud-tabs-toolbar {
    padding-inline: 1rem;
    border-bottom: 1px solid var(--color-line-soft);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    overflow: hidden;
}

.system-config-tabs .mud-tabs-panels {
    padding: 1rem;
}

.system-config-page .mud-input-outlined,
.system-config-page .mud-input-outlined>.mud-input-outlined-border,
.system-config-page .mud-select,
.system-config-page .mud-input-control .mud-input-slot {
    border-radius: var(--radius-xs) !important;
}

.system-config-page .app-table-toolbar .mud-button-root {
    border-radius: var(--radius-xs) !important;
}

.system-config-settings-panel {
    min-width: 0;
}

.system-config-history-toolbar {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    min-width: 0;
}

.system-config-search {
    flex: 1 1 280px;
    max-width: 360px;
}

.system-config-group-select {
    flex: 0 0 220px;
    width: 220px;
}

.system-config-filter {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: stretch;
    overflow: hidden;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-xs);
    background: var(--color-surface);
}

.system-config-filter__button {
    min-height: 40px;
    padding: 0 1rem;
    border: 0;
    border-right: 1px solid var(--color-line-soft);
    background: transparent;
    color: var(--color-text);
    font: inherit;
    font-size: 0.86rem;
    font-weight: 600;
    cursor: pointer;
}

.system-config-filter__button:last-child {
    border-right: 0;
}

.system-config-filter__button:first-child {
    border-radius: var(--radius-xs) 0 0 var(--radius-xs);
}

.system-config-filter__button:last-child {
    border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
}

.system-config-filter__button:hover {
    background: var(--color-bg-soft);
}

.system-config-filter__button--active {
    background: #eff6ff;
    color: #0f56c5;
    box-shadow: inset 0 0 0 1px #7fb0ff;
}

.system-config-history-toolbar .mud-button-root,
.system-config-save-button {
    border-radius: var(--radius-xs) !important;
    text-transform: none !important;
}

.system-config-save-button {
    color: #ffffff !important;
}

.system-config-sections {
    display: grid;
    gap: 1.2rem;
}

.system-config-section__heading {
    display: flex;
    align-items: center;
    gap: 0.58rem;
    margin-bottom: 0.45rem;
}

.system-config-section__icon {
    width: 1.15rem !important;
    height: 1.15rem !important;
    color: var(--color-text);
}

.system-config-section__title {
    color: var(--color-text);
    font-size: 1rem !important;
    font-weight: 800 !important;
}

.system-config-section__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.45rem;
    height: 1.45rem;
    border-radius: var(--radius-xs);
    background: var(--color-bg-soft);
    color: var(--color-text-muted);
    font-size: 0.78rem;
    font-weight: 700;
}

.system-config-table .mud-table-cell {
    height: 4rem;
}

.system-config-value-field {
    width: 100%;
}

.system-config-value-field .mud-input-control {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.system-config-default,
.system-config-history-value {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    min-height: 1.8rem;
    padding: 0.2rem 0.55rem;
    border: 1px solid var(--color-line-soft);
    border-radius: var(--radius-xs);
    background: #fafafa;
    color: var(--color-text-muted);
    font-size: 0.8rem;
}

.system-config-branch-tab,
.system-config-history-tab {
    min-width: 0;
}

.system-config-branch-picker {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.system-config-branch-picker__select,
.system-config-history-toolbar__branch {
    width: 320px;
    max-width: 100%;
}

.system-config-history-toolbar__reload {
    margin-left: auto;
}

.system-config-history-value--new {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
}

.system-config-empty {
    border: 1px dashed var(--color-line);
    border-radius: var(--radius-xs);
    background: #fafcff;
}

@media (max-width: 959.98px) {
    .system-config-history-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .system-config-search,
    .system-config-group-select,
    .system-config-branch-picker__select,
    .system-config-history-toolbar__branch {
        width: 100%;
        max-width: none;
    }

    .system-config-filter {
        width: 100%;
        overflow-x: auto;
    }

    .system-config-filter__button {
        flex: 1 0 auto;
    }

    .system-config-history-toolbar__reload {
        width: 100%;
        margin-left: 0;
    }
}

@media (min-width: 1024px) {
    .mud-dialog:has(.checkin-dialog) {
        width: 600px;
        max-width: 600px;
        border-radius: 8px !important;
    }

    .mud-dialog:has(.checkin-dialog) .mud-dialog-title {
        padding: 1.25rem 1.5rem 0.25rem;
        color: #0f56c5 !important;
        font-size: 1.06rem;
        font-weight: 800;
    }

    .mud-dialog:has(.checkin-dialog) .mud-dialog-title .mud-icon-button {
        color: #64748b !important;
    }

    .mud-dialog:has(.checkin-dialog) .mud-dialog-content {
        padding: 0.85rem 1.5rem 1.25rem;
    }

    .checkin-dialog {
        color: #111827;
    }

    .checkin-panel {
        display: flex;
        flex-direction: column;
        gap: 1.15rem;
    }

    .checkin-date {
        color: #667085;
        font-size: 0.88rem;
        line-height: 1.4;
    }

    .checkin-date--center {
        text-align: center;
    }

    .checkin-loading-state {
        min-height: 390px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.95rem;
    }

    .checkin-loading-state__spinner {
        width: 88px;
        height: 88px;
        display: grid;
        place-items: center;
        margin-top: 2.25rem;
    }

    .checkin-loading-state__spinner .mud-progress-circular {
        width: 76px !important;
        height: 76px !important;
    }

    .checkin-loading-state__title {
        margin-top: 1rem;
        color: #111827;
    }

    .checkin-loading-state__subtitle,
    .checkin-empty-state__subtitle {
        color: #667085;
    }

    .checkin-empty-state {
        min-height: 390px;
        display: flex;
        flex-direction: column;
    }

    .checkin-empty-state__icon {
        width: 92px;
        height: 92px;
        display: grid;
        place-items: center;
        align-self: center;
        margin: 3.25rem 0 1.15rem;
        border: 1px solid #dbe6fb;
        border-radius: 50%;
        background: #f1f6ff;
        color: #0f56c5;
    }

    .checkin-empty-state__icon .mud-icon-root {
        width: 38px;
        height: 38px;
        font-size: 38px;
    }

    .checkin-empty-state__title,
    .checkin-empty-state__subtitle {
        text-align: center;
    }

    .checkin-empty-state .checkin-actions {
        margin-top: auto;
    }

    .checkin-clock-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
    }

    .checkin-clock {
        font-size: 3.25rem;
        line-height: 1;
        font-weight: 900;
        color: #111827;
        font-variant-numeric: tabular-nums;
        letter-spacing: 0;
    }

    .checkin-status-pill {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.55rem;
        min-width: 132px;
        min-height: 36px;
        padding: 0 0.9rem;
        border-radius: 6px;
        border: 1px solid #e5eaf2;
        background: #edf1f7;
        color: #475467;
        font-size: 0.85rem;
        font-weight: 800;
        white-space: nowrap;
    }

    .checkin-status-pill__dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #98a2b3;
    }

    .checkin-status-pill--working {
        border-color: #b8e7c7;
        background: #e7f8ed;
        color: #15803d;
    }

    .checkin-status-pill--working .checkin-status-pill__dot,
    .checkin-status-pill--success .checkin-status-pill__dot {
        background: #16a34a;
    }

    .checkin-status-pill--warning {
        border-color: #fedf89;
        background: #fff3d6;
        color: #c56a05;
    }

    .checkin-status-pill--warning .checkin-status-pill__dot {
        background: #f59e0b;
    }

    .checkin-status-pill--success {
        border-color: #b8e7c7;
        background: #e7f8ed;
        color: #15803d;
    }

    .checkin-shift-list {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }

    .checkin-shift-card {
        overflow: hidden;
        border: 1px solid #dfe6ef;
        border-radius: 6px;
        background: #ffffff;
    }

    .checkin-shift-card__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        min-height: 52px;
        padding: 0 1rem;
        border-bottom: 1px solid #e5eaf2;
    }

    .checkin-shift-card__name {
        color: #111827;
    }

    .checkin-shift-card__range {
        color: #111827;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }

    .checkin-time-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        min-height: 84px;
    }

    .checkin-time-cell {
        display: grid;
        grid-template-columns: 28px 1fr;
        grid-template-rows: auto auto;
        align-content: center;
        gap: 0.18rem 0.65rem;
        padding: 0.8rem 1.5rem;
        color: #475467;
    }

    .checkin-time-cell+.checkin-time-cell {
        border-left: 1px solid #e5eaf2;
    }

    .checkin-time-cell .mud-icon-root {
        grid-row: 1 / span 2;
        align-self: center;
        color: #1f2937;
    }

    .checkin-time-cell span {
        color: #475467;
        font-size: 0.86rem;
        font-weight: 600;
    }

    .checkin-time-cell b {
        color: #111827;
        font-size: 1.18rem;
        line-height: 1.15;
        font-variant-numeric: tabular-nums;
    }

    .checkin-time-cell--active .mud-icon-root,
    .checkin-time-cell--active b {
        color: #16a34a;
    }

    .checkin-time-cell--out .mud-icon-root,
    .checkin-time-cell--out.checkin-time-cell--active b {
        color: #ef1c25;
    }

    .checkin-shift-card__metrics,
    .checkin-working-time {
        margin: 0 1rem 0.9rem;
    }

    .checkin-working-time {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        color: #15803d;
    }

    .checkin-shift-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
        margin: 0 1rem 1rem;
    }

    .checkin-result-alert {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        min-height: 76px;
        padding: 0.85rem 1rem;
        border-radius: 6px;
        border: 1px solid #d8e6ff;
        background: #f3f7ff;
        color: #1d4ed8;
    }

    .checkin-result-alert .mud-typography-body2 {
        line-height: 1.35;
    }

    .checkin-result-alert--warning {
        border-color: #fedf89;
        background: #fff6df;
        color: #c56a05;
    }

    .checkin-result-alert--success {
        border-color: #bae7c4;
        background: #eefaf1;
        color: #15803d;
    }

    .checkin-result-alert__icon {
        width: 44px;
        height: 44px;
        display: grid;
        place-items: center;
        flex: 0 0 44px;
        border-radius: 50%;
        background: #16a34a;
        color: #ffffff;
    }

    .checkin-actions {
        display: grid;
        grid-template-columns: 124px 170px 1fr;
        gap: 1rem;
    }

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

    .checkin-close-button,
    .checkin-history-button {
        height: 58px;
        border: 1px solid #dfe6ef;
        border-radius: 6px;
        background: #ffffff;
        color: #111827;
        font-family: var(--font-heading);
        font-size: 0.92rem;
        font-weight: 700;
        cursor: pointer;
    }

    .checkin-history-button {
        border-color: #c8d8f5;
        background: #f3f7ff;
        color: #0f56c5;
    }

    .checkin-close-button:hover,
    .checkin-history-button:hover {
        background: #f8fafc;
    }

    .checkin-history-button:hover {
        background: #eaf2ff;
    }

    .checkin-cta {
        width: 100%;
        height: 58px;
        border-radius: 6px !important;
        color: #ffffff !important;
        text-transform: none !important;
        box-shadow: none !important;
    }

    .checkin-cta--in {
        background: #16a34a !important;
    }

    .checkin-cta--in:hover {
        background: #15803d !important;
    }

    .checkin-cta--out {
        background: #ef1c25 !important;
    }

    .checkin-cta--out:hover {
        background: #dc111b !important;
    }

    .checkin-cta .mud-button-label {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.7rem;
    }

    .checkin-cta .mud-icon-root {
        width: 1.65rem;
        height: 1.65rem;
        font-size: 1.65rem;
    }

    .checkin-cta__label {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        line-height: 1.12;
    }

    .checkin-cta__label b {
        font-size: 0.96rem;
        font-weight: 900;
    }

    .checkin-cta__label small {
        margin-top: 0.25rem;
        font-size: 0.76rem;
        font-weight: 600;
        opacity: 0.92;
    }
}

/* Custom utility classes to soften borders and lines */
.border-b {
    border-bottom: 1px solid var(--color-line-soft) !important;
}

.border-t {
    border-top: 1px solid var(--color-line-soft) !important;
}

/* Dashboard Switcher Control */
.dashboard-switcher {
    display: inline-flex;
    background: var(--color-bg-soft);
    padding: 4px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--color-line);
}

.switcher-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 16px;
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--color-text-muted);
    border: none;
    background: transparent;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
}

.switcher-item:hover {
    color: var(--color-primary);
}

.switcher-item.active {
    background: var(--color-primary);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(40, 89, 164, 0.25);
}

.switcher-item.active .mud-icon-root {
    color: #ffffff !important;
}

.switcher-item .mud-icon-root {
    font-size: 1.1rem !important;
    transition: color 0.25s ease;
}