/* D1 AppShell layout — translated from design/source-2026-05-12/AppShell.jsx.
   AppBar across the top, NavRail down the left, main content scroll area.
   All values read from tokens.css so theming flows automatically. */

.appshell {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg-canvas);
}

/* ── AppBar ──────────────────────────────────────────────────────────── */
.appbar-d1 {
  height: 56px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-default);
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 16px;
  flex-shrink: 0;
}
.appbar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.appbar-mark {
  width: 28px;
  height: 28px;
  background: var(--brand-600);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 14px;
  color: #fff;
  border-radius: 2px;
}
.appbar-name {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 15px;
  color: var(--text-1);
  letter-spacing: -0.01em;
}
.appbar-rig {
  margin-left: 4px;
  padding: 4px 10px;
  background: var(--bg-surface-sunk);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-2);
  font-weight: 500;
  white-space: nowrap;
}
.appbar-spacer { flex: 1; }
.appbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.appbar-user {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px;
  height: 28px;
  border-radius: 4px;
  color: var(--text-2);
  font-size: 12px;
}
.appbar-user .mono {
  font-family: var(--font-mono);
}
.appbar-signout { margin: 0; }

/* ── Shell body (rail + main) ────────────────────────────────────────── */
.appshell-body {
  flex: 1;
  display: flex;
  overflow: hidden;
}
.appshell-main {
  flex: 1;
  overflow: auto;
}

/* Default content padding for redesigned pages — keep parity with
   the JSX which used `padding: 24, maxWidth: 1440, margin: '0 auto'`. */
.page-d1 {
  padding: 24px;
  max-width: 1440px;
  margin: 0 auto;
}

/* Compact page header (title + actions row). Used on all D2/D3 screens. */
.page-d1-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 16px;
  gap: 16px;
  flex-wrap: wrap;
}
.page-d1-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Crumb / back-link */
.crumb-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-3);
  text-decoration: none;
  margin-bottom: 8px;
}
.crumb-back:hover { color: var(--text-1); }

/* KPI strip — 5-column grid used on builds landing */
.kpi-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
@media (max-width: 980px) {
  .kpi-strip { grid-template-columns: repeat(2, 1fr); }
}

/* Filter bar that sits flush above a table */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  border-bottom: none;
}
.filter-bar .search {
  position: relative;
  flex: 0 0 280px;
}
.filter-bar .search .input {
  height: 32px;
  padding-left: 30px;
  font-size: 13px;
}
.filter-bar .search .search-icon {
  position: absolute;
  left: 10px;
  top: 9px;
  color: var(--text-3);
  pointer-events: none;
}
.filter-bar .spacer { flex: 1; }
.filter-bar .count-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
}

/* Table wrapper that connects to filter-bar above */
.table-wrap {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-top: none;
  border-radius: 0 0 6px 6px;
  overflow: hidden;
}
.table-wrap-stand {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: 6px;
  overflow: hidden;
}

/* Segmented control (status filter) */
.seg {
  display: inline-flex;
  height: 32px;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  overflow: hidden;
  background: var(--bg-surface);
}
.seg button {
  height: 100%;
  padding: 0 10px;
  cursor: pointer;
  border: 0;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-3);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.seg button + button { border-left: 1px solid var(--border-default); }
.seg button:hover { color: var(--text-2); }
.seg button.is-active {
  background: var(--bg-surface-sunk);
  color: var(--text-1);
  font-weight: 600;
}
.seg button .count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
  min-width: 16px;
  text-align: center;
}
.seg button.is-active .count {
  background: var(--bg-canvas);
  border: 1px solid var(--border-default);
  border-radius: 2px;
  padding: 0 5px;
}

/* Empty state */
.empty-state {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-top: none;
  border-radius: 0 0 6px 6px;
  padding: 64px 24px;
  text-align: center;
}
.empty-state .icon-wrap {
  width: 48px;
  height: 48px;
  margin: 0 auto 16px;
  border-radius: 4px;
  background: var(--bg-surface-sunk);
  border: 1px solid var(--border-default);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-3);
}

