/* SimplePM visual theme: "Slate & Teal" (docs/implementation-tracker.md Phase 9).
   Loaded after bootstrap.min.css. Overrides Bootstrap 5.3's root CSS custom
   properties (retints utility classes and any component that reads a root
   var, e.g. .text-bg-*, .bg-*, .text-*, .border-*, .alert-*) plus a handful
   of per-component custom properties that Bootstrap bakes as literal hex at
   build time and therefore does NOT inherit from the root vars above
   (.btn-*, .form-check-input:checked, .progress-bar). See the Phase 9
   Decisions Log entry for why each override exists. */

@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../lib/fonts/space-grotesk/space-grotesk-latin-500-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../lib/fonts/space-grotesk/space-grotesk-latin-700-normal.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../lib/fonts/ibm-plex-sans/ibm-plex-sans-latin-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../lib/fonts/ibm-plex-sans/ibm-plex-sans-latin-500-normal.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../lib/fonts/ibm-plex-sans/ibm-plex-sans-latin-600-normal.woff2") format("woff2");
}

:root {
  /* Primary: teal */
  --bs-primary: #0f766e;
  --bs-primary-rgb: 15, 118, 110;
  --bs-primary-text-emphasis: #0b4a45;
  --bs-primary-bg-subtle: #e6f5f3;
  --bs-primary-border-subtle: #a8d9d3;

  /* Secondary: slate */
  --bs-secondary: #475569;
  --bs-secondary-rgb: 71, 85, 105;
  --bs-secondary-text-emphasis: #1e293b;
  --bs-secondary-bg-subtle: #f1f5f9;
  --bs-secondary-border-subtle: #cbd5e1;

  --bs-success: #16a34a;
  --bs-success-rgb: 22, 163, 74;
  --bs-success-text-emphasis: #14532d;
  --bs-success-bg-subtle: #dcfce7;
  --bs-success-border-subtle: #86efac;

  --bs-warning: #d97706;
  --bs-warning-rgb: 217, 119, 6;
  --bs-warning-text-emphasis: #78350f;
  --bs-warning-bg-subtle: #fef3c7;
  --bs-warning-border-subtle: #fcd34d;

  --bs-danger: #dc2626;
  --bs-danger-rgb: 220, 38, 38;
  --bs-danger-text-emphasis: #7f1d1d;
  --bs-danger-bg-subtle: #fee2e2;
  --bs-danger-border-subtle: #fca5a5;

  /* Repurposed as the app's "ink" tone - the dark navbar background
     (nav uses navbar-dark bg-dark, see _Layout.cshtml) and any .text-dark
     usage. Nothing else in the app uses .btn-dark/.border-dark today. */
  --bs-dark: #1e293b;
  --bs-dark-rgb: 30, 41, 59;
  --bs-dark-text-emphasis: #0f172a;
  --bs-dark-bg-subtle: #e2e8f0;
  --bs-dark-border-subtle: #94a3b8;

  --bs-body-bg: #f8fafc;
  --bs-body-color: #0f172a;
  --bs-emphasis-color: #0f172a;
  --bs-secondary-color: #475569;
  --bs-tertiary-bg: #f1f5f9;
  --bs-border-color: #e2e8f0;
  --bs-border-color-translucent: rgba(30, 41, 59, 0.1);

  --bs-link-color: #0f766e;
  --bs-link-color-rgb: 15, 118, 110;
  --bs-link-hover-color: #115e59;
  --bs-link-hover-color-rgb: 17, 94, 89;
  --bs-focus-ring-color: rgba(var(--bs-primary-rgb), var(--bs-focus-ring-opacity));

  --bs-font-sans-serif: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-heading-font-family: "Space Grotesk", var(--bs-font-sans-serif);

  /* SimplePM design tokens (specs/ui-refresh.md §3.3). Use these instead
     of one-off radius, shadow and surface values. */
  --spm-radius: 0.5rem;
  --spm-radius-sm: 0.375rem;
  --spm-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.04);
  --spm-shadow: 0 0.25rem 0.75rem rgba(15, 23, 42, 0.06);
  --spm-surface-bg: #ffffff;
  --spm-surface-padding-x: 1rem;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.navbar-brand {
  font-family: var(--bs-heading-font-family);
  font-weight: 700;
}

