/* ============================================================
   NormaGuard — Profilo utente
   Allineato al design system della home (design-system.css + styles.css)
   ============================================================ */

:root {
    --primary: var(--primary-blue, #2563eb);
    --primary-hover: #1d4ed8;
    --success: var(--green-check, #059669);
    --warning: var(--orange-accent, #f59e0b);
    --danger: #dc2626;
    --radius: var(--border-radius, 12px);
    --ng-regulation: #3b82f6;
    --ng-subscription: #8b5cf6;
    --text-ng-subscription: #7c3aed;
}

body {
    background: var(--bg-body, #f6f8fc);
    color: var(--text-dark, #172033);
    font-family: 'Inter', system-ui, sans-serif;
}

/* ---------- Container layout ---------- */
#mainSection {
    max-width: 1200px;
    margin-bottom: 3rem;
}

#logged_section {
    display: flex;
    flex-direction: column;
}

/* ---------- Header account ---------- */
#logged_section h1 {
    font-weight: 700;
}

/* ---------- Tabs ---------- */
.ng-tabs {
    border-bottom: 1px solid var(--border-color);
    gap: 4px;
}

.ng-tabs .nav-link {
    color: var(--text-grey);
    font-weight: 600;
    font-size: 0.92rem;
    border: none;
    border-radius: 8px 8px 0 0;
    padding: 0.6rem 1.1rem;
}

.ng-tabs .nav-link .badge {
    margin-left: 0.35rem;
    font-size: 0.68rem;
    font-weight: 700;
    vertical-align: middle;
}

.ng-tabs .nav-link.active .badge {
    color: #fff;
}

.ng-tabs .nav-link:hover {
    color: var(--primary);
    background: var(--surface-muted);
}

.ng-tabs .nav-link.active {
    color: var(--primary);
    background: var(--card-white);
    border-bottom: 2px solid var(--primary);
}

/* ---------- Cards ---------- */
.card.ng-content-card {
    background: var(--card-white, #fff);
    border: 1px solid var(--border-color, #dce3ee);
    border-radius: var(--radius, 12px);
    box-shadow: var(--shadow-sm, 0 2px 8px rgba(23,32,51,.06));
    margin-bottom: 0;
}

/* ---------- Avatar ---------- */
.avatar-profile {
    color: var(--primary);
    width: 80px;
    height: 80px;
    margin: 0 auto;
}

.avatar-profile i { font-size: 80px; }

/* ---------- Account details ---------- */
.account-details {
    font-size: 0.88rem;
    color: var(--text-dark);
}

.account-details .text-muted { color: var(--text-grey) !important; }

/* ---------- User stats ---------- */
.user-stats h4 { color: var(--primary); font-weight: 700; }

/* ---------- Riepilogo account (card orizzontale in alto) ---------- */
.account-summary-main { min-width: 180px; }
.account-summary-main h4 { font-weight: 700; }

/* Pulsante "Abilita modifica" (lucchetto) ben visibile sotto il nome account */
.btn-lock-edit {
    font-weight: 600;
    padding: 0.45rem 1.1rem;
    box-shadow: 0 8px 18px -8px rgba(37, 99, 235, 0.55);
    transition: transform .15s, box-shadow .15s;
}
.btn-lock-edit:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px -8px rgba(37, 99, 235, 0.7);
}
.btn-lock-edit i { font-size: 0.9rem; }
.account-summary-stats { gap: 1.5rem; }
.account-summary-stat { min-width: 72px; }
.account-summary-stat h4 { color: var(--primary); font-weight: 700; margin-bottom: 0.15rem; }
.account-details { min-width: 260px; }

/* ---------- Tables ---------- */
.table { margin-bottom: 0; }

.table th {
    font-weight: 600;
    color: var(--text-grey);
    border-bottom-width: 1px;
    padding: 0.85rem 1rem;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.table td { padding: 0.85rem 1rem; vertical-align: middle; }

.table-hover tbody tr:hover { background-color: rgba(37, 99, 235, 0.04); }

/* ---------- Badges / status ---------- */
.badge, .status-badge, .lifetime-badge {
    font-weight: 500;
    font-size: 0.75em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.status-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-weight: 600;
}

.status-active   { background-color: rgba(5, 150, 105, 0.1); color: var(--success); }
.status-update   { background-color: rgba(245, 158, 11, 0.12); color: var(--warning); }
.status-expired  { background-color: rgba(220, 38, 38, 0.1); color: var(--danger); }
.status-available{ background-color: rgba(37, 99, 235, 0.1); color: var(--primary); }
.status-inactive { background-color: rgba(220, 38, 38, 0.1); color: var(--danger); }

.badge.bg-primary { background-color: var(--primary) !important; }
.badge.bg-success { background-color: var(--success) !important; }
.badge.bg-warning { background-color: var(--warning) !important; }
.badge.bg-danger  { background-color: var(--danger) !important; }
.badge.bg-ng-regulation { background-color: var(--ng-regulation) !important; }
.badge.bg-ng-subscription { background-color: var(--ng-subscription) !important; }

/* ---------- Category ---------- */
.category-badge {
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    white-space: nowrap;
}

.category-blueprint     { background: #dbeafe; color: #1e40af; }
.category-subscription  { background: #ede9fe; color: #5b21b6; }
.category-other         { background: #dcfce7; color: #166534; }

/* ---------- Product cards ---------- */
.product-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 1.25rem;
    background: #fff;
    transition: border-color .2s, box-shadow .2s;
}

.product-card:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-md);
}

.product-head { display: flex; align-items: flex-start; gap: 0.75rem; }

.product-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: var(--surface-muted);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.product-tags .badge { font-weight: 600; }

.product-footer { margin-top: auto; padding-top: 0.75rem; border-top: 1px solid var(--border-color); }

.product-price-block { display: flex; align-items: baseline; gap: 0.5rem; font-size: 1.05rem; }

.badge.bg-pro      { background: linear-gradient(135deg, #8b5cf6, #7c3aed) !important; color: #fff; }
.badge.bg-standard { background: linear-gradient(135deg, #2563eb, #1d4ed8) !important; color: #fff; }

.product-card .product-description {
    flex: 1;
    color: var(--text-grey);
    font-size: 0.875rem;
    line-height: 1.5;
    margin-top: 0.5rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-card.active   { border-left: 4px solid var(--success); }
.product-card.available{ border-left: 4px solid var(--primary); }
.product-card.update   { border-left: 4px solid var(--warning); }
.product-card.expired  { border-left: 4px solid var(--danger); }
.product-card.ng-regulation { border-left: 4px solid var(--ng-regulation); }
.product-card.ng-subscription { border-left: 4px solid var(--ng-subscription); }

.product-title    { font-weight: 600; color: var(--text-dark); margin-bottom: 0.25rem; }
.product-subtitle { color: var(--primary); font-weight: 500; font-size: 0.9rem; }

.product-update-price { color: var(--warning); font-weight: 700; }
.product-expired-price { color: var(--danger); font-weight: 700; }
.product-price { font-weight: 600; }

.price-original {
    text-decoration: line-through;
    color: #9ca3af;
    font-size: 0.9rem;
    margin-left: 0.5rem;
}

.discounted-price { color: var(--success); font-weight: 700; }

.version-info { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 0.5rem; font-size: 0.85rem; }
.version-badge { background: var(--surface-muted); padding: 0.2rem 0.5rem; border-radius: 4px; font-size: 0.8rem; }
.version-outdated { background: #fef3c7; color: #92400e; }

.lifetime-badge {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #fff;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
}

/* ---------- Notifications ---------- */
.notification-item {
    border: 1px solid var(--border-color);
    border-radius: var(--radius, 12px);
    padding: 1rem 1.25rem;
    background: #fff;
}

.notification-item:last-child { margin-bottom: 0 !important; }

.notification-header {
    width: 100%;
    border: none;
    background: transparent;
    text-align: left;
    padding: 0;
    margin: 0;
    color: inherit;
}

.notification-header:hover { cursor: pointer; }

.notification-header .chevron {
    transition: transform .2s;
    color: var(--text-grey);
}

.notification-header[aria-expanded="true"] .chevron { transform: rotate(180deg); }

.notification-body {
    font-size: 0.9rem;
    color: var(--text-dark);
    line-height: 1.5;
}

/* L'HTML della notifica (email) deve occupare tutta la larghezza nel tab */
.notification-body > div {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.notification-body h2 { font-size: 1.05rem; margin: 0.5rem 0; }
.notification-body ul { padding-left: 1.2rem; }
.notification-body li { margin: 0.25rem 0; }
.notification-body a { color: var(--primary); }

/* ---------- Home notifications (dettaglio best-of-class) ---------- */
.home-impact-card {
    position: relative;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 1.05rem 1.25rem;
    margin-bottom: 1rem;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .05);
}

.home-impact-card:last-child { margin-bottom: 0; }

/* Riflesso oro brillante usato dai blocchi "Analisi Pro" */
@keyframes home-gold-shimmer {
    0%, 100% { background-position: 0 0, 0% 50%; }
    50%      { background-position: 0 0, 100% 50%; }
}

.home-impact-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem 0;
    font-size: 0.75rem;
    color: var(--text-grey, #9ca3af);
    margin-bottom: 0.15rem;
}

.home-impact-title { font-size: 1.02rem; color: var(--text-dark); font-weight: 700; }

.home-impact-sector {
    font-size: 0.8rem;
    color: #6b7280;
    margin-bottom: 0.5rem;
}

.home-impact-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
}

.home-impact-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    font-size: 0.75rem;
    color: #475569;
}

.home-impact-badge {
    display: inline-block;
    color: #fff;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    white-space: nowrap;
}

/* ---------- Mini-card di sezione (stile centralizzato dei blocchi) ---------- */
.home-sec-card {
    margin-top: 0.85rem;
    border: 1px solid #e5e7eb;
    border-left-width: 4px;
    border-radius: 10px;
    padding: 0.7rem 0.95rem;
    background: #ffffff;
    font-size: 0.875rem;
    color: #374151;
    line-height: 1.55;
}

.home-sec-card:last-child { margin-bottom: 0; }

.home-sec-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}

.home-sec-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.65rem;
    height: 1.65rem;
    border-radius: 8px;
    font-size: 0.78rem;
    color: #ffffff;
    flex-shrink: 0;
}

.home-sec-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: #111827;
}

.home-sec-card--radar      { border-left-color: #3b82f6; background: #f5f9ff; }
.home-sec-card--radar .home-sec-icon      { background: #3b82f6; }

.home-sec-card--change     { border-left-color: #10b981; background: #f2fdf8; }
.home-sec-card--change .home-sec-icon     { background: #10b981; }

.home-sec-card--scadenze   { border-left-color: #f59e0b; background: #fffaf0; }
.home-sec-card--scadenze .home-sec-icon   { background: #f59e0b; }

.home-sec-card--verify     { border-left-color: #6366f1; background: #f6f6ff; }
.home-sec-card--verify .home-sec-icon     { background: #6366f1; }

.home-sec-card--refs       { border-left-color: #94a3b8; background: #f8fafc; }
.home-sec-card--refs .home-sec-icon       { background: #64748b; }

.home-sec-card--context    { border-left-color: #0ea5e9; background: #f0faff; }
.home-sec-card--context .home-sec-icon    { background: #0ea5e9; }

.home-context-text {
    font-size: 0.875rem;
    color: #374151;
    line-height: 1.6;
}

.home-radar-signal {
    font-size: 0.85rem;
    color: #4b5563;
    line-height: 1.55;
}

/* Priorità raggruppate per urgenza */
.home-prio-group { margin-bottom: 0.55rem; }
.home-prio-group:last-child { margin-bottom: 0; }

.home-prio-label {
    display: inline-flex;
    align-items: center;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    margin-bottom: 0.2rem;
}

.home-prio-now     { color: #dc2626; }
.home-prio-monitor { color: #b45309; }
.home-prio-later   { color: #6b7280; }

/* Gravità delle sanzioni */
.home-sanction-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

.home-sev-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    white-space: nowrap;
}

.home-sev-bassa { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
.home-sev-media { background: #fffbeb; color: #b45309; border: 1px solid #fde68a; }
.home-sev-alta  { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }

/* "Cosa cambia per te" */
.home-whofor { display: flex; flex-direction: column; gap: 0.6rem; }

.home-whofor-item {
    padding: 0.55rem 0.75rem;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}

.home-whofor-label {
    display: inline-flex;
    align-items: center;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: #8a6d1a;
    margin-bottom: 0.2rem;
}

.home-whofor-text {
    font-size: 0.875rem;
    color: #374151;
    line-height: 1.55;
}

/* Blocchi "Analisi Pro": bordo oro con riflesso brillante */
.home-sec-card--pro {
    border: 1.5px solid transparent;
    background:
        linear-gradient(#fffbeb, #ffffff 55%) padding-box,
        linear-gradient(120deg, #b8860b, #ffd700, #fff3b0, #ffd700, #b8860b) border-box;
    background-size: 100% 100%, 300% 300%;
    animation: home-gold-shimmer 5s ease-in-out infinite;
}

.home-sec-card--pro .home-sec-icon {
    background: linear-gradient(135deg, #b8860b, #ffd700);
    color: #4a3600;
}

/* Intestazione collassabile (Cosa verificare / Riferimenti) */
.home-sec-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
    text-align: left;
    color: inherit;
    cursor: pointer;
}

.home-sec-toggle .home-sec-title { flex: 1; min-width: 0; }

.home-sec-chevron {
    color: var(--text-grey, #9ca3af);
    font-size: 0.75rem;
    transition: transform .2s;
    flex-shrink: 0;
}

.home-sec-toggle[aria-expanded="true"] .home-sec-chevron { transform: rotate(180deg); }

.home-sec-card .collapse { margin-top: 0.4rem; }

/* Elenco puntato (cosa cambia, cosa verificare, priorità) */
.home-bullet-list {
    margin: 0;
    padding-left: 1.25rem;
    list-style: disc;
}

.notification-body .home-bullet-list { padding-left: 1.25rem; }
.notification-body .home-bullet-list li { margin: 0.3rem 0; font-size: 0.875rem; color: #374151; }

/* Elenco piatto senza marcatori (sanzioni, struttura multilinea) */
.home-plain-list {
    margin: 0;
    padding-left: 0;
    list-style: none;
}

.notification-body .home-plain-list { padding-left: 0; }
.notification-body .home-plain-list li { margin: 0.3rem 0; font-size: 0.875rem; color: #374151; }
.notification-body .home-plain-list li:last-child { margin-bottom: 0; }

.home-ref-list {
    margin: 0;
    padding-left: 1.1rem;
}

.notification-body .home-ref-list { padding-left: 1.1rem; }
.notification-body .home-ref-list li { margin: 0.3rem 0; font-size: 0.875rem; color: #374151; }
.notification-body .home-ref-list ul { padding-left: 1.1rem; margin-top: 0.2rem; }
.home-ref-item { font-size: 0.8rem; color: #6b7280; }
.home-ref-note { color: #9ca3af; font-size: 0.8rem; }

.home-scadenze {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 0.25rem;
}

.home-scadenza {
    flex: 1 1 180px;
    padding: 0.5rem 0.75rem;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.8rem;
}

.home-scadenza-label {
    display: block;
    color: #6b7280;
    font-weight: 600;
    margin-bottom: 0.15rem;
}

.home-scadenza-value { color: #111827; font-weight: 700; }

.home-source { margin-top: 0.9rem; padding-top: 0.75rem; border-top: 1px solid #e5e7eb; }
.home-source a { font-weight: 600; color: var(--primary); text-decoration: none; }
.home-source a:hover { text-decoration: underline; }

/* ---------- Product category sections ---------- */
.product-category-section {
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 1.5rem;
}

.product-category-section:last-child { border-bottom: none; margin-bottom: 0; }

.text-ng-subscription { color: var(--text-ng-subscription); }

/* ---------- Buttons ---------- */
.btn { border-radius: 8px; font-weight: 500; }

.btn-primary { background-color: var(--primary); border-color: var(--primary); }
.btn-primary:hover { background-color: var(--primary-hover); border-color: var(--primary-hover); }
.btn-success { background-color: var(--success); border-color: var(--success); }
.btn-warning { background-color: var(--warning); border-color: var(--warning); color: #fff; }
.btn-danger { background-color: var(--danger); border-color: var(--danger); color: #fff; }
.btn-outline-secondary { border-color: #d1d5db; color: var(--text-grey); }
.btn-outline-secondary:hover { background-color: var(--surface-muted); }

/* ---------- Forms ---------- */
.form-control, .form-select, .input-group-text { border-radius: 8px; }

.form-control:focus, .form-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.12);
}

.form-control:disabled, .form-select:disabled {
    background-color: var(--surface-muted);
    border-color: var(--border-color);
    color: var(--text-grey);
    cursor: not-allowed;
}

.form-edit-mode .form-control:not(:disabled),
.form-edit-mode .form-select:not(:disabled) { background-color: #fff; border-color: #cbd5e1; }

.form-check-input:checked { background-color: var(--primary); border-color: var(--primary); }

.form-label.small { font-size: 0.8rem; margin-bottom: 0.25rem; }

/* ---------- Albero del dominio (aree di attività) ---------- */
.domain-tree {
    border: 1px solid var(--border-color, #dce3ee);
    border-radius: 8px;
    padding: 0.6rem 0.8rem;
    background: var(--bg-body, #f6f8fc);
}

/* Albero in sola lettura (fuori dalla modalità modifica): non interattivo. */
.domain-tree--readonly {
    pointer-events: none;
    opacity: 0.8;
}

/* ---------- Selettore aree di attività: menu categorie + ricerca ---------- */
.domain-picker {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.domain-picker-search { position: relative; }
.domain-search-input { width: 100%; }

/* Barra "configurazione tipica" (pulsante preset per settore) */
.domain-preset-bar {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    background: #f0f7ff;
    border: 1px solid #d6e6ff;
    border-radius: 8px;
    padding: 0.5rem 0.7rem;
}

.domain-preset-hint {
    font-size: 0.78rem;
    color: var(--text-grey, #475569);
    line-height: 1.35;
    flex: 1 1 220px;
    min-width: 0;
}

.domain-picker-body {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 0.6rem;
    align-items: start;
}

/* Menu macro-categorie */
.domain-picker-menu {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    background: #fff;
    border: 1px solid var(--border-color, #dce3ee);
    border-radius: 8px;
    padding: 0.35rem;
    max-height: 420px;
    overflow-y: auto;
}

.domain-menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    width: 100%;
    border: none;
    background: transparent;
    border-radius: 6px;
    padding: 0.45rem 0.6rem;
    text-align: left;
    cursor: pointer;
    color: var(--text-dark, #172033);
    font-size: 0.85rem;
    font-weight: 500;
}

.domain-menu-item:hover { background: var(--surface-muted, #eef2f7); }

.domain-menu-item.active {
    background: #e0ecff;
    color: #1d4ed8;
    font-weight: 600;
}

.domain-menu-name { min-width: 0; }

.domain-menu-count {
    font-size: 0.7rem;
    color: var(--text-grey, #5f6b7e);
    background: #f1f5f9;
    border-radius: 50px;
    padding: 0.1rem 0.45rem;
    flex-shrink: 0;
}

.domain-menu-item.active .domain-menu-count {
    background: #dbeafe;
    color: #1d4ed8;
}

/* Contenuto: albero della categoria selezionata / risultati ricerca */
.domain-picker-content {
    background: #fff;
    border: 1px solid var(--border-color, #dce3ee);
    border-radius: 8px;
    padding: 0.7rem 0.9rem;
    max-height: 420px;
    overflow-y: auto;
}

.domain-content-head { margin-bottom: 0.4rem; }
.domain-content-title { font-weight: 700; font-size: 0.95rem; color: var(--text-dark, #172033); }
.domain-content-desc { font-size: 0.8rem; color: var(--text-grey, #475569); line-height: 1.45; margin-top: 0.15rem; }

.domain-search-section { margin-bottom: 0.7rem; }
.domain-search-section-title {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-grey, #5f6b7e);
    font-weight: 700;
    margin: 0.4rem 0 0.2rem;
}

.domain-node-desc-visible {
    font-size: 0.75rem;
    color: var(--text-grey, #475569);
    line-height: 1.4;
    margin: 0.1rem 0 0.25rem 1.5rem;
}

.domain-node { margin: 0.1rem 0; }

.domain-node-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.15rem;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    border-radius: 4px;
    padding: 0.1rem 0.25rem;
}

.domain-node-label:hover { background: var(--surface-muted, #eef2f7); }
.domain-node-label:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
}

/* La checkbox è SOLO visiva: nessun toggle nativo, il click è gestito dalla riga. */
.domain-node-checkbox {
    pointer-events: none;
    margin: 0;
    flex-shrink: 0;
}

.domain-node-checkbox:disabled {
    cursor: not-allowed;
}

.domain-node-checkbox:checked {
    background-color: var(--primary);
    border-color: var(--primary);
}

.domain-node-checkbox:indeterminate {
    background-color: var(--primary);
    border-color: var(--primary);
}

.domain-node-name {
    font-size: 0.85rem;
    color: var(--text-dark, #172033);
    cursor: pointer;
}

.domain-node-branch {
    font-weight: 600;
}

.domain-children {
    border-left: 1px dashed var(--border-color, #e2e8f0);
    margin-left: 0.5rem;
    padding-left: 0.4rem;
}

.domain-tree-empty {
    padding: 0.6rem 0.4rem;
    line-height: 1.5;
}

.domain-tree.domain-tree-legacy {
    padding: 0.9rem 1rem;
}

/* ---------- Alerts ---------- */
.alert-warning { background-color: #fffbeb; border-color: #fef3c7; color: #92400e; }
.alert-info    { background-color: #f0f9ff; border-color: #e0f2fe; color: #0369a1; }
.alert-danger  { background-color: #fef2f2; border-color: #fee2e2; color: #991b1b; }

/* ---------- Cart ---------- */
.price-display { font-weight: 600; }

/* ---------- Cart: card per famiglia di prodotto (dinamico) ---------- */
.cart-family-card { border-left: 4px solid var(--border-color, #dce3ee); }
.cart-family-ng_regulation { border-left-color: var(--ng-regulation); }
.cart-family-ng_subscription { border-left-color: var(--ng-subscription); }
.cart-family-other { border-left-color: var(--success); }

.cart-family-items { border-top: 1px dashed var(--border-color, #e2e8f0); }

.cart-item-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px dashed var(--border-color, #e2e8f0);
}
.cart-item-row:first-child { padding-top: 0.9rem; }
.cart-item-row:last-child { border-bottom: none; padding-bottom: 0; }

.cart-item-info { flex: 1 1 280px; min-width: 0; }
.cart-item-price { font-weight: 700; flex: 0 0 auto; white-space: nowrap; text-align: right; }
.cart-item-actions { display: flex; gap: 0.5rem; flex: 0 0 auto; }

@media (max-width: 640px) {
    .cart-item-row { flex-direction: column; align-items: flex-start; }
    .cart-item-price { white-space: normal; text-align: left; }
}

/* ---------- Loading ---------- */
#infoBoxSection { min-height: 300px; }

/* ---------- Dropdown ---------- */
.dropdown-menu { border: none; box-shadow: var(--shadow-md); border-radius: 10px; }
.dropdown-item { padding: 0.5rem 1rem; border-radius: 6px; margin: 0 0.25rem; }
.dropdown-item:hover { background-color: rgba(37, 99, 235, 0.08); }

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
    #formActions { flex-direction: column; }
    #formActions .btn { width: 100%; }
    .product-category-section .d-flex { flex-direction: column; align-items: flex-start !important; gap: 0.75rem; }
    .ng-tabs .nav-link { padding: 0.5rem 0.8rem; font-size: 0.85rem; }

    /* Aree di attività: menu categorie orizzontale scorrevole sopra l'albero */
    .domain-picker-body { grid-template-columns: 1fr; }
    .domain-picker-menu {
        flex-direction: row;
        overflow-x: auto;
        max-height: none;
    }
    .domain-menu-item { flex: 0 0 auto; }
    .domain-picker-content { max-height: 360px; }
    .account-summary-stats { gap: 1rem; }
    .account-details { min-width: 0; }

    /* Notifiche: colonna di lettura più larga sul mobile */
    .notification-item { padding: 0.75rem 0.85rem; }
    .notification-body > div { padding: 8px 2px !important; }
    .notification-body h2 { font-size: 1rem; }
    .notification-body { font-size: 0.85rem; }
    .home-impact-card { padding: 0.85rem; }
    .home-scadenze { flex-direction: column; }
}

/* ============================================================
   Selettore abbonamento (NG_SUBSCRIPTION) � due blocchi STANDARD/PRO
   Sostituisce le card: ogni famiglia ha un blocco, le durate sono radio.
   ============================================================ */

.subscription-current-banner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1.1rem;
    border-radius: var(--radius);
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    color: #3730a3;
    font-size: 0.9rem;
    margin-bottom: 1.2rem;
}
.subscription-current-banner i { font-size: 1.1rem; }

/* Blocco famiglia (STANDARD / PRO) */
.picker-group {
    background: var(--card-white, #fff);
    border: 1px solid var(--border-color, #dce3ee);
    border-radius: var(--radius);
    margin-bottom: 1rem;
    overflow: hidden;
}
.picker-group.picker-pro { border-top: 4px solid #7c3aed; }
.picker-group.picker-standard { border-top: 4px solid #2563eb; }

.picker-group-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1.1rem;
    background: var(--bg-body, #f6f8fc);
    border-bottom: 1px solid var(--border-color, #dce3ee);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-dark, #172033);
}
.picker-block-name { font-weight: 700; }
.picker-group-header .picker-desc { font-weight: 400; color: var(--text-grey, #5f6b7e); font-size: 0.82rem; margin-left: auto; text-align: right; }

.picker-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.6rem;
    padding: 0.9rem;
}

/* Singola durata */
.picker-option {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.8rem 0.95rem;
    border: 1.5px solid var(--border-color, #dce3ee);
    border-radius: var(--radius);
    background: #fff;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
    user-select: none;
}
.picker-option:hover:not(.picker-option-disabled) {
    border-color: var(--primary);
    box-shadow: 0 6px 14px -8px rgba(37, 99, 235, 0.4);
    transform: translateY(-1px);
}
.picker-option.picker-option-selected {
    border-color: var(--primary);
    background: #eff6ff;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.picker-option.picker-option-upgrade { border-color: #a78bfa; }
.picker-option.picker-option-upgrade.picker-option-selected { background: #f5f3ff; border-color: #7c3aed; }
.picker-option.picker-option-disabled {
    opacity: 0.55;
    cursor: not-allowed;
    background: #f8fafc;
}

.picker-option input[type="radio"],
.picker-option input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.picker-opt-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.picker-opt-duration { font-weight: 700; font-size: 0.98rem; color: var(--text-dark, #172033); }
.picker-opt-check {
    width: 20px; height: 20px;
    border: 2px solid var(--border-color, #dce3ee);
    border-radius: 50%;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    color: #fff;
}
.picker-option-selected .picker-opt-check { background: var(--primary); border-color: var(--primary); }
.picker-option-upgrade.picker-option-selected .picker-opt-check { background: #7c3aed; border-color: #7c3aed; }

.picker-opt-price { font-size: 1.15rem; font-weight: 800; color: var(--text-dark, #172033); }
.picker-opt-price .picker-price-original { font-size: 0.85rem; font-weight: 500; color: #94a3b8; text-decoration: line-through; margin-right: 0.4rem; }
.picker-opt-price .picker-price-credit { font-size: 0.8rem; font-weight: 600; color: var(--success); display: block; }

.picker-opt-tag {
    align-self: flex-start;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.15rem 0.55rem;
    border-radius: 60px;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}
.picker-opt-tag.tag-new     { background: #dbeafe; color: #1d4ed8; }
.picker-opt-tag.tag-extend  { background: #d1fae5; color: #047857; }
.picker-opt-tag.tag-upgrade { background: #f3e8ff; color: #6d28d9; }
.picker-opt-tag.tag-renew   { background: #fef3c7; color: #b45309; }
.picker-opt-tag.tag-current { background: #e2e8f0; color: #475569; }
.picker-opt-tag.tag-blocked { background: #fee2e2; color: #b91c1c; }

.picker-opt-reason { font-size: 0.75rem; color: #b91c1c; line-height: 1.35; }
.picker-opt-date { font-size: 0.75rem; color: var(--text-grey, #5f6b7e); }

/* ============================================================
   Abbonamenti posseduti � layout VERTICALE (card impilate)
   Sostituisce le tabelle orizzontali del tab "I tuoi prodotti"
   ============================================================ */

.sub-card {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    background: var(--card-white, #fff);
    border: 1px solid var(--border-color, #dce3ee);
    border-radius: var(--radius);
    padding: 1rem 1.1rem;
    margin-bottom: 0.8rem;
    box-shadow: 0 2px 8px rgba(23,32,51,.04);
}
.sub-card-head { display: flex; align-items: center; gap: 0.8rem; }
.sub-card-icon {
    width: 42px; height: 42px;
    border-radius: 10px;
    background: #f1f5f9;
    color: #475569;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.05rem; flex-shrink: 0;
}
.sub-card-main { min-width: 0; }
.sub-card-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.6rem;
}
.sub-card-detail {
    background: var(--bg-body, #f6f8fc);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 8px;
    padding: 0.5rem 0.7rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.sub-card-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: .4px; color: var(--text-grey, #5f6b7e); }
.sub-card-value { font-size: 0.9rem; font-weight: 600; color: var(--text-dark, #172033); }
.sub-card-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* ============================================================
   Blueprint Normativa � LISTA ESPANDIBILE (non pi� card)
   Colore blu ridotto: accenti neutri e badge colorati minimi
   ============================================================ */

.reg-list-item {
    border: 1px solid var(--border-color, #dce3ee);
    border-radius: var(--radius);
    background: #fff;
    margin-bottom: 0.5rem;
    overflow: hidden;
}
.reg-list-item:hover { border-color: #cbd5e1; }

.reg-item-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.8rem 1rem;
    cursor: pointer;
    user-select: none;
}
.reg-item-head:hover { background: #f8fafc; }
.reg-item-main { min-width: 0; }
.reg-item-title { font-weight: 600; color: var(--text-dark, #172033); }
.reg-item-meta { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.25rem; align-items: center; }

.reg-version {
    font-size: 0.75rem;
    font-weight: 600;
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
    padding: 0.1rem 0.5rem;
    border-radius: 50px;
}
.reg-version-outdated { background: #fef3c7; color: #92400e; border-color: #fde68a; }

.reg-status { font-size: 0.75rem; font-weight: 600; padding: 0.1rem 0.5rem; border-radius: 50px; }
.reg-status-update_available { background: #fef3c7; color: #92400e; }
.reg-status-available { background: #f1f5f9; color: #475569; }
.reg-status-expired { background: #fee2e2; color: #b91c1c; }
.reg-status-active { background: #d1fae5; color: #047857; }

.reg-item-side { display: flex; align-items: center; gap: 0.8rem; flex-shrink: 0; }
.reg-price { font-weight: 700; color: var(--text-dark, #172033); white-space: nowrap; }
.reg-price-original { font-size: 0.8rem; color: #94a3b8; text-decoration: line-through; }
.reg-item-chevron { color: #94a3b8; font-size: 0.85rem; transition: transform .2s; }
.reg-item-open .reg-item-chevron { transform: rotate(180deg); }

.reg-item-body {
    display: none;
    padding: 0 1rem 1rem 1rem;
    border-top: 1px dashed var(--border-color, #e2e8f0);
}
.reg-item-open .reg-item-body { display: block; }
.reg-item-desc { color: var(--text-grey, #5f6b7e); font-size: 0.88rem; margin: 0.8rem 0; }
.reg-item-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* ============================================================
   Carrello � pill chiare "Abbonamento" vs "Una tantum"
   ============================================================ */

.pill-purchase {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.15rem 0.6rem;
    border-radius: 50px;
}
.pill-sub { background: #ede9fe; color: #6d28d9; border: 1px solid #ddd6fe; }
.pill-onetime { background: #eef2ff; color: #3730a3; border: 1px solid #e0e7ff; }

/* ============================================================
   Toast (popup di conferma) � aggiunto/rimosso dal carrello
   ============================================================ */

#ngToast {
    position: fixed;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: #111827;
    color: #fff;
    padding: 0.7rem 1.4rem;
    border-radius: 60px;
    font-size: 0.92rem;
    font-weight: 600;
    box-shadow: 0 12px 30px rgba(0,0,0,.25);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
    z-index: 3000;
}
#ngToast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
#ngToast.ng-toast-success { background: #047857; }
#ngToast.ng-toast-info { background: #111827; }
#ngToast.ng-toast-error { background: #b91c1c; }

/* ============================================================
   ONBOARDING PROFILO — modale di prima configurazione
   Bordo animato con gradiente conico rotante
   ============================================================ */

.modal-content.ng-onboarding-frame {
    position: relative;
    border: none;
    background: #ffffff;
    border-radius: 22px;
    padding: 3px;
    overflow: hidden;
    box-shadow: 0 24px 60px -20px rgba(23, 32, 51, 0.35);
}

/* Bordo animato: gradiente conico che ruota dietro il contenuto */
.modal-content.ng-onboarding-frame::before {
    content: '';
    position: absolute;
    inset: -50%;
    background: conic-gradient(
        from 0deg,
        #2563eb, #06b6d4, #10b981, #f59e0b, #ec4899, #8b5cf6, #2563eb
    );
    animation: ng-onboarding-spin 7s linear infinite;
    z-index: 0;
}

@keyframes ng-onboarding-spin {
    to { transform: rotate(360deg); }
}

.ng-onboarding-inner {
    position: relative;
    z-index: 1;
    background: #ffffff;
    border-radius: 19px;
    overflow: hidden;
}

.ng-onboarding-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border-bottom: none;
    padding: 1.9rem 2rem 0.25rem;
}

.ng-onboarding-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.55rem;
    color: #fff;
    background: linear-gradient(135deg, #2563eb, #8b5cf6);
    box-shadow: 0 10px 24px -8px rgba(99, 102, 241, 0.6);
    margin-bottom: 1rem;
    animation: ng-onboarding-pulse 2.4s ease-in-out infinite;
}

@keyframes ng-onboarding-pulse {
    0%, 100% { transform: scale(1); box-shadow: 0 10px 24px -8px rgba(99, 102, 241, 0.6); }
    50%      { transform: scale(1.06); box-shadow: 0 14px 30px -6px rgba(99, 102, 241, 0.75); }
}

.ng-onboarding-header .modal-title {
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--text-dark, #172033);
}

.ng-onboarding-subtitle {
    color: var(--text-grey, #5f6b7e);
    font-size: 0.9rem;
    line-height: 1.5;
    max-width: 420px;
    margin: 0.35rem auto 0;
}

.ng-onboarding-body {
    padding: 1.25rem 2rem 0.5rem;
}

.ng-onboarding-footer {
    border-top: none;
    padding: 0.75rem 2rem 1.6rem;
    flex-direction: column;
    gap: 0.4rem;
}

.ng-onboarding-skip {
    text-decoration: none;
    font-size: 0.8rem;
    color: var(--text-grey, #5f6b7e);
    text-align: center;
}

.ng-onboarding-skip:hover {
    text-decoration: underline;
    color: var(--primary);
}

/* Step di successo */
.ng-onboarding-success {
    text-align: center;
    padding: 0.5rem 0 0.25rem;
}

.ng-onboarding-success-icon {
    width: 76px;
    height: 76px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
    font-size: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 28px -10px rgba(5, 150, 105, 0.6);
    animation: ng-onboarding-pop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes ng-onboarding-pop {
    0%   { transform: scale(0); }
    70%  { transform: scale(1.12); }
    100% { transform: scale(1); }
}

.ng-onboarding-success h5 {
    font-weight: 700;
    color: var(--text-dark, #172033);
}

.ng-onboarding-success-note {
    margin-top: 0.85rem;
    padding: 0.7rem 0.9rem;
    background: #eff6ff;
    border: 1px solid #dbeafe;
    border-radius: 10px;
    color: #1e40af;
    font-size: 0.85rem;
    line-height: 1.5;
    text-align: left;
}