/* T2oU-CashFlow shared visual foundation */

:root {
    color-scheme: light;

    --color-bg: #f5f7fb;
    --color-surface: #ffffff;
    --color-surface-soft: #f8fafc;
    --color-text: #10233f;
    --color-text-muted: #617087;
    --color-text-faint: #8895a7;

    --color-primary: #173b73;
    --color-primary-accent: #315f9c;
    --color-primary-soft: #eaf1fb;

    --color-income: #247247;
    --color-income-soft: #effaf2;
    --color-expense: #9f2d25;
    --color-expense-soft: #fff1f0;
    --color-benefit: #6a4fb3;
    --color-benefit-soft: #f8f5ff;
    --color-warning: #815f00;
    --color-warning-soft: #fff5d9;

    --color-border: #dce4ef;
    --color-border-strong: #cbd6e5;
    --color-focus: #315f9c;

    --page-max-width: 75rem;
    --page-gutter: clamp(1rem, 3vw, 2rem);

    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;

    --radius-xs: .45rem;
    --radius-sm: .65rem;
    --radius-md: .8rem;
    --radius-lg: 1rem;
    --radius-xl: 1.25rem;
    --radius-pill: 999px;

    --shadow-sm: 0 6px 18px rgba(16, 35, 63, .06);
    --shadow-md: 0 12px 32px rgba(16, 35, 63, .08);
    --shadow-lg: 0 20px 52px rgba(16, 35, 63, .14);

    --font-sans: Inter, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-sans);
    font-synthesis: none;
    text-rendering: optimizeLegibility;
}

html {
    background: var(--color-bg);
    min-height: 100%;
}

body {
    background: var(--color-bg);
    color: var(--color-text);
    margin: 0;
    min-height: 100dvh;
    min-width: 320px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

button,
input,
select,
textarea {
    font: inherit;
}

button,
summary {
    touch-action: manipulation;
}

a {
    color: inherit;
}

::selection {
    background: #d8e5f7;
    color: var(--color-text);
}

:focus-visible {
    outline: 3px solid rgba(49, 95, 156, .32);
    outline-offset: 2px;
}

h1,
h2,
h3,
p {
    margin-top: 0;
}

h1 {
    color: var(--color-text);
    font-size: clamp(2rem, 5vw, 2.65rem);
    letter-spacing: -.035em;
    line-height: 1.06;
}

h2 {
    color: var(--color-text);
    letter-spacing: -.02em;
    line-height: 1.15;
}

p {
    line-height: 1.55;
}

small {
    line-height: 1.35;
}

.foundation-shell {
    box-sizing: border-box;
    margin: 0 auto;
    max-width: 44rem;
    min-height: 100dvh;
    padding: clamp(2rem, 8vw, 4.5rem) var(--page-gutter);
}

.foundation-shell h1 {
    color: var(--color-primary);
    font-size: clamp(2.1rem, 10vw, 3rem);
    line-height: 1.08;
}

.foundation-shell p:not(.eyebrow) {
    color: var(--color-text-muted);
    font-size: 1.05rem;
    line-height: 1.6;
}

.eyebrow {
    color: var(--color-primary-accent);
    font-size: .78rem;
    font-weight: 850;
    letter-spacing: .075em;
    text-transform: uppercase;
}

/* Shared primitives introduced by T2CF-10A.
   Existing pages migrate to these progressively in T2CF-10B..D. */

.app-page {
    margin: 0 auto;
    max-width: var(--page-max-width);
    padding: clamp(1.25rem, 3vw, 2rem) var(--page-gutter) 3rem;
}

.page-header {
    align-items: flex-start;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: 1.4rem;
}

.page-header h1 {
    margin-bottom: .45rem;
}

.page-kicker {
    color: var(--color-primary-accent);
    font-size: .76rem;
    font-weight: 850;
    letter-spacing: .075em;
    margin-bottom: .35rem;
    text-transform: uppercase;
}

.page-subtitle {
    color: var(--color-text-muted);
    margin-bottom: 0;
    max-width: 48rem;
}

.page-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
}

.ui-panel,
.ui-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.ui-panel {
    box-shadow: var(--shadow-sm);
    padding: 1rem;
}

.ui-card {
    padding: 1rem;
}

