/* ═══════════════════════════════════════════════════════════════════════════
   GooseDock — Responsive Stylesheet
   Covers every screen size: mobile (≤480), phones (≤768), tablets (≤1024),
   laptops (≤1280), desktops. No content hidden — everything reflows.
   Loaded on every page via gd-theme.css @import.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Global safety: prevent horizontal scroll everywhere ────────────────── */
html, body { overflow-x: clip; max-width: 100vw; }
*, *::before, *::after { box-sizing: border-box; }
img, video, iframe, svg { max-width: 100%; height: auto; }
table { max-width: 100%; }
pre, code { max-width: 100%; overflow-x: auto; word-wrap: break-word; }

/* Ensure any page content wrapper stays inside viewport */
.page-content, .main-content, .app-shell, .dir-wrap, .dir-body,
.gp-shell, .pt-shell { max-width: 100vw; }

/* ══════════════════════════════════════════════════════════════════════════
   TABLETS & BELOW (≤ 1024px)
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  /* App shell: sidebar becomes off-canvas drawer */
  .app-shell .sidebar:not(.open) { transform: translateX(-100%); }
  .app-shell .main-content { margin-left: 0 !important; padding-right: 0 !important; }

  /* Topbar hamburger always visible on tablets+mobile */
  .topbar-toggle, .dir-toggle { display: flex !important; }

  /* Hide vendor rails on small screens */
  .gd-vendor-rail { display: none !important; }
  body.has-vendor-rail .main-content { padding-right: 0 !important; }

  /* Directory table — enable horizontal scroll */
  .dir-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table.dir-rows { min-width: 700px; }

  /* Stat rows — 2 per row */
  .dir-stat-row, .stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .v-kpis { grid-template-columns: repeat(2, 1fr) !important; }

  /* Profile 3-col grid collapses */
  .gp-grid { grid-template-columns: 1fr !important; }

  /* Public 3-rail layout: rails already hide via their own max-width; enforce here too */
  /* Public rails — keep visible on mobile (unpinned to inline block, see their own files) */
  body.has-public-rails .main-content { padding-left: 0 !important; padding-right: 0 !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   PHONES (≤ 768px)
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* ─── Status Stories widget: visible on mobile ─── */
  /* Previously hidden on mobile because absolute-positioned floating widget
     blocked hamburger clicks. Now flows inline below topbar (gd-theme.css
     mobile override) so it's safely visible. */
  /* Ensure the story viewer modal never accidentally blocks the screen */
  .gd-story-modal-overlay:not(.open) { display: none !important; }

  /* ─── Admin/role topbar: proper mobile layout ─── */
  .topbar {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 10px 14px !important;
    min-height: 58px;
    height: auto !important;
    position: sticky; top: 0; z-index: 30;
  }
  .topbar-left {
    flex: 1 1 auto;
    min-width: 0;
    gap: 10px !important;
  }
  .topbar-right {
    flex: 0 0 auto;
    gap: 8px !important;
  }
  .topbar-toggle { flex-shrink: 0; }

  /* Admin dashboard-style topbar title */
  .gd-topbar-head { min-width: 0; flex: 1; }
  .gd-topbar-eyebrow { font-size: .55rem !important; letter-spacing: 1.2px !important; }
  .gd-topbar-title {
    font-size: 1rem !important;
    flex-wrap: wrap;
    gap: 4px !important;
    letter-spacing: -.2px !important;
    line-height: 1.2 !important;
  }
  .gd-topbar-title em { font-size: .74rem !important; }
  .gd-topbar-accent { display: none !important; }

  /* Simple .topbar-title used on vendors.php, users.php, approve_tenders, etc. */
  .topbar-title { font-size: 14px !important; line-height: 1.25 !important; word-break: break-word; }
  .topbar-sub { font-size: 11px !important; line-height: 1.3 !important; }

  /* Inline <h1>/<p> used in admin/approve_tenders.php, users.php, upgrade_requests.php, approve_deals.php — override inline font-size */
  .topbar h1 { font-size: 15px !important; line-height: 1.25 !important; word-break: break-word; }
  .topbar p  { font-size: 11px !important; line-height: 1.3 !important; margin-top: 1px; }

  /* Right-side badge (e.g. "N awaiting action") — allow it to wrap to a new line */
  .topbar > span,
  .topbar > .topbar-right > span {
    font-size: 11px !important;
    padding: 3px 9px !important;
    white-space: nowrap;
  }

  /* Admin right-side user badge: hide the name text on very small screens, keep avatar */
  .topbar-right > div > span {
    display: none;
  }

  /* Payments add form — collapse 6-col grid to 2 */
  .pay-add-body {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }
  .pay-add-body .full { grid-column: 1 / -1 !important; }
  .pay-add { padding: 16px 14px !important; }
  .pay-add-head h3 { font-size: .88rem !important; }
  .pay-add-body .submit { width: 100%; justify-self: stretch !important; grid-column: 1 / -1 !important; }
  .pay-user-dropdown { max-height: 240px; }

  /* Global padding shrink */
  body { font-size: 14px; }

  /* Topbar */
  .topbar, .dir-topbar { padding: 10px 14px !important; flex-wrap: wrap; gap: 8px; height: auto; min-height: 56px; }
  .topbar-title { font-size: 15px !important; }
  .topbar-sub { font-size: 11px !important; }
  .topbar-right { flex-wrap: wrap; gap: 6px; }
  .topbar-right .btn, .topbar-right a, .topbar-right button { font-size: 12px; padding: 6px 10px; }

  /* Directory pages — filters stack vertically */
  .dir-body { padding: 14px !important; }
  .dir-filters { flex-direction: column; align-items: stretch; }
  .dir-filters .dir-search,
  .dir-filters select,
  .dir-filters .dir-btn { width: 100%; min-width: 0; flex: 1 1 auto; }
  .dir-tabs { gap: 6px; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .dir-tabs::-webkit-scrollbar { display: none; }
  .dir-tab { flex-shrink: 0; padding: 7px 12px; font-size: 12px; }

  /* Stat rows — 2 per row but smaller */
  .dir-stat, .stat-card { padding: 10px 12px; }
  .dir-stat strong, .stat-card strong, .v-kpi-num { font-size: 1.1rem !important; }

  /* Tables: keep min-width so they scroll */
  table.dir-rows { min-width: 640px; font-size: 12px; }
  table.dir-rows th, table.dir-rows td { padding: 8px 10px !important; }
  table.dir-rows .action-btn { width: 26px; height: 26px; }

  /* Sidebar — mobile drawer */
  .sidebar { width: 260px !important; }

  /* Cards/panels — reduce padding */
  .panel, .gp-panel, .gp-hero, .card, .mp-card,
  .tender-card, .v-card, .pay-add,
  .hp-vid-sec, .hp-pr-inline { padding: 16px 14px !important; }

  /* Profile hero */
  .gp-hero { padding: 20px 16px !important; }
  .gp-name { font-size: 1.4rem !important; }
  .gp-meta { gap: 8px 10px !important; }
  .gp-hero-pid { position: static !important; margin-bottom: 10px; display: inline-flex; }

  /* Forms */
  .form-group, .pt-field, .v-field, .ms-fg { width: 100%; }
  .form-row, .ms-frow, .pt-field-row { grid-template-columns: 1fr !important; }
  input, select, textarea { font-size: 16px !important; /* prevent iOS zoom on focus */ }

  /* Buttons — full width on mobile for primary CTAs */
  .btn-block, .btn-primary.mobile-full, .submit { width: 100%; }
  .btn, .action-btn, button { min-height: 34px; }

  /* Modals */
  .modal, .ms-modal, .modal-box { max-width: calc(100vw - 20px) !important; margin: 0 10px; }
  .modal-head, .ms-modal-head { padding: 14px 18px !important; }
  .modal-body, .ms-modal-body { padding: 18px !important; }

  /* Payment history (my-payments include) */
  .mp-summary { flex-direction: column; gap: 8px; }
  .mp-summary-chip { justify-content: flex-start; }
  .mp-table { font-size: 12px; }
  .mp-table th, .mp-table td { padding: 7px 8px; }

  /* Navbar (public pages) */
  .navbar .nav-wrap, .nav-wrap { padding: 10px 14px !important; height: auto; gap: 10px; }
  .nav-links { gap: 2px; }
  .nav-links a { padding: 6px 10px; font-size: 13px; }

  /* Hero / landing sections — reduce oversized type */
  .hero-title, .hero-headline, h1.gp-name, .sec-title, .about-inline-title,
  .hp-vid-title, .hp-pr-title { font-size: clamp(1.3rem, 5.5vw, 1.9rem) !important; }

  /* Dashboard grids */
  .grid-2, .grid-3, .grid-4,
  .dash-grid, .dash-recent-grid, .dashboard-grid,
  .gd-profile-metrics, .v-kpis,
  [style*="grid-template-columns: 2fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; gap: 14px !important; }

  /* Status widget mobile layout handled in gd-theme.css @media(max-width:900px) */

  /* Footer */
  .site-footer .footer-grid,
  .footer-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
  .footer-bottom { flex-direction: column; gap: 8px; text-align: center; align-items: center; }
  .footer-legal { flex-wrap: wrap; justify-content: center; }

  /* Notifications page */
  .notif-item { flex-direction: column; align-items: flex-start; gap: 10px; }
  .notif-ico { width: 36px; height: 36px; }

  /* Payment / bidding flow wizards */
  .pt-card, .wizard-card { padding: 22px 16px !important; }
  .pt-field input, .pt-field select { height: 50px; font-size: 16px; }
  .pt-field-row { gap: 8px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   SMALL PHONES (≤ 480px)
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  /* Payment add form: force single column */
  .pay-add-body { grid-template-columns: 1fr !important; }

  /* Admin topbar: hide user avatar+name on smallest screens (still reachable via sidebar) */
  .topbar-right > div[style*="border-radius:50%"],
  .topbar-right > div:has(> div[style*="border-radius:50%"]) {
    flex-direction: column;
    gap: 2px;
  }

  /* Single-column stat rows */
  .dir-stat-row, .stats-grid, .v-kpis,
  .cr-info, .about-inline-cards,
  .gd-profile-metrics { grid-template-columns: 1fr !important; }

  /* Tighter padding */
  .topbar, .dir-topbar { padding: 8px 10px !important; }
  .dir-body { padding: 10px !important; }
  .panel, .gp-panel, .card, .mp-card { padding: 14px 12px !important; }

  /* Smaller page headings */
  .topbar-title, .dir-title h1 { font-size: 14px !important; }
  .topbar-sub { font-size: 10.5px !important; }
  .gp-name { font-size: 1.2rem !important; }

  /* Action button spacing */
  table.dir-rows .actions { gap: 3px; flex-wrap: wrap; }
  table.dir-rows .action-btn { width: 24px; height: 24px; }
  table.dir-rows .action-btn svg { width: 11px; height: 11px; }

  /* Form inputs full width */
  input, select, textarea { width: 100% !important; }

  /* Hide "shown" count chip text on very small screens (keep icon) */
  .dir-count { font-size: 10px; padding: 4px 8px; }

  /* My-payments table: force column stack for readability */
  .mp-table thead { display: none; }
  .mp-table, .mp-table tbody, .mp-table tr, .mp-table td { display: block; width: 100%; }
  .mp-table tr { padding: 10px 0; border-bottom: 1px solid rgba(0,0,0,.08); }
  .mp-table td { padding: 3px 0; border: none; }
  .mp-table td::before {
    content: attr(data-label); display: inline-block; min-width: 80px;
    font-size: 10px; font-weight: 800; letter-spacing: 1px;
    text-transform: uppercase; color: rgba(26,20,20,.5); margin-right: 8px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   LARGE SCREENS (≥ 1440px) — slight upscale for breathing room
   ═══════════════════════════════════════════════════════════════════════ */
@media (min-width: 1440px) {
  .dir-body, .page-content { max-width: 1400px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   PRINT
   ═══════════════════════════════════════════════════════════════════════ */
@media print {
  .sidebar, .topbar, .dir-topbar, .gd-vendor-rail,
  .pub-left-rail, .pub-right-rail, .topbar-toggle, .dir-toggle,
  .dir-filters, .dir-tabs, .actions { display: none !important; }
  .main-content { margin-left: 0 !important; padding: 0 !important; }
  body { background: #fff !important; color: #000 !important; }
}