:root {
    --shala-ui-radius: var(--mud-default-borderradius);
    --shala-ui-shadow-soft: 0 12px 34px rgba(15, 23, 42, 0.07);
    --shala-ui-shadow-card: 0 1px 2px rgba(15, 23, 42, 0.05);
}

.shala-page-shell {
    width: 100%;
}

.tenant-page-container,
.platform-page-container,
.parent-content-wrap,
.teacher-content-wrap {
    width: 100%;
}

body,
.tenant-layout-shell,
.platform-layout,
.parent-shell,
.teacher-shell,
.tenant-main-content,
.platform-main-content,
.parent-premium-main,
.teacher-premium-main {
    background: var(--mud-palette-background) !important;
    color: var(--mud-palette-text-primary) !important;
}

.shala-text-title,
.shala-info-value {
    color: var(--mud-palette-text-primary) !important;
}

.shala-text-muted,
.shala-text-subtitle,
.shala-card-description,
.shala-section-description,
.shala-helper-text,
.shala-info-label {
    color: var(--mud-palette-text-secondary) !important;
}

.shala-text-success {
    color: var(--mud-palette-success) !important;
}

.shala-text-warning {
    color: var(--mud-palette-warning) !important;
}

.shala-text-danger {
    color: var(--mud-palette-error) !important;
}

.shala-card,
.app-settings-section,
.student-hero-card,
.student-action-bar,
.student-stat-card,
.student-profile-card,
.student-info-card,
.settings-card {
    border: 1px solid var(--mud-palette-lines-default) !important;
    border-radius: var(--shala-ui-radius) !important;
    background: var(--mud-palette-surface) !important;
    color: var(--mud-palette-text-primary) !important;
    box-shadow: var(--shala-ui-shadow-card) !important;
}

