/* ============================================================
   OpenCloud — Legacy CSS bridge (Step 29 — full UI sweep)
   Override aggressivo su selettori Bootstrap + classi legacy.
   Target: rendere TUTTI i 129 logged templates coerenti col
   look "Industrial Steel" / "Diplomatic Silver" senza riscriverli.

   Caricato DOPO loggedLight.css/loggedDark.css per intercettare.
   Dipende da: oc-tokens.css (Step 21).
   ============================================================ */

/* ============================================================
   1. BASE — body, font, links
   ============================================================ */

html, body {
    background-color: var(--oc-bg);
    color: var(--oc-text);
}

body {
    font-family: 'Poppins-Regular', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Dark mode: i token --oc-bg/--oc-text gia' cambiano via oc-tokens.css.
   Override hardcoded rimosso (2026-05-21). */

/* 2026-05-21: aggiunto :not(.oc-btn) per non interferire col color dei
   bottoni del design system (es. .oc-btn--ghost vuole --oc-text, non
   --oc-primary). */
a:not(.btn):not(.oc-btn):not(.nav-link):not(.dropdown-item):not(.list-group-item) {
    color: var(--oc-primary);
    transition: color .15s ease;
}
a:not(.btn):not(.oc-btn):not(.nav-link):not(.dropdown-item):not(.list-group-item):hover {
    color: var(--oc-primary-dark);
}

/* ============================================================
   2. NAVBAR — header app + offcanvas
   ============================================================ */

.navbar.bg-opencloud,
.navbar.bg-blu,
nav.bg-opencloud {
    background: var(--oc-primary) !important;
    background: linear-gradient(135deg, var(--oc-primary) 0%, var(--oc-primary-dark) 100%) !important;
    color: #fff !important;
    border-bottom: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}

.navbar.bg-opencloud .navbar-brand,
.navbar.bg-blu .navbar-brand {
    color: #fff !important;
    font-weight: 600;
}

.navbar.bg-opencloud .nav-link,
.navbar.bg-blu .nav-link {
    color: rgba(255, 255, 255, .92) !important;
    font-weight: 500;
}

.navbar.bg-opencloud .nav-link:hover,
.navbar.bg-blu .nav-link:hover {
    color: var(--oc-accent) !important;
}

.navbar.bg-opencloud .nav-link.active,
.navbar.bg-blu .nav-link.active {
    color: var(--oc-accent) !important;
    border-bottom: 2px solid var(--oc-accent);
}

.navbar.bg-opencloud .navbar-toggler,
.navbar.bg-blu .navbar-toggler {
    border-color: rgba(255, 255, 255, .35);
    color: #fff;
}

.offcanvas {
    background-color: var(--oc-surface, #fff) !important;
    color: var(--oc-text) !important;
}

.offcanvas-header {
    background: linear-gradient(135deg, var(--oc-primary) 0%, var(--oc-primary-dark) 100%);
    color: #fff;
}

.offcanvas-header .btn-close { filter: invert(1) brightness(2); }

/* ============================================================
   3. .bg-opencloud / .hr-opencloud — gradient header
   ============================================================ */

.bg-opencloud {
    background: var(--oc-primary) !important;
    background: linear-gradient(135deg, var(--oc-primary) 0%, var(--oc-primary-dark) 100%) !important;
    color: #fff !important;
}

.hr-opencloud {
    border: 0;
    background: linear-gradient(135deg, var(--oc-primary) 0%, var(--oc-primary-dark) 100%) !important;
    height: 5px;
    opacity: 1;
}

/* ============================================================
   4. CARD — bordo radius shadow tutti uniformi
   ============================================================ */

.card {
    border-color: var(--oc-border) !important;
    border-radius: var(--oc-radius) !important;
    box-shadow: var(--oc-shadow-sm);
    background-color: var(--oc-surface, #fff);
}

.card-header {
    background-color: var(--oc-bg-tint) !important;
    border-bottom-color: var(--oc-border) !important;
    color: var(--oc-text);
    font-weight: 600;
}

.card-header.bg-primary,
.card-header.bg-blu {
    background: linear-gradient(135deg, var(--oc-primary) 0%, var(--oc-primary-dark) 100%) !important;
    color: #fff !important;
}

/* Dark .card/.card-header: i token --oc-surface/--oc-bg-tint/--oc-border/
   --oc-text gia' commutano via oc-tokens.css; override hardcoded rimosso
   (2026-05-21). */

/* ============================================================
   5. BUTTONS — primary mood + outline
   ============================================================ */

/* 2026-05-21: --bs-btn-color usa --oc-text-on-primary (varia per tema:
   bianco in light, scuro in dark, per garantire WCAG AA su entrambi). */
.btn-primary, .btn-blu {
    --bs-btn-bg: var(--oc-primary);
    --bs-btn-border-color: var(--oc-primary);
    --bs-btn-hover-bg: var(--oc-primary-dark);
    --bs-btn-hover-border-color: var(--oc-primary-dark);
    --bs-btn-color: var(--oc-text-on-primary);
    --bs-btn-hover-color: var(--oc-text-on-primary);
    --bs-btn-active-bg: var(--oc-primary-dark);
    --bs-btn-active-border-color: var(--oc-primary-dark);
    --bs-btn-active-color: var(--oc-text-on-primary);
    --bs-btn-disabled-bg: var(--oc-primary);
    --bs-btn-disabled-border-color: var(--oc-primary);
    --bs-btn-disabled-color: var(--oc-text-on-primary);
    --bs-btn-disabled-opacity: .55;
    font-weight: 600;
}

.btn-outline-primary, .btn-outline-blu {
    --bs-btn-color: var(--oc-primary);
    --bs-btn-border-color: var(--oc-primary);
    --bs-btn-hover-bg: var(--oc-primary);
    --bs-btn-hover-border-color: var(--oc-primary);
    --bs-btn-hover-color: var(--oc-text-on-primary);
    --bs-btn-active-bg: var(--oc-primary-dark);
    --bs-btn-active-border-color: var(--oc-primary-dark);
    --bs-btn-active-color: var(--oc-text-on-primary);
    font-weight: 600;
}

/* btn-success / btn-warning / btn-danger restano cromaticamente fissi
   ma con tonalità token coherenti */
.btn-success {
    --bs-btn-bg: var(--oc-success, #15803D);
    --bs-btn-border-color: var(--oc-success, #15803D);
    --bs-btn-hover-bg: #117030;
    --bs-btn-hover-border-color: #117030;
}
.btn-warning {
    --bs-btn-bg: var(--oc-accent, #F4B400);
    --bs-btn-border-color: var(--oc-accent, #F4B400);
    --bs-btn-color: var(--oc-text);
    --bs-btn-hover-color: var(--oc-text);
    --bs-btn-hover-bg: #d99e00;
    --bs-btn-hover-border-color: #d99e00;
}
.btn-danger {
    --bs-btn-bg: var(--oc-danger, #B91C1C);
    --bs-btn-border-color: var(--oc-danger, #B91C1C);
}
.btn-outline-success {
    --bs-btn-color: var(--oc-success, #15803D);
    --bs-btn-border-color: var(--oc-success, #15803D);
    --bs-btn-hover-bg: var(--oc-success, #15803D);
    --bs-btn-hover-border-color: var(--oc-success, #15803D);
    --bs-btn-hover-color: #fff;
}
.btn-outline-warning {
    --bs-btn-color: var(--oc-accent, #F4B400);
    --bs-btn-border-color: var(--oc-accent, #F4B400);
    --bs-btn-hover-bg: var(--oc-accent, #F4B400);
    --bs-btn-hover-color: var(--oc-text);
}
.btn-outline-danger {
    --bs-btn-color: var(--oc-danger, #B91C1C);
    --bs-btn-border-color: var(--oc-danger, #B91C1C);
    --bs-btn-hover-bg: var(--oc-danger, #B91C1C);
    --bs-btn-hover-border-color: var(--oc-danger, #B91C1C);
    --bs-btn-hover-color: #fff;
}

/* ============================================================
   6. FORM CONTROLS — focus ring + bordi
   ============================================================ */

.form-control, .form-select {
    border-color: var(--oc-border);
    border-radius: 8px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.form-control:focus, .form-select:focus {
    border-color: var(--oc-primary);
    box-shadow: 0 0 0 .2rem rgba(27, 59, 95, .15);
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--oc-primary) 22%, transparent);
}

.form-label {
    font-weight: 600;
    color: var(--oc-text);
    margin-bottom: .35rem;
}

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

.form-check-input:focus {
    border-color: var(--oc-primary);
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--oc-primary) 22%, transparent);
}

/* ============================================================
   7. ALERTS — primary mood
   ============================================================ */

/* 2026-05-21: usiamo direttamente i token --oc-*-soft (light: chiari su
   bianco, dark: scuri su navy) anziche' color-mix(...,white) che in dark
   produceva fondo chiaro su testo scuro illeggibile. La forecolor viene
   presa da --oc-text per restare leggibile in entrambi i temi. */
.alert-success {
    background-color: var(--oc-success-soft, #DCFCE7);
    border-color: var(--oc-success, #15803D);
    color: var(--oc-text);
}

.alert-warning {
    background-color: var(--oc-warning-soft, #FEF3C7);
    border-color: var(--oc-warning, #D97706);
    color: var(--oc-text);
}

.alert-danger {
    background-color: var(--oc-danger-soft, #FEE2E2);
    border-color: var(--oc-danger, #B91C1C);
    color: var(--oc-text);
}

.alert-primary,
.alert-info {
    background-color: var(--oc-primary-soft, #DCE3EC);
    border-color: var(--oc-primary);
    color: var(--oc-text);
}

/* ============================================================
   8. BADGES — primary mood
   ============================================================ */

.badge.bg-primary {
    background-color: var(--oc-primary) !important;
}

/* .bg-blu legacy → mood primary */
.bg-blu {
    background-color: var(--oc-primary) !important;
}

.text-blu {
    color: var(--oc-primary) !important;
}

/* ============================================================
   9. TABLES — header + hover
   ============================================================ */

.table {
    --bs-table-color: var(--oc-text);
    --bs-table-border-color: var(--oc-border);
    --bs-table-bg: transparent;
}

.table thead th,
.table > thead > tr > th {
    background-color: var(--oc-bg-tint, #E0E5ED);
    color: var(--oc-text);
    font-weight: 600;
    border-bottom-width: 2px;
    border-bottom-color: var(--oc-primary);
}

.table-light {
    --bs-table-bg: var(--oc-bg-tint, #E0E5ED);
}

.table-hover tbody tr:hover {
    --bs-table-hover-bg: color-mix(in srgb, var(--oc-primary) 5%, transparent);
}

/* Dark .table thead: i token gia' cambiano. (2026-05-21) */

/* ============================================================
   10. NAV TABS — mood-aware
   ============================================================ */

.nav-tabs {
    border-bottom-color: var(--oc-border);
}

.nav-tabs .nav-link {
    color: var(--oc-text-muted);
    border: 0;
    border-bottom: 2px solid transparent;
    font-weight: 600;
    padding: .65rem 1rem;
}

.nav-tabs .nav-link:hover {
    color: var(--oc-primary);
    border-color: transparent;
}

.nav-tabs .nav-link.active {
    color: var(--oc-primary);
    background: transparent;
    border-color: transparent transparent var(--oc-primary);
    border-bottom-width: 2px;
}

/* ============================================================
   11. BREADCRUMB — mood
   ============================================================ */

.breadcrumb {
    background-color: transparent;
    padding: .5rem 0;
    margin-bottom: .8rem;
}

.breadcrumb-item a { color: var(--oc-text-muted); font-weight: 500; }
.breadcrumb-item a:hover { color: var(--oc-primary); }
.breadcrumb-item.active { color: var(--oc-text); font-weight: 600; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--oc-text-muted); }

/* ============================================================
   12. PAGINATION — mood
   ============================================================ */

.page-link {
    color: var(--oc-primary);
    border-color: var(--oc-border);
}

.page-link:hover {
    color: var(--oc-primary-dark);
    background-color: var(--oc-bg-tint);
    border-color: var(--oc-border);
}

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

.page-item.disabled .page-link { color: var(--oc-text-muted); }

/* ============================================================
   13. PROGRESS BAR — mood primary
   ============================================================ */

.progress {
    background-color: var(--oc-bg-tint);
    border-radius: 8px;
}

.progress-bar.bg-primary {
    background-color: var(--oc-primary) !important;
}

/* ============================================================
   14. DROPDOWN — mood
   ============================================================ */

.dropdown-menu {
    border-color: var(--oc-border);
    box-shadow: var(--oc-shadow-md);
    border-radius: var(--oc-radius);
}

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

.dropdown-item.active, .dropdown-item:active {
    background-color: var(--oc-primary);
    color: #fff;
}

/* ============================================================
   15. LIST GROUP
   ============================================================ */

.list-group-item {
    border-color: var(--oc-border);
}

.list-group-item.active {
    background-color: var(--oc-primary);
    border-color: var(--oc-primary);
}

/* ============================================================
   16. MODAL — header mood
   ============================================================ */

.modal-content {
    border-color: var(--oc-border);
    border-radius: var(--oc-radius);
}

.modal-header {
    background-color: var(--oc-bg-tint);
    border-bottom-color: var(--oc-border);
}

/* ============================================================
   17. FOOTER scroll-to-top
   ============================================================ */

#back-to-top, .back-to-top {
    background: linear-gradient(135deg, var(--oc-primary) 0%, var(--oc-primary-dark) 100%) !important;
    color: #fff !important;
    border: 0;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    box-shadow: var(--oc-shadow-md);
}

#back-to-top:hover, .back-to-top:hover {
    transform: translateY(-2px);
    box-shadow: var(--oc-shadow-lg);
}

/* ============================================================
   18. FOCUS RING — a11y
   ============================================================ */

:focus-visible {
    outline: 2px solid var(--oc-primary);
    outline-offset: 2px;
}

button:focus-visible, .btn:focus-visible, a:focus-visible {
    outline-offset: 2px;
}

/* ============================================================
   19. CARD-TITLE / BORDER cards — text-info/warning/success → primary mood
   ============================================================
   I titoli card e i bordi card che usavano colori Bootstrap default
   (info=cyan #0dcaf0, warning=arancio #ffc107, success=verde #198754)
   creavano incoerenza visuale col mood. Override:
*/
.card-title.text-info,
.card-title.text-warning,
.card-title.text-success,
h5.text-info, h5.text-warning, h5.text-success,
h4.text-info, h4.text-warning, h4.text-success {
    color: var(--oc-primary) !important;
}

.card.border-info, .card.border-warning, .card.border-success {
    border-color: var(--oc-primary) !important;
    border-width: 1px;
    border-left-width: 4px;  /* accent left bar */
}

/* Bottoni outline-info/warning/success quando NON in modal/alert: → primary mood */
.btn-outline-info, .btn-outline-warning {
    --bs-btn-color: var(--oc-primary);
    --bs-btn-border-color: var(--oc-primary);
    --bs-btn-hover-bg: var(--oc-primary);
    --bs-btn-hover-border-color: var(--oc-primary);
    --bs-btn-hover-color: var(--oc-on-primary, #fff);
    --bs-btn-active-bg: var(--oc-primary-dark);
    --bs-btn-active-border-color: var(--oc-primary-dark);
    --bs-btn-active-color: var(--oc-on-primary, #fff);
    font-weight: 600;
}

/* ============================================================
   20. BOTTONI LEGACY (.btn-verdechiaro / .btn-rosso / .btn-rosa /
   .btn-azzurro / .btn-arancioscuro) — usati come bottoni funzionali
   nei fasciones (INSERISCI, CERCA). Uniformati al mood primary.
   ============================================================ */
.btn-verdechiaro, .btn-rosso, .btn-rosa, .btn-azzurro, .btn-arancioscuro,
.btn-arancio, .btn-blu {
    --bs-btn-bg: var(--oc-primary);
    --bs-btn-border-color: var(--oc-primary);
    --bs-btn-color: var(--oc-on-primary, #fff);
    --bs-btn-hover-bg: var(--oc-primary-dark);
    --bs-btn-hover-border-color: var(--oc-primary-dark);
    --bs-btn-hover-color: var(--oc-on-primary, #fff);
    --bs-btn-active-bg: var(--oc-primary-dark);
    --bs-btn-active-border-color: var(--oc-primary-dark);
    --bs-btn-active-color: var(--oc-on-primary, #fff);
    --bs-btn-disabled-bg: var(--oc-primary);
    --bs-btn-disabled-border-color: var(--oc-primary);
    --bs-btn-disabled-color: var(--oc-on-primary, #fff);
    font-weight: 600;
}

/* Icone PNG legacy (lente.png, quadro.png, utente.png, ecc.) dentro i bottoni
   primary: forziamo bianco via filter trick "brightness(0) invert(1)" così
   risultano leggibili sul bg navy. Stesso trattamento per .oc-btn--primary
   e Bootstrap .btn-primary. SVG sprite (.oc-icon) usano già currentColor. */
.btn-verdechiaro img, .btn-rosso img, .btn-rosa img, .btn-azzurro img,
.btn-arancioscuro img, .btn-arancio img, .btn-blu img,
.btn-primary img, .oc-btn--primary img,
a.btn-verdechiaro img, a.btn-rosso img, a.btn-rosa img, a.btn-azzurro img,
a.btn-arancioscuro img, a.btn-arancio img, a.btn-blu img,
a.btn-primary img, a.oc-btn--primary img {
    filter: brightness(0) invert(1);
}

/* ============================================================
   21. ICON-SQUARE — tile colorati dei fasciones (Quadri/Cli/Utenti/Doc)
   Da bg-verdechiaro/rosso/rosa/azzurro a primary-soft con icona primary
   ============================================================ */
.icon-square.bg-verdechiaro,
.icon-square.bg-rosso,
.icon-square.bg-rosa,
.icon-square.bg-azzurro,
.icon-square.bg-arancio,
.icon-square.bg-arancioscuro,
.icon-square.bg-blu {
    background-color: var(--oc-primary-soft) !important;
    color: var(--oc-primary);
}

/* immagini PNG dentro icon-square: leggera tinta mood via filter.
   NB: la PNG legacy `documento.png` è un glifo NERO. Sul tile chiaro
   `primary-soft` resta leggibile (nero su chiaro). Prima del 2026-06-08
   `.icon-square.bg-blu` cadeva nella regola generica `.bg-blu` → navy,
   e il glifo nero diventava invisibile (dark-on-dark) nei fascione
   showDocs / catDoc / intCatDoc. Aggiunto bg-blu alla lista sopra. */
.icon-square img {
    filter: saturate(.5);
    opacity: .92;
}

/* SVG icona segment-specific dentro icon-square (Step 21 sprite) */
.icon-square svg.oc-icon {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: var(--oc-primary);
    stroke-width: 1.6;
}

/* ============================================================
   22. LEGACY UTILITIES intoccate (semantica fissa)
   ============================================================
   .text-rosa, .text-azzurro, .text-verde, .text-rosso, .text-giallo,
   .text-arancio, .text-arancioscuro, .text-blu, .text-grigio:
   → restano per TAG/LABEL inline usati come "color codes" (es.
     codice quadro in verde, ID arancio). NON applicate come card-title.
   .bg-rosa, .bg-verde, .bg-rosso, .bg-arancio, .bg-arancioscuro,
   .bg-grigio, .bg-giallo: → restano per badge categoria.
*/

/* ============================================================
   23. .oc-vedi-link — link "VEDI →" nei fasciones (gerarchia
   navigazione vs azione: link in primary segment-aware con
   freccia che scorre a destra in hover).
   ============================================================ */
.oc-vedi-link { color: var(--oc-primary) !important; }
.oc-vedi-link:hover { text-decoration: underline !important; color: var(--oc-primary-dark, var(--oc-primary)) !important; }
.oc-vedi-link svg { transition: transform .15s ease; }
.oc-vedi-link:hover svg { transform: translateX(.15rem); }

/* ============================================================
   24. DARK MODE — admin shell (superadmin + abbonamenti + vistaCliente)
   ----------------------------------------------------------------
   platformAdmin.php / abbonamenti.php / vistaCliente.php usano regole
   inline con #fff/#f4f6fa/#e0e0e0 hardcoded predatando l'estensione
   dark dei token. Qui rimappiamo via [data-bs-theme="dark"] per tutte
   e 3 le pagine. Caricato globalmente via injectCsrf (idempotente).
   2026-05-21.
   ============================================================ */

/* Shell + sidebar */
[data-bs-theme="dark"] .oc-admin-shell {
	background: linear-gradient(to right,
		var(--oc-surface) 0,
		var(--oc-surface) var(--sb-w, 260px),
		var(--oc-border) var(--sb-w, 260px),
		var(--oc-border) calc(var(--sb-w, 260px) + 1px),
		var(--oc-bg) calc(var(--sb-w, 260px) + 1px)) !important;
}
[data-bs-theme="dark"] .oc-admin-sidebar {
	background: var(--oc-surface) !important;
	border-right-color: var(--oc-border) !important;
}
[data-bs-theme="dark"] .oc-admin-sidebar__link { color: var(--oc-text); }
[data-bs-theme="dark"] .oc-admin-sidebar__link:hover,
[data-bs-theme="dark"] .oc-admin-sidebar__link.is-active {
	background: var(--oc-bg-tint);
	color: var(--oc-primary);
}
[data-bs-theme="dark"] .oc-admin-sidebar__link.is-disabled { color: var(--oc-text-muted); }
[data-bs-theme="dark"] .oc-admin-body { background: var(--oc-bg); }

/* Card/metric/table genericamente — copre platformAdmin + abbonamenti + vistaCliente */
[data-bs-theme="dark"] .oc-metric,
[data-bs-theme="dark"] .oc-kpi-card,
[data-bs-theme="dark"] .oc-sub-card,
[data-bs-theme="dark"] .oc-card-flat,
[data-bs-theme="dark"] .oc-mock-table,
[data-bs-theme="dark"] .oc-tx-table-wrap,
[data-bs-theme="dark"] .oc-abb-section,
[data-bs-theme="dark"] .oc-abb-table,
[data-bs-theme="dark"] .vc-empty,
[data-bs-theme="dark"] .oc-vc-tab-card,
[data-bs-theme="dark"] .oc-vc-tenant-banner__logo,
[data-bs-theme="dark"] .vc-recent__item,
[data-bs-theme="dark"] .oc-abb-roadmap-chip,
[data-bs-theme="dark"] .oc-btn-cambia-cliente {
	background: var(--oc-surface) !important;
	border-color: var(--oc-border) !important;
}

/* Tabelle: thead, row hover, divider */
[data-bs-theme="dark"] .oc-mock-table thead th,
[data-bs-theme="dark"] .oc-tx-table thead th,
[data-bs-theme="dark"] .oc-abb-table thead th {
	background: var(--oc-bg-tint) !important;
	color: var(--oc-text-muted) !important;
	border-bottom-color: var(--oc-border) !important;
}
[data-bs-theme="dark"] .oc-mock-table tbody td,
[data-bs-theme="dark"] .oc-mock-table tbody tr,
[data-bs-theme="dark"] .oc-tx-table tbody tr,
[data-bs-theme="dark"] .oc-abb-table tbody tr {
	border-bottom-color: var(--oc-border-soft);
}
[data-bs-theme="dark"] .oc-mock-table tbody tr:hover,
[data-bs-theme="dark"] .oc-tx-table tbody tr:hover,
[data-bs-theme="dark"] .oc-abb-table tbody tr:hover {
	background: var(--oc-bg-tint);
}

/* Filtri tabella + pager (.oc-pa-*) */
[data-bs-theme="dark"] .oc-pa-filters,
[data-bs-theme="dark"] .oc-pa-filters__info {
	background: var(--oc-bg-tint);
	border-color: var(--oc-border);
}
[data-bs-theme="dark"] .oc-pa-filters__search input,
[data-bs-theme="dark"] .oc-pa-filters__select,
[data-bs-theme="dark"] .vc-search__input {
	background: var(--oc-surface);
	border-color: var(--oc-border);
	color: var(--oc-text);
}
[data-bs-theme="dark"] .oc-pa-table-wrap,
[data-bs-theme="dark"] .oc-pa-pager,
[data-bs-theme="dark"] .oc-pa-pager__btn,
[data-bs-theme="dark"] .oc-pa-pager__per-btn {
	background: var(--oc-surface);
	border-color: var(--oc-border);
}
[data-bs-theme="dark"] .oc-pa-pager__btn { color: var(--oc-primary) !important; }
[data-bs-theme="dark"] .oc-pa-pager__btn:hover { background: var(--oc-bg-tint); }
[data-bs-theme="dark"] .oc-pa-pager__per-btn { color: var(--oc-text-muted) !important; }
[data-bs-theme="dark"] .oc-pa-pager__per-btn.is-active {
	background: var(--oc-primary);
	color: var(--oc-text-on-primary) !important;
	border-color: var(--oc-primary);
}

/* Stats toolbar */
[data-bs-theme="dark"] .oc-stats-toolbar {
	background: var(--oc-surface);
	border-color: var(--oc-border);
}
[data-bs-theme="dark"] .oc-stats-toolbar__chip {
	background: var(--oc-surface);
	border-color: var(--oc-border);
	color: var(--oc-text) !important;
}
[data-bs-theme="dark"] .oc-stats-toolbar__chip.is-on {
	background: var(--oc-primary);
	color: var(--oc-text-on-primary) !important;
	border-color: var(--oc-primary);
}

/* Alert SA banner: usa i token *-soft del dark */
[data-bs-theme="dark"] .oc-alert-row.is-danger {
	background: var(--oc-danger-soft);
	border-color: var(--oc-danger);
	color: var(--oc-text);
}
[data-bs-theme="dark"] .oc-alert-row.is-warn {
	background: var(--oc-warning-soft);
	border-color: var(--oc-warning);
	color: var(--oc-text);
}
[data-bs-theme="dark"] .oc-alert-row.is-info {
	background: var(--oc-primary-soft);
	border-color: var(--oc-primary);
	color: var(--oc-text);
}

/* Section title / doccat */
[data-bs-theme="dark"] .oc-section-title::after { background: var(--oc-border); }
[data-bs-theme="dark"] .oc-doccat-bar { background: var(--oc-bg-tint); }
[data-bs-theme="dark"] .oc-doccat-table tr.is-other-cat td { background: var(--oc-bg-tint); }

/* Codici inline */
[data-bs-theme="dark"] .oc-tx-table td code {
	color: var(--oc-primary);
	background: var(--oc-bg-tint);
}

/* abbonamenti.php — sub-card e table varianti */
[data-bs-theme="dark"] .oc-abb-subcard {
	background: var(--oc-bg-tint) !important;
	border-color: var(--oc-border) !important;
}
[data-bs-theme="dark"] .oc-abb-subcard__list { color: var(--oc-text); }
[data-bs-theme="dark"] .oc-abb-subcard__list li { border-bottom-color: var(--oc-border-soft); }
[data-bs-theme="dark"] .oc-abb-top5__row {
	background: var(--oc-bg-tint);
	border-color: var(--oc-border);
}
[data-bs-theme="dark"] .oc-abb-todo {
	background: var(--oc-warning-soft);
	border-color: var(--oc-warning);
	color: var(--oc-text);
}
[data-bs-theme="dark"] .oc-abb-table tr.row-trial-warn { background: var(--oc-warning-soft); }

/* vistaCliente.php — molte classi vc-* */
[data-bs-theme="dark"] .vc-search__input,
[data-bs-theme="dark"] .oc-vc-filters,
[data-bs-theme="dark"] .oc-vc-filters__select,
[data-bs-theme="dark"] .oc-vc-table-wrap,
[data-bs-theme="dark"] .oc-vc-table,
[data-bs-theme="dark"] .oc-vc-stat,
[data-bs-theme="dark"] .oc-vc-pager,
[data-bs-theme="dark"] .oc-vc-pager__btn,
[data-bs-theme="dark"] .oc-vc-logo-inline {
	background: var(--oc-surface) !important;
	border-color: var(--oc-border) !important;
	color: var(--oc-text);
}
[data-bs-theme="dark"] .oc-vc-tabs {
	background: var(--oc-surface) !important;
	border-bottom-color: var(--oc-border) !important;
}
[data-bs-theme="dark"] .oc-vc-table th {
	background: var(--oc-bg-tint) !important;
	color: var(--oc-text-muted) !important;
}
[data-bs-theme="dark"] .oc-vc-table tbody tr:hover {
	background: var(--oc-bg-tint) !important;
}
[data-bs-theme="dark"] .oc-vc-tab-card .oc-vc-filters__info {
	background: var(--oc-bg-tint) !important;
	border-bottom-color: var(--oc-border) !important;
	color: var(--oc-text-muted);
}
[data-bs-theme="dark"] .oc-vc-table tr.row-anag-linked,
[data-bs-theme="dark"] .oc-vc-table tr.row-user-disabled,
[data-bs-theme="dark"] .oc-vc-table tr.row-fasc-linked {
	background: var(--oc-bg-tint);
	color: var(--oc-text-muted);
}
[data-bs-theme="dark"] .oc-vc-table tr.row-doc-scad30 { background: var(--oc-warning-soft); }
[data-bs-theme="dark"] .oc-vc-pill.is-warn {
	background: var(--oc-warning-soft);
	color: var(--oc-warning);
}
[data-bs-theme="dark"] .oc-vc-readonly-note {
	background: var(--oc-warning-soft);
	color: var(--oc-text);
	border-left-color: var(--oc-warning);
}

/* ============================================================
   25. ADMIN TOPBAR CONDIVISA (2026-05-21)
   ----------------------------------------------------------------
   Stili .oc-admin-topbar* condivisi fra platformAdmin.php /
   abbonamenti.php / vistaCliente.php. L'helper renderAdminTopbar()
   in includes/topbar.php emette il markup; queste classi forniscono
   layout/colori del header navy fisso. Il cluster destro (theme btn,
   user dropdown) usa .oc-topbar-* gia' definite in oc-topbar.css.
   ============================================================ */
.oc-admin-topbar {
	grid-column: 1 / -1;
	height: 64px;
	background: linear-gradient(135deg, var(--oc-primary, #1B3B5F) 0%, var(--oc-primary-dark, #0F2540) 100%);
	color: #fff;
	display: flex; align-items: center; padding: 0 1rem; gap: 1rem;
	position: sticky; top: 0; z-index: 100;
	/* Fix 2026-05-27: z-index portato da 50 a 100 per stare SOPRA la barra
	   filtri sticky della tab Statistiche (.oc-stats-toolbar a z-index 50).
	   Senza questo, il dropdown del menu utente viene clippato e finisce
	   visivamente sotto i filtri. */
	border-bottom: 1px solid rgba(0,0,0,.25);
	box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.oc-admin-topbar__sb-toggle {
	width: 36px; height: 36px;
	background: rgba(255,255,255,.12);
	border: 1px solid rgba(255,255,255,.25);
	border-radius: 8px;
	color: #fff;
	display: inline-flex; align-items: center; justify-content: center;
	cursor: pointer; padding: 0;
	transition: background .12s, border-color .12s;
}
.oc-admin-topbar__sb-toggle:hover,
.oc-admin-topbar__sb-toggle:focus {
	background: rgba(255,255,255,.22);
	border-color: rgba(255,255,255,.45);
	outline: 0;
}
.oc-admin-topbar__sb-toggle svg { width: 16px; height: 16px; }
.oc-admin-topbar__brand { display: flex; align-items: center; text-decoration: none; padding: 0 .25rem; }
.oc-admin-topbar__brand .imglogo { display: block; }
/* 2026-05-21: .imglogo prima era definito solo in loggedLight/Dark.css —
   non caricato nelle pagine SA (abbonamenti, vistaCliente). Logo bianco
   sempre su navy topbar, indipendente dal tema. */
.imglogo {
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}
@media (max-width: 539px) {
	.imglogo {
		background-image: url("../img/logo/opencloud_solo_logo.png?v=29b");
		width: 36px;
		height: 36px;
	}
}
@media (min-width: 540px) {
	.imglogo {
		background-image: url("../img/logo/opencloud_logocompleto_bianco.svg?v=29b");
		width: 220px;
		height: 36px;
	}
}
.oc-admin-topbar__crumb { color: rgba(255,255,255,.9); font-size: .95rem; font-weight: 600; }
.oc-admin-topbar__crumb b { font-weight: 700; }
.oc-admin-topbar__spacer { flex: 1; }
.oc-admin-topbar__back {
	color: #fff !important; text-decoration: none !important;
	font-size: .85rem; font-weight: 500;
	padding: .35rem .85rem;
	border-radius: 999px;
	background: rgba(255,255,255,.15);
	border: 1px solid rgba(255,255,255,.3);
	transition: background .12s, border-color .12s;
}
.oc-admin-topbar__back:hover,
.oc-admin-topbar__back:focus {
	background: rgba(255,255,255,.25);
	border-color: rgba(255,255,255,.5);
	color: #fff !important;
}


/* ============================================================
   Dark mode — colori di TITOLI/TESTI mancanti su pagine SA
   standalone (abbonamenti.php / vistaCliente.php) che cablavano
   #1c2024 / #6c757d / #1B3B5F senza override.  2026-06-05.
   Le SUPERFICI sono gia' gestite sopra; qui solo i colori-testo.
   ============================================================ */

/* Header pagina + label gruppi sidebar (comune a tutte le pagine SA) */
[data-bs-theme="dark"] .oc-admin-tab-header h1 { color: var(--oc-text); }
[data-bs-theme="dark"] .oc-admin-tab-header p  { color: var(--oc-text-muted); }
[data-bs-theme="dark"] .oc-admin-sidebar__grouplbl { color: var(--oc-primary); }

/* Abbonamenti */
[data-bs-theme="dark"] .oc-abb-section__title { color: var(--oc-text); }
[data-bs-theme="dark"] .oc-abb-section__sub   { color: var(--oc-text-muted); }
[data-bs-theme="dark"] .oc-abb-section__title .anchor-pill {
	background: var(--oc-bg-tint);
	color: var(--oc-text-muted);
}
[data-bs-theme="dark"] .oc-metric__lbl,
[data-bs-theme="dark"] .oc-metric__sub { color: var(--oc-text-muted); }
[data-bs-theme="dark"] .oc-metric__val { color: var(--oc-primary); }
[data-bs-theme="dark"] .oc-abb-table td.num { color: var(--oc-primary); }
[data-bs-theme="dark"] .oc-abb-table td.muted,
[data-bs-theme="dark"] .oc-abb-table .muted,
[data-bs-theme="dark"] .oc-abb-table .code { color: var(--oc-text-muted); }

/* Vista cliente */
[data-bs-theme="dark"] .vc-empty h2 { color: var(--oc-text); }
[data-bs-theme="dark"] .vc-empty p  { color: var(--oc-text-muted); }
[data-bs-theme="dark"] .vc-search__hint,
[data-bs-theme="dark"] .vc-search__icon { color: var(--oc-text-muted); }
[data-bs-theme="dark"] .vc-recent__title { color: var(--oc-text-muted); }
[data-bs-theme="dark"] .vc-recent__body__name { color: var(--oc-text); }
[data-bs-theme="dark"] .vc-recent__body__meta { color: var(--oc-text-muted); }
[data-bs-theme="dark"] .vc-recent__body__meta .sep { color: var(--oc-border); }


/* ============================================================
   Dark mode — card DEMO/allerta (Reset dati DEMO: Pulizia/Rinfresca,
   notice success/error). In dark diventano SCURE come il resto della
   console (superficie scura + testo chiaro + accenti schiariti). In
   light restano crema/rosse come da markup inline (non toccato).
   2026-06-05 (rev: da "chiare con testo scuro" a "scure coerenti").
   ============================================================ */
[data-bs-theme="dark"] .oc-demo-soft,
[data-bs-theme="dark"] .oc-demo-soft .oc-card { background: var(--oc-surface) !important; }
/* neutralizza il bordo chiaro pieno delle due card principali (pinko/oro) */
[data-bs-theme="dark"] .oc-demo-soft[style*="#f1c9c4"],
[data-bs-theme="dark"] .oc-demo-soft[style*="#ffe2b8"] { border-color: var(--oc-border) !important; }
[data-bs-theme="dark"] .oc-demo-soft .oc-card__body,
[data-bs-theme="dark"] .oc-demo-soft strong { color: var(--oc-text) !important; }
[data-bs-theme="dark"] .oc-demo-soft p,
[data-bs-theme="dark"] .oc-demo-soft small,
[data-bs-theme="dark"] .oc-demo-soft label,
[data-bs-theme="dark"] .oc-demo-soft summary,
[data-bs-theme="dark"] .oc-demo-soft td { color: var(--oc-text-muted) !important; }
[data-bs-theme="dark"] .oc-demo-soft code { color: var(--oc-primary) !important; }
/* accenti semantici leggibili su scuro: rosso pericolo / verde ok / arancio attesa */
[data-bs-theme="dark"] .oc-demo-soft [style*="#b02a37"] { color: #ff7a85 !important; }
[data-bs-theme="dark"] .oc-demo-soft [style*="#1d8a4e"] { color: #4ade80 !important; }
[data-bs-theme="dark"] .oc-demo-soft [style*="#b26a00"] { color: #f0a020 !important; }