.ui-summary-grid {
    display: grid;
    gap: .8rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ui-kpi {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    display: grid;
    gap: .35rem;
    min-width: 0;
    padding: 1rem;
}

.ui-kpi > span,
.ui-kpi > small {
    color: var(--color-text-muted);
}

.ui-kpi > strong {
    color: var(--color-text);
    font-size: clamp(1.2rem, 3vw, 1.65rem);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.025em;
}

.ui-button {
    align-items: center;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: inline-flex;
    font-weight: 800;
    justify-content: center;
    min-height: 2.75rem;
    padding: .65rem .9rem;
    text-decoration: none;
}

.ui-button:disabled {
    cursor: not-allowed;
    opacity: .55;
}

.ui-button.primary {
    background: var(--color-primary);
    color: #fff;
}

.ui-button.primary:hover:not(:disabled) {
    background: #12325f;
}

.ui-button.secondary {
    background: var(--color-surface);
    border-color: var(--color-border-strong);
    color: var(--color-primary);
}

.ui-button.secondary:hover:not(:disabled) {
    background: var(--color-primary-soft);
}

.ui-button.danger {
    background: var(--color-expense);
    color: #fff;
}

.ui-field,
.ui-select {
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    min-height: 2.75rem;
    padding: .6rem .7rem;
}

.ui-field:focus,
.ui-select:focus {
    border-color: var(--color-primary-accent);
    box-shadow: 0 0 0 3px rgba(49, 95, 156, .12);
    outline: none;
}

.ui-notice {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    display: grid;
    gap: .2rem;
    padding: .8rem .9rem;
}

.ui-notice.success {
    background: var(--color-income-soft);
    border-color: #cfe8d7;
    color: #1e5c3a;
}

.ui-notice.error {
    background: var(--color-expense-soft);
    border-color: #f0d0ce;
    color: #81231e;
}

.ui-notice.warning {
    background: var(--color-warning-soft);
    border-color: #ecd99e;
    color: var(--color-warning);
}

.ui-chip {
    align-items: center;
    background: var(--color-surface-soft);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    color: var(--color-text-muted);
    display: inline-flex;
    font-size: .76rem;
    font-weight: 800;
    min-height: 1.9rem;
    padding: .28rem .62rem;
}

.ui-empty-state {
    align-items: flex-start;
    background: var(--color-surface-soft);
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-lg);
    color: var(--color-text-muted);
    display: grid;
    gap: .35rem;
    justify-items: start;
    padding: 1.2rem;
}

.ui-modal-backdrop {
    align-items: center;
    background: rgba(8, 22, 42, .48);
    display: flex;
    inset: 0;
    justify-content: center;
    padding: 1rem;
    position: fixed;
    z-index: 1000;
}

.ui-modal {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    max-height: min(90dvh, 56rem);
    max-width: 44rem;
    overflow: auto;
    padding: 1.1rem;
    width: min(100%, 44rem);
}

.ui-modal-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    justify-content: flex-end;
    margin-top: 1rem;
}

/* Blazor / validation */

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: var(--color-expense);
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3Mub3JnLzIwMDAvc3ZnIiBvdmVyZmxvdz0iaGlkZGVuIj48ZGVmcz48Y2xpcFBhdGggaWQ9ImNsaXAwIj48cmVjdCB4PSIyMzUiIHk9IjUxIiB3aWR0aD0iNTYiIGhlaWdodD0iNDkiLz48L2NsaXBBYXRoPjwvZGVmcz48ZyBjbGlwLXBhdGg9InVybCgjY2xpcDApIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjM1IC01MSkiPjxwYXRoIGQ9Ik0yNjMuNTA2IDUxQzI2NC43MTcgNTEgMjY1LjgxMyA1MS40ODM3IDI2Ni42MDYgNTIuMjY1OEwyNjcuMDUyIDUyLjc5ODcgMjY3LjUzOSA1My42MjgzIDI5MC4xODUgOTIuMTgzMSAyOTAuNTQ1IDkyLjc5NSAyOTAuNjU2IDkyLjk5NkMyOTAuODc3IDkzLjUxMyAyOTEgOTQuMDgxNSAyOTEgOTQuNjc4MiAyOTEgOTcuMDY1MSAyODkuMDM4IDk5IDI4Ni42MTcgOTlMMjQwLjM4MyA5OUMyMzcuOTYzIDk5IDIzNiA5Ny4wNjUxIDIzNiA5NC42NzgyIDIzNiA5NC4zNzk5IDIzNi4wMzEgOTQuMDg4NiAyMzYuMDg5IDkzLjgwNzJMMjM2LjMzOCA5My4wMTYyIDIzNi44NTggOTIuMTMxNCAyNTkuNDczIDUzLjYyOTQgMjU5Ljk2MSA1Mi43OTg1IDI2MC40MDcgNTIuMjY1OEMyNjEuMiA1MS40ODM3IDI2Mi4yOTYgNTEgMjYzLjUwNiA1MVpNMjYzLjU4NiA2Ni4wMTgzQzI2MC43MzcgNjYuMDE4MyAyNTkuMzEzIDY3LjEyNDUgMjU5LjMxMyA2OS4zMzcgMjU5LjMxMyA2OS42MTAyIDI1OS4zMzIgNjkuODYwOCAyNTkuMzcxIDcwLjA4ODdMMjYxLjc5NSA4NC4wMTYxIDI2NS4zOCA4NC4wMTYxIDI2Ny44MjEgNjkuNzQ3NUMyNjcuODYgNjkuNzMwOSAyNjcuODc5IDY5LjU4NzcgMjY3Ljg3OSA2OS4zMTc5IDI2Ny44NzkgNjcuMTE4MiAyNjYuNDQ4IDY2LjAxODMgMjYzLjU4NiA2Ni4wMTgzWk0yNjMuNTc2IDg2LjA1NDdDMjYxLjA0OSA4Ni4wNTQ3IDI1OS43ODYgODcuMzAwNSAyNTkuNzg2IDg5Ljc5MjEgMjU5Ljc4NiA5Mi4yODM3IDI2MS4wNDkgOTMuNTI5NSAyNjMuNTc2IDkzLjUyOTUgMjY2LjExNiA5My41Mjk1IDI2Ny4zODcgOTIuMjgzNyAyNjcuMzg3IDg5Ljc5MjEgMjY3LjM4NyA4Ny4zMDA1IDI2Ni4xMTYgODYuMDU0NyAyNjMuNTc2IDg2LjA1NDdaIiBmaWxsPSIjRkZFNTAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48L2c+PC9zdmc+) no-repeat 1rem/1.8rem, #b32121;
    color: #fff;
    padding: 1rem 1rem 1rem 3.7rem;
}