.shala-card-hover {
    transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.shala-card-hover:hover {
    border-color: var(--mud-palette-primary-lighten) !important;
    box-shadow: var(--shala-ui-shadow-soft) !important;
    transform: translateY(-1px);
}

.app-page-header {
    gap: 12px;
}

.app-page-header-actions,
.app-toolbar-actions,
.tenant-topbar-actions,
.platform-topbar-actions,
.parent-topbar-actions,
.teacher-topbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.app-table-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 16px 12px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.app-table-card__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.app-table-card__toolbar,
.app-table-card__footer {
    padding: 12px 16px;
    background: var(--mud-palette-background);
}

.app-table-card__toolbar {
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.shala-toolbar-search-wide {
    min-width: 320px;
}

.app-table-card__footer {
    border-top: 1px solid var(--mud-palette-lines-default);
}

.mud-table {
    border-color: var(--mud-palette-lines-default) !important;
    background: var(--mud-palette-surface) !important;
}

.mud-table thead .mud-table-cell,
.mud-table .mud-table-head .mud-table-cell {
    background: var(--mud-palette-background) !important;
    color: var(--mud-palette-text-secondary) !important;
}

.shala-button.mud-button-filled-primary {
    background: var(--mud-palette-primary) !important;
    color: var(--mud-palette-primary-text) !important;
}

.app-table-card__empty-actions {
    display: flex;
    justify-content: center;
    padding: 0 16px 24px;
}

.app-form-page {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    gap: 18px;
    align-items: start;
}

.app-form-page__main,
.app-form-page__side {
    min-width: 0;
}

.app-side-info-panel {
    position: sticky;
    top: 88px;
}

.app-sticky-action-bar {
    position: sticky;
    bottom: 16px;
    z-index: 10;
    margin-top: 20px;
    padding: 12px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--shala-ui-radius);
    background: color-mix(in srgb, var(--mud-palette-surface) 94%, transparent);
    box-shadow: var(--shala-ui-shadow-soft);
    backdrop-filter: blur(12px);
}

.app-sticky-action-bar .mud-button-root {
    margin-bottom: 0;
}

.tenant-topbar-actions,
.platform-topbar-actions,
.parent-topbar-actions,
.teacher-topbar-actions {
    min-width: 0;
    justify-content: flex-end;
}

.tenant-topbar-user,
.parent-top-profile,
.teacher-top-profile {
    color: var(--mud-palette-text-primary) !important;
    background: var(--mud-palette-surface) !important;
    border-color: var(--mud-palette-lines-default) !important;
}

.student-details-identity {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.student-details-avatar {
    flex: 0 0 auto;
}

.app-settings-section__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.app-settings-section__content {
    min-width: 0;
}

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

.shala-table-wrapper {
    overflow-x: auto;
}

.mud-dialog .mud-dialog-content {
    padding-top: 16px;
}

@media (max-width: 960px) {
    .app-form-page {
        grid-template-columns: 1fr;
    }

    .app-side-info-panel {
        position: static;
    }
}

@media (max-width: 768px) {
    .app-page-header {
        flex-direction: column;
        align-items: stretch !important;
    }

    .app-page-header-actions,
    .app-table-card__actions {
        width: 100%;
        justify-content: stretch;
    }

    .app-table-card__header,
    .app-settings-section__header {
        flex-direction: column;
    }

    .shala-toolbar-search-wide {
        width: 100%;
        min-width: 100%;
    }

    .shala-form-grid {
        grid-template-columns: 1fr;
    }

    .tenant-topbar-actions,
    .parent-topbar-actions,
    .teacher-topbar-actions {
        gap: 4px;
        flex-wrap: nowrap;
    }

    .student-details-identity {
        align-items: flex-start;
    }
}

@media (max-width: 600px) {
    .shala-page-shell {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .app-sticky-action-bar {
        bottom: 10px;
    }

    .app-sticky-action-bar .mud-stack-root {
        justify-content: stretch !important;
    }

    .app-sticky-action-bar .shala-button {
        flex: 1 1 auto;
    }
}


.shala-column-menu {
    min-width: 220px;
    background-color: var(--mud-palette-surface) !important;
    color: var(--mud-palette-text-primary) !important;
}

.students-table .mud-chip {
    font-weight: 700;
}

.students-table .mud-button-root {
    border-radius: 999px;
}

.students-search {
    min-width: min(340px, 100%);
}

.shala-student-hero {
    background: radial-gradient(circle at top left, color-mix(in srgb, var(--mud-palette-primary) 8%, transparent), transparent 34%), var(--mud-palette-surface);
}

/* ================================
   Common Table/List Standard
   ================================ */

.app-table-card {
    background-color: var(--mud-palette-surface) !important;
    border: 1px solid var(--mud-palette-lines-default);
    color: var(--mud-palette-text-primary);
}

.app-table-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 16px;
}

.app-table-card__title-block {
    min-width: 0;
}

.app-table-card__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.app-table-card__toolbar {
    margin-bottom: 16px;
    padding: 12px;
    border-radius: 16px;
    background-color: color-mix(in srgb, var(--mud-palette-surface) 92%, var(--mud-palette-primary) 8%);
    border: 1px solid var(--mud-palette-lines-default);
}

.app-table-card__body {
    background-color: transparent;
}

.app-table-card__footer {
    margin-top: 12px;
    padding: 12px;
    border-radius: 14px;
    background-color: color-mix(in srgb, var(--mud-palette-surface) 94%, var(--mud-palette-primary) 6%);
    border: 1px solid var(--mud-palette-lines-default);
}

.app-table-card__empty-actions {
    margin-top: 16px;
    display: flex;
    justify-content: center;
}

/* ================================
   Toolbar Standard
   ================================ */

.app-toolbar {
    width: 100%;
    background-color: transparent;
    color: var(--mud-palette-text-primary);
}

.app-toolbar__filters {
    flex: 1 1 auto;
    min-width: 0;
}

.app-toolbar__actions {
    flex: 0 0 auto;
}

/* ================================
   Inputs / Selects Standard
   ================================ */

.shala-input,
.app-search-box,
.app-filter-select {
    min-width: 220px;
}

    .shala-input .mud-input,
    .shala-input .mud-input-control,
    .shala-input .mud-input-slot,
    .app-filter-select .mud-input,
    .app-filter-select .mud-input-control,
    .app-filter-select .mud-input-slot {
        color: var(--mud-palette-text-primary) !important;
    }

    .shala-input .mud-input-outlined-border,
    .app-filter-select .mud-input-outlined-border {
        border-color: var(--mud-palette-lines-inputs) !important;
    }

/* ================================
   Table Surface Standard
   ================================ */

.shala-table-wrapper {
    overflow: auto;
    border-radius: 16px;
    border: 1px solid var(--mud-palette-lines-default);
    background-color: var(--mud-palette-surface);
}

    .shala-table-wrapper .mud-table,
    .shala-table-wrapper .mud-table-container,
    .shala-table-wrapper .mud-table-root,
    .shala-table-wrapper table {
        background-color: var(--mud-palette-surface) !important;
        color: var(--mud-palette-text-primary) !important;
    }

    .shala-table-wrapper .mud-table-head {
        background-color: color-mix(in srgb, var(--mud-palette-surface) 90%, var(--mud-palette-primary) 10%) !important;
    }

    .shala-table-wrapper .mud-table-cell {
        color: var(--mud-palette-text-primary) !important;
        border-color: var(--mud-palette-lines-default) !important;
    }

    .shala-table-wrapper .mud-table-row {
        background-color: transparent !important;
    }

    .shala-table-wrapper .mud-table-striped .mud-table-row:nth-child(even) {
        background-color: color-mix(in srgb, var(--mud-palette-surface) 94%, var(--mud-palette-primary) 6%) !important;
    }

    .shala-table-wrapper .mud-table-striped .mud-table-row:nth-child(odd) {
        background-color: var(--mud-palette-surface) !important;
    }

/* ================================
   Cards Standard
   ================================ */

.shala-card,
.shala-stat-card {
    background-color: var(--mud-palette-surface) !important;
    border-color: var(--mud-palette-lines-default) !important;
    color: var(--mud-palette-text-primary) !important;
}

/* ================================
   Mobile
   ================================ */

@media (max-width: 768px) {
    .app-table-card__header {
        flex-direction: column;
    }

    .app-table-card__actions {
        justify-content: flex-start;
        width: 100%;
    }

    .app-table-card__toolbar {
        padding: 10px;
    }

    .app-toolbar__filters,
    .app-toolbar__actions {
        width: 100%;
    }

    .shala-input,
    .app-search-box,
    .app-filter-select {
        width: 100%;
        min-width: 100%;
    }
}


/* ================================
   AppTableCard dark/theme fix
   ================================ */

.app-table-card {
    background-color: var(--mud-palette-surface) !important;
    color: var(--mud-palette-text-primary) !important;
}

.app-table-card__toolbar {
    margin-bottom: 16px;
    padding: 12px;
    border-radius: 16px;
    background-color: color-mix(in srgb, var(--mud-palette-surface) 96%, var(--mud-palette-primary) 4%) !important;
    border: 1px solid var(--mud-palette-lines-default) !important;
    color: var(--mud-palette-text-primary) !important;
}

    .app-table-card__toolbar > .mud-paper,
    .app-table-card__toolbar .shala-card,
    .app-table-card__toolbar .mud-card {
        background-color: transparent !important;
        box-shadow: none !important;
        border: 0 !important;
    }

.app-toolbar {
    width: 100%;
    background-color: transparent !important;
    color: var(--mud-palette-text-primary) !important;
}

.app-toolbar__filters {
    flex: 1 1 auto;
    min-width: 0;
}

.app-toolbar__actions {
    flex: 0 0 auto;
}

.app-table-card__footer {
    margin-top: 12px;
    padding: 12px;
    border-radius: 14px;
    background-color: color-mix(in srgb, var(--mud-palette-surface) 96%, var(--mud-palette-primary) 4%) !important;
    border: 1px solid var(--mud-palette-lines-default) !important;
    color: var(--mud-palette-text-primary) !important;
}

    .app-table-card__footer .mud-typography,
    .app-table-card__footer .mud-button,
    .app-table-card__footer .mud-icon-root {
        color: var(--mud-palette-text-primary);
    }

/* ================================
   Mud input/select dark fix
   ================================ */

.app-table-card__toolbar .mud-input-control,
.app-table-card__toolbar .mud-input,
.app-table-card__toolbar .mud-input-slot,
.app-table-card__toolbar .mud-select,
.app-table-card__toolbar .mud-select-input,
.app-table-card__toolbar .mud-input-root {
    background-color: transparent !important;
    color: var(--mud-palette-text-primary) !important;
}

.app-table-card__toolbar .mud-input-root-outlined {
    background-color: var(--mud-palette-surface) !important;
    color: var(--mud-palette-text-primary) !important;
}

.app-table-card__toolbar .mud-input-outlined-border {
    border-color: var(--mud-palette-lines-inputs) !important;
}

.app-table-card__toolbar input,
.app-table-card__toolbar .mud-input-label,
.app-table-card__toolbar .mud-select-input,
.app-table-card__toolbar .mud-input-adornment,
.app-table-card__toolbar .mud-icon-root {
    color: var(--mud-palette-text-primary) !important;
}

    .app-table-card__toolbar input::placeholder {
        color: var(--mud-palette-text-secondary) !important;
        opacity: 1;
    }

/* ================================
   Table wrapper dark consistency
   ================================ */

.shala-table-wrapper {
    overflow: auto;
    border-radius: 16px;
    border: 1px solid var(--mud-palette-lines-default);
    background-color: var(--mud-palette-surface) !important;
}

    .shala-table-wrapper .mud-table,
    .shala-table-wrapper .mud-table-container,
    .shala-table-wrapper .mud-table-root,
    .shala-table-wrapper table {
        background-color: var(--mud-palette-surface) !important;
        color: var(--mud-palette-text-primary) !important;
    }

    .shala-table-wrapper .mud-table-head {
        background-color: color-mix(in srgb, var(--mud-palette-surface) 90%, var(--mud-palette-primary) 10%) !important;
    }

    .shala-table-wrapper .mud-table-cell {
        color: var(--mud-palette-text-primary) !important;
        border-color: var(--mud-palette-lines-default) !important;
    }

    .shala-table-wrapper .mud-table-row {
        background-color: transparent !important;
    }

    .shala-table-wrapper .mud-table-striped .mud-table-row:nth-child(even) {
        background-color: color-mix(in srgb, var(--mud-palette-surface) 94%, var(--mud-palette-primary) 6%) !important;
    }

    .shala-table-wrapper .mud-table-striped .mud-table-row:nth-child(odd) {
        background-color: var(--mud-palette-surface) !important;
    }

@media (max-width: 768px) {
    .app-toolbar__filters,
    .app-toolbar__actions {
        width: 100%;
    }

    .app-table-card__toolbar {
        padding: 10px;
    }

    .students-search,
    .shala-input,
    .app-search-box,
    .app-filter-select {
        width: 100%;
        min-width: 100%;
    }
}

.shala-ai-insight-card {
    background: radial-gradient(circle at top left, color-mix(in srgb, var(--mud-palette-primary) 10%, transparent), transparent 36%), var(--mud-palette-surface);
}

.shala-ai-insight-line {
    background-color: var(--mud-palette-surface);
}

@media (max-width: 768px) {
    .shala-ai-insight-card .mud-stack-row {
        flex-wrap: wrap;
    }
}




.shala-student-hero {
    background: radial-gradient(circle at top left, color-mix(in srgb, var(--mud-palette-primary) 8%, transparent), transparent 34%), var(--mud-palette-surface);
}

.students-search {
    min-width: min(340px, 100%);
}






.shala-column-menu {
    min-width: 220px;
    background-color: var(--mud-palette-surface) !important;
    color: var(--mud-palette-text-primary) !important;
}

.students-table .mud-chip {
    font-weight: 700;
}

.students-table .mud-button-root {
    border-radius: 999px;
}

.students-search {
    min-width: min(340px, 100%);
}

.shala-student-hero {
    background: radial-gradient(circle at top left, color-mix(in srgb, var(--mud-palette-primary) 8%, transparent), transparent 34%), var(--mud-palette-surface);
}




.shala-student-detail-hero {
    background: radial-gradient(circle at top left, color-mix(in srgb, var(--mud-palette-primary) 8%, transparent), transparent 34%), var(--mud-palette-surface);
}

.shala-student-detail-avatar {
    width: 82px !important;
    height: 82px !important;
    font-size: 30px !important;
}

.shala-guardian-card {
    background-color: color-mix(in srgb, var(--mud-palette-surface) 96%, var(--mud-palette-primary) 4%) !important;
}

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

.shala-parent-credential-card {
    width: 100%;
    max-width: 520px;
    background-color: var(--mud-palette-surface) !important;
    color: var(--mud-palette-text-primary) !important;
}

@media (max-width: 960px) {
    .shala-student-detail-avatar {
        width: 72px !important;
        height: 72px !important;
        font-size: 26px !important;
    }
}



.shala-latest-admission-panel {
    background-color: color-mix(in srgb, var(--mud-palette-surface) 96%, var(--mud-palette-primary) 4%) !important;
}

.shala-latest-admission-group {
    min-height: 100%;
}

.shala-latest-admission-right {
    position: relative;
    padding-left: 28px !important;
}

    .shala-latest-admission-right::before {
        content: "";
        position: absolute;
        left: 0;
        top: 2px;
        bottom: 2px;
        width: 1px;
        background-color: var(--mud-palette-lines-default);
    }

@media (max-width: 960px) {
    .shala-latest-admission-right {
        padding-left: 0 !important;
        padding-top: 18px !important;
    }

        .shala-latest-admission-right::before {
            left: 0;
            right: 0;
            top: 0;
            bottom: auto;
            width: 100%;
            height: 1px;
        }
}


.shala-student-create-hero {
    background: radial-gradient(circle at top left, color-mix(in srgb, var(--mud-palette-primary) 8%, transparent), transparent 34%), var(--mud-palette-surface);
}

.shala-guardian-create-card {
    background-color: color-mix(in srgb, var(--mud-palette-surface) 96%, var(--mud-palette-primary) 4%) !important;
}

.student-create-content {
    padding-bottom: 112px;
}

.student-create-side-panel,
.student-create-side-panel .mud-paper,
.student-create-side-panel .shala-card,
.student-create-side-panel .app-side-info-panel {
    position: static !important;
    z-index: auto !important;
}

@media (max-width: 960px) {
    .student-create-content {
        padding-bottom: 140px;
    }
}



.student-additional-section-dialog .mud-dialog {
    width: min(620px, 96vw);
    max-width: 96vw !important;
    border-radius: 20px;
}

.shala-section-dialog-hero {
    background: radial-gradient(circle at top left, color-mix(in srgb, var(--mud-palette-primary) 8%, transparent), transparent 34%), var(--mud-palette-surface);
}

.shala-section-status-card {
    background-color: color-mix(in srgb, var(--mud-palette-surface) 96%, var(--mud-palette-primary) 4%) !important;
}

@media (max-width: 768px) {
    .student-additional-section-dialog .mud-dialog {
        width: 96vw;
        margin: 8px;
        border-radius: 16px;
    }
}



.student-field-dialog .mud-dialog {
    width: min(1200px, 96vw);
    max-width: 96vw !important;
    border-radius: 20px;
}

.shala-field-dialog-hero {
    background: radial-gradient(circle at top left, color-mix(in srgb, var(--mud-palette-primary) 8%, transparent), transparent 34%), var(--mud-palette-surface);
}

.shala-field-option-card,
.shala-field-toggle-card {
    background-color: color-mix(in srgb, var(--mud-palette-surface) 96%, var(--mud-palette-primary) 4%) !important;
}

@media (max-width: 768px) {
    .student-field-dialog .mud-dialog {
        width: 96vw;
        margin: 8px;
        border-radius: 16px;
    }
}



.shala-student-exit-hero {
    background: radial-gradient(circle at top left, color-mix(in srgb, var(--mud-palette-warning) 10%, transparent), transparent 34%), var(--mud-palette-surface);
}

.student-exit-create-content {
    padding-bottom: 112px;
}

.student-exit-side-panel,
.student-exit-side-panel .mud-paper,
.student-exit-side-panel .shala-card,
.student-exit-side-panel .app-side-info-panel {
    position: static !important;
    z-index: auto !important;
}

.shala-exit-student-card,
.shala-exit-side-student,
.shala-exit-exception-card {
    background-color: color-mix(in srgb, var(--mud-palette-surface) 96%, var(--mud-palette-warning) 4%) !important;
}

.student-exit-list {
    margin: 8px 0 0;
    padding-left: 18px;
}

    .student-exit-list li {
        margin-bottom: 4px;
    }

@media (max-width: 960px) {
    .student-exit-create-content {
        padding-bottom: 150px;
    }
}



.shala-mini-info-card {
    border-radius: 16px !important;
    background-color: var(--mud-palette-surface) !important;
    border-color: var(--mud-palette-lines-default) !important;
}

.shala-mini-info-card--dense {
    padding: 10px 12px !important;
}

.shala-mini-info-icon {
    flex: 0 0 auto;
}

.shala-mini-info-value {
    word-break: break-word;
}

.shala-mini-info-status {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
}

.min-w-0 {
    min-width: 0;
}

.shala-student-exit-detail-hero {
    background: radial-gradient(circle at top left, color-mix(in srgb, var(--mud-palette-warning) 10%, transparent), transparent 34%), var(--mud-palette-surface);
}

.student-exit-details-content {
    padding-bottom: 32px;
}

.student-exit-detail-side-panel,
.student-exit-detail-side-panel .mud-paper,
.student-exit-detail-side-panel .shala-card,
.student-exit-detail-side-panel .app-side-info-panel {
    position: static !important;
    z-index: auto !important;
}

.student-exit-clearance-table .mud-table-cell,
.student-exit-audit-table .mud-table-cell {
    vertical-align: middle;
}

@media (max-width: 960px) {
    .student-exit-details-content {
        padding-bottom: 56px;
    }
}

.shala-student-exits-hero {
    background: radial-gradient(circle at top left, color-mix(in srgb, var(--mud-palette-warning) 10%, transparent), transparent 34%), var(--mud-palette-surface);
}

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

.student-exits-strong {
    font-weight: 800;
}

.student-exits-link,
.student-exits-sub-link {
    cursor: pointer;
    text-decoration: none;
}

.student-exits-sub-link {
    color: var(--mud-palette-text-secondary) !important;
}

    .student-exits-link:hover,
    .student-exits-sub-link:hover {
        text-decoration: underline;
    }



.shala-module-nav {
    margin-bottom: 1rem;
    padding: .5rem;
    border-radius: var(--mud-default-borderradius);
    background-color: var(--mud-palette-surface);
    border-color: var(--mud-palette-lines-default);
    overflow: hidden;
}

.shala-module-nav-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap !important;
    scrollbar-width: thin;
    padding-bottom: .125rem;
}

.shala-module-nav-button {
    flex: 0 0 auto;
    border-radius: 999px;
    white-space: nowrap;
    min-height: 34px;
}

.shala-module-nav-button-content {
    flex-wrap: nowrap;
    white-space: nowrap;
}

.shala-module-nav-badge {
    margin-left: .25rem;
    height: 20px;
}

@media (min-width: 960px) {
    .shala-module-nav-scroll {
        flex-wrap: wrap !important;
        overflow-x: visible;
    }
}


.shala-ai-text {
    white-space: pre-wrap;
    line-height: 1.7;
}

.receipt-accent {
    background: var(--receipt-accent-color);
}


.shala-table-actions-col {
    width: 150px;
}



.shala-module-nav-carousel-shell {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
    gap: 8px;
}

.shala-module-nav-viewport {
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding: 2px 44px;
}

    .shala-module-nav-viewport::-webkit-scrollbar {
        display: none;
    }

.shala-module-nav-track {
    width: max-content;
    min-width: max-content;
}

.shala-module-nav-edge-arrow {
    position: absolute;
    top: 50%;
    z-index: 3;
    transform: translateY(-50%);
    background: var(--mud-palette-surface);
    box-shadow: 0 8px 18px rgba(15, 23, 42, .12);
}

.shala-module-nav-edge-left {
    left: 8px;
}

.shala-module-nav-edge-right {
    right: 8px;
}

.shala-module-nav-button {
    white-space: nowrap;
    flex: 0 0 auto;
}

.shala-module-nav-button-content {
    white-space: nowrap;
}



/* Settings Hub */
.settings-hub-card {
    overflow: hidden;
}

.settings-command-panel {
    padding: 16px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 20px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--mud-palette-primary) 8%, transparent), transparent 48%), color-mix(in srgb, var(--mud-palette-surface) 96%, var(--mud-palette-background));
}

