/* ========================================
   CATASTOSOLARE.EU - SOLAR CADASTRAL MAP
   Technical/Industrial Aesthetic
   ======================================== */

:root {
    /* Color Palette - Dark Technical */
    --bg-primary: #0a0e14;
    --bg-secondary: #131820;
    --bg-elevated: #1a1f29;
    --bg-input: #0f141b;
    /* Translucent background for floating panels (legend, header, coordinates).
       A CSS var so the light theme can flip it white — otherwise panels stay
       dark in light mode and their (now-dark) text is unreadable. */
    --bg-panel: rgba(19, 24, 32, 0.95);

    --text-primary: #e6edf3;
    --text-secondary: #8b949e;
    --text-muted: #6e7681;

    --accent-primary: #ff6b35;
    --accent-secondary: #f7931e;
    --accent-tertiary: #ffd23f;

    --border-subtle: #21262d;
    --border-default: #30363d;
    --border-emphasis: #484f58;

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);

    /* Typography */
    --font-display: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'JetBrains Mono', 'Courier New', monospace;

    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;

    /* Transitions */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);

    /* Sky background of the popup horizon dial — blue-tinted dusk sky. */
    --horizon-sky: #13335c;

    /* Horizon animation palette (read by horizon-anim.js via getComputedStyle) */
    --ha-profile: var(--accent-primary);   /* apparent-horizon line + sun path (orange) */
    --ha-ink: var(--text-primary);          /* labels */
    --ha-muted: var(--text-secondary);      /* legend / dim labels */
    --ha-sil: #2b313c;                      /* obstruction silhouette fill (dark theme) */
    --ha-zero: #5fd0c4;                     /* true 0° horizon (teal, dashed) */
    --ha-grid: var(--border-emphasis);      /* elevation rings / axis cross */
}

/* Light theme overrides — applied via [data-theme="light"] on <html>. */
:root[data-theme="light"] {
    --bg-primary: #f7f4ee;
    --bg-secondary: #ffffff;
    --bg-elevated: #ffffff;
    --bg-input: #ffffff;
    --bg-panel: rgba(255, 255, 255, 0.95);

    --text-primary: #1a1f29;
    --text-secondary: #4a5260;
    --text-muted: #6e7681;

    --border-subtle: #e3dfd6;
    --border-default: #cfc9bd;
    --border-emphasis: #b3ac9d;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12);

    --horizon-sky: #cfe8ff;
    --ha-sil: #b9a986;   /* earthy silhouette on the light basemap */
}

/* Theme toggle button in the header. */
.theme-toggle {
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    color: var(--text-primary);
    border-radius: 8px;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-left: auto;
    margin-right: var(--spacing-md);
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.theme-toggle:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

.theme-toggle svg {
    width: 18px;
    height: 18px;
}

/* Show sun in dark mode (click → go light), moon in light mode (click → go dark). */
.theme-toggle .icon-sun { display: block; }
.theme-toggle .icon-moon { display: none; }
:root[data-theme="light"] .theme-toggle .icon-sun { display: none; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: block; }

/* ========================================
   RESET & BASE
   ======================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-display);
    font-weight: 300;
    background: var(--bg-primary);
    color: var(--text-primary);
    overflow: hidden;
    height: 100vh;
    width: 100vw;
    position: relative;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
    color: inherit;
}

/* ========================================
   HEADER
   ======================================== */

.app-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 72px;
    background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-panel) 100%);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-default);
    z-index: 1000;
    box-shadow: var(--shadow-md);
}

/* Demo-version badge — fixed pill centred just under the header, shown only
   for tenants whose runtime-config sets `demoBanner: true`. Non-interactive so
   it never steals map clicks. */
.demo-banner {
    position: fixed;
    top: 84px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1001;
    pointer-events: none;
    padding: 0.3rem 1rem;
    border-radius: 999px;
    border: 1px solid var(--accent-primary);
    background: var(--accent-primary);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: var(--shadow-md);
}

.demo-banner[hidden] {
    display: none;
}

.header-content {
    height: 100%;
    padding: 0 var(--spacing-xl);
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 100vw;
}