/* .btn-*, .form-check-input:checked and .progress-bar bake their colors as
   literal hex custom properties at Bootstrap's build time, so they don't
   pick up the --bs-primary/--bs-secondary/etc. overrides above on their
   own - each needs its own override here. */
.btn-primary {
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: #115e59;
  --bs-btn-hover-border-color: #115e59;
  --bs-btn-active-bg: #0d5b54;
  --bs-btn-active-border-color: #0d5b54;
  --bs-btn-disabled-bg: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}

.btn-outline-primary {
  --bs-btn-color: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-active-bg: var(--bs-primary);
  --bs-btn-active-border-color: var(--bs-primary);
  --bs-btn-disabled-color: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}

.btn-secondary {
  --bs-btn-bg: var(--bs-secondary);
  --bs-btn-border-color: var(--bs-secondary);
  --bs-btn-hover-bg: #334155;
  --bs-btn-hover-border-color: #334155;
  --bs-btn-active-bg: #293548;
  --bs-btn-active-border-color: #293548;
  --bs-btn-disabled-bg: var(--bs-secondary);
  --bs-btn-disabled-border-color: var(--bs-secondary);
  --bs-btn-focus-shadow-rgb: var(--bs-secondary-rgb);
}

.btn-outline-secondary {
  --bs-btn-color: var(--bs-secondary);
  --bs-btn-border-color: var(--bs-secondary);
  --bs-btn-hover-bg: var(--bs-secondary);
  --bs-btn-hover-border-color: var(--bs-secondary);
  --bs-btn-active-bg: var(--bs-secondary);
  --bs-btn-active-border-color: var(--bs-secondary);
  --bs-btn-disabled-color: var(--bs-secondary);
  --bs-btn-disabled-border-color: var(--bs-secondary);
  --bs-btn-focus-shadow-rgb: var(--bs-secondary-rgb);
}

.btn-success {
  --bs-btn-bg: var(--bs-success);
  --bs-btn-border-color: var(--bs-success);
  --bs-btn-hover-bg: #128038;
  --bs-btn-hover-border-color: #128038;
  --bs-btn-active-bg: #0f6b2f;
  --bs-btn-active-border-color: #0f6b2f;
  --bs-btn-disabled-bg: var(--bs-success);
  --bs-btn-disabled-border-color: var(--bs-success);
  --bs-btn-focus-shadow-rgb: var(--bs-success-rgb);
}

.btn-outline-danger {
  --bs-btn-color: var(--bs-danger);
  --bs-btn-border-color: var(--bs-danger);
  --bs-btn-hover-bg: var(--bs-danger);
  --bs-btn-hover-border-color: var(--bs-danger);
  --bs-btn-active-bg: var(--bs-danger);
  --bs-btn-active-border-color: var(--bs-danger);
  --bs-btn-disabled-color: var(--bs-danger);
  --bs-btn-disabled-border-color: var(--bs-danger);
  --bs-btn-focus-shadow-rgb: var(--bs-danger-rgb);
}

