:root {
    font-family: "Vazirmatn", "Segoe UI", Tahoma, sans-serif;
    color: #20243a;
    background: #f7f8fc;
    --ink: #20243a;
    --muted: #858ba2;
    --primary: #5946d2;
    --line: #eceef5;
}

html, body {
    margin: 0;
    min-height: 100%;
    direction: rtl;
    background: #f7f8fc;
}

body, .mud-typography, .mud-input-control, .mud-button-root, .mud-nav-link, .mud-table {
    font-family: "Vazirmatn", "Segoe UI", Tahoma, sans-serif !important;
}

* {
    box-sizing: border-box;
}

a {
    text-decoration: none;
}

.app-shell {
    min-height: 100vh;
    background: #f7f8fc;
}

.topbar {
    background: rgba(255,255,255,.94) !important;
    color: var(--ink) !important;
    border-bottom: 1px solid var(--line);
    padding-inline: 26px;
    backdrop-filter: blur(14px);
}

.brand-link {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    color: var(--ink) !important;
}

.brand-mark {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: linear-gradient(145deg,#705ee7,#4c3bc0);
    color: #fff;
    box-shadow: 0 7px 18px rgba(70, 210, 59, 0.35);
}

    .brand-mark .mud-icon-root {
        font-size: 23px;
    }

.brand-copy {
    display: flex;
    flex-direction: column;
    line-height: 1.4;
}

    .brand-copy strong {
        font-size: 15px;
        font-weight: 800;
    }

    .brand-copy small {
        color: var(--muted);
        font-size: 10px;
    }

.side-drawer {
    background: #fff !important;
    border-left: 1px solid var(--line) !important;
    padding: 0 !important;
}

.main-content {
    min-height: calc(100vh - 64px);
}

.page-wrap {
    max-width: 1440px;
    margin: 0 auto;
    padding: 34px 42px 52px;
}

.mobile-menu {
    display: none;
}

.user-chip {
    border: 1px solid #e2defb !important;
    color: #5846c9 !important;
}

    .user-chip .mud-chip-content {
        font-size: 11px;
    }

.top-login {
    border-radius: 10px;
}

/* Theme tokens: light is the default; the selected mode is applied to the full shell. */
.theme-light {
    --app-bg: #f7f8fc;
    --surface: #ffffff;
    --surface-muted: #fafaff;
    --ink: #20243a;
    --muted: #858ba2;
    --line: #eceef5;
    --nav-active: #f0edff;
    --nav-active-ink: #5644ca;
}

.theme-dark {
    --app-bg: #10131d;
    --surface: #191e2b;
    --surface-muted: #202637;
    --ink: #f2f3fa;
    --muted: #a4aac0;
    --line: #303648;
    --nav-active: #302b50;
    --nav-active-ink: #c2b8ff;
    color: var(--ink);
    background: var(--app-bg);
    color-scheme: dark;
}

    .theme-dark.app-shell, .theme-dark .main-content, .theme-dark .page-wrap {
        background: var(--app-bg) !important;
        color: var(--ink);
    }

    .theme-dark .topbar {
        background: rgba(25,30,43,.96) !important;
        color: var(--ink) !important;
        border-bottom-color: var(--line);
    }

    .theme-dark .brand-link, .theme-dark .brand-link .mud-link {
        color: var(--ink) !important;
    }

    .theme-dark .brand-copy small {
        color: var(--muted);
    }

    .theme-dark .side-drawer {
        background: #151a26 !important;
        border-left-color: var(--line) !important;
    }

    .theme-dark .dashboard-kpi, .theme-dark .dashboard-card, .theme-dark .dashboard-loading {
        background: var(--surface) !important;
        border-color: var(--line) !important;
        color: var(--ink);
    }

    .theme-dark .dashboard-card-heading .mud-typography-h6, .theme-dark .profit-row b, .theme-dark .quick-link {
        color: var(--ink);
    }

        .theme-dark .dashboard-card-heading .mud-typography-caption, .theme-dark .kpi-label, .theme-dark .kpi-foot, .theme-dark .profit-row, .theme-dark .quick-link small, .theme-dark .dashboard-footnote {
            color: var(--muted);
        }

    .theme-dark .kpi-purple .kpi-value, .theme-dark .kpi-green .kpi-value, .theme-dark .kpi-orange .kpi-value, .theme-dark .kpi-blue .kpi-value {
        color: var(--ink);
    }

    .theme-dark .profit-highlight {
        background: linear-gradient(135deg,#292542,#202637);
        color: #c2bddb;
    }

    .theme-dark .dashboard-chart {
        border-bottom-color: var(--line);
        background: repeating-linear-gradient(to bottom,transparent 0,transparent 51px,#2b3142 52px);
    }

    .theme-dark .dashboard-table .mud-table-cell {
        border-bottom-color: var(--line);
        color: #dfe2ef;
    }

    .theme-dark .dashboard-table .mud-table-head .mud-table-cell {
        color: #a4aac0;
    }

    .theme-dark .quick-link {
        border-bottom-color: var(--line);
    }

    .theme-dark .dashboard-date, .theme-dark .user-chip {
        border-color: #45405f !important;
        color: #c2b8ff !important;
    }

    .theme-dark .hero-panel {
        background: linear-gradient(115deg,#191e2b 0%,#191e2b 48%,#24213d 100%);
        border-color: var(--line);
    }

    .theme-dark .hero-title, .theme-dark .feature-item b, .theme-dark .empty-state h6 {
        color: var(--ink);
    }

    .theme-dark .hero-description, .theme-dark .hero-trust, .theme-dark .feature-item small {
        color: var(--muted);
    }

    .theme-dark .feature-item, .theme-dark .auth-layout, .theme-dark .auth-card, .theme-dark .editor-card, .theme-dark .table-card, .theme-dark .summary-strip {
        background: var(--surface) !important;
        border-color: var(--line) !important;
        color: var(--ink);
    }

        .theme-dark .auth-layout input, .theme-dark .editor-card input, .theme-dark .table-card input {
            color: var(--ink);
        }

    .theme-dark .mud-paper {
        --mud-palette-surface: #191e2b;
    }

    .theme-dark .mud-table-container, .theme-dark .mud-table, .theme-dark .mud-table-sticky-header {
        background: var(--surface);
        color: var(--ink);
    }

    .theme-dark .mud-input, .theme-dark .mud-input-control, .theme-dark .mud-select, .theme-dark .mud-picker {
        color: var(--ink);
    }

    .theme-dark .mud-divider {
        border-color: var(--line);
    }

.theme-toggle {
    margin-inline: 4px;
}

/* Landing */
.hero-panel {
    position: relative;
    display: grid;
    grid-template-columns: 1.02fr .98fr;
    align-items: center;
    min-height: 438px;
    padding: 55px 64px;
    overflow: hidden;
    border: 1px solid #eceaf8;
    border-radius: 28px;
    background: linear-gradient(115deg,#fff 0%,#fff 48%,#f2efff 100%);
    box-shadow: 0 18px 54px rgba(40, 76, 9, 0.16);
}

.hero-copy {
    position: relative;
    z-index: 2;
    max-width: 570px;
}

.eyebrow {
    font-size: 11px;
    font-weight: 600;
    background: #e0924c
}

.hero-title {
    margin-top: 20px !important;
    font-weight: 800 !important;
    font-size: clamp(34px,4vw,53px) !important;
    letter-spacing: -1.7px;
    line-height: 1.42 !important;
    color: #24243e;
}

    .hero-title span {
        color: #6552d9;
    }

.hero-description {
    max-width: 480px;
    margin-top: 13px !important;
    color: #81869b;
    line-height: 2 !important;
    font-size: 14px !important;
}

.hero-actions {
    display: flex;
    gap: 12px;
    margin-top: 25px;
}

    .hero-actions .mud-button-root {
        min-height: 46px;
        padding-inline: 21px;
        border-radius: 12px;
    }

.hero-trust {
    display: flex;
    gap: 23px;
    margin-top: 25px;
    color: #777d91;
    font-size: 11px;
}

    .hero-trust span {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .hero-trust .mud-icon-root {
        font-size: 17px;
    }

.hero-visual {
    position: relative;
    display: grid;
    min-height: 330px;
    place-items: center;
}

.visual-orbit {
    position: absolute;
    border: 1px solid #dcd7fb;
    border-radius: 50%;
    transform: rotate(-21deg);
}

.orbit-one {
    width: 380px;
    height: 240px;
}

.orbit-two {
    width: 320px;
    height: 320px;
    border-color: #e7e3fa;
}

.visual-card {
    position: relative;
    z-index: 1;
    width: 295px;
    padding: 20px;
    border: 1px solid #f0eff7;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 25px 65px rgba(39, 129, 28, 0.2);
    transform: rotate(-4deg);
}

.visual-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.product-glyph {
    display: grid;
    place-items: center;
    width: 70px;
    height: 70px;
    border-radius: 20px;
    color: #6755d6;
    background: linear-gradient(135deg,#f1efff,#e6e1ff);
}

    .product-glyph .mud-icon-root {
        font-size: 36px;
    }

.status-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #55c99a;
    box-shadow: 0 0 0 5px #e5f8f0;
}

.visual-lines {
    display: grid;
    gap: 8px;
    margin-top: 19px;
}

    .visual-lines i {
        height: 7px;
        border-radius: 8px;
        background: #eff0f6;
    }

        .visual-lines i:first-child {
            width: 53%;
            background: #e5e1fa;
        }

.visual-card-bottom {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 8px;
    margin-top: 22px;
    font-size: 11px;
}

    .visual-card-bottom b {
        font-size: 12px;
    }

    .visual-card-bottom strong {
        color: #5946d2;
        font-size: 11px;
        white-space: nowrap;
    }

    .visual-card-bottom small {
        color: #868ba0;
        font-weight: 400;
    }

.floating-stat {
    position: absolute;
    z-index: 2;
    bottom: 7px;
    right: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid #f0eff7;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 12px 36px rgba(39, 129, 22, 0.2);
}

.stat-icon {
    display: grid;
    place-items: center;
    width: 37px;
    height: 37px;
    border-radius: 12px;
    background: #f0edff;
    color: #6250d4;
}

.floating-stat span:nth-child(2) {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.floating-stat b {
    font-size: 10px;
}

.floating-stat small {
    color: #989caf;
    font-size: 9px;
}

.float-spark {
    position: absolute;
    color: #f0b94b;
    font-size: 24px;
}

.spark-a {
    top: 14px;
    left: 40px;
}

.spark-b {
    bottom: 36px;
    left: 65px;
    font-size: 18px;
    color: #a294ee;
}

.feature-row {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 15px;
    margin-top: 20px;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 19px 20px;
    border: 1px solid var(--line);
    border-radius: 17px;
    background: #fff;
}

    .feature-item > div {
        display: flex;
        flex-direction: column;
        gap: 5px;
    }

    .feature-item b {
        font-size: 12px;
    }

    .feature-item small {
        color: #9297a9;
        font-size: 10px;
    }

.feature-icon {
    display: grid;
    place-items: center;
    width: 43px;
    height: 43px;
    border-radius: 14px;
}

    .feature-icon.lavender {
        color: #6553d5;
        background: #f0edff;
    }

    .feature-icon.mint {
        color: #25a979;
        background: #e6f8f1;
    }

    .feature-icon.peach {
        color: #e0924c;
        background: #fff2e6;
    }

/* Auth */
.auth-layout {
    display: grid;
    grid-template-columns: .85fr 1fr;
    max-width: 920px;
    min-height: 510px;
    margin: 30px auto;
    overflow: hidden;
    border: 1px solid #ebeaf4;
    border-radius: 25px;
    background: #fff;
    box-shadow: 0 20px 55px rgba(36, 74, 12, 0.16);
}

.auth-aside {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 48px;
    color: #fff;
    background: radial-gradient(circle at 10% 10%,#8878ef,transparent 36%), linear-gradient(145deg,#5b49d2,#4034a4);
}

.register-aside {
    background: radial-gradient(circle at 10% 10%,#50cbb0,transparent 36%), linear-gradient(145deg,#168c83,#176e79);
}

.auth-aside-icon {
    width: 58px;
    height: 58px;
    margin-bottom: 24px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 80, 1);
    border-radius: 19px;
    background: rgba(255, 255, 24, 1);
    font-size: 29px !important;
}

.auth-aside h4 {
    font-weight: 800;
}

.auth-aside p {
    margin-top: 10px;
    color: rgba(255, 255, 201, 1);
    font-size: 13px;
    line-height: 2;
}

.aside-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 34px;
    color: rgba(255, 255, 210, 1);
    font-size: 10px;
}

.auth-card {
    align-self: center;
    max-width: 450px;
    width: 100%;
    margin: 0 auto;
    padding: 44px 48px;
}

.form-kicker {
    font-size: 10px;
}

.form-title {
    margin-top: 17px !important;
    font-weight: 800 !important;
}

.form-subtitle {
    margin-top: 7px !important;
    margin-bottom: 25px !important;
    color: #8a8fa2;
}

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

    .form-field .mud-input-outlined-border {
        border-radius: 12px;
    }

.login-email-field .mud-input-label-outlined {
    right: 14px;
    left: auto;
    transform-origin: top right;
}

.login-email-field input {
    direction: ltr;
    text-align: right;
}

.submit-button {
    min-height: 47px;
    margin-top: 16px;
    border-radius: 12px;
    font-weight: 700;
}

.switch-auth {
    margin-top: 22px !important;
    color: #858ba0;
}

    .switch-auth a {
        margin-right: 4px;
        color: #5946d2;
        font-weight: 700;
    }

.form-alert {
    margin-top: 5px;
    font-size: 12px;
}

.password-hint {
    display: block;
    margin: -8px 3px 14px;
    color: #8e93a5;
}

/* Products */
.page-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}

.section-kicker {
    color: #6452d3;
    font-weight: 700;
    font-size: 10px;
}

.section-title {
    margin-top: 1px !important;
    font-size: 27px !important;
    font-weight: 800 !important;
}

.section-subtitle {
    margin-top: 5px !important;
    color: #8d92a5;
    font-size: 12px !important;
}

.add-button {
    border-radius: 11px;
    min-height: 43px;
}

.summary-strip {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 18px;
    padding: 15px 19px;
    border: 1px solid #eceaf7;
    border-radius: 16px;
    background: linear-gradient(110deg,#fff,#faf9ff);
}

.summary-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 13px;
    background: #f0edff;
    color: #5c49d2;
}

.summary-strip > div:nth-child(2) {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.summary-strip small {
    color: #8e93a5;
    font-size: 10px;
}

.summary-strip b {
    color: #2b2a43;
    font-size: 16px;
}

.editor-card, .table-card {
    border: 1px solid #eceef4;
    border-radius: 17px !important;
    background: #fff;
    box-shadow: 0 7px 25px rgba(36, 74, 6, 0.16) !important;
}

.editor-card {
    margin-bottom: 18px;
    padding: 20px;
}

.editor-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 17px;
}

    .editor-heading h6 {
        font-weight: 700;
    }

    .editor-heading .mud-typography-caption {
        color: #8e93a5;
    }

.editor-icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 13px;
    background: #f1eeff;
    color: #5f4cd1;
}

.product-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 13px;
}

.description-field {
    grid-column: 1 / -1;
}

.editor-actions {
    display: flex;
    gap: 8px;
    margin-top: 15px;
}

    .editor-actions .mud-button-root {
        border-radius: 10px;
    }

.products-table {
    border-radius: 17px;
}

    .products-table .mud-table-head {
        background: #fafaff;
    }

    .products-table .mud-table-cell {
        padding: 13px 16px;
        border-bottom-color: #f0f1f6;
        font-size: 11px;
    }

    .products-table th {
        color: #898ea1;
        font-size: 10px !important;
        font-weight: 700 !important;
        white-space: nowrap;
    }

.product-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 145px;
}

.row-product-icon {
    display: grid;
    place-items: center;
    width: 35px;
    height: 35px;
    border-radius: 11px;
    background: #f2efff;
    color: #6754d6;
}

.product-cell > span:last-child {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.product-cell b {
    font-size: 11px;
}

.product-cell small {
    color: #a0a4b4;
    font-size: 9px;
    direction: ltr;
    text-align: right;
}

.description-cell {
    display: inline-block;
    max-width: 270px;
    color: #81869b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

.price-cell {
    color: #5141c1;
    white-space: nowrap;
}

    .price-cell small {
        color: #9297a8;
        font-size: 9px;
        font-weight: 400;
    }

.date-cell {
    color: #7f8599;
    white-space: nowrap;
}

.table-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 58px;
    padding: 7px 15px;
    border-top: 1px solid #f0f1f6;
    color: #8d92a4;
}

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

    .pagination-actions .mud-chip {
        height: 25px;
        min-width: 28px;
        font-size: 10px;
    }

.loading-state, .empty-state {
    min-height: 250px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #888da1;
}

.empty-icon {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 20px;
    background: #f2efff;
    color: #6653d4;
}

    .empty-icon .mud-icon-root {
        font-size: 32px;
    }

.empty-state h6 {
    margin-top: 4px;
    color: #34334d;
    font-weight: 700;
}

.empty-state p {
    color: #969bad;
    font-size: 11px;
}

.empty-action {
    margin-top: 4px;
    border-radius: 10px;
}

@media (max-width: 960px) {
    .page-wrap {
        padding: 26px 24px 40px;
    }

    .hero-panel {
        padding: 43px 35px;
    }

    .hero-visual {
        transform: scale(.88);
    }

    .auth-layout {
        max-width: 800px;
    }

    .auth-aside {
        padding: 34px;
    }

    .auth-card {
        padding: 38px 30px;
    }
}

@media (max-width: 720px) {
    .topbar {
        padding-inline: 9px;
    }

    .mobile-menu {
        display: inline-flex;
    }

    .brand-copy small {
        display: none;
    }

    .brand-mark {
        width: 37px;
        height: 37px;
        border-radius: 12px;
    }

    .user-chip {
        display: none !important;
    }

    .page-wrap {
        padding: 20px 15px 32px;
    }

    .hero-panel {
        grid-template-columns: 1fr;
        padding: 32px 23px 20px;
        border-radius: 21px;
    }

    .hero-title {
        font-size: 35px !important;
    }

    .hero-description {
        font-size: 12px !important;
    }

    .hero-visual {
        min-height: 275px;
        margin-top: 4px;
        transform: scale(.82);
    }

    .feature-row {
        grid-template-columns: 1fr;
        gap: 9px;
    }

    .feature-item {
        padding: 13px 15px;
    }

    .auth-layout {
        grid-template-columns: 1fr;
        margin: 10px auto;
    }

    .auth-aside {
        min-height: 190px;
        padding: 24px;
    }

    .auth-aside-icon {
        width: 44px;
        height: 44px;
        margin-bottom: 12px;
        padding: 10px;
        font-size: 22px !important;
    }

    .auth-aside h4 {
        font-size: 21px;
    }

    .auth-aside p {
        margin-top: 2px;
        font-size: 11px;
    }

    .aside-note {
        margin-top: 10px;
    }

    .auth-card {
        padding: 30px 23px;
    }

    .page-heading {
        align-items: flex-start;
    }

    .section-title {
        font-size: 23px !important;
    }

    .section-subtitle {
        max-width: 220px;
        line-height: 1.8 !important;
    }

    .add-button {
        min-width: 115px;
        padding-inline: 9px;
        font-size: 11px;
    }

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

    .description-field {
        grid-column: auto;
    }

    .table-card {
        overflow-x: auto;
    }

    .products-table {
        min-width: 750px;
    }

    .summary-strip {
        padding: 11px;
    }
}

/* Warehouse documents */
.list-heading {
    margin-top: 27px;
    margin-bottom: 12px;
}

.document-editor {
    padding: 21px;
}

.document-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 13px;
    margin-bottom: 18px;
}

.document-line.settlement-line {
    display: grid;
    grid-template-columns: minmax(150px, 1.4fr) minmax(130px, 1fr) minmax(200px, 2fr) 42px;
    align-items: start;
    gap: 12px;
}

    .document-line.settlement-line > .settlement-field, .document-line.settlement-line > .settlement-delete {
        min-width: 0;
    }

.settlement-line .settlement-method {
    grid-column: 1;
}

.settlement-line .settlement-amount {
    grid-column: 2;
}

.settlement-line .settlement-account {
    grid-column: 3;
}

.settlement-line .settlement-delete {
    grid-column: 4;
    align-self: center;
    justify-self: center;
}

.document-line.check-settlement {
    grid-template-columns: repeat(12, minmax(0, 1fr));
}

.check-settlement .settlement-method {
    grid-column: span 3;
}

.check-settlement .settlement-amount {
    grid-column: span 3;
}

.check-settlement .settlement-account {
    grid-column: span 6;
}

.check-settlement .settlement-delete {
    grid-column: 1 / -1;
    justify-self: end;
}

.check-settlement .settlement-check-number,
.check-settlement .settlement-bank-name,
.check-settlement .settlement-issue-date,
.check-settlement .settlement-due-date {
    grid-column: span 3;
}

.settlement-field, .settlement-field .mud-input-control, .settlement-field .mud-picker {
    width: 100%;
    min-width: 0;
}

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

.lines-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 4px 0 10px;
}

.document-line {
    display: grid;
    grid-template-columns: minmax(190px,2fr) minmax(110px,.85fr) minmax(135px,1fr) 42px;
    align-items: center;
    gap: 12px;
    padding: 11px 10px;
    margin-bottom: 8px;
    border: 1px solid #eff0f6;
    border-radius: 13px;
    background: #fdfdff;
}

    .document-line .mud-input-control {
        min-width: 0;
    }

.line-product {
    min-width: 0;
}

.journal-line {
    grid-template-columns: minmax(220px, 1.7fr) minmax(185px, 1.2fr) minmax(170px, 1.25fr) minmax(145px, .9fr) minmax(145px, .9fr) 42px;
    gap: 12px;
}

    .journal-line > .mud-chip {
        justify-self: start;
    }

    .journal-line > .mud-icon-button {
        justify-self: center;
    }

    .journal-line .mud-input-control {
        width: 100%;
    }

    .journal-line .mud-input-slot {
        font-variant-numeric: tabular-nums;
    }

.document-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 16px;
    margin-top: 12px;
    border-radius: 12px;
    background: #f4f2ff;
    color: #555b75;
    font-size: 12px;
}

    .document-total b {
        color: #5141c1;
        font-size: 17px;
    }

.document-editor .editor-actions {
    margin-top: 16px;
}

.document-number {
    color: #5848c5;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    direction: ltr;
    display: inline-block;
}

.stock-quantity {
    color: #2e3150;
    font-variant-numeric: tabular-nums;
}

.product-id {
    color: #9196a8;
    font-size: 10px;
    direction: ltr;
    display: inline-block;
}

.invoice-icon {
    background: #e7f8f2;
    color: #1b9d76;
}

.stock-note {
    margin-top: 12px;
    font-size: 11px;
}

@media (max-width: 900px) {
    .document-line.check-settlement {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 10px;
    }

    .check-settlement .settlement-method,
    .check-settlement .settlement-amount {
        grid-column: span 3;
    }

    .check-settlement .settlement-account {
        grid-column: span 5;
    }

    .check-settlement .settlement-delete {
        grid-column: span 1;
    }

    .check-settlement .settlement-check-number,
    .check-settlement .settlement-bank-name,
    .check-settlement .settlement-issue-date,
    .check-settlement .settlement-due-date {
        grid-column: span 3;
    }
}

@media (max-width: 720px) {
    .document-fields {
        grid-template-columns: 1fr;
    }

    .document-line {
        grid-template-columns: 1fr 1fr 40px;
        gap: 8px;
        padding: 10px 8px;
    }

        .document-line .line-product {
            grid-column: 1 / -1;
        }

        .document-line .mud-icon-button {
            grid-column: 3;
            grid-row: 2;
        }

        .document-line.settlement-line, .document-line.check-settlement {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 10px;
            padding: 12px;
        }

    .settlement-line .settlement-method {
        grid-column: 1 / -1;
    }

    .settlement-line .settlement-amount, .settlement-line .settlement-account,
    .check-settlement .settlement-check-number, .check-settlement .settlement-bank-name,
    .check-settlement .settlement-issue-date, .check-settlement .settlement-due-date {
        grid-column: span 1;
    }

    .document-line.settlement-line .settlement-delete {
        grid-column: 1 / -1;
        grid-row: auto;
        justify-self: end;
    }

    .journal-line {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

        .journal-line > :first-child, .journal-line > :nth-child(3) {
            grid-column: 1 / -1;
        }

        .journal-line > .mud-icon-button {
            grid-column: 1 / -1;
            grid-row: auto;
            justify-self: end;
        }

        .journal-line > .mud-chip {
            align-self: center;
        }

    .document-total {
        padding: 12px;
    }

        .document-total b {
            font-size: 15px;
        }
}

/* Reference data management */
.reference-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    align-items: start;
}

.reference-card {
    padding: 18px;
    overflow-x: auto;
}

.reference-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 13px;
    margin: 12px 0 16px;
    border: 1px solid #eceaf7;
    border-radius: 13px;
    background: #fbfaff;
}