.brand {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.brand-icon {
    width: 32px;
    height: 32px;
    color: var(--accent-primary);
    stroke-width: 2;
    animation: rotate-sun 30s linear infinite;
}

.brand-logo {
    height: 48px;
    width: auto;
}

@keyframes rotate-sun {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.brand-text h1 {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.brand-subtitle {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-top: -2px;
}

.header-stats {
    display: flex;
    gap: var(--spacing-xl);
}

.stat {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.stat-value {
    font-size: 1.5rem;
    font-weight: 600;
    font-family: var(--font-mono);
    color: var(--accent-secondary);
    line-height: 1.2;
}

.stat-label {
    font-size: 0.7rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 2px;
}

/* ========================================
   SEARCH BAR
   ======================================== */

.search-bar {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-lg);
    border-bottom: 1px solid var(--border-default);
}

.search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.search-icon {
    width: 18px;
    height: 18px;
    color: var(--text-muted);
    flex-shrink: 0;
    margin-right: var(--spacing-sm);
}

.search-input {
    width: 100%;
    background: var(--bg-input);
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    padding: var(--spacing-sm) var(--spacing-md);
    padding-right: 32px;
    font-family: var(--font-display);
    font-size: 0.875rem;
    color: var(--text-primary);
    outline: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.search-input::placeholder {
    color: var(--text-muted);
}

.search-input:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px rgba(255, 107, 53, 0.2);
}

.search-clear {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    color: var(--text-muted);
    transition: color var(--transition-fast), background var(--transition-fast);
}

.search-clear:hover {
    color: var(--text-primary);
    background: var(--bg-elevated);
}

.search-clear svg {
    width: 14px;
    height: 14px;
}

.search-results {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    border-radius: 8px;
    box-shadow: var(--shadow-lg);
    max-height: 240px;
    overflow-y: auto;
    display: none;
    z-index: 960;
}

.search-results.visible {
    display: block;
}

.search-result-item {
    padding: var(--spacing-sm) var(--spacing-md);
    cursor: pointer;
    transition: background var(--transition-fast);
    border-bottom: 1px solid var(--border-subtle);
}

.search-result-item:last-child {
    border-bottom: none;
}

.search-result-item:hover,
.search-result-item.active {
    background: rgba(255, 107, 53, 0.1);
}

.search-result-item .result-name {
    font-size: 0.875rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-result-item .result-type {
    font-size: 0.7rem;
    color: var(--text-muted);
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 1px;
}

.search-no-results {
    padding: var(--spacing-md);
    font-size: 0.85rem;
    color: var(--text-muted);
    text-align: center;
}

.municipality-wrapper {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.municipality-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space: nowrap;
}

.municipality-select {
    flex: 1;
    background: var(--bg-input);
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    padding: var(--spacing-sm) var(--spacing-lg) var(--spacing-sm) var(--spacing-sm);
    font-family: var(--font-display);
    font-size: 0.875rem;
    color: var(--text-primary);
    outline: none;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238b949e' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.municipality-select:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px rgba(255, 107, 53, 0.2);
}

.municipality-select option {
    background: var(--bg-elevated);
    color: var(--text-primary);
}

/* ========================================
   MAP
   ======================================== */

#map {
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-primary);
}

/* Custom MapLibre Popup Styling */
.maplibregl-popup {
    z-index: 955; /* above the Deck.gl canvas and the legend panel (950) */
}

.maplibregl-popup-content {
    background: var(--bg-elevated);
    border: 1px solid var(--border-emphasis);
    border-radius: 8px;
    padding: 0;
    box-shadow: var(--shadow-lg);
    min-width: 280px;
    font-family: var(--font-display);
    color: var(--text-primary);
}

.maplibregl-popup-close-button {
    color: var(--text-secondary);
    font-size: 20px;
    padding: 8px;
    right: 4px;
    top: 4px;
    transition: color var(--transition-fast);
}

.maplibregl-popup-close-button:hover {
    color: var(--accent-primary);
    background: transparent;
}

.maplibregl-popup-tip {
    border-top-color: var(--bg-elevated);
}

.popup-header {
    padding: var(--spacing-md) var(--spacing-lg);
    border-bottom: 1px solid var(--border-default);
    background: linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-secondary) 100%);
    border-radius: 8px 8px 0 0;
}

.popup-header h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--accent-secondary);
    font-family: var(--font-mono);
}

.popup-body {
    padding: var(--spacing-md) var(--spacing-lg);
}

.popup-table {
    width: 100%;
    border-collapse: collapse;
}

.popup-table tr {
    border-bottom: 1px solid var(--border-subtle);
}

.popup-table tr:last-child {
    border-bottom: none;
}

.popup-table td {
    padding: var(--spacing-sm) 0;
    font-size: 0.875rem;
}

.popup-table td:first-child {
    color: var(--text-secondary);
    font-weight: 400;
    padding-right: var(--spacing-md);
}

.popup-table td:last-child {
    color: var(--text-primary);
    font-weight: 500;
    text-align: right;
    font-family: var(--font-mono);
}

.popup-highlight {
    color: var(--accent-secondary) !important;
    font-weight: 600 !important;
}

/* ========================================
   LEGEND PANEL
   ======================================== */

.legend-panel {
    position: fixed;
    top: 80px;
    right: var(--spacing-lg);
    width: 320px;
    background: var(--bg-panel);
    backdrop-filter: blur(12px);
    border: 1px solid var(--border-default);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    z-index: 950;
    transition: transform var(--transition-base);
}

.legend-panel.collapsed .legend-content,
.legend-panel.collapsed .search-bar {
    display: none;
}

.legend-panel.collapsed .toggle-btn svg {
    transform: rotate(180deg);
}

.legend-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-sm) var(--spacing-md);
    border-bottom: 1px solid var(--border-default);
}

.legend-header h3 {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.toggle-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: all var(--transition-fast);
}

.toggle-btn:hover {
    background: var(--bg-input);
}

.toggle-btn svg {
    width: 20px;
    height: 20px;
    transition: transform var(--transition-base);
}

.legend-content {
    padding: var(--spacing-lg);
}

/* Per-layer gradient legends, rendered from LAYERS_CONFIG[].legend by
   buildLayerControls(). Colours and units come from config, so they always
   match what the map paints (irradiation kWh/m²/yr, tree height, etc.). */
.layer-legends:empty {
    display: none;
}

.legend-gradient-block {
    margin-bottom: var(--spacing-lg);
}

.legend-grad-title {
    font-size: 0.75rem;
    font-family: var(--font-mono);
    color: var(--text-secondary);
    margin-bottom: var(--spacing-sm);
}

.legend-gradient-bar {
    height: 24px;
    border-radius: 6px;
    border: 1px solid var(--border-default);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
}

.legend-gradient-labels {
    position: relative;
    height: 1.1rem;
    margin-top: var(--spacing-sm);
    font-size: 0.75rem;
    font-family: var(--font-mono);
    color: var(--text-secondary);
}

.legend-grad-label {
    position: absolute;
    top: 0;
    white-space: nowrap;
}

.legend-section {
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--border-subtle);
}

.legend-section:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.legend-section h4 {
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: var(--spacing-md);
    color: var(--text-primary);
}

.layer-toggle {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) 0;
    cursor: pointer;
    transition: color var(--transition-fast);
}

.layer-toggle:hover {
    color: var(--accent-primary);
}

.layer-toggle input[type="checkbox"] {
    width: 18px;
    height: 18px;
    border: 2px solid var(--border-emphasis);
    border-radius: 4px;
    background: var(--bg-input);
    cursor: pointer;
    appearance: none;
    position: relative;
    transition: all var(--transition-fast);
}

.layer-toggle input[type="checkbox"]:checked {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
}

.layer-toggle input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 2px;
    width: 4px;
    height: 8px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.layer-toggle span {
    font-size: 0.875rem;
}

.legend-info {
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--text-secondary);
}

/* ========================================
   LOADING INDICATOR
   ======================================== */

.loading-indicator {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-lg);
    background: var(--bg-elevated);
    padding: var(--spacing-xl);
    border-radius: 12px;
    border: 1px solid var(--border-default);
    box-shadow: var(--shadow-lg);
    z-index: 2000;
    opacity: 1;
    transition: opacity var(--transition-base);
}

