/* ===== EREL — CSS globale riusabile ===== */

/* Variabili tema (Light di default) */
:root{
  --bg:#ffffff; --fg:#0f172a; --muted:#64748b; --card:#ffffff; --border:rgba(0,0,0,.08);
  --btn-primary:#ff6A13;   /* arancio, sostituito f97316*/
  --btn-secondary:#10b981; /* mint */
  --btn-info:#0ea5e9; --btn-warning:#f59e0b; --btn-success:#22c55e; --btn-danger:#ef4444;
  --btn-contrast:#ffffff;
}

/* Tema Dark */
body.theme-dark{
  --bg:#0F172A; --fg:#E2E8F0; --muted:#94a3b8; --card:#262633; --border:rgba(255,255,255,.10);
  --btn-primary:#f59e0b; /* arancio */
  --btn-secondary:#34d399; --btn-info:#38bdf8; --btn-warning:#fbbf24; --btn-success:#22c55e; --btn-danger:#fb7185;
  --btn-contrast:#0f172a;
}

/* Tema Vivid */
body.theme-vivid{
  --bg:#FFF8F1; --fg:#111827; --muted:#6b7280; --card:#ffffff; --border:rgba(0,0,0,.08);
  --btn-primary:#fda4af; --btn-secondary:#a5b4fc; --btn-info:#93c5fd; --btn-warning:#fde68a; --btn-success:#86efac; --btn-danger:#fca5a5;
  --btn-contrast:#111827;
}

