/* ================================================================
   LifeOS — responsive.css
================================================================ */

/* ── Bottom Nav — escondido no desktop ── */
.bottom-nav {
  display: none;
}

/* ── Tablet (≤ 1024px) ── */
@media (max-width: 1024px) {
  .stats-row { grid-template-columns: repeat(2, 1fr); }
  .dash-cols { grid-template-columns: 1fr; }
  .dash-widgets { display: grid; grid-template-columns: 1fr 1fr; }
  .widget-notifs { grid-column: 1 / -1; }
  .grid-3 { grid-template-columns: 1fr 1fr; }
}

/* ── Mobile (≤ 768px) ── */
@media (max-width: 768px) {
  :root { --sidebar-w: 0px; }

  /* Sidebar some, vira menu off-canvas só se quiser abrir */
  .sidebar {
    transform: translateX(-100%);
    width: 200px;
  }
  .sidebar.open {
    transform: translateX(0);
  }

  .menu-toggle { display: flex; }

  .main-content {
    margin-left: 0;
    /* espaço pra o bottom nav não cobrir o conteúdo */
    padding-bottom: 64px;
  }

  .content-body { padding: 20px 16px; gap: 20px; }

  .dash-hero { flex-direction: column; align-items: flex-start; gap: 16px; }
  .hero-quote { max-width: 100%; }
  .hero-title { font-size: 1.7rem; }

  .stats-row { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat-value { font-size: 1.5rem; }

  .dash-widgets { grid-template-columns: 1fr; }

  .grid-2, .grid-3 { grid-template-columns: 1fr; }

  .topbar { padding: 0 16px; }

  /* Overlay */
  .sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 90;
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s ease, visibility .18s ease;
  }
  .sidebar-overlay.open {
    opacity: 1;
    visibility: visible;
  }

  /* ── Bottom Nav ── */
  .bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 64px;
    background: var(--bg2);
    border-top: 1px solid var(--border);
    z-index: 100;
  }

  .bottom-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    color: var(--text3);
    text-decoration: none;
    transition: color .18s ease;
  }

  .bottom-nav-item.active {
    color: var(--accent);
  }

  .bottom-nav-item:hover {
    color: var(--text);
  }

  .bottom-nav-icon {
    font-size: 1rem;
    line-height: 1;
    transition: transform .18s ease;
  }

  .bottom-nav-item.active .bottom-nav-icon {
    filter: drop-shadow(0 0 6px var(--accent));
  }

  .bottom-nav-item:hover .bottom-nav-icon {
    transform: scale(1.2);
  }

  .bottom-nav-label {
font-family: var(--font-mono);
  font-size: 0.8em;
  letter-spacing: .04em;
  position: fixed;

  

}
}

/* ── Small mobile (≤ 480px) ── */
@media (max-width: 480px) {
  .stats-row { grid-template-columns: 1fr 1fr; }
  .hero-title { font-size: 1.4em; }
  .page-title { font-size: 1.2rem; }
  .topbar-datetime { display: none; }

  /* Em telas muito pequenas, esconde o label do bottom nav */
  .bottom-nav-label { display: none; }
  .bottom-nav { height: 54px; }
  .main-content { padding-bottom: 54px; }
}