.settings-search-input {
    flex: 1 1 460px;
    min-width: 280px;
}

.settings-module-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 22px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 24px;
    background: radial-gradient(circle at top left, color-mix(in srgb, var(--mud-palette-primary) 18%, transparent), transparent 34%), color-mix(in srgb, var(--mud-palette-surface) 98%, var(--mud-palette-background));
}

.settings-module-hero-content {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.settings-module-hero-icon {
    width: 64px;
    height: 64px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 22px;
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 17%, transparent);
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 28%, transparent);
}

    .settings-module-hero-icon .mud-icon-root {
        font-size: 32px;
    }

.settings-module-title {
    font-weight: 850;
    line-height: 1.2;
}

.settings-module-subtitle {
    margin-top: 4px;
    max-width: 720px;
}

.settings-module-hero-stats {
    flex: 0 0 auto;
}

.settings-content-grid {
    align-items: flex-start;
}

.settings-main-section {
    min-height: 360px;
}

.settings-side-panel-wrap {
    position: sticky;
    top: 84px;
}

.settings-help-card {
    border-radius: 20px;
}

/* Settings Cards */
.settings-card-grid {
    align-items: stretch;
}

.settings-card {
    position: relative;
    width: 100%;
    min-height: 210px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 18px;
    padding: 20px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 22px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--mud-palette-primary) 8%, transparent), transparent 44%), color-mix(in srgb, var(--mud-palette-surface) 98%, var(--mud-palette-background));
    color: var(--mud-palette-text-primary);
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

    .settings-card:hover:not(:disabled) {
        transform: translateY(-4px);
        border-color: color-mix(in srgb, var(--mud-palette-primary) 44%, var(--mud-palette-lines-default));
        box-shadow: var(--mud-elevation-8);
    }

    .settings-card:focus-visible {
        outline: 2px solid var(--mud-palette-primary);
        outline-offset: 3px;
    }

    .settings-card.is-disabled,
    .settings-card:disabled {
        cursor: not-allowed;
        opacity: .62;
    }

