/*
  Version 3 application shell.

  Standalone stylesheet for v3.html only — it does not touch, override, or
  get loaded alongside css/styles.css (the Phase 9.7 stylesheet). Deliberately
  a distinct, restrained light theme (dark maroon accent, neutral gray
  background, white content panels) rather than a reskin of Phase 9.7's dark
  theme, so the two entry points can never visually bleed into one another.
*/

:root {
  --v3-maroon: #5c1a2e;
  --v3-maroon-dark: #3f1120;
  --v3-maroon-light: #8a3350;
  --v3-bg: #eef0f2;
  --v3-surface: #ffffff;
  --v3-surface-muted: #f6f7f8;
  --v3-border: #d7dbe0;
  --v3-border-strong: #c1c7ce;
  --v3-text: #1c2024;
  --v3-text-muted: #5b6572;
  --v3-focus-ring: #1a5fb4;
  --v3-radius-sm: 8px;
  --v3-radius-md: 12px;
  --v3-sidebar-width: 264px;
  --v3-sidebar-width-collapsed: 72px;
  --v3-header-height: 68px;
  --v3-space-1: 4px;
  --v3-space-2: 8px;
  --v3-space-3: 12px;
  --v3-space-4: 16px;
  --v3-space-5: 24px;
  --v3-space-6: 32px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--v3-bg);
  color: var(--v3-text);
  font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
}

.v3-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.v3-skip-link {
  position: absolute;
  top: -48px;
  left: var(--v3-space-3);
  z-index: 100;
  padding: var(--v3-space-2) var(--v3-space-4);
  background: var(--v3-maroon);
  color: #fff;
  border-radius: var(--v3-radius-sm);
  text-decoration: none;
  transition: top 0.15s ease;
}

.v3-skip-link:focus {
  top: var(--v3-space-3);
}

/* Focus visibility — every interactive control gets a clear, high-contrast
   ring. Uses :focus-visible so a mouse click doesn't leave a ring behind. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 3px solid var(--v3-focus-ring);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------- */
/* The hidden attribute actually hides                                     */
/* ---------------------------------------------------------------------- */

/*
 * The browser's own `[hidden] { display: none }` comes from the user-agent
 * stylesheet, so *any* author rule that sets `display` on a class beats it.
 * `.v3-import-results { display: flex }` did exactly that, which is why every
 * shared import panel painted an empty "Import Summary / Record Preview /
 * Validation" before a file had been chosen: the controller set `hidden`
 * correctly on each render and the stylesheet ignored it.
 *
 * Two panels had already been patched one at a time
 * (`[data-force-measurement-import-root][hidden]`,
 * `[data-roster-import-root][hidden]`). This is the same fix applied once, for
 * the fifty-odd elements in v3.html whose visibility is driven by the
 * attribute. `!important` is the point rather than a shortcut: the rule has to
 * outrank a class that sets `display`, and nothing in this application ever
 * wants a `hidden` element painted.
 */
[hidden] {
  display: none !important;
}

/* ---------------------------------------------------------------------- */
/* Shell layout                                                            */
/* ---------------------------------------------------------------------- */

.v3-shell {
  display: grid;
  grid-template-columns: var(--v3-sidebar-width) 1fr;
  min-height: 100vh;
}

.v3-sidebar {
  grid-row: 1 / -1;
  display: flex;
  flex-direction: column;
  background: var(--v3-surface);
  border-right: 1px solid var(--v3-border);
  min-width: 0;
}

.v3-content {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* ---------------------------------------------------------------------- */
/* Brand                                                                   */
/* ---------------------------------------------------------------------- */

.v3-brand {
  display: flex;
  align-items: center;
  gap: var(--v3-space-3);
  padding: var(--v3-space-5) var(--v3-space-4);
  border-bottom: 1px solid var(--v3-border);
}

.v3-brand-mark {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--v3-radius-md);
  background: var(--v3-maroon);
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
}

.v3-brand-eyebrow {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--v3-text-muted);
}

.v3-brand-title {
  margin: var(--v3-space-1) 0 0;
  font-size: 0.95rem;
  font-weight: 700;
}

/* ---------------------------------------------------------------------- */
/* Sidebar navigation                                                      */
/* ---------------------------------------------------------------------- */

.v3-nav {
  flex: 1;
  overflow-y: auto;
  padding: var(--v3-space-3) 0;
}

.v3-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--v3-space-1);
}

.v3-nav-link {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--v3-space-2);
  padding: var(--v3-space-3) var(--v3-space-4);
  border: 0;
  border-left: 3px solid transparent;
  background: transparent;
  color: var(--v3-text);
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.v3-nav-link:hover {
  background: var(--v3-surface-muted);
}

.v3-nav-link[aria-current="page"] {
  background: var(--v3-surface-muted);
  border-left-color: var(--v3-maroon);
  color: var(--v3-maroon);
}

