/* =============================================================================
   OrganicSystem — ERP Sidebar
   Desktop  (>=1200): fixed docked sidebar
   Tablet   (768–1199 landscape): collapsible rail (content resizes)
   Portrait / mobile: overlay sidebar (closes after menu select)
   ============================================================================= */

:root {
  --os-sb-width: 16.5rem;
  --os-sb-width-collapsed: 4.25rem;
  --os-sb-z: 40;
  --os-sb-backdrop-z: 35;
}

/*
  Shell grid: first track sizes to the sidebar (auto), second track fills.
  Explicit column placement keeps .app-main in the flexible column even if the
  sidebar is display:none — otherwise main falls into the narrow first track.
*/
body.os-module-shell.has-sidebar {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) var(--os-app-footer-height, 1.5rem) !important;
  grid-template-areas:
    "sidebar main"
    "footer footer";
}

body.os-module-shell.has-sidebar > .app-sidebar {
  grid-area: sidebar;
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  max-width: 100%;
  z-index: var(--os-sb-z);
  width: var(--os-sb-width, var(--sb-width, 16.5rem));
}

body.os-module-shell.has-sidebar.is-sidebar-collapsed > .app-sidebar,
html.os-sidebar-collapsed body.os-module-shell.has-sidebar > .app-sidebar,
html[data-os-sidebar-collapsed="1"] body.os-module-shell.has-sidebar > .app-sidebar {
  width: var(--os-sb-width-collapsed, var(--sb-width-collapsed, 4.25rem));
}

body.os-module-shell.has-sidebar > .app-main {
  grid-area: main;
  grid-column: 2;
  grid-row: 1;
  min-width: 0 !important;
  width: 100% !important;
  max-width: none !important;
}

/* =============================================================================
   DESKTOP (>=1200): Fixed Sidebar
   ============================================================================= */
@media (min-width: 1200px) {
  body.os-module-shell.has-sidebar {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
  }

  body.os-module-shell.has-sidebar.is-sidebar-collapsed {
    grid-template-columns: auto minmax(0, 1fr) !important;
  }

  body.os-module-shell .app-sidebar {
    position: sticky !important;
    top: 0 !important;
    inset: auto !important;
    transform: none !important;
    width: var(--os-sb-width, var(--sb-width, 16.5rem)) !important;
    height: 100% !important;
    max-height: 100% !important;
    box-shadow: none !important;
  }

  body.os-module-shell.has-sidebar.is-sidebar-collapsed .app-sidebar,
  html.os-sidebar-collapsed body.os-module-shell.has-sidebar .app-sidebar,
  html[data-os-sidebar-collapsed="1"] body.os-module-shell.has-sidebar .app-sidebar {
    width: var(--os-sb-width-collapsed, var(--sb-width-collapsed, 4.25rem)) !important;
  }

  body.os-module-shell .app-sidebar-backdrop {
    display: none !important;
  }

  body.os-module-shell .app-topbar__menu {
    display: grid; /* collapse/expand still available */
  }
}

/* =============================================================================
   TABLET (768–1199, landscape): Collapsible docked rail
   ============================================================================= */
