/* =============================   GOV.UK‑style base============================= */
:root {
  --govuk-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --govuk-blue: #1d70b8;
  --govuk-dark-blue: #0b2a3f;
  --govuk-light-grey: #f3f2f1;
  --govuk-border: #b1b4b6;
  --govuk-text: #0b0c0c;
  --govuk-success: #00703c;
  --govuk-warning: #d4351c;
}

body {
  font-family: var(--govuk-font);
  margin: 0;
  background: var(--govuk-light-grey);
  color: var(--govuk-text);
}

/* =============================   Header (matches screenshot)============================= */
header {
  background: linear-gradient(135deg, #0b2a3f, #163c54);
  color: white;
  padding: 32px 40px;
}

header h1 {
  margin: 0;
  font-size: 2rem;
}

header p {
  margin: 8px 0 0;
  font-size: 1rem;
  opacity: 0.9;
}

header span {
  display: block;
  margin-top: 8px;
  font-size: 0.85rem;
  opacity: 0.8;
}

/* =============================   Tabs (GDS‑inspired)============================= */
.tabs {
  display: flex;
  background: white;
  border-bottom: 1px solid var(--govuk-border);
}

.tabs button {
  padding: 14px 24px;
  border: none;
  background: none;
  font-size: 1rem;
  cursor: pointer;
  border-bottom: 4px solid transparent;
}

.tabs button:hover {
  background: #f8f8f8;
}
/* 
.tabs button.active {
  border-bottom: 4px solid var(--govuk-blue);
  font-weight: 600;
} */



/* =============================   Cards (core dashboard pattern)============================= */
.card {
  background: white;
  border-radius: 6px;
  padding: 24px;
  margin-bottom: 24px;
}

/* Large feature card */
.card.feature {
  padding: 32px;
}

/* Card grid (overview bottom panels) */
.card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

/* =============================   Titles inside cards============================= */
.card h2 {
  margin-top: 0;
  font-size: 1.5rem;
}

.card h3 {
  margin-top: 0;
  font-size: 1.1rem;
}

/* =============================   Key findings list============================= */
#keyFindings ul {
  list-style: none;
  padding: 0;
}

#keyFindings li {
  padding-left: 20px;
  margin-bottom: 8px;
  position: relative;
}

#keyFindings li::before {
  content: "•";
  color: var(--govuk-blue);
  position: absolute;
  left: 0;
}

/* =============================   Critical areas============================= */
#criticalAreas {
  color: var(--govuk-warning);
  font-weight: 600;
}

/* =============================   Charts (ensure good sizing)============================= */
canvas {
  max-width: 100%;
}

/* =============================   Utility============================= */
.hidden {
  display: none;
}

/* =================================
   Radar chart styling
================================= */

/* ============================   Radar chart sizing (FIX)============================ */
/* Radar size & centering – matches screenshot */
.radar-container {
  width: 520px;
  height: 520px;
  margin: 0 auto 12px;
}

.radar-container canvas {
  width: 100% !important;
  height: 100% !important;
}

.status {
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 600;
  margin-left: 6px;
}

.status.excellent {
  background: #cce2d8;
  color: #005a30;
}

.status.good {
  background: #e5f0ff;
  color: #144e81;
}

.status.fair {
  background: #fff4ce;
  color: #594d00;
}

.status.needs-work {
  background: #fdd6d6;
  color: #942514;
}

.badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 0.9rem;
}

.badge.excellent {
  background-color: #cce2d8;
  color: #005a30;
}

.badge.good {
  background-color: #e5f0ff;
  color: #144e81;
}

.badge.fair {
  background-color: #fff4ce;
  color: #594d00;
}

.badge.needs-work {
  background-color: #fdd6d6;
  color: #942514;
}

.status-legend {
  margin-top: 12px;
  font-size: 0.85rem;
  display: flex;
  justify-content: center;
  gap: 16px;
}

.legend-item.excellent { color: #2e7d32; }
.legend-item.good { color: #1e88e5; }
.legend-item.fair { color: #f9a825; }
.legend-item.needs-work { color: #d32f2f; }

.metric-explainer {
  margin: 8px auto 0;
  font-size: 0.9rem;
  color: #505a5f;
  text-align: center;
}

#criticalAreas ul {
  margin: 0;
  padding-left: 20px;
}

#criticalAreas li {
  margin-bottom: 8px;
}

.metric-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 16px;
}

.metric-card {
  background: linear-gradient(135deg, #6f7cf2, #7b5fc0);
  color: white;
  border-radius: 8px;
  padding: 16px;
}

.metric-card h4 {
  margin: 0 0 8px;
  font-size: 0.95rem;
  opacity: 0.9;
}

.metric-value {
  font-size: 1.6rem;
  font-weight: 700;
}

.metric-card p {
  font-size: 0.8rem;
  opacity: 0.85;
  margin-top: 6px;
}

.govuk-hint {
  color: #505a5f;
  font-size: 0.9rem;
}

.govuk-list {
  padding-left: 20px;
}

.govuk-list li {
  margin-bottom: 8px;
}
.badge {
  padding: 3px 8px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 0.8rem;
}

.badge.critical {
  background: #fdd6d6;
  color: #942514;
}

.badge.fair {
  background: #fff4ce;
  color: #594d00;
}

.badge.good {
  background: #e5f0ff;
  color: #144e81;
}

.badge.excellent {
  background: #cce2d8;
  color: #005a30;
}

@media (min-width: 1160px) {
    @supports (margin: max(calc(0px))) {
        .app-width-container, .app-service-navigation .govuk-width-container {
            margin-right: auto;
            margin-left: auto;
        }
    }
}

.govuk-summary-list--no-border .govuk-summary-list__row {
  border-bottom: none;
}

.tab {
  display: none;
}

.tabs button {
  background: none;
  border: none;
  padding: 12px 16px;
  cursor: pointer;
}

.tabs button.active {
  border-bottom: 3px solid #1d70b8;
  font-weight: 600;
}

.brand__border-color {
    border-color: #00a33b;
}

.organisation__brand-border-top {
    border-top-width: 5px;
    border-top-style: solid
}

.organisation__section-wrap {
    word-wrap: break-word
}

.organisation__section-border-top {
    border-top: 5px solid #0b0c0c;
    padding-top: 15px
}


.gem-c-lead-paragraph {
    margin-top: 0;
    /* max-width: 30em; */
    color: #0b0c0c;
    margin-bottom: 5px;
    font-family: "GDS Transport",arial,sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-weight: 400;
    font-size: 1.3125rem;
    line-height: 1.1904761905
}

@media print {
    .gem-c-lead-paragraph {
        color: #000
    }
}

@media(min-width: 40.0625em) {
    .gem-c-lead-paragraph {
        margin-bottom:40px
    }
}

@media print {
    .gem-c-lead-paragraph {
        font-family: sans-serif
    }
}



@media print {
    .gem-c-lead-paragraph {
        font-size: 18pt;
        line-height: 1.15
    }
}

.gem-c-lead-paragraph--inverse {
    color: #fff
}

@media print {
    .gem-c-lead-paragraph {
        color: #000
    }
}

.brand__border-color {
    border-color: #00a33b;
    border-top-width: 5px;
    border-top-style: solid;
    padding-top: 15px;
}

.brand__border-color-m {
    border-color: #00a33b;
}

.brand__border-color-s {
    border-color: #00a33b;
    border-top-width: 1px;
    border-top-style: solid;
    padding-top: 10px;
}
.govuk-margin-top-5{
margin-top: 25px !important;
}