/* calendar.css — month grid, chips, day-detail items. */

.calendar__head { align-items: center; }
.calendar__nav-group { display: flex; align-items: center; gap: var(--space-3); }
.calendar__month { font-size: var(--text-figure); font-weight: 700; min-width: 200px; text-align: center; }
.calendar__nav {
  width: 40px; height: 40px; border-radius: var(--radius-badge);
  font-size: 22px; color: var(--text-muted); background: var(--surface);
  border: 1px solid var(--border);
}
.calendar__nav:hover { background: var(--surface-2); color: var(--text); }
.calendar__head-actions { display: flex; align-items: center; gap: var(--space-2); }

/*
 * The note that owns up to what the grid is not showing.
 *
 * `flex-basis: 100%` rather than a place in the row: `.page-head` is a wrapping
 * flexbox, so without it the line squeezes in beside the nav buttons at wide
 * widths and drops below them at narrow ones. A row of its own reads the same
 * at every width.
 */
.calendar__hidden-note {
  flex-basis: 100%;
  margin: calc(var(--space-2) * -1) 0 0;
  font-size: var(--text-label);
}

.calendar__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  overflow: hidden;
}
.calendar__weekday {
  padding: 8px var(--space-2); text-align: left;
  font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-muted); background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}

.calendar__cell {
  position: relative;             /* anchors the to-do flag */
  min-height: 124px;              /* room for a to-do bar above the chips */
  padding: 6px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 4px;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease);
}
.calendar__cell:nth-child(7n) { border-right: none; }
.calendar__cell:hover { background: var(--surface-2); }
.calendar__cell--blank { background: var(--surface-2); cursor: default; }
.calendar__cell--blank:hover { background: var(--surface-2); }

/* The day number is a real button now (the cell holds tick-boxes, and a button
   may not contain buttons) — strip the control back to the text it was. */
.calendar__daynum {
  align-self: flex-start; padding: 0;
  font-size: 12px; font-weight: 600; color: var(--text-muted);
}
.calendar__cell.is-today .calendar__daynum {
  background: var(--elke); color: #fff; border-radius: 50%;
  width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center;
}

.calendar__chips { display: flex; flex-direction: column; gap: 3px; overflow: hidden; }

/* The chip carries three facts on three channels, and only one of them is a
   colour she has to learn:

     COLOUR — does this post fill the day? (weight-feed / weight-light)
     SHAPE  — how far is it?               (plan-proposed / plan-planned / plan-done)
     RAIL   — whose is it?                 (account-chip-*)

   The status used to be a 7px dot in eight colours here. It is gone: eight
   answers to "moet ik hier nog iets doen" is seven too many at month scale, and
   the exact word is one click away in the day panel, which now spells out the
   whole pipeline instead of naming a single step. */
.calendar__chip {
  display: flex; align-items: center; gap: 4px;
  padding: 2px 5px 2px 4px; border-radius: var(--radius-badge);
  /* A transparent hairline on three sides so a proposed chip, the only one with
     a real dashed border, sits at exactly the same height as the solid ones
     stacked above and below it. */
  border: 1px solid transparent;
  border-left: 3px solid transparent;
  font-size: 12px; line-height: 1.5; white-space: nowrap; overflow: hidden;
  background: var(--surface-2); color: var(--text-muted);
}

/* ---- the rail: whose post this is ---- */
.calendar__chip.account-chip-elke { border-left-color: var(--elke); }
.calendar__chip.account-chip-sunkissed { border-left-color: var(--sunkissed); }
/* MOOD had no rule at all here (nor in .dayitem below) since the account was
   added, so a MOOD post rendered as an unstyled chip with no accent. */
.calendar__chip.account-chip-mood { border-left-color: var(--mood); }

/* ---- the fill: does this post take the day? ----
   Two colours for four types, because the colour answers the capacity question
   and not the identity question — the icon answers that one. A chip with no
   type keeps the neutral ground set above: no type, no claim, the same refusal
   dayCapacity makes when it returns `onbekend`. */
