/* ==== Mobile responsive overrides ==== */

@media (max-width: 768px) {
  /* Admin panel */
  body, html { font-size: 14px; }
  .nav-bar, .nav { flex-wrap: wrap; gap: 4px; }
  .nav a, .nav-bar a { padding: 6px 8px; font-size: 12px; }
  .main-content { padding: 8px; }
  table { display: block; overflow-x: auto; white-space: nowrap; }
  .form-row { flex-direction: column; }
  .form-row label { width: 100%; }
  .form-row input, .form-row select, .form-row textarea { width: 100%; }
  .card-grid { grid-template-columns: 1fr; }
  .modal-box { width: 95%; margin: 5% auto; }
  .tab-buttons { flex-wrap: wrap; }
  .tab-buttons button { flex: 1 1 auto; font-size: 12px; padding: 6px; }

  /* Frontend */
  .container { padding: 0 8px; }
  .header, .header-content { flex-direction: column; align-items: flex-start; }
  .logo { font-size: 18px; }
  .nav-menu { flex-wrap: wrap; }
  .nav-menu a { padding: 4px 8px; font-size: 12px; }
  .section-grid { grid-template-columns: 1fr; }
  .article-list .article-item { flex-direction: column; }
  .article-list .article-thumb { width: 100%; height: auto; }
  .footer { font-size: 11px; padding: 10px 5px; }
  .admin-link { bottom: 5px; right: 5px; font-size: 11px; padding: 3px 8px; }
  .search-box { width: 100%; }

  /* Video/Live grids */
  .video-grid, .live-grid { grid-template-columns: 1fr 1fr; gap: 6px; }
  .video-card, .live-card { font-size: 12px; }

  /* Poll widget */
  .poll-card { margin: 8px 0; }
  .poll-option { padding: 6px; }

  /* Modal */
  .modal-overlay .modal-box { width: 98%; max-height: 80vh; }
}

@media (max-width: 480px) {
  .video-grid, .live-grid { grid-template-columns: 1fr; }
  .nav-menu { flex-direction: column; }
  .nav-menu a { width: 100%; text-align: center; }
  .header-content { text-align: center; }
  .logo { margin: 0 auto; }
}