/* ===========================================================
   Universal Markets — responsive layer
   Breakpoints:
     - <  640px : phone
     - <  900px : large phone / small tablet
     - < 1100px : tablet / small laptop
   =========================================================== */

/* ---------- mobile menu toggle (desktop default: hidden) ---------- */
.mobile-menu-toggle{
  display:none;
  background:transparent;border:1px solid var(--border);
  color:var(--text);padding:8px;border-radius:8px;cursor:pointer;
}
.mobile-menu-toggle:hover{background:rgba(255,255,255,0.04)}

/* ============ < 1100px: tablet + small-laptop ============ */
@media (max-width: 1100px) {
  .container{padding:0 18px}

  /* Public hero: drop the floating coin illustration, stretch text */
  .hero{padding:48px 18px 56px}
  .hero h1{font-size:42px}
  .hero-coins{position:relative;width:100%;height:200px;margin-top:18px}

  /* Dashboard KPIs: 2 columns */
  .kpi-grid{grid-template-columns:repeat(2, 1fr)}

  /* Trending grid: 2 columns */
  .trending-grid{grid-template-columns:repeat(2, 1fr)}

  /* Trade page: stack left market list on top, hide it on tablets, show via toggle */
  .trade-shell{
    grid-template-columns:1fr 320px;
    height:auto;min-height:0;
  }
  .trade-side{display:none}

  /* Admin shell */
  .admin-shell{grid-template-columns:200px 1fr}
}

/* ============ < 900px: small tablet ============ */
@media (max-width: 900px) {
  .grid-2, .grid-3, .grid-4{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}

  /* Public nav */
  .nav-public{padding:12px 16px;flex-wrap:wrap;gap:8px}
  .nav-public > div:nth-child(2){display:none}  /* hide center nav links on mobile */

  /* App nav: collapse */
  .app-nav{
    padding:10px 14px;flex-wrap:wrap;gap:8px;
    position:relative;
  }
  .app-nav .brand img{height:28px}
  .mobile-menu-toggle{display:flex;align-items:center;justify-content:center;margin-left:auto;order:2}
  .app-nav-links{
    order:3;width:100%;display:none;flex-direction:column;gap:0;
    background:#06090b;border-top:1px solid var(--border);
    margin:8px -14px -10px;padding:8px 0;
  }
  .app-nav-links.open{display:flex}
  .app-nav-links a{
    border-radius:0;padding:12px 16px;width:100%;
    border-top:1px solid var(--border);
  }
  .app-nav-links a:first-child{border-top:none}
  .search-wrap{order:4;width:100%;max-width:none;display:none}
  .search-wrap.open{display:block}
  .app-nav .balance-chip{order:1;flex-shrink:0;padding:6px 10px;font-size:13px}
  .app-nav .profile-link, .app-nav .logout-link{order:1;width:32px;height:32px}

  /* Trade page: stack right panel below chart */
  .trade-shell{grid-template-columns:1fr;height:auto}
  .trade-center{min-height:520px}
  .trade-right{border-left:none;border-top:1px solid var(--border)}
  .trade-mobile-markets{display:inline-flex !important}

  /* Trade header: wrap meta */
  .trade-header{flex-wrap:wrap;gap:8px}
  .trade-header .pair-meta{margin-left:0;flex-wrap:wrap;gap:14px}
  .trade-header .pair-price{font-size:18px}

  /* Admin: collapse sidebar */
  .admin-shell{grid-template-columns:1fr}
  .admin-side{
    position:relative;height:auto;width:100%;
    display:flex;flex-wrap:wrap;gap:0;padding:10px;
    border-right:none;border-bottom:1px solid var(--border);
  }
  .admin-side .brand{
    width:100%;border-bottom:1px solid var(--border);
    padding:0 8px 10px;margin-bottom:8px;
  }
  .admin-side a{flex:1 0 auto;padding:8px 12px;font-size:12.5px;border-radius:6px}
  .admin-side a.active{border-left:none;background:var(--green-soft)}

  /* Tables: horizontal scroll */
  .admin-card, .profile-card{overflow-x:auto}
  .adm-tbl, .price-table{min-width:560px}

  /* Section spacing */
  .section{padding:48px 0}
  .section-title{font-size:28px}
  .hero h1{font-size:32px}

  /* Deposit / Withdraw stack */
  .dw-grid{grid-template-columns:1fr}

  /* Bot settings 3-up -> 1 */
  .bot-settings-grid{grid-template-columns:1fr !important}

  /* Profile page detail rows: wrap */
  .detail-row{flex-direction:column;align-items:flex-start;gap:4px}

  /* Auth card */
  .auth-card{padding:28px 22px}
  .field-row{grid-template-columns:1fr}
  .phone-row{grid-template-columns:1fr}

  /* Dashboard dash-head: stack */
  .dash-head{flex-direction:column;align-items:stretch}
  .dash-head .actions{justify-content:flex-end}
}

