/* =============================================================================
   AD Consulting — Hub Interno
   Token system
   Colore: blu brand (#0D99FF) e rosa del pallino del logo, entrambi usati a
           tutto campo (pannelli, blocchi reparto, CTA) — non solo come sfumatura
           di sfondo. Niente gradienti: solo campiture piatte, a contrasto alto.
   Tipografia: Archivo (display, grottesca pesante — sicura di se', non timida)
               + Manrope (testo, geometrica pulita) + IBM Plex Mono (codici
               reparto, dati: funzionale, non decorativa).
   Firma: i "blocchi" reparto sono campiture piene del colore di reparto — il
          nome stesso della UI ("blocchi") preso alla lettera, come una parete
          di pulsanti/quadri colorati invece dell'ennesima card bianca con
          icona pastello.
   ============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@700;800;900&family=Manrope:wght@500;600;700;800&family=IBM+Plex+Mono:wght@500&display=swap');

:root {
  --blue: #0d99ff;
  --blue-dark: #0a63b3;
  --pink: #e0106a;
  --pink-light: #ffaad6; /* solo per testo su superfici blu scure: --pink su --blue-dark non passa 3:1 */
  --pink-dark: #b80d56;
  --ink: #0b1220;
  --slate: #57708a;
  --bg: #f3f5f8;
  --surface: #ffffff;
  --border: #e1e8f0;

  --font-display: 'Archivo', 'Segoe UI', sans-serif;
  --font-body: 'Manrope', 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;

  --radius: 12px;
  --radius-sm: 8px;

  /* Palette accenti reparto: campitura piena del blocco. Il testo sopra usa
     --accent-fg (ink o bianco, verificato per ogni accento — vedi le regole
     .accent-* piu' sotto): su blue/teal/amber l'ink passa AA (5.9-7.9:1), ma
     su purple/slate/rose scenderebbe a 3.4-3.7:1, sotto soglia. */
  --accent-blue: #0d99ff;
  --accent-teal: #0ea394;
  --accent-purple: #6c4fe0;
  --accent-amber: #f0930f;
  --accent-slate: #55708a;
  --accent-rose: #d81066;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow: hidden; /* app desktop: niente scroll di pagina, solo dei pannelli interni */
}

button, input { font-family: inherit; }

a { text-decoration: none; color: inherit; }

.eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--blue-dark);
  margin-bottom: 10px;
}

.view { width: 100vw; height: 100vh; }

.view:not([hidden]) { animation: view-in 0.55s cubic-bezier(0.16, 1, 0.3, 1); }

