/* Theme tweaks on top of Bootstrap 5.3: font, softer surfaces, status palette. */
:root,
[data-bs-theme="light"] {
  --bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bs-font-monospace: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --bs-body-bg: #f5f6f8;
  --bs-primary: #ee4c2c; /* PyTorch orange */
  --bs-primary-rgb: 238, 76, 44;
  --bs-link-color: #d0401f;
  --bs-link-color-rgb: 208, 64, 31;
  --app-surface: #ffffff;
  --app-passed: #16a34a;
  --app-skipped: #f59e0b;
  --app-failed: #dc2626;
  --app-error: #64748b;
  --app-accent-soft: rgba(238, 76, 44, 0.1);
}
[data-bs-theme="dark"] {
  --bs-body-bg: #0f1115;
  --bs-body-color: #e6e8eb;
  --bs-secondary-color: #9aa1ab;
  --bs-border-color: #262a31;
  --bs-primary: #f2694d;
  --bs-primary-rgb: 242, 105, 77;
  --bs-link-color: #f58a73;
  --bs-link-color-rgb: 245, 138, 115;
  --app-surface: #171a20;
  --app-passed: #22c55e;
  --app-skipped: #fbbf24;
  --app-failed: #f87171;
  --app-error: #94a3b8;
  --app-accent-soft: rgba(242, 105, 77, 0.15);
}

body { -webkit-font-smoothing: antialiased; }
code { color: var(--bs-secondary-color); font-size: 0.8em; }

/* Navbar */
.app-nav { background: color-mix(in srgb, var(--app-surface) 85%, transparent); backdrop-filter: blur(10px); }
.brand-mark {
  display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 10px;
  background: linear-gradient(135deg, #ee4c2c, #f59e0b); color: #fff; font-size: 1.1rem;
}
.view-toggle { background: var(--bs-tertiary-bg); border-radius: 0.5rem; padding: 3px; }
.view-toggle .btn { border: 0; border-radius: 0.4rem !important; color: var(--bs-secondary-color); }
.view-toggle .btn-check:checked + .btn { background: var(--app-surface); color: var(--bs-body-color); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
.run-picker { width: auto; }
.run-picker .form-select { min-width: 220px; }

/* Cards */
.app-card { background: var(--app-surface); border: 1px solid var(--bs-border-color); border-radius: 0.9rem; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04); }
.app-card > .card-header {
  background: transparent; border-bottom: 1px solid var(--bs-border-color); padding: 0.85rem 1.1rem;
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
}
.app-card > .card-header .form-select { min-width: 240px; }

/* KPI tiles */
.kpi { height: 100%; padding: 1rem 1.1rem; }
.kpi-head { display: flex; align-items: center; justify-content: space-between; color: var(--bs-secondary-color); font-size: 0.85rem; font-weight: 500; }
.kpi-icon { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; font-size: 1rem; background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--c); }
.kpi-value { font-size: 1.85rem; font-weight: 700; letter-spacing: -0.02em; margin-top: 0.35rem; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kpi-value.text-value { font-size: 1rem; font-weight: 600; white-space: normal; letter-spacing: 0; }
.kpi-sub { font-size: 0.8rem; color: var(--bs-secondary-color); margin-top: 0.15rem; }
.delta-up { color: var(--app-passed); }
.delta-down { color: var(--app-failed); }

/* Stacked pass/skip/fail bar (KPI tile + module table) */
.stackbar { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: var(--bs-tertiary-bg); gap: 2px; }
.stackbar > span { display: block; height: 100%; }
.stackbar.thin { height: 6px; min-width: 120px; }
.s-passed { background: var(--app-passed); }
.s-skipped { background: var(--app-skipped); }
.s-failed { background: var(--app-failed); }
.s-error { background: var(--app-error); }
.legend-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; }

/* Tabs */
.app-tabs { gap: 0.25rem; }
.app-tabs .nav-link { color: var(--bs-secondary-color); font-weight: 500; border-radius: 0.6rem; }
.app-tabs .nav-link.active { background: var(--app-accent-soft); color: var(--bs-primary); }

/* Status chips */
.chip {
  display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.15rem 0.55rem; border-radius: 999px;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em;
  color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent);
}
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c); }
.status-toggle .btn-check + label { opacity: 0.45; cursor: pointer; }
.status-toggle .btn-check:checked + label { opacity: 1; }

/* Tables */
.table { --bs-table-bg: transparent; font-size: 0.875rem; }
.table > thead th { color: var(--bs-secondary-color); font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; }
table.clickable tbody tr { cursor: pointer; }
td.reason { max-width: 60rem; }
td.reason pre { white-space: pre-wrap; word-break: break-word; font-size: 0.75rem; margin: 0.5rem 0 0; padding: 0.6rem 0.75rem; border-radius: 0.5rem; background: var(--bs-tertiary-bg); }
td.reason summary { cursor: pointer; }
td.reason summary::marker { color: var(--bs-secondary-color); }
.module-select { min-width: 240px; }