/* 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);
}

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. */

/* 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). Columns sit in
   one horizontally scrolling row; on narrow screens each column takes most
   of the viewport and snaps, so it reads one column at a time. */
.board {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 0.5rem;
}

.board-column {
  flex: 0 0 85%;
  scroll-snap-align: start;
  background: var(--bs-tertiary-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 0.5rem;
  padding: 0.5rem;
}

@media (min-width: 768px) {
  .board-column {
    flex-basis: 16rem;
  }
}

.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: 0.375rem;
}

/* 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);
}

.board-card {
  border-color: var(--bs-border-color);
}

.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);
}