/* ============================================================
   NexTrade Academy V5.3 — Mobile App Adaptation
   Loaded AFTER app.css. Desktop (>= 768px) remains unchanged.
   ============================================================ */

.mobile-tabbar,
.mobile-topbar-brand{display:none}

@media (max-width: 991.98px){
  .app-sidebar{
    width:min(86vw,330px);
    border-radius:0 22px 22px 0;
    overflow:hidden;
    padding-top:env(safe-area-inset-top,0);
  }
  .sidebar-backdrop{
    background:rgba(0,0,0,.42);
    -webkit-backdrop-filter:blur(5px);
    backdrop-filter:blur(5px);
  }
  .sidebar-brand{min-height:72px}
  .sidebar-nav{
    padding-bottom:calc(24px + env(safe-area-inset-bottom,0));
    -webkit-overflow-scrolling:touch;
  }
}

@media (max-width: 767.98px){
  html{
    background:var(--bg);
    -webkit-text-size-adjust:100%;
  }
  body{
    min-height:100dvh;
    overscroll-behavior-y:none;
    -webkit-tap-highlight-color:transparent;
  }
  body.app-body{
    background:var(--bg);
  }

  /* App shell */
  .app-shell,
  .app-main{
    min-height:100dvh;
  }
  .app-main{
    width:100%;
    margin-left:0;
    padding-bottom:calc(76px + env(safe-area-inset-bottom,0));
  }

  /* Compact native-style top bar */
  .app-topbar{
    position:sticky;
    top:0;
    height:calc(60px + env(safe-area-inset-top,0));
    padding:
      env(safe-area-inset-top,0)
      max(12px,env(safe-area-inset-right,0))
      0
      max(12px,env(safe-area-inset-left,0));
    background:color-mix(in srgb,var(--surface) 94%,transparent);
    -webkit-backdrop-filter:blur(18px) saturate(145%);
    backdrop-filter:blur(18px) saturate(145%);
    border-bottom:1px solid color-mix(in srgb,var(--border) 82%,transparent);
    z-index:1025;
  }
  .topbar-left,.topbar-actions{gap:7px;z-index:2}
  .mobile-topbar-brand{
    display:flex;
    position:absolute;
    left:50%;
    bottom:11px;
    transform:translateX(-50%);
    align-items:center;
    justify-content:center;
    width:118px;
    height:38px;
    overflow:hidden;
    z-index:1;
  }
  .mobile-topbar-brand img{
    display:block;
    width:108px;
    height:auto;
    mix-blend-mode:multiply;
  }
  html[data-theme="dark"] .mobile-topbar-brand img{
    filter:invert(1);
    mix-blend-mode:screen;
  }
  .app-topbar .icon-button{
    width:38px;
    height:38px;
    border-radius:11px;
  }
  .logout-button{
    height:38px;
    min-width:46px;
    padding:0 10px;
    border-radius:11px;
    font-size:.70rem;
  }

  /* Main content: app spacing */
  .app-content{
    max-width:none;
    padding:
      18px
      max(14px,env(safe-area-inset-right,0))
      calc(30px + env(safe-area-inset-bottom,0))
      max(14px,env(safe-area-inset-left,0));
  }
  .app-footer{display:none!important}

  /* Typography */
  .page-heading{
    margin-bottom:18px;
    gap:12px;
  }
  .page-heading h1,
  .course-detail-copy h1{
    margin:5px 0;
    font-size:1.65rem;
    line-height:1.08;
    letter-spacing:-.05em;
  }
  .page-heading p,
  .course-detail-copy>p{
    font-size:.83rem;
    line-height:1.55;
  }
  .eyebrow,.mini-label{
    font-size:.58rem;
    letter-spacing:.12em;
  }
  .section-heading{
    min-height:48px;
    align-items:center;
  }
  .section-heading h2{font-size:1rem}

  /* Cards */
  .app-panel,
  .catalog-card,
  .metric-card,
  .admin-kpi{
    border-radius:18px;
    box-shadow:none;
  }
  .panel-padding,
  .admin-overview,
  .form-panel{
    padding:17px;
  }

  /* Dashboard metric cards become horizontally swipeable like an app */
  .metric-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(154px,1fr));
    gap:10px;
    margin:0 -14px 18px 0;
    padding-right:14px;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
  }
  .metric-grid::-webkit-scrollbar{display:none}
  .metric-card{
    min-height:112px;
    padding:16px;
    gap:12px;
    scroll-snap-align:start;
  }
  .metric-icon{
    width:42px;
    height:42px;
    border-radius:13px;
  }
  .metric-card strong{font-size:1.45rem}

  /* Course cards */
  .catalog-grid{gap:14px}
  .catalog-card{overflow:hidden}
  .catalog-cover{min-height:164px;padding:17px}
  .catalog-body{padding:17px}
  .catalog-body h2{font-size:1rem}
  .catalog-body p{min-height:0}
  .catalog-meta{margin:13px 0}

  /* Forms: iOS avoids focus zoom when controls are >=16px */
  input,
  select,
  textarea,
  .form-control,
  .form-select,
  .admin-input,
  .compact-input{
    font-size:16px!important;
  }
  .form-control,
  .form-select,
  .admin-input,
  .compact-input{
    min-height:46px;
    border-radius:12px;
  }
  textarea.form-control,
  textarea.admin-input{min-height:112px}
  .primary-action,
  .secondary-action{
    min-height:48px;
    border-radius:12px;
  }
  .primary-action.compact{min-height:42px}

  /* Tables / wide interfaces stay usable by touch */
  .table-responsive,
  .admin-table-wrap,
  .calendar-scroll{
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .table-responsive::-webkit-scrollbar,
  .admin-table-wrap::-webkit-scrollbar,
  .calendar-scroll::-webkit-scrollbar{display:none}

  /* Live sessions */
  .live-grid-v5{gap:11px}
  .live-card,
  .live-card-v5{
    border-radius:17px;
  }
  .live-card-v5{
    padding:14px;
    grid-template-columns:54px minmax(0,1fr);
    gap:11px;
  }
  .live-date{
    width:54px;
    height:60px;
    border-radius:12px;
  }
  .live-action-v5{
    grid-column:1/-1;
    width:100%;
  }
  .live-action-v5 .primary-action,
  .live-action-v5 .secondary-action{width:100%}
  .join-hint{text-align:left}

  /* Profile/security */
  .profile-layout{gap:14px}
  .profile-summary-card{position:static}
  .security-actions-grid,
  .verification-method-box{gap:10px}
  .security-action-card,
  .twofa-setup-box{border-radius:15px}

  /* Lesson player */
  .learning-layout{gap:14px}
  .learning-sidebar{position:static}
  .lesson-navigation{gap:10px}
  .lesson-navigation a,
  .lesson-navigation button{min-height:48px}

  /* Mobile auth behaves more like an app screen */
  .auth-shell{min-height:100dvh}
  .auth-header{
    padding:
      calc(16px + env(safe-area-inset-top,0))
      max(18px,env(safe-area-inset-right,0))
      12px
      max(18px,env(safe-area-inset-left,0));
  }
  .brand-link-auth .brand-logo{width:168px}
  .auth-main{
    min-height:auto;
    padding:14px 14px calc(28px + env(safe-area-inset-bottom,0));
    align-items:flex-start;
  }
  .auth-card{
    width:100%;
    padding:24px 20px;
    border-radius:22px;
    box-shadow:none;
  }

  /* Bottom tab bar */
  .mobile-tabbar{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:1030;
    display:grid;
    grid-template-columns:repeat(5,1fr);
    min-height:calc(66px + env(safe-area-inset-bottom,0));
    padding:
      7px
      max(6px,env(safe-area-inset-right,0))
      env(safe-area-inset-bottom,0)
      max(6px,env(safe-area-inset-left,0));
    background:color-mix(in srgb,var(--surface) 95%,transparent);
    border-top:1px solid color-mix(in srgb,var(--border) 85%,transparent);
    -webkit-backdrop-filter:blur(20px) saturate(150%);
    backdrop-filter:blur(20px) saturate(150%);
    box-shadow:0 -8px 28px rgba(0,0,0,.045);
  }
  .mobile-tab{
    position:relative;
    min-width:0;
    min-height:52px;
    padding:5px 2px 4px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    border-radius:12px;
    color:var(--muted);
    font-size:.59rem;
    line-height:1;
    font-weight:650;
    -webkit-user-select:none;
    user-select:none;
  }
  .mobile-tab svg{
    width:21px;
    height:21px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.85;
    stroke-linecap:round;
    stroke-linejoin:round;
  }
  .mobile-tab.active{
    color:var(--text);
  }
  .mobile-tab.active::before{
    content:"";
    position:absolute;
    top:1px;
    width:22px;
    height:2px;
    border-radius:999px;
    background:var(--text);
  }
  .mobile-tab-live{
    width:29px;
    height:29px;
    display:grid;
    place-items:center;
    margin-top:-5px;
    border-radius:50%;
    background:var(--text);
    color:var(--surface);
  }
  .mobile-tab-live svg{width:18px;height:18px}
  .mobile-tab.active .mobile-tab-live{
    box-shadow:0 0 0 4px var(--soft);
  }

  /* Better tap targets */
  a,
  button,
  label,
  select{
    touch-action:manipulation;
  }
}

@media (max-width: 390px){
  .mobile-topbar-brand{width:100px}
  .mobile-topbar-brand img{width:96px}
  .logout-button{min-width:42px;padding:0 8px}
  .mobile-tab{font-size:.55rem}
  .mobile-tab svg{width:20px;height:20px}
  .app-content{padding-left:12px;padding-right:12px}
  .metric-grid{margin-right:-12px}
}

@media (display-mode: standalone) and (max-width: 767.98px){
  body.app-body{min-height:100dvh}
  .app-topbar{background:var(--surface)}
  .mobile-tabbar{background:var(--surface)}
}


/* V6 mobile additions */
@media(max-width:767.98px){
  .tool-feature-card{grid-template-columns:48px minmax(0,1fr) auto;padding:16px}
  .tool-feature-icon{width:48px;height:48px}
  .wallet-connected-row{align-items:start}
  .wallet-copy code{max-width:100%}
  .trading-kpi strong{font-size:1.08rem}
  .journal-layout{gap:12px}
  .certificate-sheet{padding:28px 18px}
}