/*
 * Stile istituzionale di PreAtti.
 * Sobrio e leggibile, in linea con le linee guida di design dei servizi web della Pubblica Amministrazione: blu istituzionale,
 * font Titillium Web, angoli piccoli, nessun effetto vetro, nessun gradiente, contrasto alto, focus ben visibile.
 * Caricato DOPO style.css: sovrascrive senza toccare il resto. I colori passano dalle variabili del tema (chiaro e scuro).
 */
:root {
  --pa-radius: 4px;
  --pa-focus: #ff9900;
  --pa-line: var(--border-glass);
}

body { -webkit-font-smoothing: antialiased; }

/* Superfici: piene, con bordo sottile, senza vetro né ombre profonde */
.glass, .glass-premium, .portal-card, .custom-modal, .preview-modal-card {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-radius: var(--pa-radius) !important;
}
.glass, .portal-card { box-shadow: 0 1px 2px rgba(23, 50, 77, 0.08) !important; }
.portal-card { border-width: 1px !important; }
.portal-card:hover { transform: none !important; box-shadow: 0 2px 8px rgba(23, 50, 77, 0.14) !important; }
.portal-card:hover .portal-card-image-wrap { transform: none !important; }
.portal-card-image-wrap { border-radius: var(--pa-radius) !important; box-shadow: none !important; }
.custom-modal-overlay { backdrop-filter: none !important; background: rgba(23, 50, 77, 0.6) !important; }