@keyframes view-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* L'attributo `hidden` da solo perde contro le regole .view-login/.view-dashboard
   qui sotto (stessa specificità, ma le nostre sono definite nel foglio di stile
   dell'app e quindi vincono su quella di default del browser). Questa regola,
   più specifica, garantisce che un elemento con `hidden` sparisca per davvero. */
.view[hidden] {
  display: none;
}

/* =============================================================================
   LOGIN VIEW — split screen: pannello brand a sinistra, form a destra
   ============================================================================= */

.view-login {
  display: grid;
  grid-template-columns: minmax(320px, 42%) 1fr;
}

.login-brand {
  position: relative;
  background: var(--blue-dark); /* --blue pieno non regge testo bianco leggibile (~3:1 al massimo) */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.login-brand-inner {
  position: relative;
  z-index: 1;
  text-align: left;
  padding: 0 56px;
  color: #ffffff;
}

.brand-logo {
  width: 108px;
  height: 108px;
  display: block;
  margin-bottom: 28px;
  background: #fff;
  border-radius: 22px;
  padding: 18px;
}

.brand-wordmark {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 44px;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
  color: #ffffff;
}

.wm-llm {
  color: var(--pink);
}

/* Su --blue-dark il rosa pieno cade sotto 2:1: qui serve la variante chiara */
.brand-wordmark .wm-llm {
  color: var(--pink-light);
}

.brand-tagline {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  margin: 0 0 10px;
  color: rgba(255,255,255,0.95);
  letter-spacing: 0.01em;
}

.brand-sub {
  font-size: 14px;
  max-width: 300px;
  margin: 0;
  color: rgba(255,255,255,0.88);
  line-height: 1.5;
}

/* Chip coi codici reparto reali: gli stessi "blocchi" della dashboard, in
   miniatura, gia' visibili da qui — non un pattern decorativo astratto. */
.brand-directory {
  position: absolute;
  left: 56px;
  right: 40px;
  bottom: 40px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.brand-directory li {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.95);
  background: rgba(255, 255, 255, 0.22);
  padding: 5px 10px;
  border-radius: 6px;
}

.login-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  padding: 40px;
}

.login-form {
  width: 100%;
  max-width: 360px;
}

.login-form h1 {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 800;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}

.login-copy {
  color: var(--slate);
  font-size: 14.5px;
  line-height: 1.5;
  margin: 0 0 28px;
}

.field {
  display: block;
  margin-bottom: 16px;
}

.field-label {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
}

.field input {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border);
  background: #fbfcfe;
  font-size: 14.5px;
  color: var(--ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.field input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(13, 153, 255, 0.14);
  background: #ffffff;
}

.login-error {
  background: #fdecf2;
  border: 1px solid #f6b8d1;
  color: #a30d52;
  font-size: 13px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  margin-bottom: 16px;
}

.btn-primary {
  width: 100%;
  padding: 13px 18px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--pink);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: background 0.15s ease, transform 0.05s ease;
}

.btn-primary:hover { background: var(--pink-dark); }
.btn-primary:active { transform: scale(0.99); }
.btn-primary:disabled { opacity: 0.7; cursor: default; }

.btn-spinner {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.35);
  border-top-color: #fff;
  animation: spin 0.7s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.login-divider {
  margin: 16px 0;
  font-size: 12.5px;
  color: var(--slate);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.login-hint {
  margin-top: 18px;
  font-size: 12.5px;
  color: var(--slate);
  text-align: center;
}

.login-hint code {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 1px 6px;
  font-family: var(--font-mono);
  font-size: 11.5px;
}

.btn-microsoft {
  width: 100%;
  padding: 11px 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.btn-microsoft:hover {
  border-color: var(--slate);
  background: #fbfcfe;
}

/* =============================================================================
   COMPANY SELECT VIEW — stesso linguaggio della dashboard (topbar + blocchi),
   le societa' del gruppo trattate come un "ticker" da holding: codice a 3
   lettere in font mono, stesso trattamento dei codici reparto (OPS-10 ecc.)
   ============================================================================= */

.view-company {
  display: flex;
  flex-direction: column;
}

.company-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 40px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.company-main {
  flex: 1;
  padding: 56px 48px 56px;
  overflow-y: auto;
}

.company-header {
  text-align: center;
}

.company-header h1 {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 800;
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}

.company-sub {
  color: var(--slate);
  font-size: 14.5px;
  margin: 0 0 36px;
}

.company-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px;
  max-width: 1100px;
  margin: 0 auto;
  justify-content: center;
}

.company-card {
  position: relative;
  border-radius: var(--radius);
  cursor: pointer;
  border: none;
  text-align: center;
  align-items: center;
  background: var(--accent, var(--slate));
  color: var(--accent-fg, var(--ink));
  padding: 22px;
  display: flex;
  flex-direction: column;
  font-family: inherit;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  animation: card-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) backwards;
  animation-delay: calc(var(--i, 0) * 45ms);
}

.company-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(11, 18, 32, 0.2);
}

.company-ticker {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.01em;
  margin-bottom: 14px;
}

.company-name {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
  margin: 0;
}

