/* Tema Portale UVIT — colori brand: arancione #FF8300, grigio #87878D */

:root {
    --uvit-orange: #FF8300;
    --uvit-orange-dark: #e67500;
    --uvit-orange-light: #ffa040;
    --uvit-gray: #87878D;
    --uvit-gray-dark: #5a5a60;
    --uvit-gray-light: #b8b8be;
    --uvit-bg: #f5f5f7;
    --uvit-card: #ffffff;
    --uvit-text: #2c2c30;
    --uvit-border: #e0e0e3;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    color: var(--uvit-text);
    background: var(--uvit-bg);
    min-height: 100vh;
    font-size: 15px;
    line-height: 1.5;
}

a { color: var(--uvit-orange); text-decoration: none; }
a:hover { color: var(--uvit-orange-dark); text-decoration: underline; }

/* ===== NAVBAR (area loggata) ===== */
.navbar {
    background: #ffffff;
    border-bottom: 3px solid var(--uvit-orange);
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    padding: 0;
}
.navbar-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.navbar-logo { display: flex; align-items: center; gap: 12px; }
.navbar-logo img { height: 42px; width: auto; display: block; }
.navbar-logo .brand {
    font-size: 13px;
    color: var(--uvit-gray);
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 600;
}
.navbar-menu { display: flex; align-items: center; gap: 8px; }
.navbar-company {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: rgba(255,131,0,0.06);
    border: 1px solid rgba(255,131,0,0.2);
    border-radius: 8px;
    margin: 0 auto 0 12px;
}
.company-label {
    font-size: 12px;
    color: var(--uvit-gray);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}
.company-name {
    font-size: 14px;
    color: var(--uvit-text);
    font-weight: 600;
}
.company-form { margin: 0; display: flex; align-items: center; gap: 8px; }
.company-select {
    padding: 5px 28px 5px 10px;
    border: 1px solid var(--uvit-border);
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit;
    color: var(--uvit-text);
    background-color: #fff;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2387878D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 14px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    max-width: 280px;
    text-overflow: ellipsis;
}
.company-select:focus {
    outline: none;
    border-color: var(--uvit-orange);
    box-shadow: 0 0 0 3px rgba(255,131,0,0.12);
}

/* Card scelta azienda (prima selezione, >1 azienda) */
.company-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}
.company-list-item { margin: 0; }
.company-pick {
    width: 100%;
    background: #fafafa;
    border: 1.5px solid var(--uvit-border);
    border-radius: 10px;
    padding: 18px 20px;
    text-align: left;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 16px;
    font-family: inherit;
    transition: all 0.15s ease;
}
.company-pick:hover {
    border-color: var(--uvit-orange);
    background: #fff8ee;
    transform: translateX(2px);
}
.company-pick-info { flex: 1; }
.company-pick-name { font-size: 16px; font-weight: 600; color: var(--uvit-text); }
.company-pick-loc { color: var(--uvit-gray); font-size: 13px; margin-top: 2px; }
.company-pick-arrow {
    font-size: 22px;
    color: var(--uvit-orange);
    font-weight: 700;
}
.navbar-user {
    color: var(--uvit-gray-dark);
    font-size: 14px;
    margin-right: 12px;
    padding-right: 16px;
    border-right: 1px solid var(--uvit-border);
}
.navbar-user strong { color: var(--uvit-text); }
.btn-logout {
    background: transparent;
    border: 1.5px solid var(--uvit-orange);
    color: var(--uvit-orange);
    padding: 8px 18px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.15s ease;
    display: inline-block;
}
.btn-logout:hover {
    background: var(--uvit-orange);
    color: #fff;
    text-decoration: none;
}
.btn-nav {
    color: var(--uvit-gray-dark);
    padding: 8px 14px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.15s ease;
}
.btn-nav:hover {
    color: var(--uvit-orange);
    background: rgba(255,131,0,0.08);
    text-decoration: none;
}

