:root {
    --aibus-navy-950: #06111f;
    --aibus-navy-900: #071b33;
    --aibus-navy-800: #0a2850;
    --aibus-blue: #2f46ff;
    --aibus-blue-600: #2563eb;
    --aibus-cyan: #18b7ff;
    --aibus-green: #22c55e;
    --aibus-mint: #16c784;
    --aibus-red: #ff3d63;
    --aibus-orange: #ff7a38;
    --aibus-ink: #101a33;
    --aibus-muted: #66708a;
    --aibus-line: #dce5f2;
    --aibus-bg: #f6f8fc;
    --aibus-card: #ffffff;
    --aibus-shadow: 0 12px 30px rgba(15, 31, 60, 0.10);
    --aibus-shadow-soft: 0 7px 18px rgba(20, 39, 74, 0.07);
    --aibus-radius: 8px;
}

html,
body {
    font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
    background: var(--aibus-bg);
    color: var(--aibus-ink);
}

.mud-typography,
.mud-button-root,
.mud-input,
.mud-input-control,
.mud-table {
    letter-spacing: 0;
}

.aibus-topbar {
    min-height: 68px;
    padding-inline: 20px;
    border-bottom: 1px solid rgba(220, 229, 242, 0.78);
    background:
        radial-gradient(circle at 75% -10%, rgba(24, 183, 255, 0.28), transparent 34%),
        radial-gradient(circle at 94% 20%, rgba(34, 197, 94, 0.16), transparent 30%),
        rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(18px);
}

.aibus-topbar__brand {
    min-width: 220px;
}

.aibus-topbar__menu {
    color: var(--aibus-ink);
    opacity: 0.82;
}

