/* LifePilotOS Console — dashboard STRUCTURAL layout (DCS-024).
   Token-free, structure ONLY: the 100vh no-scroll viewport-fit freeze + the native
   nav click-overlay positioning. ALL colour/border/icon/surface styling is native
   (page-107 element settings + JetEngine listing templates, bound to --lpos-* per
   tenant). No custom JS — nav is native jet-listing-dynamic-link widgets.
   !important is required to win over Elementor's container/widget defaults; these are
   layout/structure declarations only (display/flex/height/overflow/position), never
   colour. Elementor containers only honour min-height (never a capping height) and the
   outermost container is locked to height:initial, so this freeze is the one piece that
   cannot be expressed through native container controls. */

/* ---- 100vh no-scroll freeze ---- */
html, body { height: 100% !important; min-height: 100% !important; overflow: hidden !important; }

.bl-dashboard-root {
  height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px)) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: .6em !important;
  padding: .6em !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}
.bl-dashboard-root > * { min-height: 0 !important; box-sizing: border-box !important; }

.bl-top-row,
.bl-bottom-row {
  flex: 0 0 11vh !important;
  display: flex !important;
  flex-direction: row !important;
  gap: .6em !important;
  overflow: hidden !important;
}
.bl-middle-row {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  gap: .6em !important;
  overflow: hidden !important;
}

.bl-top-left, .bl-bottom-left, .bl-top-right, .bl-bottom-right,
.bl-middle-left, .bl-middle-right { flex: 0 0 25% !important; min-width: 0 !important; overflow: hidden !important; }
.bl-top-center, .bl-middle-center, .bl-bottom-center { flex: 1 1 50% !important; min-width: 0 !important; overflow: hidden !important; }

.bl-middle-left { display: flex !important; flex-direction: row !important; gap: .6em !important; }
.bl-left-icon-menu { flex: 0 0 auto !important; overflow: hidden !important; }
.bl-left-submenu-panel { flex: 1 1 auto !important; min-height: 0 !important; overflow: hidden !important; }

/* ---- everything FITS its container — NO scroll anywhere ----
   Listing zones flex/grid to fill their column so the items fit without scrolling.
   Per the no-scroll law, item counts should be bounded to what reads well (labels show
   for a sensible count; very high counts compress). The shell itself never scrolls. */
.bl-scroll-panel { min-height: 0 !important; overflow: hidden !important; }

/* left icon rail: evenly distribute the app icons down the column */
.bl-left-icon-listing,
.bl-left-icon-listing > .elementor-widget-container,
.bl-left-icon-listing .jet-listing-grid {
  height: 100% !important; min-height: 0 !important;
  display: flex !important; flex-direction: column !important;
}
.bl-left-icon-listing .jet-listing-grid__items {
  flex: 1 1 auto !important; min-height: 0 !important;
  display: flex !important; flex-direction: column !important;
  justify-content: space-evenly !important; gap: 4px !important;
  overflow: hidden !important;
}
.bl-left-icon-listing .jet-listing-grid__item { flex: 0 1 auto !important; min-height: 0 !important; }

/* submenu: SINGLE column; items flex-fill the panel so a bounded count fills it cleanly,
   no scroll, no second column. (Item count per lens+sub-page is bounded via the grid's
   posts_num + the data, so the column is filled, not crammed.) */
.bl-left-submenu-panel, .bl-left-submenu-panel > *,
.bl-left-submenu-listing,
.bl-left-submenu-listing > .elementor-widget-container,
.bl-left-submenu-listing .jet-listing-grid {
  height: 100% !important; min-height: 0 !important;
  display: flex !important; flex-direction: column !important;
}
.bl-left-submenu-listing .jet-listing-grid__items {
  flex: 1 1 auto !important; min-height: 0 !important;
  display: flex !important; flex-direction: column !important;
  justify-content: flex-start !important;
  gap: 10px !important; overflow: hidden !important;
}
/* items keep their NATIVE pill height (template min-height); single full-width column.
   The count (grid LIMIT) is chosen so the pills fill the column — no squeeze, no scroll. */
.bl-left-submenu-listing .jet-listing-grid__item { flex: 0 0 auto !important; width: 100% !important; min-height: 0 !important; }
.bl-left-submenu-listing .jet-listing-grid__item > * { width: 100% !important; }
/* the dynamic-link widget is an absolute click-overlay (below) — zero its in-flow box so
   it doesn't inflate the fixed-height pill; centre the pill's content in its native height */
.bl-left-submenu-listing .elementor-widget-jet-listing-dynamic-link { height: 0 !important; min-height: 0 !important; position: static !important; }
.bl-left-submenu-listing .lpos-sidebar-icon .e-con-inner {
  height: 100% !important; display: flex !important; flex-direction: column !important;
  justify-content: center !important; align-items: center !important; overflow: hidden !important;
}

