/* ============================================================================
   Ukkaz — Mobile-first responsive layer
   Loaded AFTER app.css and design.css so it can override desktop-first rules.

   Breakpoints:
     768px → tablet
     640px → large mobile
     480px → small mobile (iPhone SE, etc)
     360px → tiny screens
   ============================================================================ */

/* ─── Universal safety ───────────────────────────────────────────────────── */
html, body {
  overflow-x: hidden;          /* never let horizontal scroll leak */
  max-width: 100vw;
}
* {
  -webkit-tap-highlight-color: rgba(33, 71, 210, .15);  /* nicer tap feedback */
}
img, video, canvas, svg {
  max-width: 100%;
  height: auto;
}

/* Make all interactive elements minimum touch-friendly */
@media (hover: none) and (pointer: coarse) {
  button, a.button, .btn, [role="button"], input[type="submit"],
  input[type="button"], .ip-hero-btn, .nav-link, .side-link {
    min-height: 44px;
  }
  /* Form inputs comfortable thumb-typing */
  input[type="text"], input[type="email"], input[type="password"],
  input[type="search"], input[type="number"], input[type="tel"],
  input[type="url"], input[type="date"], textarea, select {
    font-size: 16px !important;  /* prevents iOS auto-zoom */
    min-height: 44px;
  }
}

/* ─── Tablet & below (≤768px) ────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* Backdrop when mobile sidebar is open */
  body.sidebar-open::after {
    content: "";
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, .55);
    z-index: 50;
    backdrop-filter: blur(2px);
  }
  .side-nav { z-index: 60; }

  /* Content frame: tighter padding */
  .content-frame { padding: 16px 14px !important; }

  /* Top bar: only essentials */
  .topbar { padding-inline: 14px; }
  .topbar-actions { gap: 6px; }

  /* Hide language switcher + plan chip on very tight viewports — keep just menu + user */
  .topbar-actions .lang-switch { display: none; }

  /* Cards / sections: full width, tighter rounding */
  .card, .section-card, .ip-card, .ad-chart-card,
  .ntf-stat, .wl-create-card, .wl-records-wrap {
    border-radius: 14px !important;
  }

  /* All KPI grids → 2 columns on tablet, 1 on small mobile */
  .ip-kpis, .ad-kpis, .kpi-row, .ntf-stats, .wl-stats {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .ip-kpi, .ad-kpi, .ntf-stat {
    padding: 14px 16px !important;
  }
  .ip-kpi-num, .ad-kpi-num { font-size: 22px !important; }
  .ip-kpi-label, .ad-kpi-label { font-size: 11px !important; }

  /* Hero sections — smaller text + tighter padding */
  .ip-hero, .ns-hero, .auth-visual, .hero-band, .pd-hero {
    padding: 22px 22px !important;
    border-radius: 16px !important;
  }
  .ip-hero h1, .ns-hero h1, .pd-title { font-size: 22px !important; }
  .ip-hero p, .ns-hero p { font-size: 13px !important; }
  .ip-hero-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .ip-hero-actions { width: 100%; }
  .ip-hero-actions .ip-hero-btn { flex: 1; justify-content: center; }

  /* Tables: always wrap in horizontal scroll, never crop */
  .table-wrap, .ad-table-wrap, .ip-rec-wrap, .dt-twrap,
  .wl-private-table-wrap, table.responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 12px;
  }
  /* Add an inline scroll cue */
  .table-wrap::after, .ad-table-wrap::after, .ip-rec-wrap::after {
    content: "← اسحب يميناً ←";
    display: block;
    text-align: center;
    font-size: 10px;
    color: var(--muted, #64748b);
    padding: 6px 0;
    opacity: .65;
  }

  /* All tables: tighter cells */
  table { font-size: 12.5px; }
  table th, table td { padding: 10px 12px !important; }

  /* Charts: shorter on mobile */
  .ad-chart-canvas { height: 200px !important; }
  .ip-chart-wrap canvas, canvas#entityTimeseriesChart,
  canvas#supplierTimeseriesChart { max-height: 220px !important; }

  /* Forms — full width inputs, stacked labels */
  .form-row, .form-grid, .wl-modal-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  .filter-card { gap: 10px; }
  input, select, textarea { width: 100%; box-sizing: border-box; }

  /* Modals: full screen on tiny viewports */
  .wl-modal, .feature-gate-modal {
    max-width: 100% !important;
    width: 100% !important;
    max-height: 100vh;
    border-radius: 16px 16px 0 0 !important;
    margin-bottom: 0 !important;
  }
  .wl-modal-overlay, .feature-gate-overlay {
    align-items: flex-end !important;  /* slide from bottom — native feel */
    padding: 0 !important;
  }
  .wl-modal-grid { grid-template-columns: 1fr !important; }

  /* Page max widths */
  .ip-page, .ns-page, .pd-wrap, .container, .wl-page, .ntf-page, .ad-page,
  .public-main {
    padding-inline: 14px !important;
  }

  /* Detail tabs strip — scrollable */
  .dt-bar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .dt-bar::-webkit-scrollbar { display: none; }
  .dt-btn { white-space: nowrap; padding: 11px 13px; font-size: 12.5px; }

  /* Sidebar: bigger close affordance */
  .side-nav { width: 84vw !important; max-width: 320px; }

  /* Long titles in cards — clamp */
  .card-title, .ad-section-title { font-size: 14px; }

  /* Bottom-fixed action bars stay readable */
  .ns-foot, .pd-actions, .wl-modal-foot {
    flex-wrap: wrap;
    gap: 8px;
  }
  .ns-foot button.save, .pd-btn { flex: 1; justify-content: center; }
}

