/* ============================================================
   specIAlist — AD-MYRA inspired design system
   Minimalist · Elegant · Portfolio-Centric
   ============================================================ */

/* --- Inter (clean, architectural feel) -----------------------
   L'@import DEVE stare prima di qualsiasi regola: stava piu' in basso, dopo
   :root, e in quella posizione il browser lo scarta senza dire niente — tutto
   il sito girava sul fallback Helvetica/Arial. Qui si chiedono anche i pesi
   700/800, usati da titoli e numeri: senza, il browser li ingrassava a mano. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* --- Barra di scorrimento: il posto e' sempre riservato -------
   `overflow-y: overlay` non esiste piu' (Chrome lo tratta come auto): la barra
   appariva sulle pagine lunghe e sparuiva su quelle corte, spostando il
   contenuto di 15px — due tab della stessa pagina finivano larghe diverse.
   `scrollbar-gutter: stable` tiene il posto anche quando la barra non c'e'. */
html { scrollbar-gutter: stable; }

/* --- Palette ------------------------------------------------ */
:root {
    --white:        #FFFFFF;
    /* The ground is warm by a hair. It used to be #FAFAFA — a perfectly neutral
       250/250/250, no temperature at all — while every accent in this palette is
       warm, so the warmth read as isolated specks instead of atmosphere. Six
       points of warm bias is invisible as a colour and decisive as a room. It
       also restores a real ladder of surfaces: warm ground, PURE WHITE card that
       now lifts off it, greige-light for anything recessed. Cards separate
       without needing a border. */
    /* Il fondo scende di un passo: con #FAF8F4 la card bianca ci stava sopra a
       1.06 di contrasto, cioe' non ci stava sopra affatto. */
    --ice:          #F6F2EC;
    --greige-light: #F5F2EF;   /* SUPERFICIE incassata, non bordo: vedi --line */
    --greige:       #D5CABD;
    --greige-dark:  #B8A99A;
    --grey-200:     #E8E8E8;
    --grey-400:     #AAAAAA;
    --grey-500:     #888888;
    --grey-700:     #555555;
    --charcoal:     #333333;
    --ink:          #222222;
    --black:        #000000;
    --accent:       #A89279;       /* warm bronze / ottone pallido */
    --accent-hover: #8C7760;
    --accent-light: #F0EBE3;
    /* Table and section headers had been tinted with --ice, the PAGE GROUND
       token: the same value for the band and for the paper behind it, so a
       header could never separate from the page — only from the white rows.
       A band needs its own step, clearly below both white and the ground. */
    --band:         #EFE9E0;
    /* Il bordo delle cose: greige-light veniva usato anche per questo, e a 1.12 di
       contrasto sul bianco non disegnava niente. Questi due sono SOLO linee —
       --line per il contorno di una card, --line-soft per i tramezzi interni. */
    --line:         #E3DBD1;   /* 1.37 sul bianco: si vede, non urla */
    --line-soft:    #EFEAE3;   /* dentro una card, fra una riga e l'altra */
    --success:      #5B8C5A;
    --success-bg:   #EDF5ED;
    --warning:      #C49A3C;
    --warning-bg:   #FDF6E7;
    --danger:       #B85450;
    --danger-bg:    #FCEEED;
    --info:         #6B8FA3;
    --radius:       3px;
    --radius-lg:    6px;
    /* Ombre calde: su una tavolozza greige un nero puro al 4% legge come una
       sbavatura grigia. Lo showroom lo faceva gia' cosi'; qui si allinea il resto.
       Due strati: uno stretto che appoggia l'oggetto, uno largo che lo solleva. */
    --shadow-sm:    0 1px 2px rgba(60,50,40,.06);
    --shadow:       0 1px 2px rgba(60,50,40,.05), 0 4px 14px rgba(60,50,40,.07);
    --shadow-lg:    0 2px 6px rgba(60,50,40,.06), 0 12px 34px rgba(60,50,40,.12);
    --transition:   .2s ease;
    --font:         'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-mono:    'SF Mono', 'Fira Code', monospace;
}

/* --- Base --------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    background-color: var(--ice);
    font-family: var(--font);
    color: var(--ink);
    font-size: .9375rem;          /* 15px */
    line-height: 1.6;
    letter-spacing: .01em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { color: var(--ink); transition: color var(--transition); }
a:hover { color: var(--accent); }

::selection {
    background: var(--greige);
    color: var(--ink);
}

/* --- Layout ------------------------------------------------- */
.content-wrapper {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2.5rem 3rem;
}

@media (max-width: 992px) {
    .content-wrapper { padding: 1.5rem 1.25rem; }
}

/* --- Page header -------------------------------------------- */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--grey-200);
}

.page-header h2 {
    margin: 0;
    font-weight: 300;
    font-size: 1.75rem;
    letter-spacing: .02em;
    color: var(--ink);
    text-transform: uppercase;
}

/* --- Navbar (dark → elegant charcoal) ----------------------- */
.navbar {
    background-color: var(--ink) !important;
    border-bottom: none;
    padding: .75rem 2rem;
    letter-spacing: .04em;
}

.navbar-brand {
    font-weight: 600;
    font-size: 1.1rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.navbar-brand .brand-spec  { color: var(--white) !important; }
.navbar-brand .brand-ia    { color: var(--accent) !important; }
.navbar-brand .brand-list  { color: var(--grey-400) !important; }

.navbar-dark .navbar-nav .nav-link {
    color: var(--grey-400);
    font-size: .8125rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: .5rem 1rem;
    transition: color var(--transition);
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link.active {
    color: var(--white);
}

.navbar .tenant-label {
    color: var(--grey-500);
    font-weight: 400;
    font-size: .7rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    border-left: 1px solid rgba(255,255,255,.12);
    padding-left: .75rem;
    margin-left: .25rem;
    margin-right: .75rem;
}

/* --- Cards -------------------------------------------------- */
.card {
    /* --grey-200 era un grigio freddo in una tavolozza calda, e sul bianco stava
       a 1.23: il bordo c'era e non si vedeva. */
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    background: var(--white);
    overflow: hidden;
}

.card-header {
    background: var(--white);
    border-bottom: 1px solid var(--grey-200);
    padding: 1rem 1.5rem;
}

.card-header h5 {
    font-weight: 500;
    font-size: .9375rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--charcoal);
    margin: 0;
}

.card-body {
    padding: 1.5rem;
}

.card-stat {
    text-align: center;
    padding: 2rem 1.5rem;
    transition: box-shadow var(--transition);
}

.card-stat:hover {
    box-shadow: var(--shadow);
}

.card-stat .display-6 {
    font-weight: 300;
    font-size: 2.75rem;
    color: var(--ink);
    line-height: 1.1;
    margin-bottom: .5rem;
}

.card-stat .text-muted {
    font-size: .8125rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--grey-500) !important;
}

