/* ==========================================================================
   BoxOrganizer — Canvas theme customization
   Design system: RPG Canvas DS · palette "5A — petrolio + ambra".

   Look & feel (from the Claude Design dashboard doc):
   flat surfaces instead of gradients, 1px hairline borders, small radii
   (4px controls / 6px cards), petrol as the structural colour and amber
   reserved for the actions that matter (CTA, scan, upgrade).
   ========================================================================== */

:root {
    /* ---------- Brand palette (5A) ---------- */
    --bo-primary: #12525c;          /* petrol — structure, links, primary btn */
    --bo-primary-dark: #0d3b42;     /* deep petrol — dark panels, footer */
    --bo-primary-rgb: 18, 82, 92;
    --bo-tint: #eaf3f4;             /* petrol tint — app shell, chips, wells */
    --bo-tint-strong: #d7e8ea;

    --bo-accent: #eb9c4d;           /* amber — CTA, scan, upgrade */
    --bo-accent-dark: #d4832f;
    --bo-accent-ink: #333333;       /* text that sits on amber */
    --bo-accent-rgb: 235, 156, 77;

    /* ---------- Ink & neutrals ---------- */
    --bo-ink: #333333;              /* headings inside the app */
    --bo-ink-strong: #212529;       /* page titles */
    --bo-body: #343a40;
    --bo-muted: #4a7a80;            /* petrol-tinted muted text */
    --bo-muted-soft: #7c9ea3;       /* petrol-tinted hint text */

    --bo-surface: #ffffff;
    --bo-bg: #eaf3f4;

    --bo-line: rgba(0, 0, 0, .1);
    --bo-line-soft: rgba(0, 0, 0, .07);

    /* ---------- Shape ---------- */
    --bo-radius: 4px;               /* buttons, inputs */
    --bo-radius-md: 6px;            /* cards */
    --bo-radius-lg: 8px;            /* large panels */
    --bo-shadow-card: 0 1px 2px rgba(0, 0, 0, .04);
    --bo-shadow-lift: 0 6px 20px rgba(18, 82, 92, .12);

    /* ---------- Type ---------- */
    --bo-font-heading: 'Poppins', sans-serif;
    --bo-font-body: 'Open Sans', sans-serif;
    --bo-font-serif: 'Playfair Display', serif;

    /* ---------- Canvas theme colour ---------- */
    --cnvs-themecolor: #12525c;
    --cnvs-themecolor-rgb: 18, 82, 92;

    /* ---------- Bootstrap alignment ---------- */
    --bs-primary: #12525c;
    --bs-primary-rgb: 18, 82, 92;
    --bs-link-color: #12525c;
    --bs-link-color-rgb: 18, 82, 92;
    --bs-link-hover-color: #0d3b42;
    --bs-link-hover-color-rgb: 13, 59, 66;
    --bs-body-color: #343a40;
    --bs-border-color: rgba(0, 0, 0, .1);
    --bs-border-radius: 6px;
    --bs-border-radius-lg: 8px;
    --bs-border-radius-sm: 4px;
    --bs-border-radius-xl: 10px;
    --bs-border-radius-pill: 999px;
}

/* -------------------------------------------------------------------------- */
/* Typography                                                                 */
/* -------------------------------------------------------------------------- */
body {
    font-family: var(--bo-font-body);
    background-color: var(--bo-bg);
    color: var(--bs-body-color);
    line-height: 1.65;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.heading-block h1, .heading-block h2, #logo a {
    font-family: var(--bo-font-heading);
    color: var(--bo-ink-strong);
    font-weight: 600;
    line-height: 1.2;
}

a { color: var(--bo-primary); text-decoration: none; }
a:hover { color: var(--bo-primary-dark); }

.text-muted { color: var(--bo-muted) !important; }
.bo-hint { color: var(--bo-muted-soft); }

/* Playfair italic kicker above a heading (DS ".rpg-before-heading") */
.bo-eyebrow {
    display: block;
    font-family: var(--bo-font-serif);
    font-style: italic;
    font-size: 1rem;
    color: var(--bo-primary);
    margin-bottom: .35rem;
}

/* Small uppercase label used on stat cards */
.bo-label {
    font-family: var(--bo-font-body);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--bo-muted);
}

::selection { background: var(--bo-primary); color: #fff; }

/* -------------------------------------------------------------------------- */
/* Header / navigation                                                        */
/* -------------------------------------------------------------------------- */
#header,
#header.sticky-header #header-wrap {
    background-color: var(--bo-surface);
    border-bottom: 1px solid var(--bo-line-soft);
    box-shadow: none;
}

#logo a {
    display: flex;
    align-items: center;
    gap: .6rem;
    color: var(--bo-ink) !important;
}
#logo a:hover { color: var(--bo-primary) !important; }

