/* OneQode Vault — responsive layer.
   Loaded AFTER the active theme (classic|brand); both themes share class names,
   so this single file adapts either one to small screens. Desktop is untouched.
   Breakpoints: 760px = phones + small portrait tablets; 460px = narrow phones. */

/* Never let the page itself scroll sideways — wide content scrolls in its own box. */
html, body { max-width: 100%; overflow-x: hidden; }

@media (max-width: 760px) {

  /* ---- Topbar: brand + actions on row 1, nav scrolls on row 2 ---- */
  .topbar {
    height: auto; min-height: 52px;
    padding: 8px 14px; gap: .4rem .55rem;
    flex-wrap: wrap;
  }
  .topbar .brand { margin-right: auto; }        /* push Account / Sign out to the right */
  .topbar .spacer { display: none; }
  .topbar .who { display: none; }               /* name · role — drop on small screens */
  .topbar .theme-toggle { display: none; }      /* staff colour toggle — desktop only */
  .topbar nav {
    order: 5; width: 100%;
    display: flex; gap: 2px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding-top: 2px;
    scrollbar-width: none;
  }
  .topbar nav::-webkit-scrollbar { display: none; }
  .topbar nav a { white-space: nowrap; padding: 6px 9px; }

  /* ---- Page frame: tighter gutters ---- */
  .container, .main { padding: 16px 14px; }
  .main { max-width: 100%; }
  h1 { font-size: 1.34rem; }
  h2 { font-size: 1.05rem; }

  /* ---- Tables: scroll inside their card instead of blowing out the page ---- */
  .card { overflow-x: auto; }
  table { font-size: .84rem; }
  th, td { padding: 8px 9px; }

  /* ---- Forms / rows: stack full width ---- */
  .row { flex-direction: column; align-items: stretch; gap: 10px; }
  .row > * { min-width: 0; width: 100%; flex: 1 1 auto; }

  /* Toolbars (new-folder form, Access/Reports, viewer controls) stack cleanly */
  .toolbar { flex-direction: column; align-items: stretch; gap: 10px; }
  .toolbar > h1 { margin-bottom: 2px; }
  .toolbar .spacer { display: none; }
  .toolbar form { flex-wrap: wrap; }
  .toolbar form > div { flex: 1 1 140px; min-width: 0; }
  .toolbar form > div[style*="max-width"] { max-width: none !important; }
  .toolbar > .btn, .toolbar form > .btn { width: 100%; justify-content: center; }

  /* ---- Stat cards: two-up on phones ---- */
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .stat .n { font-size: 1.45rem; }

  /* ---- Context menu: stay on-screen ---- */
  .menu { min-width: 180px; max-width: 82vw; }

  /* ---- Viewer: don't double-stick under the (now taller) topbar ---- */
  .viewer-toolbar { position: static !important; top: auto !important; padding: 8px 0 !important; }
  #viewer-stage iframe, #pdf-viewer { min-height: 62vh; }

  /* ---- Auth pages ---- */
  .auth-wrap { max-width: 100%; margin: 5vh auto; padding: 26px 18px; }
  .auth-wrap .card { padding: 20px 18px; }
}

@media (max-width: 460px) {
  .container, .main { padding: 14px 12px; }
  h1 { font-size: 1.22rem; }
  .stat-grid { grid-template-columns: 1fr; }
  .btn.sm { padding: 6px 10px; }               /* keep small buttons tappable */
  .topbar .brand { font-size: 1rem; }
}