/* ============================================
   CANTIERE & FERIE TRACKER — Design System v5
   Top nav, Ore Ferie page, projections
   ============================================ */

:root {
    /* Core backgrounds */
    --bg-primary:   #212429;
    --bg-secondary: #2B2E33;
    --bg-card:      #2B2E33;
    --bg-card-2:    #36393f;
    --bg-input:     #212429;
    --bg-modal:     #2B2E33;

    /* 3 months sizing */
    --sidebar-w:    230px;
    --gantt-day-w: 20px;

    /* Borders */
    --border-color:  rgba(255,255,255,0.08);
    --border-active: rgba(255,255,255,0.18);
    --border-hover:  rgba(255,255,255,0.12);

    /* Text */
    --text-primary:   #ffffff;
    --text-secondary: #cbd5e1;
    --text-muted:     #94a3b8;

    /* Brand accent — orange/coral like reference logo */
    --accent:           #e8491e;
    --accent-light:     #f97316;
    --accent-hover:     #ea6438;
    --accent-bg:        rgba(232,73,30,0.14);
    --accent-border:    rgba(232,73,30,0.4);
    --accent-glow:      rgba(232,73,30,0.25);

    /* Cantiere = orange (same as accent) */
    --cantiere-primary: #f97316;
    --cantiere-light:   #fb923c;
    --cantiere-bg:      rgba(249,115,22,0.13);
    --cantiere-border:  rgba(249,115,22,0.38);
    --cantiere-glow:    rgba(249,115,22,0.22);

    /* Ferie = cyan */
    --ferie-primary: #8b5cf6;
    --ferie-light:   #a78bfa;
    --ferie-bg:      rgba(139,92,246,0.13);
    --ferie-border:  rgba(139,92,246,0.38);
    --ferie-glow:    rgba(139,92,246,0.22);

    /* Permesso = fuchsia/different purple */
    --permesso-primary: #d946ef;
    --permesso-light:   #e879f9;
    --permesso-bg:      rgba(217, 70, 239, 0.13);
    --permesso-border:  rgba(217, 70, 239, 0.38);
    --permesso-glow:    rgba(217, 70, 239, 0.22);

    /* Status */
    --success:     #22c55e;
    --success-bg:  rgba(34,197,94,0.13);
    --success-border: rgba(34,197,94,0.35);
    --danger:      #ef4444;
    --danger-bg:   rgba(239,68,68,0.13);
    --danger-border: rgba(239,68,68,0.35);
    --warning:     #f59e0b;
    --warning-bg:  rgba(245,158,11,0.13);

    /* Radius — rounder like reference */
    --radius-xs:  4px;
    --radius-sm:  8px;
    --radius-md:  12px;
    --radius-lg:  16px;
    --radius-xl:  20px;
    --radius-pill: 999px;

    /* Sidebar */
    --sidebar-w: 210px;

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

    /* Control height */
    --control-height: 34px;
}

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

html {
    font-size: 15px;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

body {
    font-family: 'Inter', -apple-system, sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    min-height: 100vh;
    line-height: 1.5;
    overflow-x: hidden;
    width: 100%;
}

/* ============================================
   SIDEBAR NAVIGATION
   ============================================ */
.top-nav {
    position: fixed;
    left: 1rem; top: 1rem; bottom: 1rem;
    width: var(--sidebar-w);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    z-index: 40;
    overflow: hidden;
}

.top-nav-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0;
}

/* ---- Logo area ---- */
.nav-logo-container {
    padding: 1.1rem 1rem;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.65rem;
    line-height: 1;
    flex-shrink: 0;
}

/* Red/orange square icon like the reference */
.nav-logo-img {
    width: 32px; height: 32px;
    object-fit: contain;
    flex-shrink: 0;
    border-radius: 6px;
    /* Rimosso l'alone arancione (box-shadow) */
}

.ocf-suitcase-logo {
    display: block;
    flex: 0 0 auto;
    background-color: transparent;
    background-image: url("data:image/png;base64,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");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border: 0;
    box-shadow: none;
}

.ocf-suitcase-logo--nav {
    width: 42px;
    height: 42px;
}

.ocf-suitcase-logo--splash {
    width: 96px;
    height: 96px;
}

.nav-logo-text {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 6px;
}

.nav-brand {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.nav-version {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 500;
    letter-spacing: 0.02em;
}

/* ---- Navigation items ---- */
.nav-tabs {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0.85rem 0.6rem;
    gap: 3px;
    overflow-y: auto;
    background: transparent;
}

.nav-tab {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.6rem 0.8rem;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 500;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
    text-align: left;
    width: 100%;
    position: relative;
}

.nav-tab:hover {
    background: rgba(255,255,255,0.05);
    color: var(--text-primary);
}

/* Active nav item: rounded box with accent bg and text */
.nav-tab.active {
    background: var(--accent-bg);
    color: var(--accent-light);
    font-weight: 600;
}

/* Inherit text color for the icon, remove custom background */
.nav-tab.active .tab-icon {
    background: transparent;
    color: inherit;
}

.tab-icon {
    font-size: 0.88rem;
    width: 26px; height: 26px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    border-radius: 6px;
    transition: background var(--transition-fast);
}

/* Page switching */
.page { display: none; }
.page.active { display: block; }

/* ============================================
   NAV ACTIONS (bottom of sidebar)
   ============================================ */
.nav-actions {
    padding: 0.75rem 0.5rem;
    border-top: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex-shrink: 0;
}

.nav-tab-action {
    border: none;
    justify-content: flex-start;
    background: transparent;
}

.nav-tab-action:hover {
    background: rgba(255,255,255,0.05);
    border-color: transparent;
}

/* Mobile: collapse sidebar to top bar */
@media (max-width: 680px) {
    .top-nav {
        position: sticky;
        top: 0; bottom: auto; left: auto;
        width: 100%; height: auto;
        border: none;
        border-bottom: 1px solid var(--border-color);
        border-radius: 0;
        flex-direction: column;
    }

    .top-nav-inner {
        flex-direction: row;
        flex-wrap: wrap;
        padding: 0.4rem 0.75rem;
        gap: 0.4rem;
        height: auto;
    }

    .nav-logo-container {
        padding: 0.4rem 0;
        border-bottom: none;
    }

    .nav-tabs {
        flex-direction: row;
        flex-wrap: wrap;
        padding: 0; gap: 2px;
        flex: 1; overflow: visible;
        background: rgba(255,255,255,0.03);
        border-radius: var(--radius-md);
        padding: 3px;
    }

    .nav-tab {
        width: auto;
        font-size: 0.7rem;
        padding: 0.35rem 0.65rem;
    }

    .nav-actions {
        flex-direction: row;
        padding: 0;
        border-top: none;
        margin-left: auto;
    }
}

/* ============================================
   LAYOUT
   ============================================ */
.app-container {
    position: relative;
    z-index: 1;
    margin-left: calc(var(--sidebar-w) + 1.5rem);
    width: calc(100% - (var(--sidebar-w) + 1.5rem));
    min-width: 0;
    min-height: 100vh;
    padding: 1.25rem 1.5rem 1.5rem 1.5rem;
    box-sizing: border-box;
}

.app-container > :first-child {
    margin-top: 0 !important;
}

@media (max-width: 680px) {
    .app-container {
        margin-left: 0;
        width: 100%;
        padding: 0.75rem;
    }
}

/* Sections */
.section {
    margin-top: 1.25rem;
}

.section-title {
    font-size: 0.95rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
}

.section-icon {
    font-size: 1rem;
}

.section-subtitle {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
    margin-top: -0.3rem;
}

.section-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
    min-height: 44px;
    gap: 0.4rem;
}

