/* style.css - Stili migliorati per onflexa */
body {
height: 100vh;
margin: 3px;
}
/* Tema Scuro */
/* Per attivare il tema scuro, dovresti aggiungere la classe dark-theme al tag della pagina HTML */
.dark-theme {
/* Ruoli Colore Primari per tema scuro */
--mdc-theme-primary: #bb86fc; /* Viola per tema scuro */
--mdc-theme-on-primary: #000000;
/* Ruoli Colore Secondari per tema scuro */
--mdc-theme-secondary: #03dac6; /* Turchese per tema scuro */
--mdc-theme-on-secondary: #000000;
/* Ruoli Colore di Superficie e Sfondo per tema scuro */
--mdc-theme-surface: #333333; /* Grigio scuro */
--mdc-theme-on-surface: #ffffff;
--mdc-theme-background: #121212; /* Grigio scurissimo */
--mdc-theme-on-background: #ffffff;
/* Ruoli Colore di Errore per tema scuro */
--mdc-theme-error: #cf6679;
--mdc-theme-on-error: #000000;
/* Ruoli Colore Testo/Icone con Opacità per tema scuro (usano già on-dark) */
/* Variabili Custom per tema scuro */
--crm-color-overdue: #cf6679; /* Rosso errore */
--crm-color-due-today: #ffab91; /* Arancione chiaro */
--crm-color-link: var(--mdc-theme-secondary);
}
:root {
/* --- Schema Colori Material Design --- */
/* Ruoli Colore Primari */
--mdc-theme-primary: #3f51b5; /* Blu Indaco */
--mdc-theme-on-primary: #ffffff; /* Testo/Icone su Primario (Bianco) */
/* Ruoli Colore Secondari */
--mdc-theme-secondary: #ff4081; /* Rosa Accento */
--mdc-theme-on-secondary: #ffffff; /* Testo/Icone su Secondario (Bianco) */
/* Ruoli Colore di Superficie e Sfondo */
--mdc-theme-surface: #ffffff; /* Colore delle superfici dei componenti (es. Card, Sheet) */
--mdc-theme-on-surface: #000000; /* Testo/Icone su Superficie (Nero) */
--mdc-theme-background: #f5f5f5; /* Colore di sfondo generale della pagina */
--mdc-theme-on-background: #000000; /* Testo/Icone su Sfondo (Nero) */
/* Ruoli Colore di Errore */
--mdc-theme-error: #b00020; /* Rosso Standard per Errori */
--mdc-theme-on-error: #ffffff; /* Testo/Icone su Errore (Bianco) */
/* Ruoli Colore di Testo/Icone con Opacità */
--mdc-theme-text-primary-on-background: rgba(0, 0, 0, 0.87); /* Testo primario su Sfondo */
--mdc-theme-text-secondary-on-background: rgba(0, 0, 0, 0.60); /* Testo secondario su Sfondo */
--mdc-theme-text-hint-on-background: rgba(0, 0, 0, 0.38); /* Testo hint su Sfondo */
--mdc-theme-text-disabled-on-background: rgba(0, 0, 0, 0.38); /* Testo disabilitato su Sfondo */
--mdc-theme-text-icon-on-background: rgba(0, 0, 0, 0.38); /* Icone su Sfondo */
--mdc-theme-text-primary-on-light: rgba(0, 0, 0, 0.87); /* Per testo su colori chiari */
--mdc-theme-text-secondary-on-light: rgba(0, 0, 0, 0.60);
--mdc-theme-text-hint-on-light: rgba(0, 0, 0, 0.38);
--mdc-theme-text-disabled-on-light: rgba(0, 0, 0, 0.38);
--mdc-theme-text-icon-on-light: rgba(0, 0, 0, 0.38);
--mdc-theme-text-primary-on-dark: rgba(255, 255, 255, 1); /* Per testo su colori scuri */
--mdc-theme-text-secondary-on-dark: rgba(255, 255, 255, 0.70);
--mdc-theme-text-hint-on-dark: rgba(255, 255, 255, 0.50);
--mdc-theme-text-disabled-on-dark: rgba(255, 255, 255, 0.50);
--mdc-theme-text-icon-on-dark: rgba(255, 255, 255, 0.50);
/* --- Variabili Custom (Opzionali) --- */
/* Potresti voler definire variabili per altri colori specifici della tua app */
--crm-color-overdue: #c0392b; /* Rosso per task scaduti */
--crm-color-due-today: #e67e22; /* Arancione per task oggi */
--crm-color-link: var(--mdc-theme-primary); /* I link usano il colore primario */
}
/* Applica il colore di sfondo generale al body */
body {
background-color: var(--mdc-theme-background);
color: var(--mdc-theme-on-background); /* Colore testo di default */
}
a {
text-decoration: none;
color: var(--mdc-theme--primary);
}
a:hover {
text-decoration: underline; /* Manteniamo sottolineatura */
}
a:visited {
text-decoration: none; /* Manteniamo senza sottolineatura */
color: var(--mdc-theme--primary);
}
/* =====================
Messaggi Flash (Alerts)
===================== */
/* Stile base comune a tutti i messaggi */
.message {
padding: 15px 20px; /* Spazio interno */
margin-bottom: 1.5rem; /* Spazio sotto il messaggio */
border: 1px solid transparent; /* Bordo base, il colore cambia sotto */
border-radius: 5px; /* Angoli arrotondati */
font-size: 0.95em;
text-align: left;
/* Potresti aggiungere un po' di ombra per sollevarli? */
/* box-shadow: 0 2px 4px rgba(0,0,0,0.1); */
}
/* Stile per messaggi di SUCCESSO */
.message.success {
color: var(--mdc-theme-on-primary);
background-color: var(--mdc-theme-primary);
border-color: var(--mdc-theme-on-primary);
}
/* Stile per messaggi di ERRORE */
.message.error {
color: var(--mdc-theme-on-error);
background-color: var(--mdc-theme-error);
border-color: var(--mdc-theme-on-error);
}
/* Nascondi link footer su index (come prima) */
.page-index footer a[href="index.php"] {
/* Già OK */
}
/* --- Varie --- */
/* Stile per liste attività correlate */
#associated-contacts ul, #associated-tasks ul, #associated-notes ul, #associated-calls ul {
/* Già OK */
margin-top: 5px;
}
/* Stile per link aggiunta attività */
h3 + h4 + div + p a[href*="add_"] { /* Seleziona i link [+] Aggiungi... */
font-style: italic;
font-size: 0.9em;
color: var(--mdc-theme-primary);
}
/* Contenitore per la lista account */
.account-list-container {
background-color: var(--mdc-theme-surface);
margin-top: 20px;
border-radius: 5px;
overflow: hidden; /* Per border-radius */
}
/* Stile per ogni elemento/link della lista */
a.list-item-link {
display: block; /* Occupa tutta la larghezza */
padding: 12px 15px;
color: var(--mdc-theme-on-surface); /* Colore testo normale */
text-decoration: none; /* Niente sottolineatura */
border-bottom: 1px solid var(--mdc-theme-on-surface); /* Separatore */
transition: background-color 0.2s ease;
}
/* Rimuovi bordo inferiore all'ultimo elemento */
a.list-item-link:last-child {
border-bottom: none;
}
/* Effetto Hover */
a.list-item-link:hover {
background-color: var(--mdc-theme-background); /* Stesso hover della tabella */
text-decoration: none;
color: var(--mdc-theme-on-background); /* Cambia colore testo al hover */
}
/* Stile per messaggio "Nessuna azienda..." dentro il contenitore */
.account-list-container p em {
display: block;
padding: 12px 15px;
font-style: italic;
}
.main-content > main.container { /* Stile contenitore interno */
/* max-width: 1100px; */
/* margin: 20px auto; */
padding: 20px 10px;
background-color: var(--mdc-theme-background);
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
/* Nascondi i link amministrativi per default */
.admin-link {
display: none;
}
/* Mostra i link amministrativi SOLO se il body ha la classe 'role-admin' */
body.role-admin .admin-link {
display: list-item; /* O 'list-item' se sono dentro , o il display originale */
/* Potresti voler ripristinare altri stili se .admin-link li cambiava */
}
/* Se i link sono dentro e vuoi mostrare/nascondere l'intero LI: */
/*
li.admin-link {
display: none;
}
body.role-admin li.admin-link {
display: list-item; // O 'inline' se la nav è inline
}
*/
/* Contenuto dei Tab Task */
.task-tab-content {
/* padding: 20px; */
/* border: 1px solid #dee2e6; */
border-top: none;
/* background-color: var(--mdc-theme-on-surface); */
border-radius: 0 0 5px 5px;
}
.task-tab-pane { display: none; }
.task-tab-pane.active { display: block; }
/* 1. Nasconde TUTTI i pannelli per default */
.tab-content .tab-pane {
display: none;
}
/* 2. Mostra SOLO il pannello che ha ANCHE la classe 'active' */
/* Questa regola è più specifica e sovrascrive la precedente */
.tab-content .tab-pane.active {
display: block; /* Rende visibile il pannello attivo */
}
/* Stile per lista semplice task (se non usi più la tabella) */
ul.task-list-simple { list-style: none; padding: 0; margin: 0; }
ul.task-list-simple li { border-bottom: 1px dotted #ccc; padding: 8px 0; }
ul.task-list-simple li:last-child { border-bottom: none; }
ul.task-list-simple a strong { font-size: 1.05em; color: #333; } /* Stile nome task */
/* Modifica lo stile per l'elemento LI della lista task */
ul.task-list-simple li.task-item {
display: flex; /* 1. USA FLEXBOX */
justify-content: space-between; /* 2. Spinge contenuto principale e azioni ai lati opposti */
align-items: flex-start; /* 3. Allinea gli elementi all'inizio verticalmente */
/* Mantieni gli stili esistenti che vuoi */
padding: 8px 0;
border-bottom: 1px dotted #ccc;
line-height: 1.4;
gap: 10px; /* 4. Aggiunge spazio tra blocco testo e blocco azioni */
}
ul.task-list-simple li:last-child {
border-bottom: none;
}
/* Non serve più lo stile hover sulla riga intera se non voluto,
o puoi mantenerlo se ti piace */
ul.task-list-simple li.task-item:hover {
background-color: #f8f9fa;
}
/* Stile per il contenitore delle azioni (non più float) */
.task-item-actions {
white-space: nowrap; /* Non mandare a capo "Mod | Eli" */
flex-shrink: 0; /* Evita che questo blocco si restringa troppo se il testo è lungo */
/* Potrebbe servire un po' di padding/margin se necessario */
/* margin-left: auto; è un'alternativa a justify-content: space-between sul parent */
}
/* Stili per i link dentro le azioni (opzionale, per spaziatura) */
.task-item-actions a {
margin-left: 3px;
margin-right: 3px;
}
/* Stile per Task in Scadenza OGGI */
.task-list-simple li.task-due-today,
#my-tasks-widget li.task-due-today { /* Applica anche al widget dashboard */
background-color: #e6f7ff; /* Sfondo azzurrino leggero */
/* border-left: 3px solid #3498db; */ /* Bordo blu a sinistra? */
/* font-weight: 500; */ /* Leggermente più pesante? */
}
.task-list-simple li.task-due-today strong {
/* color: #2980b9; */ /* Cambia colore titolo? */
}
/* Stile per Task SCADUTI */
.task-list-simple li.task-overdue,
#my-overdue-tasks-widget li.task-overdue { /* Applica anche al widget dashboard */
background-color: #fff2f2; /* Sfondo rosato leggero */
/* border-left: 3px solid #e74c3c; */ /* Bordo rosso a sinistra? */
}
.task-list-simple li.task-overdue a strong,
#my-overdue-tasks-widget li.task-overdue a {
color: #c0392b !important; /* Forza colore rosso per link task scaduto */
font-weight: bold;
}
/* Assicurati che altri dettagli non diventino rossi */
.task-list-simple li.task-overdue .task-details-inline,
#my-overdue-tasks-widget li.task-overdue span {
color: #555 !important;
}
/* Stile per il titolo della pagina nell'header fisso */
.header-page-title {
font-size: 1.1em; /* Dimensione desiderata */
font-weight: 600; /* Semi-bold */
color: #34495e; /* Colore scuro, coerente con altri titoli? */
margin-left: 15px; /* Spazio dal bottone toggle/bordo sx */
line-height: var(--header-height); /* Tenta di centrarlo verticalmente nell'header */
white-space: nowrap; /* Evita che il titolo vada a capo */
overflow: hidden; /* Nasconde il testo se troppo lungo */
text-overflow: ellipsis; /* Mostra ... se troppo lungo */
flex-grow: 1; /* Opzionale: permette al titolo di occupare spazio se header è flex */
text-align: left; /* O center? */
}
/* Stile per l'elemento LI nella lista contatti associati */
#associated-contacts ul li.associated-contact-item {
display: flex; /* Attiva Flexbox */
justify-content: space-between; /* Spinge contenuto (nome) a sx e azioni a dx */
align-items: center; /* Allinea verticalmente al centro */
margin-bottom: 5px;
padding-bottom: 5px;
border-bottom: 1px dotted #eee;
line-height: 1.4; /* Regola interlinea se serve */
}
#associated-contacts ul li:last-child {
border-bottom: none;
}
/* Rimuovi eventuale stile hover sulla riga intera se non voluto */
/* #associated-contacts ul li.associated-contact-item:hover { background: none; cursor: default; } */
/* Contenitore per le icone/azioni a destra */
.contact-list-actions {
/* allineato a destra da flexbox sul genitore LI */
white-space: nowrap; /* Evita che le icone vadano a capo tra loro */
}
/* Stile e spaziatura per le singole icone/link azione */
.contact-list-action-icon {
margin-left: 12px; /* Aumenta spazio a SINISTRA dell'icona (tra icone e nome/altre icone) */
text-decoration: none;
font-size: 1.5em; /* Aumenta leggermente la dimensione delle icone */
vertical-align: middle;
display: inline-block; /* Per allineamento verticale */
}
.contact-list-action-icon:hover {
text-decoration: none;
opacity: 0.7; /* Effetto hover leggero */
}
a.button-style.button-export {
background-color: #17a2b8; /* Blu/ciano - già messo inline per ora */
border-color: #17a2b8;
/* Aggiungi altri stili se vuoi */
}
a.button-style.button-export:hover {
background-color: #138496;
border-color: #117a8b;
}
button.link-button {
background: none;
border: none;
padding: 0;
margin: 0;
cursor: pointer;
color: #007bff; /* Colore link base */
text-decoration: underline;
font-size: inherit; /* Usa dimensione font genitore */
font-family: inherit;
}
button.link-button:hover {
color: #0056b3;
}
button.link-button.danger-link {
color: #dc3545; /* Rosso */
}
button.link-button.danger-link:hover {
color: #c82333; /* Rosso scuro */
}
/* Imposta larghezza fissa per input data/ora Tempus Dominus */
input.td-input {
width: 110px; /* Larghezza adatta per YYYY-MM-DD HH:MM - Aggiusta se necessario */
flex-grow: 0 !important; /* Assicura che non si espanda nel contenitore flex */
/* Assicurati che abbia gli stili base degli altri input se necessario */
padding: 6px 10px;
border: 1px solid #ccc;
border-radius: 4px;
background-color: #fff; /* Sfondo bianco anche se readonly (default è grigio) */
cursor: default; /* Cursore normale, non di testo */
}
/* Colori specifici per pulsanti azione MDC (text button) */
.mdc-button.action-toggle-on .mdc-button__label { color: #27ae60; } /* Verde */
.mdc-button.action-toggle-off .mdc-button__label { color: #e67e22; } /* Arancio */
.mdc-button.action-delete .mdc-button__label { color: #dc3545; } /* Rosso */
/* Aggiungi :hover se vuoi cambiare colore al passaggio */
/* Aumenta spaziatura verticale voci menu nel Drawer MDC */
.mdc-drawer .mdc-list-item {
/* Il componente MDC List Item ha un'altezza standard.
Possiamo aumentare il padding interno verticale per distanziare il testo/icona
dal bordo superiore/inferiore dell'elemento, aumentando l'altezza percepita. */
padding-top: 4px; /* Esempio: aumenta da 8px (default?) a 12px */
padding-bottom: 4px; /* Esempio: aumenta da 8px (default?) a 12px */
/* In alternativa, o in aggiunta, potresti impostare un'altezza minima maggiore */
/* min-height: 56px; */ /* Es: Prova 56px invece dei 48px standard */
}
.mdc-drawer .mdc-list-item__text {
padding-top: 7px; /* Per allineare il testo alle icone nel menu del drawer */
}
/* TEXT WRAP MDC LIST */
/* Permetti alle righe della lista task MDC di crescere in altezza */
.task-list-mdc .mdc-list-item {
height: auto; /* Sovrascrive altezza fissa di mdc-list--two-line */
min-height: 50px; /* Mantiene altezza minima standard per two-line (puoi aggiustare) */
/* Allineamento verticale per contenuto multi-riga: 'flex-start' o 'center' */
align-items: center; /* Prova center */
padding-top: 8px; /* Padding verticale base */
padding-bottom: 8px;
}
/* Permetti al testo primario e secondario di andare a capo */
.task-list-mdc .mdc-list-item__primary-text,
.task-list-mdc .mdc-list-item__secondary-text {
white-space: normal; /* Permette il wrapping (questo è il default, ma lo forziamo) */
overflow: visible; /* Evita che il testo venga tagliato */
text-overflow: clip; /* Niente ellipsis */
height: auto; /* Altezza si adatta al contenuto */
display: block; /* Utile specialmente per il secondario per usare tutta la larghezza */
}
/* Assicura che il testo secondario non sia troppo vicino al primario */
.task-list-mdc .mdc-list-item__secondary-text {
margin-top: 2px;
}
.task-list-mdc .mdc-list-item:last-child { border-bottom: none; }
/* FINE TEXT WRAP MDC-LIST */
/* Aggiunge spazio (margine) a destra dell'icona
nella lista task MDC (.task-list-mdc è la classe che dovremmo
aver aggiunto all'elemento UL nel PHP) */
.task-list-mdc .mdc-list-item__graphic {
margin-right: 12px; /* Aggiusta questo valore (es. 8px, 10px, 16px) come preferisci */
/* Assicura allineamento verticale se necessario */
/* vertical-align: middle; */ /* Potrebbe non servire se .mdc-list-item usa già flex align-items: center */
}
/* Contenitore Speed Dial */
.speed-dial-container {
position: fixed;
bottom: 5.5rem;
right: 1.5rem; /* 24px */
z-index: 950;
/* Aggiungi per posizionare i mini-fab relativi a questo */
display: flex;
flex-direction: column-reverse; /* Mini-fab sopra, main fab sotto */
align-items: center;
}
/* Quando il menu è CHIUSO (.speed-dial--closed): */
.speed-dial-container.speed-dial--closed {
/* Rende l\'intero contenitore "trasparente" ai click. */
pointer-events: none;
}
.speed-dial-container.speed-dial--closed > #main-fab-toggle {
/* Ma riattiva i click SOLO per il bottone principale, per poterlo aprire. */
pointer-events: auto;
}
/* I bottoni secondari, quando il menu è chiuso, sono invisibili. */
.speed-dial-container .speed-dial-mini-fab {
transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.15s linear;
opacity: 0;
transform: scale(0);
}
/* Quando il menu è APERTO (NON .speed-dial--closed): */
.speed-dial-container:not(.speed-dial--closed) .speed-dial-mini-fab {
/* Diventano visibili e cliccabili. */
opacity: 1;
transform: scale(1);
pointer-events: auto;
}
/* Stile Mini FAB (stato nascosto) */
.speed-dial-mini-fab {
position: relative; /* O absolute se necessario, ma relativo al flex container va bene */
margin-bottom: 8px; /* Spazio tra i mini fab */
/* Stato iniziale nascosto e rimpicciolito */
opacity: 0;
transform: scale(0) translateY(10px); /* Parte da sotto e piccolo */
transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s linear;
pointer-events: none; /* Non cliccabile quando nascosto */
}
/* Stile Mini FAB (stato visibile - quando il container NON ha la classe --closed) */
.speed-dial-container:not(.speed-dial--closed) .speed-dial-mini-fab {
opacity: 1;
transform: scale(1) translateY(0); /* Torna a dimensione/posizione normale */
pointer-events: auto; /* Rende cliccabile */
}
/* Opzionale: Ritardo animazione per effetto "staggered" */
.speed-dial-container:not(.speed-dial--closed) .speed-dial-mini-fab:nth-last-of-type(1) { transition-delay: 0.05s; }
.speed-dial-container:not(.speed-dial--closed) .speed-dial-mini-fab:nth-last-of-type(2) { transition-delay: 0.1s; }
.speed-dial-container:not(.speed-dial--closed) .speed-dial-mini-fab:nth-last-of-type(3) { transition-delay: 0.15s; }
/* Nota: nth-last-of-type perché sono in ordine inverso nell'HTML rispetto alla visualizzazione */
/* Rimuovi vecchio stile posizionamento se era sul FAB stesso */
/* .app-fab-bottom-right { position: static; } */ /* Se era su a.mdc-fab */
#main-fab-toggle {
/* Il FAB principale ora è un elemento flex nel container */
margin-top: 8px; /* Spazio sopra il FAB principale */
}
/* Posizionamento Floating Action Button */
.app-fab-bottom-right {
position: fixed; /* Posizione fissa rispetto alla finestra */
bottom: 1.5rem; /* Distanza dal basso (es. 24px) */
right: 1.5rem; /* Distanza da destra (es. 24px) */
z-index: 950; /* Sopra il contenuto ma sotto drawer/dialog? Aggiusta se necessario */
}
/* Opzionale: Aggiusta margini su mobile se intralcia troppo */
@media (max-width: 600px) {
.app-fab-bottom-right {
bottom: 1rem; /* 16px */
right: 1rem; /* 16px */
}
}
.form-group {
padding: 16px 0px 16px;
}
/* Stili per Avatar Utente */
/* Avatar nelle liste (Task, Note, Chiamate, Utenti) */
.user-avatar-list {
width: 30px; /* Dimensione standard per le liste */
height: 30px;
border-radius: 50%; /* Rende l'immagine tonda */
object-fit: cover; /* Assicura che l'immagine copra l'area senza distorsioni */
margin-right: 8px; /* Spazio a destra dell'avatar */
vertical-align: middle; /* Allinea l'avatar verticalmente con il testo */
border: 1px solid #eee; /* Bordo sottile */
background-color: #ddd; /* Colore di sfondo di fallback */
}
/* Avatar più piccolo nelle liste correlate in vista dettaglio (es. Contatti nella vista Azienda) */
.user-avatar-list-small {
width: 20px; /* Dimensione ridotta */
height: 20px;
border-radius: 50%;
object-fit: cover;
margin-right: 6px;
vertical-align: middle;
border: 1px solid #eee;
background-color: #ddd;
}
/* Avatar nella pagina di dettaglio utente (view_user.php) */
.user-avatar-profile {
display: block; /* Posiziona l'avatar su una riga separata */
width: 100px; /* Dimensione maggiore per la pagina del profilo */
height: 100px;
border-radius: 50%;
object-fit: cover;
margin: 0 auto 15px auto; /* Centra l'avatar orizzontalmente e aggiunge spazio sotto */
border: 2px solid var(--mdc-theme-primary, #007bff); /* Bordo colorato (usa variabile MDC se definita) */
background-color: #ddd;
}
/* Avatar in vista dettaglio (Account, Task, Note, Chiamata) - accanto al nome utente */
.user-avatar-detail-small {
width: 30px; /* Dimensione simile a user-avatar-list */
height: 30px;
border-radius: 50%;
object-fit: cover;
margin-right: 8px;
vertical-align: middle;
border: 1px solid #eee;
background-color: #ddd;
}
/* Stile specifico per l'elemento IMG dell'avatar nella pagina edit_profile_form.php */
.user-avatar-profile-preview {
width: 80px; /* Imposta la larghezza desiderata */
height: 80px; /* Imposta l'altezza desiderata */
border-radius: 50%; /* Rende l'immagine tonda */
object-fit: cover; /* Fa in modo che l'immagine copra l'area 80x80 senza deformarsi */
margin-right: 15px; /* Spazio a destra */
margin-bottom: 10px; /* Spazio sotto */
vertical-align: top;
border: 1px solid #ccc;
background-color: #ddd;
}
/* MDC List item graphic container style */
/* Aggiungiamo uno stile al contenitore grafico di MDC per assicurarci che
possa contenere l'avatar e abbia un allineamento corretto */
.mdc-list-item__graphic {
/* Queste proprietà potrebbero già essere definite da MDC, ma le ripetiamo per chiarezza/override */
display: inline-flex; /* Usa flexbox per centrare l'icona/immagine */
align-items: center; /* Centra verticalmente */
justify-content: center; /* Centra orizzontalmente */
/* Le dimensioni di default di MDC per .mdc-list-item__graphic sono spesso 40x40px,
che va bene per i nostri avatar da 30px o 24px */
/* width: 40px; height: 40px; */ /* Opzionale: imposta dimensioni fisse se necessario */
margin-right: 16px; /* Spazio tra l'icona/avatar e il testo principale della riga */
}
/* Puoi rimuovere il margine destro dagli avatar stessi se il margine
viene gestito interamente dal .mdc-list-item__graphic */
.user-avatar-list,
.user-avatar-list-small,
.user-avatar-detail-small {
margin-right: 0; /* Rimuovi margine dall'immagine stessa se il contenitore grafico ha il margine */
}
/* Stili per Avatar/Immagine Contatto */
/* Immagine Contatto nelle liste (Lista Contatti, Contatti associati in vista Azienda) */
.contact-image-list {
width: 30px; /* Dimensione standard per le liste */
height: 30px;
border-radius: 50%; /* Rende tondo */
object-fit: cover; /* Evita distorsioni */
margin-right: 8px; /* Spazio a destra dell'immagine */
vertical-align: middle;
border: 1px solid #eee;
background-color: #ddd; /* Colore di fallback visibile se l'immagine non carica */
}
/* Icona Material Design "person" come fallback nelle liste */
.contact-image-list-fallback {
/* Deve avere le stesse dimensioni del .contact-image-list */
width: 30px;
height: 30px;
line-height: 30px !important; /* Centra verticalmente l'icona */
font-size: 20px !important; /* Dimensione dell'icona "person" (adatta se necessario) */
border-radius: 50%; /* Rende lo sfondo tondo */
background-color: #bdbdbd; /* Un colore di sfondo per l'icona (es. Grigio medio) */
color: #ffffff; /* Colore dell'icona (es. Bianco) */
text-align: center; /* Centra orizzontalmente l'icona */
margin-right: 8px; /* Spazio a destra */
vertical-align: middle;
border: 1px solid #eee;
overflow: hidden; /* Nasconde parti che potrebbero debordare */
display: inline-flex; /* O flex, per centratura più robusta */
align-items: center;
justify-content: center;
}
/* Immagine Contatto nella vista dettaglio (view_contact.php) */
.contact-image-detail {
width: 80px; /* Dimensione per vista dettaglio (puoi adattare) */
height: 80px;
border-radius: 50%;
object-fit: cover;
margin-right: 15px;
margin-bottom: 10px; /* Spazio sotto se mostrata prima del nome */
vertical-align: middle;
border: 1px solid #ccc;
background-color: #ddd;
}
/* Icona Material Design "person" come fallback nella vista dettaglio */
.contact-image-detail-fallback {
width: 80px;
height: 80px;
line-height: 80px !important;
font-size: 50px !important; /* Adatta dimensione icona */
border-radius: 50%;
background-color: #bdbdbd;
color: #ffffff;
text-align: center;
margin-right: 15px;
margin-bottom: 10px;
vertical-align: middle;
border: 1px solid #ccc;
overflow: hidden;
display: inline-flex; /* O flex */
align-items: center;
justify-content: center;
}
/* Stile per l'immagine/icona quando usata nel MDC graphic container */
/* Assicurati che il contenitore MDC abbia dimensioni e allineamento adeguati */
.mdc-list-item__graphic {
/* Queste proprietà potrebbero già essere definite da MDC */
display: inline-flex; /* Usa flexbox per centrare l'icona/immagine */
align-items: center; /* Centra verticalmente */
justify-content: center; /* Centra orizzontalmente */
/* width: 40px; height: 40px; */ /* Dimensioni tipiche per graphic */
margin-right: 16px; /* Spazio tra contenitore grafico e testo */
}
/* Rimuovi margine destro dalla ![]()
o / fallback se il margine è sul contenitore MDC */
.contact-image-list,
.contact-image-list-fallback,
.contact-image-detail,
.contact-image-detail-fallback {
margin-right: 0;
}
/* Stile per lo snippet della descrizione nella lista task */
.task-description-snippet {
font-size: 0.85em; /* Rendi il testo più piccolo rispetto al resto del secondary text */
color: #666; /* Un colore leggermente più chiaro o diverso */
/* display: block; */ /* Potresti volerlo su una linea separata */
/* margin-top: 4px; */ /* Spazio sopra lo snippet se su nuova linea */
}
/* Icona fallback più piccola nelle liste correlate in vista dettaglio (es. Task, Note, Chiamate) */
.user-avatar-list-small-fallback {
/* Deve avere le stesse dimensioni del .user-avatar-list-small (per le immagini) */
width: 20px; /* Dimensione ridotta */
height: 20px;
line-height: 24px !important; /* Centra verticalmente l'icona nel box */
font-size: 16px !important; /* Dimensione dell'icona "person" (adatta se necessario) */
border-radius: 50%; /* Rende lo sfondo tondo */
background-color: #bdbdbd; /* Un colore di sfondo per l'icona (es. Grigio medio) */
color: #ffffff; /* Colore dell'icona (es. Bianco) */
text-align: center; /* Centra orizzontalmente l'icona */
margin-right: 6px; /* Spazio a destra */
vertical-align: middle;
border: 1px solid #eee; /* Bordo sottile */
overflow: hidden; /* Nasconde parti che potrebbero debordare */
display: inline-flex; /* O flex, per centratura più robusta */
align-items: center;
justify-content: center;
}
/* Stile per l'icona fallback quando usata nel contenitore grafico di MDC list item */
/* Assicurati che questo contenitore MDC non interferisca con le dimensioni forzate */
.mdc-list-item__graphic .user-avatar-list-small-fallback {
margin: 0; /* Rimuovi margini se il contenitore MDC gestisce lo spazio */
padding: 0;
/* Assicurati che il contenitore MDC .mdc-list-item__graphic non abbia dimensioni fisse
troppo piccole o che l'icona si adatti bene al suo interno. */
}
/* Stile per Avatar/Immagine Contatto nelle liste */
/* Riusiamo o copiamo lo stile dell'avatar utente piccolo */
.contact-image-list, /* Per l'immagine servita da generate_contact_image.php */
.user-avatar-list-small /* Se riusi la stessa classe dell'avatar utente piccolo */
{
width: 20px; /* Dimensione ridotta */
height: 20px;
border-radius: 50%; /* Rende tondo */
object-fit: cover;
margin-right: 8px; /* Spazio a destra */
vertical-align: middle;
border: 1px solid #eee;
background-color: #ddd;
}
/* Stile per l'icona Material Design "person" come fallback per i contatti, dimensione piccola */
.contact-image-list-small-fallback, /* Nuova classe specifica per fallback contatto piccolo */
.user-avatar-list-small-fallback /* Se riusi la stessa classe dell'avatar utente piccolo */
{
width: 24px;
height: 24px;
line-height: 24px !important;
font-size: 16px !important; /* Adatta dimensione icona */
border-radius: 50%;
background-color: #bdbdbd;
color: #ffffff;
text-align: center;
margin-right: 8px;
vertical-align: middle;
border: 1px solid #eee;
overflow: hidden;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* Stile per le icone azione (telefono, email) nelle liste */
.contact-list-action-icon {
margin-left: 12px; /* Spazio a sinistra dell'icona (tra icone o tra testo e icona) */
text-decoration: none;
font-size: 1.2em; /* Aumenta leggermente la dimensione dell'icona */
vertical-align: middle;
display: inline-block; /* Per allineamento verticale */
color: #555; /* Colore dell'icona (adatta) */
}
.contact-list-action-icon:hover {
opacity: 0.7; /* Effetto hover */
}
/* Stile per l'immagine/icona quando usata nel MDC graphic container */
.mdc-list-item__graphic {
/* Larghezza e altezza appropriate per contenere l'immagine/icona da 24px */
/* width: 40px; height: 40px; */ /* Adatta se necessario */
margin-right: 16px; /* Spazio tra contenitore grafico e testo */
display: inline-flex; /* Assicura flexbox per centratura */
align-items: center; justify-content: center; /* Centra contenuto grafico */
}
/* Rimuovi margine destro dall'immagine/icona se il margine è sul contenitore */
.contact-image-list,
.contact-image-list-small-fallback,
.user-avatar-list-small,
.user-avatar-list-small-fallback {
margin-right: 0;
}
/* Stile per Icona Azienda nelle liste e viste */
.company-icon-list {
width: 30px; /* Dimensione standard per le liste */
height: 30px;
border-radius: 50%; /* Rende tondo (se applicabile all'immagine o fallback) */
object-fit: cover; /* Evita distorsioni (principalmente per favicon) */
margin-right: 8px; /* Spazio a destra */
vertical-align: middle;
border: 1px solid #eee;
background-color: #ddd; /* Colore di fallback/sfondo */
}
.company-icon-list-small {
width: 20px; /* Dimensione piccola per Kanban */
height: 20px;
border-radius: 50%; /* Rende tondo (se applicabile all'immagine o fallback) */
object-fit: cover; /* Evita distorsioni (principalmente per favicon) */
margin-right: 8px; /* Spazio a destra */
vertical-align: middle;
border: 1px solid #eee;
background-color: #ddd; /* Colore di fallback/sfondo */
}
.company-icon-detail {
width: 80px; /* Dimensione per vista dettaglio */
height: 80px;
border-radius: 50%;
object-fit: cover;
margin-right: 15px;
margin-bottom: 10px;
vertical-align: middle;
border: 1px solid #ccc;
background-color: #ddd;
}
/* Se usi il MDC list item graphic container, potresti voler aggiustare il suo stile */
.mdc-list-item__graphic {
/* Larghezza e altezza appropriate per contenere l'immagine/icona da 30px */
width: 40px; height: 40px; /* Queste dimensioni tipiche di MDC dovrebbero bastare */
margin-right: 16px; /* Spazio tra contenitore grafico e testo */
display: inline-flex; /* Assicura flexbox per centratura */
align-items: center; justify-content: center; /* Centra contenuto grafico */
}
/* Rimuovi margine destro dalla ![]()
se il margine è sul contenitore */
.company-icon-list {
margin-right: 0;
}
/* Stile per l'elemento IMG dell'Icona Azienda nella Top App Bar */
.company-icon-top-bar {
/* Definisce la dimensione e la forma dell'immagine *reale* o icona fallback */
width: 32px; /* Dimensione adatta per la top bar */
height: 32px;
border-radius: 50%; /* Rende tondo */
object-fit: cover; /* Evita distorsioni */
/* I margini sono gestiti dal contenitore .top-bar-company-icon-container */
margin: 0; /* Rimuovi margini */
vertical-align: middle;
border: 1px solid #eee; /* Bordo */
background-color: #ddd; /* Sfondo fallback */
display: block; /* O inline-block, a seconda di come vuoi che si comporti dentro il container */
}
/* Stile per il CONTENITORE dell'Icona Azienda nella Top App Bar */
/* Questo è l'elemento con la classe mdc-top-app-bar__action-item */
.top-bar-company-icon-container {
/* MDC top-app-bar__action-item ha già display: flex, centratura e padding/margini. */
/* Non dovresti dover aggiungere qui width/height/padding/margin a meno che non sia per un aggiustamento fine. */
/* Esempio: Assicurati che il contenitore sia flessibile e centri il suo contenuto */
display: flex;
align-items: center;
justify-content: center;
/* Le dimensioni e il padding di default di .mdc-top-app-bar__action-item dovrebbero bastare per contenere l'icona da 32px */
/* width: 48px; height: 48px; */ /* Tipiche dimensioni di un bottone icona MDC */
/* padding: 0 8px; */ /* Tipico padding orizzontale */
}
/* Regole MDC esistenti per gli action items (verificale nel CSS di MDC) */
/*
.mdc-top-app-bar__action-item {
display: inline-flex; // O flex
align-items: center;
justify-content: center;
padding: 0 12px; // Esempio di padding
}
*/
/* Definita in choices.min.css */
.choices__list--multiple .choices__item {
background-color: var(--mdc-theme-primary) !important;
color: var(--mdc-theme-on-primary) !important;
}
/* Stile per lo snippet delle note CRM negli eventi di calendario (dentro secondary text) */
.event-notes-snippet {
font-size: 1em; /* Dimensione relativa al testo secondario */
color: var(--mdc-theme-text-hint-on-background); /* Colore hint */
}
/* Potresti anche voler uno stile per l'icona "event" nel graphic container se la sua dimensione/colore predefinita non va bene */
/* .mdc-list-item__graphic .material-symbols-outlined { color: var(--mdc-theme-secondary); } */ /* Esempio: usa colore secondario */
/* Stili per la striscia colorata Kanban */
.kanban-column-color-strip {
height: 5px; /* Altezza della striscia */
width: 100%; /* Larghezza piena della colonna */
border-top-left-radius: 4px; /* Arrotonda angoli superiori */
border-top-right-radius: 4px;
margin-bottom: 0; /* Rimuove spazio sotto se l'header ha padding */
}
/* Opzionale: Aggiusta padding header colonna per non sovrapporre */
.kanban-column__header {
padding-top: 8px; /* Riduci padding top se la striscia lo sostituisce visivamente */
}
/* Stili per indicatore colore stato nella lista opportunità */
.stage-cell-with-color {
position: relative; /* Necessario per posizionare l'indicatore */
padding-left: 18px !important; /* Aumenta padding sinistro per fare spazio alla striscia */
/* Il padding predefinito di mdc-data-table__cell è 16px, aggiungiamo un po' */
}
.stage-color-indicator {
display: inline-block; /* O block se vuoi che stia sopra/sotto */
width: 6px; /* Larghezza della striscia */
height: 16px; /* Altezza (o 100% per tutta l'altezza cella) */
border-radius: 3px; /* Angoli arrotondati */
position: absolute; /* Posiziona rispetto alla cella */
left: 6px; /* Distanza dal bordo sinistro della cella */
top: 50%; /* Allinea verticalmente al centro */
transform: translateY(-50%); /* Centra verticalmente */
margin-right: 6px; /* Spazio tra striscia e testo stato */
vertical-align: middle; /* Allinea con il testo (se display: inline-block) */
}
/* Per pagine view* */
.detail-label {
font-weight: 500;
min-width: 150px;
display: inline-block;
color: var(--mdc-theme-text-secondary-on-background, rgba(0,0,0,0.6));
vertical-align: middle;
}
.mdc-list-item__graphic {
vertical-align: middle;
}
.mt-20 { margin-top: 20px; }
.mt-auto { margin-top: auto; }
.mb-8 { margin-bottom: 8px; }
.mb-10 {
margin-bottom: 10px !important; /* !important se necessario per sovrascrivere stili MDC */
}
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.ts { text-shadow: 1px 1px 2px rgba(0,0,0,0.7); }
.pad-12-15 { padding: 12px 15px; }
.pad-16 { padding: 16px; }
.pt-20 { padding-top: 20px; }
.ml-8 {
margin-left: 8px !important;
}
.w-15 {
width: 15%;
}
w-60 {
width: 60%;
}
.w-98 {
width: 98%;
}
.v_a_m { vertical-align: middle; }
.hidden {
display: none !important;
}
.account-under-task {
font-size:0.9em; color:#555;
}
.cursor_pointer { cursor: pointer; }
.d_flex_center { display: flex; align-items: center; }
.td_trigger_cursor { cursor: pointer; /* margin-left: 8px; */ font-size: 1.2em; }
.action-item { text-decoration: none; color: inherit; }
.mw-150 { min-width: 150px; }
.mw-200 { min-width: 200px; }
.display-block { display: block; }
.display-contents { display: contents; }
.pagination { text-align:center; font-size:0.9em; }
.pagination2 { text-align: center; margin-top: 20px; }
.pagination3 { display: inline-block; padding-left: 0; margin: 0; list-style: none; }
.pagination4 { display: inline; margin-right: 5px; }
.pagination6 { display: inline; margin-right: 5px; font-weight: bold; }
.pagination7 { display: inline; margin-left: 5px; }
.pagination8 { display: inline; margin-left: 5px; color: #ccc; }
.fwb { font-weight:bold; }
.list-group-heading { background-color:#f8f8f8; padding: 5px 10px; margin-top: 15px; margin-bottom: 5px; }
/* =================================== */
/* Stili per Avatar (CSP-Compliant) */
/* =================================== */
/* Classe base comune per tutti gli avatar */
.user-avatar {
display: inline-flex; /* Usa flex per centrare facilmente le iniziali */
align-items: center;
justify-content: center;
border-radius: 50%;
vertical-align: middle;
overflow: hidden;
/* Colore di sfondo di fallback se l'immagine non carica */
background-color: #e0e0e0;
}
/* Stili per l'immagine reale all'interno del contenitore */
.user-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* --- Classi per le Dimensioni --- */
.avatar-sm { /* 24px */
width: 24px;
height: 24px;
font-size: 10px; /* Adatta per iniziali */
}
.avatar-md { /* 32px - Default */
width: 32px;
height: 32px;
font-size: 14px;
}
.avatar-lg { /* 48px */
width: 48px;
height: 48px;
font-size: 20px;
}
.avatar-xl { /* 80px - Per pagine profilo/dettaglio */
width: 80px;
height: 80px;
font-size: 34px;
}
/* Stili per il contenitore delle iniziali */
.user-avatar-initial {
color: white;
font-weight: 500;
}
/* --- Classi per i Colori di Sfondo delle Iniziali (15 combinazioni) --- */
.avatar-bg-1 { background-color: #ef5350 !important; } /* Red */
.avatar-bg-2 { background-color: #ec407a !important; } /* Pink */
.avatar-bg-3 { background-color: #ab47bc !important; } /* Purple */
.avatar-bg-4 { background-color: #7e57c2 !important; } /* Deep Purple */
.avatar-bg-5 { background-color: #5c6bc0 !important; } /* Indigo */
.avatar-bg-6 { background-color: #42a5f5 !important; } /* Blue */
.avatar-bg-7 { background-color: #29b6f6 !important; } /* Light Blue */
.avatar-bg-8 { background-color: #26a69a !important; } /* Teal */
.avatar-bg-9 { background-color: #66bb6a !important; } /* Green */
.avatar-bg-10 { background-color: #9ccc65 !important; } /* Light Green */
.avatar-bg-11 { background-color: #d4e157 !important; } /* Lime */
.avatar-bg-12 { background-color: #ffee58 !important; color: #5f5f00 !important; } /* Yellow (con testo scuro) */
.avatar-bg-13 { background-color: #ffca28 !important; color: #614d00 !important; } /* Amber (con testo scuro) */
.avatar-bg-14 { background-color: #ffa726 !important; } /* Orange */
.avatar-bg-15 { background-color: #ff7043 !important; } /* Deep Orange */
/* Per drawer che deve stare sotto app-bar */
.z-3 { z-index: 3; }
/* Stili per le pagine di autenticazione (login, reset, ecc.) */
.auth-page-background {
background-color: #f0f2f5;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
.auth-card-container {
max-width: 400px;
/* width: 100%; */
padding: 16px;
}
.auth-card-container .extra-links a:nth-child(2) {
display: block; /* Force the second link (Sign Up) onto its own line */
margin-top: 8px; /* Add some spacing above the link */
}
.auth-card {
padding: 16px;
}
.auth-card-title {
font-size: 1.5em; /* 24px */
font-weight: 400;
text-align: center;
margin-bottom: 24px;
}
.auth-card .mdc-text-field {
width: 100%;
margin-bottom: 16px;
}
.auth-card .form-actions {
margin-top: 24px;
}
.auth-card .form-actions .mdc-button {
width: 100%;
}
.auth-card .extra-links {
margin-top: 24px;
text-align: center;
font-size: 0.875rem;
}
.auth-card .extra-links a {
text-decoration: none;
color: var(--mdc-theme-primary, #6200ee);
font-weight: 500;
}
/* Fine stili pagina autenticazione */
/*** Stili pagina profilo utente ***/
* --- Stili per le Card --- */
.profile-card,
.mdc-card--outlined {
margin-bottom: 24px; /* Spazio sotto le card */
}
.form-card-header {
padding: 16px;
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
.mdc-card__content {
padding: 16px;
}
/* Rimuove il padding per sezioni che lo gestiscono internamente */
.form-card__content--remove-padding {
padding: 0 !important;
}
/* --- Stili per la Card Profilo a Sinistra --- */
.profile-card {
text-align: center;
}
.profile-card__avatar-container {
padding-top: 32px;
margin-bottom: 16px;
}
.profile-card .user-avatar {
margin-left: auto;
margin-right: auto;
box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Sottile ombra per l'avatar */
}
.profile-card__info {
padding: 0 16px 16px;
}
.profile-card__info .text-muted {
color: var(--mdc-theme-on-surface-medium-emphasis, rgba(0, 0, 0, 0.6));
margin-top: -8px;
}
.profile-card__filename {
display: block;
padding: 0 16px 16px;
font-size: 0.8rem;
color: var(--mdc-theme-on-surface-medium-emphasis, rgba(0, 0, 0, 0.6));
min-height: 1.2rem; /* Altezza minima per evitare salti di layout */
}
/* --- Stili per la Sezione Impostazioni (Sinistra) --- */
.profile-settings-section {
display: flex;
align-items: center;
padding: 12px 16px;
gap: 16px; /* Spazio tra icona, contenuto e azione */
}
.profile-settings-section--column {
align-items: flex-start;
flex-direction: column;
gap: 8px;
}
.profile-settings-section__icon {
color: var(--mdc-theme-on-surface-medium-emphasis, rgba(0, 0, 0, 0.6));
flex-shrink: 0; /* Impedisce all'icona di rimpicciolirsi */
}
.profile-settings-section__content {
flex-grow: 1; /* Fa in modo che il contenuto occupi lo spazio disponibile */
}
.profile-settings-section__action {
flex-shrink: 0;
margin-left: auto; /* Spinge l'elemento di azione tutto a destra */
}
.profile-settings-section--column .mdc-typography--subtitle2 {
margin-bottom: 8px;
}
.mdc-divider {
border-bottom: 1px solid rgba(0,0,0,0.12);
margin: 0 16px; /* Allinea il divisore con il padding */
}
/* --- Stili per la Lista Account Gmail --- */
.gmail-accounts-list {
list-style: none;
padding-left: 0;
width: 100%;
margin: 0;
}
.gmail-accounts-list li {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 0;
font-size: 0.9rem;
}
.gmail-accounts-list .text-muted {
color: var(--mdc-theme-on-surface-medium-emphasis, rgba(0, 0, 0, 0.6));
}
/* --- Stili per i Form a Destra --- */
.w-100 {
width: 100%;
}
.form-section-title {
margin-top: 24px;
margin-bottom: 8px;
color: var(--mdc-theme-primary, #6200ee);
font-size: 0.875rem;
font-weight: 500;
text-transform: uppercase;
}
.card-actions-right {
display: flex;
justify-content: flex-end;
padding: 8px 16px !important;
}
/* --- Classi di Utilità --- */
.hidden-input {
display: none;
}
.ml-8 {
margin-left: 8px !important;
}
.text-button-danger .mdc-button__label {
color: var(--mdc-theme-error, #b00020) !important;
}
/*** Fine stili pagina profilo utente ***/
/*** Stili per il Dialog del Composer Email ***/
#email-composer-dialog .mdc-dialog__container {
width: 100%;
max-width: 720px; /* Un po' più largo per un'esperienza di scrittura migliore */
}
#email-composer-dialog .mdc-dialog__content {
padding: 24px 24px 24px 24px;
}
#email-composer-dialog .mdc-select {
margin-bottom: 8px;
}
#email-composer-dialog .w-100 {
width: 100%;
}
#email-composer-dialog .choices__inner {
width: 437px !important;
}
@media (max-width: 599px) {
#email-composer-dialog .choices__inner {
width: 325px !important;
}
}
.editor-div {
min-height: 250px !important;
}
/* Stili per il contenitore di Choices.js dentro la modale per email */
.mdc-dialog__content .choices-container {
position: relative;
}
.choices-container .mdc-select__icon {
position: absolute;
top: 16px;
z-index: 2;
color: rgba(0, 0, 0, 0.6);
}
.choices__inner {
background-color: transparent !important;
border: none !important;
padding-left: 48px !important; /* Spazio per l'icona */
min-height: 56px;
border-radius: 4px;
border: 1px solid rgba(0, 0, 0, 0.38) !important;
}
.choices.is-focused .choices__inner {
border-color: var(--mdc-theme-primary, #6200ee) !important;
border-width: 2px !important;
}
.choices__list--multiple .choices__item {
background-color: var(--mdc-theme-primary, #6200ee);
border-color: var(--mdc-theme-primary, #6200ee);
}
/*** Fine stili per il Dialog del Composer Email ***/
/* Stili per lista eventi pagina view_account.php */
.event-list-container {
padding: 0;
margin: 0;
list-style-type: none;
}
.event-item {
display: flex;
align-items: flex-start; /* Allinea l'icona in alto con il testo */
padding: 12px 16px;
border-bottom: 1px solid rgba(0,0,0,0.12);
gap: 16px; /* Spazio tra icona e contenuto */
}
.event-item--empty {
padding: 16px;
color: rgba(0,0,0,0.6);
}
.email-item {
cursor: pointer; /* Mantiene il cursore a puntatore per indicare che è espandibile */
flex-wrap: wrap; /* Permette alle azioni di andare a capo se necessario */
}
.event-item__icon {
color: var(--mdc-theme-primary, #6200ee);
font-size: 24px;
margin-top: 4px; /* Allinea meglio con la prima riga di testo */
}
.event-item__content {
flex-grow: 1;
min-width: 0; /* Previene problemi di overflow con flexbox */
}
.event-item__primary-text {
font-size: 1rem;
font-weight: 500;
display: block;
}
.event-item__secondary-text {
font-size: 0.875rem;
color: rgba(0,0,0,0.6);
display: block;
line-height: 1.4;
}
.event-item__secondary-text strong {
color: rgba(0,0,0,0.87);
font-weight: 500;
}
/* La logica per .email-snippet, .email-full-body, .email-actions rimane invariata */
.email-snippet { /* ... */ }
.email-full-body { /* ... */ }
.email-actions {
display: none;
width: 100%;
padding-top: 8px;
border-top: 1px solid #eee;
margin-top: 12px;
flex-basis: 100%; /* Assicura che occupi tutta la larghezza quando visibile */
}
.email-item.is-expanded .email-actions {
display: flex; /* Cambia in flex per allineare i bottoni */
gap: 8px;
}
/* Fine stili per lista eventi pagina view_account.php */
/*
* Allineamento per l'header del dialogo modale.
* Rende SPECIFICA la regola per l'header del DIALOGO EMAIL,
* in modo che non influenzi gli altri dialoghi.
*/
#email-composer-dialog .mdc-dialog__header {
display: flex;
align-items: center;
padding: 12px 24px;
}
#email-composer-dialog .mdc-dialog__title {
flex-grow: 1;
text-align: right; /* Allinea a destra SOLO nel dialogo email */
padding: 0;
margin-left: 16px;
}
/* Rimuoviamo il padding di default del titolo per un miglior controllo */
.mdc-dialog__title {
padding: 0;
margin-left: 16px; /* Aggiunge spazio tra il bottone e il titolo */
flex-grow: 1; /* Fa in modo che il titolo occupi tutto lo spazio rimanente */
text-align: right; /* Allinea il testo del titolo a destra */
margin-right: 8px;
}
/*
* Stili per rendere il modale di composizione dell'email a schermo intero
* su dispositivi con una larghezza massima di 600px (tipicamente i telefoni).
*/
@media (max-width: 600px) {
/* Selezioniamo il contenitore principale del dialogo quando è aperto */
.mdc-dialog--open#email-composer-dialog {
/* Rimuoviamo i limiti di larghezza e altezza per farlo espandere */
max-width: 100vw; /* Larghezza massima pari al 100% della larghezza della finestra */
max-height: 100vh; /* Altezza massima pari al 100% dell'altezza della finestra */
width: 100vw;
height: 100vh;
/* Rimuoviamo i margini per portarlo esattamente ai bordi dello schermo */
margin: 0;
}
/* Selezioniamo la "superficie" interna del dialogo, dove c'è il contenuto */
.mdc-dialog--open#email-composer-dialog .mdc-dialog__surface {
/* Rimuoviamo gli angoli arrotondati per un look a schermo intero */
border-radius: 0;
/* Assicuriamo che la superficie riempia il suo contenitore */
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
}
/* * Selezioniamo il contenitore del contenuto (dove c'è l'editor Quill)
* e gli diciamo di crescere per riempire lo spazio verticale disponibile.
* Questo è fondamentale per far funzionare lo scrolling.
*/
.mdc-dialog--open#email-composer-dialog .mdc-dialog__content {
flex-grow: 1;
overflow-y: auto; /* Permette lo scrolling verticale se il contenuto è più lungo dello schermo */
}
}
/* Contenitore principale per i filtri */
.search-filter-container {
display: none; /* Nascosto per default */
background-color: #f8f9fa;
border-radius: 8px;
padding: 16px;
margin-bottom: 16px;
border: 1px solid #e0e0e0;
}
/* Mostra il contenitore quando ha la classe .search-bar--visible */
.search-filter-container.search-bar--visible {
display: block; /* O flex, a seconda del contenuto del form */
}
.filter-form .mdc-layout-grid__inner {
align-items: center; /* Allinea verticalmente i campi */
}
/* --- Stili specifici per integrare Choices.js con MDC --- */
/* Campo di input di Choices.js */
.choices__inner {
width: 85% !important;
background-color: transparent !important;
border: 1px solid rgba(0, 0, 0, 0.24) !important;
border-radius: 4px !important;
padding: 12px 16px !important;
min-height: 30px !important;
font-size: 1rem !important;
line-height: 1.5rem !important;
}
/* Stile del bordo quando il campo è attivo (focus) */
.is-focused .choices__inner {
border-color: var(--mdc-theme-primary, #6200ee) !important;
border-width: 2px !important;
}
/* Stile dei tag selezionati (chip) */
.choices__list--multiple .choices__item {
/* background-color: #e0e0e0 !important; */
border: 1px solid #bdbdbd !important;
border-radius: 16px !important;
font-size: 0.875rem !important;
}
/* Pulsante per rimuovere un tag */
.choices__button {
margin-left: 8px !important;
}
/* No underline for text and icon in MDC-Button inside anchors */
a.mdc-button:hover {
text-decoration: none;
}
/* No underline for text and icon in MDC-FAB (speedial) inside anchors */
a.mdc-fab:hover {
text-decoration: none;
}
/* No underline for text and icon in MDC-List-Item inside anchors (i.e. menu) */
a.mdc-list-item:hover {
text-decoration: none;
}
/* No underline for icon buttons inside anchors (e.g. Delete button) */
a.mdc-icon-button:hover {
text-decoration: none;
}
/* ====================================== */
/* == DYNAMIC LAYOUT & SCRAPING BANNER == */
/* ====================================== */
/* 1. Define CSS variables on the root or body */
body {
/* Height of the top app bar */
--top-app-bar-height: 64px;
/* Height of the scraping banner (0 by default when not visible) */
--scraping-banner-height: 0px;
/* Total offset from the top of the page */
--total-top-offset: var(--top-app-bar-height);
}
/* Media query for mobile */
@media (max-width: 600px) {
body {
--top-app-bar-height: 56px; /* Adjust for mobile app bar height */
}
}
/* 2. When the banner is active, update the variables */
body.scraping-active {
--scraping-banner-height: 45px; /* Set the banner's actual height */
--total-top-offset: calc(var(--top-app-bar-height) + var(--scraping-banner-height));
}
/* 3. The banner style */
.scraping-notification {
position: sticky;
/* top: var(--top-app-bar-height); /* Sticks right below the main app bar */ */
z-index: 101; /* Must be higher than the app bar's content, but lower than modals */
background-color: #e3f2fd;
color: #1565c0;
padding: 12px 16px;
text-align: center;
font-size: 0.9rem;
font-weight: 500;
height: var(--scraping-banner-height); /* Use the variable for height */
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
}
/*
Questo contenitore speciale è richiesto da MDC per avvolgere il
contenuto principale dell'applicazione.
*/
.mdc-drawer-app-content {
/* Occupa tutto lo spazio rimanente sotto la barra superiore */
height: calc(100vh - var(--total-top-offset)); /* Altezza totale viewport meno l'altezza della TopAppBar meno eventuale banner scraping */
overflow-y: auto; /* Abilita lo scorrimento verticale SOLO per quest'area */
position: relative; /* Necessario per il corretto posizionamento */
}
@media (max-width: 600px) {
/* Questo fa stare l'icona nella top-app-bar dentro lo schermo */
.mdc-top-app-bar__row {
padding-right: 3px;
}
/* Correzione per schermi più piccoli dove la TopAppBar è alta 56px */
/* .mdc-drawer-app-content {
height: calc(100vh - 56px);
}*/
}
/* no underline in links inside more_vert */
a.mdc-list-item__text:hover {
text-decoration: none;
}
.welcome-icon {
font-size: 48px;
color: var(--mdc-theme-primary);
}
.welcome_message {
margin-bottom: 24px;
}
.paywall_lock_icon {
font-size: 48px;
color: var(--mdc-theme-error);
}
.mw-600 {
max-width: 600px;
}
.ta-center {
text-align: center;
}
/*
* Stili per il Banner di Notifica Trial
*/
.trial_warning {
margin-right: 8px;
font-size: 20px;
}
.scraping-notification-banner.trial-warning {
background-color: #FFF3E0; /* Arancione Chiaro */
color: #E65100; /* Arancione Scuro (Testo) */
border-bottom: 1px solid #FFCC80;
}
.scraping-notification-banner.trial-warning .banner-button {
background-color: #FB8C00; /* Arancione */
color: #fff;
}
.scraping-notification-banner.trial-danger {
background-color: #FFEBEE; /* Rosso Chiaro */
color: #C62828; /* Rosso Scuro (Testo) */
border-bottom: 1px solid #FFCDD2;
}
.scraping-notification-banner.trial-danger .banner-button {
background-color: #D32F2F; /* Rosso */
color: #fff;
}
.scraping-notification-banner .scraping-notification-text {
display: flex;
align-items: center;
justify-content: center;
}
/* Style for Country code selector */
.country-selector {
display: block;
margin-bottom: 4px;
}
.error_reset_password {
color: var(--mdc-theme-error, #b00020); margin-bottom: 16px;
}