/* ChipFlow — KanbanFlow-style light board. */

:root {
  --bg: #eef0f3;
  --ink: #1f2937;
  --muted: #6b7280;
  --card-border: rgba(0, 0, 0, 0.12);
  --accent: #2563eb;
  --danger: #dc2626;
  --radius: 10px;
  /* KanbanFlow board tokens: WIP-limit violation styling (KF-034). */
  --board-headerWarningTextColor: darkred;
  --board-warningLineColor: #ff8080;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
}

[hidden] { display: none !important; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- top bar ---------- */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 1.2rem;
  background: #111827;
  color: #f9fafb;
  position: sticky;
  top: 0;
  z-index: 50;
}

.topbar h1 { font-size: 1.15rem; margin: 0; font-weight: 600; }
.topbar-left { display: flex; align-items: center; gap: 0.9rem; }
.topbar-right { display: flex; align-items: center; gap: 0.8rem; }
.user { color: #d1d5db; font-size: 0.9rem; }
/* KF-029: initials avatar circle in the dark top bar (KanbanFlow parity). */
.user-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: #4b5563;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  flex: none;
}
/* KF-030/KF-031: icon buttons in the dark top bar (KanbanFlow parity). */
.topbar-icon-btn {
  background: none;
  border: none;
  color: #d1d5db;
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0.25rem;
  line-height: 1;
  border-radius: 0.25rem;
}
.topbar-icon-btn:hover { color: #fff; background: rgba(255, 255, 255, 0.1); }
.logout-form { margin: 0; }
.topbar .btn-ghost { color: #d1d5db; }
.topbar .btn-ghost:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }

.boards-btn {
  color: #f9fafb;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  white-space: nowrap;
}

.boards-btn:hover { text-decoration: underline; }

/* KF-022: centered brand mark in the dark top bar (KanbanFlow parity). */
.brand-logo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: #f9fafb;
  white-space: nowrap;
}
.brand-logo:hover { text-decoration: none; opacity: 0.92; }
.brand-logo-chip { color: #f9fafb; }
.brand-logo-flow { color: #5eead4; }

/* KF-023: board tabs in the dark top bar (KanbanFlow parity). */
.board-tabs { display: flex; align-items: center; gap: 0.25rem; }
.board-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.8rem;
  border-radius: 6px 6px 0 0;
  color: #d1d5db;
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 500;
  border: 1px solid transparent;
  border-bottom: none;
  white-space: nowrap;
}
.board-tab:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
.board-tab-active {
  color: #f9fafb;
  font-weight: 600;
  background: #1f2937;
  border-color: #374151;
}
.board-tab-chip {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 2px;
  background: #2dd4bf;
  display: inline-block;
}
.board-tab-add { font-size: 1.15rem; padding: 0.3rem 0.6rem; color: #9ca3af; }
.board-tab-add:hover { color: #fff; }

/* KF-032: layout-edit view ("Layout: <board>"). */
.layout-view { padding: 2rem 2.5rem; max-width: 60rem; }
.layout-view-head { display: flex; align-items: center; justify-content: space-between; }
.layout-view-head h2 { margin: 0; font-size: 1.3rem; }
.layout-view-actions { display: flex; gap: 0.75rem; margin: 1.25rem 0; }
.layout-view-hint { color: var(--muted, #6b7280); margin: 0 0 1.25rem; }
.layout-view-close { font-size: 1.5rem; line-height: 1; }

/* ---------- board toolbar ---------- */

.board-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1.2rem 0;
  flex-wrap: wrap;
}

.board-toolbar-left,
.board-toolbar-right { display: flex; gap: 0.5rem; align-items: center; }

/* KF-123: board title in the light board bar (KanbanFlow parity). */
.board-bar-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0;
  color: var(--ink);
  line-height: 1.2;
}

.toolbar-btn {
  border: 1px solid #d1d5db;
  background: #fff;
  border-radius: 8px;
  padding: 0.4rem 0.8rem;
  color: var(--ink);
  cursor: pointer;
  font-size: 0.85rem;
  text-decoration: none;
  display: inline-block;
}

.toolbar-btn:hover { background: #f9fafb; border-color: #9ca3af; }

/* ---------- board table ---------- */

.board-wrap {
  padding: 0.6rem 1.2rem 2rem;
  overflow: auto;
}

/* KF-126: flush grid — continuous table with thin dividers, no gaps
   (KanbanFlow parity). */
.board-table {
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  width: max-content;
  min-width: 100%;
}

.board-table thead th {
  position: sticky;
  top: 3.4rem;
  z-index: 5;
}

.corner-cell {
  width: 150px;
  border: none;
  background: transparent;
}

/* KF-049: flat light-gray header, not a white card (KanbanFlow parity). */
.columnHeader {
  position: relative;
  width: 280px;
  background: #eef0f2;
  border: none;
  border-radius: 0;
  padding: 0.55rem 4.25rem 0.55rem 0.65rem;
  text-align: left;
  vertical-align: top;
  cursor: default;
}

/* KF-036: name + count on one line, e.g. "In progress 0 / 3". */
.columnHeader-titleRow {
  display: flex;
  align-items: baseline;
  min-width: 0;
}

.columnHeader-name {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 600;
  font-size: 0.92rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.columnHeader-count {
  flex: 0 0 auto;
  font-size: 0.76rem;
  color: var(--muted);
  font-weight: 500;
  margin-left: 0.45rem;
  white-space: nowrap;
}

/* KF-037: the column add-task button is big and green. */
.columnHeader-add {
  position: absolute;
  top: 0.4rem;
  right: 2.2rem;
  border: 1px solid #16a34a;
  background: #22c55e;
  border-radius: 6px;
  color: #fff;
  cursor: pointer;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1;
  padding: 0.05rem 0.45rem 0.15rem;
}

.columnHeader-add:hover { background: #16a34a; border-color: #15803d; color: #fff; }

/* KF-038: no ⋮ affordance on column headers (KanbanFlow parity) — the
   menu opens on right-click instead. */
.columnHeader-menu { display: none; }
/* WIP limit exceeded (KF-034, KF-035): darkred count + red warning line.
   The header background stays unchanged — no amber wash. */
.columnHeader--warning .columnHeader-count {
  color: var(--board-headerWarningTextColor);
  font-weight: 700;
}

.columnHeader-warningLine {
  height: 3px;
  border-radius: 2px;
  background: var(--board-warningLineColor);
  margin-top: 0.4rem;
}

/* collapsed column: narrow strip with vertical title */
/* KF-125: light-gray band with gray text (KanbanFlow parity), not white. */
.columnHeader--collapsed {
  width: 48px;
  padding: 0.55rem 0.4rem;
  background: #e3e5e8;
  color: #6b7280;
}

.columnHeader--collapsed .columnHeader-titleRow { display: block; }

.columnHeader--collapsed .columnHeader-name {
  writing-mode: vertical-rl;
  padding-right: 0;
  max-height: 10rem;
  margin: 0 auto;
  /* KF-040: collapsed strip shows the name UPPERCASE (KanbanFlow parity). */
  text-transform: uppercase;
}

/* KF-039: the collapsed strip shows the task count in red. */
.columnHeader--collapsed .columnHeader-count {
  display: block;
  color: var(--danger);
  font-weight: 700;
  text-align: center;
  margin: 0.35rem auto 0;
}

.columnHeader--collapsed .columnHeader-add,
.columnHeader--collapsed .columnHeader-warningLine { display: none; }

.columnHeader--collapsed .columnHeader-menu {
  position: static;
  display: block;
  margin: 0.4rem auto 0;
}

/* swimlane row headers */
/* KF-131: labels render as vertical (rotated) text on the RIGHT side of
   the board. */
.swimlane-label {
  width: auto;
  max-width: 3rem;
  border: none;
  background: transparent;
  text-align: center;
  vertical-align: top;
  padding: 0.6rem 0.4rem;
}

.swimlane-name {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #4b5563;
  overflow-wrap: anywhere;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.swimlane-menu {
  border: 1px solid transparent;
  background: transparent;
  border-radius: 6px;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.9rem;
  padding: 0.1rem 0.35rem;
  margin-left: 0.3rem;
  vertical-align: middle;
}

.swimlane-menu:hover { background: #e5e7eb; color: var(--ink); }

/* board cells — KF-126: flush with subtle borders, not floating cards. */
.board-cell {
  background: #f7f8fa;
  border: 1px solid #e8eaee;
  border-left: none;
  border-radius: 0;
  padding: 0.5rem;
  vertical-align: top;
}

/* First column keeps its left border so the grid has a clean outer edge. */
.board-table tbody tr td.board-cell:first-child { border-left: 1px solid #e8eaee; }

.board-cell--collapsed { background: #eceef1; }
.board-cell--collapsed .task-list { display: none; }

.task-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-height: 84px;
}

/* KF-124: Done-column group headers in normal-case gray with a
   horizontal rule beneath spanning the column (KanbanFlow parity). */
.done-group-label {
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--muted);
  margin-top: 0.25rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid #d1d5db;
}

/* SortableJS placeholder + drag ghost */
.sortable-placeholder {
  border: 2px dashed rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.03);
  min-height: 3rem;
}

.drag-ghost { opacity: 0.4; }

/* KF-048: the column being dragged renders blank/empty mid-drag
   (KanbanFlow parity) — the placeholder shows the drop position. */
.column-drag-ghost { visibility: hidden; }

/* ---------- task color families (exact KanbanFlow hex values) ---------- */

.taskColor-yellow { background-color: #ffffe0; }
.taskBorderColor-yellow { border-color: #f5cc00; }
.taskColorVars-yellow { --taskColor: #ffffe0; --taskColorBorder: #f5cc00; --taskColorLight: #ffffe0; }
.taskBorderColorBg-yellow { background-color: #f5cc00; }

.taskColor-green { background-color: #dbffc2; }
.taskBorderColor-green { border-color: #59d600; }
.taskColorVars-green { --taskColor: #dbffc2; --taskColorBorder: #59d600; --taskColorLight: #e4ffd1; }
.taskBorderColorBg-green { background-color: #59d600; }

.taskColor-blue { background-color: #cce3ff; }
.taskBorderColor-blue { border-color: #70b0ff; }
.taskColorVars-blue { --taskColor: #cce3ff; --taskColorBorder: #70b0ff; --taskColorLight: #d6e9ff; }
.taskBorderColorBg-blue { background-color: #70b0ff; }

.taskColor-red { background-color: #ffccd0; }
.taskBorderColor-red { border-color: #ff858f; }
.taskColorVars-red { --taskColor: #ffccd0; --taskColorBorder: #ff858f; --taskColorLight: #ffe0e3; }
.taskBorderColorBg-red { background-color: #ff858f; }

.taskColor-orange { background-color: #ffeac2; }
.taskBorderColor-orange { border-color: #faa200; }
.taskColorVars-orange { --taskColor: #ffeac2; --taskColorBorder: #faa200; --taskColorLight: #ffeac2; }
.taskBorderColorBg-orange { background-color: #faa200; }

.taskColor-purple { background-color: #eddbff; }
.taskBorderColor-purple { border-color: #c994ff; }
.taskColorVars-purple { --taskColor: #eddbff; --taskColorBorder: #c994ff; --taskColorLight: #eddbff; }
.taskBorderColorBg-purple { background-color: #c994ff; }

.taskColor-magenta { background-color: #ffe0ff; }
.taskBorderColor-magenta { border-color: #ff85ff; }
.taskColorVars-magenta { --taskColor: #ffe0ff; --taskColorBorder: #ff85ff; --taskColorLight: #ffe0ff; }
.taskBorderColorBg-magenta { background-color: #ff85ff; }

.taskColor-cyan { background-color: #dbffff; }
.taskBorderColor-cyan { border-color: #00d6d6; }
.taskColorVars-cyan { --taskColor: #dbffff; --taskColorBorder: #00d6d6; --taskColorLight: #dbffff; }
.taskBorderColorBg-cyan { background-color: #00d6d6; }

.taskColor-brown { background-color: #f6ddcb; }
.taskBorderColor-brown { border-color: #e49b67; }
.taskColorVars-brown { --taskColor: #f6ddcb; --taskColorBorder: #e49b67; --taskColorLight: #f6ddcb; }
.taskBorderColorBg-brown { background-color: #e49b67; }

.taskColor-white { background-color: #fbfbfb; }
.taskBorderColor-white { border-color: #d4d4d4; }
.taskColorVars-white { --taskColor: #fbfbfb; --taskColorBorder: #d4d4d4; --taskColorLight: #fbfbfb; }
.taskBorderColorBg-white { background-color: #d4d4d4; }

/* ---------- task cards ---------- */

/* KF-051: uniform ~2px border in the task's border color all around
   (border-color comes from the taskBorderColor-* class on the card). */
.task-card {
  border: 2px solid;
  border-radius: 6px;
  padding: 0.45rem 0.55rem;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.task-card:hover { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.14); }
.task-card:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

.card-title { font-weight: 600; font-size: 0.9rem; overflow-wrap: anywhere; }

.card-indicators {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.3rem;
  font-size: 0.74rem;
  color: #4b5563;
  align-items: center;
  flex-wrap: wrap;
}

.card-done { color: #15803d; font-weight: 600; }

.card-live { font-weight: 600; font-size: 0.8rem; }
.card-live-pomodoro { color: #f97316; }
.card-live-stopwatch { color: #ef4444; }

/* KF-053: card metadata footer — the board-configured task properties. */
.card-desc {
  font-size: 0.78rem;
  color: #4b5563;
  margin-top: 0.25rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.45rem;
  margin-top: 0.3rem;
  font-size: 0.72rem;
  color: #4b5563;
}
.card-label {
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  border-radius: 4px;
  padding: 0 0.3rem;
  color: #3730a3;
}
.card-subtasks { font-weight: 600; }
.card-due { color: #b45309; font-weight: 600; }
.card-date { color: #6b7280; }
.card-member {
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  background: #6b7280;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 700;
}

/* KF-052: dashed outline on the card whose task is selected in the timer
   (toggled by TimerUI.updateCardIndicators; replaces the dead
   .card-timer-running rule). */
.task-card.card-timer-selected {
  outline: 2px dashed #f97316;
  outline-offset: 2px;
}

/* ---------- add-task form ---------- */

.add-task-form {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 0.5rem;
}

.add-task-form input[type="text"] {
  padding: 0.4rem 0.5rem;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 0.85rem;
  width: 100%;
}

.color-pick { display: flex; flex-wrap: wrap; gap: 0.35rem; }

.color-pick-option {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

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

.color-pick-dot {
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.25);
  display: inline-block;
}

.color-pick-option input:checked + .color-pick-dot {
  outline: 2px solid #111827;
  outline-offset: 1px;
}

.color-pick-option input:focus-visible + .color-pick-dot {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.color-pick-label { display: none; }

.add-task-actions { display: flex; gap: 0.4rem; }

/* ---------- color legend ---------- */

/* KF-104/KF-121: full-width strip of EQUAL segments, one per enabled board
   color — each segment the color's light bg with its label centered. */
.color-legend {
  display: flex;
  padding: 1rem 0.4rem 0.4rem;
}

.color-legend-segment {
  flex: 1 1 0;
  text-align: center;
  padding: 0.45rem 0.25rem;
  font-size: 0.82rem;
  color: #374151;
  border-left: 1px solid rgba(0, 0, 0, 0.08);
}

.color-legend-segment:first-child { border-left: none; }

.color-legend-dot {
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, 0.18);
}

/* ---------- floating menus ---------- */

.menu-pop {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  padding: 0.3rem;
  display: flex;
  flex-direction: column;
  min-width: 11.5rem;
  z-index: 250;
}

.menu-pop button {
  background: transparent;
  border: none;
  text-align: left;
  padding: 0.45rem 0.6rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--ink);
  white-space: nowrap;
}

.menu-pop button:hover { background: #f3f4f6; }

.menu-pop a {
  display: block;
  padding: 0.45rem 0.6rem;
  border-radius: 6px;
  font-size: 0.85rem;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}

.menu-pop a:hover { background: #f3f4f6; }

.menu-pop-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6b7280;
  padding: 0.35rem 0.6rem 0.2rem;
}
.menu-pop .menu-danger { color: var(--danger); }
.menu-pop .menu-danger:hover { background: #fef2f2; }

.menu-floating { position: fixed; }

.details-popup {
  position: fixed;
  z-index: 250;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
  padding: 0.7rem 0.9rem;
  font-size: 0.85rem;
  min-width: 14rem;
}

.details-row { display: flex; gap: 0.5rem; padding: 0.15rem 0; }
.details-label { color: var(--muted); font-weight: 600; }

/* ---------- task modal ---------- */

#modal-root:empty { display: none; }

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(17, 24, 39, 0.55);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 4vh 1rem;
  z-index: 100;
  overflow-y: auto;
}

.task-modal {
  background-color: var(--taskColorLight, #fff);
  border: 1px solid var(--taskColorBorder, #d1d5db);
  border-radius: 10px;
  width: min(620px, 100%);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  position: relative;
}

.task-modal-head {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.task-modal-head input {
  flex: 1;
  min-width: 0;
  font-size: 1.1rem;
  font-weight: 700;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 0.3rem 0.5rem;
  color: var(--ink);
}

.task-modal-head input:hover { border-color: rgba(0, 0, 0, 0.15); }
.task-modal-head input:focus { border-color: var(--accent); outline: none; background: #fff; }

.modal-close {
  border: none;
  background: transparent;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--muted);
  line-height: 1;
  padding: 0.1rem 0.3rem;
}

.modal-close:hover { color: var(--ink); }

/* KanbanFlow parity: vertical icon column pinned to the modal's right
   edge — circular icon buttons with label pills (KF-056). */
.task-modal-iconbar {
  position: absolute;
  right: 0.55rem;
  top: 3.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  z-index: 15;
}

.tm-action { position: relative; }

.tm-icon-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}

.tm-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.14);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  line-height: 1;
  color: var(--ink);
}

.tm-icon-btn:hover .tm-icon { background: #f3f4f6; }
.tm-icon-btn.tm-danger .tm-icon { color: var(--danger); }

.tm-icon-label {
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 999px;
  padding: 0.05rem 0.45rem;
  white-space: nowrap;
}

/* Legacy horizontal actions row (kept for any non-modal toolbar use). */
.task-modal-actions {
  display: flex;
  gap: 0.2rem;
  padding: 0.45rem 0.8rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  flex-wrap: wrap;
}

.tm-btn {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 0.4rem 0.7rem;
  cursor: pointer;
  font-size: 0.88rem;
  color: var(--ink);
  white-space: nowrap;
}

.tm-btn:hover { background: rgba(255, 255, 255, 0.65); border-color: rgba(0, 0, 0, 0.12); }
.tm-danger { color: var(--danger); }
.tm-danger:hover { background: #fef2f2; }

.tm-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  min-width: 11.5rem;
  z-index: 20;
  padding: 0.3rem;
  display: flex;
  flex-direction: column;
}

.tm-menu button {
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  padding: 0.5rem 0.7rem;
  font-size: 0.87rem;
  border-radius: 6px;
  color: var(--ink);
  white-space: nowrap;
}

.tm-menu button:hover { background: #f3f4f6; }

/* KF-013: hover menu on the task modal's "Time spent" stat. */
.tm-stat-menu { position: relative; }
.tm-hover-menu {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 60;
  min-width: 10rem;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  padding: 0.3rem;
}
.tm-stat-menu:hover .tm-hover-menu,
.tm-stat-menu:focus-within .tm-hover-menu { display: block; }
.tm-hover-menu button {
  display: block;
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  padding: 0.5rem 0.7rem;
  font-size: 0.87rem;
  border-radius: 6px;
  color: var(--ink);
  white-space: nowrap;
}
.tm-hover-menu button:hover { background: #f3f4f6; }

/* Menus hanging off the right-edge icon column open to the icon's right. */
.tm-menu.tm-menu-edge {
  top: 0;
  left: calc(100% + 8px);
}

.tm-item-icon {
  display: inline-block;
  width: 1.3rem;
  margin-right: 0.5rem;
  text-align: center;
  color: var(--muted);
}

/* Subtasks section (KanbanFlow parity, KF-058). */
.tm-section-title {
  font-size: 0.95rem;
  font-weight: 700;
  margin: 1rem 0 0.4rem;
  color: var(--ink);
}

.tm-subtasks { display: flex; flex-direction: column; gap: 0.25rem; }

.tm-subtask {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.4rem;
  border-radius: 6px;
}

.tm-subtask:hover { background: rgba(255, 255, 255, 0.6); }
.tm-subtask.focused { background: #eef2ff; outline: 2px solid var(--accent); }

.tm-subtask-check { width: 1rem; height: 1rem; accent-color: var(--accent); }

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

.tm-subtask-done .tm-subtask-name { text-decoration: line-through; color: var(--muted); }

.tm-subtask-edit {
  flex: 1;
  min-width: 0;
  font: inherit;
  border: 1px solid var(--accent);
  border-radius: 4px;
  padding: 0.15rem 0.4rem;
}

.tm-subtask-del {
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0.1rem 0.3rem;
  border-radius: 4px;
}

.tm-subtask-del:hover { color: var(--danger); background: #fef2f2; }

.tm-subtask-addrow { margin-top: 0.35rem; }

.tm-subtask-addrow input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 6px;
  padding: 0.45rem 0.6rem;
  font: inherit;
  background: rgba(255, 255, 255, 0.7);
}

.tm-subtask-addrow input:focus { outline: none; border-color: var(--accent); background: #fff; }

/* Members row + chips in the modal body (KF-060). */
.tm-members-row { margin: 0.6rem 0; }

.tm-members-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.tm-member-chip {
  border: 1px solid rgba(0, 0, 0, 0.14);
  background: rgba(255, 255, 255, 0.7);
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--ink);
}

.tm-member-chip:hover { background: #fff; }

/* Members dialog (KanbanFlow parity, KF-060). */
.members-dlg-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.members-gear {
  border: none;
  background: transparent;
  font-size: 1.2rem;
  cursor: pointer;
  color: var(--muted);
  padding: 0.2rem 0.4rem;
  border-radius: 6px;
}

.members-gear:hover { color: var(--ink); background: #f3f4f6; }

.members-list {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  max-height: 16rem;
  overflow-y: auto;
  margin: 0.4rem 0;
}

.member-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 6px;
  padding: 0.5rem 0.6rem;
  cursor: pointer;
  font-size: 0.92rem;
  color: var(--ink);
}

.member-row:hover { background: #f3f4f6; }
.member-row .member-dot { color: var(--accent); font-size: 0.8rem; }
.member-row .member-check { margin-left: auto; color: var(--accent); font-weight: 700; }
.member-row[aria-selected="true"] { background: #eef2ff; border-color: var(--accent); }

/* Card context-menu submenu arrow + nested submenu (KF-050). */
.menu-arrow { float: right; margin-left: 1.2rem; color: var(--muted); }

/* Two-column grid for the "Task properties to display on board" dialog
   section (KF-043). */
.dlg-grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.1rem 0.8rem;
}

.task-modal-body { padding: 0.8rem 4.2rem 1.2rem 1rem; }

.tm-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin: 0.9rem 0 0.35rem;
}

.tm-label:first-child { margin-top: 0; }

.tm-color-picker { display: flex; gap: 0.4rem; flex-wrap: wrap; }

.tm-color-dot {
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 5px;
  border: 2px solid rgba(0, 0, 0, 0.18);
  cursor: pointer;
  padding: 0;
}

.tm-color-dot.selected { border-color: #111827; }

.tm-estimate-row {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin-top: 0.9rem;
}

.tm-estimate-row .tm-label { margin: 0; }

#modal-description {
  width: 100%;
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: 8px;
  padding: 0.5rem 0.6rem;
  font: inherit;
  font-size: 0.9rem;
  resize: vertical;
  background: rgba(255, 255, 255, 0.7);
  color: var(--ink);
}

.tm-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  padding: 0.55rem 0.8rem;
  margin: 0.9rem 0;
  font-size: 0.87rem;
}

.tm-stat { display: inline-flex; align-items: center; gap: 0.35rem; }
.tm-done { color: #15803d; font-weight: 600; }

.task-modal-body h3 { margin: 0.2rem 0 0.6rem; font-size: 1rem; }

/* ---------- light dialogs ---------- */

.dlg-light {
  background: #fff;
  border: 1px solid #e5e7eb;
  color: var(--ink);
}

.dlg.dlg-light .dlg-field > span { color: var(--muted); }

.dlg.dlg-light .dlg-field input[type="text"],
.dlg.dlg-light .dlg-field input[type="number"],
.dlg.dlg-light .dlg-field select {
  background: #fff;
  border: 1px solid #d1d5db;
  color: var(--ink);
  width: 100%;
  border-radius: 6px;
  padding: 0.5rem 0.6rem;
  font-size: 0.9rem;
}

.dlg-checks {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-bottom: 0.8rem;
}

.dlg-fieldset {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 0.6rem 0.8rem 0.8rem;
  margin: 0 0 0.8rem;
}

.dlg-fieldset legend {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--muted);
  padding: 0 0.4rem;
}

.dlg-hint { color: var(--muted); font-size: 0.82rem; margin: 0 0 0.8rem; }

.check-label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 500;
  cursor: pointer;
  font-size: 0.9rem;
}

.check-label input { width: 1.1rem; height: 1.1rem; }

/* KF-044: stacked checkbox label (title + sub-label) + blue info note. */
.check-label-stacked { align-items: flex-start; }
.check-sub { display: block; font-weight: 400; font-size: 0.8rem; color: var(--muted); }
.dlg-note-info {
  background: #e8f1fd;
  border: 1px solid #bcd7f5;
  color: #1d4ed8;
  border-radius: 6px;
  padding: 0.55rem 0.7rem;
  font-size: 0.8rem;
  margin: 0 0 0.8rem;
}
body.dark .dlg-note-info { background: #1e3a5f; border-color: #2c5282; color: #bee3f8; }

.shortcuts-list { margin: 0 0 1rem; }
.shortcuts-list > div {
  display: flex;
  gap: 0.8rem;
  align-items: baseline;
  padding: 0.3rem 0;
  border-top: 1px solid #f0f0f0;
}

.shortcuts-list dt { min-width: 4.5rem; }
.shortcuts-list kbd {
  background: #f3f4f6;
  border: 1px solid #d1d5db;
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 0.1rem 0.45rem;
  font-size: 0.8rem;
  font-family: inherit;
}

.shortcuts-list dd { margin: 0; font-size: 0.9rem; }

/* ---------- simple pages (boards, colors) ---------- */

.page-narrow {
  max-width: 720px;
  margin: 0 auto;
  padding: 1.5rem 1.2rem 3rem;
}

.panel {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
  margin-bottom: 1rem;
}

.panel h2 { margin: 0 0 0.8rem; font-size: 1.05rem; }

.page-narrow .dlg-field input[type="text"] {
  background: #fff;
  border: 1px solid #d1d5db;
  color: var(--ink);
  width: 100%;
  border-radius: 6px;
  padding: 0.5rem 0.6rem;
  font-size: 0.9rem;
}

.page-narrow .dlg-field > span { color: var(--muted); }

.muted { color: var(--muted); font-size: 0.85rem; }

.board-list { list-style: none; margin: 0; padding: 0; }
.board-list li { padding: 0.45rem 0; border-top: 1px solid #f0f0f0; }
.board-list li:first-child { border-top: none; }
.board-list a { color: var(--accent); text-decoration: none; font-weight: 600; }
.board-list a:hover { text-decoration: underline; }

.template-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.45rem 0;
  border-top: 1px solid #f0f0f0;
  flex-wrap: wrap;
}

.template-desc { margin: 0; flex-basis: 100%; }

.tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: #eef2ff;
  color: #4338ca;
  border-radius: 4px;
  padding: 0.1rem 0.4rem;
}

/* ---------- color admin page ---------- */

.color-admin-list {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.color-admin-row {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 0.7rem;
  background: #fff;
}

.color-admin-swatch {
  width: 2rem;
  height: 2rem;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.18);
  flex: none;
  margin-top: 1.3rem;
}

.color-admin-fields { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; }
.color-admin-fields .dlg-field { margin-bottom: 0.4rem; }

.color-admin-toggles { display: flex; gap: 1.2rem; margin-top: 0.2rem; }

.color-admin-order { display: flex; flex-direction: column; gap: 0.3rem; }

/* ---------- buttons ---------- */

.btn {
  padding: 0.45rem 0.9rem;
  border-radius: 8px;
  border: 1px solid #d1d5db;
  background: #fff;
  cursor: pointer;
  font-size: 0.88rem;
}

.btn:hover { background: #f9fafb; }
.btn:disabled { opacity: 0.45; cursor: default; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { background: #1d4ed8; }
.btn-ghost { background: transparent; border-color: transparent; color: inherit; }
.btn-sm { padding: 0.3rem 0.6rem; font-size: 0.8rem; }
.btn-block { width: 100%; }
.btn-danger-ghost { background: transparent; border-color: transparent; color: var(--danger); }
.btn-danger-ghost:hover { background: #fef2f2; }
.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-danger:hover { background: #b91c1c; }
.btn-success { background: #16a34a; border-color: #16a34a; color: #fff; }
.btn-success:hover { background: #15803d; }

.btn-link {
  background: none;
  border: none;
  color: #93c5fd;
  cursor: pointer;
  font-size: 0.8rem;
  text-decoration: underline;
  padding: 0;
}

/* ---------- pomodoro timer ---------- */

.timer {
  text-align: center;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 1rem;
}

.timer-display {
  font-size: 2.6rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  margin-bottom: 0.6rem;
}

.timer-controls { display: flex; gap: 0.5rem; justify-content: center; }
.timer-hint { font-size: 0.78rem; color: var(--muted); margin: 0.6rem 0 0; }

/* ---------- time entries ---------- */

.entries-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.entries-list li {
  display: flex;
  gap: 0.6rem;
  font-size: 0.85rem;
  background: #f9fafb;
  border: 1px solid #eef0f3;
  border-radius: 6px;
  padding: 0.35rem 0.55rem;
  align-items: baseline;
}

.entry-minutes { font-weight: 700; }
.entry-note { flex: 1; color: #4b5563; overflow-wrap: anywhere; }
.entry-date { color: var(--muted); font-size: 0.75rem; white-space: nowrap; }
.empty-note { color: var(--muted); font-size: 0.85rem; }

.log-time-form { display: flex; gap: 0.5rem; margin-top: 0.6rem; }

.log-time-form input[type="number"] {
  width: 5rem;
  padding: 0.4rem 0.5rem;
  border: 1px solid #d1d5db;
  border-radius: 6px;
}

.log-time-form input[type="text"] {
  flex: 1;
  min-width: 0;
  padding: 0.4rem 0.5rem;
  border: 1px solid #d1d5db;
  border-radius: 6px;
}

.entry-kind {
  background: #eef2ff;
  color: #4338ca;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.1rem 0.4rem;
}

/* KF-012: stopped sessions read "Stopped Pomodoro with reason 'X'" in red. */
.entry-interrupted { color: #dc2626; font-size: 0.78rem; font-weight: 600; }

/* ---------- login ---------- */

.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.login-card {
  background: #fff;
  border-radius: 14px;
  padding: 2rem;
  width: min(380px, 100%);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

.login-card h1 { margin: 0 0 1.2rem; font-size: 1.4rem; text-align: center; }

.login-card label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.8rem; }

.login-card input {
  display: block;
  width: 100%;
  margin-top: 0.3rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 1rem;
}

.login-error {
  background: #fef2f2;
  color: var(--danger);
  border: 1px solid #fecaca;
  border-radius: 8px;
  padding: 0.5rem 0.7rem;
  font-size: 0.85rem;
}

/* ---------- timer pill & popup ---------- */

/* KF-132: the timer pill lives in the light board bar (not the dark topbar).
   KF-098 pill states (green play / red stop glyphs) and the KF-027 running
   distinction are preserved with light-bar colors. */
.timer-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  color: var(--ink);
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 0.85rem;
  padding: 0.4rem 0.7rem;
}

.timer-pill:hover { background: #f9fafb; border-color: #9ca3af; }

@keyframes timer-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0.25; }
}

.timer-overtime {
  animation: timer-blink 1s infinite;
}

.timer-pill-icon {
  font-size: 0.7rem;
  line-height: 1;
}

.timer-pill-play { color: #16a34a; }

.timer-pill-stop { color: #dc2626; }

.timer-pill-chevron {
  font-size: 0.7rem;
  line-height: 1;
  color: #6b7280;
}

/* KF-027: the running pill must look visibly different from idle. */
.timer-pill.running {
  background: #fef2f2;
  border-color: rgba(220, 38, 38, 0.45);
}

.timer-pill.running #timer-pill-time { color: #b91c1c; }

.timer-pill.running .timer-pill-icon { animation: timer-blink 1.5s infinite; }

/* KF-138: the popup mode tabs the JS has always rendered into. */
.timer-modes {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 0.75rem;
}

.timer-mode-btn {
  flex: 1;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: #9ca3af;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.35rem 0;
}

.timer-mode-btn.active {
  background: #374151;
  color: #f9fafb;
}

/* KF-006: finished-session panel — "00:00" with the green Take break
   button next to the clock, per KanbanFlow. */
.timer-finished-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.timer-finished-row .timer-session-time { margin: 0; }

/* KF-138: the running-session view renderPopup() generates. */
.timer-session { margin-bottom: 0.75rem; }

.timer-session-mode {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #9ca3af;
}

.timer-session-time {
  font-size: 2.5rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin: 0.25rem 0;
}

.timer-session-task {
  color: #d1d5db;
  font-size: 0.9rem;
  margin-bottom: 0.35rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.timer-session-poms { margin-bottom: 0.6rem; }

.pom-dot {
  display: inline-block;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: #4b5563;
  margin-right: 0.25rem;
}

.pom-dot.filled { background: #4ade80; }

.timer-session-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}

/* KF-010: inline task picker inside the running-session popup view. */
.timer-change-picker { margin-top: 0.5rem; }
.timer-change-picker[hidden] { display: none; }

.timer-popup-task {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  font-size: 0.9rem;
}

#timer-mode-tab { margin-bottom: 0.75rem; }

.timer-label {
  display: block;
  font-size: 0.8rem;
  color: #9ca3af;
  margin-bottom: 0.5rem;
}

.timer-select {
  display: block;
  width: 100%;
  margin-top: 0.25rem;
  background: #374151;
  color: #f3f4f6;
  border: 1px solid #4b5563;
  border-radius: 6px;
  padding: 0.4rem 0.5rem;
}

.timer-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.timer-popup {
  position: fixed;
  top: 3.4rem;
  right: 1rem;
  width: 320px;
  background: #1f2937;
  color: #f3f4f6;
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  padding: 1rem 1.1rem;
  z-index: 200;
}

.timer-popup-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 0.6rem;
}

.timer-popup-close {
  background: none;
  border: none;
  color: #9ca3af;
  cursor: pointer;
  font-size: 1.3rem;
  line-height: 1;
}

.timer-popup-close:hover { color: #fff; }

.timer-popup-time-label { color: #9ca3af; font-size: 0.85rem; }

.timer-popup h4 {
  margin: 0.4rem 0 0.4rem;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9ca3af;
}

.timer-today-list { max-height: 220px; overflow-y: auto; }

.today-entry {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.82rem;
}

.today-dot {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  flex: none;
}

.today-task {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.today-meta { color: #9ca3af; white-space: nowrap; }
.today-reason { color: #9ca3af; font-style: italic; }

.timer-popup-foot {
  display: flex;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  margin-top: 0.8rem;
  padding-top: 0.7rem;
}

.timer-foot-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  background: none;
  border: none;
  color: #d1d5db;
  cursor: pointer;
  font-size: 1.1rem;
  text-decoration: none;
}

.timer-foot-btn span { font-size: 0.68rem; }
.timer-foot-btn:hover { color: #fff; }

/* ---------- why did you stop? ---------- */

.why-stop-menu {
  position: fixed;
  top: 3.4rem;
  right: 1rem;
  width: 300px;
  max-height: 70vh;
  overflow-y: auto;
  background: #1f2937;
  color: #f3f4f6;
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  z-index: 210;
}

.why-stop-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
  padding: 0.9rem 1rem 0.5rem;
}

.why-stop-reasons button {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: #e5e7eb;
  cursor: pointer;
  font-size: 0.92rem;
  padding: 0.6rem 1rem;
}

.why-stop-reasons button:hover { background: rgba(255, 255, 255, 0.07); }
.why-stop-reasons button.why-add { color: #93c5fd; }

.why-stop-add {
  display: flex;
  gap: 0.5rem;
  padding: 0.7rem 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.why-stop-input {
  flex: 1;
  background: #111827;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  color: #f3f4f6;
  font-size: 0.9rem;
  padding: 0.45rem 0.6rem;
}

.why-stop-input::placeholder { color: #9ca3af; }

.why-task-done {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: #86efac;
  cursor: pointer;
  font-size: 0.92rem;
  font-weight: 600;
  padding: 0.7rem 1rem;
}

.why-task-done:hover { background: rgba(255, 255, 255, 0.07); }

/* "Task done" is the final why-stop menu item (KF-011) */
.why-stop-reasons button.why-done { color: #86efac; font-weight: 600; }

/* ---------- toast ---------- */

.toast {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  background: #1f2937;
  color: #f3f4f6;
  border-radius: 8px;
  padding: 0.7rem 1.1rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  z-index: 300;
  font-size: 0.9rem;
}

.toast-sub {
  display: block;
  font-size: 0.8rem;
  opacity: 0.8;
  margin-top: 0.15rem;
}

/* ---------- dark modal dialogs (add/edit time) ---------- */

.dlg-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.dlg-overlay[hidden] { display: none; }

.dlg-overlay-top { z-index: 400; }

.dlg {
  background: #1f2937;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
  padding: 1.25rem;
  width: 100%;
  max-width: 420px;
  color: #f3f4f6;
}

.dlg-title {
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dlg-close {
  background: none;
  border: 0;
  color: #9ca3af;
  cursor: pointer;
  font-size: 1.4rem;
  line-height: 1;
  padding: 0.1rem 0.3rem;
}

.dlg-close:hover { color: #f3f4f6; }

.dlg-inline-error {
  color: #f87171;
  font-size: 0.85rem;
  margin: 0 0 0.75rem;
}

.dlg-inline-error[hidden] { display: none; }

.dlg-field {
  display: block;
  margin-bottom: 0.8rem;
}

.dlg-field > span {
  display: block;
  font-size: 0.8rem;
  color: #9ca3af;
  margin-bottom: 0.25rem;
}

.dlg-field input[type="text"],
.dlg-field input[type="time"],
.dlg-comment {
  width: 100%;
  box-sizing: border-box;
  background: #111827;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  color: #f3f4f6;
  padding: 0.5rem 0.6rem;
  font-size: 0.9rem;
}

.mt-task-input {
  color: #4ade80;
  font-weight: 500;
}

.dlg-row {
  display: flex;
  gap: 0.75rem;
}

.dlg-row .dlg-field { flex: 1; }

.mt-date-wrap {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}

.mt-date-wrap input { flex: 1; }

.mt-date-wrap button {
  background: #374151;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  color: #f3f4f6;
  padding: 0.45rem 0.6rem;
  cursor: pointer;
  font-size: 1rem;
}

.mt-date-wrap button:hover { background: #4b5563; }

.mt-duration {
  padding: 0.5rem 0.6rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: #f3f4f6;
}

.dlg-toggle {
  background: none;
  border: 0;
  color: #60a5fa;
  cursor: pointer;
  font-size: 0.85rem;
  padding: 0.25rem 0;
  margin-bottom: 0.5rem;
}

.dlg-toggle:hover { text-decoration: underline; }

.dlg-comment {
  margin-bottom: 0.8rem;
  min-height: 3.5rem;
  resize: vertical;
}

.dlg-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  margin-top: 0.5rem;
}

.dlg-date-ok {
  color: #4ade80;
  font-weight: 700;
}

.dlg-error { max-width: 340px; }

.dlg-error p { margin: 0 0 1rem; }

/* ---------- calendar popup ---------- */

.mt-cal-popup {
  position: absolute;
  z-index: 310;
  background: #1f2937;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
  padding: 0.75rem;
  color: #f3f4f6;
}

.mt-cal-popup[hidden] { display: none; }

.mt-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  font-weight: 600;
  font-size: 0.9rem;
}

.mt-cal-head button {
  background: #374151;
  border: 0;
  border-radius: 6px;
  color: #f3f4f6;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
}

.mt-cal-head button:hover { background: #4b5563; }

.mt-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 2rem);
  gap: 0.15rem;
  text-align: center;
}

.mt-cal-dow {
  font-size: 0.7rem;
  color: #9ca3af;
  padding: 0.25rem 0;
}

.mt-cal-day {
  background: none;
  border: 0;
  border-radius: 6px;
  color: #f3f4f6;
  cursor: pointer;
  padding: 0.35rem 0;
  font-size: 0.85rem;
}

.mt-cal-day:hover { background: #374151; }

.mt-cal-day.selected {
  background: #2563eb;
  color: #fff;
  font-weight: 600;
}

.mt-cal-day.other-month { color: #4b5563; }

/* ---------- time log entries ---------- */

.entry-edit {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  color: #9ca3af;
  cursor: pointer;
  font-size: 0.75rem;
  padding: 0.15rem 0.45rem;
  margin-left: 0.5rem;
}

.entry-edit:hover {
  color: #f3f4f6;
  border-color: rgba(255, 255, 255, 0.4);
}

/* P/M/S badges */

.entry-badge {
  display: inline-block;
  min-width: 1.3rem;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 700;
  border-radius: 4px;
  padding: 0.1rem 0.3rem;
  margin-right: 0.4rem;
}

.entry-badge-P { background: #7c2d12; color: #fdba74; }
.entry-badge-M { background: #1e3a5f; color: #93c5fd; }
.entry-badge-S { background: #3f1d1d; color: #fca5a5; }

/* ---------- timer pages (log, time spent, statistics) ---------- */

.timer-page {
  max-width: 960px;
  margin: 0 auto;
  padding: 1.5rem;
}

.timer-page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.timer-page-head h1 {
  margin: 0;
  font-size: 1.4rem;
}

.timer-page h2 {
  font-size: 1.1rem;
  margin: 1.5rem 0 0.75rem;
  color: #d1d5db;
}

.timer-tabs {
  display: flex;
  gap: 0.25rem;
  border-bottom: 1px solid #374151;
  margin-bottom: 1rem;
}

.timer-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: #9ca3af;
  cursor: pointer;
  font-size: 0.95rem;
  padding: 0.5rem 1rem;
}

.timer-tab.active {
  color: #f3f4f6;
  border-bottom-color: #22c55e;
}

.stats-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: #9ca3af;
  cursor: pointer;
  font-size: 0.95rem;
  padding: 0.5rem 1rem;
}

.stats-tab.active {
  color: #f3f4f6;
  border-bottom-color: #22c55e;
}

.timer-log-filters {
  display: flex;
  gap: 1rem;
  align-items: flex-end;
  margin-bottom: 1rem;
}

.timer-log-filters label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.85rem;
  color: #9ca3af;
}

.timer-log-filters select,
.timer-log-filters input[type="date"],
.timer-log-filters input[type="number"] {
  background: #1f2937;
  border: 1px solid #374151;
  border-radius: 6px;
  color: #f3f4f6;
  padding: 0.4rem 0.6rem;
}

.log-custom-range {
  display: flex;
  gap: 0.75rem;
  align-items: flex-end;
}

.log-icon-btns {
  display: flex;
  gap: 0.35rem;
  align-items: center;
  margin-left: auto;
}

.icon-btn {
  background: #1f2937;
  border: 1px solid #374151;
  border-radius: 6px;
  color: #d1d5db;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0.4rem 0.55rem;
}

.icon-btn:hover { background: #374151; }

.export-wrap { position: relative; display: inline-block; }

.export-wrap .menu-pop {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
}

.timer-log-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.timer-log-row {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  background: #1f2937;
  border: 1px solid #374151;
  border-radius: 8px;
  padding: 0.6rem 0.8rem;
}

.timer-dot {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  margin-top: 0.25rem;
  flex-shrink: 0;
}

.dot-green { background: #22c55e; }
.dot-red { background: #ef4444; }
.dot-orange { background: #f59e0b; }

/* ---------- timer log day groups (KF-090) ---------- */

.log-status {
  color: #9ca3af;
  font-size: 0.9rem;
  padding: 1rem 0;
  text-align: center;
}

.log-day-group { margin-bottom: 1.25rem; }

.log-day-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-weight: 700;
  font-size: 1.02rem;
  color: #f3f4f6;
  padding: 0.5rem 0.2rem;
  border-bottom: 1px solid #374151;
  margin-bottom: 0.5rem;
}

.log-add-entry {
  background: none;
  border: none;
  color: #60a5fa;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 400;
  padding: 0.2rem 0.4rem;
  white-space: nowrap;
}

.log-add-entry:hover { text-decoration: underline; }

.log-entry {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  background: #1f2937;
  border: 1px solid #374151;
  border-radius: 8px;
  padding: 0.6rem 0.8rem;
  margin-bottom: 0.4rem;
}

.log-badge {
  flex-shrink: 0;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 4px;
  background: #374151;
  color: #e5e7eb;
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.1rem;
}

.log-main { flex: 1; min-width: 0; }

.log-task {
  font-weight: 600;
  color: #f3f4f6;
}

.log-when {
  font-size: 0.82rem;
  color: #9ca3af;
}

.log-success {
  font-size: 0.82rem;
  color: #4ade80;
  margin-top: 0.2rem;
}

.log-stopped {
  font-size: 0.82rem;
  color: #f87171;
  margin-top: 0.2rem;
}

.log-neutral {
  font-size: 0.82rem;
  color: #9ca3af;
  margin-top: 0.2rem;
}

.log-note {
  font-size: 0.85rem;
  color: #d1d5db;
  margin-top: 0.2rem;
}

.log-dur {
  font-weight: 700;
  color: #f3f4f6;
  white-space: nowrap;
}

/* ---------- statistics page (KF-092) ---------- */

.bar-svg {
  width: 100%;
  height: auto;
  max-height: 300px;
}

.stats-highscores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.75rem;
}

/* ---------- report pages: light theme ----------
 * The timer log / statistics pages render on a light body (base.html has
 * no dark board chrome), so the dark-theme component colors above need
 * light overrides scoped to these pages. */

.timer-page h1 {
  color: #111827;
}

.timer-page h2 {
  color: #111827;
}

.timer-page .timer-tab,
.timer-page .stats-tab {
  color: #6b7280;
}

.timer-page .timer-tab.active,
.timer-page .stats-tab.active {
  color: #111827;
}

.timer-page .timer-tabs {
  border-bottom-color: #e5e7eb;
}

.timer-log-filters label {
  color: #6b7280;
}

.timer-page .log-day-head {
  color: #111827;
  border-bottom-color: #e5e7eb;
}

.timer-page .log-entry {
  background: #f9fafb;
  border-color: #e5e7eb;
}

.timer-page .log-task {
  color: #111827;
}

.timer-page .log-when {
  color: #6b7280;
}

.timer-page .log-dur {
  color: #111827;
}

.timer-page .log-note {
  color: #374151;
}

.timer-page .log-badge {
  background: #e5e7eb;
  color: #374151;
}

.timer-page .log-status {
  color: #6b7280;
}

.timer-page .section-title {
  color: #111827;
}

.timer-page .bar-chart {
  background: #f9fafb;
  border-color: #e5e7eb;
}

.timer-page .reason-name {
  color: #374151;
}

.timer-page .reason-count {
  color: #111827;
}

.timer-page .reason-bar {
  background: #e5e7eb;
}

.timer-page .log-status {
  color: #6b7280;
}

.timer-log-main { flex: 1; min-width: 0; }

.timer-log-task {
  font-weight: 600;
  color: #f3f4f6;
}

.timer-log-when {
  font-size: 0.82rem;
  color: #9ca3af;
}

.timer-log-reason {
  font-size: 0.82rem;
  color: #fca5a5;
  margin-top: 0.2rem;
}

.timer-log-note {
  font-size: 0.85rem;
  color: #d1d5db;
  margin-top: 0.2rem;
}

.timer-log-dur {
  font-weight: 700;
  color: #f3f4f6;
  white-space: nowrap;
}

.spent-total {
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: #f3f4f6;
}

/* bar chart */

.bar-chart {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 220px;
  padding: 0.5rem;
  background: #1f2937;
  border: 1px solid #374151;
  border-radius: 8px;
  overflow-x: auto;
}

.bar-col {
  flex: 1;
  min-width: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  justify-content: flex-end;
}

.bar-track {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 0;
}

.bar-fill {
  width: 70%;
  min-height: 2px;
  background: #22c55e;
  border-radius: 3px 3px 0 0;
}

.bar-label {
  font-size: 0.65rem;
  color: #6b7280;
  margin-top: 0.25rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* statistics */

.stats-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.stat-card {
  background: #1f2937;
  border: 1px solid #374151;
  border-radius: 8px;
  padding: 0.9rem;
  text-align: center;
}

.stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: #f3f4f6;
}

.stat-label {
  font-size: 0.82rem;
  color: #9ca3af;
  margin-top: 0.2rem;
}

.stats-reasons {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.reason-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.reason-name {
  width: 180px;
  flex-shrink: 0;
  font-size: 0.9rem;
  color: #d1d5db;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reason-bar {
  flex: 1;
  height: 1.1rem;
  background: #111827;
  border-radius: 4px;
  overflow: hidden;
}

.reason-fill { height: 100%; }

.reason-interrupted { background: #ef4444; }

.reason-count {
  width: 3rem;
  text-align: right;
  font-weight: 600;
  color: #f3f4f6;
}

/* ---------- settings & setup pages ---------- */

.settings-page {
  max-width: 640px;
  margin: 0 auto;
  padding: 1.5rem 1.2rem 3rem;
}

.settings-saved {
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #065f46;
  border-radius: 8px;
  padding: 0.7rem 1rem;
}

.settings-section {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
  margin-bottom: 1rem;
}

.settings-section h2 { margin: 0 0 0.8rem; font-size: 1.05rem; }

.settings-form label {
  display: block;
  margin-bottom: 0.8rem;
  font-size: 0.9rem;
  font-weight: 600;
}

.settings-form input[type="number"],
.settings-form textarea {
  display: block;
  width: 100%;
  margin-top: 0.3rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 0.95rem;
  font-weight: 400;
  font-family: inherit;
}

.settings-form input[type="number"] { max-width: 12rem; }

.settings-hint { color: var(--muted); font-size: 0.82rem; margin: 0.2rem 0 0.8rem; }

.brand-link { color: inherit; text-decoration: none; }
.brand-link:hover { text-decoration: underline; }

.setup-intro { color: var(--muted); margin: 0 0 1rem; }

/* ---------- board chrome: KanbanFlow board-bar controls (KF-132, KF-133) ---------- */

.boardbar-sep {
  width: 1px;
  height: 1.6rem;
  background: #d1d5db;
  margin: 0 0.3rem;
  flex: none;
}

.owner-avatar {
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: #4b5563;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  flex: none;
}

.toolbar-icon-btn {
  border: 1px solid #d1d5db;
  background: #fff;
  border-radius: 8px;
  padding: 0.4rem 0.55rem;
  cursor: pointer;
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}

.toolbar-icon-btn:hover { background: #f9fafb; border-color: #9ca3af; }

.toolbar-icon-btn.active {
  background: #dbeafe;
  border-color: #2563eb;
  color: #1d4ed8;
}

/* ---------- board filter panel (KF-134, KF-096) ---------- */

.filter-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 300px;
  max-width: 88vw;
  height: 100vh;
  background: #fff;
  box-shadow: -10px 0 28px rgba(0, 0, 0, 0.14);
  z-index: 320;
  display: flex;
  flex-direction: column;
}

.filter-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1rem;
  border-bottom: 1px solid #e5e7eb;
}

.filter-panel-title { font-weight: 700; font-size: 1.05rem; }

.filter-panel-close {
  background: none;
  border: none;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  color: var(--muted);
  padding: 0.2rem 0.4rem;
}

.filter-body { overflow-y: auto; padding: 0.4rem 1rem 1.2rem; }

.filter-section h4 {
  margin: 0.9rem 0 0.35rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}

.filter-opt {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.28rem 0;
  font-size: 0.9rem;
  cursor: pointer;
}

.filter-opt input { accent-color: var(--accent); }

.filter-labels {
  width: 100%;
  padding: 0.45rem 0.6rem;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 0.9rem;
  background: #f9fafb;
  color: var(--muted);
}

.filter-remember {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 1rem;
  font-size: 0.9rem;
  cursor: pointer;
}

.filter-remember input { accent-color: var(--accent); }

.filter-bookmarks {
  margin-top: 0.8rem;
  padding-top: 0.8rem;
  border-top: 1px solid #e5e7eb;
  color: var(--muted);
  font-size: 0.9rem;
}

/* ---------- board menu + reports submenu (KF-135, KF-136, KF-099) ---------- */

#board-menu,
#reports-submenu {
  max-height: 80vh;
  overflow-y: auto;
  min-width: 13rem;
}

#board-menu button,
#reports-submenu button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  width: 100%;
}

.menu-sub-arrow { font-size: 0.75rem; color: var(--muted); }

.legend-flash {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- dark mode (board menu toggle) ---------- */

body.dark {
  --bg: #0f172a;
  --ink: #e5e7eb;
  --muted: #9ca3af;
  --card-border: rgba(255, 255, 255, 0.14);
}

body.dark .toolbar-btn,
body.dark .toolbar-icon-btn,
body.dark .timer-pill {
  background: #1f2937;
  border-color: #374151;
  color: #e5e7eb;
}

body.dark .toolbar-btn:hover,
body.dark .toolbar-icon-btn:hover,
body.dark .timer-pill:hover {
  background: #374151;
  border-color: #4b5563;
}

body.dark .owner-avatar { background: #6b7280; }

body.dark .boardbar-sep { background: #374151; }

body.dark .columnHeader {
  background: #1f2937;
  border-color: #374151;
  color: #e5e7eb;
}

body.dark .task-card { border-color: #4b5563; }

body.dark .menu-pop {
  background: #1f2937;
  border-color: #374151;
}

body.dark .menu-pop button,
body.dark .menu-pop .menu-pop-title { color: #e5e7eb; }

body.dark .menu-pop button:hover { background: #374151; }

body.dark .filter-panel { background: #111827; color: #e5e7eb; }

body.dark .filter-panel-head { border-color: #374151; }

body.dark .filter-bookmarks { border-color: #374151; }

body.dark .filter-labels {
  background: #1f2937;
  border-color: #374151;
  color: #9ca3af;
}

body.dark .dlg-light { background: #1f2937; color: #e5e7eb; }

body.dark .color-legend-segment { color: #374151; }

/* ---------- large task names (board menu toggle) ---------- */

body.large-names .card-title { font-size: 1.2rem; }
/* ---- Timer settings modal (KF-074) ---- */
.dlg-timer-settings { width: min(640px, 94vw); max-height: 88vh; display: flex; flex-direction: column; }
.dlg-timer-settings .dlg-title { display: flex; align-items: center; justify-content: space-between; }
.timer-settings-body { display: flex; gap: 1rem; min-height: 320px; flex: 1; overflow: hidden; }
.timer-settings-tabs { display: flex; flex-direction: column; gap: 0.15rem; min-width: 9.5rem; border-right: 1px solid #e5e7eb; padding-right: 0.8rem; }
.ts-tab { text-align: left; background: none; border: none; border-radius: 6px; padding: 0.5rem 0.7rem; font-size: 0.92rem; cursor: pointer; color: #374151; }
.ts-tab:hover { background: #f3f4f6; }
.ts-tab.active { background: #e0f2fe; color: #0369a1; font-weight: 600; }
.timer-settings-panes { flex: 1; overflow-y: auto; padding-right: 0.2rem; }
.ts-pane h3 { margin: 0 0 0.9rem; font-size: 1rem; }
.ts-field { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.8rem; font-size: 0.92rem; }
.ts-field > span:first-child { font-weight: 600; color: #374151; }
.ts-field .timer-select { min-width: 11rem; }
.ts-toggle { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.8rem; font-size: 0.92rem; font-weight: 600; color: #374151; }
.toggle-btn { position: relative; width: 44px; height: 24px; border-radius: 999px; border: none; background: #d1d5db; cursor: pointer; transition: background 0.15s; flex: none; }
.toggle-btn .toggle-knob { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: left 0.15s; box-shadow: 0 1px 2px rgba(0,0,0,0.25); }
.toggle-btn[aria-checked="true"] { background: #22c55e; }
.toggle-btn[aria-checked="true"] .toggle-knob { left: 22px; }
.ts-reasons-list { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 0.8rem; max-height: 220px; overflow-y: auto; }
.ts-reason-row { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.4rem 0.6rem; border: 1px solid #e5e7eb; border-radius: 6px; font-size: 0.9rem; }
.ts-reason-row button { background: none; border: none; color: #9ca3af; cursor: pointer; font-size: 1rem; line-height: 1; }
.ts-reason-row button:hover { color: var(--danger); }
.ts-add-row { display: flex; gap: 0.5rem; }
.ts-add-row input { flex: 1; padding: 0.45rem 0.6rem; border: 1px solid #d1d5db; border-radius: 6px; font-size: 0.9rem; font-family: inherit; }
.ts-examples { background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 8px; padding: 0.7rem 0.9rem; margin-bottom: 0.9rem; font-size: 0.88rem; }
.ts-examples ul { margin: 0.4rem 0 0 1.1rem; padding: 0; }
.ts-sound-row { display: flex; gap: 0.5rem; align-items: center; }
.ts-slider-row { display: flex; gap: 0.6rem; align-items: center; min-width: 11rem; }
.ts-slider-row input[type="range"] { flex: 1; }
.ts-vol-val { min-width: 3em; text-align: right; font-variant-numeric: tabular-nums; color: #6b7280; }
#ts-saved { margin-right: auto; color: #15803d; }

/* ---- Delete board confirmation (KF-089) ---- */
.delete-board-confirm { border: 1px solid #fecaca; border-radius: 8px; }
.danger-heading { color: var(--danger); }
.delete-board-warning { font-size: 0.95rem; margin-bottom: 0.8rem; }
.toolbar-btn-danger { color: var(--danger); }
.toolbar-btn-danger:hover { background: #fef2f2; }

/* ---- Time spent report (KF-091) ---- */
.spent-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.8rem; }
.spent-head-btns { display: flex; gap: 0.5rem; }
.spent-filter-pane { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: flex-end; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px; padding: 0.8rem 1rem; margin-bottom: 0.8rem; }
.spent-filter-pane[hidden] { display: none; }
.spent-filter-pane label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.85rem; font-weight: 600; color: #374151; }
.spent-filter-pane select, .spent-filter-pane input[type="text"] { padding: 0.4rem 0.6rem; border: 1px solid #d1d5db; border-radius: 6px; font-size: 0.9rem; font-family: inherit; }
.spent-label-row { display: flex; gap: 0.3rem; align-items: center; }
.spent-controls { display: flex; gap: 1rem; align-items: center; margin-bottom: 0.8rem; }
.spent-controls label { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; font-weight: 600; color: #374151; }
.spent-controls select { padding: 0.4rem 0.6rem; border: 1px solid #d1d5db; border-radius: 6px; font-size: 0.9rem; font-family: inherit; }
.spent-view-toggle { display: flex; gap: 0; border: 1px solid #d1d5db; border-radius: 6px; overflow: hidden; }
.spent-view-toggle .timer-tab { border: none; border-radius: 0; padding: 0.4rem 0.9rem; }
.spent-total { font-size: 1rem; font-weight: 700; margin-bottom: 0.8rem; }
.spent-list { display: flex; flex-direction: column; gap: 0.8rem; }
.spent-day { border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden; }
.spent-day-head { display: flex; justify-content: space-between; align-items: center; background: #f9fafb; padding: 0.6rem 0.9rem; font-weight: 600; }
.spent-day-total { font-variant-numeric: tabular-nums; }
.spent-tasks { padding: 0.4rem 0.9rem 0.6rem; }
.spent-task { display: flex; justify-content: space-between; padding: 0.35rem 0; border-top: 1px solid #f3f4f6; font-size: 0.92rem; }
.spent-task:first-child { border-top: none; }
.spent-task-time { font-variant-numeric: tabular-nums; color: #6b7280; }
.spent-bookmarks { margin-top: 1rem; color: #6b7280; font-size: 0.9rem; }

/* ---------- task extras: labels, due dates, comments, attachments,
   history & time-log sub-views (KanbanFlow parity batch) ---------- */

.tm-title-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.tm-title-wrap input { width: 100%; }
.tm-subtitle { font-size: 0.8rem; color: var(--muted); padding: 0 0.5rem; }

.tm-row { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.9rem; flex-wrap: wrap; }
.tm-row .tm-label { margin: 0; }
/* KanbanFlow parity (KF-073): Color label with a single dot under it. */
.tm-color-row { flex-direction: column; align-items: flex-start; gap: 0.35rem; }
.tm-color-chip {
  width: 1rem; height: 1rem; border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.25); flex: none;
  padding: 0; cursor: pointer; background: none;
}
.tm-color-name { font-size: 0.9rem; color: var(--ink); }
.tm-time-spent { font-size: 0.9rem; color: var(--ink); display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.tm-link {
  background: none; border: none; padding: 0; margin-left: 0.4rem;
  color: var(--accent); cursor: pointer; font-size: 0.85rem; text-decoration: underline;
}

.tm-labels-chips { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.tm-label-chip {
  display: inline-flex; align-items: center; gap: 0.25rem;
  background: #eef2ff; border: 1px solid #c7d2fe; color: #3730a3;
  border-radius: 999px; padding: 0.15rem 0.6rem; font-size: 0.8rem;
  cursor: default;
}
button.tm-label-chip { cursor: pointer; }
.tm-label-chip.tm-label-sug { background: #f9fafb; border-style: dashed; color: var(--ink); }
.tm-label-x {
  background: none; border: none; padding: 0 0.1rem; cursor: pointer;
  color: #6b7280; font-size: 0.9rem; line-height: 1;
}
.tm-label-x:hover { color: var(--danger); }

.tm-due-chip {
  display: inline-flex; align-items: center; gap: 0.35rem;
  background: #fff; border: 1px solid rgba(0, 0, 0, 0.18); border-radius: 6px;
  padding: 0.25rem 0.6rem; font-size: 0.85rem; cursor: pointer; color: var(--ink);
}
.tm-due-chip:hover { border-color: var(--accent); }
.tm-due-overdue { color: var(--danger); border-color: #fca5a5; font-weight: 600; }

/* Dedicated sub-views (History / time log) rendered in the modal body. */
.tm-subview { display: flex; flex-direction: column; gap: 0.6rem; }
.tm-subview-back {
  align-self: flex-start; background: none; border: none; cursor: pointer;
  color: var(--accent); font-size: 0.9rem; padding: 0;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tm-subview-back:hover { text-decoration: underline; }
.tm-subview-title { font-size: 1.05rem; font-weight: 700; margin: 0; color: var(--ink); }
.tm-subview-actions { display: flex; align-items: center; gap: 0.8rem; }
.tm-subview-total { font-size: 0.85rem; color: var(--muted); }
.tm-day-group { font-size: 0.9rem; font-weight: 700; margin: 0.6rem 0 0.2rem; color: var(--ink); }
.tm-timelog-entries li { align-items: center; }
.tm-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.6rem; height: 1.6rem; border-radius: 50%; flex: none;
  background: #dbeafe; color: #1e40af; font-size: 0.75rem; font-weight: 700;
}
.tm-entry-member { font-weight: 600; font-size: 0.85rem; }
.entry-range { font-size: 0.8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.entry-del {
  background: none; border: none; cursor: pointer; color: var(--danger);
  font-size: 1rem; padding: 0.1rem 0.3rem; margin-left: 0.4rem;
}
.entry-del:hover { opacity: 0.7; }

.tm-history-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.tm-history-event {
  border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 8px; padding: 0.5rem 0.7rem;
  display: flex; flex-direction: column; gap: 0.15rem; background: rgba(255, 255, 255, 0.5);
}
.tm-history-kind {
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--muted); align-self: flex-start;
}
.tm-history-detail { font-size: 0.9rem; color: var(--ink); }
.tm-history-meta { font-size: 0.75rem; color: var(--muted); }

/* Comments */
.tm-comments { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.3rem; }
.tm-comment { border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 8px; padding: 0.5rem 0.7rem; background: rgba(255, 255, 255, 0.5); }
.tm-comment-head { display: flex; align-items: baseline; gap: 0.5rem; font-size: 0.85rem; }
.tm-comment-head strong { color: var(--ink); }
.tm-comment-date { color: var(--muted); font-size: 0.75rem; }
.tm-comment-del { margin-left: auto; background: none; border: none; cursor: pointer; color: var(--muted); font-size: 1rem; line-height: 1; }
.tm-comment-del:hover { color: var(--danger); }
.tm-comment-body { margin: 0.3rem 0 0; font-size: 0.9rem; white-space: pre-wrap; word-break: break-word; }
.tm-comment-addrow { display: flex; gap: 0.5rem; margin-top: 0.5rem; align-items: flex-start; }
.tm-comment-addrow textarea {
  flex: 1; min-width: 0; border: 1px solid rgba(0, 0, 0, 0.18); border-radius: 8px;
  padding: 0.5rem 0.6rem; font: inherit; font-size: 0.9rem; resize: vertical;
}

/* Attachments */
.tm-attachments { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.3rem; }
.tm-attachment { display: flex; align-items: baseline; gap: 0.6rem; font-size: 0.88rem; }
.tm-attachment-link { color: var(--accent); word-break: break-all; }
.tm-attachment-meta { color: var(--muted); font-size: 0.75rem; white-space: nowrap; }
.tm-attachment-del { margin-left: auto; background: none; border: none; cursor: pointer; color: var(--muted); font-size: 1rem; line-height: 1; flex: none; }
.tm-attachment-del:hover { color: var(--danger); }
.tm-attachment-addrow { margin-top: 0.5rem; }

/* Labels / due-date dialogs */
.labels-dlg, .duedate-dlg { min-width: min(24rem, 90vw); }
.labels-list { display: flex; gap: 0.35rem; flex-wrap: wrap; margin-bottom: 0.6rem; min-height: 1.5rem; }
.labels-suggestions { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.dd-task-list { display: flex; flex-direction: column; gap: 0.25rem; max-height: 10rem; overflow-y: auto; border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 8px; padding: 0.5rem; }
.dd-task-row { display: flex; gap: 0.5rem; align-items: center; font-size: 0.88rem; cursor: pointer; }
.dd-task-row input { flex: none; }

/* Card indicators: labels + due dates (column-config gated). */
.card-label {
  display: inline-block; background: #eef2ff; border: 1px solid #c7d2fe; color: #3730a3;
  border-radius: 999px; padding: 0 0.45rem; font-size: 0.7rem; margin-right: 0.25rem;
}
.card-due { font-size: 0.75rem; color: var(--muted); margin-right: 0.35rem; white-space: nowrap; }
.card-due-overdue { color: var(--danger); font-weight: 700; }

/* Labels editor inside the manual-time / edit-entry dialogs. */
.dlg-labels { margin-top: 0.4rem; }
.dlg-labels input[type="text"] {
  width: 100%; border: 1px solid rgba(0, 0, 0, 0.18); border-radius: 6px;
  padding: 0.4rem 0.5rem; font: inherit; font-size: 0.9rem; margin-bottom: 0.4rem;
}
/* ---------- board settings shell (KF-110, KF-111, KF-082, KF-083) ---------- */

.bshell { display: flex; gap: 2rem; align-items: flex-start; }

.bshell-nav {
  display: flex; flex-direction: column; gap: 0.1rem;
  min-width: 190px; border-right: 1px solid #e5e7eb; padding-right: 1rem;
}

.bshell-back { margin-bottom: 0.75rem; font-size: 0.9rem; }

.bshell-nav-item {
  display: block; padding: 0.45rem 0.7rem; border-radius: 6px;
  color: var(--text, #111827); text-decoration: none;
}

.bshell-nav-item:hover { background: #f3f4f6; }
.bshell-nav-active { background: #e0e7ff; font-weight: 600; }

.bshell-nav-dimmed { color: #9ca3af; cursor: not-allowed; }
.bshell-nav-dimmed:hover { background: none; }

.bshell-premium {
  font-size: 0.7rem; color: #b45309; background: #fef3c7;
  border-radius: 4px; padding: 0.05rem 0.35rem; margin-left: 0.3rem;
}

.bshell-content { flex: 1; min-width: 0; }

.bshell-table { border-collapse: collapse; width: 100%; margin: 0.75rem 0; }
.bshell-table th, .bshell-table td {
  text-align: left; padding: 0.45rem 0.6rem; border-bottom: 1px solid #e5e7eb;
}
.bshell-table th { font-size: 0.8rem; color: var(--muted); font-weight: 600; }

.bshell-list { list-style: disc; margin: 0.4rem 0 1rem 1.2rem; padding: 0; }

.bshell-defs { display: grid; grid-template-columns: 160px 1fr; gap: 0.4rem 1rem; margin: 0.75rem 0; }
.bshell-defs dt { font-weight: 600; }
.bshell-defs dd { margin: 0; }

.settings-saved { color: #15803d; font-weight: 600; }

.bshell-danger { border-top: 1px solid #fecaca; margin-top: 1.5rem; padding-top: 1rem; }

/* KF-082: drag handles replace up/down buttons */
.color-drag {
  cursor: grab; color: #9ca3af; font-size: 1.1rem; letter-spacing: -2px;
  padding: 0.2rem 0.4rem; margin-top: 1.1rem; user-select: none; flex: none;
}
.color-drag:active { cursor: grabbing; }
.color-drag-off { cursor: default; }
.color-admin-row.sortable-drag { background: #f9fafb; box-shadow: 0 4px 12px rgba(0,0,0,.12); }

/* KF-083: color admin action buttons above the table */
.color-admin-actions { display: flex; gap: 0.6rem; margin: 0.25rem 0 1rem; }

/* KF-086/KF-108: light-blue intro box with "Show more…" expander */
.color-intro-box {
  background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 8px;
  padding: 0.75rem 1rem; margin-bottom: 1rem; font-size: 0.9rem; color: #1e40af;
}
.color-intro-box p { margin: 0.25rem 0; }
.color-intro-box a { color: #1d4ed8; }

/* KF-087: swatch with the standard color name inside */
.color-swatch-named {
  display: inline-block; min-width: 4.5rem; padding: 0.3rem 0.6rem;
  border: 1px solid; border-radius: 4px; font-size: 0.82rem; font-weight: 600;
  text-align: center; color: #1f2937;
}

/* KF-081: enabled/disabled color tables */
.color-table td { vertical-align: middle; }
.color-cell-drag { width: 2rem; text-align: center; }
.color-cell-label { font-weight: 500; }
.color-cell-actions { white-space: nowrap; text-align: right; }
.color-cell-actions .btn { margin-left: 0.4rem; }
.color-default-tag { font-size: 0.78rem; color: #6b7280; font-weight: 400; }

/* KF-109: circled "?" help icon on the Disabled colors heading */
.help-icon {
  display: inline-block; width: 1.1rem; height: 1.1rem; line-height: 1.1rem;
  border: 1px solid #9ca3af; border-radius: 50%; text-align: center;
  font-size: 0.75rem; font-weight: 700; color: #6b7280; cursor: help;
  vertical-align: middle;
}

/* KF-085: premium upsell box at the bottom of the colors tab */
.color-upsell-box {
  background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px;
  padding: 1rem 1.25rem; margin-top: 1.5rem; font-size: 0.9rem; color: #92400e;
}
.color-upsell-box p { margin: 0; }

.bc-default-grid { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1rem 0; }
.bc-default-pick {
  display: flex; align-items: center; gap: 0.5rem;
  border: 1px solid #d1d5db; border-radius: 8px; padding: 0.5rem 0.75rem;
  background: #fff; cursor: pointer; font-size: 0.88rem;
}
.bc-default-pick:hover { border-color: var(--accent); }

.bc-copy-list { display: flex; flex-direction: column; gap: 0.3rem; margin: 1rem 0; max-height: 40vh; overflow: auto; }
.bc-copy-row {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.5rem 0.6rem; border-radius: 6px; cursor: pointer;
}
.bc-copy-row:hover { background: #f3f4f6; }

/* ---------- boards sidebar (KF-088) ---------- */

.board-layout { display: flex; align-items: stretch; min-height: 0; }

.boards-sidebar {
  width: 220px; flex: none;
  border-right: 1px solid #e5e7eb;
  padding: 0.8rem 0.8rem 1.5rem;
  background: #f9fafb;
  overflow-y: auto;
}

.bs-head { font-weight: 700; font-size: 1rem; margin-bottom: 0.5rem; }

.bs-search {
  width: 100%; box-sizing: border-box;
  padding: 0.4rem 0.6rem; border: 1px solid #d1d5db; border-radius: 6px;
  margin-bottom: 0.4rem; font-size: 0.85rem;
}

.bs-hint { font-size: 0.75rem; color: var(--muted); margin: 0 0 0.75rem; }

.bs-section h4 { margin: 0.75rem 0 0.35rem; font-size: 0.8rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }

.bs-list { list-style: none; margin: 0 0 0.5rem; padding: 0; min-height: 1.5rem; }

.bs-item {
  display: flex; align-items: center; gap: 0.4rem;
  padding: 0.35rem 0.5rem; border-radius: 6px; font-size: 0.88rem;
}
.bs-item a { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: inherit; text-decoration: none; }
.bs-item:hover { background: #eef2ff; }
.bs-current { background: #e0e7ff; font-weight: 600; }
.bs-unfav { border: none; background: none; color: #9ca3af; cursor: pointer; font-size: 1rem; padding: 0 0.2rem; }
.bs-unfav:hover { color: var(--danger); }
.bs-empty { color: var(--muted); font-size: 0.82rem; padding: 0.25rem 0.5rem; }
.bs-drop-hover { outline: 2px dashed var(--accent); outline-offset: 2px; background: #eef2ff; }
.bs-fav-empty #bs-favorites { border: 1px dashed #d1d5db; border-radius: 6px; }

/* ---------- timer settings extras (KF-075, KF-076) ---------- */

.ts-drag {
  cursor: grab; color: #9ca3af; font-size: 1rem; letter-spacing: -2px;
  user-select: none; padding: 0 0.25rem;
}
.ts-drag:active { cursor: grabbing; }

.ts-reason-label { cursor: text; padding: 0.15rem 0.3rem; border-radius: 4px; }
.ts-reason-label:hover { background: #fef3c7; }

.ts-reason-edit {
  background: #fef3c7; /* yellow highlight while renaming */
  border: 1px solid #f59e0b; border-radius: 4px;
  padding: 0.2rem 0.4rem; font-size: inherit; width: 100%;
}

.ts-activity-row {
  display: flex; align-items: center; gap: 0.6rem;
  border: 1px solid #e5e7eb; border-radius: 8px; padding: 0.55rem 0.7rem;
  margin-bottom: 0.5rem; background: #fff;
}
.ts-activity-main { flex: 1; min-width: 0; }
.ts-activity-desc { color: var(--muted); font-size: 0.85rem; }
.ts-activity-meta { color: var(--muted); font-size: 0.8rem; }
.ts-activity-remove { border: none; background: none; color: #9ca3af; cursor: pointer; font-size: 1.1rem; }
.ts-activity-remove:hover { color: var(--danger); }