.section-title-row .section-title {
    margin: 0;
}

/* Adaptive multi-column layout for main cards (Storico/Eventi/Riepilogo) */
.three-col-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.25rem;
    align-items: start;
    margin-top: 1.25rem;
}

@media (max-width: 992px) {
    .three-col-section {
        grid-template-columns: 1fr;
    }
}

/* Card — like Metric Flow: solid dark background, subtle border */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: 1rem 1.1rem;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.card:hover {
    border-color: var(--border-hover);
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}

.compact-card {
    padding: 0.6rem 0.8rem;
    border-radius: var(--radius-lg);
}

.storico-card {
    display: flex;
    flex-direction: column;
    max-height: 440px;
    padding: 0.75rem;
}

.storico-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-right: 0.25rem;
}

/* ============================================
   NAV BUTTONS
   ============================================ */
.gantt-nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.nav-btn {
    width: 28px;
    height: 28px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-secondary);
    border-radius: 50%;
    font-size: 0.7rem;
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-btn:hover {
    border-color: var(--accent-border);
    color: var(--accent-light);
    background: var(--accent-bg);
}

.nav-btn-sm {
    width: 24px;
    height: 24px;
    font-size: 0.6rem;
}

.nav-label {
    font-size: 0.82rem;
    font-weight: 600;
    min-width: 120px;
    text-align: center;
    flex: 1;
}

.nav-label-sm {
    font-size: 0.78rem;
    min-width: 50px;
}

.compact-nav {
    gap: 0.35rem;
}

/* Gantt text button (Oggi) and Busta Paga buttons — pill style */
.nav-btn-text {
    height: var(--control-height);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    padding: 0 0.85rem;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-secondary);
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: 0.73rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.nav-btn-text:hover {
    border-color: var(--accent-border);
    color: var(--accent-light);
    background: var(--accent-bg);
    box-shadow: 0 0 12px var(--accent-glow);
}

/* Specific alignments for Busta Paga Controls */
.bp-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
}

.bp-level-selector {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.bp-level-selector .form-label {
    margin-bottom: 0;
}

.gantt-goto {
    position: relative;
}

.gantt-date-input {
    width: 130px;
    padding: 0.3rem 0.5rem;
    font-size: 0.7rem;
}

/* ============================================
   GANTT
   ============================================ */
.gantt-card {
    padding: 0;
    overflow: hidden;
}

.gantt-card .section-title-row {
    padding: 1rem 1.1rem 0 1.1rem;
}

.gantt-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.gantt-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.gantt-month-header-row th {
    padding: 0.35rem 0;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-align: center;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
    letter-spacing: 0.3px;
}

.gantt-week-row th {
    padding: 0.2rem 0;
    font-size: 0.58rem;
    font-weight: 500;
    color: var(--cantiere-light);
    text-align: center;
    border-bottom: 1px solid var(--border-color);
    border-left: 1px solid var(--border-color);
    background: rgba(255, 255, 255, 0.02);
    box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.2);
}

.gantt-week-row th.gantt-label-col {
    border-left: none;
    box-shadow: none;
}

.gantt-month-header-row th.gantt-label-col,
.gantt-header-row th.gantt-label-col,
.gantt-day-numbers th.gantt-label-col {
    min-width: 120px;
    width: 120px;
    position: sticky;
    left: 0;
    z-index: 11;
    background: var(--bg-secondary);
    border-right: 1px solid #292b35;
}

.gantt-header-row th {
    padding: 0.2rem 0;
    font-size: 0.55rem;
    font-weight: 500;
    color: var(--text-muted);
    text-align: center;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
    width: var(--gantt-day-w);
    min-width: var(--gantt-day-w);
}

.gantt-day-numbers th {
    padding: 0.15rem 0 0.3rem;
    font-size: 0.62rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-align: center;
    border-bottom: 1px solid var(--border-active);
    background: var(--bg-secondary);
}

.today-col {
    background: rgba(249, 115, 22, 0.08);
}

td.today-col {
    background: rgba(249, 115, 22, 0.12) !important;
    border-left: 1px solid rgba(249, 115, 22, 0.25) !important;
    border-right: 1px solid rgba(249, 115, 22, 0.25) !important;
}

.gantt-event-col {
    background: rgba(239, 68, 68, 0.15);
    /* Rosso più visibile */
    border-left: 1px solid rgba(239, 68, 68, 0.2);
    cursor: pointer;
}

th.today-col {
    color: var(--cantiere-light) !important;
    font-weight: 700 !important;
    background: rgba(249, 115, 22, 0.15) !important;
}

.weekend-col {
    background: rgba(255, 255, 255, 0.015);
}

.month-sep {
    border-left: 2px solid var(--border-active) !important;
}

.gantt-row td {
    padding: 0;
    height: 30px;
    border-bottom: 1px solid var(--border-color);
    position: relative;
    width: var(--gantt-day-w);
    min-width: var(--gantt-day-w);
}

