/*
 * LuvPM Design System — app.css
 * Page-level layout and composition. Built on tokens.css + components.css;
 * every selector here composes canonical component classes rather than
 * redefining them. Non-iQ surfaces only (iQ keeps its own iq.css).
 */

/* Sidebar navigation icons (inline, currentColor, no external assets) ---- */
.nav-item__icon, .sidebar__palette-hint kbd { flex-shrink: 0; }

/* Mobile nav — sidebar collapses to a bottom tab bar below 960px --------- */
@media (max-width: 959px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; top: auto;
    flex-direction: row; align-items: center; justify-content: space-around;
    gap: 0; padding: var(--space-2) var(--space-2);
    border-right: 0; border-top: 1px solid var(--border-default);
  }
  .sidebar__brand, .sidebar__footer { display: none; }
  .sidebar__nav { flex-direction: row; flex: 1; justify-content: space-around; }
  .nav-item { flex-direction: column; gap: 2px; padding: var(--space-1) var(--space-2); font-size: 0.68rem; text-align: center; }
  .content { padding-bottom: calc(var(--space-9) + var(--space-6)); }
  .topbar { padding-inline: var(--space-4); }
}

/* Topbar contents on very small screens ---------------------------------- */
@media (max-width: 480px) {
  .topbar__hide-compact { display: none; }
}

/* Login (standalone, no shell chrome) ------------------------------------- */
.login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--space-6); }
.login-shell {
  width: min(420px, 100%);
  padding: var(--space-8) var(--space-7);
  border: 1px solid var(--border-default);
  border-radius: var(--card-radius);
  background: var(--surface-1);
  box-shadow: var(--card-shadow);
}
.login-brand { text-align: center; margin-bottom: var(--space-7); }
.login-brand .sidebar__brand-mark { margin: 0 auto var(--space-4); width: 44px; height: 44px; font-size: var(--text-xl); border-radius: var(--radius-card); }
.login-brand h1 { font-size: var(--text-xl); margin-bottom: var(--space-1); }
.login-brand p { color: var(--text-secondary); font-size: var(--text-sm); }
.login-shell .stack-form { margin-top: var(--space-2); }
.login-shell > .quiet { text-align: center; margin: var(--space-5) 0 0; }

/* Generic stacked / grid forms --------------------------------------------- */
.stack-form { display: grid; gap: var(--space-4); }
.stack-form.narrow { max-width: 560px; }
.quiet { color: var(--text-muted); font-size: var(--text-xs); }

/* Page heading -------------------------------------------------------------- */
.page-heading, .issue-heading {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-6);
  margin-bottom: var(--space-6); flex-wrap: wrap;
}
.page-heading > div:first-child, .issue-heading > div:first-child { max-width: 72ch; }
.page-heading p, .issue-heading p { color: var(--text-secondary); margin-top: var(--space-1); }
.page-heading h1, .issue-heading h1 { font-size: var(--text-2xl); }
.eyebrow { display: block; font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--space-2); }
.heading-actions, .inline-status, .card-meta, .card-actions { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }

/* Breadcrumbs --------------------------------------------------------------- */
.breadcrumbs { display: flex; align-items: center; gap: var(--space-2); color: var(--text-muted); font-size: var(--text-xs); margin-bottom: var(--space-5); }
.breadcrumbs a { color: var(--text-secondary); text-decoration: none; }
.breadcrumbs a:hover { color: var(--accent); }

/* Lifecycle rail (fixed 5-phase reference shown on Portfolio) -------------- */
.lifecycle-rail-wrap { margin-bottom: var(--space-6); }
.lifecycle-rail-wrap > div > p:first-child { margin-bottom: var(--space-1); }
.lifecycle-rail { display: flex; gap: var(--space-2); flex-wrap: wrap; list-style: none; padding: 0; margin: var(--space-3) 0; }
.lifecycle-rail li {
  display: flex; align-items: center; gap: var(--space-2);
  border: 1px solid var(--border-default); border-radius: var(--radius-control);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-xs); font-weight: 700; color: var(--text-secondary);
  background: var(--surface-1);
}
.lifecycle-rail li span {
  display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%;
  border: 1px solid var(--border-strong); font-size: 0.65rem; color: var(--text-muted);
}
.lifecycle-rail-wrap p.quiet { max-width: 70ch; }

/* Stat rail — grid of .stat-tile ------------------------------------------- */
.stat-rail {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--border-default); border-radius: var(--card-radius);
  overflow: hidden; margin-bottom: var(--space-7); background: var(--card-bg);
}
.stat-rail .stat-tile { border-right: 1px solid var(--border-default); }
.stat-rail .stat-tile:last-child { border-right: 0; }

