/* ============================================================
   NervDash Web — Dark theme stylesheet
   Palette mirrors assets/style.css:
     bg-deep:    #171923
     bg-base:    #1a202c
     bg-card:    #2d3748
     bg-hover:   #4a5568
     accent:     #2b6cb0   (blue)
     accent-lt:  #63b3ed
     text:       #e2e8f0
     text-muted: #a0aec0
     text-dim:   #718096
   ============================================================ */

/* ── Reset / base ──────────────────────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  background: #171923;
  color: #e2e8f0;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

a {
  color: #63b3ed;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* ── Navbar ────────────────────────────────────────────────────────────── */

.navbar {
  display: flex;
  align-items: center;
  gap: 0;
  height: 48px;
  padding: 0 20px;
  background: #1a202c;
  border-bottom: 1px solid #2d3748;
  position: sticky;
  top: 0;
  z-index: 100;
}

.navbar-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-right: 32px;
}

.navbar-logo {
  font-size: 18px;
}

.navbar-title {
  font-size: 15px;
  font-weight: 700;
  color: #e2e8f0;
  letter-spacing: 0.02em;
}

.navbar-workspaces {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  overflow-x: auto;
}

.navbar-ws-empty {
  color: #4a5568;
  font-size: 12px;
  font-style: italic;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 6px;
  color: #a0aec0;
  font-size: 13px;
  font-weight: 500;
  transition: background 0.15s, color 0.15s;
}

.nav-link:hover {
  background: #2d3748;
  color: #e2e8f0;
  text-decoration: none;
}

.nav-link--active {
  background: #2d3748;
  color: #e2e8f0;
}

.navbar-user {
  margin-left: auto;
}

.nav-user-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 6px;
  background: #2d3748;
  color: #a0aec0;
  font-size: 12px;
  transition: background 0.15s;
}

.nav-user-btn:hover {
  background: #4a5568;
  color: #e2e8f0;
  text-decoration: none;
}

/* ── Main content area ─────────────────────────────────────────────────── */

.app-body {
  display: flex;
  align-items: flex-start;
}

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 176px;
  flex-shrink: 0;
  padding: 16px 12px;
  position: sticky;
  top: 48px;
  /* navbar height */
  height: calc(100vh - 48px);
  border-right: 1px solid #2d3748;
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 6px;
  color: #a0aec0;
  font-size: 13px;
  font-weight: 500;
  transition: background 0.15s, color 0.15s;
}

.sidebar-link:hover {
  background: #2d3748;
  color: #e2e8f0;
  text-decoration: none;
}

.sidebar-link--active {
  background: #2d3748;
  color: #e2e8f0;
}

.main-content {
  flex: 1;
  min-width: 0;
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 20px 48px;
}

/* ── Page header ───────────────────────────────────────────────────────── */

.page-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.page-title {
  font-size: 20px;
  font-weight: 700;
  color: #e2e8f0;
}

.page-subtitle {
  color: #a0aec0;
  font-size: 13px;
  margin-top: 4px;
}

/* ── Filter pills ──────────────────────────────────────────────────────── */

.filter-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid #2d3748;
  background: #1a202c;
  color: #a0aec0;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.pill:hover {
  background: #2d3748;
  color: #e2e8f0;
  border-color: #4a5568;
}

.pill--active {
  background: #2b6cb0;
  border-color: #2b6cb0;
  color: #bee3f8;
}

/* ── Task controls (order dropdown + state filter buttons, tasks/task_list.html) ── */
/* .toolbar-select is a compact variant of .form-select — sized for the
   page-header row instead of a full-width form field. */