.gantt-row td.gantt-label-cell {
    padding: 0 0.4rem 0 0.6rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.7rem;
    font-weight: 500;
    position: sticky;
    left: 0;
    background: var(--bg-card);
    z-index: 10;
    min-width: 120px;
    width: 120px;
    border-right: 1px solid #303341;
    border-bottom: 1px solid #303341;
}

.gantt-label-inner {
    display: flex;
    align-items: center;
    gap: 0.2rem;
}

.gantt-label-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.gantt-label-text {
    overflow: hidden;
    text-overflow: ellipsis;
}

.gantt-block {
    display: block;
    position: absolute;
    inset: 2px 1px;
    border-radius: 3px;
    opacity: 0.85;
    transition: opacity var(--transition-fast);
}

.gantt-block:hover {
    opacity: 1;
    z-index: 5;
}

/* ============================================
   FAB — orange-coral like reference brand color
   ============================================ */
.fab {
    position: fixed;
    bottom: 1.75rem;
    right: 1.75rem;
    width: 50px;
    height: 50px;
    border: none;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--cantiere-primary));
    color: white;
    font-size: 1.5rem;
    font-weight: 300;
    cursor: pointer;
    box-shadow: 0 6px 24px var(--accent-glow), 0 2px 8px rgba(0,0,0,0.4);
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-normal);
    line-height: 1;
}

.fab:hover {
    transform: scale(1.1) rotate(90deg);
    box-shadow: 0 8px 32px var(--accent-glow), 0 4px 12px rgba(0,0,0,0.4);
}

/* ============================================
   FORM MODAL / OVERLAY
   ============================================ */
.form-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.65);
    backdrop-filter: blur(8px);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-normal);
}

.form-overlay.show {
    opacity: 1;
    pointer-events: auto;
}

.form-modal {
    background: var(--bg-modal);
    border: 1px solid var(--border-active);
    border-radius: var(--radius-xl);
    padding: 1.5rem;
    width: 92%;
    max-width: 800px;
    max-height: 90vh;
    overflow-y: auto;
    overflow-x: hidden;
    transform: translateY(16px) scale(0.96);
    transition: transform var(--transition-normal);
    box-shadow: 0 24px 64px rgba(0,0,0,0.55);
}

.form-modal::-webkit-scrollbar-track {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

.form-overlay.show .form-modal {
    transform: translateY(0) scale(1);
}

.form-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--border-color);
}

.form-modal-header h2 {
    font-size: 1rem;
    font-weight: 600;
}

.form-close {
    width: 30px;
    height: 30px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-muted);
    border-radius: 50%;
    font-size: 0.85rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

.form-close:hover {
    border-color: var(--danger);
    color: var(--danger);
}

/* ============================================
   FORM ELEMENTS
   ============================================ */
.form-group {
    margin-bottom: 0.85rem;
}

.form-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 0.35rem;
}

.optional {
    color: var(--text-muted);
    font-weight: 400;
}

/* Base height for all standard UI controls (buttons, selects, inputs) */
:root {
    --control-height: 34px;
}

.form-input {
    width: 100%;
    height: var(--control-height);
    padding: 0 0.65rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.8rem;
    transition: all var(--transition-fast);
    outline: none;
    display: flex;
    align-items: center;
}

.form-input:hover {
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.05);
}

.form-input:focus {
    border-color: var(--cantiere-border);
    background: rgba(249,115,22,0.04);
    box-shadow: 0 0 0 3px rgba(249,115,22,0.08);
}

