:root {
    --app-bg: #f3f5f8;
    --app-surface: #ffffff;
    --app-surface-soft: #f7f9fc;
    --app-border: #d8dee8;
    --app-border-strong: #bdc7d6;
    --app-text: #17202f;
    --app-muted: #667085;
    --app-primary: #2563eb;
    --app-primary-dark: #1e40af;
    --app-primary-soft: #e7efff;
    --app-accent: #0f766e;
    --app-accent-soft: #dff7f3;
    --app-success: #16803c;
    --app-warning: #b7791f;
    --app-danger: #c83232;
    --app-shadow: 0 8px 22px rgba(16, 24, 40, 0.08);
    --app-shadow-soft: 0 1px 4px rgba(16, 24, 40, 0.08);
    --app-radius: 8px;
    --app-radius-sm: 6px;
}

html, body {
    min-height: 100%;
    margin: 0;
    font-family: Inter, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background: var(--app-bg);
    color: var(--app-text);
}

body {
    line-height: 1.45;
    font-size: 14px;
}

a {
    color: var(--app-primary);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

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

.mud-typography-h5 {
    font-size: 1.18rem !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
}

.mud-typography-h6 {
    font-size: 1rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
}

.mud-typography-subtitle1 {
    font-size: 0.92rem !important;
    line-height: 1.35 !important;
}

.mud-typography-subtitle2,
.mud-typography-body2 {
    font-size: 0.82rem !important;
}

.mud-typography-caption {
    font-size: 0.72rem !important;
}

.mud-button-root {
    min-height: 34px;
    border-radius: 7px;
    padding-inline: 12px;
    font-size: 0.8rem;
    font-weight: 650;
    letter-spacing: 0;
    text-transform: none;
}

.mud-icon-button {
    width: 34px;
    height: 34px;
    padding: 6px;
}

.mud-chip {
    height: 28px;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 650;
}

.mud-input-control {
    margin-top: 0;
}

.mud-input-label {
    color: #344054;
    font-size: 0.78rem;
    font-weight: 650;
}

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

.mud-input-outlined .mud-input-slot,
.mud-input-outlined input.mud-input-root,
.mud-input-outlined textarea.mud-input-root {
    padding-top: 9px;
    padding-bottom: 9px;
}

.mud-input-outlined .mud-input-outlined-border {
    border-color: #cfd8e6;
    border-radius: 7px;
}

.mud-input-outlined:hover .mud-input-outlined-border {
    border-color: #9fb1ca;
}

.app-bar {
    position: sticky;
    top: 0;
    z-index: 11;
    border-bottom: 1px solid var(--app-border);
    background: rgba(255, 255, 255, 0.94) !important;
    backdrop-filter: blur(12px);
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.03);
}

.app-bar .mud-button-root {
    min-height: 32px;
    border-radius: 999px;
}

.app-brand-wrap {
    min-width: 0;
}

.app-brand-title {
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.15;
}

.app-brand-subtitle {
    font-size: 0.7rem;
    color: var(--app-muted);
}

.app-building-chip {
    background: var(--app-primary-soft);
    color: var(--app-primary-dark);
    border: 1px solid #bfd2ff;
}

.app-user-chip {
    background: var(--app-accent-soft);
    color: #0f5e58;
    border: 1px solid #9ee0d6;
}

.app-drawer {
    border-right: 1px solid var(--app-border);
    background: #fbfcfe;
    width: 268px;
}

.app-drawer .mud-navmenu {
    padding: 12px 10px 14px;
}

.app-drawer .mud-navmenu > .mud-nav-link,
.app-drawer .mud-navmenu > .mud-nav-group {
    margin-bottom: 2px;
}

.app-drawer .mud-nav-link {
    border-radius: 7px;
    margin: 1px 0;
    padding: 8px 10px;
    color: #334155;
    font-size: 0.84rem;
}

.app-drawer .mud-nav-link:hover {
    background: #eef5ff;
    color: #0f172a;
}