.form-check-input:checked,
.form-check-input[type="checkbox"]:indeterminate {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

.progress {
  --bs-progress-bar-bg: var(--bs-primary);
}

/* Dark navbar (navbar-dark bg-dark in _Layout.cshtml): Bootstrap's own
   .navbar-dark rule already sets light/white text via rgba(255,255,255,*)
   custom properties, so no separate text-color override is needed here -
   only the background comes from --bs-dark above. */

/* Surfaces (specs/ui-refresh.md §3.3): tables, lists and forms sit on a
   white card against the off-white page. Used on the table-responsive
   wrapper round a table, or on a form. */
.surface {
  background: var(--spm-surface-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--spm-radius);
  box-shadow: var(--spm-shadow-sm);
}

/* List groups (project overview, task history) are surfaces too: white
   rather than Bootstrap's --bs-body-bg, with the same radius and shadow. */
.list-group {
  --bs-list-group-bg: var(--spm-surface-bg);
  --bs-list-group-border-radius: var(--spm-radius);
  box-shadow: var(--spm-shadow-sm);
}

/* A table on a surface: the card supplies the outer edge, so the table
   drops its bottom margin and last row border, and the first and last
   columns get the card's side padding. */
.surface > .table {
  --bs-table-bg: var(--spm-surface-bg);
  margin-bottom: 0;
}

.surface > .table > :last-child > tr:last-child > * {
  border-bottom-width: 0;
}

.surface > .table > :not(caption) > * > :first-child {
  padding-inline-start: var(--spm-surface-padding-x);
}

.surface > .table > :not(caption) > * > :last-child {
  padding-inline-end: var(--spm-surface-padding-x);
}

/* Quieter header row: hover replaces stripes (table-hover in markup). */
.table > thead > tr > th {
  background-color: var(--bs-tertiary-bg);
  color: var(--bs-secondary-color);
  font-size: 0.875rem;
  font-weight: 600;
}

@media print {
  .surface {
    border: 0;
    box-shadow: none;
  }
}

/* Status, priority and type badges (specs/ui-refresh.md §3.4,
   _StatusBadge / _PriorityBadge / _TaskTypeBadge). The partial sets
   --spm-badge-color; the badge is a light tint of it with dark text, so
   chart colours that are too light for white text still read clearly.
   The colour is carried by a dot (--dot) or the icon. */
.spm-badge {
  --spm-badge-color: var(--bs-secondary-color);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.1rem 0.5rem;
  border: 1px solid color-mix(in srgb, var(--spm-badge-color) 35%, var(--spm-surface-bg));
  border-radius: 999px;
  background: color-mix(in srgb, var(--spm-badge-color) 10%, var(--spm-surface-bg));
  color: var(--bs-body-color);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
}

.spm-badge > .bi {
  color: var(--spm-badge-color);
}

.spm-badge--dot::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--spm-badge-color);
}

/* Assignee initials (§3.5, _Assignee.cshtml). Colour from the user ID
   (Avatar.ColourIndex); each background passes 4.5:1 with white text. */
