/*
 * Margit app-specific component styles.
 * Loaded after base.css (the design system) — relies on its tokens.
 * Keep additions minimal and semantic.
 */

/* ---------- Status pills ---------- */
small[data-status] {
  display: inline-block;
  padding: 0.13rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  vertical-align: middle;
}

/* neutral */
[data-status="draft"], [data-status="pending"], [data-status="locked"] {
  background: #f1f3f5; color: #51596b; border-color: #e3e6eb;
}
[data-status="locked"] { opacity: 0.85; }
/* info / in-progress */
[data-status="running"], [data-status="classified"],
[data-status="distributed"], [data-status="scheduled"] {
  background: #e3edff; color: #1d4ed8; border-color: #c8dbff;
}
/* success */
[data-status="success"], [data-status="rewritten"], [data-status="imported"] {
  background: #dcfce7; color: #15803d; border-color: #bbf3cd;
}
/* failure */
[data-status="failed"] {
  background: #fde4e4; color: #b91c1c; border-color: #f8c9c9;
}
/* ready / queued */
[data-status="ready"] {
  background: #ece9fe; color: #6d28d9; border-color: #ddd6fe;
}
/* updates pending */
[data-status="update"] {
  background: #fef1d6; color: #b45309; border-color: #fbe1a8;
}

/* ---------- Article-level status tints ---------- */
article[data-status="failed"] {
  border-color: var(--danger);
  background: var(--danger-soft);
  box-shadow: none;
}
article[data-status="running"] {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: none;
}