.v3-nav-badge {
  flex-shrink: 0;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--v3-surface-muted);
  border: 1px solid var(--v3-border);
  color: var(--v3-text-muted);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.v3-nav-badge--active {
  background: var(--v3-maroon);
  border-color: var(--v3-maroon);
  color: #fff;
}

.v3-sidebar-footer {
  padding: var(--v3-space-4);
  border-top: 1px solid var(--v3-border);
}

.v3-sidebar-footer-label {
  margin: 0 0 var(--v3-space-2);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--v3-text-muted);
}

.v3-status {
  display: flex;
  align-items: center;
  gap: var(--v3-space-2);
  font-size: 0.82rem;
  color: var(--v3-text-muted);
}

.v3-status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #2e8b57;
  flex-shrink: 0;
}

/* Collapsed rail: labels/badges/footer text visually hidden (still present
   for assistive tech) rather than removed from the DOM. */
.v3-sidebar.is-collapsed .v3-brand-text,
.v3-sidebar.is-collapsed .v3-nav-label,
.v3-sidebar.is-collapsed .v3-nav-badge,
.v3-sidebar.is-collapsed .v3-sidebar-footer-label,
.v3-sidebar.is-collapsed .v3-status span:last-child {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.v3-sidebar.is-collapsed .v3-nav-link {
  justify-content: center;
}

/* ---------------------------------------------------------------------- */
/* Header                                                                  */
/* ---------------------------------------------------------------------- */

.v3-header {
  display: flex;
  align-items: center;
  gap: var(--v3-space-4);
  min-height: var(--v3-header-height);
  padding: 0 var(--v3-space-5);
  background: var(--v3-surface);
  border-bottom: 1px solid var(--v3-border);
}

.v3-icon-button {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border: 1px solid var(--v3-border);
  border-radius: var(--v3-radius-sm);
  background: var(--v3-surface);
  color: var(--v3-text);
  font-size: 1.1rem;
  cursor: pointer;
}

.v3-icon-button:hover {
  background: var(--v3-surface-muted);
}

.v3-header-heading {
  min-width: 0;
}

.v3-header-eyebrow {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--v3-text-muted);
}

.v3-header-heading h1 {
  margin: var(--v3-space-1) 0 0;
  font-size: 1.15rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.v3-header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--v3-space-3);
}

.v3-button {
  padding: var(--v3-space-2) var(--v3-space-4);
  border-radius: var(--v3-radius-sm);
  border: 1px solid var(--v3-border);
  background: var(--v3-surface);
  color: var(--v3-text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.v3-button:hover {
  background: var(--v3-surface-muted);
}

.v3-button--primary {
  background: var(--v3-maroon);
  border-color: var(--v3-maroon);
  color: #fff;
}

.v3-button--primary:hover {
  background: var(--v3-maroon-dark);
  border-color: var(--v3-maroon-dark);
}

/* ---------------------------------------------------------------------- */
/* Global filter bar                                                       */
/* ---------------------------------------------------------------------- */

.v3-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--v3-space-4);
  padding: var(--v3-space-4) var(--v3-space-5);
  background: var(--v3-surface);
  border-bottom: 1px solid var(--v3-border);
}

.v3-filter-field {
  display: flex;
  flex-direction: column;
  gap: var(--v3-space-1);
}

.v3-filter-field label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--v3-text-muted);
}

.v3-filter-field select,
.v3-filter-field input {
  padding: var(--v3-space-2) var(--v3-space-3);
  border: 1px solid var(--v3-border-strong);
  border-radius: var(--v3-radius-sm);
  background: var(--v3-surface);
  color: var(--v3-text);
  font: inherit;
  min-width: 160px;
}

.v3-filter-field select:disabled,
.v3-filter-field input:disabled {
  background: var(--v3-surface-muted);
  color: var(--v3-text-muted);
  cursor: not-allowed;
}

.v3-date-range {
  display: flex;
  align-items: center;
  gap: var(--v3-space-2);
}

.v3-date-range input {
  min-width: 140px;
}

.v3-filter-note {
  margin: 0 0 var(--v3-space-2);
  font-size: 0.78rem;
  color: var(--v3-text-muted);
}

/* ---------------------------------------------------------------------- */
/* Main content                                                            */
/* ---------------------------------------------------------------------- */

.v3-main {
  flex: 1;
  padding: var(--v3-space-5);
}

.v3-main:focus-visible {
  outline: none;
}

.v3-panel {
  max-width: 760px;
  padding: var(--v3-space-5);
  background: var(--v3-surface);
  border: 1px solid var(--v3-border);
  border-radius: var(--v3-radius-md);
}

.v3-panel h2 {
  margin-top: 0;
}

