/* components.css — buttons, fields, badges, pills, toasts, confirm, empty state. */

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 38px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-badge);
  font-size: var(--text-body);
  font-weight: 500;
  border: 1px solid transparent;
  transition: background var(--duration-fast) var(--ease),
    border-color var(--duration-fast) var(--ease),
    transform var(--duration-fast) var(--ease);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.55; cursor: default; }

.btn--primary { background: var(--elke); color: #fff; }
.btn--primary:hover:not(:disabled) { background: #6B4BAB; }

.btn--ghost { background: transparent; border-color: var(--border-strong); color: var(--text); }
.btn--ghost:hover:not(:disabled) { background: var(--surface-2); }

.btn--danger { background: var(--danger); color: #fff; }
.btn--danger:hover:not(:disabled) { background: #A8350A; }

.btn--icon {
  min-height: 38px; min-width: 38px; padding: 0;
  border-radius: var(--radius-badge);
  font-size: 17px; color: var(--text-muted);
}
.btn--icon:hover { background: var(--surface-2); color: var(--text); }

.btn--block { width: 100%; }
.btn--sm { min-height: 30px; padding: 0 var(--space-3); font-size: var(--text-label); }
/* Same trap as `.field[hidden]` below: `display: inline-flex` beats the UA's
   `[hidden] { display: none }`, so `btn.hidden = true` did nothing and both
   halves of a toggle pair stayed on screen at once. */
.btn[hidden] { display: none; }

.link {
  color: var(--elke); background: none; border: none;
  font-size: var(--text-label); text-decoration: underline; padding: 0;
}
.link:hover { color: var(--elke-text); }

/* ---- Fields ---- */
.field { display: flex; flex-direction: column; gap: 6px; }
/* `display: flex` beats the UA's `[hidden] { display: none }`, so without this
   a hidden field stays on screen — the same trap `.modal__conditional[hidden]`
   and `.modal__vat[hidden]` already work around. */
.field[hidden] { display: none; }
.field__label { font-size: var(--text-label); font-weight: 500; color: var(--text-muted); }
.field__input,
.field__select,
.field__textarea {
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-badge);
  font-size: var(--text-body);
  transition: border-color var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease);
}
.field__textarea { min-height: 76px; resize: vertical; line-height: 1.45; }
.field__input:focus,
.field__select:focus,
.field__textarea:focus {
  outline: none;
  border-color: var(--elke);
  box-shadow: 0 0 0 3px var(--elke-light);
}
.field__hint { font-size: 12px; color: var(--text-subtle); }
.field__input--invalid,
.field__select--invalid { border-color: var(--danger); }

/* ---- Date fields ----
   The calendar button ships at roughly 12px and sits flush against the border,
   which reads as decoration rather than a control. Give it room, a tap target
   and a hover state so it looks like the button it is. `color-scheme` above is
   what makes the glyph itself visible in dark mode. */
.field__input[type='date'],
.field__input[type='month'] {
  padding-right: 6px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.field__input[type='date']::-webkit-calendar-picker-indicator,
.field__input[type='month']::-webkit-calendar-picker-indicator {
  width: 20px; height: 20px;
  padding: 3px; margin-left: var(--space-2);
  border-radius: var(--radius-badge);
  opacity: 0.65;
  cursor: pointer;
  transition: opacity var(--duration-fast) var(--ease), background var(--duration-fast) var(--ease);
}
.field__input[type='date']::-webkit-calendar-picker-indicator:hover,
.field__input[type='month']::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
  background: var(--surface-2);
}
/* Inline dates in a table row are tighter, but the button still has to be
   findable — it is the only affordance in that cell. */
.field__input--inline[type='date']::-webkit-calendar-picker-indicator {
  width: 18px; height: 18px; margin-left: var(--space-1); opacity: 0.75;
}

/* ---- Pillbar: segmented filter, shared by Posts, Financiën and Rapport ---- */
.pillbar {
  display: inline-flex; gap: 4px; flex-wrap: wrap;
  background: var(--surface-2); padding: 3px; border-radius: var(--radius-badge);
}
.pillbar__btn {
  padding: 6px 12px; border-radius: 5px; font-size: var(--text-label); font-weight: 500;
  color: var(--text-muted); white-space: nowrap;
  transition: background var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);
}
.pillbar__btn:hover { color: var(--text); }
/* The inset ring carries the active state in dark mode, where --surface and
   --surface-2 sit too close together for the fill alone to read. */
.pillbar__btn.is-active {
  background: var(--surface); color: var(--text);
  box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--border-strong);
}

