/* ── Pulsanti della pratica ───────────────────────────────────────────
   La fila di pulsanti nell'intestazione di una pratica: funerale (Note,
   Modulistica, Riepiloghi Stampabili Pratica, Stampa Punti di Affissione,
   Riepilogo 360°), pratica Pet e Previdenza (pratica e preventivo).
   Sono pulsanti, non schede: portano ad altre pagine o aprono un foglio da
   stampare, e devono sembrare cliccabili (richiesta di Angelo del 5/11/2026).
   Stesso aspetto e stesse misure dei pulsanti piccoli chiari bordeaux delle
   barre degli strumenti (btn btn-sm btn-light-primary, per esempio «Aggiungi
   Modello»: alti 35px, angoli, testo .95rem di peso 500, icona fs-4), con
   un'icona Keenicons per voce e un bordo che si vede (>= 3:1 sul fondo); la
   voce in cui ci si trova e' piena, bordeaux con il testo bianco
   (aria-current="page", .is-current, .is-active). Il passaggio del mouse
   schiarisce soltanto, per non confondersi con la voce aperta.
   Le schede dentro una pagina (Cerimonia/Logistica, Personale, Parco Auto...)
   restano il componente a linea bordeaux di ric_brand_tokens.css.

   Markup:
     <nav class="... ric-practice-menu">            (o <ul class="ric-practice-menu"> con <li>)
       <a class="ric-practice-menu__item" href="..." aria-current="page">
         <i class="ki-outline ki-document ric-practice-menu__icon" aria-hidden="true"></i>
         <span class="ric-practice-menu__label">Modulistica</span>
       </a>
   Ogni area tiene la sua geometria (allineamento, margini, bordo): qui solo
   la fila e i pulsanti. Caricato da layouts/shared/_scripts per tutte le
   pagine, quindi DOPO i CSS delle pagine: la fila sta in :where() (peso
   zero), cosi' margini e spaziature di ogni area restano i suoi. */

.ric-practice-menu {
    --ric-practice-menu-bg: var(--ric-brand-soft, #f5e6e8);
    --ric-practice-menu-hover-bg: #eedadd;
    --ric-practice-menu-border: #b07f8b;
    --ric-practice-menu-hover-border: var(--ric-brand-start, #7f1f29);
    --ric-practice-menu-text: var(--ric-brand-text, #5e1f29);
    --ric-practice-menu-hover-text: var(--ric-brand-end, #2b1c24);
    --ric-practice-menu-current-bg: var(--ric-brand-start, #7f1f29);
    --ric-practice-menu-current-hover-bg: var(--ric-brand-mid, #5e1f29);
    --ric-practice-menu-current-border: var(--ric-brand-start, #7f1f29);
    --ric-practice-menu-focus: var(--ric-brand-text, #5e1f29);
}
:where(.ric-practice-menu) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
/* Come elenco (<ul> con <li>), senza i rientri del browser. */
ul.ric-practice-menu { margin: 0; padding: 0; list-style: none; }
.ric-practice-menu > li { display: flex; min-width: 0; }

.ric-practice-menu .ric-practice-menu__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 0;
    /* Misure di .btn-sm (style.bundle.css): li' il padding e' .55rem + 1px
       senza bordo, qui .55rem con il bordo da 1px, cioe' la stessa altezza. */
    padding: .55rem 1rem;
    border: 1px solid var(--ric-practice-menu-border);
    border-radius: var(--bs-border-radius-sm, .425rem);
    background: var(--ric-practice-menu-bg);
    box-shadow: 0 1px 2px rgba(43, 28, 36, .06);
    color: var(--ric-practice-menu-text);
    font-size: .95rem;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.ric-practice-menu .ric-practice-menu__icon {
    flex: 0 0 auto;
    color: inherit;
    font-size: 1.25rem; /* fs-4, come le icone dei pulsanti delle barre */
    line-height: 1;
}
.ric-practice-menu .ric-practice-menu__label { min-width: 0; }

.ric-practice-menu .ric-practice-menu__item:hover {
    border-color: var(--ric-practice-menu-hover-border);
    background: var(--ric-practice-menu-hover-bg);
    color: var(--ric-practice-menu-hover-text);
    text-decoration: none;
}
.ric-practice-menu .ric-practice-menu__item:focus-visible {
    outline: 2px solid var(--ric-practice-menu-focus);
    outline-offset: 3px;
    text-decoration: none;
}

/* La voce in cui ci si trova: piena, come btn-primary (stesso peso del
   testo delle altre voci: passando da una pagina all'altra la fila non si
   sposta). */
.ric-practice-menu .ric-practice-menu__item:is([aria-current="page"], .is-current, .is-active) {
    border-color: var(--ric-practice-menu-current-border);
    background: var(--ric-practice-menu-current-bg);
    color: #ffffff;
}
.ric-practice-menu .ric-practice-menu__item:is([aria-current="page"], .is-current, .is-active):hover {
    background: var(--ric-practice-menu-current-hover-bg);
    color: #ffffff;
}

/* Voce non ancora disponibile (preventivo di Previdenza non salvato): <a>
   senza href, spenta e senza passaggio del mouse. */
.ric-practice-menu .ric-practice-menu__item[aria-disabled="true"] {
    opacity: .55;
    pointer-events: none;
    box-shadow: none;
}

/* Al tocco: pulsanti da 44px come gli altri comandi, con la stessa regola
   di .btn in responsive.css. */
@media (max-width: 1023.98px) and (pointer: coarse) {
    .ric-practice-menu .ric-practice-menu__item { min-height: 44px; }
}

/* Telefono: le voci vanno a capo e ogni riga si riempie, senza testo
   tagliato (un'etichetta lunga va su due righe dentro il pulsante). */
@media (max-width: 575.98px) {
    .ric-practice-menu > li,
    .ric-practice-menu > .ric-practice-menu__item { flex: 1 1 auto; }
    .ric-practice-menu > li > .ric-practice-menu__item { width: 100%; }
    .ric-practice-menu .ric-practice-menu__item { min-height: 44px; padding-inline: 12px; white-space: normal; }
}

/* Tema scuro: fondo bordeaux scuro, bordo rosa (>= 5:1 sul fondo della
   pagina e delle card), testo >= 7:1; la voce attiva resta bordeaux con il
   bordo chiaro doppio (bordo + anello interno, come il riquadro scelto del
   Registro PS e la voce dell'indice del Riepilogo 360°): i due fondi
   bordeaux da soli si distinguono poco (1,3:1). */
[data-bs-theme="dark"] .ric-practice-menu {
    --ric-practice-menu-bg: var(--ric-brand-soft, #452d37);
    --ric-practice-menu-hover-bg: #573a46;
    --ric-practice-menu-border: #b88a95;
    --ric-practice-menu-hover-border: var(--ric-brand-text, #efbdc9);
    --ric-practice-menu-text: var(--ric-brand-text, #efbdc9);
    --ric-practice-menu-hover-text: #ffffff;
    --ric-practice-menu-current-border: var(--ric-brand-text, #efbdc9);
    --ric-practice-menu-focus: var(--ric-brand-text, #efbdc9);
}
[data-bs-theme="dark"] .ric-practice-menu .ric-practice-menu__item { box-shadow: none; }
[data-bs-theme="dark"] .ric-practice-menu .ric-practice-menu__item:is([aria-current="page"], .is-current, .is-active) {
    box-shadow: inset 0 0 0 1px var(--ric-practice-menu-current-border);
}
