/* OpenCloud — Design system components (Step 21, Phase 3)
   ---------------------------------------------------------------------------
   Componenti UI costruiti sui token di oc-tokens.css. Pensati per essere
   integrati in modo incrementale dallo Step 22 in poi: ogni componente ha
   una classe namespaced "oc-*" e non sovrascrive selettori globali.
   Carica DOPO bootstrap.min.css e DOPO oc-tokens.css.
*/

/* =====================================================================
   1. Tipografia base (opt-in via .oc-typography sul container)
   ===================================================================== */
.oc-typography { font-family: var(--oc-font-base); color: var(--oc-text); line-height: var(--oc-lh-default); }
.oc-typography h1, .oc-h1 { font-weight: 700; font-size: var(--oc-fs-36); line-height: var(--oc-lh-tight); letter-spacing: -.5px; color: var(--oc-text); margin: 0 0 var(--oc-space-4); }
.oc-typography h2, .oc-h2 { font-weight: 700; font-size: var(--oc-fs-28); line-height: var(--oc-lh-tight); letter-spacing: -.3px; color: var(--oc-text); margin: 0 0 var(--oc-space-3); }
.oc-typography h3, .oc-h3 { font-weight: 600; font-size: var(--oc-fs-22); line-height: var(--oc-lh-tight); color: var(--oc-text); margin: 0 0 var(--oc-space-3); }
.oc-typography h4, .oc-h4 { font-weight: 600; font-size: var(--oc-fs-18); color: var(--oc-text); margin: 0 0 var(--oc-space-2); }
.oc-typography .oc-eyebrow, .oc-eyebrow { font-size: var(--oc-fs-12); text-transform: uppercase; letter-spacing: 1px; font-weight: 700; color: var(--oc-text-muted); }
.oc-typography .oc-lead, .oc-lead { font-size: var(--oc-fs-18); color: var(--oc-text-muted); line-height: var(--oc-lh-relaxed); }
.oc-typography .oc-mono, .oc-mono { font-family: var(--oc-font-mono); }
.oc-text-muted { color: var(--oc-text-muted) !important; }
.oc-text-primary { color: var(--oc-primary) !important; }
.oc-text-accent { color: var(--oc-accent-dark) !important; }

/* =====================================================================
   2. Mood ribbon — banner contestuale opzionale per debug e admin
   <div class="oc-mood-ribbon"></div> mostra il nome del mood corrente.
   Generato via content: var(--oc-mood-name) — pulito, no JS.
   ===================================================================== */
.oc-mood-ribbon {
	display: inline-flex;
	align-items: center;
	gap: var(--oc-space-2);
	background: var(--oc-primary-soft);
	color: var(--oc-primary-dark);
	padding: 4px 12px;
	border-radius: var(--oc-radius-pill);
	font-size: var(--oc-fs-12);
	font-weight: 600;
	letter-spacing: .3px;
}
.oc-mood-ribbon::before {
	content: "";
	width: 8px; height: 8px;
	border-radius: 50%;
	background: var(--oc-primary);
}
.oc-mood-ribbon::after { content: var(--oc-mood-name); }

/* =====================================================================
   3. Buttons — oc-btn (variant: primary / accent / ghost / outline / link)
   ===================================================================== */
.oc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--oc-space-2);
	border: 1.5px solid transparent;
	border-radius: var(--oc-radius);
	padding: 9px 18px;
	font-family: inherit;
	font-size: var(--oc-fs-14);
	font-weight: 600;
	line-height: 1.4;
	cursor: pointer;
	text-decoration: none;
	transition: background var(--oc-transition-default), border-color var(--oc-transition-default), color var(--oc-transition-default), box-shadow var(--oc-transition-default), transform var(--oc-transition-fast);
	white-space: nowrap;
	user-select: none;
}
.oc-btn:focus-visible {
	outline: none;
	box-shadow: var(--oc-shadow-focus);
}
.oc-btn:active { transform: translateY(1px); }
.oc-btn:disabled, .oc-btn.is-disabled {
	opacity: .55;
	cursor: not-allowed;
	pointer-events: none;
}
.oc-btn .oc-icon { width: 16px; height: 16px; }

.oc-btn--primary {
	background: var(--oc-primary);
	border-color: var(--oc-primary);
	color: var(--oc-text-on-primary);
}
.oc-btn--primary:hover { background: var(--oc-primary-dark); border-color: var(--oc-primary-dark); color: var(--oc-text-on-primary); }

.oc-btn--accent {
	background: var(--oc-accent);
	border-color: var(--oc-accent);
	color: var(--oc-text-on-accent);
}
.oc-btn--accent:hover { background: var(--oc-accent-dark); border-color: var(--oc-accent-dark); }

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

.oc-btn--ghost {
	background: transparent;
	border-color: transparent;
	color: var(--oc-text);
}
.oc-btn--ghost:hover { background: var(--oc-bg-tint); color: var(--oc-text); }

