/* ===========================================================================
   assets/css/calendar.css — economic calendar
   ===========================================================================
   ADDITIVE. New file, loaded via $extra_css = ['calendar'] on pages/calendar.php
   and by the signal/cockpit pages that render the block.

   Every colour, radius and shadow comes from the tokens already defined in
   main.css (--bg-card, --border, --text-muted, --accent, --impact-medium,
   --impact-low, --radius, --shadow-sm). Nothing new is introduced, so dark
   mode works without a single extra rule: main.css re-declares the same custom
   properties under [data-theme="dark"] and these selectors inherit that.

   The one colour NOT available as a token is high impact. main.css only
   defines --impact-medium and --impact-low; high impact is hardcoded as a
   gradient inside .impact-meter-fill.impact-high. Rather than reach into that
   rule, --cal-impact-high is declared here from the same #EF4444, so the
   calendar matches the meters without editing main.css.

   ── Layout note ───────────────────────────────────────────────────────────
   .cal-item is flexbox, not grid. It has to render both with and without the
   day label (the page puts the date in the group heading, the signal/cockpit
   block puts it on the row) and with a values group that may be entirely
   absent. Fixed grid columns would leave holes in exactly those cases; flex
   with a growing title column degrades cleanly instead.
   =========================================================================== */

:root {
  --cal-impact-high: #EF4444;
}

/* ── Page ─────────────────────────────────────────────────────────────── */

.cal-page { padding-bottom: 48px; }

.cal-coverage {
  font-size: 13px;
  color: var(--text-muted);
  margin: 4px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
}
.cal-tz-inline { color: var(--text-light); }

.cal-stale {
  margin: 12px 0 0;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: var(--amber-bg);
  color: var(--amber-fg);
  font-size: 14px;
  font-weight: 500;
}

.cal-empty,
.cal-truncated {
  margin: 24px 0;
  padding: 18px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  color: var(--text-muted);
  text-align: center;
  font-size: 14px;
}

/* ── Filters ──────────────────────────────────────────────────────────── */

.cal-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  margin: 20px 0 28px;
  padding: 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.cal-filters label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  text-transform: uppercase;
}
.cal-filters select {
  font: inherit;
  font-size: 14px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  color: var(--text);
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  min-width: 150px;
  cursor: pointer;
  transition: border-color var(--transition);
}
.cal-filters select:hover,
.cal-filters select:focus { border-color: var(--accent); outline: none; }

.cal-filter-check {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding-bottom: 10px;
  text-transform: none;
  font-size: 14px;
  font-weight: 400;
  color: var(--text);
  cursor: pointer;
}
.cal-filter-check input { accent-color: var(--accent); width: 16px; height: 16px; cursor: pointer; }

.cal-filters__actions { display: flex; gap: 8px; margin-left: auto; padding-bottom: 2px; }

/* ── Day groups ───────────────────────────────────────────────────────── */

.cal-day-group { margin-bottom: 28px; }

.cal-day-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--border);
}
.cal-day-count {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-subtle);
  border-radius: var(--radius-pill);
  padding: 2px 9px;
}

/* ── Rows ─────────────────────────────────────────────────────────────── */

.cal-list { list-style: none; margin: 0; padding: 0; }

.cal-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--impact-low);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  margin-bottom: 6px;
  font-size: 14px;
  transition: background var(--transition), border-color var(--transition);
}
.cal-item:hover { background: var(--bg-card-hover); }

/* The left edge is the impact signal; the dots repeat it for anyone who
   cannot rely on colour. All three levels are stated explicitly rather than
   letting low fall through the base rule, so the scale is readable in one
   place. */
.cal-imp-low    { border-left-color: var(--impact-low); }
.cal-imp-medium { border-left-color: var(--impact-medium); }
.cal-imp-high   { border-left-color: var(--cal-impact-high); }

.cal-past { opacity: 0.62; }
.cal-holiday { border-left-style: dashed; }

.cal-time {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--text);
  min-width: 44px;
}
.cal-day {
  font-size: 12px;
  color: var(--text-muted);
  min-width: 92px;
}
.cal-ccy {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--neutral-fg);
  background: var(--neutral-bg);
  border-radius: var(--radius-pill);
  padding: 3px 8px;
  min-width: 44px;
  text-align: center;
}
.cal-title {
  flex: 1 1 220px;
  min-width: 0;
  color: var(--text);
  font-weight: 500;
}
.cal-period { color: var(--text-light); font-weight: 400; font-size: 12px; }

.cal-imp {
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--impact-low);
  white-space: nowrap;
}
.cal-imp-medium .cal-imp { color: var(--impact-medium); }
.cal-imp-high   .cal-imp { color: var(--cal-impact-high); }

.cal-values { display: flex; flex-wrap: wrap; gap: 4px 8px; }
.cal-val {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  background: var(--bg-subtle);
  border-radius: var(--radius-sm);
  padding: 2px 7px;
  white-space: nowrap;
}
/* Three chips, three weights. The actual is the only number anyone reads once
   it exists; the forecast is what it gets compared against; the previous value
   is context and recedes. */
.cal-actual { color: var(--text); font-weight: 600; background: var(--bg-hero); }
.cal-consensus { color: var(--text-muted); }
.cal-previous { color: var(--text-light); }
/* A backfilled value is the revised figure, not the print. Marked so it is
   distinguishable without opening the row. */
.cal-actual[data-source="previous_backfill"] { font-weight: 400; font-style: italic; }

.cal-until {
  font-size: 12px;
  color: var(--text-light);
  white-space: nowrap;
  margin-left: auto;
}

/* ── Block (signal detail, cockpit) ───────────────────────────────────── */

.cal-block {
  margin: 24px 0;
  padding: 16px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.cal-block-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.cal-block-title { font-size: 15px; font-weight: 700; color: var(--text); margin: 0; }
.cal-block-more {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-dark);
  text-decoration: none;
  white-space: nowrap;
}
.cal-block-more:hover { text-decoration: underline; }

.cal-block .cal-item { border-left-width: 3px; }
.cal-block .cal-item:last-child { margin-bottom: 0; }

.cal-tz-note { font-size: 11px; color: var(--text-light); margin: 10px 0 0; }

/* ── Small screens ────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  .cal-filters { gap: 10px; padding: 14px; }
  .cal-filters label,
  .cal-filters select { width: 100%; min-width: 0; }
  .cal-filters__actions { margin-left: 0; width: 100%; }
  .cal-filters__actions > * { flex: 1; text-align: center; }

  /* The title takes its own line; time, currency and impact stay on the
     first. Without this the title is squeezed into a two-word column. */
  .cal-item { gap: 4px 8px; padding: 10px 12px; }
  .cal-title { flex-basis: 100%; order: 5; }
  .cal-values { flex-basis: 100%; order: 6; }
  .cal-until { order: 4; margin-left: auto; }
  .cal-day { min-width: 0; }
}