.settings-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.settings-card-icon-wrap {
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 18px;
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 24%, transparent);
}

.settings-card-icon-symbol {
    font-size: 26px;
}

.settings-card-badge {
    flex: 0 0 auto;
}

.settings-card-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.settings-card-title {
    font-weight: 850;
    line-height: 1.25;
}

.settings-card-subtitle {
    line-height: 1.55;
}

.settings-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 14px;
    border-top: 1px solid var(--mud-palette-lines-default);
    color: var(--mud-palette-primary);
    font-size: .84rem;
    font-weight: 850;
}

.settings-card-arrow {
    transition: transform .18s ease;
}

.settings-card:hover:not(:disabled) .settings-card-arrow {
    transform: translateX(5px);
}

@media (max-width: 960px) {
    .settings-side-panel-wrap {
        position: static;
    }
}

@media (max-width: 768px) {
    .settings-command-panel {
        padding: 12px;
    }

    .settings-search-input {
        min-width: 100%;
    }

    .settings-module-hero {
        align-items: flex-start;
        flex-direction: column;
        padding: 18px;
    }

    .settings-module-hero-content {
        align-items: flex-start;
    }

    .settings-module-hero-icon {
        width: 54px;
        height: 54px;
        border-radius: 18px;
    }

        .settings-module-hero-icon .mud-icon-root {
            font-size: 28px;
        }

    .settings-card {
        min-height: 185px;
    }
}


