/* ============================================================
CiaoDott Onboarding Client – Styles
----
Importa prima `ciaodott-design-system/colors_and_type.css` (vedi ):
da li' arrivano font Manrope/Playfair, scala tipografica e palette
--brand-*, --fg-*, --bg-*, --shadow-*, --radius-*, --s-*, --dur-*, ecc.
In questo file usiamo SOLO i token del design system.
============================================================ */
:root {
/* Sfondi morbidi per stati feedback (success/error/warning).
Estensione locale dei token DS: il design system espone solo i
colori pieni var(--success/--error/--warning), qui creiamo le
varianti soft per alert/badge derivandole con color-mix. */
--success-bg: color-mix(in srgb, var(--success) 14%, white);
--danger-bg: color-mix(in srgb, var(--error) 14%, white);
--warning-bg: color-mix(in srgb, var(--warning) 16%, white);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
background: var(--ink-50);
min-height: 100vh;
/* Layout flex-column: page-header e container in colonna, container cresce
fino a riempire il viewport. Cosi' il footer sticky dei form (.btn-group)
resta sempre attaccato al fondo dello schermo, anche quando il contenuto
della pagina e' piu' corto del viewport (vedi index.html step 0). */
display: flex;
flex-direction: column;
/* Il footer sticky (.btn-group) rompe il container per estendersi a tutta
la larghezza del viewport tramite negative margins. `overflow-x: clip`
previene la barra di scroll orizzontale senza interferire con la sticky. */
overflow-x: clip;
}
.page-header { flex-shrink: 0; }
a {
color: var(--brand-600);
text-decoration: none;
}
strong {
color: var(--fg-1);
}
/* ---- Icons (Material Symbols Outlined) ----
Caricato dallo :
Pattern: stethoscope
Sostituisce emoji decorativi e SVG inline nel layout.
============================================================ */
.material-symbols-outlined {
font-variation-settings:
'FILL' 0,
'wght' 400,
'GRAD' 0,
'opsz' 24;
font-size: 24px;
line-height: 1;
color: currentColor;
vertical-align: middle;
user-select: none;
}
.material-symbols-outlined.icon-sm { font-size: 18px; }
.material-symbols-outlined.icon-lg { font-size: 36px; }
.material-symbols-outlined.icon-xl { font-size: 48px; }
.material-symbols-outlined.icon-filled { font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24; }
/* Share pill icons stay piccole accanto al testo. */
.share-pill .material-symbols-outlined { font-size: 16px; }
/* ---- Layout ---- */
.page-header {
position: relative;
margin: 0;
padding: 22px 24px 16px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
text-align: center;
background: var(--bg-page);
border-bottom: 1px solid var(--border-subtle);
box-shadow: 0 1px 3px rgba(7, 44, 74, 0.04);
/* Altezza minima uniforme su tutte le pagine (index/clinica/medico).
Dimensionata sul caso piu' alto (index = logo + claim + lead);
il `justify-content: center` ridistribuisce lo spazio in eccesso
sugli header con contenuto piu' compatto (clinica/medico). */
min-height: 140px;
}
.page-header::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--brand-600) 0%, var(--secondary-3) 50%, var(--secondary-3) 100%);
}
.page-header h1 {
font-family: var(--font-ui);
font-size: var(--fs-caption);
font-weight: 500;
color: var(--fg-3);
letter-spacing: 0.04em;
text-transform: uppercase;
}
.header-status-slot {
min-height: 18px;
display: flex;
align-items: center;
justify-content: center;
}
.page-header .logo {
display: block;
line-height: 0;
}
.page-header .logo img {
height: 38px;
width: auto;
display: block;
}
/* Variante landing (index.html): stesso shell di clinica/medico, ma il
contenuto e' il claim di benvenuto invece di logo + tag + save-status.
La min-height del .page-header garantisce parita' verticale. */
.page-header--landing h1 {
font-family: var(--font-display);
font-size: 1.625rem;
font-weight: 500;
line-height: 1.2;
letter-spacing: -0.005em;
color: var(--fg-1);
text-transform: none;
}
.page-header--landing h1 em {
font-style: italic;
font-weight: 500;
color: var(--brand-600);
}
.page-header--landing p {
margin: 0;
font-size: 13px;
line-height: 1.4;
color: var(--fg-3);
max-width: 56ch;
}
.page-header #userBar {
position: absolute;
top: 16px;
right: 20px;
margin-left: 0 !important;
display: flex;
align-items: center;
}
.container {
max-width: 720px;
/* Niente margin/padding-bottom: il container deve arrivare fino al fondo del
body cosi' che il .btn-group sticky atterri esattamente sul bordo basso del
viewport (e non a 72px da esso). Il respiro inferiore lo gestisce il
footer stesso con il suo padding interno. */
margin: 28px auto 0;
padding: 0 20px;
--container-pad-x: 20px;
/* Cresce in altezza per riempire lo spazio rimanente del body flex-column,
cosi' il footer sticky resta ancorato al fondo viewport anche su pagine
con poco contenuto (es. index.html). */
flex: 1;
width: 100%;
display: flex;
flex-direction: column;
}
.container.wide { max-width: 1100px; }
/* Catena flex per il form di onboarding: il form e lo step attivo crescono
in altezza, lasciando il .btn-group ancorato al fondo del flex parent. */
#onboardingForm,
#profileForm {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
}
.card {
background: var(--bg-page);
border-radius: var(--radius-lg);
border: 1px solid var(--border-subtle);
box-shadow: var(--shadow-xs);
padding: 24px 28px;
margin-bottom: 20px;
}
.card h2 {
font-size: 1.25rem;
font-weight: 600;
color: var(--tertiary-1);
}
.card h3 {
font-size: 0.9375rem;
font-weight: 600;
color: var(--fg-1);
}
/* ---- Stepper ---- */
.stepper {
display: flex;
align-items: center;
margin-bottom: 20px;
padding: 0 8px 30px;
background: transparent;
border: none;
box-shadow: none;
border-radius: 0;
overflow: visible;
}
.stepper-item {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
position: relative;
min-width: 0;
padding: 0;
font-size: inherit;
font-weight: 600;
color: var(--fg-3);
border: none;
border-radius: 0;
background: none;
box-shadow: none;
white-space: nowrap;
overflow: visible;
text-overflow: clip;
cursor: default;
}
.stepper-item::before {
content: attr(data-num);
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
min-width: 32px;
border-radius: 50%;
border: 2px solid var(--border-default);
background: var(--bg-page);
font-size: 12px;
font-weight: 600;
color: var(--fg-3);
z-index: 1;
transition: all var(--dur-base) var(--ease-out);
}
.stepper-item:not(:last-child)::after {
content: '';
position: absolute;
top: 50%;
left: calc(50% + 16px);
right: calc(-50% + 16px);
height: 2px;
background: var(--border-subtle);
transform: translateY(-50%);
transition: background-color var(--dur-base) var(--ease-out);
}
.stepper-item span {
position: absolute;
top: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
font-size: 10px;
font-weight: 500;
color: var(--fg-3);
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity var(--dur-base) var(--ease-out);
background: var(--bg-page);
padding: 2px 8px;
border-radius: var(--radius-xs);
z-index: 10;
}
.stepper-item.active::before {
border-color: var(--brand-600);
background: var(--secondary-1);
color: var(--primary-800);
box-shadow: var(--shadow-focus);
}
.stepper-item.active span {
opacity: 1;
color: var(--primary-800);
font-weight: 600;
font-size: 11px;
}
.stepper-item.done::before {
content: '\2713';
border-color: var(--brand-600);
background: var(--brand-600);
color: var(--cta-fg);
font-size: 14px;
}
.stepper-item.done:not(:last-child)::after {
background: var(--brand-600);
}
.stepper-item:hover span {
opacity: 1;
box-shadow: 0 1px 4px rgba(7, 44, 74, 0.1);
}
/* ---- Form ---- */
.form-step { display: none; }
.form-step.active {
display: flex;
flex-direction: column;
/* flex:1 spinge .btn-group al fondo del form anche quando il contenuto
dello step (la .card) e' piu' corto del viewport. */
flex: 1 1 auto;
}
.form-group {
margin-bottom: 20px;
}
.form-group label:not(.checkbox-item):not(.schedule-toggle) {
display: block;
font-size: 14px;
font-weight: 500;
margin-bottom: 8px;
color: var(--fg-2);
}
.form-group .hint {
font-size: 12px;
color: var(--fg-3);
margin-bottom: 6px;
}
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="time"],
input[type="file"],
textarea,
select {
width: 100%;
min-height: 44px;
padding: 10px 14px;
border: 1px solid var(--border-default);
border-radius: var(--radius-md);
font-size: 14px;
font-family: inherit;
color: var(--fg-1);
background: var(--bg-page);
box-shadow: 0 1px 2px rgba(7, 44, 74, 0.04);
transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}
select {
-webkit-appearance: none;
appearance: none;
padding-right: 36px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23647689' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5L6 6.5L11 1.5'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
cursor: pointer;
}
input:focus, textarea:focus, select:focus {
outline: none;
border-color: var(--secondary-3);
box-shadow: var(--shadow-focus);
}
input::placeholder,
textarea::placeholder {
color: var(--ink-400);
}
input[readonly] {
background: var(--ink-50);
color: var(--fg-3);
}
textarea { resize: vertical; min-height: 80px; }
.char-count {
text-align: right;
font-size: 11px;
color: var(--fg-3);
margin-top: 4px;
}
.row { display: flex; gap: 16px; }
.row > * { flex: 1; }
/* ---- Checkboxes ---- */
.checkbox-group { display: flex; flex-direction: column; gap: 10px; }
.checkbox-item {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 14px;
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
cursor: pointer;
transition: var(--dur-base) var(--ease-out);
font-size: 14px;
line-height: 1.25;
background: var(--bg-page);
min-height: 56px;
}
.checkbox-item:hover {
border-color: rgba(2, 125, 203, 0.35);
background: var(--ink-50);
}
.checkbox-item input[type="checkbox"] {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
min-width: 20px;
max-width: 20px;
margin: 0;
padding: 0;
flex-shrink: 0;
border: 1.5px solid var(--ink-300);
border-radius: var(--radius-sm);
background: linear-gradient(180deg, var(--white) 0%, var(--ink-50) 100%);
box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 1px 2px rgba(7, 44, 74, .05);
cursor: pointer;
display: grid;
place-content: center;
transition: background-color .15s, border-color .15s, box-shadow .15s;
}
.checkbox-item input[type="checkbox"]::before {
content: '';
width: 5px;
height: 9px;
display: block;
border-right: 2px solid var(--cta-fg);
border-bottom: 2px solid var(--cta-fg);
transform: scale(0);
transform-origin: center;
rotate: 45deg;
transition: transform .1s ease-in-out;
}
.checkbox-item input[type="checkbox"]:checked {
background: var(--brand-600);
border-color: var(--brand-600);
box-shadow: 0 1px 2px rgba(2, 125, 203, .18);
}
.checkbox-item input[type="checkbox"]:checked::before {
transform: scale(1);
}
.checkbox-item input[type="checkbox"]:hover {
border-color: var(--ink-400);
}
.checkbox-item input[type="checkbox"]:focus-visible {
outline: none;
box-shadow: var(--shadow-focus);
}
.checkbox-item.required::after {
content: "Obbligatorio";
margin-left: auto;
font-size: var(--fs-caption);
color: var(--primary-800);
font-weight: 600;
padding: 2px 8px;
border-radius: var(--radius-pill);
border: 1px solid var(--secondary-2);
background: var(--secondary-1);
}
/* ---- Radio cards ---- */
.radio-cards { display: flex; gap: 16px; }
.radio-card {
flex: 1;
padding: 20px;
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
cursor: pointer;
transition: var(--dur-base) var(--ease-out);
text-align: center;
background: var(--bg-page);
box-shadow: var(--shadow-xs);
}
.radio-card:hover {
border-color: var(--secondary-3);
background: color-mix(in srgb, var(--secondary-1) 50%, white);
}
.radio-card.selected {
border-color: var(--secondary-2);
background: var(--secondary-1);
box-shadow: inset 0 0 0 1px rgba(2, 125, 203, 0.2);
}
.radio-card h3 { font-size: 1rem; margin-bottom: 6px; color: var(--fg-1); }
.radio-card p { font-size: 13px; color: var(--fg-3); }
.radio-card-content {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
.radio-card-icon {
width: 56px;
height: 56px;
border-radius: var(--radius-xl);
background: var(--secondary-1);
color: var(--primary-800);
display: flex;
align-items: center;
justify-content: center;
box-shadow: inset 0 0 0 1px rgba(2, 125, 203, 0.16);
transition: var(--dur-base) var(--ease-out);
}
.radio-card.selected .radio-card-icon {
background: var(--secondary-3);
color: var(--white);
}
.radio-card-label {
font-weight: 600;
font-size: 0.95rem;
color: var(--fg-1);
}
/* ---- Schedules ---- */
.schedule-grid { display: flex; flex-direction: column; gap: 8px; }
.schedule-day {
padding: 14px 16px;
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
background: var(--bg-page);
transition: border-color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}
.schedule-day.is-closed {
background: var(--ink-50);
border-color: var(--border-subtle);
}
.schedule-day-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.schedule-day .day-name { font-weight: 600; font-size: 13px; color: var(--fg-1); }
.schedule-day .times {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid var(--border-subtle);
}
.schedule-period {
display: grid;
grid-template-columns: 84px 110px 16px 110px;
align-items: center;
gap: 8px;
}
.schedule-period-label {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .04em;
color: var(--fg-3);
}
.schedule-day input[type="time"] { width: 110px; padding: 6px 8px; font-size: 13px; background: var(--bg-page); }
.schedule-day .sep { color: var(--fg-3); font-size: 13px; }
/* Toggle switch */
.form-group label.schedule-toggle,
.schedule-toggle {
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
user-select: none;
flex-shrink: 0;
margin-bottom: 0;
font-size: inherit;
font-weight: inherit;
color: inherit;
}
.schedule-toggle input { display: none; }
.schedule-toggle-track {
display: inline-block;
position: relative;
width: 36px;
min-width: 36px;
height: 20px;
border-radius: var(--radius-pill);
background: var(--brand-600);
box-shadow: inset 0 0 0 1px rgba(2, 125, 203, .18);
transition: background-color .2s, box-shadow .2s;
flex-shrink: 0;
}
.schedule-toggle-track::after {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--white);
box-shadow: 0 1px 2px rgba(7, 44, 74, .15);
transition: transform .2s;
transform: translateX(16px);
}
.schedule-day.is-closed .schedule-toggle-track {
background: var(--ink-200);
box-shadow: inset 0 0 0 1px rgba(143, 163, 181, .25);
}
.schedule-day.is-closed .schedule-toggle-track::after {
transform: translateX(0);
}
.schedule-toggle-label {
font-size: 12px;
font-weight: 500;
color: var(--fg-3);
white-space: nowrap;
min-width: 0;
text-align: left;
}
.schedule-day.is-closed .schedule-period,
.schedule-day.is-closed .schedule-period-label,
.schedule-day.is-closed .sep {
opacity: .65;
}
/* ---- Schedule mode toggle ---- */
.schedule-mode {
display: inline-flex;
gap: 0;
padding: 3px;
border: 1px solid var(--border-subtle);
border-radius: var(--radius-pill);
background: var(--ink-50);
margin-bottom: 10px;
}
.schedule-mode-btn {
border: none;
background: transparent;
font-family: inherit;
font-size: 11px;
font-weight: 600;
padding: 5px 12px;
border-radius: var(--radius-pill);
cursor: pointer;
color: var(--fg-3);
transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.schedule-mode-btn:hover {
color: var(--primary-800);
}
.schedule-mode-btn.active {
background: var(--bg-page);
color: var(--primary-800);
box-shadow: 0 1px 3px rgba(7, 44, 74,0.08);
}
/* ---- File upload ---- */
.file-drop {
border: 2px dashed var(--border-default);
border-radius: var(--radius-lg);
padding: 32px 20px;
text-align: center;
color: var(--fg-3);
cursor: pointer;
transition: var(--dur-base) var(--ease-out);
background: var(--ink-50);
}
.file-drop:hover, .file-drop.dragover {
border-color: var(--secondary-3);
background: var(--secondary-1);
}
.file-drop .icon { font-size: 36px; margin-bottom: 8px; }
.file-drop .name { font-size: 13px; }
.file-drop .selected-file {
color: var(--primary-800);
font-weight: 600;
margin-top: 10px;
}
/* ---- Buttons ---- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 44px;
padding: 10px 16px;
border: 1px solid transparent;
border-radius: var(--radius-md);
font-size: 14px;
font-weight: 500;
font-family: inherit;
cursor: pointer;
line-height: 1.2;
box-shadow: var(--shadow-xs);
transition: background-color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.btn:hover:not(:disabled) { transform: translateY(-1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
.btn-primary { background: var(--cta-bg); color: var(--cta-fg); border-color: var(--cta-bg); }
.btn-primary:hover:not(:disabled) { background: var(--cta-bg-hover); border-color: var(--cta-bg-hover); }
.btn-secondary {
background: var(--bg-page);
color: var(--brand-600);
border-color: var(--brand-600);
}
.btn-secondary:hover:not(:disabled) { background: var(--secondary-1); }
.btn-success { background: var(--success); color: var(--cta-fg); }
.btn-success:hover:not(:disabled) { background: color-mix(in srgb, var(--success) 75%, black); }
.btn-danger { background: var(--error); color: var(--cta-fg); }
.btn-danger:hover:not(:disabled) { background: color-mix(in srgb, var(--error) 75%, black); }
.btn-sm { padding: 8px 16px; font-size: 13px; }
.btn-block { width: 100%; }
.btn-group {
position: sticky;
bottom: 0;
z-index: 5;
display: flex;
gap: 12px;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
background: var(--bg-page);
border-top: 1px solid var(--border-subtle);
/* Full-bleed: la barra esce dal container e si estende a 100vw via
`margin: ... calc(50% - 50vw)` (negative margin compensa la centratura
del container). Il padding ricentra il contenuto interno sulle stesse
720px del container (340 = (720 - 40)/2 + 20). Su viewport stretti
il `max()` garantisce comunque il padding minimo del container. */
margin: 24px calc(50% - 50vw) 0;
padding: 14px max(var(--container-pad-x, 20px), calc(50vw - 340px));
box-shadow: 0 -4px 12px rgba(7, 44, 74, 0.04);
}
.btn-group--end { justify-content: flex-end; }
.btn-group-center {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}
/* ---- Alerts ---- */
.alert {
padding: 14px 18px;
border-radius: var(--radius-md);
font-size: 14px;
margin-bottom: 20px;
border: 1px solid transparent;
}
.alert-success { background: var(--success-bg); color: color-mix(in srgb, var(--success) 80%, var(--tertiary-1)); border-color: color-mix(in srgb, var(--success) 35%, white); }
.alert-danger { background: var(--danger-bg); color: color-mix(in srgb, var(--error) 80%, var(--tertiary-1)); border-color: color-mix(in srgb, var(--error) 35%, white); }
.alert-warning { background: var(--warning-bg); color: color-mix(in srgb, var(--warning) 80%, var(--tertiary-1)); border-color: color-mix(in srgb, var(--warning) 40%, white); }
.alert-info { background: var(--secondary-1); color: var(--primary-800); border-color: var(--secondary-2); }
/* ---- Summary ---- */
.summary-section {
margin-bottom: 16px;
padding: 16px;
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
background: var(--ink-50);
}
.summary-section h3 {
font-size: 16px;
color: var(--fg-1);
margin-bottom: 12px;
padding-bottom: 0;
border-bottom: none;
}
.summary-row { display: flex; gap: 12px; padding: 6px 0; font-size: 14px; }
.summary-row .label { width: 180px; font-weight: 500; flex-shrink: 0; color: var(--fg-3); }
.summary-row .value { color: var(--fg-1); }
.recaptcha-notice {
margin-top: 16px;
font-size: 12px;
line-height: 1.45;
color: var(--fg-3);
}
.grecaptcha-badge {
visibility: hidden;
}
/* ---- Progress bar ---- */
.progress-bar {
height: 6px;
background: var(--border-subtle);
border-radius: var(--radius-pill);
margin-bottom: 24px;
overflow: hidden;
}
.progress-bar .fill {
height: 100%;
background: linear-gradient(90deg, var(--brand-600) 0%, var(--secondary-3) 100%);
transition: width .4s ease;
}
/* ---- Admin panel ---- */
.admin-login { max-width: 400px; margin: 80px auto; }
.tabs {
display: flex;
gap: 4px;
margin-bottom: 24px;
border-bottom: 2px solid var(--border-subtle);
overflow-x: auto;
}
.tab {
padding: 10px 18px;
font-size: 13px;
font-weight: 500;
cursor: pointer;
border-bottom: 2px solid transparent;
margin-bottom: -2px;
white-space: nowrap;
color: var(--fg-3);
transition: var(--dur-base) var(--ease-out);
}
.tab:hover { color: var(--fg-1); }
.tab.active { color: var(--brand-600); border-color: var(--brand-600); font-weight: 600; }
.tab .badge {
display: inline-block;
padding: 1px 7px;
border-radius: var(--radius-lg);
font-size: 11px;
background: var(--ink-100);
margin-left: 6px;
}
.reg-list { display: flex; flex-direction: column; gap: 12px; }
.reg-item {
display: flex;
align-items: center;
gap: 16px;
padding: 16px 20px;
background: var(--bg-page);
border-radius: var(--radius-lg);
border: 1px solid var(--border-subtle);
box-shadow: var(--shadow-xs);
cursor: pointer;
transition: var(--dur-base) var(--ease-out);
}
.reg-item:hover { box-shadow: var(--shadow-md); }
.reg-item .info { flex: 1; }
.reg-item .name { font-weight: 600; font-size: 15px; }
.reg-item .email { font-size: 13px; color: var(--fg-3); }
.reg-item .meta { font-size: 12px; color: var(--fg-3); }
.status-badge {
display: inline-block;
padding: 4px 12px;
border-radius: var(--radius-pill);
font-size: 12px;
font-weight: 600;
white-space: nowrap;
}
.status-badge.pending_verification { background: var(--warning-bg); color: color-mix(in srgb, var(--warning) 80%, var(--tertiary-1)); }
.status-badge.pending_approval { background: var(--secondary-1); color: var(--brand-600); }
.status-badge.approved_creating { background: var(--warning-bg); color: color-mix(in srgb, var(--warning) 80%, var(--tertiary-1)); }
.status-badge.completed { background: var(--success-bg); color: color-mix(in srgb, var(--success) 80%, var(--tertiary-1)); }
.status-badge.rejected { background: var(--danger-bg); color: color-mix(in srgb, var(--error) 80%, var(--tertiary-1)); }
.status-badge.expired { background: var(--ink-100); color: var(--ink-500); }
/* ---- Detail panel ---- */
.detail-panel {
position: fixed;
top: 0; right: 0;
width: min(780px, 100vw);
height: 100vh;
background: var(--ink-50);
box-shadow: -4px 0 24px rgba(7, 44, 74,.12);
overflow-y: auto;
z-index: 100;
padding: 32px 40px;
transform: translateX(100%);
transition: transform .25s ease;
}
.detail-panel.open { transform: translateX(0); }
.detail-panel .close-btn {
position: absolute;
top: 16px; right: 16px;
background: none; border: none;
font-size: 24px; cursor: pointer;
color: var(--fg-3);
width: 36px; height: 36px;
border-radius: var(--radius-md);
display: flex; align-items: center; justify-content: center;
transition: background-color var(--dur-base) var(--ease-out);
}
.detail-panel .close-btn:hover { background: var(--ink-50); }
.detail-panel h2 { font-size: 18px; margin-bottom: 24px; padding-right: 40px; }
.detail-panel .actions { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
.detail-panel .actions > .btn { align-self: flex-start; }
.detail-panel .actions .action-buttons-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.detail-primary-tabs {
display: flex;
gap: 8px;
margin: -8px 0 18px;
padding: 6px;
border: 1px solid var(--border-subtle);
border-radius: var(--radius-pill);
background: var(--bg-page);
width: fit-content;
max-width: 100%;
}
.detail-primary-tab {
border: none;
background: transparent;
color: var(--fg-3);
font-family: inherit;
font-size: 13px;
font-weight: 600;
padding: 10px 16px;
border-radius: var(--radius-pill);
cursor: pointer;
transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.detail-primary-tab:hover {
color: var(--primary-800);
background: var(--secondary-1);
}
.detail-primary-tab.active {
background: linear-gradient(135deg, var(--brand-600) 0%, var(--secondary-3) 100%);
color: var(--cta-fg);
box-shadow: 0 6px 18px rgba(2, 125, 203, 0.18);
}
.overlay { position: fixed; inset: 0; background: rgba(7, 44, 74,.3); z-index: 99; opacity: 0; pointer-events: none; transition: opacity .25s ease; }
.overlay.open { opacity: 1; pointer-events: auto; }
/* ---- Verify page ---- */
.verify-card {
max-width: 500px;
margin: 80px auto;
text-align: center;
background: var(--bg-page);
border: 1px solid var(--border-subtle);
}
.verify-card h2 { margin-bottom: 12px; }
.verify-card p { color: var(--fg-3); margin-bottom: 20px; }
.spinner {
width: 40px; height: 40px;
border: 4px solid var(--border-subtle);
border-top-color: var(--brand-600);
border-radius: 50%;
animation: spin .8s linear infinite;
margin: 20px auto;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* ---- Success state ---- */
.success-card {
text-align: center;
padding: 56px 40px 48px;
}
.success-icon {
width: 56px;
height: 56px;
margin: 0 auto 20px;
color: var(--success);
}
.success-icon svg {
width: 100%;
height: 100%;
}
.success-icon circle {
stroke-dasharray: 166;
stroke-dashoffset: 166;
animation: successStroke .6s cubic-bezier(.65, 0, .45, 1) forwards;
}
.success-icon path {
stroke-dasharray: 48;
stroke-dashoffset: 48;
animation: successStroke .3s cubic-bezier(.65, 0, .45, 1) .4s forwards;
}
@keyframes successStroke {
to { stroke-dashoffset: 0; }
}
.success-card h2 {
margin-bottom: 8px;
}
.success-subtitle {
color: var(--fg-3);
font-size: 15px;
margin-bottom: 36px;
}
.success-next {
text-align: left;
margin-bottom: 24px;
}
.success-next-title {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--fg-3);
margin-bottom: 12px;
}
.success-steps {
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
overflow: hidden;
}
.success-step {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 16px 20px;
background: var(--bg-page);
}
.success-step + .success-step {
border-top: 1px solid var(--border-subtle);
}
.success-step-num {
flex-shrink: 0;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--secondary-1);
color: var(--primary-800);
font-size: 12px;
font-weight: 600;
border: 1px solid rgba(2, 125, 203, .2);
}
.success-step-text {
flex: 1;
padding-top: 3px;
}
.success-step-title {
display: block;
font-size: 14px;
font-weight: 600;
color: var(--fg-1);
margin-bottom: 2px;
}
.success-step-desc {
font-size: 13px;
color: var(--fg-3);
line-height: 1.5;
}
.success-hint {
font-size: 13px;
color: var(--fg-3);
text-align: center;
}
/* ---- Responsive ---- */
/* ---- Landing page ---- */
a.landing-card {
text-decoration: none;
color: inherit;
display: block;
padding: 32px 24px 28px;
transition: var(--dur-base) var(--ease-out);
}
a.landing-card:hover {
border-color: rgba(2, 125, 203, 0.35);
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
a.landing-card:hover .landing-cta {
color: var(--primary-800);
}
.landing-cta {
display: inline-block;
margin-top: 16px;
font-size: 13px;
font-weight: 600;
color: var(--brand-600);
transition: color var(--dur-base) var(--ease-out);
}
/* ---- Google Sign-In ---- */
.google-signin-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
background: var(--bg-page);
border: 1px solid var(--border-default);
border-radius: var(--radius-md);
padding: 10px 16px;
font-family: var(--font-ui);
font-size: 14px;
font-weight: 500;
color: var(--fg-2);
cursor: pointer;
transition: background-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
width: 100%;
max-width: 400px;
margin: 0 auto;
min-height: 44px;
}
.google-signin-btn:hover {
background: var(--ink-50);
box-shadow: 0 1px 3px rgba(7, 44, 74, 0.08);
}
.google-signin-success {
display: flex;
align-items: center;
gap: 12px;
background: var(--success-bg);
border: 1px solid color-mix(in srgb, var(--success) 35%, white);
border-radius: var(--radius-md);
padding: 12px 16px;
margin-top: 16px;
}
/* ---- Save status indicator ---- */
.progress-row {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
padding: 0 calc(8px + (100% - 16px) / (var(--step-count, 11) * 2));
}
.progress-row .progress-bar {
flex: 1;
margin-bottom: 0;
}
.save-status {
font-size: 12px;
font-weight: 600;
white-space: nowrap;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 2px 10px;
border-radius: var(--radius-pill);
border: 1px solid transparent;
transition: color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.save-status::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
opacity: 0.75;
}
.save-status:empty { display: none; }
.save-status--saved { color: var(--fg-3); }
.save-status--saving { color: var(--fg-3); }
.save-status--unsaved { color: var(--warning); }
.save-status--error { color: var(--error); }
.save-status--offline { color: var(--fg-3); }
/* ---- Share pill ---- */
.share-pill {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 32px;
padding: 6px 14px;
border: 1px solid var(--border-subtle);
border-radius: var(--radius-pill);
background: var(--bg-page);
font-size: 12px;
font-weight: 500;
color: var(--fg-3);
cursor: pointer;
box-shadow: var(--shadow-xs);
transition: var(--dur-base) var(--ease-out);
font-family: inherit;
position: relative;
}
.share-pill:hover {
border-color: var(--secondary-3);
color: var(--brand-600);
background: var(--secondary-1);
transform: translateY(-1px);
}
.share-pill::after {
content: "Copia il link per far completare il form a un collega";
position: absolute;
/* Tooltip ancorato SOPRA il pill: il .btn-group e' sticky in fondo al
viewport, mostrarlo sotto farebbe sfondare il body di ~14px (lo
pseudo-element absolute contribuisce a documentElement.scrollHeight
anche con opacity:0) e attiverebbe scroll verticale parassita su
clinica.html / medico.html. */
bottom: calc(100% + 8px);
right: 0;
padding: 6px 12px;
background: var(--fg-1);
color: var(--cta-fg);
border-radius: var(--radius-sm);
font-size: 11px;
font-weight: 400;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity var(--dur-fast) var(--ease-out);
z-index: 10;
}
.share-pill:hover::after { opacity: 1; }
.share-pill--success {
border-color: var(--success);
color: var(--success);
background: var(--success-bg);
}
.landing-shell {
max-width: 640px;
margin: 0 auto;
}
.landing-intro {
text-align: center;
margin-bottom: 28px;
}
.landing-intro h2 {
margin-bottom: 6px;
}
.landing-intro p {
color: var(--fg-3);
font-size: 14px;
}
.landing-option-icon {
width: 56px;
height: 56px;
margin: 0 auto 14px;
border-radius: var(--radius-xl);
background: var(--secondary-1);
color: var(--primary-800);
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
box-shadow: inset 0 0 0 1px rgba(2, 125, 203, 0.16);
}
/* ---- Responsive ---- */
@media (max-width: 640px) {
.container { padding: 0 12px; --container-pad-x: 12px; }
.card { padding: 20px; }
.page-header { padding: 16px 12px 12px; min-height: 116px; }
.page-header .logo img { height: 30px; }
.page-header h1 { font-size: 0.75rem; }
.page-header--landing h1 { font-size: 1.25rem; }
.page-header--landing p { font-size: 12px; }
.header-status-slot { min-height: 16px; }
.row { flex-direction: column; gap: 0; }
.radio-cards { flex-direction: column; }
.btn-group { padding-top: 12px; padding-bottom: 12px; gap: 8px; }
.btn-group .btn { flex: 1 1 auto; }
.btn-group .share-pill { order: 3; flex: 1 1 100%; justify-content: center; }
.stepper { padding: 0 2px 26px; }
.stepper-item::before { width: 26px; height: 26px; min-width: 26px; font-size: 10px; }
.stepper-item:not(:last-child)::after { left: calc(50% + 13px); right: calc(-50% + 13px); }
.stepper-item span { font-size: 9px; }
.stepper-item.active span { font-size: 10px; }
.stepper-item.done::before { font-size: 12px; }
.detail-panel { width: 100%; padding: 24px 16px; }
.detail-primary-tabs,
.agent-generation-toggle {
width: 100%;
flex-wrap: wrap;
border-radius: var(--radius-xl);
}
.detail-primary-tab,
.agent-generation-toggle-btn {
flex: 1 1 calc(50% - 4px);
text-align: center;
justify-content: center;
}
.summary-row { flex-direction: column; }
.summary-row .label { width: auto; }
.cred-field-row { flex-direction: column; gap: 4px; }
.cred-field-row .label { width: auto; }
.schedule-day-header { align-items: flex-start; gap: 10px; flex-direction: column; }
.schedule-day .times { align-items: stretch; }
.schedule-period {
grid-template-columns: 1fr;
justify-items: start;
}
.schedule-period-label { min-width: 0; }
.landing-intro h2 { font-size: 1.5rem; }
.success-card { padding: 40px 20px 36px; }
}
/* ---- Integration / Credential forms ---- */
.integration-card {
margin-top: 16px;
padding: 20px 24px;
background: var(--bg-page);
border-radius: var(--radius-lg);
border: 1px solid var(--border-subtle);
box-shadow: var(--shadow-xs);
}
.integration-card-title {
font-family: var(--font-ui);
font-size: 15px;
font-weight: 600;
color: var(--fg-1);
margin-bottom: 4px;
}
.integration-card-hint {
font-size: 13px;
color: var(--fg-3);
margin-bottom: 16px;
}
.agent-generation-toggle {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px;
margin-bottom: 16px;
border: 1px solid var(--border-subtle);
border-radius: var(--radius-pill);
background: var(--bg-page);
box-shadow: var(--shadow-xs);
}
.agent-generation-toggle-btn {
border: none;
background: transparent;
color: var(--fg-3);
font-family: inherit;
font-size: 13px;
font-weight: 600;
padding: 10px 14px;
border-radius: var(--radius-pill);
cursor: pointer;
transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.agent-generation-toggle-btn:hover {
color: var(--primary-800);
background: var(--secondary-1);
}
.agent-generation-toggle-btn.active {
background: var(--tertiary-1);
color: var(--cta-fg);
box-shadow: 0 4px 14px rgba(7, 44, 74, 0.18);
}
.json-preview {
margin: 0;
padding: 14px 16px;
background: var(--ink-900);
color: var(--ink-200);
border-radius: var(--radius-md);
border: 1px solid rgba(143, 163, 181, 0.2);
font-family: var(--font-mono);
font-size: 12px;
line-height: 1.55;
white-space: pre-wrap;
word-break: break-word;
overflow-x: auto;
}
.integration-select {
width: 100%;
min-height: 44px;
padding: 10px 14px;
border: 1px solid var(--border-default);
border-radius: var(--radius-md);
font-size: 14px;
font-family: inherit;
color: var(--fg-1);
background: var(--bg-page);
box-shadow: 0 1px 2px rgba(7, 44, 74, 0.04);
transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
margin-bottom: 16px;
}
.integration-select:focus {
outline: none;
border-color: var(--secondary-3);
box-shadow: var(--shadow-focus);
}
.credential-form {
margin-top: 0;
padding: 0;
background: transparent;
border-radius: 0;
border: none;
}
.credential-section {
margin-top: 20px;
padding: 16px;
background: var(--ink-50);
border-radius: var(--radius-md);
border: 1px solid var(--border-subtle);
}
.credential-section-title {
font-family: var(--font-ui);
font-weight: 600;
font-size: 13px;
color: var(--primary-800);
margin-bottom: 12px;
text-transform: uppercase;
letter-spacing: 0.03em;
}
.credential-field {
margin-bottom: 14px;
}
.credential-field:last-child { margin-bottom: 0; }
.credential-field label {
display: block;
font-weight: 500;
font-size: 13px;
margin-bottom: 5px;
color: var(--fg-1);
}
.credential-input {
width: 100%;
min-height: 44px;
padding: 9px 12px;
border: 1px solid var(--border-default);
border-radius: var(--radius-md);
font-size: 14px;
font-family: inherit;
color: var(--fg-1);
background: var(--bg-page);
box-sizing: border-box;
box-shadow: 0 1px 2px rgba(7, 44, 74, 0.04);
transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.credential-input:focus {
border-color: var(--secondary-3);
outline: none;
box-shadow: var(--shadow-focus);
}
textarea.credential-input {
resize: vertical;
min-height: 70px;
}
.credential-hint {
font-size: 12px;
color: var(--fg-3);
margin-top: 4px;
}
.credential-required {
color: var(--error);
font-weight: 700;
}
.credential-status-badge {
display: inline-block;
padding: 3px 10px;
border-radius: var(--radius-pill);
font-size: 12px;
font-weight: 600;
}
.credential-status-badge.active {
background: var(--success-bg);
color: var(--success);
}
.credential-status-badge.inactive {
background: var(--warning-bg);
color: var(--warning);
}
/* Credential status card (operational) */
.cred-status-card {
margin-top: 16px;
padding: 24px;
background: var(--bg-page);
border-radius: var(--radius-lg);
border: 1px solid var(--border-subtle);
box-shadow: var(--shadow-xs);
}
.cred-status-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 20px;
padding-bottom: 16px;
border-bottom: 1px solid var(--border-subtle);
}
.cred-status-header .integration-card-title { margin-bottom: 0; }
.cred-status-fields {
display: flex;
flex-direction: column;
gap: 0;
}
.cred-status-fields .cred-field-row {
display: flex;
align-items: baseline;
gap: 16px;
padding: 10px 0;
border-bottom: 1px solid var(--border-subtle);
}
.cred-status-fields .cred-field-row:last-child { border-bottom: none; }
.cred-field-row .label {
width: 160px;
flex-shrink: 0;
font-size: 13px;
font-weight: 500;
color: var(--fg-3);
}
.cred-field-row .value {
flex: 1;
font-size: 14px;
color: var(--fg-1);
word-break: break-all;
min-width: 0;
}
.cred-field-row .value code {
font-family: var(--font-mono);
font-size: 13px;
padding: 2px 6px;
background: var(--ink-50);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-xs);
word-break: break-all;
}
.cred-status-actions {
display: flex;
gap: 8px;
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid var(--border-subtle);
flex-wrap: wrap;
}
/* Edit credentials panel */
.edit-cred-panel {
margin-top: 16px;
padding: 20px 24px;
background: var(--bg-page);
border-radius: var(--radius-lg);
border: 1px solid var(--border-subtle);
box-shadow: var(--shadow-xs);
}
.edit-cred-panel .integration-card-title { margin-bottom: 16px; }
.edit-cred-actions {
display: flex;
gap: 8px;
margin-top: 16px;
flex-wrap: wrap;
}
/* ============================================================
Top-Level Section Switcher
============================================================ */
.section-tabs {
display: flex;
justify-content: center;
gap: 0;
padding: 0 32px;
background: var(--bg-page);
border-bottom: 2px solid var(--border-subtle);
}
.section-tab {
padding: 12px 28px;
font-size: 14px;
font-weight: 600;
color: var(--fg-3);
background: none;
border: none;
border-bottom: 3px solid transparent;
margin-bottom: -2px;
cursor: pointer;
transition: color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
letter-spacing: 0.3px;
}
.section-tab:hover {
color: var(--brand-600);
}
.section-tab.active {
color: var(--brand-600);
border-bottom-color: var(--brand-600);
}
/* ============================================================
Monitoring Section (full-width)
============================================================ */
.mon-container {
position: relative;
max-width: 1600px;
margin: 0 auto;
padding: 24px 32px;
}
/* Loading overlay */
.mon-loading-overlay {
position: absolute;
inset: 0;
background: color-mix(in srgb, var(--ink-50) 85%, transparent);
z-index: 50;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 16px;
border-radius: var(--radius-lg);
}
.mon-loading-spinner {
width: 40px;
height: 40px;
border: 4px solid var(--border-subtle);
border-top-color: var(--brand-600);
border-radius: 50%;
animation: mon-spin 0.8s linear infinite;
}
@keyframes mon-spin {
to { transform: rotate(360deg); }
}
.mon-loading-text {
font-size: 14px;
font-weight: 500;
color: var(--fg-3);
}
/* Filters / Cards / Charts */
.mon-filters {
display: flex;
gap: 16px;
margin-bottom: 24px;
flex-wrap: wrap;
align-items: flex-end;
}
.mon-filter-group {
display: flex;
flex-direction: column;
gap: 6px;
}
.mon-filter-label {
font-size: 11px;
font-weight: 600;
color: var(--fg-3);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.mon-select,
.mon-input {
padding: 8px 12px;
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
font-size: 14px;
color: var(--fg-1);
background: var(--bg-page);
min-width: 130px;
outline: none;
transition: border-color var(--dur-base) var(--ease-out);
}
.mon-select:focus,
.mon-input:focus {
border-color: var(--brand-600);
}
.mon-select-wide {
min-width: 220px;
}
select[multiple].mon-select {
min-height: 80px;
max-height: 120px;
}
.mon-radio-group {
display: flex;
gap: 12px;
font-size: 13px;
color: var(--fg-1);
padding-top: 4px;
}
.mon-radio-group label {
display: flex;
align-items: center;
gap: 4px;
cursor: pointer;
}
/* KPI Cards */
.mon-kpi-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 16px;
margin-bottom: 24px;
}
.mon-kpi-card {
background: var(--bg-page);
border-radius: var(--radius-lg);
padding: 20px;
border: 1px solid var(--border-subtle);
box-shadow: var(--shadow-xs);
}
.mon-kpi-label {
font-size: 12px;
color: var(--fg-3);
margin-bottom: 8px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.mon-kpi-value {
font-size: 28px;
font-weight: 700;
line-height: 1;
}
.mon-kpi-sub {
font-size: 12px;
color: var(--fg-3);
margin-top: 6px;
}
/* Chart Cards */
.mon-charts-row3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-bottom: 20px;
}
.mon-chart-card {
background: var(--bg-page);
border-radius: var(--radius-lg);
padding: 20px;
border: 1px solid var(--border-subtle);
box-shadow: var(--shadow-xs);
margin-bottom: 20px;
}
.mon-chart-title {
font-size: 15px;
font-weight: 600;
color: var(--fg-1);
margin-bottom: 12px;
}
/* Section Dividers */
.mon-section-divider {
border-top: 1px solid var(--border-subtle);
margin: 32px 0 20px;
}
.mon-section-title {
font-size: 20px;
font-weight: 700;
color: var(--fg-1);
margin: 0 0 4px;
}
.mon-section-subtitle {
font-size: 13px;
color: var(--fg-3);
margin: 0 0 16px;
}
/* Delta Cards */
.mon-delta-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 16px;
margin-bottom: 24px;
}
.mon-delta-card {
background: var(--bg-page);
border-radius: var(--radius-lg);
padding: 16px 20px;
border: 1px solid var(--border-subtle);
box-shadow: var(--shadow-xs);
}
.mon-delta-name {
font-size: 13px;
font-weight: 600;
color: var(--fg-1);
margin-bottom: 6px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mon-delta-value {
font-size: 26px;
font-weight: 700;
color: var(--fg-1);
line-height: 1;
}
.mon-delta-change {
font-size: 13px;
font-weight: 600;
vertical-align: middle;
margin-left: 6px;
}
.mon-delta-change.up { color: var(--success); }
.mon-delta-change.down { color: var(--error); }
.mon-delta-change.same { color: var(--fg-3); }
.mon-delta-sparkline {
height: 50px;
margin-top: 8px;
}
.mon-delta-prev {
font-size: 11px;
color: var(--fg-3);
margin-top: 4px;
}
/* Loading spinner for monitoring */
.mon-loading {
text-align: center;
padding: 40px;
color: var(--fg-3);
font-size: 14px;
}
/* Responsive */
@media (max-width: 900px) {
.mon-charts-row3 {
grid-template-columns: 1fr;
}
.mon-delta-grid {
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
}
@media (max-width: 1100px) {
.mon-kpi-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 640px) {
.mon-filters {
flex-direction: column;
}
.mon-select, .mon-input, .mon-select-wide {
min-width: unset;
width: 100%;
}
.mon-kpi-grid {
grid-template-columns: repeat(2, 1fr);
}
.mon-kpi-value {
font-size: 22px;
}
}