.oc-btn--link {
	background: transparent;
	border-color: transparent;
	color: var(--oc-primary);
	padding: 4px 6px;
	font-weight: 500;
}
.oc-btn--link:hover { color: var(--oc-primary-dark); text-decoration: underline; }

.oc-btn--danger {
	background: var(--oc-danger);
	border-color: var(--oc-danger);
	color: #fff;
}
.oc-btn--danger:hover { background: #8b1818; border-color: #8b1818; }

.oc-btn--success {
	background: var(--oc-success);
	border-color: var(--oc-success);
	color: #fff;
}
.oc-btn--success:hover { filter: brightness(.92); }

/* Sizes */
.oc-btn--sm { padding: 6px 12px; font-size: var(--oc-fs-13); }
.oc-btn--lg { padding: 13px 24px; font-size: var(--oc-fs-15); }
.oc-btn--icon { padding: 8px; }

/* =====================================================================
   4. Cards — oc-card / oc-card--accent / oc-card--metric
   ===================================================================== */
.oc-card {
	background: var(--oc-surface);
	border: 1px solid var(--oc-border);
	border-radius: var(--oc-radius-lg);
	padding: var(--oc-space-5);
	box-shadow: var(--oc-shadow-xs);
}
.oc-card__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--oc-space-3);
	margin-bottom: var(--oc-space-4);
}
.oc-card__title {
	font-size: var(--oc-fs-16);
	font-weight: 600;
	color: var(--oc-text);
	margin: 0;
}
.oc-card__subtitle {
	font-size: var(--oc-fs-13);
	color: var(--oc-text-muted);
	margin: 4px 0 0;
}
.oc-card__body { color: var(--oc-text); }
.oc-card__footer {
	margin-top: var(--oc-space-4);
	padding-top: var(--oc-space-3);
	border-top: 1px solid var(--oc-divider);
	display: flex;
	gap: var(--oc-space-2);
	justify-content: flex-end;
}

.oc-card--accent {
	border-left: 4px solid var(--oc-accent);
}
.oc-card--primary {
	border-left: 4px solid var(--oc-primary);
}
.oc-card--metric {
	display: flex;
	flex-direction: column;
	gap: var(--oc-space-1);
	padding: var(--oc-space-4);
}
.oc-card--metric .oc-metric__label {
	font-size: var(--oc-fs-12);
	color: var(--oc-text-muted);
	text-transform: uppercase;
	letter-spacing: .5px;
	font-weight: 600;
}
.oc-card--metric .oc-metric__value {
	font-size: var(--oc-fs-28);
	font-weight: 700;
	color: var(--oc-primary);
	line-height: var(--oc-lh-tight);
}
.oc-card--metric .oc-metric__delta {
	font-size: var(--oc-fs-12);
	color: var(--oc-success);
	font-weight: 500;
}
.oc-card--metric .oc-metric__delta--down { color: var(--oc-danger); }

/* =====================================================================
   5. Badges — oc-badge / oc-badge--{success,warning,danger,info,accent}
   ===================================================================== */
.oc-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: var(--oc-bg-tint);
	color: var(--oc-text);
	padding: 3px 10px;
	border-radius: var(--oc-radius-pill);
	font-size: var(--oc-fs-12);
	font-weight: 600;
	letter-spacing: .2px;
	border: 1px solid transparent;
}
.oc-badge--primary { background: var(--oc-primary-soft); color: var(--oc-primary-dark); }
.oc-badge--accent  { background: var(--oc-accent-soft); color: var(--oc-accent-dark); }
.oc-badge--success { background: var(--oc-success-soft); color: var(--oc-success); }
.oc-badge--warning { background: var(--oc-warning-soft); color: var(--oc-warning); }
.oc-badge--danger  { background: var(--oc-danger-soft); color: var(--oc-danger); }
.oc-badge--info    { background: var(--oc-info-soft); color: var(--oc-info); }
.oc-badge--ghost   { background: transparent; border-color: var(--oc-border); color: var(--oc-text-muted); }

/* dot variant: piccolo cerchio + label, utile per status */
.oc-badge--dot::before {
	content: "";
	width: 6px; height: 6px;
	border-radius: 50%;
	background: currentColor;
	display: inline-block;
}

/* =====================================================================
   6. Alerts — oc-alert / oc-alert--{success,warning,danger,info}
   ===================================================================== */
.oc-alert {
	display: flex;
	align-items: flex-start;
	gap: var(--oc-space-3);
	padding: var(--oc-space-3) var(--oc-space-4);
	border-radius: var(--oc-radius);
	border-left: 4px solid var(--oc-primary);
	background: var(--oc-primary-soft);
	color: var(--oc-text);
	font-size: var(--oc-fs-14);
	line-height: var(--oc-lh-default);
}
.oc-alert__icon { flex-shrink: 0; width: 20px; height: 20px; margin-top: 2px; color: var(--oc-primary); }
.oc-alert__title { font-weight: 600; margin: 0 0 4px; color: var(--oc-text); }
.oc-alert__body { color: var(--oc-text); }
.oc-alert__close {
	margin-left: auto;
	background: none; border: none;
	color: var(--oc-text-muted);
	cursor: pointer;
	padding: 4px;
	font-size: var(--oc-fs-18);
	line-height: 1;
}
.oc-alert__close:hover { color: var(--oc-text); }

