/* Layout principale dell'area riservata: sidebar + topbar + contenuto */

.layout-wrapper {
    display: flex;
    min-height: 100vh;
}

/* ───── Sidebar ───── */
.sidebar {
    width: 240px;
    background: #0a2d5c;
    color: #c8d1e0;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    transition: width 0.2s ease;
    position: sticky;
    top: 0;
    height: 100vh;
    /* overflow visible necessario perché il flyout dei nav-group esca dalla sidebar
       in modalità collapsed; lo scroll è gestito da .sidebar-nav. */
    overflow: visible;
}

.sidebar-collapsed .sidebar {
    width: 64px;
}

.sidebar-header {
    padding: 18px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.sidebar-brand {
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    font-size: 18px;
    color: #fff;
    letter-spacing: -0.3px;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
}

.sidebar-collapsed .sidebar-brand {
    display: none;
}

.sidebar-toggle-btn {
    background: transparent;
    border: none;
    color: #c8d1e0;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.sidebar-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.sidebar-nav {
    list-style: none;
    margin: 0;
    padding: 12px 0;
    flex: 1;
    overflow-y: auto;
    overflow-x: visible;
}

/* In modalità collapsed lo scroll verticale viene tolto: altrimenti
   l'overflow-y:auto crea un nuovo contesto di stacking che clippa
   orizzontalmente il flyout dei nav-group. */
.sidebar-collapsed .sidebar-nav {
    overflow-y: visible;
}

.nav-item {
    margin-bottom: 2px;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    color: #c8d1e0;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    border-left: 3px solid transparent;
    transition: all 0.15s;
    min-height: 44px;
}

.nav-link:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    text-decoration: none;
}

.nav-link.active {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border-left-color: #4dabf7;
}

.nav-link-disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

.nav-link-disabled:hover {
    background: transparent;
    color: #c8d1e0;
}

.nav-icon-main {
    font-size: 18px;
    width: 24px;
    text-align: center;
}

