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

/* =========================
 HEADER CHAT BUTTON
 ========================= */

.shell-chat-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 38px !important;
    padding: 0 0.9rem !important;
    border-radius: var(--radius-sm) !important;
    background: rgba(37, 99, 235, 0.1) !important;
    border: 1px solid transparent !important;
    color: var(--color-primary) !important;
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    text-decoration: none;
    cursor: pointer;
    font-family: var(--font-heading) !important;
    transition: background 0.2s ease, color 0.2s ease, transform 0.18s ease !important;
    white-space: nowrap;
    position: relative;
}

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

.shell-chat-btn svg {
    flex-shrink: 0;
    width: 1.12rem;
    height: 1.12rem;
    transition: transform 0.2s ease;
}

.shell-chat-btn:hover svg {
    transform: scale(1.08);
}

/* Badge unread count */
.shell-chat-badge {
    min-width: 18px;
    height: 18px;
    border-radius: 999px;
    background: #ef4444 !important;
    color: #ffffff !important;
    font-size: 0.7rem !important;
    font-weight: 800 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px !important;
    line-height: 1;
    border: 1.5px solid #ffffff !important;
    margin-left: 2px;
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3);
    animation: badge-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes badge-pop {
    from {
        transform: scale(0);
    }

    to {
        transform: scale(1);
    }
}

@media (max-width: 640px) {
    .shell-chat-btn span:not(.shell-chat-badge) {
        display: none;
    }

    .shell-chat-btn {
        padding: 0 !important;
        width: 38px;
        height: 38px;
        justify-content: center;
        border-radius: 50% !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;
}

    .app-table-toolbar__search-field .mud-input-control {
        min-height: 48px;
    }

    .app-table-toolbar__search-field .mud-input {
        min-height: 48px;
        display: flex;
        align-items: center;
    }

    .app-table-toolbar__search-field input.mud-input-root-outlined {
        height: auto !important;
        line-height: 1.8 !important;
        padding: 0 8px !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;
}

.evaluation-share-composer {
    display: inline-grid;
    width: min(100%, 960px);
    grid-template-columns: minmax(360px, 560px) minmax(200px, 260px) auto;
    gap: 0.75rem;
    align-items: start;
}

.evaluation-share-composer--period {
    width: min(100%, 720px);
    grid-template-columns: minmax(360px, 560px) auto;
}

.evaluation-share-composer__user,
.evaluation-share-composer__permission {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.evaluation-share-composer .select-paging__label,
.evaluation-share-field-label {
    display: block;
    min-height: 1.1rem;
    margin-bottom: 0.35rem;
    color: var(--color-text);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.25;
}

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

.evaluation-share-select .mud-input {
    display: flex;
    align-items: center;
    height: 2.625rem !important;
    min-height: 2.625rem !important;
}

.evaluation-share-select .mud-input-slot {
    align-items: center !important;
    min-height: 0 !important;
}

.evaluation-share-select .mud-select-input {
    height: auto !important;
    line-height: 1.35 !important;
}

.evaluation-share-composer__action {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding-top: 1.45rem;
}

.evaluation-share-composer__action .mud-button-root {
    min-width: 112px;
    height: 2.625rem;
    min-height: 40px;
    padding-inline: 1.05rem;
}

@media (max-width: 960px) {
    .evaluation-share-composer,
    .evaluation-share-composer--period {
        grid-template-columns: 1fr;
    }

    .evaluation-share-composer__action {
        justify-content: flex-start;
        padding-top: 0;
    }
}

.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: "\2022";
    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: "\2022";
    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: "\2022";
    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: "\2022";
    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 hin th helper/error text, chiu cao component tng ln.
 Tinh chnh icon ln khp 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: "\2022";
    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;
}

/* Cn dialog vo vng content (bn phi sidebar) thay v gia ton mn hnh.
 Ch p dng trn desktop (md+) mobile sidebar n nn khng cn 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 sch li parse Import chm cng (B275817): MudTable 4 ct Dng/Trng/Gi tr/M t.
 MudAlert content area mc nh khng stretch force full width + scroll dc. */
.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 li/cnh bo dng n gin (BE-returned strings t kt 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;
}


/* 
 CHAT PANEL GLOBAL CSS 
 Prefix: cp-
 */
:root {
    --sidebar-actual-width: 250px;
}

/* Sidebar blur khi chat m */
body.chat-panel-open .mud-drawer {
    filter: blur(3px);
    pointer-events: none !important;
    user-select: none;
    transition: filter 0.3s ease;
}

/* Ẩn thanh cuộn của trang chính khi mở Chat Panel */
body.chat-panel-open,
html:has(body.chat-panel-open) {
    overflow: hidden !important;
}

/* Root overlay */
.cp-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    visibility: hidden;
}

/* Override MudBlazor dialog stack to be above Chat Panel */
.mud-dialog-container {
    z-index: 100000 !important;
}

.mud-dialog-overlay {
    z-index: 99999 !important;
}

.cp-overlay--open {
    pointer-events: all;
    visibility: visible;
}

/* Backdrop */
.cp-backdrop {
    position: absolute;
    inset: 0;
    background: transparent;
    transition: background 0.35s ease;
    cursor: default;
}

.cp-overlay--open .cp-backdrop {
    background: rgba(15, 23, 42, 0.22);
}

/* Panel */
.cp-panel {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: var(--sidebar-actual-width, 250px);
    display: flex;
    background: #f0f4f8;
    box-shadow: -16px 0 60px rgba(15, 23, 42, 0.22), -4px 0 16px rgba(15, 23, 42, 0.1);
    transform: translateX(calc(100% + 24px));
    opacity: 0;
    transition: transform 0.36s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
    overflow: hidden;
}

.cp-overlay--open .cp-panel {
    transform: translateX(0);
    opacity: 1;
}

/* LEFT: Conversation list */
.cp-left {
    width: 300px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-right: 1px solid #e8ecf0;
    overflow: hidden;
}

.cp-left-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 14px 12px;
    background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
    color: #fff;
    flex-shrink: 0;
}

.cp-left-header__brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.cp-left-header__icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cp-left-header__actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cp-realtime-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
    display: inline-block;
    flex-shrink: 0;
    border: 1.5px solid rgba(255, 255, 255, 0.4);
}

