/* =========================================================
   Senditto dashboard — adaptive chrome for all desktop/laptop sizes
   Fixed sidebar + topbar, content-only scroll, clean collapse
   ========================================================= */

html.senditto-dashboard-locked,
body.senditto-dashboard-locked {
  height: 100% !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
  -webkit-overflow-scrolling: auto;
}

body.senditto-dashboard-locked,
.dashboard-shell,
.dashboard-main,
.dashboard-sidebar,
.dashboard-content,
#senditto-platform-root {
  overscroll-behavior: none !important;
  overscroll-behavior-y: none !important;
}

/* ----- Shell grid: sidebar column + flexible main ----- */
.dashboard-shell,
.dashboard-shell.collapsed {
  --side: 258px;
  display: grid !important;
  grid-template-columns: var(--side) minmax(0, 1fr) !important;
  grid-template-rows: 100% !important;
  width: 100% !important;
  max-width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  min-height: 0 !important;
  overflow: hidden !important;
  position: relative !important;
  background: #f6f8fc;
  transition: grid-template-columns 0.28s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.dashboard-shell.collapsed {
  --side: 78px;
}

/* Sidebar stays in its grid track; does not drag main content */
.dashboard-shell > .dashboard-sidebar,
.dashboard-sidebar {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  max-height: 100dvh !important;
  transform: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  z-index: 40 !important;
  min-width: 0 !important;
  transition: none !important;
}

/* Main column flexes; never pushed off-screen */
.dashboard-main {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
  position: relative !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Top bar adaptive */
.dashboard-topbar {
  position: sticky !important;
  top: 0 !important;
  flex: 0 0 auto !important;
  z-index: 30 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.dashboard-topbar > * {
  min-width: 0;
}

/* Hide React body; platform root owns pages */
.dashboard-shell .dashboard-content {
  display: none !important;
}

/* Page host */
#senditto-platform-root {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: clamp(16px, 2.2vw, 32px) clamp(14px, 2.4vw, 36px) clamp(28px, 4vw, 52px) !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch;
  background: #f6f8fc;
}

#senditto-platform-root,
#senditto-platform-root * {
  box-sizing: border-box;
}

#senditto-platform-root .pp-page,
#senditto-platform-root .tpl-page,
#senditto-platform-root .wm-page,
#senditto-platform-root .se-page,
#senditto-platform-root .an-page {
  max-width: min(1500px, 100%);
  width: 100%;
  margin: 0 auto;
}

/* Shared page heads — prevent title/actions from crushing together */
#senditto-platform-root .pp-head,
#senditto-platform-root .se-head,
#senditto-platform-root .tpl-head,
#senditto-platform-root .wm-head,
#senditto-platform-root .an-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 16px;
  width: 100%;
  min-width: 0;
}

#senditto-platform-root .pp-head > div:first-child,
#senditto-platform-root .se-head > div:first-child,
#senditto-platform-root .an-head > div:first-child {
  flex: 1 1 220px;
  min-width: 0;
}

#senditto-platform-root .pp-head-actions,
#senditto-platform-root .se-actions,
#senditto-platform-root .an-head > div:last-child {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 0 1 auto;
  max-width: 100%;
}

#senditto-platform-root h1 {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Empty states */
#senditto-platform-root .pp-empty,
#senditto-platform-root .tpl-empty,
#senditto-platform-root .wm-empty {
  text-align: center;
  padding: 40px 20px;
  color: #5b6b82;
}

/* ----- Large laptop / small desktop ----- */
@media (max-width: 1360px) {
  .dashboard-shell,
  .dashboard-shell.collapsed {
    --side: 240px;
  }

  .dashboard-shell.collapsed {
    --side: 72px;
  }
}

/* ----- Laptop ----- */
@media (max-width: 1200px) {
  .dashboard-shell,
  .dashboard-shell.collapsed {
    --side: 220px;
  }

  .dashboard-shell.collapsed {
    --side: 72px;
  }

  #senditto-platform-root {
    padding: 18px 16px 40px !important;
  }

  #senditto-platform-root .pp-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #senditto-platform-root .pp-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ----- Compact laptop / large tablet landscape ----- */
