/* Work in progress — task list page. Shares the dashboard's palette and type from
   style.css; everything here is specific to tracking tasks. */

:root {
  /* Light grey for a finished task. Deliberately lighter than --text-muted
     (#415a77), which is a dark blue-grey and barely reads as dimmed. */
  --text-done: #97a3ac;
}

/* ---------- summary chips in the topbar ---------- */
.stat-value.stat-done      { color: #8fbf6a; }
.stat-value.stat-progress  { color: #e0b055; }
.stat-value.stat-todo      { color: var(--topbar-text); }

/* ---------- toolbar ---------- */
.tasks-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.tasks-toolbar .spacer { flex: 1; min-width: 0; }
.tasks-toolbar select,
.owners-toolbar select,
.task-search {
  font-family: var(--font-data);
  font-size: 13px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
}
.task-search { min-width: 240px; flex: 1 1 240px; max-width: 360px; }

/* All three the same width so they read as one row, with the chevron at a
   fixed offset rather than hard against the edge. */
.tasks-toolbar select,
.owners-toolbar select {
  appearance: none;
  -webkit-appearance: none;
  width: 158px;
  flex: 0 0 158px;
  padding-right: 30px;
  background-image: var(--select-chevron);
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px 12px;
  cursor: pointer;
}
.task-search:focus, .tasks-toolbar select:focus, .owners-toolbar select:focus { outline: 2px solid var(--primary); outline-offset: 1px; }
.task-count { font-size: 12.5px; color: var(--text-muted); white-space: nowrap; }

/* ---------- section tabs ---------- */
/* The count follows the active search and filters, so a tab shows how many of
   its own tasks would still be there if you switched to it. */
.tab-count {
  display: inline-block;
  white-space: nowrap;
  margin-left: 5px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--bg);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.tab-btn.actief .tab-count { background: var(--primary-light); color: var(--primary); }

/* ---------- section groups ---------- */
.task-section { margin-bottom: 26px; }
/* No rule underneath: a dashboard card sets its title off with whitespace
   alone, and the table header already draws the first line. */
.task-section-head {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Tight, so the count reads as part of the heading rather than a column. */
  gap: 8px;
  /* 30px below, the same air a dashboard card leaves under its title. */
  padding: 0 0 30px;
  margin-bottom: 0;
}
/* Same treatment as a dashboard card title. Scoped to .card as well, because
   the plain .card h3 rule in style.css is more specific than a lone class and
   was quietly overriding the colour. */
.card .task-section-title {
  margin: 0;
  font-family: var(--font-titel);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
  color: var(--text);
}
.task-section-meta {
  font-size: 13px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* Struck through, not gone: deleted by someone who is not an admin, and there
   until an admin brings it back or removes it. */
.tasks-table tr.is-struck td { text-decoration: line-through; color: var(--text-done); }
.tasks-table tr.is-struck .cat-chip,
.tasks-table tr.is-struck .status-pill { opacity: .55; text-decoration: none; }

/* ---------- task table ---------- */
/* The card scrolls sideways rather than the page when the columns don't fit. */
.card:has(.tasks-table) { overflow-x: auto; }
/* Columns: Category, Task, Amount, Quotes, Approved, Started, Finished, Status.
   Only Task flexes; the rest are fixed so the section tables line up. */
.tasks-table { min-width: 972px; }
.tasks-table th:nth-child(1), .tasks-table td:nth-child(1) { width: 96px; }
.tasks-table th:nth-child(3), .tasks-table td:nth-child(3) { width: 104px; }
.tasks-table th:nth-child(4), .tasks-table td:nth-child(4) { width: 104px; }
.tasks-table th:nth-child(5), .tasks-table td:nth-child(5) { width: 86px; }
.tasks-table th:nth-child(6), .tasks-table td:nth-child(6) { width: 86px; }
.tasks-table th:nth-child(7), .tasks-table td:nth-child(7) { width: 104px; }
.tasks-table th:nth-child(8), .tasks-table td:nth-child(8) { width: 104px; }
.tasks-table th:nth-child(9), .tasks-table td:nth-child(9) { width: 108px; }

/* Whoever does the work is named, Robi included, so the column reads as "who"
   rather than as a yes/no about one person. */
.tasks-table .robi-cell { overflow-wrap: anywhere; }
/* No dotted underline on the abbreviation; the tooltip is enough. */
.tasks-table .robi-cell abbr { text-decoration: none; cursor: help; }
/* The note row spans the table, so the fixed widths above must not apply. */
.tasks-table tr.row-detail td { width: auto; }
.tasks-table tr.row-detail td:first-child { width: 96px; }
/* style.css draws a dotted rule above every note row and pads both sides of
   the gap. Here the arrow already ties a note to the task above it, so the
   rule reads as a separator between the two — drop it and close the gap.
   Meter reading notes on the dashboard keep theirs. */
.tasks-table tr.row-detail td { border-top: none; padding-top: 0; }
.tasks-table tbody tr:has(+ tr.row-detail) td { padding-bottom: 1px; }
/* One line per semicolon-separated remark, each led by its own arrow. */
.note-line { display: block; }
.note-line + .note-line { margin-top: 2px; }

.tasks-table .task-cell { line-height: 1.4; min-width: 240px; }
/* A finished task steps back: every cell's text dims, including its note row.
   The category and status badges keep their own colours, so the list stays
   scannable and "Done" still reads as green rather than grey-on-grey. */
.tasks-table tr.is-done td,
.tasks-table tr.row-detail.is-done td { color: var(--text-done); }
.tasks-table .amount-note { font-size: 11.5px; font-style: italic; color: var(--text-muted); }
.tasks-table .approval-pending { color: var(--amber); }
.tasks-table td.center, .tasks-table th.center { font-variant-numeric: tabular-nums; }

/* ---------- badges ---------- */
/* Status and Category share one shape: two differently-shaped badges on one
   row made the table look busier than the information warranted. */
.status-pill,
.cat-chip {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
  white-space: nowrap;
  background: var(--bg);
  color: var(--text-muted);
  border: 1px solid var(--border);
}
.status-done     { background: var(--green-bg);      color: var(--green);      border-color: var(--green-bg); }
.status-progress { background: var(--amber-bg);      color: var(--amber);      border-color: var(--amber-bg); }
/* Same fill as Completed: a completed task leaves its year tab for the Completed
   tab, so the two badges never share a table. */
.status-approved { background: var(--green-bg);      color: var(--green);      border-color: var(--green-bg); }
.status-quoted   { background: var(--primary-light); color: var(--text-muted); border-color: var(--primary-light); }
.status-todo     { background: var(--bg);            color: var(--text-muted); border-color: var(--border); }
.status-planned  { background: var(--bg);            color: var(--text-muted); border-color: var(--border); }

.cat-chip.cat-normal    { background: var(--green-bg);  color: var(--green);  border-color: var(--green-bg); }
.cat-chip.cat-extra     { background: var(--amber-bg);  color: var(--amber);  border-color: var(--amber-bg); }
.cat-chip.cat-damage    { background: #dbe7f5;          color: #2c5f96;       border-color: #dbe7f5; }
.cat-chip.cat-emergency { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-bg); }

.empty-state {
  padding: 48px 20px;
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
}

/* ---------- form ---------- */
.task-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px 18px;
}
.task-form label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.task-form label.full { grid-column: 1 / -1; }
/* Start, End and Duration answer one question together, so they share a row of
   their own rather than being split across the form's two columns. */
.task-form .field-trio {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 11px 18px;
}
.task-form input,
.task-form select,
.task-form textarea {
  font-family: var(--font-data);
  font-size: 14px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text);
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  width: 100%;
}
/* Matches the text inputs exactly: same drawn chevron as the toolbar, and
   appearance:none so a select is 40px tall like its neighbour instead of 42. */
.task-form select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 32px;
  background-image: var(--select-chevron);
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 13px 13px;
  cursor: pointer;
}
/* An <input list> draws its own black triangle, which sat next to the chevron
   on the neighbouring selects and made one form show two different arrows.
   Paint the same chevron here, and leave the native indicator in place but
   invisible so clicking the arrow still opens the list. */
