/* fastercode.ai shared design system - "Violet" direction.
   Cool off-white surfaces, deep-violet interactive accent, charcoal text,
   fluorescent lime reserved for small branded details (logo, occasional
   highlights). Restrained shadows, modest 4px/8px radii. One token/component
   source for every page - see src/fastercode_saas/ui/frontend/*.html for usage. */

:root {
  /* This is a fixed light-only theme, no dark variant exists. Without this,
     a browser's own "force dark mode for web content" feature (Edge/Chrome)
     can repaint elements after our CSS applies, based on its own heuristics
     - including flipping already-correct white text back to dark on some
     elements while leaving others alone. Declaring the page as light opts
     it out of that repainting entirely. */
  color-scheme: light;
  --bg: #FFFFFF;
  --bg-page: #F7F8FA;
  --bg-subtle: #F7F8FA;
  --bg-code: #F7F8FA;
  --border: #E2E5EA;
  --border-strong: #C7CBD3;
  --text-primary: #24262B;
  --text-secondary: #626873;
  --text-tertiary: #8A909B;
  --primary: #6446C8;
  --primary-hover: #5035A5;
  --primary-soft: #F0ECFA;
  --on-primary: #FFFFFF;
  --link: var(--primary);
  --lime: #39FF14;
  --green: #00875A; --green-dim: #E3FCEF; --green-text: #006644;
  --red: #DE350B; --red-dim: #FFEBE6; --red-text: #BF2600;
  --amber: #FF991F; --amber-dim: #FFFAE6; --amber-text: #974F0C;
  /* Repurposed to a distinct blue for "info"/"merged" status - the old Jira
     purple (#6554C0) sits too close to the new violet --primary and would
     read as a primary action/link instead of a separate info state. */
  --purple: #2F6FE4; --purple-dim: #E8F0FE; --purple-text: #1D4FB0;
  --radius: 4px;
  --radius-lg: 8px;
  --shadow-sm: 0 1px 2px rgba(36,38,43,0.08), 0 1px 1px rgba(36,38,43,0.04);
  --shadow-md: 0 4px 10px rgba(36,38,43,0.10), 0 1px 2px rgba(36,38,43,0.06);
  --font-sans: 'Segoe UI', -apple-system, 'Inter', sans-serif;
  --font-mono: 'Consolas', 'JetBrains Mono', monospace;
}

/* ---------- Reset / base ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  background: var(--bg-page);
  color: var(--text-primary);
  font-size: 13.5px;
  line-height: 1.5;
}
h1, h2, h3, h4 { color: var(--text-primary); font-weight: 700; }
a { color: var(--link); }
code, pre { font-family: var(--font-mono); }
hr { border: none; border-top: 1px solid var(--border); }
input, select, textarea, button { font-family: var(--font-sans); }

/* ---------- Header / logo / avatar ---------- */
header {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  padding: 0 1.5rem;
  height: 56px;
  display: flex;
  align-items: center;
  gap: 1rem;
  position: sticky;
  top: 0;
  z-index: 20;
}
.logo {
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
}
/* Brand mark - the exact lime favicon asset (not an approximated color), sized
   for the header via a background-image rather than touching every page's
   markup. */
.logo::before {
  content: '';
  width: 20px; height: 20px;
  background: url('favicon.svg') no-repeat center / contain;
  border-radius: 5px;
  flex-shrink: 0;
}
.avatar {
  width: 30px; height: 30px;
  min-width: 30px; min-height: 30px; max-width: 30px; max-height: 30px;
  border-radius: 50%;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; color: var(--text-secondary);
  cursor: pointer; flex-shrink: 0;
}
.btn-header {
  height: 32px; padding: 0 12px; border-radius: var(--radius);
  font-size: 12.5px; font-weight: 500; cursor: pointer;
  background: var(--bg); color: var(--text-secondary); border: 1px solid var(--border);
}
.header-right, .header-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }

