/* ---------- Responsive ---------- */

@media (max-width: 1024px) {
  .dashboard-grid {
    grid-template-columns: 1fr;
  }
  .dashboard-grid .card-wide,
  .dashboard-grid .dash-hero {
    grid-column: span 1;
  }
}

@media (max-width: 768px) {
  /* S66 mobile contrast tokens promoted to :root at S75 (desktop was too dark).
     Mobile-only override: dim text-primary for screen glare + muted accents. */
  :root {
    --text-primary: #ccc8c2;
    --green: #28b898;
    --red: #d05050;
    --amber: #cc9644;
    --blue: #5080d8;
  }

  /* S128 — Mobile drawer: full-screen overlay (Sacerdote request, "native
     app feel"). Previously 280px slide-in; now width:100vw so nothing of
     the chat peeks under. Typography bumps up for one-handed reading. */
  .drawer-toggle { display: flex; }
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    min-width: 100vw;
    max-width: 100vw;
    z-index: 100;
    transform: translateX(-100%);
    box-shadow: none;
    border-right: none;
  }
  body.drawer-open .sidebar {
    transform: translateX(0);
    box-shadow: none;
  }
  /* Mobile hides the desktop collapse chevron — external hamburger is the only toggle */
  .sidebar-collapse { display: none; }
  .sidebar-logo {
    font-size: 1.6rem;
    letter-spacing: 0.16em;
  }
  /* Align DELFI logo vertical center with the fixed drawer-toggle
     (top:18px height:16px → center y≈26px). Tight vert padding so the
     header bar matches the hamburger height instead of dwarfing it. */
  .sidebar-header { padding: 10px 24px 12px; }
  .nav-item {
    padding: 14px 22px;
    margin: 2px 10px;
    font-size: 1.02rem;
    justify-content: flex-start;
    gap: 16px;
  }
  .nav-item svg { width: 20px; height: 20px; }
  .nav-item span { display: inline; }
  /* Cap history to 4 rows on mobile — S327 Sacerdote request. Scroll for more. */
  .sidebar-history-list { max-height: 180px; }
  .sidebar-history-head { padding: 6px 24px 8px; }
  .sidebar-history-title { font-size: 0.72rem; }
  .sidebar-history-item {
    padding: 12px 14px 12px 16px;
    margin: 2px 8px;
  }
  .sidebar-history-item-title { font-size: 0.92rem; }
  .sidebar-history-item-time { font-size: 0.7rem; }
  .sidebar-history-new { width: 38px; height: 38px; border-radius: 8px; }
  .sidebar-history-new svg { width: 18px; height: 18px; stroke-width: 2.4; }
  .sidebar-history-title { font-size: 0.78rem; }
  .sidebar-footer { padding: 18px 24px calc(18px + env(safe-area-inset-bottom)); }
  .user-info { display: block; font-size: 0.85rem; }
  .btn-logout {
    width: auto;
    justify-content: flex-start;
    padding: 0;
    font-size: 0.92rem;
    gap: 12px;
  }
  .btn-logout span { display: inline; }
  .btn-logout svg { width: 18px; height: 18px; }
  /* Desktop collapsed state doesn't apply on mobile — we use drawer-open */
  body.drawer-collapsed .sidebar {
    width: 100vw;
    min-width: 100vw;
    border-right-width: 0;
    transform: translateX(-100%);
  }
  body.drawer-collapsed.drawer-open .sidebar {
    transform: translateX(0);
  }
  /* Close button inside the open drawer (top-right) — gives an obvious
     dismiss target now that the hamburger is behind full-screen content. */
  body.drawer-open .drawer-toggle {
    z-index: 110;
  }
  /* Main content edge-to-edge; leave top padding for hamburger button */
  .main-content { padding: 0 16px; }
  .login-card { width: calc(100vw - 32px); max-width: 400px; padding: 32px 24px; }
  .form-row { grid-template-columns: 1fr; }

  /* Card titles use --text-muted — bump further for readability */
  .card-title {
    color: var(--text-secondary);
  }

  /* Stat labels on dashboard cards */
  .stat-label {
    color: var(--text-secondary);
  }

  /* Table headers */
  .data-table th {
    color: var(--text-secondary);
    font-size: 0.7rem;
  }

  /* Table cells — slightly larger tap targets + readability */
  .data-table td {
    padding: 13px 12px;
    font-size: 0.84rem;
  }

  /* List items — clearer separation */
  .list-item {
    padding: 14px 16px;
    border-color: var(--border);
  }

  .list-item-sub {
    color: var(--text-secondary);
  }

  /* Badges — ensure readable on small screens */
  .badge {
    font-size: 0.72rem;
    padding: 3px 10px;
  }

  /* Form labels */
  .form-group label {
    color: var(--text-secondary);
    font-size: 0.72rem;
  }

  /* .login-subtitle: rimossa a S469 con il ridisegno della landing —
     era il sottotitolo sotto il terzo «DELFI» della stessa schermata. */

  /* Stat values on dashboard — less glaring */
  .stat-value {
    font-size: 1.6rem;
    color: var(--text-primary);
  }

  /* In-card h2 (coaching/news) — harmonize with settings tone */
  .card h2 {
    font-size: 1rem;
    color: var(--text-primary);
  }

  /* News / Predictions / Coaching cards — shared patterns */
  .card {
    padding: 16px 16px;
  }

  /* Dashboard mobile — rewritten clean S379 */
  .dashboard-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
  }
  .dashboard-grid .card,
  .dashboard-grid .dash-hero {
    width: 100%;
    grid-column: unset;
    overflow: hidden;
  }
  .dash-hero {
    padding: 16px;
  }
  .dash-hero-row {
    gap: 8px;
  }
  .dash-hero-value {
    font-size: clamp(1.1rem, 5vw, 1.6rem);
  }
  .dash-pnl-badge {
    font-size: 0.7rem;
    padding: 3px 7px;
  }
  .dash-pnl-name {
    font-size: 0.76rem;
  }
  .dash-pnl-value {
    font-size: 0.72rem;
    padding: 2px 6px;
  }
  .dash-treemap {
    height: 85px;
  }
  .dash-treemap-cell {
    min-width: 32px;
    padding: 4px 2px;
  }
  .dash-treemap-icon { font-size: 0.85rem; }
  .dash-treemap-pct { font-size: 0.72rem; }
  .dash-treemap-label { font-size: 0.52rem; }
  .dash-treemap-value { font-size: 0.55rem; }

  /* Predictions table — horizontal scroll on narrow screens */
  .data-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Nav items — boost icon visibility */
  .nav-item svg {
    opacity: 0.65;
  }
  .nav-item.active svg {
    opacity: 1;
  }

  /* Modal — fit mobile width */
  .modal {
    min-width: unset;
    max-width: calc(100vw - 32px);
    padding: 24px 20px;
  }

  /* Challenge box — readable on narrow screens */
  .challenge-question {
    font-size: 1rem;
    padding-left: 12px;
  }

  /* Form sections */
  .form-section {
    padding: 20px 16px 16px;
  }

  /* Sentiment chips — larger touch targets */
  .sentiment-chip label {
    padding: 9px 16px;
    font-size: 0.84rem;
  }

  /* Scrollbar — thicker for touch */
  ::-webkit-scrollbar { width: 8px; height: 8px; }
  ::-webkit-scrollbar-thumb { background: rgb(201, 168, 76); border-radius: 4px; }

  /* Prevent iOS input zoom */
  .form-input, .form-select, .form-textarea {
    font-size: 16px;
  }
}

