/* SchoolDay v270.16: the admin shell's frames, from ONE place.

   Sean: "make this square ... make sure the top touches the main banner
   seamlessly. On every page, make the outermost frame square too and make
   sure the padding along the top, left and right is the same distance and
   the same on every function ... Do not overlay this with !important, fix
   the positioning and ensure these frames all get their positioning from the
   same location."

   So this file owns, and is the only thing that sets:
     - where the sidebar sits (under the banner, against the left edge, to
       the bottom of the window) and its shape;
     - the space round every function's outer frame: above it (under the
       banner), left of it (after the sidebar) and right of it (to the window);
     - the padding inside that frame, and its shape;
     - the padding inside the title frame and the space under it.

   Every distance is one of the variables below. The declarations that used
   to fight over these -- each forced with !important in its own release --
   were REMOVED from styles.css, admin-shell-v207.css, admin-shell-v209.css,
   admin-function-shell-v2365.css and admin-clubs-v27011.css, so nothing here
   needs !important. tests/ui-v27016-admin-frames.test.mjs measures every
   function in a real browser.

   Loaded last in admin.html, after admin-function-shell-v2365.css. */

:root {
  /* The one distance: banner to frame, sidebar to frame, frame to the
     window's edge, and the frame's own padding at the top, left and right. */
  --admin-frame-space-v27016: 1rem;
  /* Inside the title frame. Smaller than before (1.5rem 1.75rem). */
  --admin-title-pad-y-v27016: .6rem;
  --admin-title-pad-x-v27016: .9rem;
}

/* ---- The page under the banner ------------------------------------------ */
@media (min-width: 901px) {
  body.admin-body.admin-shell-v206-ready .admin-shell {
    width: auto;
    max-width: none;
    margin: 0;
    padding: var(--admin-frame-space-v27016) var(--admin-frame-space-v27016) var(--admin-frame-space-v27016) 0;
  }
  body.admin-shell-v206-ready #adminWorkspaceV206 {
    gap: var(--admin-frame-space-v27016);
  }

  /* The sidebar: square, from the banner's bottom edge to the window's, and
     against the left edge. The banner's height is measured (admin.js sets
     --admin-header-sticky-height, rounded UP), so the sidebar starts a pixel
     higher and the banner, drawn above it, covers the join: a rounded-up
     height could otherwise leave a hairline of page between the two. */
  body.admin-shell-v206-ready #adminSidebarV206.admin-sidebar-v206 {
    top: calc(var(--admin-header-sticky-height, 82px) - 1px);
    right: auto;
    bottom: 0;
    left: 0;
    width: var(--admin-sidebar-width-v206, 248px);
    padding: var(--admin-frame-space-v27016) .75rem;
    border-width: 0 1px 0 0;
    border-radius: 0;
    box-shadow: none;
  }
}

/* ---- Every function's outer frame --------------------------------------- */
body.admin-shell-v206-ready #adminContentV206 > .tab-panel {
  padding: var(--admin-frame-space-v27016);
  border-radius: 0;
}

/* ---- The title frame ----------------------------------------------------- */
/* The same selector as admin-function-shell-v2365.css's frame, loaded after
   it, so order decides. */
.admin-body #adminApp .tab-panel > .section-heading.admin-title-frame-v2365,
.admin-body #adminApp .tab-panel .section-heading.admin-title-frame-v2365 {
  margin: 0 0 var(--admin-frame-space-v27016);
  padding: var(--admin-title-pad-y-v27016) var(--admin-title-pad-x-v27016);
  gap: .35rem 1rem;
}