.loading-indicator.hidden {
    opacity: 0;
    pointer-events: none;
}

.spinner {
    width: 48px;
    height: 48px;
    border: 3px solid var(--border-emphasis);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.loading-indicator p {
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-family: var(--font-mono);
}

/* Shown in place of the spinner when initMap() fails (basemap/style/Map
   construction). Keeps the user out of an eternal-spinner dead end. */
.map-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-lg);
    max-width: 280px;
    text-align: center;
}

.map-error-text {
    font-size: 0.875rem;
    color: var(--text-primary);
    line-height: 1.5;
}

.map-error-retry {
    background: var(--accent-primary);
    color: #fff;
    border-radius: 6px;
    padding: var(--spacing-sm) var(--spacing-lg);
    font-family: var(--font-display);
    font-size: 0.875rem;
    font-weight: 500;
    transition: background var(--transition-fast);
}

.map-error-retry:hover {
    background: var(--accent-secondary);
}

/* Top-of-viewport progress bar for in-flight 3D tile fetches.
   Indeterminate animation while at least one /geo3d/ request is pending;
   fades out 400ms after the last one resolves. */
.tile-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 1500;
    pointer-events: none;
    background: transparent;
    overflow: hidden;
    opacity: 1;
    transition: opacity 400ms ease;
}

.tile-progress.idle {
    opacity: 0;
}

.tile-progress .bar {
    position: absolute;
    top: 0;
    height: 100%;
    width: 30%;
    background: linear-gradient(
        90deg,
        transparent,
        var(--accent-primary, #ff8a3d) 30%,
        var(--accent-primary, #ff8a3d) 70%,
        transparent
    );
    animation: tile-progress-slide 1.1s linear infinite;
}

.tile-progress.idle .bar {
    animation-play-state: paused;
}

@keyframes tile-progress-slide {
    0%   { left: -30%; }
    100% { left: 100%; }
}

/* Inline placeholder for the lazily-loaded horizon dial */
.horizon-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 160px;
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-family: var(--font-mono);
    opacity: 0.7;
}

/* Inline placeholder for popup fields awaiting the lazy /feature/<fid>
   fetch. Shown until the full property bag arrives. */
.popup-loading {
    display: inline-block;
    min-width: 1.5em;
    color: var(--text-secondary);
    opacity: 0.6;
    font-family: var(--font-mono);
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
    .header-content {
        padding: 0 var(--spacing-md);
    }

    .header-stats {
        display: none;
    }

    .brand-text h1 {
        font-size: 1.25rem;
    }

    .brand-subtitle {
        font-size: 0.65rem;
    }

    /* Tighten the flag row so the header doesn't overflow on tablets/phones. */
    .lang-switch {
        gap: 3px;
        margin-right: var(--spacing-sm, 0.5rem);
    }
    .lang-flag {
        width: 24px;
        height: 18px;
    }

    .legend-panel {
        width: 280px;
        right: var(--spacing-md);
        top: 68px;
    }

    /* The legend/search panels take over the top of the viewport on small
       screens, so dock the demo badge at the bottom instead. */
    .demo-banner {
        top: auto;
        bottom: var(--spacing-md);
        font-size: 0.7rem;
        padding: 0.25rem 0.75rem;
    }
}

@media (max-width: 480px) {
    .app-header {
        height: 60px;
    }

    #map {
        top: 60px;
    }

    .brand-icon {
        width: 24px;
        height: 24px;
    }

    .brand-text h1 {
        font-size: 1.1rem;
    }

    .legend-panel {
        width: calc(100vw - 2rem);
        right: var(--spacing-md);
        left: var(--spacing-md);
        top: 64px;
    }

    /* Clear the coordinates readout, which sits bottom-left. */
    .demo-banner {
        bottom: 2.5rem;
    }
}

/* Phone popup: dock near bottom, centered, full-width with safe margins.
   The popup carries `popup-docked popup-docked--phone`; the --phone variant
   opts out of the top-right docked card below and keeps this bottom dock. */
@media (max-width: 600px) {
    .maplibregl-popup.popup-docked--phone {
        left: 50% !important;
        right: auto !important;
        top: auto !important;
        bottom: var(--spacing-md) !important;
        transform: translateX(-50%) !important;
        max-width: calc(100vw - 2rem) !important;
        width: calc(100vw - 2rem) !important;
    }
    .maplibregl-popup.popup-docked--phone .maplibregl-popup-tip {
        display: none;
    }
    .maplibregl-popup.popup-docked--phone .maplibregl-popup-content {
        max-width: 100%;
        max-height: 60vh;
        overflow-y: auto;
    }
}

/* Placed popup (not phones): fixed at the screen position chosen by placePopup()
   or set by dragging, so it stays put while the map moves. Width comes from JS
   and is shared with the docked card, so undocking on drag doesn't resize it. */
.maplibregl-popup.popup-placed {
    position: fixed !important;
    top: var(--popup-top, 0) !important;
    left: var(--popup-left, 0) !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: var(--popup-width, 360px) !important;
    max-width: calc(100vw - 2rem) !important;
}
.maplibregl-popup.popup-placed .maplibregl-popup-tip {
    display: none; /* the leader line replaces the tip */
}
/* Only the body scrolls, so the title bar and the close button stay reachable
   in a height-capped popup. */
.maplibregl-popup.popup-placed .maplibregl-popup-content,
.maplibregl-popup.popup-docked:not(.popup-docked--phone) .maplibregl-popup-content {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 96px);
    overflow: hidden;
}
.popup-placed .popup-body,
.popup-docked:not(.popup-docked--phone) .popup-body {
    overflow-y: auto;
}
/* Title bar is the drag handle. */
.popup-placed .popup-header,
.popup-docked:not(.popup-docked--phone) .popup-header {
    flex: none;
    cursor: grab;
    user-select: none;
    touch-action: none;
}
.popup-dragging .popup-header {
    cursor: grabbing;
}

/* Docked popup card (not phones): pin into the legend's top-right slot, hide
   the legend beneath it, cap its height with an internal scroll, and keep the
   close button always reachable. A leader line (drawn in JS) connects the card
   back to the roof. Applied unconditionally — JS decides *when* to add the
   `popup-docked` class (small/short viewport, and the popup can't clear the
   roof), so this must not be gated behind a media query. */
