/* File: tadaysWeb/src/features/tasks/calendar/css/calendar.css */
/* CALENDAR -- the week grid, the day columns, the slots, the nav bar and
   the month picker.
   Depends on: --row-h / --row-gap / --col-gap / --day-rows / --band-rows /
   --fade-end / --fade-alpha / --today-tint, all declared in base.css.
   view.js toggles body.view-agenda, body.two-line and body.condensed, and
   sets an inline max-width on .row when the view is locked narrower than
   the space allows. */

/* ============ shell ============ */

.calendar { flex: 1 1 auto; min-width: 0; }
.row { display: flex; gap: var(--col-gap); }
.day { flex: 1 1 0; min-width: 0; }

/* padding is reserved on EVERY day header, so today's tint and bold add no
   height. The old ::after underline grew one column by 5px and pushed its
   bands, its Completed row and everything below it out of line with the
   other six. */
.day-name {
  font-size: 12px; font-weight: 500; text-align: center;
  color: var(--text-muted); margin-bottom: 6px;
  padding: 1px 0; border-radius: 999px;
}
.day.is-today .day-name {
  color: var(--text);
  font-weight: 600;
  background: var(--today-tint);
}

/* if you want the rule back, this version costs no layout:
.day.is-today .day-name { box-shadow: 0 2px 0 var(--accent-border); }
*/

/* ============ scroll boxes ============ */

/* row counts live in variables so two-line mode can shrink them without
   touching this rule -- but dayRows() / bandRows() in render.js decide how
   many slots actually get drawn, and the two must agree */
.day-scroll {
  height: calc((var(--row-h) + var(--row-gap)) * var(--day-rows));
  overflow-y: auto; overflow-x: hidden;
  scrollbar-width: thin;
}
.band-scroll {
  height: calc((var(--row-h) + var(--row-gap)) * var(--band-rows));
  overflow-y: auto; overflow-x: hidden;
  scrollbar-width: thin;
}
.agenda .day-scroll,
.agenda .band-scroll { height: auto; overflow: visible; }

.band-label {
  font-size: 10px; letter-spacing: .04em; color: var(--text-muted);
  border-top: 1px solid var(--border);
  padding: 5px 0 4px; margin-top: 2px;
}
.band-label.first { border-top: none; margin-top: 0; padding-top: 0; }

/* ============ slots ============ */

.slot {
  height: var(--row-h); display: flex; align-items: center; gap: 4px;
  padding: 0 5px; margin-bottom: var(--row-gap); font-size: 11px;
  border: 1px solid var(--border); border-radius: 4px;
  color: var(--text-muted);
  white-space: nowrap; overflow: hidden;
  transition: background .12s, border-color .12s, opacity .12s;
}
.slot.filled {
  position: relative;
  cursor: pointer; color: var(--text);
}

/* left-edge wash. Masked rather than a gradient to `transparent`: CSS
   interpolates a hex toward transparent BLACK, which greys the midpoint on
   the lighter colours. A solid fill under a mask stays clean. Fading the
   mask (not to white) also means hover, .dimmed and drop-target still show
   through. */