.cp-realtime-dot--on {
    background: #4ade80;
    border-color: #22c55e;
    box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.3);
    animation: cp-rtpulse 2s infinite;
}

@keyframes cp-rtpulse {

    0%,
    100% {
        box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.3);
    }

    50% {
        box-shadow: 0 0 0 6px rgba(74, 222, 128, 0);
    }
}

.cp-hdr-btn {
    width: 30px;
    height: 30px;
    border: none;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.9);
    transition: background 0.2s ease;
    flex-shrink: 0;
}

.cp-hdr-btn:hover {
    background: rgba(255, 255, 255, 0.28);
    color: #fff;
}

.cp-left-search {
    padding: 10px 12px 8px;
    background: #f8fafc;
    border-bottom: 1px solid #f1f5f9;
    flex-shrink: 0;
}

.cp-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.cp-search-ico {
    position: absolute;
    left: 10px;
    color: #94a3b8;
    pointer-events: none;
}

.cp-search-input {
    width: 100%;
    padding: 8px 12px 8px 32px;
    border: 1.5px solid #e2e8f0;
    border-radius: 999px;
    font-size: 0.85rem;
    background: #fff;
    color: #1e293b;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    font-family: inherit;
    box-sizing: border-box;
}

.cp-search-input::placeholder {
    color: #94a3b8;
}

.cp-search-input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.cp-conv-list {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: #dde3ec transparent;
}

.cp-conv-list::-webkit-scrollbar {
    width: 4px;
}

.cp-conv-list::-webkit-scrollbar-thumb {
    background: #dde3ec;
    border-radius: 4px;
}

.cp-list-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 20px;
    gap: 10px;
    color: #94a3b8;
    font-size: 0.82rem;
    text-align: center;
}

.cp-list-state--empty {
    color: #b0bec8;
}

.cp-conv-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    border: none;
    background: transparent;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s ease;
    border-bottom: 1px solid #f5f7fa;
    min-width: 0;
    position: relative;
}

.cp-conv-item:hover {
    background: #f3f6fb;
}

.cp-conv-item--active {
    background: #eff6ff !important;
    border-left: 3px solid #3b82f6;
    padding-left: 11px;
}

.cp-conv-item--active:hover {
    background: #e8f2ff !important;
}

.cp-conv-item:last-child {
    border-bottom: none;
}

.cp-conv-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.9rem;
    font-weight: 800;
}

.cp-conv-avatar--group {
    background: linear-gradient(135deg, #e2e8f0, #cbd5e1);
    color: #475569;
    border: 1.5px solid #dde3ec;
}

.cp-conv-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.cp-conv-row1,
.cp-conv-row2 {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px;
    min-width: 0;
}

.cp-conv-name {
    font-size: 0.88rem;
    font-weight: 600;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.cp-conv-name--bold {
    font-weight: 800;
    color: #0f172a;
}

.cp-conv-time {
    font-size: 0.68rem;
    color: #94a3b8;
    font-weight: 500;
    flex-shrink: 0;
    white-space: nowrap;
}

.cp-conv-preview {
    font-size: 0.77rem;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
}

.cp-conv-preview--bold {
    color: #334155;
    font-weight: 600;
}

/* Draft "ChÆ°a gá»­i" indicator in conversation list */
.cp-conv-draft-label {
    color: #ef4444;
    font-weight: 600;
    font-size: 0.76rem;
    margin-right: 4px;
    flex-shrink: 0;
}

.cp-conv-draft-text {
    color: #94a3b8;
    font-size: 0.76rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* @mention link inside message bubbles */
.cp-mention-link {
    color: #2563eb;
    font-weight: 600;
    cursor: pointer;
    border-radius: 4px;
    padding: 0 2px;
    transition: background 0.12s ease, color 0.12s ease;
    display: inline;
}
.cp-mention-link:hover {
    background: rgba(37,99,235,0.10);
    text-decoration: underline;
}
.cp-mention-link--all {
    color: #7c3aed;
    cursor: default;
}
.cp-mention-link--all:hover {
    background: transparent;
    text-decoration: none;
}
/* Mine messages – invert mention color for readability on dark bg */
.cp-msg--mine .cp-mention-link {
    color: #bfdbfe;
}
.cp-msg--mine .cp-mention-link:hover {
    background: rgba(255,255,255,0.15);
}
.cp-msg--mine .cp-mention-link--all {
    color: #ddd6fe;
    cursor: default;
}
.cp-msg--mine .cp-mention-link--all:hover {
    background: transparent;
    text-decoration: none;
}

/* Profile popup card */
.cp-profile-popup {
    background: #ffffff;
    border-radius: 20px;
    width: 340px;
    max-width: calc(100vw - 32px);
    box-shadow: 0 24px 64px rgba(15,23,42,0.22), 0 4px 16px rgba(15,23,42,0.08);
    overflow: hidden;
    animation: cpSlideUp 0.2s cubic-bezier(0.34,1.56,0.64,1);
}

@keyframes cpSlideUp {
    from { opacity: 0; transform: translateY(20px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.cp-profile-popup__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 16px 12px;
    font-weight: 700;
    font-size: 0.92rem;
    color: #0f172a;
    border-bottom: 1px solid #f1f5f9;
}

.cp-profile-popup__hero {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 20px 16px;
}

.cp-profile-popup__avatar {
    width: 64px; height: 64px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem; font-weight: 700; color: #fff;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(15,23,42,0.16);
}
.cp-profile-popup__avatar img {
    width: 100%; height: 100%; object-fit: cover;
}

.cp-profile-popup__name-wrap {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; gap: 3px;
}
.cp-profile-popup__name {
    font-size: 1.05rem; font-weight: 700; color: #0f172a;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cp-profile-popup__code {
    font-size: 0.75rem; color: #64748b; font-weight: 500;
}

.cp-profile-popup__info {
    padding: 0 20px 20px;
    display: flex; flex-direction: column; gap: 10px;
}
.cp-profile-popup__row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    padding: 8px 12px;
    background: #f8fafc;
    border-radius: 10px;
}
.cp-profile-popup__label {
    display: flex; align-items: center; gap: 6px;
    font-size: 0.78rem; color: #64748b; font-weight: 500;
    flex-shrink: 0;
}
.cp-profile-popup__value {
    font-size: 0.82rem; font-weight: 600; color: #1e293b;
    text-align: right; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.cp-badge {
    min-width: 18px;
    height: 18px;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    flex-shrink: 0;
    line-height: 1;
}

/* RIGHT: Messages area */
.cp-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #f8fafc;
    min-width: 0;
    overflow: hidden;
}

.cp-welcome {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    text-align: center;
    padding: 40px;
    color: #94a3b8;
}

.cp-welcome__icon {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #93c5fd;
}

.cp-welcome h3 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 800;
    color: #334155;
    letter-spacing: -0.02em;
}

.cp-welcome p {
    margin: 0;
    font-size: 0.875rem;
    color: #64748b;
}

.cp-close-btn-alt {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 9px 20px;
    border: 1.5px solid #e2e8f0;
    border-radius: 999px;
    background: #fff;
    color: #475569;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
    font-family: inherit;
}

.cp-close-btn-alt:hover {
    border-color: #94a3b8;
    background: #f1f5f9;
}

.cp-right-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: #fff;
    border-bottom: 1.5px solid #f1f5f9;
    flex-shrink: 0;
    gap: 12px;
    box-shadow: 0 1px 6px rgba(15, 23, 42, 0.04);
}

.cp-right-header__info {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1;
}

.cp-right-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.88rem;
    font-weight: 800;
    flex-shrink: 0;
}

.cp-right-header__text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cp-right-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.01em;
}

