/* Ario Fornitori — stili globali */
:root {
    --blazor-load-percentage: 0%;
    --blazor-load-percentage-text: "0%";
    --boot-primary: #1565C0;
    --boot-primary-soft: rgba(21, 101, 192, 0.14);
    --boot-primary-strong: rgba(21, 101, 192, 0.24);
    --boot-surface: rgba(255, 255, 255, 0.78);
    --boot-surface-muted: rgba(255, 255, 255, 0.62);
    --boot-outline: rgba(30, 64, 175, 0.14);
    --boot-shadow: 0 12px 34px rgba(15, 23, 42, 0.09);
}

html, body {
    font-family: 'Inter', system-ui, sans-serif;
    height: 100%;
    margin: 0;
}

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

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

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

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

@keyframes boot-shimmer {
    0% { background-position: -600px 0; }
    100% { background-position: 600px 0; }
}

.boot-skeleton {
    min-height: 100vh;
    background:
        radial-gradient(circle at top right, rgba(21, 101, 192, 0.15), transparent 32%),
        radial-gradient(circle at bottom left, rgba(0, 150, 136, 0.12), transparent 28%),
        #f5f8fc;
}

.boot-block {
    border-radius: 8px;
    background: linear-gradient(90deg, rgba(21,101,192,0.08) 0%, rgba(21,101,192,0.20) 50%, rgba(21,101,192,0.08) 100%);
    background-size: 1200px 100%;
    animation: boot-shimmer 1.5s ease-in-out infinite;
}

.boot-home-shell {
    display: flex;
    flex-direction: column;
    padding-bottom: 96px;
}

.boot-appbar {
    height: 64px;
    padding: 0 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255,255,255,0.78);
    backdrop-filter: blur(12px);
    box-shadow: 0 1px 4px rgba(0,0,0,0.07);
}

.boot-appbar-left,
.boot-appbar-actions,
.boot-kpi-top,
.boot-panel-header,
.boot-list-row {
    display: flex;
    align-items: center;
}

.boot-appbar-left { gap: 12px; }
.boot-appbar-actions { gap: 8px; }
.boot-appbar-text,
.boot-list-text,
.boot-auth-brand,
.boot-auth-form {
    display: flex;
    flex-direction: column;
}

.boot-appbar-text { gap: 6px; }

.boot-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1565C0, #26A69A) !important;
    animation: none !important;
}

.boot-title { width: 150px; height: 16px; }
.boot-caption { width: 88px; height: 12px; opacity: 0.72; }
.boot-icon { width: 34px; height: 34px; border-radius: 50%; }

.boot-main {
    flex: 1;
    width: min(1180px, 100%);
    margin: 0 auto;
    padding: 22px 18px 48px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    box-sizing: border-box;
}

.boot-hero,
.boot-content-grid {
    display: grid;
    gap: 16px;
}

.boot-hero {
    grid-template-columns: minmax(0, 1.7fr) minmax(260px, 0.8fr);
}

.boot-content-grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(300px, 0.8fr);
}

.boot-hero-panel,
.boot-hero-side,
.boot-kpi-card,
.boot-panel,
.boot-auth-card {
    border: 1px solid var(--boot-outline);
    box-shadow: var(--boot-shadow);
}

.boot-hero-panel {
    overflow: hidden;
    min-height: 156px;
    border-radius: 24px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
    background: linear-gradient(135deg, #1565C0 0%, #1976D2 48%, #26A69A 100%);
}

.boot-hero-panel .boot-block {
    background: linear-gradient(90deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.36) 50%, rgba(255,255,255,0.18) 100%) !important;
}

.boot-hero-title {
    width: min(380px, 78%);
    height: 30px;
    border-radius: 10px;
}

.boot-hero-subtitle {
    width: min(560px, 94%);
    height: 14px;
    opacity: 0.88;
}

.boot-hero-subtitle-alt {
    width: min(440px, 78%);
    height: 14px;
    opacity: 0.76;
}

.boot-hero-side,
.boot-kpi-card,
.boot-panel,
.boot-auth-card {
    background: var(--boot-surface);
    backdrop-filter: blur(10px);
}

.boot-hero-side {
    border-radius: 22px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
}

.boot-side-title { width: 64%; height: 18px; }
.boot-side-pill { width: 120px; height: 28px; border-radius: 999px; }
.boot-side-button { width: 100%; height: 42px; border-radius: 14px; }

.boot-kpi-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.boot-kpi-card,
.boot-panel {
    border-radius: 20px;
    padding: 18px;
}

.boot-kpi-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.boot-kpi-top,
.boot-panel-header {
    justify-content: space-between;
    gap: 12px;
}

.boot-kpi-icon { width: 42px; height: 42px; border-radius: 14px; }
.boot-kpi-chip { width: 72px; height: 22px; border-radius: 999px; }
.boot-kpi-label { width: 48%; height: 12px; opacity: 0.72; }
.boot-kpi-value { width: 62%; height: 30px; border-radius: 9px; }
.boot-kpi-value-sm { width: 42%; }