.company-cta {
  margin-top: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.company-card svg { transition: transform 0.15s ease; }
.company-card:hover .company-cta svg { transform: translateX(3px); }

/* =============================================================================
   DASHBOARD VIEW — niente più sidebar: topbar leggera + blocchi full-page
   ============================================================================= */

.view-dashboard {
  display: flex;
  flex-direction: column;
}

.dash-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 40px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.topbar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.topbar-logo {
  width: 32px;
  height: 32px;
}

.topbar-wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.dept-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: #fff;
  background: var(--blue-dark); /* --blue pieno + testo bianco 12px non passa AA (~3:1) */
  border-radius: var(--radius-sm);
  padding: 7px 14px;
}

.dept-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  flex-shrink: 0;
}

.user-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 10px 4px 4px;
  border-radius: var(--radius-sm);
  background: var(--bg);
  border: 1px solid var(--border);
}

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--blue-dark);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 12.5px;
  flex-shrink: 0;
}

.user-meta { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }

.user-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}

.user-role {
  font-size: 11.5px;
  color: var(--slate);
}

.btn-logout-top {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--slate);
  padding: 9px 16px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.btn-logout-top:hover { background: var(--bg); color: var(--ink); }

.dashboard-main-full {
  flex: 1;
  padding: 40px 48px 56px;
  overflow-y: auto;
}

/* Due pannelli saldati in un unico pezzo (zero gap, angoli complementari:
   il sinistro arrotondato solo a sx, il destro solo a dx), ancorato a
   sinistra e steso a piena larghezza — sia in vista reparti che dentro
   una BU. Su una BU (vedi app.js) e' solo il pannello blu a collassare
   (vedi .drilled-in), il resto della riga non si muove. */
.hero-row {
  display: flex;
  align-items: stretch;
  width: 100%;
  margin: 0 0 30px;
}

/* Titolo + descrizione: meta' blu del pezzo saldato. Il collasso (drilled-in)
   anima max-width/min-width/padding verso 0 con overflow:hidden, opacity in
   dissolvenza piu' rapida cosi' il testo non si vede "spiaccicare" mentre il
   box si stringe. white-space:nowrap SOLO durante il collasso: impedisce al
   titolo/descrizione di andare a capo mentre la larghezza si stringe (andare
   a capo su tante righe farebbe esplodere l'altezza del pannello, e quindi
   dell'intera riga con lui, essendo align-items:stretch). */
.welcome-panel {
  background: var(--blue-dark);
  border-radius: 20px 0 0 20px;
  padding: 34px 40px;
  min-width: 460px;
  max-width: 560px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: min-width 0.6s cubic-bezier(0.16, 1, 0.3, 1), max-width 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    padding 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
}

.hero-row.drilled-in .welcome-panel {
  min-width: 0;
  max-width: 0;
  padding-left: 0;
  padding-right: 0;
  opacity: 0;
}

.hero-row.drilled-in .welcome-title,
.hero-row.drilled-in .welcome-copy {
  white-space: nowrap;
}

.welcome-title {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 900;
  letter-spacing: -0.015em;
  line-height: 1.05;
  color: #ffffff;
  margin: 0 0 12px;
}

.welcome-title .wm-llm {
  color: var(--pink-light); /* --pink pieno su --blue-dark non passa 3:1, vedi token nel wordmark del login */
}

.welcome-copy {
  color: rgba(255, 255, 255, 0.92);
  font-size: 16px;
  line-height: 1.55;
  max-width: 46ch;
  margin: 0;
}

/* Meta' chiara del pezzo saldato, da cui "parte" la ricerca: stesso raggio
   del pannello blu ma solo sui due angoli esterni, cosi' la giunzione al
   centro resta un unico bordo dritto, non una cucitura visibile. */
.search-panel {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-left-width: 0; /* style resta "solid" sempre: e' la width ad animare 0 -> 1.5px, none non transizionerebbe */
  border-radius: 0 20px 20px 0;
  padding: 34px 40px;
  min-width: 620px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: 0 16px 34px rgba(11, 18, 32, 0.08);
  transition: border-radius 0.4s ease, border-left-width 0.4s ease;
}