.cp-right-meta {
    font-size: 0.72rem;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
}

.cp-scope-tag {
    background: #eff6ff;
    color: #2563eb;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    border: 1px solid #bfdbfe;
}

.cp-right-header__actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.cp-action-btn {
    width: 34px;
    height: 34px;
    border: 1.5px solid #e2e8f0;
    background: #f8fafc;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #475569;
    text-decoration: none;
    transition: border-color 0.2s, background 0.2s, color 0.2s;
    flex-shrink: 0;
}

.cp-action-btn:hover {
    border-color: #93c5fd;
    background: #eff6ff;
    color: #2563eb;
}

.cp-member-strip {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 7px 16px;
    background: #f1f5f9;
    border-bottom: 1px solid #e8ecf0;
    flex-shrink: 0;
    scrollbar-width: none;
    align-items: center;
}

.cp-member-strip::-webkit-scrollbar {
    display: none;
}

.cp-member-chip {
    flex-shrink: 0;
    padding: 2px 10px;
    border-radius: 999px;
    background: #e2e8f0;
    color: #475569;
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid #cbd5e1;
}

.cp-messages {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    scrollbar-width: thin;
    scrollbar-color: #dde3ec transparent;
}

/* Prevent browser scroll-anchoring from jumping when messages are appended */
.cp-messages { overflow-anchor: none; }

.cp-messages::-webkit-scrollbar {
    width: 4px;
}

.cp-messages::-webkit-scrollbar-thumb {
    background: #dde3ec;
    border-radius: 4px;
}

.cp-date-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 0 6px;
}

.cp-date-divider span {
    font-size: 0.72rem;
    font-weight: 600;
    color: #94a3b8;
    background: #f8fafc;
    padding: 2px 12px;
    border-radius: 999px;
    border: 1px solid #e8ecf0;
}

.cp-msg-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 48px 24px;
    color: #94a3b8;
    font-size: 0.85rem;
    flex: 1;
    text-align: center;
}

.cp-msg-state--empty {
    color: #b0bec8;
}

.cp-msg {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    animation: cp-msg-in 0.22s ease-out;
    margin-bottom: 2px;
}

@keyframes cp-msg-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.cp-msg--mine {
    flex-direction: row-reverse;
}

.cp-msg-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    font-weight: 800;
    flex-shrink: 0;
    margin-bottom: 18px;
}

.cp-msg-content {
    display: flex;
    flex-direction: column;
    max-width: min(560px, 72%);
    gap: 2px;
}

.cp-msg--mine .cp-msg-content {
    align-items: flex-end;
}

.cp-msg-sender {
    font-size: 0.7rem;
    font-weight: 700;
    color: #3b82f6;
    padding: 0 4px;
    margin-bottom: 1px;
}

.cp-msg-bubble {
    padding: 10px 14px;
    border-radius: 18px;
    font-size: 0.9rem;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    background: #fff;
    color: #1e293b;
    border: 1px solid #e8ecf0;
    border-bottom-left-radius: 4px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
    max-width: 100%;
}

.cp-msg--mine .cp-msg-bubble {
    background: linear-gradient(135deg, #1e40af, #3b82f6);
    color: #fff;
    border-color: transparent;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 18px;
    box-shadow: 0 4px 14px rgba(29, 79, 159, 0.28);
}

.cp-msg-atts {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cp-msg-img-wrap {
    border-radius: 14px;
    overflow: hidden;
    cursor: zoom-in;
    max-width: 280px;
    border: 1px solid #e8ecf0;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
    transition: box-shadow 0.2s;
}

.cp-msg-img-wrap:hover {
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.14);
}

.cp-msg-img {
    display: block;
    max-width: 100%;
    max-height: 220px;
    object-fit: cover;
    transition: transform 0.25s;
}

.cp-msg-img-wrap:hover .cp-msg-img {
    transform: scale(1.02);
}

.cp-msg-file {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1.5px solid #e8ecf0;
    border-radius: 14px;
    padding: 10px 14px;
    min-width: 220px;
    max-width: 290px;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.05);
}

.cp-msg--mine .cp-msg-file {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.35);
}

.cp-msg-file__icon {
    color: #3b82f6;
    flex-shrink: 0;
}

.cp-msg--mine .cp-msg-file__icon {
    color: rgba(255, 255, 255, 0.9);
}

.cp-msg-file__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cp-msg-file__name {
    font-size: 0.82rem;
    font-weight: 600;
    color: #1e293b;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cp-msg-file__name:hover {
    text-decoration: underline;
}

.cp-msg--mine .cp-msg-file__name {
    color: #fff;
}

.cp-msg-file__size {
    font-size: 0.68rem;
    color: #94a3b8;
}

.cp-msg--mine .cp-msg-file__size {
    color: rgba(255, 255, 255, 0.65);
}