.app-drawer .mud-nav-link.active,
.app-drawer .mud-nav-link.mud-ripple-active {
    background: linear-gradient(90deg, var(--app-primary-soft), #f4f8ff);
    color: var(--app-primary-dark);
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--app-primary);
}

.app-drawer .mud-nav-group {
    border-radius: 8px;
}

.app-drawer .mud-nav-group .mud-collapse-container {
    margin-top: 6px;
}

.app-drawer .mud-nav-group .mud-nav-group-title {
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #475569;
    padding: 7px 10px;
}

.app-drawer .mud-nav-group .mud-nav-group-items {
    padding-left: 6px;
}

.nav-section-title {
    color: #64748b;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 10px 10px 3px;
}

.main-content {
    min-height: 100vh;
    background:
        linear-gradient(180deg, rgba(37, 99, 235, 0.035) 0%, rgba(15, 118, 110, 0.025) 170px, transparent 360px),
        var(--app-bg);
}

.page-shell {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px;
}

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

.page-header__title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
}

.page-header__subtitle {
    margin-top: 4px;
    max-width: 72ch;
    color: var(--app-muted);
}

.page-header__actions,
.toolbar-row,
.action-row,
.toolbar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.section-title {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0;
}

.section-subtitle,
.muted-text {
    color: var(--app-muted);
}

.app-card,
.login-panel,
.report-card,
.report-group-card,
.building-card,
.standard-grid-shell {
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    box-shadow: var(--app-shadow-soft);
}

.app-card {
    overflow: hidden;
}

.app-card:hover,
.report-card:hover,
.building-card:hover {
    border-color: #c5d3e7;
    box-shadow: 0 4px 14px rgba(16, 24, 40, 0.08);
}

.surface-card {
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    box-shadow: var(--app-shadow-soft);
}

.login-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
    background:
        linear-gradient(135deg, #f7faff 0%, #eef7f5 100%);
}

.login-panel {
    width: min(430px, 100%);
    padding: 26px;
}

.login-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.login-brand__icon {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--app-primary) 0%, var(--app-accent) 100%);
    color: #ffffff;
    box-shadow: 0 10px 20px rgba(37, 99, 235, 0.18);
}

.login-brand__title {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.2;
}

.login-brand__subtitle {
    color: var(--app-muted);
    font-size: 0.8rem;
}