.maplibregl-popup.popup-docked:not(.popup-docked--phone) {
    position: fixed !important;
    top: 80px !important;
    right: var(--spacing-lg) !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: var(--popup-width, 320px) !important;
    max-width: calc(100vw - 2rem) !important;
    z-index: 975; /* above legend (950), search results (960) & placed popups (955), below header (1000) */
}
.maplibregl-popup.popup-docked:not(.popup-docked--phone) .maplibregl-popup-tip {
    display: none; /* the leader line replaces the tip */
}
.maplibregl-popup.popup-docked:not(.popup-docked--phone) .maplibregl-popup-content {
    max-height: min(70vh, calc(100vh - 96px));
}
/* While a docked card is open it supersedes the legend; visibility (not
   display / the collapsed class) so the legend's collapse state survives. */
body.popup-docked-open #legend-panel {
    visibility: hidden;
}

/* Leader line overlay: full map-container overlay, click-through, sitting above
   the Deck canvas but below the docked card. Created & toggled from JS. */
.leader-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 960;
}
.leader-overlay line {
    stroke: var(--accent-secondary);
    stroke-width: 2;
    stroke-dasharray: 4 3;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5));
}
.leader-overlay circle {
    fill: var(--accent-secondary);
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5));
}

/* ========================================
   ANIMATIONS
   ======================================== */

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.legend-panel {
    animation: fadeIn 0.4s ease-out;
}

/* ========================================
   ACCESSIBILITY
   ======================================== */

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

:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

/* --- Lignano deployment: comune brand (right side of header) --- */
.app-header .header-content { display: flex; align-items: center; justify-content: space-between; }
.app-header .header-stats:empty { display: none; }
.municipality-brand { display: flex; align-items: center; gap: 0.75rem; margin-left: auto; }
.municipality-brand .municipality-logo { height: 48px; width: auto; }
.municipality-brand .municipality-text { display: flex; flex-direction: column; line-height: 1.1; text-align: right; }
.municipality-brand .municipality-kicker { font-size: 0.75rem; opacity: 0.75; }
.municipality-brand strong { font-weight: 700; font-size: 1rem; }

/* --- Horizon dial inside feature popup --- */
.horizon-wrap { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid rgba(255,255,255,0.08); display: flex; flex-direction: column; align-items: center; }
.horizon-title { font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: #94a3b8; margin-bottom: 0.4rem; }
.horizon-dial { display: block; }
.horizon-sky  { fill: var(--horizon-sky); }
.horizon-grid { fill: none; stroke: #334155; stroke-width: 0.5; stroke-dasharray: 2 2; }
.horizon-fill { fill: #f59e0b; fill-opacity: 0.55; stroke: #d97706; stroke-width: 1; }
.horizon-tick { fill: #94a3b8; font-size: 10px; font-family: 'JetBrains Mono', monospace; }

/* Irradiation profile chart in the roof popup (renderProfileChart in app.js)
   and in the PDF report (print-report.js); drawn by irradiation-profile.js. */
.profile-wrap { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid rgba(255,255,255,0.08); }
.profile-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
/* The switch keeps its full width; the title wraps instead. */
.profile-head .horizon-title { min-width: 0; }
.profile-head .horizon-title { margin-bottom: 0.3rem; }
.profile-tabs { display: inline-flex; flex-shrink: 0; border: 1px solid var(--border-default); border-radius: 4px; overflow: hidden; }
.profile-tabs button { white-space: nowrap; font: inherit; font-size: 0.7rem; padding: 0.1rem 0.5rem; border: 0; background: transparent; color: var(--text-secondary); cursor: pointer; }
.profile-tabs button.active { background: var(--accent-secondary); color: #1a1f29; }
.profile-unit { font-size: 0.65rem; color: var(--text-secondary); margin-bottom: 0.15rem; }
.profile-chart { display: block; width: 100%; height: auto; overflow: visible; }
.profile-bar { fill: #f59e0b; fill-opacity: 0.8; }
.profile-ref { fill: none; stroke: #808080; stroke-width: 1.2; stroke-dasharray: 4 3; stroke-linejoin: round; }
.profile-grid { stroke: var(--border-default); stroke-width: 0.5; stroke-dasharray: 2 2; }
.profile-axis { stroke: var(--text-secondary); stroke-width: 0.8; }
.profile-tick, .profile-value { fill: var(--text-secondary); font-size: 8px; font-family: 'JetBrains Mono', monospace; }
.profile-frame { fill: none; stroke: #1d2733; stroke-width: 0.5pt; vector-effect: non-scaling-stroke; }
.profile-legend { display: flex; flex-wrap: wrap; gap: 0.2rem 0.8rem; font-size: 0.65rem; color: var(--text-secondary); margin-top: 0.2rem; }
.profile-key { display: inline-flex; align-items: center; gap: 0.3rem; }
.profile-key .key-bar { display: inline-block; width: 0.7em; height: 0.7em; background: #f59e0b; opacity: 0.8; }
.profile-key .key-line { display: inline-block; width: 1.4em; border-top: 1.5px dashed #808080; }
.profile-note { font-size: 0.65rem; line-height: 1.35; color: var(--text-secondary); margin: 0.3rem 0 0; }

/* Deck.gl's MapboxOverlay is added via map.addControl(overlay) with no
   position arg → MapLibre injects its wrapper into .maplibregl-ctrl-top-right.
   The deck canvas inside that wrapper is sized to span the whole map, so it
   paints over the other corners (zoom + compass in top-left, scale in
   bottom-left). All four corners default to z-index:2, and top-right wins
   over its siblings by DOM order. Bump the corners that hold real controls
   above top-right so their buttons render on top of the deck canvas. */
.maplibregl-ctrl-top-left,
.maplibregl-ctrl-bottom-left,
.maplibregl-ctrl-bottom-right {
    z-index: 3;
}

/* Compass: paint the north (top) triangle red so the cardinal direction is
   readable once the map is rotated. Default MapLibre SVG renders north at
   #333 and south at #ccc — both read as gray against this UI's button bg. */
.maplibregl-ctrl button.maplibregl-ctrl-compass .maplibregl-ctrl-icon {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' viewBox='0 0 29 29'%3E%3Cpath fill='%23e84545' d='m10.5 14 4-8 4 8h-8z'/%3E%3Cpath fill='%23888' d='m10.5 16 4 8 4-8h-8z'/%3E%3C/svg%3E");
}

/* Info/guide button: mirrors .theme-toggle, sits beside it (no auto margin). */
.info-toggle {
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    color: var(--text-primary);
    border-radius: 8px;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-right: var(--spacing-md);
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.info-toggle:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

.info-toggle svg {
    width: 18px;
    height: 18px;
}

/* ---- Language switcher (inline flag row) ---- */
.lang-switch {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-right: var(--spacing-md);
}

.lang-flag {
    padding: 0;
    width: 30px;
    height: 22px;
    border: 1px solid var(--border-default);
    border-radius: 4px;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0.55;
    transition: opacity var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.lang-flag img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}

.lang-flag:hover {
    opacity: 0.9;
    border-color: var(--accent-primary);
}

.lang-flag.active {
    opacity: 1;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 1px var(--accent-primary);
}

/* ---- Guida & Informazioni modal ---- */
.info-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-lg);
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
}

.info-modal-overlay[hidden] {
    display: none;
}

.info-modal {
    background: var(--bg-secondary);
    border: 1px solid var(--border-default);
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    width: min(640px, 100%);
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.info-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-md) var(--spacing-lg);
    border-bottom: 1px solid var(--border-default);
    background: linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-secondary) 100%);
}

.info-modal-header h2 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--accent-secondary);
}

.info-close {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.info-close:hover {
    color: var(--accent-primary);
    background: var(--bg-elevated);
}

.info-close svg {
    width: 20px;
    height: 20px;
}

.info-modal-body {
    padding: var(--spacing-lg);
    overflow-y: auto;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text-primary);
}

.info-modal-body p {
    margin: 0 0 var(--spacing-md);
}

.info-modal-body h3 {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--accent-secondary);
    margin: var(--spacing-lg) 0 var(--spacing-sm);
}

.info-modal-body ul {
    margin: 0;
    padding-left: 1.2em;
}

.info-modal-body li {
    margin-bottom: var(--spacing-sm);
}

.info-modal-body strong {
    color: var(--accent-secondary);
}

.info-modal-body .info-note {
    margin-top: var(--spacing-md);
    margin-bottom: 0;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--bg-elevated);
    border-left: 3px solid var(--accent-primary);
    border-radius: 4px;
    color: var(--text-secondary);
    font-size: 0.82rem;
}

/* Orizzonte apparente animation embedded in the info modal */
.horizon-anim {
    margin: var(--spacing-md) 0;
}

.horizon-anim canvas {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    height: auto;
    border: 1px solid var(--border-default);
    border-radius: 8px;
    background: var(--bg-input);
}

.horizon-anim-controls {
    display: flex;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-sm);
}

.horizon-anim-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    cursor: pointer;
    color: var(--text-secondary);
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    border-radius: 8px;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

.horizon-anim-btn:hover {
    color: var(--accent-primary);
    border-color: var(--border-emphasis);
}

.horizon-anim-btn svg {
    width: 18px;
    height: 18px;
}

.info-contact {
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--border-default);
}

