/* Obra R8 — small layer on top of Bootstrap. Mobile-first. */

:root {
  --app-primary: #1f4e79;
  --app-primary-dark: #173a5a;
  --bs-primary: var(--app-primary);
  --bs-primary-rgb: 31, 78, 121;
  --bs-link-color: var(--app-primary);
  --bs-link-color-rgb: 31, 78, 121;
  /* Investidor and Microinvestidor: the hues of the Estatísticas charts, darkened for white
     text (checked for color blindness). */
  --kind-investor: #2368bd;
  --kind-micro: #c4501f;
}

body {
  background-color: #f5f6f8;
}

.btn-primary {
  --bs-btn-bg: var(--app-primary);
  --bs-btn-border-color: var(--app-primary);
  --bs-btn-hover-bg: var(--app-primary-dark);
  --bs-btn-hover-border-color: var(--app-primary-dark);
  --bs-btn-active-bg: var(--app-primary-dark);
  --bs-btn-active-border-color: var(--app-primary-dark);
}

.app-navbar {
  background-color: var(--app-primary);
}

.app-navbar .navbar-brand,
.app-navbar .navbar-text {
  color: #fff;
}

.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
}

.auth-card {
  width: 100%;
  max-width: 420px;
}

.app-navbar .nav-link {
  color: rgba(255, 255, 255, 0.85);
}

.app-navbar .nav-link.active,
.app-navbar .nav-link:hover {
  color: #fff;
}

.home-card {
  color: inherit;
  transition: box-shadow 0.15s ease-in-out;
}

.home-card:hover {
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.08);
}

.audit-json {
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 0.75rem;
  background: var(--bs-tertiary-bg);
  padding: 0.5rem;
  border-radius: 0.25rem;
}

.stat-tile {
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 0.5rem;
  padding: 0.5rem 0.25rem;
  height: 100%;
}

.stat-value {
  font-weight: 600;
  font-size: 1.05rem;
  white-space: nowrap;
}

.stat-value-sm {
  font-size: 0.85rem;
  white-space: normal;
}

.stat-label {
  color: var(--bs-secondary-color);
  font-size: 0.75rem;
}

.chart-box {
  position: relative;
  height: 240px;
}

.stats-table {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Participants on desktop: name, value, quotas and what was paid in each month. */
.participant-table {
  font-variant-numeric: tabular-nums;
}

.participant-table .participant-name {
  min-width: 16rem;
}

.participant-table td:not(.participant-name),
.participant-table th {
  white-space: nowrap;
}

/* I (Investidor) or M (Microinvestidor) before the name: the hues of the Estatísticas
   charts, darkened for white text. Without a pledge in the month, an empty slot keeps the
   names aligned. */
.kind-badge {
  flex: 0 0 1.25rem;
  height: 1.25rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.25rem;
  text-align: center;
  color: #fff;
}

.kind-badge.kind-investor {
  background-color: var(--kind-investor);
}

.kind-badge.kind-micro {
  background-color: var(--kind-micro);
}

/* D69/D75: participants, quotas and committed (total, Investidores and Microinvestidores) at
   the top of Participantes and Estatísticas; each bar splits the total, a 2px gap between
   the parts. */
.kind-tile .stat-value {
  font-size: 1.25rem;
}

.kind-tile .stat-value.kind-amount {
  font-size: 1.05rem;
}

/* Amounts in a third of the card: smaller on phones and tablets (R$ 101.350,00 fits). */
.kind-tile .stat-value.kind-money {
  font-size: 0.85rem;
}

@media (min-width: 992px) {
  .kind-tile .stat-value.kind-money {
    font-size: 1.05rem;
  }
}

.kind-sep {
  border-top: 1px solid var(--bs-border-color);
  margin: 0.5rem 0.75rem;
}

/* The tiles beside the card stretch to its height: their content in the middle. */
.kind-side .stat-tile {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.kind-tile .kind-badge {
  display: inline-block;
  width: 1.25rem;
  vertical-align: 0.1em;
}

.kind-bar {
  display: flex;
  gap: 2px;
  height: 0.5rem;
  margin: 0.5rem 0.75rem 0.25rem;
}

.kind-bar > * {
  flex-basis: 0;
  border-radius: 4px;
}

.kind-bar .kind-investor {
  background-color: var(--kind-investor);
}

.kind-bar .kind-micro {
  background-color: var(--kind-micro);
}

.participant-table .current-month {
  --bs-table-bg: var(--bs-tertiary-bg);
}

.participant-table th.current-month {
  font-weight: 700;
}

/* D67: a month cell opens the popup to change what was received. */
.participant-table .month-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.participant-table .month-link:hover,
.participant-table .month-link:focus-visible {
  text-decoration: underline;
}

/* D68: phones and tablets, what was received in the month of the list, at the right. The
   value is a button-sized target that opens the same popup. */
.participant-list .participant-name {
  min-width: 0;
}

.participant-list .month-paid {
  flex: 0 0 auto;
  min-width: 4rem;
  font-variant-numeric: tabular-nums;
}

.participant-list .month-paid > * {
  display: block;
  padding: 0.375rem 0.5rem;
}

.participant-list .month-link {
  color: inherit;
  text-decoration: none;
  border: 1px solid var(--bs-border-color);
  border-radius: 0.375rem;
  background-color: var(--bs-tertiary-bg);
}

/* Emancipação: stage colors, also used by the map. The color follows the meaning (D50):
   yellow = Fase 1 – irmãos reunindo, gray = Fase 2 – sem irmãos, green = emancipated. The
   three lightness levels differ, so they stay distinguishable without color vision. */
:root {
  --stage-phase-1: #eebd2b;
  --stage-phase-2: #dde1e6;
  --stage-emancipated: #2b8450;
}

.stage-phase_1 {
  background-color: var(--stage-phase-1);
}

.stage-phase_2 {
  background-color: var(--stage-phase-2);
}

.stage-emancipated {
  background-color: var(--stage-emancipated);
}

.badge.stage-badge {
  color: #1b1f23;
}

.badge.stage-badge.stage-emancipated {
  color: #fff;
}

.stage-dot {
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.15);
  vertical-align: -0.05rem;
}

.badge.house-badge {
  color: var(--bs-body-color);
  background-color: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  font-weight: 500;
}

/* D74: the churches on the IdR statistics (card, and the marks beside each city). */
.stage-bar {
  display: flex;
  gap: 2px;
  height: 0.5rem;
  margin-top: 0.5rem;
}

.stage-bar > * {
  flex-basis: 0;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.15);
}

