/**
 * Studio Hub — Elementor "Editor One" admin layout for the Focus shell.
 *
 * Editor One renders fixed chrome — a left rail (#editor-one-sidebar-navigation)
 * and a top bar (#editor-one-top-bar) — sized for vanilla wp-admin. Its own JS
 * (use-admin-menu-offset) re-measures WP metrics AFTER load and writes
 * --editor-one-sidebar-left-offset / --e-admin-bar-height / --e-top-bar-header-height
 * onto #wpcontent. The stock CSS then positions the chrome and sizes
 * #wpbody-content from those values, so the whole layout reflows once the JS runs
 * — the "jump" seen in the Focus shell, where the WP admin bar + menu are gone and
 * replaced by our own fixed header + breadcrumbs bar.
 *
 * Strategy: we OWN the chrome geometry. Every fixed edge below is pinned to our
 * own variables, never to Elementor's JS metrics, so nothing the Editor One JS
 * writes can move it. The variables are kept truthful by
 * compat/elementor-admin-layout.js, which measures the live shell header / top
 * bar / footer. The values here are first-paint fallbacks only.
 *
 * Dark theming lives in css/dark/vendor/elementor*.css; this file is layout only.
 */

body.yoo-focus.e-has-sidebar-navigation {
  /* Bottom of our fixed header + breadcrumbs bar (JS measures the live value). */
  --yp-eone-top: 96px;
  /* Editor One's own top bar height (JS measures the live value). */
  --yp-eone-topbar-h: 48px;
  /* Fixed shell footer (.yp-dashboard-footer) clearance (JS measures it; 0 if none). */
  --yp-eone-bottom: 56px;
  /* Rail width; follows Elementor's collapse state. */
  --yp-eone-rail-w: 240px;
  /*
   * Rail width in its OPEN state — a constant the collapse selector never touches.
   * The content's left clearance is pinned to this, so collapsing the rail does NOT
   * slide the content sideways (the freed strip is just filled by #wpbody's own
   * background instead of moving the page).
   */
  --yp-eone-rail-w-open: 240px;
  /* Comfortable reading width for server-rendered settings pages. */
  --yp-eone-content-max: 1080px;
}

body.yoo-focus.e-has-sidebar-navigation.e-sidebar-is-collapsed {
  --yp-eone-rail-w: 72px;
}

/*
 * #wpcontent holds our header (printed by in_admin_header, before #wpbody) AND
 * the page body. Elementor pads it by the rail width and offsets it by the
 * (hidden) admin menu; both would shove our full-width header sideways. Keep it
 * flush — the rail/content offsets are applied to #wpbody below instead.
 */
body.yoo-focus.e-has-sidebar-navigation #wpcontent {
  padding-inline-start: 0 !important;
  padding-block-end: 0 !important;
  --editor-one-sidebar-left-offset: 0px !important;
  --editor-one-sidebar-left-offset-collapsed: 0px !important;
}

/* Top bar: full shell width, pinned directly under our header. */
body.yoo-focus.e-has-sidebar-navigation #editor-one-top-bar > * {
  inset-block-start: var(--yp-eone-top) !important;
  inset-inline-start: 0 !important;
  inset-inline-end: 0 !important;
  width: 100% !important;
}

/* Left rail: under the top bar, above the shell footer, flush to the left edge. */
body.yoo-focus.e-has-sidebar-navigation #editor-one-sidebar-navigation {
  top: calc(var(--yp-eone-top) + var(--yp-eone-topbar-h)) !important;
  bottom: var(--yp-eone-bottom) !important;
  inset-inline-start: 0 !important;
  inset-inline-end: auto !important;
  box-shadow: 6px 0 24px rgba(0, 0, 0, 0.18);
}

/*
 * Content column: a fixed box spanning the FULL width between the top bar and the
 * footer. We set all four edges so the height is explicit — this replaces
 * Elementor's `height: calc(100vh - --e-admin-bar-height - --e-top-bar-header-height)`
 * (the JS-fed calc that caused the vertical jump). inset-inline-end:0 + width:auto
 * (instead of 100vw) respects the scrollbar-excluded viewport edge, so no
 * horizontal scrollbar flashes.
 *
 * The column starts at the LEFT edge (under the rail) rather than at the rail's
 * width: the rail floats on top, and the content itself is cleared of the rail via
 * #wpbody-content's padding below. Filling the full width means the rail's strip is
 * painted with the content background, so collapsing the rail leaves no empty void
 * — and because the clearance is a constant, the content never slides sideways.
 */
body.yoo-focus.e-has-sidebar-navigation #wpbody {
  position: fixed !important;
  inset-block-start: calc(var(--yp-eone-top) + var(--yp-eone-topbar-h)) !important;
  inset-block-end: var(--yp-eone-bottom) !important;
  inset-inline-start: 0 !important;
  inset-inline-end: 0 !important;
  width: auto !important;
  margin: 0 !important;
  background-color: var(--e-one-palette-background-default) !important;
}

/*
 * The app scrolls inside the column instead of the whole shell. The left padding
 * clears the OPEN rail and is intentionally constant (not the live collapse width),
 * so the content stays put when the rail collapses.
 */