.cp-msg-file__dl {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #eff6ff;
    color: #3b82f6;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    flex-shrink: 0;
    transition: background 0.2s;
}

.cp-msg-file__dl:hover {
    background: #dbeafe;
}

.cp-msg--mine .cp-msg-file__dl {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}

.cp-msg-time {
    font-size: 0.63rem;
    color: #94a3b8;
    padding: 0 4px;
    margin-top: 1px;
}

.cp-typing {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 20px;
    flex-shrink: 0;
    animation: cp-fade 0.25s ease;
}

@keyframes cp-fade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.cp-typing-dots {
    display: flex;
    align-items: center;
    gap: 3px;
    background: #fff;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid #e8ecf0;
}

.cp-typing-dots span {
    width: 5px;
    height: 5px;
    background: #3b82f6;
    border-radius: 50%;
    animation: cp-bounce 1.4s infinite ease-in-out both;
}

.cp-typing-dots span:nth-child(1) {
    animation-delay: -0.32s;
}

.cp-typing-dots span:nth-child(2) {
    animation-delay: -0.16s;
}

@keyframes cp-bounce {

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

    40% {
        transform: scale(1);
        opacity: 1;
    }
}

.cp-typing-text {
    font-size: 0.72rem;
    color: #64748b;
    font-style: italic;
}

.cp-pending {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 20px;
    background: #f1f5f9;
    border-top: 1px solid #e8ecf0;
    flex-shrink: 0;
}

.cp-pending-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1.5px solid #cbd5e1;
    border-radius: 8px;
    padding: 4px 10px;
    font-size: 0.77rem;
    font-weight: 600;
    color: #334155;
    max-width: 180px;
}

.cp-pending-item span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.cp-pending-item button {
    border: none;
    background: none;
    cursor: pointer;
    color: #ef4444;
    display: flex;
    align-items: center;
    padding: 2px;
    border-radius: 4px;
    flex-shrink: 0;
    transition: background 0.15s;
}

.cp-pending-item button:hover {
    background: #fee2e2;
}

.cp-composer {
    flex-shrink: 0;
    background: #fff;
    border-top: 1.5px solid #f1f5f9;
}

.cp-composer__toolbar {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 8px 16px 0;
}

.cp-file-upload {
    margin: 0 !important;
}

.cp-tool-btn {
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    transition: background 0.15s, color 0.15s;
}

.cp-tool-btn:hover:not(:disabled) {
    background: #eff6ff;
    color: #2563eb;
}

.cp-tool-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.cp-upload-spin {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
}

.cp-composer__row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    position: relative; /* anchor for mention popup */
}

.cp-composer__input {
    flex: 1;
    min-width: 0;
    padding: 10px 12px;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.9rem;
    color: #1e293b;
    background: #f8fafc;
    outline: none;
    resize: none;
    font-family: inherit;
    line-height: 1.4;
    max-height: 120px;
    overflow-y: auto;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
    scrollbar-width: none;
}

.cp-composer__input::-webkit-scrollbar {
    display: none;
}

.cp-composer__input::placeholder {
    color: #94a3b8;
}

.cp-composer__input:focus {
    border-color: #3b82f6;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.cp-composer__input:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.cp-send-btn {
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s;
    background: linear-gradient(135deg, #1e40af, #3b82f6);
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.4);
}

.cp-send-btn:hover:not(:disabled) {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.5);
}

.cp-send-btn:active:not(:disabled) {
    transform: scale(0.95);
}

.cp-send-btn:disabled {
    background: #e2e8f0;
    color: #94a3b8;
    box-shadow: none;
    cursor: not-allowed;
}

/* Floating FAB */
.chat-fab-wrapper {
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 9998;
}

.chat-fab {
    position: relative;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(59, 130, 246, 0.45), 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    animation: cp-fab-appear 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes cp-fab-appear {
    from {
        transform: scale(0);
        opacity: 0;
    }

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

.chat-fab:hover {
    transform: translateY(-3px) scale(1.06);
    box-shadow: 0 8px 28px rgba(59, 130, 246, 0.5), 0 4px 12px rgba(0, 0, 0, 0.18);
}

.chat-fab:active {
    transform: scale(0.95);
}

.chat-fab__icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat-fab__badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 20px;
    height: 20px;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.5);
    line-height: 1;
}

@media (max-width: 768px) {
    .cp-panel {
        left: 0 !important;
    }

    .cp-left {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .chat-fab-wrapper {
        bottom: 20px;
        right: 16px;
    }
}

/* New Chat Panel CSS */
.cp-newchat {
    background: #ffffff;
    border-bottom: 2px solid #eff6ff;
    animation: cp-slide-down 0.22s ease-out;
    flex-shrink: 0;
}

@keyframes cp-slide-down {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.cp-newchat__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px 6px;
    font-size: 0.8rem;
    font-weight: 700;
    color: #1e3a8a;
    letter-spacing: 0.01em;
}

.cp-newchat__close {
    border: none;
    background: none;
    cursor: pointer;
    color: #94a3b8;
    padding: 4px;
    border-radius: 6px;
    display: flex;
    transition: background 0.15s, color 0.15s;
}

.cp-newchat__close:hover {
    background: #f1f5f9;
    color: #ef4444;
}

.cp-newchat__search {
    position: relative;
    padding: 0 12px 8px;
}

.cp-newchat__search .cp-search-input {
    border-radius: 10px;
    font-size: 0.82rem;
}

.cp-newchat__results {
    max-height: 220px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #e2e8f0 transparent;
}

.cp-newchat__emp {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 14px;
    border: none;
    background: transparent;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
    border-top: 1px solid #f8fafc;
}

.cp-newchat__emp:hover {
    background: #f0f9ff;
}

.cp-newchat__emp .cp-conv-avatar {
    width: 34px;
    height: 34px;
    font-size: 0.72rem;
    flex-shrink: 0;
}

.cp-newchat__emp-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.cp-newchat__emp-name {
    font-size: 0.84rem;
    font-weight: 700;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cp-newchat__emp-meta {
    font-size: 0.68rem;
    color: #94a3b8;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cp-newchat__emp-arrow {
    color: #cbd5e1;
    flex-shrink: 0;
    transition: color 0.15s;
}

.cp-newchat__emp:hover .cp-newchat__emp-arrow {
    color: #3b82f6;
}

/* Header */
.cp-hdr-btn--close {
    opacity: 0.7;
}

.cp-hdr-btn--close:hover {
    opacity: 1;
    background: rgba(239, 68, 68, 0.25) !important;
}

/* Composer (override) */
.cp-composer__row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-top: 1px solid #f1f5f9;
    background: #ffffff;
}

.cp-composer .cp-tool-btn {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
}

.cp-composer__input {
    flex: 1;
    min-width: 0;
    padding: 8px 12px;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.88rem;
    background: #f8fafc;
    color: #1e293b;
    outline: none;
    resize: none;
    font-family: inherit;
    line-height: 1.4;
    max-height: 100px;
    overflow-y: auto;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
    scrollbar-width: none;
}

.cp-composer__input::-webkit-scrollbar {
    display: none;
}

.cp-composer__input::placeholder {
    color: #b0bec8;
}

.cp-composer__input:focus {
    border-color: #3b82f6;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.cp-send-btn {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
}

/* TABS */
.cp-tab-bar {
    display: flex;
    gap: 0;
    background: #f8fafc;
    border-bottom: 1.5px solid #e8f0fe;
    padding: 0 8px;
}

.cp-tab-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    justify-content: center;
    padding: 9px 8px;
    border: none;
    background: transparent;
    font-size: 0.8rem;
    font-weight: 600;
    color: #7c8db5;
    cursor: pointer;
    border-bottom: 2.5px solid transparent;
    margin-bottom: -1.5px;
    transition: color 0.18s, border-color 0.18s;
    position: relative;
}