.assignee {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.avatar {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 1.625rem;
  height: 1.625rem;
  border-radius: 50%;
  background: var(--bs-secondary);
  color: #ffffff;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
}

.avatar-0 { background: #0f766e; }
.avatar-1 { background: #1d4ed8; }
.avatar-2 { background: #7c3aed; }
.avatar-3 { background: #be185d; }
.avatar-4 { background: #b45309; }
.avatar-5 { background: #15803d; }
.avatar-6 { background: #475569; }
.avatar-7 { background: #0369a1; }

/* Overlapping initials for a group of people (project cards). */
.avatar-stack {
  display: inline-flex;
  align-items: center;
}

.avatar-stack > .avatar {
  margin-left: -0.4rem;
  box-shadow: 0 0 0 2px var(--spm-surface-bg);
}

.avatar-stack > .avatar:first-child,
.avatar-stack > .visually-hidden + .avatar {
  margin-left: 0;
}

.avatar-more {
  background: var(--bs-tertiary-bg);
  color: var(--bs-secondary-color);
}

/* Project overview dashboard (specs/ui-refresh.md §4.1, Projects/Details). */
.overview-intro {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-bottom: 1rem;
}

.overview-description {
  flex: 1 1 30rem;
  margin: 0;
  color: var(--bs-secondary-color);
}

.overview-intro > .btn {
  margin-left: auto;
}

.summary-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}

.summary-tile {
  display: flex;
  flex-direction: column;
  padding: 0.85rem var(--spm-surface-padding-x);
  color: var(--bs-body-color);
  text-decoration: none;
}

.summary-tile:hover {
  border-color: var(--bs-primary-border-subtle);
  color: var(--bs-body-color);
  box-shadow: var(--spm-shadow);
}

.summary-tile-label {
  color: var(--bs-secondary-color);
  font-size: 0.85rem;
  font-weight: 500;
}

.summary-tile-value {
  font-family: var(--bs-heading-font-family);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
}

.summary-tile-hint {
  color: var(--bs-secondary-color);
  font-size: 0.8rem;
}

.summary-tile--alert .summary-tile-value {
  color: var(--bs-danger);
}

.summary-tile--good .summary-tile-value {
  color: var(--bs-primary);
}

.section-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  margin-bottom: 0.5rem;
}

.status-summary {
  margin-bottom: 1rem;
  padding: 0.85rem var(--spm-surface-padding-x);
}

.status-bar {
  display: flex;
  gap: 2px;
  height: 0.75rem;
  overflow: hidden;
  border-radius: 999px;
  background: var(--bs-tertiary-bg);
}

.status-bar > span {
  flex-basis: 0;
}

.status-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  margin: 0.6rem 0 0;
  padding: 0;
  color: var(--bs-secondary-color);
  font-size: 0.85rem;
  list-style: none;
}

.status-legend li {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.status-legend strong {
  color: var(--bs-body-color);
}

.status-legend-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
}

/* Open tasks on the left, releases and work streams on the right; they
   stack below lg. */
/* minmax(0, 1fr), not the implicit auto column: an auto track grows to
   its widest content (the open-tasks table), which pushed the page wider
   than a phone screen. */
.overview-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem 1.5rem;
}

@media (min-width: 992px) {
  .overview-columns {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    align-items: start;
  }
}

.overview-side {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* A surface list of items with a progress bar each (releases, work streams). */
.progress-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.progress-list > li {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.75rem var(--spm-surface-padding-x);
}

.progress-list > li + li {
  border-top: 1px solid var(--bs-border-color);
}

.progress-list-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
}

.progress-list-head > a:first-child {
  font-weight: 600;
}

.progress-list-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  color: var(--bs-secondary-color);
  font-size: 0.8rem;
}

.progress-thin {
  height: 0.5rem;
}

/* Task Details (specs/ui-refresh.md §4.2): main column and a properties
   card on the side from lg up; on phones the properties come first. */
.task-layout {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.task-side {
  order: -1;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

@media (min-width: 992px) {
  .task-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20rem;
    align-items: start;
    gap: 1.5rem;
  }

  .task-side {
    order: 0;
    position: sticky;
    top: 1rem;
  }
}

.task-description,
.task-comment-body {
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.task-description-input {
  height: 8rem;
}

.task-properties {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.6rem 1rem;
  align-items: center;
  margin: 0;
}

.task-properties dt {
  color: var(--bs-secondary-color);
  font-size: 0.85rem;
  font-weight: 500;
}

.task-properties dd {
  margin: 0;
}

.task-meta {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.15rem 0.75rem;
  margin: 0;
  padding: 0 0.25rem;
  color: var(--bs-secondary-color);
  font-size: 0.8rem;
}

.task-meta dt {
  font-weight: 500;
}

.task-meta dd {
  margin: 0;
}

/* Tabs (site.js data-tabs). Without JavaScript the tab links are a row of
   jump links and every panel shows, each with its own heading; with it
   (.tabs--js) only the active panel shows and the tab names it. */
/* The grey line is an inset shadow, not a border, so the active tab's
   underline can sit on it without a negative margin. That keeps the row
   from overflowing vertically (which showed up/down scroll arrows), so it
   can scroll sideways on very narrow screens instead of widening the
   page. */
.tab-list {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 1rem;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  box-shadow: inset 0 -1px 0 var(--bs-border-color);
}

.tab-list::-webkit-scrollbar {
  display: none;
}

.tab-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 0.85rem;
  border-bottom: 2px solid transparent;
  color: var(--bs-secondary-color);
  text-decoration: none;
  white-space: nowrap;
}

.tab-link:hover {
  color: var(--bs-body-color);
}

.tab-link.active {
  border-bottom-color: var(--bs-primary);
  color: var(--bs-primary);
  font-weight: 600;
}

.tab-count {
  padding: 0 0.45rem;
  border-radius: 999px;
  background: var(--bs-tertiary-bg);
  color: var(--bs-secondary-color);
  font-size: 0.75rem;
  font-weight: 500;
}

/* Phones: drop the icons and tighten the padding so the three Task
   Details tabs fit without scrolling. */
@media (max-width: 575.98px) {
  .tab-link {
    gap: 0.3rem;
    padding: 0.55rem 0.5rem;
  }

  .tab-link > .bi {
    display: none;
  }
}

.tab-panel + .tab-panel {
  margin-top: 1.5rem;
}

.tabs--js .tab-panel:not(.active) {
  display: none;
}

.tabs--js .tab-panel + .tab-panel {
  margin-top: 0;
}

.tabs--js .tab-panel-heading {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Paper: every panel, no tabs. */
@media print {
  .tabs--js .tab-panel:not(.active) {
    display: block;
  }

  .tabs--js .tab-panel-heading {
    position: static;
    width: auto;
    height: auto;
    clip: auto;
  }

  .task-side {
    position: static;
  }
}

/* My Tasks summary strip (specs/ui-refresh.md §4.4): three count tiles,
   each a link that filters the board. */
.due-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.due-tile {
  display: flex;
  flex-direction: column;
  padding: 0.6rem var(--spm-surface-padding-x);
  color: var(--bs-body-color);
  text-decoration: none;
}

.due-tile:hover {
  border-color: var(--bs-primary-border-subtle);
  color: var(--bs-body-color);
}

.due-tile.active {
  border-color: var(--bs-primary);
  background: var(--bs-primary-bg-subtle);
}

.due-tile-count {
  font-family: var(--bs-heading-font-family);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.2;
}

.due-tile--alert .due-tile-count {
  color: var(--bs-danger);
}

.due-tile-label {
  color: var(--bs-secondary-color);
  font-size: 0.85rem;
}

/* Projects list cards (specs/ui-refresh.md §4.3). */
.project-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}

.project-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem var(--spm-surface-padding-x);
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.project-card:hover,
.project-card:focus-within {
  border-color: var(--bs-primary-border-subtle);
  box-shadow: var(--spm-shadow);
}

.project-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}

.project-card-title {
  margin: 0;
  font-size: 1.15rem;
  overflow-wrap: anywhere;
}

.project-card-title > a {
  color: var(--bs-body-color);
  text-decoration: none;
}

.project-card:hover .project-card-title > a {
  color: var(--bs-primary);
}

/* Two lines at most; the full description is on the overview. */
.project-card-description {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  color: var(--bs-secondary-color);
  font-size: 0.9rem;
}

.project-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 0.5rem;
  border-top: 1px solid var(--bs-border-color);
  font-size: 0.875rem;
}

.project-card-counts {
  display: flex;
  gap: 0.75rem;
  color: var(--bs-secondary-color);
}

.project-card-counts strong {
  color: var(--bs-body-color);
}

.project-card-counts .task-overdue strong {
  color: inherit;
}

/* Paper: no tints or circles, just the text. */
@media print {
  .spm-badge {
    padding: 0;
    border: 0;
    background: none;
  }

  .spm-badge--dot::before,
  .avatar {
    display: none;
  }
}

/* Section header band and tabs, for projects and admin (specs/ui-refresh.md
   §5 Option B and §5.1, _SectionHeader.cshtml). White band under the navbar; the active tab
   gets a teal underline. Tabs scroll sideways rather than wrap on phones. */
.section-header {
  background: var(--spm-surface-bg);
  border-bottom: 1px solid var(--bs-border-color);
  padding-top: 0.75rem;
}

.section-header-parent {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--bs-secondary-color);
  font-size: 0.875rem;
  text-decoration: none;
}

.section-header-parent:hover {
  color: var(--bs-link-hover-color);
}

.section-header-parent > .bi {
  font-size: 0.75rem;
}

.section-header-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.75rem;
  margin: 0.125rem 0 0.5rem;
}

.section-header-title {
  margin: 0;
  color: var(--bs-body-color);
  font-family: var(--bs-heading-font-family);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.2;
  overflow-wrap: anywhere;
  text-decoration: none;
}

a.section-header-title:hover {
  color: var(--bs-primary);
}

.section-tabs {
  position: relative;
  display: flex;
  gap: 0.25rem;
  overflow-x: auto;
  scrollbar-width: thin;
}

/* On phones the tabs are swiped, so the scroll bar goes; instead the edge
   with more tabs beyond it fades out (site.js sets can-scroll-left /
   can-scroll-right) and the active tab is scrolled into view. Wider
   screens keep the thin scroll bar for mouse users. */
@media (max-width: 767.98px) {
  .section-tabs {
    scrollbar-width: none;
  }

  .section-tabs::-webkit-scrollbar {
    display: none;
  }

  .section-tab {
    gap: 0.3rem;
    padding: 0.55rem 0.6rem;
  }
}

.section-tabs.can-scroll-right {
  mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
}

.section-tabs.can-scroll-left {
  mask-image: linear-gradient(to left, #000 calc(100% - 2.5rem), transparent);
}

.section-tabs.can-scroll-left.can-scroll-right {
  mask-image: linear-gradient(to right, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent);
}

.section-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 0.85rem;
  border-bottom: 2px solid transparent;
  color: var(--bs-secondary-color);
  text-decoration: none;
  white-space: nowrap;
}

.section-tab:hover {
  border-bottom-color: var(--bs-border-color);
  color: var(--bs-body-color);
}

.section-tab.active {
  border-bottom-color: var(--bs-primary);
  color: var(--bs-primary);
  font-weight: 600;
}

/* Page header (specs/ui-refresh.md §3.2, _PageHeader.cshtml): title and
   summary on the left, actions right-aligned from md up and below the
   title on phones. */
.page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin-bottom: 1rem;
}