/* Workspace / entity grid --------------------------------------------------- */
.workspace-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.workspace-card { padding: var(--card-padding); display: flex; flex-direction: column; gap: var(--space-4); }
.workspace-main { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4); }
.workspace-main p { color: var(--text-secondary); font-size: var(--text-sm); margin-top: 2px; }
.workspace-main h2 { font-size: var(--text-md); }

.mini-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }
.mini-stats > div { border-left: 1px solid var(--border-default); padding-left: var(--space-3); }
.mini-stats dt { font-size: 0.68rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.mini-stats dd { font-size: var(--text-lg); font-weight: 700; margin: 2px 0 0; font-variant-numeric: tabular-nums; }

.progress-track { display: block; width: 100%; height: 5px; border: 0; appearance: none; border-radius: var(--radius-full); overflow: hidden; }
.progress-track::-webkit-progress-bar { background: var(--surface-2); border-radius: var(--radius-full); }
.progress-track::-webkit-progress-value { background: var(--accent); border-radius: var(--radius-full); }
.progress-track::-moz-progress-bar { background: var(--accent); border-radius: var(--radius-full); }

.card-meta { justify-content: space-between; color: var(--text-muted); font-size: var(--text-xs); }
.error-copy { color: var(--status-problem); font-weight: 600; }
.correlation { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); }

/* Filter bar (GET, shareable) ------------------------------------------------ */
.filter-bar {
  display: grid; grid-template-columns: 2fr repeat(4, 1fr) auto auto;
  gap: var(--space-3); align-items: end;
  padding: var(--space-4) 0; border-block: 1px solid var(--border-default);
  margin-bottom: var(--space-4);
}
.filter-bar label { display: grid; gap: var(--space-2); font-size: var(--text-xs); font-weight: 700; color: var(--text-secondary); }
.filter-bar > .text-link { justify-self: start; align-self: center; }
.result-count { color: var(--text-muted); font-size: var(--text-xs); margin: 0 0 var(--space-4); }
.disclosure { color: var(--status-stale); font-size: var(--text-xs); margin-bottom: var(--space-3); font-weight: 600; }

.view-switch { display: flex; gap: var(--space-5); margin-bottom: var(--space-3); }
.view-switch a { color: var(--text-secondary); text-decoration: none; font-size: var(--text-sm); font-weight: 600; border-bottom: 2px solid transparent; padding-bottom: var(--space-1); }
.view-switch a[aria-current="page"] { color: var(--accent); border-color: var(--accent); }

/* Kanban list-mode (server-rendered "List view") ----------------------------- */
.kanban--list { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: 1fr; overflow: visible; gap: var(--space-6); }
.kanban--list .kanban__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 719px) {
  .kanban, .kanban--list { display: grid !important; grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: 1fr; overflow: visible; gap: var(--space-6); }
  .kanban__cards, .kanban--list .kanban__cards { grid-template-columns: 1fr; }
}

/* Issue detail --------------------------------------------------------------- */
.detail-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: var(--space-8); }
.detail-main { border-left: 2px solid var(--accent); padding-left: var(--space-5); }
.detail-main p { white-space: pre-wrap; color: var(--text-secondary); }
.detail-sidebar dl { margin: 0; }
.detail-sidebar dl div { display: flex; justify-content: space-between; gap: var(--space-5); padding: var(--space-2) 0; border-bottom: 1px solid var(--border-default); }
.detail-sidebar dt { font-size: 0.72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.detail-sidebar dd { margin: 0; text-align: right; }
.authority-note { color: var(--accent); font-size: var(--text-xs); font-weight: 600; margin-top: var(--space-5); }

/* Settings ------------------------------------------------------------------- */
.settings-section { padding: var(--space-7) 0; border-top: 1px solid var(--border-default); }
.settings-section > h2 { margin-bottom: var(--space-4); }
.settings-workspace { margin-top: var(--space-4); padding: var(--card-padding); }
.settings-workspace > header { display: flex; justify-content: space-between; gap: var(--space-4); align-items: flex-start; margin-bottom: var(--space-4); }
.binding-summary { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; color: var(--text-secondary); font-size: var(--text-sm); }
.mapping-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--border-default); }
.mapping-form h3 { grid-column: 1 / -1; }
.mapping-form button { align-self: end; }
.integration-forms, .control-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); margin-top: var(--space-6); padding-top: var(--space-6); border-top: 1px solid var(--border-default); }
.control-grid .stack-form { align-content: start; }
.projection-list > div { display: grid; grid-template-columns: minmax(100px, 0.5fr) 2fr; gap: var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--border-default); }
.projection-list dt { text-transform: capitalize; color: var(--text-muted); font-size: var(--text-xs); }
.projection-list dd { margin: 0; font-size: var(--text-sm); }

