/* ═══════════════════════════════════════════════════════════
   YORAI ADMIN — responsive.css
   Todos os @media queries do admin panel.
═══════════════════════════════════════════════════════════ */

/* ── TABLET GRANDE (901px – 1100px) ── */
@media (max-width: 1100px) and (min-width: 901px) {
  #kpi-primary-grid { grid-template-columns: 1fr 1fr !important }
  .three-col { grid-template-columns: 1fr 1fr; gap: 12px }
}

/* ── TABLET (601px – 900px) ── */
@media (max-width: 900px) and (min-width: 601px) {
  :root { --sidebar-w: 200px }
  .content { padding: 20px 18px }
  #kpi-primary-grid { grid-template-columns: 1fr 1fr !important; gap: 10px }
  #kpi-secondary-grid { grid-template-columns: 1fr 1fr 1fr !important }
  .kpi-grid { grid-template-columns: 1fr 1fr; gap: 10px }
  .two-col { grid-template-columns: 1fr; gap: 12px }
  .three-col { grid-template-columns: 1fr 1fr; gap: 12px }
  .kpi-val { font-size: 24px }
  #kpi-primary-grid .kpi-val { font-size: 26px !important }
}

/* ── MOBILE (≤600px) — sidebar goes off-canvas ── */
@media (max-width: 600px) {
  /* Sidebar: off-canvas drawer */
  .sidebar {
    position: fixed;
    left: -280px;
    top: 0;
    z-index: 300;
    height: 100vh;
    width: 260px;
    min-width: 260px;
    transition: left .25s cubic-bezier(.4,0,.2,1);
    box-shadow: none;
  }
  .sidebar.open {
    left: 0;
    box-shadow: 8px 0 40px rgba(0,0,0,0.45);
  }

  /* Hamburger: visible inline in topbar */
  .hamburger { display: flex }

  /* Main: full width, no sidebar pushing it */
  .main { width: 100%; min-width: 0; max-width: 100vw }

  /* Topbar: left padding for hamburger, right tight */
  .topbar { padding: 0 10px; height: 52px; gap: 8px }
  .page-title { font-size: 15px; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }

  /* Hide pill labels in topbar to save space */
  .topbar-right .sys-pill span:not(.dot) { display: none }
  .topbar-right .sys-pill { padding: 4px 7px; min-width: 26px; justify-content: center }
  .topbar-right { gap: 4px; flex-shrink: 0 }

  /* Hide search button text/kbd */
  .topbar-search-label { display: none !important }
  .topbar-search-kbd { display: none !important }

  /* Content */
  .content {
    padding: 14px 12px;
    max-height: calc(100vh - 52px);
    overflow-y: auto;
    overflow-x: hidden;
    width: 100%;
    box-sizing: border-box;
  }

  /* Grids */
  #kpi-primary-grid { grid-template-columns: 1fr !important; gap: 10px }
  #kpi-secondary-grid { grid-template-columns: 1fr 1fr !important; gap: 8px }
  .kpi-grid { grid-template-columns: 1fr 1fr; gap: 8px }
  .kpi-val { font-size: 22px }
  #kpi-primary-grid .kpi-val { font-size: 26px !important }
  .two-col { grid-template-columns: 1fr !important; gap: 10px }
  .three-col { grid-template-columns: 1fr !important; gap: 10px }

  /* Plan grid: single column on mobile */
  #public-plans-grid { grid-template-columns: 1fr !important }
  #hidden-plans-grid { grid-template-columns: 1fr !important }
  #plans-summary-bar { grid-template-columns: 1fr 1fr !important }

  /* Cards */
  .card { padding: 14px }
  .card-sm { padding: 12px 14px }

  /* Table */
  table { font-size: 12px }
  thead th { font-size: 10px; padding: 7px 8px }
  td { padding: 9px 8px }

  /* Hide less critical table columns */
  .col-health, .col-churn, .col-wa, .col-since { display: none }

  /* Compact sidebar toggle */
  .sidebar-compact-btn { display: none }

  /* Error banner */
  #error-banner { font-size: 12px; padding: 10px 14px }
}

/* ── TOPBAR COMPACTO em telas médias ── */
@media (max-width: 780px) and (min-width: 601px) {
  .sys-pill span:not(.dot) { display: none }
  .sys-pill { padding: 4px 7px }
  .topbar-right { gap: 4px }
  .topbar { padding: 0 14px 0 28px }
}

/* Modal tabs mobile */
@media (max-width: 600px) {
  .topbar-search-label, .topbar-search-kbd { display: none }
  .topbar-search-btn { padding: 7px; border-radius: 8px; min-width: 32px; justify-content: center }
}