.cp-tab-btn:hover {
    color: #2563eb;
}

.cp-tab-btn--active {
    color: #1d4ed8;
    border-bottom-color: #3b82f6;
    background: #fff;
}

.cp-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 9px;
    font-size: 0.65rem;
    font-weight: 700;
    background: #ef4444;
    color: #fff;
    line-height: 1;
}

/* CONTACTS LIST */
.cp-contact-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 14px;
    border: none;
    background: transparent;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
    border-bottom: 1px solid #f8fafc;
}

.cp-contact-item:hover {
    background: #f0f9ff;
}

.cp-contact-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
    overflow: hidden;
}

.cp-contact-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.cp-contact-name {
    font-size: 0.84rem;
    font-weight: 700;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cp-contact-meta {
    font-size: 0.7rem;
    color: #94a3b8;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cp-contact-arrow {
    color: #cbd5e1;
    flex-shrink: 0;
    transition: color 0.15s;
}

.cp-contact-item:hover .cp-contact-arrow {
    color: #3b82f6;
}

/* SETTINGS PANEL (slide t trn, ln messages) */
.cp-settings-panel {
    position: absolute;
    top: 62px;
    /* di header */
    right: 0;
    width: 280px;
    height: calc(100% - 62px);
    background: #fff;
    border-left: 1.5px solid #e2e8f0;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.08);
    z-index: 10;
    display: flex;
    flex-direction: column;
    animation: cp-settings-slide 0.2s ease;
    overflow: hidden;
}

@keyframes cp-settings-slide {
    from {
        opacity: 0;
        transform: translateX(20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.cp-settings-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 12px;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.85rem;
    font-weight: 700;
    color: #1e293b;
    flex-shrink: 0;
}

.cp-settings-close {
    border: none;
    background: none;
    cursor: pointer;
    color: #94a3b8;
    padding: 4px;
    border-radius: 6px;
    display: flex;
    transition: background 0.15s, color 0.15s;
}

.cp-settings-close:hover {
    background: #f1f5f9;
    color: #ef4444;
}

.cp-settings-group-avatar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 20px 16px 16px;
    border-bottom: 1px solid #f1f5f9;
    flex-shrink: 0;
}

.cp-settings-avatar {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

.cp-settings-avatar--group {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: #fff;
}

.cp-settings-group-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1e293b;
    text-align: center;
}

.cp-settings-group-scope {
    font-size: 0.72rem;
    color: #64748b;
    font-weight: 500;
}

.cp-settings-section-title {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px 6px;
    font-size: 0.73rem;
    font-weight: 700;
    color: #64748b;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    flex-shrink: 0;
}

.cp-settings-members {
    flex: 1;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #e2e8f0 transparent;
}

.cp-member-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    border-bottom: 1px solid #f8fafc;
    transition: background 0.15s;
}

.cp-member-row:hover {
    background: #f8fafc;
}

.cp-member-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    flex-shrink: 0;
}

.cp-member-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.cp-member-name {
    font-size: 0.82rem;
    font-weight: 600;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cp-member-code {
    font-size: 0.68rem;
    color: #94a3b8;
}

.cp-member-role-tag {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 10px;
    white-space: nowrap;
    flex-shrink: 0;
}

.cp-member-role-tag--admin {
    background: #dbeafe;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
}

/* messages khi settings */
.cp-right {
    position: relative;
}

.cp-messages--narrowed {
    /* settings panel  */
}

/* active settings button */
.cp-action-btn--active {
    background: rgba(59, 130, 246, 0.12) !important;
    color: #2563eb !important;
}


/* -- CREATE GROUP MODAL -- */
.cp-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: cp-fade-in 0.18s ease;
}

@keyframes cp-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.cp-modal {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
    width: 440px;
    max-width: 95vw;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: cp-modal-slide 0.22s cubic-bezier(.4, 0, .2, 1);
}

@keyframes cp-modal-slide {
    from {
        opacity: 0;
        transform: translateY(-18px) scale(0.97);
    }

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

.cp-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 12px;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.95rem;
    font-weight: 700;
    color: #1e293b;
    flex-shrink: 0;
}

.cp-modal__field {
    padding: 10px 20px 4px;
    flex-shrink: 0;
}

.cp-modal__label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.75rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 6px;
}

.cp-modal__sel-count {
    font-size: 0.72rem;
    font-weight: 700;
    background: #dbeafe;
    color: #1d4ed8;
    padding: 2px 8px;
    border-radius: 10px;
    text-transform: none;
}