/* Pulsanti: piatti, angoli piccoli, nessun gradiente né bagliore (anche quelli con lo stile in linea) */
.btn, button.btn {
  border-radius: var(--pa-radius) !important;
  background-image: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  font-weight: 600;
  letter-spacing: 0;
}
.btn:hover { transform: none !important; filter: brightness(0.94); }
.btn-primary, .btn-primary[style] { background: var(--primary-color) !important; color: #fff !important; }
.btn-success { background: #008055 !important; color: #fff !important; }
.btn-warning { background: #a66300 !important; color: #fff !important; }
.btn-danger { background: #d9364f !important; color: #fff !important; }
.btn-secondary { background: transparent !important; color: var(--primary-color) !important; border: 1px solid var(--primary-color) !important; }
.btn-secondary:hover { background: var(--primary-color) !important; color: #fff !important; filter: none; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; filter: none; }

/* Campi: angoli piccoli, bordo leggibile */
input.form-input, textarea.form-input, select.form-input, .form-input {
  border-radius: var(--pa-radius) !important;
}

/* Etichette di stato */
.badge { border-radius: 2px !important; letter-spacing: 0.02em; }

/* Accessibilita': focus sempre visibile */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--pa-focus) !important;
  outline-offset: 2px !important;
}

/* Le emoji rimaste come icone (menu, schede): monocromatiche, non colorate */
.drawer-icon, .office-card-icon, .portal-card-icon, .assistant-btn-icon { filter: grayscale(1) contrast(1.05); }

/* Assistente flottante: rettangolo pieno, non un'etichetta sfumata */
.assistant-floating-btn {
  background: var(--primary-color) !important;
  background-image: none !important;
  border-radius: var(--pa-radius) !important;
  box-shadow: 0 2px 8px rgba(23, 50, 77, 0.3) !important;
  animation: none !important;
}
.assistant-floating-btn:hover { transform: none !important; filter: brightness(0.94); }

/* Schede delle modalita' (erano pensate per uno sfondo scuro: testo bianco su bianco) */
.rup-mode-tab-btn { color: var(--text-secondary) !important; border-radius: 0 !important; }
.rup-mode-tab-btn:hover { color: var(--text-primary) !important; }
.rup-mode-tab-btn.active { color: var(--primary-color) !important; border-bottom-color: var(--primary-color) !important; }

/* ============================================================
   Home: fascia di apertura e schede di azione
   ============================================================ */
.portal-hero-card {
  border-radius: var(--pa-radius) !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 2.4rem 2.25rem 2.1rem 2.25rem !important;
  background-color: var(--primary-color);
}
.portal-hero-badge { border-radius: 2px !important; backdrop-filter: none !important; background: rgba(255, 255, 255, 0.14) !important; letter-spacing: 0.06em; }
.portal-hero-badge .badge-dot { box-shadow: none !important; background: #fff !important; border-radius: 1px !important; }
.portal-hero-title, .portal-card-heading, .portal-hero-card h1 {
  font-family: 'Titillium Web', system-ui, sans-serif !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
}
.portal-hero-title { font-size: 2.5rem !important; }
.portal-hero-subtitle { text-shadow: none !important; }
.portal-card-heading { font-size: 1.35rem !important; line-height: 1.3 !important; color: var(--text-primary); }
.portal-card-image-wrap { width: 56px !important; height: 56px !important; margin-bottom: 0.9rem !important; }
.portal-card-btn, .portal-btn-primary, .portal-btn-pink, .portal-btn-cyan {
  border-radius: var(--pa-radius) !important;
  box-shadow: none !important;
  background-image: none !important;
}
.portal-btn-primary, .portal-btn-pink, .portal-btn-cyan { background: var(--primary-color) !important; color: #fff !important; border: 1px solid var(--primary-color) !important; }
.portal-card-step-badge { border-radius: 2px !important; letter-spacing: 0.05em; }

/* ============================================================
   Uffici e aree dell'Ente
   ============================================================ */
#offices-tab .section-header {
  border-bottom: 1px solid var(--pa-line);
  padding-bottom: 1rem;
  margin-bottom: 1.5rem;
}
#offices-tab .office-eyebrow {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary-color);
  margin-bottom: 0.35rem;
}
#offices-tab .section-header h3 { font-size: 1.75rem; font-weight: 700; margin: 0 0 0.4rem 0; color: var(--text-primary); }
#offices-tab .section-header p { margin: 0; max-width: 72ch; font-size: 1rem; line-height: 1.5; color: var(--text-secondary); }

#offices-tab .offices-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1rem;
  margin-top: 0;
  align-items: stretch;
}
#offices-tab .office-card {
  position: relative;
  display: grid;
  grid-template-columns: 40px 1fr;
  grid-template-areas: "icon info" "desc desc";
  column-gap: 0.9rem;
  row-gap: 0.55rem;
  padding: 1.1rem 1.25rem 1.1rem 1.4rem;
  background: var(--bg-glass);
  border: 1px solid var(--pa-line);
  border-left: 4px solid var(--pa-line);
  border-radius: var(--pa-radius);
  box-shadow: none;
  transform: none;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
#offices-tab .office-card:hover { border-color: var(--primary-color); transform: none; box-shadow: none; }
#offices-tab .office-card.active { border-color: var(--primary-color); border-left-color: var(--primary-color); background: rgba(0, 102, 204, 0.06); box-shadow: none; }
#offices-tab .office-card-icon {
  grid-area: icon;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  color: var(--primary-color);
  background: rgba(0, 102, 204, 0.09);
  border-radius: var(--pa-radius);
  font-size: 0;
  filter: none;
}
#offices-tab .office-card-icon svg { width: 22px; height: 22px; fill: currentColor; }
#offices-tab .office-card-info { grid-area: info; min-width: 0; }
#offices-tab .office-card-info h5 { margin: 0; font-size: 1.05rem; line-height: 1.3; font-weight: 700; color: var(--text-primary); }
#offices-tab .office-card-mgr { display: block; margin-top: 0.2rem; font-size: 0.82rem; color: var(--text-muted); }
#offices-tab .office-card-desc { grid-area: desc; margin: 0; font-size: 0.9rem; line-height: 1.45; color: var(--text-secondary); }

#offices-tab .office-workspace-panel {
  margin-top: 2rem !important;
  padding: 0;
  background: var(--bg-glass);
  border: 1px solid var(--pa-line);
  border-radius: var(--pa-radius);
  box-shadow: none;
  overflow: hidden;
}
#offices-tab .office-header-flex {
  margin: 0;
  padding: 1.1rem 1.5rem;
  border-bottom: 1px solid var(--pa-line);
  background: rgba(0, 102, 204, 0.05);
}
#offices-tab .office-title-box { display: flex; align-items: center; gap: 1rem; }
#offices-tab .office-big-icon {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; background: var(--primary-color);
  border-radius: var(--pa-radius);
  font-size: 0; filter: none;
}
#offices-tab .office-big-icon svg { width: 24px; height: 24px; fill: currentColor; }
#offices-tab .office-title-box h4 { margin: 0; font-size: 1.25rem; font-weight: 700; color: var(--text-primary); }
#offices-tab .office-title-box small { color: var(--text-muted); font-size: 0.85rem; }
#offices-tab .office-chat-container { padding: 1.25rem 1.5rem 1.5rem; }
#offices-tab .office-chat-container::before {
  content: "Assistente dell'area — le risposte sono generate dall'IA a supporto dell'istruttoria e vanno verificate sulle fonti.";
  display: block;
  margin-bottom: 0.75rem;
  font-size: 0.82rem;
  color: var(--text-muted);
}