.task-controls {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.toolbar-select {
  padding: 5px 10px;
  font-size: 12px;
  width: auto;
}

/* State filter — 4 exclusive icon+count buttons (mirrors the .pill /
   .pill--active look above; replaces the old "state-select" dropdown). */

.state-filter-group {
  display: flex;
  gap: 6px;
}

.state-filter-btn {
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid #2d3748;
  background: #1a202c;
  color: #a0aec0;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.state-filter-btn:hover {
  background: #2d3748;
  color: #e2e8f0;
  border-color: #4a5568;
}

.state-filter-btn--active {
  background: #2b6cb0;
  border-color: #2b6cb0;
  color: #bee3f8;
}

/* ── Buttons ───────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border-radius: 6px;
  border: 1px solid transparent;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.btn--primary {
  background: #2b6cb0;
  border-color: #2c5282;
  color: #bee3f8;
}

.btn--primary:hover {
  background: #2c5282;
}

.btn--ghost {
  background: transparent;
  border-color: #4a5568;
  color: #a0aec0;
}

.btn--ghost:hover {
  background: #2d3748;
  color: #e2e8f0;
}

/* ── New task form ─────────────────────────────────────────────────────── */

.new-task-form {
  background: #1a202c;
  border: 1px solid #2d3748;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;
}

.new-task-inner {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.form-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: flex-end;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 140px;
}

.form-field--grow {
  flex: 1;
}

.form-label {
  font-size: 11px;
  color: #718096;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.form-input,
.form-select {
  background: #2d3748;
  color: #e2e8f0;
  border: 1px solid #4a5568;
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s;
}

.form-input.color-swatch {
  width: 44px;
  height: 34px;
  padding: 3px;
  cursor: pointer;
}

.form-input:focus,
.form-select:focus {
  border-color: #63b3ed;
}

.form-input::placeholder {
  color: #4a5568;
}

.form-select option {
  background: #2d3748;
}

.form-actions {
  display: flex;
  gap: 8px;
  padding-top: 4px;
}

/* ── Priority picker (radio pills, used on the New Task page) ───────────── */

.priority-picker {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.priority-option {
  position: relative;
  display: inline-flex;
  cursor: pointer;
}

.priority-option input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

.priority-option span {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #e2e8f0;
  border: 2px solid transparent;
  transition: border-color 0.15s;
}

.priority-option input:checked+span {
  border-color: #fff;
}

.priority-option input:focus-visible+span {
  outline: 2px solid #63b3ed;
  outline-offset: 1px;
}


/* ── Task grid ─────────────────────────────────────────────────────────── */

.task-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ── Task card ─────────────────────────────────────────────────────────── */

.task-card {
  display: flex;
  background: #1a202c;
  border: 1px solid #2d3748;
  border-radius: 8px;
  /* overflow: hidden removed — needed so dropdown menus can escape the card */
  transition: border-color 0.15s, box-shadow 0.15s;
  cursor: pointer;
}

.task-card:hover {
  border-color: #4a5568;
}

.task-card--running {
  border-color: #68d391;
  box-shadow: 0 0 0 1px #68d391;
}

/* ── Selected card — blue border (mirrors Qt TaskCard._apply_style) ── */
.task-card--selected {
  border-color: #63b3ed !important;
  box-shadow: 0 0 0 1px #63b3ed;
}

.task-card--selected:hover {
  border-color: #63b3ed;
}

/* ── Drag-over highlight — a tag pill is being dragged over this card
   (see templates/tasks/task_list_partial.html's ondragover/nvdHandleTagDrop). Amber to
   read as "drop zone", distinct from the selected card's blue. ── */
.task-card--drag-over {
  border-color: #ecc94b !important;
  box-shadow: 0 0 0 1px #ecc94b;
}

/* ── Left accent bar ── */
.task-card__accent {
  width: 4px;
  flex-shrink: 0;
  border-radius: 8px 0 0 8px;
}

/* ── Card body ── */
.task-card__body {
  flex: 1;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

/* ── Row 1: task number + state icon + caption + priority + play/stop ── */
.task-card__row1 {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

/* Task number badge — Qt style: white text on dark #171923 pill */
.task-number-badge {
  flex-shrink: 0;
  background: #171923;
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  border-radius: 6px;
  padding: 1px 5px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* Task number badge, sub-task variant — blue-tinted pill (Qt:
   NUM_BADGE_STYLE_SUB), used with the "↳" prefix for hierarchical labels
   like "65.1" */
.task-number-badge--sub {
  background: #1a365d;
  color: #bee3f8;
}

/* Sub-task count badge — shown on a parent task's card, next to the number
   badge, when it has direct children (Qt: SUBTASK_COUNT_STYLE) */
.subtask-count-badge {
  flex-shrink: 0;
  background: #2a4365;
  color: #90cdf4;
  font-size: 9px;
  font-weight: 700;
  border-radius: 6px;
  padding: 1px 5px;
  white-space: nowrap;
}

/* State icon — between number badge and caption */
.task-state-icon {
  font-size: 13px;
  flex-shrink: 0;
  line-height: 1;
}

/* Caption */
.task-caption {
  font-size: 13px;
  font-weight: 600;
  color: #e2e8f0;
  flex-grow: 0;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Caption is an <a> to the task detail page — keep it looking like plain
   text until hovered, rather than the default link blue/underline. */
.task-caption--link,
.task-caption--link:hover {
  text-decoration: none;
}

.task-caption--link:hover {
  color: #90cdf4;
  text-decoration: underline;
}

/* Priority badge */
.priority-badge {
  flex-shrink: 0;
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 700;
  color: #e2e8f0;
  white-space: nowrap;
}

/* Play / Stop button — top right of row 1 */
.play-stop-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: #2d3748;
  cursor: pointer;
  padding: 3px;
  transition: background 0.15s, border-color 0.15s;
}

.play-stop-btn--play:hover {
  background: #276749;
  border-color: #276749;
}

.play-stop-btn--stop:hover {
  background: #742a2a;
  border-color: #742a2a;
}

.play-stop-btn img {
  display: block;
  width: 20px;
  height: 20px;
  object-fit: contain;
}

/* ── Row 2: session count + total time ── */
.task-card__row2 {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ── Inline meta icons (PNG) ── */
.meta-icon {
  display: inline-block;
  flex-shrink: 0;
  vertical-align: middle;
  opacity: 0.75;
}

.meta-icon--dim {
  opacity: 0.45;
}

.meta-text {
  font-size: 11px;
  color: #a0aec0;
  font-variant-numeric: tabular-nums;
}

.meta-text--live {
  color: #68d391;
  font-weight: 600;
}

.meta-sep {
  font-size: 11px;
  color: #4a5568;
}

/* ── Meta badges row (tags) ── */
.task-card__meta {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  align-items: center;
}

.badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.tag-badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.25);
  color: #e2e8f0;
  font-size: 10px;
}

/* ── Description ── */
.task-desc {
  font-size: 11px;
  color: #718096;
  line-height: 1.4;
  max-height: 2.8em;
  overflow: hidden;
}

/* ── Footer row: dropdown left, elapsed timer right ── */
.task-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 2px;
  position: relative;
  /* anchor for dropdown menu */
}

/* ── Timer (bottom right) ── */
.task-timer {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: #718096;
  font-variant-numeric: tabular-nums;
}

.task-timer--live {
  color: #68d391;
}

.timer-value {
  font-weight: 600;
}

/* ── Icon action buttons ── */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  color: #a0aec0;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}

.icon-btn:hover {
  background: #2d3748;
  color: #e2e8f0;
}

/* ── Dropdown ──────────────────────────────────────────────────────────── */

.dropdown {
  position: relative;
  /* must NOT have overflow:hidden */
}

.dropdown__menu {
  display: none;
  position: absolute;
  left: 0;
  top: calc(100% + 4px);
  background: #1a202c;
  border: 1px solid #2d3748;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
  min-width: 170px;
  z-index: 500;
  padding: 4px;
}

/* Show on hover of the trigger button or focus-within the wrapper */
.dropdown:hover .dropdown__menu,
.dropdown:focus-within .dropdown__menu {
  display: block;
}

.dropdown__item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 10px;
  background: transparent;
  border: none;
  color: #e2e8f0;
  font-size: 13px;
  cursor: pointer;
  border-radius: 5px;
  text-align: left;
  transition: background 0.1s;
  white-space: nowrap;
}

.dropdown__item:hover {
  background: #2d3748;
}

.dropdown__item--danger {
  color: #fc8181;
}

.dropdown__item--danger:hover {
  background: #742a2a;
}

.dropdown__divider {
  height: 1px;
  background: #2d3748;
  margin: 4px 0;
}

/* ── Empty state ───────────────────────────────────────────────────────── */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 60px 20px;
  color: #4a5568;
  text-align: center;
}

.empty-state__icon {
  font-size: 40px;
}

/* ── User selection page ───────────────────────────────────────────────── */

.user-select-page {
  max-width: 480px;
  margin: 48px auto;
}

.user-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 20px;
}

.user-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: #1a202c;
  border: 1px solid #2d3748;
  border-radius: 10px;
  color: #e2e8f0;
  cursor: pointer;
  text-align: left;
  font-size: 14px;
  transition: background 0.15s, border-color 0.15s;
  width: 100%;
}

