/*
 * FreelanceHub — Global Responsive System
 * Approach: mobile-first utility classes + targeted overrides
 * Breakpoints: xs <480 · sm <768 · md <1024 · lg 1024+
 */

/* ─── 1. DISPLAY UTILITIES ──────────────────────────────── */
.fh-show-mobile { display: none !important; }
.fh-hide-tablet { }

@media (max-width: 767px) {
  .fh-hide-mobile  { display: none !important; }
  .fh-show-mobile  { display: block !important; }
  .fh-show-mobile-flex { display: flex !important; }
}
@media (min-width: 768px) {
  .fh-hide-desktop { display: none !important; }
}
@media (max-width: 1023px) {
  .fh-hide-tablet  { display: none !important; }
  .fh-show-tablet  { display: block !important; }
}

/* ─── 2. STACK ON MOBILE ────────────────────────────────── */
@media (max-width: 767px) {
  .fh-stack {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .fh-stack > * { width: 100% !important; max-width: 100% !important; }
  .fh-full  { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; }
}

/* ─── 3. RESPONSIVE GRID ────────────────────────────────── */
/* Two-column sidebar layouts (e.g. 320px + 1fr) → single column */
@media (max-width: 900px) {
  [style*="grid-template-columns: 320px"],
  [style*="grid-template-columns:320px"],
  [style*="grid-template-columns: 300px"],
  [style*="grid-template-columns:300px"],
  [style*="grid-template-columns: 280px"],
  [style*="grid-template-columns: 260px"],
  [style*="grid-template-columns: 240px"] {
    grid-template-columns: 1fr !important;
  }
}

/* Auto-fill grids — reduce min size on mobile */
@media (max-width: 767px) {
  [style*="minmax(280px"],
  [style*="minmax(260px"],
  [style*="minmax(300px"] {
    grid-template-columns: 1fr !important;
  }
  [style*="minmax(240px"],
  [style*="minmax(220px"],
  [style*="minmax(200px"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* Three-plus column explicit grids → single column */
  [style*="grid-template-columns: 1fr 1fr 1fr"],
  [style*="grid-template-columns:1fr 1fr 1fr"],
  [style*="repeat(3, 1fr)"],
  [style*="repeat(4, 1fr)"],
  [style*="repeat(5, 1fr)"],
  [style*="repeat(6, 1fr)"] {
    grid-template-columns: 1fr 1fr !important;
  }
}
@media (max-width: 479px) {
  [style*="repeat(3, 1fr)"],
  [style*="repeat(4, 1fr)"],
  [style*="repeat(5, 1fr)"],
  [style*="repeat(6, 1fr)"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:1fr 1fr"],
  [style*="minmax(160px"],
  [style*="minmax(150px"],
  [style*="minmax(140px"] {
    grid-template-columns: 1fr !important;
  }
}

/* ─── 4. RESPONSIVE TABLES ──────────────────────────────── */
/* Any table inside .fh-table-wrap gets card treatment on mobile */
.fh-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; }

@media (max-width: 767px) {
  .fh-table-card,
  .fh-table-card thead,
  .fh-table-card tbody,
  .fh-table-card th,
  .fh-table-card td,
  .fh-table-card tr { display: block !important; }

  .fh-table-card thead tr { display: none !important; }

  .fh-table-card tr {
    border: 1px solid var(--ab1, #e5e7eb) !important;
    border-radius: 12px !important;
    margin-bottom: 10px !important;
    overflow: hidden !important;
  }
  .fh-table-card tr:last-child { margin-bottom: 0; }

  .fh-table-card td {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 14px !important;
    border: none !important;
    border-bottom: 1px solid var(--ab1, #f3f4f6) !important;
    font-size: 13px !important;
    min-height: 42px;
    text-align: right !important;
  }
  .fh-table-card td:last-child { border-bottom: none !important; }
  .fh-table-card td::before {
    content: attr(data-label);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--ab1, #9ca3af);
    flex-shrink: 0;
    margin-right: 10px;
    text-align: left;
  }
  .fh-table-card td[data-label]::before {
    color: var(--at3, #9ca3af);
  }
  .fh-table-card td:not([data-label])::before,
  .fh-table-card td[data-label=""]::before { display: none; }
  .fh-table-card td:not([data-label]) { justify-content: flex-end; }
}

/* ─── 5. FORM FIELDS STACK ON MOBILE ────────────────────── */
@media (max-width: 767px) {
  .fh-form-row {
    flex-direction: column !important;
    gap: 10px !important;
  }
  .fh-form-row > * {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  /* Make filter bars stack */
  form[class*="filter"],
  .fh-filters {
    flex-direction: column !important;
  }
  .fh-filters > * { width: 100% !important; box-sizing: border-box !important; }
}

/* ─── 6. ADMIN SIDEBAR ───────────────────────────────────── */
@media (max-width: 1023px) {
  .admin-sidebar {
    position: fixed !important;
    left: -260px !important;
    top: 0 !important; bottom: 0 !important;
    z-index: 1100 !important;
    box-shadow: 4px 0 24px rgba(0,0,0,.25) !important;
    transition: left .25s cubic-bezier(.4,0,.2,1) !important;
  }
  .admin-sidebar.open { left: 0 !important; }
  .admin-sidebar-overlay {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,.45) !important;
    z-index: 1050 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity .25s !important;
  }
  .admin-sidebar-overlay.open {
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  .admin-main { margin-left: 0 !important; }
  .admin-topbar { padding-left: 14px !important; }
  body.admin-sidebar-open { overflow: hidden !important; }
}

/* ─── 7. ADMIN TOPBAR HAMBURGER ─────────────────────────── */
.fh-hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 8px;
  flex-direction: column;
  gap: 5px;
  flex-shrink: 0;
}
.fh-hamburger span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--at2, #6b7280);
  border-radius: 2px;
  transition: all .2s;
}
@media (max-width: 1023px) {
  .fh-hamburger { display: flex; }
}

/* ─── 8. CARD / CONTENT PADDING ON MOBILE ───────────────── */
@media (max-width: 767px) {
  .card { padding: 16px !important; }
  .main-card { padding: 16px !important; border-radius: 16px !important; }
  .info-card { padding: 20px 16px !important; }
}

/* ─── 9. TYPOGRAPHY SCALE ───────────────────────────────── */
@media (max-width: 767px) {
  /* Prevent iOS zoom on form inputs */
  input, select, textarea { font-size: 16px !important; }
  /* But keep admin inputs smaller visually */
  .admin-content input,
  .admin-content select,
  .admin-content textarea { font-size: 14px !important; }
}

/* ─── 10. STAT / METRIC GRIDS ───────────────────────────── */
@media (max-width: 767px) {
  .stats-grid { grid-template-columns: 1fr 1fr !important; }
  .stat-box { padding: 12px !important; }
  .stat-number { font-size: 22px !important; }
}

/* ─── 11. SAFE AREA (NOTCH) ─────────────────────────────── */
@supports (padding: env(safe-area-inset-bottom)) {
  .admin-sidebar-inner { padding-bottom: max(20px, env(safe-area-inset-bottom)); }
  .fh-bottom-safe { padding-bottom: env(safe-area-inset-bottom); }
}

/* ─── 12. TOUCH TARGETS ─────────────────────────────────── */
@media (max-width: 767px) {
  a, button { min-height: 36px; }
  .nav-icon-btn { min-height: 40px; min-width: 40px; }
}

/* ─── 13. HORIZONTAL OVERFLOW PREVENTION ────────────────── */
body { overflow-x: hidden; }
.profile-container,
.services-container,
.profile-two-column { max-width: 100%; }

/* ─── 14. FRONTEND TWO-COLUMN LAYOUTS ───────────────────── */
@media (max-width: 900px) {
  .profile-two-column,
  .fp-layout,
  [style*="grid-template-columns: 300px minmax"],
  [style*="grid-template-columns: 320px minmax"],
  [style*="grid-template-columns: 340px minmax"],
  [style*="grid-template-columns: 360px minmax"] {
    grid-template-columns: 1fr !important;
  }
  .info-card,
  .fp-sidebar { position: static !important; }
}

/* ─── 15. FRONTEND SERVICES GRID ────────────────────────── */
@media (max-width: 640px) {
  .services-grid,
  .fp-gigs-grid { grid-template-columns: 1fr !important; }
  .services-title { font-size: 22px !important; }
}

/* ─── 16. HERO / HEADER SECTIONS ────────────────────────── */
@media (max-width: 767px) {
  [style*="font-size:52px"],
  [style*="font-size: 52px"] { font-size: 32px !important; }
  [style*="font-size:44px"],
  [style*="font-size: 44px"] { font-size: 28px !important; }
  [style*="font-size:40px"],
  [style*="font-size: 40px"] { font-size: 26px !important; }
  [style*="font-size:36px"],
  [style*="font-size: 36px"] { font-size: 24px !important; }
  [style*="font-size:32px"],
  [style*="font-size: 32px"] { font-size: 22px !important; }
  [style*="padding:80px"],
  [style*="padding: 80px"] { padding: 40px 20px !important; }
  [style*="padding:60px"],
  [style*="padding: 60px"] { padding: 30px 16px !important; }
}

/* ─── 17. MESSAGES / CHAT ───────────────────────────────── */
@media (max-width: 767px) {
  .fp-layout { grid-template-columns: 1fr !important; }
  .fp-sidebar { position: static !important; }
  .fp-header { flex-direction: column !important; align-items: flex-start !important; }
  .fp-gigs-grid { grid-template-columns: 1fr !important; }
}

/* ─── 18. DIRECTORY ─────────────────────────────────────── */
@media (max-width: 900px) {
  [style*="grid-template-columns: 220px"],
  [style*="grid-template-columns:220px"],
  [style*="grid-template-columns: 200px"],
  [style*="grid-template-columns:200px"] {
    grid-template-columns: 1fr !important;
  }
}

/* ─── 19. PAGINATION ────────────────────────────────────── */
@media (max-width: 480px) {
  .pagination { gap: 4px !important; flex-wrap: wrap !important; }
  .pagination-btn { width: 34px !important; height: 34px !important; font-size: 12px !important; }
}

/* ─── 20. MODAL FULLSCREEN ON MOBILE ────────────────────── */
@media (max-width: 767px) {
  [style*="max-width:500px"][style*="border-radius"],
  [style*="max-width: 500px"][style*="border-radius"],
  [style*="max-width:480px"][style*="border-radius"],
  [style*="max-width:460px"][style*="border-radius"] {
    max-width: calc(100vw - 24px) !important;
    margin: 12px !important;
  }
}

/* ─── EXACT PATTERN OVERRIDES (from audit) ──────────────────────────────── */
@media (max-width: 900px) {
  /* Gig show, Job show, Directory show — content + sidebar */
  [style*="minmax(0,1fr) 360px"],
  [style*="minmax(0, 1fr) 360px"],
  [style*="minmax(0,1fr) 340px"],
  [style*="minmax(0, 1fr) 340px"],
  [style*="minmax(0,1fr) 320px"],
  [style*="minmax(0, 1fr) 320px"],
  [style*="minmax(0,1fr) 300px"] {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 767px) {
  /* 3-col and 4-col explicit grids → 2-col */
  [style*="1fr 1fr 1fr"],
  [style*="repeat(3,1fr)"],
  [style*="repeat(3, 1fr)"],
  [style*="repeat(4,1fr)"],
  [style*="repeat(4, 1fr)"] {
    grid-template-columns: 1fr 1fr !important;
  }
  /* Directory category icons row (repeat(8,1fr)) → 4 col */
  [style*="repeat(8,1fr)"],
  [style*="repeat(6,1fr)"],
  [style*="repeat(5,1fr)"] {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

@media (max-width: 480px) {
  [style*="1fr 1fr 1fr"],
  [style*="repeat(3,1fr)"],
  [style*="repeat(3, 1fr)"],
  [style*="1fr 1fr"],
  [style*="repeat(2,1fr)"],
  [style*="repeat(2, 1fr)"] {
    grid-template-columns: 1fr !important;
  }
  [style*="repeat(8,1fr)"],
  [style*="repeat(6,1fr)"],
  [style*="repeat(5,1fr)"],
  [style*="repeat(4,1fr)"],
  [style*="repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ─── ADMIN SPECIFIC ─────────────────────────────────────────────────── */
@media (max-width: 767px) {
  /* Admin two-column settings pages */
  [style*="grid-template-columns:1fr 300px"],
  [style*="grid-template-columns: 1fr 300px"],
  [style*="grid-template-columns:1fr 1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  /* Admin stat rows */
  [style*="display:grid;grid-template-columns:repeat(2,1fr)"],
  [style*="display:grid;grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: 1fr 1fr !important;
  }
  /* Admin filter rows */
  [style*="display:flex;gap:8px;flex-wrap:wrap;margin-bottom"] {
    flex-direction: column !important;
  }
  [style*="display:flex;gap:8px;flex-wrap:wrap;margin-bottom"] > input,
  [style*="display:flex;gap:8px;flex-wrap:wrap;margin-bottom"] > select {
    width: 100% !important;
    box-sizing: border-box !important;
  }
  /* Stat boxes */
  .stat-box { padding: 10px !important; }
  /* Max-width containers on admin */
  [style*="max-width:960px"],
  [style*="max-width: 960px"],
  [style*="max-width:980px"],
  [style*="max-width:1200px"] {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* Admin table action buttons — stack them */
  .admin-action-group {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .admin-action-group > * {
    width: 100% !important;
    text-align: center !important;
  }
}

/* ─── TABLE OVERFLOW FALLBACK ─────────────────────────────────────────── */
/* For tables NOT using fh-table-card, at least scroll horizontally */
.fh-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ─── STICKY SIDEBAR BECOMES STATIC ON MOBILE ────────────────────────── */
@media (max-width: 900px) {
  [style*="position:sticky"],
  [style*="position: sticky"] {
    position: static !important;
  }
}

/* ─── HERO TEXT SCALE ─────────────────────────────────────────────────── */
@media (max-width: 767px) {
  h1[style*="font-size:48px"], h1[style*="font-size: 48px"],
  h1[style*="font-size:52px"], h1[style*="font-size: 52px"],
  h1[style*="font-size:56px"], h1[style*="font-size: 56px"] {
    font-size: clamp(28px, 7vw, 48px) !important;
  }
  /* Padding reductions */
  [style*="padding:60px 24px"],
  [style*="padding: 60px 24px"],
  [style*="padding:80px 24px"] {
    padding: 36px 16px !important;
  }
}