.form-input option {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

.form-input[type="date"]::-webkit-calendar-picker-indicator,
.form-input[type="date"]::-webkit-inner-spin-button,
.form-input[type="month"]::-webkit-calendar-picker-indicator,
.form-input[type="month"]::-webkit-inner-spin-button {
    display: none;
    -webkit-appearance: none;
}
.form-input[type="date"],
.form-input[type="month"] {
    cursor: pointer;
}
.form-hint {
    font-size: 0.62rem;
    color: var(--text-muted);
    margin-top: 0.2rem;
}

.mt-sm {
    margin-top: 0.5rem;
}

/* Color section */
.color-section {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.color-swatches {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.swatch {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all var(--transition-fast);
    outline: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.swatch:hover {
    transform: scale(1.15);
}

.swatch.active {
    border-color: white;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3), 0 1px 3px rgba(0, 0, 0, 0.3);
}

.color-picker-wrapper {
    position: relative;
    width: 34px;
    height: 26px;
    flex-shrink: 0;
}

.color-picker {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
    padding: 0;
    cursor: pointer;
    border-radius: var(--radius-md);
    background: none;
    opacity: 0;
    z-index: 2;
}

.color-preview {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: var(--radius-md);
    border: 2px solid var(--border-active);
    transition: all var(--transition-fast);
}

/* Type Selector — pill buttons like reference */
.type-selector {
    display: flex;
    gap: 0.4rem;
}

.type-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.55rem 0.4rem;
    border: 1.5px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.type-btn:hover {
    border-color: var(--border-active);
    color: var(--text-primary);
    background: rgba(255,255,255,0.04);
}

.type-btn.active[data-type="cantiere"] {
    border-color: var(--cantiere-primary);
    background: var(--cantiere-bg);
    color: var(--cantiere-light);
    box-shadow: 0 0 14px var(--cantiere-glow);
}

.type-btn.active[data-type="ferie"] {
    border-color: var(--ferie-primary);
    background: var(--ferie-bg);
    color: var(--ferie-light);
    box-shadow: 0 0 14px var(--ferie-glow);
}

.type-btn.active[data-type="evento"] {
    border-color: var(--danger);
    background: var(--danger-bg);
    color: var(--danger);
    box-shadow: 0 0 14px rgba(239,68,68,0.2);
}

.type-emoji { font-size: 0.95rem; }

/* Period Selector — pill group */
.period-selector {
    display: flex;
    gap: 3px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 3px;
}

.period-btn {
    flex: 1;
    padding: 0.38rem 0.2rem;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.68rem;
    font-weight: 500;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.period-btn:hover { color: var(--text-secondary); }

.period-btn.active {
    background: var(--bg-card);
    color: var(--text-primary);
    font-weight: 600;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

/* Preview */
.preview-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.45rem 0.7rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    margin-bottom: 0.85rem;
}

.preview-label {
    font-size: 0.72rem;
    color: var(--text-secondary);
}

.preview-count {
    font-size: 1rem;
    font-weight: 700;
}

/* ============================================
   BUTTONS
   ============================================ */

/* Primary — vibrant orange-to-red gradient like reference */
.btn-primary {
    width: 100%;
    padding: 0.65rem;
    border: none;
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-normal);
    background: linear-gradient(135deg, var(--accent) 0%, var(--cantiere-primary) 100%);
    color: white;
    position: relative;
    overflow: hidden;
    letter-spacing: 0.01em;
    box-shadow: 0 4px 16px var(--accent-glow);
}

.btn-primary::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 0%, rgba(255,255,255,0.18) 100%);
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.btn-primary:hover {
    box-shadow: 0 6px 24px var(--accent-glow);
    transform: translateY(-1px);
}

.btn-primary:hover::after { opacity: 1; }
.btn-primary:active { transform: scale(0.98) translateY(0); }

/* Secondary — outlined, clean */
.btn-secondary {
    padding: 0.48rem 1rem;
    border: 1px solid var(--border-active);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 0.77rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-secondary:hover {
    border-color: var(--border-hover);
    color: var(--text-primary);
    background: rgba(255,255,255,0.04);
}

/* Danger — solid red */
.btn-danger {
    padding: 0.48rem 1rem;
    border: none;
    border-radius: var(--radius-md);
    background: var(--danger);
    color: white;
    font-family: inherit;
    font-size: 0.77rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    box-shadow: 0 2px 10px rgba(239,68,68,0.25);
}

.btn-danger:hover {
    background: #dc2626;
    box-shadow: 0 4px 16px rgba(239,68,68,0.35);
}

/* ============================================
   STORICO
   ============================================ */

/* Filter tabs — pill group style like reference */
.storico-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.6rem;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.storico-search {
    flex: 1;
    min-width: 150px;
}

.storico-search .search-input {
    width: 100%;
    height: 32px;
    padding-left: 0.75rem;
    font-size: 0.85rem;
}

.storico-filters {
    display: flex;
    gap: 3px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 3px;
    height: var(--control-height);
}

.filter-btn {
    flex: 1;
    padding: 0.32rem;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.7rem;
    font-weight: 500;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    text-align: center;
}

.filter-btn:hover { color: var(--text-secondary); }

.filter-btn.active {
    background: var(--bg-card);
    color: var(--text-primary);
    font-weight: 600;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

/* Entry item */
.entry-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 4px;
    border-bottom: 1px solid var(--border-color);
    border-radius: 4px;
    transition: background var(--transition-fast);
}

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

.entry-item:hover {
    background: rgba(255,255,255,0.02);
}

.entry-color-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.entry-details {
    flex: 1;
    min-width: 0;
}

.entry-name {
    font-size: 0.78rem;
    font-weight: 600;
}

.entry-dates {
    font-size: 0.68rem;
    color: var(--text-secondary);
}

.entry-meta {
    font-size: 0.62rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.entry-count {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.2rem 0.45rem;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.04);
    flex-shrink: 0;
}

.entry-count-number {
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1;
}

.entry-count-label {
    font-size: 0.5rem;
    color: var(--text-muted);
    text-transform: uppercase;
}

.entry-delete {
    width: 26px;
    height: 26px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.8rem;
    border-radius: 5px;
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.entry-delete:hover {
    background: var(--danger-bg);
    color: var(--danger);
}

.entry-actions {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
}

.entry-edit {
    width: 26px;
    height: 26px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.8rem;
    border-radius: 5px;
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.entry-edit:hover {
    background: rgba(59, 130, 246, 0.12);
    color: #60a5fa;
}

/* Empty state */
.empty-state {
    text-align: center;
    padding: 1.5rem 0.5rem;
    color: var(--text-muted);
}

.empty-icon {
    font-size: 1.5rem;
    display: block;
    margin-bottom: 0.4rem;
}

.empty-state p {
    font-size: 0.78rem;
}

/* ============================================
   RIEPILOGO — compact
   ============================================ */
.summary-row {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.summary-mini {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.6rem 0.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(20px);
}

.summary-mini.cantiere-accent {
    border-color: var(--cantiere-primary);
    background: var(--cantiere-bg);
    box-shadow: 0 2px 12px var(--cantiere-glow);
}

.summary-mini.ferie-accent {
    border-color: var(--ferie-primary);
    background: var(--ferie-bg);
    box-shadow: 0 2px 12px var(--ferie-glow);
}

.mini-icon {
    font-size: 1rem;
}

.mini-value {
    font-size: 1.3rem;
    font-weight: 800;
    line-height: 1;
}

.cantiere-accent .mini-value {
    color: var(--cantiere-light);
}

.ferie-accent .mini-value {
    color: var(--ferie-light);
}

.mini-label {
    font-size: 0.6rem;
    color: var(--text-muted);
    font-weight: 500;
}

/* Monthly breakdown */
.month-row {
    display: grid;
    grid-template-columns: 65px 1fr 1fr;
    align-items: center;
    padding: 0.3rem 0;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.72rem;
}

.month-row:last-child {
    border-bottom: none;
}

.month-name {
    font-weight: 500;
    color: var(--text-secondary);
}

.month-cantiere,
.month-ferie {
    text-align: center;
    font-weight: 600;
    font-size: 0.75rem;
}

.month-cantiere {
    color: var(--cantiere-light);
}

.month-ferie {
    color: var(--ferie-light);
}

.month-header {
    color: var(--text-muted) !important;
    font-weight: 500 !important;
    font-size: 0.6rem !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.month-zero {
    color: var(--text-muted);
    opacity: 0.3;
}

/* Totals compact */
.total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.25rem 0;
    font-size: 0.72rem;
}

.total-row-label {
    color: var(--text-secondary);
}

.total-row-value {
    font-weight: 700;
    font-size: 0.78rem;
}

.total-row-value.cantiere-color {
    color: var(--cantiere-light);
}

.total-row-value.ferie-color {
    color: var(--ferie-light);
}

.total-divider {
    height: 1px;
    background: var(--border-color);
    margin: 0.15rem 0;
}

/* ============================================
   ORE FERIE PAGE
   ============================================ */

/* Input grid */
.ore-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem;
}

@media (max-width: 768px) {
    .ore-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .ore-grid {
        grid-template-columns: 1fr;
    }
}

.ore-input-group {
    min-width: 0;
}

.ore-input-group .form-input {
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    padding: 0.6rem;
}

/* Summary cards */
.ore-summary-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0.75rem;
}

@media (max-width: 600px) {
    .ore-summary-row {
        grid-template-columns: 1fr;
    }
}

.ore-summary-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: 1rem;
    backdrop-filter: blur(20px);
    text-align: center;
}

.ore-summary-card.ferie-card {
    border-color: var(--ferie-primary);
    background: var(--ferie-bg);
    box-shadow: 0 2px 16px var(--ferie-glow);
}

.ore-summary-card.permesso-card {
    border-color: var(--permesso-primary);
    background: var(--permesso-bg);
    box-shadow: 0 2px 16px var(--permesso-glow);
}

.ore-summary-card.totale-card {
    border-color: var(--cantiere-primary);
    background: var(--cantiere-bg);
    box-shadow: 0 2px 16px var(--cantiere-glow);
}

.ore-summary-header {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.ore-summary-values {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 1rem;
}

.ore-big {
    display: flex;
    align-items: baseline;
    gap: 0.2rem;
}

.ore-big-number {
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1;
}

.ferie-card .ore-big-number {
    color: var(--ferie-light);
}

.permesso-card .ore-big-number {
    color: var(--permesso-light);
}

.totale-card .ore-big-number {
    color: var(--cantiere-light);
}

.ore-big-unit {
    font-size: 0.65rem;
    color: var(--text-muted);
    font-weight: 500;
}

.ore-secondary {
    display: flex;
    align-items: baseline;
    gap: 0.15rem;
    opacity: 0.65;
}

.ore-sec-number {
    font-size: 0.95rem;
    font-weight: 700;
}

.ore-sec-unit {
    font-size: 0.55rem;
    color: var(--text-muted);
}

/* Projection table */
.projection-table-wrapper {
    overflow-x: auto;
}

.projection-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.75rem;
}

.projection-table th {
    padding: 0.5rem 0.4rem;
    text-align: center;
    font-weight: 600;
    font-size: 0.65rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border-bottom: 1px solid var(--border-active);
    white-space: nowrap;
}

.projection-table td {
    padding: 0.45rem 0.4rem;
    text-align: center;
    border-bottom: 1px solid var(--border-color);
    font-variant-numeric: tabular-nums;
}

.projection-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.02);
}

.proj-month {
    font-weight: 600;
    color: var(--text-secondary);
    text-align: left !important;
    padding-left: 0.6rem !important;
}

.proj-ferie {
    color: var(--ferie-light);
}

.proj-permesso {
    color: var(--permesso-light);
}

.proj-total {
    font-weight: 700;
}

.proj-limit {
    color: var(--text-muted);
}

.proj-limit.at-limit {
    color: var(--warning);
    background: var(--warning-bg);
    border-radius: 4px;
}

.proj-warning {
    font-weight: 700;
    font-size: 0.72rem;
}

.proj-warning.over {
    color: var(--danger);
}

.proj-warning.ok {
    color: #10b981;
}

/* Semester row highlight */
.semester-row {
    background: rgba(234, 179, 8, 0.04) !important;
}

.semester-row td {
    border-bottom: 2px solid rgba(234, 179, 8, 0.2);
}

/* Current month highlight */
.current-month-row {
    background: rgba(249, 115, 22, 0.05) !important;
}

/* Sub-value (gg) in projection cells */
.proj-gg {
    display: block;
    font-size: 0.58rem;
    opacity: 0.55;
    font-weight: 500;
    line-height: 1.2;
}

/* Auto-calc deducted column */
.proj-deducted {
    color: var(--ferie-light);
    font-weight: 600;
}

.proj-deducted-val {
    display: block;
    font-size: 0.72rem;
}

/* ============================================
   AUTO-CALC TOGGLE
   ============================================ */
.auto-calc-toggle {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.7rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    font-family: inherit;
    color: var(--text-muted);
}

.auto-calc-toggle:hover {
    border-color: var(--border-active);
    color: var(--text-secondary);
}

.auto-calc-toggle.active {
    border-color: var(--ferie-primary);
    background: var(--ferie-bg);
    color: var(--ferie-light);
}

.toggle-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--text-muted);
    transition: all var(--transition-fast);
    position: relative;
}