/* ===== MAIN CONTAINER ===== */
.container {
    max-width: 1200px;
    margin: 32px auto;
    padding: 0 24px;
}
.card {
    background: var(--uvit-card);
    border: 1px solid var(--uvit-border);
    border-radius: 10px;
    padding: 28px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    margin-bottom: 20px;
}
.card h1 {
    margin: 0 0 8px;
    font-size: 24px;
    font-weight: 700;
    color: var(--uvit-text);
}
.card h2 {
    margin: 0 0 16px;
    font-size: 18px;
    font-weight: 600;
    color: var(--uvit-gray-dark);
}
.card p { color: #4a4a50; margin: 0 0 12px; }
.welcome-sub {
    color: var(--uvit-gray);
    font-size: 14px;
    margin-bottom: 24px;
}
.placeholder-box {
    background: linear-gradient(135deg, #fff5e6 0%, #ffe8cc 100%);
    border: 1px dashed var(--uvit-orange);
    border-radius: 8px;
    padding: 40px 24px;
    text-align: center;
    color: var(--uvit-gray-dark);
    margin-top: 16px;
}
.placeholder-box .icon { font-size: 48px; margin-bottom: 12px; }
.placeholder-box strong { color: var(--uvit-orange-dark); }

/* ===== DASHBOARD CLIENTE ===== */
.dash-intro { margin-bottom: 20px; }
.dash-intro h1 { font-size: 26px; font-weight: 700; margin: 0 0 4px; color: var(--uvit-text); }
.dash-intro p { margin: 0; }

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 22px;
}
.kpi-grid-4 { grid-template-columns: repeat(4, 1fr); }
.kpi {
    background: #fff;
    border: 1px solid var(--uvit-border);
    border-left: 4px solid var(--uvit-orange);
    border-radius: 10px;
    padding: 18px 22px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}
.kpi-val { font-size: 32px; font-weight: 700; color: var(--uvit-text); line-height: 1; }
.kpi-lab {
    font-size: 12px;
    color: var(--uvit-gray);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    margin-top: 6px;
}
.kpi-sub { font-size: 12px; color: var(--uvit-gray-dark); margin-top: 4px; }
.kpi-link {
    text-decoration: none !important;
    color: inherit;
    display: block;
    transition: all 0.15s ease;
}
.kpi-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255,131,0,0.18);
    border-left-color: var(--uvit-orange-dark);
}

.card h2 .card-see-all {
    margin-left: auto;
    font-size: 12px;
    font-weight: 600;
    color: var(--uvit-orange);
    text-decoration: none;
    text-transform: none;
    letter-spacing: 0;
}
.card h2 .card-see-all:hover { color: var(--uvit-orange-dark); text-decoration: underline; }

/* ===== PAGINE LISTA (offerte/tarature/commesse) ===== */
.page-head {
    display: flex;
    gap: 20px;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 18px;
    flex-wrap: wrap;
}
.page-head-title h1 {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 4px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.page-head-sub { margin: 0; font-size: 13px; color: var(--uvit-gray); }
.page-head-sub em { color: var(--uvit-orange-dark); font-style: normal; font-weight: 600; }
.back-link { color: var(--uvit-gray); text-decoration: none; }
.back-link:hover { color: var(--uvit-orange); }

.search-form { display: flex; gap: 8px; align-items: center; }
.search-input {
    padding: 9px 14px;
    border: 1.5px solid var(--uvit-border);
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    color: var(--uvit-text);
    background: #fff;
    min-width: 280px;
}
.search-input:focus {
    outline: none;
    border-color: var(--uvit-orange);
    box-shadow: 0 0 0 3px rgba(255,131,0,0.12);
}
.search-btn {
    padding: 9px 18px;
    background: var(--uvit-orange);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}
.search-btn:hover { background: var(--uvit-orange-dark); }
.search-clear {
    padding: 7px 11px;
    border: 1.5px solid var(--uvit-border);
    border-radius: 8px;
    color: var(--uvit-gray);
    text-decoration: none;
    font-weight: 600;
}
.search-clear:hover { background: #fafafa; color: var(--uvit-text); }

/* Badge stati: vedi blocco varianti più in basso (dopo .badge base) */
@keyframes pulse-soft {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255,131,0,0); }
    50% { box-shadow: 0 0 0 4px rgba(255,131,0,0.18); }
}

