/* 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;
}