/*
 * TapSocial Mobile CSS
 * Additive only — desktop styles (>768px) are UNCHANGED.
 * Included on every public page via <link rel="stylesheet" href="/css/mobile.css">
 *
 * Note: ts-core.js already injects base mobile rules for sidebar, .main,
 * .page-header, .stats-row, table overflow, .modal, .settings-grid, .labs-grid.
 * This file handles page-specific gaps not covered by the shared framework.
 */

/* ─────────────────────────────────────────────
   SHARED — applies to all pages at ≤768px
   ───────────────────────────────────────────── */
@media (max-width: 768px) {

  /* Touch-friendly tap targets */
  .nav-item  { min-height: 44px; padding: 12px 14px; }
  .btn       { min-height: 40px; }
  .btn-sm    { min-height: 36px; }
  .filter-btn { min-height: 36px; padding: 7px 14px; }
  .date-btn  { min-height: 36px; padding: 6px 12px; }
  .act-btn   { min-height: 36px; min-width: 36px; padding: 6px 8px; }

  /* Ad-blocker banner: sidebar is hidden on mobile so left offset resets */
  #adblocker-warning { left: 0 !important; }

  /* Sidebar nav items easier to tap */
  .nav-divider { padding: 14px 12px 6px; }

  /* Generic form inputs full-width */
  .form-input,
  .form-select,
  .form-textarea { width: 100%; box-sizing: border-box; }

  /* ── Campaigns page ── */
  .overview-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .overview-bar > select { width: 100% !important; }
  .overview-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
  }
  .ov-metric { flex: 1 1 80px; text-align: center; }
  .sync-indicator { text-align: center; font-size: 0.6rem; }
  .date-range { flex-wrap: wrap; justify-content: center; gap: 6px; }
  .quick-stats { grid-template-columns: repeat(2, 1fr); }
  .filters { flex-wrap: wrap; gap: 8px; padding: 12px 16px; }
  .search-input { width: 100% !important; }
  .camp-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Bulk bar wraps on mobile */
  .bulk-bar { flex-wrap: wrap; gap: 8px; }

  /* ── Dev Board ── */
  .board { grid-template-columns: 1fr !important; gap: 16px; }

  /* ── Activity Log ── */
  .log-entry {
    display: flex !important;
    flex-direction: column;
    gap: 4px;
  }
  .entry-time,
  .log-entry .entry-time { text-align: left !important; }
  .entry-meta { text-align: left !important; flex-wrap: wrap; }
  .filter-bar { flex-wrap: wrap; gap: 8px; }
  .filter-bar input[type="text"],
  .filter-bar .search-input { width: 100% !important; }

  /* ── Revenue Feed ── */
  .controls-bar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px;
  }
  .controls-bar > * { width: 100%; }
  .controls-bar select,
  .controls-bar input { width: 100% !important; }

  /* ── Rockman ── */
  .qs-grid { grid-template-columns: repeat(2, 1fr); }
  .channel-input-wrap { flex-direction: column; }
  .channel-input-wrap .btn { width: 100%; }
  .channel-input { width: 100%; }

  /* ── Campaign Detail ── */
  .ad-card { flex-direction: column !important; }
  .creative-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important; }
  .adset-card > .adset-header { flex-wrap: wrap; gap: 8px; }

  /* ── Targeting Library ── */
  .modal-wide { max-width: calc(100vw - 32px) !important; }
  .modal-wide .modal-body-grid { grid-template-columns: 1fr !important; }

  /* ── Optimization ── */
  .rules-grid { grid-template-columns: 1fr !important; }

  /* ── Launch Wizard (Build) ── */
  .step-bar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    gap: 0;
    flex-wrap: nowrap;
  }
  .step-label { display: none; }
  .form-row { grid-template-columns: 1fr !important; }
  .targeting-grid { grid-template-columns: 1fr !important; }
  .modal-body-grid { grid-template-columns: 1fr !important; }

  /* ── Creative Engine ── */
  .gen-options { flex-direction: column; gap: 8px; }
  .gen-options select,
  .gen-options input { width: 100%; }

  /* ── Page header buttons don't stretch full-width ── */
  .page-header .btn { width: auto; }
  .page-header { flex-wrap: wrap; gap: 10px; }
}

/* ─────────────────────────────────────────────
   SMALL PHONES — ≤480px
   ───────────────────────────────────────────── */
@media (max-width: 480px) {

  /* ── Campaigns quick stats: single column ── */
  .quick-stats { grid-template-columns: 1fr; }
  .overview-metrics { gap: 8px; }
  .ov-metric-value { font-size: 0.95rem; }
  .filter-btn { font-size: 0.6rem; padding: 6px 10px; }

  /* ── Rockman stats: single column ── */
  .qs-grid { grid-template-columns: 1fr; }

  /* ── Login card ── */
  .login-card { padding: 24px 18px !important; }
  .logo-text { font-size: 1.5rem !important; }
  .sso-buttons { flex-direction: column; }
  .btn-sso { width: 100%; }
  .login-wrapper { padding: 12px; }

  /* ── Sidebar footer: tighten ── */
  .user-email { display: none; }
  .sidebar-legal { font-size: 0.55rem; }

  /* ── Card headers: smaller ── */
  .card-title { font-size: 0.75rem; }
}