/* Planning module styles — only what's not in shared/styles.css.
   Keep specificity low; rely on shared tokens. */

/* Soort chip — sits in its own column. Soort is the primary categorical
   signal on a planning row, so the chip reads as strong text on a soft
   tinted pill (ink-900 on surface-alt). Omschrijving stays muted next to it. */
.pln-soort {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-900);
  background: var(--surface-alt);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}

/* ── Detail page ─────────────────────────────────────────────── */

/* Status-dot in the status-pill dropdown menu — mirrors svc-status-dot. */
.pln-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 8px;
  flex-shrink: 0;
}

/* Time input — matched to the editable-text / inline-select visual pattern:
   padding + negative margin so the visible "09:00" sits flush with the dd's
   left edge (just like InlineDate/InlineSelect values). Without this, .cell-edit
   defaults to width:100% + text-align:right and the time appears far-right. */
.cell-edit.pln-time {
  width: auto;
  min-width: 56px;
  text-align: left;
  font-variant-numeric: tabular-nums;
  padding: 2px 6px;
  margin: -2px -6px;
}
.pln-time-readonly { font-variant-numeric: tabular-nums; }

/* Betreft link in connected state — leest als gewone dd-waarde (ink-700,
   geen onderstreping) zodat de meta-kolom rustig blijft. Op hover komt er
   een subtiele ink-300 underline + ink-900 tekst, en de pen-icon ernaast
   verschijnt (svc-order-chosen pattern). */
.pln-betref-link {
  color: var(--ink-700);
  font-weight: 500;
  text-decoration: none;
  transition: color .12s ease, text-decoration-color .12s ease;
}
.pln-betref-link:hover {
  color: var(--ink-900);
  text-decoration: underline;
  text-decoration-color: var(--ink-300);
  text-underline-offset: 3px;
}

/* In de dagweergave bevat de toolbar-card alleen de toolbar — geen
   tabel of paginatie eronder. De .toolbar heeft normaal een border-
   bottom als scheiding van de tabel; die halen we hier weg zodat de
   card netjes onderaan dichtloopt. De afspraak-kaarten staan als
   losse rijen onder deze card op de pagina-bg. */
.card.pln-toolbar-only .toolbar {
  border-bottom: 0;
}
.card.pln-toolbar-only {
  margin-bottom: 12px;
  /* .card heeft normaal overflow:hidden zodat tabel-randen netjes binnen
     de afgeronde hoeken vallen. In dag-weergave bevat de card alleen de
     toolbar — filter-chip dropdowns moeten naar beneden uit de card
     kunnen klappen, dus overflow:visible. */
  overflow: visible;
}

/* ── Day view (planning-day.jsx) ────────────────────────────────
   Afspraken gegroepeerd per dag. Dag-header met datum, daaronder
   horizontale kaarten. Linkerrand is de status-kleur, kleine icon-
   tegel ernaast geeft soort visueel weer. */
.pln-day { padding: 8px 4px 16px; }
.pln-day-empty {
  padding: 48px 24px;
  text-align: center;
  color: var(--ink-400);
  font-size: 13px;
  font-style: italic;
}

.pln-day__group { margin-top: 16px; }
.pln-day__group:first-child { margin-top: 4px; }

.pln-day__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 4px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--ink-500);
}
.pln-day__head svg { color: var(--ink-400); }
.pln-day__count {
  margin-left: auto;
  font-weight: 500;
  color: var(--ink-400);
  letter-spacing: 0;
  text-transform: none;
}

.pln-day__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pln-day-card {
  position: relative;
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 18px 14px 22px;
  background: white;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: var(--ink-700);
  transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
  overflow: hidden;
}
.pln-day-card:hover,
.pln-day-card.is-context {
  border-color: var(--border);
  box-shadow: 0 4px 14px rgba(15, 22, 42, 0.06);
}
.pln-day-card.is-context {
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 2px var(--accent-blue-soft);
}
.pln-day-card:active { transform: scale(0.997); }

.pln-day-card__bar {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 4px;
  background: var(--pln-day-bar, var(--accent-blue));
  border-top-left-radius: var(--radius-md);
  border-bottom-left-radius: var(--radius-md);
}

.pln-day-card__icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pln-day-card__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pln-day-card__title-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.pln-day-card__id {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
}
.pln-day-card__klant {
  font-size: 13px;
  font-weight: 500;
  color: var(--accent-blue);
}
.pln-day-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 12px;
  color: var(--ink-500);
}
.pln-day-card__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.pln-day-card__meta-item svg { color: var(--ink-400); flex-shrink: 0; }

