/* ── QazPoster Mobile & Tablet ─────────────────────────────────── */
/* Loaded after style.css to override desktop defaults              */

/* ── Global touch targets ────────────────────────────────────── */
@media (pointer: coarse) {
  .btn, .btn-sm, .btn-outline,
  .filter-select, .sidebar .nav-link,
  .pagination-btn, .theme-toggle,
  .tag-add-btn, .translate-btn {
    min-height: 44px;
    min-width: 44px;
  }
  .sidebar .nav-link { height: 44px; }
  .filter-select { padding: 10px 12px; font-size: 0.88rem; }
  .pagination-btn { padding: 10px 16px; }
}

/* ── Mobile sidebar drawer (≤ 768px) ─────────────────────────── */
@media (max-width: 768px) {
  /* Sidebar becomes a slide-from-left drawer */
  .sidebar {
    transform: translateX(-100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    width: var(--sidebar-width) !important;
    box-shadow: none;
  }
  .sidebar.open {
    transform: translateX(0);
    box-shadow: 4px 0 24px rgba(0,0,0,0.15);
  }

  /* Hide desktop sidebar collapse button on mobile */
  .sidebar-collapse-btn,
  .sidebar-desktop-toggle {
    display: none !important;
  }

  /* Show mobile menu button */
  .sidebar-mobile-toggle {
    display: flex !important;
  }

  /* Content takes full width */
  main,
  .site-footer,
  .site-header {
    margin-left: 0 !important;
    left: 0 !important;
  }

  /* Sidebar collapsed class shouldn't affect mobile */
  body.sidebar-collapsed main,
  body.sidebar-collapsed .site-footer,
  body.sidebar-collapsed .site-header {
    margin-left: 0 !important;
    left: 0 !important;
  }

  /* Topbar adjustments */
  .topbar-inner { padding: 0 16px; }

  /* Page title */
  .page-title { font-size: 1.35rem; }

  /* Stats grid */
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }

  /* Tables: horizontal scroll */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table { min-width: 600px; }

  /* Filter bar */
  .filter-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .filter-bar .filter-group { width: 100%; }
  .filter-bar .filter-select { width: 100%; }

  /* Posts list items — stack meta */
  .post-item__meta { flex-wrap: wrap; }

  /* Generate card in reports */
  .generate-card {
    flex-direction: column;
    gap: 12px;
  }
  .generate-controls {
    flex-direction: column;
    gap: 8px;
  }

  /* Footer */
  .footer-inner {
    flex-direction: column;
    text-align: center;
    gap: 8px;
  }

  /* Container padding */
  .container { padding: 0 16px; }

  /* Dashboard grid */
  .dashboard-grid { grid-template-columns: 1fr; }
}

/* Calendar header: stack title + toggle on mobile */
@media (max-width: 640px) {
  .fc-page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  .fc-page-header .page-title {
    font-size: 1.2rem;
    flex: none;
  }
  .view-toggle { width: 100%; }
  .view-toggle-btn { flex: 1; text-align: center; }
}

/* ── Small phones (≤ 480px) ──────────────────────────────────── */
@media (max-width: 480px) {
  .stats-grid { grid-template-columns: 1fr; }
  .page-title { font-size: 1.15rem; }
  .stat-card { padding: 14px; }

  /* Calendar on small screens */
  .fc .fc-toolbar { flex-direction: column; gap: 8px; }
  .fc .fc-toolbar-title { font-size: 0.85rem !important; }
  .fc .fc-button { font-size: 0.72rem !important; padding: 0.2rem 0.4rem !important; }
}

/* ── Modals: fullscreen on mobile ────────────────────────────── */
@media (max-width: 640px) {
  /* Calendar modal */
  .modal-card {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }

  /* Media modal */
  .media-modal-card {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    flex-direction: column !important;
  }
  .media-modal-preview,
  .media-modal-preview-img,
  .media-modal-preview-vid {
    max-height: 35vh !important;
    width: 100% !important;
  }

  /* Reports schedule modal */
  .modal-card[role="dialog"] {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 0 !important;
  }

  /* Inbox: stack list+detail */
  .inbox-layout {
    flex-direction: column !important;
  }
  .inbox-list-panel,
  .inbox-detail-panel {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* Tags editor */
  .tag-input-row { flex-direction: row; }
  .tag-input { font-size: 16px; } /* Prevent iOS zoom on focus */

  /* Translate panel */
  .translate-row { flex-direction: column; align-items: stretch; }
  .translate-select { width: 100%; }
  .translate-btn { width: 100%; text-align: center; }
}

/* ── Tablet (641–1024px) ──────────────────────────────────────── */
@media (min-width: 641px) and (max-width: 1024px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .dashboard-grid { grid-template-columns: 1fr 1fr; }

  .container { padding: 0 20px; }

  /* Media grid */
  .media-grid { columns: 3 180px; }
}

/* ── PWA safe-area (notch devices) ────────────────────────────── */
@supports (padding: env(safe-area-inset-top)) {
  .site-header {
    padding-top: env(safe-area-inset-top);
  }
  .site-footer {
    padding-bottom: env(safe-area-inset-bottom);
  }
  @media (max-width: 768px) {
    .sidebar {
      padding-top: env(safe-area-inset-top);
    }
  }
}

/* ── Media upload: touch-friendly text ────────────────────────── */
.upload-text-mobile { display: none; }
@media (pointer: coarse), (max-width: 640px) {
  .upload-text-desktop { display: none; }
  .upload-text-mobile { display: inline; }
}