/* ===================================================================
   Astrelia AntiSpam — stili custom del pannello (sopra Tabler)
   =================================================================== */

/* ---------------- Sidebar bianca pulita ---------------- */
.navbar-vertical.navbar-expand-lg {
    background-color: #ffffff;
    border-right: 1px solid #e6e7e9;
}

/* Allinea i contenuti in alto, no espansione automatica del collapse */
.navbar-vertical .navbar-collapse {
    flex-grow: 0 !important;
    align-items: stretch;
}

.navbar-vertical .navbar-nav {
    flex: 0 0 auto !important;
    width: 100%;
}

.navbar-vertical .navbar-brand {
    border-bottom: 1px solid #e6e7e9;
    padding-block: 1rem;
}

.navbar-vertical .nav-link {
    color: #4b5563;
    border-radius: 6px;
    margin-inline: .5rem;
    padding-block: .5rem;
}

.navbar-vertical .nav-link:hover {
    background-color: #f3f4f6;
    color: #1f2937;
}

.navbar-vertical .nav-item.active > .nav-link {
    background-color: #eef2ff;
    color: #206bc4;
    font-weight: 500;
}

.navbar-vertical .nav-link-icon {
    color: inherit;
}

/* Section header in sidebar */
.navbar-vertical h2 {
    color: #6b7280;
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    margin-block-start: 1rem;
}

/* ---------------- Contenuto principale ---------------- */
.page-body {
    padding-block: 1.5rem;
}

/* ---------------- Ancore delle sezioni (es. indice del manuale) ----------------
   Senza questo, il click su una voce dell'indice porta il titolo della
   sezione SOTTO l'header sticky, che lo copre. Lo scroll-margin lascia
   lo spazio dell'header + un respiro. */
.card[id] {
    /* 4.5rem = stessa quota dell'indice sticky del manuale (top: 4.5rem):
       la card cliccata si allinea esattamente all'indice, e lo spazio
       sotto l'header (1rem) coincide col gap tra le card, quindi la card
       precedente resta interamente nascosta */
    scroll-margin-top: 4.5rem;
}

/* I badge dentro righe flex (changelog, elenchi) non devono restringersi
   né troncarsi quando lo spazio si stringe */
.d-flex > .badge {
    flex-shrink: 0;
    white-space: nowrap;
}

/* ---------------- Icona "i" con tooltip di aiuto ---------------- */
.help-tip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid #9ca3af;
    color: #6b7280;
    font-size: 10px;
    font-style: italic;
    font-weight: 700;
    font-family: Georgia, serif;
    line-height: 1;
    vertical-align: 1px;
    cursor: help;
    user-select: none;
}

.help-tip:hover,
.help-tip:focus-visible {
    border-color: #206bc4;
    color: #206bc4;
}

/* Tooltip più larghi e leggibili per le spiegazioni dei campi */
.tooltip .tooltip-inner {
    max-width: 340px;
    text-align: left;
    line-height: 1.4;
}

/* ===================================================================
   Barra azioni sticky (pattern La Mercanti): nascosta finché non
   modifichi qualcosa, poi compare fissa in basso a destra.
   =================================================================== */
.form-actions-sticky {
    position: fixed;
    bottom: 24px;
    right: 24px;
    display: none;
    gap: 8px;
    padding: 12px 16px;
    background: #ffffff;
    border: 1px solid #e6e7e9;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    z-index: 1030;
    transform: translateY(20px);
    opacity: 0;
    transition: transform .25s ease, opacity .25s ease;
}

.form-actions-sticky.visible {
    display: flex;
    transform: translateY(0);
    opacity: 1;
}

@media (max-width: 640px) {
    .form-actions-sticky {
        bottom: 12px;
        right: 12px;
        left: 12px;
        flex-direction: column;
    }
    .form-actions-sticky .btn { width: 100%; }
}

/* ===================================================================
   Modale "Modifiche non salvate" (pattern La Mercanti)
   =================================================================== */
.unsaved-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 99998;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
}

.unsaved-modal-overlay.visible {
    opacity: 1;
    visibility: visible;
}

.unsaved-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.95);
    background: #ffffff;
    border-radius: 12px;
    padding: 2rem;
    max-width: 440px;
    width: 90%;
    z-index: 99999;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s, transform 0.2s;
}

.unsaved-modal.visible {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}

.unsaved-modal-icon {
    color: #f59e0b;
    font-size: 44px;
    line-height: 1;
    margin-bottom: 1rem;
}

.unsaved-modal-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
    color: #1f2937;
}

.unsaved-modal-text {
    color: #6b7280;
    margin: 0 0 1.5rem;
    font-size: 0.9375rem;
}

.unsaved-modal-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.unsaved-modal-actions .btn {
    width: 100%;
    justify-content: center;
}

@media (min-width: 480px) {
    .unsaved-modal-actions { flex-direction: row; flex-wrap: wrap; }
    .unsaved-modal-actions .btn { flex: 1; min-width: 120px; width: auto; }
}

/* ---------------- Toggle switch (attivo/disattivo nelle tabelle) --- */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 26px;
    vertical-align: middle;
    margin: 0;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background-color: #d1d5db;
    border-radius: 26px;
    transition: 150ms ease;
}

.toggle-slider::before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: #ffffff;
    border-radius: 50%;
    transition: 150ms ease;
}

.toggle-switch input:checked + .toggle-slider {
    background-color: #16a34a;
}

.toggle-switch input:checked + .toggle-slider::before {
    transform: translateX(22px);
}

.toggle-switch input:focus-visible + .toggle-slider {
    outline: 2px solid #206bc4;
    outline-offset: 2px;
}

.toggle-switch input:disabled + .toggle-slider {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ---------------- Bottoni icona (azioni tabella) ---------------- */
.btn-icon-only {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    min-width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #f9fafb;
    color: #4b5563;
    font-size: 1rem;
    transition: 120ms ease;
}

.btn-icon-only:hover,
.btn-icon-only:focus-visible {
    background: #e5e7eb;
    color: #1f2937;
    border-color: #d1d5db;
}

.btn-icon-only.btn-icon-danger {
    background: #fef2f2;
    border-color: #fecaca;
    color: #dc2626;
}

.btn-icon-only.btn-icon-danger:hover,
.btn-icon-only.btn-icon-danger:focus-visible {
    background: #fee2e2;
    border-color: #fca5a5;
    color: #b91c1c;
}

.btn-icon-only:disabled,
.btn-icon-only[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* Gruppo di btn-icon-only: gap stretto */
.actions-row {
    display: inline-flex;
    gap: 4px;
    flex-wrap: nowrap;
}

/* ===================================================================
   Input OTP a 6 cifre (2FA)
   =================================================================== */
.otp-inputs {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    margin-bottom: 0.5rem;
}

.otp-digit {
    width: 48px;
    height: 56px;
    text-align: center;
    font-size: 1.5rem;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-weight: 600;
    border: 2px solid #d1d5db;
    border-radius: 8px;
    background: #ffffff;
    transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
}

.otp-digit:focus {
    outline: none;
    border-color: #206bc4;
    box-shadow: 0 0 0 3px rgba(32, 107, 196, 0.15);
}

.otp-digit.filled {
    border-color: #206bc4;
    background: #eef2ff;
}