.calendar__chip.weight-feed { background: var(--type-feed); color: var(--type-feed-on); }
.calendar__chip.weight-light { background: var(--type-light); color: var(--type-light-on); }

/* ---- the shape: how far along is it? ----

   Voorstel gedaan — pale and outlined. Nothing is booked; this one can still
   fall through. Three sides only, never the `border-color` shorthand: that
   would also repaint the left edge and quietly take the account rail away,
   which it did once, and the MOOD reminder chip lost its pink until a
   screenshot caught it. The hue stays, because a proposed reel already counts
   towards dayCapacity and a colourless chip under a cell washed "vol" would be
   the grid contradicting itself. */
.calendar__chip.plan-proposed {
  color: var(--text);
  border-top: 1px dashed var(--type-line);
  border-right: 1px dashed var(--type-line);
  border-bottom: 1px dashed var(--type-line);
}
.calendar__chip.plan-proposed.weight-feed { background: var(--type-feed-soft); }
.calendar__chip.plan-proposed.weight-light { background: var(--type-light-soft); }
/* A proposal with no type gets no fill either, or the surface-2 ground would
   read as one of the two colours seen through the dashed outline. */
.calendar__chip.plan-proposed:not(.weight-feed):not(.weight-light) {
  background: transparent; color: var(--text-muted);
}

/* Gepost and beyond: the work is out of her hands. Struck through plus a tick —
   the same language as a ticked-off to-do bar and a lost deal's pill, where it
   already means "nothing left to do here". Keyed on planState, which projects
   everything from `posted` onward onto one answer, so the line does not jump
   back off when she moves the post to Klaar voor factuur. */
.calendar__chip.plan-done { opacity: 0.62; }
.calendar__chip.plan-done .calendar__chip-title {
  text-decoration: line-through; text-decoration-thickness: 1px;
}

.calendar__chip-icon { font-size: 11px; flex: none; }
.calendar__chip-title { overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
/* Pinned right, and it survives the phone breakpoint that hides the title:
   "is dit al gepost?" is exactly the question a 46px cell still has to answer. */
.calendar__chip-mark { flex: none; font-size: 10px; font-weight: 700; margin-left: auto; }
.calendar__more { font-size: 11px; color: var(--text-muted); padding-left: 4px; }

/* ---- the legend: what the two colours and three shapes mean ----
   Colour coding explained nowhere is colour coding nobody reads, which is what
   sent the first version back. It sits UNDER the grid rather than above it: you
   look it up once, you scan the month every day. */
.calendar__legend {
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5);
  margin-top: var(--space-3); padding: var(--space-3);
  border: 1px solid var(--border); border-radius: var(--radius-card);
  background: var(--surface);
  font-size: var(--text-label); color: var(--text-muted);
}
.calendar__legend-group {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3);
}
.calendar__legend-title {
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-subtle);
}
.calendar__legend-item { display: inline-flex; align-items: center; gap: 6px; }
/* A miniature of the real chip rather than an abstract square: a legend has to
   be wrong-proof, and the cheapest way is to draw the thing itself. */
.calendar__legend-swatch {
  width: 26px; height: 13px; border-radius: 3px; flex: none;
  border: 1px solid transparent;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700; line-height: 1;
}
.calendar__legend-swatch.weight-feed { background: var(--type-feed); color: var(--type-feed-on); }
.calendar__legend-swatch.weight-light { background: var(--type-light); color: var(--type-light-on); }
/* The shape row is drawn in ONE colour on purpose — it is demonstrating shape,
   and a second hue in it would read as a fourth thing to learn. */
.calendar__legend-swatch.plan-proposed {
  background: var(--type-feed-soft);
  border-top-style: dashed; border-right-style: dashed; border-bottom-style: dashed;
  border-color: var(--type-line);
}
.calendar__legend-swatch.plan-planned { background: var(--type-feed); }
.calendar__legend-swatch.plan-done {
  background: var(--type-feed); color: var(--type-feed-on); opacity: 0.62;
}