/* ============ < 640px: phone ============ */
@media (max-width: 640px) {
  .container{padding:0 14px}
  .app-main{padding:16px}

  /* Public nav: compact */
  .nav-public{padding:10px 12px}
  .brand img{height:30px}
  .brand-name{font-size:12px}
  .ticker-track{font-size:11.5px;gap:20px}

  /* Hero */
  .hero{padding:36px 16px 40px}
  .hero h1{font-size:26px;line-height:1.15}
  .hero p.lead{font-size:15px}
  .hero-cta{flex-direction:column;width:100%}
  .hero-cta .btn{justify-content:center}

  /* KPI grid: 1 column on small phones */
  .kpi-grid{grid-template-columns:1fr}
  .kpi .v{font-size:20px}

  /* Tick strip: smaller */
  .tick-strip{gap:16px;padding:8px 12px;font-size:12px}

  /* Trending grid: 1 column */
  .trending-grid{grid-template-columns:1fr}

  /* Gainers grid: 1 column */
  .gainers-grid{grid-template-columns:1fr}

  /* Stats strip: 2 cols */
  .stats .grid-4{grid-template-columns:1fr 1fr;gap:24px}
  .stat .v{font-size:22px}

  /* CTA band */
  .cta-band h2{font-size:24px}
  .cta-band p{font-size:14px}

  /* Footer */
  .footer-grid{grid-template-columns:1fr}
  .footer{padding:32px 16px 20px}

  /* Section spacing */
  .section{padding:36px 0}
  .section-title{font-size:22px;line-height:1.2}
  .section-sub{font-size:14px}

  /* Trade page mobile: ticker hidden, more compact */
  .trade-header{padding:10px 12px}
  .trade-header .pair-meta{font-size:11.5px}
  .trade-toolbar{flex-wrap:wrap;padding:8px 12px}
  .chart-area{min-height:280px}
  .order-pad{padding:12px}
  .orderbook{padding:10px 12px}
  .recent-trades{max-height:120px;padding:8px 12px}

  /* Buy/Sell pad on phone */
  .pct{grid-template-columns:repeat(4,1fr);gap:3px}
  .pct button{font-size:11px;padding:6px 2px}
  .bs-toggle button{font-size:14px}

  /* Auth */
  .auth-wrap{padding:20px 14px}
  .auth-card{padding:24px 18px}
  .auth-card h2{font-size:24px}
  .auth-back{top:18px;left:16px;font-size:13px}

  /* Bot page */
  .bot-hero h1{font-size:22px}
  .bot-card{padding:16px}
  .bot-tf-row button{padding:8px 12px;font-size:13px;flex:1 1 auto;min-width:55px}
  .bot-session .val{font-size:30px}
  .bot-active .countdown{font-size:24px}
  .bot-active .info{gap:14px}
  .bot-active .info span{font-size:12.5px}
  .bot-logs{font-size:12px;max-height:200px}
  .bot-logs .row{flex-wrap:wrap}

  /* Admin */
  .admin-main{padding:16px}
  .admin-side{padding:8px}
  .admin-side a{font-size:11.5px;padding:6px 10px}

  /* Page titles */
  .page-title{font-size:22px}

  /* Form fields: bigger tap targets */
  .field input, .field select, .bot-field input, .bot-field select{
    font-size:16px; /* prevents iOS zoom */
    padding:12px 14px;
  }
}

/* ============ < 420px: very small phones ============ */
@media (max-width: 420px) {
  .stats .grid-4{grid-template-columns:1fr}
  .quick-amts{grid-template-columns:repeat(2,1fr)}
  .nav-public .brand div{display:none} /* show logo only */
}

/* ============ Touch-friendly tap targets ============ */
@media (hover: none) {
  .btn, button, .nav-link, .app-nav-links a, .um-dd-item, .um-dd-toggle {
    min-height: 38px;
  }
  .bot-tf-row button{ min-height: 38px; }
}