.building-page {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.building-card {
    height: 100%;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.building-card__title {
    font-size: 0.92rem;
    font-weight: 700;
}

.building-card__meta {
    color: var(--app-muted);
    font-size: 0.8rem;
}

.building-card__footer {
    margin-top: auto;
    display: flex;
    justify-content: flex-end;
}

.building-create-panel {
    padding: 18px;
}

.building-create-panel .mud-textfield,
.building-create-panel .mud-select {
    background: transparent;
}

.standard-grid-shell {
    overflow: hidden;
}

.standard-grid-toolbar {
    padding: 12px 14px 0;
}

.standard-grid-count {
    color: var(--app-muted);
    font-size: 0.78rem;
    font-weight: 600;
}

.standard-grid-shell .mud-table {
    background: transparent;
}

.standard-grid-shell .mud-table-container {
    border-radius: 0 0 var(--app-radius) var(--app-radius);
    overflow: hidden;
}

.standard-grid-shell .mud-table-head th {
    background: #eef3f9;
    color: #24364f;
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: none;
    border-bottom: 1px solid var(--app-border);
    padding: 9px 10px 8px;
    vertical-align: bottom;
}

.standard-grid-shell .mud-table-body td {
    border-bottom: 1px solid #e7edf4;
    padding: 8px 10px;
    font-size: 0.82rem;
}

.standard-grid-shell .mud-table-body tr:hover {
    background: #f3f8ff;
}

.standard-grid-shell .mud-table-pager {
    background: #f8fafc;
    border-top: 1px solid var(--app-border);
}

.standard-grid-empty,
.standard-grid-loading {
    min-height: 132px;
    display: grid;
    place-items: center;
    padding: 22px 14px;
    color: var(--app-muted);
    text-align: center;
}

.report-center-shell {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.report-group-card {
    padding: 16px;
}

.report-card {
    height: 100%;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.report-card--inactive {
    border-style: dashed;
    opacity: 0.96;
}

.report-card__header {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
}

.report-card__title {
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.25;
}

.report-card__text {
    color: var(--app-muted);
    font-size: 0.78rem;
}

.report-card__footer {
    margin-top: auto;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.report-toolbar {
    padding: 12px;
}

.report-toolbar .mud-button-root {
    min-height: 34px;
}

.report-preview-shell {
    overflow: auto;
    padding: 16px;
    background: linear-gradient(180deg, #dde5ee 0%, #edf2f7 100%);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
}

.mud-dialog {
    border-radius: 10px;
    box-shadow: var(--app-shadow);
}

.mud-dialog .mud-dialog-title {
    padding: 16px 18px 8px;
    font-weight: 700;
}

.mud-dialog .mud-dialog-content {
    padding: 0 18px 8px;
}

.mud-dialog .mud-dialog-actions {
    padding: 12px 18px 18px;
}

.print-report-page {
    background: white;
    color: #1f2933;
    margin: 0 auto;
    padding: 10mm;
    border-radius: 8px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14);
    font-family: Arial, Helvetica, sans-serif;
    font-size: var(--report-font-size);
}

.print-report-page.portrait {
    width: 210mm;
    min-height: 297mm;
}

.print-report-page.landscape {
    width: 297mm;
    min-height: 210mm;
}

.print-report-header {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid #4b5563;
    padding-bottom: 8px;
    margin-bottom: 10px;
}

.print-report-header h1 {
    font-size: 15px;
    margin: 0 0 4px;
    line-height: 1.2;
    letter-spacing: 0;
}

.print-report-meta,
.print-report-date,
.print-report-footer {
    font-size: 8px;
    color: #4b5563;
}

.print-report-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.print-report-table.content-width {
    table-layout: auto;
}

.print-report-table th,
.print-report-table td {
    border: 1px solid #cbd5e1;
    padding: 2px 4px;
    height: var(--report-row-height);
    vertical-align: middle;
    overflow-wrap: anywhere;
}

.print-report-table td.wrap {
    white-space: normal;
}

.print-report-table td:not(.wrap) {
    white-space: nowrap;
}

.print-report-table th {
    background: #eef2f7;
    color: #111827;
    font-weight: 700;
    text-align: left;
}

.print-report-table .money {
    text-align: right;
    white-space: nowrap;
}

.print-report-table .date {
    white-space: nowrap;
}

.print-report-table tr.report-row-payment td {
    background: #e7f4df;
}

.print-report-table tr.report-row-icra td {
    background: #f9d7e6;
}

.print-report-table tr.report-row-total td {
    background: #e5e7eb;
    font-weight: 700;
}

.print-report-table .movement-balance {
    background: #14532d !important;
    color: #ffffff;
    font-weight: 700;
}

.print-report-table .money-positive {
    color: #166534;
    font-weight: 600;
}

.print-report-table .money-negative {
    color: #b91c1c;
    font-weight: 600;
}

.print-report-footer {
    margin-top: 8px;
    text-align: center;
}

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred.";
}

#blazor-error-ui {
    background: #fff3cd;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, .2);
    display: none;
    left: 0;
    padding: .6rem 1.25rem .7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

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

@media (max-width: 1100px) {
    .page-shell {
        padding: 16px;
    }

    .app-drawer {
        width: 272px;
    }

    .print-report-page.portrait,
    .print-report-page.landscape {
        width: 100%;
        min-height: auto;
    }
}

@media (max-width: 768px) {
    .app-bar {
        flex-wrap: wrap;
    }

    .page-header__actions,
    .toolbar-row,
    .action-row,
    .toolbar {
        width: 100%;
    }

    .login-panel {
        padding: 24px;
    }

    .report-preview-shell {
        padding: 12px;
    }
}
    font-size: 0.84rem;