.oc-alert--success { border-left-color: var(--oc-success); background: var(--oc-success-soft); }
.oc-alert--success .oc-alert__icon { color: var(--oc-success); }
.oc-alert--warning { border-left-color: var(--oc-warning); background: var(--oc-warning-soft); }
.oc-alert--warning .oc-alert__icon { color: var(--oc-warning); }
.oc-alert--danger  { border-left-color: var(--oc-danger); background: var(--oc-danger-soft); }
.oc-alert--danger .oc-alert__icon { color: var(--oc-danger); }
.oc-alert--info    { border-left-color: var(--oc-info); background: var(--oc-info-soft); }
.oc-alert--info .oc-alert__icon { color: var(--oc-info); }

/* =====================================================================
   7. Form controls — oc-input / oc-select / oc-textarea / oc-label
   ===================================================================== */
.oc-field { display: flex; flex-direction: column; gap: 4px; }
.oc-label {
	font-size: var(--oc-fs-12);
	font-weight: 600;
	color: var(--oc-text-muted);
	text-transform: uppercase;
	letter-spacing: .5px;
}
.oc-input,
.oc-select,
.oc-textarea {
	background: var(--oc-bg-tint);
	border: 1.5px solid var(--oc-border);
	border-radius: var(--oc-radius);
	padding: 9px 14px;
	font-family: inherit;
	font-size: var(--oc-fs-14);
	color: var(--oc-text);
	line-height: 1.4;
	transition: border-color var(--oc-transition-default), background var(--oc-transition-default), box-shadow var(--oc-transition-default);
	width: 100%;
}
.oc-input:focus,
.oc-select:focus,
.oc-textarea:focus {
	outline: none;
	background: var(--oc-surface);
	border-color: var(--oc-primary);
	box-shadow: var(--oc-shadow-focus);
}
.oc-input:disabled,
.oc-select:disabled,
.oc-textarea:disabled {
	background: var(--oc-divider);
	color: var(--oc-text-muted);
	cursor: not-allowed;
}
.oc-textarea { min-height: 96px; resize: vertical; line-height: var(--oc-lh-default); }
.oc-field__hint { font-size: var(--oc-fs-12); color: var(--oc-text-muted); margin-top: 2px; }
.oc-field__error { font-size: var(--oc-fs-12); color: var(--oc-danger); margin-top: 2px; font-weight: 500; }
.oc-field--invalid .oc-input,
.oc-field--invalid .oc-select,
.oc-field--invalid .oc-textarea { border-color: var(--oc-danger); }

/* =====================================================================
   8. Tip-trigger + slide-out panel (placeholder Step 23)
   Lo Step 23 implementera tipsContent table + JS oc-tips.js. Qui solo
   classi e stili pronti.
   ===================================================================== */
.oc-tip-trigger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px; height: 18px;
	border-radius: 50%;
	background: var(--oc-primary-soft);
	color: var(--oc-primary);
	border: 1px solid var(--oc-primary-soft);
	font-size: var(--oc-fs-12);
	font-weight: 700;
	cursor: pointer;
	margin-left: 4px;
	vertical-align: middle;
	transition: background var(--oc-transition-fast), color var(--oc-transition-fast);
	padding: 0; line-height: 1;
}
.oc-tip-trigger:hover { background: var(--oc-primary); color: var(--oc-text-on-primary); }
.oc-tip-trigger:focus-visible { outline: none; box-shadow: var(--oc-shadow-focus); }

