/* ===================================================================
   File: /static/meetings/style.css
   Scopo: Stili unificati per l'app Meetings (Admin e Utente)
   Struttura:
     1) Reset & Variabili
     2) Base & Tipografia
     3) Layout & Utility
     4) Componenti comuni (Bottoni, Form, Messaggi/Badge)
     5) Sezioni Admin (Home, Gestione Riunione)
     6) Modali
     7) Pagine Utente
     8) Creazione Votazione (classi compatte + allineamenti)
     9) Responsive
=================================================================== */

/* ========== 1) Reset & Variabili ========== */
:root{
  --primary-color:#007bff;
  --secondary-color:#6c757d;
  --danger-color:#dc3545;
  --success-color:#28a745;
  --warning-color:#ffc107;
  --info-color:#17a2b8;
  --light-bg:#f8f9fa;
  --border-color:#dee2e6;
  --text-color:#343a40;
}

/* ========== 2) Base & Tipografia ========== */
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:sans-serif;
  color:var(--text-color);
  background-color:var(--light-bg);
  margin:20px;
}
h1,h2,h3{ color:var(--text-color); margin:0 0 10px 0; }
h1{ font-size:1.8rem; margin-bottom:15px; }
h2{ font-size:1.5rem; margin-bottom:15px; border-bottom:1px solid #eee; padding-bottom:10px; }
h3{ font-size:1.2rem; }

hr{ border:0; border-top:1px solid #eee; margin:25px 0; }

.container{
  max-width:900px;
  margin:20px auto;
  padding:25px;
  border:1px solid var(--border-color);
  border-radius:8px;
  background-color:#fff;
  box-shadow:0 2px 5px rgba(0,0,0,.05);
}

/* ========== 3) Layout & Utility ========== */
.clearfix::after{ content:""; display:block; clear:both; }
.mt-0{ margin-top:0!important; }
.mt-10{ margin-top:10px!important; }
.mt-15{ margin-top:15px!important; }
.mt-20{ margin-top:20px!important; }
.mb-0{ margin-bottom:0!important; }
.mb-10{ margin-bottom:10px!important; }
.mb-15{ margin-bottom:15px!important; }
.mb-20{ margin-bottom:20px!important; }
.text-center{ text-align:center!important; }
.text-right{ text-align:right!important; }
.hidden{ display:none!important; }

/* ========== 4) Componenti Comuni ========== */
/* -- Bottoni -- */
.button{
  display:inline-block;
  padding:8px 15px;
  font-size:.95rem;
  font-weight:500;
  line-height:1.4;
  color:#fff;
  background-color:var(--primary-color);
  border:1px solid var(--primary-color);
  border-radius:4px;
  text-align:center;
  text-decoration:none;
  cursor:pointer;
  white-space:nowrap;
  transition:all .2s ease-in-out;
  margin:2px;
}
.button:hover{ opacity:.85; }
.button[disabled], button[disabled]{
  background-color:#e9ecef!important;
  border-color:#ced4da!important;
  color:#6c757d!important;
  cursor:not-allowed!important;
  opacity:.65!important;
  box-shadow:none!important;
}
.button-primary{ background-color:var(--primary-color); border-color:var(--primary-color); }
.button-primary:hover{ background-color:#0069d9; border-color:#0062cc; }
.button-secondary{ background-color:var(--secondary-color); border-color:var(--secondary-color); }
.button-secondary:hover{ background-color:#5a6268; border-color:#545b62; }
.button-danger{ background-color:var(--danger-color); border-color:var(--danger-color); }
.button-danger:hover{ background-color:#c82333; border-color:#bd2130; }
.button-success{ background-color:var(--success-color); border-color:var(--success-color); }
.button-success:hover{ background-color:#218838; border-color:#1e7e34; }
.button-warning{ background-color:var(--warning-color); border-color:var(--warning-color); color:#212529; }
.button-warning:hover{ background-color:#e0a800; border-color:#d39e00; }
.button-info{ background-color:var(--info-color); border-color:var(--info-color); }
.button-info:hover{ background-color:#138496; border-color:#117a8b; }
.button-danger-outline{ background-color:transparent; border:1px solid var(--danger-color); color:var(--danger-color); }
.button-danger-outline:hover{ background-color:var(--danger-color); color:#fff; }
.button-small{ padding:4px 8px!important; font-size:.8rem!important; line-height:1.2!important; font-weight:normal!important; }

/* -- Form Generici -- */
.form-group{ margin-bottom: 18px; }
.form-group label{ display:block; margin:0 0 4px 0; font-weight:700; line-height:1.2; }
.form-col label{ display:block; margin:0; font-weight:700; line-height:1.2; }
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="number"],
.form-group select,
.form-group textarea{
  width:100%;
  padding:10px;
  border:1px solid #ccc;
  border-radius:4px;
  box-sizing:border-box;
}
/* Evita che i checkbox ereditino width:100% */
.form-group input[type="checkbox"],
.form-col input[type="checkbox"]{ width:auto; }

/* -- Messaggi/Badge -- */
.message-box{ padding:15px; margin-bottom:20px; border-radius:5px; text-align:center; border:1px solid transparent; }
.success-message{ color:#155724; background-color:#d4edda; border-color:#c3e6cb; }
.info-message{ color:#0c5460; background-color:#d1ecf1; border-color:#bee5eb; }
.error-message{ color:#721c24; background-color:#f8d7da; border-color:#f5c6cb; }
.status-active{ color:var(--success-color); font-weight:700; }
.status-inactive{ color:var(--danger-color); font-weight:700; }

/* ========== 5) Sezioni Admin ========== */
/* -- Home Admin -- */
.user-info, .logout-link{ font-size:.9rem; color:#555; }
.logout-link{ float:right; margin-left:15px; }
.meetings-list{ list-style:none; padding:0; margin-top:20px; clear:both; }
.meeting-item{
  background-color:#fff; border:1px solid #e0e0e0; border-left-width:6px;
  padding:12px 15px; margin-bottom:12px; border-radius:5px;
  display:flex; justify-content:space-between; align-items:center;
  box-shadow:0 1px 3px rgba(0,0,0,.05);
  transition:box-shadow .2s ease-in-out;
}
.meeting-item:hover{ box-shadow:0 2px 5px rgba(0,0,0,.1); }
.meeting-item.status-indicator-active{ border-left-color:var(--success-color); }
.meeting-item.status-indicator-inactive{ border-left-color:var(--danger-color); }
.meeting-info-block{ flex-grow:1; padding-right:15px; }
.meeting-info-block .title{ font-weight:700; font-size:1.15rem; color:#0056b3; margin:0 0 8px 0; }
.meeting-info-block .details{ display:flex; flex-wrap:wrap; gap:10px 20px; font-size:.9rem; }
.meeting-actions .button{ white-space:nowrap; }

/* -- Gestione Riunione -- */
.section{
  margin-bottom:25px; padding:20px; border:1px solid var(--border-color);
  border-radius:5px; background-color:var(--light-bg);
}
.poll-active-section{ background-color:#e8f5e9; border-left:5px solid var(--success-color); }
.poll-inactive-section{ background-color:var(--light-bg); border-left:5px solid var(--secondary-color); }

.attendance-list{
  list-style:none; padding:10px; margin-top:15px;
  max-height:300px; overflow-y:auto;
  border:1px solid #eee; background-color:#fff; border-radius:4px;
}
.attendance-list li{
  display:flex; justify-content:space-between; align-items:center;
  padding:5px 8px; border-bottom:1px dotted #eee; font-size:.95rem;
}
.participant-info{ flex-grow:1; margin-right:10px; }
.action-buttons-inline{ white-space:nowrap; flex-shrink:0; }

#voter-list{
  list-style:none; padding:10px; margin-top:10px;
  max-height:250px; overflow-y:auto;
  background-color:#fff; border:1px solid #ddd; border-radius:4px;
}
#voter-list li{ padding:6px 10px; border-bottom:1px dotted #eee; font-size:.9rem; }
.vote-time{ font-size:.8rem; color:#777; margin-left:10px; }
.action-buttons{ display:flex; gap:10px; flex-wrap:wrap; margin-top:15px; }
.action-buttons form{ margin:0; }

.button-like-link{
  background:none; border:none; padding:0; margin:0;
  color:var(--danger-color); text-decoration:underline; cursor:pointer;
  font-family:inherit; font-size:inherit; display:inline;
}
.button-like-link:hover{ color:#721c24; }
.button-like-link strong{ color:var(--text-color); text-decoration:none; }

/* Aumenta l'altezza e la dimensione del font dell'input del titolo */
.edit-title-form input[name="new_meeting_title"] {
    height: 44px; /* Aumenta l'altezza (puoi usare px, rem, em) */
    font-size: 1.1rem; /* Rende il testo all'interno più grande e leggibile */
    padding: 10px 12px; /* Adegua lo spazio interno */
}

/* Opzionale: Allinea meglio il pulsante "Salva Titolo" con il nuovo input */
.edit-title-form {
    display: flex;
    align-items: center; /* Allinea verticalmente gli elementi */
    gap: 10px; /* Aggiunge spazio tra l'input e il pulsante */
}

.edit-title-form input[name="new_meeting_title"] {
    flex-grow: 1; /* Fa in modo che l'input occupi lo spazio disponibile */
}

/* ========== 6) Modali ========== */
/* (mantieni i tuoi stili modali se esistono; placeholder) */
.modal-overlay{}
.modal-content{}
.time-input-group{}
.modal-actions{}

/* ========== 7) Pagine Utente ========== */
.register-form, .vote-page, .info-page, .confirmation{ max-width:500px; }
.meeting-code{ color:var(--primary-color); font-weight:700; }
.vote-option{
  margin-bottom:12px; padding:12px; border:1px solid #ddd; border-radius:5px;
  background-color:#fff; transition:background-color .2s;
}
.vote-option:hover{ background-color:#f0f8ff; }
.vote-option label{ display:block; font-weight:normal; cursor:pointer; font-size:1.1rem; }
#poll-question-text{ font-size:1.4rem; color:var(--primary-color); margin-bottom:15px; }

/* ========== 8) Creazione Votazione (Compatto & Allineato) ========== */
/* Layout a colonne con etichette sopra */
.form-row{ margin-bottom:18px;
  display:flex; gap:.75rem; flex-wrap:wrap; align-items:flex-start;
}
.form-col{
  display:flex; flex-direction:column; gap: 4px; min-width:12rem;
}
/* Select del tipo votazione contenuta */
.select-compact{
  width:18rem; max-width:50vw; min-width:12rem;
  height:36px; padding:6px 10px;
}
/* Numero opzioni compatto (2–3 cifre) */
.num-input-compact{
  width:5.5em; max-width:6ch; padding:6px 10px; padding-right:.25rem;
  height:36px;
}
/* Blocchetto delle opzioni numerate: nascosto finché non serve */
.is-hidden{ display:none; }

/* Checkbox: etichetta sopra, input allineato a sinistra */
.form-col.checkbox-col{ display:flex; flex-direction:column; align-items:flex-start; }
.form-col.checkbox-col input[type="checkbox"]{ margin-left:0; }

/* ========== 9) Responsive ========== */
@media (max-width: 600px){
  .container{ margin:10px; padding:18px; }
  .select-compact{ width:100%; max-width:100%; min-width:0; }
  .form-row{ margin-bottom:18px; gap:.5rem; }
  .meeting-info-block .details{ gap:8px 12px; }
}

/* --- NUOVA FUNZIONALITÀ: Layout a colonne per liste votanti --- */

.voter-status-columns {
    display: flex;
    gap: 20px; /* Spazio tra le colonne */
    flex-wrap: wrap; /* Permette alle colonne di andare a capo su schermi piccoli */
}

.voter-column {
    flex: 1; /* Ogni colonna occupa lo stesso spazio */
    min-width: 250px; /* Larghezza minima prima di andare a capo */
    background-color: #fff;
    padding: 15px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
}

.voter-column h4 {
    margin-top: 0;
    font-size: 1rem;
    color: var(--primary-color);
    border-bottom: 1px solid #eee;
    padding-bottom: 8px;
    margin-bottom: 10px;
}

.voter-column ul {
    list-style-type: none;
    padding-left: 0;
    margin: 0;
    max-height: 250px; /* Limita l'altezza e aggiunge scrollbar se necessario */
    overflow-y: auto;
}

.voter-column ul li {
    padding: 4px 0;
    font-size: 0.9em;
    border-bottom: 1px dotted #eee;
}

.voter-column ul li:last-child {
    border-bottom: none;
}

/* ... alla fine del file ... */

/* --- NUOVO: Miglioramenti Stile Checkbox Liste --- */
.toggle-list-controls {
    display: flex;
    align-items: center; /* Allinea verticalmente checkbox e testo */
    margin-bottom: 10px;
    font-size: 0.9em;
}

.toggle-list-controls label {
    margin-left: 5px;
    cursor: pointer;
    user-select: none; /* Impedisce la selezione del testo del label */
}

/* Stile aggiuntivo per garantire altezza minima colonne */
.voter-column {
    min-height: 50px; /* Evita che la colonna collassi se la lista è vuota */
}

/* Modale Preview Verbale */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 20px;
}

.modal-content {
    background: white;
    border-radius: 8px;
    padding: 25px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ====== Manage Meeting: look come Editor Template ====== */
#meeting-data-container.mm-ui{
  max-width: 1200px; margin: 0 auto; background:#fff;
  border-radius: 20px; box-shadow: 0 10px 40px rgba(0,0,0,.1); overflow: hidden;
  border: none !important;
}
/* Rimuove sfondo, raggio e ombra del contenitore principale */
#meeting-data-container.container.mm-ui{
  padding: 0 !important;
  border: none !important;
}
#meeting-data-container.mm-ui .header{
/*  background: linear-gradient(135deg,#667eea 0%,#764ba2 100%);*/
/*  background: linear-gradient(135deg,#1065d0 0%,#562b82 100%);*/
	background: linear-gradient(225deg, #086388 0%, #2020a0 100%);
  color:#fff; padding:30px; text-align:center; position:relative;
  border-radius: 15px 15px 0 0;
  overflow: hidden; /* clip di eventuali elementi assoluti/hover */
}
/* Titolo hero bianco, più specifico dell'h1 globale */
#meeting-data-container.mm-ui .header h1 { 
  color: #fff !important;
}
#meeting-data-container.mm-ui .back-link{
  position:absolute; left:25px; top:50%; transform: translateY(-50%);
  color:#fff; text-decoration:none; font-size:1.1em; display:flex; gap:5px; padding:8px 15px;
  background: rgba(255,255,255,.2); border-radius:8px; transition: all .3s;
}
#meeting-data-container.mm-ui .back-link:hover{ background: rgba(255,255,255,.3); }
#meeting-data-container.mm-ui .content{ padding:25px; }

/* Tabs come testo con underline (niente “pulsanti”) */
#meeting-data-container.mm-ui .mm-tabs{
  display:flex; gap:10px; border-bottom:2px solid #e0e0e0; margin-bottom:20px; flex-wrap:wrap;
/*  display:flex; gap:8px; margin-bottom:1px; flex-wrap:wrap;*/
  border: 3; /* niente riga sotto */
}
#meeting-data-container.mm-ui .mm-tab{
  all: unset;                           /* elimina lo stile button */
  display:inline-flex; align-items:center; gap:.4rem;
  padding: 10px 16px;
  border: 0px solid #e5e7eb;
  border-radius: 2px;
  background: #fff;
  color: #374151;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s, box-shadow .2s;
}
#meeting-data-container.mm-ui .mm-tab:hover{
  background: #f6f7ff;
  border-color: #d7dafe;
  color: #4f46e5;
}
/* tab attiva: piena azzurra con testo bianco */
#meeting-data-container.mm-ui .mm-tab.is-active{
  background: #667eea;
  border-color: #667eea;
  color: #fff;
  box-shadow: 0 2px 6px rgba(102,126,234,.25);
  font-weight: 600;
}

/* accessibilità: focus tastiera ben visibile */
#meeting-data-container.mm-ui .mm-tab:focus-visible{
  outline: 2px solid #a5b4fc;
  outline-offset: 2px;
}

/* Sezioni/card uniformi e allineate */
#meeting-data-container.mm-ui .section{
  background:#f8f9fa; border-radius:10px; padding:25px; margin-bottom:20px;
  border-left:4px solid #667eea; box-sizing: border-box;
}
#meeting-data-container.mm-ui .section h2{
  color:#667eea; margin-bottom:20px; font-size:1.3em;
}

/* Barra orizzontale: testo a sinistra, bottone a destra */
#meeting-data-container.mm-ui .participants-bar{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 15px;        /* come avevi prima */
}
#meeting-data-container.mm-ui .participants-bar .participants-count{
  margin: 0;               /* niente margine del <p> */
}
#meeting-data-container.mm-ui .participants-bar #exportParticipantsBtn{
  margin-left: auto;       /* spinge il bottone tutto a destra */
}

/* opzionale: su schermi stretti vai a capo ordinato */
@media (max-width: 640px){
  #meeting-data-container.mm-ui .participants-bar{
    flex-wrap: wrap;
    gap: 8px 12px;
  }
  #meeting-data-container.mm-ui .participants-bar #exportParticipantsBtn{
    margin-left: 0;
  }
  #meeting-data-container.mm-ui .control-actions{ gap:8px; }
  #meeting-data-container.mm-ui .control-actions .mm-btn{ width:100%; }
}

/* Riga azioni: bottoni allineati e stessa altezza */
#meeting-data-container.mm-ui .control-actions{
  display:flex; gap:12px; align-items:stretch; flex-wrap:wrap;
}
#meeting-data-container.mm-ui .control-actions form{ margin:0; display:flex; }
#meeting-data-container.mm-ui .control-actions .mm-btn{
  height:44px;                       /* stessa altezza */
  padding:0 16px;                    /* verticalmente centrato */
  display:inline-flex; align-items:center; justify-content:center;
  line-height:1; white-space:nowrap;
}
/* Se la classe button-compact accorcia troppo, forziamo qui */
#meeting-data-container.mm-ui .control-actions .button-compact.mm-btn{
  height:44px; padding:0 16px;
}