.reference-filter {
    margin: 5px 0 14px;
}

@media (max-width: 900px) {
    .reference-grid {
        grid-template-columns: 1fr;
    }
}

/* Product categories, pictures and stock ledger */
.product-thumbnail {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: 10px;
    flex: 0 0 44px;
}

.product-image-preview {
    width: 140px;
    height: 140px;
    object-fit: cover;
    border-radius: 14px;
    border: 1px solid #e9e7f2;
}

.image-upload-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border: 1px dashed #d9d5ec;
    border-radius: 12px;
}

/* Financial statements */
.report-hub-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.report-hub-card {
    display: flex;
    min-height: 220px;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 18px !important;
    background: var(--surface);
    box-shadow: var(--surface-shadow);
}

    .report-hub-card .mud-typography-body2 {
        flex: 1;
        color: var(--muted);
        line-height: 1.9;
    }

.report-hub-icon {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    border-radius: 14px;
    background: #e9e5ff;
    color: #5946d2;
}

    .report-hub-icon .mud-icon-root {
        font-size: 25px;
    }

.report-hub-balance .report-hub-icon {
    background: #e4efff;
    color: #2874c8;
}

.report-hub-income .report-hub-icon {
    background: #dcf8ed;
    color: #0a916c;
}

.report-hub-trial .report-hub-icon {
    background: #fff0d9;
    color: #c97b11;
}