/* S106 — Jungla API (BYOK): unified card with system-limits counter, sub-tabs, subcategory sections */

.jungla-system-limits {
  background: linear-gradient(135deg, rgba(224, 168, 76, 0.06) 0%, rgba(224, 168, 76, 0.02) 100%);
  border: 1px solid rgba(224, 168, 76, 0.18);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 6px;
}

.jungla-system-limits-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.jungla-system-limits-label {
  font-family: var(--font-numbers);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--gold);
}

.jungla-system-limits-body {
  margin: 0 0 10px 0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

/* S489 — una riga per opera automatica. Il titolo dice cosa fa, le tre righe
   sotto rispondono in ordine alle domande di chi ha appena messo una chiave:
   quando parte, quanto consuma, e cosa succede se non parte. L'ultima è
   smorzata perché è una rassicurazione, non una spesa. */
.opera-riga {
  padding: 10px 0;
  border-top: 1px solid var(--border-subtle);
}

.opera-riga:first-child {
  border-top: none;
  padding-top: 4px;
}

.opera-riga__titolo {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 3px;
}

.opera-riga__meta {
  font-size: 0.76rem;
  line-height: 1.45;
  color: var(--text-secondary);
}

.opera-riga__meta--muted {
  color: var(--text-muted);
}

/* S493 — l'interruttore dell'incarico: fa il lavoro, o manda il promemoria.
   L'etichetta cambia testo insieme alla spunta invece di restare fissa: chi
   guarda deve leggere COSA SUCCEDE, non il nome di un'opzione. */
.opera-riga__switch {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  cursor: pointer;
  font-size: 0.76rem;
  color: var(--text-secondary);
}

.opera-riga__switch input {
  accent-color: var(--gold);
  width: 15px;
  height: 15px;
  cursor: pointer;
  flex-shrink: 0;
}

.opera-riga__pausa {
  margin-left: 8px;
  font-size: 0.68rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.jungla-section {
  margin-top: 22px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.012);
  padding: 8px 14px 14px 14px;
}

.jungla-section:first-child {
  margin-top: 6px;
}

.jungla-section-title {
  display: inline-block;
  font-family: var(--font-numbers);
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--gold);
  background: var(--bg-card);
  padding: 5px 12px;
  border: 1px solid rgba(224, 168, 76, 0.25);
  border-radius: var(--radius-sm);
  transform: translateY(-17px);
  margin-bottom: -10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.jungla-coming-soon {
  padding: 14px 14px 12px 14px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.015);
  margin: 8px 0 4px 0;
}