.info-contact-email {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--accent-primary);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
}

.info-contact-email:hover {
    text-decoration: underline;
}

.info-contact-email svg {
    flex-shrink: 0;
}

.info-contact .info-credit {
    margin-top: var(--spacing-sm);
    margin-bottom: 0;
    color: var(--text-secondary);
    font-size: 0.82rem;
}

.info-contact .info-credit a {
    color: var(--accent-primary);
    text-decoration: none;
}

.info-contact .info-credit a:hover {
    text-decoration: underline;
}

/* Roof "solar" popup: grouped multi-column layout (Area/tilt/azimuth, the
   irradiation triplet with a merged header, and the four on-the-fly solar
   estimates). Overrides the generic 2-column table rules above. */
.popup-solar {
    table-layout: fixed;
}

.popup-solar tr {
    border-bottom: none;
}

.popup-solar th,
.popup-solar td {
    padding: 2px 4px;
    text-align: center;
    font-size: 0.8rem;
}

/* Neutralize the generic first/last-child label/value styling so every grid
   column is treated equally. */
.popup-solar td:first-child,
.popup-solar td:last-child {
    color: inherit;
    text-align: center;
    font-weight: 500;
    padding-right: 4px;
}

/* Group headers and sub-headers read as muted labels. */
.popup-solar .psr-head th,
.popup-solar .psr-subhead th,
.popup-solar .psr-inline-label {
    color: var(--text-secondary);
    font-weight: 400;
    line-height: 1.2;
}

.popup-solar .psr-subhead th {
    font-size: 0.7rem;
    opacity: 0.8;
    padding-top: 0;
}

.popup-solar .psr-inline-label {
    text-align: left;
}

/* Value cells: monospace numbers; the accent colour comes from .popup-highlight. */
.popup-solar .psr-val td {
    font-family: var(--font-mono);
    padding-bottom: 4px;
}

/* Thin separator line between groups. */
.popup-solar .psr-gap td {
    padding: 0;
    height: 5px;
    border-bottom: 1px solid var(--border-subtle);
}

/* ========================================
   TOAST (non-blocking notification)
   ======================================== */

.app-toast {
    position: fixed;
    bottom: var(--spacing-lg);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    max-width: calc(100vw - 2rem);
    background: var(--bg-elevated);
    border: 1px solid var(--border-emphasis);
    border-left: 3px solid var(--accent-primary);
    border-radius: 8px;
    padding: var(--spacing-sm) var(--spacing-md);
    box-shadow: var(--shadow-lg);
    z-index: 2100;
    animation: fadeIn 0.3s ease-out;
}

.app-toast-msg {
    font-size: 0.85rem;
    color: var(--text-primary);
}

.app-toast-close {
    flex-shrink: 0;
    font-size: 1.1rem;
    line-height: 1;
    color: var(--text-secondary);
    padding: 0 var(--spacing-xs);
    transition: color var(--transition-fast);
}

.app-toast-close:hover {
    color: var(--accent-primary);
}

