/*
 * SmartBudget design layer (step 1.3, docs/decisions/0003-design.md).
 * Sits on top of a Radzen theme: only tokens the theme does not provide, the app shell and a few
 * budget-specific patterns. Colours come from theme variables so every Radzen theme (and its dark
 * variant) keeps working.
 */

:root {
    /* Group palette: distinct hues that stay readable on light and dark backgrounds. */
    --sb-group-1: #2f6fde;
    --sb-group-2: #c97a14;
    --sb-group-3: #1f9d74;
    --sb-group-4: #8b5cf6;
    --sb-group-5: #d9468f;
    --sb-group-6: #0e9fb5;

    /* Theme status colours are for fills. As text they fail contrast (green 2.5:1), so they lean towards the text colour,
       which darkens them on light themes and lightens them on dark ones. Keep 4.5:1 in every theme. */
    --sb-positive: color-mix(in srgb, var(--rz-success) 40%, var(--rz-text-color));
    --sb-negative: color-mix(in srgb, var(--rz-danger) 50%, var(--rz-text-color));
    --sb-primary-text: color-mix(in srgb, var(--rz-primary) 60%, var(--rz-text-color));
    --sb-primary-fill: color-mix(in srgb, var(--rz-primary) 70%, black);
    --sb-radius: 12px;
    --sb-gap: 1rem;
    --sb-header-height: 3.5rem;
    --sb-bottom-nav-height: 4rem;
    --sb-content-max: 1200px;
}

body {
    background: var(--rz-body-background-color, var(--rz-base-background-color));
    color: var(--rz-text-color);
}

/* ---- Shell ------------------------------------------------------------------------------------ */

.sb-header {
    height: var(--sb-header-height);
}

.sb-header-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    height: 100%;
    padding: 0 0.75rem;
}

.sb-header-spacer {
    flex: 1;
}

.sb-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    font-size: 1.1rem;
    color: inherit;
    text-decoration: none;
}

.sb-brand-mark {
    flex: none;
}

.sb-user {
    max-width: 14rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.875rem;
    opacity: 0.85;
}

.sb-logout {
    margin: 0;
}

.sb-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

    .sb-icon-button:hover {
        background: var(--rz-base-200, rgba(0, 0, 0, 0.06));
    }

    .sb-icon-button:focus-visible {
        outline: 2px solid var(--rz-primary);
        outline-offset: 2px;
    }

.sb-header-link {
    color: inherit;
}

.sb-content {
    max-width: var(--sb-content-max);
    margin: 0 auto;
    padding: 1.25rem 1rem 2rem;
}

.sb-bottom-nav {
    display: none;
}

/* Phones: no sidebar; bottom navigation with a prominent "new period" action. */
@media (max-width: 768px) {
    .sb-sidebar,
    .sb-sidebar-toggle {
        display: none !important;
    }

    .sb-user {
        display: none;
    }

    .sb-body {
        margin-left: 0 !important;
        padding-bottom: calc(var(--sb-bottom-nav-height) + env(safe-area-inset-bottom));
    }

    .sb-content {
        padding: 1rem 0.75rem 1.5rem;
    }

    .sb-bottom-nav {
        position: fixed;
        inset: auto 0 0 0;
        z-index: 3;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        align-items: center;
        height: calc(var(--sb-bottom-nav-height) + env(safe-area-inset-bottom));
        padding-bottom: env(safe-area-inset-bottom);
        background: var(--rz-base-background-color);
        border-top: 1px solid var(--rz-base-300, rgba(0, 0, 0, 0.12));
    }

    .sb-bottom-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.15rem;
        height: 100%;
        font-size: 0.7rem;
        color: var(--rz-text-secondary-color);
        text-decoration: none;
    }

        .sb-bottom-item.active {
            color: var(--rz-primary);
            font-weight: 600;
        }

    .sb-bottom-primary .rzi {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 3rem;
        height: 3rem;
        border-radius: 50%;
        background: var(--rz-primary);
        color: var(--rz-on-primary, #fff);
        font-size: 1.75rem;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }
}

/* ---- Page patterns ---------------------------------------------------------------------------- */

.sb-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: var(--sb-gap);
}

    .sb-page-header h1 {
        margin: 0;
        font-size: 1.6rem;
        font-weight: 700;
    }

.sb-subtitle {
    margin: 0.15rem 0 0;
    color: var(--rz-text-secondary-color);
    font-size: 0.9rem;
}

.sb-grid {
    display: grid;
    gap: var(--sb-gap);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
}

.sb-card {
    border-radius: var(--sb-radius) !important;
}

/* Headline numbers: two per row on phones (balance spans both), one row on wide screens. */
.sb-stats {
    display: grid;
    gap: var(--sb-gap);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}

@media (max-width: 768px) {
    .sb-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
    }

    .sb-stats > * {
        min-width: 0;
    }

    .sb-stats .rz-card {
        padding: 0.75rem 0.9rem;
    }

    .sb-stat-wide {
        grid-column: 1 / -1;
    }

    .sb-stats .sb-money-lg {
        font-size: 1.1rem;
    }

    .sb-stats .sb-label {
        font-size: 0.65rem;
    }

    .sb-hide-phone {
        display: none !important;
    }
}

/* Money: tabular digits so columns line up; the sign/label carries meaning, colour reinforces it. */
.sb-money {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.sb-money-lg {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
}

.sb-positive {
    color: var(--sb-positive);
}

.sb-negative {
    color: var(--sb-negative);
}

.sb-muted {
    color: var(--rz-text-secondary-color);
}

.sb-label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--rz-text-secondary-color);
}

.sb-group-dot {
    display: inline-block;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    flex: none;
}

