/* ============================================
   TF Event Crew Portal - Mobile Responsive
   ============================================ */

@media (max-width: 768px) {
  :root {
    --mobile-bottombar-h: 64px;
  }

  /* ---- Sidebar: hide on mobile ---- */
  .sidebar {
    display: none !important;
  }

  /* ---- Main area: full width ---- */
  .main-area {
    margin-left: 0 !important;
    padding-bottom: calc(var(--mobile-bottombar-h) + 16px);
  }

  /* ---- Topbar ---- */
  .topbar {
    padding: 0 16px !important;
    height: 56px !important;
  }

  .topbar h1,
  .topbar .topbar-btn {
    font-size: 13px !important;
  }

  .topbar-btn {
    padding: 6px 12px !important;
  }

  /* ---- Page content ---- */
  .page-content {
    padding: 16px !important;
  }

  /* ---- Stats grid: 2 columns on mobile ---- */
  .stats-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  .stat-card {
    padding: 14px !important;
  }

  .stat-card .stat-value {
    font-size: 22px !important;
  }

  .stat-card .stat-icon {
    width: 34px !important;
    height: 34px !important;
    font-size: 16px !important;
  }

  /* ---- Cards ---- */
  .card-header {
    padding: 14px 16px !important;
    flex-wrap: wrap;
    gap: 8px;
  }

  .card-body {
    padding: 16px !important;
  }

  .card-title {
    font-size: 15px !important;
  }

  /* ---- Forms: stack vertically ---- */
  .form-row,
  .form-row-3 {
    grid-template-columns: 1fr !important;
  }

  .form-group {
    margin-bottom: 12px !important;
  }

  .form-group label {
    font-size: 12px !important;
  }

  .form-control {
    padding: 10px 12px !important;
    font-size: 13px !important;
  }

  /* ---- Tables: horizontal scroll ---- */
  .table-wrap {
    margin: 0 -16px;
    padding: 0 16px;
  }

  table.data-table {
    font-size: 12px !important;
    min-width: 600px;
  }

  table.data-table th,
  table.data-table td {
    padding: 10px 8px !important;
  }

  /* ---- Buttons ---- */
  .btn {
    padding: 8px 14px !important;
    font-size: 13px !important;
  }

  /* ---- Modals: full screen on mobile ---- */
  .modal-overlay {
    padding: 0 !important;
    align-items: flex-end !important;
  }

  .modal {
    max-width: 100% !important;
    max-height: 90vh !important;
    border-radius: 16px 16px 0 0 !important;
  }

  .modal-lg {
    max-width: 100% !important;
  }

  .modal-header {
    padding: 16px !important;
  }

  .modal-body {
    padding: 16px !important;
  }

  .modal-footer {
    padding: 12px 16px !important;
    flex-wrap: wrap;
  }

  .modal-title {
    font-size: 16px !important;
  }

  /* ---- Event cards ---- */
  .event-card {
    padding: 16px !important;
  }

  /* ---- Badges ---- */
  .badge {
    font-size: 11px !important;
    padding: 2px 8px !important;
  }

  /* ---- Login page ---- */
  /* Target login container via general centering approach */
  [class*="login"] {
    padding: 24px 20px !important;
  }

  /* ---- Empty states ---- */
  .empty-state {
    padding: 32px 16px !important;
  }

  /* ---- Two-column layouts (Profile, etc.) ---- */
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* ---- Fix event detail views ---- */
  .event-card .event-title {
    font-size: 15px !important;
  }

  /* ---- File upload / signature areas ---- */
  .signature-placeholder {
    font-size: 12px !important;
  }

  /* ---- System Update page ---- */
  textarea.form-control {
    min-height: 60px !important;
  }
}

/* ---- Extra small phones (< 400px) ---- */
@media (max-width: 400px) {
  .stats-grid {
    grid-template-columns: 1fr !important;
  }

  .topbar {
    padding: 0 12px !important;
  }

  .page-content {
    padding: 12px !important;
  }
}