/* Stili globali per IRadLink Web */

:root {
    --irad-space-page-x-mobile: 1.125rem;
    --irad-space-page-x-tablet: 1.35rem;
    --irad-space-page-x-desktop: clamp(2rem, 3vw, 4rem);
    --irad-space-panel: 1.25rem 1.3rem 1.35rem;
    --irad-space-panel-mobile: 1.15rem 1.2rem 1.25rem;
    --irad-space-section: 1rem;
    --irad-space-grid: 12px;
    --irad-radius-panel: 14px;
    --irad-radius-control: 8px;
}

html,
body {
    font-family: 'Roboto', sans-serif;
}

/* Barra errore Blazor in basso disabilitata: usiamo solo la pillola di riconnessione in alto */
#blazor-error-ui {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.mud-table-toolbar {
    padding: 16px;
}

.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

/* Base responsive globale per tutte le pagine Blazor/MudBlazor */
.app-content-container {
    width: min(100%, 1920px);
    margin-inline: auto;
    padding-left: var(--irad-space-page-x-mobile);
    padding-right: var(--irad-space-page-x-mobile);
    padding-bottom: clamp(1rem, 1.2vw, 2rem);
}

.mud-main-content {
    overflow-x: hidden;
}

.mud-card,
.mud-paper {
    max-width: 100%;
}

.mud-table-container {
    width: 100%;
    overflow-x: auto;
}

@media (min-width: 600px) {
    .mud-table-root {
        min-width: 640px;
    }
}

.mud-chart {
    max-width: 100%;
}

/* App bar: allineamento icone e tap affidabile su mobile */
.mud-appbar {
    overflow: visible !important;
}

.app-bar-root .mud-toolbar-appbar {
    display: flex;
    align-items: center;
    gap: 0;
    position: relative;
    padding-inline: 0.35rem 0.2rem;
}

.app-bar-brand-title {
    flex: 0 1 auto;
    min-width: 0;
    text-align: center;
    pointer-events: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1;
}

.app-bar-actions {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    margin-left: 0;
    gap: 0;
}

.app-bar-menu-btn,
.app-bar-icon-btn,
.app-bar-profile-btn,
.login-display-menu .mud-icon-button-root {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.app-bar-icon-btn .mud-icon-root,
.app-bar-profile-btn .mud-icon-root,
.app-bar-menu-btn .mud-icon-root {
    font-size: 1.45rem !important;
}

.login-display-menu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    position: relative;
    z-index: 1302;
    flex-shrink: 0;
    touch-action: manipulation;
}

.login-display-popover {
    z-index: 2000 !important;
}

.login-display-popover .mud-list-item {
    min-height: 48px;
}

.login-menu-item-content {
    display: flex;
    align-items: center;
    width: 100%;
}

.login-menu-logout-item {
    min-height: 48px !important;
}

@media (max-width: 959.98px) {
    .app-bar-root .mud-toolbar-appbar {
        padding-inline: 0.5rem 0.15rem;
    }

    .app-bar-root .app-bar-spacer-start,
    .app-bar-root .app-bar-spacer-end {
        display: none !important;
    }

    .app-bar-brand-title {
        flex: 1 1 auto;
        text-align: left;
        margin-left: 0.15rem;
        max-width: none;
        font-size: 1.05rem !important;
    }

    .app-bar-actions {
        margin-left: auto;
    }
}

@media (min-width: 960px) {
    .app-bar-root .mud-toolbar-appbar {
        padding-inline: 0.5rem 0.65rem;
        gap: 0.15rem;
    }
}