/* Lifecycle phase rail + ledger ------------------------------------------------ */
.phase-rail { display: grid; grid-template-columns: repeat(5, 1fr); list-style: none; padding: 0; margin: 0 0 var(--space-7); gap: 1px; background: var(--border-default); border-radius: var(--card-radius); overflow: hidden; }
.phase-rail li { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-4); background: var(--surface-1); text-transform: capitalize; font-size: var(--text-sm); }
.phase-rail li span { display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid var(--border-strong); border-radius: 50%; font-size: var(--text-xs); flex-shrink: 0; }
.phase-rail li.complete span { background: var(--status-ok); border-color: var(--status-ok); color: var(--surface-0); }
.phase-rail li.current { box-shadow: inset 0 -3px var(--accent); font-weight: 700; }
.phase-rail li.current span { border-color: var(--accent); color: var(--accent); }
.ledger { display: grid; gap: var(--space-2); padding: 0; margin: 0; list-style: none; }
.ledger li { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; padding: var(--space-3) var(--space-4); border: 1px solid var(--border-default); border-radius: var(--radius-control); background: var(--surface-1); font-size: var(--text-sm); }
.ledger li a { margin-left: auto; }

/* Error / empty states -------------------------------------------------------- */
.error-state { padding: var(--space-10) var(--space-6); text-align: center; border: 1px solid var(--border-default); border-radius: var(--card-radius); background: var(--surface-1); }
.error-state .eyebrow { justify-content: center; }
.error-state p { max-width: 60ch; margin: var(--space-2) auto var(--space-5); color: var(--text-secondary); }
.error-summary { padding: var(--space-4); border-radius: var(--radius-control); border-left: 3px solid var(--status-problem); background: var(--status-problem-bg); color: var(--status-problem); font-size: var(--text-sm); font-weight: 600; margin-bottom: var(--space-5); }
.attention { padding: var(--space-4) var(--space-5); border-radius: var(--radius-control); border-left: 3px solid var(--status-attention); background: var(--status-attention-bg); margin-bottom: var(--space-6); font-size: var(--text-sm); }

/* Responsive: tablet ---------------------------------------------------------- */
@media (max-width: 1119px) {
  .filter-bar { grid-template-columns: repeat(3, 1fr); }
  .workspace-grid { grid-template-columns: 1fr; }
  .mapping-form { grid-template-columns: repeat(2, 1fr); }
  .stat-rail { grid-template-columns: repeat(2, 1fr); }
  .stat-rail .stat-tile:nth-child(2) { border-right: 0; }
  .stat-rail .stat-tile:nth-child(-n+2) { border-bottom: 1px solid var(--border-default); }
}

/* Responsive: mobile ------------------------------------------------------------ */
@media (max-width: 719px) {
  .content { padding: var(--space-4); }
  .page-heading, .issue-heading { display: grid; gap: var(--space-4); }
  .filter-bar { grid-template-columns: 1fr; }
  .mini-stats { grid-template-columns: repeat(2, 1fr); }
  .detail-layout { grid-template-columns: 1fr; }
  .mapping-form { grid-template-columns: 1fr; }
  .integration-forms, .control-grid, .phase-rail { grid-template-columns: 1fr; }
  .projection-list > div { grid-template-columns: 1fr; }
  .ledger li a { margin-left: 0; }
  .card-move { grid-template-columns: 1fr; }
  .workspace-card, .settings-workspace { padding: var(--space-5); }
  .workspace-main { flex-direction: column; }
  .card-meta { align-items: flex-start; flex-direction: column; }
  .login-shell { padding: var(--space-6) var(--space-5); }
  /* Reports (WO-PM-012/WO-PM-017) renders <table class="data-table"> right
   * after each chart <figure> with no wrapper div — test/reports.test.mjs
   * asserts that exact adjacency in the rendered HTML, so a
   * .table-scroll/.data-table-scroll wrapper can't be inserted between them
   * without breaking that test. `overflow-x: auto` works the same way
   * directly on a `display: table` box (its anonymous table wrapper box is a
   * valid overflow container per the CSS Overflow spec), giving the same
   * "scrolls in its own container, not the page" 375px behavior with no
   * markup change. Scoped to this breakpoint only: setting overflow-x here
   * also forces the browser to resolve overflow-y to `auto` (CSS Overflow
   * §3), which would quietly break the sticky column header's page-scroll
   * pin on desktop — not worth trading away there since these tables are
   * short and desktop has the width to show them in full anyway. */
  .data-table { overflow-x: auto; }
}