/* Bottoni tema compatti SOLO su mobile */
@media (max-width: 576px){
  .topbar .btn-group.theme-switch { gap: .25rem !important; }

  .topbar .btn-group.theme-switch > .btn {
    padding: .15rem .35rem !important;
    height: 30px !important;
    min-height: 30px !important;
    font-size: .75rem !important;
    line-height: 1.1 !important;
    border-radius: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Lucide usa <svg> (non <i>) */
  .topbar .btn-group.theme-switch > .btn svg {
    width: 16px !important;
    height: 16px !important;
  }
}



/* Corpo + topbar */
body{ background:var(--bg); color:var(--fg); }
.topbar{
  position:sticky; top:0; z-index:40;
  backdrop-filter:saturate(180%) blur(8px);
  background:color-mix(in oklab, var(--bg) 85%, transparent);
  border-bottom:1px solid var(--border);
}
.logo-squircle-img{ width:32px; height:32px; border-radius:22%; object-fit:cover; display:block }



/* Crediti */
.credit-chip{
  display:inline-flex; align-items:center; gap:.5rem; border:1px solid var(--border);
  background:color-mix(in oklab, var(--bg) 70%, #fff 30%); padding:.35rem .6rem; border-radius:12px;
}
.token-bar{ height:8px; background-color:#e9ecef; border-radius:999px; overflow:hidden; min-width:90px }
.token-bar-fill{ height:100%; background-color:var(--btn-secondary); width:0%; transition:width .5s }
.credit-banner .token-bar{ flex:1 1 110px; }

/* desktop: larghezza comoda */
.credit-chip .token-bar { width: 160px; }

/* mobile: la barra prende tutto lo spazio disponibile */
@media (max-width: 768px){
  .credit-chip { width: 100%; }                 /* il contenitore occupa tutta la riga */
  .credit-chip .token-bar{
    width: 100% !important;                     /* niente 160px */
    flex: 1 1 auto;                             /* si espande */
    min-width: 0;                               /* evita troncamenti */
    margin: 0 .5rem;                            /* piccolo respiro ai lati */
  }
  .credit-chip .ios-btn{ flex-shrink: 0; }      /* il bottone non si schiaccia */
}


/* Avatar */
.avatar{ width:28px; height:28px; background:linear-gradient(135deg, var(--btn-secondary), var(--btn-primary)); color:#fff; font-weight:700; font-size:12px; }
.avatar img{ width:100%; height:100%; object-fit:cover; border-radius:50%; display:block }

/* Step cards */
.step-card{ border:1px solid var(--border); border-radius:16px; padding:1rem; background:var(--card); }
.step-card.disabled{ opacity:.45; pointer-events:none }
.hidden-locked{ display:none !important; }
.step-output{
  background:color-mix(in oklab, var(--bg) 90%, transparent);
  border:1px dashed var(--border); border-radius:12px; padding:.75rem
}
.step-error{ display:none; margin-top:.5rem; }

/* Thumbs */
#thumbGrid{ display:flex; flex-wrap:wrap; gap:12px }
.thumb{
  position:relative; width:120px; height:120px; border:1px solid var(--border); border-radius:10px;
  overflow:hidden; background:#fafafa; display:flex; align-items:center; justify-content:center; cursor:grab
}
.thumb img{ max-width:100%; max-height:100%; object-fit:cover }
.thumb .remove{
  position:absolute; top:6px; right:6px; border:none; background:rgba(0,0,0,.65); color:#fff;
  border-radius:50%; width:28px; height:28px; line-height:26px; text-align:center; cursor:pointer
}
.thumb .index{
  position:absolute; bottom:6px; left:6px; background:rgba(0,0,0,.55); color:#fff; font-size:12px;
  padding:2px 6px; border-radius:12px
}

/* Loader */
.local-loader{ display:none; margin:12px 0; }
.spinner{ width:40px; height:40px; border-radius:50%; border:6px solid #f3f3f3; border-top-color:var(--btn-primary); animation:spin 1s linear infinite; margin:auto }
@keyframes spin{ 0%{ transform:rotate(0)} 100%{ transform:rotate(360deg)} }

/* Bottoni */
.ios-btn{ border-radius:9999px !important; box-shadow:0 6px 14px rgba(0,0,0,.06) !important; display:inline-flex; align-items:center; gap:.5rem }
.btn-primary{   background:var(--btn-primary)!important; border-color:var(--btn-primary)!important; color:var(--btn-contrast)!important; }
.btn-secondary{ background:var(--btn-secondary)!important; border-color:var(--btn-secondary)!important; color:var(--btn-contrast)!important; }
.btn-outline-primary{ color:var(--btn-primary)!important; border-color:var(--btn-primary)!important; }
.btn-outline-primary:hover{ background:var(--btn-primary)!important; color:var(--btn-contrast)!important; }
.btn-outline-secondary{ color:var(--btn-secondary)!important; border-color:var(--btn-secondary)!important; }
.btn-outline-secondary:hover{ background:var(--btn-secondary)!important; color:var(--btn-contrast)!important; }

/* Badge custom (contatore immagini) */
.badge-primary-soft{ background-color: var(--btn-primary); color: var(--btn-contrast); }

/* Testi “muted” leggibili su temi */
.theme-dark .text-muted   { color: var(--muted) !important; }
.theme-vivid .text-muted  { color: var(--muted) !important; }

/* Tagline animata/flow */
.flow-line,
#flowWord,
#flowCycle{ color: var(--fg) !important; }

/* Popover Bootstrap in dark */
.theme-dark .popover-header{
  color:#111827 !important;
  background-color:#e9ecef !important;
  border-bottom-color:var(--border) !important;
}
.theme-dark .popover{
  background-color:#0b1429 !important;
  color:var(--fg) !important;
  border-color:var(--border) !important;
}
.theme-dark .popover .popover-body{ color:var(--fg) !important; }

/* ====== (A) Tabella “a tema” per dashboard ====== */
.table-erel thead th{
  background: color-mix(in oklab, var(--bg) 15%, var(--fg));
  color: var(--btn-contrast);
  border-color: var(--border);
}
.table-erel tbody td, 
.table-erel thead th {
  border-color: var(--border);
}
.table-erel {
  --bs-table-bg: var(--card);
  --bs-table-color: var(--fg);
  --bs-table-striped-color: var(--fg);
  --bs-table-striped-bg: color-mix(in oklab, var(--card) 85%, #000 15%);
  --bs-table-hover-color: var(--fg);
  --bs-table-hover-bg: color-mix(in oklab, var(--card) 82%, #000 18%);
  background-color: var(--card);
  color: var(--fg);
}

/* ====== (B) Offcanvas/Menu a tema ====== */
.offcanvas-erel {
  background: var(--card);
  color: var(--fg);
  border-left: 1px solid var(--border);
}
.offcanvas-erel .list-group-item {
  background: transparent;
  color: var(--fg);
  border: none;
  border-radius: 8px;
  margin: 2px 0;
}
.offcanvas-erel .list-group-item:hover,
.offcanvas-erel .list-group-item:focus {
  background: color-mix(in oklab, var(--card) 80%, var(--fg) 20%);
  color: var(--btn-contrast);
}

/* (C) Link nel menu coerenti */
.offcanvas-erel a {
  color: var(--fg);
  text-decoration: none;
}
.offcanvas-erel a:hover {
  color: var(--btn-contrast);
}

/* (D) Mini badge & utilities usate in dashboard */
.badge-soft {
  background: color-mix(in oklab, var(--card) 85%, var(--fg) 15%);
  color: var(--fg);
  border: 1px solid var(--border);
}
/* === Cookie banner & prefs (EREL) === */
.erel-cookie-banner{
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1080;
  background: var(--card); color: var(--fg); border-top: 1px solid var(--border);
  box-shadow: 0 -8px 24px rgba(0,0,0,.08);
}
.erel-cookie-banner .inner{
  padding: .9rem 1rem; display: flex; gap: 1rem; align-items: start; flex-wrap: wrap;
}
.erel-cookie-banner p{ margin: 0; opacity: .9 }
.erel-cookie-banner .btn{ border-radius: 999px }
@media (max-width: 576px){
  .erel-cookie-banner .inner{ flex-direction: column; align-items: stretch }
}

/* Modal/pannello preferenze */
#cookiePrefs .form-switch .form-check-input{
  width: 2.5em; height: 1.3em;
}
#cookiePrefs .locked{
  opacity: .6; pointer-events: none;
}
/* Tema scuro per banner & modal cookie */
.theme-dark .erel-cookie-banner{
  background: var(--card);
  color: var(--fg);
  border-top-color: var(--border);
}

.theme-dark .modal-content{
  background: var(--card);
  color: var(--fg);
  border: 1px solid var(--border);
}
.theme-dark .modal-header,
.theme-dark .modal-footer{
  border-color: var(--border);
}
.theme-dark .modal-title{ color: var(--fg); }

/* Migliora il contrasto dei testi descrittivi nel modal */
#cookiePrefs .modal-body p { opacity: 1; color: var(--fg); }
#cookiePrefs .text-muted { color: var(--muted) !important; }

/* Close button visibile in dark */
.theme-dark .btn-close{
  filter: invert(1) grayscale(100%);
}
/* Layout a colonna per avere il footer sempre in basso */
html, body {
  height: 100%;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Il main si espande a riempire lo spazio disponibile */
body > main {
  flex: 1 0 auto;
}

/* Il footer resta attaccato in fondo, non viene “schiacciato” */
footer {
  flex-shrink: 0;
}

/* Bottoni info piccoli, icon-only, circolari */
.btn-info-mini {
  padding: 0 !important;
  width: 24px;
  height: 24px;
  min-width: 24px;      /* 🔥 fondamentale */
  max-width: 24px;      /* 🔥 fondamentale */
  border-radius: 999px !important;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  line-height: 1;       /* 🔥 blocca espansione verticale */
  flex: 0 0 auto;       /* 🔥 impedisce stretching nel flex */

  box-shadow: none !important;
  gap: 0 !important;
}

/* L’icona interna viene ridotta */
.btn-info-mini i {
  width: 14px;
  height: 14px;
}	
/* Controlli mappa: permettiamo il wrap */
.map-controls {
  flex-wrap: wrap;
}

@media (max-width: 576px){
  /* 1) il bottone non deve mai diventare full-width */
  #btnConceptMap{
    flex: 0 0 auto !important;
    width: auto !important;
    white-space: nowrap;
  }

}
.btn-icon{
  padding: .35rem .45rem !important;
  height: 34px;
  width: 34px;
  justify-content: center;
}
.btn-icon svg{ width: 18px; height: 18px; }

/* antiscroll su mobile per evitare refresh nella index */
html, body { overscroll-behavior-y: none; }

.modal {
  overflow-y: auto;
}

body.modal-open .erel-cookie-banner {
  pointer-events: none;
}