/* =========================================================
   UI condivisa per pannelli di amministrazione Meetings
   (manage_meeting, manage_admins, dashboard riunioni, login)
   ========================================================= */

/* Sfondo a gradiente e font base per le pagine "gestionali" */
body.manage-meeting-page,
body.manage-admins-page,
body.admin-home-page,
body.admin-dashboard-page,
body.login-page {
/*    background: linear-gradient(135deg, #502f9b 0%, #000040 100%);*/
    background: linear-gradient(135deg, #08638b 0%, #000040 100%);
    min-height: 100vh;
    margin: 0;
    padding: 20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Contenitore centrale tipo “card” grande */
.mm-ui.container {
    max-width: 1200px;
    margin: 0 auto;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

/* Header viola con titolo pagina */
.mm-ui .header {
/*    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);*/
		background: linear-gradient(225deg, #086388 0%, #2020a0 100%);
    color: #ffffff;
    padding: 24px 30px;
    text-align: center;
    position: relative;
}

.mm-ui .header h1 {
    color: #ffffff;
    font-size: 1.9rem;
    margin: 0 0 6px;
}

.mm-ui .header p {
    margin: 0;
    opacity: 0.9;
    font-size: 0.98rem;
}

/* Link “indietro” o “gestisci profilo” dentro l’header */
.mm-ui .back-link,
.mm-ui .header-action-link {
    position: absolute;
    left: 30px;
    top: 50%;
    transform: translateY(-50%);
    color: #ffffff;
    text-decoration: none;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    transition: all 0.25s;
}

.mm-ui .back-link:hover,
.mm-ui .header-action-link:hover {
    background: rgba(255, 255, 255, 0.28);
}

/* Link azione a destra (es. “Logout”) */
.mm-ui .header-action-right {
    right: 30px;
    left: auto;
}

/* Contenuto interno del pannello */
.mm-ui .content {
    padding: 24px 30px 32px;
}

/* Sezioni tipo “card” dentro la pagina */
.mm-ui .form-section,
.mm-ui .list-section,
.mm-ui .dashboard-card {
    background-color: #f8f9fa;
    border-radius: 12px;
    border: 1px solid #e0e0e0;
    padding: 20px 24px;
    margin-bottom: 20px;
}

/* Titoli sezioni */
.mm-ui .form-section h2,
.mm-ui .form-section h3,
.mm-ui .list-section h3,
.mm-ui .dashboard-card h3 {
    margin-top: 0;
    margin-bottom: 12px;
    font-size: 1.2rem;
}

/* Layout due colonne nei form */
.mm-ui .form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.mm-ui .form-group {
    flex: 1 1 240px;
    min-width: 0;
}

/* Tabs */
.mm-ui .tabs {
    display: flex;
    gap: 10px;
    border-bottom: 2px solid #e0e0e0;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.mm-ui .tab {
    padding: 10px 18px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 0.95rem;
    color: #666666;
    border-bottom: 3px solid transparent;
    transition: all 0.25s;
}

.mm-ui .tab:hover {
    color: #667eea;
}

.mm-ui .tab.active {
    color: #667eea;
    border-bottom-color: #667eea;
    font-weight: 600;
}

.mm-ui .tab-content {
    display: none;
}

.mm-ui .tab-content.active {
    display: block;
    animation: mmfade 0.25s;
}

/* Effetto fade */
@keyframes mmfade {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Messaggi flash */
.flash,
.flash-message,
.mm-ui .alert {
    padding: 10px 14px;
    border-radius: 6px;
    margin-bottom: 16px;
    font-size: 0.95rem;
}

.flash-success,
.flash.flash-success,
.mm-ui .alert-success {
    background-color: #e6f4ea;
    border: 1px solid #a8e0b0;
    color: #216e39;
}

.flash-error,
.flash.flash-error,
.mm-ui .alert-error {
    background-color: #fdecea;
    border: 1px solid #f5c2c0;
    color: #7a1f1a;
}

/* Pulsanti “principali” blu/viola */
.button.button-primary,
.mm-ui .btn-primary {
    background-color: #667eea;
    border-color: #667eea;
    color: #ffffff;
}

.button.button-primary:hover,
.mm-ui .btn-primary:hover {
    background-color: #5565d0;
    border-color: #5565d0;
    color: #ffffff;
}

/* Card riunione nella dashboard admin */
.mm-ui .meeting-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-radius: 12px;
    border-left: 6px solid #28a745;
    background-color: #ffffff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.04);
    margin-bottom: 12px;
}

.mm-ui .meeting-info {
    flex: 1 1 auto;
}

.mm-ui .meeting-title {
    font-weight: 600;
    margin-bottom: 4px;
}

.mm-ui .meeting-meta {
    font-size: 0.9rem;
    color: #555555;
}

/* Layout pagina di login */
/* il body della login diventa un flex container centrato */
body.login-page {
    display: flex;
    align-items: center;   /* centra verticalmente */
    justify-content: center; /* centra orizzontalmente */
}

/* la card resta limitata in larghezza */
.login-page .mm-ui.container {
    max-width: 480px;
    margin: 0 auto;        /* niente margin-top, ci pensa il flex */
}

.login-page .mm-ui.container {
    max-width: 480px;
    margin-top: 0 auto;
}

.login-page .login-logo {
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 8px;
    color: #ffffff;
}

.login-page .login-subtitle {
    font-size: 0.95rem;
    opacity: 0.9;
}

/* Input con icona “occhio” */
.input-with-icon {
    position: relative;
}

.input-with-icon input[type="password"],
.input-with-icon input[type="text"] {
    padding-right: 40px;
}

.password-toggle-icon {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    cursor: pointer;
    width: 20px;
    height: 20px;
    fill: #777777;
}