/* ============================================================================
 * DocuVantage — RESPONSIVE   © 2026 DIGILADDER
 *
 *   U15. Pramit Ji's screenshots showed the rail overlapping the content, cards
 *   running off the right edge, and tables cut mid-column. The cause is not a
 *   detail — it is the shell itself:
 *
 *       .app {
 *         grid-template-columns: var(--rail-w) auto 1fr;   ← 64px + 264px + main
 *         grid-template-areas: "rail topbar topbar"
 *                              "rail sidebar main";
 *         width: 100vw;
 *       }
 *
 *   Rail (64) + sidebar (264) = 328px of chrome BEFORE any content. On a 412px
 *   phone that leaves 84px for the actual page. There was no shell breakpoint at
 *   all — the three "720px" rules in the app fix sub-layouts only.
 *
 *   Three tiers:
 *     ≤1100px  the sidebar goes off-canvas. Main gets the room.
 *     ≤720px   the rail goes off-canvas too. Single column. Hamburger in the topbar.
 *     ≤480px   dense mode: tighter padding, stacked KPIs, full-bleed sheets.
 *
 *   Everything here is additive and gated behind a media query, so the desktop
 *   layout is byte-for-byte unchanged.
 * ==========================================================================*/

/* ═══════════════ ≤1100px — the sidebar goes off-canvas ═══════════════ */
@media (max-width: 1100px){
  .app{
    grid-template-columns: var(--rail-w) 0 1fr;
    grid-template-areas:
      "rail topbar topbar"
      "rail main   main";
  }
  .sidebar{
    position: fixed; top: var(--topbar-h); left: var(--rail-w); bottom: 0;
    width: min(var(--sidebar-w), 82vw);
    z-index: 900;
    transform: translateX(-102%);
    transition: transform var(--dur-med, .22s) var(--ease, ease);
    box-shadow: 18px 0 48px rgba(0,0,0,.28);
    overflow-y: auto;
  }
  .app.nav-sidebar .sidebar{ transform: translateX(0); }

  /* dashboards stop pretending they have room for three columns */
  .dash-grid{ grid-template-columns: 1fr 1fr !important; }
}

/* ═══════════════ ≤720px — the rail goes too. Single column. ═══════════════ */
@media (max-width: 720px), (max-width: 1366px) and (pointer: coarse){
  .app, #app-root{
    grid-template-columns: 1fr !important;
    grid-template-rows: var(--topbar-h) 1fr;
    grid-template-areas:
      "topbar"
      "main";
  }

  .rail{
    position: fixed; top: 0; left: 0; bottom: 0;
    width: min(268px, 84vw);
    z-index: 950;
    transform: translateX(-102%);
    transition: transform var(--dur-med, .22s) var(--ease, ease);
    box-shadow: 18px 0 52px rgba(0,0,0,.34);
    overflow-y: auto;
    /* on desktop the rail is an icon strip; in the drawer it earns its labels */
    align-items: stretch;
    padding: 10px 8px;
  }
  .app.nav-rail .rail, #app-root.nav-rail .rail{ transform: translateX(0); }

  .rail-item{
    width: auto; height: 44px;
    justify-content: flex-start;
    gap: 12px; padding: 0 12px;
  }
  .rail-item .rail-label{
    display: inline !important;
    font-size: 13px; font-weight: 600; opacity: 1;
  }
  .rail-item .tooltip{ display: none !important; }   /* pointless on touch */
  .rail-gold{ margin: 12px 4px 8px; }

  .sidebar{ left: 0; top: var(--topbar-h); }

  /* the backdrop behind either drawer */
  .nav-backdrop{
    position: fixed; inset: 0; z-index: 880;
    background: rgba(0,0,0,.48);
    backdrop-filter: blur(2px);
    opacity: 0; pointer-events: none;
    transition: opacity var(--dur-med, .22s) var(--ease, ease);
  }
  .app.nav-rail .nav-backdrop, #app-root.nav-rail .nav-backdrop,
  .app.nav-sidebar .nav-backdrop, #app-root.nav-sidebar .nav-backdrop{ opacity: 1; pointer-events: auto; }

  .nav-burger{ display: inline-flex !important; }

  /* the visual designer: a 280px right rail is off-screen on a phone, so the
     node properties — including the participant picker — were unreachable.
     Stack it under the canvas instead. */
  .wf-designer-shell{ flex-direction: column !important; }
  .wf-props-panel{ width: 100% !important; border-left: 0 !important;
    border-top: 1px solid var(--c-line) !important; max-height: 60vh; }
  .wf-canvas-outer{ min-height: 320px; }

  .dash-grid{ grid-template-columns: 1fr !important; }
  .kpi-row{ grid-template-columns: repeat(2, 1fr) !important; }

  /* the a80.2 viewer dock: a right rail is wrong on a phone. Bottom sheet. */
  .vd-rail, #dock-rail{
    top: auto !important; right: 0 !important; left: 0 !important; bottom: 0 !important;
    width: 100% !important; height: 52px !important;
    flex-direction: row !important; justify-content: center; align-items: center;
    overflow-x: auto;
    border-radius: 13px 13px 0 0 !important;
    border-top: 1px solid var(--c-line);
  }
  #dock-rail .dock-tip{ display: none !important; }
  /* Explicit viewer-dock panel ids ONLY. The old suffix-match selector kept
     capturing innocents — first #nv-panel (Navigator), then #viewer-panel (the
     Document Panel, a static flex child that width:100% turned into a screen
     eater). Never suffix-match ids here again. */
  .vd-panel, .side-panel,
  #vp-panel, #cp3-panel, #dr-panel, #pn-panel, #bc-panel, #pmi-panel,
  #kin-panel, #pc-panel, #aid-panel, #adfm-panel, #aii-panel, #cp2-panel{
    right: 0 !important; left: 0 !important; top: auto !important;
    bottom: 52px !important;
    width: 100% !important;
    max-height: 62vh !important;
    border-radius: 14px 14px 0 0 !important;
  }
}

