/* ============================================================ REPORTIA — Premium theme (light + dark) Drop-in per Velzon / Bootstrap 5. Caricare DOPO il CSS Velzon. Il tema si attiva con data-bs-theme="light|dark" su . ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); /* ------------------------------------------------------------ 1. TOKEN ------------------------------------------------------------ */ :root, [data-bs-theme="light"] { --rp-bg: #f7f8fa; /* fondo pagina */ --rp-surface: #ffffff; /* card, sidebar, topbar */ --rp-surface-2: #f1f2f6; /* fasce, thead, hover */ --rp-border: #e6e8ef; --rp-text: #1c1e26; --rp-text-muted: #6b7080; --rp-accent: #6e5fd6; /* viola brand */ --rp-accent-text: #5a4cba; /* viola leggibile come testo su bianco */ --rp-accent-tint: rgba(110, 95, 214, 0.08); --rp-teal: #0fa98f; /* teal brand */ --rp-success: #1f9d66; --rp-warning: #b9821c; --rp-danger: #c4453f; --rp-success-tint: rgba(31, 157, 102, 0.10); --rp-warning-tint: rgba(185, 130, 28, 0.12); --rp-danger-tint: rgba(196, 69, 63, 0.10); --rp-shadow-sm: 0 1px 2px rgba(28, 30, 38, 0.05); --rp-shadow-md: 0 4px 16px rgba(28, 30, 38, 0.07); --rp-gradient: linear-gradient(90deg, var(--rp-accent), var(--rp-teal)); --rp-radius: 8px; --rp-radius-lg: 12px; --rp-sidebar-w: 240px; --rp-topbar-h: 60px; --rp-font: "Inter", system-ui, sans-serif; } [data-bs-theme="dark"] { --rp-bg: #161826; --rp-surface: #232532; --rp-surface-2: #2b2d3c; --rp-border: rgba(233, 233, 237, 0.14); --rp-text: #e9e9ed; --rp-text-muted: #9397ab; --rp-accent: #9184d9; --rp-accent-text: #b5abfc; --rp-accent-tint: rgba(145, 132, 217, 0.12); --rp-teal: #2fbfa6; --rp-success: #3fcb8b; --rp-warning: #e3b341; --rp-danger: #f07470; --rp-success-tint: rgba(63, 203, 139, 0.12); --rp-warning-tint: rgba(227, 179, 65, 0.12); --rp-danger-tint: rgba(240, 116, 112, 0.12); --rp-shadow-sm: 0 0 0 1px rgba(233, 233,237, 0.08); --rp-shadow-md: 0 0 0 1px rgba(233, 233,237, 0.10), 0 6px 18px rgba(0, 0, 0, 0.55); } /* Rimappa le variabili Bootstrap/Velzon sui token Reportia */ :root, [data-bs-theme="light"], [data-bs-theme="dark"] { --bs-body-bg: var(--rp-bg); --bs-body-color: var(--rp-text); --bs-border-color: var(--rp-border); --bs-secondary-color: var(--rp-text-muted); --bs-primary: var(--rp-accent); --bs-primary-rgb: 110, 95, 214; --bs-link-color: var(--rp-accent-text); --bs-link-hover-color: var(--rp-accent); --bs-body-font-family: var(--rp-font); /* Velzon usa il prefisso --vz-: allineare gli stessi valori */ --vz-body-bg: var(--rp-bg); --vz-body-color: var(--rp-text); --vz-border-color: var(--rp-border); --vz-card-bg: var(--rp-surface); --vz-secondary-bg: var(--rp-surface); --vz-primary: var(--rp-accent); --vz-primary-rgb: 110, 95, 214; } [data-bs-theme="dark"] { --bs-primary-rgb: 145, 132, 217; --vz-primary-rgb: 145, 132, 217; } /* ------------------------------------------------------------ 2. BASE ------------------------------------------------------------ */ body { background: var(--rp-bg); color: var(--rp-text); font-family: var(--rp-font); font-size: 14px; line-height: 1.55; } h1, h2, h3, h4, h5, h6 { font-family: var(--rp-font); font-weight: 500; letter-spacing: -0.01em; color: var(--rp-text); } a { color: var(--rp-accent-text); text-underline-offset: 3px; } a:hover { color: var(--rp-accent); } :focus { outline: none; } :focus-visible { outline: 2px solid var(--rp-accent); outline-offset: 2px; } ::selection { background: var(--rp-accent-tint); } /* ------------------------------------------------------------ 3. SIDEBAR (neutra: bianca in light, superficie scura in dark) Sostituisce il gradiente verde Velzon. ------------------------------------------------------------ */ .app-menu, .navbar-menu { width: var(--rp-sidebar-w); background: var(--rp-surface) !important; border-right: 1px solid var(--rp-border); box-shadow: none; } .navbar-menu .navbar-nav .nav-link { color: var(--rp-text-muted); font-size: 13.5px; font-weight: 500; border-radius: var(--rp-radius); margin: 1px 10px; padding: 8px 12px; display: flex; align-items: center; gap: 10px; } .navbar-menu .navbar-nav .nav-link i { font-size: 17px; } .navbar-menu .navbar-nav .nav-link:hover { color: var(--rp-text); background: var(--rp-surface-2); } .navbar-menu .navbar-nav .nav-link.active { color: var(--rp-accent-text); background: var(--rp-accent-tint); position: relative; } /* Firma brand: barretta gradiente sulla voce attiva */ .navbar-menu .navbar-nav .nav-link.active::before { content: ""; position: absolute; left: -10px; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--rp-gradient); } .menu-title, .navbar-menu .menu-title span { color: var(--rp-text-muted); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; } /* Logo sidebar theme-aware: colorato in light, bianco in dark */ .rp-logo-dark { display: none; } [data-bs-theme="dark"] .rp-logo-light { display: none; } [data-bs-theme="dark"] .rp-logo-dark { display: inline-block; } /* Logo azienda su chip chiaro anche in dark, cosi' resta leggibile */ .rp-sidebar-azienda { display: inline-block; } [data-bs-theme="dark"] .rp-sidebar-azienda { background: #ffffff; border-radius: 8px; padding: 6px 10px; } .navbar-brand-box { background: var(--rp-surface); border-bottom: 1px solid var(--rp-border); } /* ------------------------------------------------------------ 4. TOPBAR — piatta, neutra, con toggle tema ------------------------------------------------------------ */ #page-topbar { height: var(--rp-topbar-h); background: var(--rp-surface) !important; border-bottom: 1px solid var(--rp-border); box-shadow: none; } #page-topbar .btn-topbar, #page-topbar .btn-icon { color: var(--rp-text-muted); background: transparent; border: 0; } #page-topbar .btn-topbar:hover { color: var(--rp-text); background: var(--rp-surface-2); } /* ------------------------------------------------------------ 5. PAGE HEADER — niente più banner gradiente pieno. Titolo sobrio + hairline gradiente sotto (firma brand). ------------------------------------------------------------ */ .rp-page-header { padding: 20px 0 14px; margin-bottom: 20px; position: relative; } .rp-page-header::after { content: ""; position: absolute; left: 0; bottom: 0; width: 64px; height: 2px; border-radius: 2px; background: var(--rp-gradient); } .rp-page-header h1 { font-size: 20px; font-weight: 500; margin: 0; } .rp-page-header .rp-page-sub { color: var(--rp-text-muted); font-size: 13px; margin-top: 2px; } /* ------------------------------------------------------------ 6. CARD ------------------------------------------------------------ */ .card { background: var(--rp-surface); border: 1px solid var(--rp-border); border-radius: var(--rp-radius-lg); box-shadow: var(--rp-shadow-sm); } .card-header { background: transparent; border-bottom: 1px solid var(--rp-border); padding: 14px 20px; font-weight: 500; color: var(--rp-text); } .card-body { padding: 20px; } /* KPI card */ .rp-kpi-value { font-size: 28px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .rp-kpi-label { font-size: 12px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--rp-text-muted); } /* ------------------------------------------------------------ 7. BOTTONI — primario = outline accento (mai riempimenti gradiente su bottoni standard; il gradiente pieno e' SOLO per il CTA del login) ------------------------------------------------------------ */ .btn { font-weight: 500; font-size: 13px; border-radius: var(--rp-radius); } .btn-primary, .btn-primary:focus { color: var(--rp-accent-text); background: transparent; border: 1px solid var(--rp-accent); } .btn-primary:hover { color: var(--rp-accent-text); background: var(--rp-accent-tint); border-color: var(--rp-accent); } .btn-primary:active { background: var(--rp-accent-tint); } .btn-secondary, .btn-light { color: var(--rp-text); background: transparent; border: 1px solid var(--rp-border); } .btn-secondary:hover, .btn-light:hover { background: var(--rp-surface-2); color: var(--rp-text); } .btn-danger { color: var(--rp-danger); background: transparent; border: 1px solid var(--rp-danger); } .btn-danger:hover { background: var(--rp-danger-tint); color: var(--rp-danger); } /* CTA login: unico bottone con riempimento gradiente */ .rp-btn-gradient { color: #ffffff; background: var(--rp-gradient); border: 0; font-weight: 500; } .rp-btn-gradient:hover { filter: brightness(1.08); color: #ffffff; } /* ------------------------------------------------------------ 8. FORM ------------------------------------------------------------ */ .form-label { font-size: 12.5px; font-weight: 500; color: var(--rp-text-muted); margin-bottom: 5px; } .form-control, .form-select { background: var(--rp-surface); border: 1px solid var(--rp-border); border-radius: var(--rp-radius); color: var(--rp-text); font-size: 14px; min-height: 38px; box-shadow: none; } .form-control:hover, .form-select:hover { border-color: var(--rp-text-muted); } .form-control:focus, .form-select:focus { background: var(--rp-surface); border-color: var(--rp-accent); box-shadow: 0 0 0 3px var(--rp-accent-tint); color: var(--rp-text); } .form-control::placeholder { color: var(--rp-text-muted); opacity: 0.7; } /* ------------------------------------------------------------ 9. TABELLE (dati numerici: tabular-nums, numeri a destra) ------------------------------------------------------------ */ .table { --bs-table-bg: transparent; color: var(--rp-text); font-size: 13.5px; } .table thead th { background: var(--rp-surface-2); color: var(--rp-text-muted); font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; border-bottom: 1px solid var(--rp-border); padding: 10px 14px; } .table tbody td { border-bottom: 1px solid var(--rp-border); padding: 11px 14px; vertical-align: middle; } .table tbody tr:hover td { background: var(--rp-surface-2); } .table .rp-num { text-align: right; font-variant-numeric: tabular-nums; } .table .rp-neg { color: var(--rp-danger); } /* ------------------------------------------------------------ 10. BADGE DI STATO (tinta + testo, mai fondi saturi pieni) ------------------------------------------------------------ */ .rp-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 500; padding: 3px 9px; border-radius: 99px; } .rp-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .rp-badge-success { color: var(--rp-success); background: var(--rp-success-tint); } .rp-badge-warning { color: var(--rp-warning); background: var(--rp-warning-tint); } .rp-badge-danger { color: var(--rp-danger); background: var(--rp-danger-tint); } .rp-badge-accent { color: var(--rp-accent-text); background: var(--rp-accent-tint); } .rp-badge-neutral { color: var(--rp-text-muted); background: var(--rp-surface-2); } /* ------------------------------------------------------------ 11. CHAT AI ------------------------------------------------------------ */ .rp-msg-user { background: var(--rp-accent-tint); border: 1px solid var(--rp-border); border-radius: var(--rp-radius-lg); border-bottom-right-radius: 4px; padding: 10px 14px; max-width: 70%; margin-left: auto; } .rp-msg-ai { background: var(--rp-surface); border: 1px solid var(--rp-border); border-radius: var(--rp-radius-lg); border-bottom-left-radius: 4px; padding: 14px 16px; } .rp-chat-input { display: flex; gap: 10px; align-items: center; background: var(--rp-surface); border: 1px solid var(--rp-border); border-radius: var(--rp-radius-lg); padding: 8px 8px 8px 16px; box-shadow: var(--rp-shadow-sm); } .rp-chat-input:focus-within { border-color: var(--rp-accent); box-shadow: 0 0 0 3px var(--rp-accent-tint); } /* ------------------------------------------------------------ 12. ALERT INFORMATIVI (sostituisce i box gialli pieni) ------------------------------------------------------------ */ .alert-info, .rp-note { background: var(--rp-surface); border: 1px solid var(--rp-border); border-left: 3px solid var(--rp-accent); border-radius: var(--rp-radius); color: var(--rp-text); padding: 12px 16px; font-size: 13px; } /* ------------------------------------------------------------ 13. LOGIN ------------------------------------------------------------ */ .rp-login-page { min-height: 100vh; display: grid; place-items: center; background: var(--rp-bg); } .rp-login-card { width: 400px; max-width: calc(100vw - 32px); background: var(--rp-surface); border: 1px solid var(--rp-border); border-radius: 16px; box-shadow: var(--rp-shadow-md); padding: 40px 36px 32px; position: relative; overflow: hidden; } .rp-login-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--rp-gradient); } /* ------------------------------------------------------------ 14. TOGGLE TEMA (header) — icona sole/luna ------------------------------------------------------------ */ .rp-theme-toggle { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--rp-radius); border: 0; background: transparent; color: var(--rp-text-muted); cursor: pointer; font-size: 17px; } .rp-theme-toggle:hover { background: var(--rp-surface-2); color: var(--rp-text); } /* ============================================================ 15. OVERRIDE VISTE REPORTIA (light + dark) Le viste (chat, database, cronologia, dashboard, preferiti, impostazioni) hanno