/* ---- To-do's: content maken / preview naar klant ----
   The one thing in the grid that is solid rather than tinted. Everything else
   in a day cell is a pastel account colour, so "solid block" is unambiguous
   even at a glance across a full month. */

/* ---- Day capacity: is there still room here? ----
   Declared BEFORE the to-do rules below, which is the whole point: the cell
   background is a single slot and open work outranks a booked day. A full day
   whose to-do is still open shows the to-do tint, not the capacity wash.

   Only `vol` gets a wash. `ruimte` is said in words at the bottom of the cell
   (.calendar__room) because it survives that override, and because at month
   scale "where can I still sell?" is a reading question over a handful of
   cells rather than a scanning question over all 35. `onbekend` gets nothing
   at all — there are posts here but none of them says what it is, and shading
   the cell either way would be the view inventing a fact. */
.calendar__cell.cap-vol { background: var(--cap-full); }
.calendar__cell.cap-vol:hover { background: var(--surface-2); }

.calendar__room {
  margin-top: auto; padding-left: 2px;
  font-size: 10px; line-height: 1.4; color: var(--text-subtle);
  text-transform: uppercase; letter-spacing: 0.04em;
}

.calendar__cell.has-open-todo { background: var(--todo-cell); }
.calendar__cell.has-open-todo:hover { background: var(--surface-2); }
.calendar__cell.has-late-todo { background: var(--todo-cell-late); }

/* Corner flag: the month-scale signal. At a glance across 35 cells the bars
   are legible but the flags are countable. */
.calendar__flag {
  position: absolute; top: 0; right: 0;
  width: 0; height: 0;
  border-top: 14px solid var(--todo-ink);
  border-left: 14px solid transparent;
}
.calendar__cell.has-late-todo .calendar__flag { border-top-color: var(--todo-late); }

.calendar__todos { display: flex; flex-direction: column; gap: 3px; }
.calendar__todo {
  display: flex; align-items: center; gap: 4px;
  padding: 3px 6px 3px 3px; border-radius: var(--radius-badge);
  background: var(--todo-ink); color: var(--todo-on-ink);
  font-size: 11px; line-height: 1.4; white-space: nowrap; overflow: hidden;
}
.calendar__todo.is-late { background: var(--todo-late); color: var(--todo-on-late); }
/* Done stays on the day rather than vanishing: a cell that empties itself once
   ticked reads as "nothing was ever planned here". It just stops shouting. */
.calendar__todo.is-done {
  background: transparent; color: var(--text-subtle);
  border: 1px dashed var(--border-strong); padding-block: 2px;
}
.calendar__todo.is-done .calendar__todo-label { text-decoration: line-through; }

.calendar__todo-box {
  flex: none; width: 15px; height: 15px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid currentColor; border-radius: 3px;
  font-size: 10px; line-height: 1; color: inherit;
  transition: background var(--duration-fast) var(--ease);
}
.calendar__todo-box:hover { background: rgba(255, 255, 255, 0.22); }
.calendar__todo.is-done .calendar__todo-box:hover { background: var(--surface-2); }
.calendar__todo-box:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; }

.calendar__todo-icon { font-size: 10px; flex: none; }
.calendar__todo-label {
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
  font-size: 10px; flex: none;
}
.calendar__todo-post { overflow: hidden; text-overflow: ellipsis; opacity: 0.85; }

