/* 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; }

/* Colour⇄dark toggle button in the topbar (all themes). */
.theme-btn { padding: 4px 9px; font-size: 1.02rem; line-height: 1; }

/* Progressive-disclosure panels (e.g. the new-folder input). */
.hidden { display: none !important; }

/* ---- Grid / tile view (Dolphin-style file browser) ---- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 14px; margin-top: 14px; }
.tile { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius, 8px); overflow: hidden; text-decoration: none; color: var(--ink); background: var(--bg); transition: border-color .12s; }
.tile:hover { border-color: var(--line-2); text-decoration: none; }
.tile-thumb { aspect-ratio: 4 / 3; background: var(--bg-2); display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; }
.tile-thumb canvas, .tile-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.tile-thumb .ph { opacity: .5; }
.tile-thumb .ext { position: absolute; bottom: 6px; right: 6px; font-size: .58rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 1px 6px; border-radius: 100px; background: var(--bg-3); color: var(--muted); border: 1px solid var(--line); }
.tile-folder .tile-thumb { background: var(--bg-3); }
.tile-name { padding: 8px 10px; font-size: .8rem; line-height: 1.3; height: calc(1.3em * 2 + 16px); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
.tile-folder .tile-name { font-weight: 600; }
.tile-actions { padding: 0 8px 8px; display: flex; gap: 6px; }
.view-toggle a { padding: 4px 9px; }
.view-toggle a.active { color: var(--ink); background: var(--bg-3); }

@media (max-width: 760px) {
  .grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
}

@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; }
}