/* ============================================================ VERIFICHE PROTETTA Portale di verifica per Protetta Assicurazione. Identita' allineata al CRM Credito Protetta: blu brand (#3871C1), Inter, superfici chiare e neutre, tema chiaro + scuro. ============================================================ */ /* ---------- 1. Self-hosted typefaces (CSP fontSrc: 'self') ---------- */ @font-face { font-family: "Inter"; src: url("fonts/inter-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "IBM Plex Mono"; src: url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "IBM Plex Mono"; src: url("fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } /* ---------- 2. Design tokens ---------- */ :root { color-scheme: light; --display: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif; --sans: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif; --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace; /* surfaces */ --paper: #f6f7f9; --paper-deep: #e9edf2; --card: #ffffff; --card-inset: #f1f4f7; /* ink */ --ink: #1f2a37; --ink-soft: #374151; --ink-mute: #6b7280; --ink-faint: #9ca3af; /* brand — Protetta Assicurazione --brand* riempimenti (bottoni, barre): restano scuri in entrambi i temi --brand-text* testo d'accento su superficie: si schiarisce nel tema scuro */ --brand: #3871c1; --brand-bright: #4a84d6; --brand-deep: #2c5a9b; --brand-ink: #1f4173; --brand-soft: #e3edf9; --brand-tint: #eff5fc; --brand-disabled: #9db9e0; --brand-text: #3871c1; --brand-text-strong: #2c5a9b; --brand-rgb: 56, 113, 193; --brand-deep-rgb: 44, 90, 155; --brand-red: #f14624; /* hairlines */ --line: #d9e1ea; --line-soft: #e8edf3; --line-strong: #c3cdd9; /* verdict — clear / stop / caution / note */ --ok: #15803d; --ok-bg: #e9f7ee; --ok-line: #b7e1c5; --ok-ink: #166534; --stop: #dc2626; --stop-bg: #fef2f2; --stop-line: #fecaca; --stop-ink: #991b1b; --warn: #d97706; --warn-bg: #fef3c7; --warn-line: #fcd989; --warn-ink: #92400e; --note: #2563eb; --note-bg: #e9f0fe; --note-line: #bfd3fb; --note-ink: #1e40af; /* geometry */ --r-xs: 6px; --r-sm: 8px; --r-md: 12px; --r-lg: 18px; /* elevation */ --sh-1: 0 1px 2px rgba(15, 23, 42, .05), 0 2px 8px -2px rgba(15, 23, 42, .06); --sh-2: 0 2px 6px -1px rgba(15, 23, 42, .07), 0 12px 24px -10px rgba(15, 23, 42, .14); --sh-3: 0 30px 60px -24px rgba(15, 23, 42, .32); /* bootstrap bridge */ --bs-primary: #3871c1; --bs-primary-rgb: 56, 113, 193; --bs-link-color: var(--brand-text-strong); --bs-link-color-rgb: 44, 90, 155; --bs-link-hover-color: var(--brand-text); --bs-border-color: var(--line); --bs-body-color: var(--ink-soft); --bs-body-bg: var(--paper); } /* Tema scuro: stessi token, valori del CRM Credito (superfici neutre scure). L'attributo lo mette public/theme.js su , insieme a data-bs-theme per i componenti Bootstrap che non sono ridefiniti qui. */ [data-theme="dark"] { color-scheme: dark; --paper: #1a1a1a; --paper-deep: #2e2e2e; --card: #242424; --card-inset: #2e2e2e; --ink: #f2f2f2; --ink-soft: #d9d9d9; --ink-mute: #a3a3a3; --ink-faint: #7d7d7d; --brand-soft: rgba(56, 113, 193, .22); --brand-tint: rgba(56, 113, 193, .12); --brand-disabled: #3b5478; --brand-text: #7aa7e0; --brand-text-strong: #a9c9ec; --line: #3a3a3a; --line-soft: #303030; --line-strong: #4a4a4a; --ok: #2fae62; --ok-bg: rgba(34, 197, 94, .13); --ok-line: rgba(34, 197, 94, .32); --ok-ink: #a7e8bf; --stop: #e5534b; --stop-bg: rgba(239, 68, 68, .13); --stop-line: rgba(239, 68, 68, .34); --stop-ink: #fbb4ae; --warn: #e09a1f; --warn-bg: rgba(245, 158, 11, .13); --warn-line: rgba(245, 158, 11, .34); --warn-ink: #f8d88a; --note: #4b8df0; --note-bg: rgba(59, 130, 246, .13); --note-line: rgba(59, 130, 246, .34); --note-ink: #b3cdfb; --sh-1: 0 1px 2px rgba(0, 0, 0, .3), 0 2px 8px -2px rgba(0, 0, 0, .3); --sh-2: 0 2px 6px -1px rgba(0, 0, 0, .35), 0 14px 28px -10px rgba(0, 0, 0, .5); --sh-3: 0 30px 60px -24px rgba(0, 0, 0, .7); --bs-link-color-rgb: 169, 201, 236; } /* ---------- 3. Base ---------- */ * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; font-family: var(--sans); font-size: 16px; line-height: 1.6; color: var(--ink-soft); background-color: var(--paper); background-image: radial-gradient(1000px 520px at 88% -180px, rgba(var(--brand-rgb), .10), transparent 70%), radial-gradient(760px 420px at -10% 0%, rgba(var(--brand-rgb), .06), transparent 70%); background-attachment: fixed, fixed; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5, h6 { font-family: var(--display); color: var(--ink); font-weight: 700; letter-spacing: -0.018em; } a { text-decoration: none; } ::selection { background: rgba(var(--brand-rgb), .22); color: var(--ink); } ::-webkit-scrollbar { width: 12px; height: 12px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--line-strong); border: 3px solid var(--paper); border-radius: 99px; } ::-webkit-scrollbar-thumb:hover { background: var(--ink-faint); } :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 3px; } .text-muted { color: var(--ink-mute) !important; } .text-success { color: var(--ok) !important; } /* ---------- 4. Shared layout ---------- */ .wrap { width: 100%; max-width: 1148px; margin-inline: auto; padding-inline: 1.4rem; } /* wide container for data-dense admin pages */ .wrap-wide { width: 100%; max-width: 1680px; margin-inline: auto; padding-inline: 1.75rem; } /* extra-wide: tabelle con molte colonne, dove 1680px costringono i dati (indirizzi IP, timestamp) ad andare a capo */ .wrap-xwide { width: 100%; max-width: min(2400px, 98vw); margin-inline: auto; padding-inline: 1.25rem; } /* eyebrow — the signature mono kicker */ .eyebrow { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--mono); font-size: .72rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--brand-text); } .eyebrow::before { content: ""; width: 22px; height: 1px; background: currentColor; opacity: .55; } /* ---------- 5. Navbar ---------- */ .navbar { position: sticky; top: 0; z-index: 1030; padding: .6rem 0; box-shadow: 0 1px 0 rgba(0, 0, 0, .1), 0 12px 28px -20px rgba(var(--brand-deep-rgb), .85); } .navbar, .navbar.bg-primary { background: linear-gradient(180deg, var(--brand-bright) 0%, var(--brand) 100%) !important; } /* La barra occupa tutta la larghezza con un margine interno costante: le pagine sotto hanno contenitori di larghezza diversa, e agganciare la barra a uno di quelli la faceva sembrare disallineata passando da una all'altra. */ .bl-nav-inner { display: flex; align-items: center; gap: 1.4rem; padding-inline: 1.25rem; width: 100%; } .bl-brand { display: flex; align-items: center; gap: .68rem; padding: 0; flex: none; text-decoration: none; } .bl-brand-logo { height: 38px; width: auto; border-radius: 9px; background: #fff; padding: 4px; box-shadow: 0 2px 7px rgba(0, 0, 0, .2); } .bl-brand-name { font-family: var(--sans); font-weight: 700; font-size: 1.06rem; letter-spacing: .005em; color: #ffffff; white-space: nowrap; } .bl-brand-role { font-family: var(--sans); font-size: .68rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: .26em .62em; border-radius: 99px; background: rgba(255, 255, 255, .22); color: #fff; border: 1px solid rgba(255, 255, 255, .35); } /* I link riempiono lo spazio centrale; l'utente e l'uscita restano ancorati a destra qualunque sia il numero di voci. */ .bl-nav-links { display: flex; align-items: center; gap: 1.25rem; flex: 1 1 auto; min-width: 0; } .bl-nav-user { display: flex; align-items: center; gap: .85rem; flex: none; margin-left: auto; } /* Un gruppo raccoglie le pagine che parlano della stessa materia: dati, persone, attivita'. In barra il gruppo non si annuncia — a separarlo basta un filo verticale, e sei voci in una riga sola restano leggibili senza aggiungere etichette che raddoppierebbero l'altezza. */ .bl-nav-group { display: flex; align-items: center; gap: .12rem; } .bl-nav-group + .bl-nav-group { margin-left: .9rem; padding-left: .9rem; border-left: 1px solid rgba(255, 255, 255, .25); } /* Il titolo esiste nel markup per i lettori di schermo e per il menu compatto, dove le voci si impilano e il filo verticale non separa piu' niente. */ .bl-nav-group-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .bl-nav-link { position: relative; font-family: var(--sans); font-size: .88rem; font-weight: 500; line-height: 1.2; text-decoration: none; white-space: nowrap; color: rgba(255, 255, 255, .82); padding: .3rem .55rem; border-radius: var(--r-xs); transition: color .15s ease, background-color .15s ease; } .bl-nav-link:hover, .bl-nav-link:focus-visible { color: #fff; background: rgba(255, 255, 255, .15); } .bl-nav-link.is-active { color: #fff; font-weight: 700; background: rgba(255, 255, 255, .2); box-shadow: inset 0 -2px 0 #fff; } /* Le scorciatoie portano fuori dal pannello: bordo leggero e freccia le distinguono dalle sezioni, cosi' "Ricerca" non si legge come la settima. */ .bl-nav-shortcuts { display: flex; align-items: center; gap: .3rem; padding-right: .85rem; margin-right: .1rem; border-right: 1px solid rgba(255, 255, 255, .25); } .bl-nav-link.is-esterno { border: 1px solid rgba(255, 255, 255, .35); padding-inline: .6rem; } .bl-nav-esterno { margin-left: .3rem; font-size: .78em; opacity: .8; } .bl-nav-badge { display: inline-block; margin-left: .35rem; font-family: var(--sans); font-size: .62rem; font-weight: 700; line-height: 1; padding: .28em .45em; border-radius: 99px; background: #d32f2f; color: #fff; } .bl-nav-badge[hidden] { display: none; } .bl-nav-username { font-family: var(--sans); font-size: .88rem; font-weight: 500; color: rgba(255, 255, 255, .78); white-space: nowrap; } /* Finche' il server non ha detto quali voci mostrare, lo spazio dei link resta vuoto invece di riempirsi e poi cambiare: meglio niente che uno scatto. */ .bl-nav-links { opacity: 0; transition: opacity .12s ease; } .bl-nav.is-ready .bl-nav-links { opacity: 1; } .bl-nav-toggle { display: none; flex: none; border: 1px solid rgba(255, 255, 255, .5); background: rgba(255, 255, 255, .08); color: #fff; border-radius: var(--r-xs); padding: .34rem .6rem; cursor: pointer; } .bl-nav-toggle svg { display: block; } /* Sotto i 1150px le voci non ci stanno piu' in una riga: invece di andare a capo in modo imprevedibile, si chiudono dietro il pulsante e si aprono in colonna. Sopra quella soglia il pulsante non esiste proprio. */ /* Sotto i 1150px le voci non ci stanno piu' in una riga: invece di andare a capo in modo imprevedibile si chiudono dietro il pulsante e si aprono in colonna. Li' il filo verticale non separa piu' niente, quindi tornano visibili i titoli dei gruppi, che a quel punto sono l'unica struttura. */ @media (max-width: 1150px) { .bl-nav-inner { flex-wrap: wrap; gap: .8rem; } .bl-nav-toggle:not([hidden]) { display: block; order: 2; margin-left: auto; } .bl-nav-user { order: 3; margin-left: .4rem; } .bl-nav-links { order: 4; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: .2rem; display: none; padding-bottom: .35rem; } .bl-nav.is-open .bl-nav-links { display: flex; } .bl-nav-group { flex-direction: column; align-items: stretch; gap: .1rem; padding: .45rem 0; } .bl-nav-group + .bl-nav-group { margin-left: 0; padding-left: 0; border-left: 0; border-top: 1px solid rgba(255, 255, 255, .18); } .bl-nav-group-title { position: static; width: auto; height: auto; clip-path: none; font-family: var(--sans); font-size: .6rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .5); padding: 0 .55rem .2rem; } .bl-nav-link { padding: .45rem .55rem; } .bl-nav-link.is-active { box-shadow: inset 2px 0 0 #fff; } .bl-nav-shortcuts { padding-right: .6rem; } } @media (max-width: 560px) { .bl-brand-name { display: none; } .bl-nav-username { display: none; } .bl-nav-shortcuts { border-right: 0; padding-right: .3rem; } } /* navbar logout button */ .navbar .btn-outline-light { font-family: var(--sans); font-size: .86rem; font-weight: 600; letter-spacing: 0; text-transform: none; padding: .4rem .9rem; border-radius: var(--r-xs); border: 1px solid rgba(255, 255, 255, .55); color: #fff; background: rgba(255, 255, 255, .08); transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .05s ease; } .navbar .btn-outline-light:hover { background: #ffffff; border-color: #fff; color: var(--brand-deep); } .navbar .btn-outline-light:active { transform: translateY(1px); } /* ---------- 6. Masthead ---------- */ .masthead { padding: 3.4rem 0 1.9rem; } .masthead-title { font-size: clamp(2.3rem, 1.4rem + 3.2vw, 3.3rem); font-weight: 800; line-height: 1.02; margin: .85rem 0 0; color: var(--ink); } .masthead-title em { font-style: normal; color: var(--brand-text); } .masthead-sub { margin: .85rem 0 0; max-width: 46ch; font-size: 1.04rem; color: var(--ink-mute); } .masthead-rule { margin-top: 1.7rem; height: 2px; background: var(--line); position: relative; } .masthead-rule::before { content: ""; position: absolute; left: 0; top: 0; width: 72px; height: 2px; background: var(--brand); } /* page header used on admin sub-pages */ .hero-title { font-family: var(--display); font-weight: 800; font-size: 1.7rem; letter-spacing: -0.02em; color: var(--ink); } .hero-subtitle { color: var(--ink-mute); margin-bottom: 0; } /* ---------- 7. Verification modules ---------- */ .modules { display: grid; grid-template-columns: 1fr; gap: 1.25rem; padding-bottom: 1.5rem; } @media (min-width: 980px) { .modules { grid-template-columns: repeat(3, 1fr); gap: 1.4rem; align-items: start; } } .module { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--sh-1); overflow: hidden; transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease; } .module:hover { box-shadow: var(--sh-2); border-color: var(--line-strong); } .module:focus-within { box-shadow: var(--sh-2); border-color: rgba(var(--brand-rgb), .5); } .module-head { display: flex; align-items: center; gap: .85rem; padding: 1.05rem 1.15rem; border-bottom: 1px solid var(--line-soft); background: linear-gradient(180deg, var(--card-inset), var(--card)); } .module-index { flex: none; width: 42px; height: 42px; display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 1.15rem; color: var(--brand-text); background: var(--brand-soft); border: 1px solid var(--ok-line); border-radius: var(--r-sm); } .module-id { flex: 1 1 auto; min-width: 0; } .module-kicker { display: block; font-family: var(--mono); font-size: .68rem; font-weight: 500; letter-spacing: .17em; text-transform: uppercase; color: var(--brand-text); } .module-title { font-family: var(--display); font-size: 1.08rem; font-weight: 700; line-height: 1.2; margin: .15rem 0 0; color: var(--ink); } .module-glyph { flex: none; color: var(--ink-faint); display: grid; place-items: center; } .module-glyph svg { width: 22px; height: 22px; display: block; } .module-body { padding: 1.2rem 1.15rem 1.05rem; } /* single centred module: la verifica e' una sola */ .module-solo { max-width: 680px; margin-inline: auto; } /* ---------- 8. Cards (admin pages) ---------- */ .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--sh-1); } .card.shadow-sm { box-shadow: var(--sh-1) !important; } .card-body { padding: 1.4rem; } [data-user-id] { transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease; } [data-user-id]:hover { box-shadow: var(--sh-2); border-color: var(--line-strong); } [data-user-id] strong { font-family: var(--display); font-size: 1.05rem; color: var(--ink); } /* ---------- 9. Forms ---------- */ .form-label { font-family: var(--mono); font-size: .7rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: .42rem; } .form-text { color: var(--ink-faint); font-size: .8rem; margin-top: .4rem; } .form-control, .form-select { font-family: var(--sans); color: var(--ink); background-color: var(--card-inset); border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: .68rem .82rem; transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; } .form-control-lg, .form-select-lg { padding: .82rem .92rem; font-size: 1.02rem; border-radius: var(--r-sm); } .form-control-sm, .form-select-sm { padding: .44rem .62rem; font-size: .85rem; border-radius: var(--r-xs); } .form-control:hover:not(:focus), .form-select:hover:not(:focus) { border-color: var(--ink-faint); } .form-control:focus, .form-select:focus { color: var(--ink); background-color: var(--card); border-color: var(--brand); box-shadow: 0 0 0 3.5px rgba(var(--brand-rgb), .15); outline: 0; } .form-control::placeholder { color: var(--ink-faint); opacity: 1; } /* identifier inputs — the data being verified, shown in mono */ .id-input { font-family: var(--mono) !important; font-weight: 500; letter-spacing: .045em; font-size: 1.06rem; } .id-input::placeholder { font-weight: 400; letter-spacing: .02em; } .form-select { cursor: pointer; } /* input-group (admin password fields) */ .input-group > .form-control, .input-group > .btn { border-radius: var(--r-sm); } .input-group > :not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -1px; } .input-group > :not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; } /* checkbox / switch */ .form-check-input { border: 1.5px solid var(--line-strong); background-color: var(--card-inset); } .form-check-input:checked { background-color: var(--brand); border-color: var(--brand); } .form-check-input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .18); } .form-switch .form-check-input { width: 2.4em; } .form-check-label { color: var(--ink-soft); } /* ---------- 10. Buttons ---------- */ .btn { font-family: var(--sans); font-weight: 600; letter-spacing: .005em; border-radius: var(--r-sm); transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .06s ease, color .15s ease; } .btn:active { transform: translateY(1px); } .btn-lg { padding: .82rem 1.25rem; font-size: 1.02rem; } .btn-sm { font-family: var(--mono); font-size: .72rem; font-weight: 500; letter-spacing: .04em; padding: .38rem .7rem; } /* primary CTA */ .btn-primary { --bs-btn-color: #fff; --bs-btn-bg: var(--brand); --bs-btn-border-color: var(--brand); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--brand-deep); --bs-btn-hover-border-color: var(--brand-deep); --bs-btn-active-bg: var(--brand-ink); --bs-btn-active-border-color: var(--brand-ink); --bs-btn-disabled-bg: var(--brand-disabled); --bs-btn-disabled-border-color: var(--brand-disabled); --bs-btn-disabled-opacity: 1; color: #fff; background: linear-gradient(178deg, var(--brand-bright), var(--brand)); border: 1px solid var(--brand-deep); box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 6px 16px -6px rgba(var(--brand-rgb), .6); } .btn-primary:hover, .btn-primary:focus-visible { color: #fff; background: linear-gradient(178deg, var(--brand), var(--brand-deep)); border-color: var(--brand-deep); box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset, 0 9px 22px -7px rgba(var(--brand-rgb), .62); } .btn-primary:active { background: var(--brand-ink); box-shadow: 0 2px 7px rgba(var(--brand-deep-rgb), .45) inset; } .btn-primary:disabled, .btn-primary.disabled { background: var(--brand-disabled); border-color: var(--brand-disabled); box-shadow: none; } /* outline buttons (admin) */ .btn-outline-primary { --bs-btn-color: var(--brand-text-strong); --bs-btn-border-color: var(--line-strong); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--brand); --bs-btn-hover-border-color: var(--brand); --bs-btn-active-bg: var(--brand-deep); --bs-btn-active-border-color: var(--brand-deep); } .btn-outline-secondary { --bs-btn-color: var(--ink-soft); --bs-btn-border-color: var(--line-strong); --bs-btn-hover-color: var(--ink); --bs-btn-hover-bg: var(--paper-deep); --bs-btn-hover-border-color: var(--ink-faint); --bs-btn-active-bg: var(--line); --bs-btn-active-border-color: var(--ink-faint); --bs-btn-active-color: var(--ink); } .btn-outline-danger { --bs-btn-color: var(--stop); --bs-btn-border-color: var(--stop-line); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--stop); --bs-btn-hover-border-color: var(--stop); } .btn-outline-success { --bs-btn-color: var(--ok); --bs-btn-border-color: var(--ok-line); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--ok); --bs-btn-hover-border-color: var(--ok); } .spinner-border { border-width: .18em; } /* ---------- 11. Quota meter ---------- */ .quota { --fill: 0%; margin-top: 1rem; padding-top: .85rem; border-top: 1px dashed var(--line); } .quota-row { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; } .quota-label { font-family: var(--mono); font-size: .67rem; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-faint); } .quota-value { font-family: var(--mono); font-size: .82rem; font-weight: 500; color: var(--ink-soft); font-variant-numeric: tabular-nums; } .quota-track { margin-top: .5rem; height: 5px; border-radius: 99px; background: var(--paper-deep); overflow: hidden; } .quota-fill { height: 100%; width: var(--fill); border-radius: 99px; background: linear-gradient(90deg, var(--brand), var(--brand-bright)); transition: width .6s cubic-bezier(.2, .7, .2, 1), background .3s ease; } .quota.is-high .quota-fill { background: linear-gradient(90deg, #c98a14, #e0a528); } .quota.is-full .quota-fill { background: linear-gradient(90deg, var(--stop), #d24a40); } .quota.is-full .quota-value { color: var(--stop); } /* ---------- 12. Verdict / alerts ---------- */ .result { margin-top: 1rem; } .alert { --a-spine: var(--note); --a-bg: var(--note-bg); --a-line: var(--note-line); --a-ink: var(--note-ink); --a-disc: var(--note); position: relative; overflow: hidden; border: 1px solid var(--a-line); border-radius: var(--r-sm); background: var(--a-bg); color: var(--a-ink); padding: 1.05rem 1.15rem 1.05rem 1.35rem; animation: verdict-in .42s cubic-bezier(.2, .7, .2, 1) both; } .alert::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--a-spine); transform: scaleY(0); transform-origin: top; animation: spine-draw .5s .08s cubic-bezier(.2, .7, .2, 1) forwards; } .alert.shadow-sm { box-shadow: var(--sh-2) !important; } .alert-success { --a-spine: var(--ok); --a-bg: var(--ok-bg); --a-line: var(--ok-line); --a-ink: var(--ok-ink); --a-disc: var(--ok); } .alert-danger { --a-spine: var(--stop); --a-bg: var(--stop-bg); --a-line: var(--stop-line); --a-ink: var(--stop-ink); --a-disc: var(--stop); } .alert-warning { --a-spine: var(--warn); --a-bg: var(--warn-bg); --a-line: var(--warn-line); --a-ink: var(--warn-ink); --a-disc: var(--warn); } .alert-info { --a-spine: var(--note); --a-bg: var(--note-bg); --a-line: var(--note-line); --a-ink: var(--note-ink); --a-disc: var(--note); } .alert-heading { display: flex; align-items: center; gap: .2rem; font-family: var(--display); font-weight: 700; font-size: 1.08rem; letter-spacing: -0.01em; color: var(--a-ink); margin: 0 0 .35rem; } /* the icon glyph span injected by showResult() */ .alert-heading > span:first-child { flex: none; width: 2.4rem; height: 2.4rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--a-disc); color: #fff; line-height: 1; box-shadow: 0 4px 12px -3px color-mix(in srgb, var(--a-disc) 55%, transparent); } .alert p { margin: 0; color: var(--a-ink); } .alert p strong { font-family: var(--mono); font-weight: 500; letter-spacing: .02em; padding: .04em .28em; border-radius: 4px; background: color-mix(in srgb, var(--card) 60%, transparent); border: 1px solid var(--a-line); } /* standalone alerts (login / modal errors) without a heading */ .alert:not(:has(.alert-heading)) { font-size: .92rem; padding: .8rem 1rem .8rem 1.2rem; } /* ---------- 13. Badges & code ---------- */ .badge { font-family: var(--mono); font-weight: 500; font-size: .67rem; letter-spacing: .05em; border-radius: var(--r-xs); padding: .36em .56em; } .badge.rounded-pill { border-radius: 99px; } code, .id-code { font-family: var(--mono); font-size: .85em; color: var(--brand-text-strong); background: var(--brand-tint); border: 1px solid var(--line-soft); border-radius: 4px; padding: .08em .38em; } code.text-muted { color: var(--ink-mute); background: var(--card-inset); } code.text-danger { color: var(--stop); background: var(--stop-bg); border-color: var(--stop-line); } /* ---------- 14. Data tables ---------- */ .table-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--sh-1); overflow: hidden; } .table { --bs-table-bg: transparent; --bs-table-color: var(--ink-soft); width: 100%; color: var(--ink-soft); margin-bottom: 0; font-size: .855rem; } .table > thead th { font-family: var(--mono); font-size: .64rem; font-weight: 500; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-mute); background: var(--card-inset); border-bottom: 1px solid var(--line-strong); padding: .7rem .9rem; white-space: nowrap; text-align: left; vertical-align: middle; } .table > tbody td { border-bottom: 1px solid var(--line-soft); padding: .68rem .9rem; vertical-align: top; overflow-wrap: anywhere; } .table > tbody tr:last-child td { border-bottom: 0; } .table.table-hover > tbody tr:hover td { background: var(--brand-tint); } .table code { white-space: normal; overflow-wrap: anywhere; font-size: .92em; } /* severity-accented event rows */ .ev-row > td:first-child { box-shadow: inset 3px 0 0 var(--row-sev, transparent); } .ev-row.is-critical { --row-sev: var(--stop); } .ev-row.is-warning { --row-sev: var(--warn); } .ev-row.is-info { --row-sev: var(--note); } .ev-row.is-critical > td { background: color-mix(in srgb, var(--stop) 5%, transparent); } .ev-row.is-critical.table-hover td, .table.table-hover > tbody tr.ev-row.is-critical:hover td { background: color-mix(in srgb, var(--stop) 10%, transparent); } /* stacked cell: primary label + technical sub-line */ /* ---- Tabella eventi di sicurezza -------------------------------------- I dati brevi e identificativi non devono spezzarsi: un indirizzo IP mandato a capo diventa illeggibile e non si riesce nemmeno a copiarlo. Lo spazio lo cede la colonna dei dettagli, che e' l'unica elastica. */ .tbl-sec td, .tbl-sec th { vertical-align: middle; } .tbl-sec .col-nowrap { white-space: nowrap; } .tbl-sec .col-ip { white-space: nowrap; font-variant-numeric: tabular-nums; } .tbl-sec .col-dett { max-width: 30rem; min-width: 12rem; } /* dettagli dell'evento: coppie chiave/valore invece di JSON grezzo */ .dett-lista { display: flex; flex-wrap: wrap; gap: .18rem .3rem; } .dett-kv { display: inline-flex; align-items: baseline; gap: .22rem; font-size: .68rem; line-height: 1.3; background: var(--card-inset); border: 1px solid var(--line-soft); border-radius: 4px; padding: .04rem .3rem; max-width: 100%; } .dett-kv b { font-weight: 500; color: var(--ink-mute); font-family: var(--sans); } .dett-kv span { font-family: var(--mono); color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 16rem; } .dett-kv.is-alarm { background: var(--stop-bg); border-color: var(--stop-line); } .dett-kv.is-alarm span { color: var(--stop-ink); } .cell-stack { display: flex; flex-direction: column; gap: .12rem; } .cell-strong { font-weight: 600; color: var(--ink); } .cell-sub { font-family: var(--mono); font-size: .76rem; color: var(--ink-mute); } .cell-time { font-family: var(--mono); font-size: .8rem; color: var(--ink-soft); white-space: nowrap; } .cell-dash { color: var(--ink-faint); } /* severity tag */ .sev-tag { display: inline-flex; align-items: center; gap: .42rem; font-family: var(--mono); font-size: .68rem; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; color: var(--sev-c, var(--ink-mute)); } .sev-tag::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--sev-c, var(--ink-faint)); } .sev-tag.is-critical { --sev-c: var(--stop); } .sev-tag.is-warning { --sev-c: var(--warn); } .sev-tag.is-info { --sev-c: var(--note); } /* audit tags (tipo ricerca + esito) */ .atag { display: inline-flex; align-items: center; gap: .42rem; font-family: var(--mono); font-size: .68rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; color: var(--atag-c, var(--ink-mute)); } .atag::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--atag-c, var(--ink-faint)); } .atag.t-verifica { --atag-c: var(--brand-text); } .atag.o-hit { --atag-c: var(--warn); } .atag.o-clear { --atag-c: var(--ink-faint); } /* Origine IP: rosso per le connessioni anonimizzate (datacenter/VPN/proxy/Tor) */ .atag.ip-bad { --atag-c: var(--warn); color: var(--warn); font-weight: 600; } .atag.ip-clean { --atag-c: var(--brand-text); } .atag.ip-unknown { --atag-c: var(--ink-faint); } .audit-row.is-hit > td:first-child { box-shadow: inset 3px 0 0 var(--warn); } /* ---------- 15. Modals ---------- */ .modal-content { background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--r-md); box-shadow: var(--sh-3); overflow: hidden; } .modal-header { padding: 1.05rem 1.3rem; border-bottom: 1px solid var(--line-soft); background: linear-gradient(180deg, var(--card-inset), var(--card)); } .modal-title { font-family: var(--display); font-weight: 700; font-size: 1.12rem; color: var(--ink); } .modal-body { padding: 1.3rem; } .modal-footer { padding: .95rem 1.3rem; border-top: 1px solid var(--line-soft); background: var(--card-inset); } .modal-body hr { border-color: var(--line); opacity: 1; } /* ---------- 16. Tabs (security panel) ---------- */ .nav-tabs { border-bottom: 1px solid var(--line-strong); gap: .25rem; } .nav-tabs .nav-link { font-family: var(--mono); font-size: .76rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-mute); border: 0; border-bottom: 2px solid transparent; border-radius: 0; padding: .6rem .9rem; margin-bottom: -1px; background: transparent; } .nav-tabs .nav-link:hover { color: var(--ink); } .nav-tabs .nav-link.active { color: var(--brand-text-strong); background: transparent; border-bottom-color: var(--brand); } /* ---------- 16b. Admin panels ---------- */ .admin-panel { padding-bottom: 1.6rem; } /* compact page header — title left, tools/stats right, one band */ .panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .85rem 1.6rem; padding: 1.4rem 0 1.05rem; margin-bottom: 1.2rem; border-bottom: 1px solid var(--line); } .panel-head-main { min-width: 0; } .panel-title { font-family: var(--display); font-weight: 800; font-size: 1.62rem; letter-spacing: -0.02em; line-height: 1.08; color: var(--ink); margin: .26rem 0 0; } .panel-title em { font-style: normal; color: var(--brand-text); } .panel-head-aside { display: flex; align-items: center; flex-wrap: nowrap; gap: .6rem; } .panel-head-aside .btn { flex: none; white-space: nowrap; } /* search field */ .toolbar-search { position: relative; flex: none; width: 280px; } .toolbar-search svg { position: absolute; left: .72rem; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--ink-faint); pointer-events: none; } .toolbar-search .form-control { padding-left: 2.3rem; } /* compact stat readouts */ .stat-card { display: flex; align-items: center; gap: .55rem; padding: .46rem .8rem; background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--line-strong); border-radius: var(--r-sm); box-shadow: var(--sh-1); } .stat-card.is-warn { border-left-color: var(--warn); } .stat-card.is-crit { border-left-color: var(--stop); } .stat-num { font-family: var(--display); font-weight: 800; font-size: 1.5rem; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; } .stat-card.is-warn .stat-num { color: var(--warn); } .stat-card.is-crit .stat-num { color: var(--stop); } .stat-label { font-family: var(--mono); font-size: .64rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; color: var(--ink-mute); } .panel-empty { text-align: center; color: var(--ink-mute); font-family: var(--mono); font-size: .82rem; letter-spacing: .03em; padding: 2.6rem 1rem; border: 1px dashed var(--line-strong); border-radius: var(--r-md); background: var(--card-inset); } /* user list — responsive grid */ .users-grid { display: grid; grid-template-columns: 1fr; gap: 1.05rem; /* Ogni scheda tiene la sua altezza: con i sotto-account le aziende hanno dimensioni molto diverse e lo stretch lascerebbe schede mezze vuote. */ align-items: start; } @media (min-width: 720px) { .users-grid { grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); } } /* Sezioni per categoria nella gestione utenti: un colore per famiglia (lo stesso del cat-tag) su titolo e bordo sinistro delle schede, cosi' si capisce in che gruppo si sta lavorando anche a meta' scroll. */ .cat-groups { display: flex; flex-direction: column; gap: 2.2rem; } .cat-group { --cat-color: var(--note); } .cat-group.is-admin { --cat-color: var(--brand); } .cat-group.is-sale { --cat-color: var(--warn); } .cat-group-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: .35rem .9rem; padding-bottom: .65rem; margin-bottom: 1.05rem; border-bottom: 1px solid var(--line); } .cat-group-title { display: inline-flex; align-items: center; gap: .6rem; margin: 0; font-family: var(--display); font-weight: 700; font-size: 1.2rem; letter-spacing: -0.01em; color: var(--ink); } .cat-group-title::before { content: ""; width: .72rem; height: .72rem; border-radius: 3px; background: var(--cat-color); flex: none; } .cat-group-meta { font-family: var(--mono); font-size: .72rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-mute); } .cat-group-descr { margin-left: auto; font-size: .84rem; color: var(--ink-mute); } .cat-group .user-card { border-left: 3px solid var(--cat-color); } /* filter chips */ .filter-chips { display: flex; flex-wrap: wrap; gap: .42rem; margin-bottom: 1.2rem; } .chip { font-family: var(--mono); font-size: .73rem; font-weight: 500; letter-spacing: .02em; padding: .42rem .85rem; border-radius: 99px; background: var(--card); color: var(--ink-mute); border: 1px solid var(--line-strong); cursor: pointer; transition: background-color .14s ease, color .14s ease, border-color .14s ease; } .chip:hover { color: var(--ink); border-color: var(--ink-faint); } .chip.is-active { background: var(--brand); color: #fff; border-color: var(--brand-deep); box-shadow: 0 4px 12px -5px rgba(var(--brand-rgb), .6); } .chip-n { opacity: .6; } .chip.is-active .chip-n { opacity: .85; } /* riga filtri: chips a sinistra, switch "nascondi disattivati" a destra */ .filter-row { display: flex; align-items: center; justify-content: space-between; gap: .8rem 1.2rem; flex-wrap: wrap; margin-bottom: 1.2rem; } .filter-row .filter-chips { margin-bottom: 0; } /* Due gruppi di chip (stato, categoria) affiancati, separati da un filetto verticale; su schermi stretti vanno uno sotto l'altro senza filetto. */ .filter-groups { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem 1.1rem; min-width: 0; } .filter-chips-cat { align-items: center; } .filter-chips-label { font-family: var(--mono); font-size: .66rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); margin-right: .1rem; } @media (min-width: 720px) { .filter-chips-cat { padding-left: 1.1rem; border-left: 1px solid var(--line-strong); } } /* Chip di categoria: pallino nel colore della famiglia; da attivo il chip prende quel colore al posto del verde standard, cosi' filtro, sezione e tag dicono la stessa cosa con lo stesso colore. */ .chip-cat { display: inline-flex; align-items: center; gap: .45rem; --cat-color: var(--note); --cat-deep: var(--note-ink); } .chip-cat.is-sale { --cat-color: var(--warn); --cat-deep: var(--warn-ink); } .chip-cat.is-admin { --cat-color: var(--brand); --cat-deep: var(--brand-text-strong); } .chip-dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--cat-color); flex: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--cat-color) 22%, transparent); } .chip-cat.is-active { background: var(--cat-color); border-color: var(--cat-deep); box-shadow: 0 4px 12px -5px color-mix(in srgb, var(--cat-color) 60%, transparent); } .chip-cat.is-active .chip-dot { background: #fff; box-shadow: 0 0 0 2px rgba(255, 255, 255, .35); } .hide-off-switch { display: flex; align-items: center; gap: .55rem; margin: 0; padding: 0; min-height: 0; cursor: pointer; user-select: none; } .hide-off-switch .form-check-input { float: none; flex: none; width: 2.15em; height: 1.2em; margin: 0; cursor: pointer; } .hide-off-switch .form-check-input:checked { background-color: var(--brand); border-color: var(--brand-deep); } .hide-off-switch .form-check-input:focus { border-color: var(--ok-line); box-shadow: 0 0 0 .18rem rgba(var(--brand-rgb), .14); } .hide-off-switch .form-check-label { font-family: var(--mono); font-size: .73rem; font-weight: 500; letter-spacing: .02em; color: var(--ink-mute); } /* user card */ .user-card { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--sh-1); overflow: hidden; animation: feed-in .34s ease both; transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease; } .user-card:hover { box-shadow: var(--sh-2); border-color: var(--line-strong); transform: translateY(-2px); } .user-card.is-inactive { background: var(--card-inset); } .user-card.is-inactive .monogram { filter: grayscale(1); opacity: .65; } .user-card.is-inactive .user-name { color: var(--ink-mute); } .user-top { display: flex; align-items: center; gap: .85rem; padding: 1.05rem 1.15rem; } .monogram { flex: none; width: 47px; height: 47px; display: grid; place-items: center; border-radius: 13px; font-family: var(--display); font-weight: 700; font-size: 1.04rem; background: var(--paper-deep); color: var(--ink-soft); border: 1px solid var(--line-strong); } .monogram.is-admin { background: linear-gradient(160deg, var(--brand-bright), var(--brand)); color: #fff; border-color: var(--brand-deep); box-shadow: 0 5px 14px -5px rgba(var(--brand-rgb), .55); } .user-id { min-width: 0; flex: 1 1 auto; } .user-name-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } .user-name { font-family: var(--display); font-weight: 700; font-size: 1.08rem; letter-spacing: -0.01em; color: var(--ink); overflow-wrap: anywhere; } .role-tag { font-family: var(--mono); font-size: .6rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; padding: .22em .5em; border-radius: 4px; background: var(--paper-deep); color: var(--ink-mute); border: 1px solid var(--line-strong); } .role-tag.is-admin { background: var(--brand-soft); color: var(--brand-text-strong); border-color: var(--ok-line); } /* Categoria dell'account (agenzia / admin / sale): stessa scala del role-tag, colore diverso per famiglia cosi' si legge a colpo d'occhio anche in tabella. */ .cat-tag { display: inline-block; font-family: var(--mono); font-size: .6rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; padding: .22em .5em; border-radius: 4px; white-space: nowrap; background: var(--note-bg); color: var(--note-ink); border: 1px solid var(--note-line); } .cat-tag.is-admin { background: var(--brand-soft); color: var(--brand-text-strong); border-color: var(--ok-line); } .cat-tag.is-sale { background: var(--warn-bg); color: var(--warn-ink); border-color: var(--warn-line); } .user-status { display: inline-flex; align-items: center; gap: .4rem; margin-top: .25rem; font-size: .8rem; font-weight: 500; color: var(--ink-faint); } .user-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 22%, transparent); } .user-status.is-on { color: var(--ok); } .user-quotas { padding: .85rem 1.15rem .95rem; border-top: 1px solid var(--line-soft); background: var(--card-inset); } .user-quotas-label { display: block; font-family: var(--mono); font-size: .62rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: .6rem; } .umeter + .umeter { margin-top: .6rem; } .umeter-head { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; } .umeter-name { font-size: .83rem; color: var(--ink-soft); } .umeter-val { font-family: var(--mono); font-size: .76rem; color: var(--ink-mute); font-variant-numeric: tabular-nums; } .umeter-track { margin-top: .28rem; height: 5px; border-radius: 99px; background: var(--paper-deep); overflow: hidden; } .umeter-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--brand), var(--brand-bright)); } .umeter.is-high .umeter-fill { background: linear-gradient(90deg, #c2870f, #e0a528); } .umeter.is-full .umeter-fill { background: linear-gradient(90deg, var(--stop), #d4554b); } .umeter.is-full .umeter-val { color: var(--stop); font-weight: 500; } .user-quotas-none { font-size: .83rem; color: var(--ink-faint); } /* blocco sotto-account nella scheda dell'azienda (solo riepilogo) */ .user-subs { padding: .8rem 1.15rem .9rem; border-top: 1px solid var(--line-soft); } .user-subs-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .55rem; } .user-subs-head .user-quotas-label { margin-bottom: 0; } .sub-add { border: 1px dashed var(--line-strong); background: transparent; color: var(--brand-text-strong); font-size: .76rem; font-weight: 500; padding: .18rem .55rem; border-radius: 6px; white-space: nowrap; transition: background .16s ease, border-color .16s ease; } .sub-add:hover { background: var(--brand-soft); border-color: var(--ok-line); } .sub-empty { margin: 0; font-size: .8rem; color: var(--ink-faint); } /* riepilogo sotto-account nella scheda (la gestione sta nel modal) */ .subs-meta { margin: 0; font-size: .8rem; color: var(--ink-mute); } .subs-pills { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .5rem; } .sub-pill { font-family: var(--mono); font-size: .72rem; padding: .14rem .55rem; border-radius: 99px; background: var(--card-inset); border: 1px solid var(--line-soft); color: var(--ink-soft); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sub-pill.is-off { color: var(--ink-faint); background: transparent; border-style: dashed; } .sub-pill.is-more { color: var(--ink-faint); background: transparent; } /* totale sotto-account dentro la scheda dell'azienda */ .user-quotas-agg { margin-top: .9rem; padding-top: .8rem; border-top: 1px dashed var(--line-strong); } /* modal gestione sotto-account — quasi a tutto schermo: le card dei sotto-account hanno bisogno di respiro, non di scroll */ .modal-subs-dialog { width: min(1500px, calc(100vw - 2.5rem)); max-width: none; margin-left: auto; margin-right: auto; } .subs-intro { margin: 0 0 .9rem; font-size: .85rem; color: var(--ink-mute); } .subs-toolbar { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; margin-bottom: .65rem; } .subs-toolbar-actions { display: flex; gap: .45rem; flex-wrap: wrap; } .subs-counts { font-family: var(--mono); font-size: .73rem; letter-spacing: .02em; color: var(--ink-mute); } .subs-hidden-note { display: flex; align-items: center; gap: .5rem; margin-bottom: .6rem; font-size: .78rem; color: var(--ink-faint); } .subs-hidden-note .link-btn { border: none; background: none; padding: 0; font-size: .78rem; color: var(--brand-text-strong); text-decoration: underline; cursor: pointer; } .subs-hidden-note .link-btn:hover { color: var(--brand-text); } /* card dei sotto-account nel modal. align-items: start di proposito: ogni card tiene la SUA altezza — un pannello inline aperto (o l'avviso "senza limiti") allunga solo la sua card, mai le vicine della stessa fila. */ .subs-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: .8rem; align-items: start; } .subs-card { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--sh-1); overflow: hidden; transition: box-shadow .2s ease, border-color .2s ease; } .subs-card:hover { box-shadow: var(--sh-2); border-color: var(--line-strong); } .subs-card.is-off { background: var(--card-inset); opacity: .75; } .subs-card-head { display: flex; flex-direction: column; gap: .15rem; padding: .7rem .85rem .55rem; } .subs-card-id { display: flex; align-items: baseline; gap: .55rem; flex-wrap: wrap; } .sub-name { font-family: var(--display); font-weight: 700; font-size: .96rem; letter-spacing: -0.01em; color: var(--ink); overflow-wrap: anywhere; } .sub-state { font-size: .72rem; color: var(--ink-faint); white-space: nowrap; } .sub-state.is-on { color: var(--ok); } .sub-state::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin-right: .32rem; vertical-align: 1px; } .sub-login { font-family: var(--mono); font-size: .7rem; color: var(--ink-faint); overflow-wrap: anywhere; } .subs-card-quotas { padding: .6rem .85rem .7rem; border-top: 1px solid var(--line-soft); background: var(--card-inset); flex: 1 1 auto; } .subs-card-quotas .umeter + .umeter { margin-top: .45rem; } .umeter.is-offtype .umeter-name { color: var(--ink-faint); } .umeter.is-offtype .umeter-val { font-size: .68rem; color: var(--ink-faint); font-style: italic; } /* track "vuota" dei tipi non abilitati: stessa geometria di quella vera (altezza e margine identici), disegnata a trattini perche' non e' una barra a zero ma un tipo spento */ .umeter-track.is-void { background: repeating-linear-gradient(90deg, var(--line-soft) 0 8px, transparent 8px 16px); } .subs-card-warn { margin: 0; font-size: .78rem; color: var(--warn-ink); background: var(--warn-bg); border: 1px solid var(--warn-line); border-radius: var(--r-xs); padding: .45rem .6rem; } .subs-card-actions { display: flex; flex-wrap: wrap; gap: .35rem; padding: .55rem .85rem .7rem; border-top: 1px solid var(--line-soft); } .subs-card-actions .btn { flex: 1 1 auto; padding: .16rem .5rem; font-size: .74rem; } .subs-card .sub-inline { margin: 0 .85rem .8rem; } /* pannelli inline (nuovo / limiti / limiti a tutti / password) */ .sub-inline { margin-top: .4rem; padding: .75rem .85rem; border: 1px solid var(--ok-line); border-radius: var(--r-sm); background: var(--brand-tint); } .sub-inline .form-text { font-size: .74rem; } /* i campi limite: caselle ancorate in basso, cosi' un'etichetta lunga (che puo' andare a capo) non spinge giu' la sua casella */ .limit-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; align-items: end; } .limit-field { display: flex; flex-direction: column; min-width: 0; } .limit-label { font-size: .72rem; color: var(--ink-mute); margin-bottom: .25rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sub-inline-head { margin-bottom: .55rem; font-size: .8rem; color: var(--ink-soft); } .sub-inline-head code { overflow-wrap: anywhere; } .sub-inline-sub { margin: .1rem 0 .35rem; font-family: var(--mono); font-size: .64rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); } .sub-inline-actions { display: flex; align-items: center; justify-content: flex-end; gap: .45rem; margin-top: .7rem; } @media (max-width: 700px) { .subs-cards { grid-template-columns: 1fr; } } .user-actions { display: flex; flex-wrap: wrap; gap: .45rem; padding: .8rem 1.15rem; border-top: 1px solid var(--line-soft); } .user-actions .btn { flex: 1 1 auto; } /* security filter bar */ .filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; padding: .75rem .85rem; margin-bottom: 1.1rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--sh-1); } .filter-bar .form-control, .filter-bar .form-select { flex: 1 1 158px; min-width: 0; } .filter-bar-actions { display: flex; gap: .4rem; } .filter-bar-actions .btn { flex: none; } /* table footer / toolbar */ .panel-foot, .panel-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .panel-foot { margin-top: 1rem; } .panel-bar { margin-bottom: 1rem; } .panel-meta { font-family: var(--mono); font-size: .74rem; letter-spacing: .02em; color: var(--ink-mute); } @keyframes feed-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } } /* ---------- 17. Login ---------- */ body.page-login { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2.5rem 1rem; } .auth { width: 100%; max-width: 420px; } .auth-logo { display: block; width: 148px; max-width: 50%; height: auto; margin: 0 auto 1.35rem; } .auth-card { background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--r-lg); box-shadow: var(--sh-3); overflow: hidden; } .auth-head { position: relative; padding: 1.95rem 2rem 1.55rem; text-align: center; color: #ffffff; background: radial-gradient(380px 190px at 50% -30px, rgba(255, 255, 255, .24), transparent 72%), linear-gradient(170deg, var(--brand-bright), var(--brand)); border-bottom: 3px solid var(--brand-deep); } .auth-head .eyebrow { color: rgba(255, 255, 255, .92); } .auth-head .eyebrow::before { background: rgba(255, 255, 255, .92); } .auth-emblem { width: 54px; height: 54px; margin: 0 auto .9rem; display: grid; place-items: center; border-radius: 14px; color: #ffffff; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .36); box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .4); } .auth-emblem svg { width: 28px; height: 28px; } .auth-title { font-family: var(--display); font-weight: 800; font-size: 1.62rem; letter-spacing: -0.02em; color: #fff; margin: .65rem 0 0; } .auth-tag { margin: .35rem 0 0; font-size: .9rem; color: rgba(255, 255, 255, .82); } .auth-body { padding: 1.8rem 2rem 2rem; } .auth-foot { margin: 1.4rem 0 0; text-align: center; font-size: .78rem; color: var(--ink-faint); } [data-theme="dark"] .auth-head { background: radial-gradient(380px 190px at 50% -30px, rgba(255, 255, 255, .14), transparent 72%), linear-gradient(170deg, #2b5a9c, #234a82); } /* ---------- 18. Footer ---------- */ /* Il footer sta in fondo alla finestra anche quando la pagina e' corta: il contenuto si prende tutto lo spazio che avanza e lo spinge giu'. Quando la pagina e' lunga non cambia niente, il footer resta dopo il contenuto. Il login ha un'impaginazione sua (tutto centrato) e resta fuori. */ body:not(.page-login) { display: flex; flex-direction: column; min-height: 100vh; } body:not(.page-login) > main { flex: 1 0 auto; } body:not(.page-login) > .navbar, body:not(.page-login) > footer { flex: none; } footer { margin-top: 3rem; padding: 1.6rem 0; border-top: 1px solid var(--line) !important; background: transparent; } footer small { font-family: var(--mono); font-size: .72rem; letter-spacing: .04em; color: var(--ink-faint); } /* ---------- 19. Motion ---------- */ @keyframes verdict-in { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } } @keyframes spine-draw { to { transform: scaleY(1); } } @keyframes reveal-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } .reveal { opacity: 0; animation: reveal-up .62s cubic-bezier(.2, .7, .2, 1) forwards; animation-delay: calc(var(--i, 0) * 85ms); } /* ---------- 20. Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0ms !important; transition-duration: .001ms !important; } .reveal { opacity: 1; } .quota-fill { transition: none; } } /* ---------- 20b. Caricamento liste da Excel — dropzone & danger zone ---------- */ .sfm-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.2rem; margin-bottom: 1.4rem; } .sfm-grid > .sfm-card { min-width: 0; } .sfm-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--sh-1); padding: 1.4rem 1.5rem; } .sfm-card h3 { font-family: var(--display); font-weight: 700; font-size: 1.05rem; margin: 0 0 .25rem; color: var(--ink); display: flex; align-items: center; gap: .55rem; } .sfm-card-sub { color: var(--ink-mute); font-size: .88rem; margin: 0 0 1rem; } .sfm-card-icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: var(--brand-soft); color: var(--brand-text-strong); flex: none; } .sfm-card-icon svg { width: 16px; height: 16px; } /* Hero meta (count + last upload) styled inline next to title */ .sfm-meta-row { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .55rem; } .sfm-chip { display: inline-flex; align-items: center; gap: .45rem; padding: .32rem .65rem; background: var(--card-inset); border: 1px solid var(--line); border-radius: 999px; font-family: var(--mono); font-size: .76rem; color: var(--ink-soft); } .sfm-chip strong { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; } .sfm-chip svg { width: 13px; height: 13px; color: var(--ink-mute); } /* Dropzone */ .sfm-dropzone { position: relative; border: 1.5px dashed var(--line-strong); border-radius: var(--r-md); background: var(--card-inset); padding: 2.1rem 1.4rem; text-align: center; transition: background-color .15s, border-color .15s; cursor: pointer; } .sfm-dropzone:hover { border-color: var(--brand); background: var(--brand-tint); } .sfm-dropzone.is-drag { border-color: var(--brand); background: var(--brand-soft); } .sfm-dropzone.is-loaded { border-style: solid; border-color: var(--brand); background: var(--brand-tint); } .sfm-dropzone input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; } .sfm-dropzone-icon { width: 44px; height: 44px; margin: 0 auto .6rem; display: flex; align-items: center; justify-content: center; background: var(--card); border: 1px solid var(--line); border-radius: 50%; color: var(--brand-text-strong); } .sfm-dropzone-icon svg { width: 22px; height: 22px; } .sfm-dropzone-title { font-family: var(--display); font-weight: 700; font-size: 1.02rem; color: var(--ink); margin: 0; } .sfm-dropzone-hint { font-size: .82rem; color: var(--ink-mute); margin: .25rem 0 0; } .sfm-dropzone-filename { margin-top: .65rem; font-family: var(--mono); font-size: .78rem; color: var(--brand-text-strong); word-break: break-all; } /* Inline preview stats row */ .sfm-preview-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .55rem; margin: 1rem 0 0; } .sfm-preview-stat { background: var(--card-inset); border: 1px solid var(--line); border-radius: var(--r-sm); padding: .55rem .7rem; } .sfm-preview-stat.is-warn { background: var(--warn-bg); border-color: var(--warn-line); } .sfm-preview-stat.is-ok { background: var(--ok-bg); border-color: var(--ok-line); } .sfm-preview-stat-num { font-family: var(--display); font-weight: 800; font-size: 1.3rem; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; } .sfm-preview-stat.is-warn .sfm-preview-stat-num { color: var(--warn-ink); } .sfm-preview-stat.is-ok .sfm-preview-stat-num { color: var(--ok-ink); } .sfm-preview-stat-label { font-family: var(--mono); font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-mute); margin-top: .2rem; display: block; } .sfm-preview-errors { margin-top: .8rem; padding: .55rem .75rem; background: var(--warn-bg); border: 1px solid var(--warn-line); border-radius: var(--r-sm); font-size: .82rem; color: var(--warn-ink); max-height: 140px; overflow-y: auto; } .sfm-preview-errors code { font-family: var(--mono); font-size: .78rem; color: var(--warn-ink); background: color-mix(in srgb, var(--card) 60%, transparent); padding: 0 .25rem; border-radius: 3px; } /* Action row inside upload card */ .sfm-actions { display: flex; gap: .65rem; align-items: center; margin-top: 1.15rem; } .sfm-actions .btn { flex: none; } .sfm-actions .sfm-action-hint { font-size: .82rem; color: var(--ink-mute); margin-left: auto; } /* Danger zone — visually distinct */ .sfm-danger { border: 1px solid var(--stop-line); background: var(--stop-bg); border-radius: var(--r-md); padding: 1.3rem 1.5rem; position: relative; } .sfm-danger::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--stop); border-radius: var(--r-md) 0 0 var(--r-md); } .sfm-danger h3 { color: var(--stop-ink); display: flex; align-items: center; gap: .55rem; } .sfm-danger .sfm-card-icon { background: color-mix(in srgb, var(--stop) 14%, transparent); color: var(--stop); } .sfm-danger-body { color: var(--stop-ink); font-size: .9rem; margin: 0 0 1rem; } .btn-danger-outline { background: transparent; border: 1.5px solid var(--stop); color: var(--stop); font-weight: 600; } .btn-danger-outline:hover:not(:disabled) { background: var(--stop); color: #fff; } @media (max-width: 767.98px) { .sfm-grid { grid-template-columns: 1fr; } .sfm-card, .sfm-danger { padding: 1.1rem 1.15rem; } .sfm-dropzone { padding: 1.6rem 1rem; } .sfm-actions { flex-wrap: wrap; } .sfm-actions .sfm-action-hint { margin-left: 0; width: 100%; } } /* ---------- 21. Responsive ---------- */ @media (max-width: 575.98px) { body { font-size: 15px; } .masthead { padding: 2.3rem 0 1.4rem; } .navbar .nav-link { padding: .4rem .4rem !important; } .auth-body { padding: 1.5rem 1.3rem 1.6rem; } .auth-head { padding: 1.8rem 1.3rem 1.4rem; } .card-body { padding: 1.15rem; } .wrap-wide { padding-inline: 1rem; } .panel-head { padding: 1.05rem 0 .85rem; } .panel-title { font-size: 1.38rem; } .panel-head-aside { width: 100%; flex-wrap: wrap; } .toolbar-search { flex: 1 1 100%; } .table { font-size: .82rem; } } /* ---------- 22. Tipografia delle etichette ---------- */ /* Nel CRM Credito le etichette sono in Inter, non in monospace: il mono resta solo sui DATI (codici fiscali, indirizzi IP, contatori). */ .eyebrow, .form-label, .module-kicker, .quota-label, .table > thead th, .badge, .btn-sm, .atag, .sev-tag, footer small { font-family: var(--sans); font-weight: 600; letter-spacing: .05em; } .form-label { font-size: .78rem; letter-spacing: .03em; text-transform: none; color: var(--ink-soft); } .btn-sm { font-size: .78rem; letter-spacing: .01em; } footer small { font-weight: 400; letter-spacing: .01em; font-size: .78rem; } /* ---------- 23. Esiti della verifica ---------- */ /* Una ricerca, due controlli: ogni esito ha la sua riga, cosi' chi legge sa QUALE controllo ha dato riscontro. */ .esiti { display: grid; gap: .65rem; animation: verdict-in .42s cubic-bezier(.2, .7, .2, 1) both; } .esiti-cf { font-size: .85rem; color: var(--ink-mute); } .esiti-cf strong { font-family: var(--mono); font-weight: 500; letter-spacing: .03em; color: var(--ink); } .esito { --e-c: var(--note); --e-bg: var(--note-bg); --e-line: var(--note-line); --e-ink: var(--note-ink); position: relative; display: flex; align-items: center; gap: .9rem; padding: .95rem 1.05rem .95rem 1.25rem; overflow: hidden; border: 1px solid var(--e-line); border-radius: var(--r-sm); background: var(--e-bg); color: var(--e-ink); } .esito::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--e-c); } .esito.is-ok { --e-c: var(--ok); --e-bg: var(--ok-bg); --e-line: var(--ok-line); --e-ink: var(--ok-ink); } .esito.is-stop { --e-c: var(--stop); --e-bg: var(--stop-bg); --e-line: var(--stop-line); --e-ink: var(--stop-ink); } .esito.is-warn { --e-c: var(--warn); --e-bg: var(--warn-bg); --e-line: var(--warn-line); --e-ink: var(--warn-ink); } .esito.is-note { --e-c: var(--note); --e-bg: var(--note-bg); --e-line: var(--note-line); --e-ink: var(--note-ink); } .esito-icon { flex: none; width: 2.3rem; height: 2.3rem; display: grid; place-items: center; border-radius: 50%; background: var(--e-c); color: #fff; font-size: 1.15rem; line-height: 1; } .esito-main { flex: 1 1 auto; min-width: 0; } .esito-label { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; opacity: .8; } .esito-value { display: block; font-size: 1.08rem; font-weight: 700; line-height: 1.25; } .esito-note { margin: .25rem 0 0; font-size: .85rem; line-height: 1.45; } /* gli indirizzi su cui la polizza e' attiva */ .esito-indirizzi { margin-top: .6rem; padding-top: .55rem; border-top: 1px solid var(--e-line); } .esito-indirizzi-titolo { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; opacity: .8; } .esito-indirizzi ul { margin: .3rem 0 0; padding: 0; list-style: none; } .esito-indirizzi li { font-size: .88rem; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; } .esito-indirizzi li + li { margin-top: .2rem; } .esito-badge { flex: none; font-size: .7rem; font-weight: 700; letter-spacing: .08em; padding: .3em .7em; border-radius: 99px; border: 1px solid var(--e-c); color: var(--e-c); background: color-mix(in srgb, var(--card) 70%, transparent); white-space: nowrap; } @media (max-width: 480px) { .esito { flex-wrap: wrap; } .esito-badge { margin-left: 3.2rem; } } /* ---------- 24. Interruttore tema ---------- */ .theme-btn { flex: none; width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border-radius: var(--r-xs); border: 1px solid rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .08); color: #fff; cursor: pointer; transition: background-color .15s ease, border-color .15s ease; } .theme-btn:hover { background: rgba(255, 255, 255, .2); border-color: #fff; } .theme-btn svg { width: 17px; height: 17px; display: block; } .theme-btn .icon-moon { display: none; } [data-theme="dark"] .theme-btn .icon-sun { display: none; } [data-theme="dark"] .theme-btn .icon-moon { display: block; } /* nel login non c'e' la barra: l'interruttore galleggia in alto a destra */ .theme-btn.is-float { position: fixed; top: 1.25rem; right: 1.25rem; z-index: 20; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--ink-soft); box-shadow: var(--sh-2); } .theme-btn.is-float:hover { background: var(--card-inset); border-color: var(--line-strong); } /* ---------- 25. Tema scuro: ritocchi ai componenti ---------- */ [data-theme="dark"] .navbar, [data-theme="dark"] .navbar.bg-primary { background: linear-gradient(180deg, #2b5a9c 0%, #234a82 100%) !important; } [data-theme="dark"] .bl-brand-logo { background: #f2f2f2; } [data-theme="dark"] .btn-close { filter: invert(1) grayscale(1) brightness(1.6); } [data-theme="dark"] .form-control, [data-theme="dark"] .form-select { color-scheme: dark; } [data-theme="dark"] .table { --bs-table-color: var(--ink-soft); --bs-table-bg: transparent; }