/* ─── Large mobile (≤640px) ──────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* Single-column KPI grid for small phones */
  .ip-kpis, .ad-kpis, .kpi-row, .ntf-stats, .wl-stats {
    grid-template-columns: 1fr !important;
  }
  .ip-kpi-num, .ad-kpi-num { font-size: 24px !important; }

  /* Tighter headers */
  .topbar { height: 56px; }
  .brand-mark { transform: scale(.92); }

  /* Per-section progress table — wraps nicely */
  #bfPanel table { font-size: 11.5px; min-width: 720px; }

  /* Filter pills stack */
  .wl-section-pills { gap: 5px; }
  .wl-section-pill { font-size: 11.5px; padding: 6px 11px; }

  /* Team discussion / tasks compose forms */
  .td-disc-compose, .td-task-compose { padding: 14px !important; }
  .td-task-row2 { grid-template-columns: 1fr !important; }

  /* Charts row in admin → single col */
  .ad-charts, .ad-charts-row { grid-template-columns: 1fr !important; }

  /* Watch chip in scraper panel */
  #bfWarnChip { font-size: 11px; padding: 5px 10px; }
  #bfEtaWrap { font-size: 11.5px; }
}

/* ─── Small mobile (≤480px, iPhone SE, older Androids) ──────────────────── */
@media (max-width: 480px) {
  /* Even tighter content padding */
  .content-frame { padding: 12px 10px !important; }
  .ip-page, .ns-page, .wl-page, .ntf-page { padding-inline: 10px !important; }

  /* Hero: smaller still */
  .ip-hero, .ns-hero, .pd-hero { padding: 18px 18px !important; }
  .ip-hero h1, .ns-hero h1, .pd-title { font-size: 19px !important; line-height: 1.3 !important; }

  /* Hide secondary actions on smallest screens (Cancel button on modals etc) */
  .wl-modal-foot .cancel { display: none; }

  /* Notification setting matrix — channel headers stack as labels */
  .ns-channels { display: none; }
  .ns-type-row {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 14px !important;
    border: 1px solid var(--line) !important;
    border-radius: 12px !important;
    margin-bottom: 10px;
  }
  .ns-type-row .ns-toggle-wrap {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 0; border-top: 1px dashed var(--line);
  }
  .ns-type-row .ns-toggle-wrap:first-of-type { border-top: none; padding-top: 12px; }
  .ns-type-row .ns-toggle-wrap::before {
    content: attr(data-channel);
    font-size: 12.5px; color: var(--muted); font-weight: 600;
  }

  /* Tabs on tender detail */
  .dt-btn { padding: 10px 12px; font-size: 12px; }
  .dt-cnt { font-size: 10px; padding: 1px 6px; }
  .dt-panel { padding: 14px 12px !important; }

  /* Team comment/task entries — tighter */
  .td-comment, .td-task { padding: 12px !important; gap: 10px !important; }
  .td-comment-avatar { width: 32px; height: 32px; font-size: 13px; }

  /* Sidebar nav links */
  .side-link { padding: 10px 14px; font-size: 13.5px; }
}

/* ─── Tiny screens (≤360px) ─────────────────────────────────────────────── */
@media (max-width: 360px) {
  body { font-size: 13.5px; }
  .ip-hero h1, .ns-hero h1 { font-size: 17px !important; }
  .ip-kpi-num, .ad-kpi-num { font-size: 20px !important; }
  .content-frame { padding: 10px 8px !important; }
}