.cp-modal__input {
    width: 100%;
    padding: 9px 14px;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    font-size: 0.88rem;
    color: #1e293b;
    background: #f8fafc;
    outline: none;
    font-family: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.cp-modal__input:focus {
    border-color: #3b82f6;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.cp-modal__contacts {
    max-height: 280px;
    overflow-y: auto;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    scrollbar-width: thin;
    scrollbar-color: #e2e8f0 transparent;
}

.cp-modal__contact {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid #f8fafc;
    transition: background 0.13s;
    user-select: none;
}

.cp-modal__contact:last-child {
    border-bottom: none;
}

.cp-modal__contact:hover {
    background: #f0f9ff;
}

.cp-modal__contact--checked {
    background: #eff6ff;
}

.cp-modal__checkbox {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    accent-color: #3b82f6;
    cursor: pointer;
}

.cp-modal__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid #f1f5f9;
    flex-shrink: 0;
}

/* -- EMOJI PICKER CONTAINER (emoji-picker-element web component) -- */
.cp-emoji-picker-container {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 4px;
    z-index: 200;
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.18), 0 2px 8px rgba(15, 23, 42, 0.08);
    overflow: hidden;
    animation: cp-fade-in 0.15s ease;
}

/* Tùy chỉnh giao diện emoji-picker-element */
emoji-picker {
    --background: #ffffff;
    --border-color: #e8ecf2;
    --border-radius: 16px;
    --button-active-background: #eff6ff;
    --button-hover-background: #f1f5f9;
    --category-emoji-size: 1.1rem;
    --emoji-size: 1.35rem;
    --emoji-padding: 0.25rem;
    --indicator-color: #3b82f6;
    --indicator-height: 3px;
    --input-border-color: #e2e8f0;
    --input-border-radius: 8px;
    --input-font-color: #1e293b;
    --input-placeholder-color: #94a3b8;
    --num-columns: 8;
    --outline-color: #93c5fd;
    --outline-size: 2px;
    --skintone-border-radius: 50%;
    width: 340px;
    height: 380px;
}

/* cp-composer phải có position:relative cho emoji picker */
.cp-composer {
    position: relative;
}

.cp-modal__btn {
    padding: 8px 22px;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    border: none;
    font-family: inherit;
    transition: background 0.18s, color 0.18s, opacity 0.18s;
}

.cp-modal__btn--cancel {
    background: #f1f5f9;
    color: #64748b;
}

.cp-modal__btn--cancel:hover {
    background: #e2e8f0;
}

.cp-modal__btn--create {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: #fff;
    min-width: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.cp-modal__btn--create:hover:not(:disabled) {
    opacity: 0.9;
}

.cp-modal__btn--create:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* -- PRESENCE STATUS -- */
.cp-presence-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #94a3b8;
    /* offline grey */
    flex-shrink: 0;
    transition: background 0.3s;
}

.cp-presence-dot--online {
    background: #22c55e;
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.25);
}

.cp-presence-dot--offline {
    background: #94a3b8;
}

.cp-presence-online {
    color: #16a34a;
    font-size: 0.78rem;
    font-weight: 600;
}

.cp-presence-offline {
    color: #94a3b8;
    font-size: 0.78rem;
}

.cp-settings-presence {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 4px;
    font-size: 0.8rem;
}

/* Online dot */
.cp-member-avatar-wrap {
    position: relative;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
}

.cp-member-avatar-wrap .cp-member-avatar {
    width: 100%;
    height: 100%;
}

.cp-member-online-dot {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #94a3b8;
    border: 2px solid #fff;
    transition: background 0.3s;
}

.cp-member-online-dot--on {
    background: #22c55e;
}

/* -- CONVERSATION ITEM - REFACTOR (div thay button) -- */
.cp-conv-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    cursor: pointer;
    background: transparent;
    border: none;
    text-align: left;
    width: 100%;
    transition: background 0.15s;
    position: relative;
}

.cp-conv-item:hover {
    background: rgba(148, 163, 184, 0.10);
}

.cp-conv-item--active {
    background: rgba(59, 130, 246, 0.10) !important;
}

.cp-conv-item--active .cp-conv-name {
    color: #1d4ed8;
}

.cp-conv-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}

/* -- CONVERSATION ACTION MENU -- */
.cp-conv-actions {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%) scale(0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 210;
}

.cp-conv-item:hover .cp-conv-actions,
.cp-conv-item--menu-open .cp-conv-actions {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(-50%) scale(1);
}

.cp-conv-more-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
    transition: all 0.15s ease;
    padding: 0;
}

.cp-conv-more-btn:hover,
.cp-conv-more-btn--active {
    background: #2563eb;
    border-color: #2563eb;
    color: #ffffff !important;
    box-shadow: 0 3px 8px rgba(37, 99, 235, 0.3);
}

.cp-conv-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 14px 30px -10px rgba(15, 23, 42, 0.24), 0 6px 14px -8px rgba(15, 23, 42, 0.18);
    z-index: 250 !important;
    min-width: 158px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    transform-origin: top right;
    animation: cp-dropdown-scale 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes cp-dropdown-scale {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-4px);
    }

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

.cp-conv-menu-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    min-height: 34px;
    padding: 7px 9px;
    border-radius: 8px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 600;
    color: #475569;
    text-align: left;
    font-family: inherit;
    transition: all 0.12s ease;
}

.cp-conv-menu-item:hover {
    background: #f1f5f9;
    color: #0f172a;
}

.cp-conv-menu-item svg {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    color: #94a3b8;
    transition: color 0.12s ease;
}

.cp-conv-menu-item:hover svg {
    color: #475569;
}

.cp-conv-menu-item--danger {
    color: #ef4444;
}

.cp-conv-menu-item--danger svg {
    color: #fca5a5;
}

.cp-conv-menu-item--danger:hover {
    background: #fef2f2;
    color: #dc2626;
}

.cp-conv-menu-item--danger:hover svg {
    color: #ef4444;
}

/* -- FIX FILE MESSAGE - SENDER SIDE (cp-msg--mine) -- */
/* File bubble - sender side: darker background for better text readability */
.cp-msg--mine .cp-msg-file {
    background: rgba(255, 255, 255, 0.22) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.4) !important;
    color: #fff;
}

.cp-msg--mine .cp-msg-file__name {
    color: #fff !important;
    font-weight: 600;
}