/* Squared brand mark: petrol box, white lid, amber core */
.bo-logo-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--bo-radius);
    background: var(--bo-primary);
    color: #fff;
    font-size: 1.2rem;
    flex-shrink: 0;
    box-shadow: none;
}
.bo-logo-badge i { color: #fff; }
.bo-logo-badge.is-accent { background: var(--bo-accent); color: var(--bo-accent-ink); }
.bo-logo-badge.is-accent i { color: var(--bo-accent-ink); }

/* Two-line wordmark "Box / Organizer" */
.bo-wordmark {
    display: flex;
    flex-direction: column;
    font-family: var(--bo-font-heading);
    font-size: 17px;
    line-height: 1.05;
    color: var(--bo-ink);
}
.bo-wordmark .bo-wordmark-top { font-weight: 700; }
.bo-wordmark .bo-wordmark-bottom { font-weight: 300; }
#footer .bo-wordmark { color: #fff; }

/* Barra compatta: con sei voci di menu più quattro azioni, a 992px (dove il
   tema apre il menu esteso) i 15px di padding del tema mandavano tutto a capo. */
#header { --cnvs-primary-menu-padding-x: 10px; }
@media (min-width: 1200px) {
    #header { --cnvs-primary-menu-padding-x: 14px; }
}

.primary-menu ul.menu-container > .menu-item > .menu-link {
    font-family: var(--bo-font-heading);
    font-weight: 500;
    font-size: 13px;
    letter-spacing: .02em;
    color: var(--bo-muted);
}
.primary-menu ul.menu-container > .menu-item:hover > .menu-link {
    color: var(--bo-ink);
}
.primary-menu ul.menu-container > .menu-item.current > .menu-link {
    color: var(--bo-ink);
    box-shadow: inset 0 -2px 0 0 var(--bo-accent);
}
.primary-menu .sub-menu-container {
    border: 1px solid var(--bo-line);
    border-radius: var(--bo-radius-md);
    box-shadow: var(--bo-shadow-lift);
}

/* CTA button living in the header */
.bo-header-cta {
    display: inline-flex;
    border: 0;
    cursor: pointer;
    align-items: center;
    gap: .45rem;
    padding: .55rem 1.1rem;
    border-radius: var(--bo-radius);
    background: var(--bo-primary);
    color: #fff !important;
    font-family: var(--bo-font-heading);
    font-weight: 500;
    font-size: 14px;
    line-height: 1.4;
    box-shadow: none;
    transition: background-color .18s ease;
}
.bo-header-cta:hover { background: var(--bo-primary-dark); color: #fff !important; }

/* Secondary header CTAs: Cerca (outline) and Scansiona (amber) */
.bo-header-cta.is-accent { background: var(--bo-accent); color: var(--bo-accent-ink) !important; }
.bo-header-cta.is-accent:hover { background: var(--bo-accent-dark); color: var(--bo-accent-ink) !important; }
.bo-header-cta.is-ghost {
    padding: calc(.55rem - 1px) calc(1.1rem - 1px);
    background: transparent;
    border: 1px solid var(--bo-line);
    color: var(--bo-primary) !important;
}
.bo-header-cta.is-ghost:hover { background: var(--bo-tint); color: var(--bo-primary) !important; }

.bo-header-actions { gap: .4rem; }
@media (min-width: 1200px) {
    .bo-header-actions { gap: .5rem; }
}

/* Sotto xl le azioni restano solo icona: il testo torna quando c'è spazio. */
@media (max-width: 1199.98px) {
    .bo-header-cta { padding: .55rem .7rem; }
    .bo-header-cta.is-ghost { padding: calc(.55rem - 1px) calc(.7rem - 1px); }
    .bo-header-cta > i { margin: 0; }
}

/* Su telefono in barra ci stanno logo, tre azioni, avatar e hamburger:
   si stringe ancora, altrimenti l'ultima riga va a capo. */
@media (max-width: 575.98px) {
    .bo-header-actions { gap: .25rem; }
    .bo-header-cta { padding: .45rem .55rem; }
    .bo-header-cta.is-ghost { padding: calc(.45rem - 1px) calc(.55rem - 1px); }
}

/* Visitatore anonimo: in barra ci sono solo logo, Accedi e Registrati, quindi
   il testo di entrambi resta scritto a ogni larghezza — un'icona sola non
   direbbe a chi ha già un account dove entrare. */
.bo-header-guest { gap: .4rem; }
@media (max-width: 575.98px) {
    .bo-header-guest { gap: .3rem; }
    .bo-header-guest .bo-header-cta { padding: .45rem .7rem; font-size: 13px; gap: .35rem; }
    .bo-header-guest .bo-header-cta.is-ghost { padding: calc(.45rem - 1px) calc(.7rem - 1px); }
}
/* Sotto i 360px le due etichette non ci stanno: resta il testo, cade l'icona. */
@media (max-width: 359.98px) {
    .bo-header-guest .bo-header-cta > i { display: none; }
}

/* Riga header quando il menu è collassato (il tema toglie .is-expanded-menu):
   logo · azioni · hamburger sulla prima riga, e il menu aperto sotto a tutta
   larghezza. Senza questi ordini il menu aperto spinge azioni e hamburger in
   fondo alla tendina. */
body:not(.is-expanded-menu) .header-row .header-misc { order: 7; }
body:not(.is-expanded-menu) .header-row .primary-menu-trigger { order: 8; }
body:not(.is-expanded-menu) .header-row .primary-menu { order: 9; }

/* I pannelli sticky del contenuto (es. il QR della scatola) usano la utility
   Bootstrap .sticky-*-top, che vale z-index 1020: più dell'header (299), quindi
   coprivano il menu account. Devono stare sopra il contenuto, non sopra la barra. */
.bo-content-wrap [class*="sticky-"] { z-index: 1; }
#header { position: relative; z-index: 300; }

/* Canvas dà a ogni <form> un margin-bottom di 30px: qui i form stanno dentro
   card e righe di lista, dove quello spazio è solo un buco. */
form { margin-bottom: 0; }

/* Usata da tempo nei template per far troncare il testo dentro un flex,
   ma non era definita da nessuna parte. */
.min-width-0 { min-width: 0; }

/* <button> che fa da stretched-link su una card: nessuna cornice propria,
   solo l'area cliccabile stesa dal ::after di Bootstrap. */
/* Superficie cliccabile di una card quando l'azione non è un link ma un
   pulsante (apre un modale). Un <button> vuoto, al contrario di un <a> vuoto,
   resta nel flusso e apre una riga di testo che spinge in basso il contenuto
   della card: per questo si stende sulla card da solo, come .stretched-link,
   invece di affiancarlo. Chi deve restare cliccabile sopra usa z-index: 2. */
.bo-stretched-trigger {
    position: absolute;
    inset: 0;
    z-index: 1;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

/* Immagini ingrandibili: il cursore dice che c'è qualcosa da aprire. */
.bo-zoomable { cursor: zoom-in; }

/* Anteprime negli elenchi: `contain` e non `cover`.
   Ritagliare al centro un oggetto fotografato di sbieco ne mostra un angolo e
   niente altro — e un'anteprima che non fa riconoscere l'oggetto non serve a
   nulla. Intera e centrata perde un po' di spazio ai lati, che il fondo tinta
   rende una cornice invece di un buco. */
.bo-thumb-fit {
    object-fit: contain;
    background: var(--bo-tint);
}

/* Foto dell'interno scatola nell'intestazione, al posto dell'icona. */
.bo-box-photo {
    width: 52px;
    height: 52px;
    object-fit: contain;
    background: var(--bo-tint);
    border-radius: var(--bo-radius);
}
/* Foto dell'oggetto nell'elenco della scatola. */
.bo-item-photo {
    width: 64px;
    height: 64px;
    object-fit: contain;
    background: var(--bo-tint);
    border-radius: var(--bo-radius);
}
.bo-item-photo.is-empty { color: var(--bo-primary); }

/* Su telefono la scheda scatola e le righe oggetto si impilano (foto, testo,
   azioni, ognuno a tutta larghezza): la miniatura affiancata lasciava al testo
   una colonna di poche lettere. A quel punto tanto vale mostrarla grande. */
@media (max-width: 575.98px) {
    .bo-box-photo,
    .bo-item-photo {
        width: 100%;
        height: 150px;
    }
    .bo-feature-ico.bo-box-photo-empty {
        width: 100%;
        height: 96px;
        font-size: 2.2rem;
    }
}
/* Stessa cosa nell'angolo della card, dove l'icona era 42px. */
.bo-card-photo {
    width: 42px;
    height: 42px;
    object-fit: contain;
    background: var(--bo-tint);
    border-radius: var(--bo-radius);
    flex-shrink: 0;
}
/* Codice stampato sull'etichetta della scatola (BX-{id}), messo in evidenza
   sulla sua scheda. È l'unica cosa che l'etichetta e lo scaffale hanno in
   comune: il nome della scatola, che può cambiare, sull'etichetta non c'è.
   Targa, non testo: spaziato e in Poppins grassetto, leggibile a distanza. */
.bo-box-code {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .3rem .7rem;
    border-radius: var(--bo-radius);
    background: var(--bo-tint);
    color: var(--bo-primary);
    font-family: var(--bo-font-heading);
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: .06em;
    line-height: 1.25;
}
.bo-box-code i { font-size: .9rem; opacity: .65; }

/* Nella barra agganciata la targa è la stessa, solo più stretta: lì dentro
   deve stare su una riga insieme al nome della scatola. */
.bo-box-code.is-compact {
    padding: .15rem .5rem;
    font-size: .95rem;
    background: #fff;
}

/* Barra con la targa della scatola, agganciata sotto l'intestazione.
   `fixed` e non `sticky`: .content-wrap di Canvas ha overflow:hidden, che
   diventa il contenitore di scorrimento e rende sticky inerte. Lo scostamento
   dall'alto lo misura lo script nella scheda scatola. */
.bo-box-bar {
    position: fixed;
    top: var(--bo-box-bar-top, 100px);
    left: 0;
    right: 0;
    z-index: 1020;
    padding: .5rem 0;
    background: var(--bo-tint);
    border-bottom: 1px solid var(--bo-line);
    box-shadow: 0 4px 12px rgba(18, 82, 92, .07);
}
.bo-box-bar-name {
    font-family: var(--bo-font-heading);
    font-weight: 500;
    color: var(--bo-primary-dark);
    /* Nomi lunghi non devono spingere fuori il collegamento a destra. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bo-box-bar-top {
    display: inline-flex;
    align-items: center;
    gap: .1rem;
    flex-shrink: 0;
    font-size: .8125rem;
    font-family: var(--bo-font-heading);
    text-decoration: none;
}
.bo-box-bar-top i { font-size: 1.1rem; }

/* Segno di proprietà accanto al nome della scatola: dice a colpo d'occhio se
   è tua o condivisa senza rubare una riga alla scheda. */
.bo-owner-mark {
    font-size: .62em;
    color: var(--bo-muted);
    vertical-align: middle;
    cursor: help;
}

/* Testo che nasconde un tooltip: il tratteggio è l'unico indizio che
   passandoci sopra — o toccandolo — si ottiene dell'altro. */
.bo-hint {
    cursor: help;
    text-decoration: underline dotted var(--bo-line);
    text-underline-offset: .2em;
}

/* Tooltip di Bootstrap vestiti come il resto: stesso petrolio delle barre dei
   modali, stesso raggio. Opachi, perché il grigio traslucido predefinito sopra
   una foto non si legge. */
.tooltip {
    --bs-tooltip-bg: var(--bo-primary-dark);
    --bs-tooltip-color: #fff;
    --bs-tooltip-border-radius: var(--bo-radius);
    --bs-tooltip-opacity: 1;
    --bs-tooltip-font-size: .8125rem;
    --bs-tooltip-max-width: 16rem;
}
@media (max-width: 575.98px) {
    /* La targa sta accanto al riepilogo, non più da sola su una riga: alla
       misura piena copriva il titolo, che è il primo dato da leggere. */
    .bo-box-code { font-size: 1rem; padding: .25rem .6rem; }
    /* Condividi prende lo spazio che avanza, le due icone restano a destra:
       così la fila di pulsanti ha lo stesso peso di quella del QR sotto. */
    .bo-box-actions > .btn:first-child { flex: 1 1 auto; }
}

/* Riquadro immagine nella colonna di sinistra delle card scatola: quadrato e
   largo quanto la colonna. Il segnaposto occupa esattamente lo stesso spazio
   della foto, altrimenti le card senza foto si accorcerebbero. */
.bo-card-figure {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    border-radius: var(--bo-radius);
    object-fit: contain;
    background: var(--bo-tint);
}
.bo-card-figure.is-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bo-tint);
    color: var(--bo-primary);
    font-size: 1.6rem;
}

/* Il modale del lightbox non deve stringere l'immagine. */
.bo-lightbox .modal-body img { max-height: 75vh; }

/* Anteprima nei risultati di ricerca. */
.bo-search-thumb {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: var(--bo-radius);
    object-fit: contain;
    background: var(--bo-tint);
}
.bo-search-thumb.is-empty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bo-tint);
    color: var(--bo-primary);
    font-size: 1.1rem;
}