/* ---------- Breadcrumb ---------- */
.breadcrumb {
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--text-tertiary);
  padding: 10px 20px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.breadcrumb a { color: var(--text-secondary); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb-sep { color: var(--text-tertiary); }
.breadcrumb-current { color: var(--text-primary); font-weight: 600; }

/* ---------- Layout shell ----------
   .page is the shared content wrapper; a modifier picks its layout mode.
   .shell + .nav-sidebar is the app-wide persistent left nav (repo list,
   Settings, Account - injected by nav-sidebar.js on every page that includes
   it), kept deliberately distinct from the .panel--sidebar detail-panel
   concept below - these are different things that used to share a confusing
   "sidebar" name). A page using .page--with-sidebar (its own right-hand detail
   panel) can additionally be nested inside .shell for a 3-column layout when
   the left nav-sidebar is also present. */
.page { flex: 1; }
.page--centered { display: flex; justify-content: center; padding: 2rem; }
.page--left { display: flex; justify-content: flex-start; padding: 2rem; }
.page--full { display: flex; flex-direction: column; }
.page--with-sidebar {
  display: grid; grid-template-columns: 1fr 340px; gap: 0;
  min-height: calc(100vh - 56px);
}
.shell {
  flex: 1; display: grid; grid-template-columns: 240px 1fr;
  min-height: calc(100vh - 56px);
}
/* Generic second-grid-column wrapper for .shell: stacks the shared
   #pageHeaderRoot strip above a page's own .page/.page--* content, mirroring
   jobs.html's own #main wrapper (kept separate there since it also owns
   in-place dashboard re-rendering, not just layout). */
.page-col { display: flex; flex-direction: column; overflow-y: auto; min-width: 0; }
.nav-sidebar {
  background: var(--bg); border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
}
.nav-sidebar__top { padding: 1rem; flex: 1; overflow-y: auto; }

/* ---------- Nav sidebar contents (injected by nav-sidebar.js) ---------- */
.sidebar-label { font-size:10px; font-weight:600; letter-spacing:0.08em; color:var(--text-tertiary); text-transform:uppercase; padding:0 8px; margin-bottom:6px; display:block; }
.sidebar-label-toggle {
  width:100%; display:flex; align-items:center; justify-content:space-between;
  font-size:10px; font-weight:600; letter-spacing:0.08em; color:var(--text-primary);
  text-transform:uppercase; padding:0 8px; margin-bottom:6px;
  background:none; border:none; cursor:pointer;
}
.sidebar-label-toggle:hover { color:var(--primary); }
.sidebar-label-toggle .chevron { color:var(--text-tertiary); transition:transform .12s; flex-shrink:0; }
.sidebar-label-toggle.open .chevron { transform:rotate(180deg); }
.nav-collapse { display:flex; flex-direction:column; }

.repo-item { display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:var(--radius); cursor:pointer; transition:all 0.12s; user-select:none; }
.repo-item:hover { background:var(--bg-subtle); }
.repo-item.active { background:var(--primary-soft); }
.repo-icon { width:28px; height:28px; border-radius:7px; background:var(--bg-subtle); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:13px; flex-shrink:0; }
.repo-item.active .repo-icon { background:var(--bg); border-color:var(--primary); }
.repo-info { flex:1; min-width:0; }
.repo-name { font-size:13px; font-weight:500; color:var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.repo-meta { font-size:11px; color:var(--text-tertiary); margin-top:1px; }
.repo-item.active .repo-name { color:var(--primary); }
.repo-item.active .repo-meta { color:var(--primary); opacity:0.75; }
.status-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
/* Scoped to .status-dot specifically (higher specificity than the bare
   .dot-* rules in the badge--dot system above) so these always win
   regardless of source order, without affecting that unrelated system. */
.status-dot.dot-green  { background:var(--green); }
.status-dot.dot-amber  { background:var(--amber); }
.status-dot.dot-grey   { background:var(--border-strong); }
.status-dot.dot-purple { background:var(--purple); }

.sidebar-sep { height:1px; background:var(--border); margin:8px 0; }

.btn-add { display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:var(--radius); border:1px solid var(--border); background:none; font-size:13px; font-weight:500; color:var(--text-secondary); width:100%; margin-bottom:6px; }
.btn-add:hover { border-color:var(--primary); color:var(--primary); background:var(--bg-subtle); }
.btn-add.active { background:var(--primary-soft); color:var(--primary); border-color:var(--primary); }
.btn-delete-repo { display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:var(--radius); border:none; background:none; font-size:13px; font-weight:500; color:var(--text-secondary); width:100%; margin-bottom:6px; }
.btn-delete-repo:hover:not(:disabled) { background:var(--red-dim); color:var(--red-text); }
.btn-delete-repo:disabled { opacity:0.35; cursor:not-allowed; }

/* Page name strip - white bar below the thin header, shared by every page via
   nav-sidebar.js's #pageHeaderRoot mount point. jobs.html keeps its own
   .repo-header/.rh-* rules (dynamic repo name); this is the same visual
   treatment, generalized for a static page title. */
.page-header-strip { padding:1.25rem 2rem; background:var(--bg); border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
.phs-name { font-size:17px; font-weight:700; letter-spacing:-0.02em; }

.user-name { font-size:13px; font-weight:500; }
.btn-signout { font-size:11px; color:var(--text-tertiary); background:none; border:none; cursor:pointer; }
.btn-signout:hover { color:var(--text-primary); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 32px; padding: 0 14px;
  border-radius: var(--radius);
  font-size: 13px; font-weight: 500;
  border: none; cursor: pointer;
  font-family: var(--font-sans);
  text-decoration: none;
  transition: background .1s, border-color .1s;
}
.btn, .btn:visited { color: inherit; }
.btn--sm { height: 27px; padding: 0 10px; font-size: 12px; }
.btn--primary { background: var(--primary); color: var(--on-primary); }
.btn--primary:hover { background: var(--primary-hover); }
.btn--secondary { background: var(--border); color: var(--text-primary); }
.btn--secondary:hover { background: var(--border-strong); }
.btn--ghost { background: transparent; color: var(--text-secondary); border: 1px solid var(--border-strong); }
.btn--ghost:hover { border-color: var(--text-tertiary); color: var(--text-primary); }
.btn--danger { background: var(--red-dim); color: var(--red-text); }
.btn--danger:hover { background: #FFDAD2; }
.btn--oauth { background: var(--text-primary); color: #fff; }
.btn--oauth:hover { background: #101114; }
.btn--icon { width: 32px; height: 32px; padding: 0; background: transparent; border: 1px solid var(--border-strong); color: var(--text-secondary); }
.btn--icon:hover { border-color: var(--text-tertiary); color: var(--text-primary); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Selection-toggle button groups (objective picker, scan mode, coverage type) */
.btn-group { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--radius); overflow: hidden; width: fit-content; }
.btn-group__item {
  height: 32px; padding: 0 16px; font-size: 12.5px; font-weight: 500;
  background: var(--bg); color: var(--text-secondary); border: none;
  border-right: 1px solid var(--border-strong); cursor: pointer;
}
.btn-group__item:last-child { border-right: none; }
.btn-group__item:hover:not(.active):not(:disabled) { background: var(--bg-subtle); color: var(--text-primary); }
.btn-group__item.active { background: var(--primary); color: var(--on-primary); }
.btn-group__item:disabled { opacity: 0.4; cursor: not-allowed; }

/* ---------- Badges / status ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 12px;
  font-size: 11.5px; font-weight: 600;
  background: var(--border); color: var(--text-secondary);
}
.badge--success { background: var(--green-dim); color: var(--green-text); }
.badge--fail { background: var(--red-dim); color: var(--red-text); }
.badge--warning { background: var(--amber-dim); color: var(--amber-text); }
.badge--neutral { background: var(--border); color: var(--text-secondary); }
.badge--info { background: var(--purple-dim); color: var(--purple-text); }
.badge--dot { background: transparent; padding: 0; gap: 6px; font-weight: 500; color: var(--text-secondary); }
.badge--dot .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dot-green { background: var(--green); } .dot-red { background: var(--red); }
.dot-amber { background: var(--amber); } .dot-grey, .dot-gray { background: var(--text-tertiary); }
.dot-purple { background: var(--purple); }

/* ---------- Panels / cards ---------- */
.panel {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
.panel__header {
  padding: 12px 16px; border-bottom: 1px solid var(--border);
  font-size: 12px; font-weight: 700; color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: .04em;
}
.panel__body { padding: 16px; }
.panel__footer { padding: 12px 16px; border-top: 1px solid var(--border); }
.panel--sidebar { align-self: start; }

/* ---------- Tables ---------- */
.table-card { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--bg); }
.table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.table th {
  text-align: left; padding: 8px 14px; background: var(--bg-subtle);
  color: var(--text-tertiary); font-size: 11px; text-transform: uppercase;
  letter-spacing: .05em; border-bottom: 1px solid var(--border); font-weight: 700;
}
.table td { padding: 9px 14px; border-bottom: 1px solid var(--border); color: var(--text-primary); vertical-align: top; }
.table tr:last-child td { border-bottom: none; }
.table--mono td { font-family: var(--font-mono); font-size: 12px; }

/* ---------- Forms ---------- */
.field { margin-bottom: 14px; }
.field-label {
  font-size: 11.5px; font-weight: 600; color: var(--text-secondary);
  margin-bottom: 6px; display: block;
}
.field-select, .field-input {
  height: 34px; width: 100%; max-width: 320px;
  padding: 0 30px 0 10px; font-size: 13px;
  background: var(--bg); border: 1px solid var(--border-strong);
  border-radius: var(--radius); color: var(--text-primary); outline: none;
}
.field-select:focus, .field-input:focus { border-color: var(--primary); }
textarea.field-input { height: auto; padding: 8px 10px; max-width: none; }

/* Constraint editor (per-metric mode + value) */
.constraint-panel { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.constraint-mode {
  height: 32px; padding: 0 28px 0 10px; font-size: 12px; background: var(--bg);
  border: 1px solid var(--border-strong); border-radius: var(--radius); color: var(--text-primary);
}
.constraint-value { height: 32px; width: 90px; padding: 0 10px; font-size: 12px; background: var(--bg); border: 1px solid var(--border-strong); border-radius: var(--radius); color: var(--text-primary); }
.constraint-unit { font-size: 12px; color: var(--text-tertiary); }

/* Toggle switch - wraps an existing <input type=checkbox>, id/name/checked/onchange untouched */
.toggle-switch { position: relative; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.toggle-switch input[type=checkbox] { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle-switch__track {
  width: 34px; height: 18px; border-radius: 10px; background: var(--border-strong);
  position: relative; transition: background .15s; flex-shrink: 0;
}
.toggle-switch__track::after {
  content: ''; position: absolute; width: 14px; height: 14px; border-radius: 50%;
  background: #fff; top: 2px; left: 2px; transition: left .15s;
  box-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.toggle-switch input:checked + .toggle-switch__track { background: var(--primary); }
.toggle-switch input:checked + .toggle-switch__track::after { left: 18px; }

/* Slider - reskins input[type=range] only, no markup/JS change */
input[type=range] { flex: 1; accent-color: var(--primary); height: 4px; }
.threshold-row { display: flex; align-items: center; gap: 12px; }
.threshold-row label { font-size: 12.5px; color: var(--text-secondary); }
.threshold-val { font-size: 13px; font-weight: 700; color: var(--text-primary); min-width: 36px; text-align: right; }

.timeout-field { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.timeout-field + .timeout-field { margin-top: 10px; }
.timeout-field label { font-size: 12.5px; color: var(--text-secondary); }

/* ---------- Modals ---------- */
.modal-overlay {
  display: none; position: fixed; inset: 0; background: rgba(36,38,43,0.55);
  z-index: 1000; align-items: center; justify-content: center; padding: 2rem;
}
.modal-overlay.open { display: flex; }
.modal {
  background: var(--bg); border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
  max-width: 480px; width: 100%; max-height: 85vh; display: flex; flex-direction: column;
}
.modal__header { padding: 1.1rem 1.4rem; border-bottom: 1px solid var(--border); font-size: 15px; font-weight: 700; }
.modal__sub { font-size: 13px; color: var(--text-secondary); margin-top: 4px; font-weight: 400; }
.modal__body { padding: 1.1rem 1.4rem; overflow-y: auto; flex: 1; font-size: 13px; color: var(--text-secondary); }
.modal__footer { padding: 1rem 1.4rem; display: flex; align-items: center; justify-content: flex-end; gap: 10px; border-top: 1px solid var(--border); }

/* Diff view inside the modal (function_detail.html's test-script diff) */
.diff-line { font-family: var(--font-mono); font-size: 12px; line-height: 1.6; white-space: pre-wrap; word-break: break-all; padding: 1px 14px; }
.diff-line-added { background: var(--green-dim); color: var(--green-text); }
.diff-line-removed { background: var(--red-dim); color: var(--red-text); }
.diff-line-context { color: var(--text-secondary); }

/* ---------- Safety net ----------
   Broad coverage for any legacy class not explicitly renamed during migration,
   so nothing is left unstyled. Named component rules above always win (later
   in the cascade / more specific), this is a fallback floor only.
   Excludes .btn-add/.btn-signout/.btn-delete-repo explicitly - the sidebar nav
   buttons (design-system.css's own .btn-add.active, .btn-signout rules above)
   all contain the substring "btn" and were being silently overridden by this
   rule's higher specificity (0,3,0 vs 0,2,0/0,1,0) despite having their own
   dedicated, intentional styling - confirmed via screenshot (invisible active
   highlight, "Sign out" rendering as a boxed button instead of a text link). */
[class*="btn"]:not(.btn):not([class*="btn-group"]):not(.btn-add):not(.btn-signout):not(.btn-delete-repo) {
  font-family: var(--font-sans); border-radius: var(--radius); font-size: 12.5px;
  font-weight: 500; cursor: pointer; height: 32px; padding: 0 12px;
  background: var(--bg); border: 1px solid var(--border-strong); color: var(--text-primary);
}
[class*="badge-"]:not(.badge) {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px;
  border-radius: 12px; font-size: 11px; font-weight: 600; background: var(--border); color: var(--text-secondary);
}
[class*="sidebar-section"], [class*="card"]:not(.logo):not([class*="btn"]) {
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
[class*="io-table"], [class*="test-table"] { width: 100%; border-collapse: collapse; font-size: 12px; }
[class*="io-table"] th, [class*="test-table"] th { background: var(--bg-subtle); color: var(--text-tertiary); text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--border); }
[class*="io-table"] td, [class*="test-table"] td { padding: 8px 12px; border-bottom: 1px solid var(--border); }