.oc-tip-panel {
	position: fixed;
	top: 0; right: 0;
	width: min(420px, 90vw);
	height: 100vh;
	background: var(--oc-surface);
	border-left: 1px solid var(--oc-border);
	box-shadow: var(--oc-shadow-lg);
	z-index: var(--oc-z-tip-panel);
	transform: translateX(100%);
	transition: transform var(--oc-transition-slow);
	display: flex; flex-direction: column;
}
.oc-tip-panel.is-open { transform: translateX(0); }
.oc-tip-panel__header {
	padding: var(--oc-space-4);
	border-bottom: 1px solid var(--oc-divider);
	display: flex; align-items: center; gap: var(--oc-space-3);
}
.oc-tip-panel__title { font-weight: 600; font-size: var(--oc-fs-16); margin: 0; flex: 1; color: var(--oc-text); }
.oc-tip-panel__close { background: none; border: none; cursor: pointer; padding: 6px; color: var(--oc-text-muted); }
.oc-tip-panel__body { padding: var(--oc-space-4); overflow-y: auto; flex: 1; color: var(--oc-text); line-height: var(--oc-lh-relaxed); }
.oc-tip-panel__footer {
	padding: var(--oc-space-3) var(--oc-space-4);
	border-top: 1px solid var(--oc-divider);
	font-size: var(--oc-fs-12);
	color: var(--oc-text-muted);
	background: var(--oc-bg-tint);
}
.oc-tip-panel__norma {
	display: inline-block;
	font-family: var(--oc-font-mono);
	font-size: var(--oc-fs-12);
	color: var(--oc-primary-dark);
	background: var(--oc-primary-soft);
	padding: 2px 8px;
	border-radius: var(--oc-radius-sm);
}
.oc-tip-backdrop {
	position: fixed; inset: 0;
	background: rgba(0,0,0,.32);
	z-index: calc(var(--oc-z-tip-panel) - 1);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--oc-transition-default);
}
.oc-tip-backdrop.is-open { opacity: 1; pointer-events: auto; }

/* ---------------------------------------------------------------------
   8b. Page-level help — bottone "?" 24px standard accanto al titolo
       (helper renderPageHelpButton/Panel in uiComponents.php +
       /js/oc-page-help.js)
   --------------------------------------------------------------------- */
.oc-page-help-btn {
	margin-left: .4rem;
	background: none;
	border: 1.5px solid var(--oc-border);
	border-radius: 50%;
	width: 24px;
	height: 24px;
	font-size: .78rem;
	font-weight: 600;
	color: var(--oc-text-muted);
	cursor: pointer;
	vertical-align: middle;
	padding: 0;
	line-height: 1;
	transition: color var(--oc-transition-fast), border-color var(--oc-transition-fast), background var(--oc-transition-fast);
}
.oc-page-help-btn:hover,
.oc-page-help-btn:focus-visible {
	color: var(--oc-primary);
	border-color: var(--oc-primary);
	background: var(--oc-primary-soft, rgba(0,0,0,.04));
	outline: none;
}

/* Variante "link discreto" del trigger help — usata sulle pagine pubbliche
   (login, register, passwordReset, ecc.) dove il bottone cerchiato sarebbe troppo
   invasivo. Posizionato sotto la card/sezione principale. */
.oc-page-help-link {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	margin: 1.25rem auto 0;
	padding: .5rem .85rem;
	border-radius: 999px;
	font-size: .85rem;
	font-weight: 500;
	color: rgba(255,255,255,.85);
	text-decoration: none;
	background: rgba(255,255,255,.08);
	border: 1px solid rgba(255,255,255,.18);
	cursor: pointer;
	transition: color .15s, background .15s, border-color .15s;
}
.oc-page-help-link:hover,
.oc-page-help-link:focus-visible {
	color: #fff;
	background: rgba(255,255,255,.16);
	border-color: rgba(255,255,255,.32);
	outline: none;
	text-decoration: none;
}
.oc-page-help-link__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 1.5px solid currentColor;
	font-size: .68rem;
	font-weight: 700;
	line-height: 1;
}
.oc-page-help-link__text {
	line-height: 1;
}

/* Modalità bilingue (pagine pubbliche): nascondi i label / pannelli non
   corrispondenti alla lingua corrente di <html lang>. */
html[lang="it"] .oc-page-help-link__text[lang="en"],
html[lang="it"] .oc-page-help-panel[lang="en"],
html[lang="it"] .oc-tip-backdrop[lang="en"] { display: none !important; }
html[lang="en"] .oc-page-help-link__text[lang="it"],
html[lang="en"] .oc-page-help-panel[lang="it"],
html[lang="en"] .oc-tip-backdrop[lang="it"] { display: none !important; }

/* Su sfondo chiaro (es. body bianco / card chiara) usare la variante invertita */
.oc-page-help-link--on-light {
	color: var(--oc-text-muted);
	background: rgba(0,0,0,.04);
	border-color: rgba(0,0,0,.12);
}
.oc-page-help-link--on-light:hover,
.oc-page-help-link--on-light:focus-visible {
	color: var(--oc-text);
	background: rgba(0,0,0,.07);
	border-color: rgba(0,0,0,.22);
}

/* Bottone chiusura: cerchietto evidente, coppia visiva del trigger "?"
   (.oc-page-help-btn). In alto a destra dell'header, sempre visibile
   perche' l'header e' pinnato (il body scorre, l'header no). */
.oc-page-help-panel .oc-tip-panel__close {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	font-size: 1.35rem;
	line-height: 1;
	background: none;
	border: 1.5px solid var(--oc-border);
	border-radius: 50%;
	cursor: pointer;
	color: var(--oc-text-muted);
	padding: 0;
	transition: color var(--oc-transition-fast), border-color var(--oc-transition-fast), background var(--oc-transition-fast);
}
.oc-page-help-panel .oc-tip-panel__close:hover,
.oc-page-help-panel .oc-tip-panel__close:focus-visible {
	color: var(--oc-primary);
	border-color: var(--oc-primary);
	background: var(--oc-primary-soft, rgba(0,0,0,.04));
	outline: none;
}