/* Miniatura del ritaglio, generata sotto al campo file dopo la conferma. */
.bo-crop-preview {
    display: block;
    max-width: 160px;
    max-height: 160px;
    margin-top: .75rem;
    border-radius: var(--bo-radius);
    border: 1px solid var(--bo-line);
    object-fit: cover;
}
/* Il modale di ritaglio è più alto del box immagine: niente overflow strani. */
#boCropModal .cropper-container { max-width: 100%; }

/* Bottone del menu account: avatar + etichetta, pillola discreta. */
/* Solo la foto (o l'iniziale) più la freccia: l'etichetta "Account" resta per
   i lettori di schermo, ma nella barra ruberebbe spazio alle voci di menu. */
.bo-account-btn {
    display: inline-flex;
    align-items: center;
    gap: .15rem;
    padding: .25rem .45rem .25rem .3rem;
    border: 1px solid var(--bo-line);
    border-radius: 999px;
    background: transparent;
    color: var(--bo-primary);
    font-family: var(--bo-font-heading);
    font-weight: 500;
    font-size: 14px;
    line-height: 1.4;
    cursor: pointer;
    transition: background-color .18s ease;
}
.bo-account-btn:hover { background: var(--bo-tint); }

/* Pallino ambra sull'avatar quando c'è qualcosa da decidere nel menu: il
   contatore sta dentro il menù chiuso, dove nessuno lo vede. */
