/* ════════════════════════════════════════════════════════════════
   TimePortal — Rebranding 2026
   Palette estratta dal logo ufficiale TimePortal by Time Solution

   Colori:
   --tp-magenta:      #E91E8C  (rosa vibrante — "Portal", pallino primario)
   --tp-magenta-dark: #C4187A  (hover / pressed)
   --tp-magenta-light:#FCE4F3  (sfondi tinti, badge)
   --tp-gray:         #58595B  (grigio corpo — "Time", icone)
   --tp-pink-mid:     #F06BAD  (pallini medi — accento secondario)
   --tp-pink-light:   #F9B8D4  (pallini chiari — tint)

   Regola: questa patch sovrascrive SOLO le variabili e le classi
   cromatiche di portal.css. Zero modifiche alla struttura.
   ════════════════════════════════════════════════════════════════ */

/* ── 1. OVERRIDE VARIABILI GLOBALI ─────────────────────────── */
:root {
  --blue:        #E91E8C;   /* il magenta sostituisce il blu primario */
  --blue-dark:   #C4187A;
  --blue-light:  #FCE4F3;

  /* Palette completa TimePortal */
  --tp-magenta:       #E91E8C;
  --tp-magenta-dark:  #C4187A;
  --tp-magenta-light: #FCE4F3;
  --tp-gray:          #58595B;
  --tp-pink-mid:      #F06BAD;
  --tp-pink-light:    #F9B8D4;
}

/* ── 2. SIDEBAR ─────────────────────────────────────────────── */
/* Sfondo: grigio scuro del logo invece del nero puro */
.sidebar {
  background: linear-gradient(180deg, #3a3a3c 0%, #2a2a2c 100%);
}

/* Voce attiva: magenta */
.nav-item.active {
  background: var(--tp-magenta) !important;
  color: white !important;
}

/* Avatar utente */
.user-avatar {
  background: var(--tp-magenta);
}

/* Separatori sezione nav */
.nav-section {
  color: var(--tp-pink-mid);
  opacity: .75;
}

/* ── 3. SIDEBAR LOGO AREA ───────────────────────────────────── */
.sidebar-logo {
  padding: 16px 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  justify-content: center;
  align-items: center;
}
.sidebar-logo img {
  height: 64px;
  width: auto;
  object-fit: contain;
  /* Nessun background: il logo ha sfondo trasparente e testo bianco */
  display: block;
  margin: 0 auto;
}

/* ── 4. PULSANTI ────────────────────────────────────────────── */
.btn-primary {
  background: var(--tp-magenta);
  color: white;
}
.btn-primary:hover {
  background: var(--tp-magenta-dark);
}
.btn-ghost {
  color: var(--tp-magenta);
}
.btn-ghost:hover {
  background: var(--tp-magenta-light);
  color: var(--tp-magenta-dark);
}
.btn-outline {
  border-color: var(--tp-magenta);
  color: var(--tp-magenta);
}
.btn-outline:hover {
  background: var(--tp-magenta-light);
}

/* ── 5. LINK ────────────────────────────────────────────────── */
a { color: var(--tp-magenta); }
a:hover { color: var(--tp-magenta-dark); }

/* ── 6. INPUT FOCUS ─────────────────────────────────────────── */
.form-control:focus,
.search-input:focus {
  border-color: var(--tp-magenta);
  box-shadow: 0 0 0 3px rgba(233,30,140,.12);
  outline: none;
}

/* ── 7. TABS ─────────────────────────────────────────────────── */
.tab-item.active {
  color: var(--tp-magenta);
  border-bottom-color: var(--tp-magenta);
}

/* ── 8. PAGINAZIONE ─────────────────────────────────────────── */
.page-btn.active {
  background: var(--tp-magenta);
  border-color: var(--tp-magenta);
  color: white;
}
.page-goto-input:focus {
  border-color: var(--tp-magenta);
}

/* ── 9. BADGE ───────────────────────────────────────────────── */
.badge-blue,
.badge-info {
  background: var(--tp-magenta-light);
  color: var(--tp-magenta);
}
.stat-icon.blue {
  background: var(--tp-magenta-light);
  color: var(--tp-magenta);
}

/* ── 10. ALERT INFO ─────────────────────────────────────────── */
.alert-info {
  background: var(--tp-magenta-light);
  color: #8B0057;
  border-color: var(--tp-pink-light);
}

/* ── 11. CARD HEADER BORDER ATTIVO ─────────────────────────── */
.card-title { color: var(--gray-800); }

/* ── 12. LOGIN PAGE ─────────────────────────────────────────── */
.login-page {
  background: linear-gradient(135deg, #2a2a2c 0%, #3d1030 50%, #1a1a1c 100%);
}
.login-card {
  box-shadow: 0 20px 60px rgba(233,30,140,.18), 0 4px 16px rgba(0,0,0,.3);
}
.login-logo {
  flex-direction: column;
  gap: 0;
  margin-bottom: 32px;
}
.login-logo img {
  height: 100px;
  width: auto;
  object-fit: contain;
  margin-bottom: 4px;
}
.login-logo-text {
  display: none; /* sostituito dall'immagine */
}
.login-logo-sub {
  color: var(--gray-500);
  font-size: 12px;
}

/* ── 13. HEADER STRIP (striscia sopra il menu) ──────────────── */
/* Aggiunge una sottile striscia magenta in cima alla sidebar */
.sidebar::before {
  content: '';
  display: block;
  height: 3px;
  background: linear-gradient(90deg, var(--tp-magenta) 0%, var(--tp-pink-mid) 60%, var(--tp-pink-light) 100%);
  flex-shrink: 0;
}

/* ── 14. SCROLLBAR SIDEBAR (colore brand) ───────────────────── */
.sidebar-nav {
  scrollbar-color: rgba(233,30,140,.3) transparent;
}
.sidebar-nav::-webkit-scrollbar-thumb {
  background: rgba(233,30,140,.3);
}

/* ── 15. MOBILE HAMBURGER ───────────────────────────────────── */
#mob-hamburger { color: var(--tp-magenta); }