/* --- Tables ------------------------------------------------- */
.table {
    --bs-table-bg: transparent;
    font-size: .875rem;
}

.table th {
    font-weight: 500;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--grey-500);
    border-bottom: 1px solid var(--grey-200);
    padding: .75rem 1rem;
    white-space: nowrap;
}

.table td {
    padding: .75rem 1rem;
    vertical-align: middle;
    color: var(--charcoal);
    border-bottom: 1px solid #f0f0f0;
}

.table-hover tbody tr:hover {
    background-color: var(--greige-light);
}

.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* --- Buttons ------------------------------------------------ */
.btn {
    font-size: .8125rem;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
    border-radius: var(--radius);
    padding: .5rem 1.25rem;
    transition: all var(--transition);
}

.btn-primary {
    background-color: var(--ink);
    border-color: var(--ink);
    color: var(--white);
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--black);
    border-color: var(--black);
}

.btn-outline-primary {
    color: var(--ink);
    border-color: var(--grey-200);
}
.btn-outline-primary:hover {
    background-color: var(--ink);
    border-color: var(--ink);
    color: var(--white);
}

.btn-outline-secondary {
    color: var(--ink);
    border-color: var(--greige-dark, #B8A99A);
}
.btn-outline-secondary:hover {
    background-color: var(--greige-light);
    border-color: var(--greige);
    color: var(--ink);
}

.btn-outline-info {
    color: var(--accent);
    border-color: var(--greige);
}
.btn-outline-info:hover {
    background-color: var(--accent);
    border-color: var(--accent);
    color: var(--white);
}

.btn-outline-danger {
    color: var(--danger);
    border-color: var(--danger);
}
.btn-outline-danger:hover {
    background-color: var(--danger);
    border-color: var(--danger);
    color: var(--white);
}

.btn-outline-light {
    color: var(--grey-400);
    border-color: rgba(255,255,255,.2);
}
.btn-outline-light:hover {
    background-color: rgba(255,255,255,.1);
    border-color: rgba(255,255,255,.3);
    color: var(--white);
}

.btn-sm {
    font-size: .75rem;
    padding: .35rem .85rem;
}

.btn-success {
    background-color: var(--success);
    border-color: var(--success);
}
.btn-success:hover {
    background-color: #4A7A49;
    border-color: #4A7A49;
}

.btn-warning {
    background-color: var(--accent);
    border-color: var(--accent);
    color: var(--white);
}
.btn-warning:hover {
    background-color: var(--accent-hover);
    border-color: var(--accent-hover);
    color: var(--white);
}

.btn-info {
    background-color: var(--info);
    border-color: var(--info);
    color: var(--white);
}
.btn-info:hover {
    background-color: #5A7E91;
    border-color: #5A7E91;
    color: var(--white);
}

.btn-secondary {
    background-color: var(--grey-500);
    border-color: var(--grey-500);
    color: var(--white);
}
.btn-secondary:hover {
    background-color: var(--grey-700);
    border-color: var(--grey-700);
}

.btn-outline-success {
    color: var(--success);
    border-color: var(--success);
}
.btn-outline-success:hover {
    background-color: var(--success);
    border-color: var(--success);
    color: var(--white);
}

.btn-outline-warning {
    color: var(--accent);
    border-color: var(--accent);
}
.btn-outline-warning:hover {
    background-color: var(--accent);
    border-color: var(--accent);
    color: var(--white);
}

.btn-lg {
    font-size: .875rem;
    padding: .65rem 1.5rem;
}

/* --- Text color overrides ----------------------------------- */
.text-primary   { color: var(--ink) !important; }
.text-success   { color: var(--success) !important; }
.text-danger    { color: var(--danger) !important; }
.text-warning   { color: var(--warning) !important; }
.text-info      { color: var(--info) !important; }

/* --- Subtle backgrounds (Bootstrap 5.3) --------------------- */
.bg-primary-subtle { background-color: var(--greige-light) !important; }
.bg-info-subtle    { background-color: #EBF1F5 !important; }
.bg-success-subtle { background-color: var(--success-bg) !important; }
.bg-warning-subtle { background-color: var(--warning-bg) !important; }
.bg-danger-subtle  { background-color: var(--danger-bg) !important; }

/* --- Table header ------------------------------------------- */
.table-light, .table-light th {
    background-color: var(--band) !important;
    border-color: var(--greige);
}

/* --- Spinner ------------------------------------------------ */
.spinner-border {
    color: var(--accent);
}

/* --- Forms -------------------------------------------------- */
.form-control,
.form-select {
    font-size: .875rem;
    border: 1px solid var(--grey-200);
    border-radius: var(--radius);
    padding: .6rem .85rem;
    color: var(--ink);
    background-color: var(--white);
    transition: border-color var(--transition), box-shadow var(--transition);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(168,146,121,.15);
}

.form-label {
    font-size: .8125rem;
    font-weight: 500;
    color: var(--grey-700);
    letter-spacing: .02em;
    text-transform: uppercase;
    margin-bottom: .35rem;
}

.form-control::placeholder {
    color: var(--grey-400);
}

.form-select-sm,
.form-control-sm {
    font-size: .8125rem;
    padding: .35rem .65rem;
}

/* --- Badges ------------------------------------------------- */
.badge {
    font-weight: 500;
    font-size: .7rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: .3em .65em;
    border-radius: 2px;
}

.bg-primary    { background-color: var(--ink) !important; }
.bg-secondary  { background-color: var(--grey-500) !important; }
.bg-success    { background-color: var(--success) !important; }
.bg-warning    { background-color: var(--warning) !important; color: var(--white) !important; }
.bg-danger     { background-color: var(--danger) !important; }
.bg-info       { background-color: var(--info) !important; }
.bg-dark       { background-color: var(--charcoal) !important; }

/* --- Modals ------------------------------------------------- */
.modal-content {
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.modal-header {
    border-bottom: 1px solid var(--grey-200);
    padding: 1.25rem 1.5rem;
}

.modal-title {
    font-weight: 500;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.modal-body {
    padding: 1.5rem;
}

.modal-footer {
    border-top: 1px solid var(--grey-200);
    padding: 1rem 1.5rem;
}

/* --- Alerts ------------------------------------------------- */
.alert-danger {
    background-color: var(--danger-bg);
    color: var(--danger);
    border-color: transparent;
    font-size: .875rem;
}

.alert-success {
    background-color: var(--success-bg);
    color: var(--success);
    border-color: transparent;
}

/* --- Toasts ------------------------------------------------- */
.toast {
    border-radius: var(--radius);
    font-size: .875rem;
}

/* --- Progress bar ------------------------------------------- */
.progress {
    border-radius: var(--radius);
    background-color: var(--grey-200);
    height: 4px;
}

.progress-bar {
    background-color: var(--accent) !important;
}

.progress-bar.bg-success {
    background-color: var(--success) !important;
}

/* --- List groups -------------------------------------------- */
.list-group-item {
    border-color: var(--grey-200);
    padding: 1rem 1.25rem;
    transition: background-color var(--transition);
}

.list-group-item:hover {
    background-color: var(--greige-light);
}

.list-group-item.active,
.list-group-item-action.active {
    background-color: var(--accent-light);
    border-color: var(--greige);
    color: var(--ink);
}

.list-group-item.active:hover,
.list-group-item-action.active:hover {
    background-color: var(--greige);
    border-color: var(--greige);
    color: var(--ink);
}

/* --- Band labels (budget selector) -------------------------- */
.badge-band {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.2rem;
    text-align: center;
    cursor: pointer;
    padding: .3rem .5rem;
    border-radius: var(--radius);
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .02em;
    transition: all var(--transition);
}

.badge-band.selected {
    background-color: var(--ink);
    color: var(--white);
}

.badge-band:not(.selected) {
    background-color: var(--greige-light);
    color: var(--grey-700);
}

.badge-band:hover:not(.selected) {
    background-color: var(--greige);
    color: var(--ink);
}

/* --- Estimator progress steps ------------------------------- */
.estimator-progress .step {
    display: flex;
    align-items: center;
    padding: .6rem 1rem;
    border-radius: var(--radius);
    text-decoration: none;
    color: inherit;
    font-size: .875rem;
    transition: background-color var(--transition);
}

.estimator-progress .step.active {
    background-color: var(--ink);
    color: var(--white);
}

.estimator-progress .step.completed {
    background-color: var(--success);
    color: var(--white);
}

.estimator-progress .step.pending {
    background-color: var(--greige-light);
    color: var(--grey-500);
}

/* --- Tree sidebar ------------------------------------------- */
.tree-item {
    padding: .5rem .75rem;
    cursor: pointer;
    border-radius: var(--radius);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .875rem;
    transition: background-color var(--transition);
}

.tree-item:hover,
.tree-item.active {
    background-color: var(--accent-light);
}

/* --- Score bars --------------------------------------------- */
.score-bar {
    height: 4px;
    border-radius: 2px;
    background-color: var(--grey-200);
    overflow: hidden;
}

.score-bar-fill {
    height: 100%;
    border-radius: 2px;
    background-color: var(--accent);
}

/* --- Candidate cards ---------------------------------------- */
.candidate-card {
    border: 1px solid var(--grey-200);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    margin-bottom: .75rem;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.candidate-card:hover {
    box-shadow: var(--shadow);
}

.candidate-card.recommended {
    border-color: var(--success);
    background-color: var(--success-bg);
}

.candidate-card.selected {
    border-color: var(--accent);
    background-color: var(--accent-light);
}

/* --- Filter sidebar ----------------------------------------- */
.filter-sidebar {
    border-right: 1px solid var(--grey-200);
    min-height: calc(100vh - 60px);
    padding: 1.25rem;
    background-color: var(--white);
}

/* --- Breadcrumbs -------------------------------------------- */
.breadcrumb {
    font-size: .8125rem;
    margin-bottom: .5rem;
}

.breadcrumb-item a {
    color: var(--grey-500);
    text-decoration: none;
}

.breadcrumb-item a:hover {
    color: var(--accent);
}

.breadcrumb-item.active {
    color: var(--ink);
}

/* --- Text utilities ----------------------------------------- */
.text-muted { color: var(--grey-500) !important; }

.fw-medium { font-weight: 500; }

.text-accent { color: var(--accent); }

small, .small { font-size: .8125rem; }

/* --- Scrollbar ---------------------------------------------- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--greige); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--greige-dark); }

/* --- Print -------------------------------------------------- */
@media print {
    .navbar, .btn, .modal { display: none !important; }
    .content-wrapper { padding: 0; max-width: 100%; }
    .card { border: none; box-shadow: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   MODULI E FINESTRE DI INSERIMENTO (18/08/2026)

   Le finestre erano pile di campi tutti uguali: dodici rettangoli grigi con
   dodici etichette dello stesso peso, nessuna gerarchia, nessun appiglio per
   l'occhio. Qui i campi restano gli stessi — servono tutti — ma vengono
   RAGGRUPPATI per argomento, le scelte diventano visibili invece di essere
   pallini, e ogni campo porta l'icona di cosa contiene.
   Classi riusabili da qualunque finestra dell'app.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Intestazione: cosa sto compilando, e perché ── */
.fm-modal .modal-content { border: none; border-radius: 16px; overflow: hidden; }
.fm-head {
    display: flex; align-items: flex-start; gap: .9rem;
    padding: 1.15rem 1.35rem 1rem;
    border-bottom: 1px solid var(--line, #E3DBD1);
    background: var(--ice, #FAF8F4);
}
.fm-head-icon {
    width: 40px; height: 40px; border-radius: 11px; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    background: var(--accent-light, #F0EBE3); color: var(--accent, #A89279);
    font-size: 1.15rem;
}
.fm-head-txt { min-width: 0; flex: 1; }
.fm-head-txt h5 { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--ink, #222); }
.fm-head-txt p { margin: .1rem 0 0; font-size: .78rem; color: var(--grey-500, #888); }

.fm-body { padding: 1.25rem 1.35rem .5rem; }

/* ── Sezione: un titolo minuto separa gli argomenti ── */
.fm-section { margin-bottom: 1.35rem; }
.fm-section:last-child { margin-bottom: .75rem; }
.fm-section-title {
    display: flex; align-items: center; gap: .5rem; margin-bottom: .7rem;
    font-size: .62rem; font-weight: 700; letter-spacing: 1.5px;
    text-transform: uppercase; color: var(--grey-400, #aaa);
}
.fm-section-title::after {
    content: ''; flex: 1; height: 1px; background: var(--greige-light, #F0EBE3);
}
.fm-section-title i { color: var(--accent, #A89279); font-size: .8rem; }

/* ── Campo: etichetta minuta, icona dentro, respiro ── */
.fm-field { display: flex; flex-direction: column; gap: .3rem; }
.fm-label {
    font-size: .68rem; font-weight: 600; letter-spacing: .3px;
    color: var(--grey-500, #888);
}
.fm-label .req { color: var(--accent, #A89279); }
.fm-input-wrap { position: relative; display: flex; align-items: center; }
.fm-input-wrap > i {
    position: absolute; left: .7rem; font-size: .85rem;
    color: var(--greige, #D4C9BC); pointer-events: none;
}
.fm-input-wrap > i + .form-control,
.fm-input-wrap > i + .form-select { padding-left: 2.1rem; }
.fm-input-wrap .form-control,
.fm-input-wrap .form-select,
.fm-field > .form-control,
.fm-field > textarea.form-control {
    border: 1px solid var(--greige, #D4C9BC); border-radius: 9px;
    padding: .5rem .7rem; font-size: .88rem; background: #fff;
    transition: border-color .15s, box-shadow .15s;
}
.fm-input-wrap .form-control:focus,
.fm-input-wrap .form-select:focus,
.fm-field > .form-control:focus {
    border-color: var(--accent, #A89279);
    box-shadow: 0 0 0 3px rgba(168, 146, 121, .16);
}
.fm-input-wrap:focus-within > i { color: var(--accent, #A89279); }
.fm-hint { font-size: .68rem; color: var(--grey-400, #aaa); }

/* ── Scelta secca: due schede invece di due pallini ── */
.fm-choice { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .6rem; }
.fm-choice input { position: absolute; opacity: 0; pointer-events: none; }
.fm-choice label {
    display: flex; align-items: center; gap: .6rem; cursor: pointer; margin: 0;
    padding: .65rem .8rem; border-radius: 11px;
    border: 1px solid var(--greige, #D4C9BC); background: #fff;
    font-size: .85rem; font-weight: 600; color: var(--grey-700, #555);
    transition: border-color .15s, background .15s, color .15s;
}
.fm-choice label i { font-size: 1.05rem; color: var(--greige, #D4C9BC); }
.fm-choice label:hover { border-color: var(--accent, #A89279); }
.fm-choice input:checked + label {
    border-color: var(--accent, #A89279); background: var(--accent-light, #F0EBE3);
    color: var(--accent-hover, #8C7760);
}
.fm-choice input:checked + label i { color: var(--accent, #A89279); }
.fm-choice input:focus-visible + label { outline: 2px solid var(--accent, #A89279); outline-offset: 2px; }

/* ── Interruttori multipli: pastiglie che si accendono ── */
.fm-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.fm-chips input { position: absolute; opacity: 0; pointer-events: none; }
.fm-chips label {
    display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; margin: 0;
    padding: .35rem .8rem; border-radius: 999px;
    border: 1px solid var(--greige, #D4C9BC); background: #fff;
    font-size: .8rem; font-weight: 600; color: var(--grey-500, #888);
    transition: all .15s;
}
.fm-chips label i { font-size: .8rem; opacity: .55; }
.fm-chips label:hover { border-color: var(--accent, #A89279); color: var(--accent-hover, #8C7760); }
.fm-chips input:checked + label {
    background: var(--accent, #A89279); border-color: var(--accent, #A89279); color: #fff;
}
.fm-chips input:checked + label i { opacity: 1; }
.fm-chips input:focus-visible + label { outline: 2px solid var(--ink, #222); outline-offset: 2px; }

/* ── Piede: la regola a sinistra, le azioni a destra ── */
.fm-foot {
    display: flex; align-items: center; gap: .75rem;
    padding: .9rem 1.35rem; border-top: 1px solid var(--line, #E3DBD1);
    background: var(--ice, #FAF8F4);
}
.fm-foot .fm-req-note { font-size: .7rem; color: var(--grey-400, #aaa); }
.fm-foot .fm-actions { margin-left: auto; display: flex; gap: .5rem; }
.fm-btn {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .5rem 1.1rem; border-radius: 9px; font-size: .85rem; font-weight: 600;
    border: 1px solid var(--greige, #D4C9BC); background: #fff; color: var(--ink, #222);
    cursor: pointer; transition: all .15s;
}
.fm-btn:hover { border-color: var(--accent, #A89279); color: var(--accent-hover, #8C7760); }
.fm-btn.primary { background: var(--ink, #222); border-color: var(--ink, #222); color: #fff; }
.fm-btn.primary:hover { background: #000; border-color: #000; color: #fff; }
.fm-btn.sm { padding: .32rem .7rem; font-size: .78rem; }

/* Il pulsante dentro un avviso: chiaro su fondo colorato, senza rubare la scena
   al messaggio. */
.toast .toast-action {
    background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .45);
    color: #fff; font-size: .74rem; font-weight: 600; padding: .18rem .6rem;
    white-space: nowrap;
}
.toast .toast-action:hover { background: rgba(255, 255, 255, .3); color: #fff; }

/* ── Pagine-elenco (pg-*) ─────────────────────────────────────────────────
   Progetti e Anagrafica sono la stessa pagina con dentro cose diverse: una
   testata che dice quanti sono, una barra sola per cercare e filtrare, pastiglie
   che si cliccano portando il proprio conteggio, righe con il nome in evidenza e
   sotto i dettagli. Stava tutto dentro projects.html; qui vale per entrambe. */
/* ── La pagina raccontava solo l'anagrafica: nome, cliente, stato, data.
      Adesso dice anche a che punto è ciascun progetto. ── */

/* Testata: quanti progetti e quanti in corso, non un titolo secco */
.pg-head { display: flex; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.pg-head h2 { margin: 0; display: flex; align-items: center; gap: .6rem; }
.pg-head .count {
    font-size: .78rem; color: var(--grey-500, #888); padding-bottom: .3rem;
}
.pg-head .ms-auto { margin-left: auto; }

/* La barra dei filtri: tutto su una riga, niente scatola dentro la scatola */
.pg-bar {
    display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
    padding: .7rem .85rem; margin-bottom: 1.1rem;
    background: #fff; border: 1px solid var(--line, #E3DBD1); border-radius: 12px;
    box-shadow: var(--shadow);
}
.pg-search { position: relative; display: flex; align-items: center; min-width: 240px; }
.pg-search i { position: absolute; left: .65rem; color: var(--greige, #D4C9BC); font-size: .85rem; }
.pg-search input {
    width: 100%; padding: .42rem .7rem .42rem 2rem; font-size: .85rem;
    border: 1px solid var(--greige, #D4C9BC); border-radius: 9px; background: #fff;
}
.pg-search input:focus {
    outline: none; border-color: var(--accent, #A89279);
    box-shadow: 0 0 0 3px rgba(168,146,121,.16);
}
.pg-search:focus-within i { color: var(--accent, #A89279); }
.pg-bar-right { margin-left: auto; display: flex; align-items: center; gap: .5rem; }

/* Gli stati: si cliccano e dicono quanti progetti contengono */
.pg-states { display: flex; gap: .4rem; flex-wrap: wrap; }
.pg-state {
    display: inline-flex; align-items: center; gap: .4rem; cursor: pointer;
    padding: .3rem .7rem; border-radius: 999px; border: 1px solid var(--line, #E3DBD1);
    background: #fff; font-size: .78rem; font-weight: 600; color: var(--grey-500, #888);
    transition: all .15s;
}
.pg-state:hover { border-color: var(--accent, #A89279); color: var(--accent-hover, #8C7760); }
.pg-state .n {
    font-size: .68rem; font-weight: 700; padding: 0 .3rem; border-radius: 20px;
    background: var(--greige-light, #F0EBE3); color: var(--grey-500, #888);
    font-variant-numeric: tabular-nums; min-width: 18px; text-align: center;
}
.pg-state.on {
    background: var(--ink, #222); border-color: var(--ink, #222); color: #fff;
}
.pg-state.on .n { background: rgba(255,255,255,.22); color: #fff; }
.pg-state.empty { opacity: .45; }

/* Nome del progetto con il suo colore e, sotto, di cosa è fatto */
.pg-name { display: flex; flex-direction: column; gap: .15rem; }
.pg-name a { font-weight: 600; color: var(--ink, #222); text-decoration: none; }
.pg-name a:hover { color: var(--accent-hover, #8C7760); }
.pg-meta { font-size: .68rem; color: var(--grey-400, #aaa); display: flex; gap: .6rem; flex-wrap: wrap; }
.pg-code {
    font-size: .64rem; font-weight: 700; letter-spacing: .8px;
    color: var(--grey-500, #888); font-variant-numeric: tabular-nums;
}
.pg-code.none { color: var(--greige, #D4C9BC); }

/* Niente progetti: una pagina che dice cosa fare, non una tabella vuota */
.pg-empty {
    text-align: center; padding: 3.5rem 1rem;
    background: #fff; border: 1px dashed var(--greige, #D4C9BC); border-radius: 16px;
}
.pg-empty i { font-size: 2.2rem; color: var(--greige, #D4C9BC); }
.pg-empty h5 { margin: .8rem 0 .3rem; font-size: 1.05rem; font-weight: 700; }
.pg-empty p { font-size: .85rem; color: var(--grey-500, #888); max-width: 420px; margin: 0 auto 1.1rem; }

/* ── Colonne di sezioni ──
   Un modulo lungo non deve diventare un rotolo: le sezioni si affiancano, e
   sotto i 992px tornano una sopra l'altra. */
.fm-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.75rem; }
.fm-cols > div > .fm-section:first-child { padding-top: 0; }
@media (max-width: 991px) { .fm-cols { grid-template-columns: 1fr; } }

/* ── Il riquadro della descrizione ──
   Sta in una colonna di sezioni accanto a un'altra piu' alta o piu' bassa, e il
   suo compito e' pareggiare le due: l'altezza esatta la mette
   allineaDescrizione() quando la finestra si apre, perche' in CSS nessuna delle
   due colonne sa quanto e' alta l'altra. Qui restano solo le due regole che non
   dipendono dalla misura: mai la maniglia per trascinarlo (il riquadro ha gia'
   la misura giusta) e, se il testo non ci sta, la sua barra di scorrimento. */
.fm-field.fm-grow textarea {
    min-height: 68px; resize: none; overflow-y: auto;
}

/* ── Griglia dei campi ── */
.fm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; }
.fm-grid.thirds { grid-template-columns: 2fr 1fr 1fr; }
.fm-grid .span-2 { grid-column: 1 / -1; }
@media (max-width: 575px) {
    .fm-grid, .fm-grid.thirds { grid-template-columns: 1fr; }
}

/* ── Tutte le finestre dell'app, comprese quelle non ancora rifatte a mano ──
   Le classi fm-* sopra sono per le finestre ridisegnate una per una; queste
   regole alzano il livello di TUTTE le altre senza toccarne il markup: bordi
   morbidi, testa e piede su fondo caldo, campi con lo stesso focus bronzo,
   etichette minute che non competono col contenuto. */
.modal-content {
    border: none; border-radius: 16px;
    box-shadow: 0 18px 50px rgba(60, 50, 40, .18);
}
.modal-header {
    padding: 1.05rem 1.3rem;
    background: var(--ice, #FAF8F4);
    border-bottom: 1px solid var(--line, #E3DBD1);
}
.modal-title { font-size: 1.02rem; font-weight: 700; color: var(--ink, #222); }
.modal-body { padding: 1.25rem 1.3rem; }
.modal-footer {
    padding: .85rem 1.3rem; gap: .5rem;
    background: var(--ice, #FAF8F4);
    border-top: 1px solid var(--line, #E3DBD1);
}

/* Campi: l'etichetta indica, il contenuto conta */
.modal .form-label {
    font-size: .68rem; font-weight: 600; letter-spacing: .3px;
    color: var(--grey-500, #888); margin-bottom: .3rem;
}
.modal .form-control,
.modal .form-select {
    border-radius: 9px; border-color: var(--greige, #D4C9BC);
    padding: .5rem .7rem; font-size: .88rem;
}
.modal .form-control-sm, .modal .form-select-sm { border-radius: 8px; font-size: .82rem; }
.modal .form-control:focus,
.modal .form-select:focus {
    border-color: var(--accent, #A89279);
    box-shadow: 0 0 0 3px rgba(168, 146, 121, .16);
}
.modal .form-check-input:checked {
    background-color: var(--accent, #A89279); border-color: var(--accent, #A89279);
}
.modal .form-text { font-size: .68rem; color: var(--grey-400, #aaa); }

/* Azioni del piede: stesso registro dei pulsanti ridisegnati */
.modal-footer .btn {
    border-radius: 9px; font-size: .85rem; font-weight: 600; padding: .5rem 1.1rem;
}
.modal-footer .btn-primary,
.modal-footer .btn-dark {
    background: var(--ink, #222); border-color: var(--ink, #222); color: #fff;
}
.modal-footer .btn-primary:hover,
.modal-footer .btn-dark:hover { background: #000; border-color: #000; }
.modal-footer .btn-secondary {
    background: #fff; color: var(--ink, #222); border-color: var(--greige, #D4C9BC);
}
.modal-footer .btn-secondary:hover {
    background: #fff; color: var(--accent-hover, #8C7760); border-color: var(--accent, #A89279);
}

/* ══════════════════════════════════════════════════════════════════════════
   NIENTE BLU (18/08/2026)

   I pulsanti erano già ridefiniti in ink, ma il blu di Bootstrap rientrava
   dagli stati che l'override non copriva: :active, il focus ring, i check
   selezionati, le barre di avanzamento, i link. Qui si spegne alla fonte,
   riscrivendo le variabili del tema invece di rincorrere le singole classi.
   ══════════════════════════════════════════════════════════════════════════ */
:root {
    --bs-primary: #A89279;
    --bs-primary-rgb: 168, 146, 121;
    --bs-primary-text-emphasis: #6E5B44;
    --bs-primary-bg-subtle: #F0EBE3;
    --bs-primary-border-subtle: #D4C9BC;
    --bs-link-color: #8C7760;
    --bs-link-hover-color: #6E5B44;
    --bs-link-color-rgb: 140, 119, 96;
    --bs-link-hover-color-rgb: 110, 91, 68;
    --bs-focus-ring-color: rgba(168, 146, 121, .28);
    --bs-btn-focus-shadow-rgb: 168, 146, 121;
}

/* Pulsanti: anche premuti, col fuoco addosso e DISABILITATI.
   Un pulsante spento tornava blu: Bootstrap lo colora con `.btn:disabled`, che
   con due selettori batte il nostro `.btn-primary`. Non c'e' modo di vincerla
   con il colore diretto: si cambia la variabile che quella regola legge. */
.btn-primary, .btn-dark {
    --bs-btn-active-bg: #000;
    --bs-btn-active-border-color: #000;
    --bs-btn-focus-shadow-rgb: 168, 146, 121;
    --bs-btn-disabled-bg: var(--ink, #222);
    --bs-btn-disabled-border-color: var(--ink, #222);
}
.btn-info {
    --bs-btn-disabled-bg: var(--info, #6B8FA3);
    --bs-btn-disabled-border-color: var(--info, #6B8FA3);
}
.btn-outline-primary {
    --bs-btn-hover-bg: var(--ink, #222);
    --bs-btn-hover-border-color: var(--ink, #222);
    --bs-btn-active-bg: var(--ink, #222);
    --bs-btn-active-border-color: var(--ink, #222);
    --bs-btn-focus-shadow-rgb: 168, 146, 121;
    --bs-btn-disabled-color: var(--grey-400, #aaa);
    --bs-btn-disabled-border-color: var(--line, #E3DBD1);
}
.btn:focus-visible, .btn:focus {
    box-shadow: 0 0 0 .2rem rgba(168, 146, 121, .3);
}
.btn-check:checked + .btn,
.btn-check:active + .btn,
.btn.active, .btn.show {
    background-color: var(--ink, #222); border-color: var(--ink, #222); color: #fff;
}
.btn-outline-secondary.active, .btn-outline-secondary:active {
    background-color: var(--accent, #A89279); border-color: var(--accent, #A89279); color: #fff;
}

/* Campi: il fuoco è bronzo in tutta l'app, non solo nelle finestre */
.form-control:focus, .form-select:focus, .form-check-input:focus {
    border-color: var(--accent, #A89279);
    box-shadow: 0 0 0 .2rem rgba(168, 146, 121, .22);
}
.form-check-input:checked {
    background-color: var(--accent, #A89279); border-color: var(--accent, #A89279);
}
.form-range::-webkit-slider-thumb { background: var(--accent, #A89279); }
.form-range::-moz-range-thumb { background: var(--accent, #A89279); }

/* Il resto degli angoli blu di Bootstrap */
.progress-bar { background-color: var(--accent, #A89279); }
.spinner-border.text-primary, .spinner-grow.text-primary { color: var(--accent, #A89279) !important; }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    background-color: var(--accent-light, #F0EBE3); color: var(--accent-hover, #8C7760);
}
.page-link { color: var(--accent-hover, #8C7760); }
.page-item.active .page-link {
    background-color: var(--accent, #A89279); border-color: var(--accent, #A89279);
}
.dropdown-item.active, .dropdown-item:active {
    background-color: var(--accent-light, #F0EBE3); color: var(--accent-hover, #8C7760);
}
.list-group-item.active {
    background-color: var(--accent, #A89279); border-color: var(--accent, #A89279);
}
.badge.bg-primary { background-color: var(--accent, #A89279) !important; }
.alert-primary {
    background-color: var(--accent-light, #F0EBE3); border-color: var(--greige, #D4C9BC);
    color: var(--accent-hover, #8C7760);
}
::selection { background: rgba(168, 146, 121, .28); }


/* ── Pannelli laterali: stessa lingua delle finestre ──────────────────────
   Un pannello di modifica e una finestra di inserimento fanno lo stesso
   mestiere: devono avere la stessa testa, gli stessi campi, lo stesso piede. */
.offcanvas { border: none; }
/* Nelle finestre di modifica c'e' un <form> tra il contenuto e la finestra: senza
   questo, il corpo non scorre e il piede si stacca dal fondo. */
.fm-modal .modal-content > form {
    display: flex; flex-direction: column; min-height: 0; overflow: hidden;
}
.fm-modal .modal-content > form > .fm-body { overflow-y: auto; }
.fm-modal .fm-foot { flex: 0 0 auto; }
.offcanvas .form-label {
    font-size: .68rem; font-weight: 600; letter-spacing: .3px;
    color: var(--grey-500, #888); margin-bottom: .3rem;
}
.offcanvas .form-control, .offcanvas .form-select {
    border-radius: 9px; border-color: var(--greige, #D4C9BC);
    padding: .5rem .7rem; font-size: .88rem;
}
.offcanvas-footer { background: var(--ice, #FAF8F4); }


/* Finestre operative: il piede tiene i documenti a sinistra e le azioni a
   destra, e i suoi pulsanti hanno la stessa forma di quelli delle altre. */
.fm-foot.modal-footer { display: flex; justify-content: space-between; flex-wrap: wrap; }
.fm-foot .btn {
    border-radius: 9px; font-size: .85rem; font-weight: 600; padding: .5rem 1.1rem;
}
.fm-foot .btn-success {
    background: var(--ink, #222); border-color: var(--ink, #222); color: #fff;
}
.fm-foot .btn-success:hover { background: #000; border-color: #000; }
/* Le tabelle dentro le finestre: intestazione discreta, non una fascia pesante */
.fm-modal .modal-body table thead th,
.fm-modal .modal-body .table thead th {
    background: var(--ice, #FAF8F4); color: var(--grey-500, #888);
    font-size: .62rem; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
    border-bottom: 1px solid var(--line, #E3DBD1);
}


/* ── Tabelle di righe modificabili dentro una finestra (fm-table) ──────────
   Il disallineamento veniva da qui: un .form-control e' un BLOCCO a larghezza
   fissa, quindi il text-align della cella non lo spostava di un pixel e i campi
   restavano a sinistra sotto intestazioni allineate a destra. Qui le colonne
   hanno una larghezza dichiarata e i campi la riempiono: incolonnati per
   costruzione, non per fortuna. */
.fm-table { width: 100%; margin: 0; border-collapse: collapse; }
.fm-table thead th {
    padding: .5rem .6rem;
    background: var(--ice, #FAF8F4); color: var(--grey-500, #888);
    font-size: .62rem; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
    border-bottom: 1px solid var(--line, #E3DBD1); white-space: nowrap;
}
.fm-table tbody td {
    padding: .4rem .6rem; vertical-align: middle; font-size: .85rem;
    border-bottom: 1px solid var(--line, #E3DBD1);
}
.fm-table tbody tr:last-child td { border-bottom: none; }
.fm-table tbody tr:hover { background: var(--ice, #FAF8F4); }
.fm-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fm-table .mid { text-align: center; }
.fm-table .muted { color: var(--grey-500, #888); }
/* I campi riempiono la loro colonna: nessuna larghezza a occhio */
.fm-table td .form-control {
    width: 100%; border-radius: 8px; font-size: .82rem; padding: .3rem .5rem;
    border-color: var(--greige, #D4C9BC);
}
.fm-table td .form-control:focus {
    border-color: var(--accent, #A89279); box-shadow: 0 0 0 3px rgba(168,146,121,.16);
}
.fm-table tfoot td {
    padding: .6rem; font-size: .82rem; border-top: 1px solid var(--greige, #D4C9BC);
    background: var(--ice, #FAF8F4);
}
.fm-table tfoot .tot { font-size: 1rem; font-weight: 800; color: var(--accent, #A89279); }

/* La fascia delle condizioni in testa a una finestra operativa */
.fm-strip {
    display: flex; gap: 1.25rem; flex-wrap: wrap; align-items: flex-end;
    padding: .9rem 1rem; margin-bottom: 1rem;
    background: var(--ice, #FAF8F4);
    border: 1px solid var(--line, #E3DBD1); border-radius: 12px;
}
.fm-strip .fm-field { flex: 0 0 auto; }
.fm-strip .fm-spacer { flex: 1 1 auto; }
.fm-strip-total { text-align: right; }
.fm-strip-total .k {
    font-size: .58rem; font-weight: 700; letter-spacing: 1.3px;
    text-transform: uppercase; color: var(--grey-400, #aaa);
}
.fm-strip-total .v {
    font-size: 1.25rem; font-weight: 800; color: var(--ink, #222);
    font-variant-numeric: tabular-nums; line-height: 1.2;
}
/* Unita' di misura dentro il campo, a destra */
.fm-unit { position: relative; }
.fm-unit > .form-control { padding-right: 2.1rem; }
.fm-unit > span {
    position: absolute; right: .6rem; top: 50%; transform: translateY(-50%);
    font-size: .72rem; color: var(--grey-400, #aaa); pointer-events: none;
}


/* ── Riepilogo di una finestra operativa (fm-summary) ─────────────────────
   Costo, vendita e margine erano tre scritte piccole in fondo, in fila con lo
   stesso peso del resto: sono i numeri per cui si apre un'offerta. Qui hanno
   una fascia, una taglia da titolo e il margine si distingue dagli altri due. */
.fm-summary {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px; margin-top: 1rem;
    background: var(--greige-light, #E8E0D8);
    border: 1px solid var(--line, #E3DBD1); border-radius: 12px;
    overflow: hidden;
}
.fm-summary > div { background: #fff; padding: .8rem 1rem; }
.fm-summary .k {
    font-size: .58rem; font-weight: 700; letter-spacing: 1.3px;
    text-transform: uppercase; color: var(--grey-400, #aaa); margin-bottom: .15rem;
}
.fm-summary .v {
    font-size: 1.2rem; font-weight: 800; line-height: 1.15;
    color: var(--ink, #222); font-variant-numeric: tabular-nums;
}
.fm-summary .sub { font-size: .7rem; color: var(--grey-500, #888); margin-top: .1rem; }
/* Il margine e' il numero che dice se l'offerta conviene */
.fm-summary .gain { background: var(--success-bg, #EDF5ED); }
.fm-summary .gain .v { color: var(--success, #5B8C5A); }
.fm-summary .gain .k { color: #7FA37E; }
@media (max-width: 575px) { .fm-summary { grid-template-columns: 1fr; } }

/* I pulsanti nostri (tb-action, fm-btn) non sono .btn di Bootstrap: senza questa
   regola prendevano il contorno di fuoco blu del browser. */
.tb-action:focus, .fm-btn:focus, .tb-icon:focus { outline: none; }
.tb-action:focus-visible, .fm-btn:focus-visible, .tb-icon:focus-visible {
    outline: 2px solid var(--accent, #A89279); outline-offset: 2px;
}


/* ══════════════════════════════════════════════════════════════════════════
   BARRA AZIONI E MENU — erano in estimator.css, ma le usano anche pagine che
   non sono del preventivatore (Progetti, Prodotto): un pulsante primario
   restava bianco solo perche' quella pagina non caricava quel foglio.
   ══════════════════════════════════════════════════════════════════════════ */
/* ── Barra azioni di pagina (13/08/2026) ──────────────────────────────────
   Otto pulsanti rettangolari in fila leggevano come una fila di rettangoli e
   non come un ordine di importanza. Qui le azioni che CREANO dati tengono la
   loro etichetta, gli strumenti diventano icone raccolte in un gruppo — con il
   loro nome in un tooltip su hover e su focus da tastiera (data-tip). */
.tb {
    display: flex; align-items: center; gap: .75rem;
    flex-wrap: wrap; margin-bottom: 1rem;
}
.tb-title { display: flex; align-items: baseline; gap: .5rem; margin: 0; }
.tb-spacer { flex: 1 1 auto; }

/* Un gruppo di icone: un solo contorno attorno a tutte, divisori interni.
   Cinque bordi diventano uno. */
.tb-tools {
    display: inline-flex; align-items: stretch;
    border: 1px solid var(--line, #E3DBD1);
    border-radius: 9px; background: #fff;
    /* MAI overflow:hidden qui: ritaglierebbe i menu che si aprono dalle icone
       del gruppo (e un menu invisibile sembra un pulsante rotto). Gli angoli si
       arrotondano sui figli agli estremi. */
    overflow: visible;
}
.tb-tools > :first-child, .tb-tools > :first-child > .tb-icon {
    border-top-left-radius: 8px; border-bottom-left-radius: 8px;
}
.tb-tools > :last-child, .tb-tools > :last-child > .tb-icon {
    border-top-right-radius: 8px; border-bottom-right-radius: 8px;
}
.tb-icon {
    border: none; background: transparent; cursor: pointer;
    width: 36px; height: 32px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--grey-500, #888); font-size: .95rem;
    border-left: 1px solid var(--line, #E3DBD1);
    transition: color .15s, background .15s;
}
.tb-tools > .tb-icon:first-child { border-left: none; }
.tb-icon:hover { color: var(--accent-hover, #8C7760); background: var(--greige-light, #F5F2EF); }
.tb-icon:focus { outline: none; }
.tb-icon:focus-visible { outline: 2px solid var(--accent, #A89279); outline-offset: -2px; }
.tb-icon.active { color: #fff; background: var(--accent, #A89279); }
.tb-icon:disabled { opacity: .4; cursor: default; }
/* L'azione con un pizzico di magia si distingue senza urlare */
.tb-icon.is-ai { color: var(--accent, #A89279); }
.tb-icon.is-ai:hover { color: var(--accent-hover, #8C7760); }

/* Le due azioni che creano dati: etichetta visibile, gerarchia esplicita */
.tb-action {
    display: inline-flex; align-items: center; gap: .4rem;
    height: 32px; padding: 0 .8rem; border-radius: 9px;
    font-size: .78rem; font-weight: 600; white-space: nowrap;
    border: 1px solid var(--greige, #D4C9BC); background: #fff;
    color: var(--ink, #222); text-decoration: none; cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
}
.tb-action:hover { border-color: var(--accent, #A89279); color: var(--accent-hover, #8C7760); }
.tb-action.primary {
    background: var(--ink, #222); border-color: var(--ink, #222); color: #fff;
}
.tb-action.primary:hover { background: #000; border-color: #000; color: #fff; }
.tb-action.next {
    background: var(--accent, #A89279); border-color: var(--accent, #A89279); color: #fff;
}
.tb-action.next:hover { background: var(--accent-hover, #8C7760); border-color: var(--accent-hover, #8C7760); color: #fff; }

/* Tooltip degli strumenti: sobrio come il resto, non il blu di sistema */
.tip-tooltip .tooltip-inner {
    background: var(--ink, #222); color: #fff;
    font-size: .72rem; padding: .3rem .55rem; border-radius: 6px; max-width: 260px;
}
.tip-tooltip .tooltip-arrow::before { border-bottom-color: var(--ink, #222); }
.tip-tooltip.bs-tooltip-top .tooltip-arrow::before { border-top-color: var(--ink, #222); }

@media (max-width: 767px) {
    .tb-action span.tb-label { display: none; }
    .tb-action { padding: 0 .6rem; }
}

/* Voce di menu con una riga di spiegazione sotto: nel menu c'è lo spazio che
   sulla barra non c'era, e "Report cliente" da solo non dice cosa contiene. */
.dropdown-item .dropdown-note {
    font-size: .68rem; color: var(--grey-500, #888);
    line-height: 1.3; margin-top: 1px; white-space: normal;
}
.dropdown-item:active .dropdown-note,
.dropdown-item:hover .dropdown-note { color: inherit; opacity: .75; }
#reports-menu .dropdown-menu { min-width: 290px; }
/* Il caret dentro un .tb-action non deve gonfiarne l'altezza */
.tb-action.dropdown-toggle::after { margin-left: .35rem; }

/* Un'icona che apre un menu resta parte del gruppo: il divisore va sul wrapper
   del dropdown, altrimenti il bordo sparisce e il gruppo si spezza. */
.tb-tools > .dropdown { display: inline-flex; }
.tb-tools > .dropdown > .tb-icon { border-left: 1px solid var(--line, #E3DBD1); }
.tb-tools > .dropdown:first-child > .tb-icon { border-left: none; }
.tb-tools > .dropdown > .tb-icon.dropdown-toggle::after { display: none; }  /* niente caret: c'è già l'icona */

/* Il conteggio della selezione diventa una pastiglia sull'angolo dell'icona:
   sulla barra non c'era spazio per "Seleziona 12". */
.tb-icon { position: relative; }
.tb-icon .select-count-badge {
    position: absolute; top: 2px; right: 2px;
    min-width: 15px; height: 15px; padding: 0 3px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .58rem; font-weight: 700; line-height: 1;
    background: var(--accent, #A89279); color: #fff;
    border-radius: 8px; margin: 0;
}
.tb-icon.active .select-count-badge { background: #fff; color: var(--accent, #A89279); }


/* ── Menu a tendina: una taglia sola in tutta l'app ───────────────────────
   Misurati, erano l'elemento più grande della pagina: 16px di voce contro 15
   del corpo, 14 delle tabelle e 12 dei pulsanti — perché Bootstrap li lascia a
   1rem e nessuno li aveva ridotti. In una barra erano invece a 12,8px per un
   override locale. Ora valgono 14px come i campi e le tabelle, che è la taglia
   del contenuto con cui si lavora. */
.dropdown-menu {
    font-size: .875rem;
    border: 1px solid var(--line, #E3DBD1); border-radius: 10px;
    box-shadow: 0 8px 28px rgba(60, 50, 40, .12);
    padding: .3rem;
}
.dropdown-item {
    font-size: .875rem; line-height: 1.4;
    padding: .42rem .65rem; border-radius: 7px;
    display: flex; align-items: center; gap: .1rem;
}
.dropdown-item:hover, .dropdown-item:focus {
    background: var(--greige-light, #F5F2EF); color: var(--ink, #222);
}
/* Le icone delle voci incolonnate: larghezza fissa, non "a seconda del glifo" */
.dropdown-item > i:first-child { width: 1.15em; text-align: center; opacity: .8; flex: 0 0 auto; }
.dropdown-header {
    font-size: .6rem; font-weight: 700; letter-spacing: 1.3px; text-transform: uppercase;
    color: var(--grey-400, #aaa); padding: .45rem .65rem .3rem;
}
.dropdown-divider { margin: .3rem .2rem; border-color: var(--line, #E3DBD1); }
.dropdown-menu .form-check-input { margin-top: .15rem; }