.task-form input[list] {
  padding-right: 32px;
  background-image: var(--select-chevron);
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 13px 13px;
}
.task-form input[list]::-webkit-calendar-picker-indicator {
  opacity: 0;
  width: 26px;
  margin-right: -6px;
  cursor: pointer;
}

/* No spinner on the cost field: the arrows step by 0.01 and are useless for a
   figure that gets typed or pasted from a quote. */
.task-form input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}
.task-form input[type="number"]::-webkit-outer-spin-button,
.task-form input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Sits under the "Carried out by" dropdown when "Someone else…" is picked. */
/* label is display:flex, which would otherwise beat [hidden]. */
.task-form label[hidden] { display: none; }

.task-form textarea { min-height: 54px; resize: vertical; }
/* A checkbox must not stretch to the full field width the way the text inputs
   above do, so it sits in its own row next to its label. */
.task-form .check-row {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  font-size: 14px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text);
}
.task-form .check-row input[type="checkbox"] {
  width: 17px;
  height: 17px;
  padding: 0;
  margin: 0;
  accent-color: var(--primary);
  cursor: pointer;
}
/* Standing instruction above the date pair, not a hint on one field: it
   explains how Start, End and Duration are meant to be used together. */
.task-form .form-note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0;
  padding: 9px 12px;
  border: 1px solid var(--danger);
  border-radius: 8px;
  background: var(--danger-bg);
  color: var(--danger);
  font-size: 12.5px;
  line-height: 1.45;
}
/* Nudged down to sit on the first line of text rather than above it. */
.task-form .note-icon-important { flex: none; margin-top: 1px; }
.task-form p.full { grid-column: 1 / -1; }
.btn-danger-text { color: var(--danger); }
/* Green, matching the Completed badge, so the button and the state it produces
   look like the same thing. */