.page-header-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.75rem;
}

.page-header-title {
  margin: 0;
  font-size: 1.6rem;
  overflow-wrap: anywhere;
}

.page-header-summary {
  margin: 0.25rem 0 0;
  color: var(--bs-secondary-color);
  font-size: 0.9rem;
}

.page-header-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Two form cards side by side (Profile): the pair stays the width of two
   narrow forms rather than stretching across wide screens. */
.form-columns {
  max-width: 56rem;
}

/* Status messages (§5.1, _StatusMessage.cshtml). */
.status-message {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.status-message > .bi {
  flex: 0 0 auto;
  line-height: 1.5;
}

/* A table row's Actions menu (Admin / Users): a <details> that opens in
   place, like board cards, so it works without JavaScript. */
.row-actions > summary {
  color: var(--bs-link-color);
  cursor: pointer;
  white-space: nowrap;
}

.row-actions-menu {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-top: 0.25rem;
}

.row-actions-menu .btn-link {
  padding: 0.15rem 0;
  text-decoration: none;
  white-space: nowrap;
}

/* Option tiles: a radio group shown as selectable cards, each a real
   radio inside its label (Admin / Storage). */
.option-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr));
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.option-tile {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.75rem;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--spm-radius);
  cursor: pointer;
}

.option-tile:hover {
  border-color: var(--bs-primary-border-subtle);
}