.auto-calc-toggle.active .toggle-dot {
    border-color: var(--ferie-primary);
    background: var(--ferie-primary);
}

.toggle-label {
    font-size: 0.68rem;
    font-weight: 600;
}

/* ============================================
   TOAST
   ============================================ */
.toast {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--bg-secondary);
    border: 1px solid var(--border-active);
    color: var(--text-primary);
    padding: 0.55rem 1.1rem;
    border-radius: var(--radius-lg);
    font-size: 0.78rem;
    font-weight: 500;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    z-index: 100;
    opacity: 0;
    transition: all var(--transition-normal);
    pointer-events: none;
}

.toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Export modal */
.export-modal {
    max-width: 360px;
    text-align: left;
}

.export-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.export-modal-header h3 {
    font-size: 0.95rem;
    font-weight: 600;
}

.export-modal .form-group {
    margin-bottom: 1rem;
}

.export-modal .btn-primary {
    margin-top: 0.25rem;
}

/* ============================================
   MODAL
   ============================================ */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
    opacity: 0;
    transition: opacity var(--transition-normal);
    pointer-events: none;
}

.modal-overlay.show {
    opacity: 1;
    pointer-events: auto;
}

.modal {
    background: var(--bg-modal);
    border: 1px solid var(--border-active);
    border-radius: var(--radius-xl);
    padding: 1.5rem;
    max-width: 300px;
    width: 90%;
    text-align: center;
    transform: scale(0.92);
    transition: transform var(--transition-normal);
    box-shadow: 0 20px 60px rgba(0,0,0,0.55);
}

.modal-overlay.show .modal {
    transform: scale(1);
}

.modal-message {
    font-size: 0.85rem;
    margin-bottom: 1rem;
    line-height: 1.4;
}

.modal-actions {
    display: flex;
    gap: 0.6rem;
    justify-content: center;
}