/* Strip referente compatta (una riga) */
.ref-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fafafa;
    border: 1px solid var(--uvit-border);
    border-radius: 8px;
    padding: 8px 14px;
    margin-bottom: 12px;
    font-size: 13px;
    flex-wrap: wrap;
}
.ref-label { color: var(--uvit-gray); font-weight: 600; }
.ref-name { color: var(--uvit-text); font-weight: 600; padding-right: 12px; border-right: 1px solid var(--uvit-border); }
.ref-contacts { display: inline-flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.ref-chip {
    display: inline-block;
    padding: 3px 10px;
    background: #fff;
    border: 1px solid var(--uvit-border);
    border-radius: 999px;
    color: var(--uvit-text);
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
    transition: all 0.15s ease;
}
.ref-chip:hover {
    border-color: var(--uvit-orange);
    color: var(--uvit-orange);
    text-decoration: none;
}
.ref-chip-cta {
    background: var(--uvit-orange);
    color: #fff;
    border-color: var(--uvit-orange);
    font-weight: 700;
    margin-left: auto;
}
.ref-chip-cta:hover {
    background: var(--uvit-orange-dark);
    color: #fff;
    border-color: var(--uvit-orange-dark);
}
@media (max-width: 600px) {
    .ref-name { border-right: 0; padding-right: 0; }
}

/* Banner compatto "lavorazioni in programma" sopra le KPI */
.alert-inwork {
    display: flex;
    align-items: center;
    gap: 14px;
    background: linear-gradient(90deg, #fff8ef 0%, #ffffff 60%);
    border: 1px solid #ffd9b3;
    border-left: 4px solid var(--uvit-orange);
    border-radius: 10px;
    padding: 12px 18px;
    margin-bottom: 18px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.aw-icon { font-size: 22px; flex-shrink: 0; }
.aw-text { flex: 1; font-size: 14px; color: var(--uvit-text); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.aw-chips { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.aw-chip {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}
.chip-today { background: var(--uvit-orange); color: #fff; }
.chip-soon  { background: #fff; color: var(--uvit-orange-dark); border: 1px solid #ffd9b3; }
.chip-more  { background: var(--uvit-gray-light); color: var(--uvit-text); }
.aw-action {
    flex-shrink: 0;
    color: var(--uvit-orange);
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
    white-space: nowrap;
}
.aw-action:hover { color: var(--uvit-orange-dark); text-decoration: underline; }

@media (max-width: 600px) {
    .alert-inwork { flex-wrap: wrap; }
    .aw-action { margin-left: auto; }
}

.pagination {
    display: flex;
    gap: 4px;
    justify-content: center;
    margin: 24px 0 8px;
    flex-wrap: wrap;
}
.pg-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    padding: 6px 12px;
    border: 1px solid var(--uvit-border);
    border-radius: 6px;
    color: var(--uvit-gray-dark);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    background: #fff;
    transition: all 0.15s ease;
}
.pg-link:hover:not(.disabled):not(.active) {
    border-color: var(--uvit-orange);
    color: var(--uvit-orange);
    text-decoration: none;
}
.pg-link.active {
    background: var(--uvit-orange);
    border-color: var(--uvit-orange);
    color: #fff;
}
.pg-link.disabled { color: var(--uvit-gray-light); cursor: not-allowed; }
.pg-ellipsis { color: var(--uvit-gray); padding: 0 4px; }

.card-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 18px;
}
.card-grid .card { margin-bottom: 0; min-width: 0; }
.card-grid .card-fullwidth { grid-column: 1 / -1; }
/* Evita che il contenuto della card (titoli lunghi nelle mini-list) spinga la cell oltre 50% */
.card-grid .mini-main { min-width: 0; }
.card-grid .list-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.card h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--uvit-gray-dark);
    border-bottom: 1px solid var(--uvit-border);
    padding-bottom: 10px;
    margin: 0 0 14px;
}
.card-icon { font-size: 16px; }

.empty-state {
    color: var(--uvit-gray);
    font-size: 14px;
    font-style: italic;
    text-align: center;
    padding: 20px 0;
    margin: 0;
}

.list { list-style: none; padding: 0; margin: 0; }
/* Tabella elenco con colonne fisse allineate tra righe (usata nelle pagine /area/<tipo>) */
.grid-table {
    width: 100%;
    max-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: auto;
}
.grid-table td {
    padding: 9px 10px;
    vertical-align: middle;
    line-height: 1.4;
}
/* Linea continua disegnata come gradient sullo sfondo del tr (mai interrompibile) */
.grid-table tbody tr {
    background-image: linear-gradient(to right, #ececef, #ececef);
    background-size: 100% 1px;
    background-repeat: no-repeat;
    background-position: bottom left;
}
.grid-table tbody tr:last-child { background-image: none; }

/* Titolo + meta entrambi block con ellipsis: niente straripamento nella colonna successiva */
.grid-table .col-title .list-title,
.grid-table .col-title .list-meta {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
.grid-table .col-title .list-meta { color: var(--uvit-gray); font-size: 12px; font-weight: 400; }
/* col-title: prende tutto lo spazio rimanente. max-width:0 trick → forza ellipsis dentro la cella */
.grid-table .col-title  { max-width: 0; width: 100%; }
.grid-table .col-title .list-title,
.grid-table .col-title .list-meta {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* col secondarie: si stringono al contenuto */
.grid-table .col-date,
.grid-table .col-status,
.grid-table .col-amount,
.grid-table .col-pdf { white-space: nowrap; width: 1%; }
.grid-table .col-date   { color: var(--uvit-gray); font-size: 12px; }
.grid-table .col-amount { text-align: right; font-weight: 700; }
.grid-table .col-pdf    { text-align: right; }
.grid-table .col-status .badge + .badge { margin-left: 4px; }
.grid-table .col-pdf .btn-pdf + .btn-pdf { margin-left: 4px; }

/* Header colonne (DataTables) */
.grid-table thead th {
    padding: 10px;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    color: var(--uvit-gray-dark);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--uvit-border);
    background: #fafafa;
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
}
.grid-table thead th.th-right { text-align: right; }
.grid-table thead th.no-sort { cursor: default; }
.grid-table-static thead th { cursor: default; }
/* Sostituisco icone sorting DataTables di default con frecce coerenti col tema */
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc { background-image: none !important; padding-right: 22px !important; position: relative; }
table.dataTable thead .sorting::after,
table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::after {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    font-size: 9px; opacity: 0.6;
}
table.dataTable thead .sorting::after { content: '⇅'; color: var(--uvit-gray); }
table.dataTable thead .sorting_asc::after { content: '▲'; color: var(--uvit-orange); opacity: 1; }
table.dataTable thead .sorting_desc::after { content: '▼'; color: var(--uvit-orange); opacity: 1; }
table.dataTable thead .sorting:hover::after { opacity: 1; color: var(--uvit-orange); }


/* Vecchia variante list-row (residuale, usata per fallback) */
.list-row {
    display: flex;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px dashed var(--uvit-border);
    align-items: center;
}

/* Mini-list: usata SOLO nelle card riassuntive della home — flex semplice, niente colonne fisse */
.mini-list { list-style: none; padding: 0; margin: 0; }
.mini-row {
    display: flex;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px dashed var(--uvit-border);
    align-items: center;
}
.mini-row:last-child { border-bottom: none; }
.mini-main { flex: 1; min-width: 0; }
.mini-side {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex-shrink: 0;
    flex-wrap: wrap;
}
/* Amount uniformi: monospace + width fissa → cifre della stessa larghezza e "€" allineati */
.mini-side .list-amount,
.grid-table .col-amount {
    font-family: "SFMono-Regular", "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}
.mini-side .list-amount {
    display: inline-block;
    min-width: 100px;
    text-align: right;
}
.list-row:last-child { border-bottom: none; }
.col-title { min-width: 0; }
.col-date  { font-size: 12px; color: var(--uvit-gray); text-align: left; white-space: nowrap; }
.col-status { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.col-amount { text-align: right; font-size: 13px; font-weight: 700; color: var(--uvit-text); white-space: nowrap; }
.col-amount.muted { color: var(--uvit-gray-dark); font-weight: 600; }
.col-pdf { text-align: right; }
.col-pdf .pdf-row { justify-content: flex-end; }

.list-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--uvit-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.list-meta { font-size: 12px; color: var(--uvit-gray); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 600px) {
    .list-row {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
        row-gap: 2px;
    }
    .col-date, .col-status, .col-amount, .col-pdf {
        grid-column: 2;
        text-align: right;
        align-items: flex-end;
    }
    .col-title { grid-column: 1; grid-row: span 4; }
    .list-title { white-space: normal; }
}
.muted { color: var(--uvit-gray); font-weight: 400; }

.badge {
    display: inline-block;
    padding: 2px 8px;
    background: var(--uvit-gray-light);
    color: var(--uvit-text);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
/* Varianti stato — DEVONO stare dopo .badge base per vincere per ordine CSS.
   Convenzione: pieno = conclusivo, tenue = in corso/bozza */
.badge-ok    { background: #1f9d55; color: #fff; }
.badge-done  { background: #e3f3e7; color: #1f5e34; border: 1px solid #c2e2cb; }
.badge-info  { background: #d6e8f5; color: #1a4d75; }
.badge-warn  { background: #ffb35c; color: #5e3500; }
.badge-error { background: #d33b2c; color: #fff; }
.badge-soft  { background: #f5f5f7; color: #6a6a70; border: 1px solid var(--uvit-border); }
.badge-today { background: var(--uvit-orange); color: #fff; animation: pulse-soft 2s ease-in-out infinite; }

.pdf-row { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.btn-pdf {
    display: inline-block;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    background: var(--uvit-orange);
    color: #fff !important;
    border-radius: 6px;
    text-decoration: none !important;
    transition: background 0.15s;
}
.btn-pdf:hover { background: var(--uvit-orange-dark); }

/* ===== LIGHTBOX (popup foto / pdf / video) ===== */
body.lb-locked { overflow: hidden; }
.lb-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.92);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 50px 30px 30px;
    animation: lbFadeIn 0.15s ease;
}
@keyframes lbFadeIn { from { opacity: 0; } to { opacity: 1; } }
.lb-wrap {
    position: relative;
    max-width: 95vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.lb-close, .lb-newtab {
    position: absolute;
    top: -40px;
    background: transparent;
    border: 0;
    color: #fff;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 12px;
    text-decoration: none;
    opacity: 0.85;
}
.lb-close { right: 0; font-size: 38px; }
.lb-newtab { right: 50px; font-size: 22px; }
.lb-close:hover, .lb-newtab:hover { opacity: 1; color: var(--uvit-orange); }
.lb-title {
    position: absolute;
    top: -32px;
    left: 0;
    color: rgba(255,255,255,0.85);
    font-size: 14px;
    font-weight: 500;
}
.lb-content {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    display: flex;
}
.lb-image { background: #1a1a1a; }
.lb-image img {
    display: block;
    max-width: 90vw;
    max-height: 85vh;
    width: auto;
    height: auto;
    object-fit: contain;
}
.lb-pdf iframe, .lb-iframe iframe {
    display: block;
    width: 90vw;
    height: 85vh;
    max-width: 1400px;
    border: 0;
}
.lb-youtube { background: #000; }
.lb-youtube iframe {
    display: block;
    width: 85vw;
    height: 48vw; /* ~16:9 */
    max-width: 1280px;
    max-height: 720px;
    border: 0;
}

/* Sotto-titoli dentro card mini-list (es. "Ultime" + "Prossime in scadenza" nella card Tarature) */
.mini-section-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--uvit-gray);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
    padding-bottom: 4px;
    border-bottom: 1px dashed var(--uvit-border);
}

/* Indicatori risorse disponibili nella lista macchine (non cliccabili, solo visuali) */
.media-flags {
    display: inline-flex;
    gap: 4px;
    margin-right: 6px;
    vertical-align: middle;
}
.media-flag {
    display: inline-block;
    font-size: 14px;
    line-height: 1;
    opacity: 0.85;
    cursor: help;
}

/* Icone risorse media (macchine) */
.media-icon {
    display: inline-block;
    font-size: 16px;
    padding: 3px 5px;
    border-radius: 5px;
    text-decoration: none;
    line-height: 1;
    transition: background 0.15s;
}
.media-icon:hover { background: rgba(255,131,0,0.12); text-decoration: none; }
.media-icon + .media-icon { margin-left: 2px; }

/* ===== SCHEDA ARTICOLO ===== */
.art-detail {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    align-items: stretch;
}
.art-detail .card { margin-bottom: 0; }
.art-detail .art-fullwidth { grid-column: 1 / -1; }

.art-hero {
    background: #fff;
    border: 1px solid var(--uvit-border);
    border-radius: 10px;
    padding: 24px;
    text-align: center;
    min-height: 380px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.art-hero img { max-width: 100%; max-height: 480px; height: auto; object-fit: contain; border-radius: 6px; }

/* Box video: stessa dimensione del box foto, video riempie */
.art-video-box { padding: 0; overflow: hidden; }
.art-video {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 380px;
    background: #000;
}
.art-video iframe {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.art-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 12px;
}
.art-thumb {
    display: block;
    aspect-ratio: 4/3;
    background: #f5f5f7;
    border: 1px solid var(--uvit-border);
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.15s ease;
}
.art-thumb:hover {
    border-color: var(--uvit-orange);
    transform: scale(1.02);
    box-shadow: 0 4px 14px rgba(0,0,0,0.08);
}
.art-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.doc-list { list-style: none; padding: 0; margin: 0; }
.doc-list li { margin-bottom: 6px; }
.doc-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--uvit-border);
    border-radius: 8px;
    text-decoration: none !important;
    color: var(--uvit-text);
    background: #fafafa;
    transition: all 0.15s ease;
}
.doc-item:hover { border-color: var(--uvit-orange); background: #fff8ee; }
.doc-icon { font-size: 22px; line-height: 1; flex-shrink: 0; }
.doc-name { display: flex; flex-direction: column; min-width: 0; }
.doc-name strong { font-size: 14px; }
.doc-name small { color: var(--uvit-gray); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 900px) {
    .art-detail { grid-template-columns: 1fr; }
}

/* AGENTE */
.card-agente { background: linear-gradient(180deg, #fff 0%, #fffaf3 100%); }
.agente-nome { font-size: 19px; font-weight: 700; color: var(--uvit-text); }
.agente-ruolo {
    font-size: 12px;
    color: var(--uvit-gray);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 14px;
}
.agente-contatti { list-style: none; padding: 0; margin: 12px 0 0; }
.agente-contatti li { display: flex; gap: 10px; padding: 6px 0; font-size: 14px; align-items: baseline; }
.agente-contatti .lab {
    flex-shrink: 0;
    width: 76px;
    font-size: 11px;
    color: var(--uvit-gray);
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.5px;
}
.agente-contatti a { color: var(--uvit-text); font-weight: 500; }
.agente-contatti a:hover { color: var(--uvit-orange); }

/* ===== LOGIN PAGE ===== */
.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background:
        radial-gradient(circle at 20% 0%, rgba(255,131,0,0.08) 0%, transparent 50%),
        radial-gradient(circle at 80% 100%, rgba(135,135,141,0.1) 0%, transparent 50%),
        var(--uvit-bg);
}
.login-box {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.03);
    padding: 44px 40px 36px;
    max-width: 420px;
    width: 100%;
    text-align: center;
}
.login-logo { margin-bottom: 16px; }
.login-logo img {
    height: 78px;
    width: auto;
    display: inline-block;
}
.login-title {
    font-size: 13px;
    color: var(--uvit-gray);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 0 0 4px;
    font-weight: 600;
}
.login-sub {
    color: var(--uvit-gray-dark);
    font-size: 14px;
    margin: 0 0 28px;
}
.login-form { text-align: left; }
.form-group { margin-bottom: 16px; }
.form-label {
    display: block;
    font-size: 13px;
    color: var(--uvit-gray-dark);
    font-weight: 600;
    margin-bottom: 6px;
}
.form-input {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid var(--uvit-border);
    border-radius: 8px;
    font-size: 15px;
    font-family: inherit;
    color: var(--uvit-text);
    background: #fafafa;
    transition: all 0.15s ease;
}
.form-input:focus {
    outline: none;
    border-color: var(--uvit-orange);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(255,131,0,0.12);
}
.btn-primary {
    width: 100%;
    padding: 13px 20px;
    background: var(--uvit-orange);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: 0.5px;
    transition: all 0.15s ease;
    margin-top: 8px;
}
.btn-primary:hover { background: var(--uvit-orange-dark); }
.btn-primary:active { transform: translateY(1px); }

.alert {
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 14px;
    text-align: left;
}
.alert-error {
    background: #fdecea;
    color: #a01818;
    border: 1px solid #f5c6c0;
}
.alert-ok {
    background: #e7f6ec;
    color: #1a6634;
    border: 1px solid #b8e0c4;
}

.login-footer {
    margin-top: 28px;
    font-size: 12px;
    color: var(--uvit-gray-light);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
    .navbar-inner { padding: 12px 16px; flex-wrap: wrap; gap: 10px; }
    .navbar-company { width: 100%; margin: 4px 0 0 0; order: 3; }
    .company-select { max-width: 100%; flex: 1; }
}
@media (max-width: 700px) {
    .card-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .navbar-user { display: none; }
    .container { margin: 20px auto; padding: 0 16px; }
    .card { padding: 20px; }
    .login-box { padding: 32px 24px 28px; }
    .btn-nav { padding: 6px 10px; font-size: 13px; }
    .kpi-grid, .kpi-grid-4 { grid-template-columns: 1fr 1fr; }
    .kpi-val { font-size: 26px; }
    .list-title { white-space: normal; }
    .search-input { min-width: 0; width: 100%; }
    .search-form { width: 100%; }
}