.jungla-coming-soon-title {
  font-family: var(--font-numbers);
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--text-muted);
  margin-bottom: 5px;
}

.jungla-coming-soon p {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

/* "Minimo sindacale" box — highlighted with a gold accent frame */

.jungla-minimo {
  margin-top: 18px;
  border: 1px solid rgba(224, 168, 76, 0.55);
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(224, 168, 76, 0.05) 0%, rgba(224, 168, 76, 0.015) 100%);
  padding: 8px 16px 16px 16px;
  box-shadow: 0 1px 6px rgba(224, 168, 76, 0.06);
}

.jungla-minimo:first-child {
  margin-top: 6px;
}

.jungla-minimo-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  transform: translateY(-16px);
  margin-bottom: -6px;
}

.jungla-minimo-badge {
  display: inline-block;
  font-family: var(--font-numbers);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--bg-primary);
  background: var(--gold);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.jungla-minimo-title {
  font-family: var(--font-numbers);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--gold);
  letter-spacing: 0.03em;
}

.jungla-minimo-desc {
  margin: 0 0 8px 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

/* S316 — Combined minimo box: single gold frame, sections inside with divider */

.jungla-minimo--combined .jungla-minimo-section {
  padding: 0;
}

.jungla-minimo-divider {
  height: 1px;
  background: rgba(224, 168, 76, 0.2);
  margin: 14px 0;
}

/* Layer badge (L0 / L1 / L2) inline on minimum-sindacale LLM rows */

.api-layer-badge {
  display: inline-block;
  min-width: 24px;
  text-align: center;
  font-family: var(--font-numbers);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--gold);
  background: rgba(224, 168, 76, 0.12);
  border: 1px solid rgba(224, 168, 76, 0.38);
  border-radius: 3px;
  padding: 2px 5px;
  margin-right: 8px;
  vertical-align: middle;
  cursor: help;
}

