/*
Global stylesheet for the protected operational-chunk shell (Protected/Layouts/GridLayout.razor).

This is a NON-ISOLATED global sheet (linked from App.razor), NOT a GridLayout.razor.css scoped file —
the same decision as account-shell.css: this app does not serve Client-project scoped CSS (only the
host's own scoped bundle + these global sheets are linked), so shell styling must live in a global sheet
to actually reach the browser. Every rule is scoped under the `page` custom element (unique to this
shell) so it cannot collide with the public pages or account pages. Colour comes from the per-theme
var(--shell-*) roles declared in custom.css — no literal colour belongs here, because a literal is exactly
what makes a theme unswitchable.

The grid tracks are driven by CSS custom properties written onto <page> by GridLayout.razor.js (the
single writer of the size vars) — never a reactive style binding — so an incidental re-render cannot
stomp a live drag. Every var has a 0px fallback, so the pre-JS paint is a valid (if empty) grid.
*/

page {
    --header-height: 50px;
    /* Fixed-height status chrome row at the very bottom (AppFootbar). A CONSTANT, not a JS-driven size
       var like --footer-height — it never resizes; the fallback matches the file's "every var has a
       fallback" invariant so a typo can't drop a calc(). */
    --footbar-height: 2.125rem;
    --background-color: var(--shell-surface);
    --panel-padding: 3px;
    --control-color: var(--shell-control);
    --draggable-active-color: var(--shell-drag-active);
    --draggable-handle-size: 10px;
    --panel-tag-width: 20px;
    --panel-tag-height: 20px;

    user-select: none;
    background-color: var(--background-color);

    display: grid;
    align-items: stretch;

    color: var(--shell-on-surface);

    grid-template-columns:
        [menu] var(--main-menu-width, 0px)
        [main-menu-draggable] var(--main-menu-handle, 0px)
        [sub-menu] var(--sub-menu-width, 0px)
        [sub-menu-draggable] var(--sub-menu-handle, 0px)
        [main] minmax(0, 1fr)
        [sidebar-draggable] var(--sidebar-handle, 0px)
        [sidebar] var(--sidebar-width, 0px);

    grid-template-rows:
        [header] var(--header-height)
        [main] minmax(0, 1fr)
        [footer-draggable] var(--footer-handle, 0px)
        [footer] var(--footer-height, 0px)
        [footbar] var(--footbar-height, 2.125rem);

    grid-template-areas:
        'header header header header header header header'
        'menu main-menu-draggable sub-menu sub-menu-draggable main sidebar-draggable sidebar'
        'menu footer-draggable footer-draggable footer-draggable footer-draggable footer-draggable footer-draggable'
        'menu footer footer footer footer footer footer'
        'footbar footbar footbar footbar footbar footbar footbar';

    /* The 1fr main row absorbs the footbar row's height, so the grid still fills exactly 100vh (do NOT
       change this to calc(100vh + footbar) — that would push the grid past the viewport). */
    min-height: 100vh;
}

/* AppHeader's root <header> carries AppHeader's own scope, so place it into the header area by descendant. */
page .app-header {
    grid-area: header;
    align-self: stretch;
    position: sticky;
    top: 0;
}

/* AppFootbar's root <footer> — the fixed status chrome row at the bottom (mirrors .app-header). A static
   grid item; the sticky footer panel and the fixed drag handle / tags paint above it but never overlap
   its row. */
page .app-footbar {
    grid-area: footbar;
    align-self: stretch;
}

/* Skip link — deliberately unscoped (it renders as a sibling of <page>) and shared by every protected
   layout, so it now lives in app-layouts.css alongside the other cross-layout protected chrome. */

page main {
    display: block;
    grid-area: main;
    margin: 0;
    background-color: var(--background-color);
    padding: 0.5rem;
    overflow: auto;
}

page .sticky-column {
    align-self: start;
    position: sticky;
    top: var(--header-height);
    justify-self: stretch;
}

page main-menu {
    grid-area: menu;
    /* The menu column spans body + footer areas but NOT the footbar row, so subtract the footbar height. */
    height: calc(100vh - var(--header-height) - var(--footbar-height, 2.125rem));
    overflow: hidden;
}