.oc-page-help__lead {
	margin: 0 0 1rem;
	font-size: .85rem;
	color: var(--oc-text-muted);
	line-height: 1.5;
}

.oc-page-help__section {
	padding: .25rem 0 .85rem;
}
.oc-page-help__section + .oc-page-help__section {
	border-top: 1px dashed var(--oc-divider);
	padding-top: .85rem;
}

.oc-page-help__hdr {
	display: flex;
	align-items: center;
	gap: .45rem;
	font-size: .72rem;
	color: var(--oc-text);
	text-transform: uppercase;
	letter-spacing: .5px;
	font-weight: 800;
	margin-bottom: .5rem;
}
.oc-page-help__icon {
	width: 14px;
	height: 14px;
	stroke: currentColor;
	fill: none;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
	flex-shrink: 0;
}

.oc-page-help__body {
	margin: 0;
	font-size: .85rem;
	color: var(--oc-text);
	line-height: 1.5;
}
.oc-page-help__body p { margin: 0 0 .5rem; }
.oc-page-help__body p:last-child { margin-bottom: 0; }
.oc-page-help__body b,
.oc-page-help__body strong { font-weight: 600; color: var(--oc-text); }

/* Layout container per liste di esempi/legenda dentro le sezioni di help */
.oc-page-help__items {
	display: flex;
	flex-direction: column;
	gap: .55rem;
}
.oc-page-help__item {
	display: flex;
	align-items: center;
	gap: .55rem;
	font-size: .82rem;
	color: var(--oc-text);
	padding: .15rem 0;
	line-height: 1.45;
}
.oc-page-help__item > *:first-child {
	flex-shrink: 0;
	white-space: nowrap;
}
.oc-page-help__item > span:last-child {
	flex: 1 1 auto;
	white-space: normal;
}