/* ---- top-bar lens tabs (L1) — horizontal labeled tabs, whole tab clickable ---- */
.bl-lens-tabs,
.bl-lens-tabs > .elementor-widget-container,
.bl-lens-tabs .jet-listing-grid { height: 100% !important; min-height: 0 !important; }
.bl-lens-tabs .jet-listing-grid__items {
  display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important;
  align-items: center !important; justify-content: center !important;
  gap: .4em !important; height: 100% !important; overflow: hidden !important;
}
.bl-lens-tabs .jet-listing-grid__item { position: relative !important; flex: 0 1 auto !important; min-width: 0 !important; }
.bl-lens-tabs .elementor-widget-jet-listing-dynamic-link { position: static !important; }
.bl-lens-tabs .jet-listing-grid__item * { pointer-events: none !important; }
.bl-lens-tabs a.jet-listing-dynamic-link__link {
  pointer-events: auto !important;
  position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important;
  font-size: 0 !important; z-index: 9 !important; display: block !important;
}

/* ---- MY OS right panel — single column of CCT-driven cards, fits, click overlay ---- */
.bl-myos,
.bl-myos > .elementor-widget-container,
.bl-myos .jet-listing-grid { height: 100% !important; min-height: 0 !important; display: flex !important; flex-direction: column !important; }
.bl-myos .jet-listing-grid__items {
  flex: 1 1 auto !important; min-height: 0 !important;
  display: flex !important; flex-direction: column !important; justify-content: flex-start !important;
  gap: 8px !important; overflow: hidden !important;
}
.bl-myos .jet-listing-grid__item { flex: 0 0 auto !important; width: 100% !important; min-height: 0 !important; position: relative !important; }
.bl-myos .jet-listing-grid__item > * { width: 100% !important; }
.bl-myos .jet-listing-dynamic-field { pointer-events: none !important; }
.bl-myos .elementor-widget-jet-listing-dynamic-link { height: 0 !important; min-height: 0 !important; position: static !important; }
.bl-myos .lpos-myos-card .e-con-inner { height: 100% !important; align-items: center !important; }
.bl-myos a.jet-listing-dynamic-link__link {
  pointer-events: auto !important;
  position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important;
  font-size: 0 !important; z-index: 5 !important; display: block !important;
}

/* ---- native nav click-overlay positioning ----
   Each item's jet-listing-dynamic-link covers its grid item so the whole icon/label is
   clickable; its "Read More" text is collapsed (font-size:0) so only the native
   dynamic-field icon/label shows. The icon/label fields are pointer-events:none so the
   click always reaches the covering link. Structure only. */
.bl-left-icon-listing .jet-listing-grid__item,
.bl-left-submenu-listing .jet-listing-grid__item { position: relative !important; }
.bl-left-icon-listing .elementor-widget-jet-listing-dynamic-link,
.bl-left-submenu-listing .elementor-widget-jet-listing-dynamic-link { position: static !important; }
.bl-left-icon-listing .jet-listing-dynamic-field,
.bl-left-submenu-listing .jet-listing-dynamic-field { pointer-events: none !important; }
.bl-left-icon-listing a.jet-listing-dynamic-link__link,
.bl-left-submenu-listing a.jet-listing-dynamic-link__link {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
  text-indent: -9999px !important;
  overflow: hidden !important;
  z-index: 5 !important;
  display: block !important;
}

/* ---- C2: global Read More leak hide (all dashboard dynamic links) ---- */
.bl-dashboard-root a.jet-listing-dynamic-link__link {
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
  text-indent: -9999px !important;
  overflow: hidden !important;
}
.bl-dashboard-root a.jet-listing-dynamic-link__link::after,
.bl-dashboard-root a.jet-listing-dynamic-link__link::before { content: none !important; display: none !important; }

/* ---- C4 / nav-redesign: search top-center (proto z1 search cell) ---- */
.bl-top-center,
.bl-top-center.bl-search-zone {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}
.bl-top-center > .elementor-element { width: 100% !important; max-width: 100% !important; }

/* ---- nav-redesign: lens tabs in bottom-center (proto z10 lens row) ---- */
.bl-bottom-center,
.bl-bottom-center.bl-lens-bar {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}
.bl-bottom-center > .elementor-element { width: 100% !important; max-width: 100% !important; }
.bl-bottom-lens-tabs .jet-listing-grid__items {
  justify-content: center !important;
  gap: .6em !important;
}

