/* =============================================================================
   style.css — Shared mobile / responsive fixes for ContentExperts.ai
   Supplements the inline <style> blocks in each page.
   Link from any page: <link rel="stylesheet" href="css/style.css">
   ============================================================================= */

/* ── Global resets ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; display: block; }
button, input, textarea, select { font-family: inherit; }

/* ── Utility ────────────────────────────────────────────────────────────────── */
.mobile-only  { display: none !important; }
.desktop-only { display: block; }

/* ============================================================================
   DASHBOARD  (dashboard.html)
   ============================================================================ */
@media (max-width: 768px) {
  /* Topbar */
  .topbar {
    padding: 0 14px;
    height: 56px !important;
  }
  .topbar .brand { font-size: 0.88rem; }
  .topbar .brand img { height: 24px; }
  .topbar .btn-home { font-size: 0.78rem; padding: 6px 10px; }

  /* Greeting */
  .greeting h1 { font-size: 1.5rem !important; }
  .greeting p  { font-size: 0.88rem; }

  /* Quick actions */
  .quick-actions {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    margin-top: 18px !important;
  }
  .quick-action { padding: 14px 8px !important; font-size: 0.8rem !important; }
  .quick-action .qa-icon { font-size: 1.2rem !important; }

  /* Sections */
  .section { padding: 18px 14px !important; margin-top: 20px !important; }
  .section-head h2 { font-size: 1rem !important; }

  /* Projects */
  .projects-grid { grid-template-columns: 1fr !important; }
  .project h3 { font-size: 0.95rem; }

  /* Plan banner */
  .plan-banner { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px 16px; }
  .plan-name { font-size: 0.95rem !important; }

  /* Forms */
  .form-row { grid-template-columns: 1fr !important; }
  input[type="text"], textarea, select { padding: 10px 12px; font-size: 0.9rem; }
  .btn-primary { width: 100%; padding: 13px 16px; }

  /* Tickets */
  .ticket-head { flex-direction: column; align-items: flex-start; gap: 6px; }

  /* Next steps */
  .next-step { flex-wrap: wrap; }
}

@media (max-width: 460px) {
  .quick-actions { grid-template-columns: 1fr 1fr !important; }
}

/* ============================================================================
   GALLERY  (website-gallery.html)
   ============================================================================ */

/* Desktop: nav-back is hidden (removed via inline CSS in website-gallery.html).
   Mobile: nav-back is shown — handled inline.                                  */

@media (max-width: 768px) {
  /* Nav */
  .nav-inner { height: 70px !important; padding: 0 16px !important; }
  .nav-logo img { height: 52px !important; }
  .nav-links { display: none !important; }
  .mobile-toggle { display: flex !important; }

  /* Mobile menu snaps to the 70px nav */
  .mobile-menu { top: 70px !important; }
  .mobile-menu a { padding: 12px 0; font-size: 0.95rem; }

  /* Page hero */
  .page-hero { padding: 100px 0 48px !important; }
  .page-hero h1 { font-size: 1.9rem !important; }
  .page-hero-actions { gap: 10px; }
  .page-hero-actions .btn { padding: 11px 22px; font-size: 0.88rem; }

  /* Portfolio grid */
  .portfolio-grid { grid-template-columns: 1fr !important; }
  .portfolio-preview { height: 180px; }

  /* Template grid */
  .tpl-grid { grid-template-columns: 1fr !important; gap: 16px !important; }

  /* CTA strip */
  .gallery-cta-strip { padding: 40px 0; }
  .gallery-cta-strip h2 { font-size: 1.4rem; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
  .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
}

@media (max-width: 640px) {
  .portfolio-grid { grid-template-columns: 1fr !important; }
  .tpl-grid { grid-template-columns: 1fr !important; }
  .tpl-modal { padding: 0 !important; }
  .tpl-modal-inner { border-radius: 0 !important; }
}

/* ============================================================================
   ADMIN  (admin.html) — supplements the inline mobile CSS already present
   ============================================================================ */
@media (max-width: 768px) {
  /* Tabs: horizontal scroll */
  .tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 10px 14px 0 !important;
    gap: 3px !important;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .admin-tab { white-space: nowrap; flex-shrink: 0; padding: 7px 11px !important; font-size: 0.8rem !important; }

  /* Stats */
  .stats-bar { padding: 12px 14px !important; gap: 8px !important; }
  .stat-box { min-width: 100px !important; padding: 10px 12px !important; }
  .stat-value { font-size: 1.25rem !important; }

  /* Table */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table { min-width: 460px; }
  thead th, tbody td { padding: 8px 10px !important; font-size: 0.8rem !important; }

  /* Drawer full-width */
  #detailDrawer { width: 100vw !important; }
  #drawerBody { grid-template-columns: 1fr !important; }

  /* Panel spacing */
  .panels { padding: 14px !important; }
  .panel-header { flex-direction: column; align-items: flex-start; gap: 6px; }

  /* Add-client form */
  .add-client-form { max-width: 100% !important; }
  .form-row-2 { grid-template-columns: 1fr !important; }

  /* Overview */
  .overview-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .overview-recent { grid-template-columns: 1fr !important; }
}

/* ============================================================================
   FORMS  (bug-report, change-requests, contact, get-started, etc.)
   ============================================================================ */
@media (max-width: 768px) {
  /* Generic form containers */
  .form-container,
  .form-section,
  .form-card,
  .form-wrap {
    padding: 20px 16px !important;
    margin: 0 !important;
    border-radius: 12px !important;
  }

  /* Two-column form grids → single column */
  .grid-2,
  .col-2,
  .two-col,
  .form-grid-2 {
    grid-template-columns: 1fr !important;
  }

  /* Submit buttons full-width */
  [type="submit"],
  .btn-submit {
    width: 100%;
  }

  /* Select dropdowns */
  select { appearance: none; -webkit-appearance: none; }
}

/* ============================================================================
   RESPONSIVE SHOW/HIDE helpers
   ============================================================================ */
@media (max-width: 768px) {
  .desktop-only { display: none !important; }
  .mobile-only  { display: block !important; }
}
@media (min-width: 769px) {
  .mobile-only  { display: none !important; }
  .desktop-only { display: block !important; }
}