/* Col pannello blu collassato non c'e' piu' niente a cui saldarsi: torna
   un riquadro intero, coi suoi 4 angoli e il bordo sinistro. */
.hero-row.drilled-in .search-panel {
  border-radius: 20px;
  border-left-width: 1.5px;
}

.search-lead {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 14px;
}

.dashboard-sub {
  color: var(--slate);
  font-size: 14.5px;
  margin: 28px 0 32px;
}

/* =============================================================================
   SEARCH — "a cosa ti serve WiLLMa?": ricerca per parola/sinonimo su reparti
   e microservizi, non solo sul nome esatto (vedi loadSearchIndex in app.js).
   ============================================================================= */

.search-wrap {
  position: relative;
  width: 100%;
  max-width: 780px;
}

.search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--slate);
  pointer-events: none;
}

.search-input {
  width: 100%;
  padding: 15px 18px 15px 46px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border);
  background: var(--surface);
  font-size: 15px;
  color: var(--ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.search-input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(13, 153, 255, 0.14);
}

.search-results {
  position: absolute;
  z-index: 20;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 0 16px 40px rgba(11, 18, 32, 0.16);
  overflow: hidden;
  animation: search-in 0.15s ease;
}

@keyframes search-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.search-result {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  border: none;
  background: none;
  text-align: left;
  padding: 11px 16px;
  cursor: pointer;
  font-family: inherit;
  color: var(--ink);
  border-bottom: 1px solid var(--border);
}

.search-result:last-child { border-bottom: none; }
.search-result:hover, .search-result.is-active { background: var(--bg); }

.search-result-icon {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent, var(--slate));
  color: var(--accent-fg, var(--ink));
}

.search-result-icon svg { width: 16px; height: 16px; }

.search-result-text { min-width: 0; }

.search-result-name {
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-result-path {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--slate);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.search-empty {
  padding: 16px;
  font-size: 13px;
  color: var(--slate);
}

@keyframes search-hit-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(13, 153, 255, 0); }
  30% { box-shadow: 0 0 0 6px rgba(13, 153, 255, 0.35); }
}

.block-card.search-hit { animation: search-hit-pulse 1.1s ease; }

.drilldown-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: -12px 0 24px;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: none;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--slate);
  cursor: pointer;
}

.back-link:hover { color: var(--ink); }

.drilldown-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 15px;
  color: var(--ink);
  padding-left: 14px;
  border-left: 1px solid var(--border);
}

.blocks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 18px;
}

/* Vista microservizi (drilldown-bar visibile): meno card, quindi centrate
   invece di allinearle a sinistra su una riga incompleta. */
#drilldown-bar:not([hidden]) ~ .blocks-grid {
  grid-template-columns: repeat(auto-fit, minmax(250px, 280px));
  justify-content: center;
}

/* Blocco = campitura piena del colore di reparto: la parola "blocchi" presa
   alla lettera. Il testo resta sempre --ink sopra il colore, per un contrasto
   stabile senza dover inventare una variante scura per ogni accento. */
.block-card {
  position: relative;
  border-radius: var(--radius);
  cursor: pointer;
  background: var(--accent, var(--slate));
  color: var(--ink);
  padding: 22px;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  animation: card-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) backwards;
  animation-delay: calc(var(--i, 0) * 45ms);
}

.block-card:not(.is-locked):hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(11, 18, 32, 0.2);
}

@keyframes card-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

.empty-state {
  grid-column: 1 / -1;
  color: var(--slate);
  font-size: 14.5px;
  line-height: 1.6;
  max-width: 46ch;
}

.block-icon {
  color: var(--accent-fg, var(--ink));
  opacity: 0.9;
  margin-bottom: 14px;
}

.block-code {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--accent-fg, var(--ink));
  margin-bottom: 10px;
}

.block-name {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
  margin: 0 0 6px;
  color: var(--accent-fg, var(--ink));
}

/* Gerarchia data da dimensione/peso, non da opacita': su purple/slate/rose un
   grigio o un ink/bianco trasparente scende sotto 4.5:1 (verificato). */
