/**
 * Nova Backend — stylesheet condiviso (componenti UI).
 * I colori vivono nei file tema (snow.css, slate.css, …).
 */

*, *::before, *::after { box-sizing: border-box; }

/* Token marketplace / hub — mappati sul tema attivo, toni più morbidi */
:root {
    --mp-canvas: var(--bg-body);
    --mp-surface: var(--bg-card);
    --mp-surface-muted: var(--card-header-bg, var(--bg-hover));
    --mp-border: color-mix(in srgb, var(--border-color) 88%, transparent);
    --mp-border-strong: var(--border-color);
    --mp-text: var(--text-primary);
    --mp-text-soft: var(--text-secondary);
    --mp-text-muted: var(--text-muted);
    --mp-accent: var(--primary);
    --mp-accent-hover: var(--primary-dark);
    --mp-accent-soft: color-mix(in srgb, var(--primary) 12%, var(--bg-card));
    --mp-link: var(--link-color, var(--primary));
    --mp-link-hover: var(--link-hover-color, var(--primary-dark, var(--primary)));
    --mp-shadow: var(--shadow-sm);
    --mp-shadow-md: var(--shadow);
    --mp-btn-primary-bg: var(--primary);
    --mp-btn-primary-border: var(--primary-dark);
    --mp-btn-primary-text: var(--btn-primary-text, var(--on-primary, #fff));
    --mp-tab-active: var(--text-primary);
    --mp-tab-indicator: var(--primary);
    --mp-pill-active-bg: var(--primary);
    --mp-pill-active-text: var(--btn-primary-text, var(--on-primary, #fff));
    /* Pulsanti guida pagina (helper) — tono distinto dal primary del tema */
    --help-accent: #0f766e;
    --help-accent-hover: #0d9488;
    --help-accent-soft: color-mix(in srgb, #0f766e 14%, var(--bg-card));
    --help-on-accent: #ffffff;
    /* Bootstrap (tooltip/modali/…): stesso carattere Aspetto, non lo stack BS di default */
    --bs-font-sans-serif: var(--platform-font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif);
    --bs-body-font-family: var(--platform-font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif);
    /* Colori semantici BS → tema (border-*/btn/text che leggono --bs-*) */
    --bs-primary: var(--primary);
    --bs-secondary: var(--secondary);
    --bs-success: var(--success);
    --bs-info: var(--info);
    --bs-warning: var(--warning);
    --bs-danger: var(--error, #dc3545);
    --bs-link-color: var(--link-color, var(--primary));
    --bs-link-hover-color: var(--link-hover-color, var(--primary-dark, var(--primary)));
    --bs-focus-ring-color: var(--focus-ring, color-mix(in srgb, var(--primary) 25%, transparent));
}

body {
    background: var(--bg-body);
    color: var(--text-primary);
    min-height: 100vh;
    font-family: var(--platform-font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif);
    font-size: 0.9375rem;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

html { scroll-behavior: smooth; }

/* ── Sidebar ── */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--sidebar-width);
    height: 100vh;
    background: var(--bg-sidebar);
    color: var(--sidebar-text);
    z-index: 1000;
    transition: transform var(--transition-normal);
    border-right: 1px solid var(--sidebar-border);
}

.sidebar-brand {
    padding: 0 1.15rem;
    min-height: var(--chrome-header-height, 3.75rem);
    height: var(--chrome-header-height, 3.75rem);
    box-sizing: border-box;
    font-size: 1.2rem;
    font-weight: 800;
    border-bottom: 1px solid var(--sidebar-border);
    display: flex;
    align-items: center;
    gap: 0.65rem;
    color: var(--sidebar-brand-text, var(--sidebar-text-hover, #fff));
    letter-spacing: -0.03em;
}

.sidebar-brand i {
    color: var(--sidebar-brand-icon, var(--accent));
    font-size: 1.45rem;
}

.sidebar-nav .nav-section {
    padding: 0.85rem 1.35rem 0.35rem;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--sidebar-section-text, var(--sidebar-text));
    opacity: var(--sidebar-section-opacity, 0.55);
    font-weight: 700;
}

.sidebar-nav .nav-link {
    color: var(--sidebar-text);
    padding: 0.72rem 1.35rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
    border-left: 3px solid transparent;
    font-weight: 500;
    font-size: 0.875rem;
    text-decoration: none;
}

.sidebar-nav .nav-link:hover {
    background: var(--sidebar-active-bg);
    color: var(--sidebar-text-hover);
    border-left-color: var(--accent);
}

.sidebar-nav .nav-link.active {
    background: var(--sidebar-active-bg);
    color: var(--sidebar-text-hover);
    border-left-color: var(--accent);
    font-weight: 600;
}

.sidebar-nav .nav-link i {
    font-size: 1.05rem;
    width: 1.35rem;
    text-align: center;
    opacity: 0.92;
}

/* Chrome footer sidebar: dossier + stato affiancati con divisore */
.sidebar-chrome-footer {
    margin-top: auto;
    flex-shrink: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem 0.5rem;
}

/* Meta piattaforma in sidebar (dossier flyout; stato = pill gemella) */
.sidebar-install-dossier {
    position: relative;
    display: flex;
    justify-content: flex-end;
    padding: 0;
    flex-shrink: 0;
    margin-top: 0;
}
.sidebar-install-dossier__trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    max-width: 100%;
    margin: 0;
    padding: 0.28rem 0.55rem;
    border: 1px solid color-mix(in srgb, var(--sidebar-border, var(--border-color)) 80%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--sidebar-surface, var(--bg-card)) 70%, transparent);
    color: var(--sidebar-section-text, var(--sidebar-text));
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.2;
    cursor: pointer;
    outline: none;
}
.sidebar-install-dossier__trigger:hover,
.sidebar-install-dossier__trigger:focus-visible {
    border-color: color-mix(in srgb, var(--accent, var(--primary)) 55%, var(--sidebar-border, var(--border-color)));
    color: var(--sidebar-text, var(--text-primary));
}
.sidebar-install-dossier__trigger.is-attention {
    border-color: color-mix(in srgb, var(--warning, #ffc107) 55%, var(--sidebar-border, var(--border-color)));
}
.sidebar-install-dossier__ver {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.7rem;
    opacity: 0.92;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 5.5rem;
}
.sidebar-install-dossier__dot {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: var(--warning, #ffc107);
    flex-shrink: 0;
}
.sidebar-install-dossier__panel {
    position: fixed;
    bottom: 3rem;
    left: var(--sidebar-width, 260px);
    top: auto;
    z-index: 1040;
    width: min(24rem, calc(100vw - var(--sidebar-width, 260px) - 1.5rem));
    max-height: min(78vh, 36rem);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin-left: 0.5rem;
    border: 1px solid var(--border-color, var(--mp-border));
    border-radius: 12px;
    background: var(--bg-card, var(--mp-surface));
    color: var(--text-primary);
    box-shadow: 0 12px 32px color-mix(in srgb, var(--text-primary) 18%, transparent);
}
.sidebar-install-dossier__panel[hidden] {
    display: none !important;
}
.sidebar-install-dossier__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 0.85rem;
    border-bottom: 1px solid var(--border-color, var(--mp-border));
    background: color-mix(in srgb, var(--bg-card, var(--mp-surface)) 88%, var(--primary) 12%);
}
.sidebar-install-dossier__title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--text-primary);
}
.sidebar-install-dossier__title > i {
    font-size: 0.95rem;
    opacity: 0.9;
    color: var(--primary);
}
.sidebar-install-dossier__hint {
    margin-top: 0.2rem;
    font-size: 0.72rem;
    line-height: 1.35;
    color: var(--text-muted);
}
.sidebar-install-dossier__close {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
}
.sidebar-install-dossier__close:hover,
.sidebar-install-dossier__close:focus-visible {
    color: var(--text-primary);
    background: color-mix(in srgb, var(--primary) 12%, transparent);
}
.sidebar-install-dossier__body {
    overflow: auto;
    padding: 0.35rem 0.65rem 0.85rem;
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
}
.sidebar-install-dossier__tabs {
    min-height: 0;
}
.sidebar-install-dossier__tabs .nova-ui-tabs__nav,
.sidebar-install-dossier__tabs .nav-tabs {
    margin-bottom: 0.45rem;
    flex-wrap: nowrap;
}
.sidebar-install-dossier__tabs .nav-link {
    font-size: 0.78rem;
    padding: 0.35rem 0.65rem;
}
.sidebar-install-dossier__tabs .tab-content {
    min-height: 0;
}
.sidebar-install-dossier__fact.is-long {
    grid-template-columns: 1fr;
}
.sidebar-install-dossier__fact.is-long dd {
    align-items: flex-start;
}
.sidebar-install-dossier__fact.is-long .sidebar-install-dossier__value {
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 4.5rem;
    overflow: auto;
}
.sidebar-install-dossier__empty {
    padding: 0.35rem 0.15rem;
}
.sidebar-install-dossier__section + .sidebar-install-dossier__section {
    margin-top: 0.75rem;
    padding-top: 0.65rem;
    border-top: 1px solid color-mix(in srgb, var(--border-color) 80%, transparent);
}
.sidebar-install-dossier__section-title {
    margin: 0 0 0.4rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.sidebar-install-dossier__facts {
    margin: 0;
}
.sidebar-install-dossier__fact {
    display: grid;
    grid-template-columns: minmax(5.5rem, 38%) 1fr;
    gap: 0.35rem 0.55rem;
    align-items: start;
    padding: 0.28rem 0;
}
.sidebar-install-dossier__fact dt {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted);
    line-height: 1.35;
}
.sidebar-install-dossier__fact dd {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
}
.sidebar-install-dossier__value {
    display: block;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.78rem;
    line-height: 1.35;
    color: var(--text-primary);
    word-break: break-word;
}
.sidebar-install-dossier__fact.is-warning .sidebar-install-dossier__value {
    color: var(--warning, #ffc107);
}
.sidebar-install-dossier__fact.is-success .sidebar-install-dossier__value {
    color: var(--success, #198754);
}
.sidebar-install-dossier__fact.is-danger .sidebar-install-dossier__value {
    color: var(--danger, #dc3545);
}
.sidebar-install-dossier__copy {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
}
.sidebar-install-dossier__copy:hover,
.sidebar-install-dossier__copy:focus-visible {
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 12%, transparent);
}

.sidebar-platform-uip--meta {
    padding-top: 0;
    padding-bottom: 0.15rem;
}
.sidebar-platform-uip--meta .sidebar-platform-uip__hit {
    flex-direction: row;
    align-items: baseline;
    gap: 0.35rem;
    padding-top: 0.05rem;
    padding-bottom: 0.15rem;
}
.sidebar-platform-uip--meta .sidebar-platform-uip__label {
    font-size: 0.62rem;
    flex-shrink: 0;
}
.sidebar-platform-uip--meta .sidebar-platform-uip__value {
    font-size: 0.72rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sidebar-platform-uip--top-end {
    padding: 0.35rem 0.85rem 0.15rem;
}
.sidebar-platform-uip--top-end .sidebar-platform-uip__hit {
    align-items: flex-end;
    text-align: right;
}
.sidebar-platform-uip__hit {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.12rem;
    min-width: 0;
    width: 100%;
    margin: 0;
    padding: 0.15rem 0.15rem 0.35rem;
    border: 0;
    background: transparent;
    color: var(--sidebar-section-text, var(--sidebar-text));
    text-align: left;
    cursor: default;
    outline: none;
}
.sidebar-platform-uip__hit:focus-visible {
    outline: 1px solid color-mix(in srgb, var(--accent, var(--primary)) 55%, transparent);
    outline-offset: 2px;
    border-radius: 4px;
}
.sidebar-platform-uip__label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1.2;
    color: var(--sidebar-section-text, var(--sidebar-text));
    opacity: var(--sidebar-section-opacity, 0.85);
}
/* Valore in <code>: niente bg/colore del content area (--bg-hover / --text-primary),
   altrimenti su temi light (es. Arctic) testo sidebar chiaro su pill chiara = illegibile. */
.sidebar .sidebar-platform-uip code.sidebar-platform-uip__value,
.sidebar-platform-uip__value {
    display: block;
    max-width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-size: 0.72rem;
    font-weight: 600;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    letter-spacing: 0.02em;
    line-height: 1.25;
    color: var(--sidebar-text-hover, var(--sidebar-brand-text, var(--sidebar-text)));
    word-break: break-all;
    white-space: normal;
}

/* Stati servizi piattaforma — pill + flyout (gemello install dossier) */
.sidebar-status {
    position: relative;
    display: flex;
    justify-content: flex-end;
    flex-shrink: 0;
    padding: 0;
}
.sidebar-chrome-footer > .sidebar-install-dossier + .sidebar-status {
    padding-left: 0.45rem;
    margin-left: 0.05rem;
    border-left: 1px solid color-mix(in srgb, var(--sidebar-border, var(--border-color)) 85%, transparent);
}
.sidebar-status__trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    max-width: 100%;
    margin: 0;
    padding: 0.28rem 0.55rem;
    border: 1px solid color-mix(in srgb, var(--sidebar-border, var(--border-color)) 80%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--sidebar-surface, var(--bg-card)) 70%, transparent);
    color: var(--sidebar-section-text, var(--sidebar-text));
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.2;
    cursor: pointer;
    outline: none;
}
.sidebar-status__trigger:hover,
.sidebar-status__trigger:focus-visible {
    border-color: color-mix(in srgb, var(--accent, var(--primary)) 55%, var(--sidebar-border, var(--border-color)));
    color: var(--sidebar-text, var(--text-primary));
}
.sidebar-status__trigger.is-attention {
    border-color: color-mix(in srgb, var(--warning, #ffc107) 55%, var(--sidebar-border, var(--border-color)));
}
.sidebar-status__trigger > i {
    flex: 0 0 auto;
    font-size: 0.85rem;
    line-height: 1;
    opacity: 0.95;
}
.sidebar-status__trigger-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 5.5rem;
}
.sidebar-status__attention-dot {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: var(--warning, #ffc107);
    flex-shrink: 0;
}
.sidebar-status__attention-dot[hidden] {
    display: none !important;
}
.sidebar-status__panel {
    position: fixed;
    bottom: 3rem;
    left: var(--sidebar-width, 260px);
    top: auto;
    z-index: 1040;
    width: min(20rem, calc(100vw - var(--sidebar-width, 260px) - 1.5rem));
    max-height: min(70vh, 28rem);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin-left: 0.5rem;
    border: 1px solid var(--border-color, var(--mp-border));
    border-radius: 12px;
    background: var(--bg-card, var(--mp-surface));
    color: var(--text-primary);
    box-shadow: 0 12px 32px color-mix(in srgb, var(--text-primary) 18%, transparent);
}
.sidebar-status__panel[hidden] {
    display: none !important;
}
.sidebar-status__panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 0.85rem;
    border-bottom: 1px solid var(--border-color, var(--mp-border));
    background: color-mix(in srgb, var(--bg-card, var(--mp-surface)) 88%, var(--primary) 12%);
}
.sidebar-status__panel-title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--text-primary);
}
.sidebar-status__panel-title > i {
    font-size: 0.95rem;
    opacity: 0.9;
    color: var(--primary);
}
.sidebar-status__panel-hint {
    margin-top: 0.25rem;
    font-size: 0.75rem;
    line-height: 1.35;
    color: var(--text-muted);
}
.sidebar-status__panel-close {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
}
.sidebar-status__panel-close:hover,
.sidebar-status__panel-close:focus-visible {
    color: var(--text-primary);
    background: color-mix(in srgb, var(--text-primary) 8%, transparent);
}
.sidebar-status__panel-body {
    padding: 0.55rem 0.75rem 0.75rem;
    overflow: auto;
    flex: 1 1 auto;
    min-height: 0;
}
.sidebar-status__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.22rem;
}
.sidebar-status__item {
    display: block;
    min-width: 0;
    margin: 0;
    padding: 0;
    color: var(--text-primary);
    overflow: visible;
}
.sidebar-status__hit {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    width: 100%;
    margin: 0;
    padding: 0.05rem 0;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: default;
    outline: none;
    overflow: visible;
}
.sidebar-status__hit:focus-visible {
    outline: 1px solid color-mix(in srgb, var(--accent, #6366f1) 55%, transparent);
    outline-offset: 2px;
    border-radius: 4px;
}
.sidebar-status__item .nova-ui-status-dot-host {
    width: 1.05rem;
    height: 1.05rem;
    max-width: 1.2rem;
    max-height: 1.2rem;
    overflow: visible;
}
.sidebar-status__item .nova-ui-status-dot {
    width: var(--obj-status-size, 0.45rem);
    height: var(--obj-status-size, 0.45rem);
    border-radius: 999px;
    flex: 0 0 auto;
    display: inline-block;
    background: var(--obj-status-off, var(--text-muted, #94a3b8));
}
.sidebar-status__item .nova-ui-status-dot--on,
.sidebar-status__item .nova-ui-status-dot--success {
    background: var(--obj-status-on, var(--success, #16a34a));
}
.sidebar-status__item .nova-ui-status-dot--off,
.sidebar-status__item .nova-ui-status-dot--danger {
    background: var(--obj-status-off, color-mix(in srgb, var(--sidebar-text, #94a3b8) 55%, transparent));
}
.sidebar-status__item .nova-ui-status-dot--warn {
    background: var(--obj-status-warn, var(--warning, #d97706));
}
.sidebar-status__label {
    font-size: 0.72rem;
    font-weight: 550;
    letter-spacing: 0.01em;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.main-content {
    margin-left: var(--sidebar-width);
    min-height: 100vh;
    transition: margin-left var(--transition-normal);
    background: var(--bg-body);
}

/* ── Topbar ── */
.topbar {
    background: var(--topbar-bg, var(--bg-card));
    padding: 0 1.5rem;
    min-height: var(--chrome-header-height, 3.75rem);
    height: var(--chrome-header-height, 3.75rem);
    box-sizing: border-box;
    box-shadow: var(--shadow-sm);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid var(--border-color);
    backdrop-filter: blur(10px);
}

.topbar-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    flex: 0 1 auto;
    max-width: min(42%, 28rem);
}

.topbar-widgets {
    display: flex;
    align-items: center;
    min-width: 0;
    max-height: 3.25rem;
}

.topbar-widgets .widget-grid,
.topbar-widgets .row {
    display: flex !important;
    flex-wrap: nowrap;
    gap: 0.5rem;
    margin: 0 !important;
    align-items: center;
}

.topbar-widgets .row.g-3 > [class*="col"],
.topbar-widgets .widget-grid-item {
    flex: 0 0 auto !important;
    max-width: none !important;
    width: auto !important;
    padding: 0 !important;
    animation: none;
}

.topbar-widgets .widget-card {
    margin: 0;
    border-radius: 8px;
    box-shadow: none;
    border: 1px solid var(--border-color);
    min-width: 7rem;
    max-width: 14rem;
}

.topbar-widgets .widget-card:hover { transform: none; }
.topbar-widgets .widget-header { padding: 0.25rem 0.5rem 0; }
.topbar-widgets .widget-title { font-size: 0.7rem; margin: 0; }
.topbar-widgets .widget-body { padding: 0.25rem 0.5rem 0.4rem; font-size: 0.75rem; }
.topbar-widgets .widget-counter { padding: 0.35rem 0.5rem; }
.topbar-widgets .widget-counter .display-4 { font-size: 1.15rem; line-height: 1.1; }

.topbar-title {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.03em;
    line-height: 1.25;
    min-width: 0;
}

.topbar-title__icon {
    font-size: 1.15rem;
    color: var(--primary);
    flex-shrink: 0;
}

.topbar-title > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topbar-user {
    display: flex;
    align-items: center;
    gap: 1.15rem;
    flex: 0 0 auto;
    margin-left: 0.75rem;
    padding-right: 0.15rem;
}

.topbar-notifications {
    flex: 0 0 auto;
}

.topbar-profile {
    flex: 0 0 auto;
}

.topbar-chrome-btn {
    min-width: 2.5rem;
    min-height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
}

.topbar-user .topbar-user-menu.dropdown-toggle::after {
    display: none;
}

/* Pallino accessi sito — topbar destra (solo admin): verde / arancio / rosso */
.nova-site-mode-dot {
    display: inline-flex;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    flex-shrink: 0;
    border: 2px solid var(--bg-card, #fff);
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.12);
    text-decoration: none !important;
    vertical-align: middle;
}
.nova-site-mode-dot--open {
    background: #22c55e;
    box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.35), 0 0 10px rgba(34, 197, 94, 0.4);
}
.nova-site-mode-dot--maintenance {
    background: #f59e0b;
    box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.35), 0 0 10px rgba(245, 158, 11, 0.45);
}
.nova-site-mode-dot--construction {
    background: #ef4444;
    box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.35), 0 0 10px rgba(239, 68, 68, 0.45);
}
.nova-site-mode-dot:hover {
    transform: scale(1.15);
}

.topbar-page-help {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

.topbar-page-help .nova-help-btn {
    white-space: nowrap;
}

.backend-footer-widgets {
    border-top: 1px solid var(--border-color);
    background: var(--bg-card, transparent);
    padding-top: 0.75rem;
}

.backend-footer-widgets .widget-card {
    border-radius: 8px;
    margin-bottom: 0.5rem;
}

.backend-footer-widgets .widget-card:hover { transform: none; }
.backend-footer-widgets .widget-header { padding: 0.5rem 0.75rem 0.25rem; }
.backend-footer-widgets .widget-title { font-size: 0.8rem; }
.backend-footer-widgets .widget-body { padding: 0.5rem 0.75rem; font-size: 0.85rem; }
.backend-footer-widgets .widget-grid-item { animation: none; }

.topbar .btn-link {
    color: var(--text-secondary) !important;
    text-decoration: none;
}

.topbar .btn-link:hover { color: var(--primary) !important; }

.topbar-user .avatar {
    width: 38px;
    height: 38px;
    border-radius: var(--radius);
    background: linear-gradient(145deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: var(--btn-primary-text, #fff);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.875rem;
    box-shadow: var(--shadow-sm);
    padding: 0;
    line-height: 1;
}

.content-wrapper {
    /* Top più stretto: meno vuoto tra topbar e sottotitolo/contenuto */
    padding: 0.65rem 1.35rem 1.35rem;
}

/* ── Cards ── */
.card {
    border: 1px solid var(--mp-border, var(--border-color));
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    background: var(--bg-card);
    overflow: hidden;
}

.card-header {
    background: var(--card-header-bg);
    border-bottom: 1px solid var(--border-color);
    padding: 1rem 1.25rem;
    font-weight: 650;
    color: var(--text-primary);
    font-size: 0.925rem;
}

.card-body {
    padding: 1.25rem;
    color: var(--text-primary);
}

.card-footer {
    background: var(--card-footer-bg);
    border-top: 1px solid var(--border-color);
    padding: 0.85rem 1.25rem;
}

/* ── Stats ── */
.stat-card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: 1.35rem;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    height: 100%;
}

.stat-card .stat-icon {
    width: 52px;
    height: 52px;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    color: var(--on-primary, #fff);
}

.stat-card .stat-icon.bg-primary { background: var(--primary); }
.stat-card .stat-icon.bg-success { background: var(--success); }
.stat-card .stat-icon.bg-warning { background: var(--warning); }
.stat-card .stat-icon.bg-info { background: var(--info); }
.stat-card .stat-icon.bg-danger { background: var(--error); }

.stat-card .stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.03em;
    line-height: 1.15;
}

.stat-card .stat-label {
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-weight: 500;
}

/* ── Tables ── */
.table { margin-bottom: 0; color: var(--text-primary); }

.table th {
    font-weight: 650;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
    padding: 0.85rem 1rem;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: var(--table-th-bg);
}

.table td {
    vertical-align: middle;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
}

.table tbody tr { transition: background var(--transition-fast); }
.table tbody tr:hover { background: var(--bg-hover); }
.table-striped tbody tr:nth-of-type(odd) { background-color: var(--table-stripe-bg, var(--table-th-bg)); }
.table > :not(caption) > * > * {
    background-color: transparent;
    color: var(--text-primary);
    box-shadow: none;
}

/* ── Buttons ── */
.btn {
    font-weight: 600;
    border-radius: var(--radius);
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}

.btn-primary {
    background: var(--primary);
    border: 1px solid var(--primary-dark);
    color: var(--btn-primary-text, #fff);
}

.btn-primary:hover, .btn-primary:focus {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
    color: var(--btn-primary-text, #fff);
    box-shadow: var(--shadow-sm);
}

.btn-success {
    background: var(--success);
    border: 1px solid var(--success);
    color: var(--on-success, #fff);
}

.btn-danger {
    background: var(--error);
    border: 1px solid var(--error);
    color: var(--on-danger, #fff);
}

.btn-secondary {
    background: var(--bg-hover, color-mix(in srgb, var(--border-color) 28%, var(--bg-card, #fff)));
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

.btn-secondary:hover, .btn-secondary:focus {
    background: color-mix(in srgb, var(--border-color) 42%, var(--bg-card, #fff));
    border-color: var(--border-color);
    color: var(--text-primary);
}

.btn-warning {
    background: var(--warning);
    border: 1px solid var(--warning);
    color: var(--on-warning, var(--btn-warning-text, #422006));
}

.btn-info {
    background: var(--info);
    border: 1px solid var(--info);
    color: var(--on-info, #fff);
}

.btn-outline-primary {
    color: var(--primary);
    border-color: var(--primary);
    background: transparent;
}

.btn-outline-primary:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--btn-primary-text, #fff);
}

.btn-outline-secondary {
    color: var(--text-secondary);
    border-color: var(--border-color);
    background: var(--bg-card);
}

.btn-outline-secondary:hover {
    background: var(--bg-hover);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.btn-sm { padding: 0.32rem 0.75rem; font-size: 0.8125rem; }

/* ── Forms ── */
.form-label {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.8125rem;
    margin-bottom: 0.4rem;
}

.form-control, .form-select {
    border: 1px solid var(--input-border, var(--border-color));
    border-radius: var(--radius);
    padding: 0.58rem 0.85rem;
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 0.875rem;
}

.form-control:focus, .form-select:focus {
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px var(--focus-ring);
    outline: none;
    background: var(--bg-input);
    color: var(--text-primary);
}

.form-control::placeholder { color: var(--text-muted); }
.form-text { color: var(--text-muted); font-size: 0.78rem; }

.form-check-input {
    border: 1px solid var(--input-border, var(--border-color));
    background-color: var(--bg-input);
}

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

.input-group-text {
    background: var(--bg-hover);
    border: 1px solid var(--input-border, var(--border-color));
    color: var(--text-secondary);
}

/* ── Badges & alerts ── */
.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    line-height: 1.15;
    font-weight: 650;
    padding: 0.38em 0.72em;
    border-radius: var(--radius-sm);
    font-size: 0.72rem;
    min-height: 1.5em;
}

/* Impostazioni: stato secret (API key / password) — contrasto su temi chiari e scuri */
.nova-settings-value-status {
    display: inline-block;
    margin-left: 0.35rem;
    padding: 0.18em 0.55em;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 650;
    line-height: 1.2;
    vertical-align: middle;
    border: 1px solid transparent;
    white-space: nowrap;
}
.nova-settings-value-status--is-set {
    color: var(--alert-success-text, var(--success, #198754));
    background: color-mix(in srgb, var(--success, #198754) 22%, var(--bg-card, #fff));
    border-color: color-mix(in srgb, var(--success, #198754) 42%, var(--border-color, transparent));
}
.nova-settings-value-status--is-empty {
    color: var(--text-muted, #64748b);
    background: color-mix(in srgb, var(--text-muted, #64748b) 14%, var(--bg-card, #fff));
    border-color: color-mix(in srgb, var(--border-color, #cbd5e1) 70%, transparent);
}

.badge-active, .bg-success { background: var(--success) !important; color: var(--on-success, #fff) !important; }
.badge-inactive, .bg-danger { background: var(--error) !important; color: var(--on-danger, #fff) !important; }
.badge-pending, .bg-warning { background: var(--warning) !important; color: var(--on-warning, var(--badge-warning-text, #422006)) !important; }
.bg-primary { background: var(--primary) !important; color: var(--on-primary, var(--btn-primary-text, #fff)) !important; }
.bg-info { background: var(--info) !important; color: var(--on-info, #fff) !important; }
.bg-secondary { background: var(--secondary) !important; color: var(--on-secondary, #fff) !important; }
.text-bg-light { background-color: var(--bg-hover) !important; color: var(--text-primary) !important; }
.text-bg-primary { background-color: var(--primary) !important; color: var(--on-primary, var(--btn-primary-text, #fff)) !important; }
.text-bg-success { background-color: var(--success) !important; color: var(--on-success, #fff) !important; }
.text-bg-danger { background-color: var(--error) !important; color: var(--on-danger, #fff) !important; }
.text-bg-warning { background-color: var(--warning) !important; color: var(--on-warning, var(--badge-warning-text, #422006)) !important; }
.text-bg-info { background-color: var(--info) !important; color: var(--on-info, #fff) !important; }
.text-bg-secondary { background-color: var(--secondary) !important; color: var(--on-secondary, #fff) !important; }
.bg-primary-subtle { background-color: color-mix(in srgb, var(--primary) 14%, var(--bg-card)) !important; color: var(--text-primary) !important; }
.bg-success-subtle { background-color: color-mix(in srgb, var(--success) 16%, var(--bg-card)) !important; color: var(--alert-success-text, var(--success)) !important; }
.bg-danger-subtle { background-color: color-mix(in srgb, var(--error) 16%, var(--bg-card)) !important; color: var(--alert-danger-text, var(--error)) !important; }
.bg-warning-subtle { background-color: color-mix(in srgb, var(--warning) 16%, var(--bg-card)) !important; color: var(--alert-warning-text, var(--warning)) !important; }
.bg-info-subtle { background-color: color-mix(in srgb, var(--info) 14%, var(--bg-card)) !important; color: var(--alert-info-text, var(--info)) !important; }
/* Bootstrap light/body utilities stay pale on dark staff themes → holes; map to tokens. */
.bg-light-subtle { background-color: var(--bg-hover, color-mix(in srgb, var(--border-color) 22%, var(--bg-card))) !important; color: var(--text-primary) !important; }
.bg-secondary-subtle { background-color: color-mix(in srgb, var(--secondary, var(--text-muted)) 14%, var(--bg-card)) !important; color: var(--text-primary) !important; }
.bg-dark-subtle { background-color: color-mix(in srgb, var(--text-primary) 10%, var(--bg-card)) !important; color: var(--text-primary) !important; }
.bg-body-secondary { background-color: var(--bg-hover, color-mix(in srgb, var(--border-color) 18%, var(--bg-card))) !important; color: var(--text-primary) !important; }
.bg-body-tertiary { background-color: color-mix(in srgb, var(--border-color) 12%, var(--bg-card)) !important; color: var(--text-primary) !important; }

.alert {
    border-radius: var(--radius);
    border: 1px solid transparent;
    padding: 0.85rem 1rem;
    font-weight: 500;
}

/*
 * Alert staff: sempre sul token tema (bg-card + tone).
 * Bootstrap 5.3 usa --bs-success-bg-subtle chiaro e vince sui temi scuri → box menta fuori tema.
 */
.alert-success {
    --bs-alert-color: var(--alert-success-text, var(--success));
    --bs-alert-bg: color-mix(in srgb, var(--success) 18%, var(--bg-card));
    --bs-alert-border-color: color-mix(in srgb, var(--success) 38%, var(--border-color));
    --bs-alert-link-color: var(--alert-success-text, var(--success));
    background: var(--bs-alert-bg) !important;
    color: var(--bs-alert-color) !important;
    border-color: var(--bs-alert-border-color) !important;
}
.alert-danger {
    --bs-alert-color: var(--alert-danger-text, var(--error));
    --bs-alert-bg: color-mix(in srgb, var(--error) 18%, var(--bg-card));
    --bs-alert-border-color: color-mix(in srgb, var(--error) 38%, var(--border-color));
    --bs-alert-link-color: var(--alert-danger-text, var(--error));
    background: var(--bs-alert-bg) !important;
    color: var(--bs-alert-color) !important;
    border-color: var(--bs-alert-border-color) !important;
}
.alert-warning {
    --bs-alert-color: var(--alert-warning-text, var(--warning));
    --bs-alert-bg: color-mix(in srgb, var(--warning) 18%, var(--bg-card));
    --bs-alert-border-color: color-mix(in srgb, var(--warning) 38%, var(--border-color));
    --bs-alert-link-color: var(--alert-warning-text, var(--warning));
    background: var(--bs-alert-bg) !important;
    color: var(--bs-alert-color) !important;
    border-color: var(--bs-alert-border-color) !important;
}
.alert-info {
    --bs-alert-color: var(--alert-info-text, var(--info));
    --bs-alert-bg: color-mix(in srgb, var(--info) 16%, var(--bg-card));
    --bs-alert-border-color: color-mix(in srgb, var(--info) 36%, var(--border-color));
    --bs-alert-link-color: var(--alert-info-text, var(--info));
    background: var(--bs-alert-bg) !important;
    color: var(--bs-alert-color) !important;
    border-color: var(--bs-alert-border-color) !important;
}

/* ── Modals & dropdowns (tema attivo) ── */
.modal {
    --bs-modal-bg: var(--bg-card);
    --bs-modal-color: var(--text-primary);
    --bs-modal-border-color: var(--border-color);
    --bs-modal-header-border-color: var(--border-color);
    --bs-modal-footer-border-color: var(--border-color);
    --bs-modal-border-radius: var(--radius-lg, 0.75rem);
    --bs-modal-box-shadow: var(--shadow-lg, 0 1rem 3rem rgba(0, 0, 0, 0.2));
    /* Aria sopra/sotto rispetto al viewport (tutte le modali) */
    --bs-modal-margin: 2.75rem;
    z-index: 1060;
}

.modal-backdrop {
    --bs-backdrop-bg: color-mix(in srgb, var(--text-primary, #0f172a) 55%, #000);
    --bs-backdrop-opacity: 0.55;
    z-index: 1055;
}

.modal-dialog {
    margin-top: var(--bs-modal-margin);
    margin-bottom: var(--bs-modal-margin);
}

.modal-dialog-centered {
    min-height: calc(100% - (var(--bs-modal-margin) * 2));
}

.modal-dialog-scrollable {
    height: calc(100% - (var(--bs-modal-margin) * 2));
    max-height: calc(100dvh - (var(--bs-modal-margin) * 2));
}

.modal-dialog-scrollable .modal-content {
    /* Leggermente più bassa del pieno disponibile, così resta aria sopra/sotto */
    max-height: calc(100dvh - (var(--bs-modal-margin) * 2) - 1.25rem);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/*
 * Form che avvolge header/body/footer (pattern staff): deve ereditare il flex
 * dello scrollable, altrimenti overflow:hidden sul content taglia il footer.
 */
.modal-dialog-scrollable .modal-content > form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
}

.modal-dialog-scrollable .modal-content > .modal-body,
.modal-dialog-scrollable .modal-content > form > .modal-body {
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
}

.modal-dialog-scrollable .modal-content > .modal-header,
.modal-dialog-scrollable .modal-content > .modal-footer,
.modal-dialog-scrollable .modal-content > form > .modal-header,
.modal-dialog-scrollable .modal-content > form > .modal-footer {
    flex-shrink: 0;
}

/* Cue in basso: altro contenuto sotto (freccia + testo in trasparenza) */
.modal-dialog-scrollable .modal-body {
    position: relative;
}

.modal-dialog-scrollable .nova-modal-scroll-cue {
    display: none;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
    margin-top: -2.35rem;
    height: 2.35rem;
    pointer-events: none;
    align-items: flex-end;
    justify-content: center;
}

.modal-dialog-scrollable .nova-modal-scroll-cue.is-visible:not([hidden]) {
    display: flex;
}

.modal-dialog-scrollable .nova-modal-scroll-cue[hidden] {
    display: none !important;
    height: 0;
    margin: 0;
}

.modal-dialog-scrollable .nova-modal-scroll-cue__fade {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        color-mix(in srgb, var(--bg-card, #fff) 92%, transparent) 35%,
        transparent 100%
    );
}

.modal-dialog-scrollable .nova-modal-scroll-cue__label {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.15rem 0.65rem 0.35rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: color-mix(in srgb, var(--text-secondary, #64748b) 70%, transparent);
    opacity: 0.9;
}

.modal-dialog-scrollable .nova-modal-scroll-cue__label .bi {
    font-size: 0.85rem;
    line-height: 1;
    animation: nova-modal-scroll-cue-bounce 1.4s ease-in-out infinite;
}

@keyframes nova-modal-scroll-cue-bounce {
    0%, 100% { transform: translateY(0); opacity: 0.75; }
    50% { transform: translateY(3px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .modal-dialog-scrollable .nova-modal-scroll-cue__label .bi {
        animation: none;
    }
}

@media (max-width: 575.98px) {
    .modal {
        --bs-modal-margin: 1.25rem;
    }
}

.modal-content {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg, 0.75rem);
    box-shadow: var(--shadow-lg, 0 1rem 3rem rgba(0, 0, 0, 0.18));
    background: var(--bg-card);
    color: var(--text-primary);
    overflow: hidden;
}

.modal-header,
.modal-footer {
    border-color: var(--border-color);
    background: var(--bg-card);
}

.modal-footer {
    background: var(--card-footer-bg, color-mix(in srgb, var(--bg-hover, var(--bg-card)) 70%, var(--bg-card)));
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
}

.modal-title {
    font-weight: 700;
    color: var(--text-primary);
}

.modal-body {
    color: var(--text-primary);
}

.modal-body .text-muted {
    color: var(--text-secondary) !important;
}

.modal-header .btn-close {
    filter: var(--btn-close-filter, none);
}

/* Header colorati Bootstrap → token tema */
.modal-header.bg-primary,
.modal-header.bg-info,
.modal-header.bg-success,
.modal-header.bg-danger,
.modal-header.bg-warning,
.modal-header.modal-header--primary,
.modal-header.modal-header--info,
.modal-header.modal-header--success,
.modal-header.modal-header--danger,
.modal-header.modal-header--warning,
.modal-header.modal-header--accent,
.modal-header.modal-header--help {
    border-bottom: none;
}

.modal-header.bg-primary,
.modal-header.modal-header--primary,
.modal-header.modal-header--accent {
    background: var(--primary) !important;
    color: var(--on-primary, #fff) !important;
}

.modal-header.bg-info,
.modal-header.modal-header--info {
    background: var(--info) !important;
    color: var(--on-info, #fff) !important;
}

.modal-header.bg-success,
.modal-header.modal-header--success {
    background: var(--success) !important;
    color: var(--on-success, #fff) !important;
}

.modal-header.bg-danger,
.modal-header.modal-header--danger {
    background: var(--error, var(--danger, #dc3545)) !important;
    color: var(--on-danger, #fff) !important;
}

.modal-header.bg-warning,
.modal-header.modal-header--warning {
    background: var(--warning) !important;
    color: var(--on-warning, var(--badge-warning-text, #422006)) !important;
}

.modal-header.modal-header--help {
    background: var(--help-accent) !important;
    color: var(--help-on-accent, #fff) !important;
}

.modal-header.bg-primary .modal-title,
.modal-header.bg-info .modal-title,
.modal-header.bg-success .modal-title,
.modal-header.bg-danger .modal-title,
.modal-header.modal-header--primary .modal-title,
.modal-header.modal-header--info .modal-title,
.modal-header.modal-header--success .modal-title,
.modal-header.modal-header--danger .modal-title,
.modal-header.modal-header--accent .modal-title,
.modal-header.modal-header--help .modal-title {
    color: inherit;
}

.modal-header.bg-warning .modal-title,
.modal-header.modal-header--warning .modal-title {
    color: inherit;
}

.modal-header.bg-primary .btn-close,
.modal-header.modal-header--primary .btn-close,
.modal-header.modal-header--accent .btn-close {
    filter: var(--btn-close-on-primary-filter, brightness(0) invert(1));
    opacity: 0.85;
}

.modal-header.bg-info .btn-close,
.modal-header.modal-header--info .btn-close {
    filter: var(--btn-close-on-info-filter, brightness(0) invert(1));
    opacity: 0.85;
}

.modal-header.bg-success .btn-close,
.modal-header.modal-header--success .btn-close {
    filter: var(--btn-close-on-success-filter, brightness(0) invert(1));
    opacity: 0.85;
}

.modal-header.bg-danger .btn-close,
.modal-header.modal-header--danger .btn-close {
    filter: var(--btn-close-on-danger-filter, brightness(0) invert(1));
    opacity: 0.85;
}

.modal-header.bg-warning .btn-close,
.modal-header.modal-header--warning .btn-close {
    filter: var(--btn-close-on-warning-filter, var(--btn-close-filter, none));
    opacity: 0.75;
}

.modal-header.modal-header--help .btn-close {
    filter: brightness(0) invert(1);
    opacity: 0.85;
}

/* Pulsante guida pagina (helper) — tono teal dedicato */
.nova-help-btn {
    color: var(--help-accent) !important;
    border: 1px solid color-mix(in srgb, var(--help-accent) 45%, var(--border-color)) !important;
    background: var(--help-accent-soft) !important;
    font-weight: 600;
}
.nova-help-btn:hover,
.nova-help-btn:focus-visible {
    color: var(--help-on-accent, #fff) !important;
    background: var(--help-accent-hover, var(--help-accent)) !important;
    border-color: var(--help-accent-hover, var(--help-accent)) !important;
}

.modal-header .btn-close-white {
    filter: brightness(0) invert(1);
    opacity: 0.85;
}

#novaConfirmModal .modal-content,
.modal-content.border-0 {
    border: 1px solid var(--border-color) !important;
}

.modal-header.border-0 {
    border-bottom: 1px solid var(--border-color) !important;
}

.modal-footer.border-0 {
    border-top: 1px solid var(--border-color) !important;
}

.dropdown-menu {
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    background: var(--bg-card);
    padding: 0.35rem;
}

.dropdown-item {
    border-radius: var(--radius-sm);
    padding: 0.5rem 0.85rem;
    font-weight: 500;
    color: var(--text-primary);
}

.dropdown-item:hover, .dropdown-item:focus {
    background: var(--bg-hover);
    color: var(--primary);
}

.dropdown-item.text-danger { color: var(--error) !important; }
.dropdown-item.text-danger:hover { background: var(--error-light); color: var(--error) !important; }

/* ── Nav tabs & pagination ── */
.nav-tabs { border-bottom: 1px solid var(--border-color); gap: 0.15rem; }

.nav-tabs .nav-link {
    border: none;
    color: var(--text-secondary);
    font-weight: 600;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

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

.page-link {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    background: var(--bg-card);
}

.page-item.active .page-link {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--btn-primary-text, #fff);
}

.progress {
    height: 0.45rem;
    border-radius: var(--radius);
    background: var(--border-color);
}

.progress-bar {
    background: linear-gradient(90deg, var(--primary) 0%, var(--accent) 100%);
}

/* ── Utilities ── */
.text-primary { color: var(--primary) !important; }
.text-success { color: var(--text-success, var(--success)) !important; }
.text-danger { color: var(--text-danger, var(--error)) !important; }
.text-warning { color: var(--text-warning, var(--warning)) !important; }
.text-info { color: var(--text-info, var(--info)) !important; }
.text-muted { color: var(--text-muted) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-body { color: var(--text-primary) !important; }
.text-body-secondary { color: var(--text-secondary) !important; }
.text-body-tertiary { color: var(--text-muted) !important; }
.text-body-emphasis { color: var(--text-primary) !important; }
.text-dark { color: var(--text-primary) !important; }
.text-light { color: var(--text-inverse) !important; }
.text-white { color: var(--text-inverse) !important; }

/* Badge con bg-* + text-dark: il colore di sfondo imposta il testo leggibile */
.badge.bg-warning, .badge.bg-warning.text-dark,
.bg-warning.text-dark, .text-bg-warning.text-dark {
    color: var(--on-warning, var(--badge-warning-text, #422006)) !important;
}
.badge.bg-primary, .badge.bg-primary.text-dark,
.bg-primary.text-dark, .text-bg-primary.text-dark {
    color: var(--on-primary, var(--btn-primary-text, #fff)) !important;
}
.badge.bg-info, .badge.bg-info.text-dark,
.bg-info.text-dark, .text-bg-info.text-dark {
    color: var(--on-info, #fff) !important;
}
.badge.bg-light, .badge.bg-light.text-dark {
    background-color: var(--bg-hover) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color);
}

/* Bottone / badge “light”: mai bianco fisso Bootstrap (temi scuri). */
.btn-light,
.btn-light:focus,
.btn-light:active,
.btn-light.active,
.btn-check:checked + .btn-light {
    --bs-btn-color: var(--text-primary);
    --bs-btn-bg: var(--bg-hover, var(--bg-card));
    --bs-btn-border-color: var(--border-color);
    --bs-btn-hover-color: var(--text-primary);
    --bs-btn-hover-bg: color-mix(in srgb, var(--primary) 12%, var(--bg-hover, var(--bg-card)));
    --bs-btn-hover-border-color: color-mix(in srgb, var(--primary) 35%, var(--border-color));
    --bs-btn-active-color: var(--text-primary);
    --bs-btn-active-bg: color-mix(in srgb, var(--primary) 16%, var(--bg-hover, var(--bg-card)));
    --bs-btn-active-border-color: color-mix(in srgb, var(--primary) 40%, var(--border-color));
    --bs-btn-disabled-color: var(--text-muted);
    --bs-btn-disabled-bg: var(--bg-hover, var(--bg-card));
    --bs-btn-disabled-border-color: var(--border-color);
    color: var(--text-primary) !important;
    background-color: var(--bg-hover, var(--bg-card)) !important;
    border-color: var(--border-color) !important;
}
.badge-light,
.badge.badge-light {
    background: color-mix(in srgb, var(--text-secondary) 16%, var(--bg-card)) !important;
    color: var(--text-secondary) !important;
    border: 1px solid color-mix(in srgb, var(--text-secondary) 28%, transparent);
}

.small, small { color: var(--text-secondary); }
.border { border-color: var(--border-color) !important; }
/* Bootstrap border-* / focus: mai blu #0d6efd — token tema */
.border-primary { border-color: var(--primary) !important; }
.border-secondary { border-color: var(--secondary) !important; }
.border-success { border-color: var(--success) !important; }
.border-info { border-color: var(--info) !important; }
.border-warning { border-color: var(--warning) !important; }
.border-danger { border-color: var(--error, var(--danger, #dc3545)) !important; }
.border-light { border-color: var(--border-color) !important; }
.border-dark { border-color: var(--text-primary) !important; }
.bg-light { background-color: var(--bg-hover) !important; color: var(--text-primary) !important; }
.bg-white { background-color: var(--bg-card) !important; color: var(--text-primary) !important; }
.bg-body { background-color: var(--bg-body) !important; }

.nova-impersonation-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--primary) 88%, #000),
        var(--primary),
        color-mix(in srgb, var(--primary) 75%, var(--primary-light, #fff))
    ) !important;
    color: var(--on-primary, #fff) !important;
    border-bottom: 1px solid color-mix(in srgb, var(--primary) 40%, transparent);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--primary) 28%, transparent);
}

.nova-impersonation-banner .btn,
.nova-impersonation-banner .btn-dark {
    background: color-mix(in srgb, var(--on-primary, #fff) 14%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--on-primary, #fff) 45%, transparent) !important;
    color: var(--on-primary, #fff) !important;
}

.nova-impersonation-banner .btn:hover,
.nova-impersonation-banner .btn-dark:hover {
    background: color-mix(in srgb, var(--on-primary, #fff) 24%, transparent) !important;
}

.card-header.bg-info, .card-header.bg-primary, .card-header.bg-success,
.card-header.bg-warning, .card-header.bg-danger {
    color: var(--on-primary, #fff);
}
.card-header.bg-info { color: var(--on-info, #fff); }
.card-header.bg-success { color: var(--on-success, #fff); }
.card-header.bg-warning { color: var(--on-warning, var(--badge-warning-text, #422006)); }
.card-header.bg-danger { color: var(--on-danger, #fff); }

label { color: var(--text-secondary); }

/*
 * Link: niente blu Bootstrap — token tema (--link-color / --primary).
 * Copre <a>, .btn-link e utility Bootstrap link-*.
 */
:root {
    --link-color: var(--primary);
    --link-hover-color: var(--primary-dark, var(--primary));
    --bs-link-color: var(--link-color);
    --bs-link-hover-color: var(--link-hover-color);
    --bs-link-decoration: none;
}

/* Liste hub (mp-nav-list) come list-group: testo soft / active on-primary, non colore link. */
a:not(.btn):not(.nav-link):not(.dropdown-item):not(.nova-nav-hub-link):not(.page-link):not(.list-group-item):not(.mp-nav-list__link):not(.mp-nav-list__row-label):not(.ec-day):not(.ec-sources__item):not(.ec-filter) {
    color: var(--link-color, var(--primary));
    text-decoration: none;
    text-underline-offset: 0.18em;
    text-decoration-thickness: from-font;
    text-decoration-color: color-mix(in srgb, var(--link-color, var(--primary)) 40%, transparent);
    transition: color var(--transition-fast, 150ms ease),
                text-decoration-color var(--transition-fast, 150ms ease);
}

a:not(.btn):not(.nav-link):not(.dropdown-item):not(.nova-nav-hub-link):not(.page-link):not(.list-group-item):not(.mp-nav-list__link):not(.mp-nav-list__row-label):not(.ec-day):not(.ec-sources__item):not(.ec-filter):hover,
a:not(.btn):not(.nav-link):not(.dropdown-item):not(.nova-nav-hub-link):not(.page-link):not(.list-group-item):not(.mp-nav-list__link):not(.mp-nav-list__row-label):not(.ec-day):not(.ec-sources__item):not(.ec-filter):focus-visible {
    color: var(--link-hover-color, var(--primary-dark, var(--primary)));
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, currentColor 70%, transparent);
}

a:not(.btn):not(.nav-link):not(.dropdown-item):not(.nova-nav-hub-link):not(.page-link):not(.list-group-item):not(.mp-nav-list__link):not(.mp-nav-list__row-label):not(.ec-day):not(.ec-sources__item):not(.ec-filter):visited {
    color: var(--link-color, var(--primary));
}

.btn-link {
    --bs-btn-color: var(--link-color, var(--primary));
    --bs-btn-hover-color: var(--link-hover-color, var(--primary-dark, var(--primary)));
    --bs-btn-active-color: var(--link-hover-color, var(--primary-dark, var(--primary)));
    --bs-btn-disabled-color: var(--text-muted);
    color: var(--link-color, var(--primary));
    text-decoration: none;
    text-underline-offset: 0.18em;
}

.btn-link:hover,
.btn-link:focus-visible {
    color: var(--link-hover-color, var(--primary-dark, var(--primary)));
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, currentColor 70%, transparent);
}

.link-primary,
a.link-primary {
    color: var(--link-color, var(--primary)) !important;
}
.link-primary:hover,
a.link-primary:hover {
    color: var(--link-hover-color, var(--primary-dark, var(--primary))) !important;
}

.list-group-item {
    background: var(--bg-card);
    color: var(--text-primary);
    border-color: var(--border-color);
}

/* Accordion / modal Bootstrap: allineati al tema (usati dalle guide account) */
.accordion,
.accordion-item {
    --bs-accordion-bg: var(--bg-card);
    --bs-accordion-color: var(--text-primary);
    --bs-accordion-border-color: var(--border-color);
    --bs-accordion-btn-bg: var(--bg-card);
    --bs-accordion-btn-color: var(--text-primary);
    --bs-accordion-active-bg: color-mix(in srgb, var(--primary) 12%, var(--bg-card));
    --bs-accordion-active-color: var(--text-primary);
    --bs-accordion-btn-focus-border-color: var(--primary);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--primary) 25%, transparent);
}
.accordion-button::after {
    filter: var(--accordion-chevron-filter, none);
}
.accordion-button:not(.collapsed) {
    box-shadow: none;
}
.code, code {
    background: var(--bg-hover, var(--bg-subtle, transparent));
    color: var(--text-primary);
}

.dataTables_wrapper { color: var(--text-primary); }
.dataTables_info { color: var(--text-secondary) !important; }

/* ── Content Manager (staff) — list / edit Strapi-like ── */
body:not(.backend-role-workspace) .mp-header--subline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    flex-wrap: nowrap;
    padding: 0.65rem 0.85rem;
    margin-bottom: 0.85rem !important;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
body:not(.backend-role-workspace) .mp-header--subline .mp-header__meta {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    max-width: none;
    white-space: normal;
    overflow: visible;
    overflow-wrap: break-word;
}
body:not(.backend-role-workspace) .mp-header--subline .mp-toolbar,
body:not(.backend-role-workspace) .mp-header--subline .mp-toolbar--form {
    flex: 0 0 auto;
    width: auto;
    margin-left: auto;
    justify-content: flex-end;
    max-width: 100%;
}
body:not(.backend-role-workspace) .mp-header--subline > .min-w-0,
body:not(.backend-role-workspace) .mp-header--subline > [class*="flex-grow"] {
    min-width: 0;
    flex: 1 1 0;
}
@media (max-width: 767.98px) {
    body:not(.backend-role-workspace) .mp-header--subline {
        flex-wrap: wrap;
        align-items: flex-start;
    }
}
body:not(.backend-role-workspace) .mp-toolbar .btn-primary {
    font-weight: 600;
}
body:not(.backend-role-workspace) [data-nova-hub] .table {
    --bs-table-bg: var(--bg-card);
    font-size: 0.875rem;
}
body:not(.backend-role-workspace) [data-nova-hub] .table thead th {
    background: var(--table-th-bg);
    color: var(--text-secondary);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
    border-bottom-width: 1px;
    white-space: nowrap;
}
body:not(.backend-role-workspace) [data-nova-hub] .mp-section,
body:not(.backend-role-workspace) [data-nova-hub] .backend-mp-section {
    border-radius: var(--radius-lg);
    border-color: var(--border-color);
    box-shadow: var(--shadow-sm);
}
body:not(.backend-role-workspace) .cm-edit-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}
@media (min-width: 1100px) {
    body:not(.backend-role-workspace) .cm-edit-layout--with-aside {
        grid-template-columns: minmax(0, 7fr) minmax(280px, 3fr);
        gap: 1.25rem;
        align-items: start;
    }
}
body:not(.backend-role-workspace) .cm-edit-aside {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1rem;
    box-shadow: var(--shadow-sm);
    height: fit-content;
    position: sticky;
    top: 4.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
body:not(.backend-role-workspace) .cm-edit-aside .mp-section {
    margin-bottom: 0;
}
body:not(.backend-role-workspace) .cm-edit-aside__title {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 0.65rem;
}
body:not(.backend-role-workspace) .settings-hub-card,
body:not(.backend-role-workspace) .mp-hub-tile {
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
body:not(.backend-role-workspace) .settings-hub-card:hover,
body:not(.backend-role-workspace) .mp-hub-tile:hover {
    border-color: color-mix(in srgb, var(--primary) 35%, var(--border-color));
    box-shadow: var(--shadow);
}

/* Media Library — griglia stile Media Strapi */
body:not(.backend-role-workspace) .ml-asset-grid,
body:not(.backend-role-workspace) [data-nova-hub] .row.g-3 > [class*="col-"] .card,
body:not(.backend-role-workspace) .ml-media-card {
    border-radius: var(--radius-lg);
}
body:not(.backend-role-workspace) .ml-media-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 0.85rem;
    margin-bottom: 0.75rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

/* Plugin marketplace tiles */
body:not(.backend-role-workspace) .mp-extension-tiles-grid .mp-hub-tile .mp-hub-tile__head {
    font-weight: 700;
    font-size: 0.8125rem;
}
body:not(.backend-role-workspace) .mp-hub-tile .mp-hub-tile__head {
    font-weight: 700;
    font-size: 0.95rem;
}
body:not(.backend-role-workspace) .plugins-list-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

/*
 * Editor moduli/plugin: sotto c’è il laboratorio help desk.
 * Lo sticky a viewport del master-detail coprirebbe accordion/bottoni
 * (click e scroll finiscono sull’editor). Qui scroll di pagina normale.
 */
body.backend-has-ui-objects .nova-ui-hub-master-detail--flow > .nova-ui-hub-master-detail__nav,
body.backend-has-ui-objects .nova-ui-hub-master-detail--flow > .nova-ui-hub-master-detail__main {
    position: static;
    top: auto;
    max-height: none;
    overflow: visible;
    display: block;
}

body.backend-has-ui-objects .nova-ui-hub-master-detail--flow > .nova-ui-hub-master-detail__nav > .nova-ui-card:first-child,
body.backend-has-ui-objects .nova-ui-hub-master-detail--flow > .nova-ui-hub-master-detail__nav .mp-hub-panel__body,
body.backend-has-ui-objects .nova-ui-hub-master-detail--flow > .nova-ui-hub-master-detail__main .mp-hub-panel__body,
body.backend-has-ui-objects .nova-ui-hub-master-detail--flow > .nova-ui-hub-master-detail__main > .nova-ui-card {
    flex: none;
    min-height: 0;
    overflow: visible;
    display: block;
}

body.backend-has-ui-objects .nova-ui-hub-master-detail--flow .list-group.list-group-flush {
    flex: none;
    max-height: min(28rem, 50vh);
    overflow-y: auto;
}

@media (max-width: 991px) {
    .sidebar { transform: translateX(-100%); }
    .sidebar.show { transform: translateX(0); }
    .main-content { margin-left: 0; }
    .content-wrapper { padding: 0.5rem 0.85rem 0.85rem; }

    /* Mobile drawer scrim — tap closes (hamburger is under the open sidebar) */
    .nova-sidebar-backdrop {
        position: fixed;
        inset: 0;
        z-index: 999;
        margin: 0;
        padding: 0;
        border: 0;
        cursor: pointer;
        background: color-mix(in srgb, var(--text-primary, #000) 42%, transparent);
        -webkit-tap-highlight-color: transparent;
        appearance: none;
    }
    .nova-sidebar-backdrop[hidden] {
        display: none !important;
    }
    body.nova-sidebar-mobile-open {
        overflow: hidden;
    }
}

@media (max-width: 576px) {
    .topbar { padding-left: 1rem; padding-right: 1rem; }
    .topbar-title { font-size: 1.05rem; }
    .content-wrapper { padding: 0.4rem 0.65rem 0.75rem; }
}