#offices-tab .telegram-chat-box {
  height: auto;
  min-height: 360px;
  border: 1px solid var(--pa-line);
  border-radius: var(--pa-radius);
  background: var(--bg-glass);
  box-shadow: none;
}
#offices-tab .chat-messages-scroll { flex: 1; max-height: 520px; padding: 1.1rem; background: var(--bg-primary); gap: 0.9rem; }
#offices-tab .chat-bubble {
  max-width: min(760px, 92%);
  padding: 0.85rem 1.1rem;
  border-radius: var(--pa-radius);
  font-size: 0.95rem;
  line-height: 1.55;
  box-shadow: none;
}
#offices-tab .chat-bubble > strong:first-child { display: block; margin-bottom: 0.25rem; font-size: 0.78rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); }
#offices-tab .office-bot-pill[hidden], #offices-tab .sub-agents-tags[hidden] { display: none !important; }
#offices-tab .bot-bubble {
  background: var(--bg-glass);
  color: var(--text-primary);
  border: 1px solid var(--pa-line);
  border-left: 4px solid var(--primary-color);
}
#offices-tab .user-bubble {
  background: var(--primary-color);
  color: #fff;
  border: 1px solid var(--primary-color);
}
#offices-tab .user-bubble > strong:first-child { color: rgba(255, 255, 255, 0.85); }
#offices-tab .bot-bubble.error { border-left-color: #d9364f; }
#offices-tab .bot-bubble p { margin: 0 0 0.5rem 0; }
#offices-tab .quick-commands-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.6rem; }
#offices-tab .cmd-pill {
  padding: 0.3rem 0.8rem;
  background: transparent;
  color: var(--primary-color);
  border: 1px solid var(--primary-color);
  border-radius: var(--pa-radius);
  font-size: 0.82rem;
  font-weight: 600;
}
#offices-tab .cmd-pill:hover { background: var(--primary-color); color: #fff; }
#offices-tab .chat-input-bar { background: var(--bg-glass); border-top: 1px solid var(--pa-line); padding: 0.85rem 1rem; }

/* Risposte dell'assistente: titoli, elenchi e tabelle leggibili */
#offices-tab .office-reply { font-size: 0.95rem; line-height: 1.55; }
#offices-tab .office-reply p { margin: 0 0 0.6rem 0; }
#offices-tab .office-reply-h { margin: 1rem 0 0.4rem 0; font-size: 1rem; font-weight: 700; color: var(--text-primary); border-bottom: 1px solid var(--pa-line); padding-bottom: 0.25rem; }
#offices-tab .office-reply ul, #offices-tab .office-reply ol { margin: 0 0 0.7rem 1.2rem; padding: 0; }
#offices-tab .office-reply li { margin-bottom: 0.25rem; }
#offices-tab .office-reply hr { border: 0; border-top: 1px solid var(--pa-line); margin: 0.9rem 0; }
#offices-tab .office-reply code { background: rgba(0, 102, 204, 0.08); padding: 0 0.3rem; border-radius: 2px; font-size: 0.88em; }
#offices-tab .office-reply-table { width: 100%; border-collapse: collapse; margin: 0.4rem 0 0.9rem 0; font-size: 0.9rem; display: block; overflow-x: auto; }
#offices-tab .office-reply-table th { text-align: left; background: rgba(0, 102, 204, 0.08); color: var(--text-primary); font-weight: 700; }
#offices-tab .office-reply-table th, #offices-tab .office-reply-table td { border: 1px solid var(--pa-line); padding: 0.45rem 0.65rem; vertical-align: top; }