.nav-label {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-collapsed .nav-label {
    display: none;
}

.nav-separator {
    padding: 14px 16px 6px 16px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #6b7a99;
    font-weight: 600;
}

.sidebar-collapsed .nav-separator {
    display: none;
}

/* ───── Main content ───── */
.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.topbar {
    background: #fff;
    border-bottom: 1px solid #dbe4f0;
    padding: 12px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 56px;
    position: sticky;
    top: 0;
    z-index: 100;
}

.topbar-toggle {
    background: transparent;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    cursor: pointer;
    color: #1a2740;
    display: none;
    align-items: center;
    justify-content: center;
}

.topbar-toggle:hover {
    background: #f4f6fa;
}

.topbar-spacer {
    flex: 1;
}

.topbar-user-area {
    display: flex;
    align-items: center;
    gap: 12px;
}

.topbar-username {
    font-weight: 500;
    font-size: 14px;
    color: #1a2740;
}

.topbar-btn {
    background: transparent;
    border: none;
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    color: #1a2740;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
    font-size: 14px;
    min-height: 44px;
    transition: background 0.2s;
}

.topbar-btn:hover {
    background: #f4f6fa;
}

.btn-logout:hover {
    background: #fdecec;
    color: #c92e2e;
}

.page-body {
    padding: 24px;
    flex: 1;
}

/* ───── Dashboard ───── */
.dashboard h1 {
    font-size: 28px;
    margin-bottom: 8px;
}

/* Routes.razor usa <FocusOnNavigate Selector="h1"> per accessibilità: sposta
   il focus sul titolo a ogni navigazione (utile per screen reader). Chrome
   tuttavia mostra l'outline anche per il focus programmatico, generando un
   rettangolo nero attorno al titolo finché l'utente non clicca altrove.
   Sopprimiamo l'outline solo quando l'h1 ha tabindex="-1" (= focus arrivato
   da JS, non da tastiera): l'accessibilità con TAB resta intatta perché
   tabindex="-1" non è raggiungibile da Tab. */
h1[tabindex="-1"]:focus,
h2[tabindex="-1"]:focus,
h3[tabindex="-1"]:focus {
    outline: none;
}

.dashboard-lead {
    color: #6b7a99;
    margin-bottom: 32px;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
}

.dashboard-card {
    background: #fff;
    border: 1px solid #e6ecf5;
    border-radius: 12px;
    padding: 24px;
    transition: box-shadow 0.2s, border-color 0.2s;
}

.dashboard-card:hover {
    box-shadow: 0 4px 16px rgba(10, 45, 92, 0.08);
    border-color: #c8d1e0;
}

.dashboard-card-icon {
    font-size: 32px;
    color: #0a2d5c;
    margin-bottom: 12px;
}

.dashboard-card h3 {
    font-size: 16px;
    margin-bottom: 8px;
}

.dashboard-card p {
    color: #6b7a99;
    font-size: 14px;
    margin-bottom: 16px;
    line-height: 1.5;
}

.dashboard-card-status {
    display: inline-block;
    padding: 4px 10px;
    background: #fff8e1;
    color: #b07b00;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

/* ───── TelerikWindow forzata fullscreen su mobile ───── */
@media (max-width: 767px) {
    .k-window {
        width: 100vw !important;
        height: 100vh !important;
        max-width: 100vw !important;
        max-height: 100vh !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
        border-radius: 0 !important;
    }

    .topbar-toggle {
        display: inline-flex;
    }

    .sidebar {
        position: fixed;
        left: -260px;
        z-index: 200;
        transition: left 0.2s;
    }

    .layout-wrapper.drawer-open .sidebar {
        left: 0;
    }
}

/* ===== DesktopOnlyNotice (Fase T.3) =====
   Le pagine D mostrano questo avviso su mobile e nascondono il contenuto.
   Le pagine M wrappate in <MobileFriendlyPage> aggiungono `app-mobile-allowed`
   al body, che disattiva l'avviso e rivela il contenuto. */
.desktop-only-notice {
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    min-height: 50vh;
}

.desktop-only-notice-card {
    max-width: 360px;
    width: 100%;
    text-align: center;
    background: #fff;
    border: 1px solid #dbe4f0;
    border-radius: 12px;
    padding: 28px 22px;
    box-shadow: 0 4px 14px rgba(10, 45, 92, 0.08);
}

.desktop-only-notice-card .bi {
    font-size: 3rem;
    color: #4dabf7;
    display: block;
    margin-bottom: 0.5rem;
}

.desktop-only-notice-card h3 {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
    color: #0a2d5c;
}

.desktop-only-notice-card p {
    color: #6c757d;
    font-size: 0.95rem;
    margin: 0 0 1.25rem;
}

@media (max-width: 767px) {
    /* Pagine D: contenuto nascosto, avviso visibile */
    body.app-mobile .desktop-only-content   { display: none !important; }
    body.app-mobile .desktop-only-notice    { display: flex; }
    /* Pagine M: contenuto visibile, avviso nascosto */
    body.app-mobile.app-mobile-allowed .desktop-only-content { display: block !important; }
    body.app-mobile.app-mobile-allowed .desktop-only-notice  { display: none !important; }

    /* Tap target ≥ 44px sui bottoni Telerik standard */
    .k-button.k-button-md { min-height: 44px; }

    /* Input con font-size 16px per evitare zoom iOS Safari al focus */
    .k-input-inner, .k-textbox, input[type="text"], input[type="email"],
    input[type="password"], input[type="number"], textarea {
        font-size: 16px;
    }
}


/* ───── Rubrica alfabetica (lista anagrafiche, future liste lunghe) ───── */
.alpha-rubrica {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}

.alpha-rubrica .alpha-btn {
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    border: 1px solid #cfd6e0;
    background: #fff;
    color: #25334a;
    border-radius: 4px;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.alpha-rubrica .alpha-btn:hover {
    background: #eef2f7;
    border-color: #98a8c0;
}

.alpha-rubrica .alpha-btn.active {
    background: #0a2d5c;
    color: #fff;
    border-color: #0a2d5c;
}

/* Su mobile (<768px) i tap target devono essere ≥ 44px (CLAUDE.md §Mobile) */
@media (max-width: 767px) {
    .alpha-rubrica .alpha-btn {
        min-width: 44px;
        height: 44px;
        font-size: 1rem;
    }
}

/* ───── Fieldset trasparente per modalità "sola lettura" del form ───── */
.ca-fieldset {
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0;
}
.ca-fieldset[disabled],
.ca-fieldset:disabled {
    /* Hint visivo leggero che l'intero blocco è bloccato */
    opacity: 0.85;
}

/* ───── Dashboard — widget aggregati ───── */
.dashboard h1 {
    font-size: 1.7rem;
    margin-bottom: 0.5rem;
}
.dashboard-lead {
    color: #5b6b80;
    margin-bottom: 1.5rem;
}
.dashboard-section-title {
    color: #5b6b80;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.78rem;
    letter-spacing: 0.5px;
    margin: 1.5rem 0 0.6rem;
}

.dash-card {
    display: block;
    background: #fff;
    border: 1px solid #e1e6ee;
    border-radius: 8px;
    padding: 1rem 1.1rem;
    text-decoration: none;
    color: inherit;
    height: 100%;
    transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

.dash-card-clickable:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(10, 45, 92, 0.08);
    border-color: #b6c2d4;
    text-decoration: none;
}

.dash-card-icon {
    font-size: 1.7rem;
    line-height: 1;
    margin-bottom: 0.35rem;
}

.dash-card-value {
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1.1;
    color: #25334a;
}
.dash-card-subvalue {
    font-size: 0.85rem;
    font-weight: 500;
    color: #6c7a90;
    margin-left: 4px;
}

.dash-card-label {
    color: #5b6b80;
    font-size: 0.9rem;
    margin-top: 0.25rem;
}

.dash-card-success .dash-card-icon { color: #1e7c3a; }
.dash-card-success .dash-card-value { color: #1e7c3a; }

.dash-card-danger .dash-card-icon  { color: #b73a3a; }
.dash-card-danger .dash-card-value  { color: #b73a3a; }

.dash-card-warning .dash-card-icon { color: #b07a00; }

.dash-card-disabled {
    background: #f4f6fa;
    border-style: dashed;
    color: #6c7a90;
}

@media (max-width: 767px) {
    .dash-card-value {
        font-size: 1.4rem;
    }
}

/* ───── Nav-group (gruppi espandibili stile CashPMI) ───── */
.nav-group {
    list-style: none;
    position: relative;
    margin-bottom: 2px;
}

.nav-group-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    color: #c8d1e0;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border-left: 3px solid transparent;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
    user-select: none;
    min-height: 44px;
}

.nav-group-header:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
}

.nav-group-header i.nav-icon {
    font-size: 18px;
    width: 24px;
    text-align: center;
    flex-shrink: 0;
}

.nav-group-header .nav-label {
    flex: 1;
}

.nav-arrow {
    font-size: 11px;
    transition: transform 0.2s ease;
    opacity: 0.55;
}

.nav-group.open .nav-arrow {
    transform: rotate(90deg);
}

.nav-group.open .nav-group-header {
    color: #fff;
}

/* Sotto-menu — accordion in modalità espansa */
.nav-sub {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
}

.nav-group.open .nav-sub {
    max-height: 800px;
}

.nav-sub > li {
    margin: 0;
}

.nav-sub .nav-link {
    padding-left: 52px;
    font-size: 13.5px;
    min-height: 38px;
}

.nav-sub .nav-link.active {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border-left-color: #4dabf7;
}

/* Header del gruppo dentro il flyout (visibile solo collapsed) */
.nav-sub-header {
    display: none;
}

/* ─── Modalità collapsed: flyout laterale al hover ─── */
.sidebar-collapsed .nav-group-header {
    justify-content: center;
    padding: 10px 0;
}

.sidebar-collapsed .nav-group-header .nav-label,
.sidebar-collapsed .nav-group-header .nav-arrow {
    display: none;
}

.sidebar-collapsed .nav-sub {
    max-height: none !important;
    overflow: visible !important;
    position: absolute;
    left: 64px;
    top: 0;
    background: #103564;
    min-width: 220px;
    border-radius: 0 8px 8px 0;
    padding: 0;
    box-shadow: 6px 6px 22px rgba(0, 0, 0, 0.35);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-6px);
    transition: opacity 0.15s ease, visibility 0.15s ease, transform 0.15s ease;
    z-index: 200;
}

.sidebar-collapsed .nav-group:hover .nav-sub {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
    transform: translateX(0);
    padding: 6px 0 8px;
}

.sidebar-collapsed .nav-sub-header {
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #6b7a99;
    padding: 8px 16px 4px;
    white-space: nowrap;
}

.sidebar-collapsed .nav-sub .nav-link {
    padding: 8px 16px;
    font-size: 14px;
    justify-content: flex-start;
    border-left: 3px solid transparent;
    white-space: nowrap;
}

.sidebar-collapsed .nav-sub .nav-link span.nav-label {
    display: inline;
}

.sidebar-collapsed .nav-sub .nav-link.active {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border-left-color: #4dabf7;
}

.nav-item-disabled .nav-link-disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

/* ===== Pulsante icona su riga di tabella inline (rubrica contatti, rate) ===== */

.line-icon-btn {
    background: transparent;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    width: 28px;
    height: 28px;
    color: #6b7280;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    padding: 0;
}

.line-icon-btn:hover {
    background: #f3f4f6;
    color: #111827;
    border-color: #d1d5db;
}

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

/* ===== Rubrica contatti dell'anagrafica ===== */

.contacts-table-wrapper {
    overflow-x: auto;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
}

.contacts-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.contacts-table thead th {
    background: #f3f4f6;
    border-bottom: 2px solid #e5e7eb;
    padding: 0.4rem 0.5rem;
    text-align: left;
    font-weight: 600;
    color: #4b5563;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.contacts-table tbody td {
    padding: 0.35rem 0.4rem;
    border-bottom: 1px solid #f1f3f5;
    vertical-align: middle;
}

.contacts-table tbody tr:last-child td {
    border-bottom: none;
}

.contacts-table .col-firstname,
.contacts-table .col-lastname { min-width: 120px; }
.contacts-table .col-role      { min-width: 140px; }
/* L'interno sono poche cifre: il numero principale sta sull'anagrafica. */
.contacts-table .col-extension { width: 80px; }
.contacts-table .col-mobile    { min-width: 130px; }
/* L'email arriva a 60 caratteri: è il campo che ha più bisogno di spazio. */
.contacts-table .col-email     { min-width: 240px; width: 100%; }
.contacts-table .col-actions   { width: 44px; text-align: center; }

.contacts-table .contacts-empty {
    padding: 0.75rem;
    text-align: center;
    color: #6b7280;
    font-style: italic;
}

/* ─── Selettore contesto gestione (topbar) ────────────────────────────── */
/* Il contesto attivo deve restare visibile a colpo d'occhio: senza un
   indicatore permanente l'operatore scambia i dati filtrati per dati
   mancanti e apre un ticket. */
.gestione-selector {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-left: 1rem;
    padding: .25rem .5rem;
    border-radius: .375rem;
    border: 1px solid transparent;
}

.gestione-selector > .bi {
    color: #6c757d;
    font-size: 1rem;
}

.gestione-selector-attivo {
    background-color: #fff3cd;
    border-color: #ffe69c;
}

.gestione-selector-attivo > .bi {
    color: #997404;
}

.gestione-selector-esci {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border: none;
    background: transparent;
    color: #997404;
    cursor: pointer;
}

.gestione-selector-esci:hover {
    color: #664d03;
}

@media (max-width: 767px) {
    /* In mobile la topbar è stretta: resta il badge, la larghezza fissa no. */
    .gestione-selector {
        margin-left: .25rem;
    }

    .gestione-selector-ddl {
        width: 140px !important;
    }
}

/* ==========================================================================
   Tendina "Azioni" delle grid — icone colorate
   Le classi ca-act-* si applicano ai DropDownButtonItem e riprendono i colori
   che le icone avevano quando erano bottoni flat nella colonna comandi.
   Le icone SVG di Telerik usano fill: currentColor, quindi basta impostare
   color sul wrapper dell'icona. Il testo della voce resta del colore di base.
   ========================================================================== */
.ca-act-primary .k-svg-icon,
.ca-act-primary .k-icon { color: var(--kendo-color-primary, #0d6efd); }

.ca-act-info .k-svg-icon,
.ca-act-info .k-icon { color: var(--kendo-color-info, #0dcaf0); }

.ca-act-success .k-svg-icon,
.ca-act-success .k-icon { color: var(--kendo-color-success, #198754); }

.ca-act-warning .k-svg-icon,
.ca-act-warning .k-icon { color: var(--kendo-color-warning, #ffc107); }

.ca-act-danger .k-svg-icon,
.ca-act-danger .k-icon { color: var(--kendo-color-error, #dc3545); }

/* ==========================================================================
   Finestre di dialogo — barra Salva/Annulla ancorata al fondo
   Con i form più alti della finestra i pulsanti si raggiungevano solo
   scorrendo fino in fondo. Qui la finestra non supera mai il viewport e la
   barra azioni resta agganciata al bordo inferiore dell'area scrollabile,
   tornando in linea col contenuto a fine scorrimento.
   ========================================================================== */
.ca-form-window {
    max-height: 92vh;
}

.ca-form-window .k-window-content {
    overflow-y: auto;
    min-height: 0;
    padding: 16px 16px 0;
}

.ca-form-window .ca-form-actions {
    position: sticky;
    bottom: 0;
    z-index: 2;
    /* I margini negativi annullano il padding orizzontale del contenuto, così
       la barra copre tutta la larghezza della finestra. */
    margin: 1rem -16px 0;
    padding: 0.75rem 16px;
    background: #fff;
    border-top: 1px solid #e5e7eb;
}