/* ============================================================
   RESPONSIVE.CSS — إصلاح شامل للموبايل والـ Sidebar
   ============================================================ */

/* ── 1. إصلاح Sidebar — ربط الـ ID بنفس CSS الـ class ────── */
/* الـ JS يستخدم id="sbOv" و id="sbPanel" */
/* الـ CSS القديم يستخدم .sb-ov و .sb-panel */
/* الحل: نضيف نفس الـ styles للـ IDs */

#sbOv {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(8px);
  display: none;
  opacity: 0;
  transition: opacity .3s;
}
#sbOv.open {
  display: block;
  opacity: 1;
}

#sbPanel {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: min(300px, 88vw);
  background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
  border-right: 1px solid var(--border);
  padding: 0;
  overflow-y: auto;
  z-index: 501;
  transform: translateX(-110%);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  box-shadow: var(--shadow-xl);
}
#sbPanel.open {
  transform: translateX(0);
}

/* ── 2. Viewport الأساسي ──────────────────────────────────── */
* {
  box-sizing: border-box;
}

html, body {
  max-width: 100vw;
  overflow-x: hidden;
}

/* ── 3. Main Layout ───────────────────────────────────────── */
.main-wrap {
  max-width: 960px;
  margin: 0 auto;
  padding: 1.5rem;
}

/* ── 4. Tablet (max-width: 768px) ─────────────────────────── */
@media (max-width: 768px) {

  /* Main wrap */
  .main-wrap {
    padding: 1rem;
  }

  /* Phase detail */
  .phase-detail-wrap {
    padding: 1rem;
  }

  /* Phase header */
  .ph-hdr {
    flex-direction: column;
    gap: .75rem;
    padding: 1rem;
  }
  .ph-icon-big { font-size: 2rem; }
  .ph-title    { font-size: 1.15rem; }

  /* KPI row */
  .kpi-row {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Dashboard grid */
  .dash-grid {
    grid-template-columns: 1fr;
  }

  /* Header adjustments */
  .hdr {
    padding: 0 1rem;
  }

  /* Tool screen wrap */
  .tool-screen-wrap {
    padding: 1rem;
  }

  /* s14 KPIs */
  .s14-kpis {
    grid-template-columns: repeat(3, 1fr);
  }

  /* s17 cards */
  .s17-cards-grid {
    grid-template-columns: 1fr;
  }
}

/* ── 5. Mobile (max-width: 480px) ─────────────────────────── */
@media (max-width: 480px) {

  /* Phases grid */
  .phases-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Tools grid */
  .tools-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Directory grid */
  .dir-grid {
    grid-template-columns: 1fr;
  }

  /* Hide header subtitle */
  .hdr-sub {
    display: none;
  }

  /* Splash pillars */
  .splash-pillars {
    grid-template-columns: 1fr;
  }

  /* KPI row — full width on very small */
  .kpi-row {
    grid-template-columns: 1fr 1fr;
  }

  /* s14 KPIs */
  .s14-kpis {
    grid-template-columns: repeat(2, 1fr);
  }

  /* s14 2col */
  .s14-2col {
    grid-template-columns: 1fr;
  }

  /* s16 comparison */
  .s16-comp-row {
    grid-template-columns: 1fr;
  }

  /* s19 grids */
  .s19-grid-2,
  .s19-grid-3,
  .s19-metrics {
    grid-template-columns: 1fr;
  }

  /* s13 metrics */
  .s13-metrics-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* field-row */
  .field-row {
    grid-template-columns: 1fr;
  }

  /* Header buttons — hide text keep icons */
  .hdr-btn span {
    display: none;
  }

  /* Panel card padding */
  .panel-card {
    padding: 1rem !important;
  }

  /* Main wrap */
  .main-wrap {
    padding: .85rem;
  }

  /* Brand header */
  .brand-header {
    padding: 1rem;
  }

  /* s15 result actions */
  .s15-result-actions {
    flex-direction: column;
  }

  /* s13 referral stats */
  .s13-ref-stats {
    flex-direction: column;
    gap: .5rem;
  }

  /* Lightbox arrows hide */
  .s24-lb-arrow {
    display: none;
  }

  /* s26 options grid */
  .s26-opts-grid,
  .s26-opts-grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── 6. Very Small (max-width: 360px) ─────────────────────── */
@media (max-width: 360px) {

  .tools-grid {
    grid-template-columns: 1fr;
  }

  .phases-grid {
    grid-template-columns: 1fr;
  }

  .kpi-row {
    grid-template-columns: 1fr;
  }

  .s14-kpis {
    grid-template-columns: repeat(2, 1fr);
  }

  .main-wrap {
    padding: .65rem;
  }

  .hdr {
    padding: 0 .75rem;
  }
}

/* ── 7. Safe Area (iPhone notch/home indicator) ───────────── */
@supports (padding: env(safe-area-inset-bottom)) {
  .bottom-nav {
    padding-bottom: env(safe-area-inset-bottom);
    height: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom));
  }

  .screen {
    padding-bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom) + 1rem);
  }

  .backup-banner {
    bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom));
  }
}

/* ── 8. Touch improvements ────────────────────────────────── */
@media (hover: none) and (pointer: coarse) {

  /* Bigger tap targets */
  .nav-item {
    padding: .6rem .5rem;
  }

  .hdr-btn {
    padding: .45rem .75rem;
    min-height: 40px;
  }

  .s14-next-btn,
  .s14-wa-btn,
  .s14-del-btn {
    min-height: 36px;
    min-width: 36px;
  }

  .s15-opt {
    padding: 1rem .75rem;
  }

  .s18-tab {
    padding: .6rem 1.1rem;
  }

  /* Remove hover transforms on touch */
  .phase-card:hover,
  .s14-card:hover,
  .s17-card:hover,
  .s13-metric-card:hover {
    transform: none;
  }
}

/* ── 9. Image optimization for mobile ────────────────────── */
@media (max-width: 600px) {
  #s24Gallery {
    columns: 2 140px;
  }
}

/* ── 10. Print ────────────────────────────────────────────── */
@media print {
  .hdr,
  .bottom-nav,
  .backup-banner,
  #sbOv,
  #sbPanel,
  #scrollTopBtn {
    display: none !important;
  }

  .screen {
    padding: 0 !important;
  }

  .main-wrap {
    max-width: 100%;
    padding: 0;
  }
}