page .menu-content {
    height: calc(100vh - var(--header-height) - var(--footbar-height, 2.125rem));
    flex-grow: 1;

    display: grid;
    align-items: stretch;
    grid-template-rows: [menu-header] 100px [menu-body] auto [menu-footer] 50px;
    grid-template-areas:
        'menu-header'
        'menu-body'
        'menu-footer'
;
}

page menu-header {
    grid-area: menu-header;
    /* Accent framing for the chunk panel, kept in sync with menu-footer below. The fill and its ink are
       a matched pair per colourway — the contrast reasoning behind each value lives with the values, on
       the theme blocks in custom.css, because it has to be re-derived per surface and not inherited. */
    background-color: var(--shell-chunk-header-surface);
    color: var(--shell-on-chunk-header);
    overflow-wrap: break-word;

    padding: calc(var(--panel-tag-height) + 5px) 0.5rem 0.5rem 0.5rem;
}

page menu-body {
    grid-area: menu-body;
    background-color: var(--shell-chunk-body-surface);
    overflow-wrap: break-word;
    overflow-y: auto;
    padding: 0.5rem;
}

/* Chunk-nav links do NOT take the theme's --cctc-link-color: that role is scoped to the page canvas,
   and on the chunk panel's own fill it fails WCAG 1.4.3 (CCTC-team/TrialView#42). They take the panel's
   matched ink instead — the conventional treatment for navigation on a coloured panel, which also leaves
   the accent free to mark the ACTIVE item, which is what an accent should carry. */
page menu-body .chunk-nav a,
page menu-body .chunk-nav a:visited {
    color: var(--shell-on-chunk-body);
}

page menu-footer {
    grid-area: menu-footer;
    /* Matches menu-header (see note there) so the accent framing stays consistent. */
    background-color: var(--shell-chunk-header-surface);
    color: var(--shell-on-chunk-header);
    padding: 0.5rem;
}

page sub-menu {
    grid-area: sub-menu;
    background-color: var(--background-color);
}

page .sub-menu-content {
    overflow-y: auto;
    padding: 0.5rem;
    padding-top: calc(var(--panel-tag-height) + 5px);
    /* Leave room for an open footer (its height plus its drag handle; both fall back to 0) and the fixed
       footbar row at the bottom. */
    height: calc(100vh - var(--header-height) - var(--footer-height, 0px) - var(--footer-handle, 0px) - var(--footbar-height, 2.125rem));
}

page sidebar {
    grid-area: sidebar;
    overflow: hidden;
}

page .sidebar-content {
    height: calc(100vh - var(--header-height) - var(--footer-height, 0px) - var(--footer-handle, 0px) - var(--footbar-height, 2.125rem));
    flex-grow: 1;

    display: grid;
    align-items: stretch;

    grid-template-rows: [sidebar-header] 100px [sidebar-body] auto;
    grid-template-areas:
        'sidebar-header'
        'sidebar-body'
;
}

page sidebar-header {
    grid-area: sidebar-header;
    background-color: var(--shell-sidebar-header-surface);
    color: var(--shell-on-sidebar-header);
    flex-shrink: 1;
    padding: 0.5rem;
}

page sidebar-body {
    grid-area: sidebar-body;
    background-color: var(--shell-sidebar-body-surface);
    /* The panel's own matched ink, NOT the shell's inherited body ink — see the sidebar-body roles in
       custom.css for why the two differ on this fill (CCTC-team/TrialView#42). */
    color: var(--shell-on-sidebar-body);
    overflow-wrap: break-word;
    overflow-y: auto;
    padding: 0.5rem;
}

page main-menu-draggable {
    grid-area: main-menu-draggable;
}

page sub-menu-draggable {
    grid-area: sub-menu-draggable;
}

page sidebar-draggable {
    grid-area: sidebar-draggable;
}

/* The column separators are thin (one handle wide) but need a ≥24px pointer target (WCAG 2.5.8) and a
   pointer-events drag that touch scrolling can't hijack. The invisible ::before widens the hit area;
   pointer events on it still target the host separator (so the JS data-panel lookup works). */
page main-menu-draggable, page sub-menu-draggable, page sidebar-draggable {
    position: relative;
    touch-action: none;
}

page main-menu-draggable::before, page sub-menu-draggable::before, page sidebar-draggable::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
}

page main-menu-draggable:hover, page sub-menu-draggable:hover, page sidebar-draggable:hover {
    cursor: col-resize;
    background-color: var(--draggable-active-color);
}