.report-hub-ledger .report-hub-icon {
    background: #f0e8ff;
    color: #7448c8;
}

.theme-dark .report-hub-icon {
    background: #342d58;
    color: #c2b8ff;
}

.theme-dark .report-hub-balance .report-hub-icon {
    background: #1d3d5a;
    color: #8bc7ff;
}

.theme-dark .report-hub-income .report-hub-icon {
    background: #17473b;
    color: #70e3bd;
}

.theme-dark .report-hub-trial .report-hub-icon {
    background: #4b361d;
    color: #ffd18a;
}

.theme-dark .report-hub-ledger .report-hub-icon {
    background: #3b2b55;
    color: #d3b7ff;
}

.financial-report-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
}

.financial-report-control {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.financial-statement {
    padding: 20px;
}

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

.statement-section {
    padding: 14px;
    border: 1px solid #eceaf5;
    border-radius: 12px;
}

.statement-total {
    display: flex;
    justify-content: space-between;
    padding: 11px 8px 2px;
    color: #555b75;
}

    .statement-total b {
        color: #5141c1;
    }

@media (max-width: 850px) {
    .financial-report-controls, .statement-sections, .report-hub-grid {
        grid-template-columns: 1fr;
    }

    .report-hub-card {
        min-height: 190px;
    }
}
/* Accounting dashboard */
.dashboard-page {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

.dashboard-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.dashboard-heading-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.dashboard-date {
    border-color: #e7e8f1 !important;
    color: #666b82 !important;
}

.dashboard-kpis {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 15px;
}

.dashboard-kpi {
    position: relative;
    overflow: hidden;
    padding: 19px 18px 16px;
    border: 1px solid #eceef5;
    border-radius: 18px !important;
    background: #fff;
    min-width: 0;
}

    .dashboard-kpi:after {
        content: "";
        position: absolute;
        width: 95px;
        height: 95px;
        border-radius: 50%;
        left: -28px;
        bottom: -47px;
        opacity: .08;
        background: currentColor;
    }

.kpi-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 17px;
}

    .kpi-top .mud-chip {
        font-size: 9px;
        height: 24px;
    }

.kpi-icon {
    display: grid;
    place-items: center;
    width: 41px;
    height: 41px;
    border-radius: 13px;
}

.kpi-label {
    color: #777d93;
    font-size: 11px !important;
}

.kpi-value {
    margin-top: 5px;
    font-weight: 800 !important;
    font-size: clamp(18px,1.8vw,25px) !important;
    letter-spacing: -.4px;
    direction: rtl;
    overflow-wrap: anywhere;
}

.kpi-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-top: 13px;
    color: #969bae;
    font-size: 10px;
}

    .kpi-foot .mud-icon-root {
        font-size: 17px;
    }

.kpi-purple {
    color: #6553d6;
}

    .kpi-purple .kpi-icon {
        background: #f0edff;
        color: #6553d6;
    }

    .kpi-purple .kpi-value {
        color: #40358f;
    }

.kpi-green {
    color: #16a47b;
}

    .kpi-green .kpi-icon {
        background: #e5f8f0;
        color: #16a47b;
    }

    .kpi-green .kpi-value {
        color: #137b60;
    }

.kpi-orange {
    color: #e89a32;
}

    .kpi-orange .kpi-icon {
        background: #fff2df;
        color: #d88920;
    }

    .kpi-orange .kpi-value {
        color: #a96815;
    }

.kpi-blue {
    color: #4288dc;
}

    .kpi-blue .kpi-icon {
        background: #e9f3ff;
        color: #4288dc;
    }

    .kpi-blue .kpi-value {
        color: #2d65a7;
    }

.dashboard-main-grid {
    display: grid;
    grid-template-columns: minmax(0,1.7fr) minmax(280px,1fr);
    gap: 16px;
    align-items: stretch;
}

.dashboard-bottom-grid {
    display: grid;
    grid-template-columns: minmax(0,1.55fr) minmax(280px,1fr);
    gap: 16px;
    align-items: stretch;
}

.dashboard-card {
    min-width: 0;
    padding: 20px;
    border: 1px solid #eceef5;
    border-radius: 18px !important;
    background: #fff;
    box-shadow: 0 5px 20px rgba(38,42,75,.025) !important;
}

.dashboard-card-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
}

    .dashboard-card-heading .mud-typography-h6 {
        color: #292c45;
        font-size: 15px;
        font-weight: 800;
    }

    .dashboard-card-heading .mud-typography-caption {
        display: block;
        margin-top: 3px;
        color: #9599ab;
        font-size: 10px;
        line-height: 1.8;
    }

