:root {
  --accent: #1971c2;
  --accent-dark: #1864ab;
  --surface: #f8f9fa;
  --border: #e9ecef;
}

body {
  background-color: var(--surface);
  color: #1c2733;
  font-family: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
}

/* Blue accent for primary buttons/links (overrides BS default indigo) */
.btn-primary {
  --bs-btn-bg: var(--accent);
  --bs-btn-border-color: var(--accent);
  --bs-btn-hover-bg: var(--accent-dark);
  --bs-btn-hover-border-color: var(--accent-dark);
  --bs-btn-active-bg: var(--accent-dark);
  --bs-btn-active-border-color: var(--accent-dark);
}
.btn-outline-primary {
  --bs-btn-color: var(--accent);
  --bs-btn-border-color: var(--accent);
  --bs-btn-hover-bg: var(--accent);
  --bs-btn-hover-border-color: var(--accent);
  --bs-btn-active-bg: var(--accent);
}
a { color: var(--accent); }
a:hover { color: var(--accent-dark); }

.navbar-brand { font-weight: 700; }

/* Broadcast grid */
.slot-card { margin-bottom: 1.25rem; }
.slot-card .card-header {
  background: #fff;
  font-weight: 600;
  border-bottom: 2px solid var(--accent);
}
.slot-row { margin-bottom: .4rem; }
/* Free (unassigned) slot inputs are visually muted */
.slot-free .form-control { background-color: var(--surface); }
.broker-cell { font-size: .85rem; color: #495057; }

@media print {
  .navbar, .btn, .no-print { display: none !important; }
}

/* ── Dashboard ──────────────────────────────────────────────── */
:root {
  --ink: #10243a;
  --deep: #123a5e;
  --air: #d9541f;
  --hair: #dde3e9;
  --dim: #5b6b7c;
  --font-display: 'IBM Plex Sans Condensed', 'IBM Plex Sans', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
}

.dash { display: block; }

/* From lg up the dashboard is two columns: the month strip and the
   actions on the left, recent activity beside them. Below that it
   collapses to a single column in source order. */
@media (min-width: 992px) {
  .dash {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    column-gap: 1.75rem;
    align-items: start;
  }
  .dash-hero { grid-column: 1; grid-row: 1; }
  .dash-actions { grid-column: 1; grid-row: 2; }
  /* .dash-recent's base margin-top is declared later in this file, so
     match on .dash > … to win on specificity rather than source order. */
  .dash > .dash-recent { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; }
}

.eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: .6875rem;
  color: var(--dim);
  margin: 0;
}

.dash-hero { padding: 0; }

/* Two columns (figure | chart), two rows (bars | labels), so the figure
   sits on the same baseline as the bars and its caption on the same
   line as the month labels. */
.dash-hero-body {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 1.75rem;
  margin-top: 1.25rem;
}
.dash-total-figure {
  grid-column: 1;
  grid-row: 1;
  align-self: end;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 4rem;
  line-height: .85;
  color: var(--ink);
}
.dash-total-label {
  grid-column: 1;
  grid-row: 2;
  font-size: .75rem;
  color: var(--dim);
  padding-top: .45rem;
}

.dash-bars {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 118px;
  border-bottom: 1px solid var(--ink);
}
.dash-bar {
  flex: 1;
  min-width: 0;
  min-height: 1px;
  background: var(--deep);
  border-radius: 1px 1px 0 0;
  transform-origin: bottom;
  animation: dash-grow .5s ease-out backwards;
}
.dash-bar-current { background: var(--air); }
@keyframes dash-grow { from { transform: scaleY(0); } }

.dash-bar-labels {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  gap: 6px;
  padding-top: .45rem;
  font-family: var(--font-mono);
  font-size: .625rem;
  color: #8b98a5;
}
.dash-bar-labels span { flex: 1; min-width: 0; text-align: center; }
.dash-label-current { color: var(--air); }

.dash-actions { margin-top: 1.75rem; }

.dash-section-head {
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--ink);
}

.dash-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: .625rem;
  margin-top: .75rem;
}
.dash-tile {
  display: flex;
  align-items: center;
  gap: .75rem;
  background: #fff;
  border: 1px solid var(--hair);
  border-radius: 2px;
  padding: .8rem .9rem;
  text-decoration: none;
  color: var(--ink);
}
.dash-tile:hover { border-color: var(--accent); color: var(--ink); }
.dash-tile-icon {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  color: var(--accent);
}
.dash-tile-body { display: flex; flex-direction: column; min-width: 0; }
.dash-tile-title { font-size: .875rem; }
.dash-tile-meta {
  font-family: var(--font-mono);
  font-size: .6875rem;
  color: var(--dim);
  margin-top: .1rem;
}
.dash-tile-arrow {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-left: auto;
  color: var(--hair);
}
.dash-tile:hover .dash-tile-arrow { color: var(--accent); }

.dash-recent { margin-top: 1.75rem; }
.dash-row {
  display: flex;
  gap: .875rem;
  align-items: baseline;
  padding: .625rem 0;
  border-bottom: 1px solid var(--hair);
  font-size: .875rem;
}
.dash-row-date {
  font-family: var(--font-mono);
  flex: 0 0 3.5rem;
  text-decoration: none;
}
.dash-row-date:hover { text-decoration: underline; }
.dash-row-time { font-family: var(--font-mono); flex: 0 0 2.75rem; color: var(--dim); }
.dash-row-name { color: var(--ink); }
.dash-empty { padding-top: .875rem; color: var(--dim); font-size: .875rem; }

@media (max-width: 575.98px) {
  .dash-hero-body { grid-template-columns: 1fr; row-gap: .25rem; }
  .dash-total-figure { grid-row: 1; grid-column: 1; }
  .dash-total-label { grid-row: 2; grid-column: 1; padding-top: 0; }
  .dash-bars { grid-row: 3; grid-column: 1; margin-top: .9rem; }
  .dash-bar-labels { grid-row: 4; grid-column: 1; }
  .dash-tiles { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .dash-bar { animation: none; }
}