/* ===== Layer groups (aux-layers.config.js: "Dati territoriali") ===== */
.layer-toggle input[type="checkbox"]:indeterminate {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
}
.layer-toggle input[type="checkbox"]:indeterminate::after {
    content: '';
    position: absolute;
    left: 3px;
    top: 6px;
    width: 8px;
    height: 2px;
    background: white;
}
.layer-toggle input[type="checkbox"]:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}
.layer-group {
    border-top: 1px solid var(--border-subtle);
    margin-top: var(--spacing-sm);
    padding-top: var(--spacing-xs, 4px);
}
.layer-group-head {
    display: flex;
    align-items: center;
    gap: 2px;
}
.layer-group-toggle span {
    font-weight: 600;
}
.layer-group-caret {
    flex: none;
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    background: none;
    color: var(--text-secondary);
    cursor: pointer;
}
.layer-group-caret::before {
    content: '';
    display: inline-block;
    border-style: solid;
    border-width: 5px 0 5px 7px;
    border-color: transparent transparent transparent currentColor;
    transition: transform var(--transition-fast);
}
.layer-group-caret[aria-expanded="true"]::before {
    transform: rotate(90deg);
}
.layer-group-caret:hover,
.layer-group-caret:focus-visible {
    color: var(--accent-primary);
}
.layer-group-items {
    padding-left: 24px;
}
.layer-toggle--placeholder {
    cursor: default;
    color: var(--text-muted);
}
.layer-toggle--placeholder:hover {
    color: var(--text-muted);
}
.layer-tag {
    font-size: 0.75em;
    font-style: normal;
    padding: 0 4px;
    border: 1px solid var(--border-emphasis);
    border-radius: 3px;
    white-space: nowrap;
}
.layer-swatch {
    flex: none;
    width: 14px;
    height: 10px;
    border: 1.5px solid var(--swatch);
    background: color-mix(in srgb, var(--swatch) 30%, transparent);
    border-radius: 2px;
}
.layer-swatch--line {
    height: 0;
    border-width: 0;
    border-top: 2px dashed var(--swatch);
    background: none;
    border-radius: 0;
}

/* ===== Roof popup: collapsible territorial data ===== */
.aux-details {
    margin-top: var(--spacing-md);
    border-top: 1px solid var(--border-subtle);
    padding-top: var(--spacing-sm);
}
.aux-details > summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--accent-secondary);
    list-style-position: inside;
}
.aux-details > summary:hover {
    color: var(--accent-primary);
}
.aux-body {
    font-size: 0.85rem;
}
.aux-item {
    padding: var(--spacing-sm) 0;
    border-bottom: 1px solid var(--border-subtle);
}
.aux-label {
    color: var(--text-secondary);
    font-size: 0.8em;
    margin-bottom: 2px;
}
.aux-entry + .aux-entry {
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px dotted var(--border-subtle);
}
.aux-links a {
    color: var(--accent-primary);
}
.aux-none,
.aux-placeholder,
.aux-status {
    color: var(--text-muted);
}
.aux-status {
    padding: var(--spacing-sm) 0;
}
.aux-status--error {
    color: var(--accent-primary);
}
.aux-note {
    margin: var(--spacing-sm) 0 0;
    font-size: 0.75em;
    color: var(--text-muted);
}

/* --- Report selection mode (selection-mode.js) --- */
/* The map is kept north-up while selecting, so the compass is hidden. */
body.selection-mode .maplibregl-ctrl-compass { display: none; }