.user-card:hover {
  background: #2d3748;
  border-color: #4a5568;
}

.user-card--active {
  border-color: #2b6cb0;
  background: #1a2a4a;
}

.user-avatar {
  font-size: 20px;
}

.user-name {
  font-weight: 600;
  flex: 1;
}

.user-handle {
  color: #4a5568;
  font-size: 12px;
}

.user-badge {
  padding: 2px 8px;
  background: #2b6cb0;
  color: #bee3f8;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}

/* ── Scrollbar ─────────────────────────────────────────────────────────── */

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #1a202c;
}

::-webkit-scrollbar-thumb {
  background: #2d3748;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #4a5568;
}

/* ==========================================================================
   EFFORT PAGE  — append to the bottom of nvd.css
   ========================================================================== */

/* ── Controls bar ──────────────────────────────────────────────────────── */

.effort-controls {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: #1a202c;
  border: 1px solid #2d3748;
  border-radius: 10px;
  padding: 16px 20px;
  margin-bottom: 20px;
}

.effort-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.effort-section--inline {
  /* On wide screens, label + controls sit side-by-side */
}

.effort-section-label {
  font-size: 11px;
  font-weight: 600;
  color: #718096;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ── Custom date range row ─────────────────────────────────────────────── */

.effort-date-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.effort-date-input {
  background: #2d3748;
  color: #e2e8f0;
  border: 1px solid #4a5568;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s;
  /* Prevent native date picker from looking bad on dark */
  color-scheme: dark;
}

.effort-date-input:focus {
  border-color: #63b3ed;
}

.effort-date-sep {
  color: #4a5568;
  font-size: 14px;
}

/* ── State checkboxes ──────────────────────────────────────────────────── */

.effort-state-checks {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
}

.effort-check-label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #a0aec0;
  font-size: 13px;
  cursor: pointer;
  user-select: none;
}