.pln-day-card__soort {
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-500);
  background: var(--surface-alt);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  padding: 4px 10px;
  white-space: nowrap;
}

/* Items table on the paper — same spec as offerte's canonical .items-head /
   .items-row (padding, font-weight, hover) but with a 2-column grid since
   planning has no qty/price/korting/totaal. De divider erboven krijgt geen
   bottom-margin (zie planning-detail.jsx) zodat de strip strak tegen de
   divider zit, met de canonical 14px padding eromheen — zelfde ritme als
   service-detail. */
.pln-items-head {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) 220px;
  gap: 12px;
  padding: 14px 15px;
  border-bottom: 1px solid var(--border-line);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--ink-500);
}

.pln-items-row {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) 220px;
  gap: 12px;
  padding: 16px 15px;
  border-bottom: 1px solid var(--border-line);
  align-items: start;
  background: white;
  font-size: 13px;
  color: var(--ink-700);
  transition: background .12s ease;
}
.pln-items-row:hover { background: var(--surface-muted); }
.pln-items-row__locatie {
  color: var(--ink-500);
  font-size: 12px;
  align-self: start;
  padding-top: 1px;
}

.pln-items-row__remove {
  background: none;
  border: 0;
  padding: 4px;
  margin-left: 4px;
  border-radius: var(--radius);
  color: var(--ink-400);
  cursor: pointer;
  opacity: 0;
  transition: opacity 150ms ease, color 150ms ease, background-color 150ms ease;
}
.pln-items-row:hover .pln-items-row__remove { opacity: 1; }
.pln-items-row__remove:hover { color: var(--danger); background: var(--surface-alt); }

/* ── Drawer paper overrides ─────────────────────────────────────
   The drawer reuses .paper-quote* (offerte's paper styling) so it
   feels like the same document family.

   Mirrors the .drawer--service pattern: paper fills the drawer body
   AND extends behind the floating footer, so a sparse afspraak still
   reads as a tall sheet of paper rather than a half-empty card. */
.drawer--planning .drawer__body {
  /* No bottom padding — the paper goes all the way down. The paper itself
     has internal padding so its content doesn't hide behind the footer. */
  padding-bottom: 0;
}
.drawer--planning .drawer__footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  background: var(--surface);
}
.drawer--planning .paper-quote {
  min-height: 100%;
  box-sizing: border-box;
  /* Bottom padding clears the floating footer (~64px tall) so content
     never hides under it. */
  padding-bottom: 96px;
  /* The bottom edge sits behind the footer — square it off so we don't
     get a half-radius peeking out. */
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* Items table only has 2 columns here (artikel + locatie), so we
   override grid-template-columns on the modifier classes. */
.pln-paper__items-head,
.pln-paper__items-row {
  grid-template-columns: minmax(140px, 1fr) auto;
}
.pln-paper__items-locatie {
  color: var(--ink-500);
  font-size: 12px;
  white-space: nowrap;
  align-self: start;
  padding-top: 1px;
}

/* ────────────────────────────────────────────────────────
   Unified field hover/focus on the planning detail page.
   Mirrors the service + offerte papers: every editable
   field shares the same treatment.
     • rest  — transparent
     • hover — soft surface-alt block, no border edge
     • focus — surface bg + soft accent ring
   Scoped via .pln-detail-page.
   ──────────────────────────────────────────────────────── */
.pln-detail-page .inline-select,
.pln-detail-page .inline-combo,
.pln-detail-page .editable-text,
.pln-detail-page .editable-textarea,
.pln-detail-page .cell-edit {
  border-color: transparent;
}
.pln-detail-page .inline-select:hover,
.pln-detail-page .inline-combo:hover,
.pln-detail-page .editable-text:hover,
.pln-detail-page .editable-textarea:hover,
.pln-detail-page .cell-edit:hover {
  background: var(--surface-alt);
  border-color: transparent;
  box-shadow: none;
}
.pln-detail-page .inline-select.is-open,
.pln-detail-page .inline-select:focus-visible,
.pln-detail-page .inline-combo:focus-within,
.pln-detail-page .editable-text:focus,
.pln-detail-page .editable-textarea:focus,
.pln-detail-page .cell-edit:focus {
  background: var(--surface);
  border-color: transparent;
  box-shadow: 0 0 0 2px var(--accent-blue-soft);
  outline: none;
}