/* ============================================================
   EquityMeb — Mobile / Tablet Compatibility Layer
   Loaded AFTER app.css so these rules win on small screens.
   Covers: iPhone (320–428px), Android, iPad (768–1024px), tablet.
   ============================================================ */

/* iOS Safari fixes — viewport height bug + tap highlight + touch sizing */
html { -webkit-text-size-adjust: 100%; }
body { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
* { -webkit-overflow-scrolling: touch; }

/* Prevent zoom-on-input on iOS — needs font-size >= 16px on inputs */
@media (max-width: 768px) {
  input, select, textarea {
    font-size: 16px !important;
  }
}

/* ============ TABLET (1024px and below) ============ */
@media (max-width: 1024px) {
  .container { padding: 0 18px; }
  .nav-inner { gap: 14px; }
}

/* ============ TABLET PORTRAIT / LARGE PHONE (900px down) ============ */
@media (max-width: 900px) {
  /* DASHBOARD: sidebar becomes drawer */
  .layout { grid-template-columns: 1fr !important; }
  .sidebar {
    position: fixed !important;
    left: -300px;
    top: 0;
    width: 280px !important;
    max-width: 85vw;
    height: 100vh;
    height: 100dvh; /* iOS Safari dynamic viewport */
    transition: left 0.25s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 50 !important;
    box-shadow: 8px 0 32px rgba(0,0,0,0.5);
  }
  .sidebar.open { left: 0 !important; }
  .sidebar-backdrop.show { display: block !important; }
  .sidebar-close { display: flex !important; }
  .menu-trigger { display: inline-flex !important; }

  /* Make dashboard cards stack vertically */
  .balance-grid { grid-template-columns: 1fr !important; gap: 14px; }
  .indicators-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 10px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .row2, .row3 { grid-template-columns: 1fr !important; }
  .topbar { padding: 12px 14px !important; }
  .topbar h1 { font-size: 16px !important; }
  .content { padding: 14px !important; }
  .card { padding: 16px !important; }
  .user-chip .name { display: none !important; }
}

/* ============ MEDIUM PHONE (640px down) — LANDING PAGE TOO ============ */
@media (max-width: 640px) {
  /* LANDING PAGE: hide nav links, show hamburger */
  .nav-links { display: none !important; }
  .menu-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(16,185,129, 0.08);
    font-size: 24px;
    color: var(--blue, #0066ff);
    border: 1px solid rgba(16,185,129, 0.15);
    cursor: pointer;
  }
  .menu-toggle:active { background: rgba(16,185,129, 0.18); }
  .nav-cta .btn-ghost { display: none !important; }
  .nav-inner { padding: 12px 0; }
  .hero { padding: 50px 0 30px !important; }
  .hero h1 { font-size: clamp(32px, 9vw, 48px) !important; }
  .hero p.lede { font-size: 16px !important; }
  .hero-grid { gap: 30px; }
  .hero-visual { height: 360px !important; }
  .hero-card.main { padding: 16px !important; }
  .float-card { display: none; } /* hide floats on small phones */
  .markets-grid { grid-template-columns: 1fr !important; }
  .plans-grid { grid-template-columns: 1fr !important; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .test-grid { grid-template-columns: 1fr !important; }
  .security-grid { grid-template-columns: 1fr !important; }
  .feature-row, .feature-row.reverse { grid-template-columns: 1fr !important; direction: ltr !important; gap: 28px; }
  .section-head h2 { font-size: 28px !important; }
  section { padding: 50px 0 !important; }
  footer .container { grid-template-columns: 1fr !important; }
  .cta-banner { padding: 32px 20px !important; }
  .cta-banner h3 { font-size: 24px !important; }
  .ticker-strip { padding: 10px 0 !important; }

  /* DASHBOARD smaller phone tuning */
  .indicators-grid { grid-template-columns: 1fr 1fr !important; }
  .stats-grid { grid-template-columns: 1fr 1fr !important; }
  .balance-card .val { font-size: 28px !important; }
  .welcome-banner { padding: 14px !important; }
  .welcome-banner h2 { font-size: 16px !important; line-height: 1.4; }
  .topbar h1 { font-size: 15px !important; }

  /* TABLES: scroll horizontally instead of overflowing */
  .card table, table.t { display: block; overflow-x: auto; white-space: nowrap; }
  table.t thead th, table.t tbody td { padding: 8px 10px !important; font-size: 12.5px !important; }

  /* Forms */
  .fld input, .fld select, .fld textarea { padding: 10px 12px !important; }

  /* MODALS: make full-width on phone */
  .x-modal > form, .x-modal > div {
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 14px 14px 0 0 !important;
    max-height: 90vh !important;
    overflow-y: auto;
  }
  .x-modal {
    align-items: flex-end !important;
    padding: 0 !important;
  }

  /* Auth modal (login/register on landing) */
  .auth-modal {
    grid-template-columns: 1fr !important;
    border-radius: 16px !important;
    height: auto !important;
    max-height: 96vh !important;
  }
  .auth-side { display: none !important; }
  .auth-main { padding: 24px 18px !important; }
}

/* ============ SMALL PHONE (380px down) — iPhone SE ============ */
@media (max-width: 380px) {
  .container { padding: 0 14px; }
  .brand { font-size: 18px !important; }
  .brand .logomark { width: 32px !important; height: 32px !important; }
  .hero h1 { font-size: 28px !important; }
  .btn-lg { padding: 12px 18px !important; font-size: 14px !important; }
  .section-head h2 { font-size: 24px !important; }
  .balance-card .val { font-size: 22px !important; }
  .indicator .val { font-size: 16px !important; }
  .indicator .ring { width: 40px !important; height: 40px !important; font-size: 16px !important; }
  .menu-toggle { width: 40px; height: 40px; font-size: 22px; }
}

/* ============ LANDSCAPE PHONE — short height fixes ============ */
@media (max-height: 500px) and (orientation: landscape) {
  .hero { padding: 30px 0 !important; min-height: auto !important; }
  .hero-visual { height: 280px !important; }
  .auth-modal { max-height: 96vh !important; }
}

/* ============ TOUCH TARGETS — Apple/Google guidelines ============ */
@media (pointer: coarse) {
  .btn, .nav-link, .bs-btn, button, [role="button"], a.card, a.market-card {
    min-height: 44px;
  }
  .fld input, .fld select, .fld textarea { min-height: 44px; }
  .menu-trigger, .menu-toggle, .sidebar-close, .auth-close,
  .icon-btn, #theme-toggle, .toggle-eye, .field .toggle-eye {
    min-width: 44px;
    min-height: 44px;
  }

  /* Checkboxes and radios render ~18px, well under the 44px touch guideline.
     Grow the hit area with padding on the label rather than scaling the box,
     so the control keeps its size but the tappable region is comfortable. */
  .checkbox, label.chk, .switch { min-height: 44px; display: inline-flex; align-items: center; }
  .checkbox input[type="checkbox"], .checkbox input[type="radio"] { margin: 13px 8px 13px 0; }
  .switch { min-width: 46px; }

  /* Inline text links in dense lists get a little breathing room */
  .card-head a, .link-more { padding: 6px 0; display: inline-flex; align-items: center; }
}

/* ============ SCROLL-LOCK when drawer/modal open ============ */
body.drawer-open, body.modal-open { overflow: hidden; touch-action: none; }

/* ============ FIX: iOS 100vh bug for full-screen drawer ============ */
.sidebar {
  height: 100vh;
  height: 100dvh;
}

/* ============ HORIZONTAL SCROLL CONTAINERS on touch ============ */
.table-wrap, .markets-grid, .indicators-grid {
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

/* ============ ADDITIONAL iOS / ANDROID HARDENING ============ */

/* prevent iOS from zooming on input focus */
@media (max-width:768px){
  input, select, textarea, button { font-size: 16px !important; }
}

/* hamburger button — make it impossible to miss on tablets/phones */
@media (max-width:980px){
  .menu-trigger, .menu-toggle{
    display: inline-flex !important;
    width: 44px !important;
    height: 44px !important;
    /* token-driven so it follows the theme — a hard-coded #fff glyph on this
       pale wash is invisible in light mode */
    background: var(--amber-soft, rgba(16,185,129,.15)) !important;
    border: 1px solid var(--line-strong, rgba(16,185,129,.3)) !important;
    border-radius: 10px !important;
    color: var(--ink-strong, #fff) !important;
    font-size: 22px !important;
    align-items: center !important;
    justify-content: center !important;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    cursor: pointer;
  }
  .menu-trigger:active, .menu-toggle:active{
    transform: scale(0.95);
    background: var(--amber-soft, rgba(16,185,129,.30)) !important;
    filter: brightness(.94);
  }
}

/* Ensure ALL dashboard pages stack on tablets+ */
@media (max-width:1024px){
  .balance-grid{grid-template-columns:1fr !important;}
}

/* Trade-specific cleanup */
@media (max-width:900px){
  [id="trade-grid"]{grid-template-columns:1fr !important;}
}

/* Modals — full width slide-up on phones */
@media (max-width:640px){
  .x-modal{align-items:flex-end !important;padding:0 !important;}
  .x-modal form, .x-modal > div{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 18px 18px 0 0 !important;
    max-height: 92vh !important;
  }
}

/* ============ CRITICAL MOBILE DASHBOARD FIXES ============ */
/* Safety net: if app.css is slow/blocked, the shell still renders on-theme.
   Scoped to body.app (set by includes/header.php) so the light marketing
   pages — index.html, login.html, register.html — are never forced dark.
   Colours come from the app.css tokens so they track the palette. */
@media (max-width:980px){
  body.app{
    background:var(--bg,#0A2540) !important;
    color:var(--ink,#E8EEF6) !important;
  }
  body.app .main, body.app .content{
    background:transparent !important;
  }
  body.app .topbar{
    background:rgba(18,51,79,.95) !important;
    color:var(--ink-strong,#fff) !important;
    border-bottom:1px solid var(--line,rgba(200,220,245,.14)) !important;
  }
  body.app .topbar h1{color:var(--ink-strong,#fff) !important;font-size:17px !important;}
  body.app .welcome-banner{
    background:linear-gradient(135deg,rgba(16,185,129,.13),rgba(8,127,91,.05)) !important;
    border:1px solid var(--line-strong,rgba(16,185,129,.22)) !important;
    color:var(--ink-strong,#fff) !important;
  }
  body.app .welcome-banner h2{color:var(--ink-strong,#fff) !important;}

  /* admin console runs the cool palette — keep the mobile safety net in step
     instead of forcing the warm dashboard colours onto it */
  body.app.admin .topbar{background:rgba(27,42,87,.95) !important}
  body.app.admin .welcome-banner{
    background:linear-gradient(135deg,rgba(99,102,241,.13),rgba(14,155,184,.05)) !important;
    border:1px solid rgba(99,102,241,.28) !important;
  }
  body.app .balance-card, body.app .indicator, body.app .card{
    background:linear-gradient(180deg,var(--panel,#2d2013) 0%,var(--panel-2,#392a19) 100%) !important;
    color:var(--ink,#E8EEF6) !important;
    border:1px solid var(--line,rgba(200,220,245,.14)) !important;
  }
  body.app .balance-card .val, body.app .indicator .val{color:var(--ink-strong,#fff) !important;}
  body.app .balance-card .lbl, body.app .indicator .sub{color:var(--ink-muted,#93A4BC) !important;}
  body.app .card-title{color:var(--ink-strong,#fff) !important;}

  /* Ensure body can ALWAYS scroll on mobile (unless drawer/modal open) */
  body:not(.drawer-open):not(.modal-open){
    overflow-y:auto !important;
    touch-action:auto !important;
    height:auto !important;
    min-height:100vh;
  }
}

/* ============ FIX MENU BUTTON CLICK ON iOS ============ */
.menu-trigger, .menu-toggle{
  -webkit-appearance:none;
  appearance:none;
  -webkit-tap-highlight-color:rgba(16,185,129,.3);
  user-select:none;
  -webkit-user-select:none;
}

/* ============ ENSURE SCROLLABILITY ============ */
html, body{
  height:auto !important;
  min-height:100vh;
  overflow-x:hidden;
}
body{
  overflow-y:auto !important;
}
.main{
  overflow-y:visible !important;
}
.content{
  overflow:visible !important;
  padding-bottom:40px;
}

/* Sticky topbar should not block scroll */
.topbar{
  position:sticky;
  top:0;
  z-index:10;
}

/* ============ AUTH MODAL — FULL-SCREEN ON PHONE WITH PROPER SCROLL ============ */
@media (max-width:640px){
  .auth-backdrop{
    padding:0 !important;
    align-items:stretch !important;
    justify-content:stretch !important;
  }
  .auth-modal{
    width:100% !important;
    max-width:100vw !important;
    height:100vh !important;
    height:100dvh !important;
    max-height:100vh !important;
    max-height:100dvh !important;
    border-radius:0 !important;
    margin:0 !important;
    grid-template-columns:1fr !important;
    transform:none !important;
  }
  .auth-side{display:none !important;}
  .auth-main{
    height:100vh !important;
    height:100dvh !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch !important;
    padding:24px 18px 60px !important;
  }
  .auth-close{
    position:fixed !important;
    top:16px !important;
    right:16px !important;
    z-index:200 !important;
    background:rgba(0,0,0,.8) !important;
    color:#fff !important;
  }
  .auth-tabs{margin-top:24px !important;}
  /* Make fields easier to tap */
  .fld{margin-bottom:16px !important;}
  .fld input, .fld select{
    min-height:48px !important;
    font-size:16px !important;
    padding:12px 14px 12px 40px !important;
  }
  .fld .ic{top:34px !important;}
  /* Gender radio buttons */
  .fld label.chk{
    min-height:44px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }
  /* Submit button always visible at bottom */
  .auth-submit{
    width:100% !important;
    padding:14px !important;
    font-size:15px !important;
    margin-top:8px !important;
  }
}

/* ============ STANDALONE register.html / login.html PHONE FIX ============ */
@media (max-width:640px){
  /* These pages use .shell grid layout */
  .shell{
    grid-template-columns:1fr !important;
    min-height:auto !important;
  }
  .left, .right{padding:24px 18px !important;}
  /* Hide the SHOWCASE column, identified by .auth-aside.
     A bare `.right{display:none}` used to be here — but login.php and
     register.php are mirrored, so on register.php that hid the sign-up FORM
     and the page came up blank on every phone. */
  .auth-aside{display:none !important;}
  .form-card{max-width:100% !important;}
  .field input, .field select{
    font-size:16px !important;
    min-height:48px !important;
  }
  .row-grid{grid-template-columns:1fr !important;}
}

/* ============ TABLES — HORIZONTAL SCROLL ON MOBILE WITH HINT ============ */
@media (max-width:980px){
  /* Wrap all dashboard tables in a scrollable container */
  .card table, .card .t, table.t{
    display:block;
    width:100% !important;
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch !important;
    white-space:nowrap;
    /* Visual scroll hint — fading gradient on right edge */
    background:
      linear-gradient(to right, transparent 30%, rgba(52,211,153,.04)),
      linear-gradient(to left,  transparent 30%, rgba(52,211,153,.04));
    background-attachment:local,local;
    border-radius:8px;
  }
  table.t thead, table.t tbody, table.t tr{display:table;width:max-content;min-width:100%;table-layout:auto}
  table.t thead th, table.t tbody td{
    padding:10px 14px !important;
    white-space:nowrap;
    font-size:13px;
  }
  /* Scrollbar styling */
  .card table::-webkit-scrollbar, table.t::-webkit-scrollbar{height:6px}
  .card table::-webkit-scrollbar-thumb, table.t::-webkit-scrollbar-thumb{
    background:rgba(52,211,153,.4);
    border-radius:3px;
  }
}

/* Visual hint — show user can swipe right */
@media (max-width:980px){
  .card:has(>table.t)::after, .card:has(>table)::after{
    content:"← swipe →";
    display:block;
    text-align:center;
    font-size:11px;
    color:var(--ink-muted);
    padding:6px 0 0;
    opacity:.7;
  }
}