/* ---- Day panel: the "Te doen" block above the post cards ---- */
.daytodos { display: flex; flex-direction: column; gap: var(--space-2); }
.daytodos__title {
  font-size: var(--text-label); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted);
}
.daytodo {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-3); border-radius: var(--radius-card);
  background: var(--todo-ink); color: var(--todo-on-ink);
}
.daytodo.is-late { background: var(--todo-late); color: var(--todo-on-late); }
.daytodo.is-done {
  background: var(--surface); color: var(--text-muted);
  border: 1px solid var(--border);
}
.daytodo__icon { font-size: 18px; line-height: 1.2; flex: none; }
.daytodo__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.daytodo__label { font-weight: 700; }
.daytodo.is-done .daytodo__label { text-decoration: line-through; }
/* .text-muted would resolve to the page grey on a near-black card. */
.daytodo__post { color: inherit; opacity: 0.8; font-size: var(--text-label); }
.daytodo__state { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.7; }
.daytodo__actions { display: flex; flex-direction: column; gap: var(--space-2); flex: none; }
/* Both button styles are drawn for a light surface. On a to-do card they have
   to borrow the card's own two colours instead — the brand purple of
   .btn--primary sitting on the red "te laat" card was the one combination in
   the app where two loud colours fought over the same 90px. */
.daytodo:not(.is-done) .btn--ghost {
  color: inherit; border-color: currentColor; background: transparent;
}
.daytodo:not(.is-done) .btn--ghost:hover { background: rgba(127, 127, 127, 0.22); }
.daytodo:not(.is-done) .btn--primary {
  background: var(--todo-on-ink); color: var(--todo-ink); border-color: transparent;
}
.daytodo.is-late .btn--primary {
  background: var(--todo-on-late); color: var(--todo-late);
}
.daytodo:not(.is-done) .btn--primary:hover { opacity: 0.88; }

/* ---- Day detail items ---- */
.panel--day .panel__body { display: flex; flex-direction: column; gap: var(--space-3); }
.dayitem {
  border: 1px solid var(--border); border-left-width: 4px;
  border-radius: var(--radius-card); padding: var(--space-3); background: var(--surface);
  display: flex; flex-direction: column; gap: var(--space-2);
}
.dayitem.account-accent-elke { border-left-color: var(--elke); }
.dayitem.account-accent-sunkissed { border-left-color: var(--sunkissed); }
.dayitem.account-accent-mood { border-left-color: var(--mood); }
.dayitem__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.dayitem__title { font-weight: 600; }
.dayitem__meta { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.dayitem__value { font-size: var(--text-label); }
.dayitem__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: 2px; }

/* ---- The pipeline, spelled out on the card ----

   The grid groups eight statuses into three shapes, which is the right trade at
   month scale and the wrong one the moment she has actually clicked into a day.
   This is where the projection is paid back: the whole line, every step named,
   the current one filled. The pill above still says the exact status; this says
   what is behind it and what is next, which is what turns the "Markeer als …"
   button below from a leap into a step.

   Every step in PIPELINE_ORDER gets a node — seven, not the five it is tempting
   to draw. A post sitting on Statistieken gedeeld with no node of its own would
   be a card that cannot show its own state. */
.dayitem__pipeline {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 3px 0;
  font-size: 11px;
}
.dayitem__step {
  padding: 2px 6px; border-radius: var(--radius-badge);
  background: var(--surface-2); color: var(--text-subtle);
  white-space: nowrap;
}
/* Behind her: the same struck-through "done with this" language as a ticked-off
   to-do and a posted chip, so it never has to be learned twice. */
.dayitem__step.is-done { color: var(--text-muted); text-decoration: line-through; }
/* Deliberately colourless. The pill two lines above already carries the status
   in its own colour; this node is answering "where am I in the line", and
   giving it the status hue as well would put the eight-colour language straight
   back into the panel that was supposed to replace it. Ink block, like a to-do
   bar: in this app a solid dark block means "this one, now". */
.dayitem__step.is-now {
  background: var(--text); color: var(--surface);
  font-weight: 700;
}
.dayitem__sep { color: var(--border-strong); padding: 0 3px; }

/* The capacity line above the "+ Post toevoegen" button. Muted, never a warning
   colour: it tells her what is already there, it does not object to anything. */
.panel__foot .calendar__capacity-note {
  margin-bottom: var(--space-2);
  font-size: var(--text-label); color: var(--text-muted); text-align: center;
}