page footer-draggable {
    grid-area: footer-draggable;
    position: fixed;
    width: 100%;
    background-color: var(--background-color);
    touch-action: none;
    /* Size-derived position/height, driven by the JS-owned vars (0px when the footer is collapsed). Sits
       above the footer panel, which itself sits above the fixed footbar row — hence the footbar offset. */
    left: var(--main-menu-width, 0px);
    bottom: calc(var(--footer-height, 0px) + var(--footbar-height, 2.125rem));
    height: var(--footer-handle, 0px);
}

page footer-draggable::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 24px;
}

page footer-draggable:hover {
    cursor: row-resize;
    background-color: var(--draggable-active-color);
}

/* Keyboard-operable resize separators: a visible focus ring so keyboard users can see the target. */
page [role="separator"]:focus-visible {
    outline: 2px solid var(--shell-focus);
    outline-offset: -2px;
}

page .panel-tag {
    width: var(--panel-tag-width);
    height: var(--panel-tag-height);
    border: 0;
    margin: 0;
    border-radius: 0 0 0 5px;
    background-color: var(--background-color);
    color: var(--control-color);
    position: fixed;
    padding-top: 2px;
    padding-left: 3px;
    font: inherit;
    cursor: pointer;
}

page .panel-tag:focus-visible {
    outline: 2px solid var(--shell-focus);
    outline-offset: 2px;
}

/* Size-derived panel-tag positions — static calc() over the JS-owned vars. A collapsed panel zeroes its
   width and handle vars, so these expressions also give the collapsed position. */
page #main-menu-tag {
    top: var(--header-height);
    left: calc(var(--main-menu-width, 0px) - var(--panel-tag-width));
}

page #sub-menu-tag {
    top: var(--header-height);
    left: calc(var(--main-menu-width, 0px) + var(--sub-menu-width, 0px) - var(--draggable-handle-size));
}

page #sidebar-tag {
    top: var(--header-height);
    right: calc(var(--sidebar-width, 0px) + var(--sidebar-handle, 0px));
}

page #footer-tag {
    right: 0;
    bottom: calc(var(--footer-height, 0px) + var(--footer-handle, 0px) + var(--footbar-height, 2.125rem));
}

/* The main-menu and sub-menu tags are the only genuinely state-driven (non-arithmetic) hide: on the
   mobile tier both menus are inaccessible, so their tags are removed. */
page.mobile #main-menu-tag,
page.mobile #sub-menu-tag {
    display: none;
}

page .panel-tag > div {
    margin-left: -0.3rem;
    margin-top: -0.3rem;
}

page .footer-panel-tag {
    border-radius: 5px 0 0 0;
}

page .panel-tag:hover {
    cursor: pointer;
    background-color: var(--draggable-active-color);
}

page .rotate180 {
    transform: rotate(180deg);
    transition: transform 0.2s;
}

page .rotate90 {
    transform: rotate(90deg);
    transition: transform 0.2s;
}

page .rotate270 {
    transform: rotate(270deg);
    transition: transform 0.2s;
}

@media (prefers-reduced-motion: reduce) {
    page .rotate180, page .rotate90, page .rotate270 {
        transition: none;
    }
}

/* The resizable detail-panel footer — :not(.app-footbar) is essential: the status footbar is ALSO a
   <footer> inside <page>, and without the exclusion it would inherit this position/offset and be lifted
   off the viewport bottom by --footbar-height. The footbar is placed by page .app-footbar (grid-area:
   footbar) and must stay statically positioned. */
page footer:not(.app-footbar) {
    grid-area: footer;
    position: sticky;
    /* The grid row order already places this footer panel above the footbar row, and this shell never
       scrolls (EnableScrollYListener = false), so this sticky offset is inert today — kept defensively.
       NOTE: if page is ever made scrollable, or this footer becomes position:fixed, this offset would
       then double-count against the footbar grid row and open a footbar-height gap — revisit here. */
    bottom: var(--footbar-height, 2.125rem);
}

page .footer-content {
    width: 100%;
    overflow-y: auto;
    background-color: var(--shell-scaffold);
    height: var(--footer-height, 0px);
}

/* Pad the footer content only while it is open, so a collapsed (0px) footer adds no stray height. */
page.has-footer-open .footer-content {
    padding: 0.5rem;
}