/* =====================================================================
   Rawabet — Global Mobile Responsiveness Fixes
   Applies ONLY to iPhone Pro / Pro Max sized viewports.
   Do NOT touch desktop (>1024px). All rules are scoped to mobile media.
   ===================================================================== */

/* ---------- iOS global fixes (safe everywhere; no desktop impact) ---------- */
html { -webkit-text-size-adjust: 100%; }
* { -webkit-overflow-scrolling: touch; }

/* iOS: prevent input auto-zoom — must be 16px+ */
@media (max-width: 430px) {
  input, select, textarea {
    font-size: 16px !important;
  }
  body, html { max-width: 100%; overflow-x: hidden; }

  /* ---------- Safe area for notch ---------- */
  .topbar, .hr-appbar, .bld-appbar, .ic-appbar, .ops-appbar, .appbar, header.appbar {
    padding-top: calc(8px + env(safe-area-inset-top)) !important;
  }
  .sticky-bottom, .submit-fixed {
    padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important;
  }

  /* ---------- Sidebar — hidden by default, slide-in ---------- */
  .hr-root, .bld-root, .ic-root, .ops-root {
    grid-template-columns: 1fr !important;
    display: block !important;
  }
  .hr-sidebar, .bld-sidebar, .ic-sidebar, .ops-sidebar, aside.sidebar {
    position: fixed !important;
    top: 0; right: 0; bottom: 0;
    width: 280px !important;
    height: 100vh !important;
    z-index: 1000;
    transform: translateX(100%);
    transition: transform .25s ease;
    box-shadow: -8px 0 24px rgba(0,0,0,.2);
  }
  [dir="ltr"] .hr-sidebar, [dir="ltr"] .bld-sidebar,
  [dir="ltr"] .ic-sidebar, [dir="ltr"] .ops-sidebar {
    right: auto; left: 0;
    transform: translateX(-100%);
    box-shadow: 8px 0 24px rgba(0,0,0,.2);
  }
  body.sidebar-open .hr-sidebar,
  body.sidebar-open .bld-sidebar,
  body.sidebar-open .ic-sidebar,
  body.sidebar-open .ops-sidebar,
  .sidebar.open, aside.sidebar.open {
    transform: translateX(0) !important;
  }
  body.sidebar-open::before {
    content: "";
    position: fixed; inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 999;
  }
  .hamburger-btn {
    display: inline-flex !important;
    align-items: center; justify-content: center;
    width: 44px; height: 44px;
    border: 1px solid var(--line, rgba(0,0,0,.1));
    border-radius: 10px;
    background: transparent;
    cursor: pointer;
  }

  /* ---------- Topbar / appbar ---------- */
  .topbar, .hr-appbar, .bld-appbar, .ic-appbar, .ops-appbar {
    min-height: 56px;
    flex-wrap: wrap;
    gap: 8px !important;
  }

  /* ---------- Main content padding ---------- */
  .hr-main, .bld-content, .ic-main, .ops-main, .main-content {
    padding: 16px 14px 80px !important;
  }

  /* ---------- Grids ---------- */
  .hr-grid.cols-2, .hr-grid.cols-3, .hr-grid.cols-4,
  .bld-grid.cols-2, .bld-grid.cols-3, .bld-grid.cols-4,
  .ic-grid.cols-2, .ic-grid.cols-3, .ic-grid.cols-4,
  .ops-grid.cols-2, .ops-grid.cols-3, .ops-grid.cols-4,
  .grid-3, .grid-4, .cards-grid, .services-grid, .companies-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  /* KPI cards / stats → 2 columns */
  .kpi-grid, .stats-row, .hr-grid.kpis,
  .grid-kpi, .grid.kpi, .grid-stats {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  /* ---------- Typography ---------- */
  h1, .page-title, .bld-h1, .hr-h1 { font-size: 18px !important; line-height: 1.3 !important; }
  h2, .section-title, .hr-card h3, .bld-card h3 { font-size: 15px !important; }
  body, p, .desc, .hr-desc, .bld-desc { font-size: 13px !important; }
  .kpi .value, .hr-kpi .value, .bld-kpi .value, .ic-kpi .value, .ops-kpi .value {
    font-size: 22px !important;
  }

  /* ---------- Tables ---------- */
  table, .hr-table, .bld-table, .ic-table, .ops-table, .tbl {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    white-space: nowrap;
  }
  .hr-table tr, .bld-table tr, .ic-table tr, .ops-table tr, .tbl tr { min-height: 44px; }
  .hr-table th, .hr-table td,
  .bld-table th, .bld-table td,
  .ic-table th, .ic-table td,
  .ops-table th, .ops-table td,
  .tbl th, .tbl td {
    padding: 10px 12px !important;
    min-height: 44px;
  }

  /* ---------- Forms ---------- */
  .hr-input, .hr-select, .hr-textarea,
  .bld-input, .bld-select, .bld-textarea,
  .ic-input, .ic-select, .ic-textarea,
  .ops-input, .ops-select, .ops-textarea,
  input[type="text"], input[type="email"], input[type="password"],
  input[type="number"], input[type="tel"], input[type="search"],
  input[type="date"], input[type="time"], select, textarea {
    width: 100% !important;
    min-height: 48px;
    font-size: 16px !important;
  }
  textarea { min-height: 96px; }
  .form-row, .row-fields, .field-row, .form-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }
  .form-actions, .actions {
    flex-direction: column !important;
    gap: 10px !important;
  }
  .form-actions .hr-btn, .form-actions .bld-btn, .form-actions button[type="submit"],
  button[type="submit"], .submit, .btn-submit, .primary-cta {
    width: 100% !important;
    min-height: 52px !important;
    font-size: 15px !important;
  }

  /* ---------- Buttons ---------- */
  .hr-btn, .bld-btn, .ic-btn, .ops-btn, .btn, button {
    min-height: 44px;
  }
  .hr-btn.primary, .bld-btn.primary, .ic-btn.primary, .ops-btn.primary,
  .btn.primary { width: 100%; }

  /* ---------- Charts ---------- */
  .chart, .chart-container, canvas, svg.chart {
    width: 100% !important;
    height: 220px !important;
  }
  .charts-row { display: flex; flex-direction: column; gap: 14px; }
  .chart-legend { margin-top: 8px; }

  /* ---------- Cards ---------- */
  .hr-card, .bld-card, .ic-card, .ops-card, .card {
    padding: 14px !important;
    border-radius: 12px;
  }

  /* ---------- Tabs (horizontal scroll) ---------- */
  .hr-tabs, .bld-tabs, .ic-tabs, .ops-tabs, .tabs-row, [role="tablist"] {
    display: flex !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    scrollbar-width: none;
  }
  .hr-tabs::-webkit-scrollbar, .bld-tabs::-webkit-scrollbar,
  .ic-tabs::-webkit-scrollbar, .ops-tabs::-webkit-scrollbar { display: none; }
  .bld-tab, .hr-tab, .ic-tab, .ops-tab, [role="tab"] {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 10px 14px !important;
  }

  /* ---------- Toolbars ---------- */
  .hr-toolbar, .bld-toolbar, .ic-toolbar, .ops-toolbar, .toolbar {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .hr-toolbar > *, .bld-toolbar > *, .ic-toolbar > *,
  .ops-toolbar > *, .toolbar > * { width: 100% !important; }

  /* ---------- Modals ---------- */
  .hr-modal, .bld-modal, .ic-modal, .ops-modal, .modal {
    max-width: 100% !important;
    width: calc(100% - 16px) !important;
    max-height: 92vh !important;
    padding: 16px !important;
  }

  /* ---------- Portal index — main hub ---------- */
  .hero { padding: 16px 16px 40px !important; }
  .hero h1, .hero .greeting { font-size: 20px !important; line-height: 1.3 !important; }
  .stats, .stats-row, .hero-stats {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  .services-grid, .companies-grid,
  section.services .grid, section.companies .grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .partners-banner, .banner-partners {
    flex-direction: column !important;
    text-align: center;
  }
  .partners-banner .btn, .banner-partners .btn { width: 100%; }

  /* ---------- Partners portal specific ---------- */
  .partner-hero, .partner-header { flex-direction: column !important; gap: 10px !important; }
  .partner-name { font-size: 20px !important; }
  .profit-share, .profit-value { font-size: 28px !important; font-weight: 800 !important; }
  .branch-cards, .branches-grid { grid-template-columns: 1fr !important; }
  .month-selector, select.month { width: 100% !important; }
  .docs-table { display: none; }
  .docs-cards { display: block !important; }

  /* ---------- Operations — shift report ---------- */
  .checklist-item, .check-row {
    min-height: 52px;
    padding: 12px !important;
  }
  .checklist-item input[type="checkbox"], .check-row input[type="checkbox"] {
    width: 24px !important; height: 24px !important;
  }
  .checklist-item.checked, .check-row.checked {
    background: rgba(34,197,94,.10) !important;
  }
  .toggle-yes-no, .yes-no { min-height: 52px; }
  .submit-fixed, .shift-submit {
    position: fixed !important;
    bottom: 0; left: 0; right: 0;
    width: 100% !important;
    min-height: 56px !important;
    z-index: 50;
    border-radius: 0 !important;
    background: var(--accent, #2D2A6E) !important;
    color: #fff !important;
  }
  .attendance-pct, .pct-large { font-size: 40px !important; font-weight: 800 !important; }

  /* ---------- 404 ---------- */
  .not-found, .nf-wrap { padding: 24px 16px !important; }
  .not-found .btn, .nf-wrap a.btn { width: 100% !important; }
}

/* iPhone Pro (393px) — extra tightening */
@media (max-width: 393px) {
  .hr-main, .bld-content, .ic-main, .ops-main, .main-content {
    padding: 14px 12px 80px !important;
  }
  .hero h1, .hero .greeting { font-size: 19px !important; }
  .kpi .value, .hr-kpi .value, .bld-kpi .value { font-size: 20px !important; }
}

/* ---------- Partners portal — remove side gutters on mobile ---------- */
@media (max-width: 430px) {
  body.is-auth, body { overflow-x: hidden; }
  .wrap, .dash, .av-body,
  .main, .page-body, .content, .container,
  [class*="wrapper"], [class*="layout"], [class*="inner"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  /* Keep a small inner gutter on actual cards/sections so content isn't flush */
  .dash > section, .dash > .card, .wrap > section {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}