/* Planned-vs-committed bar: the fill is the committed share of the planned amount, capped at 100%. */
.sb-meter {
    position: relative;
    height: 0.5rem;
    border-radius: 999px;
    background: var(--rz-base-200, rgba(0, 0, 0, 0.08));
    overflow: hidden;
}

.sb-meter-fill {
    height: 100%;
    border-radius: inherit;
}

.sb-meter-over .sb-meter-fill {
    background: repeating-linear-gradient(45deg, var(--sb-negative), var(--sb-negative) 6px, color-mix(in srgb, var(--sb-negative) 75%, white) 6px, color-mix(in srgb, var(--sb-negative) 75%, white) 12px) !important;
}

.sb-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .sb-list > li {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.6rem 0;
        border-bottom: 1px solid var(--rz-base-200, rgba(0, 0, 0, 0.08));
    }

        .sb-list > li:last-child {
            border-bottom: 0;
        }

/* Text that opens an editor: looks like the label it replaces, wraps instead of truncating. */
.sb-link-button {
    display: block;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    overflow-wrap: anywhere;
    cursor: pointer;
}

    .sb-link-button:hover {
        text-decoration: underline;
    }

    .sb-link-button:focus-visible {
        outline: 2px solid var(--rz-primary);
        outline-offset: 2px;
    }

.sb-percent-input {
    width: 6.5rem;
    flex: none;
}

@media (max-width: 768px) {
    .sb-percent-input {
        width: 4.5rem;
    }

        .sb-percent-input .rz-numeric-button {
            display: none;
        }
}

.sb-grow {
    flex: 1;
    min-width: 0;
}

.sb-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---- Blazor error UI (moved from the old layout) ------------------------------------------------ */

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

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

/* Report tables scroll inside their card on a phone, never the page. */
.sb-table-wrap {
    overflow-x: auto;
    margin-top: 0.5rem;
}

.sb-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

    .sb-table th,
    .sb-table td {
        padding: 0.45rem 0.5rem;
        border-bottom: 1px solid var(--rz-base-300);
        text-align: left;
        white-space: nowrap;
        font-weight: 400;
    }

    .sb-table thead th {
        color: var(--rz-text-secondary-color);
        font-size: 0.8rem;
    }

    .sb-table tbody tr:last-child th,
    .sb-table tbody tr:last-child td {
        border-bottom: none;
    }

    .sb-table .sb-table-num {
        text-align: right;
    }

/* Accessibility (step 4.3). */
.sb-skip-link {
    position: absolute;
    top: -4rem;
    left: 0.5rem;
    z-index: 2000;
    padding: 0.5rem 1rem;
    border-radius: 0 0 8px 8px;
    background: var(--rz-base-background-color);
    color: var(--rz-text-color);
}

    .sb-skip-link:focus {
        top: 0;
    }

.sb-content:focus {
    outline: none;
}

.sb-content a:not(.rz-button) {
    color: var(--sb-primary-text);
}

/* Some themes ship white text on a light primary colour. */
.rz-button.rz-primary.rz-variant-filled:not(:disabled) {
    background-color: var(--sb-primary-fill);
    color: #fff;
}

.rz-button.rz-primary.rz-variant-text,
.rz-button.rz-primary.rz-variant-outlined,
.rz-badge.rz-badge-primary.rz-variant-outlined {
    color: var(--sb-primary-text) !important;
}

/* The selected option of a select bar sits on a tint of the primary colour. */
.rz-selectbar .rz-button.rz-state-active {
    color: var(--rz-text-color) !important;
}

.rz-form-field-label {
    color: var(--rz-text-secondary-color) !important;
}

.rz-sidebar .rz-navigation-item-text,
.rz-sidebar .rz-navigation-item-icon {
    color: var(--rz-text-color) !important;
}

/* Themes disagree on the menu's backgrounds, some dark and some light; these keep the text above readable in all of them. */
.rz-sidebar,
.rz-sidebar .rz-panel-menu,
.rz-sidebar .rz-navigation-item,
.rz-sidebar .rz-navigation-item-wrapper,
.rz-sidebar .rz-navigation-item-link {
    background-color: var(--rz-base-background-color) !important;
}

.rz-sidebar .rz-navigation-item-wrapper-active,
.rz-sidebar .rz-navigation-item-wrapper-active .rz-navigation-item-link {
    background-color: color-mix(in srgb, var(--rz-primary) 18%, var(--rz-base-background-color)) !important;
}

.sb-content a:focus-visible,
.sb-skip-link:focus-visible {
    outline: 2px solid var(--rz-primary);
    outline-offset: 2px;
}

/* Same contrast rule for text on the theme's status colours. */
.rz-color-danger {
    color: var(--sb-negative) !important;
}

.rz-button.rz-danger.rz-variant-text {
    color: var(--sb-negative) !important;
}

.rz-alert.rz-warning,
.rz-alert.rz-warning .rz-alert-content,
.rz-alert.rz-warning .rz-alert-icon {
    color: #1f1f1f;
}

.rz-alert.rz-danger {
    background-color: color-mix(in srgb, var(--rz-danger) 75%, black);
}

.rz-alert.rz-info {
    background-color: color-mix(in srgb, var(--rz-info) 75%, black);
}

.rz-alert.rz-success {
    background-color: color-mix(in srgb, var(--rz-success) 75%, black);
}

.rz-steps .rz-steps-number {
    background-color: var(--rz-text-color) !important;
    color: var(--rz-base-background-color) !important;
}

.rz-steps .rz-steps-title {
    color: var(--rz-text-color) !important;
}

.rz-steps .rz-state-highlight .rz-steps-title {
    font-weight: 700;
    text-decoration: underline;
}

/* Paid ticks are tapped often: at least 24 by 24 pixels. */
.sb-list .rz-chkbox-box {
    width: 1.5rem;
    height: 1.5rem;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}