.slot.filled::before {
  content: ""; position: absolute; inset: 0;
  background: var(--task-color);
  opacity: var(--fade-alpha);
  border-radius: inherit;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, #000, transparent var(--fade-end));
          mask-image: linear-gradient(to right, #000, transparent var(--fade-end));
}
.slot.filled > * { position: relative; }   /* keep content above the wash */

.slot-body {
  flex: 1; min-width: 0; display: flex; align-items: center;
  gap: 4px; overflow: hidden;
}
.slot .label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* hidden in one-line mode -- there it only appears in the tooltip */
.sub-next { display: none; }

.slot.next { border-style: dashed; border-color: var(--accent-border); }
.slot.drop-target { border-color: #185fa5; border-style: solid; background: #eef5fc; }
.slot.dimmed { opacity: .2; }
/* a running timer stays findable through a colour filter */
.slot.dimmed:has(.slot-stop) { opacity: .55; }
.slot-note { font-size: 10px; color: var(--text-muted); flex: 0 0 auto; }
.task.dragging, .slot.dragging { opacity: .4; }

/* same 14px box as the check, content centred in it, so the two line up
   on their middles rather than on the glyph's baseline */
.slot-miss {
  flex: 0 0 auto; width: 14px; height: 14px; padding: 0; line-height: 1; cursor: pointer;
  appearance: none; border: none; background: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; color: var(--text-muted); opacity: .45;
  transition: opacity .12s, color .12s;
}
.slot-miss > * { display: block; }
.slot.filled:hover .slot-miss { opacity: .75; }
.slot-miss:hover { opacity: 1; color: var(--text); }

.slot-stop {
  flex: 0 0 auto; appearance: none; border: none; background: none;
  cursor: pointer; padding: 0; line-height: 1; color: var(--text-muted);
  /* match check + no-circle + their gap, so the label never shifts */
  width: 32px;
  justify-content: center;
  display: flex; align-items: center; justify-content: flex-start;
}
.slot-stop i { font-size: 14px; }
.slot-stop:hover { color: var(--text); }

.check.fade-in, .slot-miss.fade-in { animation: btn-in .15s ease-out; }
@keyframes btn-in { from { opacity: 0; } }

.check {
  flex: 0 0 auto; width: 14px; height: 14px; padding: 0; cursor: pointer;
  border: 1px solid var(--text-muted); border-radius: 50%;
  background: transparent; color: var(--text);
  font-size: 9px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  /* the hold is the gesture: no text selection, no touch callout */
  touch-action: manipulation;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}
.check:hover { border-color: var(--text); background: var(--surface-alt); }
.check.done { border-color: var(--text); }

/* hold-to-repeat (checkhold.js). --press-ms is set from PRESS_MS, so the
   fill completes at the moment the hold arms */
.check.pressing { animation: check-fill var(--press-ms, 450ms) linear forwards; }
@keyframes check-fill {
  from { box-shadow: inset 0 0 0 0 var(--text-muted); }
  to   { box-shadow: inset 0 0 0 7px var(--text-muted); }
}
/* armed: the circle goes away and the repeat icon takes its place at the
   same 14px, so you see what release will do */
.check.armed,
.check.armed:hover {
  border-color: transparent; background: transparent; box-shadow: none;
  color: var(--text);
}
.check.armed i { font-size: 14px; line-height: 1; display: block; }

@media (prefers-reduced-motion: reduce) {
  .check.pressing { animation: none; background: var(--surface-alt); }
}

/* ============ two-line cards ============ */

/* overriding the row variables here resizes the scroll boxes above at the
   same time, so the column height stays whole */
body.two-line {
  --row-h: 40px;
  --day-rows: 7;
  --band-rows: 4;
}
body.two-line .slot-body {
  flex-direction: column; align-items: stretch;
  justify-content: center; gap: 1px;
}
body.two-line .sub-next {
  display: block; font-size: 9px; color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* nothing to show underneath: give the title both lines instead */
body.two-line .slot.filled:not(.has-next) .label {
  white-space: normal; line-height: 1.18;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}

/* ============ condensed text ============ */

/* font-stretch only does something on a face with a real width axis. For a
   proper condensed look, load Roboto Flex and add the font-family line. */
body.condensed .slot,
body.condensed .day-name { font-stretch: 87.5%; letter-spacing: -.005em; }
body.condensed .slot { font-size: 11.5px; }
/* body.condensed .slot { font-family: "Roboto Flex", system-ui, sans-serif; } */

/* ============ completed row ============ */

.done-row {
  width: 100%; margin-top: 4px; font: inherit; font-size: 10px;
  padding: 4px 5px; cursor: pointer; text-align: left;
  color: var(--text-muted); background: transparent;
  border: 1px solid transparent; border-top: 1px solid var(--border);
  border-radius: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.done-row:hover { color: var(--text); background: var(--surface-alt); }
.done-row.empty { opacity: .45; }

/* ============ agenda ============ */

/* view.js decides this now, not the viewport -- the task panel and Far Out
   both eat width the media queries couldn't see */
.agenda { display: none; max-height: 520px; overflow-y: auto; padding-right: 4px; }
.agenda .day { margin-bottom: 14px; }
.agenda .day-name { text-align: left; }

body.view-agenda #week { display: none; }
body.view-agenda .agenda { display: block; }

/* ============ nav bar ============ */

.cal-nav {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 10px;
  margin-bottom: 10px; padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.nav-left   { display: flex; align-items: center; gap: 6px; min-width: 0; }
.nav-center { display: flex; justify-content: center; min-width: 0; }
.nav-right  { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; }

.cal-nav .icon-btn:disabled { opacity: .3; cursor: default; }
.cal-range { font-size: 12px; color: var(--text); white-space: nowrap; }

/* hidden rather than removed: dropping out of flow would slide the arrows
   and the month button sideways every time you paged onto the current week */
.nav-today { font-size: 11px; padding: 4px 10px; visibility: hidden; }
.nav-today.show { visibility: visible; }

.view-switch { display: flex; }
.vbtn {
  font: inherit; font-size: 10px; padding: 4px 8px; cursor: pointer;
  background: transparent; color: var(--text-muted);
  border: 1px solid var(--border); border-left: none;
}
.vbtn:first-child { border-left: 1px solid var(--border); border-radius: 5px 0 0 5px; }
.vbtn:hover { background: var(--surface-alt); color: var(--text); }
.vbtn.on { background: var(--text); color: var(--surface); border-color: var(--text); }

/* agenda is a different layout, not a smaller day count -- sit it apart so
   it doesn't read as the next step down from 3d */
.vbtn-agenda { margin-left: 6px; border-left: 1px solid var(--border); border-radius: 5px; }

/* why you asked for 7 and got 3 */
.view-eff { font-size: 10px; color: var(--text-muted); white-space: nowrap; }

.avatar-btn {
  width: 26px; height: 26px; flex: 0 0 auto; padding: 0; cursor: pointer;
  border: 1px solid var(--border); border-radius: 50%;
  background: var(--surface-alt); color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
}
.avatar-btn:hover { color: var(--text); }
.avatar-btn i { font-size: 14px; }

/* ============ month picker ============ */

.month-pop { width: 212px; padding: 10px; }
.month-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px; margin-bottom: 8px;
}
.micon {
  width: 20px; height: 20px; padding: 0; cursor: pointer;
  border: 1px solid var(--border); border-radius: 4px;
  background: transparent; color: var(--text-muted); font-size: 12px;
  display: flex; align-items: center; justify-content: center;
}
.micon:hover { background: var(--surface-alt); }
.month-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.mhead { font-size: 9px; color: var(--text-muted); text-align: center; padding-bottom: 3px; }
.mcell {
  position: relative; height: 24px; cursor: pointer; padding: 0;
  font: inherit; font-size: 11px; color: var(--text);
  background: transparent; border: 1px solid transparent; border-radius: 4px;
}
.mcell:hover { background: var(--surface-alt); }
.mcell.outside { color: var(--text-muted); opacity: .45; }
.mcell.inweek { background: var(--surface-alt); border-color: var(--border); }
.mcell.mtoday { font-weight: 700; border-color: var(--text); }
.mdot {
  position: absolute; left: 50%; bottom: 2px; transform: translateX(-50%);
  width: 3px; height: 3px; border-radius: 50%; background: var(--text-muted);
}