.settings-sticky-nav-shell {
    position: sticky;
    top: 72px;
    z-index: 20;
    background: color-mix(in srgb, var(--mud-palette-background) 94%, transparent);
    backdrop-filter: blur(14px);
    padding: 8px 0;
    margin: -4px 0 2px;
}



.settings-sticky-nav-shell {
    position: sticky;
    top: 72px;
    z-index: 20;
    padding: 8px 0;
    margin: -2px 0 2px;
    background: color-mix(in srgb, var(--mud-palette-background) 94%, transparent);
    backdrop-filter: blur(14px);
}

.settings-hub-card {
    overflow: visible;
}

.settings-command-panel {
    padding: 18px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 22px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--mud-palette-primary) 8%, transparent), transparent 48%), color-mix(in srgb, var(--mud-palette-surface) 96%, var(--mud-palette-background));
}

.settings-search-input {
    width: 100%;
}

.settings-mini-stat {
    min-height: 72px;
    border-radius: 18px;
}

.settings-module-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 22px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 24px;
    background: radial-gradient(circle at top left, color-mix(in srgb, var(--mud-palette-primary) 18%, transparent), transparent 34%), color-mix(in srgb, var(--mud-palette-surface) 98%, var(--mud-palette-background));
}

.settings-module-hero-content {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.settings-module-hero-icon {
    width: 64px;
    height: 64px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 22px;
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 17%, transparent);
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 28%, transparent);
}

    .settings-module-hero-icon .mud-icon-root {
        font-size: 32px;
    }

