/* ============================================================
   Tadfeen Trust — mobile app experience
   Makes the site feel like a native app on phones: a bottom tab
   bar, safe-area handling for notches, standalone (installed)
   tweaks, and better proportions for small screens.
   Loaded on every app page; everything here is scoped to phones
   (max-width:920px) or to the installed/standalone display mode.
   ============================================================ */

/* ---- Bottom tab bar: hidden on desktop, shown on phones ---- */
.mtab{display:none}

@media (max-width:920px){
  .mtab{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:120;
    background:#ffffff; border-top:1px solid #e7e2d6;
    padding:6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
    box-shadow:0 -6px 20px rgba(9,26,19,.08);
    justify-content:space-around; align-items:stretch;
  }
  :root[data-theme="dark"] .mtab{ background:#0f1f18; border-top-color:#1e2f26; }

  .mtab a, .mtab button{
    flex:1 1 0; min-width:0; background:none; border:0; cursor:pointer; font:inherit;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
    padding:6px 2px; color:#6a756e; text-decoration:none; border-radius:12px;
    -webkit-tap-highlight-color:transparent;
  }
  .mtab a svg, .mtab button svg{ width:23px; height:23px; flex:0 0 23px; }
  /* new-post count bubble over the Community tab icon */
  .mtab .mtab-ic{ position:relative; display:inline-flex; }
  .mtab .mtab-dot{ position:absolute; top:-6px; left:14px; min-width:15px; height:15px;
    padding:0 3px; border-radius:8px; background:#d64545; color:#fff; font-size:9.5px;
    font-weight:700; line-height:15px; text-align:center; box-shadow:0 0 0 2px #fff; }
  :root[data-theme="dark"] .mtab .mtab-dot{ box-shadow:0 0 0 2px #0f1f18; }
  .mtab a span, .mtab button span{
    font-size:10.5px; font-weight:600; line-height:1; letter-spacing:.01em;
    max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .mtab a.active{ color:var(--green-600,#1a6b4d); }
  .mtab a.active svg{ color:var(--green-600,#1a6b4d); }

  /* keep page content clear of the bar */
  .app-main{ padding-bottom:calc(64px + env(safe-area-inset-bottom, 0px)); }

  /* the desktop sidebar is a slide-in drawer on phones; give it a
     comfortable app width and keep it FULLY off-screen when closed
     (translate by its own width, so no green strip peeks in). */
  .app-sidebar{ width:82%; max-width:320px; left:0; transform:translateX(-102%);
    transition:transform .25s ease; }
  .app-sidebar.open{ left:0; transform:translateX(0); }
}

/* ---- Installed / standalone app: reclaim the notch + status bar ---- */
@media (display-mode: standalone){
  .app-topbar{ padding-top:calc(16px + env(safe-area-inset-top, 0px)); }
  .site-header{ padding-top:env(safe-area-inset-top, 0px); }
  /* the burger + tab bar are the navigation in the installed app */
}

/* ============================================================
   Better proportions on phones
   ============================================================ */
@media (max-width:920px){
  /* comfortable page gutters and rhythm */
  .app-content{ padding:14px 14px calc(70px + env(safe-area-inset-bottom,0px)); }
  .app-topbar{ position:sticky; top:0; z-index:60; background:var(--cream,#f6f2e9);
    padding:12px 14px; gap:10px; display:flex; align-items:center; flex-wrap:nowrap; }
  .topbar-left{ flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:10px; }
  .topbar-title{ min-width:0; }
  .app-topbar h1{ font-size:19px; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .topbar-title p, .crumb{ display:none; }     /* subtitle & breadcrumb are noise on a phone */
  .topbar-actions{ flex:0 0 auto; gap:8px; margin-left:auto; }
  /* the bottom tab bar's Menu button is the drawer opener on phones,
     so the top burger is redundant — hide it and give the title room.
     (The Menu button still triggers it programmatically.) */
  .app-burger{ display:none; }
  /* compact the account chip to just the avatar on small screens */
  .topbar-user > .tu-role, .topbar-user > .tu-chev{ display:none; }
  .topbar-user{ padding:3px !important; }

  /* stat tiles: clean 2-up grid with even ratios */
  .stat-row, .chub-stats, .cm-stats{ grid-template-columns:repeat(2,1fr) !important; gap:10px !important; }
  .chub-stat{ padding:13px 13px; }
  .chub-stat b{ font-size:19px; }

  /* action button grids stack to two even columns */
  .chub-ctas, .cbtn-grid, .share-row{ grid-template-columns:repeat(2,1fr) !important; gap:10px; }

  /* cards go full-width with a consistent radius */
  .card, .panel, .alp-panel, .chub-panel, .cpanel{ border-radius:16px; }
  .cards-bottom, .card-row, .paycard-grid, .mcb-grid{ grid-template-columns:1fr !important; gap:14px; }

  /* sub-tab bars scroll horizontally instead of wrapping into a wall */
  .chtabs{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .chtabs::-webkit-scrollbar{ display:none; }

  /* wide tables scroll inside their own track, never push the page */
  .alp-table-wrap, .table-wrap, .tbl-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  table{ min-width:520px; }

  /* touch targets: never smaller than a fingertip */
  .btn, .alp-menu-btn, .row-more, .topbar-icons button, .mini-select, .cbtn{ min-height:42px; }

  /* member card scales to the screen width, keeps its ratio */
  .mcard{ max-width:100%; }
}

@media (max-width:560px){
  /* Dashboard summary cards stay a compact 2-up grid (a "4x4" wall of tiles)
     rather than one big card per row. The Member Card Preview and other full
     panels keep their own full width (they are .panel, not .stat-row). */
  .stat-row{ grid-template-columns:repeat(2,1fr) !important; gap:12px !important; }
  .scard{ padding:14px 13px !important; }
  .scard-top{ margin-bottom:9px; gap:8px; }
  .scard-ico{ width:32px; height:32px; }
  .scard-ico svg{ width:16px; height:16px; }
  .scard-title{ font-size:11.5px; line-height:1.25; }
  .scard-value{ font-size:16px; letter-spacing:-.2px; }
  .scard-value.sm{ font-size:14.5px; }
  .scard-sub{ font-size:10.5px; margin-top:3px; }
  .scard-link{ font-size:11.5px; margin-top:8px; }
  .app-topbar h1{ font-size:18px; }
}

/* ============================================================
   Overlap & overflow hardening on phones
   Wide tables, modals and grid children were pushing the page
   sideways (which reads as overlapping text/cards). This keeps
   everything inside the screen and lets wide tables scroll in
   their own track.
   ============================================================ */
@media (max-width:920px){
  html, body{ max-width:100%; overflow-x:hidden; }

  /* flex/grid children must be allowed to shrink below their content,
     otherwise a wide child forces the whole row/page wider */
  .app-content *:not(svg):not(img):not(canvas){ min-width:0; }

  /* panels never exceed the screen; tables scroll inside them */
  .card, .panel, .cpanel, .pcard, .chub-panel, .alp-panel,
  .alp-wrap, .cp-block, .cm-panel{ max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .table-wrap, .alp-table-wrap, .ctable-wrap, .tbl-wrap{ max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }

  /* data tables stay readable and scroll; small layout tables just fit */
  table{ min-width:0; }
  table.ctable, table.pay-table, table.alp-table, table.cp-table, .alp-table table{ min-width:480px; }

  /* create/edit modals fit the screen */
  .modal-overlay{ max-width:100vw; overflow:auto; padding:14px; }
  .modal, .cmodal-box{ max-width:calc(100vw - 24px) !important; width:auto !important; }

  /* headers that put a title next to an action button wrap instead of colliding */
  .pcard-head, .cp-head, .chub-head, .alp-head, .sec-head, .panel-head{ flex-wrap:wrap; gap:8px; }
}

/* ============================================================
   Member card — comfortable, no overlap on phones
   ============================================================ */
@media (max-width:600px){
  .mcard{ aspect-ratio:auto; }
  .mcard-front{ padding:18px 18px; }
  /* decorative art was overlapping the text — calm it down / drop it */
  .mcard-front .mosque{ display:none; }
  .mcard-front .arabesque{ opacity:.22; width:58%; right:-10%; }

  /* stack photo above the details so each field gets the full width */
  .mcf-body{ flex-direction:column; gap:12px; }
  .mcf-photo{ width:66px; height:66px; flex:0 0 66px; }
  .mcf-name h3{ font-size:19px; }
  .mcf-details, .mcf-details.two{ grid-template-columns:1fr 1fr; gap:9px 16px; margin-top:6px; }
  .mcf-details .d b{ font-size:12.5px; }
  .mcf-barcode{ align-self:stretch; width:100%; margin-top:14px; }
  .mcf-barcode svg{ height:40px; }

  /* back of the card stacks cleanly */
  .mcb-inner{ padding:16px 16px; }
  .mcb-grid{ grid-template-columns:1fr !important; gap:16px; }
  .mcb-qr{ width:100%; flex:none; }
  .mcb-personal{ gap:8px; }
  .mcb-foot{ grid-template-columns:1fr !important; gap:8px; text-align:left; }
  .mcb-foot .mid, .mcb-foot .right{ text-align:left; }
}