.dashboard-chart {
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    gap: 14px;
    height: 210px;
    padding: 12px 5px 0;
    border-bottom: 1px solid #eceef5;
    background: repeating-linear-gradient(to bottom,transparent 0,transparent 51px,#f1f2f8 52px);
}

.chart-column {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 9px;
}

.chart-bars {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 6px;
    width: 100%;
    height: 170px;
}

.chart-bar-wrap {
    display: flex;
    align-items: flex-end;
    height: 100%;
    width: min(27px,35%);
}

.chart-bar {
    width: 100%;
    min-height: 3px;
    border-radius: 7px 7px 2px 2px;
    transition: height .3s ease;
}

.sales-bar {
    background: linear-gradient(180deg,#7c6ce8,#5b49ce);
}

.purchase-bar {
    background: linear-gradient(180deg,#60d5b1,#20a982);
}

.chart-month {
    padding-bottom: 9px;
    color: #8c91a5;
    font-size: 10px;
    direction: ltr;
}

.chart-legend {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 14px;
    color: #777d92;
    font-size: 10px;
}

    .chart-legend span {
        display: flex;
        align-items: center;
        gap: 7px;
    }

    .chart-legend i {
        display: inline-block;
        width: 9px;
        height: 9px;
        border-radius: 3px;
    }

.legend-sales {
    background: #6553d6;
}

.legend-purchases {
    background: #20a982;
}

.dashboard-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 180px;
    text-align: center;
    color: #969bae;
    font-size: 11px;
}

    .dashboard-empty .mud-icon-root {
        color: #b5b8c8;
        font-size: 35px;
    }

    .dashboard-empty.compact {
        min-height: 95px;
    }

.dashboard-alert {
    margin-bottom: 0;
}

.profit-highlight {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 15px;
    border-radius: 14px;
    background: linear-gradient(135deg,#f4f1ff,#f8f7ff);
    color: #77718e;
    font-size: 11px;
}

    .profit-highlight strong {
        font-size: 23px;
        font-weight: 800;
        overflow-wrap: anywhere;
    }

.positive-value {
    color: #198b68;
}

.negative-value {
    color: #d74b5b;
}

.financial-ratios-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.financial-ratios-grid {
    display: grid;
    grid-template-columns: repeat(5,minmax(0,1fr));
    gap: 12px;
}

.financial-ratio {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 7px;
    padding: 15px 13px;
    border: 1px solid #eceef5;
    border-radius: 13px;
    background: linear-gradient(145deg,#fff,#fafaff);
}

    .financial-ratio span {
        color: #747990;
        font-size: 11px;
        font-weight: 700;
    }

    .financial-ratio strong {
        color: #40358f;
        font-size: 20px;
        font-weight: 800;
        overflow-wrap: anywhere;
    }

    .financial-ratio small {
        color: #969bae;
        font-size: 10px;
    }

.financial-ratios-note {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    color: #969bae;
    font-size: 10px;
}

    .financial-ratios-note .mud-icon-root {
        font-size: 16px;
    }

.operations-overview-card {
    display: flex;
    flex-direction: column;
}

.operations-overview-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 15px;
}

.operations-summary-panel {
    min-width: 0;
    padding: 15px;
    border: 1px solid #eceef5;
    border-radius: 14px;
    background: linear-gradient(145deg,#fff,#fafaff);
}

.operations-panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
}

    .operations-panel-heading .mud-typography-subtitle2 {
        color: #333650;
        font-weight: 800;
    }

.operations-kpis {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 8px;
    margin-bottom: 10px;
}

    .operations-kpis.treasury-kpis {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .operations-kpis > div {
        display: flex;
        min-width: 0;
        flex-direction: column;
        gap: 4px;
        padding: 10px;
        border-radius: 10px;
        background: #f4f2ff;
    }

    .operations-kpis small {
        color: #85899d;
        font-size: 9px;
    }

    .operations-kpis b {
        color: #40358f;
        font-size: 12px;
        overflow-wrap: anywhere;
    }

.operations-list {
    display: flex;
    flex-direction: column;
}

.operations-list-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 2px;
    border-bottom: 1px solid #f0f1f6;
}

    .operations-list-row:last-child {
        border-bottom: 0;
    }

    .operations-list-row > span {
        display: flex;
        min-width: 0;
        flex-direction: column;
        gap: 3px;
    }

    .operations-list-row b {
        color: #34364f;
        font-size: 11px;
    }

    .operations-list-row small {
        color: #969bae;
        font-size: 9px;
    }

    .operations-list-row strong {
        color: #5141c1;
        font-size: 11px;
        white-space: nowrap;
    }

.theme-dark .operations-summary-panel {
    background: linear-gradient(145deg,#20263a,#1a2031);
    border-color: #343b51;
}

.theme-dark .operations-panel-heading .mud-typography-subtitle2, .theme-dark .operations-list-row b {
    color: #e1e4f2;
}

.theme-dark .operations-kpis > div {
    background: #30294e;
}

.theme-dark .operations-kpis small, .theme-dark .operations-list-row small {
    color: #aeb4c9;
}

.theme-dark .operations-kpis b {
    color: #c4b8ff;
}

.theme-dark .operations-list-row {
    border-color: #343b51;
}

    .theme-dark .operations-list-row strong {
        color: #c4b8ff;
    }

.theme-dark .financial-ratio {
    background: linear-gradient(145deg,#20263a,#1a2031);
    border-color: #343b51;
}

    .theme-dark .financial-ratio span, .theme-dark .financial-ratio small, .theme-dark .financial-ratios-note {
        color: #aeb4c9;
    }

    .theme-dark .financial-ratio strong {
        color: #c4b8ff;
    }

.profit-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 17px;
    color: #747990;
    font-size: 11px;
}

    .profit-row b {
        color: #333650;
        font-size: 12px;
    }

    .profit-row span {
        display: flex;
        align-items: center;
        gap: 7px;
    }

.profit-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.revenue-dot {
    background: #1fa77e;
}

.expense-dot {
    background: #edaa43;
}

.profit-progress {
    margin-top: 8px;
    height: 6px;
}

.dashboard-table {
    margin-inline: -5px;
}

    .dashboard-table .mud-table-cell {
        padding: 12px 9px;
        font-size: 10px;
        border-bottom-color: #f0f1f6;
    }

    .dashboard-table .mud-table-head .mud-table-cell {
        color: #8d92a6;
        font-size: 10px;
        font-weight: 700;
        white-space: nowrap;
    }

.dashboard-document-title {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 100px;
    max-width: 190px;
}

    .dashboard-document-title small {
        color: #a0a4b4;
        font-size: 9px;
    }

.table-amount {
    color: #5141c1;
    white-space: nowrap;
}

.document-number {
    direction: ltr;
    display: inline-block;
    color: #5848c5;
    font-weight: 700;
    white-space: nowrap;
}

.quick-links {
    display: flex;
    flex-direction: column;
}

.quick-link {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px 0;
    border-bottom: 1px solid #f0f1f6;
    color: #34364f;
}

    .quick-link:last-child {
        border-bottom: 0;
    }

    .quick-link > span:nth-child(2) {
        display: flex;
        flex: 1;
        min-width: 0;
        flex-direction: column;
        gap: 4px;
    }

    .quick-link b {
        font-size: 11px;
        font-weight: 700;
    }

    .quick-link small {
        color: #969bae;
        font-size: 9px;
    }

    .quick-link > .mud-icon-root {
        color: #a6a9b9;
        font-size: 19px;
    }

.quick-link-icon {
    display: grid;
    place-items: center;
    width: 39px;
    height: 39px;
    flex: 0 0 39px;
    border-radius: 12px;
}

.quick-purple {
    color: #6553d6;
    background: #f0edff;
}

.quick-blue {
    color: #4388d9;
    background: #e9f3ff;
}

.quick-green {
    color: #159e77;
    background: #e5f8f0;
}

.quick-orange {
    color: #dc9028;
    background: #fff2df;
}

.dashboard-footnote {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #969bae;
    font-size: 10px;
    line-height: 1.8;
}

    .dashboard-footnote .mud-icon-root {
        font-size: 16px;
    }

.dashboard-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 280px;
    border: 1px solid #eceef5;
    border-radius: 18px !important;
    color: #888da1;
}

@media(max-width:1150px) {
    .dashboard-kpis {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .financial-ratios-grid {
        grid-template-columns: repeat(3,minmax(0,1fr));
    }

    .dashboard-main-grid, .dashboard-bottom-grid {
        grid-template-columns: minmax(0,1fr);
    }
}

@media(max-width:850px) {
    .operations-overview-grid {
        grid-template-columns: minmax(0,1fr);
    }
}

@media(max-width:720px) {
    .dashboard-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .dashboard-heading-actions {
        width: 100%;
        justify-content: space-between;
    }

    .dashboard-kpis {
        gap: 10px;
    }

    .dashboard-kpi {
        padding: 14px 12px;
    }

    .kpi-top {
        align-items: flex-start;
        flex-direction: column;
        margin-bottom: 12px;
    }

        .kpi-top .mud-chip {
            display: none;
        }

    .kpi-value {
        font-size: 18px !important;
    }

    .kpi-foot {
        font-size: 9px;
    }

    .dashboard-card {
        padding: 15px 12px;
    }

    .dashboard-chart {
        gap: 6px;
        height: 180px;
    }

    .chart-bars {
        height: 145px;
    }

    .chart-bar-wrap {
        width: 30%;
    }

    .chart-month {
        font-size: 9px;
    }

    .dashboard-card-heading {
        align-items: flex-start;
    }

    .dashboard-table {
        min-width: 540px;
    }

    .recent-card {
        overflow-x: auto;
    }

    .financial-ratios-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: 8px;
    }

    .financial-ratio {
        padding: 12px 10px;
    }

        .financial-ratio strong {
            font-size: 17px;
        }

    .financial-ratios-note {
        align-items: flex-start;
    }

    .operations-summary-panel {
        padding: 12px 10px;
    }

    .operations-kpis {
        grid-template-columns: 1fr;
    }

        .operations-kpis.treasury-kpis {
            grid-template-columns: repeat(2,minmax(0,1fr));
        }

    .operations-list-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }

    .dashboard-footnote {
        align-items: flex-start;
    }
}

/* Persian-first typography and cohesive, vivid light/dark component styling. */
:root {
    --font-persian: "Vazirmatn", Tahoma, "Segoe UI", sans-serif;
    --accent-violet: #6553d6;
    --accent-cyan: #0891b2;
    --accent-green: #0f9f78;
    --accent-orange: #e99524;
    --accent-rose: #e05275;
}

html, body, button, input, textarea, select, option,
.mud-typography, .mud-button-root, .mud-icon-button, .mud-nav-link,
.mud-table, .mud-table-cell, .mud-input, .mud-input-slot, .mud-input-control,
.mud-select, .mud-picker, .mud-dialog, .mud-dialog-title, .mud-dialog-content,
.mud-dialog-actions, .mud-menu, .mud-list, .mud-list-item, .mud-chip,
.mud-snackbar, .mud-alert, .mud-tooltip-root, .mud-popover, .mud-tabs,
.mud-tab, .mud-pagination, .mud-breadcrumbs, .mud-treeview, .mud-autocomplete,
.mud-data-grid, .mud-data-grid th, .mud-data-grid td {
    font-family: var(--font-persian) !important;
}

body {
    font-feature-settings: "ss01" on;
}

.mud-typography {
    letter-spacing: 0 !important;
}

.mud-button-root {
    font-weight: 600;
}

.mud-input-label, .mud-input-helper-text, .mud-form-label {
    font-family: var(--font-persian) !important;
}

/* Light theme surfaces and colorful table headings. */
.theme-light {
    --app-bg: #f5f7ff;
    --surface: #ffffff;
    --surface-muted: #f0f3ff;
    --ink: #20243a;
    --muted: #737b95;
    --line: #e4e8f5;
    --table-head-bg: #eeedff;
    --table-head-ink: #5142b8;
    --table-hover: #f4f7ff;
    --focus-ring: rgba(101, 83, 214, .2);
}

    .theme-light.app-shell, .theme-light .main-content, .theme-light .page-wrap {
        background: var(--app-bg) !important;
        color: var(--ink);
    }

    .theme-light .mud-table-container,
    .theme-light .mud-table,
    .theme-light .mud-data-grid,
    .theme-light .mud-paper {
        color: var(--ink);
    }

        .theme-light .mud-table-head .mud-table-cell,
        .theme-light .mud-data-grid .mud-table-head .mud-table-cell,
        .theme-light .mud-data-grid-header .mud-table-cell {
            background: linear-gradient(120deg, #efedff 0%, #e8f6ff 100%) !important;
            color: #5142b8 !important;
            border-bottom: 2px solid #c9c2ff !important;
            font-weight: 800 !important;
            font-size: 12px;
            white-space: nowrap;
        }

        .theme-light .mud-table-body .mud-table-row:hover > .mud-table-cell,
        .theme-light .mud-data-grid .mud-table-row:hover > .mud-table-cell {
            background: #f2f6ff !important;
        }

        .theme-light .mud-table-cell, .theme-light .mud-data-grid .mud-table-cell {
            border-bottom-color: #e9edf7 !important;
        }

    .theme-light .mud-input-outlined .mud-input-outlined-border {
        border-color: #dfe4f3;
    }

    .theme-light .mud-input-control:focus-within .mud-input-outlined-border {
        border-color: var(--accent-violet) !important;
        box-shadow: 0 0 0 3px var(--focus-ring);
    }

/* Dark theme: keep headers, controls and row hover legible rather than defaulting to white. */
.theme-dark {
    --app-bg: #10131d;
    --surface: #191e2b;
    --surface-muted: #22283a;
    --ink: #f3f4fc;
    --muted: #a8afc5;
    --line: #343b51;
    --table-head-bg: #292744;
    --table-head-ink: #d1c9ff;
    --table-hover: #242b3d;
    --focus-ring: rgba(169, 155, 255, .2);
}

    .theme-dark .mud-table-head .mud-table-cell,
    .theme-dark .mud-data-grid .mud-table-head .mud-table-cell,
    .theme-dark .mud-data-grid-header .mud-table-cell {
        background: linear-gradient(120deg, #30284f 0%, #1e3b50 100%) !important;
        color: #d9d3ff !important;
        border-bottom: 2px solid #7565cf !important;
        font-weight: 800 !important;
        font-size: 12px;
        white-space: nowrap;
    }

    .theme-dark .mud-table-container,
    .theme-dark .mud-table,
    .theme-dark .mud-data-grid,
    .theme-dark .mud-paper,
    .theme-dark .mud-table-root {
        background-color: var(--surface) !important;
        color: var(--ink) !important;
    }

        .theme-dark .mud-table-cell,
        .theme-dark .mud-data-grid .mud-table-cell {
            color: #e1e5f4 !important;
            border-bottom-color: #30384c !important;
        }

        .theme-dark .mud-table-body .mud-table-row:hover > .mud-table-cell,
        .theme-dark .mud-data-grid .mud-table-row:hover > .mud-table-cell {
            background: #252d42 !important;
        }

    .theme-dark .mud-input-outlined .mud-input-outlined-border {
        border-color: #424a62 !important;
    }

    .theme-dark .mud-input-control:focus-within .mud-input-outlined-border {
        border-color: #a99bff !important;
        box-shadow: 0 0 0 3px var(--focus-ring);
    }

    .theme-dark .mud-input-slot, .theme-dark .mud-input, .theme-dark .mud-select, .theme-dark input,
    .theme-dark textarea, .theme-dark .mud-input-label, .theme-dark .mud-select-input,
    .theme-dark .mud-picker-input, .theme-dark .mud-autocomplete-input {
        color: var(--ink) !important;
    }

    .theme-dark .mud-input-label, .theme-dark .mud-input-helper-text,
    .theme-dark .mud-table-pagination, .theme-dark .mud-table-pagination-caption,
    .theme-dark .mud-icon-button {
        color: #b8bfd5;
    }

    .theme-dark .mud-popover, .theme-dark .mud-menu, .theme-dark .mud-list,
    .theme-dark .mud-picker-calendar, .theme-dark .mud-picker-container {
        background: #1b2130 !important;
        color: var(--ink) !important;
    }

    .theme-dark .mud-list-item:hover, .theme-dark .mud-picker-calendar-day:hover {
        background: #2b3150 !important;
    }

    .theme-dark .mud-divider {
        border-color: var(--line) !important;
    }

/* A lively but consistent accent treatment across common interactive components. */
.mud-button-filled.mud-button-filled-primary,
.mud-button-root.mud-button-filled-primary {
    background: linear-gradient(135deg, #7464e8, #5542c5) !important;
    box-shadow: 0 5px 14px rgba(91, 73, 206, .2);
}

.mud-button-filled.mud-button-filled-secondary,
.mud-button-root.mud-button-filled-secondary {
    background: linear-gradient(135deg, #32c6a0, #0d9874) !important;
    color: #fff !important;
}

.mud-button-root {
    border-radius: 11px;
}

.mud-icon-button:hover {
    background-color: rgba(101, 83, 214, .12) !important;
}

.mud-chip-color-primary {
    font-weight: 600;
}

.mud-tab.mud-tab-active {
    color: var(--accent-violet) !important;
    font-weight: 800;
}

.mud-tabs-toolbar {
    border-bottom: 1px solid var(--line);
}

.mud-progress-linear .mud-progress-linear-bar {
    background: linear-gradient(90deg, #20b995, #7160e5) !important;
}

.mud-checkbox .mud-icon-root, .mud-radio .mud-icon-root {
    color: var(--accent-violet);
}

.mud-alert {
    border-radius: 12px;
}

/* Give cards and data-entry sections consistent depth without overpowering content. */
.theme-light .mud-card, .theme-light .table-card, .theme-light .editor-card,
.theme-light .summary-strip, .theme-light .feature-item {
    border-color: #e6e9f5;
    box-shadow: 0 8px 24px rgba(49, 58, 108, .045);
}

.theme-dark .mud-card, .theme-dark .mud-expansion-panel,
.theme-dark .mud-paper:not(.mud-table-container) {
    border-color: #30384c;
}

@media (max-width: 720px) {
    .theme-light .mud-table-head .mud-table-cell,
    .theme-dark .mud-table-head .mud-table-cell {
        font-size: 11px;
    }
}

/* Final polish: keep table corners aligned with the card frame in both themes. */
.theme-light .table-card,
.theme-dark .table-card {
    border: 1px solid var(--line) !important;
    border-radius: 18px !important;
    overflow: hidden;
    isolation: isolate;
}

.theme-light .products-table,
.theme-dark .products-table,
.theme-light .products-table .mud-table-container,
.theme-dark .products-table .mud-table-container,
.theme-light .products-table .mud-table-root,
.theme-dark .products-table .mud-table-root {
    border-radius: 17px !important;
    overflow: hidden;
}

    .theme-light .products-table .mud-table-head .mud-table-cell:first-child,
    .theme-light .mud-data-grid-header .mud-table-cell:first-child {
        border-top-right-radius: 15px !important;
    }

    .theme-light .products-table .mud-table-head .mud-table-cell:last-child,
    .theme-light .mud-data-grid-header .mud-table-cell:last-child {
        border-top-left-radius: 15px !important;
    }

    .theme-dark .products-table .mud-table-head .mud-table-cell:first-child,
    .theme-dark .mud-data-grid-header .mud-table-cell:first-child {
        border-top-right-radius: 15px !important;
    }

    .theme-dark .products-table .mud-table-head .mud-table-cell:last-child,
    .theme-dark .mud-data-grid-header .mud-table-cell:last-child {
        border-top-left-radius: 15px !important;
    }

/* Document registration/edit forms: explicit light-theme contrast for every control. */
.theme-light .document-editor,
.theme-light .editor-card.document-editor {
    background: #ffffff !important;
    color: #20243a !important;
    border-color: #e1e6f4 !important;
}

    .theme-light .document-editor .mud-input-control,
    .theme-light .document-editor .mud-input,
    .theme-light .document-editor .mud-select,
    .theme-light .document-editor .mud-autocomplete,
    .theme-light .document-editor .mud-picker,
    .theme-light .document-editor .mud-input-slot,
    .theme-light .document-editor .mud-input-label,
    .theme-light .document-editor .mud-typography,
    .theme-light .document-editor label {
        color: #303650 !important;
    }

    .theme-light .document-editor .mud-input-outlined-border {
        border-color: #cfd7eb !important;
    }

    .theme-light .document-editor .mud-input-control:hover .mud-input-outlined-border {
        border-color: #9a8ff0 !important;
    }

    .theme-light .document-editor .mud-input-control:focus-within .mud-input-outlined-border {
        border-color: #6553d6 !important;
        box-shadow: 0 0 0 3px rgba(101, 83, 214, .12) !important;
    }

    .theme-light .document-editor .mud-input-slot input,
    .theme-light .document-editor input,
    .theme-light .document-editor textarea,
    .theme-light .document-editor .mud-select-input,
    .theme-light .document-editor .mud-autocomplete-input {
        color: #20243a !important;
        caret-color: #5946d2;
    }

    .theme-light .document-editor .document-line,
    .theme-light .document-editor .journal-line {
        background: #f7f8ff !important;
        border-color: #e0e5f4 !important;
        color: #20243a !important;
    }

        .theme-light .document-editor .document-line .mud-input-control,
        .theme-light .document-editor .journal-line .mud-input-control {
            background-color: transparent !important;
        }

    .theme-light .document-editor .document-total {
        background: linear-gradient(110deg, #f0edff, #e8f8ff) !important;
        border: 1px solid #dcdafa;
        color: #414766 !important;
    }

        .theme-light .document-editor .document-total b {
            color: #4d3bc1 !important;
        }

    .theme-light .document-editor .mud-icon-button {
        color: #5b4bc9 !important;
    }

    .theme-light .document-editor .mud-input-label,
    .theme-light .document-editor .mud-input-helper-text {
        opacity: 1 !important;
    }

/* Mirror the document-line treatment in dark mode without white patches. */
.theme-dark .document-editor .document-line,
.theme-dark .document-editor .journal-line {
    background: #202637 !important;
    border-color: #343c53 !important;
    color: #f0f2fc !important;
}

.theme-dark .document-editor .document-total {
    background: linear-gradient(110deg, #30284f, #1e3b50) !important;
    border: 1px solid #49446e;
    color: #dfe3f5 !important;
}

    .theme-dark .document-editor .document-total b {
        color: #c7bcff !important;
    }

/* Shared avatar styling: global because profile/admin pages are separate Razor components. */
.mud-avatar .account-avatar-image {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
    border-radius: 50%;
    background: #fff;
    padding: 1px;
}

.user-avatar-topbar {
    flex: 0 0 auto;
    overflow: hidden;
    margin-inline: 4px;
}

/* Color-tinted dashboard cards with soft 3D depth in both themes. */
.theme-light .dashboard-kpi {
    border-color: rgba(112,119,170,.16);
    box-shadow: 0 4px 0 rgba(57,67,112,.055),0 12px 24px rgba(57,67,112,.075),inset 0 1px 0 rgba(255,255,255,.9) !important;
}

    .theme-light .dashboard-kpi.kpi-purple {
        background: linear-gradient(145deg,#ffffff 0%,#f0edff 100%) !important;
        border-color: #dcd5ff;
    }

    .theme-light .dashboard-kpi.kpi-green {
        background: linear-gradient(145deg,#ffffff 0%,#e7fbf3 100%) !important;
        border-color: #c9f0df;
    }

    .theme-light .dashboard-kpi.kpi-orange {
        background: linear-gradient(145deg,#ffffff 0%,#fff3df 100%) !important;
        border-color: #f6dfb8;
    }

    .theme-light .dashboard-kpi.kpi-blue {
        background: linear-gradient(145deg,#ffffff 0%,#eaf4ff 100%) !important;
        border-color: #d0e5ff;
    }

.theme-light .dashboard-card {
    border-color: rgba(112,119,170,.18);
    box-shadow: 0 4px 0 rgba(57,67,112,.045),0 12px 26px rgba(57,67,112,.07),inset 0 1px 0 rgba(255,255,255,.85) !important;
}

.theme-light .chart-card {
    background: linear-gradient(145deg,#ffffff 0%,#f0f7ff 100%) !important;
}

.theme-light .profit-card {
    background: linear-gradient(145deg,#ffffff 0%,#f5f0ff 100%) !important;
}

.theme-light .recent-card {
    background: linear-gradient(145deg,#ffffff 0%,#f0fbf7 100%) !important;
}

.theme-light .quick-card {
    background: linear-gradient(145deg,#ffffff 0%,#fff6e9 100%) !important;
}

.theme-light .dashboard-kpi, .theme-light .dashboard-card {
    transition: transform .18s ease,box-shadow .18s ease;
}

    .theme-light .dashboard-kpi:hover, .theme-light .dashboard-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 0 rgba(57,67,112,.055),0 16px 30px rgba(57,67,112,.11),inset 0 1px 0 rgba(255,255,255,.9) !important;
    }

.theme-dark .dashboard-kpi {
    border-color: rgba(166,174,211,.18) !important;
    box-shadow: 0 4px 0 rgba(0,0,0,.2),0 12px 24px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.035) !important;
}

    .theme-dark .dashboard-kpi.kpi-purple {
        background: linear-gradient(145deg,#292442,#1b2030) !important;
    }

    .theme-dark .dashboard-kpi.kpi-green {
        background: linear-gradient(145deg,#1d3934,#1a242c) !important;
    }

    .theme-dark .dashboard-kpi.kpi-orange {
        background: linear-gradient(145deg,#3a2e20,#222431) !important;
    }

    .theme-dark .dashboard-kpi.kpi-blue {
        background: linear-gradient(145deg,#1e3044,#1b2230) !important;
    }

.theme-dark .dashboard-card {
    border-color: rgba(166,174,211,.17) !important;
    box-shadow: 0 4px 0 rgba(0,0,0,.18),0 12px 26px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.035) !important;
}

.theme-dark .chart-card {
    background: linear-gradient(145deg,#1c2635,#191e2b) !important;
}

.theme-dark .profit-card {
    background: linear-gradient(145deg,#29233f,#191e2b) !important;
}

.theme-dark .recent-card {
    background: linear-gradient(145deg,#1b302d,#191e2b) !important;
}

.theme-dark .quick-card {
    background: linear-gradient(145deg,#382c20,#191e2b) !important;
}

.theme-dark .dashboard-kpi:hover, .theme-dark .dashboard-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 0 rgba(0,0,0,.2),0 16px 30px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.04) !important;
}

.theme-dark .dashboard-card-heading .mud-typography-h6 {
    color: var(--ink) !important;
}

.theme-dark .dashboard-card-heading .mud-typography-caption, .theme-dark .kpi-label, .theme-dark .kpi-foot {
    color: var(--muted) !important;
}

.theme-dark .kpi-purple .kpi-value, .theme-dark .kpi-green .kpi-value, .theme-dark .kpi-orange .kpi-value, .theme-dark .kpi-blue .kpi-value {
    color: #f2f3fa !important;
}

.theme-dark .dashboard-card .dashboard-table, .theme-dark .dashboard-card .mud-table-container {
    background: transparent !important;
}

/* Unified product UI: calm surfaces, clear hierarchy, and consistent interaction states. */
.theme-light {
    --app-bg: #f5f6fc;
    --surface: #ffffff;
    --surface-muted: #f3f5ff;
    --ink: #20243a;
    --muted: #6f7892;
    --line: #e1e5f2;
    --accent-violet: #5b4ae8;
    --accent-cyan: #078eab;
    --accent-green: #099975;
    --accent-orange: #d98212;
    --accent-rose: #d83f68;
    --focus-ring: rgba(91, 74, 232, .22);
    --surface-shadow: 0 8px 26px rgba(43, 48, 101, .065);
    --surface-shadow-hover: 0 12px 32px rgba(43, 48, 101, .12);
}

.theme-dark {
    --app-bg: #101421;
    --surface: #191f30;
    --surface-muted: #222a3d;
    --ink: #f1f3fa;
    --muted: #a8b1ca;
    --line: #333d56;
    --accent-violet: #a99bff;
    --accent-cyan: #48c8e3;
    --accent-green: #51d6ae;
    --accent-orange: #ffbd62;
    --accent-rose: #ff829e;
    --focus-ring: rgba(169, 155, 255, .24);
    --surface-shadow: 0 8px 26px rgba(0, 0, 0, .22);
    --surface-shadow-hover: 0 12px 32px rgba(0, 0, 0, .32);
}

    .theme-light.app-shell, .theme-dark.app-shell {
        background: var(--app-bg) !important;
        color: var(--ink);
    }

    .theme-light .main-content, .theme-dark .main-content,
    .theme-light .page-wrap, .theme-dark .page-wrap {
        background: var(--app-bg) !important;
        color: var(--ink);
    }

.topbar {
    min-height: 68px;
    padding-inline: clamp(14px, 2.4vw, 34px);
    border-bottom: 1px solid var(--line) !important;
    box-shadow: 0 2px 14px rgba(31, 40, 70, .035);
}

.theme-dark .topbar {
    box-shadow: 0 2px 18px rgba(0, 0, 0, .18);
}

.brand-mark {
    box-shadow: 0 5px 13px rgba(89, 70, 210, .2);
}

.page-wrap {
    width: min(100%, 1520px);
    padding: clamp(22px, 3vw, 38px) clamp(18px, 3.2vw, 48px) 52px;
}

.page-heading, .dashboard-heading {
    margin-bottom: 24px;
}

.section-kicker {
    letter-spacing: .02em;
}

.section-title {
    line-height: 1.45 !important;
}

.section-subtitle {
    max-width: 720px;
    line-height: 1.9 !important;
}

.theme-light .editor-card, .theme-light .table-card, .theme-light .summary-strip,
.theme-light .reference-card, .theme-light .financial-statement, .theme-light .statement-section,
.theme-light .auth-layout, .theme-light .feature-item, .theme-light .dashboard-card,
.theme-light .dashboard-kpi, .theme-light .dashboard-loading {
    border-color: var(--line) !important;
    box-shadow: var(--surface-shadow) !important;
}

.theme-dark .editor-card, .theme-dark .table-card, .theme-dark .summary-strip,
.theme-dark .reference-card, .theme-dark .financial-statement, .theme-dark .statement-section,
.theme-dark .auth-layout, .theme-dark .feature-item, .theme-dark .dashboard-card,
.theme-dark .dashboard-kpi, .theme-dark .dashboard-loading {
    border-color: var(--line) !important;
    box-shadow: var(--surface-shadow) !important;
}

.editor-card, .table-card, .reference-card, .financial-statement, .dashboard-card,
.dashboard-kpi, .auth-layout, .summary-strip {
    border-radius: 18px !important;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.editor-card, .table-card, .reference-card, .financial-statement,
.theme-light .editor-card, .theme-light .table-card, .theme-light .reference-card, .theme-light .financial-statement {
    background: var(--surface) !important;
}

.summary-strip {
    background: linear-gradient(110deg, var(--surface), var(--surface-muted)) !important;
}

.editor-heading {
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
}

.document-line {
    border-color: var(--line);
    border-radius: 12px;
}

.reference-form {
    border-color: var(--line);
    background: var(--surface-muted);
}

.image-upload-field {
    border-color: var(--line);
    background: var(--surface-muted);
}

.mud-button-root {
    min-height: 38px;
    font-weight: 650;
    transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease;
}

    .mud-button-root:not(.mud-button-text):hover {
        transform: translateY(-1px);
    }

    .mud-button-filled.mud-button-filled-primary, .mud-button-root.mud-button-filled-primary {
        background: linear-gradient(135deg, #6c5add, #5542c5) !important;
        box-shadow: 0 4px 11px rgba(89, 70, 210, .18);
    }

.mud-button-outlined {
    border-width: 1px !important;
}

.mud-input-outlined-border {
    border-radius: 11px !important;
}

.mud-input-control:focus-within .mud-input-outlined-border {
    box-shadow: 0 0 0 3px var(--focus-ring, rgba(101,83,214,.14));
}

.mud-dialog {
    border: 1px solid var(--line);
    border-radius: 18px !important;
    box-shadow: 0 22px 65px rgba(20, 27, 50, .2) !important;
}

.mud-dialog-title {
    border-bottom: 1px solid var(--line);
}

.mud-alert {
    border-radius: 13px !important;
}

.mud-chip {
    font-weight: 600;
}

.theme-light .mud-table-container, .theme-light .mud-data-grid,
.theme-light .mud-table, .theme-light .mud-table-root {
    background: var(--surface) !important;
    color: var(--ink);
}

.theme-dark .mud-table-container, .theme-dark .mud-data-grid,
.theme-dark .mud-table, .theme-dark .mud-table-root {
    background: var(--surface) !important;
    color: var(--ink);
}

.theme-light .mud-table-head .mud-table-cell, .theme-light .mud-data-grid-header .mud-table-cell {
    background: #f3f4fb !important;
    color: #555d77 !important;
    border-bottom: 1px solid var(--line) !important;
    font-size: 11px;
}

.theme-dark .mud-table-head .mud-table-cell, .theme-dark .mud-data-grid-header .mud-table-cell {
    background: #222a3a !important;
    color: #c4cbe0 !important;
    border-bottom: 1px solid var(--line) !important;
    font-size: 11px;
}

.theme-light .mud-table-cell, .theme-light .mud-data-grid .mud-table-cell,
.theme-dark .mud-table-cell, .theme-dark .mud-data-grid .mud-table-cell {
    border-bottom-color: var(--line) !important;
}

.theme-light .mud-table-body .mud-table-row:hover > .mud-table-cell,
.theme-light .mud-data-grid .mud-table-row:hover > .mud-table-cell {
    background: #f7f8fc !important;
}

.theme-dark .mud-table-body .mud-table-row:hover > .mud-table-cell,
.theme-dark .mud-data-grid .mud-table-row:hover > .mud-table-cell {
    background: #252e40 !important;
}

.table-footer {
    border-top-color: var(--line);
}

.theme-dark .summary-strip, .theme-dark .editor-card, .theme-dark .table-card,
.theme-dark .reference-card, .theme-dark .financial-statement, .theme-dark .statement-section,
.theme-dark .auth-layout, .theme-dark .feature-item {
    background: var(--surface) !important;
    color: var(--ink);
}

.theme-dark .reference-form, .theme-dark .image-upload-field {
    border-color: var(--line);
    background: var(--surface-muted);
}

.theme-dark .document-total {
    border-color: #3b4560;
    background: linear-gradient(110deg, #292442, #202c3b);
    color: var(--ink);
}

    .theme-dark .document-total b, .theme-dark .statement-total b {
        color: #c6bdff;
    }

.theme-dark .summary-strip b, .theme-dark .empty-state h6, .theme-dark .feature-item b,
.theme-dark .statement-total, .theme-dark .product-cell b {
    color: var(--ink);
}

.theme-dark .section-subtitle, .theme-dark .summary-strip small,
.theme-dark .editor-heading .mud-typography-caption, .theme-dark .empty-state p {
    color: var(--muted);
}

@media (hover: hover) {
    .theme-light .editor-card:hover, .theme-light .table-card:hover,
    .theme-light .reference-card:hover, .theme-light .dashboard-card:hover {
        border-color: #d8dced !important;
        box-shadow: var(--surface-shadow-hover) !important;
    }

    .theme-dark .editor-card:hover, .theme-dark .table-card:hover,
    .theme-dark .reference-card:hover, .theme-dark .dashboard-card:hover {
        border-color: #414b62 !important;
        box-shadow: var(--surface-shadow-hover) !important;
    }
}

@media (max-width: 720px) {
    .topbar {
        min-height: 58px;
    }

    .page-wrap {
        padding: 20px 14px 32px;
    }

    .page-heading {
        gap: 12px;
        margin-bottom: 17px;
    }

    .section-title {
        font-size: 22px !important;
    }

    .editor-card {
        padding: 15px;
    }

    .summary-strip {
        gap: 9px;
    }

    .mud-dialog {
        max-width: calc(100vw - 24px) !important;
        margin: 12px !important;
    }
}

/* More vivid accents with controlled contrast in both color schemes. */
.theme-light .main-content, .theme-light .page-wrap {
    background: radial-gradient(ellipse at 92% 3%, rgba(108, 91, 232, .065), transparent 34%), radial-gradient(ellipse at 5% 38%, rgba(20, 169, 143, .045), transparent 30%), var(--app-bg) !important;
}

.theme-dark .main-content, .theme-dark .page-wrap {
    background: radial-gradient(ellipse at 92% 3%, rgba(124, 108, 238, .12), transparent 34%), radial-gradient(ellipse at 5% 38%, rgba(30, 181, 157, .07), transparent 30%), var(--app-bg) !important;
}

.section-kicker {
    color: var(--accent-violet) !important;
}

.section-title {
    color: var(--ink);
}

.add-button, .submit-button, .hero-actions .mud-button-filled-primary {
    background: linear-gradient(135deg, #705cf0, #5140d0) !important;
    box-shadow: 0 5px 14px rgba(81, 64, 208, .24) !important;
}

.mud-button-filled.mud-button-filled-secondary, .mud-button-root.mud-button-filled-secondary {
    background: linear-gradient(135deg, #21b995, #078e78) !important;
    box-shadow: 0 5px 14px rgba(9, 153, 117, .2);
}

.summary-strip {
    border-color: color-mix(in srgb, var(--accent-violet) 22%, var(--line)) !important;
    background: linear-gradient(110deg, color-mix(in srgb, var(--accent-violet) 7%, var(--surface)), color-mix(in srgb, var(--accent-cyan) 6%, var(--surface))) !important;
}

.summary-icon, .editor-icon, .empty-icon {
    color: var(--accent-violet) !important;
    background: color-mix(in srgb, var(--accent-violet) 13%, var(--surface)) !important;
}

.theme-dark .summary-icon, .theme-dark .editor-icon, .theme-dark .empty-icon {
    background: color-mix(in srgb, var(--accent-violet) 18%, var(--surface)) !important;
}

.theme-light .dashboard-card {
    border-top: 2px solid color-mix(in srgb, var(--accent-violet) 55%, white) !important;
}

.theme-light .chart-card {
    border-top-color: #4288dc !important;
}

.theme-light .recent-card {
    border-top-color: #12a781 !important;
}

.theme-light .quick-card {
    border-top-color: #e99a32 !important;
}

.theme-light .profit-card {
    border-top-color: #705cf0 !important;
}

.theme-dark .dashboard-card {
    border-top: 2px solid color-mix(in srgb, var(--accent-violet) 55%, #20283a) !important;
}

.theme-dark .chart-card {
    border-top-color: #58a7f5 !important;
}

.theme-dark .recent-card {
    border-top-color: #39c9a0 !important;
}

.theme-dark .quick-card {
    border-top-color: #ffbd62 !important;
}

.theme-dark .profit-card {
    border-top-color: #a99bff !important;
}

.theme-light .mud-table-head .mud-table-cell, .theme-light .mud-data-grid-header .mud-table-cell {
    background: linear-gradient(110deg, #eeebff, #e8f5ff) !important;
    color: #4e42b5 !important;
    border-bottom-color: #c9c1ff !important;
}

.theme-dark .mud-table-head .mud-table-cell, .theme-dark .mud-data-grid-header .mud-table-cell {
    background: linear-gradient(110deg, #30294f, #1d3b50) !important;
    color: #d9d3ff !important;
    border-bottom-color: #7565cf !important;
}

.theme-light .mud-input-control:focus-within .mud-input-outlined-border {
    border-color: var(--accent-violet) !important;
}

.theme-dark .mud-input-control:focus-within .mud-input-outlined-border {
    border-color: var(--accent-violet) !important;
}

.theme-dark .user-chip, .theme-dark .dashboard-date {
    border-color: color-mix(in srgb, var(--accent-violet) 38%, var(--line)) !important;
    color: var(--accent-violet) !important;
}

.theme-dark .document-total {
    background: linear-gradient(110deg, #332b59, #1d4051) !important;
    border-color: #514a7b !important;
}

/* High-contrast color pass: make the palette clearly visible, not just decorative. */
.theme-light .main-content, .theme-light .page-wrap {
    background: radial-gradient(ellipse at 92% 0%, rgba(105, 78, 238, .15), transparent 34%), radial-gradient(ellipse at 8% 35%, rgba(0, 174, 151, .09), transparent 30%), linear-gradient(135deg, #f7f7ff 0%, #f4f8ff 52%, #f2fbf8 100%) !important;
}

.theme-dark .main-content, .theme-dark .page-wrap {
    background: radial-gradient(ellipse at 92% 0%, rgba(116, 92, 245, .22), transparent 34%), radial-gradient(ellipse at 8% 35%, rgba(0, 174, 151, .12), transparent 30%), linear-gradient(135deg, #111522 0%, #131a2a 55%, #11201f 100%) !important;
}

.topbar {
    border-bottom: 2px solid transparent !important;
    border-image: linear-gradient(90deg, #10a889, #4388e8, #705cf0) 1 !important;
    box-shadow: 0 5px 22px rgba(62, 54, 150, .09) !important;
}

.theme-dark .topbar {
    box-shadow: 0 5px 24px rgba(0, 0, 0, .3) !important;
}

.brand-mark {
    background: linear-gradient(145deg, #8470ff, #4a36d3) !important;
    box-shadow: 0 6px 18px rgba(89, 70, 210, .4) !important;
}

.mud-button-root.mud-button-filled-primary, .mud-button-filled.mud-button-filled-primary,
.add-button, .submit-button {
    background: linear-gradient(120deg, #7a5cff 0%, #5b42e8 52%, #4331c5 100%) !important;
    box-shadow: 0 5px 0 #39299e, 0 9px 20px rgba(84, 61, 216, .32) !important;
}

.mud-button-root.mud-button-filled-secondary, .mud-button-filled.mud-button-filled-secondary {
    background: linear-gradient(120deg, #31d6ae, #079d7b 70%, #087861) !important;
    box-shadow: 0 5px 0 #086a55, 0 9px 18px rgba(9, 153, 117, .26) !important;
}

.theme-light .dashboard-kpi.kpi-purple {
    background: linear-gradient(145deg, #fff 0%, #e8e1ff 100%) !important;
    border-color: #a99aff !important;
}

.theme-light .dashboard-kpi.kpi-green {
    background: linear-gradient(145deg, #fff 0%, #d7f8e9 100%) !important;
    border-color: #75d7b0 !important;
}

.theme-light .dashboard-kpi.kpi-orange {
    background: linear-gradient(145deg, #fff 0%, #ffebc9 100%) !important;
    border-color: #f2bd66 !important;
}

.theme-light .dashboard-kpi.kpi-blue {
    background: linear-gradient(145deg, #fff 0%, #dceeff 100%) !important;
    border-color: #82baf1 !important;
}

.theme-dark .dashboard-kpi.kpi-purple {
    background: linear-gradient(145deg, #302755, #211d3c) !important;
    border-color: #6653c6 !important;
}

.theme-dark .dashboard-kpi.kpi-green {
    background: linear-gradient(145deg, #16483d, #1b302f) !important;
    border-color: #168e70 !important;
}

.theme-dark .dashboard-kpi.kpi-orange {
    background: linear-gradient(145deg, #50371e, #302a28) !important;
    border-color: #ae762c !important;
}

.theme-dark .dashboard-kpi.kpi-blue {
    background: linear-gradient(145deg, #1c3e5e, #202b42) !important;
    border-color: #3478b5 !important;
}

.theme-light .kpi-purple .kpi-value {
    color: #4936ba !important;
}

.theme-light .kpi-green .kpi-value {
    color: #08724f !important;
}

.theme-light .kpi-orange .kpi-value {
    color: #985500 !important;
}

.theme-light .kpi-blue .kpi-value {
    color: #155c9e !important;
}

.theme-dark .kpi-purple .kpi-value {
    color: #c4b8ff !important;
}

.theme-dark .kpi-green .kpi-value {
    color: #77e7c2 !important;
}

.theme-dark .kpi-orange .kpi-value {
    color: #ffd18a !important;
}

.theme-dark .kpi-blue .kpi-value {
    color: #93ceff !important;
}

.theme-light .dashboard-card.chart-card {
    background: linear-gradient(145deg, #fff, #edf5ff) !important;
    border-color: #a9cdf5 !important;
}

.theme-light .dashboard-card.profit-card {
    background: linear-gradient(145deg, #fff, #f2edff) !important;
    border-color: #c1b2ff !important;
}

.theme-light .dashboard-card.recent-card {
    background: linear-gradient(145deg, #fff, #e9faf3) !important;
    border-color: #a2dfc8 !important;
}

.theme-light .dashboard-card.quick-card {
    background: linear-gradient(145deg, #fff, #fff4e3) !important;
    border-color: #f0d09a !important;
}

.theme-dark .dashboard-card.chart-card {
    background: linear-gradient(145deg, #1b2c43, #191f30) !important;
    border-color: #365b86 !important;
}

.theme-dark .dashboard-card.profit-card {
    background: linear-gradient(145deg, #2a2446, #191f30) !important;
    border-color: #6452a6 !important;
}

.theme-dark .dashboard-card.recent-card {
    background: linear-gradient(145deg, #18372f, #191f30) !important;
    border-color: #287c64 !important;
}

.theme-dark .dashboard-card.quick-card {
    background: linear-gradient(145deg, #3a2d20, #191f30) !important;
    border-color: #8f692e !important;
}

.theme-light .mud-table-head .mud-table-cell, .theme-light .mud-data-grid-header .mud-table-cell {
    background: linear-gradient(110deg, #e3dcff, #d9f0ff) !important;
    color: #4335a4 !important;
    border-bottom: 2px solid #a99aff !important;
}

.theme-dark .mud-table-head .mud-table-cell, .theme-dark .mud-data-grid-header .mud-table-cell {
    background: linear-gradient(110deg, #433574, #1c5260) !important;
    color: #f0eaff !important;
    border-bottom: 2px solid #8771ef !important;
}

.theme-light .summary-strip {
    background: linear-gradient(110deg, #eeeaff, #e3f7ff) !important;
    border-color: #c7baff !important;
}

.theme-dark .summary-strip {
    background: linear-gradient(110deg, #30294e, #173b46) !important;
    border-color: #5c5189 !important;
}

.ledger-table-scroll {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}

    .ledger-table-scroll .ledger-table {
        width: max-content;
        min-width: 100%;
    }

        .ledger-table-scroll .ledger-table .mud-table-container {
            overflow: visible !important;
        }

        .ledger-table-scroll .ledger-table .mud-table-root {
            width: max-content;
            min-width: 1550px;
            overflow: visible !important;
        }

.ledger-table .mud-table-cell {
    white-space: nowrap;
}

.ledger-table .ledger-value {
    color: #5141c1;
    white-space: nowrap;
}

.ledger-table-scroll {
    scrollbar-width: thin;
    scrollbar-color: #8b7be8 #eeeaf9;
}

    .ledger-table-scroll::-webkit-scrollbar {
        height: 10px;
    }

    .ledger-table-scroll::-webkit-scrollbar-thumb {
        background: #8b7be8;
        border: 2px solid #eeeaf9;
        border-radius: 8px;
    }

/* Dashboard palette: calm teal surfaces with restrained semantic accents. */
.theme-light .dashboard-page {
    --dashboard-accent: #147d78;
    --dashboard-ink: #173b46;
    --dashboard-muted: #647d83;
}

    .theme-light .dashboard-page .dashboard-heading .section-kicker {
        color: #147d78 !important;
    }

    .theme-light .dashboard-page .dashboard-card,
    .theme-light .dashboard-page .dashboard-kpi {
        background: linear-gradient(145deg, #ffffff, #f3f9f8) !important;
        border-color: #d7e8e5 !important;
    }

    .theme-light .dashboard-page .dashboard-card {
        border-top: 2px solid #9cc9c1 !important;
        box-shadow: 0 8px 24px rgba(24, 76, 80, .07) !important;
    }

    .theme-light .dashboard-page .chart-card {
        border-top-color: #4a9eb0 !important;
    }

    .theme-light .dashboard-page .profit-card {
        border-top-color: #6a83c5 !important;
    }

    .theme-light .dashboard-page .recent-card {
        border-top-color: #29987d !important;
    }

    .theme-light .dashboard-page .quick-card {
        border-top-color: #d19a4a !important;
    }

    .theme-light .dashboard-page .dashboard-kpi.kpi-purple {
        background: linear-gradient(145deg, #fff, #e8f4f2) !important;
        border-color: #c4e0dc !important;
    }

    .theme-light .dashboard-page .dashboard-kpi.kpi-green {
        background: linear-gradient(145deg, #fff, #e6f5ee) !important;
        border-color: #c5e7d5 !important;
    }

    .theme-light .dashboard-page .dashboard-kpi.kpi-orange {
        background: linear-gradient(145deg, #fff, #fbf2e4) !important;
        border-color: #ecd9b7 !important;
    }

    .theme-light .dashboard-page .dashboard-kpi.kpi-blue {
        background: linear-gradient(145deg, #fff, #eaf2fa) !important;
        border-color: #cfdeed !important;
    }

    .theme-light .dashboard-page .kpi-purple .kpi-value {
        color: #176f70 !important;
    }

    .theme-light .dashboard-page .kpi-green .kpi-value {
        color: #187653 !important;
    }

    .theme-light .dashboard-page .kpi-orange .kpi-value {
        color: #93651d !important;
    }

    .theme-light .dashboard-page .kpi-blue .kpi-value {
        color: #315d8a !important;
    }

    .theme-light .dashboard-page .dashboard-card-heading .mud-typography-h6 {
        color: #173b46 !important;
    }

    .theme-light .dashboard-page .dashboard-date {
        background: #edf6f4;
        border-color: #c9e0db !important;
        color: #276b68 !important;
    }

    .theme-light .dashboard-page .financial-ratio,
    .theme-light .dashboard-page .operations-summary-panel {
        background: linear-gradient(145deg, #fff, #f4f9f8) !important;
        border-color: #dbeae7 !important;
    }

        .theme-light .dashboard-page .financial-ratio strong,
        .theme-light .dashboard-page .operations-list-row strong {
            color: #176f70;
        }

    .theme-light .dashboard-page .operations-kpis > div {
        background: #eaf4f2;
    }

    .theme-light .dashboard-page .operations-kpis b {
        color: #225c60;
    }

    .theme-light .dashboard-page .sales-bar {
        background: linear-gradient(180deg, #4f9db0, #347b91);
    }

    .theme-light .dashboard-page .purchase-bar {
        background: linear-gradient(180deg, #62b99a, #328b70);
    }

    .theme-light .dashboard-page .legend-sales {
        background: #347b91;
    }

    .theme-light .dashboard-page .legend-purchases {
        background: #328b70;
    }

    .theme-light .dashboard-page .profit-highlight {
        background: linear-gradient(135deg, #e8f3f3, #f1f5fb);
    }

.theme-dark .dashboard-page {
    --dashboard-accent: #62c4b5;
    --dashboard-ink: #e2f0ef;
    --dashboard-muted: #a0b7b8;
}

    .theme-dark .dashboard-page .dashboard-card,
    .theme-dark .dashboard-page .dashboard-kpi {
        background: linear-gradient(145deg, #1d3039, #192831) !important;
        border-color: #344b52 !important;
    }

    .theme-dark .dashboard-page .dashboard-card {
        border-top: 2px solid #426b6c !important;
        box-shadow: 0 9px 26px rgba(0, 0, 0, .2) !important;
    }

    .theme-dark .dashboard-page .chart-card {
        border-top-color: #4a91a3 !important;
    }

    .theme-dark .dashboard-page .profit-card {
        border-top-color: #7b8fc1 !important;
    }

    .theme-dark .dashboard-page .recent-card {
        border-top-color: #49a88d !important;
    }

    .theme-dark .dashboard-page .quick-card {
        border-top-color: #c59450 !important;
    }

    .theme-dark .dashboard-page .dashboard-kpi.kpi-purple {
        background: linear-gradient(145deg, #244047, #1b3037) !important;
    }

    .theme-dark .dashboard-page .dashboard-kpi.kpi-green {
        background: linear-gradient(145deg, #214638, #1b302e) !important;
    }

    .theme-dark .dashboard-page .dashboard-kpi.kpi-orange {
        background: linear-gradient(145deg, #453a2b, #292e30) !important;
    }

    .theme-dark .dashboard-page .dashboard-kpi.kpi-blue {
        background: linear-gradient(145deg, #263d50, #1d3039) !important;
    }

    .theme-dark .dashboard-page .dashboard-card-heading .mud-typography-h6 {
        color: #e2f0ef !important;
    }

    .theme-dark .dashboard-page .dashboard-card-heading .mud-typography-caption,
    .theme-dark .dashboard-page .kpi-label,
    .theme-dark .dashboard-page .kpi-foot {
        color: #a0b7b8 !important;
    }

    .theme-dark .dashboard-page .kpi-purple .kpi-value {
        color: #91d4cc !important;
    }

    .theme-dark .dashboard-page .kpi-green .kpi-value {
        color: #87d6b2 !important;
    }

    .theme-dark .dashboard-page .kpi-orange .kpi-value {
        color: #e6c58e !important;
    }

    .theme-dark .dashboard-page .kpi-blue .kpi-value {
        color: #9dc9e7 !important;
    }

    .theme-dark .dashboard-page .financial-ratio,
    .theme-dark .dashboard-page .operations-summary-panel {
        background: linear-gradient(145deg, #20353d, #1b2c34) !important;
        border-color: #3a5358 !important;
    }

        .theme-dark .dashboard-page .financial-ratio strong,
        .theme-dark .dashboard-page .operations-list-row strong {
            color: #8bd1c4 !important;
        }

    .theme-dark .dashboard-page .operations-kpis > div {
        background: #29444a;
    }

    .theme-dark .dashboard-page .operations-kpis b {
        color: #b7e0d9;
    }

    .theme-dark .dashboard-page .profit-highlight {
        background: linear-gradient(135deg, #29444a, #263541);
    }

    .theme-dark .dashboard-page .dashboard-chart {
        border-color: #3c555a;
        background: repeating-linear-gradient(to bottom, transparent 0, transparent 51px, #2c4148 52px);
    }

    .theme-dark .dashboard-page .sales-bar {
        background: linear-gradient(180deg, #65b6c4, #39899b);
    }

    .theme-dark .dashboard-page .purchase-bar {
        background: linear-gradient(180deg, #71c7a6, #369674);
    }

    .theme-dark .dashboard-page .legend-sales {
        background: #39899b;
    }

    .theme-dark .dashboard-page .legend-purchases {
        background: #369674;
    }

.theme-light .dashboard-page .dashboard-card:hover,
.theme-light .dashboard-page .dashboard-kpi:hover {
    box-shadow: 0 12px 30px rgba(24, 76, 80, .12) !important;
}

.theme-dark .dashboard-page .dashboard-card:hover,
.theme-dark .dashboard-page .dashboard-kpi:hover {
    box-shadow: 0 12px 30px rgba(0, 0, 0, .28) !important;
}

/* Stronger, colorful dashboard card surfaces while preserving text contrast. */
.theme-light .dashboard-page > .dashboard-card,
.theme-light .dashboard-page .financial-ratios-card {
    background: linear-gradient(140deg, #dcefeb, #cce5e2) !important;
    border-color: #9ccbc5 !important;
}

.theme-light .dashboard-page .chart-card {
    background: linear-gradient(140deg, #d8edf4, #c5e1ed) !important;
    border-color: #8fc4d2 !important;
}

.theme-light .dashboard-page .profit-card {
    background: linear-gradient(140deg, #e6e1fa, #d4cef1) !important;
    border-color: #b1a6e2 !important;
}

.theme-light .dashboard-page .recent-card {
    background: linear-gradient(140deg, #daf0e4, #c5e7d5) !important;
    border-color: #91c9ac !important;
}

.theme-light .dashboard-page .quick-card {
    background: linear-gradient(140deg, #faecd4, #f3dcb4) !important;
    border-color: #dfbd7f !important;
}

.theme-light .dashboard-page .dashboard-kpi.kpi-purple {
    background: linear-gradient(140deg, #e2dcff, #c9c0f7) !important;
    border-color: #a89be8 !important;
}

.theme-light .dashboard-page .dashboard-kpi.kpi-green {
    background: linear-gradient(140deg, #d6f4e3, #b8e7ce) !important;
    border-color: #87cba5 !important;
}

.theme-light .dashboard-page .dashboard-kpi.kpi-orange {
    background: linear-gradient(140deg, #fff0d5, #f8d99e) !important;
    border-color: #e6bb68 !important;
}

.theme-light .dashboard-page .dashboard-kpi.kpi-blue {
    background: linear-gradient(140deg, #d9edff, #bdddf6) !important;
    border-color: #8ebfe5 !important;
}

.theme-light .dashboard-page .financial-ratio {
    background: linear-gradient(145deg, #f0edff, #ded9fa) !important;
    border-color: #b9afe8 !important;
}

.theme-light .dashboard-page .operations-summary-panel {
    background: linear-gradient(145deg, #e9f5f2, #d4eae6) !important;
    border-color: #a9d2ca !important;
}

.theme-light .dashboard-page .operations-kpis > div {
    background: #c9e6e1 !important;
}

.theme-light .dashboard-page .profit-highlight {
    background: linear-gradient(135deg, #d7eae9, #d8e2f2) !important;
}

.theme-dark .dashboard-page > .dashboard-card,
.theme-dark .dashboard-page .financial-ratios-card {
    background: linear-gradient(140deg, #244c50, #1d3c45) !important;
    border-color: #397376 !important;
}

.theme-dark .dashboard-page .chart-card {
    background: linear-gradient(140deg, #234b60, #1d394d) !important;
    border-color: #3c7f95 !important;
}

.theme-dark .dashboard-page .profit-card {
    background: linear-gradient(140deg, #3e3765, #2d2b4d) !important;
    border-color: #7165a6 !important;
}

.theme-dark .dashboard-page .recent-card {
    background: linear-gradient(140deg, #205144, #1d3b3d) !important;
    border-color: #368b70 !important;
}

.theme-dark .dashboard-page .quick-card {
    background: linear-gradient(140deg, #594427, #38352d) !important;
    border-color: #a27a3c !important;
}

.theme-dark .dashboard-page .dashboard-kpi.kpi-purple {
    background: linear-gradient(140deg, #453d78, #302e58) !important;
    border-color: #796bc2 !important;
}

.theme-dark .dashboard-page .dashboard-kpi.kpi-green {
    background: linear-gradient(140deg, #245d49, #20443e) !important;
    border-color: #439a72 !important;
}

.theme-dark .dashboard-page .dashboard-kpi.kpi-orange {
    background: linear-gradient(140deg, #694b28, #453a2d) !important;
    border-color: #b28542 !important;
}

.theme-dark .dashboard-page .dashboard-kpi.kpi-blue {
    background: linear-gradient(140deg, #2d5271, #243e56) !important;
    border-color: #4b83ad !important;
}

.theme-dark .dashboard-page .financial-ratio {
    background: linear-gradient(145deg, #373665, #2b304b) !important;
    border-color: #625e9f !important;
}

.theme-dark .dashboard-page .operations-summary-panel {
    background: linear-gradient(145deg, #244b4b, #203b42) !important;
    border-color: #3b7773 !important;
}

.theme-dark .dashboard-page .operations-kpis > div {
    background: #315d5c !important;
}

.theme-dark .dashboard-page .profit-highlight {
    background: linear-gradient(135deg, #315c5a, #33475b) !important;
}

/* ------------------------------------------------------------
   Global rules (cannot live in MainLayout.razor.css: CSS isolation
   appends [b-xxxx] to every selector).
   ------------------------------------------------------------ */

#blazor-error-ui {
    color-scheme: light only;
    display: none;
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    padding: .65rem 1.25rem;
    z-index: 1000;
    background: lightyellow;
    color: #20243a;
    box-sizing: border-box;
    box-shadow: 0 -1px 2px rgba(0,0,0,.2);
}

    #blazor-error-ui .dismiss {
        position: absolute;
        top: .5rem;
        inset-inline-end: .75rem;
        cursor: pointer;
    }

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

::selection {
    color: #ffffff;
    background: rgba(89,70,210,.65);
}

/* ============================================================
   MainLayout (global)
   این بخش عمداً در app.css است، نه MainLayout.razor.css:
   ریشهٔ کامپوننت‌های MudBlazor صفت scope نمی‌گیرد و انتخابگرهای scoped
   روی .app-shell / .main-content / .mud-drawer-content اعمال نمی‌شوند.
   ============================================================ */

/* ============================================================
   1) Design tokens
   روی ریشهٔ layout تعریف می‌شوند تا هم Drawer و هم تب‌ها (MainContent)
   به آن‌ها دسترسی داشته باشند.
   ============================================================ */

.app-shell {
    --radius-xs: 8px;
    --radius-sm: 10px;
    --radius-md: 13px;
    --radius-lg: 17px;
    --radius-xl: 20px;
    --surface-1: #ffffff;
    --surface-2: #f8f9ff;
    --surface-3: #eef0fa;
    --border-soft: rgba(128,128,160,.18);
    --border-medium: rgba(128,128,160,.28);
    --text-soft: rgba(80,80,95,.80);
    --shadow-1: 0 2px 0 rgba(68,76,112,.07), 0 4px 10px rgba(55,64,100,.06);
    --shadow-2: 0 3px 0 rgba(74,67,130,.09), 0 9px 18px rgba(45,50,90,.09);
    --shadow-hover: 0 4px 0 rgba(74,67,130,.09), 0 12px 22px rgba(45,50,90,.12);
    --shadow-active: 0 2px 0 rgba(89,70,210,.22), 0 6px 13px rgba(89,70,210,.16);
    --grad-primary: linear-gradient(145deg,#7865ed,#4d3bb9);
    --grad-success: linear-gradient(145deg,#41d5a5,#14966f);
    --grad-info: linear-gradient(145deg,#62a8f5,#3476d1);
    --grad-warn: linear-gradient(145deg,#ffc66d,#e58a1b);
    --grad-danger: linear-gradient(145deg,#ff8aa5,#d83d68);
    --active-bg: linear-gradient(135deg, rgba(89,70,210,.16), rgba(32,169,130,.12));
    --transition-fast: .15s ease;
    --transition-normal: .18s ease;
    --transition-slow: .25s ease;
}

    .app-shell.theme-dark {
        --surface-1: #121722;
        --surface-2: #171c2a;
        --surface-3: #20283a;
        --border-soft: rgba(166,174,211,.18);
        --border-medium: rgba(166,174,211,.30);
        --text-soft: rgba(220,225,240,.75);
        --shadow-1: 0 2px 0 rgba(0,0,0,.26), 0 6px 12px rgba(0,0,0,.18);
        --shadow-2: 0 3px 0 rgba(0,0,0,.32), 0 10px 20px rgba(0,0,0,.22);
        --shadow-hover: 0 3px 0 rgba(0,0,0,.34), 0 12px 24px rgba(0,0,0,.26);
        --shadow-active: 0 2px 0 rgba(89,70,210,.34), 0 6px 12px rgba(0,0,0,.25);
        --active-bg: linear-gradient(135deg, rgba(125,108,231,.30), rgba(32,169,130,.18));
    }

/* ============================================================
   1b) Page scroll container
   اسکرول‌بار خود سند (viewport) همیشه سمت راست می‌ماند و از direction پیروی نمی‌کند.
   پس سند اسکرول نمی‌شود و .main-content (بدنه) خودش اسکرول‌کننده است؛
   با direction: rtl اسکرول‌بار آن در لبهٔ چپ قرار می‌گیرد، زیر AppBar شروع می‌شود
   و ناحیهٔ Drawer را شامل نمی‌شود.
   ============================================================ */

.mud-layout.app-shell {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
}

.app-shell .main-content {
    box-sizing: border-box;
    height: calc(100vh - var(--mud-appbar-height, 64px));
    height: calc(100dvh - var(--mud-appbar-height, 64px));
    min-height: 0 !important;
    margin-top: var(--mud-appbar-height, 64px);
    padding-top: 0 !important;
    overflow-x: hidden;
    overflow-y: auto;
    direction: rtl;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(128,128,160,.45) transparent;
}

    .app-shell .main-content::-webkit-scrollbar {
        width: 10px;
    }

    .app-shell .main-content::-webkit-scrollbar-track {
        background: transparent;
    }

    .app-shell .main-content::-webkit-scrollbar-thumb {
        border: 2px solid transparent;
        border-radius: 10px;
        background: rgba(128,128,160,.45);
        background-clip: padding-box;
    }

        .app-shell .main-content::-webkit-scrollbar-thumb:hover {
            background: rgba(128,128,160,.70);
            background-clip: padding-box;
        }


/* ---- Drawer shell ---- */

.side-drawer .mud-drawer-content {
    position: relative; /* برای قرارگیری دستگیرهٔ تغییر عرض */
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: 100%;
    min-height: 0;
    overflow: hidden;
}

.theme-dark .side-drawer .mud-drawer-content {
    background: linear-gradient(180deg, #171c2a 0%, #121722 100%);
}

/* ---- Print ---- */

@media print {
    .app-shell .mud-drawer,
    .app-shell .mud-appbar {
        display: none !important;
    }

    .app-shell .main-content {
        height: auto !important;
        margin-top: 0 !important;
        overflow: visible !important;
    }
}

/* ---- Reduced motion ---- */

@media (prefers-reduced-motion: reduce) {
    .app-shell,
    .app-shell *,
    .app-shell *::before,
    .app-shell *::after {
        animation-duration: 0s !important;
        transition-duration: 0s !important;
        scroll-behavior: auto !important;
    }
}