/* Pannello filtri con bordo — si adatta dinamicamente a tema chiaro e scuro */
.irad-filtri-bordo {
    border: 1px solid rgba(var(--mud-palette-primary-rgb), 0.22) !important;
    border-radius: 10px;
    padding: var(--irad-space-panel);
    margin-top: 0.5rem;
    background: var(--mud-palette-surface) !important;
    color: var(--mud-palette-text-primary) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.irad-filtri-bordo .mud-chip {
    border-color: rgba(var(--mud-palette-primary-rgb), 0.22) !important;
}

.irad-filtri-titolo {
    display: block;
    margin-bottom: 0.65rem;
    letter-spacing: 0.1em;
    font-weight: 600;
    color: var(--mud-palette-primary-darken);
    line-height: 1.2;
}

.irad-filtri-grid {
    margin-top: 0 !important;
}

.irad-filtro-select .mud-input-root,
.irad-filtro-input .mud-input-root {
    border-radius: 8px !important;
}

.irad-filtro-reset {
    width: 100%;
    min-height: 36px;
    border-radius: 8px !important;
    text-transform: none;
    font-size: 0.82rem;
}

.irad-compact-toolbar .mud-button-root {
    min-height: 34px;
    padding: 6px 12px;
    font-size: 0.8rem;
    text-transform: none;
    border-radius: 8px !important;
}

/* Pannelli form (associazioni, creazione entità) */
.irad-form-panel {
    padding: var(--irad-space-panel) !important;
    border-radius: var(--irad-radius-panel) !important;
    max-width: 100%;
}

.irad-form-alert {
    margin-top: 0.25rem;
}

.irad-form-error-list {
    margin: 0.5rem 0 0;
    padding-left: 1.15rem;
    line-height: 1.45;
}

.operators-filters-row {
    width: 100%;
}

@media (max-width: 599.98px) {
    .irad-form-panel {
        padding: var(--irad-space-panel-mobile) !important;
    }

    .operators-filters-row {
        flex-direction: column !important;
    }
}

.exposures-filter-panel {
    overflow: visible !important;
    max-width: 100%;
    border-radius: var(--irad-radius-panel) !important;
    padding: var(--irad-space-panel) !important;
}

.exposures-toolbar-section {
    width: 100%;
    max-width: 100%;
    padding-bottom: 0.35rem;
}

.exposures-section-label {
    display: block;
    margin-bottom: 0.45rem;
    letter-spacing: 0.08em;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    line-height: 1.2;
    opacity: 0.9;
}

.exposures-toolbar-divider {
    margin: 0.85rem 0 !important;
    opacity: 0.45;
}

.exposures-toolbar-top {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.exposures-period-buttons,
.exposures-view-buttons {
    display: grid !important;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    gap: var(--irad-space-grid);
}

.exposures-period-buttons {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.exposures-view-buttons {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.exposures-period-buttons .mud-button-root,
.exposures-view-buttons .mud-button-root,
.exposures-toolbar-btn {
    flex: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 38px;
    padding: 8px 12px !important;
    margin: 0 !important;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: none;
    border-radius: 8px !important;
    white-space: normal;
    line-height: 1.3;
    overflow: visible;
    box-shadow: none !important;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.exposures-period-buttons .mud-button-root {
    border: 1px solid rgba(var(--mud-palette-primary-rgb), 0.45) !important;
}

.exposures-view-buttons .mud-button-root {
    border: 1px solid rgba(var(--mud-palette-secondary-rgb), 0.45) !important;
}

.exposures-toolbar-period-wrap,
.exposures-toolbar-period {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding-top: 0.25rem;
}

.periodo-navigazione {
    flex-wrap: wrap !important;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    gap: 12px !important;
    row-gap: 12px !important;
}

.exposures-custom-dates {
    display: flex;
    flex-flow: row wrap;
    align-items: flex-end;
    gap: 12px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.exposures-custom-dates .mud-picker,
.exposures-custom-dates .mud-input-control {
    flex: 1 1 150px;
    min-width: 0;
    max-width: 100%;
}

.exposures-custom-dates .mud-button-root {
    flex: 0 1 auto;
    min-width: 6.5rem;
    max-width: 100%;
    text-transform: none;
    border-radius: 8px !important;
}

@media (min-width: 960px) {
    .exposures-period-buttons {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .exposures-view-buttons {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .exposures-view-buttons>.mud-button-root:nth-child(3),
    .exposures-view-buttons>.exposures-toolbar-btn:nth-child(3) {
        grid-column: auto;
    }
}

.exposures-toolbar-grid {
    margin-top: 0 !important;
    row-gap: 1rem;
}

@media (max-width: 599.98px) {
    .exposures-page-header {
        margin-bottom: 2px !important;
        margin-top: 1px !important;
    }
    
    .exposures-page-header .page-title {
        font-size: 1.25rem !important;
        margin-bottom: 0 !important;
    }

    .irad-filtri-bordo {
        padding: 12px 14px !important;
        margin-top: 0.5rem !important;
    }
    
    .irad-filtri-bordo .mud-grid-item {
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }

    .exposures-filter-panel {
        padding: 12px 14px !important;
        margin-bottom: 8px !important;
    }

    .exposures-toolbar-grid {
        row-gap: 6px !important;
    }

    .exposures-toolbar-grid .mud-grid-item {
        padding-inline: 4px !important;
        padding-top: 2px !important;
        padding-bottom: 2px !important;
    }

    .exposures-section-label {
        margin-bottom: 0.1rem !important;
        margin-top: 0.1rem !important;
        padding-inline: 0.05rem;
        font-size: 0.65rem !important;
    }

    .exposures-scroll-wrapper {
        position: relative !important;
        width: 100% !important;
        display: block !important;
        padding-inline: 0 !important;
        height: auto !important;
        overflow: visible !important;
    }

    .exposures-scroll-arrow,
    .exposures-scroll-arrow.left-arrow,
    .exposures-scroll-arrow.right-arrow {
        display: none !important;
    }

    .exposures-period-buttons,
    .exposures-view-buttons {
        display: grid !important;
        overflow: visible !important;
        height: auto !important;
        gap: 8px !important;
        align-items: stretch !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .exposures-period-buttons {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .exposures-view-buttons {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .exposures-period-buttons .mud-button-root,
    .exposures-view-buttons .mud-button-root,
    .exposures-toolbar-btn {
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 40px !important;
        padding: 7px 10px !important;
        font-size: 0.78rem !important;
        line-height: 1.2 !important;
        border-radius: 10px !important;
        text-align: center !important;
        white-space: normal !important;
        text-transform: none !important;
        touch-action: manipulation;
    }

    .exposures-view-buttons>.mud-button-root:nth-child(3),
    .exposures-view-buttons>.exposures-toolbar-btn:nth-child(3) {
        grid-column: 1 / -1;
        min-height: 40px !important;
    }

    .exposures-view-buttons .mud-button-icon-start {
        margin-right: 4px !important;
        margin-inline-end: 4px !important;
    }

    .exposures-view-buttons .mud-button-icon-start .mud-icon-root {
        font-size: 1rem !important;
    }

    .exposures-toolbar-divider {
        margin: 1rem 0 !important;
    }

    .exposures-toolbar-period {
        gap: 1rem !important;
        row-gap: 1rem !important;
    }

    .irad-filtri-grid .mud-input-control,
    .irad-filtri-grid .mud-select {
        width: 100% !important;
    }

    .irad-filtro-reset {
        margin-top: 0.35rem;
    }

    .irad-compact-toolbar .mud-button-root,
    .irad-filtro-reset {
        min-height: 36px !important;
    }

    .app-content-container {
        margin-top: 0.75rem !important;
        padding-inline: var(--irad-space-page-x-mobile);
    }

    .mud-button:not(.mud-icon-button):not(.exposures-toolbar-btn) {
        min-height: 40px;
    }

    .mud-input-control,
    .mud-picker {
        width: 100%;
    }

    .mud-typography-h4 {
        font-size: 1.5rem;
    }

    .mud-typography-h5 {
        font-size: 1.25rem;
    }
}

/* Styling delle tabelle in modalità card stacked su mobile e tablet */
@media (max-width: 959.98px) {
    /* Rimuove i bordi sovrapposti, ombreggiature e sfondo del contenitore della tabella su mobile */
    .mud-table,
    .mud-table.border-solid,
    .mud-table.border-2,
    .mud-table.border-solid.border-2 {
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
        border-width: 0 !important;
        border-radius: 0 !important;
    }

    .mud-table-root {
        background: transparent !important;
    }

    .mud-table-root .mud-table-row {
        display: block !important;
        border: 1px solid var(--mud-palette-lines-default) !important;
        border-radius: 12px !important;
        margin-bottom: 16px !important;
        background: var(--mud-palette-surface) !important;
        overflow: hidden;
        box-shadow: none !important;
        transition: border-color 0.2s ease, background-color 0.2s ease;
    }

    .mud-table-root .mud-table-row:hover {
        background: rgba(var(--mud-palette-primary-rgb), 0.04) !important;
        border-color: rgba(var(--mud-palette-primary-rgb), 0.3) !important;
    }

    .mud-table-root .mud-table-row:last-child {
        margin-bottom: 0 !important;
    }

    .mud-table-root .mud-table-cell {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        text-align: left !important;
        padding: 10px 14px !important;
        border-bottom: 1px solid var(--mud-palette-lines-default) !important;
    }
    
    .mud-table-root .mud-table-row .mud-table-cell:last-child {
        border-bottom: none !important;
    }
    
    .mud-table-root .mud-table-cell::before {
        content: attr(data-label) !important;
        margin-bottom: 6px !important;
        float: none !important;
        display: block !important;
        font-weight: 700 !important;
        font-size: 0.72rem !important;
        opacity: 0.65 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.06em !important;
        color: var(--mud-palette-text-secondary) !important;
    }
    
    .mud-table-root .mud-table-cell > * {
        text-align: left !important;
        align-self: flex-start !important;
    }
}

/* Tablet */
@media (min-width: 600px) and (max-width: 959.98px) {
    .app-content-container {
        padding-inline: var(--irad-space-page-x-tablet);
    }
}

/* Desktop */
@media (min-width: 960px) and (max-width: 1919.98px) {
    .app-content-container {
        padding-left: var(--irad-space-page-x-desktop);
        padding-right: clamp(1.5rem, 2.2vw, 3rem);
    }
}

/* 4K e ultra-wide */
@media (min-width: 1920px) {
    .app-content-container {
        width: min(100%, 2200px);
        padding-left: clamp(3.5rem, 4vw, 5.5rem);
        padding-right: clamp(2.5rem, 3vw, 4rem);
    }

    .mud-typography-h4 {
        font-size: 2rem;
    }
}

/* Base wrapper classes for exposures horizontal scroll buttons */
.exposures-scroll-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
}

.exposures-scroll-arrow {
    display: none !important;
}

@keyframes exposures-realtime-pulse {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 6px rgba(76, 175, 80, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(76, 175, 80, 0);
    }
}