/* ============================================================
   app.css
   App-specifik styling för regionala_utvecklingsmedel.
   Laddas EFTER regiondalarna_ruf.css så att lokala regler
   kan överstyra den delade identiteten vid behov.
   ============================================================ */

/* ---- App-specifika designtokens (utöver regiondalarna_ruf.css) ----
   Kön- och stödtypsfärger enligt Region Dalarna. Motsvarande
   hex-värden definieras även på R-sidan i global.R (farger_kon,
   farger_stodtyp) så att diagram och CSS delar samma definition. */
:root {
  --rd-kon-kvinnor: #e2a855;   /* kvinnor/flickor */
  --rd-kon-man:     #459079;   /* män/pojkar */

  --rd-stod-proj:   #158daf;   /* projektmedel, = --rd-primary */
  --rd-stod-ftg:    #00b4e4;   /* företagsstöd, = --rd-blue-bright */
  --rd-stod-ks:     #54a1bd;   /* kommersiell service, = --rd-accent */
}

/* ---- Full bredd: bryt ut header/footer ur container-fluids -------------
   15px sidopadding (Bootstrap 3). Det tar bort de grå "listerna" i
   topphörnen och låter blå listen + footern gå kant-i-kant.
   overflow-x:hidden är en säkerhetsspärr mot horisontell scroll. */
html, body { overflow-x: hidden; }

.rd-header,
.rd-footer {
  margin-left: -15px;
  margin-right: -15px;
}

/* ---- Segmenterade knappar (radioGroupButtons) för mått/fördelningsval -- */
.rd-segmented { margin-bottom: 4px; }

.rd-segmented .btn-group-container-sw {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.rd-segmented .radiobtn {
  border: 1px solid var(--rd-border);
  background: #fff;
  color: var(--rd-text-muted);
  border-radius: var(--rd-radius-sm) !important;
  font-weight: 500;
  padding: 6px 14px;
  box-shadow: none;
  transition: all 0.15s;
}
.rd-segmented .radiobtn:hover {
  border-color: var(--rd-primary);
  color: var(--rd-primary);
}
.rd-segmented .radiobtn.active,
.rd-segmented .radiobtn.active:hover,
.rd-segmented .radiobtn:active {
  background: var(--rd-primary);
  color: #fff;
  border-color: var(--rd-primary);
}

/* ---- Sidopanel: dämpa Bootstraps grå "well"-bakgrund -------------------- */
.rd-sidebar.well { background: #fff; }

/* ---- Rubrik ovanför en KPI-rad, t.ex. "Nyckeltal för år 2018-2026" -----
   Samma versala etikettstil som .rd-kpi__label, men lite kraftigare och
   med en kant som binder ihop rubriken visuellt med kortraden under. */
.rd-kpi-sektion-titel {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--rd-primary-dark, #0f7090);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding-left: 10px;
  border-left: 3px solid var(--rd-accent, #54a1bd);
  margin-bottom: 10px;
}
.rd-caption {
  margin-top: 10px;
  font-size: var(--rd-fs-micro);
  color: var(--rd-text-muted);
}

/* ---- pickerInput (shinyWidgets) i RD-stil ------------------------------- */
.rd-field .bootstrap-select .dropdown-toggle {
  border: 1px solid var(--rd-border);
  border-radius: var(--rd-radius-sm);
  font-family: inherit;
  font-size: 0.92rem;
  color: var(--rd-text);
}
.rd-field .bootstrap-select .dropdown-toggle:focus {
  outline: none !important;
  border-color: var(--rd-primary);
  box-shadow: 0 0 0 3px var(--rd-accent-soft);
}