/**
 * Responsive overrides for mobile devices.
 * Shared across all admin pages.
 */

/* ============================================
   TABLET (768px and below)
   ============================================ */
@media (max-width: 768px) {
   body { padding: 10px; }

   .header h1 { font-size: 1.8em; }
   .header p { font-size: 1em; }

   .card { padding: 20px; }

   .login-card { padding: 25px; }

   /* Nav: wrap links */
   .nav-bar {
      flex-direction: column;
      gap: 10px;
      padding: 10px 15px;
   }

   .nav-links {
      flex-wrap: wrap;
      gap: 8px;
      justify-content: center;
   }

   .nav-links a {
      padding: 8px 10px;
      font-size: 13px;
   }

   /* User bar */
   .user-bar { padding: 10px 15px; }

   /* Tables: let them scroll, but improve readability */
   .results-table { font-size: 12px; }
   .results-table th { padding: 10px 8px; font-size: 11px; }
   .results-table td { padding: 10px 8px; }

   /* Forms: stack rows */
   .form-row, .filters-row {
      flex-direction: column;
      gap: 10px;
   }

   .filter-group select,
   .filter-group input[type="date"] {
      min-width: unset;
      width: 100%;
   }

   /* Buttons: full width, taller touch targets */
   .search-btn,
   .run-report-btn,
   .btn-primary,
   .btn-success,
   .renew-btn,
   .apply-action-btn {
      width: 100%;
      padding: 14px 20px;
      min-height: 44px;
   }

   /* Actions bar */
   .actions-bar {
      flex-wrap: wrap;
      gap: 8px;
   }

   .action-select { width: 100%; }

   /* Bulk actions / selection count */
   .bulk-actions-section {
      flex-direction: column;
      align-items: flex-start;
      gap: 8px;
   }

   .results-header {
      flex-direction: column;
      gap: 10px;
      align-items: flex-start;
   }

   .results-summary {
      flex-wrap: wrap;
      gap: 10px;
   }

   /* Modals */
   .modal { padding: 20px; max-height: 90vh; }

   .modal-actions {
      flex-direction: column;
      gap: 8px;
   }

   .modal-actions button { width: 100%; min-height: 44px; }

   /* Search box */
   .search-box { flex-direction: column; }
   .search-box .search-btn { width: 100%; }

   /* Pagination */
   .pagination-bar { flex-direction: row; }
   .pagination-btn { flex: 1; min-height: 44px; }

   /* Tools grid (home page) */
   .tools-grid {
      grid-template-columns: 1fr !important;
      gap: 15px;
   }

   /* Connection string (MusicCatalyst) */
   .connection-output { flex-direction: column; }
   .copy-btn { width: 100%; min-height: 44px; }

   /* Account info */
   .info-row { flex-direction: column; gap: 2px; }
   .info-value { word-break: break-all; }

   /* Charts list */
   .chart-item { flex-wrap: wrap; gap: 6px; }
}

/* ============================================
   PHONE (480px and below)
   ============================================ */
@media (max-width: 480px) {
   body { padding: 8px; }

   .header h1 { font-size: 1.5em; }

   .card { padding: 15px; }

   .login-card { padding: 20px; width: 95%; }

   .nav-links a { padding: 8px 8px; font-size: 12px; }

   /* Minimum font sizes */
   .license-key { font-size: 10px; }
   .results-table { font-size: 11px; }
   .results-table th { font-size: 10px; padding: 8px 6px; }
   .results-table td { padding: 8px 6px; }

   /* Stack modal license items */
   .renewal-license-details { grid-template-columns: 1fr; }

   /* Checkboxes: keep them tappable */
   .col-checkbox { width: 34px; }
}

/* ============================================
   SMALL PHONE (375px and below)
   ============================================ */
@media (max-width: 375px) {
   .nav-links { gap: 4px; }
   .nav-links a { font-size: 11px; padding: 6px 6px; }
}