.selection-ctrl-btn { display: inline-flex; align-items: center; justify-content: center; color: #333; }
.selection-ctrl-btn[aria-pressed="true"] { background: var(--accent-primary); color: #fff; }
.selection-ctrl-btn[aria-pressed="true"]:hover { background: var(--accent-secondary); }

.popup-actions { margin-top: var(--spacing-sm); display: flex; justify-content: flex-end; }
.popup-report-btn,
.selection-btn {
    font: inherit;
    font-size: 0.85rem;
    padding: 0.35rem 0.8rem;
    border-radius: 6px;
    border: 1px solid var(--border-default);
    background: var(--bg-elevated);
    color: var(--text-primary);
    cursor: pointer;
    transition: border-color var(--transition-fast), color var(--transition-fast);
}
.popup-report-btn { border-color: var(--accent-primary); color: var(--accent-primary); }
.popup-report-btn:hover,
.selection-btn:hover:not(:disabled) { border-color: var(--accent-primary); color: var(--accent-primary); }
.selection-btn--primary { background: var(--accent-primary); border-color: var(--accent-primary); color: #fff; }
.selection-btn--primary:hover:not(:disabled) { background: var(--accent-secondary); color: #fff; }
.selection-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.selection-btn.is-busy { cursor: progress; }
.selection-btn.is-busy::before {
    content: "";
    display: inline-block;
    width: 0.8em;
    height: 0.8em;
    margin-right: 0.4em;
    vertical-align: -0.1em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: selection-spin 0.8s linear infinite;
}
@keyframes selection-spin { to { transform: rotate(360deg); } }

.selection-panel {
    position: fixed;
    left: 10px;
    bottom: 40px;   /* clears the scale bar */
    z-index: 5;     /* above the deck.gl canvas and the map control corners */
    width: 320px;
    max-width: calc(100vw - 20px);
    padding: var(--spacing-md);
    background: var(--bg-panel);
    color: var(--text-primary);
    border: 1px solid var(--border-default);
    border-radius: 8px;
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}
.selection-panel[hidden] { display: none; }
.selection-panel p { margin: 0; }
.selection-title { margin: 0; font-size: 1rem; font-family: var(--font-mono); color: var(--accent-secondary); }
.selection-help { font-size: 0.8rem; color: var(--text-secondary); }
.selection-count { font-weight: 600; }
.selection-totals { font-family: var(--font-mono); font-size: 0.9rem; }
.selection-pending { color: var(--text-muted); }
.selection-warning,
.selection-notice {
    font-size: 0.8rem;
    padding: 0.4rem 0.5rem;
    border-radius: 4px;
    border-left: 3px solid #ffb300;
    background: rgba(255, 179, 0, 0.12);
}
.selection-actions { display: flex; gap: var(--spacing-sm); margin-top: var(--spacing-sm); flex-wrap: wrap; }

@media (max-width: 600px) {
    /* Bottom sheet on phones. */
    .selection-panel {
        left: 0;
        right: 0;
        bottom: 0;
        width: auto;
        max-width: none;
        border-radius: 12px 12px 0 0;
        border-bottom: none;
    }
}


/* ========================================
   PDF REPORT PRINT PAGE (report-capture.js, print-report.js)
   Used only when the renderer opens /?print=<token>.
   1. body.print-capture: only #map is shown, at the fixed size that
      report-capture.js sets inline, while the map pictures are taken.
   2. body.print-report: explicit A4 sheets (210 x 297 mm), each with its
      own header and footer; @page has no margin, the sheets carry it.
   ======================================== */
body.print-capture > :not(#map) {
    display: none !important;
}

body.print-capture #map {
    position: fixed;
    top: 0;
    left: 0;
    right: auto;
    bottom: auto;
}

@page {
    size: A4 portrait;
    margin: 0;
}

body.print-report {
    background: #ffffff;
    color: #1d2733;
    font-family: 'Outfit', 'DejaVu Sans', Arial, sans-serif;
    font-size: 9.5pt;
    line-height: 1.35;
    margin: 0;
    overflow: visible;
    height: auto;
    width: auto;
}

.print-report .sheet {
    box-sizing: border-box;
    width: 210mm;
    height: 297mm;
    padding: 12mm 15mm 10mm;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    page-break-after: always;
    break-after: page;
}

.print-report .sheet:last-child {
    page-break-after: auto;
    break-after: auto;
}

.print-report .sheet-header {
    display: flex;
    align-items: center;
    gap: 5mm;
    padding-bottom: 3mm;
    border-bottom: 0.8pt solid #1d2733;
    margin-bottom: 5mm;
}

.print-report .sheet-logo {
    height: 12mm;
    width: auto;
}

.print-report .sheet-muni-logo {
    height: 13mm;
    width: auto;
    margin-left: auto;
}

.print-report .sheet-title-main {
    font-size: 16pt;
    font-weight: 700;
    line-height: 1.1;
}

.print-report .sheet-title-sub {
    font-size: 10pt;
    font-weight: 500;
    color: #4a5562;
}

.print-report .sheet-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.print-report .sheet-footer {
    margin-top: 4mm;
    padding-top: 2mm;
    border-top: 0.5pt solid #9aa3ad;
    font-size: 7.5pt;
    color: #4a5562;
}

.print-report .sheet-footer-row {
    display: flex;
    justify-content: space-between;
    gap: 5mm;
}

.print-report .sheet-page {
    white-space: nowrap;
}

.print-report .sheet-rights {
    margin-bottom: 1mm;
}

.print-report .sheet-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0 2mm;
}

.print-report .footer-item {
    display: inline-flex;
    align-items: center;
    gap: 1mm;
}

.print-report .footer-item a {
    color: inherit;
    text-decoration: none;
}

.print-report .footer-icon {
    width: 3mm;
    height: 3mm;
    flex: 0 0 auto;
}

/* Centred title at the top of sheet 1 (reportTitle in print-report.js). */
.print-report .report-title {
    text-align: center;
    margin-bottom: 4mm;
    flex-shrink: 0;
}

.print-report .report-title-main {
    font-size: 16pt;
    font-weight: 700;
    line-height: 1.2;
}

.print-report .report-title-sub {
    font-size: 13pt;
    font-weight: 600;
    line-height: 1.2;
}

/* End of the last sheet: dates, tenant contacts, note, data sources. */
.print-report .report-closing {
    margin-top: 4mm;
    padding-top: 2.5mm;
    border-top: 0.8pt solid #1d2733;
    font-size: 8pt;
    color: #4a5562;
}

.print-report .report-closing p {
    margin: 0 0 1mm;
}

.print-report .report-closing p:last-child {
    margin-bottom: 0;
}

.print-report .report-sources strong {
    color: #1d2733;
}

.print-report h2,
.print-report h3 {
    font-weight: 700;
    margin: 0 0 2.5mm;
}

.print-report .sheet-h2 {
    font-size: 12pt;
}

/* Pictures. Their shapes match the capture sizes in report-capture.js. */
.print-report figure {
    margin: 0;
}

.print-report figure img {
    display: block;
    width: 100%;
    height: auto;
    border: 0.5pt solid #9aa3ad;
}

.print-report figcaption {
    display: flex;
    justify-content: space-between;
    gap: 4mm;
    font-size: 8pt;
    color: #4a5562;
    margin-top: 1mm;
}

.print-report .fig-credit {
    font-size: 6.5pt;
    color: #6b7580;
    white-space: nowrap;
}

.print-report .plan-wrap > .fig-credit {
    text-align: right;
    margin-top: 0.8mm;
}

.print-report .figure-missing {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1240 / 760;
    background: #f1f3f5;
    color: #6b7580;
    border: 0.5pt solid #9aa3ad;
}

.print-report .summary-row {
    display: flex;
    gap: 6mm;
    margin-top: 5mm;
}

.print-report .fig-overview {
    flex: 0 0 85mm;
}

/* Sheet 1 must fit one A4 page whatever the tenant adds to the footer
   (report.contacts) or the disclaimer (report.dataDate). The 3D view is the
   only box that gives up height: it loses rows at its top and bottom
   (object-fit: cover); everything else keeps its natural height. */
.print-report .sheet-body > .summary-row,
.print-report .sheet-body > .explain,
.print-report .sheet-body > .report-disclaimer {
    flex-shrink: 0;
}

.print-report .fig-3d {
    flex: 0 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.print-report .fig-3d img {
    flex: 0 1 auto;
    min-height: 0;
    object-fit: cover;
}

.print-report .fig-overview .figure-missing {
    aspect-ratio: 1000 / 760;
}

.print-report .totals-box {
    flex: 1 1 auto;
    background: #f1f5f9;
    border-left: 2pt solid #fdae61;
    padding: 3mm 4mm;
}

.print-report .totals-box h2 {
    font-size: 11pt;
}

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

.print-report .totals-table th {
    text-align: left;
    font-weight: 300;
    padding: 1.2mm 0;
}

.print-report .totals-table td {
    text-align: right;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    padding: 1.2mm 0 1.2mm 3mm;
}

.print-report .totals-table tr + tr th,
.print-report .totals-table tr + tr td {
    border-top: 0.5pt solid #d4dae0;
}

.print-report .explain {
    margin-top: 5mm;
    font-size: 10pt;
}

.print-report .explain p {
    margin: 0 0 2mm;
}

/* Plan sheet */
.print-report .plan-wrap {
    flex: 0 1 auto;
    min-height: 0;
}

.print-report .plan-svg {
    display: block;
    width: 100%;
    height: auto;
    max-height: 190mm;
    border: 0.5pt solid #9aa3ad;
}

.print-report .plan-badge {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
    font-size: 14px;
    fill: #1d2733;
}

.print-report .plan-north text {
    font-weight: 700;
    font-size: 20px;
    fill: #1d2733;
}

.print-report .plan-legend {
    margin-top: 4mm;
    width: 100mm;
}

.print-report .legend-title {
    font-size: 8.5pt;
    font-weight: 500;
    margin-bottom: 1mm;
}

.print-report .legend-bar {
    height: 4mm;
    border: 0.5pt solid #9aa3ad;
}

.print-report .legend-labels {
    display: flex;
    justify-content: space-between;
    font-size: 7.5pt;
}

.print-report .legend-disabled {
    display: flex;
    align-items: center;
    gap: 2mm;
    margin-top: 2mm;
    font-size: 8pt;
}

.print-report .legend-disabled .swatch {
    display: inline-block;
    width: 6mm;
    height: 4mm;
    border: 0.5pt solid #9aa3ad;
}

.print-report .plan-note {
    font-size: 8.5pt;
    color: #4a5562;
    margin: 3mm 0 0;
}

/* Table sheets */
.print-report .report-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 7.5pt;
}

.print-report .report-table th,
.print-report .report-table td {
    border-bottom: 0.5pt solid #d4dae0;
    padding: 0.9mm 1.2mm;
    line-height: 1.2;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.print-report .report-table thead th {
    background: #f1f5f9;
    font-weight: 500;
    vertical-align: bottom;
    line-height: 1.15;
}

.print-report .report-table .unit {
    display: block;
    font-weight: 300;
    color: #4a5562;
}

.print-report .report-table td.n,
.print-report .report-table thead th:first-child,
.print-report .report-table tfoot th {
    text-align: left;
    font-family: 'JetBrains Mono', monospace;
}

.print-report .report-table tr.is-disabled td {
    color: #8a939c;
}

.print-report .report-table td.unusable {
    text-align: center;
    font-style: italic;
}

.print-report .report-table tfoot th,
.print-report .report-table tfoot td {
    border-top: 1pt solid #1d2733;
    border-bottom: none;
    font-weight: 700;
}

.print-report .params {
    margin-top: 6mm;
    font-size: 8.5pt;
}

/* Profile sheet (profileSheet in print-report.js). The SVG is 720 x 230
   units printed 180 mm wide, so 1 unit = 0.25 mm. */
.print-report .profile-block {
    margin-bottom: 6mm;
}

.print-report .profile-block h3 {
    font-size: 10pt;
    margin-bottom: 1mm;
}

.print-report .profile-unit {
    font-size: 7.5pt;
    color: #4a5562;
    margin-bottom: 1mm;
}

.print-report .report-profile {
    width: 180mm;
    height: 57.5mm;
}

.print-report .profile-tick,
.print-report .profile-value {
    fill: #4a5562;
    font-family: 'Outfit', 'DejaVu Sans', Arial, sans-serif;
    font-size: 11px;
}

.print-report .profile-value {
    fill: #1d2733;
    font-size: 10px;
}

/* White copy drawn under each value label, so the outline stays behind it. */
.print-report .profile-halo {
    fill: #fff;
    stroke: #fff;
    stroke-width: 4px;
    stroke-linejoin: round;
}

.print-report .profile-ref {
    stroke-width: 1.5;
}

.print-report .profile-grid {
    stroke: #d4dae0;
}

.print-report .profile-axis {
    stroke: #4a5562;
}

.print-report .profile-legend,
.print-report .profile-note {
    font-size: 8pt;
    color: #4a5562;
}

.print-report .profile-note {
    margin-top: 1.5mm;
}

/* Small hourly chart in each row of "Stime per falda". */
.print-report .report-table td.mini {
    padding-top: 0.5mm;
    padding-bottom: 0.5mm;
    text-align: center;
}

.print-report .profile-mini {
    display: block;
    width: 18mm;
    height: 4.5mm;
    margin-left: auto;
}

.print-report .profile-mini .profile-bar {
    fill-opacity: 1;
}

.print-report .table-note {
    font-size: 8pt;
    color: #4a5562;
    margin: 2mm 0 0;
}

.print-report .params h3 {
    font-size: 10pt;
}

.print-report .params dl {
    display: grid;
    grid-template-columns: max-content auto;
    gap: 1mm 6mm;
    margin: 0;
}

.print-report .params dt {
    color: #4a5562;
}

.print-report .params dd {
    margin: 0;
    font-variant-numeric: tabular-nums;
}

/* Table sheets are filled by measuring (flowTableSheets in print-report.js):
   nothing in the body may shrink, or the overflow test would not see it. */
.print-report .sheet-table .sheet-body > * {
    flex-shrink: 0;
}

.print-report .sheet-table .sheet-body > table + .sheet-h2 {
    margin-top: 7mm;
}

.print-report .report-table-est {
    width: auto;
    min-width: 110mm;
}

.print-report .report-table-est th,
.print-report .report-table-est td {
    padding-left: 5mm;
}

/* Disclaimer at the foot of sheet 1 */
.print-report .report-disclaimer {
    margin-top: auto;
    padding-top: 3mm;
    border-top: 0.5pt solid #d4dae0;
    font-size: 7.5pt;
    line-height: 1.35;
    color: #4a5562;
}

.print-report .report-disclaimer h3 {
    margin: 0 0 1mm;
    font-size: 8pt;
    color: #1f2933;
}

.print-report .report-disclaimer p {
    margin: 0;
    text-align: justify;
}