/* ---- C5 / M9: AI chat panel — token-bound wrapper (G-D1 shortcode exception) ---- */
.bl-ai-chat-zone,
.bl-middle-right.bl-ai-chat-zone {
  height: 100% !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  border-radius: var(--lpos-radius-md, 8px) !important;
  background: var(--lpos-panel) !important;
  border: 1px solid var(--lpos-panel-hover) !important;
  box-sizing: border-box !important;
}
.bl-ai-chat-zone > .e-con-inner,
.bl-ai-chat-zone > .elementor-widget-container {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  padding: 8px !important;
}
.bl-ai-chat-zone .mwai-chatbot-container,
.bl-ai-chat-zone .mwai-chat {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  background: transparent !important;
  color: var(--lpos-ink) !important;
}
.bl-ai-chat-zone .mwai-input,
.bl-ai-chat-zone .mwai-input textarea,
.bl-ai-chat-zone input[type="text"] {
  background: var(--lpos-overlay) !important;
  color: var(--lpos-ink) !important;
  border: 1px solid var(--lpos-panel-hover) !important;
  border-radius: var(--lpos-radius-sm, 4px) !important;
}

/* ---- H1: icon rail — 44px hit area + tooltip via title attribute ---- */
.bl-left-icon-listing .jet-listing-grid__item { min-height: 44px !important; min-width: 44px !important; }
.bl-left-icon-listing .lpos-app-icon {
  min-height: 44px !important;
  min-width: 44px !important;
  position: relative !important;
}
.bl-left-icon-listing .lpos-app-icon[title]:hover::after {
  content: attr(title) !important;
  position: absolute !important;
  left: calc(100% + 8px) !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  padding: 4px 8px !important;
  font-size: 11px !important;
  line-height: 16px !important;
  white-space: nowrap !important;
  color: var(--lpos-ink) !important;
  background: var(--lpos-panel) !important;
  border: 1px solid var(--lpos-panel-hover) !important;
  border-radius: 4px !important;
  z-index: 20 !important;
  pointer-events: none !important;
}