/* Pill orizzontale stile "via fascicolo" (arancione) — esempio di stato */
.oc-page-help__pill {
	display: inline-flex;
	align-items: center;
	gap: .25rem;
	padding: 1px 8px;
	border-radius: 999px;
	font-size: .68rem;
	font-weight: 600;
	white-space: nowrap;
	flex-shrink: 0;
}
.oc-page-help__pill svg {
	width: 11px;
	height: 11px;
	stroke: currentColor;
	fill: none;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.oc-page-help__pill--warn   { background: #fdeed8; color: #cc5500; border: 1px solid #f1d8a8; }
.oc-page-help__pill--danger { background: #fbe2e6; color: #a8243a; border: 1px solid #f0bcc6; }
.oc-page-help__pill--info   { background: #e6f1f9; color: #2470ab; border: 1px solid #bcd6ea; }

/* Action button mockup (icona azione tipo "occhio/matita/cestino") */
.oc-page-help__act {
	width: 28px;
	height: 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
	border: 1px solid var(--oc-border);
	background: #fff;
	color: var(--oc-text-muted);
	flex-shrink: 0;
}
.oc-page-help__act svg {
	width: 14px;
	height: 14px;
	stroke: currentColor;
	fill: none;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.oc-page-help__act--danger { color: var(--oc-danger); }

/* Cluster di action button affiancati (es. eye+edit+trash) */
.oc-page-help__acts {
	display: inline-flex;
	gap: 2px;
	flex-shrink: 0;
}

/* Chip colorato 22px — campione famiglia/categoria (uniforme in tutte le legende) */
.oc-page-help__chip {
	width: 22px;
	height: 22px;
	border-radius: 5px;
	border: 1.5px solid currentColor;
	display: inline-block;
	flex: 0 0 22px;
	box-sizing: border-box;
}

/* Tile colorato 36px (logo / iniziali / icona piccola) */
.oc-page-help__tile {
	width: 36px;
	height: 36px;
	border-radius: 6px;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: .78rem;
	border: 2px solid;
	color: #fff;
	background: #365a82;
	border-color: #7a92b0;
}
.oc-page-help__tile svg {
	width: 14px;
	height: 14px;
	stroke: currentColor;
	fill: none;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Safety net: qualsiasi <svg> dentro il pannello senza width esplicita non blow-up */
.oc-page-help__body svg:not([width]) { width: 14px; height: 14px; flex-shrink: 0; }

/* =====================================================================
   9. Basket / drag&drop placeholder (Step 24 wizard)
   ===================================================================== */
.oc-basket {
	border: 2px dashed var(--oc-border);
	background: var(--oc-bg-tint);
	border-radius: var(--oc-radius-lg);
	padding: var(--oc-space-7) var(--oc-space-5);
	text-align: center;
	color: var(--oc-text-muted);
	transition: border-color var(--oc-transition-default), background var(--oc-transition-default);
}
.oc-basket:hover, .oc-basket.is-hover {
	border-color: var(--oc-primary);
	background: var(--oc-primary-soft);
	color: var(--oc-primary-dark);
}
.oc-basket.is-active {
	border-color: var(--oc-accent);
	background: var(--oc-accent-soft);
	color: var(--oc-accent-dark);
}
.oc-basket__icon {
	width: 48px; height: 48px;
	color: var(--oc-primary);
	margin-bottom: var(--oc-space-3);
}
.oc-basket__hint { font-size: var(--oc-fs-13); margin-top: var(--oc-space-2); }

/* =====================================================================
   10. Icon system
   Icone via <svg class="oc-icon"><use href="/img/sprites/oc-icons.svg#i-X"/></svg>
   ===================================================================== */
.oc-icon {
	display: inline-block;
	width: 1em; height: 1em;
	stroke: currentColor;
	fill: none;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
	vertical-align: -0.15em;
	flex-shrink: 0;
}
.oc-icon--solid { fill: currentColor; stroke: none; }
.oc-icon--lg { font-size: 1.5em; }
.oc-icon--xl { font-size: 2em; }
.oc-icon--xxl { font-size: 3em; }

/* Icon-cell preview / ico picker */
.oc-icon-cell {
	background: var(--oc-surface);
	border: 1px solid var(--oc-border);
	border-radius: var(--oc-radius);
	padding: 16px 8px 10px;
	text-align: center;
	transition: transform var(--oc-transition-fast), box-shadow var(--oc-transition-fast);
}
.oc-icon-cell:hover {
	transform: translateY(-2px);
	box-shadow: var(--oc-shadow);
}
.oc-icon-cell .oc-icon { width: 28px; height: 28px; color: var(--oc-primary); }
.oc-icon-cell__name { font-size: var(--oc-fs-12); color: var(--oc-text-muted); margin-top: 8px; font-weight: 500; }

/* =====================================================================
   11. Container + grid helpers (mobile-first)
   ===================================================================== */
.oc-container { max-width: 1240px; margin: 0 auto; padding: 0 var(--oc-space-4); }
.oc-container--sm { max-width: 720px; }
.oc-container--md { max-width: 960px; }

.oc-stack { display: flex; flex-direction: column; gap: var(--oc-space-3); }
.oc-stack--lg { gap: var(--oc-space-5); }
.oc-stack--sm { gap: var(--oc-space-2); }

.oc-row { display: flex; flex-wrap: wrap; gap: var(--oc-space-3); }
.oc-row--center { justify-content: center; align-items: center; }
.oc-row--between { justify-content: space-between; align-items: center; }
.oc-row--end { justify-content: flex-end; align-items: center; }

/* =====================================================================
   12. Tables — oc-table
   ===================================================================== */
.oc-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--oc-fs-14);
	background: var(--oc-surface);
}
.oc-table thead th {
	text-align: left;
	padding: var(--oc-space-3);
	font-size: var(--oc-fs-12);
	font-weight: 700;
	color: var(--oc-text-muted);
	text-transform: uppercase;
	letter-spacing: .5px;
	border-bottom: 2px solid var(--oc-border);
	background: var(--oc-bg-tint);
}
.oc-table tbody td {
	padding: var(--oc-space-3);
	border-bottom: 1px solid var(--oc-divider);
	color: var(--oc-text);
	vertical-align: middle;
}
.oc-table tbody tr:hover { background: var(--oc-bg-tint); }
.oc-table tbody tr.is-selected { background: var(--oc-primary-soft); }
.oc-table--compact tbody td { padding: 6px var(--oc-space-3); }
.oc-table--bordered { border: 1px solid var(--oc-border); border-radius: var(--oc-radius); overflow: hidden; }

/* =====================================================================
   13. Visually hidden (a11y screen reader only)
   ===================================================================== */
.oc-sr-only {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0);
	white-space: nowrap; border: 0;
}

/* =====================================================================
   14. Focus ring helper (per non-button)
   ===================================================================== */
.oc-focus-ring:focus-visible {
	outline: none;
	box-shadow: var(--oc-shadow-focus);
	border-radius: var(--oc-radius-sm);
}

/* =====================================================================
   15. Confirm modal — modale di conferma per azioni distruttive
   Sostituisce window.prompt() nei flussi di cancellazione.
   Markup atteso: vedi /js/oc-confirm-modal.js (creato dinamicamente).
   ===================================================================== */
.oc-confirm-modal-backdrop {
	position: fixed; inset: 0; background: rgba(20,28,38,.55);
	opacity: 0; pointer-events: none; transition: opacity .18s ease;
	z-index: 1090;
}
.oc-confirm-modal-backdrop.is-open { opacity: 1; pointer-events: auto; }

.oc-confirm-modal {
	position: fixed; top: 50%; left: 50%;
	transform: translate(-50%, -48%) scale(.96);
	width: min(540px, calc(100vw - 24px));
	max-height: calc(100vh - 40px); overflow: hidden;
	background: var(--oc-bg, #fff); border-radius: 12px;
	box-shadow: 0 24px 64px rgba(20,28,38,.32);
	opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease;
	display: flex; flex-direction: column;
	z-index: 1100;
}
.oc-confirm-modal.is-open {
	opacity: 1; pointer-events: auto;
	transform: translate(-50%, -50%) scale(1);
}

.oc-confirm-modal__head {
	display: flex; align-items: center; gap: .6rem;
	padding: .95rem 1.1rem; border-bottom: 1px solid var(--oc-divider);
	background: linear-gradient(180deg, rgba(239,71,111,.08), transparent);
}
.oc-confirm-modal__head svg {
	width: 22px; height: 22px; flex-shrink: 0;
	stroke: var(--oc-danger); fill: none; stroke-width: 1.8;
	stroke-linecap: round; stroke-linejoin: round;
}
.oc-confirm-modal__title {
	margin: 0; flex: 1 1 auto;
	font-size: 1rem; font-weight: 700; color: var(--oc-danger);
	letter-spacing: .2px;
}
.oc-confirm-modal__close {
	background: transparent; border: 0; font-size: 1.4rem; line-height: 1;
	color: var(--oc-text-muted); cursor: pointer;
	width: 30px; height: 30px; border-radius: 6px;
}
.oc-confirm-modal__close:hover { background: var(--oc-hover, #f3f4f6); color: var(--oc-text); }

.oc-confirm-modal__body { padding: 1rem 1.1rem; overflow: auto; }

.oc-confirm-modal__subject {
	padding: .7rem .85rem; border-radius: 8px;
	background: var(--oc-hover, #f6f7f9); border: 1px solid var(--oc-divider);
	margin-bottom: .95rem;
}
.oc-confirm-modal__subject-name { font-weight: 600; color: var(--oc-text); font-size: .95rem; }
.oc-confirm-modal__subject-meta { font-size: .78rem; color: var(--oc-text-muted); margin-top: .15rem; }

.oc-confirm-modal__deps-lbl {
	font-size: .74rem; text-transform: uppercase; letter-spacing: .4px;
	font-weight: 600; color: var(--oc-text-muted); margin-bottom: .35rem;
}
.oc-confirm-modal__deps {
	margin: 0 0 .9rem; padding: 0; list-style: none;
	font-size: .83rem; color: var(--oc-text); line-height: 1.5;
}
.oc-confirm-modal__deps li {
	display: flex; gap: .5rem; align-items: flex-start;
	padding: .25rem 0; border-bottom: 1px dashed var(--oc-divider);
}
.oc-confirm-modal__deps li:last-child { border-bottom: 0; }
.oc-confirm-modal__deps b { color: var(--oc-text); font-weight: 600; }
.oc-confirm-modal__deps small { color: var(--oc-text-muted); }
.oc-confirm-modal__deps-empty {
	font-size: .82rem; color: var(--oc-text-muted); font-style: italic;
	padding: .4rem 0 .9rem;
}

.oc-confirm-modal__warning {
	display: flex; gap: .55rem; align-items: flex-start;
	padding: .6rem .75rem; border-radius: 8px;
	background: rgba(239,71,111,.08); border: 1px solid rgba(239,71,111,.25);
	font-size: .83rem; color: #7d1a31; margin-bottom: 1rem;
}
.oc-confirm-modal__warning svg {
	width: 18px; height: 18px; flex-shrink: 0; stroke: var(--oc-danger);
	fill: none; stroke-width: 2; margin-top: .05rem;
}

.oc-confirm-modal__type-lbl {
	display: block; font-size: .82rem; color: var(--oc-text);
	margin-bottom: .35rem;
}
.oc-confirm-modal__type-lbl code {
	font-family: ui-monospace, Menlo, Consolas, monospace;
	background: var(--oc-hover, #f3f4f6); padding: .05rem .35rem;
	border-radius: 4px; font-size: .85rem; color: var(--oc-danger);
	font-weight: 600;
}
.oc-confirm-modal__input {
	width: 100%; box-sizing: border-box;
	padding: .55rem .7rem; font-size: .92rem;
	border: 1.5px solid var(--oc-border); border-radius: 8px;
	background: #fff; color: var(--oc-text); outline: none;
	font-family: inherit; transition: border-color .12s, box-shadow .12s;
}
.oc-confirm-modal__input:focus { border-color: var(--oc-primary); box-shadow: 0 0 0 3px rgba(21,101,192,.12); }
.oc-confirm-modal__input.is-match { border-color: #2f7a3a; box-shadow: 0 0 0 3px rgba(47,122,58,.12); }
.oc-confirm-modal__hint { font-size: .74rem; color: var(--oc-text-muted); margin-top: .3rem; min-height: 1em; }
.oc-confirm-modal__hint.is-match { color: #2f7a3a; }

.oc-confirm-modal__foot {
	display: flex; justify-content: flex-end; gap: .5rem;
	padding: .85rem 1.1rem; border-top: 1px solid var(--oc-divider);
	background: var(--oc-hover, #fafbfc);
}
.oc-confirm-modal__btn {
	padding: .5rem 1rem; font-size: .88rem; font-weight: 600;
	border-radius: 7px; cursor: pointer; border: 1px solid transparent;
	transition: all .12s; min-width: 120px;
}
.oc-confirm-modal__btn--cancel {
	background: transparent; color: var(--oc-text);
	border-color: var(--oc-border);
}
.oc-confirm-modal__btn--cancel:hover { background: var(--oc-hover, #f3f4f6); }
.oc-confirm-modal__btn--danger {
	background: var(--oc-danger); color: #fff; border-color: var(--oc-danger);
}
.oc-confirm-modal__btn--danger:hover:not(:disabled) { filter: brightness(.92); }
.oc-confirm-modal__btn--danger:disabled { opacity: .45; cursor: not-allowed; }

/* ==================================================================
   16. Micro-barra di contesto (Navigazione N1, 2026-05-25)
   ------------------------------------------------------------------
   Riga unica sotto l'H1 nelle pagine di dettaglio (seeQuadro / seeDocs).
   Mostra 1 breadcrumb "dove sei" + 2-3 link "dove puoi saltare".
   Stile sobrio (testo muted, separatori " · ").
   Wrap su 2 righe solo su mobile stretti.
   ================================================================== */
.oc-context-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .65rem;
    margin: .15rem 0 1rem;
    font-size: .85rem;
    color: var(--oc-text-muted);
    line-height: 1.4;
}
.oc-context-bar__crumb {
    color: var(--oc-text);
    font-weight: 500;
}
.oc-context-bar__sep {
    color: var(--oc-divider, #cdd5df);
    user-select: none;
}
.oc-context-bar__link {
    color: var(--oc-primary);
    text-decoration: none;
    border-bottom: 1px dashed transparent;
    transition: border-color .12s, color .12s;
    white-space: nowrap;
}
.oc-context-bar__link:hover {
    color: var(--oc-primary-dark);
    border-bottom-color: var(--oc-primary);
}
.oc-context-bar__link .oc-icon {
    width: 12px; height: 12px;
    vertical-align: -1px;
    margin: 0 .15rem;
}
.oc-context-bar__icon {
    flex-shrink: 0;
    color: var(--oc-text-muted);
    width: 14px; height: 14px;
    margin-right: .1rem;
    vertical-align: -2px;
}
@media (max-width: 540px) {
    .oc-context-bar { font-size: .8rem; gap: .25rem .5rem; }
    .oc-context-bar__sep { display: none; }
    .oc-context-bar__link { display: inline-block; }
}

/* =============================================================
   SD1 (Set DEMO) — contrassegno "DEMO" variante A "Vetro"
   Topbar utente (sessione demo) e, in SD3, console SA (stato switch).
   Pensato per il fondo navy/blu della topbar.
   ============================================================= */
.oc-demo-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 24px;
    padding: 0 10px;
    flex-shrink: 0;
    background: rgba(255, 255, 255, .13);
    border: 1px solid rgba(255, 255, 255, .30);
    border-radius: 999px;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    line-height: 1;
    white-space: nowrap;
    user-select: none;
}
.oc-demo-badge__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #F4B400;
    box-shadow: 0 0 0 3px rgba(244, 180, 0, .22);
}
@media (max-width: 575.98px) {
    .oc-demo-badge { letter-spacing: 1px; padding: 0 8px; }
}

/* =============================================================
   SD3 (Set DEMO) — switch console SA "Dati: DEMO | Ufficiali"
   Due modalità esclusive. Form POST (niente JS). Fondo navy/blu topbar SA.
   ============================================================= */
.oc-sa-demoswitch {
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, .30);
    border-radius: 999px;
    overflow: hidden;
    margin: 0;
    flex-shrink: 0;
}
.oc-sa-demoswitch__opt {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, .6);
    padding: 5px 12px;
    font: 700 11px/1 inherit;
    letter-spacing: .5px;
    cursor: pointer;
    white-space: nowrap;
}
.oc-sa-demoswitch__opt:hover { color: #fff; }
.oc-sa-demoswitch__opt.is-on { cursor: default; color: #fff; }
/* SD (2026-06-01): opzione attiva colorata per modalità (ambra DEMO / verde UFFICIALI), in tono col badge + indicatore menu. */
.oc-sa-demoswitch__opt[value="demo"].is-on { background: #F4B400; color: #3a2c00; }
.oc-sa-demoswitch__opt[value="ufficiali"].is-on { background: #34c77b; color: #06351f; }
.oc-sa-demoswitch__opt:focus-visible { outline: 2px solid var(--oc-accent); outline-offset: 1px; }