/* ---------- Pipeline step cards ---------- */
.pipeline-step { margin-block: 0.6rem; padding: 0.9rem 1.1rem; box-shadow: none; }
.pipeline-step > header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 0.25rem;
  padding: 0;
  border: 0;
}
.pipeline-step > header h3 { margin: 0; font-size: 1.02rem; flex: 1; }
.pipeline-step .hint { margin: 0.15rem 0 0.7rem; color: var(--muted); font-size: 0.875rem; }
.pipeline-step[data-state="locked"] { opacity: 0.55; }
.pipeline-step[data-state="running"] { border-left: 3px solid var(--accent); }
.pipeline-step[data-state="failed"] { border-left: 3px solid var(--danger); }
.pipeline-step[data-state="done"] { border-left: 3px solid #16a34a; }
.pipeline-step form { display: inline-block; margin: 0 0.35rem 0.35rem 0; }
.pipeline-step button { margin: 0; }
.pipeline-step a[role="button"] { margin: 0 0.35rem 0.35rem 0; }

/* ---------- Help text ---------- */
.hint { color: var(--muted); font-size: 0.875rem; }

/* ---------- Live agent event log ---------- */
pre.agent-log { max-height: 26rem; overflow: auto; font-size: 0.8rem; line-height: 1.5; }

/* Compact nowrap cells for commit/schedule tables */
table small { white-space: nowrap; }
/* Work-log descriptions wrap (the date column keeps nowrap). */
table.work-logs td.desc small { white-space: normal; overflow-wrap: anywhere; }
table.work-logs td.desc { min-width: 12rem; vertical-align: top; }

/* Issues: prose columns wrap so the table never overflows the page. */
table.issues td { vertical-align: top; }
table.issues td.subject small,
table.issues td.commits small,
table.issues td.topics small { white-space: normal; overflow-wrap: anywhere; }
table.issues td.subject { min-width: 16rem; }
table.issues td.commits { min-width: 14rem; }

/* Constraint config: show formatted JSON, wrapped within the cell. */
td.config small { white-space: normal; }
td.config code {
  display: block;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: none;
  padding: 0;
}

/* ---------- Schedule heatmap cells ---------- */
.overload { background: #fde4e4; }
.within { background: #dcfce7; }

/* ---------- Dark-mode overrides for the explicit palettes above ---------- */
@media (prefers-color-scheme: dark) {
  [data-status="draft"], [data-status="pending"], [data-status="locked"] {
    background: #1f242d; color: #9aa3b2; border-color: #2c323d;
  }
  [data-status="running"], [data-status="classified"],
  [data-status="distributed"], [data-status="scheduled"] {
    background: #1b2740; color: #93c5fd; border-color: #2c3a55;
  }
  [data-status="success"], [data-status="rewritten"], [data-status="imported"] {
    background: #14271c; color: #86efac; border-color: #225034;
  }
  [data-status="failed"] {
    background: #2a1818; color: #fca5a5; border-color: #512828;
  }
  [data-status="ready"] {
    background: #211a3a; color: #c4b5fd; border-color: #3a2d5e;
  }
  [data-status="update"] {
    background: #2a2113; color: #fcd34d; border-color: #5a4520;
  }

  .overload { background: #371d1d; }
  .within { background: #16301f; }
}

/* ---------- Day matrix (day_cells) ---------- */
table.matrix { border-collapse: collapse; font-size: 0.72rem; }
table.matrix th, table.matrix td { border: 1px solid rgba(128, 128, 128, 0.25); padding: 1px 5px; text-align: center; }
table.matrix thead th { position: sticky; top: 0; background: var(--pico-background-color, #fff); }
table.matrix .matrix-date { text-align: right; white-space: nowrap; color: var(--pico-muted-color, #888); }
table.matrix .matrix-month th { text-align: left; font-weight: bold; background: rgba(128, 128, 128, 0.12); }
/* Tints layered over the theme background — readable in light and dark. */
table.matrix td[data-kind="commit"]      { background: rgba(34, 197, 94, 0.28); }
table.matrix td[data-kind="filler"]      { background: rgba(59, 130, 246, 0.22); }
table.matrix td[data-kind="task"]        { background: rgba(20, 184, 166, 0.28); }
table.matrix td[data-kind="excluded"]    { background: rgba(245, 158, 11, 0.30); }
table.matrix td[data-kind="non_working"] { background: rgba(128, 128, 128, 0.14); }
table.matrix td[data-kind="empty"]       { color: rgba(128, 128, 128, 0.6); }
/* Scheduled commit with no work-log yet — overrides the empty tint above. */
table.matrix td[data-commit="pending"]   { background: rgba(168, 85, 247, 0.30); color: rgba(126, 34, 206, 1); font-weight: bold; }
/* Scheduled task with no work-log yet — teal to match the task tint, bold like commits. */
table.matrix td[data-task="pending"]     { background: rgba(20, 184, 166, 0.18); color: rgba(13, 148, 136, 1); font-weight: bold; }
.matrix-legend span { display: inline-block; padding: 0 0.5rem; margin-right: 0.4rem; border-radius: 3px; font-size: 0.8rem; }
.matrix-legend span[data-commit="pending"]   { background: rgba(168, 85, 247, 0.30); }
.matrix-legend span[data-task="pending"]      { background: rgba(20, 184, 166, 0.18); }
.matrix-legend span[data-kind="commit"]      { background: rgba(34, 197, 94, 0.28); }
.matrix-legend span[data-kind="filler"]      { background: rgba(59, 130, 246, 0.22); }
.matrix-legend span[data-kind="task"]        { background: rgba(20, 184, 166, 0.28); }
.matrix-legend span[data-kind="excluded"]    { background: rgba(245, 158, 11, 0.30); }
.matrix-legend span[data-kind="non_working"] { background: rgba(128, 128, 128, 0.14); }
/* Per-repository marker: a coloured letter badge identifying a commit's source repo. */
.repo-badge { display: inline-block; min-width: 0.85em; padding: 0 3px; border-radius: 2px; color: #fff; font-weight: bold; font-size: 0.66rem; line-height: 1.4; text-align: center; }
table.matrix td .repo-badge { margin: 0 1px; }
.repo-legend { font-size: 0.85rem; }
.repo-legend .repo-badge { margin: 0 0.25rem 0 0.8rem; padding: 0 5px; }

/* ---------- Tabs ---------- */
.tabs-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}
.tabs-nav [role="tab"] {
  background: transparent;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  margin-bottom: -1px;
  padding: 0.45rem 0.9rem;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  width: auto;
}
.tabs-nav [role="tab"]:hover { color: var(--text); }
.tabs-nav [role="tab"][aria-selected="true"] {
  background: var(--surface);
  border-color: var(--border);
  border-bottom-color: var(--surface);
  color: var(--accent);
}

/* ---------- App shell (project-scoped layout) ----------
 * Two-column grid: persistent sidebar + main column. In project mode the
 * <main>/<footer> live inside .app-main (not direct children of body), so the
 * base.css `body > main` centring rules don't apply — we re-centre here. */
.app-shell {
  display: grid;
  grid-template-columns: 16rem minmax(0, 1fr);
  min-height: 100vh;
}

.app-main { display: flex; flex-direction: column; min-width: 0; }

.app-main > main {
  flex: 1;
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding: 0.5rem 1.5rem 3rem;
}

.app-main > footer {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding: 1.5rem;
  margin-top: 2rem;
  border-top: 1px solid var(--border);
  color: var(--muted);
}

/* Top bar holds only the mobile nav toggle + wordmark (toggle hidden on wide). */
.app-topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.55rem 1.5rem;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--border);
}
.app-topbar strong a { font-weight: 700; color: var(--text); }
.app-topbar__toggle { display: none; padding: 0.3rem 0.6rem; margin: 0; }

/* Sidebar */
.app-sidebar {
  position: sticky; top: 0; align-self: start;
  height: 100vh; overflow-y: auto;
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 1rem 0.85rem;
}
.app-sidebar__head {
  padding: 0.25rem 0.4rem 0.85rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0.5rem;
}
.app-sidebar__logo { display: block; height: 4.5rem; width: auto; margin: 0 auto 0.75rem; }
.app-sidebar__back { display: inline-block; font-size: 0.8rem; color: var(--muted); margin-bottom: 0.5rem; }
.app-sidebar__title { display: block; font-size: 1.1rem; line-height: 1.3; margin-bottom: 0.45rem; }
.app-sidebar__title a { color: var(--text); }
.app-sidebar__title a:hover { color: var(--accent); text-decoration: none; }

.app-sidebar__group {
  margin: 1rem 0.4rem 0.3rem;
  font-size: 0.7rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--muted);
}
/* Override base.css `nav { display: flex }` / `nav ul { display: flex }` so the
 * sidebar stacks its groups and items vertically, one per row. */
.app-sidebar__nav { display: block; }
.app-sidebar__nav ul { display: block; list-style: none; margin: 0; padding: 0; }
.app-sidebar__nav li { display: block; margin: 0.1rem 0; }
.app-sidebar__nav a {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.4rem 0.6rem;
  border-radius: var(--radius-sm);
  color: var(--text); font-weight: 500; font-size: 0.92rem;
}
.app-sidebar__nav a:hover { background: var(--surface-2); text-decoration: none; }
.app-sidebar__nav a.is-active { background: var(--accent-soft); color: var(--accent-hover); font-weight: 600; }
.app-sidebar__label { flex: 1; }
.app-sidebar .icon { width: 1.05rem; height: 1.05rem; flex: 0 0 auto; color: var(--muted); }
.app-sidebar__nav a:hover .icon,
.app-sidebar__nav a.is-active .icon { color: inherit; }
.app-sidebar__count {
  font-size: 0.72rem; color: var(--muted);
  background: var(--surface-2); border-radius: 999px; padding: 0.05rem 0.45rem;
}
.app-sidebar__nav a.is-active .app-sidebar__count { background: var(--surface); color: var(--accent-hover); }

.app-shell__backdrop { display: none; }

/* Responsive: collapse the sidebar into an off-canvas drawer. */
@media (max-width: 60rem) {
  .app-shell { grid-template-columns: 1fr; }
  .app-topbar__toggle { display: inline-block; }
  .app-sidebar {
    position: fixed; top: 0; left: 0; z-index: 40;
    width: 16rem; max-width: 85vw;
    transform: translateX(-100%);
    transition: transform 0.18s ease;
    box-shadow: var(--shadow-md);
  }
  .app-shell[data-open] .app-sidebar { transform: translateX(0); }
  .app-shell[data-open] .app-shell__backdrop {
    display: block; position: fixed; inset: 0; z-index: 30;
    background: rgba(0, 0, 0, 0.4);
  }
}

/* ---------- Page header & breadcrumbs ---------- */
.page-header { margin-bottom: 1.25rem; }
.breadcrumbs {
  display: flex; flex-wrap: wrap; gap: 0.35rem;
  list-style: none; margin: 0 0 0.6rem; padding: 0;
  font-size: 0.82rem; color: var(--muted);
}
.breadcrumbs li { margin: 0; }
.breadcrumbs li + li::before { content: "/"; margin-right: 0.35rem; color: var(--muted); }
.breadcrumbs a { color: var(--muted); }
.breadcrumbs a:hover { color: var(--text); }
.breadcrumbs [aria-current="page"] { color: var(--text); font-weight: 500; }
.page-header__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}
.page-header__title { margin: 0; }
.page-header__actions { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.page-header__actions form.button_to,
.page-header__actions a[role="button"],
.page-header__actions [type="submit"] { margin: 0; }
.flash { margin-block: 0.5rem 1rem; }

/* ---------- Overview stat cards ---------- */
.stat-grid {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
}
.stat__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; margin-bottom: 0.6rem;
  border-radius: var(--radius-sm);
  background: var(--accent-soft); color: var(--accent);
}
.stat__icon .icon { width: 1.15rem; height: 1.15rem; }
.stat__num { font-size: 1.7rem; font-weight: 700; line-height: 1.1; }
.stat__label { color: var(--muted); font-size: 0.85rem; }
.stat a { color: inherit; }

/* ---------- Pipeline phases ---------- */
.pipeline-phase { margin-block: 1.75rem; }
.pipeline-phase:first-of-type { margin-top: 0.75rem; }
.pipeline-phase__head { display: flex; align-items: baseline; gap: 0.6rem; margin-bottom: 0.25rem; }
.pipeline-phase__head h2 { margin: 0; font-size: 1.2rem; }
.pipeline-phase__head .num { color: var(--muted); font-weight: 600; }
.pipeline-step[data-current="true"] {
  border-left-color: var(--accent);
  box-shadow: 0 0 0 2px var(--ring);
}