/* ═══════════════ ≤480px — dense ═══════════════ */
@media (max-width: 480px){
  .card-pad{ padding: 14px !important; }
  .kpi-row{ grid-template-columns: 1fr !important; }
  .page-head h1, .module-title{ font-size: 22px !important; line-height: 1.25; }
  .btn{ min-height: 40px; }          /* a real touch target */
  .rail-item{ min-height: 46px; }

  /* modals become full-bleed sheets rather than a card floating in a scrim */
  .modal, .dialog{
    width: 100% !important; max-width: 100% !important;
    height: auto; max-height: 92vh;
    border-radius: 16px 16px 0 0 !important;
    align-self: flex-end;
  }
}

/* ═══════════════ TABLES — 132 of them, 9 scrollers ═══════════════
 * A table wider than the phone used to push the whole PAGE sideways, which is
 * why the screenshots have content hanging off the right edge. Let the CARD
 * scroll instead of the document. -webkit-overflow-scrolling keeps it native.
 * ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1100px), (max-width: 1366px) and (pointer: coarse){
  .card, .panel, .table-wrap{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .card table, .panel table{ min-width: max-content; }

  /* nothing may push the document sideways */
  html, body{ overflow-x: hidden; max-width: 100vw; }
  .app, #app-root{ width: 100%; max-width: 100vw; }
}

/* ═══════════════ THE HAMBURGER ═══════════════ */
.nav-burger{
  display: none;
  align-items: center; justify-content: center;
  width: 38px; height: 38px;
  margin-right: 8px;
  border-radius: var(--r-md, 8px);
  border: 1px solid var(--c-line);
  background: var(--c-surface-2);
  color: var(--c-text);
  cursor: pointer;
}
.nav-burger:hover{ background: var(--c-surface-3, var(--c-surface-2)); }
body.nv-on .nav-burger{ display: none !important; }  /* Navigator rail owns nav in nv mode */
.nav-burger svg{ width: 20px; height: 20px; }

/* ═══════════ TOUCH DEVICES WITH WIDE VIEWPORTS ═══════════
 * Phones in desktop-site mode (or with display scaling) report layout viewports
 * far wider than 720px, so NONE of the phone rules above ever matched on them —
 * the viewer dock stayed a right-side column and ate the canvas. A coarse
 * pointer at ≤1024px means it is a touch device: give it the phone dock. */
@media (max-width: 1366px) and (pointer: coarse){
  .vd-rail, #dock-rail{
    top: auto !important; right: 0 !important; left: 0 !important; bottom: 0 !important;
    width: 100% !important; height: 52px !important;
    flex-direction: row !important; justify-content: center; align-items: center;
    overflow-x: auto;
    border-radius: 13px 13px 0 0 !important;
    border-top: 1px solid var(--c-line);
  }
  #dock-rail .dock-tip{ display: none !important; }
  .vd-panel, .side-panel,
  #vp-panel, #cp3-panel, #dr-panel, #pn-panel, #bc-panel, #pmi-panel,
  #kin-panel, #pc-panel, #aid-panel, #adfm-panel, #aii-panel, #cp2-panel{
    right: 0 !important; left: 0 !important; top: auto !important;
    bottom: 52px !important;
    width: 100% !important;
    max-height: 62vh !important;
    border-radius: 14px 14px 0 0 !important;
  }
}

