/* mobile.css — responsive overrides */

/* ── Mobile: ≤ 767px ─────────────────────────────────────────────────────── */
@media(max-width:767px){
  .sidebar{display:none}
  .bottom-nav{display:flex}
  .content{margin-left:0;padding-bottom:var(--nav-h)}

  .page{padding:12px}
  .topbar{padding:10px 14px}
  .topbar-title{font-size:15px}
  .topbar-right .sel,.topbar-right .inp{display:none} /* hide complex filters on mobile */
  .topbar-right .btn-sm{font-size:11px;padding:5px 9px}

  /* Grids collapse to 1 col except metric 2x2 */
  .g2,.g3,.g4{grid-template-columns:1fr 1fr}
  .g4{grid-template-columns:1fr 1fr}

  .metric-val{font-size:22px}

  /* Thread + viewer: single column with push/pop */
  .split-view{display:block!important}
  .split-left{width:100%!important;height:calc(100vh - var(--topbar-h) - var(--nav-h))}
  .split-right{
    position:fixed;top:0;left:0;right:0;bottom:var(--nav-h);
    background:var(--surf);z-index:35;
    transform:translateX(100%);transition:transform .25s cubic-bezier(.4,0,.2,1);
    overflow-y:auto;
  }
  .split-right.visible{transform:none}
  .split-back{
    display:flex!important;align-items:center;gap:8px;
    padding:12px 16px;border-bottom:1px solid var(--bdr);
    font-size:14px;font-weight:600;cursor:pointer;background:var(--surf);
    position:sticky;top:0;z-index:1;
  }

  /* AI panel full-screen on mobile */
  .ai-panel{width:100%;border-left:none;top:0}
  .ai-fab{bottom:calc(var(--nav-h) + 12px)}

  /* Modals full-screen */
  .modal{max-height:96vh}
  .modal-wide{width:100%}

  /* Tables → hide on mobile, use card layout instead */
  .tbl-desktop{display:none}
  .cards-mobile{display:flex!important;flex-direction:column}

  .card-body{padding:13px}
  .card-hd{padding:11px 13px}

  /* Performance view: selects full width */
  #perf-camp-sel{width:100%}

  /* Fingerprint rows */
  .fp-row{grid-template-columns:1fr 36px}
  .fp-row .fp-device{display:none}
}

/* ── Tablet: 768–1023px ──────────────────────────────────────────────────── */
@media(min-width:768px) and (max-width:1023px){
  .sidebar{width:200px}
  .content{margin-left:200px}
  .g4{grid-template-columns:1fr 1fr}
  .g3{grid-template-columns:1fr 1fr 1fr}
  .split-left{width:300px!important}

  .ai-panel{width:360px}
}

/* ── Desktop modal centering ─────────────────────────────────────────────── */
@media(min-width:768px){
  .modal-bg{align-items:center}
  .modal{
    border-radius:var(--r);max-width:620px;
    animation:fadeIn .18s ease;
  }
  .modal-wide{max-width:780px}
  .modal-handle{display:none}

  .split-back{display:none!important}
  .split-view{display:grid;grid-template-columns:340px 1fr;height:calc(100vh - var(--topbar-h))}
  .split-left{overflow-y:auto;border-right:1px solid var(--bdr)}
  .split-right{overflow-y:auto}

  /* Cards mobile always hidden on desktop */
  .cards-mobile{display:none!important}
  .tbl-desktop{display:block}

  /* AI panel alongside content */
  .content.ai-open{margin-right:400px;transition:margin-right .25s}
}

/* ── Large desktop ───────────────────────────────────────────────────────── */
@media(min-width:1200px){
  .g4{grid-template-columns:repeat(4,1fr)}
  .g3{grid-template-columns:repeat(3,1fr)}
  .split-view{grid-template-columns:380px 1fr}
}

/* ── Print ───────────────────────────────────────────────────────────────── */
@media print{
  .sidebar,.bottom-nav,.ai-fab,.ai-panel,.topbar-right,.btn{display:none!important}
  .content{margin:0}
  .card{box-shadow:none;border:1px solid #ccc}
}