/* =====================================================================================
   NP15 - Menu del profilo (variante B "Due colonne", 12/10/2026) - Views/Shared/_DropdownMenuNP15.cshtml
   -------------------------------------------------------------------------------------
   Contenitore: <div class="dropdown-menu ... pm-np15-dd"> in _PageHeader (Bootstrap apre/chiude e posiziona).
   Colori dal tema del cliente (--npa-*, con ripiego sulla palette NP15) e tema scuro (html[data-np-scuro]).
   Telefono (< 768px): pannello dal basso a tutta larghezza, voci alte 44px.
   ===================================================================================== */
.pm-np15-dd.dropdown-menu { padding: 0; border: 0; background: transparent; box-shadow: none; width: 600px; max-width: calc(100vw - 16px); }
.pm-np15 {
    --pm-p: var(--npa-primary-testo, var(--npa-primary, #2563eb));
    --pm-ps: var(--npa-primary-soft, rgba(37,99,235,.12));
    --pm-fg: var(--npa-fg, #1d2b53); --pm-fg2: var(--npa-fg2, #334155); --pm-mut: var(--npa-muted, #64748b); --pm-faint: var(--npa-faint, #94a3b8);
    --pm-surf: var(--npa-surface, #fff); --pm-surf2: var(--npa-surface2, #f8fafc); --pm-surf3: var(--npa-surface3, #eef2f7);
    --pm-line: var(--npa-line, #e0e5ee); --pm-line2: var(--npa-line2, #eef2f7);
    font-family: var(--np-font, "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif);
    font-size: 13px; color: var(--pm-fg); background: var(--pm-surf);
    border: 1px solid var(--pm-line); border-radius: 14px; overflow: hidden;
    box-shadow: 0 24px 60px -18px rgba(15,23,42,.45), 0 2px 6px rgba(15,23,42,.08);
    text-align: left;
}
html[data-np-scuro="1"] .pm-np15 { color-scheme: dark; box-shadow: 0 24px 60px -18px rgba(0,0,0,.8), 0 2px 6px rgba(0,0,0,.4); }
.pm-np15 a, .pm-np15 a:hover, .pm-np15 a:focus { text-decoration: none !important; }
.pm-np15 :focus-visible { outline: 2px solid var(--pm-p); outline-offset: 1px; }

/* intestazione: chi e' collegato */
.pm-np15 .pm-h { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--pm-line2); }
.pm-np15 .pm-av { width: 42px; height: 42px; flex: none; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 15px; color: #fff;
    background: linear-gradient(135deg, var(--npa-secondary, #1d2b53), var(--npa-primary, #2563eb)); }
.pm-np15 .pm-h-t { min-width: 0; display: flex; flex-direction: column; }
.pm-np15 .pm-h-t b { font-size: 15px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-np15 .pm-h-t small { color: var(--pm-mut); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-np15 .pm-chip { align-self: flex-start; margin-top: 4px; font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 99px; background: var(--pm-ps); color: var(--pm-p); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* due colonne */
.pm-np15 .pm-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.pm-np15 .pm-col { min-width: 0; }
.pm-np15 .pm-col + .pm-col { border-left: 1px solid var(--pm-line2); background: var(--pm-surf2); }
.pm-np15 .pm-g { padding: 6px; border-bottom: 1px solid var(--pm-line2); }
.pm-np15 .pm-col > .pm-g:last-child { border-bottom: 0; }
.pm-np15 .pm-gt { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; color: var(--pm-faint); padding: 6px 10px 3px; }
.pm-np15 .pm-v { display: flex; gap: 10px; align-items: center; padding: 7px 10px; border-radius: 8px; color: var(--pm-fg2); font-weight: 600; cursor: pointer; }
.pm-np15 .pm-v > i { width: 16px; text-align: center; color: var(--pm-mut); font-size: 14px; flex: none; }
.pm-np15 .pm-v > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-np15 .pm-v:hover { background: var(--pm-ps); color: var(--pm-p); }
.pm-np15 .pm-v:hover > i { color: var(--pm-p); }
.pm-np15 .pm-v kbd { margin-left: auto; flex: none; font-family: "Cascadia Mono", Consolas, monospace; font-size: 10.5px; padding: 1px 6px; border: 1px solid var(--pm-line); border-bottom-width: 2px; border-radius: 4px; color: var(--pm-mut); background: var(--pm-surf2); }
.pm-np15 .pm-tag { margin-left: auto; font-style: normal; font-size: 10px; font-weight: 800; color: var(--pm-p); }
.pm-np15 .pm-lingue { display: flex; flex-wrap: wrap; gap: 10px; padding: 4px 10px 10px; }
.pm-np15 .pm-solo-tel { display: none; }

/* preferenze */
.pm-np15 .pm-pref { padding: 6px 12px 14px; display: flex; flex-direction: column; gap: 12px; }
.pm-np15 .pm-pref > .pm-gt { padding-left: 0; }
.pm-np15 .pm-testo-font { display: flex; flex-direction: column; gap: 12px; }
.pm-np15 .pm-testo-font[hidden], .pm-np15 .np-scuro-scelta[hidden], .pm-np15 .pm-fissati[hidden] { display: none !important; }
.pm-np15 .pm-f { display: flex; flex-direction: column; gap: 5px; }
.pm-np15 .pm-pl { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--pm-mut); }
.pm-np15 .pm-segm { display: flex; gap: 4px; padding: 3px; border: 1px solid var(--pm-line); border-radius: 9px; background: var(--pm-surf); }
.pm-np15 .pm-segm button { flex: 1; border: 0; background: none; color: var(--pm-fg2); font: inherit; font-weight: 700; font-size: 12.5px; padding: 5px 4px; border-radius: 6px; cursor: pointer; display: inline-flex; gap: 5px; align-items: center; justify-content: center; min-height: 32px; white-space: nowrap; }
.pm-np15 .pm-segm button[aria-pressed="true"] { background: var(--pm-ps); color: var(--pm-p); box-shadow: inset 0 0 0 1px var(--pm-p); }
.pm-np15 .pm-font { width: 100%; height: 34px; padding: 0 8px; border: 1px solid var(--pm-line); border-radius: 8px; background: var(--pm-surf); color: var(--pm-fg); font: inherit; font-weight: 600; }
.pm-np15 .pm-font:focus { outline: 0; border-color: var(--pm-p); box-shadow: 0 0 0 3px var(--pm-ps); }
.pm-np15 .pm-prova { font-size: 12px; color: var(--pm-mut); padding: 7px 9px; border-radius: 8px; background: var(--pm-surf); border: 1px dashed var(--pm-line); font-family: var(--np-font, "Figtree", system-ui, sans-serif); font-size: calc(12px * var(--np-testo, 1)); }
.pm-np15 .pm-nota { margin: 0; font-size: 12px; color: var(--pm-mut); }

/* uscita */
.pm-np15 .pm-fondo { padding: 8px; border-top: 1px solid var(--pm-line2); }
.pm-np15 .pm-esci { display: flex; gap: 8px; align-items: center; justify-content: center; padding: 8px; border-radius: 9px; font-weight: 700; min-height: 38px;
    color: var(--npa-bad, #b91c1c); background: color-mix(in srgb, var(--npa-bad, #dc2626) 7%, var(--pm-surf)); border: 1px solid color-mix(in srgb, var(--npa-bad, #dc2626) 30%, transparent); }
.pm-np15 .pm-esci:hover { background: color-mix(in srgb, var(--npa-bad, #dc2626) 14%, var(--pm-surf)); }

/* la preferenza "grandezza testo" vale anche qui */
html[data-np-testo] .pm-np15 .pm-prova { --np-testo: 1; }
html[data-np-testo="108"] .pm-np15 .pm-prova { --np-testo: 1.08; }
html[data-np-testo="116"] .pm-np15 .pm-prova { --np-testo: 1.16; }
html[data-np-testo="125"] .pm-np15 .pm-prova { --np-testo: 1.25; }

/* telefono: pannello dal basso a tutta larghezza (Bootstrap posiziona con stile in linea: serve !important) */
@media (max-width: 767.98px) {
    .pm-np15-dd.dropdown-menu.show { position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important;
        transform: none !important; width: 100%; max-width: none; margin: 0; max-height: 88vh; overflow: auto; z-index: 2050; }
    .pm-np15-dd .pm-np15 { border-radius: 18px 18px 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); }
    .pm-np15-dd .pm-np15::before { content: ""; display: block; width: 40px; height: 4px; border-radius: 99px; background: var(--pm-line); margin: 8px auto 0; }
    .pm-np15 .pm-cols { grid-template-columns: 1fr; }
    .pm-np15 .pm-col + .pm-col { border-left: 0; border-top: 1px solid var(--pm-line2); }
    .pm-np15 .pm-v { min-height: 44px; font-size: 14px; }
    .pm-np15 .pm-segm button { min-height: 40px; }
    .pm-np15 .pm-esci { min-height: 46px; }
}
@media (max-width: 575.98px) {
    .pm-np15 .pm-solo-tel { display: block; }
}