.settings-module-title {
    font-weight: 850;
    line-height: 1.2;
}

.settings-module-subtitle {
    margin-top: 4px;
    max-width: 760px;
}

.settings-module-hero-stats {
    flex: 0 0 auto;
}

.settings-content-grid {
    align-items: flex-start;
}

.settings-main-section {
    min-height: 360px;
}

.settings-side-panel-wrap {
    position: sticky;
    top: 150px;
}

.settings-help-card {
    border-radius: 20px;
}

.settings-card-grid {
    align-items: stretch;
}

.settings-card {
    position: relative;
    width: 100%;
    min-height: 210px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 18px;
    padding: 20px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 22px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--mud-palette-primary) 8%, transparent), transparent 44%), color-mix(in srgb, var(--mud-palette-surface) 98%, var(--mud-palette-background));
    color: var(--mud-palette-text-primary);
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

    .settings-card:hover:not(:disabled) {
        transform: translateY(-4px);
        border-color: color-mix(in srgb, var(--mud-palette-primary) 44%, var(--mud-palette-lines-default));
        box-shadow: var(--mud-elevation-8);
    }

    .settings-card:focus-visible {
        outline: 2px solid var(--mud-palette-primary);
        outline-offset: 3px;
    }

    .settings-card.is-disabled,
    .settings-card:disabled {
        cursor: not-allowed;
        opacity: .62;
    }

.settings-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.settings-card-icon-wrap {
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 18px;
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 24%, transparent);
}

.settings-card-icon-symbol {
    font-size: 26px;
}

.settings-card-badge {
    flex: 0 0 auto;
}

.settings-card-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.settings-card-title {
    font-weight: 850;
    line-height: 1.25;
}

.settings-card-subtitle {
    line-height: 1.55;
}

.settings-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 14px;
    border-top: 1px solid var(--mud-palette-lines-default);
    color: var(--mud-palette-primary);
    font-size: .84rem;
    font-weight: 850;
}

.settings-card-arrow {
    transition: transform .18s ease;
}

.settings-card:hover:not(:disabled) .settings-card-arrow {
    transform: translateX(5px);
}

@media (max-width: 960px) {
    .settings-side-panel-wrap {
        position: static;
    }

    .settings-sticky-nav-shell {
        top: 64px;
    }
}

@media (max-width: 768px) {
    .settings-command-panel {
        padding: 14px;
    }

    .settings-module-hero {
        align-items: flex-start;
        flex-direction: column;
        padding: 18px;
    }

    .settings-module-hero-content {
        align-items: flex-start;
    }

    .settings-module-hero-icon {
        width: 54px;
        height: 54px;
        border-radius: 18px;
    }

        .settings-module-hero-icon .mud-icon-root {
            font-size: 28px;
        }

    .settings-card {
        min-height: 185px;
    }
}



.tenant-drawer-header-plain {
    padding: 18px 18px 10px;
}

.tenant-menu-search .mud-input-root {
    border-radius: 14px;
}

.tenant-smart-section {
    padding: 4px 12px 10px;
}

.tenant-smart-section-header {
    padding: 4px 4px 0;
}

.tenant-empty-mini {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 8px 10px;
    border-radius: 14px;
    border: 1px dashed var(--mud-palette-lines-default);
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-surface);
}

.tenant-favorite-row {
    width: 100%;
}

    .tenant-favorite-row .tenant-quick-menu-btn {
        flex: 1;
        min-width: 0;
    }

.tenant-quick-menu-btn {
    justify-content: flex-start;
    min-height: 40px;
    padding: 6px 10px;
    border-radius: 14px;
    text-transform: none;
}

.tenant-quick-menu-btn-active {
    font-weight: 700;
    background: var(--mud-palette-action-default-hover);
}