/* ═══════════════ TOP AREA — complete visibility on phones ═══════════════
 * The topbar had NO mobile rules: burger + toggle + crumb + search + hint +
 * help + bell + role pills + avatar in one non-wrapping row. On a 360-412px
 * phone that overflows, and html{overflow-x:hidden} makes the overflow
 * INVISIBLE rather than scrollable. Every child now shrinks, truncates or
 * steps aside — nothing is ever pushed off-screen. */
@media (max-width: 720px), (max-width: 1366px) and (pointer: coarse){
  .topbar{ padding: 0 8px; gap: 6px; min-width: 0; }
  .topbar .icon-btn{ width: 34px; height: 34px; flex: 0 0 auto; }
  /* the crumb yields: it shrinks and ellipsizes instead of shoving the
     actions row off the right edge */
  .topbar .crumb{ flex: 1 1 auto; min-width: 0; overflow: hidden; font-size: var(--fs-sm); }
  .topbar .crumb span{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* search becomes a compact, expandable field; the Ctrl K hint is
     meaningless on touch */
  .topbar-search{ flex: 1 1 110px; min-width: 84px; margin: 0; }
  .topbar-search input{ padding: 8px 10px 8px 32px; font-size: 16px; } /* 16px stops focus auto-zoom */
  .topbar-search .kbd-hint{ display: none; }
  .topbar-actions{ gap: 6px; flex: 0 0 auto; }
  /* role pills are informational; on a phone they cost more than they say.
     Keep the interactive #topbar-role, capped, drop the passive policy pill. */
  .topbar .role-pill{ display: none; }
  .topbar #topbar-role{ display: inline-block; max-width: 76px; overflow: hidden; text-overflow: ellipsis; }
  .topbar .avatar{ flex: 0 0 auto; }
  /* breadcrumbs: one scrollable line, never a tall wrapped block */
  .ws-breadcrumbs{ white-space: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding: 6px 12px; }
  .ws-breadcrumbs::-webkit-scrollbar{ display: none; }
  /* page headers: tighter, and the title never forces sideways growth */
  .view-header{ margin-bottom: 10px; }
  .view-title{ font-size: 18px; line-height: 1.3; overflow-wrap: anywhere; }
  .view-subtitle{ font-size: 11.5px; }
}
@media (max-width: 480px){
  /* two hamburgers is one too many — the drawer burger owns navigation */
  .topbar #sidebar-toggle{ display: none; }
  .topbar #topbar-role{ display: none; }  /* role remains in the avatar menu */
  .view-title{ font-size: 17px; }
}

/* ─── Shared tab row for feature pages (AI settings, Academy, PLM settings,
 * and any future page). Desktop: wraps. Phone: ONE row, finger-scrollable,
 * so the page content starts immediately instead of below 3 rows of tabs. */
.dv-tabrow{ display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0 14px; }
@media (max-width: 720px), (max-width: 1366px) and (pointer: coarse){
  .dv-tabrow{ flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; margin: 10px 0 12px; padding-bottom: 2px; }
  .dv-tabrow::-webkit-scrollbar{ display: none; }
  .dv-tabrow > button{ flex: 0 0 auto; white-space: nowrap; }
}


/* ═══════════ b0718 · topbar clean-up (reported: "Home and left slide button
   are not working — remove it and adjust the search button") ═══════════
   In drawer layouts the sidebar is a slide-over, so #sidebar-toggle toggled a
   class that changed nothing. Hide it there and give the width to search.  */
@media (max-width: 1100px), (max-width: 1366px) and (pointer: coarse) {
  #sidebar-toggle { display: none !important; }
  .topbar .topbar-search { flex: 1 1 auto !important; min-width: 0 !important; max-width: none !important; }
  .topbar .crumb { max-width: 30vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
/* the search box was fixed-width on desktop too — let it breathe */
.topbar .topbar-search { flex: 1 1 420px; min-width: 0; }
.topbar-actions { flex: 0 0 auto; }