/* dashboard.css — executive dashboard overrides for report.css.
   Loaded AFTER report.css so these rules win.
   Colors: Lailara Design System v2. */

/* ── Layout: kill Quarto grid, center content ─────────────────────── */

#quarto-content.page-columns {
  display: block !important;
  padding: 0 2rem !important;
}

main.content,
#quarto-document-content {
  max-width: 1320px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

html, body {
  overflow-x: hidden !important;
}

/* ── Title block: dark bar, full width ────────────────────────────── */

#title-block-header {
  background: #1a1a1a !important;
  color: #fff !important;
  margin: 0 -2rem 1.5rem -2rem !important;
  padding: 1.8rem 2.5rem 1.4rem !important;
  border: none !important;
}

#title-block-header h1.title,
#title-block-header .title {
  color: #fff !important;
  font-family: 'Playfair Display', Georgia, serif !important;
  border-bottom: none !important;
  padding-bottom: 0 !important;
  margin-bottom: 0.25rem !important;
  font-size: 1.7rem !important;
  letter-spacing: -0.02em !important;
}

#title-block-header .subtitle,
#title-block-header p.subtitle {
  color: rgba(255, 255, 255, 0.7) !important;
  font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif !important;
  font-size: 1rem !important;
  margin: 0 !important;
}

/* ── Tabs: clean underline style ──────────────────────────────────── */

.panel-tabset .nav-tabs {
  border-bottom: 2px solid #d9d9d9 !important;
  gap: 0 !important;
}

.panel-tabset .nav-tabs .nav-link {
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #595959 !important;
  font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif !important;
  font-weight: 500 !important;
  font-size: 0.95rem !important;
  padding: 0.6rem 1.2rem !important;
  margin-bottom: -2px !important;
  transition: color 100ms ease-out, border-color 100ms ease-out !important;
}

.panel-tabset .nav-tabs .nav-link:hover {
  color: #cc100a !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid #cc100a !important;
}

.panel-tabset .nav-tabs .nav-link.active {
  color: #0d0d0d !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid #cc100a !important;
  font-weight: 600 !important;
}

/* ── Blockquotes: accent-bordered card ───────────────────────────── */

blockquote {
  max-width: 100% !important;
  background: #f2f2f2 !important;
  border-left: 3px solid #d9d9d9 !important;
  border-radius: 0 2px 2px 0 !important;
  box-shadow: none !important;
  padding: 0.8rem 1.2rem !important;
  margin: 1rem 0 1.5rem 0 !important;
  font-size: 0.85rem !important;
  line-height: 1.5 !important;
  color: #595959 !important;
}

blockquote p {
  font-size: 0.85rem !important;
  margin: 0.4rem 0 !important;
}

blockquote strong {
  color: #333333 !important;
}

/* ── Reactable tables: card wrapper + dark header ─────────────────── */

.reactable {
  width: fit-content !important;
  margin-left: auto !important;
  margin-right: auto !important;
  border: 1px solid #d9d9d9 !important;
  border-radius: 2px !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

/* Header row */
.reactable .rt-thead .rt-th,
.reactable .rt-thead .rt-td {
  background: #1f2e7a !important;
  color: #fff !important;
  font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.82rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
  padding: 8px 10px !important;
  border-bottom: none !important;
}

/* Header sort arrows */
.reactable .rt-thead .rt-th .rt-sort-header {
  color: #fff !important;
}

.reactable .rt-thead .rt-th[aria-sort] .rt-sort-header::after {
  color: rgba(255, 255, 255, 0.6) !important;
}

/* Filter inputs in header */
.reactable .rt-thead .rt-th input,
.reactable .rt-thead .rt-th select {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  border-radius: 2px !important;
  font-size: 0.78rem !important;
  padding: 2px 4px !important;
}

.reactable .rt-thead .rt-th input::placeholder {
  color: rgba(255, 255, 255, 0.4) !important;
}

.reactable .rt-thead .rt-th select option {
  background: #fff !important;
  color: #333333 !important;
}

/* Body rows */
.reactable .rt-tbody .rt-td {
  padding: 5px 10px !important;
  font-size: 0.85rem !important;
  border-bottom: 1px solid #e0e0e0 !important;
}

/* Striped rows */
.reactable .rt-tr-striped {
  background: #f5f3ee !important;
}

/* Hover */
.reactable .rt-tbody .rt-tr:hover {
  background: #e8eaf4 !important;
}

/* Pagination */
.reactable .rt-pagination {
  padding: 6px 10px !important;
  font-size: 0.8rem !important;
  border-top: 1px solid #e0e0e0 !important;
}

/* Search box */
.reactable .rt-search {
  border: 1px solid #d9d9d9 !important;
  border-radius: 2px !important;
  padding: 4px 8px !important;
  font-size: 0.82rem !important;
}

/* ── Tab panes fill width ─────────────────────────────────────────── */

.panel-tabset,
.tab-content,
.tab-pane {
  width: 100% !important;
  max-width: 100% !important;
}