.boot-panel {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.boot-panel-header > div:first-child {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.boot-panel-title { width: 180px; height: 18px; }
.boot-panel-subtitle { width: 220px; height: 12px; opacity: 0.72; }
.boot-panel-action { width: 40px; height: 40px; border-radius: 14px; flex-shrink: 0; }

.boot-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.boot-list-row {
    gap: 12px;
    padding: 14px;
    border-radius: 16px;
    background: var(--boot-surface-muted);
    border: 1px solid var(--boot-outline);
}

.boot-list-icon {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    flex-shrink: 0;
}

.boot-list-text {
    flex: 1;
    gap: 7px;
}

.boot-list-status {
    width: 68px;
    height: 24px;
    border-radius: 999px;
    flex-shrink: 0;
}

.boot-upload-zone {
    min-height: 182px;
    border: 1px dashed rgba(21, 101, 192, 0.24);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.44);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.boot-upload-icon {
    width: 58px;
    height: 58px;
    border-radius: 18px;
}

.boot-line { height: 14px; }
.boot-line-sm { height: 11px; }
.boot-w75 { width: 75%; }
.boot-w70 { width: 70%; }
.boot-w60 { width: 60%; }
.boot-w50 { width: 50%; }
.boot-w45 { width: 45%; }
.boot-w35 { width: 35%; }

.boot-auth-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
}

.boot-auth-card {
    width: min(100%, 440px);
    border-radius: 22px;
    padding: 24px;
}

.boot-auth-brand {
    align-items: center;
    gap: 12px;
    margin-bottom: 28px;
}

.boot-auth-form { gap: 16px; }
.boot-auth-avatar { width: 84px; height: 84px; border-radius: 50%; }
.boot-auth-title { width: 190px; max-width: 80%; height: 26px; }
.boot-auth-subtitle { width: 280px; max-width: 100%; height: 14px; opacity: 0.8; }
.boot-auth-field { width: 100%; height: 56px; }
.boot-auth-button { width: 100%; height: 48px; border-radius: 999px; }
.boot-auth-text-button { width: 140px; max-width: 60%; height: 18px; margin: 0 auto; }

.boot-progress {
    position: fixed;
    left: 20px;
    right: 20px;
    bottom: 28px;
    z-index: 1350;
    pointer-events: none;
}

.boot-progress-track {
    position: relative;
    overflow: hidden;
    height: 8px;
    border-radius: 999px;
    background: rgba(255,255,255,0.78);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05), 0 8px 24px rgba(0,0,0,0.10);
    backdrop-filter: blur(8px);
}

.boot-progress-value {
    width: var(--blazor-load-percentage);
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #26A69A 0%, #1565C0 52%, #42A5F5 100%);
    transition: width .18s ease-out;
}

.boot-progress-track::after {
    content: var(--blazor-load-percentage-text);
    position: absolute;
    right: 10px;
    top: -24px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    color: rgba(34,34,34,0.78);
}

html[data-boot-theme="dark"] {
    color-scheme: dark;
    --boot-surface: rgba(15, 23, 42, 0.76);
    --boot-surface-muted: rgba(30, 41, 59, 0.54);
    --boot-outline: rgba(96, 165, 250, 0.16);
    --boot-shadow: 0 18px 40px rgba(2, 6, 23, 0.36);
}

html[data-boot-theme="dark"] .boot-skeleton {
    background:
        radial-gradient(circle at top right, rgba(96, 165, 250, 0.20), transparent 32%),
        radial-gradient(circle at bottom left, rgba(45, 212, 191, 0.14), transparent 30%),
        #020617;
}

html[data-boot-theme="dark"] .boot-block {
    background: linear-gradient(90deg, rgba(96,165,250,0.12) 0%, rgba(96,165,250,0.28) 50%, rgba(96,165,250,0.12) 100%);
}

html[data-boot-theme="dark"] .boot-appbar {
    background: rgba(15,23,42,0.80);
    box-shadow: 0 1px 4px rgba(0,0,0,0.28);
}

html[data-boot-theme="dark"] .boot-upload-zone {
    background: rgba(15, 23, 42, 0.42);
}

html[data-boot-theme="dark"] .boot-progress-track {
    background: rgba(15,23,42,0.82);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06), 0 8px 24px rgba(0,0,0,0.24);
}

html[data-boot-theme="dark"] .boot-progress-track::after {
    color: rgba(226,232,240,0.78);
}

@media (max-width: 980px) {
    .boot-hero,
    .boot-content-grid {
        grid-template-columns: 1fr;
    }

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

@media (max-width: 640px) {
    .boot-main {
        padding: 18px 16px 42px;
    }

    .boot-kpi-grid {
        grid-template-columns: 1fr;
    }

    .boot-appbar-actions .boot-icon:last-child {
        display: none;
    }
}