.blazor-error-boundary::after {
    content: "Si è verificato un errore.";
}

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
    text-align: start;
}

@media (max-width: 760px) {
    :root {
        --page-gutter: .9rem;
    }

    .page-header {
        display: grid;
    }

    .page-actions {
        width: 100%;
    }

    .ui-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ui-modal-backdrop {
        align-items: flex-end;
        padding: .5rem;
    }

    .ui-modal {
        border-bottom-left-radius: .6rem;
        border-bottom-right-radius: .6rem;
        max-height: calc(100dvh - 1rem);
        width: 100%;
    }
}

@media (max-width: 430px) {
    .ui-summary-grid {
        grid-template-columns: 1fr;
    }
}

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

@media print {
    :root,
    body {
        background: #fff;
    }
}
/* T2CF-10B — Login and interaction refinements */

.ui-icon-button {
    align-items: center;
    background: var(--color-surface-soft);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 2.5rem;
    font-size: 1.15rem;
    font-weight: 800;
    height: 2.5rem;
    justify-content: center;
    line-height: 1;
    padding: 0;
}

.ui-icon-button:hover:not(:disabled) {
    background: var(--color-primary-soft);
    border-color: #b9c8dd;
    color: var(--color-primary);
}

.ui-icon-button:disabled {
    cursor: not-allowed;
    opacity: .45;
}

.login-page {
    align-items: center;
    background:
        radial-gradient(circle at 12% 12%, rgba(49, 95, 156, .1), transparent 30rem),
        radial-gradient(circle at 88% 88%, rgba(106, 79, 179, .08), transparent 28rem),
        var(--color-bg);
    display: flex;
    justify-content: center;
    min-height: 100dvh;
    padding: 1rem;
}

.login-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    display: grid;
    gap: 1.15rem;
    max-width: 29rem;
    padding: clamp(1.3rem, 5vw, 2rem);
    width: 100%;
}

.login-brand {
    align-items: center;
    background: linear-gradient(145deg, var(--color-primary), var(--color-primary-accent));
    border-radius: 1rem;
    box-shadow: 0 10px 26px rgba(23, 59, 115, .2);
    color: #fff;
    display: inline-flex;
    font-size: .9rem;
    font-weight: 900;
    height: 3rem;
    justify-content: center;
    width: 3rem;
}

.login-copy h1 {
    font-size: clamp(2rem, 8vw, 2.6rem);
    margin-bottom: .45rem;
}

.login-copy p:last-child {
    color: var(--color-text-muted);
    margin-bottom: 0;
}

.login-form {
    display: grid;
    gap: .9rem;
}

.login-form label {
    color: var(--color-text);
    display: grid;
    font-size: .86rem;
    font-weight: 750;
    gap: .35rem;
}

.login-form .ui-field {
    width: 100%;
}

.login-submit {
    margin-top: .15rem;
    width: 100%;
}

.login-footnote {
    border-top: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: .78rem;
    margin: 0;
    padding-top: 1rem;
    text-align: center;
}

@media (max-width: 430px) {
    .login-page {
        align-items: stretch;
        padding: .6rem;
    }

    .login-card {
        border-radius: var(--radius-lg);
        margin: auto 0;
    }
}