/* ============================================
   BUSTA PAGA PAGE
   ============================================ */
.bp-controls {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex-wrap: wrap;
}

.bp-level-selector {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.bp-label {
    margin-bottom: 0;
    white-space: nowrap;
}

.bp-select {
    width: auto;
    min-width: 70px;
    padding: 0.35rem 0.6rem;
    font-size: 0.8rem;
    font-weight: 600;
    appearance: auto;
    -webkit-appearance: auto;
    color: var(--text-primary);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
}

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

.bp-settings-btn {
    font-size: 0.72rem !important;
    padding: 0.25rem 0.6rem !important;
}

.bp-month-select {
    width: auto;
    min-width: 60px;
    padding: 0.2rem 0.4rem;
    font-size: 0.72rem;
    font-weight: 600;
    appearance: auto;
    -webkit-appearance: auto;
    color: var(--text-primary);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
}

.bp-month-select option {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.bp-month-nav {
    gap: 0.2rem;
}

/* Day counts */
.bp-counts-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 0.6rem;
}

@media (max-width: 600px) {
    .bp-counts-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

.bp-count-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    padding: 0.8rem 0.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(20px);
}

.bp-count-num {
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1;
}

.bp-count-cantiere {
    background: var(--cantiere-bg);
    border-color: var(--cantiere-primary);
}
.bp-count-cantiere .bp-count-num {
    color: var(--cantiere-light);
}

.bp-count-notworked {
    background: var(--danger-bg);
    border-color: var(--danger);
    box-shadow: 0 2px 12px rgba(239, 68, 68, 0.15);
}
.bp-count-notworked .bp-count-num {
    color: var(--danger);
}

.bp-count-viaggio {
    background: rgba(6,182,212,0.13);
    border-color: #06b6d4;
    box-shadow: 0 2px 12px rgba(6,182,212,0.15);
}
.bp-count-viaggio .bp-count-num {
    color: #06b6d4;
}

.bp-count-estero {
    background: rgba(16,185,129,0.13);
    border-color: #10b981;
    box-shadow: 0 2px 12px rgba(16,185,129,0.15);
}
.bp-count-estero .bp-count-num {
    color: #10b981;
}

.bp-count-label {
    font-size: 0.62rem;
    color: var(--text-muted);
    text-align: center;
}

/* Summary cards */
.bp-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 0.75rem;
}

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

.bp-summary-card {
    text-align: center;
}

.bp-total-card {
    border-color: var(--cantiere-primary);
    background: var(--cantiere-bg);
    box-shadow: 0 2px 16px var(--cantiere-glow);
}

.bp-card-header {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.bp-card-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.3rem 0.5rem;
    border-bottom: 1px solid var(--border-color);
}

.bp-card-row:last-child {
    border-bottom: none;
}

.bp-row-label {
    font-size: 0.72rem;
    color: var(--text-muted);
}

.bp-row-value {
    font-size: 0.85rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.bp-highlight {
    color: var(--cantiere-light);
    font-size: 0.95rem;
}

/* Detail table */
.bp-detail-table {
    font-size: 0.78rem;
}

.bp-dt-header {
    display: flex;
    justify-content: space-between;
    padding: 0.4rem 0;
    border-bottom: 2px solid var(--border-active);
    font-weight: 600;
    font-size: 0.68rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.bp-dt-section {
    padding: 0.5rem 0 0.2rem;
    font-weight: 600;
    font-size: 0.72rem;
    color: var(--cantiere-light);
    border-top: 1px solid var(--border-color);
}

.bp-dt-section:first-of-type {
    border-top: none;
}

.bp-dt-row {
    display: flex;
    justify-content: space-between;
    padding: 0.25rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    color: var(--text-secondary);
}

.bp-dt-row span:last-child {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.bp-dt-subtotal {
    display: flex;
    justify-content: space-between;
    padding: 0.35rem 0;
    font-weight: 700;
    border-top: 1px dashed var(--border-active);
    border-bottom: 1px solid var(--border-color);
}

.bp-dt-total {
    display: flex;
    justify-content: space-between;
    padding: 0.4rem 0;
    font-weight: 800;
    font-size: 0.88rem;
}

.bp-dt-netto {
    color: #10b981;
    font-size: 0.95rem;
}

.bp-formula-note {
    font-size: 0.65rem;
    color: var(--text-muted);
    text-align: center;
    margin-top: 0.6rem;
    font-style: italic;
}

/* ============================================
   DAY OVERRIDE MODAL
   ============================================ */
.day-worked-modal {
    max-width: 320px;
    padding: 1.25rem;
}

.day-override-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    padding: 0.6rem 0;
}

.day-override-row.muted {
    opacity: 0.5;
    pointer-events: none;
}

.day-override-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.day-override-input {
    width: 70px;
    padding: 0.2rem 0.4rem;
    text-align: center;
}

.day-override-note {
    font-size: 0.65rem;
    color: var(--text-muted);
    margin-bottom: 0.8rem;
    font-style: italic;
    text-align: left;
    line-height: 1.4;
}

/* Activity Cards Grid for Day Worked */
.activity-cards {
    display: flex;
    gap: 0.5rem;
    justify-content: space-between;
    margin: 1rem 0;
}

.activity-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.6rem;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
    aspect-ratio: 1;
}

.activity-card svg {
    width: 24px;
    height: 24px;
}

.activity-card span {
    font-size: 0.65rem;
    font-weight: 600;
    font-family: inherit;
}

.activity-card:hover {
    background: rgba(255,255,255,0.04);
    border-color: var(--border-hover);
}

/* Active State Colors */
.activity-card.active[data-type="worked"] {
    border-color: var(--cantiere-primary);
    background: var(--cantiere-bg);
    color: var(--cantiere-primary);
}

.activity-card.active[data-type="not-worked"] {
    border-color: #94a3b8;
    background: rgba(148, 163, 184, 0.08);
    /* Slate */
    color: #cbd5e1;
}

.activity-card.active[data-type="travel"] {
    border-color: #06b6d4;
    background: rgba(6, 182, 212, 0.08);
    /* Cyan */
    color: #06b6d4;
}

.day-worked-toggle {
    display: flex;
    gap: 0.4rem;
}

.btn-toggle {
    flex: 1;
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-toggle:hover {
    border-color: var(--border-active);
    color: var(--text-secondary);
}

.btn-toggle.active[data-val="true"] {
    border-color: var(--success);
    background: var(--success-bg);
    color: var(--success);
    box-shadow: 0 0 12px rgba(34,197,94,0.2);
}

.btn-toggle.active[data-val="false"] {
    border-color: var(--danger);
    background: var(--danger-bg);
    color: var(--danger);
    box-shadow: 0 0 12px rgba(239,68,68,0.2);
}

/* ============================================
   LEVEL SETTINGS MODAL
   ============================================ */
.level-settings-modal {
    max-width: 500px;
    max-height: 85vh;
    overflow-y: auto;
}

.ls-section-title {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--cantiere-light);
    margin-top: 1rem;
    margin-bottom: 0.4rem;
    padding-bottom: 0.2rem;
    border-bottom: 1px solid var(--border-color);
}

.ls-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem;
}