.effort-check-label input[type="checkbox"] {
  accent-color: #2b6cb0;
  width: 14px;
  height: 14px;
  cursor: pointer;
}

.effort-check-label:hover {
  color: #e2e8f0;
}

/* ── Empty / error state ───────────────────────────────────────────────── */

.effort-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 60px 20px;
  color: #4a5568;
}

.effort-empty-icon {
  font-size: 40px;
  opacity: 0.4;
}

.effort-empty-msg {
  font-size: 14px;
  color: #4a5568;
  text-align: center;
}

.effort-empty-note {
  font-size: 12px;
  color: #4a5568;
  font-style: italic;
}

/* ── Main layout: chart + summary ──────────────────────────────────────── */

.effort-layout {
  display: grid;
  grid-template-columns: minmax(0, 320px) 1fr;
  gap: 24px;
  align-items: start;
}

/* On mobile / narrow screens: stack vertically */
@media (max-width: 640px) {
  .effort-layout {
    grid-template-columns: 1fr;
  }

  .effort-chart-wrap {
    max-width: 280px;
    margin: 0 auto;
  }
}

/* ── Doughnut chart wrapper ────────────────────────────────────────────── */

.effort-chart-wrap {
  position: relative;
  width: 100%;
}

/* Centred overlay: "Total  X h YYm" */
.effort-chart-total {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}