/* Inline mini-bar for audit segments (BuildsLanding row) */
.audit-mini {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.audit-mini .bar {
  display: flex;
  width: 88px;
  height: 6px;
  border-radius: 2px;
  background: var(--bg-surface-sunk);
  overflow: hidden;
  border: 1px solid var(--border-default);
}
.audit-mini .bar > span { display: block; height: 100%; }
.audit-mini .bar > span.s-pass { background: var(--status-pass-fg); }
.audit-mini .bar > span.s-warn { background: var(--status-warn-fg); }
.audit-mini .bar > span.s-flag { background: var(--status-info-fg); }
.audit-mini .bar > span.s-fail { background: var(--status-fail-fg); }
.audit-mini .ratio {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
}

/* Log / console block — dark surface in both themes */
.log-block {
  background: var(--log-bg);
  color: var(--log-fg);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.55;
  padding: 14px 16px;
  border-radius: 4px;
  max-height: 420px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Audit row list — used in BuildDetail */
.audit-list .audit-row {
  display: grid;
  grid-template-columns: 28px 110px 1fr;
  align-items: center;
  gap: 12px;
  padding: 9px 16px;
  border-bottom: 1px solid var(--border-default);
  font-size: 13px;
}
.audit-list .audit-row:last-child { border-bottom: none; }
.audit-list .audit-row .icon-cell {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.audit-list .audit-row.is-pass .icon-cell { color: var(--status-pass-fg); }
.audit-list .audit-row.is-warn .icon-cell { color: var(--status-warn-fg); }
.audit-list .audit-row.is-fail .icon-cell { color: var(--status-fail-fg); }
.audit-list .audit-row.is-flag .icon-cell { color: var(--status-info-fg); }
.audit-list .audit-row .check-id {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-2);
}
.audit-list .audit-row-details {
  padding: 8px 16px 12px 56px;
  background: var(--bg-surface-sunk);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-2);
  border-bottom: 1px solid var(--border-default);
  white-space: pre-wrap;
}

/* Dropzone (file upload) */
.dropzone {
  border: 2px dashed var(--border-strong);
  border-radius: 6px;
  padding: 28px 20px;
  text-align: center;
  background: var(--bg-surface);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out),
              background-color var(--duration-fast) var(--ease-out);
}
.dropzone:hover { border-color: var(--brand-400); }
.dropzone.is-drag-over {
  border-color: var(--brand-600);
  background: var(--brand-tint);
}
[data-theme="dark"] .dropzone.is-drag-over { background: var(--bg-row-selected); }
.dropzone .icon-wrap {
  width: 40px;
  height: 40px;
  margin: 0 auto 12px;
  border-radius: 4px;
  background: var(--bg-surface-sunk);
  border: 1px solid var(--border-default);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-3);
}
.dropzone .dropzone-title {
  font-size: 14px;
  font-weight: 600;
  /* Forge Green per Chris's PR #4 review (overrides design source's --text-1).
     Draws the eye to the primary affordance on the upload page. */
  color: var(--brand-600);
  margin-bottom: 4px;
}
[data-theme="dark"] .dropzone .dropzone-title { color: var(--brand-300); }
.dropzone .dropzone-hint {
  font-size: 12px;
  color: var(--text-3);
}
.dropzone-files {
  margin-top: 16px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dropzone-files .file-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--bg-surface-sunk);
  border: 1px solid var(--border-default);
  border-radius: 4px;
  font-size: 12px;
}
.dropzone-files .file-row .name {
  font-family: var(--font-mono);
  color: var(--text-1);
}
.dropzone-files .file-row .size {
  font-family: var(--font-mono);
  color: var(--text-3);
  font-size: 11px;
}
.dropzone-files .file-row .remove {
  cursor: pointer;
  color: var(--text-3);
  font-size: 14px;
  padding: 2px 6px;
  border-radius: 2px;
}
.dropzone-files .file-row .remove:hover { color: var(--status-fail-fg); background: var(--bg-row-hover); }

/* Selection */
::selection { background: var(--brand-tint); color: var(--brand-700); }
[data-theme="dark"] ::selection { background: var(--bg-row-selected); color: var(--brand-300); }

/* Inherit anchor colour by default — opt in to brand via .t-link / .nav-link */
a { color: inherit; }
.t-link {
  color: var(--brand-600);
  text-decoration: none;
  font-weight: 600;
}
.t-link:hover { text-decoration: underline; }
[data-theme="dark"] .t-link { color: var(--brand-300); }