@media (max-width: 480px) {
    .ls-grid {
        grid-template-columns: 1fr;
    }
}

.ls-field .form-input {
    font-size: 0.85rem;
    font-weight: 600;
    text-align: right;
}

.ls-actions {
    display: flex;
    gap: 0.6rem;
    margin-top: 1.2rem;
    justify-content: flex-end;
}

.ls-actions .btn-primary {
    width: auto;
    padding: 0.5rem 1.5rem;
}

/* ============================================
   GANTT — Not Worked & Clickable indicators
   ============================================ */
.gantt-clickable {
    cursor: pointer;
}

.gantt-clickable:hover .gantt-block {
    opacity: 1;
    filter: brightness(1.15);
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.3);
}

.gantt-block.gantt-not-worked {
    box-shadow: inset 0 0 0 2px #ef4444 !important;
    background-image: none !important;
}

.gantt-block.gantt-viaggio {
    box-shadow: inset 0 0 0 2px #06b6d4 !important;
    background-image: none !important;
}

.gantt-nw-marker {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.5rem;
    color: var(--danger);
    font-weight: 800;
    pointer-events: none;
    z-index: 6;
}

.gantt-festivo-marker {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.55rem;
    line-height: 1;
    pointer-events: none;
    z-index: 7;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.5));
}

.grafici-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 1.25rem;
}

@media (min-width: 768px) {
    .grafici-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.grafico-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

.grafico-card {
    padding: 1.25rem;
}

/* ============================================
   UTILITIES
   ============================================ */
.hidden {
    display: none !important;
}

::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* =========================================
   SPLASH SCREEN
========================================= */
.splash-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: var(--bg-primary);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    transition: opacity 0.6s ease-out, visibility 0.6s ease-out;
}

.splash-screen.hidden {
    opacity: 0;
    visibility: hidden;
}

.splash-logo-img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    margin-bottom: 1.5rem;
    animation: splash-bounce 1.5s infinite;
}

.splash-screen .ocf-suitcase-logo--splash {
    margin-bottom: 1.5rem;
    animation: splash-bounce 1.5s infinite;
}

.splash-text {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 2px;
    opacity: 0.9;
}

@keyframes splash-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}

/* --- CUSTOM DATEPICKER --- */
.custom-datepicker {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9999;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1rem;
    width: 280px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
    font-size: 0.9rem;
    color: var(--text-primary);
}
.custom-datepicker.hidden {
    display: none;
}
.cdp-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}
.cdp-selectors {
    display: flex;
    gap: 0.25rem;
}
.cdp-custom-select-container {
    position: relative;
}
.cdp-select-btn {
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    transition: background 0.2s;
}
.cdp-select-btn:hover {
    background: rgba(255,255,255,0.05);
}
.cdp-dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
    z-index: 10000;
    max-height: 200px;
    overflow-y: auto;
    width: max-content;
    padding: 0.25rem 0;
}
.cdp-dropdown.hidden {
    display: none;
}
.cdp-dropdown-item {
    padding: 0.4rem 1rem;
    cursor: pointer;
    font-size: 0.85rem;
    text-align: center;
    transition: background 0.2s;
}
.cdp-dropdown-item:hover {
    background: rgba(255,255,255,0.1);
}
.cdp-dropdown-item.active {
    color: var(--cantiere-border);
    font-weight: 600;
}
.cdp-nav-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 0.5rem;
    border-radius: var(--radius-sm);
}
.cdp-nav-btn:hover {
    background: rgba(255,255,255,0.05);
    color: var(--text-primary);
}
.cdp-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.75rem;
    margin-bottom: 0.5rem;
}
.cdp-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}
.cdp-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background 0.2s, color 0.2s;
}
.cdp-day:hover:not(.empty) {
    background: rgba(255,255,255,0.1);
}
.cdp-day.empty {
    cursor: default;
}
.cdp-day.selected {
    background: var(--cantiere-border);
    color: white;
    font-weight: 600;
}
.cdp-day.today {
    border: 1px solid var(--cantiere-border);
    color: var(--cantiere-border);
}
.cdp-day.selected.today {
    color: white;
}
.cdp-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
}
.cdp-action-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
}
.cdp-action-btn:hover {
    color: var(--text-primary);
}
.cdp-action-btn.primary {
    color: var(--cantiere-border);
}
.cdp-action-btn.primary:hover {
    color: var(--cantiere-bg);
}
@media (max-width: 680px) { :root { --gantt-day-w: 15px; } }

/* Grafici SVG nativi: il grafico principale usa due scale indipendenti. */
.chart-canvas-native-hidden {
    display: none !important;
}

