/* Shared layout width + responsive sidebar standard (2026-08-30)
   Unified application canvas: max-width 1600px (Owner).
   Prototype only — Live/Laravel must consume the same max-width / breakpoint contract. */

.page-container {
  width: 100%;
  max-width: var(--page-max-app);
  margin-inline: auto;
  box-sizing: border-box;
}

/* Compatibility family classes — outer max-width identical to --page-max-app */
.page-container--standard {
  max-width: var(--page-max-standard);
}

.page-container--dashboard {
  max-width: var(--page-max-dashboard);
}

.page-container--operations {
  max-width: var(--page-max-operations);
}

#workspace.page-container {
  padding-inline: var(--page-pad-inline);
  min-width: 0;
}

/* Legacy/ops workbenches must stay inside the shared application canvas */
#workspace.page-container--operations > .legacy-ops,
#workspace.page-container--operations > .ops-page,
#workspace.page-container--operations > .transfer-job-orders-page,
#workspace.page-container--operations > .tour-bookings-page,
#workspace.page-container--operations > .tour-job-orders-page {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  margin-left: 0;
  margin-right: 0;
}

#workspace.page-container--operations .tb-list-shell,
#workspace.page-container--operations .legacy-scroll {
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

@media (min-width: 1024px) {
  :root {
    --page-pad-inline: 24px;
  }
}

@media (min-width: 1440px) {
  :root {
    --page-pad-inline: 32px;
  }
}

body.login-view #workspace.page-container {
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
}

/* ——— Responsive navigation ———
   >=1280 Full Sidebar (default)
   1024–1279 Icon Rail (default; user may expand via #btnRail → html.nav-expanded)
   769–1023 Tablet drawer (no persistent sidebar)
   <=768 Mobile composition (existing force-mobile / media rules)
*/

html.rail .app-sidebar .nav-link[title]:hover::after,
html.rail .app-sidebar .nav-link[title]:focus-visible::after {
  content: attr(title);
  position: absolute;
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
  background: #0b1524;
  color: #fff;
  font-size: var(--fs-meta);
  font-weight: 600;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  z-index: calc(var(--z-topbar) + 5);
  pointer-events: none;
  box-shadow: var(--shadow-md);
}

html.rail .app-sidebar .nav-link {
  position: relative;
}

/* Compact desktop: auto icon rail unless user expanded */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  html:not(.force-mobile):not(.nav-expanded) .app-sidebar {
    width: var(--sidebar-rail);
  }
  html:not(.force-mobile):not(.nav-expanded) .brand-text,
  html:not(.force-mobile):not(.nav-expanded) .nav-section,
  html:not(.force-mobile):not(.nav-expanded) .nav-group-toggle,
  html:not(.force-mobile):not(.nav-expanded) .nav-link > span:not(.ico),
  html:not(.force-mobile):not(.nav-expanded) .nav-note {
    display: none;
  }
  html:not(.force-mobile):not(.nav-expanded) .nav-link {
    justify-content: center;
    position: relative;
  }
  html:not(.force-mobile):not(.nav-expanded) .nav-link .ico {
    display: inline-flex;
  }
  html:not(.force-mobile):not(.nav-expanded) .nav-group.is-collapsed .nav-group-body {
    display: block !important;
  }
  html:not(.force-mobile):not(.nav-expanded) .app-sidebar .nav-link[title]:hover::after,
  html:not(.force-mobile):not(.nav-expanded) .app-sidebar .nav-link[title]:focus-visible::after {
    content: attr(title);
    position: absolute;
    left: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
    background: #0b1524;
    color: #fff;
    font-size: var(--fs-meta);
    font-weight: 600;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    z-index: calc(var(--z-topbar) + 5);
    pointer-events: none;
    box-shadow: var(--shadow-md);
  }
}

/* Tablet: drawer navigation — content uses full working width when closed */
@media (min-width: 769px) and (max-width: 1023.98px) {
  html:not(.force-mobile) .app-sidebar {
    position: fixed;
    transform: translateX(-100%);
    width: min(86vw, 300px);
    transition: transform .2s ease;
    z-index: var(--z-nav-drawer);
    height: 100vh;
    max-height: 100vh;
    min-height: 0;
    overflow: hidden;
    align-self: stretch;
  }
  html:not(.force-mobile).nav-open .app-sidebar {
    transform: none;
  }
  html:not(.force-mobile) .nav-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  html:not(.force-mobile).nav-open .nav-backdrop,
  html:not(.force-mobile) .nav-backdrop.open {
    display: block;
  }
  html:not(.force-mobile) .btn-menu {
    display: inline-flex;
  }
  html:not(.force-mobile) #btnRail {
    display: none;
  }
  html:not(.force-mobile) .app-main {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  /* Content reflow — not only hide sidebar */
  html:not(.force-mobile) .booking-split,
  html:not(.force-mobile) .voucher-split,
  html:not(.force-mobile) .split-master,
  html:not(.force-mobile) .excursion-cols,
  html:not(.force-mobile) .form-grid,
  html:not(.force-mobile) .md-form-grid,
  html:not(.force-mobile) .msetup-form-grid {
    grid-template-columns: 1fr !important;
  }
  html:not(.force-mobile) .span-2,
  html:not(.force-mobile) .span-3,
  html:not(.force-mobile) .span-4,
  html:not(.force-mobile) .span-6,
  html:not(.force-mobile) .span-8 {
    grid-column: span 1 !important;
  }
}

/* Align legacy 900px drawer with tablet band so 901–1023 is not stuck with full sidebar */
@media (min-width: 769px) and (max-width: 899.98px) {
  html:not(.force-mobile) #btnRail {
    display: none;
  }
}