@media (max-width: 1024px) {
  .dashboard-shell,
  .dashboard-shell.collapsed {
    --side: 200px;
  }

  .dashboard-shell.collapsed {
    --side: 68px;
  }

  #senditto-platform-root .pp-head h1,
  #senditto-platform-root .se-head h1,
  #senditto-platform-root .an-head h1 {
    font-size: clamp(24px, 3.2vw, 30px) !important;
  }
}

/* ----- Narrow / tablet ----- */
@media (max-width: 900px) {
  .dashboard-shell,
  .dashboard-shell.collapsed {
    display: block !important;
    grid-template-columns: none !important;
  }

  .dashboard-shell > .dashboard-sidebar,
  .dashboard-sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: min(280px, 86vw) !important;
    height: 100dvh !important;
    transform: translateX(-105%) !important;
    transition: transform 0.28s ease !important;
    z-index: 50 !important;
    background: #fff !important;
  }

  .dashboard-sidebar.open {
    transform: translateX(0) !important;
    box-shadow: 0 0 0 100vmax rgba(15, 23, 42, 0.35);
  }

  .dashboard-main {
    width: 100% !important;
    height: 100dvh !important;
  }

  #senditto-platform-root {
    padding: 16px 14px 36px !important;
  }

  #senditto-platform-root .pp-stats,
  #senditto-platform-root .pp-grid {
    grid-template-columns: 1fr !important;
  }

  #senditto-platform-root .pp-settings-layout {
    grid-template-columns: 1fr !important;
  }

  #senditto-platform-root .ov-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Very small */
@media (max-width: 640px) {
  #senditto-platform-root {
    padding: 12px 10px 28px !important;
  }

  #senditto-platform-root .pp-head-actions .pp-btn,
  #senditto-platform-root .se-actions .se-btn {
    flex: 1 1 auto;
  }
}


/* topbar adaptive */
.dashboard-topbar {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(160px, 360px) minmax(0, 1fr) !important;
  gap: 8px 12px !important;
  padding-left: clamp(12px, 1.5vw, 28px) !important;
  padding-right: clamp(12px, 1.5vw, 28px) !important;
  box-sizing: border-box !important;
}
.dashboard-topbar .top-search-wrap {
  min-width: 0 !important;
  max-width: 100% !important;
}
.dashboard-topbar .top-search {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}
@media (max-width: 1100px) {
  .dashboard-topbar {
    grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, auto) !important;
  }
}
@media (max-width: 820px) {
  .dashboard-topbar {
    grid-template-columns: 1fr auto !important;
  }
}

/* Prevent SPA absolute/fixed sidebar leftovers from dragging content */
.dashboard-shell .dashboard-main {
  margin-left: 0 !important;
  left: auto !important;
  transform: none !important;
}
.dashboard-shell.collapsed .dashboard-main {
  margin-left: 0 !important;
}


/* ---- Shell scroll: sidebar stays fixed; only main content scrolls ----
   Help menu is a fixed body portal (topbar-menus-fix.js), so main can keep
   overflow:hidden without clipping the Help dropdown. */
.dashboard-main {
  overflow: hidden !important;
}
.dashboard-topbar {
  overflow: visible !important;
  z-index: 80 !important;
  flex: 0 0 auto !important;
}
.dashboard-topbar .top-actions,
.dashboard-topbar .top-action-wrap,
.dashboard-topbar .top-search-wrap {
  overflow: visible !important;
  position: relative !important;
  z-index: 81 !important;
}
.top-popover,
.notification-popover,
.profile-popover,
.search-popover {
  z-index: 90 !important;
  pointer-events: auto !important;
  max-height: min(70vh, 520px);
  overflow-y: auto !important;
  overflow-x: hidden !important;
}
/* SPA docs popover is replaced by portal — hide when portal owns help */
body.senditto-help-open .docs-popover {
  display: none !important;
}
/* Page host is the only vertical scroller in the main column */
#senditto-platform-root {
  z-index: 1 !important;
  position: relative !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  min-height: 0 !important;
  flex: 1 1 auto !important;
}
/* Settings: lock page chrome; only the right panel scrolls */
#senditto-platform-root:has(.st-page) {
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  padding-bottom: 0 !important;
}
/* top-dismiss under popovers, above page content */
.top-dismiss {
  z-index: 70 !important;
}

/* Database UI is a SEPARATE project (senditto-database-studio) — never re-add to this platform */