.native-chart {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.native-chart svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.native-bg { fill: transparent; }
.native-grid { stroke: rgba(148, 163, 184, 0.14); stroke-width: 1; }
.native-axis-line { stroke: rgba(148, 163, 184, 0.24); stroke-width: 1.4; }
.native-axis {
    fill: #94a3b8;
    font-size: 12px;
    font-weight: 650;
    font-family: Inter, system-ui, sans-serif;
}
.native-axis-right { text-anchor: end; }
.native-x { text-anchor: middle; }
.native-area-orange { fill: rgba(249, 115, 22, 0.12); }
.native-line-orange {
    fill: none;
    stroke: #f97316;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.native-line-blue {
    fill: none;
    stroke: #3b82f6;
    stroke-width: 2.5;
    stroke-dasharray: 7 7;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.native-dot-orange { fill: #f97316; }
.native-dot-blue { fill: #3b82f6; }
.native-bar-purple { fill: #8b5cf6; }
.native-bar-green { fill: #10b981; }
.native-value {
    fill: #d1fae5;
    font-size: 12px;
    font-weight: 800;
    text-anchor: middle;
    font-family: Inter, system-ui, sans-serif;
}
.native-legend text {
    fill: #cbd5e1;
    font-size: 12px;
    font-weight: 700;
    font-family: Inter, system-ui, sans-serif;
}
.native-empty {
    fill: #64748b;
    font-size: 16px;
    font-weight: 700;
    text-anchor: middle;
    font-family: Inter, system-ui, sans-serif;
}

/* ============================================
   ACCESSO UTENTE E SINCRONIZZAZIONE
   ============================================ */
body.ocf-auth-locked {
    overflow: hidden;
}

.ocf-login-overlay {
    position: fixed;
    inset: 0;
    z-index: 20000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: max(20px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
        max(20px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    background:
        radial-gradient(circle at 20% 10%, rgba(249, 115, 22, 0.2), transparent 32rem),
        linear-gradient(155deg, #111827 0%, #030712 64%, #000 100%);
}

.ocf-login-overlay.hidden {
    display: none;
}

.ocf-login-card {
    width: min(430px, 100%);
    padding: 1.6rem;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 22px;
    background: rgba(15, 23, 42, 0.96);
    box-shadow: 0 28px 90px rgba(0, 0, 0, 0.58);
    color: var(--text-primary);
}

.ocf-login-brand {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-bottom: 1.1rem;
}

.ocf-login-brand img {
    border-radius: 14px;
}

.ocf-login-brand .ocf-suitcase-logo {
    display: block;
}

.ocf-suitcase-logo--login {
    width: 72px;
    height: 72px;
}

.ocf-login-brand strong,
.ocf-login-brand span {
    display: block;
}

.ocf-login-brand strong {
    font-size: 1.55rem;
}

.ocf-login-brand span,
.ocf-login-card p {
    color: var(--text-muted);
}

.ocf-login-card p {
    margin: 0 0 1.25rem;
    line-height: 1.5;
}

.ocf-login-card label {
    display: block;
    margin: 0.8rem 0 0.4rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-secondary);
}

.ocf-login-card input {
    width: 100%;
    height: 48px;
    padding: 0 0.85rem;
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 12px;
    outline: none;
    background: #0b1220;
    color: #f8fafc;
    font: inherit;
    font-size: 16px;
}

.ocf-login-card input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.16);
}

.ocf-password-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.5rem;
}

.ocf-password-row button {
    min-width: 82px;
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 12px;
    background: #111827;
    color: var(--text-secondary);
    font-weight: 700;
}

.ocf-login-submit {
    width: 100%;
    min-height: 48px;
    margin-top: 1.15rem;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(135deg, #fb923c, #ea580c);
    color: #fff;
    font: inherit;
    font-size: 1rem;
    font-weight: 800;
    cursor: pointer;
}

.ocf-login-submit:disabled {
    opacity: 0.6;
}

.ocf-login-error {
    min-height: 1.3rem;
    margin-top: 0.7rem;
    color: #fca5a5;
    font-size: 0.82rem;
    font-weight: 700;
}

.ocf-auth-bar {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
    margin-bottom: 0.4rem;
}

.ocf-auth-bar[hidden] {
    display: none !important;
}

.ocf-auth-label {
    overflow: hidden;
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ocf-auth-select,
.ocf-auth-logout {
    width: 100%;
    min-height: 38px;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 9px;
    background: #111827;
    color: var(--text-primary);
    font: inherit;
    font-size: 0.75rem;
    font-weight: 700;
}

.ocf-auth-select {
    padding: 0 0.5rem;
}

.ocf-auth-logout {
    cursor: pointer;
}

.cloud-sync-status {
    position: fixed;
    left: 50%;
    bottom: max(12px, env(safe-area-inset-bottom));
    z-index: 15000;
    max-width: min(520px, calc(100vw - 24px));
    padding: 0.65rem 0.9rem;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.96);
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.35);
    color: #e5e7eb;
    font-size: 0.78rem;
    font-weight: 700;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 12px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.cloud-sync-status.visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

.cloud-sync-status[data-tone="ok"] { background: rgba(6, 95, 70, 0.96); }
.cloud-sync-status[data-tone="warn"] { background: rgba(146, 64, 14, 0.96); }
.cloud-sync-status[data-tone="error"] { background: rgba(127, 29, 29, 0.97); }

@media (max-width: 680px) {
    .top-nav-inner {
        display: grid;
        grid-template-columns: 1fr;
        padding: max(0.45rem, env(safe-area-inset-top)) 0.55rem 0.5rem;
    }

    .nav-logo-container {
        display: flex;
        justify-content: center;
        padding: 0.2rem 0;
        border: 0;
    }

    .nav-tabs {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        width: 100%;
    }

    .nav-tabs .nav-tab {
        justify-content: center;
        min-width: 0;
        padding: 0.45rem 0.2rem;
        gap: 0.25rem;
    }

    .nav-tabs .tab-icon {
        width: 20px;
    }

    .nav-actions {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
        margin: 0;
        gap: 4px;
    }

    .nav-actions > .nav-tab-action {
        justify-content: center;
        min-width: 0;
        padding: 0.45rem 0.2rem;
        font-size: 0.68rem;
        gap: 0.2rem;
    }

    .ocf-auth-bar {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        margin: 0 0 2px;
    }

    .ocf-auth-label {
        display: none;
    }

    .ocf-auth-select {
        min-width: 0;
        height: 42px;
        font-size: 16px;
    }

    .ocf-auth-logout {
        width: auto;
        min-width: 70px;
        padding: 0 0.75rem;
        font-size: 0.78rem;
    }

    .ocf-login-card {
        padding: 1.25rem;
        border-radius: 18px;
    }
}

@media (max-width: 390px) {
    .nav-tabs .nav-tab {
        flex-direction: column;
        font-size: 0.62rem;
        line-height: 1.1;
    }

    .nav-actions > .nav-tab-action {
        font-size: 0;
    }

    .nav-actions > .nav-tab-action .tab-icon {
        font-size: 1rem;
    }
}