/* ---------------------------------------------------------------------------
 * Cross-surface page layout
 *
 * Layout classes emitted by the concurrently-shipped Reports (WO-PM-012),
 * Dashboards (WO-PM-013), Capacity (WO-PM-014), and Automation rules
 * (WO-PM-010) surfaces. See components.css's matching "Cross-surface
 * compatibility" section for their button/status/table atoms.
 * ------------------------------------------------------------------------- */

/* A .field without the .field__label/.field__help structure (a bare <span>
 * label) still gets the same visual treatment. */
.field > span:first-child { font-size: var(--text-sm); font-weight: 700; color: var(--text-secondary); }

/* Reports ------------------------------------------------------------------ */
.reports-filter-bar { grid-template-columns: repeat(2, minmax(0, 1fr)) auto auto; }
.report-group { padding: var(--space-7) 0; border-top: 1px solid var(--border-default); }
.report-group:first-of-type { border-top: 0; padding-top: 0; }
.report-group-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); }
.report-group-heading p { color: var(--text-secondary); font-size: var(--text-sm); margin-top: var(--space-1); }
.chip.stale-chip { color: var(--status-stale); background: var(--status-stale-bg); border-color: var(--status-stale-border); }
.stat-tile-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-6); }
.stat-tile-row .stat-tile { border: 1px solid var(--border-default); border-radius: var(--card-radius); background: var(--card-bg); }
.stat-tile-row .stat-tile span { display: block; font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); }
.stat-tile-row .stat-tile strong { display: block; font-size: var(--text-2xl); font-variant-numeric: tabular-nums; margin-top: 2px; }
.stat-tile-row .stat-tile p { font-size: var(--text-xs); color: var(--text-muted); margin: var(--space-1) 0 0; }
.chart-figure { margin: 0 0 var(--space-5); }
.chart-figure .card { padding: var(--space-4); display: flex; justify-content: center; }
.chart-figure figcaption { margin-top: var(--space-2); text-align: center; }

/* Dashboards ----------------------------------------------------------------- */
.view-tabs { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--border-default); margin-bottom: var(--space-6); }
.view-tabs a { padding: var(--space-2) var(--space-4); font-size: var(--text-sm); font-weight: 600; color: var(--text-secondary); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.view-tabs a:hover { color: var(--text-primary); }
.view-tabs a[aria-current="page"], .view-tabs a[aria-selected="true"] { color: var(--accent); border-color: var(--accent); }
.view-list { display: grid; gap: var(--space-3); }
.view-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; padding: var(--space-4) var(--space-5); border: 1px solid var(--border-default); border-radius: var(--card-radius); background: var(--card-bg); }
.view-main p { margin-top: 2px; }
.view-actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.confirm-delete summary { color: var(--danger); cursor: pointer; list-style: none; font-size: var(--text-sm); font-weight: 600; text-decoration: underline; }
.confirm-delete summary::-webkit-details-marker { display: none; }
.confirm-delete form { margin-top: var(--space-3); display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
/* Same collapsed-by-default <details> pattern as .confirm-delete, for a
 * non-destructive inline action (WO-PM-017: Dashboards' "Rename" row control
 * was a permanently-open text input + button sitting in .view-actions next
 * to Set default/Pin/Share/Delete — five simultaneous controls per row. This
 * matches the density Delete already uses, folding it behind one "Rename…"
 * link the exact same way. accent, not danger, since renaming isn't
 * destructive. */
.inline-disclosure summary { color: var(--accent); cursor: pointer; list-style: none; font-size: var(--text-sm); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.inline-disclosure summary::-webkit-details-marker { display: none; }
.inline-disclosure form { margin-top: var(--space-3); display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.inline-radio, .inline-checkbox { display: flex !important; flex-direction: row; align-items: center; gap: var(--space-2); font-weight: 400; }
.inline-radio input, .inline-checkbox input { width: auto; min-height: auto; }
.stack-form.compact { gap: var(--space-2); }

/* Automation rules ------------------------------------------------------------ */
.field-group { border: 1px solid var(--border-default); border-radius: var(--card-radius); padding: var(--space-5); margin-bottom: var(--space-5); }
.field-group legend { padding: 0 var(--space-2); font-size: var(--text-sm); font-weight: 700; color: var(--text-secondary); }
.field-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin-bottom: var(--space-3); }
.field-row:last-child { margin-bottom: 0; }
.field.checkbox-field { display: flex !important; flex-direction: row; align-items: center; gap: var(--space-2); }
.field.checkbox-field input { width: auto; min-height: auto; }

/* Capacity -------------------------------------------------------------------- */
.workspace-freshness { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); list-style: none; padding: 0; margin: 0 0 var(--space-6); }
.workspace-freshness li { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }

@media (max-width: 719px) {
  .reports-filter-bar, .field-row { grid-template-columns: 1fr; }
  .view-row { flex-direction: column; align-items: flex-start; }
}