/* =========================================================
   responsive.css  —  three breakpoints
   ========================================================= */

/* ===== Tablet ===== */
@media (min-width: 768px) and (max-width: 1099px) {
  .topbar     { display: none; }
  .sidebar    { display: flex; }
  .bottom-nav { display: none; }
  .app-shell  { grid-template-rows: 1fr; padding-left: 220px; }
  .page { grid-row: 1; }

  .stat-grid   { grid-template-columns: repeat(2, 1fr); }
  .detail-grid { grid-template-columns: 1fr 280px; }

  .ct-head, .ct-row { grid-template-columns: 2fr 100px 130px 100px; }
  .col-date { display: none; }
  .renew-summary-rows { grid-template-columns: 1fr 1fr; }

  .wrap { padding: var(--s-5); padding-bottom: var(--s-10); }
}

/* ===== Mobile ===== */
@media (max-width: 767px) {
  .topbar     { display: none; }
  .sidebar    { display: none; }
  .bottom-nav { display: flex; }
  .app-shell  { grid-template-rows: 1fr 64px; }
  .page       { grid-row: 1; }
  .bottom-nav { grid-row: 2; }

  .wrap { padding: var(--s-4) var(--s-3) var(--s-8); }
  .dash-hero .ph-title { font-size: 32px; }
  .page-header { align-items: stretch; }
  .ph-actions { width: 100%; }
  .ph-actions .btn { flex: 1 1 auto; min-width: 0; }

  .stat-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-3); }

  /* Customer table collapses */
  .ct-head { display: none; }
  .ct-row { grid-template-columns: 1fr auto; gap: var(--s-2); padding: var(--s-3); }
  .col-plan, .col-tiffins, .col-date { display: none; }

  .detail-grid { grid-template-columns: 1fr; }
  .form-row.two-col { grid-template-columns: 1fr; }
  .renew-stats { grid-template-columns: repeat(2, 1fr); }
  .renew-summary-rows { grid-template-columns: 1fr; }
  .radio-group .radio-pill { flex: 1 1 100%; }

  /* Modal becomes bottom-sheet */
  .modal-scrim { align-items: flex-end; padding: 0; }
  .modal-box {
    max-width: none;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    max-height: 92dvh;
    animation: modal-in-sheet 200ms ease both;
  }
  @keyframes modal-in-sheet {
    from { transform: translateY(100%); opacity: 0.6; }
    to { transform: none; opacity: 1; }
  }
}