.cp-msg--mine .cp-msg-file__size {
    color: rgba(255, 255, 255, 0.75) !important;
}

.cp-msg--mine .cp-msg-file__icon {
    color: rgba(255, 255, 255, 0.9) !important;
}

.cp-msg--mine .cp-msg-file__dl {
    background: rgba(255, 255, 255, 0.25) !important;
    color: #fff !important;
}

.cp-msg--mine .cp-msg-file__dl:hover {
    background: rgba(255, 255, 255, 0.4) !important;
}

/* Image bubble on sender side */
.cp-msg--mine .cp-msg-img-wrap {
    border: 2px solid rgba(255, 255, 255, 0.3);
}

/* -- CONV MENU BACKDROP -- */
.cp-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 190;
    background: transparent;
    cursor: default;
}

/* -- ACTION MENU OVERRIDES -- */
.cp-conv-item--menu-open {
    z-index: 200 !important;
}

.cp-conv-menu-sep {
    height: 1px;
    background: #f1f5f9;
    margin: 4px 6px;
}

.cp-conv-time,
.cp-badge {
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.cp-conv-item:hover .cp-conv-time,
.cp-conv-item--menu-open .cp-conv-time,
.cp-conv-item:hover .cp-badge,
.cp-conv-item--menu-open .cp-badge {
    opacity: 0;
    transform: translateX(4px);
}

/* -- ATTACHMENT CHIP BAR - REDESIGN -- */
.cp-pending {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 12px 4px;
    border-bottom: 1px solid #f1f5f9;
    background: #f8fafc;
}

.cp-pending-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    padding: 4px 8px 4px 6px;
    font-size: 0.78rem;
    color: #334155;
    font-weight: 500;
    max-width: 200px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
    animation: cp-fade-in 0.15s ease;
}

.cp-pending-chip__thumb {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
}

.cp-pending-chip__icon {
    color: #3b82f6;
    flex-shrink: 0;
    font-size: 1rem;
}

.cp-pending-chip__name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 130px;
}

.cp-pending-chip__rm {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #f1f5f9;
    color: #64748b;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
    transition: background 0.15s;
}

.cp-pending-chip__rm:hover {
    background: #fecaca;
    color: #dc2626;
}

/* Chat Widget Bubble Notification */
.chat-fab-bubble {
    position: absolute;
    bottom: 0;
    right: 70px;
    width: 260px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.15), 0 1px 3px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(226, 232, 240, 0.8);
    display: flex;
    align-items: center;
    padding: 12px;
    gap: 12px;
    cursor: pointer;
    z-index: 9999;
    animation: chat-bubble-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    transition: transform 0.2s, box-shadow 0.2s;
}

.chat-fab-bubble:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 36px rgba(15, 23, 42, 0.18), 0 2px 4px rgba(0, 0, 0, 0.05);
}

@keyframes chat-bubble-in {
    from {
        opacity: 0;
        transform: translateX(20px) scale(0.9);
    }

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

.chat-fab-bubble__close {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: none;
    z-index: 250 !important;
    min-width: 170px;
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    transform-origin: top right;
    animation: cp-dropdown-scale 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes cp-dropdown-scale {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-4px);
    }

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

.cp-conv-menu-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    min-height: 34px;
    padding: 7px 9px;
    border-radius: 8px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 600;
    color: #475569;
    text-align: left;
    font-family: inherit;
    transition: all 0.12s ease;
}

.cp-conv-menu-item:hover {
    background: #f1f5f9;
    color: #0f172a;
}

.cp-conv-menu-item svg {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    color: #94a3b8;
    transition: color 0.12s ease;
}

.cp-conv-menu-item:hover svg {
    color: #475569;
}

.cp-conv-menu-item--danger {
    color: #ef4444;
}

.cp-conv-menu-item--danger svg {
    color: #fca5a5;
}

.cp-conv-menu-item--danger:hover {
    background: #fef2f2;
    color: #dc2626;
}

.cp-conv-menu-item--danger:hover svg {
    color: #ef4444;
}

/* -- FIX FILE MESSAGE - SENDER SIDE (cp-msg--mine) -- */
/* File bubble - sender side: darker background for better text readability */
.cp-msg--mine .cp-msg-file {
    background: rgba(255, 255, 255, 0.22) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.4) !important;
    color: #fff;
}

.cp-msg--mine .cp-msg-file__name {
    color: #fff !important;
    font-weight: 600;
}

.cp-msg--mine .cp-msg-file__size {
    color: rgba(255, 255, 255, 0.75) !important;
}

.cp-msg--mine .cp-msg-file__icon {
    color: rgba(255, 255, 255, 0.9) !important;
}

.cp-msg--mine .cp-msg-file__dl {
    background: rgba(255, 255, 255, 0.25) !important;
    color: #fff !important;
}

.cp-msg--mine .cp-msg-file__dl:hover {
    background: rgba(255, 255, 255, 0.4) !important;
}

/* Image bubble on sender side */
.cp-msg--mine .cp-msg-img-wrap {
    border: 2px solid rgba(255, 255, 255, 0.3);
}

/* -- CONV MENU BACKDROP -- */
.cp-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 190;
    background: transparent;
    cursor: default;
}

/* -- ACTION MENU OVERRIDES -- */
.cp-conv-item--menu-open {
    z-index: 200 !important;
}

.cp-conv-menu-sep {
    height: 1px;
    background: #f1f5f9;
    margin: 4px 6px;
}

.cp-conv-time,
.cp-badge {
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.cp-conv-item:hover .cp-conv-time,
.cp-conv-item--menu-open .cp-conv-time,
.cp-conv-item:hover .cp-badge,
.cp-conv-item--menu-open .cp-badge {
    opacity: 0;
    transform: translateX(4px);
}

/* -- ATTACHMENT CHIP BAR - REDESIGN -- */
.cp-pending {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 12px 4px;
    border-bottom: 1px solid #f1f5f9;
    background: #f8fafc;
}

.cp-pending-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    padding: 4px 8px 4px 6px;
    font-size: 0.78rem;
    color: #334155;
    font-weight: 500;
    max-width: 200px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
    animation: cp-fade-in 0.15s ease;
}

.cp-pending-chip__thumb {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
}