/* ---- Filter bar (Financiën, Rapport) ---- */
.filterbar {
  display: flex; align-items: flex-end; flex-wrap: wrap;
  gap: var(--space-4);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}
.filterbar .field { flex: 0 1 auto; min-width: 0; }
.filterbar .field__select { min-width: 170px; }
/* Pushed to the far end so it never reads as one more filter to set. */
.filterbar__reset { margin-left: auto; }

/* ---- Badges & pills ---- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px;
  border-radius: var(--radius-badge);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap;
}
.badge--account.account-elke { background: var(--elke-light); color: var(--elke-text); }
.badge--account.account-sunkissed { background: var(--sunkissed-light); color: var(--sunkissed-text); }
.badge--account.account-mood { background: var(--mood-light); color: var(--mood-text); }

.badge--deal.deal-paid { background: #E4F2EB; color: var(--deal-paid); }
.badge--deal.deal-mixed { background: #DDEFF2; color: var(--deal-mixed); }
.badge--deal.deal-barter { background: #F6E9DA; color: var(--deal-barter); }
/* Class comes straight from the deal code, which is snake_case. */
.badge--deal.deal-counter_invoice { background: #E4E8F6; color: var(--deal-counter-invoice); }
.badge--deal.deal-organic { background: #F0F0F0; color: var(--deal-organic); }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid transparent;
}
.pill--status::before {
  content: '';
  width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; opacity: 0.9;
}
.pill--status.status-proposed { background: var(--status-proposed-bg); color: var(--status-proposed); }
.pill--status.status-not_selected { background: var(--status-not-selected-bg); color: var(--status-not-selected); }
.pill--status.status-planned { background: var(--status-planned-bg); color: var(--status-planned); }
.pill--status.status-posted { background: var(--status-posted-bg); color: var(--status-posted); }
.pill--status.status-can_be_invoiced { background: var(--status-can-be-invoiced-bg); color: var(--status-can-be-invoiced); }
.pill--status.status-invoiced { background: var(--status-invoiced-bg); color: var(--status-invoiced); }
.pill--status.status-statistics_shared { background: var(--status-statistics-shared-bg); color: var(--status-statistics-shared); }
.pill--status.status-paid { background: var(--status-paid-bg); color: var(--status-paid); }

/* Lost deals read as struck-through everywhere they appear. */
.pill--status.status-not_selected { text-decoration: line-through; text-decoration-thickness: 1px; }

/* Content-type badge — the day panel and the post modal. The month chip does
   this itself with a fill; here it sits in a row of other badges, so it borrows
   the same outline shape they use rather than a second filled block. */
/* Same two colours as the calendar chip, grouped the same way, so the badge in
   the day panel and the bar in the grid above it are unmistakably the same
   fact. A reminder used to be the one type rendered as a bare outline here,
   which had the type language answering the capacity question in a fourth
   voice. The border survives only for a type this app does not recognise. */
.badge--type { border: 1px solid var(--type-line); color: var(--text-muted); }
.badge--type.type-reel, .badge--type.type-carousel {
  background: var(--type-feed); color: var(--type-feed-on); border-color: transparent;
}
.badge--type.type-story, .badge--type.type-reminder {
  background: var(--type-light); color: var(--type-light-on); border-color: transparent;
}

.platform { display: inline-flex; align-items: center; gap: 6px; }
.platform__icon { font-size: 14px; }

/* The status dot that used to sit on every calendar chip lived here. It is
   gone: eight colours answering "hoe ver staat dit?" in a 110px bar is what
   made the grid unreadable. The chip says it in shape now (see calendar.css)
   and the day panel spells the whole pipeline out. */

/* ---- Empty state ---- */
.empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: var(--space-3);
  padding: var(--space-7) var(--space-4);
  color: var(--text-muted);
}
.empty-state__icon { font-size: 40px; opacity: 0.7; }
.empty-state__title { color: var(--text); }
.empty-state__body { max-width: 36ch; }