.jungla-counter {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 4px 0 10px 0;
}

.jungla-counter-number {
  font-size: 2.4rem;
  font-weight: 600;
  color: var(--gold);
  line-height: 1;
  letter-spacing: -0.01em;
}

.jungla-counter-label {
  font-size: 0.82rem;
  color: var(--text-secondary);
}

.jungla-counter-note {
  margin: 4px 0 0 0;
  font-size: 0.76rem;
  line-height: 1.5;
  color: var(--text-muted);
  font-style: italic;
}

/* Telegram unified group — chat_id+bot_token rows + "oppure" separator + phone row */

.jungla-telegram-group {
  margin-top: 18px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: rgba(88, 166, 255, 0.03);
  padding: 14px 16px 16px 16px;
}

.jungla-telegram-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.jungla-telegram-title {
  font-family: var(--font-numbers);
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gold);
}

.jungla-telegram-desc {
  margin: 0 0 14px 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

.jungla-telegram-mode {
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
}

.jungla-telegram-mode-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 3px;
}

.jungla-telegram-mode-desc {
  margin: 0 0 8px 0;
  font-size: 0.76rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.jungla-telegram-fields .api-provider-row {
  padding: 8px 0;
}

.jungla-telegram-separator {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-style: italic;
}

.jungla-telegram-separator::before,
.jungla-telegram-separator::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-subtle);
}

.jungla-phone-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.jungla-phone-country {
  flex: 0 0 auto;
  min-width: 180px;
  max-width: 260px;
  font-size: 0.85rem !important;
  padding: 8px 36px 8px 12px !important;
}

.jungla-phone-number {
  flex: 1 1 160px;
  font-size: 0.85rem !important;
  padding: 8px 12px !important;
}

.jungla-phone-row .btn {
  flex: 0 0 auto;
}

@media (max-width: 600px) {
  .jungla-phone-country { min-width: 140px; max-width: 100%; width: 100%; }
  .jungla-phone-number  { flex: 1 1 100%; width: 100%; }
  .jungla-phone-row .btn { width: 100%; }
}

/* S132+ — Admin "Smart Router — Benchmarks" add row: desktop 5 colonne + button,
   mobile stack. Previously `grid-template-columns:repeat(5,1fr) auto` forced
   min-content (select option `long_context`) → page-wide horizontal scroll
   on Android. Artifact 91521be1 evidence. */
.admin-bench-add-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr)) auto;
}
@media (max-width: 768px) {
  .admin-bench-add-row { grid-template-columns: 1fr; }
  .admin-bench-add-row > * { min-width: 0; width: 100%; }
}

/* S150 — Admin category navigation bar */
.admin-cat-bar {
  display: flex;
  gap: 0;
  margin-bottom: 20px;
  position: sticky;
  top: 48px;
  z-index: 10;
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border);
  padding: 0;
}

.admin-cat-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  font-family: var(--font-numbers);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.25s ease, background 0.2s ease;
  white-space: nowrap;
  position: relative;
}

.admin-cat-btn:hover {
  color: var(--text-secondary);
  background: var(--gold-glow);
}

