/* ============================================================
   SCREENFLOW BACKOFFICE — RESPONSIVE.CSS
   Mobile-first media query overrides
   ============================================================ */

/* ============================================================
   TABLET — 992px and below
   ============================================================ */
@media (max-width: 992px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }

  .settings-layout { grid-template-columns: 1fr; }
  .settings-sidebar { position: static; }

  .platform-health-grid { grid-template-columns: 1fr; }

  table.data-table thead th:nth-child(n+5):not(:last-child) { display: none; }
  table.data-table tbody td:nth-child(n+5):not(:last-child) { display: none; }

  .auth-right { display: none; }

  .calendar-grid { grid-template-columns: 1fr; }
  .calendar-cell { min-height: auto; }
}

/* ============================================================
   MOBILE — 768px and below
   ============================================================ */
@media (max-width: 768px) {
  /* Page header */
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }

  .page-header-actions { width: 100%; }
  .page-header-actions .btn { flex: 1; justify-content: center; }

  /* KPI grid */
  .kpi-grid { grid-template-columns: 1fr; }

  /* Tables */
  .table-toolbar { flex-direction: column; align-items: stretch; }
  .table-toolbar-left, .table-toolbar-right { width: 100%; }
  .table-search { min-width: 0; width: 100%; }

  table.data-table thead th:nth-child(n+4):not(:last-child) { display: none; }
  table.data-table tbody td:nth-child(n+4):not(:last-child) { display: none; }

  .table-pagination {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }

  /* Cards */
  .device-grid { grid-template-columns: 1fr; }
  .media-grid  { grid-template-columns: repeat(2, 1fr); }

  /* Auth */
  .auth-left  { padding: var(--space-5) var(--space-4); }
  .auth-box   { max-width: 100%; }
  .auth-title { font-size: var(--text-3xl); }

  /* Modals */
  .modal-backdrop {
    align-items: flex-end;
    padding: 0;
  }

  .modal {
    max-width: 100%;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    max-height: 90vh;
    transform: translateY(100%);
  }

  .modal-backdrop.open .modal { transform: translateY(0); }

  /* Offcanvas */
  .offcanvas { width: 100%; max-width: 100%; }

  /* Toast */
  .toast-container {
    left: var(--space-3);
    right: var(--space-3);
    bottom: var(--space-3);
  }

  .toast { max-width: 100%; }

  /* Settings */
  .settings-row { flex-direction: column; gap: var(--space-2); }
  .settings-row-control { text-align: left; min-width: 0; width: 100%; }

  /* Upload */
  .upload-area { padding: var(--space-5); }

  /* Calendar */
  .calendar-toolbar { flex-direction: column; align-items: flex-start; }
  .calendar-grid { grid-template-columns: repeat(7, 1fr); }
  .calendar-day-header { font-size: 9px; padding: var(--space-1); }
  .calendar-cell { min-height: 60px; padding: var(--space-1); }
  .calendar-event { display: none; }
  .calendar-cell.has-events::after {
    content: '';
    display: block;
    width: 4px;
    height: 4px;
    background: var(--brand-primary);
    border-radius: var(--radius-full);
    margin: 0 auto;
  }

  /* Error pages */
  .error-code { font-size: 80px; }

  /* Org cards */
  .org-stats { grid-template-columns: 1fr; gap: var(--space-2); }
}

/* ============================================================
   SMALL MOBILE — 480px and below
   ============================================================ */
@media (max-width: 480px) {
  .page-header-title { font-size: var(--text-2xl); }

  .media-grid { grid-template-columns: repeat(2, 1fr); }

  .auth-title { font-size: var(--text-2xl); }

  .kpi-grid { grid-template-columns: 1fr; }

  .topbar { padding: 0 var(--space-3); gap: var(--space-2); }

  .breadcrumbs { display: none; }

  /* Hide non-critical table columns on very small screens */
  table.data-table thead th:nth-child(n+3):not(:last-child) { display: none; }
  table.data-table tbody td:nth-child(n+3):not(:last-child) { display: none; }

  /* Stack auth form elements */
  .auth-form .btn { width: 100%; }

  .modal-header { padding: var(--space-4); }
  .modal-body   { padding: var(--space-4); }
  .modal-footer { padding: var(--space-3) var(--space-4); flex-direction: column; }
  .modal-footer .btn { width: 100%; }
}

/* ============================================================
   PRINT STYLES
   ============================================================ */
@media print {
  .sidebar,
  .topbar,
  .upgrade-banner,
  .toast-container,
  .modal-backdrop,
  .btn-sync,
  .page-header-actions { display: none !important; }

  .app-main { margin-left: 0 !important; }

  body { background: white; color: black; }

  .card, .stat-card, .table-container {
    box-shadow: none;
    border: 1px solid #ddd;
    page-break-inside: avoid;
  }
}