/* =====================================================================
   responsive.css - Breakpoints. Base é mobile; aqui ampliamos para
   telas maiores.
   ===================================================================== */

/* Tablet+ */
@media (min-width: 720px) {
  .form-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .dashboard-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .app-main { padding: var(--space-6); }
}

/* Desktop: nav lateral fixa */
@media (min-width: 980px) {
  .app-shell {
    grid-template-columns: 240px 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "header header"
      "nav    main";
  }
  .app-header { grid-area: header; }
  .app-nav {
    grid-area: nav;
    position: sticky;
    top: 56px;
    left: 0;
    right: auto;
    height: calc(100vh - 56px);
    width: 240px;
    display: flex;
    border-bottom: none;
    border-right: 1px solid var(--color-gold-dark);
    background: var(--color-black-soft);
  }
  .app-main {
    grid-area: main;
    max-width: 100%;
    padding: var(--space-8);
  }
  .menu-toggle { display: none; }
  .dashboard-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1280px) {
  .dashboard-grid { grid-template-columns: repeat(4, 1fr); }
  .form-grid--3 { grid-template-columns: repeat(3, 1fr); }
}

/* Print (relatórios) */
@media print {
  .app-header, .app-nav, .page-actions, .toast-container { display: none !important; }
  .app-main { padding: 0; }
  .card, .table-wrapper { box-shadow: none; border: 1px solid #ccc; }
  body { background: #fff; }
}