.tenant-quick-menu-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    line-height: 1.15;
}

    .tenant-quick-menu-text span,
    .tenant-quick-menu-text small {
        max-width: 190px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .tenant-quick-menu-text small {
        margin-top: 2px;
        font-size: 0.68rem;
        color: var(--mud-palette-text-secondary);
    }

.tenant-nav-menu .mud-nav-link {
    border-radius: 12px;
    margin: 2px 10px;
}

.tenant-nav-menu .mud-nav-group .mud-nav-link {
    margin-left: 18px;
}

.tenant-nav-menu .mud-nav-link.active,
.tenant-nav-menu .mud-nav-link.mud-nav-link-active {
    font-weight: 700;
}

.tenant-sidebar-bottom {
    padding: 14px 16px 16px;
}

.tenant-branch-card {
    width: 100%;
    padding: 12px;
    border-radius: 16px;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
}

.tenant-branch-info {
    min-width: 0;
}

.tenant-branch-title,
.tenant-branch-subtitle {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}



/* =========================================================
   Tenant Sidebar Final Polish
   Location: wwwroot/css/shala-ui.css
   Purpose: Dark sidebar consistency, search readability,
            favorites card, branch card and menu polish
   ========================================================= */

.tenant-drawer {
    background: var(--mud-palette-drawer-background) !important;
    color: var(--mud-palette-drawer-text) !important;
}

.tenant-drawer-inner {
    padding: 18px 20px !important;
    gap: 14px !important;
}

.tenant-drawer-header-plain {
    padding: 20px 6px 6px !important;
}

.tenant-drawer .tenant-section-label {
    color: var(--mud-palette-drawer-text) !important;
    font-weight: 900 !important;
    letter-spacing: 0.09em !important;
    opacity: 0.95;
}

.tenant-drawer .shala-text-muted {
    color: color-mix(in srgb, var(--mud-palette-drawer-text) 62%, transparent) !important;
}

/* Search box */
.tenant-menu-search {
    margin-top: 10px !important;
}

    .tenant-menu-search .mud-input-root {
        min-height: 42px !important;
        border-radius: 14px !important;
        background: color-mix(in srgb, var(--mud-palette-drawer-text) 7%, transparent) !important;
        color: var(--mud-palette-drawer-text) !important;
    }

    .tenant-menu-search .mud-input-outlined-border {
        border-color: color-mix(in srgb, var(--mud-palette-drawer-text) 12%, transparent) !important;
    }

    .tenant-menu-search .mud-input-root:hover .mud-input-outlined-border,
    .tenant-menu-search .mud-input-root.mud-input-focused .mud-input-outlined-border {
        border-color: color-mix(in srgb, var(--mud-palette-primary) 70%, transparent) !important;
    }

    .tenant-menu-search input {
        color: var(--mud-palette-drawer-text) !important;
        font-weight: 650 !important;
    }

        .tenant-menu-search input::placeholder {
            color: color-mix(in srgb, var(--mud-palette-drawer-text) 55%, transparent) !important;
            opacity: 1 !important;
        }

    .tenant-menu-search .mud-input-adornment .mud-icon-root,
    .tenant-menu-search .mud-icon-root {
        color: color-mix(in srgb, var(--mud-palette-drawer-text) 65%, transparent) !important;
    }

/* Divider inside sidebar */
.tenant-drawer .mud-divider {
    border-color: color-mix(in srgb, var(--mud-palette-drawer-text) 14%, transparent) !important;
}

/* Favorite/search smart section */
.tenant-smart-section {
    padding: 8px 0 10px !important;
}

.tenant-smart-section-header {
    padding: 0 4px 4px !important;
}

.tenant-empty-mini {
    min-height: 44px !important;
    padding: 10px 12px !important;
    border-radius: 14px !important;
    background: color-mix(in srgb, var(--mud-palette-drawer-text) 8%, transparent) !important;
    border: 1px dashed color-mix(in srgb, var(--mud-palette-drawer-text) 22%, transparent) !important;
    color: color-mix(in srgb, var(--mud-palette-drawer-text) 82%, transparent) !important;
}

    .tenant-empty-mini .mud-icon-root {
        color: color-mix(in srgb, var(--mud-palette-drawer-text) 82%, transparent) !important;
    }

/* Favorite quick buttons */
.tenant-favorite-row {
    width: 100% !important;
    gap: 6px !important;
}

.tenant-quick-menu-btn {
    justify-content: flex-start !important;
    min-height: 42px !important;
    padding: 7px 10px !important;
    border-radius: 14px !important;
    color: color-mix(in srgb, var(--mud-palette-drawer-text) 88%, transparent) !important;
    text-transform: none !important;
    font-weight: 750 !important;
}

    .tenant-quick-menu-btn:hover {
        background: color-mix(in srgb, var(--mud-palette-drawer-text) 10%, transparent) !important;
        color: var(--mud-palette-drawer-text) !important;
    }

.tenant-quick-menu-btn-active {
    background: color-mix(in srgb, var(--mud-palette-primary) 22%, transparent) !important;
    color: var(--mud-palette-drawer-text) !important;
}

.tenant-quick-menu-btn .mud-button-label {
    width: 100%;
    justify-content: flex-start;
}

.tenant-quick-menu-text {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    min-width: 0 !important;
    line-height: 1.15 !important;
}

    .tenant-quick-menu-text span {
        color: inherit !important;
        font-weight: 800 !important;
    }

    .tenant-quick-menu-text small {
        margin-top: 3px !important;
        color: color-mix(in srgb, var(--mud-palette-drawer-text) 58%, transparent) !important;
        font-size: 0.69rem !important;
    }

/* Main nav */
.tenant-nav-menu {
    padding: 0 !important;
}

    .tenant-nav-menu .mud-nav-link,
    .tenant-nav-menu .mud-nav-group .mud-nav-group-button {
        min-height: 44px !important;
        margin: 4px 0 !important;
        padding: 10px 12px !important;
        border-radius: 14px !important;
        color: color-mix(in srgb, var(--mud-palette-drawer-text) 88%, transparent) !important;
        font-weight: 850 !important;
    }

        .tenant-nav-menu .mud-nav-link .mud-icon-root,
        .tenant-nav-menu .mud-nav-link .mud-nav-link-icon,
        .tenant-nav-menu .mud-nav-group .mud-nav-group-button .mud-icon-root {
            color: color-mix(in srgb, var(--mud-palette-drawer-text) 82%, transparent) !important;
        }

        .tenant-nav-menu .mud-nav-link:hover,
        .tenant-nav-menu .mud-nav-group .mud-nav-group-button:hover {
            background: color-mix(in srgb, var(--mud-palette-drawer-text) 10%, transparent) !important;
            color: var(--mud-palette-drawer-text) !important;
        }

            .tenant-nav-menu .mud-nav-link:hover .mud-icon-root,
            .tenant-nav-menu .mud-nav-link:hover .mud-nav-link-icon,
            .tenant-nav-menu .mud-nav-group .mud-nav-group-button:hover .mud-icon-root {
                color: var(--mud-palette-drawer-text) !important;
            }

        .tenant-nav-menu .mud-nav-link.active,
        .tenant-nav-menu .mud-nav-link.mud-nav-link-active {
            background: var(--mud-palette-primary) !important;
            color: var(--mud-palette-primary-text) !important;
            font-weight: 950 !important;
            box-shadow: none !important;
        }

            .tenant-nav-menu .mud-nav-link.active .mud-nav-link-text,
            .tenant-nav-menu .mud-nav-link.mud-nav-link-active .mud-nav-link-text,
            .tenant-nav-menu .mud-nav-link.active .mud-icon-root,
            .tenant-nav-menu .mud-nav-link.mud-nav-link-active .mud-icon-root,
            .tenant-nav-menu .mud-nav-link.active .mud-nav-link-icon,
            .tenant-nav-menu .mud-nav-link.mud-nav-link-active .mud-nav-link-icon {
                color: var(--mud-palette-primary-text) !important;
            }

    .tenant-nav-menu .mud-nav-group .mud-navmenu {
        margin-left: 10px !important;
        padding-left: 10px !important;
        border-left: 1px solid color-mix(in srgb, var(--mud-palette-drawer-text) 14%, transparent) !important;
    }

        .tenant-nav-menu .mud-nav-group .mud-navmenu .mud-nav-link {
            min-height: 40px !important;
            margin: 3px 0 !important;
            font-size: 0.91rem !important;
        }

/* Sidebar bottom */
.tenant-sidebar-bottom {
    padding: 16px 4px 0 !important;
    border-top: 1px solid color-mix(in srgb, var(--mud-palette-drawer-text) 14%, transparent) !important;
}

/* Current branch card */
.tenant-branch-card {
    width: 100% !important;
    padding: 12px !important;
    border-radius: 16px !important;
    background: color-mix(in srgb, var(--mud-palette-drawer-text) 9%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--mud-palette-drawer-text) 18%, transparent) !important;
    color: var(--mud-palette-drawer-text) !important;
}

    .tenant-branch-card .mud-avatar-root {
        background: color-mix(in srgb, var(--mud-palette-primary) 22%, transparent) !important;
        color: var(--mud-palette-drawer-text) !important;
    }

    .tenant-branch-card .mud-icon-root {
        color: var(--mud-palette-drawer-text) !important;
    }