/* ---- Year view: twelve mini-months, heatmap-style dots ---- */
.yearcal__wrap { padding: var(--space-4); }
.yearcal {
  display: grid; gap: var(--space-4);
  /* auto-fit keeps three or four months per row without a media query ladder. */
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.yearcal__month-name {
  font-size: var(--text-label); font-weight: 600; text-transform: capitalize;
  color: var(--text-muted); margin-bottom: var(--space-2);
}
.yearcal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.yearcal__wd {
  font-size: 9px; color: var(--text-subtle); text-align: center;
  text-transform: uppercase; padding-bottom: 2px;
}
.yearcal__day {
  position: relative; aspect-ratio: 1; min-width: 0; padding: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  background: var(--surface-2); border: 1px solid transparent;
  border-radius: 3px; font: inherit; cursor: default;
  transition: transform var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease);
}
.yearcal__day.is-blank { background: transparent; }
.yearcal__daynum { font-size: 9px; line-height: 1; color: var(--text-subtle); font-variant-numeric: tabular-nums; }
.yearcal__day.has-posts { background: var(--surface); border-color: var(--border-strong); cursor: pointer; }
/* At 20px there is one border and the to-do ring already owns it, so a full day
   speaks through its ground instead. */
.yearcal__day.is-full { background: var(--cap-full); }
.yearcal__day.has-posts .yearcal__daynum { color: var(--text); font-weight: 600; }
.yearcal__day.has-posts:hover { transform: scale(1.18); border-color: var(--text-subtle); z-index: 1; }
.yearcal__day.has-posts:focus-visible { outline: 2px solid var(--elke); outline-offset: 1px; z-index: 1; }
.yearcal__day.is-today { border-color: var(--elke); }

/* An open to-do at mini-month scale: a solid ring, the only filled outline in
   the grid. A day can be both today and carrying a to-do, and at 20px there is
   only one border to spend — the to-do takes it, because it is the thing that
   needs doing. "Today" keeps its identity on the number instead (rule below),
   so neither signal is lost. */
.yearcal__day.has-open-todo {
  border-color: var(--todo-ink); border-width: 2px; cursor: pointer;
}
.yearcal__day.has-late-todo { border-color: var(--todo-late); }
.yearcal__day.has-open-todo .yearcal__daynum { color: var(--text); font-weight: 700; }
.yearcal__day.is-today .yearcal__daynum { color: var(--elke); font-weight: 700; }

.yearcal__dots { display: flex; gap: 1px; align-items: center; justify-content: center; }
.yearcal__dot { width: 4px; height: 4px; border-radius: 50%; background: var(--text-subtle); flex: none; }

.yearcal__legend {
  display: flex; flex-wrap: wrap; gap: var(--space-3);
  margin-top: var(--space-4); padding-top: var(--space-3);
  border-top: 1px solid var(--border);
  font-size: var(--text-label); color: var(--text-muted);
}
.yearcal__legend-item { display: inline-flex; align-items: center; gap: 6px; }
.yearcal__legend .yearcal__dot { width: 7px; height: 7px; }


@media (max-width: 767px) {
  /* Two months per row stays legible on a phone; the dots are the signal. */
  .yearcal { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-3); }
  .yearcal__daynum { font-size: 8px; }

  /* A ~46px column cannot hold "CONTENT · Reel L'Oréal". Drop to the box and
     the icon — still a solid block, still countable, still tappable. The full
     label is one tap away in the day panel. */
  .calendar__todo-label, .calendar__todo-post { display: none; }
  .calendar__todo { padding: 3px; justify-content: center; }
  .calendar__todo-box { width: 14px; height: 14px; }

  /* The type icon is what she scans for at this width; the title is one tap
     away in the day panel. The rail keeps saying whose post it is. */
  .calendar__chip-title { display: none; }
  .calendar__chip { justify-content: center; padding-right: 4px; }
  .calendar__room { font-size: 9px; letter-spacing: 0; }

  /* Stack the panel actions once the card is narrow. */
  .daytodo { flex-wrap: wrap; }
  .daytodo__actions { flex-direction: row; width: 100%; }
}