.church-count {
  padding: 0.25rem;
  border-radius: 0.375rem;
  background-color: var(--bs-tertiary-bg);
}

.badge.tag-abbr {
  font-size: 0.65rem;
  padding: 0.15em 0.35em;
  vertical-align: 0.1em;
}

/* Mapa (static/js/map.js). */
.map-box {
  position: relative;
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 0.5rem;
  overflow: hidden;
}

.map-svg {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-select: none;
}

.map-svg path {
  stroke: #fff;
  stroke-width: 0.6;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  cursor: pointer;
}

.map-svg path.stage-phase_1 {
  fill: var(--stage-phase-1);
}

.map-svg path.stage-phase_2 {
  fill: var(--stage-phase-2);
}

.map-svg path.stage-emancipated {
  fill: var(--stage-emancipated);
}

/* Highlighted micro-region: the other cities fade, keeping the stage color. */
.map-svg.has-region path[data-city]:not(.in-region) {
  fill-opacity: 0.35;
}

.map-svg path.in-region {
  stroke: #495057;
  stroke-width: 0.8;
}

.map-svg path.is-hover,
.map-svg path.is-active {
  stroke: #1b1f23;
  stroke-width: 2;
}

/* Markers of what the churches have: shape and color per item (circle, square, triangle). */
:root {
  --tag-teen: #a21caf;
  --tag-colporteur: #1d4ed8;
  --tag-tci: #c2410c;
}

.map-svg .map-marker,
.map-tag-icon .map-marker {
  stroke: #fff;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
  cursor: default;
}

.map-marker.tag-teen {
  fill: var(--tag-teen);
}

.map-marker.tag-colporteur {
  fill: var(--tag-colporteur);
}

.map-marker.tag-tci {
  fill: var(--tag-tci);
}

.map-marker.is-faded {
  opacity: 0.35;
}

.map-tag-icon {
  vertical-align: -1px;
  overflow: visible;
}

.map-zoomed .map-svg {
  touch-action: none;
  cursor: grab;
}

.map-zoom {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 2;
}

.map-zoom .btn {
  border: 1px solid var(--bs-border-color);
  min-width: 2rem;
}

.map-tooltip {
  position: absolute;
  z-index: 3;
  max-width: 260px;
  padding: 0.375rem 0.5rem;
  font-size: 0.8rem;
  pointer-events: none;
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 0.375rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.12);
}

.map-tooltip.is-pinned {
  pointer-events: auto;
}

@media (hover: hover) and (pointer: fine) {
  .map-hint-touch {
    display: none;
  }
}

@media (hover: none), (pointer: coarse) {
  .map-hint-hover {
    display: none;
  }
}