, token-only, brand-aware.
* Estendono la fondazione sopra: aggiungono solo i bespoke non coperti.
* ===================================================================== */
/* ==================== Utenti (#usersPopup) — overrides-added ==================== */
/* ============================================================
* OVERRIDE SEZIONE "Utenti" — body.portal-gestione #usersPopup
* Token-only. La fondazione (.gestione-inline-panel) copre gia':
* frame popup, header/title, management-tabs, .section, label,
* input/select/textarea, .btn/.btn.primary/.sec/.danger,
* .simple-table, .management-search, hint.
* Qui SOLO cio' che resta fuori per questo popup.
* ============================================================ */
/* 1. hint con #6b7280 hardcoded inline + hint vari ---- */
body.portal-gestione #usersPopup small,
body.portal-gestione #usersPopup #userCostPerHourHint,
body.portal-gestione #usersPopup #userFormHint,
body.portal-gestione #usersPopup #userBatchHint {
color: var(--ott-500) !important;
font-size: var(--fs-11-5) !important;
}
/* 2. titoli .section h2 ('Utenti batch', 'Utenti registrati') --
* la fondazione stila popup-title / .imp-sechead h3, non h2 raw */
body.portal-gestione #usersPopup .section h2 {
font-family: var(--ff-display) !important;
font-weight: 800 !important;
font-size: var(--fs-15) !important;
color: var(--ott-700) !important;
letter-spacing: -0.01em;
margin: 0 0 12px !important;
}
/* 3. toggle collassabile 'Utenti batch' — triangolo neutro/attivo */
body.portal-gestione #usersPopup .section-triangle {
border-left-color: var(--ott-500) !important;
}
body.portal-gestione #usersPopup .section-title-row:hover .section-triangle,
body.portal-gestione #usersPopup .collapsible-section:not(.collapsed) .section-triangle {
border-left-color: var(--ott-base) !important;
}
/* 4. .btn-compact (Modifica/Cancella/template) — versione bassa
* coerente coi .btn della fondazione, solo dimensioni */
body.portal-gestione #usersPopup .btn.btn-compact {
height: 30px;
padding: 0 12px !important;
font-size: var(--fs-12-5) !important;
}
/* 5. input[type=file] (batch xlsx) — non matchato dalla lista
* input-type della fondazione: stesso look field a token */
body.portal-gestione #usersPopup input[type="file"] {
font-size: var(--fs-12-5) !important;
color: var(--ott-500) !important;
background: var(--ott-50) !important;
border: 1px solid var(--ott-200) !important;
border-radius: var(--rd-r-8) !important;
padding: 7px 10px !important;
}
body.portal-gestione #usersPopup input[type="file"]:hover {
background: #fff !important;
border-color: var(--ott-300) !important;
}
/* ==================== Clienti (#clientsPopup) — overrides-added ==================== */
/* ===== Impostazioni · Clienti — override scoped (token-only) =====
* #clientsPopup riceve .gestione-inline-panel via JS (deskcontrol-portal.js:1388/1419)
* → frame/header/tabs/section/btn/simple-table gia' coperti dalla fondazione.
* Qui si riallineano SOLO le classi bespoke client-* (client-form.css) e gli
* hex inline del markup, che la fondazione non tocca. */
/* --- fieldset anagrafici: token legacy --brand-* -> ottanio --- */
body.portal-gestione #clientsPopup .client-fs {
border: 1px solid var(--ott-200) !important;
border-radius: var(--rd-r-8) !important;
background: var(--ott-50) !important;
}
body.portal-gestione #clientsPopup .client-fs-legend {
font-family: var(--ff-display);
color: var(--ott-700) !important;
letter-spacing: var(--ls-caps-tight);
}
body.portal-gestione #clientsPopup .client-fs label {
color: var(--ott-500) !important;
letter-spacing: var(--ls-caps-wide);
}
/* --- input/select/textarea bespoke: ribattono i campi della fondazione
* (6px/radius6/#fff) -> riallineo a h36/ott-50/ott-200/rd-r-8 --- */
body.portal-gestione #clientsPopup .client-fs input[type="text"],
body.portal-gestione #clientsPopup .client-fs input[type="tel"],
body.portal-gestione #clientsPopup .client-fs input[type="email"],
body.portal-gestione #clientsPopup .client-fs input[type="url"],
body.portal-gestione #clientsPopup .client-fs input[type="date"],
body.portal-gestione #clientsPopup .client-fs select {
height: 36px;
padding: 0 12px !important;
background: var(--ott-50) !important;
border: 1px solid var(--ott-200) !important;
border-radius: var(--rd-r-8) !important;
font-size: var(--fs-13) !important;
color: var(--ink) !important;
}
body.portal-gestione #clientsPopup .client-fs textarea {
background: var(--ott-50) !important;
border: 1px solid var(--ott-200) !important;
border-radius: var(--rd-r-8) !important;
font-size: var(--fs-13) !important;
color: var(--ink) !important;
}
body.portal-gestione #clientsPopup .client-fs input:hover,
body.portal-gestione #clientsPopup .client-fs select:hover,
body.portal-gestione #clientsPopup .client-fs textarea:hover {
background: #fff !important;
}
body.portal-gestione #clientsPopup .client-fs input:focus,
body.portal-gestione #clientsPopup .client-fs select:focus,
body.portal-gestione #clientsPopup .client-fs textarea:focus {
border-color: var(--ott-base) !important;
background: #fff !important;
box-shadow: var(--rd-focus-ring) !important;
}
/* --- hint inline tipizzati --- */
body.portal-gestione #clientsPopup .client-field-hint { color: var(--ott-500); }
body.portal-gestione #clientsPopup .client-field-hint.error { color: var(--ott-error) !important; }
body.portal-gestione #clientsPopup .client-field-hint.ok { color: var(--ott-green) !important; }
/* --- avatar preview / lista indirizzi --- */
body.portal-gestione #clientsPopup .client-avatar-preview {
background: var(--ott-100) !important;
border: 1px solid var(--ott-200) !important;
}
body.portal-gestione #clientsPopup .client-avatar-preview span { color: var(--ott-500) !important; }
body.portal-gestione #clientsPopup .client-address-empty { color: var(--ott-500) !important; }
body.portal-gestione #clientsPopup .client-address-row {
border: 1px solid var(--ott-200) !important;
border-radius: var(--rd-r-8) !important;
}
body.portal-gestione #clientsPopup .client-address-row-title { color: var(--ott-700) !important; }
/* --- griglia card clienti (master view) --- */
body.portal-gestione #clientsPopup .client-card {
border: 1px solid var(--ott-200) !important;
border-radius: var(--rd-r-9) !important;
box-shadow: var(--rd-shadow-sm);
transition: box-shadow var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
body.portal-gestione #clientsPopup .client-card:hover {
box-shadow: var(--rd-shadow-md) !important;
border-color: var(--ott-base) !important;
}
body.portal-gestione #clientsPopup .client-card-avatar {
background: var(--ott-100) !important;
border: 1px solid var(--ott-200) !important;
color: var(--ott-500) !important;
}
body.portal-gestione #clientsPopup .client-card-name { color: var(--ink) !important; }
body.portal-gestione #clientsPopup .client-card-sub { color: var(--ott-500) !important; }
/* badge stato su card -> pill tenue */
body.portal-gestione #clientsPopup .client-card-badge {
background: var(--ott-100) !important;
color: var(--ott-500) !important;
border-radius: var(--rd-r-pill) !important;
letter-spacing: var(--ls-caps-wide);
}
body.portal-gestione #clientsPopup .client-card-badge.inactive {
background: color-mix(in srgb, var(--ott-red) 12%, white) !important;
color: var(--ott-red) !important;
}
/* --- small/code inline del markup (hex hardcoded) --- */
body.portal-gestione #clientsPopup small[style] { color: var(--ott-500) !important; }
body.portal-gestione #clientsPopup .client-avatar-preview span[style] { color: var(--ott-500) !important; }
body.portal-gestione #clientsPopup label > span[style] { color: var(--ott-300) !important; }
body.portal-gestione #clientsPopup small code,
body.portal-gestione #clientsPopup .client-field-hint code {
font-family: var(--ff-mono);
font-size: var(--fs-11);
background: var(--ott-100);
color: var(--ott-base);
padding: 1px 5px;
border-radius: var(--rd-r-5);
}
/* --- CTA "bare" (.btn senza .sec/.ghost/.danger) = primario brand,
* allineato al pulsante CTA del mockup --- */
body.portal-gestione #clientsPopup .btn:not(.sec):not(.ghost):not(.danger):not(.primary) {
background: var(--ott-base) !important;
color: #fff !important;
border-color: var(--ott-base) !important;
}
body.portal-gestione #clientsPopup .btn:not(.sec):not(.ghost):not(.danger):not(.primary):hover {
background: var(--ott-soft) !important;
border-color: var(--ott-soft) !important;
}
/* ==================== Tecnici (#peritiPopup) — overrides-added ==================== */
/* ===== Tecnici — #peritiPopup: override token-only scoped =====
* Allinea i componenti bespoke che la fondazione non copre.
* Tutto sotto body.portal-gestione #peritiPopup, solo token ottanio. */
/* --- multi-check pills (titoli studio / ordine-albo / tecnico interno) --- */
body.portal-gestione #peritiPopup .check-pill {
font-size: var(--fs-13) !important;
color: var(--ink) !important;
background: var(--ott-50) !important;
border: 1px solid var(--ott-200) !important;
border-radius: var(--rd-r-pill) !important;
transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
body.portal-gestione #peritiPopup .check-pill:hover {
background: #fff !important;
border-color: var(--ott-300) !important;
}
body.portal-gestione #peritiPopup .check-pill:has(input:checked) {
background: color-mix(in srgb, var(--ott-base) 10%, white) !important;
border-color: var(--ott-base) !important;
color: var(--ott-base) !important;
}
body.portal-gestione #peritiPopup .check-pill input {
accent-color: var(--ott-base);
}
/* --- province tags (peritoProvinceTags) → badge tenue mockup --- */
body.portal-gestione #peritiPopup .tag-pill {
font-size: var(--fs-11-5) !important;
color: var(--ott-500) !important;
background: var(--ott-100) !important;
border: 1px solid var(--ott-200) !important;
border-radius: var(--rd-r-pill) !important;
}
body.portal-gestione #peritiPopup .tag-pill button {
color: var(--ott-500) !important;
}
body.portal-gestione #peritiPopup .tag-pill button:hover {
color: var(--ott-red) !important;
}
/* --- heading di sezione interna ("Periti batch", "Elenco tecnici") --- */
body.portal-gestione #peritiPopup .section h2 {
display: flex;
align-items: center;
gap: 9px;
font-family: var(--ff-display) !important;
font-weight: 800 !important;
font-size: var(--fs-15) !important;
color: var(--ink) !important;
}
body.portal-gestione #peritiPopup .section h2::before {
content: "";
width: 6px;
height: 18px;
background: var(--ott-base);
border-radius: 2px;
flex-shrink: 0;
}
/* --- triangolo collapsible "Periti batch" --- */
body.portal-gestione #peritiPopup .section-triangle {
border-left-color: var(--ott-500) !important;
}
/* --- voto medio read-only: bg grigio inline → token --- */
body.portal-gestione #peritiPopup #peritoVoto {
background: var(--ott-50) !important;
color: var(--ink) !important;
}
/* --- helper / note --- */
body.portal-gestione #peritiPopup .section small,
body.portal-gestione #peritiPopup .rd-help {
color: var(--ott-500) !important;
}
body.portal-gestione #peritiPopup .required-note {
font-size: var(--fs-11) !important;
font-weight: 600;
color: var(--ott-red) !important;
}
/* ==================== Gruppi (#gruppiPopup) — overrides-added ==================== */
/* ===== Impostazioni · Gruppi — override ottanio (token-only) =====
* Scope: body.portal-gestione #gruppiPopup. Il popup riceve a runtime
* la classe .gestione-inline-panel (deskcontrol-portal.js:1419) quindi la
* fondazione copre gia' tab/section/input/label/.btn/.simple-table.
* Qui si correggono SOLO i pezzi bespoke non coperti: la card gruppo,
* le righe header-gruppo della matrice servizi, il bottone Elimina inline
* e i testi secondari resi via token legacy (--text-muted/--text-secondary).
* !important mirato a battere CSS legacy + stili inline del JS. */
/* card gruppo: bordo/raggio/bg legacy -> ottanio */
body.portal-gestione #gruppiPopup .gruppi-card {
border: 1px solid var(--ott-200) !important;
border-radius: var(--rd-r-8) !important;
background: #fff !important;
}
/* righe "header gruppo" dentro la matrice servizi/permessi:
colore legacy --text-muted -> --ott-500, con banda tenue --ott-50 */
body.portal-gestione #gruppiPopup .simple-table .tbl-group-hdr td {
color: var(--ott-500) !important;
background: var(--ott-50) !important;
letter-spacing: var(--ls-caps-wide, 0.04em);
}
/* bottone "Elimina" inline: rosso legacy -> --ott-red */
body.portal-gestione #gruppiPopup .btn-inline-danger {
color: var(--ott-red) !important;
}
/* testi secondari resi via token brand legacy nel JS:
empty-state, badge (default), conteggio membri, label MFA -> grigio ottanio.
Gli stili sono inline sugli elementi dinamici, quindi serve !important. */
body.portal-gestione #gruppiPopup #gruppiListContainer > p,
body.portal-gestione #gruppiPopup .gruppi-card-header span,
body.portal-gestione #gruppiPopup .gruppi-card label {
color: var(--ott-500) !important;
}
/* ==================== Tipologie perizia (#tipologiePerziaPopup) — overrides-added ==================== */
/* === Tipologie perizia — override scoped token-only ===
* Popup montato come #tipologiePerziaPopup (.management-popup.gestione-inline-panel)
* in js/tipologie-admin.js. La fondazione copre frame/header/.section/.simple-table/
* input/.btn. Qui si neutralizzano SOLO gli hardcode inline dei bottoni bespoke
* (non-.btn) e delle celle/span colorati inline della tabella. !important per
* battere lo style inline del markup JS. */
/* hint descrittivo inline (color:#64748b;font-size:13px) */
body.portal-gestione #tipologiePerziaPopup .section > p {
color: var(--ott-500) !important;
font-size: var(--fs-13) !important;
}
/* toolbar bottoni bespoke (no classe .btn) — h36 + radius/font allineati */
body.portal-gestione #tipologiePerziaPopup #tipologieAddBtn,
body.portal-gestione #tipologiePerziaPopup #tipologieReloadBtn,
body.portal-gestione #tipologiePerziaPopup #tipologieLegacyBtn {
height: 36px;
padding: 0 14px !important;
font-family: var(--ff-body) !important;
font-size: var(--fs-13) !important;
border-radius: var(--rd-r-8) !important;
border: 1px solid transparent !important;
}
/* "+ Nuova tipologia" = CTA primaria brand (era #890103 logo-red) */
body.portal-gestione #tipologiePerziaPopup #tipologieAddBtn {
background: var(--ott-base) !important;
color: #fff !important;
border-color: var(--ott-base) !important;
}
body.portal-gestione #tipologiePerziaPopup #tipologieAddBtn:hover {
background: var(--ott-soft) !important;
border-color: var(--ott-soft) !important;
}
/* "Ricarica" = ghost (era #f1f5f9 / #cbd5e1) */
body.portal-gestione #tipologiePerziaPopup #tipologieReloadBtn {
background: #fff !important;
color: var(--ink) !important;
border-color: var(--ott-200) !important;
}
body.portal-gestione #tipologiePerziaPopup #tipologieReloadBtn:hover {
background: var(--ott-50) !important;
border-color: var(--ott-300) !important;
}
/* "Migra legacy" = ghost warn-tinted (era #fef3c7 / #fcd34d / #92400e) */
body.portal-gestione #tipologiePerziaPopup #tipologieLegacyBtn {
background: color-mix(in srgb, var(--ott-warn) 12%, white) !important;
color: color-mix(in srgb, var(--ott-warn) 78%, black) !important;
border-color: color-mix(in srgb, var(--ott-warn) 38%, white) !important;
}
body.portal-gestione #tipologiePerziaPopup #tipologieLegacyBtn:hover {
background: color-mix(in srgb, var(--ott-warn) 20%, white) !important;
}
/* celle riassunto cartelle (color:#64748b;font-size:11px inline) */
body.portal-gestione #tipologiePerziaPopup .simple-table td[style*="font-size:11px"] {
color: var(--ott-500) !important;
font-size: var(--fs-11) !important;
}
/* span stato attiva/disattiva (color:#16a34a / #dc2626 inline) */
body.portal-gestione #tipologiePerziaPopup .simple-table td span[style*="#16a34a"] {
color: var(--ott-green) !important;
}
body.portal-gestione #tipologiePerziaPopup .simple-table td span[style*="#dc2626"] {
color: var(--ott-red) !important;
}
/* bottone Elimina riga: .btn.sec con inline bg:#fee2e2;color:#991b1b → danger tokenizzato */
body.portal-gestione #tipologiePerziaPopup .simple-table .btn.sec[data-action="delete"] {
background: color-mix(in srgb, var(--ott-red) 8%, white) !important;
color: var(--ott-red) !important;
border-color: color-mix(in srgb, var(--ott-red) 30%, white) !important;
}
/* righe placeholder/loading/errore (colspan) — colori inline #64748b / #dc2626 */
body.portal-gestione #tipologiePerziaPopup .simple-table td[colspan][style*="#64748b"] {
color: var(--ott-500) !important;
}
body.portal-gestione #tipologiePerziaPopup .simple-table td[colspan][style*="#dc2626"] {
color: var(--ott-red) !important;
}
/* ==================== Inviti (#invitiPopup) — overrides-added ==================== */
/* ===== Inviti (#invitiPopup) — override scoped, token-only =====
* Il popup riceve gestione-inline-panel a runtime: form/header/.section
* gia' coperti dalla fondazione. Qui solo gli elementi bespoke e gli hex inline. */
/* Bottoni invito: .mon-filter-btn non e' .btn e la regola legacy e' scoped a
* .monitoring-filters → qui senza stile. Resi primari brand (h36, mockup). */
body.portal-gestione #invitiPopup .mon-filter-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
height: 36px;
padding: 0 16px !important;
font-family: var(--ff-body) !important;
font-size: var(--fs-13) !important;
font-weight: 600 !important;
color: #fff !important;
background: var(--ott-base) !important;
border: 1px solid var(--ott-base) !important;
border-radius: var(--rd-r-8) !important;
cursor: pointer;
transition: background var(--t-fast), border-color var(--t-fast);
}
body.portal-gestione #invitiPopup .mon-filter-btn:hover {
background: var(--ott-soft) !important;
border-color: var(--ott-soft) !important;
}
body.portal-gestione #invitiPopup .mon-filter-btn:focus-visible {
outline: none;
box-shadow: var(--rd-focus-ring);
}
/* Messaggi esito (#090 inline) → verde semantico */
body.portal-gestione #invitiPopup #inviteSendMsg,
body.portal-gestione #invitiPopup #inviteBulkMsg {
font-size: var(--fs-12) !important;
font-weight: 600;
color: var(--ott-green) !important;
}
/* Summary "Invito multiplo" (#666 inline) → testo secondario */
body.portal-gestione #invitiPopup details > summary {
font-size: var(--fs-12) !important;
font-weight: 600;
color: var(--ott-500) !important;
}
/* Tabella inviti: .monitoring-log-table/.audit-table-wrap allineati a .simple-table */
body.portal-gestione #invitiPopup .audit-table-wrap {
border: 1px solid var(--ott-200);
border-radius: var(--rd-r-8);
overflow: hidden;
}
body.portal-gestione #invitiPopup .monitoring-log-table {
border-collapse: separate;
border-spacing: 0;
font-size: var(--fs-12-5) !important;
}
body.portal-gestione #invitiPopup .monitoring-log-table th {
background: var(--ott-50) !important;
color: var(--ott-500) !important;
font-family: var(--ff-body);
font-weight: 600 !important;
font-size: var(--fs-11) !important;
text-transform: uppercase;
letter-spacing: var(--ls-caps-wide);
border-bottom: 1px solid var(--ott-200) !important;
}
body.portal-gestione #invitiPopup .monitoring-log-table td {
color: var(--ink) !important;
border-bottom: 1px solid var(--ott-100) !important;
}
body.portal-gestione #invitiPopup .monitoring-log-table tbody tr:last-child td {
border-bottom: 0 !important;
}
body.portal-gestione #invitiPopup .monitoring-log-table tbody tr:hover td {
background: var(--ott-50) !important;
}
/* esito riga (se valorizzati dal renderer JS) su token semantici */
body.portal-gestione #invitiPopup .monitoring-log-table .status-ok {
color: var(--ott-green) !important;
}
body.portal-gestione #invitiPopup .monitoring-log-table .status-err {
color: var(--ott-red) !important;
}
/* ==================== Permessi (#permessiPopup) — overrides-added ==================== */
/* === Permessi (#permessiPopup) — override scoped token-only === */
/* Righe header di gruppo (.tbl-group-hdr): nel legacy il colore e' mappato a
* var(--text-muted, #888) e border-bottom:none (senza !important). La fondazione
* .simple-table td applica border-bottom 1px --ott-100 !important, aggiungendo una
* riga indesiderata sotto le label di gruppo. Le allineo al divider "th-like" del
* mockup: bg tenue --ott-50, label --ott-500 uppercase, divisore --ott-100. */
body.portal-gestione #permessiPopup .permessi-matrix .tbl-group-hdr td {
background: var(--ott-50) !important;
color: var(--ott-500) !important;
font-family: var(--ff-body) !important;
font-weight: 600 !important;
font-size: var(--fs-11) !important;
letter-spacing: var(--ls-caps-wide, 0.1em) !important;
border-bottom: 1px solid var(--ott-100) !important;
}
/* Le righe header di gruppo non sono interattive: neutralizzo l'hover --ott-50
* che la fondazione applica via .simple-table tbody tr:hover td. */
body.portal-gestione #permessiPopup .permessi-matrix tbody tr.tbl-group-hdr:hover td {
background: var(--ott-50) !important;
}
/* ==================== Ruoli (#ruoliPopup) — overrides-added ==================== */
/* ====================================================================
* Override sezione "Ruoli & Permessi" — #ruoliPopup
* Scoped body.portal-gestione #ruoliPopup, token-only.
* Il popup riceve .gestione-inline-panel a runtime (deskcontrol-portal.js
* mappings, key "ruoli") quindi form/label/input ereditano la fondazione.
* Qui copro SOLO cio' che la fondazione NON tocca:
* - .mon-filter-btn bespoke (non .btn; il selettore legacy
* `.monitoring-filters .mon-filter-btn` non li raggiunge -> resterebbero
* bottoni di default browser) -> primario ottanio brand-aware
* - .monitoring-log-table bespoke (non .simple-table; legacy usa token
* --surface-*/--border non ottanio) -> th/td/hover/raggio ottanio
* - span messaggi con color:#090 hardcoded -> --ott-green
* - #rolePermMatrix border-top #eee hardcoded -> --ott-100
* ==================================================================== */
/* --- bottoni bespoke .mon-filter-btn -> primario brand --- */
body.portal-gestione #ruoliPopup .mon-filter-btn {
display: inline-flex;
align-items: center;
justify-content: center;
height: 36px;
padding: 0 16px !important;
font-family: var(--ff-body) !important;
font-size: var(--fs-13) !important;
font-weight: 600 !important;
color: #fff !important;
background: var(--ott-base) !important;
border: 1px solid var(--ott-base) !important;
border-radius: var(--rd-r-8) !important;
cursor: pointer;
transition: background var(--t-fast), border-color var(--t-fast);
}
body.portal-gestione #ruoliPopup .mon-filter-btn:hover {
background: var(--ott-soft) !important;
border-color: var(--ott-soft) !important;
}
/* --- messaggi esito: #090 hardcoded -> --ott-green --- */
body.portal-gestione #ruoliPopup #roleCreateMsg,
body.portal-gestione #ruoliPopup #rolePermSaveMsg {
font-family: var(--ff-body);
font-size: var(--fs-12) !important;
font-weight: 600;
color: var(--ott-green) !important;
}
/* --- tabella ruoli bespoke .monitoring-log-table -> ottanio --- */
body.portal-gestione #ruoliPopup .monitoring-log-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
border: 1px solid var(--ott-200);
border-radius: var(--rd-r-8);
overflow: hidden;
font-family: var(--ff-body);
font-size: var(--fs-12-5);
}
body.portal-gestione #ruoliPopup .monitoring-log-table th {
background: var(--ott-50) !important;
color: var(--ott-500) !important;
font-weight: 600;
font-size: var(--fs-11);
text-transform: uppercase;
letter-spacing: var(--ls-caps-wide);
border-bottom: 1px solid var(--ott-200) !important;
}
body.portal-gestione #ruoliPopup .monitoring-log-table td {
color: var(--ink);
border-bottom: 1px solid var(--ott-100) !important;
}
body.portal-gestione #ruoliPopup .monitoring-log-table tbody tr:last-child td {
border-bottom: 0 !important;
}
body.portal-gestione #ruoliPopup .monitoring-log-table tbody tr:hover td {
background: var(--ott-50) !important;
}
/* --- matrice permessi: separatore #eee hardcoded -> --ott-100 --- */
body.portal-gestione #ruoliPopup #rolePermMatrix {
border-top: 1px solid var(--ott-100) !important;
}
/* ==================== Produzione (#produzionePopup) — overrides-added ==================== */
/* === Produzione (#produzionePopup) — allineamento ottanio, token-only, scoped === */
/* Toggle switch: OFF grigio ottanio, ON brand, knob bianco (batte cap-insight.css / cross-file) */
body.portal-gestione #produzionePopup .toggle-switch .toggle-slider {
background: var(--ott-300) !important;
border-radius: var(--rd-r-pill) !important;
}
body.portal-gestione #produzionePopup .toggle-switch .toggle-slider:before {
background: #fff !important;
border-radius: var(--rd-r-pill) !important;
}
body.portal-gestione #produzionePopup .toggle-switch input:checked + .toggle-slider {
background: var(--ott-base) !important;
}
/* Intestazioni di gruppo tabella: neutro tenue + label secondaria uppercase */
body.portal-gestione #produzionePopup .produzione-table .tbl-group-hdr {
background: var(--ott-50) !important;
border-radius: var(--rd-r-6) !important;
}
body.portal-gestione #produzionePopup .produzione-table .tbl-group-hdr td {
color: var(--ott-500) !important;
}
/* Separatori riga: bordo standard ottanio */
body.portal-gestione #produzionePopup .produzione-table tbody tr {
border-bottom: 1px solid var(--ott-200) !important;
}
/* Etichetta funzione: testo principale ink */
body.portal-gestione #produzionePopup .produzione-table tbody tr td:first-child {
color: var(--ink) !important;
}
/* ==================== API Keys (#apikeysPopup) — overrides-added ==================== */
/* === API Keys (#apikeysPopup) — override scoped token-only ===
* La fondazione (gestione-inline-panel, aggiunto via JS) copre gia':
* header/title, .section card, label/input[text|number]/select/textarea, focus.
* Qui si allinea SOLO cio' che e' bespoke: .mon-filter-btn, .monitoring-log-table,
* summary grigio, e il modale one-time (arancio hardcoded + code key). */
/* bottoni bespoke .mon-filter-btn -> btn primario brand (mockup h36/--rd-r-8) */
body.portal-gestione #apikeysPopup .mon-filter-btn {
display: inline-flex;
align-items: center;
justify-content: center;
height: 36px;
padding: 0 16px !important;
font-family: var(--ff-body) !important;
font-size: var(--fs-13) !important;
font-weight: 600 !important;
background: var(--ott-base) !important;
color: #fff !important;
border: 1px solid var(--ott-base) !important;
border-radius: var(--rd-r-8) !important;
transition: background var(--t-fast), border-color var(--t-fast);
}
body.portal-gestione #apikeysPopup .mon-filter-btn:hover {
background: var(--ott-soft) !important;
border-color: var(--ott-soft) !important;
}
/* tabella keys -> look .simple-table (th ott-50/ott-500 caps, td ott-100) */
body.portal-gestione #apikeysPopup .monitoring-log-table {
font-size: var(--fs-12-5) !important;
}
body.portal-gestione #apikeysPopup .monitoring-log-table th {
background: var(--ott-50) !important;
color: var(--ott-500) !important;
font-family: var(--ff-body) !important;
font-weight: 600 !important;
font-size: var(--fs-11) !important;
text-transform: uppercase;
letter-spacing: var(--ls-caps-wide);
border-bottom: 1px solid var(--ott-200) !important;
}
body.portal-gestione #apikeysPopup .monitoring-log-table td {
border-bottom: 1px solid var(--ott-100) !important;
color: var(--ink) !important;
}
body.portal-gestione #apikeysPopup .monitoring-log-table tr:hover td {
background: var(--ott-50) !important;
}
/* summary "Scopes" grigio hardcoded #666 -> ott-500 */
body.portal-gestione #apikeysPopup details > summary {
color: var(--ott-500) !important;
font-size: var(--fs-12) !important;
font-weight: 600;
}
/* modale one-time key: arancio hardcoded -> token attenzione (--ott-warn) */
body.portal-gestione #apikeysPopup #akOneTimeModal {
background: color-mix(in srgb, var(--ott-warn) 10%, white) !important;
border: 1px solid color-mix(in srgb, var(--ott-warn) 45%, white) !important;
border-radius: var(--rd-r-8) !important;
}
body.portal-gestione #apikeysPopup #akOneTimeModal > div:first-child {
color: color-mix(in srgb, var(--ott-warn) 80%, black) !important;
}
/* code della key one-time -> mono + bordo ott-200 */
body.portal-gestione #apikeysPopup #akOneTimeKey {
font-family: var(--ff-mono) !important;
font-size: var(--fs-12-5) !important;
background: #fff !important;
color: var(--ink) !important;
border: 1px solid var(--ott-200) !important;
border-radius: var(--rd-r-6) !important;
}
/* ==================== Abbonamento (#abbonamentoPopup) — overrides-added ==================== */
/* === Abbonamento — override scoped (token-only) ===
* Il popup riceve .gestione-inline-panel a runtime (deskcontrol-portal.js:1419),
* quindi frame/header/.section/input/select/.btn/.simple-table sono gia'
* coperti dalla fondazione. Qui solo cio' che la fondazione NON tocca:
* badge piano bespoke, testi grigi inline, bottoni .mon-filter-btn legacy,
* tabella .monitoring-log-table legacy, divisori/messaggi. */
/* Badge piano: pill mockup. NON forzo il background (lo setta il JS per
* plan_code via _PLAN_COLORS / fallback #666 funzionale). */
body.portal-gestione #abbonamentoPopup #subPlanBadge {
font-family: var(--ff-body) !important;
font-size: var(--fs-12-5) !important;
font-weight: 600 !important;
padding: 3px 10px !important;
border-radius: var(--rd-r-pill) !important;
letter-spacing: 0.02em;
}
/* Testi stato / periodo piano */
body.portal-gestione #abbonamentoPopup #subPlanStatus {
color: var(--ott-500) !important;
font-size: var(--fs-13) !important;
}
body.portal-gestione #abbonamentoPopup #subPlanPeriod {
color: var(--ott-500) !important;
font-size: var(--fs-12) !important;
}
/* Bottoni .mon-filter-btn (Storico utilizzo / Applica): blu legacy
* var(--interactive) -> brand primario del mockup. */
body.portal-gestione #abbonamentoPopup .mon-filter-btn {
display: inline-flex;
align-items: center;
justify-content: center;
height: 34px;
padding: 0 14px !important;
font-family: var(--ff-body) !important;
font-size: var(--fs-12-5) !important;
font-weight: 600 !important;
background: var(--ott-base) !important;
color: #fff !important;
border: 1px solid var(--ott-base) !important;
border-radius: var(--rd-r-8) !important;
transition: background var(--t-fast), border-color var(--t-fast);
}
body.portal-gestione #abbonamentoPopup .mon-filter-btn:hover {
background: var(--ott-soft) !important;
border-color: var(--ott-soft) !important;
}
/* Tabella storico .monitoring-log-table -> stile tabella mockup */
body.portal-gestione #abbonamentoPopup .monitoring-log-table {
font-family: var(--ff-body);
font-size: var(--fs-12-5);
}
body.portal-gestione #abbonamentoPopup .monitoring-log-table th {
background: var(--ott-50) !important;
color: var(--ott-500) !important;
font-weight: 600 !important;
font-size: var(--fs-11) !important;
text-transform: uppercase;
letter-spacing: var(--ls-caps-wide);
border-bottom: 1px solid var(--ott-200) !important;
}
body.portal-gestione #abbonamentoPopup .monitoring-log-table td {
color: var(--ink) !important;
border-bottom: 1px solid var(--ott-100) !important;
}
body.portal-gestione #abbonamentoPopup .monitoring-log-table tbody tr:hover td {
background: var(--ott-50) !important;
}
/* Divisore sezione admin */
body.portal-gestione #abbonamentoPopup #subAdminSection {
border-top: 1px solid var(--ott-100) !important;
}
/* Messaggio esito cambio piano (verde) */
body.portal-gestione #abbonamentoPopup #subChangePlanMsg {
color: var(--ott-green) !important;
font-size: var(--fs-12) !important;
}
/* ==================== Audit & Sessioni (#auditPopup) — overrides-added ==================== */
/* === Audit & Sessioni (#auditPopup) — override ottanio token-only ===
* Il popup riceve .gestione-inline-panel a runtime (deskcontrol-portal.js:1419)
* quindi frame/header/tabs/.section/input/select/date sono GIA' coperti dalla
* fondazione. NON coperti: la tabella bespoke .monitoring-log-table, il bottone
* .mon-filter-btn, la paginazione .monitoring-pagination e la toolbar — usano i
* token LEGACY (--interactive/--surface/--border/--text-*). Qui rimappati a ott-*. */
/* toolbar filtri: layout/spaziatura coerenti col mockup (cosmetico) */
body.portal-gestione #auditPopup .audit-toolbar {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 12px;
}
/* bottone filtro bespoke -> primario brand (mockup btn primario) */
body.portal-gestione #auditPopup .mon-filter-btn {
height: 32px;
padding: 0 14px !important;
font-family: var(--ff-body) !important;
font-size: var(--fs-12-5) !important;
font-weight: 600 !important;
color: #fff !important;
background: var(--ott-base) !important;
border: 1px solid var(--ott-base) !important;
border-radius: var(--rd-r-8) !important;
cursor: pointer;
transition: background var(--t-fast), border-color var(--t-fast);
}
body.portal-gestione #auditPopup .mon-filter-btn:hover {
background: var(--ott-soft) !important;
border-color: var(--ott-soft) !important;
}
/* wrap tabella: bordo/raggio ottanio attorno alla tabella scrollabile */
body.portal-gestione #auditPopup .audit-table-wrap {
border: 1px solid var(--ott-200);
border-radius: var(--rd-r-8);
overflow: hidden;
}
/* tabella audit bespoke -> stile tabella mockup (th ott-50/ott-500 uppercase 11px,
* td border-bottom ott-100, hover ott-50). Rimappa i token legacy a ott-*. */
body.portal-gestione #auditPopup .monitoring-log-table {
font-family: var(--ff-body);
font-size: var(--fs-12-5);
}
body.portal-gestione #auditPopup .monitoring-log-table th {
padding: 9px 10px !important;
background: var(--ott-50) !important;
color: var(--ott-500) !important;
font-weight: 600 !important;
font-size: var(--fs-11) !important;
text-transform: uppercase;
letter-spacing: var(--ls-caps-wide);
border-bottom: 1px solid var(--ott-200) !important;
}
body.portal-gestione #auditPopup .monitoring-log-table td {
padding: 8px 10px !important;
color: var(--ink) !important;
border-bottom: 1px solid var(--ott-100) !important;
}
body.portal-gestione #auditPopup .monitoring-log-table tbody tr:last-child td {
border-bottom: 0 !important;
}
body.portal-gestione #auditPopup .monitoring-log-table tr:hover td {
background: var(--ott-50) !important;
}
/* esiti login/audit: verde/rosso semantici ottanio */
body.portal-gestione #auditPopup .monitoring-log-table .status-ok {
color: var(--ott-green) !important;
}
body.portal-gestione #auditPopup .monitoring-log-table .status-err {
color: var(--ott-red) !important;
font-weight: 600 !important;
}
/* paginazione: testo secondario + bottoni ghost ottanio */
body.portal-gestione #auditPopup .monitoring-pagination {
color: var(--ott-500) !important;
font-size: var(--fs-12) !important;
margin-top: 12px;
}
body.portal-gestione #auditPopup .monitoring-pagination button {
padding: 4px 12px !important;
font-size: var(--fs-12) !important;
color: var(--ink) !important;
background: #fff !important;
border: 1px solid var(--ott-200) !important;
border-radius: var(--rd-r-7) !important;
cursor: pointer;
transition: background var(--t-fast), border-color var(--t-fast);
}
body.portal-gestione #auditPopup .monitoring-pagination button:hover:not(:disabled) {
background: var(--ott-50) !important;
border-color: var(--ott-300) !important;
}
body.portal-gestione #auditPopup .monitoring-pagination button:disabled {
opacity: 0.4;
cursor: default;
}
/* ==================== Rate limit (#configRateLimitPopup) — overrides-added ==================== */
/* ===== Rate limit & Monitoraggio — override scoped token-only =====
* La fondazione (_redesign-impostazioni.css) copre tabs/.btn/input/select/
* label/.simple-table via .gestione-inline-panel (aggiunto a runtime al popup,
* deskcontrol-portal.js:1419). Qui si allineano SOLO i div bespoke
* inline-styled (card bucket, box test, tessere stat, testi muti, code/pre,
* hr) che la fondazione non raggiunge. Token-only, !important per battere
* gli style inline. */
/* --- testi descrittivi muti (#555 / #666 / #888) --- */
body.portal-gestione #configRateLimitPopup p,
body.portal-gestione #configRateLimitPopup p small,
body.portal-gestione #configRateLimitPopup [style*="color:#555"],
body.portal-gestione #configRateLimitPopup [style*="color:#666"],
body.portal-gestione #configRateLimitPopup [style*="color:#888"] {
color: var(--ott-500) !important;
}
body.portal-gestione #configRateLimitPopup p {
font-size: var(--fs-13) !important;
line-height: 1.5;
}
/* --- card "bucket" (border #e5e7eb / bg #f9fafb) → card mockup --- */
body.portal-gestione #configRateLimitPopup [style*="border:1px solid #e5e7eb"][style*="background:#f9fafb"] {
border: 1px solid var(--ott-200) !important;
background: #fff !important;
border-radius: var(--rd-r-8) !important;
}
/* titolo bucket (codice tecnico) → mono per leggibilità identificatore */
body.portal-gestione #configRateLimitPopup [style*="background:#f9fafb"] > [style*="font-weight:600"] {
font-family: var(--ff-mono) !important;
color: var(--ott-700) !important;
}
/* --- card "predisposto" dashed (#cbd5e1 / bg #fffbeb) → warn tenue --- */
body.portal-gestione #configRateLimitPopup [style*="border:1px dashed #cbd5e1"] {
border: 1px dashed var(--ott-300) !important;
background: color-mix(in srgb, var(--ott-warn) 8%, white) !important;
border-radius: var(--rd-r-8) !important;
}
body.portal-gestione #configRateLimitPopup [style*="border:1px dashed #cbd5e1"] [style*="color:#888"] {
color: var(--ott-warn) !important;
}
/* --- box "Test rapido" (bg #eff6ff / border #bfdbfe) → accent brand tenue --- */
body.portal-gestione #configRateLimitPopup [style*="background:#eff6ff"] {
background: color-mix(in srgb, var(--ott-base) 6%, white) !important;
border: 1px solid color-mix(in srgb, var(--ott-base) 25%, white) !important;
border-radius: var(--rd-r-8) !important;
}
/* --- code + pre (output header rate limit) → mono + bordi token --- */
body.portal-gestione #configRateLimitPopup code,
body.portal-gestione #configRateLimitPopup pre {
font-family: var(--ff-mono) !important;
color: var(--ink) !important;
}
body.portal-gestione #configRateLimitPopup pre {
background: #fff !important;
border: 1px solid var(--ott-200) !important;
border-radius: var(--rd-r-7) !important;
}
/* --- hr divisore --- */
body.portal-gestione #configRateLimitPopup hr {
border: 0 !important;
border-top: 1px solid var(--ott-100) !important;
}
/* --- ALERT: box "Soglie hardcoded" (bg #f9fafb senza bordo) --- */
body.portal-gestione #configRateLimitPopup [data-rl-panel="alert"] [style*="background:#f9fafb"] {
background: var(--ott-50) !important;
border: 1px solid var(--ott-200) !important;
border-radius: var(--rd-r-8) !important;
color: var(--ott-500) !important;
}
body.portal-gestione #configRateLimitPopup [data-rl-panel="alert"] [style*="background:#f9fafb"] strong {
color: var(--ott-700) !important;
}
/* --- MONITORAGGIO: tessere statistiche --- */
body.portal-gestione #configRateLimitPopup #rlMonStats > div {
border: 1px solid var(--ott-200) !important;
border-radius: var(--rd-r-8) !important;
}
body.portal-gestione #configRateLimitPopup #rlMonStats [style*="background:#f3f4f6"] {
background: var(--ott-50) !important;
}
/* numerone stat → display font + mono per le cifre tecniche */
body.portal-gestione #configRateLimitPopup #rlMonStats [style*="font-size:22px"] {
font-family: var(--ff-mono) !important;
font-size: var(--fs-22) !important;
color: var(--ink) !important;
}
body.portal-gestione #configRateLimitPopup #rlMonStats [style*="color:#666"] {
color: var(--ott-500) !important;
}
/* tessera "flaggati" → rosso semantico tenue */
body.portal-gestione #configRateLimitPopup #rlMonStats [style*="background:#fef2f2"] {
background: color-mix(in srgb, var(--ott-error) 7%, white) !important;
}
body.portal-gestione #configRateLimitPopup #rlMonStatFlagged {
color: var(--ott-error) !important;
}
/* ==================== Sicurezza sessione (#configSicurezzaPopup) — overrides-added ==================== */
/* Sicurezza sessione — override scoped token-only.
La fondazione copre input/select/.section/label/.btn perche' il popup
riceve .gestione-inline-panel via JS (deskcontrol-portal.js:1419).
Restano fuori: titolo
raw, testi #555/#888, bottone bespoke
.mon-filter-btn (non .btn), messaggio stato. */
/* titolo: raw nell'header → display ottanio uppercase come gli altri popup */
body.portal-gestione #configSicurezzaPopup .management-popup-header h2 {
font-family: var(--ff-display) !important;
font-weight: 700 !important;
font-size: var(--fs-13) !important;
text-transform: uppercase;
letter-spacing: var(--ls-caps-tight);
color: var(--ott-700) !important;
margin: 0 !important;
}
/* testo descrittivo (#555) e nota range (#888) → secondario */
body.portal-gestione #configSicurezzaPopup .section > p {
font-size: var(--fs-13) !important;
color: var(--ott-500) !important;
}
body.portal-gestione #configSicurezzaPopup .section > p small {
color: var(--ott-500) !important;
}
/* bottone "Salva" = .mon-filter-btn (bespoke monitoring, fuori fondazione)
→ allineato al primario ottanio. Scope stretto a questo popup per non
toccare l'uso .mon-filter-btn nel monitoraggio. */
body.portal-gestione #configSicurezzaPopup .mon-filter-btn#sessSaveBtn {
height: 36px;
padding: 0 16px !important;
background: var(--ott-base) !important;
color: #fff !important;
border: 1px solid var(--ott-base) !important;
border-radius: var(--rd-r-8) !important;
font-family: var(--ff-body) !important;
font-size: var(--fs-13) !important;
font-weight: 600 !important;
transition: background var(--t-fast), border-color var(--t-fast);
}
body.portal-gestione #configSicurezzaPopup .mon-filter-btn#sessSaveBtn:hover {
background: var(--ott-soft) !important;
border-color: var(--ott-soft) !important;
}
/* messaggio di esito salvataggio → tono secondario */
body.portal-gestione #configSicurezzaPopup #sessSaveMsg {
font-size: var(--fs-12) !important;
color: var(--ott-500) !important;
}
/* ==================== Cestino (#configCestinoPopup) — overrides-added ==================== */
/* ===== Cestino — override scoped token-only (battono inline) ===== */
/* Header descrizione */
body.portal-gestione #configCestinoPopup .management-popup-header p{
color:var(--ott-500) !important;
font-size:var(--fs-12) !important;
}
/* Card config (Modalita' retention + Svuota per cliente) */
body.portal-gestione #configCestinoPopup .management-popup-body > div{
background:#fff !important;
border:1px solid var(--ott-200) !important;
border-radius:var(--rd-r-8) !important;
}
/* la prima card usa sfondo tenue */
body.portal-gestione #configCestinoPopup .management-popup-body > div:first-child{
background:var(--ott-50) !important;
}
/* Titoli sezione */
body.portal-gestione #configCestinoPopup h3{
font-family:var(--ff-display) !important;
font-size:var(--fs-14) !important;
color:var(--ott-700) !important;
}
/* Testo secondario / helper */
body.portal-gestione #configCestinoPopup label > div > div:not([style*="font-weight"]),
body.portal-gestione #configCestinoPopup p{
color:var(--ott-500) !important;
}
body.portal-gestione #configCestinoPopup [style*="color:#94a3b8"],
body.portal-gestione #configCestinoPopup [style*="color: #94a3b8"]{
color:var(--ott-300) !important;
}
body.portal-gestione #configCestinoPopup [style*="color:#64748b"],
body.portal-gestione #configCestinoPopup [style*="color: #64748b"]{
color:var(--ott-500) !important;
}
/* Radio brand-aware */
body.portal-gestione #configCestinoPopup input[type="radio"]{
accent-color:var(--ott-base);
}
/* Input number giorni di grazia → stile input standard */
body.portal-gestione #configCestinoPopup #cestinoGraceDays{
height:auto;
padding:6px 10px !important;
background:#fff !important;
border:1px solid var(--ott-200) !important;
border-radius:var(--rd-r-6) !important;
font-family:var(--ff-body) !important;
font-size:var(--fs-13) !important;
color:var(--ink) !important;
}
body.portal-gestione #configCestinoPopup #cestinoGraceDays:focus{
outline:none !important;
border-color:var(--ott-base) !important;
box-shadow:var(--rd-focus-ring) !important;
}
/* Bottone Salva (azione critica retention) → token red, non hardcode */
body.portal-gestione #configCestinoPopup #cestinoSaveBtn{
background:var(--ott-red) !important;
color:#fff !important;
border:none !important;
border-radius:var(--rd-r-6) !important;
font-family:var(--ff-body) !important;
font-size:var(--fs-13) !important;
font-weight:600 !important;
}
body.portal-gestione #configCestinoPopup #cestinoSaveBtn:hover{
background:color-mix(in srgb, var(--ott-red) 88%, black) !important;
}
/* Tabella statistiche */
body.portal-gestione #configCestinoPopup #cestinoStatsTable thead tr{
background:var(--ott-50) !important;
border-bottom:1px solid var(--ott-200) !important;
}
body.portal-gestione #configCestinoPopup #cestinoStatsTable thead th{
color:var(--ott-500) !important;
font-size:var(--fs-11) !important;
font-weight:600 !important;
text-transform:uppercase !important;
letter-spacing:.04em !important;
}
body.portal-gestione #configCestinoPopup #cestinoStatsTable tbody td{
border-bottom:1px solid var(--ott-100) !important;
}
body.portal-gestione #configCestinoPopup #cestinoStatsTable tbody tr:hover td{
background:var(--ott-50) !important;
}
/* ==================== Worker (#configWorkerPopup) — overrides-added ==================== */
/* === Sezione Worker — override scoped token-only (configWorkerPopup) ===
* La fondazione (.gestione-inline-panel) copre input/select e .btn base, ma
* questo popup usa / plain, una card inline non-.section, un bottone
* .btn SENZA .primary con brand hardcoded e un callout warn hardcoded. */
/* header: plain -> tipografia titolo display + hint a token */
body.portal-gestione #configWorkerPopup .management-popup-header h2 {
font-family: var(--ff-display) !important;
font-weight: 700 !important;
font-size: var(--fs-15) !important;
color: var(--ott-700) !important;
margin: 0 !important;
}
body.portal-gestione #configWorkerPopup .management-popup-header p {
color: var(--ott-500) !important;
font-size: var(--fs-12) !important;
}
/* card config (div inline, non .section): bg/bordo/raggio a token */
body.portal-gestione #configWorkerPopup .management-popup-body > div {
background: var(--ott-50) !important;
border: 1px solid var(--ott-200) !important;
border-radius: var(--rd-r-8) !important;
}
/* titolo interno -> display 800 */
body.portal-gestione #configWorkerPopup h3 {
font-family: var(--ff-display) !important;
font-weight: 800 !important;
font-size: var(--fs-14) !important;
color: var(--ink) !important;
}
/* helper text '(1-50)' grigio tecnico -> token secondario */
body.portal-gestione #configWorkerPopup span[style*="#94a3b8"] {
color: var(--ott-500) !important;
}
/* bottone Salva: .btn senza .primary, brand hardcoded -> CTA token */
body.portal-gestione #configWorkerPopup #workerSaveBtn {
background: var(--ott-base) !important;
color: #fff !important;
border: 1px solid var(--ott-base) !important;
border-radius: var(--rd-r-8) !important;
}
body.portal-gestione #configWorkerPopup #workerSaveBtn:hover {
background: var(--ott-soft) !important;
border-color: var(--ott-soft) !important;
}
/* callout stress-test: warn hardcoded -> semantica --ott-warn */
body.portal-gestione #configWorkerPopup div[style*="#fffbeb"] {
background: color-mix(in srgb, var(--ott-warn) 12%, white) !important;
border: 1px solid color-mix(in srgb, var(--ott-warn) 45%, white) !important;
border-radius: var(--rd-r-7) !important;
color: color-mix(in srgb, var(--ott-warn) 78%, black) !important;
}
/* ==================== Preferenze (#preferenzePopup) — overrides-added ==================== */
/* === Preferenze (#preferenzePopup) — popup .gestione-compact NON .gestione-inline-panel:
la fondazione _redesign-impostazioni.css e' scoped a .gestione-inline-panel e NON copre
questo popup. Override scoped diretto, token-only. === */
/* header + titolo (allinea al frame mockup, qui nessuna copertura foundation) */
body.portal-gestione #preferenzePopup .management-popup-header {
border-bottom: 1px solid var(--ott-100) !important;
padding-bottom: 10px !important;
margin-bottom: 0 !important;
}
body.portal-gestione #preferenzePopup .management-popup-title {
font-family: var(--ff-display) !important;
font-weight: 700 !important;
font-size: var(--fs-13) !important;
text-transform: uppercase;
letter-spacing: var(--ls-caps-tight);
color: var(--ott-700) !important;
}
body.portal-gestione #preferenzePopup .management-popup-close {
color: var(--ott-500) !important;
}
/* section → card mockup */
body.portal-gestione #preferenzePopup .section {
background: #fff !important;
padding: 16px !important;
}
/* label form (battere font-size:11px inline; uppercase mockup) */
body.portal-gestione #preferenzePopup label {
font-family: var(--ff-body) !important;
font-size: var(--fs-11) !important;
font-weight: 600 !important;
color: var(--ott-500) !important;
letter-spacing: 0.04em;
text-transform: uppercase;
margin-bottom: 5px;
}
/* select → input mockup h36 (battere padding:4px 8px inline; width:100% funzionale resta) */
body.portal-gestione #preferenzePopup select {
height: 36px;
padding: 0 30px 0 12px !important;
background-color: var(--ott-50) !important;
border: 1px solid var(--ott-200) !important;
border-radius: var(--rd-r-8) !important;
font-family: var(--ff-body) !important;
font-size: var(--fs-13) !important;
color: var(--ink) !important;
appearance: none;
-webkit-appearance: none;
cursor: pointer;
outline: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 12px center;
transition: background-color var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}
body.portal-gestione #preferenzePopup select:hover {
background-color: #fff !important;
}
body.portal-gestione #preferenzePopup select:focus {
border-color: var(--ott-base) !important;
background-color: #fff !important;
box-shadow: var(--rd-focus-ring);
}
/* bottone salva bespoke (.mon-filter-btn) → primario brand mockup */
body.portal-gestione #preferenzePopup #prefSaveBtn.mon-filter-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
height: 36px;
padding: 0 16px !important;
background: var(--ott-base) !important;
color: #fff !important;
border: 1px solid var(--ott-base) !important;
border-radius: var(--rd-r-8) !important;
font-family: var(--ff-body) !important;
font-size: var(--fs-13) !important;
font-weight: 600 !important;
cursor: pointer;
transition: background var(--t-fast), border-color var(--t-fast);
}
body.portal-gestione #preferenzePopup #prefSaveBtn.mon-filter-btn:hover {
background: var(--ott-soft) !important;
border-color: var(--ott-soft) !important;
}
/* messaggio salvataggio (battere color:#090 inline) */
body.portal-gestione #preferenzePopup #prefSaveMsg {
font-size: var(--fs-12) !important;
color: var(--ott-green) !important;
font-weight: 600;
}
/* ==================== Octopus (#configOctopusPopup) — overrides-added ==================== */
/* === Octopus (#configOctopusPopup) — override token-only, scoped === */
/* small helper + hint span sotto i campi → testo secondario ottanio */
body.portal-gestione #configOctopusPopup small,
body.portal-gestione #configOctopusPopup #docConfigSaveHint,
body.portal-gestione #configOctopusPopup #defaultCredsSaveHint,
body.portal-gestione #configOctopusPopup #captchaConfigHint,
body.portal-gestione #configOctopusPopup #workerModeHint,
body.portal-gestione #configOctopusPopup #dashRefreshHint,
body.portal-gestione #configOctopusPopup #octStrategieFormHint,
body.portal-gestione #configOctopusPopup label > div[style*="color:#6b7280"] {
color: var(--ott-500) !important;
}
/* h3 sottotitolo sezione → display + titolo minore ottanio */
body.portal-gestione #configOctopusPopup .section > h3 {
font-family: var(--ff-display);
font-size: var(--fs-13) !important;
font-weight: 700 !important;
color: var(--ott-700) !important;
}
/* divisori sezione: la fondazione gia' carda ogni .section,
il border-top inline (var(--border)) crea un doppio bordo → annulla */
body.portal-gestione #configOctopusPopup .section[style*="border-top"] {
border-top: 1px solid var(--ott-200) !important;
}
/* box form strategia annidato → superficie tenue ottanio */
body.portal-gestione #configOctopusPopup #octStrategieForm {
background: var(--ott-50) !important;
border: 1px solid var(--ott-200) !important;
border-radius: var(--rd-r-8) !important;
}
/* placeholder lista strategie "Caricamento..." */
body.portal-gestione #configOctopusPopup #octStrategiesList > span {
color: var(--ott-500) !important;
}
/* divisore interno wrapper retry transitori */
body.portal-gestione #configOctopusPopup div[style*="border-top:1px solid #e5e7eb"],
body.portal-gestione #configOctopusPopup div[style*="border-top: 1px solid #e5e7eb"] {
border-top-color: var(--ott-200) !important;
}
/* bottone "Rimuovi" CAPTCHA: distruttivo solido bespoke → token rosso */
body.portal-gestione #configOctopusPopup #btnRemoveCaptchaKey {
background: var(--ott-red) !important;
color: #fff !important;
border: 1px solid var(--ott-red) !important;
border-radius: var(--rd-r-8) !important;
}
body.portal-gestione #configOctopusPopup #btnRemoveCaptchaKey:hover {
background: color-mix(in srgb, var(--ott-red) 85%, black) !important;
}
/* radio modalita worker + checkbox attivita strategia → accent brand */
body.portal-gestione #configOctopusPopup input[type="radio"],
body.portal-gestione #configOctopusPopup input[type="checkbox"] {
accent-color: var(--ott-base);
}
/* ==================== Lynx (#configLynxPopup) — overrides-added ==================== */
/* ============================================================
* Lynx — configLynxPopup — override scoped token-only (ottanio)
* Fondazione gia' copre: frame popup, header/title, .section card,
* label/input/select/textarea generici, .btn/.btn.sec, hint.
* Qui si allineano SOLO gli elementi bespoke inline-styled del blocco.
* ============================================================ */
/* --- testo grigio inline (,
,