.bo-account-btn.has-badge { position: relative; }
.bo-account-btn.has-badge::before {
    content: "";
    position: absolute;
    top: 2px;
    right: 2px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--bo-accent);
    border: 2px solid var(--bo-surface);
    z-index: 1;
}
.bo-account-btn .bo-user-avatar,
.bo-account-btn .bo-user-avatar-img {
    width: 30px;
    height: 30px;
    font-size: 13px;
}
@media (max-width: 575.98px) {
    /* Nemmeno la freccia: sullo schermo stretto conta ogni pixel. */
    .bo-account-btn { padding: .25rem; border-color: transparent; }
    .bo-account-btn.dropdown-toggle::after { display: none; }
}

.bo-user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--bo-tint);
    border: 1px solid var(--bo-line);
    font-family: var(--bo-font-heading);
    font-weight: 600;
    font-size: 14px;
    color: var(--bo-primary);
}

/* Same footprint as the initial chip, but carrying the uploaded picture. */
.bo-user-avatar-img {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--bo-line);
}

.cnvs-hamburger .cnvs-hamburger-inner,
.cnvs-hamburger .cnvs-hamburger-inner::before,
.cnvs-hamburger .cnvs-hamburger-inner::after {
    background-color: var(--bo-primary) !important;
}

/* -------------------------------------------------------------------------- */
/* Buttons                                                                    */
/* -------------------------------------------------------------------------- */
.btn {
    border-radius: var(--bo-radius);
    font-family: var(--bo-font-heading);
    font-weight: 500;
    box-shadow: none;
}
.btn-primary {
    --bs-btn-bg: var(--bo-primary);
    --bs-btn-border-color: var(--bo-primary);
    --bs-btn-hover-bg: var(--bo-primary-dark);
    --bs-btn-hover-border-color: var(--bo-primary-dark);
    --bs-btn-active-bg: var(--bo-primary-dark);
    --bs-btn-active-border-color: var(--bo-primary-dark);
    --bs-btn-disabled-bg: var(--bo-primary);
    --bs-btn-disabled-border-color: var(--bo-primary);
    box-shadow: none;
}
.btn-outline-primary {
    --bs-btn-color: var(--bo-primary);
    --bs-btn-border-color: rgba(18, 82, 92, .4);
    --bs-btn-hover-bg: var(--bo-primary);
    --bs-btn-hover-border-color: var(--bo-primary);
    --bs-btn-active-bg: var(--bo-primary-dark);
    --bs-btn-active-border-color: var(--bo-primary-dark);
}
/* Amber CTA — "Scansiona", "Passa a Plus", primary conversion moments */
.btn-accent,
.btn-warning {
    --bs-btn-color: var(--bo-accent-ink);
    --bs-btn-bg: var(--bo-accent);
    --bs-btn-border-color: var(--bo-accent);
    --bs-btn-hover-color: var(--bo-accent-ink);
    --bs-btn-hover-bg: var(--bo-accent-dark);
    --bs-btn-hover-border-color: var(--bo-accent-dark);
    --bs-btn-active-color: var(--bo-accent-ink);
    --bs-btn-active-bg: var(--bo-accent-dark);
    --bs-btn-active-border-color: var(--bo-accent-dark);
    font-weight: 600;
    box-shadow: none;
}
/* Variante contorno dell'ambra: Bootstrap non la genera per un colore nostro. */
.btn-outline-accent {
    --bs-btn-color: var(--bo-accent-dark);
    --bs-btn-border-color: var(--bo-accent);
    --bs-btn-bg: transparent;
    --bs-btn-hover-color: var(--bo-accent-ink);
    --bs-btn-hover-bg: var(--bo-accent);
    --bs-btn-hover-border-color: var(--bo-accent);
    --bs-btn-active-color: var(--bo-accent-ink);
    --bs-btn-active-bg: var(--bo-accent-dark);
    --bs-btn-active-border-color: var(--bo-accent-dark);
    box-shadow: none;
}
.btn-success {
    --bs-btn-bg: var(--bo-primary);
    --bs-btn-border-color: var(--bo-primary);
    --bs-btn-hover-bg: var(--bo-primary-dark);
    --bs-btn-hover-border-color: var(--bo-primary-dark);
    --bs-btn-active-bg: var(--bo-primary-dark);
    box-shadow: none;
}
.btn-outline-secondary {
    --bs-btn-color: var(--bo-muted);
    --bs-btn-border-color: var(--bo-line);
    --bs-btn-hover-bg: var(--bo-tint);
    --bs-btn-hover-color: var(--bo-primary);
    --bs-btn-hover-border-color: var(--bo-line);
}
.btn-light {
    --bs-btn-bg: #fff;
    --bs-btn-border-color: #fff;
    --bs-btn-color: var(--bo-primary);
    --bs-btn-hover-bg: var(--bo-tint);
    --bs-btn-hover-border-color: var(--bo-tint);
    --bs-btn-hover-color: var(--bo-primary-dark);
}
.btn-gradient { /* kept for compatibility — now a flat petrol button */
    background: var(--bo-primary);
    border: 0;
    color: #fff;
    box-shadow: none;
}
.btn-gradient:hover { background: var(--bo-primary-dark); color: #fff; }
.btn-lg { padding: .75rem 1.4rem; font-size: 1rem; }

/* -------------------------------------------------------------------------- */
/* Nav pills — sotto-navigazione del profilo                                   */
/* -------------------------------------------------------------------------- */
/* Il tema Canvas compila il suo blu (#193769) dentro le variabili delle pills:
   sono valori già risolti, quindi ridefinire --bs-primary in :root non li
   tocca. Vanno riscritti qui, come si fa per i bottoni. */
.nav-pills {
    --bs-nav-pills-link-active-bg: var(--bo-primary);
    --bs-nav-pills-link-active-color: #fff;
}

/* -------------------------------------------------------------------------- */
/* Cards & surfaces                                                           */
/* -------------------------------------------------------------------------- */
.card {
    background: var(--bo-surface);
    border: 1px solid var(--bo-line);
    border-radius: var(--bo-radius-md);
    box-shadow: none;
}
.card.shadow-sm { box-shadow: var(--bo-shadow-card) !important; }
.card-body { padding: 1.5rem; }

/* Interactive card (box tiles, quick actions) */
.bo-tile { transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.bo-tile:hover {
    border-color: rgba(18, 82, 92, .45);
    box-shadow: var(--bo-shadow-lift);
    transform: translateY(-2px);
}

/* Dark petrol panel (plan card, callouts) */
.bo-panel-dark {
    background: var(--bo-primary-dark);
    border-color: var(--bo-primary-dark);
    color: #fff;
}
.bo-panel-dark h1, .bo-panel-dark h2, .bo-panel-dark h3,
.bo-panel-dark h4, .bo-panel-dark h5, .bo-panel-dark .h5 { color: #fff; }
.bo-panel-dark .bo-label { color: rgba(255, 255, 255, .65); }
.bo-panel-dark .bo-stat-value { color: #fff; }
.bo-panel-dark p { color: rgba(255, 255, 255, .8); }
.bo-panel-dark a { color: rgba(255, 255, 255, .78); }
.bo-panel-dark a:hover { color: #fff; }

/* -------------------------------------------------------------------------- */
/* Stat cards — flat surfaces, big Poppins figure, optional usage meter        */
/* -------------------------------------------------------------------------- */
.bo-stat { position: relative; overflow: hidden; }
.bo-stat .card-body { padding: 1.5rem; }
.bo-stat-value {
    font-family: var(--bo-font-heading);
    font-weight: 700;
    font-size: 2.4rem;
    line-height: 1;
    color: var(--bo-ink);
}
.bo-stat-sub {
    font-family: var(--bo-font-heading);
    font-weight: 300;
    font-size: 1.25rem;
    color: var(--bo-muted-soft);
}
.bo-stat-note { font-size: .8125rem; line-height: 1.6; color: var(--bo-muted-soft); }
.bo-panel-dark .bo-stat-note { color: rgba(255, 255, 255, .7); }

/* Usage meter (plan consumption) */
.bo-meter {
    height: 6px;
    border-radius: 3px;
    background: var(--bo-tint);
    overflow: hidden;
}
.bo-meter-fill { height: 100%; background: var(--bo-primary); border-radius: 3px; }
.bo-meter-fill.is-full { background: var(--bo-accent); }
.bo-panel-dark .bo-meter { background: rgba(255, 255, 255, .18); }
.bo-panel-dark .bo-meter-fill { background: var(--bo-accent); }

/* Square icon well — replaces the old rounded gradient bubble */
.bo-feature-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: var(--bo-radius);
    background: var(--bo-tint);
    color: var(--bo-primary);
    font-size: 1.4rem;
    margin-bottom: 1rem;
    flex-shrink: 0;
}
.bo-feature-ico.is-accent { background: rgba(235, 156, 77, .18); color: var(--bo-accent-dark); }

/* Icona contestuale a sinistra del titolo di pagina: le schermate si assomigliano,
   questa dice a colpo d'occhio dove siamo. Come .bo-feature-ico ma senza il
   margine sotto e dimensionata sull'altezza di un h3. */
.bo-page-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--bo-radius);
    background: var(--bo-tint);
    color: var(--bo-primary);
    font-size: 1.3rem;
    flex-shrink: 0;
}
.bo-page-ico.is-accent { background: rgba(235, 156, 77, .18); color: var(--bo-accent-dark); }
@media (max-width: 575.98px) {
    .bo-page-ico { width: 40px; height: 40px; font-size: 1.1rem; }
}

/* -------------------------------------------------------------------------- */
/* Chips / tags / badges                                                      */
/* -------------------------------------------------------------------------- */
.badge { font-family: var(--bo-font-heading); font-weight: 600; letter-spacing: .01em; }
.badge.rounded-pill { padding: .4em .8em; }

.bo-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    /* Mai a capo: con il raggio a pillola, un'etichetta di due parole che si
       spezza diventa un cerchio con il testo dentro — "Lettura e scrittura"
       era illeggibile in una colonna stretta. Se non c'è spazio, è il
       contenitore a dover scorrere. */
    white-space: nowrap;
    font-size: 12px;
    font-weight: 600;
    color: var(--bo-primary);
    background: var(--bo-tint);
    border: 0;
    border-radius: 999px;
    padding: .35rem .7rem;
    text-decoration: none;
}
a.bo-chip:hover { background: var(--bo-tint-strong); color: var(--bo-primary-dark); }
.bo-chip.is-accent { background: rgba(235, 156, 77, .2); color: #8a5a17; }
.bo-chip.is-plain { background: #fff; border: 1px solid var(--bo-line); color: var(--bo-muted); }

/* Tag: un solo colore per tutti. I tag sono liberi e potenzialmente infiniti,
   una tavolozza per nome darebbe accostamenti casuali senza alcun significato. */
.bo-tag {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    color: #fff;
    background: var(--bo-primary);
    border: 1px solid var(--bo-primary);
    border-radius: 999px;
    padding: .3rem .7rem;
    text-decoration: none;
}
a.bo-tag:hover { background: var(--bo-primary-dark); border-color: var(--bo-primary-dark); color: #fff; }
/* Tag selezionato nel filtro dell'archivio: in negativo, per distinguerlo. */
.bo-tag.is-active {
    background: #fff;
    color: var(--bo-primary);
}

/* -------------------------------------------------------------------------- */
/* Barra filtri: una riga sola, campi affiancati con l'etichetta sopra         */
/* -------------------------------------------------------------------------- */
.bo-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .75rem 1.25rem;
    padding: 1rem 1.25rem;
    background: var(--bo-surface);
    border: 1px solid var(--bo-line);
    border-radius: var(--bo-radius-md);
}
.bo-filter-field {
    flex: 1 1 14rem;
    min-width: 0;
}
.bo-filter-field .bo-label {
    display: block;
    margin-bottom: .35rem;
}
/* Campo di sola lettura che apre la modale: si comporta da pulsante. */
.bo-filter-display {
    cursor: pointer;
    background: var(--bo-tint);
    text-overflow: ellipsis;
}
.bo-filter-display:focus {
    background: var(--bo-tint);
    box-shadow: none;
}
.bo-filter-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
}

/* Chip del selettore sul form scatola: spenti finché non sono applicati,
   così si vede a colpo d'occhio quali tag ha già questa scatola. */
button.bo-tag.is-selectable {
    background: transparent;
    color: var(--bo-primary);
    cursor: pointer;
}
button.bo-tag.is-selectable:hover { background: var(--bo-tint); }
button.bo-tag.is-selectable.is-active {
    background: var(--bo-primary);
    color: #fff;
}

/* Chip del filtro nella modale: stesso componente, ma un po' più grandi
   perché lì sono l'unico comando e vanno centrate col dito. */
.bo-chip-grid {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}
.bo-chip-grid .bo-tag {
    font-size: 13px;
    padding: .4rem .85rem;
}
/* Filtro a righe: un valore per riga con la sua nota. Serve dove il nome da
   solo non basta a riconoscere la voce — un deposito ha un indirizzo e un
   numero di scatole dentro, che in una chip non ci stanno. */
.bo-option-rows .list-group-item {
    display: flex;
    align-items: center;
    gap: .85rem;
    text-align: left;
    border-color: var(--bo-line);
}
.bo-option-rows .list-group-item.is-active {
    background: var(--bo-tint);
    border-color: var(--bo-primary);
    z-index: 1; /* il bordo colorato non deve finire sotto la riga seguente */
}
.bo-option-rows .bo-option-name {
    font-family: var(--bo-font-heading);
    font-weight: 500;
    color: var(--bo-ink);
}
/* "Senza deposito" non è un deposito: in corsivo smorzato si legge come la voce
   a sé che è anche quando sta in fila con le altre. */
.bo-option-rows .is-neutral .bo-option-name {
    font-weight: 400;
    font-style: italic;
    color: var(--bo-muted);
}

/* Casella di selezione della riga: si riempie quando la voce è attiva. */
.bo-option-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border: 1px solid var(--bo-line);
    border-radius: var(--bo-radius);
    background: #fff;
    color: transparent;
    font-size: .85rem;
}
.is-active > .bo-option-check {
    background: var(--bo-primary);
    border-color: var(--bo-primary);
    color: #fff;
}

/* "Senza deposito" non è un deposito: tratteggiata, così si legge come la
   voce a sé che è anche quando sta in fila con le altre. */
button.bo-tag.is-selectable.is-neutral {
    border-style: dashed;
    border-color: var(--bo-line);
    color: var(--bo-muted);
}
button.bo-tag.is-selectable.is-neutral:hover { background: var(--bo-tint); }
button.bo-tag.is-selectable.is-neutral.is-active {
    background: var(--bo-muted);
    border-color: var(--bo-muted);
    border-style: solid;
    color: #fff;
}

/* Testata in petrolio: la modale si apre su una pagina già chiara, la fascia
   scura le dà un bordo superiore invece di lasciarla sfumare nel fondo.
   La X di Bootstrap è un SVG nero: la si inverte invece di riscriverla. */
/* Un solo aspetto per tutti i modali del sito. Le misure passano dalle
   variabili di Bootstrap, così header, corpo e piè di pagina restano d'accordo
   fra loro senza tre regole scollegate: il contenuto sta più larghi dei 16pt
   di serie, che con le chip a filo del bordo si vedevano tutti. */
.modal {
    --bs-modal-padding: 1.75rem;
    --bs-modal-header-padding: 1.15rem 1.75rem;
    --bs-modal-header-border-width: 0;
    --bs-modal-footer-border-color: var(--bo-line);
}
.modal-content {
    border: 0;
    border-radius: var(--bo-radius-md);
    box-shadow: var(--bo-shadow-lift);
    /* La barra dell'intestazione arriva ai bordi: senza questo gli angoli
       colorati sborderebbero dal raggio della cornice. */
    overflow: hidden;
}
@media (max-width: 575.98px) {
    .modal {
        --bs-modal-padding: 1.25rem;
        --bs-modal-header-padding: 1rem 1.25rem;
    }
}

/* Intestazione: barra petrolio, titolo a sinistra, chiusura a destra (la spinge
   lì il margine automatico di Bootstrap). Il markup sta in
   templates/_modal_header.html.twig, che è l'unico posto da cambiare. */
.bo-modal-header {
    justify-content: flex-start;
    align-items: center;
    gap: .85rem;
    background: var(--bo-primary);
    color: #fff;
}
/* I titoli hanno un colore loro (--bo-ink-strong): il bianco ereditato non
   basta, va riscritto come si fa già in .bo-panel-dark. */
.bo-modal-header h1, .bo-modal-header h2, .bo-modal-header h3,
.bo-modal-header .h4, .bo-modal-header .h5, .bo-modal-header .h6 { color: #fff; }
/* Occhiello su fondo scuro: ambra, come nell'hero. */
.bo-modal-header .bo-eyebrow { color: var(--bo-accent); margin-bottom: .1rem; }
.bo-modal-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
    opacity: .8;
}
.bo-modal-header .btn-close:hover { opacity: 1; }

/* Scelta fra AND e OR sopra le chip del filtro tag. */
.bo-filter-mode {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .75rem;
}

/* -------------------------------------------------------------------------- */
/* Dashed "add" tile                                                          */
/* -------------------------------------------------------------------------- */
.bo-dashed {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .6rem;
    border: 1px dashed rgba(18, 82, 92, .35);
    border-radius: var(--bo-radius-md);
    background: transparent;
    padding: 1.4rem;
    color: var(--bo-ink);
    text-decoration: none;
    transition: border-color .18s ease, background-color .18s ease;
}
.bo-dashed:hover { border-color: var(--bo-primary); background: rgba(255, 255, 255, .55); color: var(--bo-ink); }
.bo-dashed i { color: var(--bo-primary); font-size: 1.15rem; }

/* -------------------------------------------------------------------------- */
/* Activity list                                                              */
/* -------------------------------------------------------------------------- */
.bo-activity { padding: .5rem 1.5rem; }
.bo-activity-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--bo-line-soft);
    font-size: .875rem;
    color: var(--bo-ink);
}
.bo-activity-row:last-child { border-bottom: 0; }
.bo-activity-row > i { width: 20px; font-size: .95rem; color: var(--bo-primary); flex-shrink: 0; }
.bo-activity-row > i.is-accent { color: var(--bo-accent); }
.bo-activity-time { margin-left: auto; font-size: .8125rem; color: var(--bo-muted-soft); white-space: nowrap; }