.admin-cat-btn.active {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

.admin-cat-btn .admin-cat-icon {
  width: 16px;
  height: 16px;
  opacity: 0.5;
  transition: opacity 0.2s ease;
}

.admin-cat-btn.active .admin-cat-icon {
  opacity: 1;
}

.admin-cat-btn .admin-cat-count {
  font-size: 0.6rem;
  color: var(--text-muted);
  background: rgba(201, 168, 76, 0.08);
  border: 1px solid rgba(201, 168, 76, 0.15);
  border-radius: 8px;
  padding: 1px 6px;
  font-variant-numeric: tabular-nums;
}

.admin-cat-btn.active .admin-cat-count {
  color: var(--gold-dim);
  background: var(--gold-glow);
  border-color: rgba(201, 168, 76, 0.3);
}

.admin-cat-section {
  display: none;
}

.admin-cat-section.admin-cat-section--visible {
  display: block;
}

@media (max-width: 768px) {
  .admin-cat-bar {
    margin: 0 -16px 16px;
    border-radius: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .admin-cat-bar::-webkit-scrollbar { display: none; }
  .admin-cat-btn {
    flex: 0 0 auto;
    padding: 10px 12px;
    font-size: 0.65rem;
    letter-spacing: 0.04em;
    gap: 5px;
  }
  .admin-cat-btn .admin-cat-icon {
    width: 14px;
    height: 14px;
  }
  .admin-cat-btn .admin-cat-count {
    display: none;
  }
}

/* S150 — Settings top tab bar (Account / Jungla API)
   S520 — le voci sono diventate cinque e su un telefono non ci stanno: la
   barra non scorreva, e l'ultima (Regolamento) restava tagliata fuori dallo
   schermo, invisibile e non cliccabile. E scorrendo la pagina se ne andava
   via col contenuto. Stesso gesto di .volta-tab-bar e .admin-cat-bar: scorre
   in orizzontale senza mostrare la barra, e resta appesa sotto il titolo
   (l'header e' sticky con min-height 48px). */
.settings-top-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  position: sticky;
  top: 48px;
  z-index: 10;
  background: var(--bg-primary);
}
.settings-top-tabs::-webkit-scrollbar { display: none; }

.settings-top-tab {
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 10px 20px;
  font-family: var(--font-numbers);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.25s ease;
}

.settings-top-tab:hover {
  color: var(--text-secondary);
}

.settings-top-tab.active {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

@media (max-width: 768px) {
  .settings-top-tab {
    padding: 8px 14px;
    font-size: 0.68rem;
  }
}


/* ═══ S500 — Le due strade del BYOK ═══
   Il pannello «A pagamento» aveva le stesse chiavi dei Gratuiti e lo stesso
   aspetto: la divisione era disegnata e non consegnata. Qui la si vede — la
   cornice che spiega la regola, e sulla riga della chiave comprata il badge
   che dice che è LEI a rispondere, sempre. */

.jungla-paid-intro {
  border: 1px solid var(--gold-dim, rgba(197, 160, 89, 0.35));
  border-left: 3px solid var(--gold);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 18px;
  background: rgba(197, 160, 89, 0.05);
}

/* S522 — il racconto simmetrico dei Gratuiti: stessa cornice della strada
   a pagamento, accento verde (la quota viva) invece dell'oro (il modello
   comprato). Due strade, due colori, un solo linguaggio. */
.jungla-free-intro {
  border: 1px solid rgba(107, 168, 116, 0.35);
  border-left: 3px solid var(--green);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 18px;
  background: rgba(107, 168, 116, 0.05);
}

.jungla-free-intro-title {
  font-family: var(--font-numbers);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--green);
  letter-spacing: 0.03em;
  margin-bottom: 6px;
}

.jungla-free-intro p {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--text-secondary);
}

.jungla-paid-intro-title {
  font-family: var(--font-numbers);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--gold);
  letter-spacing: 0.03em;
  margin-bottom: 6px;
}

.jungla-paid-intro p {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--text-secondary);
}

.api-paid-badge {
  margin-left: 8px;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--bg-primary);
  background: var(--gold);
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  vertical-align: middle;
}

.api-provider-row--paid {
  border-left: 3px solid var(--gold);
  padding-left: 11px;
}

.api-paid-hint {
  margin-top: 4px;
  font-size: 0.74rem;
  line-height: 1.4;
}

.api-paid-hint--on { color: var(--gold); }
.api-paid-hint--off { color: var(--text-muted); }

@media (max-width: 768px) {
  .jungla-paid-intro { padding: 10px 12px; }
  .jungla-paid-intro p { font-size: 0.78rem; }
}