.cp-pending-chip__icon {
    color: #3b82f6;
    flex-shrink: 0;
    font-size: 1rem;
}

.cp-pending-chip__name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 130px;
}

.cp-pending-chip__rm {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #f1f5f9;
    color: #64748b;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
    transition: background 0.15s;
}

.cp-pending-chip__rm:hover {
    background: #fecaca;
    color: #dc2626;
}

/* Chat Widget Bubble Notification */
.chat-fab-bubble {
    position: absolute;
    bottom: 0;
    right: 70px;
    width: 260px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.15), 0 1px 3px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(226, 232, 240, 0.8);
    display: flex;
    align-items: center;
    padding: 12px;
    gap: 12px;
    cursor: pointer;
    z-index: 9999;
    animation: chat-bubble-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    transition: transform 0.2s, box-shadow 0.2s;
}

.chat-fab-bubble:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 36px rgba(15, 23, 42, 0.18), 0 2px 4px rgba(0, 0, 0, 0.05);
}

@keyframes chat-bubble-in {
    from {
        opacity: 0;
        transform: translateX(20px) scale(0.9);
    }

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

.chat-fab-bubble__close {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: none;
    background: #f1f5f9;
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s, background-color 0.2s, color 0.2s;
}

.chat-fab-bubble:hover .chat-fab-bubble__close {
    opacity: 1;
}

.chat-fab-bubble__close:hover {
    background: #ffe4e6;
    color: #f43f5e;
}

.chat-fab-bubble__avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.95rem;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
}

.chat-fab-bubble__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.chat-fab-bubble__content {
    flex: 1;
    min-width: 0;
}

.chat-fab-bubble__author {
    font-weight: 700;
    font-size: 0.85rem;
    color: #0f172a;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-fab-bubble__text {
    font-size: 0.8rem;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ==> React Badge */
.cp-react-badge {
    position: absolute;
    bottom: 2px;
    right: 14px;
    left: auto;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    height: 22px;
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 999px;
    padding: 1px 6px 1px 4px;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.12);
    transition: box-shadow 0.15s ease, background 0.15s ease, transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
    white-space: nowrap;
    z-index: 6;
    line-height: 1;
    opacity: 1 !important;
}

.cp-react-badge--on-mine {
    right: 14px;
    left: auto;
}

.cp-react-badge:hover {
    background: #f8fafc;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.16);
    transform: scale(1.06);
}

.cp-react-badge--mine {
    border-color: #93c5fd;
    background: #eff6ff;
}

.cp-react-badge__emoji {
    font-size: 0.82rem;
    line-height: 1;
}

.cp-react-badge__count {
    font-weight: 700;
    font-size: 0.7rem;
    color: #475569;
    margin-left: 2px;
}

.cp-react-badge--mine .cp-react-badge__count {
    color: #2563eb;
}

/* ==> Bubble wrap */
.cp-bubble-wrap {
    overflow: visible !important;
}

.cp-bubble-wrap--has-react {
    margin-bottom: 8px;
}

/* ==> Muted badge */
.cp-badge--muted {
    background: #94a3b8 !important;
    box-shadow: 0 2px 6px rgba(148, 163, 184, 0.5) !important;
}

@media (max-width: 480px) {
    .chat-fab-bubble {
        right: 0;
        bottom: 70px;
        width: 220px;
        animation: chat-bubble-in-mobile 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
}

@keyframes chat-bubble-in-mobile {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.9);
    }

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

/* ==> Composer toolbar */
.cp-toolbar {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.cp-tb-btn {
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    transition: background 0.15s, color 0.15s, transform 0.12s;
    flex-shrink: 0;
}

.cp-tb-btn:hover:not(:disabled) {
    background: #eff6ff;
    color: #2563eb;
    transform: scale(1.1);
}

.cp-tb-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.cp-tb-btn--active {
    background: rgba(59, 130, 246, 0.12) !important;
    color: #2563eb !important;
}

.cp-toolbar::after {
    content: '';
    display: block;
    width: 1px;
    height: 22px;
    background: #e8ecf0;
    margin: 0 4px;
    flex-shrink: 0;
}

/* ═══ Voice Recording Pill UI (ChatPanel) ═══ */
.cp-recording-pill {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #0d1117;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 999px;
    padding: 7px 10px 7px 10px;
    min-height: 52px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 4px 24px rgba(0,0,0,0.4);
}

.cp-rec-pill-mic {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1.5px solid rgba(239, 68, 68, 0.5);
    background: rgba(239, 68, 68, 0.12);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #ef4444;
    animation: cpRecPillPulse 1.4s ease-in-out infinite;
}

@keyframes cpRecPillPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.45); background: rgba(239,68,68,0.12); }
    50%       { box-shadow: 0 0 0 7px rgba(239,68,68,0);  background: rgba(239,68,68,0.22); }
}

.cp-rec-pill-trail {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.cp-rec-pill-trail span {
    display: block;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(148, 163, 184, 0.35);
}

/* Real-time waveform canvas (replaces fake CSS bar animation) */
.cp-rec-canvas {
    flex: 1;
    min-width: 0;
    height: 38px;
    display: block;
}



.cp-rec-pill-timer {
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(248, 250, 252, 0.65);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.05em;
    flex-shrink: 0;
    min-width: 36px;
    text-align: right;
}

.cp-rec-pill-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.cp-rec-pill-cancel {
    width: 32px;
    height: 32px;
    border: 1.5px solid rgba(148, 163, 184, 0.3);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    color: #94a3b8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.cp-rec-pill-cancel:hover {
    background: rgba(239, 68, 68, 0.18);
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.45);
}

.cp-rec-pill-send {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    box-shadow: 0 2px 14px rgba(34, 197, 94, 0.45);
    transition: transform 0.15s, box-shadow 0.15s;
}

.cp-rec-pill-send:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 20px rgba(34, 197, 94, 0.6);
}

/* ═══ Audio message bubble (ChatPanel) ═══ */
.cp-audio-player {
    display: block;
    width: 260px;
    max-width: 100%;
    height: 40px;
    border-radius: 8px;
    outline: none;
    accent-color: #3b82f6;
}

.cp-msg--mine .cp-audio-player {
    accent-color: #ffffff;
}

.cp-msg-audio {
    padding: 8px 4px 4px;
}