.block-desc {
  font-size: 13px;
  line-height: 1.55;
  color: var(--accent-fg, var(--ink));
  margin: 0;
  flex: 1;
}

.block-cta {
  align-self: flex-start;
  margin-top: 18px;
  border: none;
  background: none;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-fg, var(--ink));
  cursor: pointer;
}

.block-cta svg { transition: transform 0.15s ease; }
.block-card:not(.is-locked):hover .block-cta svg { transform: translateX(3px); }

.block-card.is-locked,
.block-card.is-preview-only {
  background: color-mix(in srgb, var(--accent, var(--slate)) 14%, var(--bg));
}

.block-card.is-locked {
  cursor: default;
  pointer-events: none; /* reparto non ancora onboardato: eviterebbe un click a vuoto */
}

/* Microservizio non ancora collegato ma con panoramica da mostrare (es. AI &
   Business Solutions): stesso grigio "non ancora reale" di is-locked, ma
   resta cliccabile — apre la landing, non un accesso vero. */
.block-card.is-preview-only { cursor: pointer; }

.block-card.is-locked .block-code, .block-card.is-preview-only .block-code,
.block-card.is-locked .block-name, .block-card.is-preview-only .block-name { color: var(--slate); }
.block-card.is-locked .block-desc, .block-card.is-preview-only .block-desc,
.block-card.is-locked .block-cta, .block-card.is-preview-only .block-cta { color: var(--slate); }

/* --accent-fg verificato per contrasto AA (4.5:1) contro il relativo --accent:
   ink su blue/teal/amber (5.9-7.9:1), bianco su purple/slate/rose (5.0-5.5:1
   — con ink sarebbe stato 3.4-3.7:1, sotto soglia). */
.accent-blue   { --accent: var(--accent-blue);   --accent-fg: var(--ink); }
.accent-teal   { --accent: var(--accent-teal);   --accent-fg: var(--ink); }
.accent-purple { --accent: var(--accent-purple); --accent-fg: #ffffff; }
.accent-amber  { --accent: var(--accent-amber);  --accent-fg: var(--ink); }
.accent-slate  { --accent: var(--accent-slate);  --accent-fg: #ffffff; }
.accent-rose   { --accent: var(--accent-rose);   --accent-fg: #ffffff; }

/* =============================================================================
   COMING SOON VIEW — unica pagina con gradiente animato (eccezione deliberata
   alla regola "niente gradienti" del token system: qui e' il segnaposto per
   una societa' del gruppo ancora senza hub, non serve la stessa disciplina
   piatta della dashboard operativa). Logo AD sempre presente, fermo, mentre
   lo sfondo si muove piano dietro di lui.
   ============================================================================= */

.view-comingsoon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--blue-dark);
}

.comingsoon-bg {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(circle at 20% 30%, rgba(224, 16, 106, 0.55), transparent 55%),
    radial-gradient(circle at 80% 70%, rgba(13, 153, 255, 0.65), transparent 55%),
    radial-gradient(circle at 50% 100%, rgba(184, 13, 86, 0.5), transparent 60%),
    var(--blue-dark);
  background-size: 160% 160%;
  animation: comingsoon-drift 18s ease-in-out infinite;
}

@keyframes comingsoon-drift {
  0%   { background-position: 0% 0%, 100% 100%, 50% 100%; transform: rotate(0deg) scale(1); }
  50%  { background-position: 40% 60%, 60% 30%, 40% 60%; transform: rotate(4deg) scale(1.08); }
  100% { background-position: 0% 0%, 100% 100%, 50% 100%; transform: rotate(0deg) scale(1); }
}

.comingsoon-content {
  position: relative;
  z-index: 1;
  text-align: center;
  color: #fff;
  padding: 0 24px;
}

.comingsoon-content .eyebrow {
  color: var(--pink-light);
  animation: comingsoon-float 4s ease-in-out infinite;
}

.comingsoon-logo {
  width: 96px;
  height: 96px;
  background: #fff;
  border-radius: 22px;
  padding: 16px;
  margin: 0 auto 24px;
  display: block;
  box-shadow: 0 20px 50px rgba(3, 10, 24, 0.35);
  animation: comingsoon-float 4s ease-in-out infinite;
}

@keyframes comingsoon-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.comingsoon-content h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 40px;
  letter-spacing: -0.01em;
  margin: 4px 0 12px;
}

