/**
 * ============================================================
 *  GLENDER.IO — SHARED MOBILE & RESPONSIVE OVERRIDES
 *  assets/css/mobile.css
 *
 *  Loaded on ALL portals (admin, business, borrower, public).
 *  Standardised breakpoints: 1200px, 900px, 600px, 400px
 *
 *  This file ONLY contains responsive overrides — base styles
 *  remain in their portal-specific CSS files.
 * ============================================================
 */

/* ─────────────────────────────────────────────
   VIEWPORT HEIGHT FIX
   100vh includes mobile browser chrome (address bar).
   JS sets --vh = window.innerHeight * 0.01
   Use: height: calc(var(--vh, 1vh) * 100)
───────────────────────────────────────────── */
:root { --vh: 1vh; }

/* ─────────────────────────────────────────────
   BASE — ALL VIEWPORTS
───────────────────────────────────────────── */
html, body {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

/* ─────────────────────────────────────────────
   TABLET (max 1200px)
───────────────────────────────────────────── */
@media (max-width: 1200px) {
  /* Stat grids: 4→2, 6→3 */
  .grid-4, .grid-dash { grid-template-columns: repeat(2, 1fr) !important; }
  .cases-stats, .stats-row { grid-template-columns: repeat(3, 1fr) !important; }
  .bd-stats, .bk-stats { grid-template-columns: repeat(3, 1fr) !important; }
}

/* ─────────────────────────────────────────────
   TABLET PORTRAIT / LARGE PHONE (max 900px)
───────────────────────────────────────────── */
@media (max-width: 900px) {
  /* ── Touch targets ── */
  button, [type="button"], a.btn, .btn, .sb-nav-item,
  select, .bk-btn, .bo-btn {
    min-height: 44px;
  }
  input, textarea, select {
    font-size: 16px !important; /* prevents iOS zoom on focus */
  }

  /* ── Grids → 2 columns ── */
  .grid-4, .grid-3, .fg-3, .grid-dash, .grid-charts {
    grid-template-columns: 1fr 1fr !important;
  }
  .cases-stats, .stats-row, .bd-stats, .bk-stats {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  .fg { grid-template-columns: 1fr 1fr !important; }
  .lt-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .mode-grid { grid-template-columns: 1fr 1fr !important; }
  .dkr { grid-template-columns: 1fr 1fr !important; } /* drawer KPI row */
  .eg { grid-template-columns: 1fr 1fr !important; } /* broker expand grid */

  /* ── Drawers → full screen ── */
  .cd-drawer, .bz-drawer, .fb-drawer {
    width: 100vw !important;
    max-width: 100vw !important;
    height: calc(var(--vh, 1vh) * 100) !important;
    max-height: none !important;
    top: 0 !important;
    right: -100vw !important;
    border-radius: 0 !important;
  }
  .cd-drawer.open, .bz-drawer.open, .fb-drawer.open {
    right: 0 !important;
  }

  /* ── AI Panel → full width ── */
  .ai-window {
    width: 100vw !important;
    max-width: 100vw !important;
    right: -100vw !important;
    border-radius: 0 !important;
  }
  .ai-window.open { right: 0 !important; }
  .ai-panel-trigger { display: none !important; }

  /* ── Tables → horizontal scroll ── */
  .table-wrap, .tcard, .table-card, .bk-table-wrap,
  .bo-matrix-wrap, .adm-table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  table {
    min-width: 600px;
  }

  /* ── Header actions → wrap ── */
  .page-header__actions, .ph__ac, .bk-topbar__actions {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  /* ── Forms → stack on tablet ── */
  .ef-row { grid-template-columns: 1fr !important; }

  /* ── Modals → near-full ── */
  .csv-modal, .bz-md {
    width: 95vw !important;
    max-width: 95vw !important;
  }
}

/* ─────────────────────────────────────────────
   PHONE (max 600px)
───────────────────────────────────────────── */
@media (max-width: 600px) {
  /* ── All grids → single column ── */
  .grid-4, .grid-3, .grid-2, .fg, .fg-3,
  .grid-dash, .grid-charts, .dkr, .eg {
    grid-template-columns: 1fr !important;
  }
  .cases-stats, .stats-row, .bd-stats, .bk-stats {
    grid-template-columns: 1fr !important;
  }
  .mode-grid { grid-template-columns: 1fr !important; }
  .lt-grid { grid-template-columns: 1fr 1fr !important; } /* loan cards stay 2-col */

  /* ── Page padding ── */
  .page-header, .ph, .bk-topbar {
    padding: 16px 16px 0 !important;
  }
  .form-card, .bo-card {
    margin: 12px 12px !important;
    padding: 18px 14px !important;
  }

  /* ── Stat cards: tighter padding ── */
  .stat, .bd-stat, .bk-stat {
    padding: 12px 14px !important;
  }

  /* ── Typography scale down ── */
  .page-header__title, .ph__ti, .bk-topbar__title {
    font-size: 20px !important;
  }

  /* ── Buttons → full width on phone ── */
  .page-header__actions, .ph__ac, .bk-topbar__actions {
    width: 100%;
  }
  .page-header__actions > button,
  .page-header__actions > .btn,
  .ph__ac > button,
  .bk-topbar__actions > .bk-btn {
    flex: 1;
    min-width: 0;
    font-size: 11px !important;
    padding: 0 10px !important;
  }

  /* ── Modals → full screen ── */
  .csv-modal, .bz-md {
    width: 100vw !important;
    max-width: 100vw !important;
    max-height: calc(var(--vh, 1vh) * 100) !important;
    border-radius: 0 !important;
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
  }
  .csv-modal.open {
    transform: none !important;
  }

  /* ── Hide non-essential columns on phone ── */
  .col-contact, .col-apptype, .col-referred { display: none !important; }

  /* ── Filter bars → stack ── */
  .filter-bar, .fbar {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .filter-bar__left, .fbar__l {
    width: 100% !important;
  }
  .filter-bar__right, .fbar__r {
    width: 100% !important;
    justify-content: stretch !important;
  }
}

/* ─────────────────────────────────────────────
   SMALL PHONE (max 400px)
───────────────────────────────────────────── */
@media (max-width: 400px) {
  .page-header__title, .ph__ti, .bk-topbar__title {
    font-size: 18px !important;
  }
  .stat__val, .bd-stat__val, .bk-stat__val {
    font-size: 20px !important;
  }
  .lt-grid { grid-template-columns: 1fr !important; }
}

/* ─────────────────────────────────────────────
   SAFE AREA INSETS (notched devices)
───────────────────────────────────────────── */
@supports (padding: env(safe-area-inset-bottom)) {
  .db-sidebar, .shell .db-sidebar, .bz-drawer, .cd-drawer {
    padding-bottom: env(safe-area-inset-bottom);
  }
  .wizard-footer-bar {
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
  }
}

/* ─────────────────────────────────────────────
   LANDSCAPE PHONE
───────────────────────────────────────────── */
@media (max-height: 500px) and (orientation: landscape) {
  .stat, .bd-stat, .bk-stat {
    padding: 8px 12px !important;
  }
  .cases-stats, .stats-row, .bd-stats, .bk-stats {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}