/* ============================================================
   sidebar_tabs.css — Vertical Tab Navigation (Material Design 3)
   Versione: 1.0.0 — Creato: 2026-07-19
   
   Componente per navigazione a tab laterali verticali.
   Su mobile (< 600px) i tab diventano orizzontali e scrollabili.
   
   Struttura:
   <nav class="sidebar-tabs" role="tablist" aria-label="Sezioni">
     <button class="sidebar-tabs__tab sidebar-tabs__tab--active" role="tab" aria-selected="true" data-tab="id">Label</button>
     <button class="sidebar-tabs__tab" role="tab" aria-selected="false" data-tab="id">Label</button>
   </nav>
   ============================================================ */

.sidebar-tabs {
  display: flex;
  flex-direction: column;
  min-width: 180px;
  max-width: 220px;
  background-color: var(--color-surface-container);
  border-right: 1px solid var(--color-border);
  padding: var(--space-sm) 0;
  overflow-y: auto;
  flex-shrink: 0;
}

.sidebar-tabs__tab {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  border: none;
  background: transparent;
  color: var(--color-on-surface);
  font-family: var(--font-family);
  font-size: var(--font-size-body);
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
  border-left: 3px solid transparent;
  outline: none;
}

.sidebar-tabs__tab:hover {
  background-color: rgba(42, 111, 151, 0.08);
}

.sidebar-tabs__tab:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

.sidebar-tabs__tab--active,
.sidebar-tabs__tab[aria-selected="true"] {
  background-color: rgba(42, 111, 151, 0.12);
  color: var(--color-primary);
  border-left-color: var(--color-primary);
  font-weight: 700;
}

.sidebar-tabs__count {
  font-size: var(--font-size-caption);
  font-weight: 400;
  margin-left: auto;
  color: var(--color-on-surface);
  opacity: 0.6;
}

/* Responsive: mobile → tabs orizzontali scrollabili */
@media (max-width: 599px) {
  .sidebar-tabs {
    flex-direction: row;
    min-width: 100%;
    max-width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--color-border);
    padding: 0 var(--space-sm);
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .sidebar-tabs::-webkit-scrollbar {
    display: none;
  }

  .sidebar-tabs__tab {
    flex-shrink: 0;
    width: auto;
    padding: var(--space-sm) var(--space-md);
    border-left: none;
    border-bottom: 3px solid transparent;
    white-space: nowrap;
  }

  .sidebar-tabs__tab--active,
  .sidebar-tabs__tab[aria-selected="true"] {
    border-left-color: transparent;
    border-bottom-color: var(--color-primary);
  }
}