.comingsoon-content p {
  font-size: 15px;
  line-height: 1.6;
  max-width: 40ch;
  margin: 0 auto;
  color: rgba(255, 255, 255, 0.88);
}

.comingsoon-back {
  position: absolute;
  z-index: 2;
  top: 28px;
  left: 32px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  padding: 9px 16px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}

.comingsoon-back:hover { background: rgba(255, 255, 255, 0.2); }

/* =============================================================================
   MICROSERVICE LANDING — pagina intermedia prima di "Accedi": stessa firma
   visiva dei "blocchi" (campitura piena del colore di reparto), solo estesa
   a piena larghezza invece che in una card piccola nella griglia.
   ============================================================================= */

.ms-landing {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 780px;
  margin: 0 auto;
}

.ms-hero {
  background: var(--accent, var(--slate));
  color: var(--accent-fg, var(--ink));
  border-radius: var(--radius);
  padding: 48px 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  animation: card-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

.ms-hero .eyebrow { color: var(--accent-fg, var(--blue-dark)); opacity: 0.75; }

.ms-hero-icon { color: var(--accent-fg, var(--ink)); opacity: 0.9; margin-bottom: 16px; }
.ms-hero-icon svg { width: 40px; height: 40px; }

.ms-hero-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 32px;
  letter-spacing: -0.01em;
  margin: 2px 0 12px;
  color: var(--accent-fg, var(--ink));
}

.ms-hero-desc {
  font-size: 15.5px;
  line-height: 1.6;
  max-width: 56ch;
  margin: 0 auto;
  color: var(--accent-fg, var(--ink));
}

.ms-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 30px;
}

.ms-actions .btn-primary,
.ms-actions .btn-ghost {
  width: auto;
}

.btn-ghost {
  padding: 11px 18px;
  border: 1.5px solid color-mix(in srgb, var(--accent-fg, var(--ink)) 35%, transparent);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--accent-fg, var(--ink));
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.btn-ghost:hover {
  background: color-mix(in srgb, var(--accent-fg, var(--ink)) 12%, transparent);
  border-color: var(--accent-fg, var(--ink));
}

.ms-overview {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 36px 56px;
  animation: card-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) backwards;
  animation-delay: 60ms;
}

.ms-overview .eyebrow { margin-bottom: 14px; }

.ms-overview-text {
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink);
  max-width: 68ch;
  margin: 0 0 22px;
}

.ms-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 68ch;
}

.ms-step {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.ms-step-num {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--blue-dark);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ms-step-text {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
  padding-top: 3px;
}

/* =============================================================================
   CONFIGURA LA TUA AZIENDA — pannello popover in topbar (stesso idioma visivo
   di #search-results: pannello assoluto, ombra, animazione d'ingresso), per
   personalizzare una vista demo lato client in vista fiere.
   ============================================================================= */

.configure-wrap { position: relative; }

#configure-company-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.configure-btn-dot {
  display: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue);
}

#configure-company-btn.is-active {
  background: color-mix(in srgb, var(--blue) 12%, transparent);
  border-color: var(--blue);
  color: var(--blue-dark);
}

#configure-company-btn.is-active .configure-btn-dot { display: inline-block; }

.configure-panel {
  position: absolute;
  z-index: 30;
  top: calc(100% + 10px);
  right: 0;
  width: 360px;
  max-height: 75vh;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 20px 50px rgba(11, 18, 32, 0.18);
  padding: 22px;
  animation: search-in 0.15s ease;
}

.configure-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.configure-panel-close {
  border: none;
  background: none;
  color: var(--slate);
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  display: flex;
}