/* ─── Topbar refinements (notification dropdown, search) ─────────────────── */
@media (max-width: 768px) {
  /* Notification panel — hardcoded 340px in inline style; override to fit screen */
  .notif-panel,
  #notifPanel,
  .top-dropdown {
    width: min(92vw, 360px) !important;
    max-width: 92vw !important;
  }

  /* Drop-down should not run off the screen edge */
  .top-dropdown {
    inset-inline-end: -4px !important;
  }

  /* Notification list inside dropdown — bigger tap target */
  #notifList a, #notifList .notif-row {
    padding: 12px 14px !important;
  }

  /* Global search bar shrinks placeholder, hides search icon space */
  .global-search { flex: 1 1 auto; min-width: 0; }
  .global-search input { font-size: 14px; padding: 9px 12px !important; }
  .global-search .search-icon { display: none; }

  /* User info / plan chip hides on small screens (sidebar already hides on >1280) */
  .user-info, .plan-chip-topbar { display: none !important; }

  /* Admin-quick-link button in topbar: compact */
  .admin-quick-btn { padding: 8px 10px !important; font-size: 12px !important; }
  .admin-quick-btn span { display: none; }

  /* Footer at the bottom — wrap content nicely */
  .footer-grid, .ft-grid { grid-template-columns: 1fr 1fr !important; gap: 18px !important; }
  .footer-bottom, .ft-bottom { flex-direction: column; gap: 10px; text-align: center; }

  /* Side-nav inner: bigger touch targets, less hover-only affordance */
  .side-collapse-btn { display: none !important; }   /* not needed when sidebar is overlay */
}

@media (max-width: 480px) {
  /* On smallest screens, footer becomes 1-col */
  .footer-grid, .ft-grid { grid-template-columns: 1fr !important; }

  /* Hide global search entirely — users can tap menu → search page */
  .global-search { display: none !important; }
  .app-topbar { gap: 8px; justify-content: space-between; }

  /* Brand mark gets center-anchored if search hidden */
  .brand-name { font-size: 14px !important; }
}

/* ─── Public site (landing/blog/legal) helpers ───────────────────────────── */
@media (max-width: 640px) {
  /* Hero CTA buttons stack full width */
  .lnd-hero-actions, .hero-actions {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100%;
  }
  .lnd-hero-actions > a, .hero-actions > a {
    justify-content: center !important;
    width: 100% !important;
  }

  /* Pricing cards already stack at 768 but ensure CTAs full width */
  .lnd-price-card .lnd-price-cta,
  .plan-card .plan-cta { width: 100% !important; }

  /* Blog grid + module cards: tighter gaps */
  .lnd-modules-grid, .lnd-blog-grid, .lnd-testimonials { gap: 16px !important; }
}

/* ─── Auth pages (login/register/forgot) ─────────────────────────────────── */
/* Actual classes from auth/_shell.html: .auth-shell, .auth-brand, .auth-form-pane,
   .auth-form-inner, .auth-form-grid, .auth-form-row. The shell already collapses
   to 1-col at ≤1023px and hides .auth-brand; we tighten further on small mobile. */
@media (max-width: 640px) {
  .auth-form-pane { padding: 22px 16px !important; }
  .auth-form-inner h2 { font-size: 20px !important; }
  .auth-form-inner .lead { font-size: 13px !important; }
  /* Two-column form rows (e.g. company+phone on register) → stack */
  .auth-form-row { grid-template-columns: 1fr !important; gap: 12px !important; }
  .auth-captcha { padding: 14px !important; }
  .auth-divider { margin-block: 16px !important; }
}
@media (max-width: 480px) {
  .auth-form-pane { padding: 18px 12px !important; }
  .auth-form-inner h2 { font-size: 18px !important; }
}

/* ─── Search results page ────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .sr-toolbar { flex-wrap: wrap; gap: 10px; }
  .sr-toolbar .sr-search-input { flex: 1 1 100% !important; }
  .sr-filters { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .sr-result-card { padding: 14px !important; }
}
@media (max-width: 480px) {
  .sr-filters { grid-template-columns: 1fr !important; }
}

/* ─── Tender / record list cards (modules/list.html) ─────────────────────── */
@media (max-width: 768px) {
  .opp-grid, .opportunity-grid, .record-grid { grid-template-columns: 1fr !important; }
  .opp-card, .record-card { padding: 14px !important; }
  .opp-card-head { flex-wrap: wrap; gap: 8px; }
  .opp-meta-row { flex-wrap: wrap; gap: 8px !important; row-gap: 6px !important; }
}