.tenant-branch-title {
    color: var(--mud-palette-drawer-text) !important;
    font-weight: 850 !important;
}

.tenant-branch-subtitle {
    color: color-mix(in srgb, var(--mud-palette-drawer-text) 66%, transparent) !important;
}

/* Logout button */
.tenant-sidebar-bottom .mud-button-outlined-error {
    min-height: 42px !important;
    border-radius: 14px !important;
    border-color: color-mix(in srgb, var(--mud-palette-error) 82%, transparent) !important;
    color: var(--mud-palette-error) !important;
    background: color-mix(in srgb, var(--mud-palette-error) 7%, transparent) !important;
    font-weight: 850 !important;
    text-transform: none !important;
}

    .tenant-sidebar-bottom .mud-button-outlined-error:hover {
        background: color-mix(in srgb, var(--mud-palette-error) 13%, transparent) !important;
    }

/* Topbar small polish */
.tenant-topbar {
    background: var(--mud-palette-appbar-background) !important;
    border-bottom: 1px solid var(--mud-palette-lines-default) !important;
}

.tenant-menu-btn {
    background: var(--mud-palette-surface) !important;
    border: 1px solid var(--mud-palette-lines-default) !important;
}

/* Mobile */
@media (max-width: 960px) {
    .tenant-drawer-inner {
        padding: 16px !important;
    }

    .tenant-drawer-header-plain {
        padding: 16px 4px 6px !important;
    }

    .tenant-sidebar-bottom {
        padding-bottom: 14px !important;
    }
}




/* =========================================================
   Tenant Sidebar Scrollbar Hide
   Keeps scrolling active, hides visible scrollbar
   ========================================================= */

.tenant-nav-scroll {
    scrollbar-width: none !important; /* Firefox */
    -ms-overflow-style: none !important; /* IE / Edge old */
}

    .tenant-nav-scroll::-webkit-scrollbar {
        width: 0 !important;
        height: 0 !important;
        display: none !important;
    }






.staff-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    overflow: hidden;
    background: var(--mud-palette-surface);
    margin-top: 12px;
}

.staff-detail-field {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 12px 16px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

    .staff-detail-field:nth-child(odd) {
        border-right: 1px solid var(--mud-palette-lines-default);
    }

    .staff-detail-field:nth-last-child(1),
    .staff-detail-field:nth-last-child(2):nth-child(odd) {
        border-bottom: 0;
    }

.staff-detail-field-full {
    grid-column: 1 / -1;
    border-right: 0 !important;
}

.staff-detail-label {
    color: var(--mud-palette-text-secondary);
    font-size: 0.82rem;
    line-height: 1.3;
}

.staff-detail-value {
    color: var(--mud-palette-text-primary);
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.35;
    word-break: break-word;
    text-align: left;
}

@media (max-width: 960px) {
    .staff-detail-grid {
        grid-template-columns: 1fr;
    }

    .staff-detail-field {
        grid-template-columns: 130px minmax(0, 1fr);
        border-right: 0 !important;
    }

        .staff-detail-field:nth-last-child(2):nth-child(odd) {
            border-bottom: 1px solid var(--mud-palette-lines-default);
        }
}

@media (max-width: 600px) {
    .staff-detail-field {
        grid-template-columns: 1fr;
        gap: 4px;
        padding: 12px;
    }
}



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

.shala-info-line {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    align-items: start;
    gap: 12px;
    min-width: 0;
}

.shala-info-line-wide {
    grid-column: 1 / -1;
}

.shala-info-line-compact {
    grid-template-columns: 100px minmax(0, 1fr);
}

.shala-info-line .shala-info-label {
    color: var(--mud-palette-text-secondary) !important;
    font-size: 0.8125rem;
    line-height: 1.35;
}

.shala-info-line .shala-info-value {
    color: var(--mud-palette-text-primary) !important;
    font-size: 0.875rem;
    line-height: 1.35;
    font-weight: 600;
    text-align: left;
    word-break: break-word;
    min-width: 0;
}

@media (max-width: 768px) {
    .shala-detail-info-grid {
        grid-template-columns: 1fr;
    }

    .shala-info-line,
    .shala-info-line-compact {
        grid-template-columns: 120px minmax(0, 1fr);
    }

    .shala-info-line-wide {
        grid-column: auto;
    }
}