/* Task Hub Web App — styles ported from the Hammerspoon ui/taskboard.lua block.
   Same dark theme, pill buttons, chip filters, Day View tint, drag indicators. */

:root { color-scheme: dark; --theme: #06cf96; --theme-comp: #cf0641; }   /* theme + its complement (set live in applyTheme) */
* { box-sizing: border-box; }

body {
  font-family: -apple-system, 'Segoe UI', Roboto, sans-serif;
  background: #1b1b1b;
  color: #e8eaed;
  margin: 0;
}

/* App layout — sidebar + task board + calendar, each its own scroll column (no page scroll) */
.app { display: flex; height: 100vh; align-items: stretch; overflow: hidden; }
/* The task board scrolls within its own panel, so its scrollbar sits at the board's right
   edge (left of the calendar panel) rather than at the far right of the window. */
.main { flex: 1; min-width: 0; height: 100vh; overflow-y: auto; }

/* --- Sidebar --- */
.sidebar {
  width: 260px;
  flex: 0 0 260px;
  background: #131313;
  border-right: 1px solid #262626;
  padding: 12px 14px 18px;     /* top: matches header padding so titles align horizontally */
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  transition: flex-basis .2s, width .2s, padding .2s;
}
body.sidebar-collapsed .sidebar { width: 0; flex-basis: 0; padding: 0; overflow: hidden; border-right: none; }
body.sidebar-collapsed .sb-floatopen { display: flex; }
.sb-floatopen {
  position: fixed; top: 12px; left: 12px; z-index: 60;
  display: none; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  background: #2a2a2a; color: #e8eaed;
  border: 1px solid #3c3c3c; border-radius: 6px;
  cursor: pointer; font-size: 16px;
}
.sb-title {
  display: flex; align-items: center; gap: 10px;
  font-size: 18px; font-weight: 700;            /* matches h1 .page-title */
  letter-spacing: .04em;
  text-transform: uppercase;                    /* matches the right-panel TASK HUB rendering */
  line-height: 26px;                            /* same as icon height — locks vertical pos */
  height: 26px;                                 /* fixed-height row across both panels */
  color: #e8eaed;
  margin: 0 0 9px;                              /* matches h1 margin-bottom */
}
.sb-hamburger {
  background: none; border: none; color: #9aa0a6;
  font-size: 18px; cursor: pointer; padding: 4px 6px; border-radius: 5px;
}
.sb-hamburger:hover { background: #222; color: #e8eaed; }
.sb-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  color: var(--theme);             /* live theme colour from sidebar picker */
}
.sb-mark svg { width: 24px; height: 24px; }
.sb-name { letter-spacing: .01em; }

.sb-actions { display: flex; gap: 8px; margin: 6px 0 12px; flex-wrap: wrap; }
.sb-create {
  background: #2c2c2c; color: #e8eaed;
  border: 1px solid #3c3c3c; border-radius: 12px;
  padding: 10px 16px;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600;
  cursor: pointer;
}
.sb-create:hover { background: #353535; }
.sb-plus { font-size: 18px; font-weight: 400; line-height: 1; }

.sb-quick { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.sb-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  border-radius: 999px;
  cursor: pointer; user-select: none;
  font-size: 14px; color: #cfd2d6;
  position: relative;
}
.sb-item:hover { background: #1f1f1f; }
/* List drag-to-reorder feedback */
.sb-list { cursor: grab; }
.sb-list.sb-list-dragging { opacity: .4; cursor: grabbing; }
.sb-list-dropline { height: 0; border-top: 2px solid var(--theme); border-radius: 2px; margin: 1px 6px; }
.sb-item.active {
  /* Pure theme colour — exact match to the swatch you picked */
  background: var(--theme);
  color: #fff;
}
.sb-item.active .sb-icon { color: #fff; }
.sb-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  color: #9aa0a6;
  flex: 0 0 auto;
}
.sb-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-count { font-size: 12px; color: #9aa0a6; padding-left: 8px; }
.sb-item.active .sb-count { color: rgba(255,255,255,.85); }

.sb-lists-hdr {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 12px;
  color: #9aa0a6; font-size: 13px;
  margin-top: 6px;
}
.sb-caret {
  background: none; border: none; color: #9aa0a6;
  cursor: pointer; font-size: 14px; padding: 2px 4px;
}
.sb-caret:hover { color: #e8eaed; }
.sb-lists {
  display: flex; flex-direction: column; gap: 1px;
  margin-bottom: 10px;
}
body.lists-collapsed .sb-lists { display: none; }

/* Per-list item — checkbox-style square icon to match the example screenshot */
.sb-list .sb-tick {
  width: 22px; height: 22px;
  background: #2a2a2a;
  border: 1px solid #3c3c3c;
  border-radius: 5px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #cfd2d6;
  flex: 0 0 auto;
}
.sb-list.active .sb-tick { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.35); color: #fff; }
.sb-list .sb-label { letter-spacing: .03em; font-size: 13px; }

.sb-newlist {
  background: none; border: none; color: #9aa0a6;
  text-align: left; padding: 8px 12px; cursor: pointer;
  font-size: 13px;
  display: flex; align-items: center; gap: 8px;
  border-radius: 8px;
  /* sits directly under the Lists section now — no margin-top:auto pushing it down */
}
.sb-newlist:hover { background: #1f1f1f; color: #e8eaed; }

/* Sidebar section block (Company / Assigned dropdown rows) */
.sb-section { padding: 0 8px; margin-top: 10px; }
.sb-section-label {
  display: block;
  font-size: 11px;
  color: #9aa0a6;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 600;
  margin-bottom: 5px;
}
.sb-pickerow { display: flex; gap: 6px; align-items: center; }
.sb-pickerow select {
  flex: 1;
  height: 28px;
  min-width: 0;
  padding: 4px 8px;
  font-size: 12.5px;
}
.sb-addmini {
  width: 28px; height: 28px;
  background: none;
  border: 1px dashed #81c995;
  color: #81c995;
  border-radius: 50%;
  cursor: pointer;
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px;
  padding: 0;
}
.sb-addmini:hover { background: #1f2f1f; }
/* Manage (⋮) button next to + on Company / Assigned */
.sb-managemini {
  width: 28px; height: 28px;
  background: none;
  border: 1px solid #3c3c3c;
  color: #9aa0a6;
  border-radius: 50%;
  cursor: pointer;
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px; line-height: 1;
  padding: 0;
}
.sb-managemini:hover { background: #2a2a2a; color: #e8eaed; }

/* Top-row manage (⋮) button — smaller to match the 24 px toprow inputs */
.toprow .manage-btn {
  width: 24px; height: 24px;
  background: none;
  border: 1px solid #3c3c3c;
  color: #9aa0a6;
  border-radius: 50%;
  cursor: pointer;
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; line-height: 1;
  padding: 0;
}
.toprow .manage-btn:hover { background: #2a2a2a; color: #e8eaed; }

/* Manage popover (anchored under the ⋮ button) */
.managemenu {
  position: absolute;
  background: #1f1f1f;
  border: 1px solid #3c3c3c;
  border-radius: 8px;
  padding: 6px;
  box-shadow: 0 4px 20px rgba(0,0,0,.7);
  z-index: 50;
  min-width: 240px;
  max-height: 360px;
  overflow-y: auto;
}
.managemenu-hdr {
  font-size: 11px;
  color: #9aa0a6;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 600;
  padding: 4px 8px 6px;
}
.managemenu-row {
  display: flex; align-items: center;
  padding: 5px 6px; gap: 6px;
  border-radius: 5px;
}
.managemenu-row:hover { background: #2a2a2a; }
.managemenu-row .nm { flex: 1; font-size: 13px; color: #e8eaed; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.managemenu-row button {
  background: none;
  border: 1px solid #3c3c3c;
  border-radius: 5px;
  color: #9aa0a6;
  cursor: pointer;
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
}
.managemenu-row button:hover { background: #333; color: #fff; }
.managemenu-row button.danger:hover { background: #ff5252; color: #fff; border-color: #ff5252; }
.managemenu-empty { color: #888; padding: 6px 8px; font-size: 12px; }
.managemenu-add {
  margin: 6px 0 2px;
  width: 100%;
  background: none;
  border: 1px dashed #81c995;
  color: #81c995;
  border-radius: 6px;
  padding: 6px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
}
.managemenu-add:hover { background: #1f2f1f; }

/* Theme colour picker — 12 swatches in a 6-column grid */
.sb-themes {
  display: grid;
  grid-template-columns: repeat(6, 22px);
  gap: 6px;
  margin-top: 4px;
}
.sb-swatch {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  transition: transform .12s;
}
.sb-swatch:hover { transform: scale(1.12); }
.sb-swatch.on {
  border-color: #fff;
  box-shadow: 0 0 0 2px #131313 inset;
}

header {
  position: sticky;
  top: 0;
  background: #1b1b1b;
  padding: 12px 16px 10px;
  border-bottom: 1px solid #333;
  z-index: 5;
  transition: padding .2s;
}
/* Collapsed sidebar: reserve a left gutter so the floating ☰ toggle
   (fixed at left:12px, 32px wide) never overlaps the TASK HUB title. */
body.sidebar-collapsed header { padding-left: 56px; }

h1 {
  font-size: 13px;
  margin: 0 0 9px;
  color: #9aa0a6;
  text-transform: uppercase;
  letter-spacing: .05em;
  display: flex;
  justify-content: space-between;
  align-items: center;
  line-height: 26px;                            /* matches .sb-title row height */
  height: 26px;
}
/* Page title (right panel) — mirrors the sidebar's "Tasks" treatment exactly */
h1 .page-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 700;
  color: #e8eaed;
  letter-spacing: .04em;
  line-height: 26px;
  height: 26px;
}
h1 .page-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  color: var(--theme);
}
h1 .page-mark svg { width: 24px; height: 24px; }

input, select {
  background: #2a2a2a;
  color: #e8eaed;
  border: 1px solid #3c3c3c;
  border-radius: 7px;
  padding: 6px 8px;
  font-size: 13px;
  height: 32px;
}

.toprow {
  margin-bottom: 6px;              /* uniform 6 px gap above + below the search row */
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
/* Middle row (search + Company/Assigned dropdowns) — 25% shorter than the global 32 px */
.toprow input, .toprow select {
  height: 24px;
  padding: 2px 8px;
  font-size: 12.5px;
  border-radius: 6px;
}
.toprow.toprow2 input, .toprow.toprow2 select { height: 22px; }  /* third row buttons stay 22 px */

#flist { width: 240px; font-weight: 600; }
#q { width: 200px; }
.toprow select { min-width: 120px; }

.urg {
  display: flex; align-items: center; gap: 5px;
  font-size: 13px; color: #cfd2d6;
}
.urg input { width: auto; height: auto; }

.count {
  font-size: 11px;
  color: #777;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  align-self: center;
}

#list {
  padding: 2px 0 60px;
}

.listhdr {
  position: sticky;
  top: 0;
  font-size: 12px;
  font-weight: 700;
  color: rgba(0,0,0,.78);                /* theme-agnostic dark text — reads on any bright colour */
  background: var(--theme);
  padding: 7px 16px;
  border-bottom: 1px solid rgba(0,0,0,.18);
  letter-spacing: .03em;
  cursor: pointer;
  user-select: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: filter .12s;
}
.listhdr:hover { filter: brightness(.92); }    /* derived hover darkening — works for any theme */
.listhdr.listhdr-dragging { opacity: .5; }
.listhdr-dropline { height: 0; border-top: 3px solid var(--theme); box-shadow: 0 0 6px var(--theme); margin: 0; position: relative; z-index: 6; }
/* Fixed-width list-name slot so the + Task pill sits at the same x-coord on every list */
.listhdr .lh-name {
  display: inline-block;
  min-width: 170px;
  font-weight: 700;
  letter-spacing: .03em;
  white-space: nowrap;
}
.listhdr .lh-count { font-weight: 500; opacity: .85; }
.listhdr .donecount { font-weight: 500; opacity: .7; }
/* + Task pill on the left (after the list name) */
.listhdr .addbtn {
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(0,0,0,.18);
  color: rgba(0,0,0,.78);
  height: 22px;
  border-radius: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: none;
  flex: 0 0 auto;
}
.listhdr .addbtn:hover { background: rgba(255,255,255,.4); color: #1b1b1b; }
/* Clear Completed pill on the right */
.listhdr .clrdone {
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(0,0,0,.18);
  color: rgba(0,0,0,.78);
  height: 22px;
  border-radius: 12px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  text-transform: none;
}
.listhdr .clrdone:hover { background: rgba(255,255,255,.4); color: #8b0000; }

.ec {
  height: 22px;                                /* was 32px (−30%) — unified pill height */
  border: 1px solid #3c3c3c;
  border-radius: 11px;
  background: none;
  color: var(--theme);
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  letter-spacing: .01em;
}
.ec:hover { background: #2a2a2a; }
.ec.on { background: color-mix(in srgb, var(--theme) 18%, transparent); color: var(--theme); border-color: var(--theme); }
.toprow.toprow2 { margin-top: 0; gap: 6px; position: relative; }   /* relies on the middle row's 6 px bottom */
/* Fixed width so the label swap (Collapse All ⇄ Expand All) doesn't resize the button */
#ecCollapseToggle { min-width: 104px; justify-content: center; }

/* + Task / + Event on the third header row — absolutely placed so they never wrap; JS sets
   `right` so the group's right edge lines up with the quick-filter row's last pill. */
.hdr-create { position: absolute; right: 0; top: 0; bottom: 0; display: flex; align-items: center; gap: 6px; }
/* Primary create actions: solid theme-filled pills so they stand out from the outline pills,
   while keeping the same pill shape + theme colour. */
.hcreate {
  background: var(--theme); color: #fff;
  border: 1px solid var(--theme); border-radius: 11px;
  padding: 0 14px; height: 22px; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap;
  letter-spacing: .01em;
  box-shadow: 0 1px 6px color-mix(in srgb, var(--theme) 30%, transparent);
  transition: filter .12s, box-shadow .12s, transform .04s;
}
.hcreate:hover { filter: brightness(1.08); box-shadow: 0 2px 12px color-mix(in srgb, var(--theme) 50%, transparent); }
.hcreate:active { transform: translateY(1px); }

/* Header quick-filter pills (mirrors the sidebar's All / Today / Urgent / Due rows) */
.toprow.quickfilter-row { gap: 6px; margin-bottom: 6px; flex-wrap: wrap; }
.qf { display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; }
.qf .qf-ic { display: inline-flex; align-items: center; color: #9aa0a6; }
.qf.on .qf-ic { color: inherit; }
.qf .qf-cnt { opacity: .7; font-size: 11px; margin-left: 2px; }

/* v3.1: chip-based filter rows */
.quickrow { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.chiprow  { display: flex; gap: 10px; align-items: center; margin-top: 6px; }
.chiplabel{ font-size: 11px; color: #9aa0a6; text-transform: uppercase; letter-spacing: .04em; min-width: 68px; font-weight: 600; }
.chipgrp  { display: flex; gap: 5px; flex-wrap: wrap; }
.fchip {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 14px;
  background: #2a2a2a;
  border: 1px solid #3c3c3c;
  color: #cfd2d6;
  cursor: pointer;
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.fchip:hover { background: #333; }
.fchip.on { background: #8ab4f8; color: #202124; border-color: #8ab4f8; }
.fchip.qstar.on { background: #f5c518; color: #202124; border-color: #f5c518; }
.fchip.qstar.on svg path { fill: currentColor; }
.fchip.qurgent.on { background: #ff5252; color: #fff; border-color: #ff5252; }
.fchip.addchip { color: #81c995; border-style: dashed; }
.fchip.addchip:hover { background: #1f2f1f; }
input.addinp {
  font-size: 12px;
  padding: 3px 9px;
  border-radius: 14px;
  background: #1b1b1b;
  border: 1px dashed #81c995;
  color: #e8eaed;
  width: 130px;
  height: 26px;
  outline: none;
}

.chipmenu {
  position: absolute;
  background: #2a2a2a;
  border: 1px solid #555;
  border-radius: 8px;
  padding: 4px;
  box-shadow: 0 4px 18px rgba(0,0,0,.6);
  z-index: 50;
  display: flex;
  gap: 4px;
}
.chipmenu button {
  background: none;
  border: none;
  color: #e8eaed;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 5px;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.chipmenu button:hover { background: #3a3a3a; }
.chipmenu button.danger { color: #ff8a8a; }
.chipmenu.pickmenu {
  flex-direction: column;
  align-items: stretch;
  max-height: 320px;
  overflow-y: auto;
  min-width: 160px;
  gap: 0;
}
.chipmenu.pickmenu button { justify-content: flex-start; text-align: left; padding: 6px 12px; }
.chipmenu.pickmenu .empty { color: #888; padding: 6px 12px; font-size: 12px; }

/* Task row */
.task {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 16px;
  border-bottom: 1px solid #262626;
  cursor: grab;
}
.task:active { cursor: grabbing; }
.task:hover { background: #222; }
/* Left-edge accent bars: red for urgent, gold for today; both stacked when both are on.
   Box-shadow layering — first listed sits on top — gives us two adjacent 3 px strips. */
.task.urgent  { box-shadow: inset 3px 0 0 #ff5252; }
.task.starred { box-shadow: inset 3px 0 0 #f5c518; }
.task.urgent.starred { box-shadow: inset 3px 0 0 #ff5252, inset 6px 0 0 #f5c518; }

.task.done .title { text-decoration: line-through; color: #888; }
.task.unstar-pending { opacity: .4; transition: opacity .2s; }   /* about to drop from Today; click star to keep */
.task.flash { background: #1f7a44 !important; transition: background .15s; }
.task.dragging { opacity: .35; }
.task.dropabove { box-shadow: inset 0 3px 0 #06cf96; }
.task.dropbelow { box-shadow: inset 0 -3px 0 #06cf96; }
.task.urgent.dropabove { box-shadow: inset 3px 0 0 #ff5252, inset 0 3px 0 #06cf96; }
.task.urgent.dropbelow { box-shadow: inset 3px 0 0 #ff5252, inset 0 -3px 0 #06cf96; }
.task.starred.dropabove { box-shadow: inset 3px 0 0 #f5c518, inset 0 3px 0 #06cf96; }
.task.starred.dropbelow { box-shadow: inset 3px 0 0 #f5c518, inset 0 -3px 0 #06cf96; }
.task.urgent.starred.dropabove { box-shadow: inset 3px 0 0 #ff5252, inset 6px 0 0 #f5c518, inset 0 3px 0 #06cf96; }
.task.urgent.starred.dropbelow { box-shadow: inset 3px 0 0 #ff5252, inset 6px 0 0 #f5c518, inset 0 -3px 0 #06cf96; }
.task.sel { background: #1e2a3a; }

.cb {
  width: 16px; height: 16px;
  flex: 0 0 auto;
  margin-top: 3px;
  cursor: pointer;
  accent-color: #8ab4f8;
}

.body { flex: 1; min-width: 0; }
.title { font-size: 14px; word-break: break-word; }
.meta  { margin-top: 4px; line-height: 1.8; }
.chip {
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 10px;
  background: #333;
  color: #cfd2d6;
  margin-right: 4px;
  white-space: nowrap;
}
.chip.company { background: #2b3b52; color: #9ec1ff; }
.chip.assignee { background: #3a2f52; color: #d0b8ff; }
.chip.dept { background: #3a3320; color: #e8d48a; }
.chip.due  { background: #402a2a; color: #f0a8a8; }

.acts { display: flex; gap: 6px; flex: 0 0 auto; align-items: center; }
.acts button, .iconbtn {
  background: none;
  border: 1px solid #3c3c3c;
  border-radius: 6px;
  color: #cfd2d6;
  cursor: pointer;
  padding: 3px 7px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.acts button:hover, .iconbtn:hover { background: #333; }
/* Always-coloured outlines for the row toggles (match the New-Task modal styling). */
.iconbtn.btn-urgent { color: #ff5252; border-color: #ff5252; }
.iconbtn.btn-urgent:hover:not(.uon) { background: rgba(255,82,82,.15); color: #ff5252; }
.iconbtn.uon { background: #ff5252; border-color: #fff; color: #fff; }   /* white outline, matches the modal toggle */
.iconbtn.btn-star { color: #f5c518; border-color: #f5c518; }
.iconbtn.btn-star:hover:not(.son) { background: rgba(245,197,24,.18); color: #f5c518; }
.iconbtn.tick { border-color: #06cf96; color: #06cf96; }
.iconbtn.tick:hover { background: #06cf96; color: #1b1b1b; }
.iconbtn.son { background: #3a3320; border-color: #f5c518; color: #f5c518; }
/* Auto-starred (due/overdue): locked on, non-interactive */
.iconbtn.btn-star.locked { cursor: default; opacity: .85; }
.iconbtn.btn-star.locked:hover { background: #3a3320; }

/* Task-row action buttons (both left .iconbtn group and right .acts group) and popup
   toggle buttons 20% smaller — width AND height, kept consistent across both groups. */
/* Left (star/urgent/done) and right (edit/company/…/trash) action buttons: identical squares */
.task .iconbtn, .task .acts button { width: 22px; height: 22px; min-width: 22px; padding: 0; box-sizing: border-box; }
.toggle-icon { width: 29px; height: 24px; }
.iconbtn.son svg path { fill: currentColor; }
.iconbtn { flex: 0 0 auto; margin-top: 1px; }

.movesel { width: 150px; }

.ic { vertical-align: -2px; flex: 0 0 auto; }

/* Subtasks inline under parent */
.subs { margin-top: 5px; padding-left: 6px; border-left: 1px solid #2f2f2f; }
.subline {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: #cfd2d6;
  padding: 3px 0 3px 8px;
  cursor: grab;
}
.subline:active { cursor: grabbing; }
.subline.done .subtxt { text-decoration: line-through; color: #777; }
.subline.dragging { opacity: .35; }
.subline.dropabove { box-shadow: inset 0 2px 0 #06cf96; }
.subline.dropbelow { box-shadow: inset 0 -2px 0 #06cf96; }
.subdot {
  background: none;
  border: 1px solid #555;
  border-radius: 4px;
  color: #888;
  cursor: pointer;
  width: 18px; height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: 0;
}
.subdot:hover { background: #333; color: #cfd2d6; }
.subline.done .subdot { background: #2c5d3f; border-color: #2c5d3f; color: #e8f5ed; }
.subtxt { flex: 1; word-break: break-word; }

/* Header pill buttons */
.hdrbtns { display: inline-flex; gap: 7px; align-items: center; }
.hdrbtns .lnk {
  padding: 4px 12px;
  border-radius: 14px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid currentColor;
  background: transparent;
  transition: background .12s, color .12s;
  min-width: 84px;
  text-align: center;
  justify-content: center;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
#btnAdd { color: #81c995; }
#btnAdd:hover { background: #81c995; color: #0e1f17; }
#btnAddEvent { color: #c58bf5; }
#btnAddEvent:hover { background: #c58bf5; color: #1b1b1b; }
#btnDay { color: #f5c518; }
#btnDay:hover { background: #f5c518; color: #1b1b1b; }
#btnRefresh { color: #8ab4f8; }
#btnRefresh:hover { background: #8ab4f8; color: #1b1f2a; }

/* Day View */
body.dayview .toprow #flist,
body.dayview .toprow #ftag,
body.dayview .toprow .urg,
body.dayview .toprow .ec,
body.dayview .quickrow,
body.dayview .chiprow,
body.dayview .listhdr,
body.dayview header { background: #0e1716; }
body.dayview .task { padding: 14px 16px; }
body.dayview #btnDay { color: #1b1b1b !important; background: #f5c518 !important; border-color: #f5c518 !important; }

/* Bulk bar */
.bulkbar {
  position: fixed;
  left: 0; right: 0;
  bottom: 0;
  background: #202124;
  border-top: 1px solid #3c3c3c;
  padding: 10px 16px;
  display: none;
  align-items: center;
  gap: 8px;
  z-index: 20;
  flex-wrap: wrap;
}
.bulkbar.show { display: flex; }
#bulkcount { font-weight: 600; color: #8ab4f8; }
.bb {
  height: 30px;
  border: 1px solid #3c3c3c;
  border-radius: 7px;
  background: #2a2a2a;
  color: #e8eaed;
  cursor: pointer;
  font-size: 13px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.bb:hover { background: #333; }

.lnk {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  color: #9aa0a6;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  vertical-align: middle;
}

/* Modals / overlays (detail / add task / add event) */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  display: none;
  z-index: 30;
  overflow: auto;
  padding: 34px 0;
  justify-content: center;
  align-items: flex-start;
}
.overlay.show { display: flex; }
.sheet {
  background: #1f1f1f;
  width: 560px;
  max-width: 92vw;
  border-radius: 12px;
  padding: 20px 22px;
  box-shadow: 0 10px 40px rgba(0,0,0,.5);
}
.sheet h2 {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 12px;
  color: #9aa0a6;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.evt-target { margin: 6px 0 14px; font-size: 12px; color: #8b8f94; }
.evt-target strong { color: var(--theme); font-weight: 600; }
.sheet label {
  font-size: 11px;
  color: #9aa0a6;
  text-transform: uppercase;
  letter-spacing: .04em;
  display: block;
}
.sheet input, .sheet textarea, .sheet select {
  width: 100%;
  background: #2a2a2a;
  color: #e8eaed;
  border: 1px solid #3c3c3c;
  border-radius: 8px;
  padding: 9px 10px;
  font-size: 14px;
  margin: 3px 0 10px;
  height: auto;
}
.sheet input:focus, .sheet textarea:focus, .sheet select:focus {
  outline: none;
  border-color: #8ab4f8;
}
.sheet #dTitle, .sheet #aTitle, .sheet #eTitle { font-size: 16px; font-weight: 500; }
.sheet textarea { resize: vertical; min-height: 60px; }
.row2 { display: flex; gap: 10px; }
.row2 > div { flex: 1; }
.urg2 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #cfd2d6;
}
.urg2 input { width: auto; height: auto; margin: 0; }
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 3px 0 8px;
}
.tagchip {
  font-size: 13px;
  padding: 5px 11px;
  border-radius: 14px;
  background: #2a2a2a;
  border: 1px solid #3c3c3c;
  color: #cfd2d6;
  cursor: pointer;
  user-select: none;
}
.tagchip.on { background: #8ab4f8; color: #202124; border-color: #8ab4f8; }
.sub { display: flex; gap: 6px; align-items: center; }
.sub input { margin: 3px 0; }
.subdrag {
  display: inline-flex; align-items: center; justify-content: center;
  color: #777; cursor: grab; flex: 0 0 auto; padding: 0 1px; line-height: 0;
}
.subdrag svg { transform: rotate(90deg); }     /* point the move arrows up/down */
.subdrag:hover { color: #cfd2d6; }
.sub.subdragging { opacity: .45; }
.sub.subdragging .subdrag { cursor: grabbing; }
/* Insertion line showing where the dragged subtask will drop */
.sub-dropline { height: 0; border-top: 2px solid var(--theme); margin: 2px 0; border-radius: 2px; }
/* Subtask completion tick in the task popup */
.subtick {
  flex: 0 0 auto; width: 20px; height: 20px; padding: 0; line-height: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 1px solid #3c3c3c; border-radius: 5px; color: #777; cursor: pointer;
}
.subtick:hover { background: #333; color: #cfd2d6; }
.subtick.on { background: var(--theme); border-color: var(--theme); color: #1b1b1b; }
.asubin.subdone { text-decoration: line-through; opacity: .55; }
.del {
  cursor: pointer;
  color: #9aa0a6;
  background: none;
  border: none;
  font-size: 18px;
  padding: 0 4px;
}
.actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 6px;
}
.hint { font-size: 11px; color: #777; }
button.primary {
  background: #8ab4f8;
  color: #202124;
  border: none;
  border-radius: 8px;
  padding: 9px 18px;
  font-weight: 600;
  cursor: pointer;
  font-size: 14px;
}
button.ghost {
  background: none;
  border: none;
  color: #9aa0a6;
  cursor: pointer;
  font-size: 14px;
  margin-right: 6px;
}
button.ghost.danger { color: #ff8a8a; margin-right: auto; }   /* Delete sits on the far left */
button.ghost.danger:hover { color: #ff6b6b; }

/* Delete-confirmation popup — red theme, same .sheet design as the other modals */
.sheet-confirm { width: max-content; max-width: 92vw; padding: 13px 22px 14px;
  border-top: 3px solid #ff4d4d; text-align: center; }
.sheet-confirm h2 { color: #ff6b6b; margin: 0 0 7px; }
/* nowrap keeps "Are you sure…" on one line; the <br> still breaks before "This can't be undone." */
.confirm-msg { color: #d6d6d6; font-size: 14px; line-height: 1.4; margin: 0 0 11px; white-space: nowrap; }
.sheet-confirm .actions { justify-content: center; margin-top: 0; }   /* centre the Cancel / Delete buttons */
.danger-btn {
  background: #ff4d4d; color: #fff; border: none; border-radius: 8px;
  padding: 8px 18px; font-weight: 600; cursor: pointer; font-size: 14px;
}
.danger-btn:hover { background: #ff3030; }
/* Anchored next to the trash button: lighter dim, no centring padding (positioned in JS) */
.confirm-overlay.anchored { background: rgba(0,0,0,.15); padding: 0; }

/* ---- Custom recurrence popup (Google-Calendar layout, Task Hub theme) ---- */
.sheet-recur { width: 380px; }
.sheet-recur h2 { color: var(--theme); }
.recur-line { display: flex; align-items: center; gap: 10px; margin: 2px 0 14px; font-size: 14px; color: #d6d6d6; }
.sheet-recur .recur-num { width: 58px; }
.sheet-recur .recur-sel { width: auto; min-width: 110px; }
.sheet-recur .recur-month { display: block; width: auto; min-width: 210px; margin: 0 0 16px; }
.recur-days { display: flex; gap: 6px; margin: 0 0 16px; }
.recur-day { width: 30px; height: 30px; border-radius: 50%; border: 1px solid #3c3c3c;
  background: #2a2a2a; color: #cfd2d6; cursor: pointer; font-size: 12px; font-weight: 600; padding: 0; }
.recur-day.on { background: var(--theme); border-color: var(--theme); color: #11150f; }
.recur-ends-label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #9aa0a6; margin: 2px 0 8px; }
.recur-end { display: flex; align-items: center; gap: 10px; margin: 8px 0; font-size: 14px; color: #d6d6d6; cursor: pointer; }
.recur-end input[type=radio] { width: 16px; height: 16px; accent-color: var(--theme); margin: 0; cursor: pointer; }
.recur-end > span { min-width: 40px; }
.sheet-recur .recur-date { width: auto; }
.sheet-recur .recur-after { width: 62px; }
.recur-occ { color: #9aa0a6; font-size: 13px; }
.recur-done { background: var(--theme); color: #11150f; border: none; border-radius: 8px;
  padding: 9px 18px; font-weight: 600; cursor: pointer; font-size: 14px; }
.recur-done:hover { filter: brightness(1.08); }
/* row action icon lit when the task repeats */
.acts button.on { color: var(--theme); }

/* New Task modal — heading toggle row + time pickers */
.sheet-headrow {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px;
}
.sheet-headrow h2 { margin: 0; }
/* Task popup heading: white, sized to match the "TASK HUB" page title */
#addOverlay h2 { color: #e8eaed; font-size: 18px; font-weight: 700; letter-spacing: .04em; }
.sheet-toggles { display: inline-flex; gap: 8px; }
.toggle-icon {
  background: none;
  border: 1px solid currentColor;
  border-radius: 8px;
  cursor: pointer;
  width: 36px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
  transition: background .12s, color .12s, border-color .12s;
}
/* Coloured outlines even when off — red for urgent, gold for star */
#aUrgentBtn { color: #ff5252; }
#aUrgentBtn:hover:not([data-on="true"]) { background: rgba(255,82,82,.15); }
#aUrgentBtn[data-on="true"] { background: #ff5252; color: #fff; }
#aStarBtn   { color: #f5c518; }
#aStarBtn:hover:not([data-on="true"])   { background: rgba(245,197,24,.18); }
#aStarBtn[data-on="true"]   { background: #3a3320; color: #f5c518; }
#aStarBtn[data-on="true"] svg path { fill: currentColor; }

.optional { color: #777; font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 11px; }

/* Single-row: List · Due Date · Due Time (H · M · AM/PM) */
.row-due { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 4px; }
.fld { display: flex; flex-direction: column; min-width: 0; }
.fld-list { flex: 0 0 168px; }                /* ≈ 30% narrower than the old half-width */
.fld-date { flex: 0 0 132px; }                /* ≈ 45% narrower than the old half-width */
.fld-time { flex: 1; min-width: 0; }
.fld-time .time-pickers { display: flex; gap: 6px; margin: 3px 0 10px; }
.fld-time .time-pickers select {
  width: 56px;
  min-width: 56px;
  padding: 9px 4px;
  text-align: center;
  text-align-last: center;
}
.fld-time .time-pickers select#aTimeAP { width: 64px; min-width: 64px; }

/* Active Company/Assigned filter — theme-coloured box when a value is selected */
.toprow select.filter-active {
  border-color: var(--theme);
  color: var(--theme);
  background: color-mix(in srgb, var(--theme) 14%, #2a2a2a);
  font-weight: 600;
}

/* Brief green flash confirming a new Company/Assigned value was created */
input.field-ok {
  border-color: var(--theme) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--theme) 35%, transparent);
  transition: border-color .15s, box-shadow .15s;
}

/* --- Time-reminder toasts (bottom-right, theme-accented) --- */
.reminder-stack {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 320px;
  max-width: calc(100vw - 32px);
}
.reminder-toast {
  position: relative;
  background: #1f1f1f;
  border: 1px solid #333;
  border-left: 3px solid var(--theme);
  border-radius: 10px;
  padding: 12px 14px 12px 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45),
              0 0 0 1px color-mix(in srgb, var(--theme) 25%, transparent);
  color: #e8eaed;
  animation: rt-in .18s ease-out;
}
@keyframes rt-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.rt-close {
  position: absolute;
  top: 8px; right: 8px;
  background: none; border: none; cursor: pointer;
  color: #888; padding: 2px; border-radius: 5px; line-height: 0;
}
.rt-close:hover { background: #2a2a2a; color: #e8eaed; }
.rt-head {
  display: flex; align-items: center; gap: 7px;
  color: var(--theme);
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
  margin-bottom: 6px;
}
.rt-title { font-size: 14px; font-weight: 600; padding-right: 16px; }
.rt-time  { font-size: 12px; color: #9aa0a6; margin-top: 2px; }
.rt-actions { display: flex; gap: 6px; margin-top: 11px; }
.rt-btn {
  flex: 1;
  height: 26px;
  border: 1px solid #3c3c3c;
  border-radius: 8px;
  background: #2a2a2a;
  color: #cfd2d6;
  font-size: 12px; font-weight: 600;
  cursor: pointer;
}
.rt-btn:hover { background: #333; }
.rt-done {
  background: color-mix(in srgb, var(--theme) 18%, transparent);
  border-color: var(--theme);
  color: var(--theme);
}
.rt-done:hover { background: color-mix(in srgb, var(--theme) 28%, transparent); }

/* Snooze split-button + duration dropdown (5 / 10 / 15 min) */
.rt-snoozewrap { flex: 1; display: flex; position: relative; gap: 2px; }
.rt-snoozewrap .rt-snooze { flex: 1; }
.rt-snooze-more { flex: 0 0 20px; padding: 0; }
.rt-snoozemenu {
  position: absolute; bottom: calc(100% + 4px); left: 0; right: 0;
  background: #2a2a2a; border: 1px solid #555; border-radius: 7px;
  display: none; flex-direction: column; overflow: hidden; z-index: 5;
  box-shadow: 0 6px 18px rgba(0,0,0,.5);
}
.rt-snoozemenu.open { display: flex; }
.rt-snoozemenu button {
  background: none; border: none; color: #e8eaed; cursor: pointer;
  font-size: 12px; padding: 7px 10px; text-align: left;
}
.rt-snoozemenu button:hover { background: #3a3a3a; }

/* Pulsing attention animation while a reminder is active */
@keyframes rt-pulse {
  0%, 100% { box-shadow: 0 8px 24px rgba(0,0,0,.45), 0 0 0 1px color-mix(in srgb, var(--theme) 20%, transparent); }
  50%      { box-shadow: 0 8px 24px rgba(0,0,0,.45), 0 0 0 4px color-mix(in srgb, var(--theme) 60%, transparent); }
}
.reminder-toast.pulse { animation: rt-pulse 1.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .reminder-toast.pulse { animation: none; } }

/* Overdue tasks (past due date, or due today and past due time) show RED */
.task.overdue .title { color: #ff6b6b; }
.chip.due.overdue { background: #5a1f1f; color: #ff6b6b; font-weight: 600; }

/* Completed task → done tick filled green (when completed rows are shown) */
.task.done .iconbtn.tick { background: var(--theme); border-color: var(--theme); color: #1b1b1b; }

/* ===== Day Calendar panel (third column) ===== */
.daycal {
  flex: 0 0 36%;
  min-width: 400px;                          /* fits the longest date + the + Event / Pull / Remove buttons */
  background: #161616;
  border-left: 1px solid #262626;
  height: 100vh;
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
}
body:not(.daycal-open) .daycal { display: none; }

.dc-head {
  display: flex; align-items: center; gap: 6px;
  padding: 12px 14px 10px;
  border-bottom: 1px solid #333;
  flex: 0 0 auto;
  flex-wrap: wrap;
  position: relative;
}
.dc-title   { font-size: 14px; font-weight: 700; color: var(--theme); letter-spacing: .03em; white-space: nowrap; cursor: pointer; }
.dc-planned { font-size: 11px; color: #777; }
.dc-actions { margin-left: auto; display: flex; gap: 5px; }
/* Keep the day-cal header action buttons compact + same height so + Event / Pull / Remove align
   and fit beside even the longest date (e.g. "WEDNESDAY 24 September 2026"). */
.dc-head .ec, .dc-addevent { padding: 0 10px; height: 22px; font-size: 11.5px; display: inline-flex; align-items: center; }
.dc-icon {
  background: none; border: 1px solid #3c3c3c; border-radius: 6px;
  color: var(--theme); cursor: pointer; padding: 3px 5px; line-height: 0; display: inline-flex;
}
.dc-icon:hover { background: #2a2a2a; }
.dc-nav {
  background: none; border: 1px solid #3c3c3c; border-radius: 6px;
  color: #cfd2d6; cursor: pointer; font-size: 14px; line-height: 1; padding: 1px 7px; height: 22px;
}
.dc-nav:hover { background: #2a2a2a; color: #fff; }

/* Themed month-grid date picker */
.dc-picker {
  position: absolute; top: 100%; left: 12px; z-index: 70;
  background: #1f1f1f; border: 1px solid #3c3c3c; border-radius: 10px;
  padding: 10px; box-shadow: 0 10px 28px rgba(0,0,0,.55); width: 232px;
}
.dcp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.dcp-title { font-size: 13px; font-weight: 600; color: #e8eaed; }
.dcp-nav {
  background: none; border: none; color: #cfd2d6; cursor: pointer; font-size: 16px; line-height: 1;
  padding: 2px 8px; border-radius: 6px;
}
.dcp-nav:hover { background: #333; color: #fff; }
.dcp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dcp-dow { text-align: center; font-size: 10px; color: #777; padding: 2px 0; }
.dcp-day {
  background: none; border: none; color: #d6d6d6; cursor: pointer;
  font-size: 12px; height: 26px; border-radius: 6px;
}
.dcp-day:hover { background: #333; }
.dcp-day.other { color: #555; }
.dcp-day.today { outline: 1px solid var(--theme); }
.dcp-day.sel { background: var(--theme); color: #1b1b1b; font-weight: 700; }

/* Row due-date picker — styled like the reminder toast, ~25% smaller, anchored to the icon */
.datepop {
  position: fixed; z-index: 80;
  background: #1f1f1f;
  border: 1px solid #333; border-left: 3px solid var(--theme);
  border-radius: 10px; padding: 8px; width: 174px;
  box-shadow: 0 8px 24px rgba(0,0,0,.45), 0 0 0 1px color-mix(in srgb, var(--theme) 25%, transparent);
}
.datepop .dcp-head { margin-bottom: 6px; }
.datepop .dcp-title { font-size: 11px; }
.datepop .dcp-nav { font-size: 13px; padding: 1px 6px; }
.datepop .dcp-grid { gap: 1px; }
.datepop .dcp-dow { font-size: 8px; padding: 1px 0; }
.datepop .dcp-day { font-size: 10px; height: 20px; border-radius: 5px; }
.datepop-foot { display: flex; justify-content: space-between; margin-top: 6px; }
.datepop-btn {
  background: none; border: none; color: var(--theme); cursor: pointer;
  font-size: 11px; padding: 3px 6px; border-radius: 5px;
}
.datepop-btn:hover { background: color-mix(in srgb, var(--theme) 18%, transparent); }

.dc-grid { position: relative; flex: 1 1 auto; overflow-y: scroll; scrollbar-width: thin; scrollbar-color: #3a3a3a #161616; }
.dc-grid::-webkit-scrollbar { width: 10px; }
.dc-grid::-webkit-scrollbar-track { background: #161616; }
.dc-grid::-webkit-scrollbar-thumb { background: #3a3a3a; border-radius: 5px; border: 2px solid #161616; }
.dc-grid::-webkit-scrollbar-thumb:hover { background: #4a4a4a; }
.dc-canvas { position: relative; }                 /* height set inline in JS */

/* Hour gridlines + gutter labels (46px gutter) */
.dc-hour         { position: absolute; left: 46px; right: 0; border-top: 2px solid #2a2a2a; pointer-events: none; }
.dc-hour.half    { border-top: 1px solid #232323; }
.dc-hour.quarter { border-top: 1px solid #1c1c1c; }
.dc-hour-label { position: absolute; left: 6px; font-size: 10px; color: #6b6b6b; transform: translateY(-6px); }

/* Background calendar events, in front of task blocks. Light diagonal cross-hatch in the accent
   colour; INTERNAL (Task Hub, editable) runs "/" 45°, EXTERNAL (read-only) is mirrored "\" 135° — the
   direction (plus a slightly stronger internal tint) tells them apart. Breaks stay grey, so no clash. */
.dc-event {                                   /* external — mirrored "\" hatch in the theme's COMPLEMENT */
  position: absolute; left: 46px; right: 8px;
  border-radius: 6px; overflow: hidden; z-index: 20;
  padding: 2px 7px; font-size: 11px; color: #e3dadf;
  border: 1px solid color-mix(in srgb, var(--theme-comp) 42%, #2b2b2b);
  background:
    repeating-linear-gradient(135deg,
      color-mix(in srgb, var(--theme-comp) 16%, transparent) 0 6px, transparent 6px 12px),
    #1b181a;
}
.dc-event:not(.editable) .dc-main { padding-right: 7px; }   /* no ✕ on external → time sits at the edge */
.dc-event.editable {                          /* internal — "/" hatch, draggable */
  cursor: grab;
  color: #e6f1e9;
  border-color: var(--theme);
  background:
    repeating-linear-gradient(45deg,
      color-mix(in srgb, var(--theme) 24%, transparent) 0 6px, transparent 6px 12px),
    #181c17;
}
.dc-event.editable:hover { filter: brightness(1.12); }
.dc-event.dragging { opacity: .82; cursor: grabbing; z-index: 41; box-shadow: 0 6px 18px rgba(0,0,0,.5); }

/* Task / break blocks */
.dc-block {
  position: absolute; left: 46px; right: 8px;
  border-radius: 6px;
  background: #141414;                       /* dark interior, green outline (matches target) */
  border: 1px solid var(--theme);
  color: #e8eaed; font-size: 12px; padding: 3px 7px;
  overflow: hidden; cursor: grab; z-index: 10;
}
.dc-block.dragging { opacity: .75; cursor: grabbing; z-index: 40; box-shadow: 0 6px 18px rgba(0,0,0,.5); }
.dc-block.done .dc-bt { text-decoration: line-through; opacity: .5; }
.dc-main { display: flex; align-items: center; gap: 5px; padding-right: 22px; }
.dc-done {
  flex: 0 0 auto;
  width: 16px; height: 16px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 1px solid var(--theme); border-radius: 4px;
  color: var(--theme); cursor: pointer; line-height: 0;
}
.dc-done:hover { background: var(--theme); color: #1b1b1b; }
.dc-done svg { width: 11px; height: 11px; }
.dc-block.done .dc-done { background: var(--theme); color: #1b1b1b; }   /* filled when done */
.dc-bt   { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1 1 auto; min-width: 0; }
.dc-time { font-size: 10px; color: #9aa0a6; flex: 0 0 auto; white-space: nowrap; margin-left: auto; padding-left: 6px; }
/* "Today" / "N Days Late" badge — sits just left of the time on a scheduled task block.
   margin-left:auto here (and a fixed gap on the following time) keeps the badge snug to the time. */
.dc-late { flex: 0 0 auto; white-space: nowrap; margin-left: auto; background: #c0392b; color: #fff;
  font-size: 9px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
  padding: 1px 5px; border-radius: 4px; }
.dc-late + .dc-time { margin-left: 6px; }
.dc-x {
  position: absolute; top: 2px; right: 3px;
  background: none; border: none; color: #9aa0a6; cursor: pointer; padding: 1px; line-height: 0; border-radius: 4px;
}
.dc-x:hover { background: rgba(0,0,0,.35); color: #fff; }
.dc-handle { position: absolute; left: 0; right: 0; height: 7px; cursor: ns-resize; z-index: 11; }
.dc-handle.top { top: 0; } .dc-handle.bot { bottom: 0; }

.dc-break {
  background: repeating-linear-gradient(45deg, #232323 0 7px, #1b1b1b 7px 14px);
  border: 1px dashed #4a4a4a; border-left: 3px dashed #6a6a6a; color: #b7b7b7;
  z-index: 20;                                /* lunch/breaks sit in front of task blocks too */
}

/* "Now" line + drag-in ghost line */
.dc-now   { position: absolute; left: 46px; right: 0; border-top: 2px solid #ff3b30; z-index: 25; pointer-events: none; }
.dc-now::before { content: ''; position: absolute; left: -5px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: #ff3b30; }
.dc-ghost { position: absolute; left: 46px; right: 8px; border-top: 2px dashed var(--theme); z-index: 45; pointer-events: none; }

/* Calendar close button — hidden on desktop, shown on mobile (full-screen calendar) */
.dc-close { display: none; background: none; border: 1px solid #3c3c3c; border-radius: 6px; color: #cfd2d6; cursor: pointer; padding: 2px 9px; font-size: 14px; line-height: 1; }
.dc-close:hover { background: #2a2a2a; color: #fff; }

/* "Completed (n)" divider in single-list view */
.completed-divider {
  font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: #777; padding: 12px 16px 6px; border-top: 1px solid #262626;
}

/* ===== Mobile / narrow-viewport first pass (≤820px). Desktop layout above is untouched. ===== */
@media (max-width: 820px) {
  /* Only the board column scrolls — not the page — so the sticky header stays pinned at the top.
     100dvh tracks the visible viewport as the mobile browser toolbar shows/hides (100vh fallback). */
  html, body { height: 100vh; height: 100dvh; overflow: hidden; }
  .app  { height: 100vh; height: 100dvh; }
  .main { height: 100vh; height: 100dvh; }
  /* Sidebar → off-canvas drawer. Open via the floating ☰; close via the drawer's own ☰. */
  .sidebar {
    position: fixed; top: 0; left: 0; height: 100%; width: 82vw; max-width: 300px;
    flex: none; z-index: 100; box-shadow: 6px 0 28px rgba(0,0,0,.6);
    transform: translateX(0);
  }
  body.sidebar-collapsed .sidebar {
    transform: translateX(-100%); width: 82vw; max-width: 300px;
    padding: 12px 14px 18px; border-right: 1px solid #262626; overflow-y: auto;
  }
  .sb-floatopen { display: none !important; }   /* no hamburger on mobile — keep it simple */
  body.sidebar-collapsed header { padding-left: 12px; }

  /* Collapsible header: a chevron in the title row hides the filter/search controls */
  .hdr-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    background: none; border: 1px solid #3c3c3c; border-radius: 6px;
    color: #cfd2d6; cursor: pointer; padding: 3px 7px; line-height: 0;
  }
  body.hdr-collapsed #qfRow,
  body.hdr-collapsed header .toprow { display: none; }
  .hdr-toggle svg { transition: transform .15s; }
  .hdr-toggle.open svg { transform: rotate(180deg); }

  /* Day Calendar → full-screen overlay with a close button (avoids squeezing the board) */
  .daycal { position: fixed; inset: 0; width: 100%; min-width: 0; height: 100%; z-index: 95; border-left: none; }
  .dc-close { display: inline-flex; align-items: center; }

  /* Header: let the + Task/+ Event group flow instead of absolutely overlapping */
  header { padding: 10px 12px 8px; }
  .toprow.toprow2 { position: static; }
  .hdr-create { display: none; }   /* the + FAB handles adding on mobile */
  #q { flex: 1 1 160px; width: auto; }

  /* Minimal task rows: checkbox + star + (title, notes, chips) */
  .task { gap: 10px; padding: 11px 14px; align-items: flex-start; cursor: pointer; }
  .task .btn-star { flex: 0 0 auto; width: 30px; height: 30px; }
  .m-check {
    flex: 0 0 auto; width: 28px; height: 28px; padding: 0; line-height: 0; margin-top: 1px;
    display: inline-flex; align-items: center; justify-content: center;
    background: none; border: 2px solid #5a5a5a; border-radius: 7px; color: #fff; cursor: pointer;
  }
  .m-check.on { background: var(--theme); border-color: var(--theme); color: #fff; }
  .m-check.pending { border-color: var(--theme); }   /* during the 250 ms grace */
  .task .title { font-size: 15px; }
  .task.done .title { color: #888; }
  .task-desc {
    font-size: 12.5px; color: #8b8f94; margin-top: 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .task .meta { margin-top: 5px; }

  /* List stepper: ‹  LIST NAME (n)  › */
  .list-tabs {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px; border-bottom: 1px solid #262626; background: #161616;
    position: sticky; top: 0; z-index: 4;
  }
  .lt-arrow {
    flex: 0 0 auto; width: 34px; height: 34px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    background: #232323; border: 1px solid #333; color: #cfd2d6; cursor: pointer; font-size: 18px; line-height: 1;
  }
  .lt-arrow:active { background: #2e2e2e; }
  .lt-name {
    flex: 1 1 auto; text-align: center; cursor: pointer;
    font-size: 15px; font-weight: 700; letter-spacing: .03em; color: var(--theme);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .lt-name .lt-count { color: #9aa0a6; font-weight: 500; margin-left: 6px; font-size: 12px; }

  /* Edit popup: stack fields vertically */
  .row2, .row-due { flex-direction: column; gap: 8px; }
  .row-due .fld { flex: 1 1 auto; }
  .fld-list, .fld-date, .fld-time { flex: 1 1 auto; }

  /* Floating add button */
  .fab {
    position: fixed; right: 18px; bottom: 22px; z-index: 92;
    width: 56px; height: 56px; border-radius: 50%;
    background: var(--theme); color: #fff; border: none;
    font-size: 30px; line-height: 1; cursor: pointer;
    box-shadow: 0 6px 20px rgba(0,0,0,.5), 0 0 0 1px color-mix(in srgb, var(--theme) 40%, transparent);
  }
}

/* List stepper, FAB and the header toggle are mobile-only — hidden on desktop */
@media (min-width: 821px) { .list-tabs, .fab, .hdr-toggle { display: none !important; } }
.fab { display: inline-flex; align-items: center; justify-content: center; }