/* YURA v4.2.6 - mobile responsive shell, no Firestore/logic changes.
   Loaded after theme-v423.css; dashboard lazy CSS is overridden with scoped !important selectors.
   Do not apply mobile sizing to print-only documents. */
@media screen and (max-width: 850px) {
  html, body { max-width: 100%; }
  body { overflow-x: clip; }
  #app.shell { display:block!important; min-width:0; width:100%; }
  #app.shell .workarea { width:100%; min-width:0; margin:0!important; }
  #app.shell .main-content { width:100%; min-width:0; max-width:100%; margin:0!important; padding:12px 10px 32px!important; }
  #app.shell #pageContent { min-width:0; max-width:100%; }
  #app.shell .topbar { position:sticky!important; top:0; z-index:990!important; min-height:58px!important; padding:8px 10px!important; display:flex!important; flex-wrap:wrap; gap:7px!important; width:100%; }
  #app.shell .topbar-main { min-width:0; flex:1 1 120px; gap:6px!important; }
  #app.shell #pageTrail { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; max-width:calc(100vw - 185px); }
  #app.shell #sidebarToggle { flex:0 0 42px; width:42px!important; height:42px!important; min-width:42px!important; min-height:42px!important; border-radius:11px!important; }
  #app.shell .yv-top-tools { min-width:0; max-width:100%; display:flex; align-items:center; justify-content:flex-end; flex:0 1 auto; gap:5px!important; }
  #app.shell .yv-global-search { width:clamp(116px,27vw,235px)!important; max-width:100%; min-width:0!important; height:38px!important; }
  #app.shell .yv-global-search input { min-width:0; width:100%; font-size:11px!important; }
  #app.shell .yv-search-results { max-width:min(340px,calc(100vw - 20px)); z-index:1010; }
  #app.shell .yv-top-action, #app.shell .yv-contrast-toggle { flex:0 0 36px; width:36px!important; min-width:36px!important; height:36px!important; min-height:36px!important; }
  #app.shell .top-user { display:none!important; }
  #app.shell .sidebar, #app.shell.nav-collapsed .sidebar {
    position:fixed!important; inset:0 auto 0 0!important; top:0!important;
    width:min(305px,86vw)!important; max-width:305px!important; height:100dvh!important;
    max-height:100dvh!important; padding:12px 10px 14px!important;
    flex-basis:auto!important; flex-direction:column!important; display:flex!important;
    transform:translate3d(-105%,0,0)!important;
    transition:transform .22s ease!important; visibility:hidden; overflow:hidden!important;
    z-index:1210!important; box-shadow:12px 0 35px #10264b24!important;
  }
  #app.shell.yv-mobile-nav-open .sidebar, #app.shell.nav-collapsed.yv-mobile-nav-open .sidebar {
    transform:translate3d(0,0,0)!important; visibility:visible!important;
  }
  #app.shell .sidebar .side-brand, #app.shell.nav-collapsed .sidebar .side-brand { display:flex!important; justify-content:flex-start!important; gap:8px!important; padding:8px 5px 14px!important; margin:0 0 6px!important; }
  #app.shell.nav-collapsed .sidebar .side-brand>div:last-child { display:block!important; }
  #app.shell .sidebar .side-brand strong { font-size:12px!important; }
  #app.shell .sidebar .side-brand small { font-size:9px!important; }
  #app.shell .sidebar nav, #app.shell #navigation, #app.shell.nav-collapsed #navigation {
    flex:1 1 auto!important; display:block!important; min-height:0; max-height:none!important;
    overflow-y:auto!important; overflow-x:hidden!important; padding:4px 3px!important;
    overscroll-behavior:contain;
  }
  #app.shell #navigation .nav-group { width:100%; min-width:0; }
  #app.shell #navigation .nav-group-toggle { width:100%!important; min-height:41px!important; white-space:normal!important; }
  #app.shell #navigation .nav-submenu, #app.shell.nav-collapsed #navigation .nav-submenu { display:block!important; }
  #app.shell #navigation .nav-submenu[hidden], #app.shell.nav-collapsed #navigation .nav-submenu[hidden] { display:none!important; }
  #app.shell.nav-collapsed #navigation .nav-group-title, #app.shell.nav-collapsed #navigation .nav-group-arrow { display:inline!important; }
  #app.shell #navigation .nav-submenu>button, #app.shell.nav-collapsed #navigation .nav-submenu>button {
    width:100%!important; min-height:42px!important; white-space:normal!important;
    justify-content:flex-start!important; padding:9px 10px!important;
  }
  #app.shell.nav-collapsed #navigation .nav-submenu .nav-text { display:inline!important; }
  #app.shell .side-user, #app.shell.nav-collapsed .side-user { display:block!important; flex:0 0 auto; padding:10px!important; margin-top:8px!important; }
  #app.shell .side-user button { width:100%!important; margin-top:6px!important; min-height:38px!important; }
  .yv-mobile-scrim { position:fixed; inset:0; z-index:1200; display:none; background:#0c1d38a8; }
  .yv-mobile-scrim[hidden] { display:none!important; }
  body.yv-mobile-nav-open { overflow:hidden; }
  body.yv-mobile-nav-open .yv-mobile-scrim { display:block; }
  #app.shell .page-title { flex-direction:column; align-items:stretch; gap:10px; }
  #app.shell .page-title h1 { font-size:19px!important; overflow-wrap:anywhere; }
  #app.shell .toolbar, #app.shell .toolbar-actions, #app.shell #pageContent .it-toolbar { max-width:100%; gap:8px!important; }
  #app.shell .toolbar :is(input,select,button) { min-width:0; max-width:100%; }
  #app.shell .two-cols, #app.shell .permission-list, #app.shell .stats, #app.shell .grid-summary,
  #app.shell .it-stocktake-grid, #app.shell .handover-form-cols, #app.shell .ga-gate-grid,
  #app.shell .schedule-form-grid, #app.shell .schedule-details { grid-template-columns:minmax(0,1fr)!important; }
  #app.shell .panel, #app.shell .dashboard-card, #app.shell .stat { max-width:100%; min-width:0; }
  #app.shell #pageContent .table-wrap, #app.shell #pageContent .audit-table,
  #app.shell #pageContent .it-audit-table { display:block; width:auto; max-width:100%; overflow-x:auto!important; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; }
  #app.shell #pageContent .table-wrap > table { min-width:650px; }
  #app.shell #pageContent .modal-actions { display:flex; flex-wrap:wrap; gap:8px; }
  #app.shell #pageContent :is(input,select,textarea) { max-width:100%; }
  dialog:not(#printDialog), dialog.editor, dialog.vault-unlock-dialog {
    box-sizing:border-box; width:calc(100vw - 16px)!important; max-width:calc(100vw - 16px)!important;
    max-height:calc(100dvh - 20px)!important; padding:16px 14px!important;
    margin:auto!important; overflow:auto!important;
  }
  dialog .modal-head { gap:8px; margin-bottom:12px; }
  dialog .modal-head h2 { font-size:18px; line-height:1.3; }
  dialog .two-cols, dialog .permission-list { grid-template-columns:1fr!important; }
  dialog input, dialog textarea, dialog select { max-width:100%; }
  dialog .modal-actions { position:static!important; display:flex; flex-wrap:wrap; gap:8px; }
  dialog .modal-actions button { flex:1 1 110px; min-height:42px; }
  /* Core Dashboard: do not allow page-wide horizontal overflow. */
  #app.shell #pageContent .yc-root, #app.shell #pageContent .yc-v42-root { width:100%; max-width:100%; min-width:0; }
  #app.shell #pageContent .yc-calendar-panel, #app.shell #pageContent .yc-panel, #app.shell #pageContent .yc-quick-panel { min-width:0!important; max-width:100%!important; padding:13px 11px!important; }
  #app.shell #pageContent .yc-calendar-head, #app.shell #pageContent .yc-panel-head { flex-wrap:wrap!important; gap:8px!important; }
  #app.shell #pageContent .yc-week, #app.shell #pageContent .yc-week.yc-month {
    display:grid!important; max-width:100%!important; min-width:0!important;
    overflow-x:auto!important; overflow-y:hidden!important; -webkit-overflow-scrolling:touch;
    grid-template-columns:repeat(7,minmax(105px,1fr))!important;
    overscroll-behavior-x:contain;
  }
  #app.shell #pageContent .yc-day { min-width:105px!important; }
  #app.shell #pageContent .yc-bottom-grid { display:grid!important; grid-template-columns:minmax(0,1fr)!important; }
  #app.shell #pageContent .yc-bottom-grid>.yc-panel { height:340px!important; min-width:0!important; }
  #app.shell #pageContent .yc-notice-filters { width:100%; display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px!important; }
  #app.shell #pageContent .yc-notice-filters button { min-width:0!important; padding:9px 4px!important; white-space:normal!important; font-size:11px!important; }
  #app.shell #pageContent #yc-stock, #app.shell #pageContent #yc-notices { width:100%!important; }
  #app.shell #pageContent .yc-feature-cards { grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:8px!important; }
  #app.shell #pageContent .yc-quick-grid { grid-template-columns:repeat(2,minmax(0,1fr))!important; }
  #app.shell #pageContent .yc-search { width:100%; min-width:0; }
  #app.shell #pageContent .yc-search input { width:100%!important; min-width:0!important; }
  #app.shell #pageContent .yc-operations-toolbar { flex-wrap:wrap; }
  #app.shell #pageContent .yc-feed-item, #app.shell #pageContent .yc-notice, #app.shell #pageContent .yc-stock-row { min-width:0!important; }
  #app.shell #pageContent .yc-feed-copy, #app.shell #pageContent .yc-stock-details { overflow-wrap:anywhere; }
  #app.shell #pageContent .yc-stock-row b { min-width:54px!important; padding:5px 6px!important; }
  /* Keep detail drawer within phone viewport including the browser safe area. */
  .yv423-drawer { max-width:100vw!important; height:100dvh!important; }
  .yv423-drawer-head { padding:18px 16px!important; }
  .yv423-drawer-body { padding:14px 16px 22px!important; }
  .yv423-drawer-actions { padding:12px 16px calc(12px + env(safe-area-inset-bottom))!important; flex-wrap:wrap; }
}
@media screen and (max-width: 470px) {
  #app.shell .topbar { align-items:center; }
  #app.shell .topbar-main { flex:1 1 100%; }
  #app.shell .yv-top-tools { width:100%; flex:1 1 100%; justify-content:space-between; padding-left:2px; }
  #app.shell .yv-global-search { flex:1 1 auto; width:auto!important; }
  #app.shell #pageTrail { max-width:calc(100vw - 92px); }
  #app.shell #pageContent .yc-feature-cards { grid-template-columns:repeat(2,minmax(0,1fr))!important; }
  #app.shell #pageContent .yc-quick-grid { grid-template-columns:repeat(2,minmax(0,1fr))!important; }
  #app.shell #pageContent .yc-feature-card { min-height:105px!important; }
  #app.shell #pageContent .yc-panel-head h2 { font-size:14px!important; }
  #app.shell .login-layout { grid-template-columns:1fr; }
  .login-card { width:100%; max-width:100%; }
}
@media screen and (min-width:851px) { .yv-mobile-scrim { display:none!important; } }
@media (prefers-reduced-motion:reduce) { #app.shell .sidebar { transition:none!important; } }
@media print { .yv-mobile-scrim { display:none!important; } }