/* ---- H2: canvas zone — breadcrumb slot (content from DashboardEnhancements) ---- */
.bl-middle-center.bl-canvas-zone {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  min-height: 0 !important;
}
.bl-canvas-listing,
.bl-canvas-listing > .elementor-widget-container,
.bl-canvas-listing .jet-listing-grid {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

/* ---- H3: top search — command palette pattern (nav redesign: moved from bottom) ---- */
.bl-top-center .jet-ajax-search,
.bl-top-center .jet-search,
.bl-top-center .jet-search-filter,
.bl-search-zone .jet-ajax-search,
.bl-search-zone .jet-search,
.bl-search-zone .jet-search-filter {
  width: 100% !important;
  max-width: 560px !important;
  margin: 0 auto !important;
}
.bl-top-center .jet-search-filter__input,
.bl-top-center input[type="search"],
.bl-top-center .jet-search input,
.bl-top-center .jet-ajax-search input[type="search"],
.bl-search-zone .jet-search-filter__input,
.bl-search-zone input[type="search"] {
  width: 100% !important;
  background: var(--lpos-panel) !important;
  color: var(--lpos-ink) !important;
  border: 1px solid var(--lpos-panel-hover) !important;
  border-radius: 8px !important;
  padding: 8px 48px 8px 12px !important;
  font-size: 13px !important;
  line-height: 20px !important;
  min-height: 44px !important;
  box-sizing: border-box !important;
}
.bl-top-center .jet-search-filter__input::placeholder,
.bl-top-center input[type="search"]::placeholder,
.bl-search-zone input[type="search"]::placeholder {
  color: var(--lpos-muted) !important;
  opacity: 1 !important;
}
.bl-top-center .jet-search-filter__submit,
.bl-search-zone .jet-search-filter__submit { min-height: 44px !important; min-width: 44px !important; }

/* ---- H4: typography + 4px grid rhythm ---- */
.bl-dashboard-root {
  gap: 8px !important;
  padding: 8px !important;
}
.bl-top-row, .bl-bottom-row, .bl-middle-row { gap: 8px !important; }
.bl-middle-left { gap: 8px !important; }
.bl-lens-tabs .lpos-lens-label { font-size: 13px !important; line-height: 20px !important; }
.bl-left-submenu-listing .lpos-sidebar-label { font-size: 13px !important; line-height: 20px !important; }
.bl-canvas-listing .jet-listing-dynamic-field h3,
.bl-middle-center h3 { font-size: 20px !important; line-height: 28px !important; margin: 0 0 8px !important; }
.bl-canvas-listing .jet-listing-dynamic-field p { font-size: 13px !important; line-height: 20px !important; color: var(--lpos-muted) !important; }

/* ---- H5: canvas structured empty state ---- */
.bl-canvas-listing .jet-listing-grid__items:not(:has(.jet-listing-grid__item))::before,
.bl-canvas-listing .jet-listing-grid__items:empty::before {
  content: "No content for this view yet. Add rows in os_canvas_content or pick another sub-page." !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 24px 16px !important;
  font-size: 13px !important;
  line-height: 20px !important;
  color: var(--lpos-muted) !important;
  border: 1px dashed var(--lpos-panel-hover) !important;
  border-radius: 8px !important;
  min-height: 120px !important;
  box-sizing: border-box !important;
}

/* ---- M1: aurora / overlay reduction (page may still emit; soften here) ---- */
.bl-dashboard-root > .elementor-element::before,
.bl-dashboard-root .e-con::before {
  opacity: 0.04 !important;
}

/* ---- M2: double border collapse on nested panels ---- */
.bl-dashboard-root .bl-left-submenu-panel,
.bl-dashboard-root .bl-middle-center,
.bl-dashboard-root .bl-middle-right,
.bl-dashboard-root .bl-left-icon-menu {
  box-shadow: none !important;
  outline: none !important;
}

/* ---- M3: top row balance (user | lens tabs | actions) ---- */
.bl-top-left { flex: 0 0 20% !important; }
.bl-top-center { flex: 1 1 50% !important; }
.bl-top-right { flex: 0 0 25% !important; }
.bl-user-menu .jet-listing-grid__items {
  display: flex !important;
  flex-direction: row !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 4px !important;
}

/* ---- M4: agent row labels (screen-reader + optional visible micro-label) ---- */
.bl-agents .jet-listing-grid__item { position: relative !important; }
.bl-agents .lpos-agent-label {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ---- M5: mobile / tablet — stack middle row, preserve no-scroll law ---- */
@media (max-width: 1024px) {
  .bl-middle-row { flex-direction: column !important; }
  .bl-middle-left, .bl-middle-center, .bl-middle-right {
    flex: 1 1 auto !important;
    width: 100% !important;
    max-height: 33% !important;
  }
  .bl-top-row { flex: 0 0 auto !important; min-height: 48px !important; }
  .bl-lens-tabs .jet-listing-grid__items { flex-wrap: wrap !important; justify-content: center !important; gap: 4px !important; }
  .bl-left-icon-listing .lpos-app-icon[title]:hover::after { display: none !important; }
}
@media (max-width: 767px) {
  .bl-top-left { display: none !important; }
  .bl-top-center { flex: 1 1 auto !important; }
  .bl-top-right { flex: 0 0 auto !important; }
  .bl-bottom-row { flex: 0 0 auto !important; }
}

/* ---- M8: a11y — focus rings + reduced motion ---- */
.bl-dashboard-root a.jet-listing-dynamic-link__link:focus-visible,
.bl-dashboard-root .jet-search-filter__input:focus-visible,
.bl-dashboard-root button:focus-visible {
  outline: 2px solid var(--lpos-accent) !important;
  outline-offset: 2px !important;
}
@media (prefers-reduced-motion: reduce) {
  .bl-dashboard-root * { transition: none !important; animation: none !important; }
}

/* ---- agents + top actions: horizontal icon rows ---- */
.bl-agents,
.bl-agents > .elementor-widget-container,
.bl-agents .jet-listing-grid,
.bl-user-menu.bl-lens-tabs,
.bl-user-menu.bl-lens-tabs > .elementor-widget-container,
.bl-user-menu.bl-lens-tabs .jet-listing-grid {
  height: 100% !important;
  min-height: 0 !important;
}
.bl-agents .jet-listing-grid__items,
.bl-user-menu.bl-lens-tabs .jet-listing-grid__items {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  height: 100% !important;
}
.bl-agents .jet-listing-grid__item,
.bl-user-menu.bl-lens-tabs .jet-listing-grid__item {
  position: relative !important;
  flex: 0 0 auto !important;
  min-width: 44px !important;
  min-height: 44px !important;
}
.bl-agents a.jet-listing-dynamic-link__link,
.bl-user-menu.bl-lens-tabs a.jet-listing-dynamic-link__link {
  pointer-events: auto !important;
  position: absolute !important;
  inset: 0 !important;
}

/* ---- KPI row + molecules (C1/M7) ---- */
.lpos-kpi-row { display: flex !important; flex-direction: row !important; align-items: baseline !important; gap: 8px !important; }
.lpos-kpi-value { font-size: 24px !important; line-height: 32px !important; font-weight: 700 !important; color: var(--lpos-ink) !important; }
.lpos-kpi-label { font-size: 11px !important; line-height: 16px !important; color: var(--lpos-muted) !important; text-transform: uppercase !important; letter-spacing: .04em !important; }
.lpos-sr-only {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important;
}
.bl-canvas-listing .jet-listing-grid__items {
  display: flex !important; flex-direction: column !important; gap: 8px !important;
  flex: 1 1 auto !important; min-height: 0 !important; overflow: hidden !important;
}
.bl-canvas-listing .jet-listing-grid__item { flex: 0 0 auto !important; width: 100% !important; }