.option-tile:has(input:checked) {
  border-color: var(--bs-primary);
  background: var(--bs-primary-bg-subtle);
}

.option-tile > .form-check-input {
  flex: 0 0 auto;
  margin-top: 0.2rem;
}

.option-tile-text {
  display: flex;
  flex-direction: column;
}

.option-tile-title {
  font-weight: 600;
}

.option-tile-hint {
  color: var(--bs-secondary-color);
  font-size: 0.8125rem;
}

/* Settings sub-navigation (_ProjectSettingsNav). .nav-pills bakes its
   active colour as a literal, like .btn-*, so it needs its own override. */
.nav-pills {
  --bs-nav-pills-link-active-bg: var(--bs-primary);
}

.nav-pills-sm .nav-link {
  padding: 0.3rem 0.75rem;
  font-size: 0.875rem;
}

/* Filter bar (specs/ui-refresh.md §3.6). A <details> so it collapses on
   phones without needing JavaScript; from md up the toggle is hidden and
   the bar is always open (site.js closes it on phones when no filter is
   set). */
.filter-bar {
  padding: 0.5rem var(--spm-surface-padding-x) 0.75rem;
}

.filter-bar > summary {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0;
  color: var(--bs-secondary-color);
  font-weight: 600;
  cursor: pointer;
}