.effort-chart-total-label {
  font-size: 11px;
  color: #718096;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.effort-chart-total-value {
  font-size: 20px;
  font-weight: 700;
  color: #f6e05e;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ── Summary table ─────────────────────────────────────────────────────── */

.effort-summary {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: #1a202c;
  border: 1px solid #2d3748;
  border-radius: 10px;
  padding: 14px 16px;
}

.effort-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
  border-bottom: 1px solid #2d3748;
}

.effort-row:last-child {
  border-bottom: none;
}

.effort-row--total {
  border-top: 1px solid #4a5568;
  margin-top: 4px;
  padding-top: 8px;
}

.effort-row-dot {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.effort-row-name {
  flex: 1;
  font-size: 13px;
  color: #e2e8f0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.effort-row--total .effort-row-name {
  font-weight: 700;
  color: #e2e8f0;
}

.effort-row-scale {
  flex-shrink: 0;
  font-size: 10px;
  color: #718096;
  background: #2d3748;
  border-radius: 4px;
  padding: 1px 5px;
}

.effort-row-pct {
  flex-shrink: 0;
  font-size: 12px;
  color: #718096;
  min-width: 44px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.effort-row-time {
  flex-shrink: 0;
  font-size: 13px;
  color: #a0aec0;
  min-width: 60px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.effort-row-time--total {
  font-weight: 700;
  color: #f6e05e;
  font-size: 14px;
}

/* ── Coverage bar ──────────────────────────────────────────────────────── */

.effort-coverage {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.effort-coverage-bar-wrap {
  height: 6px;
  background: #2d3748;
  border-radius: 999px;
  overflow: hidden;
}

.effort-coverage-bar {
  height: 100%;
  border-radius: 999px;
  background: #2b6cb0;
  transition: width 0.4s ease;
}

/* Colour the bar based on coverage level — set via inline style width;
   we use a data attribute to drive the colour via JS below */
.effort-coverage-bar[data-coverage] {
  background: #fc8181;
}

/* default: bad */

.effort-coverage-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}

.effort-cov-icon {
  font-size: 14px;
}

.effort-cov-pct {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.effort-cov-pct--good {
  color: #68d391;
}

.effort-cov-pct--warn {
  color: #f6e05e;
}

.effort-cov-pct--bad {
  color: #fc8181;
}

.effort-cov-detail {
  color: #718096;
}

/* ── Report / Trend tabs ───────────────────────────────────────────────── */

.effort-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid #2d3748;
  margin-bottom: 20px;
}

.effort-tab {
  padding: 8px 16px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: #a0aec0;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.effort-tab:hover {
  color: #e2e8f0;
}

.effort-tab--active {
  color: #63b3ed;
  border-bottom-color: #63b3ed;
}

.effort-tab-panel--hidden {
  display: none;
}

/* ── Trend tab: legend (left) + chart (fills the rest) ───────────────────
   Mirrors gui/effort_trend_panel.py's redesigned layout: no in-plot
   legend, the per-category pill list doubles as one instead and sits to
   the left, sized to its own content; the chart fills the remaining width
   and — via align-items: stretch (the flexbox default) — matches
   whatever height that row ends up with, which is driven by the legend's
   own content height unless the chart's min-height below is taller. */

.effort-trend-layout {
  display: flex;
  align-items: stretch;
  gap: 24px;
}

.effort-trend-legend {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 0 0 auto;
  min-width: 180px;
  max-width: 280px;
  background: #1a202c;
  border: 1px solid #2d3748;
  border-radius: 10px;
  padding: 14px 16px;
}

.effort-trend-chart-wrap {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 260px;
}

.effort-trend-chart-wrap canvas {
  /* Chart.js sizes the canvas itself (maintainAspectRatio: false, see
     _effort_trend.html) against this wrapper's box — it just needs a
     real height, which the flex row above provides. */
  width: 100% !important;
  height: 100% !important;
}

/* On mobile / narrow screens: stack vertically, same breakpoint as the
   Report tab's .effort-layout above */
@media (max-width: 640px) {
  .effort-trend-layout {
    flex-direction: column;
  }

  .effort-trend-legend {
    max-width: none;
  }
}

/* ── Coverage bar colour via JS (runs after partial inject) ─────────────
   Inline script in _effort.html colours the bar; keeping the rule here
   as a fallback for the "good" state. */


/* ==========================================================================
   AUTH PAGES (login / set-password / TOTP challenge) — phase 3
   append to the bottom of nvd.css
   ========================================================================== */

.auth-shell {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  gap: 24px;
}

.auth-brand {
  display: flex;
  align-items: center;
  gap: 8px;
}

.auth-card {
  width: 100%;
  max-width: 360px;
  background: #1a202c;
  border: 1px solid #2d3748;
  border-radius: 12px;
  padding: 28px 24px;
}

.auth-card .page-title {
  margin-bottom: 4px;
}

.auth-card .page-subtitle {
  margin-bottom: 18px;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 4px;
}

.auth-form .form-field {
  min-width: 0;
}

.auth-form .btn {
  justify-content: center;
}

.auth-error {
  background: #742a2a;
  color: #fed7d7;
  border: 1px solid #fc8181;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 12px;
  margin-bottom: 14px;
}

.auth-hint {
  color: #a0aec0;
  font-size: 12px;
  margin-top: -6px;
}

.auth-footer {
  margin-top: 16px;
  font-size: 12px;
  color: #718096;
  text-align: center;
}

/* ── Navbar auth controls ────────────────────────────────────────────────
   Overrides the plain ".navbar-user { margin-left: auto; }" rule above:
   it now holds both the account link and the logout button. ─────────── */

.navbar-user {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.nav-user-btn--logout {
  border: none;
  cursor: pointer;
  font: inherit;
}

/* ==========================================================================
   ACCOUNT PAGE (session list) — phase 3
   ========================================================================== */

.account-page {
  max-width: 640px;
  margin: 0 auto;
}

.session-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 20px;
}

.session-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: #1a202c;
  border: 1px solid #2d3748;
  border-radius: 10px;
}

.session-row--current {
  border-color: #2b6cb0;
  background: #1a2a4a;
}

.session-icon {
  font-size: 18px;
}

.session-info {
  flex: 1;
  min-width: 0;
}

.session-device {
  font-weight: 600;
  color: #e2e8f0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.session-meta {
  color: #718096;
  font-size: 12px;
  margin-top: 2px;
}

.session-badge {
  padding: 2px 8px;
  background: #2b6cb0;
  color: #bee3f8;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}

/* ==========================================================================
   TASK DETAIL PAGE — append to the bottom of nvd.css
   ========================================================================== */

.detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

@media (max-width: 900px) {
  .detail-layout {
    grid-template-columns: 1fr;
  }
}

.detail-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.detail-divider {
  height: 1px;
  background: #2d3748;
  margin: 4px 0;
}

/* Small pill-style nav button — mirrors NAV_BTN_STYLE in
   gui/task_details_panel.py ("⬆ #65" jump-to-parent button). */
.nav-btn {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 6px;
  background: #2a4365;
  color: #bee3f8;
  border: 1px solid #3182ce;
  font-size: 12px;
  font-weight: 700;
}

.nav-btn:hover {
  background: #2c5282;
  color: #ffffff;
  text-decoration: none;
}

.form-hint {
  color: #4a5568;
  font-size: 11px;
  margin-top: -6px;
}

/* ── GitLab issue link box ─────────────────────────────────────────────── */

.gitlab-link-box {
  background: #171923;
  border: 1px solid #2d3748;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12px;
  word-break: break-all;
}

.gitlab-link-box--muted {
  color: #718096;
}

/* ── Danger zone ───────────────────────────────────────────────────────── */

.danger-zone {
  padding: 14px 20px;
}

.btn--danger {
  background: #742a2a;
  border-color: #9b2c2c;
  color: #fed7d7;
}

.btn--danger:hover {
  background: #9b2c2c;
}

/* ── Stats / sub-tasks / sessions boxes (right column) ───────────────────── */

.stats-box {
  background: #1a202c;
  border: 1px solid #2d3748;
  border-radius: 10px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.section-title {
  font-size: 13px;
  font-weight: 700;
}

.section-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.stat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  color: #a0aec0;
  padding: 2px 0;
}

.stat-row strong {
  color: #e2e8f0;
}

/* ── Sub-task rows ─────────────────────────────────────────────────────── */

.subtask-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #171923;
  border: 1px solid #2d3748;
  border-radius: 6px;
  padding: 7px 10px;
  color: #e2e8f0;
  font-size: 12px;
}

.subtask-row:hover {
  border-color: #63b3ed;
  text-decoration: none;
}

.subtask-row__caption {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.subtask-row__time {
  flex-shrink: 0;
  color: #a0aec0;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

/* ── Work session rows ─────────────────────────────────────────────────── */

.session-row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  background: #171923;
  border: 1px solid #2d3748;
  border-radius: 6px;
  padding: 10px 12px;
  flex-wrap: wrap;
}

.session-row__form {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex: 1;
  flex-wrap: wrap;
  min-width: 0;
}

.session-row__duration {
  flex-shrink: 0;
  font-size: 12px;
  color: #68d391;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  padding-bottom: 8px;
}

.session-row__duration--live {
  color: #68d391;
}

.session-row__actions,
.session-row__delete-form {
  flex-shrink: 0;
}


/* ==========================================================================
   FILTERS DRAWER (Categories / Tags) — append to the bottom of nvd.css
   Right-hand drawer in the app-body row (see templates/base.html), backed
   by routers/categories.py. Categories tab is live; Tags is a placeholder
   panel for now — see templates/categories/cat_pills.html.
   ========================================================================== */

:root {
  --filters-drawer-width: 300px;
}

/* Wrapper is the actual flex item in .app-body (see templates/base.html):
   it carries the sticky positioning and full height so the handle and the
   drawer move together as one rectangle and never scroll away with the
   page, regardless of how much extra space main-content's max-width
   leaves beside them. */
.filters-drawer-wrap {
  position: sticky;
  top: 48px;
  /* navbar height, mirrors .sidebar */
  height: calc(100vh - 48px);
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  z-index: 20;
}

/* Small tab-shaped handle, flush against the drawer's left edge — reads
   as a permanent extension of the drawer rectangle rather than a
   separate floating button. Shows "<" closed / ">" open (see
   nvdSetDrawerToggleIcon() in base.html). */
.filters-drawer-handle {
  flex-shrink: 0;
  width: 26px;
  height: 32px;
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #2d3748;
  border-right: none;
  border-radius: 6px 0 0 6px;
  background: #1a202c;
  color: #a0aec0;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.filters-drawer-handle:hover {
  background: #2d3748;
  color: #e2e8f0;
}

.filters-drawer {
  position: relative;
  height: 100%;
  flex-shrink: 0;
  width: 0;
  overflow: hidden;
  background: #1a202c;
  border-left: 1px solid transparent;
  transition: width 0.2s ease;
}

.filters-drawer--open {
  width: var(--filters-drawer-width);
  border-left-color: #2d3748;
}

/* Drag handle — sits on the drawer's left edge, straddling the border so
   it's easy to grab whether the pointer lands a couple px either side. */
.filters-drawer__splitter {
  position: absolute;
  top: 0;
  left: -3px;
  width: 6px;
  height: 100%;
  cursor: col-resize;
  z-index: 5;
  background: transparent;
  transition: background 0.15s;
}

.filters-drawer__splitter:hover,
.filters-drawer__splitter:active {
  background: rgba(99, 179, 237, 0.35);
}

/* Closed drawer has zero width, so the splitter (anchored to its left
   edge) would sit right on top of the main-content edge — hide it then. */
.filters-drawer:not(.filters-drawer--open) .filters-drawer__splitter {
  display: none;
}

.filters-drawer__tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px;
  border-bottom: 1px solid #2d3748;
  white-space: nowrap;
}

.filters-tab {
  padding: 6px 12px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: #a0aec0;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.filters-tab:hover {
  background: #2d3748;
  color: #e2e8f0;
}

.filters-tab--active {
  background: #2b6cb0;
  color: #bee3f8;
}

.filters-tab--active:hover {
  background: #2b6cb0;
  color: #bee3f8;
}

.filters-drawer__close {
  margin-left: auto;
}

.filters-drawer__body {
  padding: 14px;
  overflow-y: auto;
  height: calc(100% - 45px);
  /* minus .filters-drawer__tabs */
}

.filters-drawer__panel--hidden {
  display: none;
}

.filters-drawer__panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}

.filters-drawer__panel-title {
  font-size: 11px;
  font-weight: 700;
  color: #718096;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Mirrors CategoriesPanel's "Clear filter" button (nvd/gui/categories_panel.py) */
.filters-clear-btn {
  background: #744210;
  color: #fefcbf;
  border: none;
  border-radius: 4px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}

.filters-clear-btn:hover {
  background: #975a16;
}

.filters-drawer__panel-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Compact variant of .icon-btn for the filters drawer's tight header row */
.icon-btn--sm {
  width: 22px;
  height: 22px;
  font-size: 13px;
}

.filters-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Background/color are now always set inline (see categories/cat_pills.html
   and tags/tag_pills.html): selected pills get the item's own full-strength
   color, unselected pills get that same color desaturated by 50% so they
   stay recognizable at a glance instead of collapsing into a flat grey.
   The values below are just a fallback in case the inline style fails to
   parse. */
.filters-pill {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: #2d3748;
  color: #e2e8f0;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.filters-pill:hover {
  border-color: rgba(255, 255, 255, 0.4);
}

.filters-pill--active {
  border: 2px solid #fff;
  padding: 4px 11px;
  /* compensate for the thicker border, mirrors _CategoryBadge */
}

/* Tag pills are drag sources (see templates/tags/tag_pills.html and
   base.html's nvdTagDragStart()) — a grab cursor signals that on top of
   the toggle-to-filter click behavior the pill already has. */
.filters-pill[draggable="true"] {
  cursor: grab;
}

.filters-pill[draggable="true"]:active {
  cursor: grabbing;
}

.filters-empty {
  color: #718096;
  font-size: 12px;
  font-style: italic;
}

/* ── GitLab issue badge (task card) ──────────────────────────────────────
   Shown right next to the task caption (row 1) when a task has a valid
   GitLab project + issue number attached. Links straight to the issue on
   the GitLab server. Companion to .gitlab-link-box (task detail page). */
 
/* Groups the caption + badge together so the badge hugs the (possibly
   truncated) caption text instead of drifting to the box's far edge —
   this wrapper carries the flex:1 that .task-caption used to carry on its
   own, so the row still fills the same width when there's no badge. */
.task-caption-group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
}
 
.gitlab-badge {
  display: inline-block;
  flex-shrink: 0;
  padding: 1px 7px;
  border-radius: 4px;
  background: rgba(252, 129, 129, 0.12);
  border: 1px solid rgba(252, 129, 129, 0.35);
  color: #fc8181;
  font-size: 10px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
 
.gitlab-badge:hover {
  background: rgba(252, 129, 129, 0.22);
  color: #feb2b2;
  text-decoration: none;
}
 
/* Small inline task rows under a GitLab project on the settings page —
   reuses .subtask-row's link/badge/caption layout, just a touch tighter. */
.gitlab-project-tasks {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 6px;
}