.aibus-topbar__actions {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.aibus-quick-icon,
.aibus-topbar form .mud-button-root {
    border: 1px solid rgba(188, 202, 224, 0.78);
    background: rgba(255, 255, 255, 0.78);
    color: #24324e;
    box-shadow: 0 6px 16px rgba(36, 50, 78, 0.07);
}

.aibus-building-chip {
    background: linear-gradient(135deg, rgba(47, 70, 255, 0.10), rgba(24, 183, 255, 0.12));
    border-color: rgba(47, 70, 255, 0.28);
    color: #2634d7;
}

.aibus-user-chip {
    background: rgba(255, 255, 255, 0.82);
    border-color: rgba(188, 202, 224, 0.72);
    color: #23304a;
}

.app-drawer {
    border-right: 0;
    background:
        linear-gradient(180deg, rgba(24, 183, 255, 0.11), transparent 22%),
        linear-gradient(155deg, var(--aibus-navy-950) 0%, var(--aibus-navy-900) 48%, #092d6f 100%) !important;
    box-shadow: 12px 0 32px rgba(6, 17, 31, 0.18);
}

.aibus-nav {
    min-height: 100%;
    color: #d7e3f8;
}

.aibus-nav-brand {
    display: flex;
    align-items: center;
    gap: 12px;
   
}

.aibus-nav-brand .app-logo-link {
    width: 100%;
}

.app-logo--nav {
    max-height: 54px;
    max-width: 210px;
}

.app-logo--nav-compact {
    width: 38px;
    height: 38px;
    object-fit: contain;
}

.aibus-nav-brand__mark {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: var(--aibus-radius);
    color: #ffffff;
    font-weight: 800;
    background: linear-gradient(135deg, var(--aibus-cyan), var(--aibus-blue) 55%, var(--aibus-green));
    box-shadow: 0 12px 26px rgba(24, 183, 255, 0.24);
}

.aibus-nav-brand__name {
    color: #ffffff;
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1.1;
}

.aibus-nav-brand__tagline {
    color: rgba(215, 227, 248, 0.74);
    font-size: 0.68rem;
    margin-top: 2px;
}

.app-drawer .nav-section-title,
.app-drawer .mud-nav-group .mud-nav-group-title {
    color: rgba(215, 227, 248, 0.68);
}

.app-drawer .mud-nav-link {
    min-height: 42px;
    color: rgba(235, 244, 255, 0.88);
    border-radius: var(--aibus-radius);
    margin-block: 3px;
    padding-inline: 12px;
}

.app-drawer .mud-nav-link .mud-nav-link-text {
    font-size: 0.88rem;
    font-weight: 580;
}

.app-drawer .mud-nav-link .mud-icon-root,
.app-drawer .mud-nav-group .mud-icon-root {
    color: rgba(235, 244, 255, 0.78);
}

.app-drawer .mud-nav-link:hover {
    background: rgba(255, 255, 255, 0.09);
    color: #ffffff;
}

.app-drawer .mud-nav-link.active,
.app-drawer .mud-nav-link.mud-ripple-active {
    color: #ffffff;
    background: linear-gradient(135deg, #5867ff 0%, #2449ff 48%, #16a8ff 100%);
    box-shadow: 0 10px 24px rgba(47, 70, 255, 0.30);
}

.main-content {
    background:
        radial-gradient(circle at 74% 0%, rgba(24, 183, 255, 0.20), transparent 30%),
        radial-gradient(circle at 94% 3%, rgba(34, 197, 94, 0.15), transparent 27%),
        linear-gradient(180deg, #f8fbff 0%, #f4f7fc 100%);
}

.page-shell {
    padding: 22px 24px;
}

.aibus-page {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.aibus-page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

.aibus-page-title {
    margin: 0;
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    color: #132344;
}

.aibus-page-subtitle {
    margin-top: 4px;
    color: var(--aibus-muted);
}

.aibus-page-actions {
    align-items: center;
    flex-wrap: wrap;
}

.aibus-primary-action {
    min-height: 42px;
    padding-inline: 18px;
    color: #ffffff !important;
    background: linear-gradient(135deg, var(--aibus-green), #18b7ff 48%, var(--aibus-blue)) !important;
    box-shadow: 0 14px 26px rgba(24, 183, 255, 0.25);
}

.aibus-period-button {
    min-height: 42px;
    background: rgba(255, 255, 255, 0.78);
    border-color: rgba(47, 70, 255, 0.22);
}

.voucher-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(180px, 1fr));
    gap: 16px;
}

.voucher-summary-card {
    min-height: 116px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding: 18px;
    border-radius: var(--aibus-radius);
    color: #ffffff;
    box-shadow: var(--aibus-shadow);
    overflow: hidden;
    position: relative;
}

.voucher-summary-card::after {
    content: "";
    position: absolute;
    width: 130px;
    height: 130px;
    right: -46px;
    top: -40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
}

.voucher-summary-card span,
.voucher-summary-card small,
.voucher-summary-card strong,
.voucher-summary-card .mud-icon-root {
    position: relative;
    z-index: 1;
}

.voucher-summary-card span {
    display: block;
    font-size: 0.78rem;
    opacity: 0.92;
}

.voucher-summary-card strong {
    display: block;
    margin-top: 9px;
    font-size: 1.38rem;
    line-height: 1.1;
}

.voucher-summary-card small {
    display: block;
    margin-top: 8px;
    opacity: 0.86;
}

.voucher-summary-card .mud-icon-root {
    width: 46px;
    height: 46px;
    padding: 11px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.26);
    color: #ffffff;
}

.voucher-summary-card--total {
    background: linear-gradient(135deg, #7448ff 0%, #2449ff 100%);
}

.voucher-summary-card--amount {
    background: linear-gradient(135deg, #42de88 0%, #12a979 100%);
}

.voucher-summary-card--income {
    background: linear-gradient(135deg, #18b7ff 0%, #1848ff 100%);
}

.voucher-summary-card--expense {
    background: linear-gradient(135deg, #ff8a38 0%, #ff315d 100%);
}

.aibus-grid-shell {
    border: 1px solid rgba(220, 229, 242, 0.92);
    border-radius: var(--aibus-radius);
    box-shadow: var(--aibus-shadow-soft);
    background: rgba(255, 255, 255, 0.92);
}

.standard-grid-toolbar {
    padding: 16px 18px 4px;
}

.standard-grid-count {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    padding-inline: 12px;
    border-radius: var(--aibus-radius);
    background: #f2f6ff;
    color: #31405d;
}

.standard-grid-titlebar {
    min-width: 0;
}

.standard-grid-size-toggle {
    min-height: 36px;
    border-color: rgba(220, 229, 242, 0.92);
    border-radius: var(--aibus-radius);
    background: #ffffff;
}

.standard-grid-size-toggle .mud-icon-button {
    width: 30px;
    height: 30px;
    min-width: 30px;
}

.aibus-export-button {
    min-height: 38px;
    border-radius: var(--aibus-radius);
    background: #ffffff;
}

.standard-grid-loading-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px solid #dbeafe;
    border-radius: var(--aibus-radius);
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 0.9rem;
    font-weight: 650;
}

.standard-grid-loading {
    display: flex;
    min-height: 180px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 12px;
    padding: 26px;
}

.report-loading-panel {
    margin-bottom: 16px;
    padding: 14px 16px 10px;
    border: 1px solid #dbeafe;
    background: #f8fbff;
}

.report-loading-panel__content {
    min-height: 48px;
}

.report-loading-panel__bar {
    margin-top: 12px;
    border-radius: 999px;
    overflow: hidden;
}

.app-route-loading {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 74px;
    background: rgba(246, 248, 252, 0.54);
    pointer-events: none;
}

.app-startup-loading {
    position: fixed;
    inset: 0;
    z-index: 2500;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 74px 16px 0;
    background: #f6f8fc;
}

.app-startup-loading[hidden],
.aibus-app-ready .app-startup-loading {
    display: none !important;
}

.app-startup-loading__panel {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: min(380px, calc(100vw - 32px));
    padding: 14px 16px;
    border: 1px solid #dbeafe;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 16px 38px rgba(15, 23, 42, 0.16);
}

.app-route-loading__panel {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: min(360px, calc(100vw - 32px));
    padding: 14px 16px;
    border: 1px solid #dbeafe;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 16px 38px rgba(15, 23, 42, 0.16);
}

.app-route-loading__spinner {
    width: 24px;
    height: 24px;
    border: 3px solid #bfdbfe;
    border-top-color: var(--aibus-blue);
    border-radius: 999px;
    animation: aibus-spin 0.8s linear infinite;
}

.app-route-loading__title {
    color: #0f172a;
    font-weight: 750;
    line-height: 1.25;
}

.app-route-loading__text {
    color: #64748b;
    font-size: 0.82rem;
    line-height: 1.35;
}

@keyframes aibus-spin {
    to {
        transform: rotate(360deg);
    }
}

.aibus-data-table .mud-table-head th {
    background: #f4f7ff;
    color: #2634d7;
    padding: 12px 14px;
    border-bottom: 1px solid var(--aibus-line);
}

.aibus-data-table .mud-table-head .mud-button-root {
    min-height: 28px;
    padding-inline: 0;
    font-size: 0.76rem;
    font-weight: 800;
}

.aibus-data-table .mud-table-head .mud-input-control {
    margin-top: 6px;
}

.aibus-data-table .mud-table-body td {
    padding: 14px;
    color: #22314d;
    border-bottom: 1px solid #e8eef7;
}

.standard-grid-shell--fit .mud-table-root {
    width: 100%;
    min-width: 100%;
    table-layout: fixed;
}

.standard-grid-shell--wide .mud-table-root {
    width: max-content;
    min-width: max-content;
    table-layout: auto;
}

.standard-grid-shell--fit .mud-table-head th,
.standard-grid-shell--fit .mud-table-body td {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
    padding-inline: 7px;
}

.standard-grid-shell--fit .mud-table-head th .mud-button-root,
.standard-grid-shell--fit .mud-table-head th .mud-input-control {
    max-width: 100%;
    min-width: 0;
}

.standard-grid-shell--fit .mud-table-head th .mud-button-root {
    white-space: normal;
    padding-inline: 4px;
}

.standard-grid-shell--wide .mud-table-head th,
.standard-grid-shell--wide .mud-table-body td {
    white-space: nowrap;
}

.standard-grid-shell--wide .mud-table-head th .mud-input-control {
    width: 72px;
    min-width: 72px;
    max-width: 72px;
}

.aibus-data-table .mud-table-body tr:nth-child(even) {
    background: #FFFBEB !important;
}

.aibus-data-table .mud-table-body tr:hover {
    background: #A4F4CF !important;
}

.voucher-row-actions {
    justify-content: flex-end;
    min-width: 78px;
}

.aibus-row-action {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: #f3f6ff;
}

.aibus-row-action--edit {
    color: var(--aibus-blue) !important;
}

.aibus-row-action--delete {
    color: var(--aibus-red) !important;
    background: #fff1f4;
}

.aibus-dialog .mud-dialog {
    border-radius: var(--aibus-radius);
}

.voucher-dialog-title {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #14233f;
    font-weight: 800;
}

.voucher-dialog-title .mud-icon-root {
    width: 38px;
    height: 38px;
    padding: 9px;
    border-radius: var(--aibus-radius);
    color: #ffffff;
    background: linear-gradient(135deg, var(--aibus-blue), var(--aibus-cyan));
}

.voucher-form {
    padding-top: 4px;
}

.voucher-tabs {
    padding: 8px;
    border: 1px solid #e5ecf6;
    border-radius: var(--aibus-radius);
    background: #f8fbff;
}

.voucher-tabs .mud-tabs-toolbar {
    background: transparent;
}

.voucher-tabs .mud-tab {
    min-height: 58px;
    border-radius: var(--aibus-radius);
    color: #42516f;
    font-size: 0.78rem;
    font-weight: 700;
}

.voucher-tabs .mud-tab.mud-tab-active {
    color: var(--aibus-blue);
    background: #ffffff;
    box-shadow: 0 8px 16px rgba(31, 59, 116, 0.08);
}

.voucher-tabs .mud-tab .mud-icon-root {
    color: currentColor;
}

.voucher-form-grid {
    row-gap: 12px;
}

.aibus-field .mud-input-outlined-border,
.aibus-grid-shell .mud-input-outlined-border {
    border-color: #d8e2f0;
    border-radius: var(--aibus-radius);
}

.aibus-field .mud-input-root,
.aibus-field input,
.aibus-field textarea,
.aibus-field .mud-select {
    font-size: 0.86rem !important;
}

.aibus-field.mud-input-control,
.voucher-form .mud-input-control {
    margin-top: 0;
    margin-bottom: 4px;
}

.aibus-field .mud-input-label,
.voucher-form .mud-input-label {
    font-size: 0.76rem;
    font-weight: 750;
    color: #34425f;
}

.aibus-field .mud-input-control-input-container:focus-within .mud-input-outlined-border,
.voucher-form .mud-input-control-input-container:focus-within .mud-input-outlined-border {
    border-color: var(--aibus-cyan);
    box-shadow: 0 0 0 3px rgba(24, 183, 255, 0.12);
}

.aibus-save-button {
    min-width: 132px;
    color: #ffffff !important;
    background: linear-gradient(135deg, var(--aibus-red), #ff527b 45%, var(--aibus-orange)) !important;
    box-shadow: 0 12px 22px rgba(255, 61, 99, 0.22);
}

.aibus-cancel-button {
    min-width: 108px;
    color: #34425f;
    border-color: #d1dbea;
}

.mud-dialog .mud-dialog-actions {
    gap: 10px;
}

@media (max-width: 1180px) {
    .voucher-summary-grid {
        grid-template-columns: repeat(2, minmax(180px, 1fr));
    }
}

@media (max-width: 760px) {
    .aibus-topbar {
        min-height: 56px;
        padding-inline: 10px;
        flex-wrap: nowrap !important;
    }

    .aibus-topbar__brand {
        flex: 0 1 auto;
        min-width: 0;
    }

    .app-logo--topbar {
        width: 34px;
        height: 34px;
        max-width: 34px;
        max-height: 34px;
        object-fit: contain;
    }

    .app-brand-title,
    .app-brand-subtitle {
        display: none !important;
    }

    .aibus-topbar__actions {
        width: auto !important;
        flex: 0 0 auto;
        flex-wrap: nowrap;
        gap: 4px !important;
        margin-left: auto;
    }

    .aibus-quick-icon,
    .aibus-building-chip {
        display: none !important;
    }

    .aibus-user-chip {
        width: 34px;
        min-width: 34px;
        max-width: 34px;
        padding-inline: 0 !important;
        justify-content: center;
    }

    .aibus-user-chip .mud-chip-content {
        display: none;
    }

    .aibus-topbar form .mud-button-root {
        width: 34px;
        min-width: 34px;
        padding-inline: 0 !important;
    }

    .aibus-topbar form .mud-button-label {
        display: none;
    }

    .aibus-page-actions {
        width: 100%;
        align-items: stretch;
        gap: 8px !important;
    }

    .aibus-page-actions .mud-button-root {
        flex: 1 1 100%;
        min-width: 0;
    }

    .voucher-summary-grid {
        grid-template-columns: 1fr;
    }

    .voucher-page .mud-paper {
        padding: 12px !important;
    }

    .voucher-main-tabs .mud-tabs-toolbar,
    .voucher-tabs .mud-tabs-toolbar {
        overflow-x: hidden;
        overflow-y: visible;
    }

    .voucher-main-tabs .mud-tabs-toolbar-inner,
    .voucher-tabs .mud-tabs-toolbar-inner {
        width: 100%;
        min-width: 0;
        flex-wrap: wrap;
        gap: 4px;
    }

    .voucher-main-tabs .mud-tabs-tabbar,
    .voucher-tabs .mud-tabs-tabbar,
    .voucher-main-tabs .mud-tabs-tabbar-wrapper,
    .voucher-tabs .mud-tabs-tabbar-wrapper {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        overflow: visible;
    }

    .voucher-main-tabs .mud-tabs-tabbar-wrapper,
    .voucher-tabs .mud-tabs-tabbar-wrapper {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
    }

    .voucher-main-tabs .mud-tooltip-root,
    .voucher-tabs .mud-tooltip-root {
        flex: 1 1 128px;
        min-width: 0;
        max-width: 100%;
    }

    .voucher-main-tabs .mud-tab,
    .voucher-tabs .mud-tab {
        flex: 1 1 128px;
        min-width: 0;
        width: 100%;
        min-height: 40px;
        padding: 8px 10px !important;
        white-space: normal;
    }

    .voucher-tabs {
        margin-bottom: 12px !important;
        padding: 4px;
    }

    .voucher-form-grid {
        row-gap: 8px;
    }

    .voucher-page .mud-select,
    .voucher-page .mud-input-control,
    .voucher-page .mud-button-root,
    .voucher-dialog .mud-select,
    .voucher-dialog .mud-input-control {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .page-shell {
        padding: 16px;
    }
}

.desktop-version-page .mud-alert {
    border-radius: var(--aibus-radius);
}

.desktop-version-card,
.desktop-version-kpi {
    border-color: rgba(220, 229, 242, 0.92) !important;
    border-radius: var(--aibus-radius) !important;
    background: rgba(255, 255, 255, 0.94) !important;
    box-shadow: var(--aibus-shadow-soft);
}

.desktop-version-kpi {
    min-height: 128px;
}

.desktop-version-kpi span {
    display: block;
    color: var(--aibus-muted);
    font-size: 0.78rem;
    font-weight: 800;
}

.desktop-version-kpi strong {
    display: block;
    margin-top: 8px;
    color: #132344;
    font-size: 1.32rem;
}

.desktop-version-kpi small,
.desktop-version-kpi a {
    display: block;
    margin-top: 8px;
    word-break: break-all;
}

.desktop-version-setup {
    width: 100%;
    gap: 12px;
    flex-wrap: wrap;
}

.desktop-version-download-button {
    background: linear-gradient(135deg, var(--aibus-green), #18b7ff 52%, var(--aibus-blue)) !important;
    color: #fff !important;
    box-shadow: 0 12px 28px rgba(24, 183, 255, 0.24);
}

.desktop-version-setup-card {
    border-color: rgba(24, 183, 255, 0.28) !important;
}

.mud-table .mud-progress-linear {
    border-radius: 999px;
}

.mud-table-loading,
.mud-table .mud-table-loading {
    background: linear-gradient(135deg, rgba(24, 183, 255, 0.08), rgba(255, 61, 99, 0.06));
}