/* ---- Toasts ---- */
.toast-host {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 8px; z-index: 1200;
  pointer-events: none; width: max-content; max-width: 92vw;
}
.toast {
  padding: 10px 16px; border-radius: var(--radius-badge);
  background: #2A2622; color: #fff; font-size: var(--text-label);
  box-shadow: var(--shadow-modal);
  opacity: 0; transform: translateY(8px);
  transition: opacity var(--duration-normal) var(--ease), transform var(--duration-normal) var(--ease);
}
.toast--in { opacity: 1; transform: translateY(0); }
.toast--success { background: #1F6B4D; }
.toast--error { background: #A8350A; }

/* ---- Confirm dialog ---- */
.confirm {
  position: fixed; inset: 0; z-index: 1300;
  display: flex; align-items: center; justify-content: center;
  background: rgba(20, 18, 16, 0.42);
  opacity: 0; transition: opacity var(--duration-fast) var(--ease);
  padding: var(--space-4);
}
.confirm--in { opacity: 1; }
.confirm__dialog {
  background: var(--surface); border-radius: var(--radius-card);
  border: 1px solid var(--border);
  padding: var(--space-5); max-width: 420px; width: 100%;
  box-shadow: var(--shadow-modal);
  transform: scale(0.97); transition: transform var(--duration-fast) var(--ease);
}
.confirm--in .confirm__dialog { transform: scale(1); }
.confirm__title { margin-bottom: var(--space-2); }
.confirm__body { color: var(--text-muted); margin-bottom: var(--space-5); }
.confirm__actions { display: flex; justify-content: flex-end; gap: var(--space-2); }

/* ---- Settings ---- */
.settings { display: flex; flex-direction: column; gap: var(--space-4); max-width: 760px; }
.settings__card { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }
.settings__card-title { font-size: var(--text-heading); margin-bottom: var(--space-1); }
.settings__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.settings__row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

/* two-factor authentication (Beveiliging card + login challenge) */
.mfa { display: flex; flex-direction: column; gap: var(--space-3); }
.mfa__status { display: flex; align-items: center; gap: var(--space-2); margin: 0; font-weight: 600; }
.mfa__dot { width: 9px; height: 9px; border-radius: 999px; flex: none; }
.mfa__dot--on { background: var(--success); }
.mfa__dot--off { background: var(--text-subtle); }
.mfa__steps { margin: 0; padding-left: 1.2em; color: var(--text-muted); font-size: var(--text-label); }
.mfa__steps li + li { margin-top: var(--space-1); }
.mfa__qr {
  width: 200px; height: 200px; align-self: flex-start;
  background: #FFFFFF; padding: var(--space-2);
  border: 1px solid var(--border); border-radius: var(--radius-card);
}
.mfa__secret {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-badge); padding: 2px 6px; word-break: break-all;
}
.mfa__field { max-width: 200px; }
/* Digits are read back one by one — space them out and keep them monospaced. */
.mfa__code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 20px; letter-spacing: 0.32em; text-align: center;
}
.mfa__error {
  margin: 0; padding: 9px 12px; background: var(--danger-bg); color: var(--danger);
  border-radius: var(--radius-badge); font-size: var(--text-label);
}
.mfa__warn {
  margin: 0; padding: 9px 12px; background: var(--warning-bg); color: var(--warning);
  border-radius: var(--radius-badge); font-size: var(--text-label);
}
.mfa__signout { margin-top: var(--space-4); }

.barometer { height: 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
.barometer__fill { height: 100%; width: 0; background: var(--status-invoiced); border-radius: 999px; transition: width var(--duration-normal) var(--ease); }
.barometer__fill--warn { background: var(--warning); }
.barometer__text { margin-top: 2px; }
.barometer__warn {
  margin: 0; padding: 9px 12px; background: var(--warning-bg); color: var(--warning);
  border-radius: var(--radius-badge); font-size: var(--text-label);
}

/* posts active-filter banner */
.posts__activefilter {
  display: flex; align-items: center; gap: var(--space-3);
  padding: 8px 12px; margin-bottom: var(--space-3);
  background: var(--elke-light); color: var(--elke-text);
  border-radius: var(--radius-badge); font-size: var(--text-label); font-weight: 500;
}