@media (min-width: 768px) and (max-width: 1199.98px) and (orientation: landscape) {
  body.os-module-shell.has-sidebar {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
  }

  body.os-module-shell.has-sidebar:not(.is-sidebar-collapsed) {
    grid-template-columns: auto minmax(0, 1fr) !important;
  }

  body.os-module-shell.has-sidebar.is-sidebar-collapsed {
    grid-template-columns: auto minmax(0, 1fr) !important;
  }

  body.os-module-shell .app-sidebar {
    position: sticky !important;
    top: 0 !important;
    inset: auto !important;
    transform: none !important;
    width: var(--os-sb-width-collapsed, 4.25rem) !important;
    height: 100% !important;
    max-height: 100% !important;
    box-shadow: none !important;
  }

  body.os-module-shell.has-sidebar:not(.is-sidebar-collapsed) .app-sidebar {
    width: var(--os-sb-width, 16.5rem) !important;
  }

  html.os-sidebar-collapsed body.os-module-shell.has-sidebar .app-sidebar,
  html[data-os-sidebar-collapsed="1"] body.os-module-shell.has-sidebar .app-sidebar {
    width: var(--os-sb-width-collapsed, 4.25rem) !important;
  }

  body.os-module-shell .app-sidebar-backdrop,
  body.os-module-shell.is-sidebar-open .app-sidebar-backdrop {
    display: none !important;
  }

  /* Ensure collapsed labels hide; expanded shows full nav */
  body.os-module-shell.is-sidebar-collapsed .app-sidebar__title,
  body.os-module-shell.is-sidebar-collapsed .app-sidebar__search,
  body.os-module-shell.is-sidebar-collapsed .sb-link__text,
  body.os-module-shell.is-sidebar-collapsed .sb-group__name,
  body.os-module-shell.is-sidebar-collapsed .sb-group__chevron,
  body.os-module-shell.is-sidebar-collapsed .app-sidebar__empty {
    display: none !important;
  }

  body.os-module-shell:not(.is-sidebar-collapsed) .app-sidebar__title,
  body.os-module-shell:not(.is-sidebar-collapsed) .app-sidebar__search,
  body.os-module-shell:not(.is-sidebar-collapsed) .sb-link__text,
  body.os-module-shell:not(.is-sidebar-collapsed) .sb-group__name {
    display: initial;
  }

  body.os-module-shell .app-topbar__menu {
    display: grid !important;
  }
}

/* =============================================================================
   PORTRAIT / MOBILE: Overlay Sidebar
   ============================================================================= */
@media (orientation: portrait), (max-aspect-ratio: 1/1), (max-width: 767.98px) {
  body.os-module-shell.has-sidebar,
  body.os-module-shell.has-sidebar.is-sidebar-collapsed,
  body.os-module-shell.has-sidebar:not(.is-sidebar-collapsed) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.os-module-shell .app-sidebar {
    position: fixed !important;
    inset: 0 auto var(--os-app-footer-height, 1.5rem) 0 !important;
    width: min(var(--os-sb-width, 16.5rem), 86vw) !important;
    max-width: 86vw !important;
    height: auto !important;
    max-height: none !important;
    transform: translateX(-105%) !important;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.35);
    z-index: var(--os-sb-z) !important;
  }

  body.os-rtl.os-module-shell .app-sidebar {
    inset: 0 0 var(--os-app-footer-height, 1.5rem) auto !important;
    transform: translateX(105%) !important;
  }

  body.os-module-shell.is-sidebar-open .app-sidebar {
    transform: translateX(0) !important;
  }

  body.os-module-shell .app-sidebar-backdrop {
    display: none;
  }

  body.os-module-shell.is-sidebar-open .app-sidebar-backdrop {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(10, 20, 14, 0.45);
    z-index: var(--os-sb-backdrop-z) !important;
    border: 0;
    padding: 0;
  }

  /* Overlay always shows full labels (ignore collapsed rail state) */
  body.os-module-shell.is-sidebar-collapsed .app-sidebar__title,
  body.os-module-shell.is-sidebar-collapsed .app-sidebar__search,
  body.os-module-shell.is-sidebar-collapsed .sb-link__text,
  body.os-module-shell.is-sidebar-collapsed .sb-group__name,
  body.os-module-shell.is-sidebar-collapsed .sb-group__chevron {
    display: initial !important;
  }

  body.os-module-shell.is-sidebar-collapsed .sb-link__text,
  body.os-module-shell.is-sidebar-collapsed .sb-group__name {
    display: inline !important;
  }

  body.os-module-shell.is-sidebar-collapsed .sb-link,
  body.os-module-shell.is-sidebar-collapsed .sb-group__toggle {
    justify-content: flex-start !important;
    padding-inline: 0.55rem !important;
  }

  body.os-module-shell .app-main,
  body.os-module-shell.has-sidebar > .app-main {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    grid-column: 1 / -1 !important;
    grid-area: auto !important;
  }

  body.os-module-shell .app-topbar__menu {
    display: grid !important;
  }

  body.os-module-shell .app-topbar__brand-mobile {
    display: block;
  }
}

/* No overlap: content never sits under a docked sidebar */
body.os-module-shell.has-sidebar > .app-main {
  position: relative;
  z-index: 1;
}

/* Sidebar scroll is internal only */
body.os-module-shell .app-sidebar__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}