/* =====================================================================
themes.css (rev110) — sistema temi del gestionale.
HF95 (rev110): pulsanti Azioni Rapide ad altezza riga.
.btn-icon e' fisso 32x32; su righe alte (badge multipli, contenuto
multilinea) appariva piccolo rispetto al record. In coda al file e'
aggiunto un blocco scoped su .app-table .app-actions che fa
stretch verticale dei pulsanti senza toccare nessuna delle 14 blade
con la colonna Azioni Rapide. Trick standard tr{height:1px} per
far calcolare 100% ai children (il contenuto alza la riga oltre 1px,
quindi nessuna riduzione visiva). Compatibile con i 3 temi.
Hotfix #10 (rev109): la topbar sticky non rimaneva fissa durante
lo scroll. Causa: la regola `.app-main { overflow-x: auto; }`
(sezione 9, anti-overflow) trasformava `.app-main` in un nuovo
scrolling container; `position: sticky` aggancia all'antenato
scrollabile piu' vicino, e siccome `.app-main` cresce in altezza
col contenuto e non viene mai scrollato verticalmente, lo scatto
sticky non avveniva mai e la topbar finiva fuori dal viewport
insieme al contenuto. Fix: cambiato `auto` in `clip` -- clippa il
contenuto eccedente in orizzontale senza creare uno scroll
container, quindi sticky resta agganciato al body. Supportato
Chrome 90+, Firefox 81+, Safari 16+. La protezione anti-overflow
resta su `.app-card` (riga 1212) dove e' davvero necessaria per
le tabelle larghe.
rev105: differenziazione visiva windows11 vs ios. Le palette dei
due temi light erano cosi' vicine (entrambe surface bianco, accent
blu) che a colpo d'occhio non si distinguevano. In coda al file e'
aggiunto un blocco di override per-tema su forma dei componenti
(radius, ombre, bordi, stile bottoni e input) cosi' che ogni tema
abbia la sua design language riconoscibile:
- windows11 (Fluent): radius stretti, bordo 1px netto, ombra crisp
- ios (Human Interface): radius grandi, btn pill, ombre soffici,
input con surface tinted senza bordo
Le variabili dei tre temi non vengono cambiate: gli override sono
solo sui componenti, quindi nessuna regressione possibile sul resto.
Tre temi indipendenti, attivati via attributo [data-theme] su :
[data-theme="windows11"] Fluent Design (light)
[data-theme="ios"] Human Interface (light)
[data-theme="dark"] Dark mode (high contrast)
Rev102 (audit layout 44 viste): aggiunto in coda un blocco di safety
net globale che neutralizza i problemi sistemici riscontrati su tutte
le pagine indipendentemente dal tema attivo:
- input/textarea/select "nudi" (senza classi app-input) leggibili
in tutti e tre i temi tramite normalizzatore a specificita' 0
(`:where(...)`), che si lascia sovrascrivere da qualunque classe
Tailwind o app-* gia' presente
- `.text-white` sui temi light reso scuro per non sparire su sfondi
chiari, salvo i pulsanti colorati che mantengono il bianco
- bridge esteso a cyan / orange / blue / gray-zinc-neutral-stone
(badge audit, log errori, alcune dashboard)
- dropdown Alpine portati a z-index 50 per non finire sotto la
topbar sticky (z-index 30)
- tema dark: bg-white e text-black ricondotti alle variabili del
tema invece di rimanere bianchi/neri rigidi
Rev101: i tre selettori dei temi sono passati da
`[data-theme="..."]` (specificita' 0,1,0) a
`html[data-theme="..."]` (specificita' 0,1,1) per vincere
sempre sul `:root { ... }` definito come safety net inline in
`layouts/app.blade.php`. Senza questo, in alcune condizioni
(file servito dalla cache, latenza fetch su 3G, blocchi proxy)
le variabili dell'inline restavano vincenti e il visual non
cambiava nonostante l'attributo data-theme corretto.
rev84: propagate le classi semantiche app-* sui form articolo
(parts/_form, parts/create, parts/edit), sulle viste privacy
(clients/privacy, clients/privacy-history) e sul dettaglio scheda
di lavorazione (work-orders/show). Le viste rifattorizzate non
dipendono piu' dal blocco "BRIDGE TAILWIND LEGACY" piu' in basso.
Il bridge resta in essere per le viste non ancora migrate
(clients/show, quotes/show, invoices/show, vehicles/show) e
verra' rimosso una volta completata la propagazione.
===================================================================== */
/* ---------- variabili comuni a tutti i temi ---------- */
:root {
--app-font-base: 'Urbanist', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
--app-font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', Menlo, monospace;
--app-radius-sm: 6px;
--app-radius-md: 10px;
--app-radius-lg: 16px;
--app-radius-pill: 9999px;
--app-transition: 180ms cubic-bezier(.2, .8, .2, 1);
}
/* =====================================================================
TEMA 1 — WINDOWS 11 (Fluent Design, light)
===================================================================== */
html[data-theme="windows11"] {
--app-font-base: 'Segoe UI Variable', 'Segoe UI', 'Urbanist', system-ui, sans-serif;
--app-bg: #f3f3f3;
--app-bg-elevated: #ffffff;
--app-bg-muted: #fafafa;
--app-bg-overlay: rgba(255, 255, 255, 0.72);
--app-surface: #ffffff;
--app-surface-soft: #f9f9f9;
--app-surface-hover:#f5f5f5;
--app-surface-active:#ebebeb;
--app-fg: #1f1f1f;
--app-fg-muted: #5b5b5b;
--app-fg-subtle: #8a8a8a;
--app-fg-inverse: #ffffff;
--app-border: #e6e6e6;
--app-border-strong:#cfcfcf;
--app-divider: #ededed;
--app-accent: #0067c0;
--app-accent-hover: #0078d4;
--app-accent-soft: rgba(0, 103, 192, 0.10);
--app-accent-fg: #ffffff;
--app-success: #0f7b0f;
--app-warning: #9d5d00;
--app-danger: #c42b1c;
--app-info: #0067c0;
--app-success-soft: rgba(15, 123, 15, 0.10);
--app-warning-soft: rgba(157, 93, 0, 0.10);
--app-danger-soft: rgba(196, 43, 28, 0.10);
--app-info-soft: rgba(0, 103, 192, 0.10);
--app-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(0, 0, 0, 0.05);
--app-shadow-md: 0 2px 6px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.05);
--app-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.10);
--app-radius-md: 8px;
--app-radius-lg: 12px;
--app-sidebar-bg: #fafafa;
--app-sidebar-fg: #1f1f1f;
--app-sidebar-active-bg: rgba(0, 103, 192, 0.10);
--app-sidebar-active-fg: #0067c0;
--app-sidebar-active-bar:#0067c0;
--app-topbar-bg: #ffffff;
--app-topbar-fg: #1f1f1f;
color-scheme: light;
}
/* =====================================================================
TEMA 2 — iOS (Human Interface, light)
===================================================================== */
html[data-theme="ios"] {
--app-font-base: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Urbanist', sans-serif;
--app-bg: #f2f2f7;
--app-bg-elevated: #ffffff;
--app-bg-muted: #ffffff;
--app-bg-overlay: rgba(255, 255, 255, 0.78);
--app-surface: #ffffff;
--app-surface-soft: #f9f9fb;
--app-surface-hover:#f1f1f6;
--app-surface-active:#e7e7ec;
--app-fg: #000000;
--app-fg-muted: #3c3c43;
--app-fg-subtle: #8e8e93;
--app-fg-inverse: #ffffff;
--app-border: #d1d1d6;
--app-border-strong:#c7c7cc;
--app-divider: #e5e5ea;
--app-accent: #007aff;
--app-accent-hover: #0062cc;
--app-accent-soft: rgba(0, 122, 255, 0.12);
--app-accent-fg: #ffffff;
--app-success: #248a3d;
--app-warning: #b25000;
--app-danger: #d70015;
--app-info: #007aff;
--app-success-soft: rgba(36, 138, 61, 0.12);
--app-warning-soft: rgba(178, 80, 0, 0.12);
--app-danger-soft: rgba(215, 0, 21, 0.10);
--app-info-soft: rgba(0, 122, 255, 0.14);
--app-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
--app-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
--app-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12);
--app-radius-sm: 8px;
--app-radius-md: 14px;
--app-radius-lg: 20px;
--app-sidebar-bg: rgba(246, 246, 248, 0.9);
--app-sidebar-fg: #1c1c1e;
--app-sidebar-active-bg: rgba(0, 122, 255, 0.12);
--app-sidebar-active-fg: #007aff;
--app-sidebar-active-bar:#007aff;
--app-topbar-bg: rgba(255, 255, 255, 0.85);
--app-topbar-fg: #1c1c1e;
color-scheme: light;
}
/* =====================================================================
TEMA 3 — DARK (high contrast, sky accent — eredita la palette storica)
===================================================================== */
html[data-theme="dark"] {
--app-font-base: 'Urbanist', system-ui, -apple-system, sans-serif;
--app-bg: #020617;
--app-bg-elevated: #0b1220;
--app-bg-muted: #0f172a;
--app-bg-overlay: rgba(2, 6, 23, 0.78);
--app-surface: #0f172a;
--app-surface-soft: #111c34;
--app-surface-hover:#1e293b;
--app-surface-active:#1f2a44;
--app-fg: #f1f5f9;
--app-fg-muted: #cbd5e1;
--app-fg-subtle: #64748b;
--app-fg-inverse: #0f172a;
--app-border: #1e293b;
--app-border-strong:#334155;
--app-divider: #1e293b;
--app-accent: #38bdf8;
--app-accent-hover: #0ea5e9;
--app-accent-soft: rgba(56, 189, 248, 0.12);
--app-accent-fg: #ffffff;
--app-success: #22c55e;
--app-warning: #f59e0b;
--app-danger: #f43f5e;
--app-info: #38bdf8;
--app-success-soft: rgba(34, 197, 94, 0.14);
--app-warning-soft: rgba(245, 158, 11, 0.14);
--app-danger-soft: rgba(244, 63, 94, 0.14);
--app-info-soft: rgba(56, 189, 248, 0.14);
--app-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
--app-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
--app-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6);
--app-sidebar-bg: #020617;
--app-sidebar-fg: #cbd5e1;
--app-sidebar-active-bg: rgba(56, 189, 248, 0.10);
--app-sidebar-active-fg: #38bdf8;
--app-sidebar-active-bar:#38bdf8;
--app-topbar-bg: #0b1220;
--app-topbar-fg: #e2e8f0;
color-scheme: dark;
}
/* =====================================================================
PRIMITIVE GLOBALI — guidate dalle variabili del tema attivo
===================================================================== */
html, body {
background-color: var(--app-bg);
color: var(--app-fg);
font-family: var(--app-font-base);
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--app-bg); }
::-webkit-scrollbar-thumb { background: var(--app-border-strong); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--app-fg-subtle); }
/* ---------- shell ---------- */
.app-shell { display: flex; min-height: 100vh; background: var(--app-bg); color: var(--app-fg); }
.app-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.app-content { padding: 1.75rem 2rem; flex: 1; }
/* ---------- sidebar ---------- */
.app-sidebar {
width: 16rem;
flex-shrink: 0;
position: sticky;
top: 0;
height: 100vh;
background: var(--app-sidebar-bg);
color: var(--app-sidebar-fg);
border-right: 1px solid var(--app-border);
display: flex;
flex-direction: column;
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
}
.app-sidebar__brand { padding: 1.5rem 1.5rem 1rem; }
.app-sidebar__nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 0.5rem 0; }
.app-sidebar__footer { border-top: 1px solid var(--app-divider); padding: 1rem 1rem 1.25rem; }
.app-nav-link {
display: flex; align-items: center; gap: 0.75rem;
padding: 0.7rem 1.5rem;
font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
color: var(--app-sidebar-fg);
border-right: 3px solid transparent;
transition: background var(--app-transition), color var(--app-transition);
text-decoration: none;
}
.app-nav-link:hover { background: var(--app-surface-hover); color: var(--app-fg); }
.app-nav-link.is-active {
background: var(--app-sidebar-active-bg);
color: var(--app-sidebar-active-fg);
border-right-color: var(--app-sidebar-active-bar);
}
.app-nav-link i { width: 1.25rem; text-align: center; }
.app-nav-sublink {
display: flex; align-items: center; gap: 0.5rem;
padding: 0.55rem 1.5rem 0.55rem 3.5rem;
font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
color: var(--app-fg-muted);
border-right: 3px solid transparent;
text-decoration: none;
transition: background var(--app-transition), color var(--app-transition);
}
.app-nav-sublink:hover { background: var(--app-surface-hover); color: var(--app-fg); }
.app-nav-sublink.is-active {
background: var(--app-sidebar-active-bg);
color: var(--app-sidebar-active-fg);
border-right-color: var(--app-sidebar-active-bar);
}
.app-nav-section-divider {
height: 1px; background: var(--app-divider); margin: 0.5rem 1.5rem;
}
/* ---------- topbar ---------- */
.app-topbar {
position: sticky; top: 0; z-index: 30;
height: 56px;
background: var(--app-topbar-bg);
color: var(--app-topbar-fg);
border-bottom: 1px solid var(--app-border);
display: flex; align-items: center; gap: 1rem;
padding: 0 1.5rem;
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
}
.app-topbar__title { font-size: 0.95rem; font-weight: 700; letter-spacing: 0.01em; }
.app-topbar__crumb { font-size: 0.78rem; color: var(--app-fg-muted); }
.app-topbar__spacer { flex: 1; }
.app-topbar__user {
display: flex; align-items: center; gap: 0.6rem;
padding: 0.3rem 0.6rem;
border-radius: var(--app-radius-md);
background: var(--app-surface-soft);
border: 1px solid var(--app-border);
}
.app-topbar__avatar {
width: 28px; height: 28px;
border-radius: 50%;
background: var(--app-accent);
color: var(--app-accent-fg);
display: flex; align-items: center; justify-content: center;
font-weight: 800; font-size: 0.72rem;
}
/* ---------- page header (lista, dettaglio, dashboard) ---------- */
.app-page-header {
display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
margin-bottom: 1.5rem;
}
.app-page-header__main { flex: 1; min-width: 220px; }
.app-page-header__title { font-size: 1.4rem; font-weight: 700; color: var(--app-fg); letter-spacing: -0.01em; }
.app-page-header__sub { font-size: 0.78rem; color: var(--app-fg-muted); margin-top: 0.15rem; }
.app-page-header__actions{ display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
/* ---------- card ---------- */
.app-card {
background: var(--app-surface);
border: 1px solid var(--app-border);
border-radius: var(--app-radius-lg);
box-shadow: var(--app-shadow-sm);
padding: 1.25rem 1.5rem;
}
.app-card--flush { padding: 0; overflow: hidden; }
.app-card__header {
display: flex; align-items: center; gap: 0.75rem;
padding: 1rem 1.25rem; border-bottom: 1px solid var(--app-divider);
}
.app-card__title { font-weight: 700; font-size: 0.95rem; color: var(--app-fg); }
/* ---------- toolbar (filtri sopra liste) ---------- */
.app-toolbar {
background: var(--app-surface);
border: 1px solid var(--app-border);
border-radius: var(--app-radius-lg);
box-shadow: var(--app-shadow-sm);
padding: 0.85rem 1rem;
display: flex; flex-wrap: wrap; gap: 0.65rem; align-items: center;
margin-bottom: 1rem;
}
.app-toolbar .app-input,
.app-toolbar .app-select { height: 36px; font-size: 0.82rem; }
.app-toolbar__group { display: flex; align-items: center; gap: 0.5rem; }
/* ---------- button ---------- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
height: 38px; padding: 0 1rem;
border-radius: var(--app-radius-md);
border: 1px solid var(--app-border);
background: var(--app-surface);
color: var(--app-fg);
font-weight: 600; font-size: 0.82rem; line-height: 1;
transition: all var(--app-transition);
cursor: pointer; text-decoration: none;
}
.btn:hover { background: var(--app-surface-hover); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn-primary {
background: var(--app-accent); color: var(--app-accent-fg); border-color: var(--app-accent);
}
.btn-primary:hover { background: var(--app-accent-hover); border-color: var(--app-accent-hover); color: var(--app-accent-fg); }
.btn-danger { background: var(--app-danger); color: #fff; border-color: var(--app-danger); }
.btn-success { background: var(--app-success); color: #fff; border-color: var(--app-success); }
.btn-warning { background: var(--app-warning); color: #fff; border-color: var(--app-warning); }
.btn-square { width: 38px; padding: 0; }
.btn-sm { height: 30px; font-size: 0.75rem; }
.btn-lg { height: 44px; font-size: 0.9rem; padding: 0 1.25rem; }
.btn-icon {
width: 32px; height: 32px; padding: 0;
border-radius: var(--app-radius-md);
border: 1px solid var(--app-border);
background: var(--app-surface);
color: var(--app-fg-muted);
display: inline-flex; align-items: center; justify-content: center;
transition: all var(--app-transition);
cursor: pointer; text-decoration: none;
}
.btn-icon:hover { background: var(--app-surface-hover); color: var(--app-fg); border-color: var(--app-border-strong); }
.btn-icon--accent:hover { background: var(--app-accent); color: var(--app-accent-fg); border-color: var(--app-accent); }
.btn-icon--success:hover { background: var(--app-success); color: #fff; border-color: var(--app-success); }
.btn-icon--warning:hover { background: var(--app-warning); color: #fff; border-color: var(--app-warning); }
.btn-icon--danger:hover { background: var(--app-danger); color: #fff; border-color: var(--app-danger); }
/* ---------- form ---------- */
.app-input, .app-select, .app-textarea {
width: 100%;
height: 38px;
padding: 0 0.75rem;
border-radius: var(--app-radius-md);
border: 1px solid var(--app-border);
background: var(--app-surface);
color: var(--app-fg);
font-size: 0.85rem;
transition: border-color var(--app-transition), box-shadow var(--app-transition);
}
.app-textarea { height: auto; padding: 0.6rem 0.75rem; }
.app-input:focus, .app-select:focus, .app-textarea:focus {
outline: none;
border-color: var(--app-accent);
box-shadow: 0 0 0 3px var(--app-accent-soft);
}
.app-input::placeholder, .app-textarea::placeholder { color: var(--app-fg-subtle); }
.app-label {
display: block; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em;
color: var(--app-fg-muted); margin-bottom: 0.35rem; text-transform: uppercase;
}
.app-input-icon {
position: relative;
}
.app-input-icon > i {
position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
color: var(--app-fg-subtle); font-size: 0.85rem; pointer-events: none;
}
.app-input-icon > .app-input { padding-left: 2.2rem; }
.app-toggle {
position: relative; display: inline-block; width: 44px; height: 24px;
}
.app-toggle input { opacity: 0; width: 0; height: 0; }
.app-toggle__slider {
position: absolute; cursor: pointer; inset: 0;
background: var(--app-border-strong);
border-radius: 9999px;
transition: background var(--app-transition);
}
.app-toggle__slider::before {
content: ''; position: absolute; left: 3px; top: 3px;
width: 18px; height: 18px;
background: #fff; border-radius: 50%;
transition: transform var(--app-transition);
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.app-toggle input:checked + .app-toggle__slider { background: var(--app-success); }
.app-toggle input:checked + .app-toggle__slider::before { transform: translateX(20px); }
/* ---------- badge ---------- */
.app-badge {
display: inline-flex; align-items: center; gap: 0.35rem;
padding: 0.2rem 0.55rem;
border-radius: var(--app-radius-pill);
font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
background: var(--app-surface-soft);
color: var(--app-fg-muted);
border: 1px solid var(--app-border);
}
.app-badge--success { background: var(--app-success-soft); color: var(--app-success); border-color: transparent; }
.app-badge--warning { background: var(--app-warning-soft); color: var(--app-warning); border-color: transparent; }
.app-badge--danger { background: var(--app-danger-soft); color: var(--app-danger); border-color: transparent; }
.app-badge--info { background: var(--app-info-soft); color: var(--app-info); border-color: transparent; }
.app-badge--accent { background: var(--app-accent-soft); color: var(--app-accent); border-color: transparent; }
/* ---------- table ---------- */
.app-table { width: 100%; border-collapse: collapse; }
.app-table thead th {
text-align: left;
font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
color: var(--app-fg-muted);
padding: 0.75rem 1rem;
background: var(--app-surface-soft);
border-bottom: 1px solid var(--app-border);
position: sticky; top: 0; z-index: 1;
}
.app-table tbody td {
padding: 0.75rem 1rem; font-size: 0.85rem;
border-bottom: 1px solid var(--app-divider);
color: var(--app-fg);
vertical-align: middle;
}
.app-table tbody tr:hover td { background: var(--app-surface-hover); }
.app-table tbody tr:last-child td { border-bottom: 0; }
.app-table--auto-actions tbody td:last-child .app-actions { opacity: 0.4; transition: opacity var(--app-transition); }
.app-table--auto-actions tbody tr:hover td:last-child .app-actions { opacity: 1; }
.app-actions { display: inline-flex; gap: 0.35rem; }
.app-empty {
padding: 2.5rem 1rem;
text-align: center;
color: var(--app-fg-subtle);
font-size: 0.85rem;
font-style: italic;
}
/* ---------- targa europea (sempre alto contrasto, indipendente dal tema) ---------- */
.app-plate {
display: inline-flex; align-items: stretch;
background: #ffffff;
border: 1px solid #cfcfcf;
border-radius: 4px;
overflow: hidden;
box-shadow: 0 1px 2px rgba(0,0,0,0.08);
height: 26px;
}
.app-plate__band {
width: 6px;
background: #003399;
}
.app-plate__text {
padding: 0 0.55rem;
color: #111;
font-family: var(--app-font-mono);
font-weight: 800;
font-size: 0.85rem;
letter-spacing: 0.12em;
line-height: 24px;
text-transform: uppercase;
}
/* ---------- flash messages ---------- */
.app-flash-stack { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.25rem; }
.app-flash {
position: relative;
display: flex; align-items: flex-start; gap: 0.75rem;
padding: 0.85rem 3rem 0.85rem 1rem;
border-radius: var(--app-radius-md);
border: 1px solid var(--app-border);
background: var(--app-surface-soft);
color: var(--app-fg);
box-shadow: var(--app-shadow-sm);
font-size: 0.85rem;
}
.app-flash__icon { margin-top: 0.15rem; font-size: 0.95rem; }
.app-flash__message { flex: 1; word-break: break-word; }
.app-flash__list { flex: 1; margin: 0; padding-left: 1.1rem; list-style: disc; }
.app-flash__list li { margin: 0.1rem 0; }
.app-flash__close {
position: absolute; top: 0.4rem; right: 0.4rem;
width: 28px; height: 28px;
display: flex; align-items: center; justify-content: center;
border-radius: var(--app-radius-sm);
background: transparent; border: 0; cursor: pointer;
color: var(--app-fg-muted);
transition: background var(--app-transition), color var(--app-transition);
}
.app-flash__close:hover { background: var(--app-surface-hover); color: var(--app-fg); }
.app-flash--success { background: var(--app-success-soft); border-color: transparent; color: var(--app-success); }
.app-flash--warning { background: var(--app-warning-soft); border-color: transparent; color: var(--app-warning); }
.app-flash--info { background: var(--app-info-soft); border-color: transparent; color: var(--app-info); }
.app-flash--danger { background: var(--app-danger-soft); border-color: transparent; color: var(--app-danger); }
/* ---------- tab strip (Impostazioni, Profilo) ---------- */
.app-tabs {
display: flex; gap: 0.25rem;
border-bottom: 1px solid var(--app-border);
overflow-x: auto;
margin-bottom: 1.25rem;
}
.app-tab {
padding: 0.65rem 1.1rem;
font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
color: var(--app-fg-muted);
border-bottom: 2px solid transparent;
transition: color var(--app-transition), border-color var(--app-transition);
white-space: nowrap;
text-decoration: none;
display: inline-flex; align-items: center; gap: 0.45rem;
}
.app-tab:hover { color: var(--app-fg); }
.app-tab.is-active{ color: var(--app-accent); border-bottom-color: var(--app-accent); }
/* ---------- theme picker (Settings & Profile) ---------- */
.theme-picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.theme-picker__item input { position: absolute; opacity: 0; pointer-events: none; }
.theme-picker__card {
display: block; cursor: pointer;
padding: 1rem;
border-radius: var(--app-radius-lg);
border: 2px solid var(--app-border);
background: var(--app-surface);
transition: all var(--app-transition);
}
.theme-picker__card:hover { border-color: var(--app-border-strong); box-shadow: var(--app-shadow-sm); }
.theme-picker__item input:checked + .theme-picker__card {
border-color: var(--app-accent);
box-shadow: 0 0 0 4px var(--app-accent-soft);
}
.theme-picker__preview { height: 80px; border-radius: var(--app-radius-md); margin-bottom: 0.75rem; overflow: hidden; position: relative; }
.theme-picker__preview--windows11 { background: linear-gradient(135deg, #f3f3f3 0%, #ffffff 60%); border: 1px solid #e6e6e6; }
.theme-picker__preview--windows11::after { content: ''; position: absolute; left: 8px; top: 8px; width: 28%; height: calc(100% - 16px); background: rgba(0, 103, 192, 0.10); border-radius: 6px; border-left: 3px solid #0067c0; }
.theme-picker__preview--ios { background: linear-gradient(160deg, #f2f2f7 0%, #ffffff 80%); border: 1px solid #d1d1d6; }
.theme-picker__preview--ios::after { content: ''; position: absolute; left: 10px; top: 10px; width: 28%; height: calc(100% - 20px); background: rgba(0, 122, 255, 0.14); border-radius: 12px; }
.theme-picker__preview--dark { background: linear-gradient(135deg, #020617 0%, #0f172a 70%); border: 1px solid #1e293b; }
.theme-picker__preview--dark::after { content: ''; position: absolute; left: 8px; top: 8px; width: 28%; height: calc(100% - 16px); background: rgba(56, 189, 248, 0.12); border-radius: 8px; border-left: 3px solid #38bdf8; }
.theme-picker__name { font-weight: 700; font-size: 0.95rem; color: var(--app-fg); }
.theme-picker__desc { font-size: 0.78rem; color: var(--app-fg-muted); margin-top: 0.2rem; }
/* =====================================================================
BRIDGE TAILWIND LEGACY (TEMPORANEO — propagazione in corso)
---------------------------------------------------------------------
Le viste storiche usano classi Tailwind hardcoded scolpite per il
vecchio dark monocromatico (bg-slate-*, text-slate-*, text-emerald-*,
bg-amber-500/10, ecc.). Finche' non vengono migrate alle classi
semantiche app-*, qui rimappiamo le occorrenze piu' frequenti sulle
variabili del tema attivo cosi' che i temi light non restino "bucati"
da blocchi neri o testi pastello illeggibili su sfondo chiaro.
Stato propagazione (rev84):
- Migrate alle classi semantiche: liste, dashboard, form articolo,
viste privacy, dettaglio scheda di lavorazione.
- Da migrare: clients/show, quotes/show, invoices/show,
vehicles/show. Rimuovere il blocco completo quando saranno
anche queste sulle classi app-*.
Scope: si applica SOLO ai temi light ([data-theme="windows11"] e
[data-theme="ios"]). Sul tema dark la palette legacy resta com'era.
Tutte le regole hanno !important quindi vincono indipendentemente
dalla specificita' del selettore.
===================================================================== */
/* ---- superfici scure -> superficie del tema ---- */
[data-theme="windows11"] .bg-slate-900,
[data-theme="ios"] .bg-slate-900,
[data-theme="windows11"] .bg-slate-950,
[data-theme="ios"] .bg-slate-950,
[data-theme="windows11"] .bg-\[\#020617\],
[data-theme="ios"] .bg-\[\#020617\] { background-color: var(--app-surface) !important; }
[data-theme="windows11"] .bg-slate-800,
[data-theme="ios"] .bg-slate-800,
[data-theme="windows11"] .bg-slate-800\/30,
[data-theme="ios"] .bg-slate-800\/30,
[data-theme="windows11"] .bg-slate-800\/50,
[data-theme="ios"] .bg-slate-800\/50,
[data-theme="windows11"] .bg-slate-900\/40,
[data-theme="ios"] .bg-slate-900\/40,
[data-theme="windows11"] .bg-slate-900\/60,
[data-theme="ios"] .bg-slate-900\/60,
[data-theme="windows11"] .bg-slate-950\/40,
[data-theme="ios"] .bg-slate-950\/40 { background-color: var(--app-surface-soft) !important; }
[data-theme="windows11"] .hover\:bg-slate-800:hover,
[data-theme="ios"] .hover\:bg-slate-800:hover,
[data-theme="windows11"] .hover\:bg-slate-800\/30:hover,
[data-theme="ios"] .hover\:bg-slate-800\/30:hover { background-color: var(--app-surface-hover) !important; }
/* ---- testo chiaro -> testo del tema ---- */
[data-theme="windows11"] .text-white,
[data-theme="ios"] .text-white,
[data-theme="windows11"] .text-slate-100,
[data-theme="ios"] .text-slate-100,
[data-theme="windows11"] .text-slate-200,
[data-theme="ios"] .text-slate-200 { color: var(--app-fg) !important; }
[data-theme="windows11"] .text-slate-300,
[data-theme="ios"] .text-slate-300,
[data-theme="windows11"] .text-slate-400,
[data-theme="ios"] .text-slate-400 { color: var(--app-fg-muted) !important; }
[data-theme="windows11"] .text-slate-500,
[data-theme="ios"] .text-slate-500,
[data-theme="windows11"] .text-slate-600,
[data-theme="ios"] .text-slate-600,
[data-theme="windows11"] .text-slate-700,
[data-theme="ios"] .text-slate-700 { color: var(--app-fg-subtle) !important; }
/* ---- bordi e divisori scuri ---- */
[data-theme="windows11"] .border-slate-700,
[data-theme="ios"] .border-slate-700,
[data-theme="windows11"] .border-slate-800,
[data-theme="ios"] .border-slate-800,
[data-theme="windows11"] .border-slate-900,
[data-theme="ios"] .border-slate-900,
[data-theme="windows11"] .divide-slate-800 > * + *,
[data-theme="ios"] .divide-slate-800 > * + *,
[data-theme="windows11"] .divide-slate-800\/50 > * + *,
[data-theme="ios"] .divide-slate-800\/50 > * + * { border-color: var(--app-border) !important; }
/* ---- accenti sky -> accent del tema ---- */
[data-theme="windows11"] .text-sky-300,
[data-theme="ios"] .text-sky-300,
[data-theme="windows11"] .text-sky-400,
[data-theme="ios"] .text-sky-400,
[data-theme="windows11"] .text-sky-500,
[data-theme="ios"] .text-sky-500 { color: var(--app-accent) !important; }
[data-theme="windows11"] .bg-sky-500,
[data-theme="ios"] .bg-sky-500,
[data-theme="windows11"] .bg-sky-600,
[data-theme="ios"] .bg-sky-600,
[data-theme="windows11"] .hover\:bg-sky-500:hover,
[data-theme="ios"] .hover\:bg-sky-500:hover,
[data-theme="windows11"] .hover\:bg-sky-600:hover,
[data-theme="ios"] .hover\:bg-sky-600:hover,
[data-theme="windows11"] .hover\:bg-sky-400:hover,
[data-theme="ios"] .hover\:bg-sky-400:hover { background-color: var(--app-accent) !important; color: var(--app-accent-fg) !important; }
[data-theme="windows11"] .bg-sky-500\/5,
[data-theme="ios"] .bg-sky-500\/5,
[data-theme="windows11"] .bg-sky-500\/10,
[data-theme="ios"] .bg-sky-500\/10,
[data-theme="windows11"] .bg-sky-500\/15,
[data-theme="ios"] .bg-sky-500\/15,
[data-theme="windows11"] .bg-sky-500\/20,
[data-theme="ios"] .bg-sky-500\/20,
[data-theme="windows11"] .bg-sky-600\/10,
[data-theme="ios"] .bg-sky-600\/10 { background-color: var(--app-accent-soft) !important; color: var(--app-accent) !important; }
[data-theme="windows11"] .border-sky-500\/20,
[data-theme="ios"] .border-sky-500\/20,
[data-theme="windows11"] .border-sky-500\/30,
[data-theme="ios"] .border-sky-500\/30,
[data-theme="windows11"] .border-sky-500\/40,
[data-theme="ios"] .border-sky-500\/40,
[data-theme="windows11"] .border-sky-600\/20,
[data-theme="ios"] .border-sky-600\/20,
[data-theme="windows11"] .focus\:border-sky-500:focus,
[data-theme="ios"] .focus\:border-sky-500:focus { border-color: var(--app-accent) !important; }
[data-theme="windows11"] .shadow-sky-500\/20,
[data-theme="ios"] .shadow-sky-500\/20 { box-shadow: 0 4px 12px var(--app-accent-soft) !important; }
/* ---- emerald (successo, mileage, badge privato) -> success del tema ---- */
[data-theme="windows11"] .text-emerald-300,
[data-theme="ios"] .text-emerald-300,
[data-theme="windows11"] .text-emerald-400,
[data-theme="ios"] .text-emerald-400,
[data-theme="windows11"] .text-emerald-500,
[data-theme="ios"] .text-emerald-500 { color: var(--app-success) !important; }
[data-theme="windows11"] .bg-emerald-500\/10,
[data-theme="ios"] .bg-emerald-500\/10,
[data-theme="windows11"] .bg-emerald-500\/15,
[data-theme="ios"] .bg-emerald-500\/15,
[data-theme="windows11"] .bg-emerald-500\/20,
[data-theme="ios"] .bg-emerald-500\/20 { background-color: var(--app-success-soft) !important; color: var(--app-success) !important; }
[data-theme="windows11"] .bg-emerald-500,
[data-theme="ios"] .bg-emerald-500,
[data-theme="windows11"] .bg-emerald-600,
[data-theme="ios"] .bg-emerald-600,
[data-theme="windows11"] .hover\:bg-emerald-600:hover,
[data-theme="ios"] .hover\:bg-emerald-600:hover { background-color: var(--app-success) !important; color: #fff !important; }
[data-theme="windows11"] .border-emerald-500\/30,
[data-theme="ios"] .border-emerald-500\/30,
[data-theme="windows11"] .border-emerald-500\/40,
[data-theme="ios"] .border-emerald-500\/40,
[data-theme="windows11"] .border-l-emerald-500,
[data-theme="ios"] .border-l-emerald-500 { border-color: var(--app-success) !important; }
[data-theme="windows11"] .peer-checked\:bg-emerald-500:checked,
[data-theme="ios"] .peer-checked\:bg-emerald-500:checked,
[data-theme="windows11"] .peer:checked ~ .peer-checked\:bg-emerald-500,
[data-theme="ios"] .peer:checked ~ .peer-checked\:bg-emerald-500 { background-color: var(--app-success) !important; }
/* ---- amber (warning, sport, edit hover) -> warning del tema ---- */
[data-theme="windows11"] .text-amber-300,
[data-theme="ios"] .text-amber-300,
[data-theme="windows11"] .text-amber-400,
[data-theme="ios"] .text-amber-400,
[data-theme="windows11"] .text-amber-500,
[data-theme="ios"] .text-amber-500 { color: var(--app-warning) !important; }
[data-theme="windows11"] .bg-amber-500\/10,
[data-theme="ios"] .bg-amber-500\/10,
[data-theme="windows11"] .bg-amber-500\/15,
[data-theme="ios"] .bg-amber-500\/15,
[data-theme="windows11"] .bg-amber-500\/20,
[data-theme="ios"] .bg-amber-500\/20 { background-color: var(--app-warning-soft) !important; color: var(--app-warning) !important; }
[data-theme="windows11"] .bg-amber-500,
[data-theme="ios"] .bg-amber-500,
[data-theme="windows11"] .bg-amber-600,
[data-theme="ios"] .bg-amber-600,
[data-theme="windows11"] .hover\:bg-amber-600:hover,
[data-theme="ios"] .hover\:bg-amber-600:hover { background-color: var(--app-warning) !important; color: #fff !important; }
[data-theme="windows11"] .border-amber-500\/30,
[data-theme="ios"] .border-amber-500\/30,
[data-theme="windows11"] .border-amber-500\/40,
[data-theme="ios"] .border-amber-500\/40 { border-color: var(--app-warning) !important; }
/* ---- rose (danger, errori, rimuovi) -> danger del tema ---- */
[data-theme="windows11"] .text-rose-300,
[data-theme="ios"] .text-rose-300,
[data-theme="windows11"] .text-rose-400,
[data-theme="ios"] .text-rose-400,
[data-theme="windows11"] .text-rose-500,
[data-theme="ios"] .text-rose-500,
[data-theme="windows11"] .hover\:text-rose-400:hover,
[data-theme="ios"] .hover\:text-rose-400:hover { color: var(--app-danger) !important; }
[data-theme="windows11"] .bg-rose-500\/10,
[data-theme="ios"] .bg-rose-500\/10,
[data-theme="windows11"] .bg-rose-500\/15,
[data-theme="ios"] .bg-rose-500\/15,
[data-theme="windows11"] .bg-rose-500\/20,
[data-theme="ios"] .bg-rose-500\/20 { background-color: var(--app-danger-soft) !important; color: var(--app-danger) !important; }
[data-theme="windows11"] .bg-rose-500,
[data-theme="ios"] .bg-rose-500,
[data-theme="windows11"] .bg-rose-600,
[data-theme="ios"] .bg-rose-600,
[data-theme="windows11"] .hover\:bg-rose-600:hover,
[data-theme="ios"] .hover\:bg-rose-600:hover { background-color: var(--app-danger) !important; color: #fff !important; }
[data-theme="windows11"] .border-rose-500\/30,
[data-theme="ios"] .border-rose-500\/30,
[data-theme="windows11"] .border-rose-500\/40,
[data-theme="ios"] .border-rose-500\/40 { border-color: var(--app-danger) !important; }
/* ---- fuchsia/violet/indigo (preventivi, accent secondari) ---- */
[data-theme="windows11"] .text-fuchsia-400,
[data-theme="ios"] .text-fuchsia-400,
[data-theme="windows11"] .text-fuchsia-500,
[data-theme="ios"] .text-fuchsia-500,
[data-theme="windows11"] .text-violet-400,
[data-theme="ios"] .text-violet-400 { color: var(--app-accent) !important; }
[data-theme="windows11"] .bg-fuchsia-500\/10,
[data-theme="ios"] .bg-fuchsia-500\/10,
[data-theme="windows11"] .bg-fuchsia-500\/20,
[data-theme="ios"] .bg-fuchsia-500\/20,
[data-theme="windows11"] .bg-violet-500\/10,
[data-theme="ios"] .bg-violet-500\/10 { background-color: var(--app-accent-soft) !important; color: var(--app-accent) !important; }
[data-theme="windows11"] .hover\:bg-fuchsia-600:hover,
[data-theme="ios"] .hover\:bg-fuchsia-600:hover,
[data-theme="windows11"] .hover\:bg-violet-600:hover,
[data-theme="ios"] .hover\:bg-violet-600:hover,
[data-theme="windows11"] .hover\:bg-indigo-600:hover,
[data-theme="ios"] .hover\:bg-indigo-600:hover { background-color: var(--app-accent) !important; color: #fff !important; }
/* ---- gradient avatar tipico della sidebar legacy ---- */
[data-theme="windows11"] .from-sky-500.to-indigo-600,
[data-theme="ios"] .from-sky-500.to-indigo-600,
[data-theme="windows11"] .bg-gradient-to-br.from-sky-500,
[data-theme="ios"] .bg-gradient-to-br.from-sky-500 { background: var(--app-accent) !important; }
/* ---- hover che rendeva tutto bianco nel vecchio dark ---- */
[data-theme="windows11"] .hover\:text-white:hover,
[data-theme="ios"] .hover\:text-white:hover { color: var(--app-fg) !important; }
/* ---- placeholder testo molto chiaro su sfondo chiaro ---- */
[data-theme="windows11"] .placeholder\:text-slate-600::placeholder,
[data-theme="ios"] .placeholder\:text-slate-600::placeholder,
[data-theme="windows11"] .placeholder\:text-slate-700::placeholder,
[data-theme="ios"] .placeholder\:text-slate-700::placeholder { color: var(--app-fg-subtle) !important; }
/* ---- riga accentata: border-l-sky-500 ---- */
[data-theme="windows11"] .border-l-sky-500,
[data-theme="ios"] .border-l-sky-500 { border-color: var(--app-accent) !important; }
/* ---- bordi ambient piu' delicati ---- */
[data-theme="windows11"] .border-slate-300,
[data-theme="ios"] .border-slate-300 { border-color: var(--app-border-strong) !important; }
/* ---- font-size minimi: alza text-[9px]/[10px]/[11px] a leggibili ---- */
[data-theme="windows11"] .text-\[9px\],
[data-theme="ios"] .text-\[9px\],
[data-theme="windows11"] .text-\[10px\],
[data-theme="ios"] .text-\[10px\],
[data-theme="windows11"] .text-\[11px\],
[data-theme="ios"] .text-\[11px\] { font-size: 0.72rem !important; }
/* =====================================================================
REV102 — SAFETY NET GLOBALE (layout audit 44 viste)
=====================================================================
Tutto il blocco che segue e' stato aggiunto in rev102 dopo un audit
approfondito di tutte le viste Blade del progetto. Sono emersi sei
problemi ricorrenti, indipendenti dal tema attivo, che rendevano il
layout disordinato e in particolare:
- testo bianco su sfondi chiari (windows11/ios) -> illeggibile
- input/textarea senza classe `app-input` con sfondo scuro fisso
(es. `bg-slate-950`) -> testo nero su fondo nero in light, oppure
testo bianco su fondo bianco se Tailwind non rispondeva
- dropdown Alpine `z-30` finiti sotto la topbar sticky `z-30`
- badge audit/log con classi cyan/orange non mappate dal bridge
- tema dark con `bg-white` e `text-black` che spaccavano la palette
Strategia: tutte le regole del bridge usano `!important` perche'
devono battere le utility Tailwind originali. Il normalizzatore degli
input usa `:where(...)` con specificita' 0 per non interferire con
componenti gia' migrati ad `app-input`.
===================================================================== */
/* ---------- 1. Input/textarea/select "nudi" leggibili in tutti i temi ----------
Specificita' 0 con `:where(...)`: qualunque classe Tailwind o app-*
sull'elemento sovrascrive senza ricorrere a `!important`. */
:where(input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="search"],
input[type="url"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="month"],
input[type="week"],
input[type="color"],
input:not([type]),
textarea,
select) {
background-color: var(--app-surface);
color: var(--app-fg);
border: 1px solid var(--app-border);
border-radius: var(--app-radius-sm);
}
:where(input, textarea, select)::placeholder {
color: var(--app-fg-subtle);
opacity: 1;
}
:where(input:focus, textarea:focus, select:focus) {
outline: 2px solid var(--app-accent);
outline-offset: 1px;
border-color: var(--app-accent);
}
/* ---------- 2. .text-white nei temi light: forza colore leggibile ----------
Tante viste usano `text-white` come default su sfondi scuri. Sui temi
light va neutralizzato, MA i pulsanti colorati (bg-sky-500.text-white,
bg-emerald-500.text-white, ecc.) devono mantenere il bianco. La
specificita' di `[data-theme] .bg-X.text-white` (0,2,1) batte
`[data-theme] .text-white` (0,1,1) e protegge i bottoni. */
[data-theme="windows11"] .text-white,
[data-theme="ios"] .text-white { color: var(--app-fg) !important; }
[data-theme="windows11"] .bg-sky-500.text-white,
[data-theme="ios"] .bg-sky-500.text-white,
[data-theme="windows11"] .bg-sky-600.text-white,
[data-theme="ios"] .bg-sky-600.text-white,
[data-theme="windows11"] .bg-emerald-500.text-white,
[data-theme="ios"] .bg-emerald-500.text-white,
[data-theme="windows11"] .bg-emerald-600.text-white,
[data-theme="ios"] .bg-emerald-600.text-white,
[data-theme="windows11"] .bg-amber-500.text-white,
[data-theme="ios"] .bg-amber-500.text-white,
[data-theme="windows11"] .bg-amber-600.text-white,
[data-theme="ios"] .bg-amber-600.text-white,
[data-theme="windows11"] .bg-rose-500.text-white,
[data-theme="ios"] .bg-rose-500.text-white,
[data-theme="windows11"] .bg-rose-600.text-white,
[data-theme="ios"] .bg-rose-600.text-white,
[data-theme="windows11"] .bg-fuchsia-500.text-white,
[data-theme="ios"] .bg-fuchsia-500.text-white,
[data-theme="windows11"] .bg-fuchsia-600.text-white,
[data-theme="ios"] .bg-fuchsia-600.text-white,
[data-theme="windows11"] .bg-violet-500.text-white,
[data-theme="ios"] .bg-violet-500.text-white,
[data-theme="windows11"] .bg-violet-600.text-white,
[data-theme="ios"] .bg-violet-600.text-white,
[data-theme="windows11"] .bg-indigo-500.text-white,
[data-theme="ios"] .bg-indigo-500.text-white,
[data-theme="windows11"] .bg-indigo-600.text-white,
[data-theme="ios"] .bg-indigo-600.text-white,
[data-theme="windows11"] .bg-blue-500.text-white,
[data-theme="ios"] .bg-blue-500.text-white,
[data-theme="windows11"] .bg-blue-600.text-white,
[data-theme="ios"] .bg-blue-600.text-white,
[data-theme="windows11"] .bg-cyan-500.text-white,
[data-theme="ios"] .bg-cyan-500.text-white,
[data-theme="windows11"] .bg-cyan-600.text-white,
[data-theme="ios"] .bg-cyan-600.text-white,
[data-theme="windows11"] .bg-orange-500.text-white,
[data-theme="ios"] .bg-orange-500.text-white,
[data-theme="windows11"] .bg-orange-600.text-white,
[data-theme="ios"] .bg-orange-600.text-white { color: #ffffff !important; }
/* ---------- 3. Bridge esteso: cyan / orange / blue ----------
Usate da viste audit, log errori e alcune dashboard. Mappate sui
colori semantici esistenti (info / warning / accent). */
/* cyan -> info */
[data-theme="windows11"] .text-cyan-300,
[data-theme="ios"] .text-cyan-300,
[data-theme="windows11"] .text-cyan-400,
[data-theme="ios"] .text-cyan-400,
[data-theme="windows11"] .text-cyan-500,
[data-theme="ios"] .text-cyan-500 { color: var(--app-info) !important; }
[data-theme="windows11"] .bg-cyan-500\/10,
[data-theme="ios"] .bg-cyan-500\/10,
[data-theme="windows11"] .bg-cyan-500\/15,
[data-theme="ios"] .bg-cyan-500\/15,
[data-theme="windows11"] .bg-cyan-500\/20,
[data-theme="ios"] .bg-cyan-500\/20 { background-color: var(--app-info-soft) !important; color: var(--app-info) !important; }
[data-theme="windows11"] .bg-cyan-500,
[data-theme="ios"] .bg-cyan-500,
[data-theme="windows11"] .bg-cyan-600,
[data-theme="ios"] .bg-cyan-600,
[data-theme="windows11"] .hover\:bg-cyan-600:hover,
[data-theme="ios"] .hover\:bg-cyan-600:hover { background-color: var(--app-info) !important; color: #fff !important; }
[data-theme="windows11"] .border-cyan-500\/30,
[data-theme="ios"] .border-cyan-500\/30 { border-color: var(--app-info) !important; }
/* orange -> warning */
[data-theme="windows11"] .text-orange-300,
[data-theme="ios"] .text-orange-300,
[data-theme="windows11"] .text-orange-400,
[data-theme="ios"] .text-orange-400,
[data-theme="windows11"] .text-orange-500,
[data-theme="ios"] .text-orange-500 { color: var(--app-warning) !important; }
[data-theme="windows11"] .bg-orange-500\/10,
[data-theme="ios"] .bg-orange-500\/10,
[data-theme="windows11"] .bg-orange-500\/15,
[data-theme="ios"] .bg-orange-500\/15,
[data-theme="windows11"] .bg-orange-500\/20,
[data-theme="ios"] .bg-orange-500\/20 { background-color: var(--app-warning-soft) !important; color: var(--app-warning) !important; }
[data-theme="windows11"] .bg-orange-500,
[data-theme="ios"] .bg-orange-500,
[data-theme="windows11"] .bg-orange-600,
[data-theme="ios"] .bg-orange-600,
[data-theme="windows11"] .hover\:bg-orange-600:hover,
[data-theme="ios"] .hover\:bg-orange-600:hover { background-color: var(--app-warning) !important; color: #fff !important; }
[data-theme="windows11"] .border-orange-500\/30,
[data-theme="ios"] .border-orange-500\/30 { border-color: var(--app-warning) !important; }
/* blue -> accent (alias di sky in molte viste recenti) */
[data-theme="windows11"] .text-blue-300,
[data-theme="ios"] .text-blue-300,
[data-theme="windows11"] .text-blue-400,
[data-theme="ios"] .text-blue-400,
[data-theme="windows11"] .text-blue-500,
[data-theme="ios"] .text-blue-500,
[data-theme="windows11"] .text-blue-600,
[data-theme="ios"] .text-blue-600 { color: var(--app-accent) !important; }
[data-theme="windows11"] .bg-blue-500\/10,
[data-theme="ios"] .bg-blue-500\/10,
[data-theme="windows11"] .bg-blue-500\/20,
[data-theme="ios"] .bg-blue-500\/20 { background-color: var(--app-accent-soft) !important; color: var(--app-accent) !important; }
[data-theme="windows11"] .bg-blue-500,
[data-theme="ios"] .bg-blue-500,
[data-theme="windows11"] .bg-blue-600,
[data-theme="ios"] .bg-blue-600,
[data-theme="windows11"] .hover\:bg-blue-600:hover,
[data-theme="ios"] .hover\:bg-blue-600:hover,
[data-theme="windows11"] .hover\:bg-blue-700:hover,
[data-theme="ios"] .hover\:bg-blue-700:hover { background-color: var(--app-accent) !important; color: #fff !important; }
[data-theme="windows11"] .border-blue-500\/30,
[data-theme="ios"] .border-blue-500\/30,
[data-theme="windows11"] .border-blue-500\/40,
[data-theme="ios"] .border-blue-500\/40 { border-color: var(--app-accent) !important; }
/* ---------- 4. Bridge gray/zinc/neutral/stone ----------
Stesso ruolo di slate ma in palette diverse, usate sporadicamente
in audit/log. Le mappiamo sui foreground/border standard. */
[data-theme="windows11"] .text-gray-300,
[data-theme="ios"] .text-gray-300,
[data-theme="windows11"] .text-zinc-300,
[data-theme="ios"] .text-zinc-300,
[data-theme="windows11"] .text-neutral-300,
[data-theme="ios"] .text-neutral-300,
[data-theme="windows11"] .text-stone-300 { color: var(--app-fg-subtle) !important; }
[data-theme="windows11"] .text-gray-400,
[data-theme="ios"] .text-gray-400,
[data-theme="windows11"] .text-zinc-400,
[data-theme="ios"] .text-zinc-400,
[data-theme="windows11"] .text-neutral-400 { color: var(--app-fg-muted) !important; }
[data-theme="windows11"] .text-gray-500,
[data-theme="ios"] .text-gray-500,
[data-theme="windows11"] .text-zinc-500,
[data-theme="ios"] .text-zinc-500 { color: var(--app-fg-muted) !important; }
[data-theme="windows11"] .bg-gray-800,
[data-theme="ios"] .bg-gray-800,
[data-theme="windows11"] .bg-gray-900,
[data-theme="ios"] .bg-gray-900,
[data-theme="windows11"] .bg-zinc-800,
[data-theme="ios"] .bg-zinc-800,
[data-theme="windows11"] .bg-zinc-900,
[data-theme="ios"] .bg-zinc-900,
[data-theme="windows11"] .bg-neutral-900,
[data-theme="ios"] .bg-neutral-900 { background-color: var(--app-bg-elevated) !important; color: var(--app-fg) !important; }
/* ---------- 5. Tema dark: bg-white e text-black sotto controllo ----------
Alcune viste hanno `bg-white` o `text-black` literal: in dark
restano stridenti (popover bianco abbagliante o testo nero su nero). */
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .hover\:bg-white:hover { background-color: var(--app-surface) !important; color: var(--app-fg) !important; }
html[data-theme="dark"] .text-black,
html[data-theme="dark"] .text-slate-900,
html[data-theme="dark"] .text-gray-900,
html[data-theme="dark"] .text-zinc-900,
html[data-theme="dark"] .text-neutral-900 { color: var(--app-fg) !important; }
/* ---------- 6. z-index dei dropdown sopra la topbar sticky ----------
La topbar e' sticky `z-index: 30`. Tante viste hanno `z-30` sui
menu Alpine e finiscono visivamente sotto la topbar. Promuoviamo
tutti i candidati dropdown a z-index 50. La topbar resta a 30. */
.z-30:where([x-show], [\@click\.away], [x-cloak]),
.z-40:where([x-show], [\@click\.away], [x-cloak]),
.absolute.z-30,
.absolute.z-40,
[x-show].absolute,
[x-show].fixed { z-index: 50; }
/* Modali esistenti gia' a z-[100] non vanno toccati: la regola sopra
si applica solo a z-30 / z-40 / posizionati assoluti con x-show. */
/* ---------- 7. Allineamento verticale celle tabella ----------
In tante viste indici (clienti, articoli, fatture) la riga di
azioni a destra (icone) si disallinea rispetto al testo principale
se il browser applica `vertical-align: baseline` a celle con altezza
diversa. Forziamo `middle` per tutte le `| `/` | `. */
table.app-table td,
table.app-table th { vertical-align: middle; }
/* ---------- 8. Spacing tra utility flex e grid in card pesanti ----------
Su show.blade.php / _form.blade.php il mix di `space-y-2`, `gap-3`,
`mb-4` produceva accavallamenti su viewport stretti. Garantiamo
un minimo di gap verticale tra figli diretti dei container card. */
.app-card > * + * { margin-top: 0.75rem; }
.app-card.app-card--flush > * + * { margin-top: 0; }
/* ---------- 9. Anti-overflow su contenitori principali ----------
Su mobile/iframe stretti alcune tabelle larghe sforavano. Forziamo
overflow-x sul main e sulle card senza alterare il layout desktop.
Hotfix #10: `.app-main` usa `clip` (non `auto`): clippa l'overflow
orizzontale senza creare uno scrolling container, quindi
`position: sticky` della topbar continua ad agganciarsi al body
come dovrebbe. Le tabelle larghe restano protette da
`.app-card { overflow-x: auto }` qui sotto. */
.app-main { overflow-x: clip; }
.app-card { overflow-x: auto; }
/* ---------- 10. Focus visibile coerente su tutti i temi ----------
Pulsanti app-btn e link app-nav-link avevano focus state legato a
ring Tailwind che spariva senza CDN. Ricostruiamo focus-visible. */
.app-btn:focus-visible,
.app-nav-link:focus-visible,
.app-nav-sublink:focus-visible,
.app-topbar__user:focus-visible,
.app-topbar__logout:focus-visible {
outline: 2px solid var(--app-accent);
outline-offset: 2px;
}
/* =====================================================================
rev105 — DIFFERENZIAZIONE VISIVA windows11 vs ios
I due temi light condividevano surface bianco e accent blu, quindi
risultavano quasi indistinguibili a colpo d'occhio. Qui rimoduliamo
la FORMA dei componenti (radius, ombre, bordi, stile bottoni, stile
input) per dare a ciascuno la propria design language.
Filosofia:
- windows11 (Fluent Design): geometria netta, bordo 1px sempre
presente, radius piccoli (4-8px), ombre piatte e contenute,
superfici opache. Effetto "pannello CAD".
- ios (Human Interface): geometria morbida, raramente bordi,
radius grandi (12-20px), ombre soffici e diffuse, superfici
tinted, pulsanti pill. Effetto "carta arrotondata".
Tema dark non toccato: usa la palette/forma legacy di rev82+.
Gli override sono mirati ai componenti app-* e ai bottoni .btn,
non agganciano variabili: nessuna regressione sui calcoli temi.
===================================================================== */
/* ---------- 1. WINDOWS 11 — Fluent Design (geometria netta) ---------- */
html[data-theme="windows11"] .app-card,
html[data-theme="windows11"] .app-toolbar {
border: 1px solid var(--app-border);
border-radius: 8px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
html[data-theme="windows11"] .btn,
html[data-theme="windows11"] .btn-icon {
border-radius: 6px;
border: 1px solid var(--app-border-strong);
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
}
html[data-theme="windows11"] .btn-primary,
html[data-theme="windows11"] .btn-danger,
html[data-theme="windows11"] .btn-success,
html[data-theme="windows11"] .btn-warning {
border-radius: 6px;
border-color: transparent;
}
html[data-theme="windows11"] .app-input,
html[data-theme="windows11"] .app-select,
html[data-theme="windows11"] .app-textarea {
border-radius: 6px;
border: 1px solid var(--app-border-strong);
background: var(--app-surface);
box-shadow: inset 0 -1px 0 var(--app-border-strong);
}
html[data-theme="windows11"] .app-badge {
border-radius: 4px;
text-transform: none;
letter-spacing: 0;
font-weight: 600;
padding: 0.15rem 0.5rem;
}
html[data-theme="windows11"] .app-tab.is-active {
border-bottom-width: 3px;
}
html[data-theme="windows11"] .theme-picker__card {
border-radius: 8px;
}
/* Tailwind bridge per windows11: porta tutti i .rounded-* a geometria
stretta cosi' anche le viste con utility hardcoded seguono il tema. */
html[data-theme="windows11"] .rounded,
html[data-theme="windows11"] .rounded-md { border-radius: 6px !important; }
html[data-theme="windows11"] .rounded-lg { border-radius: 8px !important; }
html[data-theme="windows11"] .rounded-xl { border-radius: 10px !important; }
html[data-theme="windows11"] .rounded-2xl { border-radius: 12px !important; }
html[data-theme="windows11"] .rounded-3xl { border-radius: 14px !important; }
/* ---------- 2. iOS — Human Interface (geometria morbida) ---------- */
html[data-theme="ios"] .app-card {
border: none;
border-radius: 18px;
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.04),
0 8px 24px rgba(0, 0, 0, 0.06);
}
html[data-theme="ios"] .app-toolbar {
border: none;
border-radius: 16px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
html[data-theme="ios"] .btn,
html[data-theme="ios"] .btn-icon {
border-radius: 9999px;
border-color: transparent;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
font-weight: 600;
}
html[data-theme="ios"] .btn:hover {
transform: translateY(-1px);
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.10);
}
html[data-theme="ios"] .btn:active {
transform: translateY(0);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
html[data-theme="ios"] .btn-square {
border-radius: 12px;
}
html[data-theme="ios"] .app-input,
html[data-theme="ios"] .app-select,
html[data-theme="ios"] .app-textarea {
border-radius: 12px;
background: var(--app-surface-soft);
border-color: transparent;
box-shadow: none;
}
html[data-theme="ios"] .app-input:focus,
html[data-theme="ios"] .app-select:focus,
html[data-theme="ios"] .app-textarea:focus {
background: var(--app-surface);
border-color: var(--app-accent);
}
html[data-theme="ios"] .app-badge {
border-radius: 9999px;
border-color: transparent;
background: var(--app-surface-active);
text-transform: none;
letter-spacing: 0;
font-weight: 600;
padding: 0.2rem 0.7rem;
}
html[data-theme="ios"] .app-table thead th {
text-transform: none;
letter-spacing: 0;
font-weight: 600;
font-size: 0.78rem;
}
html[data-theme="ios"] .app-tab.is-active {
border-bottom-width: 2px;
}
html[data-theme="ios"] .theme-picker__card {
border-radius: 18px;
}
html[data-theme="ios"] .app-flash {
border-radius: 14px;
border-color: transparent;
}
html[data-theme="ios"] .app-nav-link,
html[data-theme="ios"] .app-nav-sublink {
margin: 0 0.6rem;
border-right: none;
border-radius: 10px;
}
html[data-theme="ios"] .app-nav-link.is-active,
html[data-theme="ios"] .app-nav-sublink.is-active {
border-right: none;
}
html[data-theme="ios"] .app-nav-sublink {
padding-left: 2.7rem;
}
/* Tailwind bridge per ios: porta tutti i .rounded-* a geometria
morbida cosi' anche le viste con utility hardcoded seguono il tema. */
html[data-theme="ios"] .rounded,
html[data-theme="ios"] .rounded-md { border-radius: 12px !important; }
html[data-theme="ios"] .rounded-lg { border-radius: 16px !important; }
html[data-theme="ios"] .rounded-xl { border-radius: 20px !important; }
html[data-theme="ios"] .rounded-2xl { border-radius: 24px !important; }
html[data-theme="ios"] .rounded-3xl { border-radius: 28px !important; }
/* =====================================================================
rev106 — OVERHAUL VISIVO COMPLETO PER TEMA
rev105 cambiava solo card/btn/input. Su feedback utente: troppo poco,
i due temi light restavano simili. rev106 riscrive ogni componente
visibile in modo che le tre design language siano riconoscibili a
colpo d'occhio:
- WINDOWS 11 (Fluent):
* sidebar con barra accent verticale sinistra, voci squadrate
* topbar opaca bianca con hairline border-bottom
* tabelle con gridline 1px su tutti i bordi (tipo Excel)
* tab a sottolineatura piena
* badge piccoli rettangolari, font 600 normal-case
* input con linea di enfasi inferiore stile "campo CAD"
* pulsanti rettangolari bordo netto, hover crisp senza transform
* scrollbar grigia sottile
* selezione blu Fluent
* focus ring rettangolare blu 2px
* transizioni veloci 120ms
- iOS (Human Interface):
* sidebar con voci pillola flottanti, indicatore punto a sinistra
* topbar traslucida con backdrop blur
* tabelle senza gridlines, righe alterne tinted, hover accent soft
* tab segmented control (pill in pill)
* badge a pillola tinted
* input pill su surface-soft
* pulsanti pill con transform Y al hover, ombra elastica
* scrollbar quasi invisibile, appare al hover
* selezione accent tinted
* focus ring arrotondato 4px morbido
* transizioni elastiche 280ms cubic-bezier
- DARK (Neon high-contrast):
* sidebar con bagliore cyan sull'attivo, indicatore neon
* topbar con border-bottom accent gradient sottile
* tabelle con hover accent glow, separatori scuri
* tab a sottolineatura neon
* badge brillanti con glow soft
* input con focus glow cyan
* pulsanti con glow cyan al hover
* scrollbar dark con thumb cyan
* selezione cyan
* focus ring cyan glow
* transizioni nette 160ms
Tutti i selettori sono `html[data-theme="..."]` per battere :root.
Nessuna variabile rimossa, solo override sui componenti: i temi
continuano a basarsi sulle palette gia' definite sopra.
===================================================================== */
/* =====================================================================
1. WINDOWS 11 — FLUENT DESIGN OVERHAUL
===================================================================== */
/* Tipografia di sistema piu' marcata */
html[data-theme="windows11"] body {
font-family: 'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif;
font-feature-settings: 'ss01', 'cv01';
-webkit-font-smoothing: antialiased;
}
/* Transizioni Fluent: veloci e nette */
html[data-theme="windows11"] {
--app-transition: 120ms cubic-bezier(0.1, 0.9, 0.2, 1);
}
/* Selezione Fluent blu */
html[data-theme="windows11"] ::selection {
background: rgba(0, 103, 192, 0.30);
color: #1f1f1f;
}
/* Scrollbar Fluent: grigia sottile sempre visibile */
html[data-theme="windows11"] ::-webkit-scrollbar { width: 12px; height: 12px; }
html[data-theme="windows11"] ::-webkit-scrollbar-track { background: #f3f3f3; }
html[data-theme="windows11"] ::-webkit-scrollbar-thumb {
background: #c7c7c7;
border: 3px solid #f3f3f3;
border-radius: 8px;
}
html[data-theme="windows11"] ::-webkit-scrollbar-thumb:hover { background: #8a8a8a; }
/* Focus ring rettangolare Fluent */
html[data-theme="windows11"] *:focus-visible {
outline: 2px solid #0067c0;
outline-offset: 2px;
border-radius: 0;
}
/* Sidebar Fluent: voci squadrate, accento verticale a sinistra */
html[data-theme="windows11"] .app-sidebar {
background: #fafafa;
border-right: 1px solid #e6e6e6;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
html[data-theme="windows11"] .app-nav-link,
html[data-theme="windows11"] .app-nav-sublink {
border-right: none;
border-left: 3px solid transparent;
margin: 1px 0;
border-radius: 0;
text-transform: uppercase;
font-weight: 600;
letter-spacing: 0.04em;
}
html[data-theme="windows11"] .app-nav-link.is-active,
html[data-theme="windows11"] .app-nav-sublink.is-active {
background: rgba(0, 103, 192, 0.08);
color: #0067c0;
border-left-color: #0067c0;
border-right-color: transparent;
font-weight: 700;
}
html[data-theme="windows11"] .app-nav-link i,
html[data-theme="windows11"] .app-nav-sublink i {
opacity: 0.75;
}
html[data-theme="windows11"] .app-nav-link.is-active i,
html[data-theme="windows11"] .app-nav-sublink.is-active i {
opacity: 1;
color: #0067c0;
}
/* Topbar Fluent: bianca opaca, hairline */
html[data-theme="windows11"] .app-topbar {
background: #ffffff;
border-bottom: 1px solid #e6e6e6;
backdrop-filter: none;
-webkit-backdrop-filter: none;
box-shadow: none;
}
html[data-theme="windows11"] .app-topbar__user {
border-radius: 4px;
background: #f5f5f5;
border: 1px solid #e6e6e6;
}
html[data-theme="windows11"] .app-topbar__avatar {
border-radius: 4px;
}
/* Tabelle Fluent: gridline complete tipo Excel */
html[data-theme="windows11"] .app-table {
border: 1px solid #e6e6e6;
background: #ffffff;
}
html[data-theme="windows11"] .app-table thead th {
background: #f3f3f3;
border-right: 1px solid #e6e6e6;
border-bottom: 2px solid #cfcfcf;
text-transform: uppercase;
letter-spacing: 0.04em;
font-weight: 700;
color: #1f1f1f;
}
html[data-theme="windows11"] .app-table thead th:last-child { border-right: none; }
html[data-theme="windows11"] .app-table tbody td {
border-right: 1px solid #ededed;
border-bottom: 1px solid #ededed;
}
html[data-theme="windows11"] .app-table tbody td:last-child { border-right: none; }
html[data-theme="windows11"] .app-table tbody tr:hover td { background: #f5f9fd; }
/* Tab Fluent: sottolineatura piena */
html[data-theme="windows11"] .app-tabs {
border-bottom: 1px solid #e6e6e6;
gap: 0;
}
html[data-theme="windows11"] .app-tab {
border-radius: 0;
border-bottom: 3px solid transparent;
text-transform: uppercase;
letter-spacing: 0.04em;
font-weight: 600;
}
html[data-theme="windows11"] .app-tab:hover { background: #f5f5f5; }
html[data-theme="windows11"] .app-tab.is-active {
color: #0067c0;
border-bottom-color: #0067c0;
background: transparent;
font-weight: 700;
}
/* Badge Fluent: rettangolari piccoli normal-case */
html[data-theme="windows11"] .app-badge {
border-radius: 3px;
text-transform: none;
letter-spacing: 0;
font-weight: 600;
padding: 0.12rem 0.45rem;
font-size: 0.72rem;
border: 1px solid currentColor;
background: transparent !important;
}
html[data-theme="windows11"] .app-badge--success { color: #0f7b0f; border-color: #0f7b0f; }
html[data-theme="windows11"] .app-badge--warning { color: #9d5d00; border-color: #9d5d00; }
html[data-theme="windows11"] .app-badge--danger { color: #c42b1c; border-color: #c42b1c; }
html[data-theme="windows11"] .app-badge--info { color: #0067c0; border-color: #0067c0; }
html[data-theme="windows11"] .app-badge--accent { color: #0067c0; border-color: #0067c0; }
/* Card Fluent: bordo netto, ombra minima */
html[data-theme="windows11"] .app-card {
border: 1px solid #e6e6e6;
border-radius: 4px;
box-shadow: none;
}
html[data-theme="windows11"] .app-card__header {
background: #fafafa;
border-bottom: 1px solid #e6e6e6;
}
/* Toolbar Fluent: rettangolare */
html[data-theme="windows11"] .app-toolbar {
border: 1px solid #e6e6e6;
border-radius: 4px;
box-shadow: none;
background: #fafafa;
}
/* Input Fluent: campo "CAD" con bottom emphasis */
html[data-theme="windows11"] .app-input,
html[data-theme="windows11"] .app-select,
html[data-theme="windows11"] .app-textarea {
border-radius: 4px;
border: 1px solid #cfcfcf;
background: #ffffff;
box-shadow: inset 0 -1px 0 #8a8a8a;
}
html[data-theme="windows11"] .app-input:focus,
html[data-theme="windows11"] .app-select:focus,
html[data-theme="windows11"] .app-textarea:focus {
border-color: #cfcfcf;
box-shadow: inset 0 -2px 0 #0067c0;
outline: none;
}
/* Pulsanti Fluent: rettangolari, hover senza transform */
html[data-theme="windows11"] .btn,
html[data-theme="windows11"] .btn-icon {
border-radius: 4px;
border: 1px solid #cfcfcf;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
font-weight: 600;
transition: background 100ms ease, border-color 100ms ease;
}
html[data-theme="windows11"] .btn:hover {
background: #f5f5f5;
border-color: #8a8a8a;
transform: none;
}
html[data-theme="windows11"] .btn-primary {
background: #0067c0;
border-color: #005ba1;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.10);
}
html[data-theme="windows11"] .btn-primary:hover { background: #0078d4; border-color: #0067c0; }
html[data-theme="windows11"] .btn-square,
html[data-theme="windows11"] .btn-icon { border-radius: 4px; }
/* Toggle Fluent: rettangolare arrotondato */
html[data-theme="windows11"] .app-toggle__slider { border-radius: 4px; }
html[data-theme="windows11"] .app-toggle__slider::before { border-radius: 2px; }
/* Page header Fluent */
html[data-theme="windows11"] .app-page-header__title {
font-weight: 600;
letter-spacing: -0.01em;
}
/* Plate Fluent (immutata): targa europea */
/* nessun override: la targa resta uguale per riconoscibilita' */
/* Theme picker Fluent */
html[data-theme="windows11"] .theme-picker__card { border-radius: 4px; }
/* =====================================================================
2. iOS — HUMAN INTERFACE OVERHAUL
===================================================================== */
/* Tipografia SF Pro */
html[data-theme="ios"] body {
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', system-ui, sans-serif;
-webkit-font-smoothing: antialiased;
letter-spacing: -0.005em;
}
/* Transizioni iOS: elastiche */
html[data-theme="ios"] {
--app-transition: 280ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Selezione iOS accent tinted */
html[data-theme="ios"] ::selection {
background: rgba(0, 122, 255, 0.25);
color: #000000;
}
/* Scrollbar iOS: invisibile finche' non hover */
html[data-theme="ios"] ::-webkit-scrollbar { width: 8px; height: 8px; }
html[data-theme="ios"] ::-webkit-scrollbar-track { background: transparent; }
html[data-theme="ios"] ::-webkit-scrollbar-thumb {
background: transparent;
border-radius: 9999px;
transition: background 200ms ease;
}
html[data-theme="ios"]:hover ::-webkit-scrollbar-thumb { background: rgba(60, 60, 67, 0.30); }
html[data-theme="ios"] ::-webkit-scrollbar-thumb:hover { background: rgba(60, 60, 67, 0.55); }
/* Focus ring iOS morbido arrotondato */
html[data-theme="ios"] *:focus-visible {
outline: 4px solid rgba(0, 122, 255, 0.30);
outline-offset: 2px;
border-radius: 8px;
}
/* Sidebar iOS: voci pillola flottanti, niente bordo destro */
html[data-theme="ios"] .app-sidebar {
background: rgba(246, 246, 248, 0.85);
border-right: 1px solid rgba(0, 0, 0, 0.05);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
}
html[data-theme="ios"] .app-nav-link,
html[data-theme="ios"] .app-nav-sublink {
margin: 2px 0.6rem;
padding: 0.65rem 0.85rem;
border-radius: 10px;
border-right: none;
border-left: none;
text-transform: none;
letter-spacing: 0;
font-weight: 500;
font-size: 0.82rem;
color: #1c1c1e;
}
html[data-theme="ios"] .app-nav-sublink {
padding-left: 2.7rem;
font-size: 0.78rem;
color: #3c3c43;
}
html[data-theme="ios"] .app-nav-link:hover,
html[data-theme="ios"] .app-nav-sublink:hover {
background: rgba(0, 0, 0, 0.04);
color: #000000;
}
html[data-theme="ios"] .app-nav-link.is-active,
html[data-theme="ios"] .app-nav-sublink.is-active {
background: rgba(0, 122, 255, 0.12);
color: #007aff;
border-right: none;
border-left: none;
font-weight: 600;
}
html[data-theme="ios"] .app-nav-link i {
color: #007aff;
opacity: 0.85;
width: 1.4rem;
}
/* Topbar iOS: traslucida con blur potente */
html[data-theme="ios"] .app-topbar {
background: rgba(255, 255, 255, 0.72);
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
}
html[data-theme="ios"] .app-topbar__user {
border-radius: 9999px;
background: rgba(0, 0, 0, 0.04);
border: none;
padding: 0.25rem 0.5rem 0.25rem 0.25rem;
}
html[data-theme="ios"] .app-topbar__avatar {
border-radius: 50%;
background: linear-gradient(135deg, #007aff 0%, #5856d6 100%);
}
/* Tabelle iOS: nessuna gridline, righe alterne */
html[data-theme="ios"] .app-table {
border: none;
}
html[data-theme="ios"] .app-table thead th {
background: transparent;
border-bottom: 1px solid rgba(60, 60, 67, 0.18);
text-transform: none;
letter-spacing: 0;
font-weight: 600;
font-size: 0.78rem;
color: #3c3c43;
border-right: none;
}
html[data-theme="ios"] .app-table tbody td {
border-right: none;
border-bottom: none;
padding: 0.85rem 1rem;
}
html[data-theme="ios"] .app-table tbody tr:nth-child(even) td { background: rgba(0, 0, 0, 0.02); }
html[data-theme="ios"] .app-table tbody tr:hover td {
background: rgba(0, 122, 255, 0.06);
}
/* Tab iOS: segmented control pill in pill */
html[data-theme="ios"] .app-tabs {
border-bottom: none;
background: rgba(0, 0, 0, 0.05);
border-radius: 12px;
padding: 4px;
gap: 2px;
display: inline-flex;
margin-bottom: 1.25rem;
}
html[data-theme="ios"] .app-tab {
border-radius: 8px;
border-bottom: none;
text-transform: none;
letter-spacing: 0;
font-weight: 600;
color: #3c3c43;
padding: 0.45rem 1rem;
font-size: 0.78rem;
}
html[data-theme="ios"] .app-tab.is-active {
background: #ffffff;
color: #007aff;
border-bottom: none;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
/* Badge iOS: pillola tinted */
html[data-theme="ios"] .app-badge {
border-radius: 9999px;
border: none;
text-transform: none;
letter-spacing: 0;
font-weight: 600;
padding: 0.22rem 0.75rem;
font-size: 0.72rem;
}
html[data-theme="ios"] .app-badge--success { background: rgba(36, 138, 61, 0.16); color: #248a3d; }
html[data-theme="ios"] .app-badge--warning { background: rgba(178, 80, 0, 0.16); color: #b25000; }
html[data-theme="ios"] .app-badge--danger { background: rgba(215, 0, 21, 0.14); color: #d70015; }
html[data-theme="ios"] .app-badge--info { background: rgba(0, 122, 255, 0.16); color: #007aff; }
html[data-theme="ios"] .app-badge--accent { background: rgba(0, 122, 255, 0.16); color: #007aff; }
/* Card iOS: morbida, doppia ombra */
html[data-theme="ios"] .app-card {
border: none;
border-radius: 18px;
box-shadow:
0 1px 3px rgba(0, 0, 0, 0.04),
0 10px 30px rgba(0, 0, 0, 0.06);
background: #ffffff;
}
html[data-theme="ios"] .app-card__header {
border-bottom: 1px solid rgba(60, 60, 67, 0.10);
background: transparent;
}
/* Toolbar iOS: nessun bordo, ombra leggera */
html[data-theme="ios"] .app-toolbar {
border: none;
border-radius: 16px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
background: #ffffff;
}
/* Input iOS: pill su surface tinted */
html[data-theme="ios"] .app-input,
html[data-theme="ios"] .app-select,
html[data-theme="ios"] .app-textarea {
border-radius: 12px;
background: rgba(118, 118, 128, 0.12);
border: 1px solid transparent;
box-shadow: none;
color: #000000;
}
html[data-theme="ios"] .app-input:focus,
html[data-theme="ios"] .app-select:focus,
html[data-theme="ios"] .app-textarea:focus {
background: #ffffff;
border-color: #007aff;
box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.20);
}
/* Pulsanti iOS: pill con bounce */
html[data-theme="ios"] .btn,
html[data-theme="ios"] .btn-icon {
border-radius: 9999px;
border: none;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
font-weight: 600;
transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1),
box-shadow 200ms ease, background 200ms ease;
}
html[data-theme="ios"] .btn:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10);
}
html[data-theme="ios"] .btn:active {
transform: translateY(0) scale(0.98);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
html[data-theme="ios"] .btn-primary {
background: #007aff;
color: #ffffff;
}
html[data-theme="ios"] .btn-primary:hover { background: #0062cc; }
html[data-theme="ios"] .btn-square { border-radius: 14px; }
html[data-theme="ios"] .btn-icon { border-radius: 50%; }
/* Toggle iOS: classica iOS switch */
html[data-theme="ios"] .app-toggle__slider {
border-radius: 9999px;
background: rgba(120, 120, 128, 0.32);
}
html[data-theme="ios"] .app-toggle__slider::before {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.20);
}
/* Page header iOS */
html[data-theme="ios"] .app-page-header__title {
font-weight: 700;
letter-spacing: -0.02em;
font-size: 1.6rem;
}
html[data-theme="ios"] .app-page-header__sub {
color: #8e8e93;
}
/* Theme picker iOS */
html[data-theme="ios"] .theme-picker__card { border-radius: 18px; }
/* Flash iOS */
html[data-theme="ios"] .app-flash {
border-radius: 14px;
border: none;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}
/* =====================================================================
3. DARK — NEON HIGH-CONTRAST OVERHAUL
===================================================================== */
/* Tipografia Urbanist con tracking leggero */
html[data-theme="dark"] body {
font-family: 'Urbanist', system-ui, -apple-system, sans-serif;
-webkit-font-smoothing: antialiased;
}
/* Transizioni dark: nette */
html[data-theme="dark"] {
--app-transition: 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* Selezione neon cyan */
html[data-theme="dark"] ::selection {
background: rgba(56, 189, 248, 0.40);
color: #ffffff;
}
/* Scrollbar dark con thumb cyan */
html[data-theme="dark"] ::-webkit-scrollbar { width: 10px; height: 10px; }
html[data-theme="dark"] ::-webkit-scrollbar-track { background: #020617; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, #1e293b 0%, #334155 100%);
border-radius: 8px;
border: 2px solid #020617;
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg, #38bdf8 0%, #0ea5e9 100%);
}
/* Focus ring cyan glow */
html[data-theme="dark"] *:focus-visible {
outline: 2px solid #38bdf8;
outline-offset: 2px;
box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.20);
border-radius: 6px;
}
/* Sidebar dark: bagliore cyan sull'attivo */
html[data-theme="dark"] .app-sidebar {
background: linear-gradient(180deg, #020617 0%, #0b1220 100%);
border-right: 1px solid #1e293b;
}
html[data-theme="dark"] .app-nav-link,
html[data-theme="dark"] .app-nav-sublink {
border-right: 3px solid transparent;
border-left: none;
margin: 1px 0;
border-radius: 0;
}
html[data-theme="dark"] .app-nav-link:hover,
html[data-theme="dark"] .app-nav-sublink:hover {
background: rgba(56, 189, 248, 0.06);
color: #f1f5f9;
}
html[data-theme="dark"] .app-nav-link.is-active,
html[data-theme="dark"] .app-nav-sublink.is-active {
background: linear-gradient(90deg, rgba(56, 189, 248, 0.16) 0%, rgba(56, 189, 248, 0) 100%);
color: #38bdf8;
border-right-color: #38bdf8;
box-shadow: inset 4px 0 0 transparent;
}
html[data-theme="dark"] .app-nav-link.is-active::before,
html[data-theme="dark"] .app-nav-sublink.is-active::before {
content: '';
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 3px;
background: #38bdf8;
box-shadow: 0 0 12px #38bdf8, 0 0 4px #38bdf8;
}
html[data-theme="dark"] .app-nav-link,
html[data-theme="dark"] .app-nav-sublink { position: relative; }
html[data-theme="dark"] .app-nav-link.is-active i,
html[data-theme="dark"] .app-nav-sublink.is-active i {
color: #38bdf8;
text-shadow: 0 0 8px rgba(56, 189, 248, 0.60);
}
/* Topbar dark: blur con bordo accent gradient */
html[data-theme="dark"] .app-topbar {
background: rgba(11, 18, 32, 0.85);
border-bottom: 1px solid #1e293b;
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
position: sticky;
box-shadow: 0 1px 0 rgba(56, 189, 248, 0.10);
}
html[data-theme="dark"] .app-topbar__user {
border-radius: 10px;
background: rgba(56, 189, 248, 0.06);
border: 1px solid #1e293b;
}
html[data-theme="dark"] .app-topbar__avatar {
background: linear-gradient(135deg, #38bdf8 0%, #0ea5e9 100%);
box-shadow: 0 0 12px rgba(56, 189, 248, 0.40);
}
/* Tabelle dark: hover cyan glow */
html[data-theme="dark"] .app-table thead th {
background: #0b1220;
border-bottom: 1px solid #1e293b;
color: #38bdf8;
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 700;
font-size: 0.7rem;
}
html[data-theme="dark"] .app-table tbody td {
border-bottom: 1px solid #1e293b;
color: #e2e8f0;
}
html[data-theme="dark"] .app-table tbody tr:hover td {
background: rgba(56, 189, 248, 0.06);
color: #ffffff;
box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.20);
}
/* Tab dark: sottolineatura neon */
html[data-theme="dark"] .app-tabs {
border-bottom: 1px solid #1e293b;
}
html[data-theme="dark"] .app-tab {
color: #94a3b8;
border-bottom: 2px solid transparent;
}
html[data-theme="dark"] .app-tab:hover { color: #e2e8f0; }
html[data-theme="dark"] .app-tab.is-active {
color: #38bdf8;
border-bottom-color: #38bdf8;
box-shadow: 0 2px 0 #38bdf8, 0 0 12px rgba(56, 189, 248, 0.50);
}
/* Badge dark: brillanti con glow */
html[data-theme="dark"] .app-badge {
border-radius: 6px;
border: 1px solid currentColor;
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 700;
padding: 0.2rem 0.6rem;
font-size: 0.7rem;
}
html[data-theme="dark"] .app-badge--success {
background: rgba(34, 197, 94, 0.15); color: #22c55e;
box-shadow: 0 0 8px rgba(34, 197, 94, 0.20);
}
html[data-theme="dark"] .app-badge--warning {
background: rgba(245, 158, 11, 0.15); color: #f59e0b;
box-shadow: 0 0 8px rgba(245, 158, 11, 0.20);
}
html[data-theme="dark"] .app-badge--danger {
background: rgba(244, 63, 94, 0.15); color: #f43f5e;
box-shadow: 0 0 8px rgba(244, 63, 94, 0.20);
}
html[data-theme="dark"] .app-badge--info,
html[data-theme="dark"] .app-badge--accent {
background: rgba(56, 189, 248, 0.15); color: #38bdf8;
box-shadow: 0 0 8px rgba(56, 189, 248, 0.30);
}
/* Card dark: bordo sottile, glow al hover */
html[data-theme="dark"] .app-card {
background: linear-gradient(180deg, #0f172a 0%, #0b1220 100%);
border: 1px solid #1e293b;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
transition: border-color 200ms ease, box-shadow 200ms ease;
}
html[data-theme="dark"] .app-card:hover {
border-color: rgba(56, 189, 248, 0.30);
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5),
0 0 0 1px rgba(56, 189, 248, 0.10);
}
html[data-theme="dark"] .app-card__header {
border-bottom: 1px solid #1e293b;
background: rgba(56, 189, 248, 0.04);
}
/* Toolbar dark */
html[data-theme="dark"] .app-toolbar {
background: #0f172a;
border: 1px solid #1e293b;
border-radius: 10px;
}
/* Input dark: focus glow cyan */
html[data-theme="dark"] .app-input,
html[data-theme="dark"] .app-select,
html[data-theme="dark"] .app-textarea {
border-radius: 8px;
background: #0b1220;
border: 1px solid #1e293b;
color: #f1f5f9;
}
html[data-theme="dark"] .app-input:focus,
html[data-theme="dark"] .app-select:focus,
html[data-theme="dark"] .app-textarea:focus {
border-color: #38bdf8;
background: #0f172a;
box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.20),
0 0 12px rgba(56, 189, 248, 0.15);
}
/* Pulsanti dark: glow al hover */
html[data-theme="dark"] .btn,
html[data-theme="dark"] .btn-icon {
border-radius: 8px;
border: 1px solid #1e293b;
background: #0f172a;
color: #e2e8f0;
transition: all 160ms ease;
}
html[data-theme="dark"] .btn:hover {
background: #1e293b;
border-color: #38bdf8;
color: #38bdf8;
box-shadow: 0 0 16px rgba(56, 189, 248, 0.20);
}
html[data-theme="dark"] .btn-primary {
background: linear-gradient(135deg, #38bdf8 0%, #0ea5e9 100%);
color: #ffffff;
border-color: transparent;
box-shadow: 0 2px 12px rgba(56, 189, 248, 0.30);
}
html[data-theme="dark"] .btn-primary:hover {
background: linear-gradient(135deg, #7dd3fc 0%, #38bdf8 100%);
color: #ffffff;
box-shadow: 0 4px 24px rgba(56, 189, 248, 0.50);
}
html[data-theme="dark"] .btn-danger {
background: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%);
box-shadow: 0 2px 12px rgba(244, 63, 94, 0.30);
}
html[data-theme="dark"] .btn-success {
background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
box-shadow: 0 2px 12px rgba(34, 197, 94, 0.30);
}
/* Toggle dark */
html[data-theme="dark"] .app-toggle input:checked + .app-toggle__slider {
background: #38bdf8;
box-shadow: 0 0 12px rgba(56, 189, 248, 0.50);
}
/* Page header dark */
html[data-theme="dark"] .app-page-header__title {
background: linear-gradient(135deg, #f1f5f9 0%, #38bdf8 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-weight: 800;
}
/* Theme picker dark */
html[data-theme="dark"] .theme-picker__card { border-radius: 12px; }
html[data-theme="dark"] .theme-picker__item input:checked + .theme-picker__card {
box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.20),
0 0 24px rgba(56, 189, 248, 0.20);
}
/* Flash dark con glow */
html[data-theme="dark"] .app-flash--success { box-shadow: 0 0 16px rgba(34, 197, 94, 0.15); }
html[data-theme="dark"] .app-flash--warning { box-shadow: 0 0 16px rgba(245, 158, 11, 0.15); }
html[data-theme="dark"] .app-flash--danger { box-shadow: 0 0 16px rgba(244, 63, 94, 0.15); }
html[data-theme="dark"] .app-flash--info { box-shadow: 0 0 16px rgba(56, 189, 248, 0.15); }
/* =====================================================================
4. ICONE FONT-AWESOME — TRATTAMENTO PER TEMA
===================================================================== */
/* windows11: icone Fluent style — opacita' moderata.
IMPORTANTE: NON toccare font-weight delle icone Font Awesome.
FA richiede 900 per .fas (solid), 400 per .far (regular), 400
per .fab (brands). Forzare un valore unico produce il "tofu"
(rettangolo con X) perche' il glyph non esiste in quella variant. */
html[data-theme="windows11"] .fa,
html[data-theme="windows11"] .fas,
html[data-theme="windows11"] .far,
html[data-theme="windows11"] .fab {
opacity: 0.85;
}
html[data-theme="windows11"] .btn .fa,
html[data-theme="windows11"] .btn .fas,
html[data-theme="windows11"] .btn-primary .fa,
html[data-theme="windows11"] .btn-primary .fas,
html[data-theme="windows11"] .app-nav-link.is-active .fa,
html[data-theme="windows11"] .app-nav-link.is-active .fas { opacity: 1; }
/* ios: icone con accent color pieno, leggermente piu' grandi nei nav */
html[data-theme="ios"] .app-nav-link .fa,
html[data-theme="ios"] .app-nav-link .fas {
color: #007aff;
font-size: 1rem;
opacity: 1;
}
html[data-theme="ios"] .btn .fa,
html[data-theme="ios"] .btn .fas { font-size: 0.9rem; }
/* dark: icone luminose con leggero text-shadow accent */
html[data-theme="dark"] .app-nav-link.is-active .fa,
html[data-theme="dark"] .app-nav-link.is-active .fas,
html[data-theme="dark"] .app-tab.is-active .fa,
html[data-theme="dark"] .app-tab.is-active .fas {
text-shadow: 0 0 8px rgba(56, 189, 248, 0.50);
}
/* =====================================================================
5. TAILWIND .rounded-* PER TEMA (per viste legacy non migrate)
===================================================================== */
/* windows11 — geometria stretta */
html[data-theme="windows11"] .rounded,
html[data-theme="windows11"] .rounded-md { border-radius: 4px !important; }
html[data-theme="windows11"] .rounded-lg { border-radius: 6px !important; }
html[data-theme="windows11"] .rounded-xl { border-radius: 8px !important; }
html[data-theme="windows11"] .rounded-2xl { border-radius: 10px !important; }
html[data-theme="windows11"] .rounded-3xl { border-radius: 12px !important; }
html[data-theme="windows11"] .rounded-full { border-radius: 4px !important; }
/* ios — geometria morbida */
html[data-theme="ios"] .rounded,
html[data-theme="ios"] .rounded-md { border-radius: 12px !important; }
html[data-theme="ios"] .rounded-lg { border-radius: 16px !important; }
html[data-theme="ios"] .rounded-xl { border-radius: 20px !important; }
html[data-theme="ios"] .rounded-2xl { border-radius: 24px !important; }
html[data-theme="ios"] .rounded-3xl { border-radius: 28px !important; }
html[data-theme="ios"] .rounded-full { border-radius: 9999px !important; }
/* dark — geometria intermedia */
html[data-theme="dark"] .rounded,
html[data-theme="dark"] .rounded-md { border-radius: 8px !important; }
html[data-theme="dark"] .rounded-lg { border-radius: 10px !important; }
html[data-theme="dark"] .rounded-xl { border-radius: 12px !important; }
html[data-theme="dark"] .rounded-2xl { border-radius: 14px !important; }
html[data-theme="dark"] .rounded-3xl { border-radius: 16px !important; }
/* =====================================================================
HF95 (rev110) — Pulsanti Azioni Rapide ad altezza della riga.
.btn-icon e' fisso 32x32. Su righe con badge multipli o testo
multilinea il pulsante sembra piccolo rispetto al record. Stretch
verticale per allinearlo all'altezza effettiva della riga.
Tecnica: tr{height:1px} consente ai figli td di calcolare 100%.
Il contenuto alza comunque la riga oltre 1px, quindi nessuna
riduzione visiva sulle righe normali. Scope ristretto a
.app-table .app-actions e .app-table td > .btn.btn-icon: nessun
effetto fuori dalle tabelle.
Min-height 32px preserva la dimensione minima storica del btn,
utile su righe poco alte.
===================================================================== */
.app-table tbody tr { height: 1px; }
.app-table tbody td > .app-actions {
height: 100%;
align-items: stretch;
}
.app-table tbody td > .app-actions > .btn-icon,
.app-table tbody td > .app-actions > a.btn-icon,
.app-table tbody td > .app-actions > .btn.btn-icon,
.app-table tbody td > .app-actions > button.btn-icon {
height: auto;
min-height: 32px;
align-self: stretch;
padding-top: 0;
padding-bottom: 0;
}
/* Caso senza wrapper .app-actions: pulsante singolo direttamente in td
(es. audit/index, pannelli show con btn-icon "Apri"). */
.app-table tbody td > a.btn-icon,
.app-table tbody td > a.btn.btn-icon,
.app-table tbody td > .btn.btn-icon,
.app-table tbody td > button.btn-icon {
height: 100%;
min-height: 32px;
}
/* Salvaguardia: la td contenitore non deve schiacciarsi sotto il
padding di default (0.75rem 1rem); manteniamo padding orizzontale
ma comprimiamo quello verticale a 0.45rem cosi' i pulsanti hanno
piu' spazio percepito senza alterare l'altezza della riga. */
.app-table tbody td:has(> .app-actions),
.app-table tbody td:has(> a.btn-icon),
.app-table tbody td:has(> .btn.btn-icon) {
padding-top: 0.45rem;
padding-bottom: 0.45rem;
}
/* Focus dei campi su click del mouse: niente rettangolo squadrato.
La regola universale per tema `html[data-theme="X"] *:focus-visible`
disegna outline + (solo dark) un box-shadow 0 0 0 4px. Un riceve
sempre :focus-visible anche al click, quindi quel ring appariva su ogni
campo; sull'omni-search (border-radius:0) il box-shadow risultava un
rettangolo netto. Qui azzeriamo outline E box-shadow sui soli controlli
di form, coprendo anche :focus. Specificità (0,2,2): batte *:focus-visible
(0,2,1) ma resta sotto a .app-input:focus (0,3,0), quindi il soft glow
degli app-input e gli anelli di accessibilità class-scoped (.app-btn,
.app-nav-link, ecc.) restano intatti, come il border accent del wrapper
.app-topbar__omni:focus-within. */
html[data-theme="windows11"] :is(input, textarea, select):is(:focus, :focus-visible),
html[data-theme="ios"] :is(input, textarea, select):is(:focus, :focus-visible),
html[data-theme="dark"] :is(input, textarea, select):is(:focus, :focus-visible) {
outline: none;
outline-offset: 0;
box-shadow: none;
}
|