/*
Global stylesheet for the simple protected layouts and the surfaces they own — the Dashboard landing
(Protected/Layouts/DashboardLayout.razor + Protected/Pages/Dashboard/Dashboard.razor), the system-admin
shell (Protected/Layouts/AdminLayout.razor) and the below-minimum interstitial
(Protected/Shell/MinResolutionGate.razor).

WHY THIS FILE EXISTS. These rules previously lived in Client-project *.razor.css files, which this app
does NOT serve: App.razor links only the host's own scoped bundle (TV.BlazorApp.Server.styles.css, which
does not aggregate the WASM Client's scoped CSS) plus the global sheets. So those rules never reached the
browser at all — the layouts got their dark look incidentally from body { background-color } and
html.dark-chrome. Consolidating them here is the same decision as grid-shell.css / account-app.css /
app-chrome.css: shell CSS must be global to exist at runtime. The four source files are now intentionally
empty pointers, and TV.BlazorApp.bUnit.test/Protected/DeadScopedCssTests.cs fails the build if a rule is
authored back into one.

Every rule is scoped under the owning layout's own class so it cannot collide with the public pages, the
account pages or the operational shell. Colour comes from the per-theme var(--shell-*) roles declared in
custom.css — no literal colour belongs in a protected shell sheet, because a literal is exactly what makes
a theme unswitchable.
*/

/* ===== Shared: skip link ==========================================================================
   The one deliberately UNSCOPED rule in the protected sheets. Every protected layout renders
   `<a class="skip-link">` as a sibling of its shell root (outside the theme provider, so it survives the
   shell <-> min-resolution-interstitial swap), and a visually-hidden-until-focused skip link is
   universally correct wherever else `.skip-link` appears. Moved here from grid-shell.css, which is the
   operational-chunk sheet and was only its home by accident.

   It sits OUTSIDE the element that carries the theme class, so its surface roles resolve against the
   theme class App.razor stamps on the document root — which is exactly what that stamp is for. */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: 0.5rem 1rem;
    background: var(--shell-focus);
    color: var(--shell-on-focus);
    font-weight: bold;
    text-decoration: none;
}

.skip-link:focus {
    left: 0;
}

/* ===== Dashboard landing (/app) ====================================================================
   Header + a single content column. Reflows responsively — this layout is NOT resolution-gated. */
.dashboard-layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--shell-surface);
    color: var(--shell-on-surface-body);
}

.dashboard-layout__main {
    flex: 1 1 auto;
    padding: 1rem;
}

/* Dashboard page content — the accessible-areas card grid. */
.dashboard {
    max-width: 60rem;
}

.dashboard h1 {
    margin-top: 0;
}

.dashboard__section {
    margin-bottom: 2rem;
}

.dashboard__areas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dashboard__area {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 3rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--shell-card-border);
    border-radius: 0.4rem;
    color: inherit;
    text-decoration: none;
}

.dashboard__area:hover {
    background: var(--shell-fill);
}

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

/* ===== System admin (/admin) =======================================================================
   A full-shell, data-dense area (minimum-resolution-gated), so it targets the supported desktop envelope
   (>= 1280x720) rather than reflowing to mobile. Static widths for now; the resizable-panel treatment is
   deferred to the drag-resize hardening work. */
.admin-layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--shell-surface);
    color: var(--shell-on-surface-body);
}

.admin-layout__body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: row;
}

.admin-layout__nav {
    flex: 0 0 15rem;
    padding: 0.75rem 1rem;
    border-right: 1px solid var(--shell-rule-panel);
}

.admin-layout__nav ul {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.admin-layout__nav a {
    display: block;
    min-height: 1.5rem;
    padding: 0.35rem 0.4rem;
    border-radius: 0.3rem;
    color: inherit;
    text-decoration: none;
}

/* Normalised to the shared --shell-fill hover step (the dead sheet used a one-off 10% white, out of step
   with the 8% used by every other protected hover). */
.admin-layout__nav a:hover {
    background: var(--shell-fill);
}

.admin-layout__main {
    flex: 1 1 auto;
    padding: 1rem;
    overflow: auto;
}

/* ===== Below-minimum interstitial ==================================================================
   Replaces the ENTIRE gated shell, so it owns the <main> landmark and its own layout. It renders in place
   of the themed shell root, so — like the skip link above — its surface roles resolve against the theme
   class stamped on the document root, not against a shell root. */
.min-resolution {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 1.5rem;
    background: var(--shell-surface);
    color: var(--shell-on-surface-body);
}

.min-resolution__panel {
    max-width: 34rem;
    text-align: center;
}

.min-resolution__heading {
    margin: 0 0 0.75rem;
    font-size: 1.5rem;
    line-height: 1.2;
}

/* Remove the focus ring's default look but keep it visible — the heading takes focus on the swap. */
.min-resolution__heading:focus-visible {
    outline: 2px solid var(--shell-focus);
    outline-offset: 4px;
}

.min-resolution__body {
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
}