/* -------------------------------------------------------------------------- */
/* Hero / dark blocks                                                         */
/* -------------------------------------------------------------------------- */
.bo-hero {
    position: relative;
    background: var(--bo-primary-dark);
    color: #fff;
    border-radius: var(--bo-radius-lg);
    overflow: hidden;
    padding: clamp(2.25rem, 5vw, 4rem);
}
.bo-hero h1, .bo-hero h2, .bo-hero p { color: #fff; position: relative; z-index: 1; }
.bo-hero .lead { color: rgba(255, 255, 255, .85); }
.bo-hero .bo-eyebrow { color: var(--bo-accent); }

/* Auth split card */
.bo-auth-card {
    border-radius: var(--bo-radius-lg);
    overflow: hidden;
    border: 1px solid var(--bo-line);
    box-shadow: var(--bo-shadow-lift);
}
.bo-auth-aside {
    background: var(--bo-primary-dark);
    color: #fff;
    position: relative;
}
.bo-auth-aside h2, .bo-auth-aside p, .bo-auth-aside li { color: #fff; }
.bo-auth-aside .bi-check-circle-fill { color: var(--bo-accent); }

/* -------------------------------------------------------------------------- */
/* Forms                                                                      */
/* -------------------------------------------------------------------------- */
.form-control, .form-select {
    border-radius: var(--bo-radius);
    border-color: rgba(0, 0, 0, .12);
    padding: .65rem .9rem;
    font-size: .95rem;
}
.form-control:focus, .form-select:focus {
    border-color: var(--bo-primary);
    box-shadow: 0 0 0 .2rem rgba(18, 82, 92, .12);
}
.form-label {
    font-family: var(--bo-font-heading);
    font-weight: 500;
    font-size: .9rem;
    color: var(--bo-ink);
}
.input-group-text {
    background: var(--bo-tint);
    border-color: rgba(0, 0, 0, .12);
    color: var(--bo-primary);
    border-radius: var(--bo-radius);
}
.form-check-input:checked { background-color: var(--bo-primary); border-color: var(--bo-primary); }
.form-check-input:focus { border-color: var(--bo-primary); box-shadow: 0 0 0 .2rem rgba(18, 82, 92, .12); }

/* -------------------------------------------------------------------------- */
/* Alerts / lists / tables                                                    */
/* -------------------------------------------------------------------------- */
.alert { border: 1px solid transparent; border-radius: var(--bo-radius-md); font-size: .95rem; }

/* Esiti delle azioni: sovrapposti in alto a destra, sotto l'intestazione
   agganciata. Fuori dal flusso, così la comparsa non sposta il contenuto
   sotto le dita di chi ha appena premuto il pulsante. */
.bo-flash-stack {
    position: fixed;
    /* L'altezza vera dell'intestazione la misura lo script in base.html.twig
       (cambia fra telefono e desktop): questo è solo il ripiego. */
    top: var(--bo-flash-top, calc(var(--cnvs-header-height, 100px) + .75rem));
    right: 1rem;
    z-index: 1090;
    width: min(24rem, calc(100vw - 2rem));
    display: flex;
    flex-direction: column;
    gap: .5rem;
    /* La pila non deve intercettare i click dove non c'è un avviso. */
    pointer-events: none;
}
.bo-flash {
    margin: 0;
    pointer-events: auto;
    /* Sollevato dalla pagina che gli scorre sotto. */
    box-shadow: var(--bo-shadow-lift);
}
@media (max-width: 575.98px) {
    /* Su telefono l'intestazione è più bassa e lo spazio orizzontale poco:
       l'avviso si stende da bordo a bordo. */
    .bo-flash-stack {
        top: var(--bo-flash-top, calc(var(--cnvs-header-height-sm, 60px) + .75rem));
        left: .75rem;
        right: .75rem;
        width: auto;
    }
}
.alert-success { background: var(--bo-tint); color: var(--bo-primary-dark); border-color: rgba(18, 82, 92, .18); }
.alert-info { background: var(--bo-tint); color: var(--bo-primary-dark); border-color: rgba(18, 82, 92, .18); }
.alert-warning { background: #fdf1e3; color: #8a5a17; border-color: rgba(235, 156, 77, .4); }
.alert-danger { background: #fbeaec; color: #8f2230; border-color: rgba(192, 41, 66, .25); }

.list-group { border-radius: var(--bo-radius-md); }
.list-group-item { border-color: var(--bo-line-soft); }
.list-group-item:first-child { border-top-left-radius: var(--bo-radius-md); border-top-right-radius: var(--bo-radius-md); }
.list-group-item:last-child { border-bottom-left-radius: var(--bo-radius-md); border-bottom-right-radius: var(--bo-radius-md); }
.list-group-item-action:hover { background: var(--bo-tint); }

/* Riga raggiunta da un'ancora (#oggetto-N): ci si arriva dalla ricerca o
   dall'elenco dei prelevati, dove si sapeva già quale oggetto si voleva. Un
   lampo ambra all'arrivo, poi resta il filo laterale: in una scatola piena,
   un'evidenziazione che svanisce del tutto lascia di nuovo a cercare a mano. */
.list-group-item:target {
    background: var(--bo-tint);
    box-shadow: inset 3px 0 0 var(--bo-accent);
    animation: bo-target-flash 1.8s ease-out;
}
@keyframes bo-target-flash {
    from { background-color: rgba(235, 156, 77, .38); }
    to { background-color: var(--bo-tint); }
}
@media (prefers-reduced-motion: reduce) {
    .list-group-item:target { animation: none; }
}
/* Sopra i 992px l'intestazione è agganciata in alto e coprirebbe la riga
   verso cui il browser scorre. */
.list-group-item[id^="oggetto-"] { scroll-margin-top: 1.5rem; }
@media (min-width: 992px) {
    .list-group-item[id^="oggetto-"] { scroll-margin-top: 7rem; }
}

/* Su telefono ogni oggetto è impilato e alto mezza schermata: separati da un
   filo di bordo si leggono come un blocco unico, e la foto del secondo sembra
   appartenere al primo. L'elenco si scompone in schede staccate. */
@media (max-width: 575.98px) {
    .bo-item-list {
        display: flex;
        flex-direction: column;
        gap: .85rem;
        /* Le ombre le portano le singole schede, non più il contenitore. */
        box-shadow: none !important;
    }
    .bo-item-list > .list-group-item {
        border: 1px solid var(--bo-line);
        border-radius: var(--bo-radius-md);
    }
}

.table { --bs-table-border-color: var(--bo-line-soft); }
.table > thead th {
    font-family: var(--bo-font-body);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--bo-muted);
    border-bottom-color: var(--bo-line);
}

.breadcrumb { font-size: .875rem; }
.breadcrumb-item a { color: var(--bo-muted); }
.breadcrumb-item.active { color: var(--bo-ink); }

/* Empty-state block */
.bo-empty {
    text-align: center;
    padding: 3rem 1.5rem;
    border-radius: var(--bo-radius-md);
    background: var(--bo-surface);
    border: 1px dashed rgba(18, 82, 92, .3);
}
.bo-empty-ico { font-size: 2.75rem; color: var(--bo-primary); opacity: .55; }

/* Section heading with amber rule */
.bo-section-title {
    position: relative;
    padding-bottom: .55rem;
    margin-bottom: 1.25rem;
}
.bo-section-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 44px;
    height: 3px;
    border-radius: 2px;
    background: var(--bo-accent);
}

/* Header row: title left, "see all" link right */
.bo-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1rem;
}
.bo-section-head h2, .bo-section-head h3, .bo-section-head h4 { margin: 0; color: var(--bo-ink); }
.bo-section-head a {
    font-family: var(--bo-font-heading);
    font-size: .875rem;
    font-weight: 500;
    white-space: nowrap;
}

/* -------------------------------------------------------------------------- */
/* Footer                                                                     */
/* -------------------------------------------------------------------------- */
#footer {
    background: var(--bo-primary-dark);
    color: rgba(255, 255, 255, .75);
    border: 0;
    margin-top: 3rem;
}
#footer a { color: rgba(255, 255, 255, .8); }
#footer a:hover { color: var(--bo-accent); }
#footer h4, #footer h5 { color: #fff; }
#copyrights {
    background: #082b31;
    color: rgba(255, 255, 255, .55);
    padding: 1.1rem 0;
    font-size: .85rem;
    border-top: 1px solid rgba(255, 255, 255, .08);
}
#copyrights a { color: rgba(255, 255, 255, .7); }

/* GoTo top */
#gotoTop { background-color: var(--bo-primary); border-radius: var(--bo-radius); }
#gotoTop:hover { background-color: var(--bo-accent); color: var(--bo-accent-ink); }

/* -------------------------------------------------------------------------- */
/* Utilities                                                                  */
/* -------------------------------------------------------------------------- */
.bo-content-wrap { padding-top: 2.25rem; padding-bottom: 3rem; }
@media (max-width: 575.98px) {
    /* Su telefono lo schermo è tutto verticale: 2.25rem fra la barra e la
       briciola di pane sono mezzo pollice buttato prima ancora del titolo. */
    .bo-content-wrap { padding-top: 1.1rem; padding-bottom: 2rem; }
}
.bo-surface { background: var(--bo-surface); }
.bo-tint-bg { background: var(--bo-tint); }
.text-accent { color: var(--bo-accent-dark) !important; }
.text-petrol { color: var(--bo-primary) !important; }
.text-gradient { color: var(--bo-primary); }
.bo-qr-well {
    display: inline-block;
    padding: 1rem;
    border-radius: var(--bo-radius-md);
    background: var(--bo-tint);
}