body.yoo-focus.e-has-sidebar-navigation #wpbody-content {
  height: 100% !important;
  max-width: 100% !important;
  padding-inline-start: var(--yp-eone-rail-w-open) !important;
  padding-inline-end: 24px !important;
  padding-block-end: 32px !important;
  overflow-x: hidden !important;
  /*
   * Editor One locks the window scroll, so this box is the real scroller. Show a
   * clearly styled scrollbar whenever the content overflows so it never looks
   * "cut" — the user can see there is more to scroll.
   */
  overflow-y: auto !important;
  scrollbar-width: thin !important;
  scrollbar-color: var(--e-one-palette-text-tertiary, rgba(127, 127, 127, 0.6)) transparent !important;
  box-sizing: border-box !important;
}

body.yoo-focus.e-has-sidebar-navigation #wpbody-content::-webkit-scrollbar {
  width: 12px;
}
body.yoo-focus.e-has-sidebar-navigation #wpbody-content::-webkit-scrollbar-thumb {
  background-color: var(--e-one-palette-text-tertiary, rgba(127, 127, 127, 0.55));
  border-radius: 8px;
  border: 3px solid transparent;
  background-clip: content-box;
}
body.yoo-focus.e-has-sidebar-navigation #wpbody-content::-webkit-scrollbar-thumb:hover {
  background-color: var(--e-one-palette-text-secondary, rgba(127, 127, 127, 0.8));
  background-clip: content-box;
}

/*
 * NATIVE PAGE SCROLL for server-rendered settings pages (Tools, Role Manager,
 * Replace URL, …). Editor One turns the page into a fixed app shell whose only
 * scroller is #wpbody-content; on long settings pages that makes content look cut
 * off. These pages are plain documents, so let the whole window scroll instead:
 * the sticky shell header and the fixed Editor One chrome (top bar + rail) stay
 * pinned while the document scrolls underneath. The React Home app
 * (#e-home-screen) keeps the fixed inner-scroll shell above.
 */
html:has(body.yoo-focus.e-has-sidebar-navigation:not(:has(#e-home-screen))),
body.yoo-focus.e-has-sidebar-navigation:not(:has(#e-home-screen)),
body.yoo-focus.e-has-sidebar-navigation:not(:has(#e-home-screen)) #wpwrap,
body.yoo-focus.e-has-sidebar-navigation:not(:has(#e-home-screen)) #wpcontent {
  overflow: visible !important;
  height: auto !important;
  min-height: 0 !important;
  position: static !important;
}

body.yoo-focus.e-has-sidebar-navigation:not(:has(#e-home-screen)) #wpbody {
  position: static !important;
  inset: auto !important;
  width: auto !important;
  height: auto !important;
  min-height: calc(100vh - var(--yp-eone-top) - var(--yp-eone-bottom)) !important;
  /* Clear the fixed Editor One top bar; the sticky shell header is in flow above. */
  padding-block-start: var(--yp-eone-topbar-h) !important;
  /* Clear the fixed shell footer so the last content never hides behind it. */
  padding-block-end: calc(var(--yp-eone-bottom) + 24px) !important;
  margin: 0 !important;
  overflow: visible !important;
}

body.yoo-focus.e-has-sidebar-navigation:not(:has(#e-home-screen)) #wpbody-content {
  height: auto !important;
  display: block !important;
  overflow: visible !important;
}

/*
 * Server-rendered settings pages (Tools, Role Manager, …) get a comfortable
 * centered column instead of stretching edge-to-edge and leaving a lopsided void
 * on wide screens. The React Home app (#e-home-screen) owns its own layout and is
 * left to fill the width.
 */
body.yoo-focus.e-has-sidebar-navigation #wpbody-content > *:not(#e-home-screen):not(script):not(style) {
  max-width: var(--yp-eone-content-max) !important;
  margin-inline: auto !important;
}

/*
 * "Website Templates" tab (Import/Export Kit). Stock Elementor caps these cards at
 * max-width:700px and left-aligns them, which leaves a large void on the right of
 * the section on wide screens. Let them fill the centered content column instead so
 * the information uses the full section width.
 */
body.yoo-focus.e-has-sidebar-navigation .tab-import-export-kit__wrapper,
body.yoo-focus.e-has-sidebar-navigation .tab-import-export-kit__container {
  max-width: 100% !important;
}
body.yoo-focus.e-has-sidebar-navigation .tab-import-export-kit__wrapper {
  margin-block: 16px !important;
}
/* Trim the stock vertical padding so both cards fit without forcing a scroll. */
body.yoo-focus.e-has-sidebar-navigation .tab-import-export-kit__container {
  padding: 22px 28px !important;
}
body.yoo-focus.e-has-sidebar-navigation .tab-import-export-kit__container p {
  margin-block: 14px !important;
}
body.yoo-focus.e-has-sidebar-navigation .tab-import-export-kit__container .action-buttons {
  margin-block-start: 14px !important;
}

/* The React content app fills the column. */
body.yooadmin-theme-yooadmin-studio-hub #wpbody-content > #e-home-screen {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}