/* ─── Tender detail header (pd-hero) ─────────────────────────────────────── */
@media (max-width: 768px) {
  .pd-hero-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  .pd-actions { width: 100%; }
  .pd-actions .pd-btn { flex: 1; min-width: calc(50% - 4px); justify-content: center; }
  .pd-meta { flex-wrap: wrap; gap: 8px !important; }
}

/* ─── Plans page (pricing cards) ─────────────────────────────────────────── */
@media (max-width: 768px) {
  .plans-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .plan-card.featured { transform: none !important; }
  .plan-card { padding: 22px !important; }
}

/* ─── Data tables — force horizontal scroll instead of column squish ────── */
/* The .data-table has table-layout:fixed which makes columns squeeze instead
   of overflowing. On mobile we want the OPPOSITE: keep columns at a readable
   width and let the wrapper scroll horizontally. */
@media (max-width: 768px) {
  .table-wrap .data-table,
  .ad-table-wrap .data-table,
  .ip-rec-wrap .data-table,
  table.data-table {
    min-width: 760px;
  }
}

/* ─── Tender detail — action buttons row ─────────────────────────────────── */
/* .td2-actions has 3 forms (Favorite/Watch/Open). Without flex:1 they end
   up uneven and wrap badly on small screens. */
@media (max-width: 480px) {
  .td2-actions { flex-wrap: wrap; gap: 8px !important; }
  .td2-actions form, .td2-actions > a { flex: 1 1 calc(50% - 4px); }
  .td2-actions .button { width: 100%; justify-content: center; }
}

/* ─── Admin dashboard — pulse bar collapse ───────────────────────────────── */
/* .ad-pulse-bar is grid 1fr 2fr auto, never collapses → Arabic labels wrap
   to 3 lines at 360px. Make track full-width on small screens. */
@media (max-width: 480px) {
  .ad-pulse-bar {
    grid-template-columns: 1fr auto !important;
    gap: 10px !important;
  }
  .ad-pulse-track {
    grid-column: 1 / -1 !important;
  }
}

/* ─── Subscription page — current-plan card padding ──────────────────────── */
@media (max-width: 640px) {
  .sx-current { padding: 20px 16px !important; }
  .sx-current-price .num { font-size: 32px !important; }
}

/* ─── Dashboard (user command center) — fine-tune ────────────────────────── */
@media (max-width: 768px) {
  /* Matches grid: collapse to 1 col earlier so cards aren't cramped */
  .ucc-matches { grid-template-columns: minmax(0, 1fr) !important; }
  /* Tab strip — scroll horizontally without scrollbar visible */
  .ucc-rtab-bar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .ucc-rtab-bar::-webkit-scrollbar { display: none; }
}
@media (max-width: 480px) {
  .ucc { gap: 12px !important; }
  /* Long Arabic module names — allow wrap */
  .ucc-mod-t { white-space: normal !important; line-height: 1.3; }
}

/* ─── Module list filters & cards ────────────────────────────────────────── */
@media (max-width: 480px) {
  .ml-save-input { min-width: 0 !important; flex: 1 !important; }
  .ml-card-grid {
    padding: 10px !important;
    grid-template-columns: 1fr !important;
  }
  /* Pagination — hide distant page numbers, keep first/prev/current/next/last */
  .ml-pagination { flex-wrap: wrap; }
}

/* ─── Watchlist filters strip ────────────────────────────────────────────── */
@media (max-width: 640px) {
  .wl-records-search { margin-inline-start: 0 !important; }
  .wl-records-search input { min-width: 0 !important; flex: 1; }
  .wl-records-filters { flex-wrap: wrap; }
}

/* ─── Print styles (bonus — clean PDF exports) ──────────────────────────── */
@media print {
  .side-nav, .topbar, .app-topbar, .footer, .ip-hero-actions, .ad-section-head .ad-btn,
  .ntf-header-actions, .wl-records-add { display: none !important; }
  /* Undo the fixed app-shell so the whole page flows onto paper instead of
     being clipped to one 100dvh screen. */
  .app-shell { height: auto !important; overflow: visible !important; display: block !important; }
  .app-main { height: auto !important; overflow: visible !important; }
  .content-frame { padding: 0 !important; overflow: visible !important; height: auto !important; }
  body { background: white; }
  .card, .ip-card, .ad-chart-card { box-shadow: none !important; border: 1px solid #ddd !important; }
}