.btn-complete {
  background: var(--green-bg);
  color: var(--green);
  border: 1px solid var(--green-bg);
}
.btn-complete:hover { background: var(--green); color: #fff; border-color: var(--green); }
.modal-actions .spacer { flex: 1; }

@media (max-width: 760px) {
  .task-form { grid-template-columns: 1fr; }
  .task-search { max-width: none; }
}

/* The whole row is clickable for admins; the note row shares the highlight so
   a task and its note read as one target. */
.tasks-table tbody tr.row-clickable:hover,
.tasks-table tbody tr.row-clickable:hover + tr.row-detail { background: var(--primary-light); }

/* The history table's own rules live in style.css, shared with the owners trail. */

/* The modal already insets its contents by 28px, so its header and body add no
   padding of their own: doubled up, the two were costing ~70px of height and
   pushing the form into a scrollbar on a laptop screen. A little more height
   than the default 86vh, for the same reason. */
#task-modal-overlay .modal { max-height: 92vh; }
/* Room on both sides of the rule, so the title and the first field are not
   sitting on top of it. */
#task-modal-overlay .modal-header-row { padding: 0 0 16px; }
#task-modal-overlay .modal-scroll { padding: 18px 0 0; }
#task-modal-overlay .modal-actions { margin-top: 16px; }

/* The owner form opens on top of the directory it was opened from. */
#owner-modal-overlay { z-index: 60; }

/* Filter above the owners directory, on the row the count shares. */
.owners-toolbar { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
/* History and "+ Add Owner" together on the right: the first button there
   takes the slack, whichever of the two it is. */
.owners-toolbar > button:first-of-type { margin-left: auto; }
/* Opened from inside the owners directory, so it has to stack above it. */
#history-modal-overlay { z-index: 60; }
/* Sized to its own text rather than to the width the task filters share, so
   this directory looks the same here as on the Checks & Balances side. */
.owners-toolbar select { width: auto; flex: none; font-size: 12.5px; }