.v3-panel-status {
  display: inline-block;
  margin-bottom: var(--v3-space-3);
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--v3-maroon);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/*
 * A panel's introductory paragraph.
 *
 * Distinct from `.v3-panel-status` above, which is a pill badge sized for a
 * short label ("First implementation target"). Several panels need a sentence
 * or two explaining what the page is and what it deliberately does not do, and
 * multi-line uppercase 0.7rem text inside a 999px-radius pill is unreadable --
 * a defect found by rendering the page in a browser rather than by reading the
 * markup.
 */
.v3-panel-intro {
  max-width: 76ch;
  margin: 0 0 var(--v3-space-4);
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--v3-text-muted);
}

.v3-panel p {
  color: var(--v3-text-muted);
}

/* ---------------------------------------------------------------------- */
/* Sidebar collapse (desktop: shrink to icon rail)                         */
/* ---------------------------------------------------------------------- */

@media (min-width: 900px) {
  .v3-shell {
    transition: grid-template-columns 0.15s ease;
  }

  /* At desktop the sidebar is a grid column, never an overlay, so there is
     nothing for a scrim to sit behind. Hidden here regardless of shell state
     so a stale open state after a resize cannot leave it covering the page. */
  .v3-sidebar-scrim {
    display: none;
  }

  .v3-shell--sidebar-collapsed {
    grid-template-columns: var(--v3-sidebar-width-collapsed) 1fr;
  }
}

/* ---------------------------------------------------------------------- */
/* Tablet / narrow laptop: sidebar becomes an off-canvas drawer            */
/* ---------------------------------------------------------------------- */

@media (max-width: 899px) {
  .v3-shell {
    display: block;
  }

  /* The drawer is CLOSED here unless the shell says otherwise.
     Until P10 this rule set `transform: translateX(0)` -- open -- so from
     899px down the sidebar sat fixed at left:0 over a main region still
     starting at x=0, covering 264px of it on every page. The shell's single
     `sidebarCollapsed` boolean means "expanded" at desktop, where expanded
     costs a grid column, and the same value meant "drawer over the content"
     here. `app/appShell.js` now defaults that boolean per viewport; this rule
     is its other half. */
  .v3-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 50;
    width: min(var(--v3-sidebar-width), 84vw);
    transform: translateX(-100%);
    /* Not merely off-screen: a translated element keeps its links in the tab
       order and the accessibility tree, so before P10 a closed drawer still
       cost twelve invisible tab stops. */
    visibility: hidden;
    box-shadow: 0 0 0 1px var(--v3-border);
    transition: transform 0.15s ease, visibility 0.15s;
  }

  .v3-shell--sidebar-open .v3-sidebar {
    transform: translateX(0);
    visibility: visible;
  }

  /* The scrim, which exists only while the drawer is open over content. */
  .v3-sidebar-scrim {
    position: fixed;
    inset: 0;
    z-index: 40;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: rgba(28, 32, 36, 0.45);
    cursor: pointer;
  }

  .v3-sidebar-scrim:focus-visible {
    outline: 3px solid var(--v3-focus-ring);
    outline-offset: -6px;
  }

  /* Below 900px, "collapsed" moves the whole drawer off-screen instead of
     shrinking it to a rail, so the rail's label-hiding rule never needs to
     apply here — when the drawer is open (not collapsed) labels render
     normally already. */
  .v3-shell--sidebar-open .v3-sidebar.is-collapsed .v3-brand-text,
  .v3-shell--sidebar-open .v3-sidebar.is-collapsed .v3-nav-label,
  .v3-shell--sidebar-open .v3-sidebar.is-collapsed .v3-nav-badge,
  .v3-shell--sidebar-open .v3-sidebar.is-collapsed .v3-sidebar-footer-label,
  .v3-shell--sidebar-open .v3-sidebar.is-collapsed .v3-status span:last-child {
    position: static;
    width: auto;
    height: auto;
    padding: inherit;
    margin: inherit;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }

  .v3-content {
    width: 100%;
  }

  .v3-filter-bar {
    align-items: stretch;
  }

  .v3-filter-field select,
  .v3-filter-field input,
  .v3-date-range {
    min-width: 0;
  }
}

@media (max-width: 560px) {
  .v3-header {
    padding: 0 var(--v3-space-4);
  }

  .v3-main {
    padding: var(--v3-space-4);
  }

  .v3-filter-bar {
    padding: var(--v3-space-3) var(--v3-space-4);
  }

  .v3-header-actions .v3-button span {
    display: none;
  }
}

/* ---------------------------------------------------------------------- */
/* Reduced motion                                                          */
/* ---------------------------------------------------------------------- */

/* The drawer and the desktop rail both animate their width/position. Neither
   conveys information by moving, so under a reduced-motion preference they
   simply arrive. `visibility` keeps its zero duration so the drawer still
   leaves the tab order the instant it closes. */
@media (prefers-reduced-motion: reduce) {
  .v3-shell,
  .v3-sidebar {
    transition: none;
  }
}