/* =============================================================================
 * ALC App — Versão Desktop (web, mesmo link).  ADITIVO / self-contained.
 * -----------------------------------------------------------------------------
 * A base é phone-first. Este arquivo NÃO reescreve nada do styles.css: só adiciona
 * regras dentro de @media (min-width:*) que reaproveitam o MESMO DOM/JS.
 *   • ≥760px  (tablet): conteúdo em coluna centralizada + grid de módulos mais largo.
 *   • ≥1024px (desktop): o drawer (já populado no load por renderDrawer()) vira
 *     SIDEBAR FIXA — sem hambúrguer, sem scrim; o conteúdo desloca p/ a direita.
 *     Clicar num item continua navegando (closeDrawer só tira .open; a sidebar
 *     segue visível pelo transform:none !important daqui).
 * Combina com theme.js (usa as MESMAS vars, então claro/escuro valem no desktop).
 * WIRING (chat de deploy): <link rel="stylesheet" href="desktop.css"> DEPOIS de styles.css.
 * ========================================================================== */

/* ---------- ≥760px — coluna centralizada + grid mais largo (tablet/desktop) ---------- */
@media (min-width: 760px) {
  .content {
    max-width: 1080px;
    margin-inline: auto;
    width: 100%;
    padding: 34px 28px calc(env(safe-area-inset-bottom, 0px) + 60px);
  }
  .grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
  .hero { margin: 12px 2px 30px; }
  .hero-title { font-size: 42px; }
  .grid-2 { grid-template-columns: 1fr 1fr; }
  /* mapa e cartões respiram mais em tela larga */
  .view-body { gap: 16px; }
}

/* ---------- ≥1024px — shell de desktop: sidebar fixa + conteúdo à direita ---------- */
@media (min-width: 1024px) {
  :root { --alc-sidebar: 300px; }

  /* drawer -> sidebar permanente (o conteúdo já existe desde o load) */
  .drawer {
    transform: none !important;
    visibility: visible !important;
    width: var(--alc-sidebar);
    box-shadow: none;
    border-right: 1px solid var(--border);
    z-index: 40;                      /* abaixo de modais/sheets, ao lado do conteúdo */
  }
  .scrim { display: none !important; }         /* nunca escurece no desktop */
  .drawer-close { display: none; }             /* não há o que fechar */
  .menu-btn { visibility: hidden; }            /* mantém o slot do grid, some o hambúrguer */

  /* conteúdo ocupa o espaço à direita da sidebar */
  .app { margin-left: var(--alc-sidebar); }
  .topbar { padding-left: 24px; padding-right: 24px; }
  .content { max-width: 1120px; padding-top: 40px; }

  /* grid de módulos aproveita a largura */
  .grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }
  .hero-title { font-size: 48px; }

  /* FABs de baixo-esquerda saem de cima da sidebar */
  .alc-conn { left: calc(var(--alc-sidebar) + 16px) !important; }
  .install-fab { left: calc(var(--alc-sidebar) + 16px); }

  /* hover states só fazem sentido com mouse (o app é touch-first) */
  .tile { transition: transform .12s ease, border-color .15s ease, background .15s ease; }
  .tile:hover { transform: translateY(-2px); border-color: var(--accent-line); }
  .drawer-item:hover { background: var(--surface-2); }
  .browse-all:hover { background: var(--surface-3); }
}

/* ---------- ≥1440px — respiro extra em telas grandes ---------- */
@media (min-width: 1440px) {
  .content { max-width: 1240px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
}