.configure-panel-close:hover { color: var(--ink); background: var(--bg); }

.configure-panel-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 17px;
  margin: 6px 0 6px;
}

.configure-panel-copy {
  font-size: 12.5px;
  color: var(--slate);
  line-height: 1.5;
  margin: 0 0 18px;
}

.configure-section { margin-top: 18px; }

.configure-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.configure-checklist {
  margin-top: 8px;
  max-height: 160px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.check-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
}

.check-row:hover { background: var(--bg); }

.check-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--blue);
  cursor: pointer;
  flex-shrink: 0;
}

.check-row-meta {
  color: var(--slate);
  font-size: 10.5px;
  margin-left: auto;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.configure-add-row {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.configure-add-row input {
  flex: 1;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border);
  background: #fbfcfe;
  font-size: 13px;
  color: var(--ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.configure-add-row input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(13, 153, 255, 0.14);
}

.configure-add-row .btn-microsoft {
  width: auto;
  padding: 9px 14px;
  font-size: 13px;
}

.configure-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 8px 6px 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
}

.chip-remove {
  border: none;
  background: none;
  color: var(--slate);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 50%;
}

.chip-remove:hover { color: var(--ink); background: var(--border); }

.configure-empty-hint {
  font-size: 12px;
  color: var(--slate);
  margin: 10px 0 0;
}

.configure-panel-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.configure-panel-actions .btn-microsoft,
.configure-panel-actions .btn-primary {
  width: auto;
  flex: 1;
  padding: 11px 14px;
  font-size: 13.5px;
}

/* =============================================================================
   TOAST
   ============================================================================= */

.toast {
  position: fixed;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%);
  background: var(--ink);
  color: #fff;
  font-size: 13.5px;
  padding: 12px 20px;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  z-index: 50;
  animation: toast-in 0.2s ease;
}

@keyframes toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(8px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* =============================================================================
   RESPONSIVE
   ============================================================================= */

@media (max-width: 860px) {
  .view-login { grid-template-columns: 1fr; }
  .login-brand { display: none; }
  .dash-topbar { padding: 14px 20px; }
  .user-meta { display: none; }
  .dashboard-main-full { padding: 28px 20px 40px; }
  .company-topbar { padding: 14px 20px; }
  .company-main { padding: 32px 20px 40px; }
  .comingsoon-content h1 { font-size: 30px; }
  .search-wrap { max-width: 100%; }
  /* Sotto i 860px il pezzo saldato si scuce: due card impilate, ognuna coi
     suoi 4 angoli, invece di due meta' affiancate che non ci stanno piu'. */
  .hero-row { display: flex; width: 100%; flex-direction: column; align-items: stretch; gap: 16px; }
  .welcome-panel, .search-panel { min-width: 0; max-width: 100%; border-radius: 20px; }
  .search-panel { border-left: 1.5px solid var(--border); }
  .welcome-panel { padding: 22px 24px; }
  .welcome-title { font-size: 28px; }
  .welcome-copy { font-size: 15px; }
  .search-lead { font-size: 22px; }
  .ms-hero, .ms-overview { padding: 28px 24px; }
  .ms-hero-title { font-size: 26px; }
  .configure-panel { width: min(360px, calc(100vw - 40px)); }
}

@media (prefers-reduced-motion: reduce) {
  .btn-spinner { animation: none; }
  .block-card, .company-card { transition: none; animation: none; }
  .block-card:not(.is-locked):hover { transform: none; }
  .block-card:not(.is-locked):hover .block-cta svg { transform: none; }
  .company-card:hover { transform: none; }
  .block-card.search-hit { animation: none; }
  .comingsoon-bg { animation: none; }
  .comingsoon-logo, .comingsoon-content .eyebrow { animation: none; }
  .view:not([hidden]) { animation: none; }
  .hero-row, .welcome-panel, .search-panel { transition: none; }
  .ms-hero, .ms-overview { animation: none; }
}