.filter-bar:not([open]) {
  padding-bottom: 0.5rem;
}

.filter-bar .form-label {
  margin-bottom: 0.125rem;
  color: var(--bs-secondary-color);
  font-size: 0.8125rem;
  font-weight: 500;
}

@media (min-width: 768px) {
  .filter-bar > summary {
    display: none;
  }
}

.filter-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.15rem 0.5rem 0.15rem 0.65rem;
  border: 1px solid var(--bs-primary-border-subtle);
  border-radius: 999px;
  background: var(--bs-primary-bg-subtle);
  color: var(--bs-primary-text-emphasis);
  font-size: 0.8125rem;
  text-decoration: none;
}

.filter-chip:hover,
.filter-chip:focus-visible {
  border-color: var(--bs-primary);
  color: var(--bs-primary-text-emphasis);
}

.filter-chip > .bi {
  font-size: 0.7rem;
}

@media print {
  .filter-chip > .bi,
  .filter-chips-clear {
    display: none;
  }
}

/* Empty states (specs/ui-refresh.md §3.7, _EmptyState.cshtml). */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 1rem;
  padding: 2.5rem 1rem;
  color: var(--bs-secondary-color);
  text-align: center;
}

.empty-state-icon {
  margin-bottom: 0.75rem;
  color: var(--bs-primary);
  font-size: 2rem;
  line-height: 1;
}

.empty-state-compact {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--bs-secondary-color);
}

/* Overdue due dates (TaskOverdueRule), on the task list and board cards. */
.task-overdue {
  color: var(--bs-danger);
  font-weight: 600;
}

/* Kanban board (specs/kanban-board.md, Pages/Projects/Board). On phones the
   columns stack vertically at full width, so the page scrolls down through
   them. From md (768px) up they sit in one horizontally scrolling row. */
.board {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-bottom: 0.5rem;
}

.board-column {
  background: var(--bs-tertiary-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--spm-radius);
  padding: 0.5rem;
}

@media (min-width: 768px) {
  .board {
    flex-direction: row;
    align-items: flex-start;
    overflow-x: auto;
  }

  .board-column {
    flex: 0 0 16rem;
  }
}

/* Wide screens: open columns share the width so the whole board fits
   without scrolling sideways; collapsed columns keep a fixed, narrower
   width since they only show a heading and a drop zone. */
@media (min-width: 1400px) {
  .board-column {
    flex: 1 1 0;
    min-width: 14rem;
  }

  .board--js .board-column[data-collapsed="true"] {
    flex: 0 0 12rem;
    min-width: 12rem;
  }
}

.board-column-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.25rem 0.25rem 0.5rem;
}

.board-column-cards {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-height: 3rem;
  border-radius: var(--spm-radius-sm);
}

/* Collapsed only once board.js has run (.board--js), so no-JS users never
   get a column they can't open. The cards list itself stays visible as an
   empty drop zone, so a card can still be dropped onto a collapsed column. */
.board--js .board-column[data-collapsed="true"] .board-card {
  display: none;
}

.board--js .board-column[data-collapsed="true"] .board-column-cards {
  border: 1px dashed var(--bs-border-color-translucent);
}

/* White like every other surface (.card otherwise takes --bs-body-bg). */
.board-card {
  --bs-card-bg: var(--spm-surface-bg);
  border-color: var(--bs-border-color);
  box-shadow: var(--spm-shadow-sm);
}

.board-card[data-can-move="true"] {
  cursor: grab;
}

.board-card-title {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.board-card-meta dd {
  margin-bottom: 0;
}

.board-card--ghost {
  opacity: 0.4;
}

.board-card--pending {
  opacity: 0.6;
}

/* Board card extras: the project label (My Tasks board) and the
   collapsible "Actions" panel holding Move to… / Assign to…. */
.board-card-project {
  color: var(--bs-secondary-color);
  text-decoration: none;
}

.board-card-actions > summary {
  cursor: pointer;
  color: var(--bs-link-color);
}