@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600&family=JetBrains+Mono:wght@500&display=swap');

/* Sidebar navigation: icona logo bianca su sfondo navy */
#nav-sidebar-inner img {
    filter: brightness(0) invert(1);
}

/* Redesign 12/06: contatori sulle linguette del Pannello corse */
.itl-tab-badge {
    display: inline-block;
    min-width: 1.25rem;
    padding: 0 0.35rem;
    margin-left: 0.25rem;
    border-radius: 9999px;
    background: #e2e6ee;
    color: #1b2a4a;
    font-size: 0.7rem;
    font-weight: 600;
    text-align: center;
    line-height: 1.1rem;
}
.itl-tab-badge--red {
    background: #dc2626;
    color: #fff;
}

/* ============================================================
   DESIGN SYSTEM InTime — Console Operativa
   (docs/CONSOLE_OPERATIVA_DESIGN.md, Fase 0)
   Componenti riusabili per liste/schede ridisegnate, coerenti
   con i mockup approvati: navy/oro/beige, stati a badge, round,
   kpi, riga-card, barra azioni. Tema chiaro fisso.
   ============================================================ */
:root {
    --itl-navy: #0F2741;
    --itl-navy-soft: #1b2a4a;
    --itl-gold: #E89820;
    --itl-gold-bright: #F0A500;
    --itl-beige: #F0EEE9;
    --itl-sand: #F7F5F0;
    --itl-white: #FFFFFF;
    --itl-border: #E6E1D6;
    --itl-border-soft: #ECE9E2;
    --itl-gray: #6B7A8C;
    --itl-serif: 'Cormorant Garamond', Georgia, serif;
    --itl-mono: 'JetBrains Mono', ui-monospace, monospace;
    --itl-info-bg: #E6F1FB; --itl-info-fg: #0C447C;
    --itl-ok-bg: #E7F4ED;   --itl-ok-fg: #2E7D54;
    --itl-warn-bg: #FFF3E0;  --itl-warn-fg: #B26A00;
    --itl-alert-bg: #FBEDEF; --itl-alert-fg: #A23E48;
    --itl-grey-bg: #EFEDE8;  --itl-grey-fg: #5F5E5A;
}

/* Superfici */
.itl-card { background: var(--itl-white); border: 1px solid var(--itl-border); border-radius: 12px; padding: 14px 16px; }
.itl-rowcard { background: var(--itl-white); border: 1px solid var(--itl-border); border-radius: 12px; padding: 14px 16px; margin-bottom: 10px; }
.itl-page { background: var(--itl-beige); border-radius: 14px; padding: 18px 16px; }

/* Codice corsa, prezzo, tratta */
.itl-code { font-family: var(--itl-mono); font-size: 12px; font-weight: 500; background: var(--itl-navy); color: #fff; padding: 3px 8px; border-radius: 6px; }
.itl-money { font-family: var(--itl-serif); font-size: 24px; line-height: 1; color: var(--itl-navy); }
.itl-route { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--itl-gray); }
.itl-pos { color: var(--itl-ok-fg); }
.itl-neg { color: var(--itl-alert-fg); }

/* Badge di stato */
.itl-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 500; padding: 3px 9px; border-radius: 999px; }
.itl-badge.b-info  { background: var(--itl-info-bg);  color: var(--itl-info-fg); }
.itl-badge.b-ok    { background: var(--itl-ok-bg);    color: var(--itl-ok-fg); }
.itl-badge.b-warn  { background: var(--itl-warn-bg);  color: var(--itl-warn-fg); }
.itl-badge.b-alert { background: var(--itl-alert-bg); color: var(--itl-alert-fg); }
.itl-badge.b-grey  { background: var(--itl-grey-bg);  color: var(--itl-grey-fg); }

/* Barra del round (75 / 82 / 90 / offerte libere) */
.itl-round { display: flex; flex-direction: column; gap: 6px; }
.itl-segs { display: flex; gap: 4px; }
.itl-seg { flex: 1; height: 7px; border-radius: 4px; background: var(--itl-border); }
.itl-seg.done { background: var(--itl-navy); }
.itl-seg.now  { background: var(--itl-gold); }
.itl-seg-label { font-size: 11px; color: var(--itl-gray); letter-spacing: .03em; }

/* KPI */
.itl-kpi { background: var(--itl-white); border: 1px solid var(--itl-border); border-radius: 10px; padding: 10px 12px; }
.itl-kpi.alert { background: var(--itl-alert-bg); border-color: #EBC9CE; }
.itl-kpi__label { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--itl-gray); margin-bottom: 5px; }
.itl-kpi__value { font-family: var(--itl-serif); font-size: 26px; line-height: .9; color: var(--itl-navy); }
.itl-kpi.alert .itl-kpi__value { color: var(--itl-alert-fg); }

/* Barra azioni */
.itl-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.itl-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; padding: 8px 13px; border-radius: 8px; border: 1px solid var(--itl-border); background: #fff; color: var(--itl-navy); cursor: pointer; text-decoration: none; }
.itl-btn.primary { background: var(--itl-gold); border-color: var(--itl-gold); }
.itl-btn.ok { background: var(--itl-ok-bg); border-color: #bfe0cd; color: var(--itl-ok-fg); }
.itl-btn.no { color: var(--itl-alert-fg); border-color: #EBC9CE; }

/* ============================================================
   Sidebar navy InTime su TUTTE le pagine (anche le viste custom
   — wizard — che altrimenti la renderebbero chiara). Forza lo
   sfondo navy e ridefinisce i token base/font DENTRO la sidebar,
   così testo e icone restano chiari e leggibili.
   ============================================================ */
#nav-sidebar,
#nav-sidebar > div {
    background-color: #1B2A4A !important;
}
#nav-sidebar {
    border-color: rgba(255, 255, 255, 0.10) !important;
    --color-base-50: #1B2A4A;
    --color-base-100: #28395C;
    --color-base-200: #3A4A66;
    --color-base-700: #E0DDD6;
    --color-base-800: #EDEBE6;
    --color-base-900: #1B2A4A;
    --color-base-950: #162340;
    --color-font-default-light: #E0DDD6;
    --color-font-default-dark: #E0DDD6;
    --color-font-important-light: #FFFFFF;
    --color-font-important-dark: #FFFFFF;
}
#nav-sidebar a,
#nav-sidebar .text-font-default-light,
#nav-sidebar .text-font-default-dark {
    color: #E0DDD6 !important;
}
#nav-sidebar .bg-white { background-color: rgba(255, 255, 255, 0.07) !important; }
#nav-sidebar a:hover { background-color: rgba(255, 255, 255, 0.07) !important; }