/* ==========================================================================
   KYA SIDE PANEL DESIGN SYSTEM
   ========================================================================== */
:root {
  --kya-panel-bg: #ffffff;
  --kya-panel-border: #e2e8f0;
  --kya-panel-text: #1e293b;
  --kya-panel-muted: #64748b;
  --kya-panel-accent: #0f172a;
  --kya-panel-highlight: #2563eb;
  --kya-panel-radius: 12px;
}

/* Base Container */
.kya-panel-container {
  background: var(--kya-panel-bg);
  border: 1px solid var(--kya-panel-border);
  border-radius: var(--kya-panel-radius);
  height: 600px; /* Should match your Leaflet map height */
  overflow-y: auto;
  color: var(--kya-panel-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  box-sizing: border-box;
  transition: all 0.3s ease;
}

/* The Empty State */
.kya-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 24px;
  text-align: center;
  color: var(--kya-panel-muted);
}
.kya-empty-state h3 { margin: 16px 0 8px 0; color: var(--kya-panel-accent); }
.kya-empty-state p { margin: 0; font-size: 0.95em; max-width: 250px; }

/* Content Fade In Animation */
.fade-in { animation: kyaFadeIn 0.3s ease-in forwards; }
@keyframes kyaFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* Panel Header */
/* Tighter padding across the board */
.kya-panel-content { padding: 16px; } /* Was 24px */
.kya-panel-header { margin-bottom: 16px; padding-bottom: 12px; } /* Was 24px/16px */
.kya-panel-header h2 { font-size: 18px; margin-bottom: 2px; } /* Slightly smaller title */

/* Compact Stats Box */
.kya-stats-grid { gap: 8px; margin-bottom: 16px; }
.kya-stat-card { padding: 8px 12px; }
.kya-stat-value { font-size: 15px; }

/* Tighter Accordions */
.kya-accordions { gap: 6px; }
.kya-accordion summary { padding: 10px 12px; font-size: 14px; } /* Much thinner headers */
.kya-accordion-body { padding: 8px 12px 12px 12px; }

/* Ultra-Dense Table Rows */
.kya-panel-table { font-size: 13px; }
.kya-panel-table td { 
  padding: 4px 0; /* Cut vertical padding in half */
  border-bottom: 1px solid #f1f5f9; 
}
.kya-muted-text { font-size: 0.9em; color: var(--kya-panel-muted); display: block; margin-top: -2px;}

/* ==========================================================================
   MOBILE RESPONSIVENESS (The Shrinking Magic)
   ========================================================================== */
@media (max-width: 768px) {
  .kya-panel-container {
    height: auto; /* Drops the fixed 600px height */
    min-height: 400px; /* Provides a nice scrolling area when open */
    border-radius: 0;
    border-left: none;
    border-right: none;
  }

  /* When empty on mobile, shrink it down to a tiny helper bar! */
  .kya-panel-container.is-empty {
    min-height: 0;
    height: 100px; /* Just tall enough to show the icon and title */
    overflow: hidden;
  }
  
  /* Hide the paragraph text on mobile to save space when empty */
  .kya-empty-state p { display: none; }
}

/* ==========================================================================
   KYA HIGH-DENSITY OVERRIDES (Defeating WordPress Theme Styles)
   ========================================================================== */

/* Typography & Header Overrides */
#kya-side-panel .kya-panel-content { padding: 16px !important; }
#kya-side-panel .kya-panel-header { margin-bottom: 16px !important; padding-bottom: 8px !important; border-bottom: 2px solid #0056b3 !important; }
#kya-side-panel .kya-panel-header h2 { margin: 0 0 2px 0 !important; font-size: 18px !important; font-weight: 700 !important; color: #0056b3 !important; line-height: 1.2 !important; }
#kya-side-panel .kya-panel-header p { margin: 0 !important; font-size: 13px !important; line-height: 1.4 !important; }

/* Stats Grid Overrides */
#kya-side-panel .kya-stats-grid { display: flex !important; gap: 8px !important; margin-bottom: 16px !important; }
#kya-side-panel .kya-stat-card { flex: 1 !important; padding: 8px 10px !important; background: #f8fafc !important; border: 1px solid #e2e8f0 !important; border-radius: 6px !important; }
#kya-side-panel .kya-stat-label { display: block !important; font-size: 11px !important; text-transform: uppercase !important; color: #64748b !important; margin-bottom: 2px !important; }
#kya-side-panel .kya-stat-value { display: block !important; font-size: 16px !important; font-weight: 800 !important; color: #333 !important; }
#kya-side-panel .kya-text-accent { color: #0056b3 !important; }

/* Accordion & Table Squashing */
#kya-side-panel .kya-accordions { display: flex !important; flex-direction: column !important; gap: 6px !important; }
#kya-side-panel .kya-accordion { border: 1px solid #e2e8f0 !important; border-radius: 6px !important; background: #fff !important; margin: 0 !important; }
#kya-side-panel .kya-accordion summary { padding: 8px 10px !important; font-weight: 700 !important; font-size: 13.5px !important; background: #f8fafc !important; margin: 0 !important; }
#kya-side-panel .kya-accordion-body { padding: 6px 10px 10px 10px !important; border-top: 1px solid #e2e8f0 !important; }

/* The Tables */
#kya-side-panel .kya-panel-table { width: 100% !important; margin: 0 !important; border-collapse: collapse !important; font-size: 13px !important; line-height: 1.2 !important; }
#kya-side-panel .kya-panel-table td { padding: 4px 0 !important; border-bottom: 1px solid #f1f5f9 !important; background: transparent !important; }
#kya-side-panel .kya-panel-table tr:last-child td { border-bottom: none !important; }
#kya-side-panel .kya-text-right { text-align: right !important; font-weight: 500 !important; }

/* Utility Classes */
#kya-side-panel .kya-text-danger { color: #d9534f !important; font-weight: 700 !important; }
#kya-side-panel .kya-muted-text { color: #64748b !important; font-size: 0.85em !important; display: block !important; margin-top: -2px !important; }

/* The 'No Data' Trap Door */
#kya-side-panel .kya-no-data-state { text-align: center !important; padding: 30px 10px !important; color: #64748b !important; }
#kya-side-panel .kya-no-data-state svg { opacity: 0.4 !important; margin-bottom: 12px !important; }
#kya-side-panel .kya-no-data-state h3 { margin: 0 0 6px 0 !important; font-size: 16px !important; color: #333 !important; font-weight: 600 !important; }
#kya-side-panel .kya-no-data-state p { margin: 0 !important; font-size: 13px !important; line-height: 1.4 !important; }

/* ==========================================================================
   HOVER TOOLTIP STYLING
   ========================================================================== */
.leaflet-tooltip.kya-map-tooltip {
  background: #ffffff;
  border: 1px solid #0056b3;
  border-radius: 6px;
  padding: 6px 10px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  opacity: 1 !important; /* Forces Leaflet not to fade it slightly */
}

/* Remove Leaflet's default little triangle pointer for a cleaner look */
.leaflet-tooltip.kya-map-tooltip::before,
.leaflet-tooltip.kya-map-tooltip::after {
  display: none !important; 
}

/* The Blue Title */
.kya-hover-tooltip-content {
  color: #0056b3;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
}

/* The Grey LSOA Code */
.kya-hover-tooltip-content .kya-tooltip-lsoa {
  color: #64748b;
  font-size: 11px;
  font-weight: 400;
  text-transform: uppercase;
}

/* --- Colored Data Dots --- */
.kya-color-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-left: 8px;
  vertical-align: middle;
  border: 1px solid #cbd5e1; /* Subtle border makes the light grey dots visible */
  margin-top: -2px;
}

/* Ensure the side panel can expand fully on mobile */
#kya-side-panel {
  min-height: max-content;
  padding-bottom: 40px; /* Gives clearance above your footer */
}

/* Allow the ApexCharts tooltip to break out of the accordion body */
.kya-accordion-body {
  overflow: visible !important;
}

/* Ensure ApexCharts renders cleanly inside the flex container */
#kya-trend-chart-container {
  min-height: 160px;
  width: 100%;
}

/* ==========================================================================
   FREEMIUM UPSELL BANNER (SQUASHED)
   ========================================================================== */
.kya-premium-upsell {
    display: flex;
    align-items: center; /* Centers the shield with the squashed text */
    gap: 12px;
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 10px 12px; /* Reduced padding */
    margin-bottom: 15px; /* Reduced margin */
}

.kya-premium-upsell svg {
    width: 24px !important; /* Shrunk from 32px */
    height: 24px !important;
    flex-shrink: 0;
    stroke: #334155;
}

.kya-premium-upsell strong {
    display: block;
    font-size: 15px;
    margin-bottom: 2px; /* Tighter margin */
    color: #0f172a;
}

.kya-premium-upsell p {
    font-size: 12px;
    margin: 0 0 8px 0; /* Tighter margin */
    color: #475569;
    line-height: 1.3;
}

.kya-btn-premium {
    display: inline-block;
    padding: 6px 12px; /* Tighter button */
    background-color: #2563eb;
    color: #ffffff !important;
    text-decoration: none;
    border-radius: 4px;
    font-weight: 600;
    font-size: 12px;
    transition: background-color 0.2s ease;
}

.kya-btn-premium:hover {
    background-color: #1d4ed8;
}

/* ==========================================================================
   LOCKED TABLE ROWS (PADLOCKS & BLUR)
   ========================================================================== */
/* Constrain the giant padlocks! */
.kya-lock-icon {
    width: 14px !important;
    height: 14px !important;
    vertical-align: middle;
    margin-left: 6px;
    stroke: #94a3b8;
    display: inline-block;
}

.kya-locked-data {
    filter: blur(4px); /* This makes the text look securely hidden */
    user-select: none;
    color: #94a3b8;
}

.kya-locked-row td {
    background-color: #f8fafc; /* Subtly greys out the background of locked rows */
}

/* ==========================================================================
   CHROMA COLOR DOTS
   ========================================================================== */
.kya-color-dot {
    display: inline-block;
    width: 12px !important;
    height: 12px !important;
    min-width: 12px !important; /* Forces mobile browsers to respect its size */
    border-radius: 50%;
    margin-left: 6px;
    vertical-align: middle;
    flex-shrink: 0; /* Prevents flexbox from crushing it */
    box-shadow: inset 0 0 2px rgba(0,0,0,0.1); /* Adds a subtle inner shadow so light dots don't vanish on white */
}

/* ==========================================================================
   DECILE MINI-BARS (Living Conditions)
   ========================================================================== */
.kya-decile-wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    
    /* NEW: Force the table cell to respect the full width of the text + the bar */
    min-width: max-content; 
    white-space: nowrap;
}

.kya-decile-number {
    font-variant-numeric: tabular-nums; 
    min-width: 32px;
    text-align: right;
}

.kya-decile-bar-bg {
    width: 60px;
    /* NEW: Explicit minimum width as a backup against aggressive mobile scaling */
    min-width: 60px; 
    height: 8px;
    background-color: #e2e8f0;
    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0;
}

.kya-decile-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
}

/* ==========================================================================
   DUAL-BARS (Crime Data)
   ========================================================================== */
.kya-crime-metric {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-end;
}

.kya-crime-bar-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.kya-crime-pct {
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    min-width: 32px;
    text-align: right;
    color: #475569;
}

.kya-crime-bar-track {
    width: 70px;
    height: 6px;
    background-color: #f1f5f9;
    border-radius: 3px;
    overflow: hidden;
    flex-shrink: 0;
}

.kya-crime-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.4s ease;
}

/* Make the average row slightly more muted */
.kya-crime-bar-row.is-avg .kya-crime-pct {
    color: #94a3b8;
    font-size: 10px;
}

/* Accordion Summary Badges */
.kya-accordion summary {
    position: relative; /* Ensure the summary can contain floating elements */
}
.kya-crime-summary-badge {
    float: right;
    margin-right: 10px;
    background-color: #f1f5f9;
    color: #475569;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

/* ==========================================================================
   DEMOGRAPHICS (Single Percentage Bars)
   ========================================================================== */
.kya-demo-metric {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-end;
}

.kya-demo-bar-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: max-content; 
    white-space: nowrap;
}

.kya-demo-pct {
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    min-width: 40px;
    text-align: right;
    color: #334155;
}

.kya-demo-bar-track {
    width: 80px;
    min-width: 80px;
    height: 8px;
    background-color: #f1f5f9;
    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0;
}

.kya-demo-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.4s ease;
}

/* ==========================================================================
   FLOOD RISK METRICS
   ========================================================================== */
.kya-flood-metric-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* Keeps things aligned if text wraps */
    padding: 10px 0;
    border-bottom: 1px solid #e2e8f0;
    font-size: 14px;
}

.kya-flood-metric-row:last-child {
    border-bottom: none;
}

.kya-flood-label {
    font-weight: 600;
    color: #475569;
    flex-shrink: 0;
    margin-right: 15px;
}

.kya-flood-value {
    color: #0f172a;
    text-align: right;
    font-weight: 500;
}

.kya-flood-postcodes {
    color: #64748b;
    font-size: 13px;
    line-height: 1.5;
    text-align: right;
    /* Bulletproof text wrapping for massive postcode lists */
    overflow-wrap: break-word;
    word-break: break-word; 
    hyphens: auto;
}

.kya-flood-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
    box-shadow: inset 0 0 2px rgba(0,0,0,0.3);
    border: 1px solid #cbd5e1; /* Helps the 'white' dot show up against backgrounds */
}

/* ==========================================================================
   BROADBAND COVERAGE
   ========================================================================== */
.kya-bb-pie-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-top: 15px;
    text-align: center;
}

.kya-bb-pie-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.kya-bb-pie-title {
    font-size: 10px;
    font-weight: 600;
    color: #475569;
    margin-bottom: 5px;
    line-height: 1.2;
}

/* Alert styling for terrible broadband (< 20% or Decile 1-2) */
.kya-bb-alert {
    color: #ef4444 !important;
    font-weight: 700 !important;
}

.kya-bb-alert-badge {
    background-color: #fef2f2;
    color: #ef4444;
    border: 1px solid #fca5a5;
    font-size: 10px;
    padding: 2px 4px;
    border-radius: 4px;
    margin-left: 6px;
}

/* ==========================================================================
   PARLIAMENT & ELECTION RESULTS
   ========================================================================== */
.kya-mp-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-left: 4px solid #cbd5e1; /* Will be dynamically colored by JS */
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.kya-mp-name {
    font-size: 20px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 4px;
}

.kya-mp-result {
    font-size: 13px;
    color: #64748b;
    font-weight: 500;
}

/* Modern, scalable alternative to raster logos! */
.kya-party-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 4px;
    color: #ffffff;
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    min-width: 45px;
    text-align: center;
    text-shadow: 0 1px 1px rgba(0,0,0,0.2);
}

.kya-vote-bar-track {
    width: 100px;
    height: 6px;
    background-color: #f1f5f9;
    border-radius: 3px;
    overflow: hidden;
}

.kya-vote-bar-fill {
    height: 100%;
    border-radius: 3px;
}

/* ==========================================================================
   RADON GAS EXPOSURE
   ========================================================================== */
.kya-radon-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
    text-align: center;
}

.kya-radon-level-text {
    font-size: 28px;
    font-weight: 800;
    margin: 5px 0;
    line-height: 1.1;
}

.kya-radon-sub {
    font-size: 12px;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

/* The 6-Step Threat Gauge */
.kya-radon-gauge {
    display: flex;
    gap: 4px;
    margin: 15px 0;
    height: 12px;
}

.kya-radon-step {
    flex: 1;
    background-color: #f1f5f9;
    border-radius: 2px;
    transition: background-color 0.3s ease;
}

/* Dynamic Alert Box */
.kya-radon-alert {
    padding: 12px;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.5;
    text-align: left;
    margin-top: 15px;
    display: none; /* Hidden by default, shown via JS if risk is high */
}

.kya-radon-alert.is-active {
    display: block;
}

.kya-radon-alert-high {
    background-color: #fef2f2;
    border: 1px solid #fca5a5;
    color: #991b1b;
}

.kya-radon-alert-info {
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #475569;
}

/* ==========================================================================
   PRISONS & INSTITUTIONS
   ========================================================================== */
/* Pure CSS Drop Shadow for PNG Map Markers */
.kya-marker-shadow {
    /* Reduced blur and opacity to prevent harsh stacking halos on zoom-out */
    filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.15));}

.kya-prison-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
}

.kya-prison-meta {
    font-size: 13px;
    color: #475569;
    margin-bottom: 8px;
    line-height: 1.5;
}

.kya-address-block {
    background: #f8fafc;
    border-left: 3px solid #94a3b8;
    padding: 10px 12px;
    font-size: 13px;
    color: #334155;
    line-height: 1.6;
    margin-top: 15px;
    border-radius: 0 6px 6px 0;
}

/* Occupancy Gauge */
.kya-occ-container {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px dashed #cbd5e1;
}

.kya-occ-header {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    margin-bottom: 6px;
}

.kya-occ-track {
    width: 100%;
    height: 10px;
    background-color: #f1f5f9;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
}

.kya-occ-fill {
    height: 100%;
    border-radius: 5px;
    transition: width 0.4s ease, background-color 0.4s ease;
}

/* Dynamic colors for the gauge */
.occ-safe { background-color: #10b981; } /* Green */
.occ-warn { background-color: #f59e0b; } /* Orange */
.occ-crit { background-color: #ef4444; } /* Red (Overcrowded!) */

/* ==========================================================================
   POWER PLANTS
   ========================================================================== */
.kya-power-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e2e8f0;
}

.kya-power-icon-wrapper {
    width: 48px;
    height: 48px;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.kya-power-icon-wrapper img {
    width: 32px;
    height: 32px;
}

.kya-power-unit-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.kya-power-tag {
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    color: #475569;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 12px;
}

/* 5-Tier Logarithmic Capacity Gauge */
.kya-power-gauge-container {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 15px;
    margin-top: 15px;
}

.kya-power-gauge {
    display: flex;
    gap: 3px;
    height: 10px;
    margin-top: 8px;
}

.kya-power-step {
    flex: 1;
    background-color: #f1f5f9;
    border-radius: 2px;
    transition: background-color 0.3s ease;
}

/* Color scaling for power output (Yellow to Deep Red) */
.kya-pwr-1 { background-color: #fde047; } /* Micro */
.kya-pwr-2 { background-color: #f59e0b; } /* Small */
.kya-pwr-3 { background-color: #ea580c; } /* Medium */
.kya-pwr-4 { background-color: #dc2626; } /* Large */
.kya-pwr-5 { background-color: #991b1b; } /* Massive/Gigawatt */

/* ==========================================================================
   LANDFILLS & WASTE SITES
   ========================================================================== */
.kya-lf-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
}

/* Status Badges */
.kya-lf-status {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.kya-lf-status-historic { background-color: #f1f5f9; color: #475569; border: 1px solid #cbd5e1; }
.kya-lf-status-active { background-color: #ecfdf5; color: #059669; border: 1px solid #6ee7b7; }

/* Material / Fill Type Tags */
.kya-lf-tag-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.kya-lf-tag {
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    color: #334155;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 12px;
}

/* Hazard Tags! */
.kya-lf-tag-hazard {
    background: #fef2f2;
    border: 1px solid #fca5a5;
    color: #dc2626;
}

.kya-lf-hazard-alert {
    background: #fef2f2;
    border-left: 4px solid #ef4444;
    padding: 10px;
    margin-top: 15px;
    font-size: 12px;
    color: #991b1b;
    border-radius: 0 4px 4px 0;
}

/* ==========================================================================
   CARE HOMES & HEALTH FACILITIES
   ========================================================================== */
.kya-care-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
}

/* Specialisms Tags */
.kya-care-tag-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.kya-care-tag {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #166534;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 12px;
}

/* CQC Rating Badges */
.kya-cqc-badge {
    display: inline-block;
    padding: 3px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 2px 2px 2px 0;
    white-space: nowrap;
}

.kya-cqc-badge.hist {
    font-size: 9px;
    padding: 2px 4px;
    opacity: 0.85; /* Slightly fade historical ratings so the current rating pops */
}

/* Rating Colors */
.kya-cqc-outstanding { background-color: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }
.kya-cqc-good { background-color: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }
.kya-cqc-requires { background-color: #fffbeb; color: #b45309; border: 1px solid #fde68a; }
.kya-cqc-inadequate { background-color: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.kya-cqc-norating { background-color: #f8fafc; color: #64748b; border: 1px solid #e2e8f0; }

/* Ratings Table Overrides */
.kya-ratings-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    margin-top: 10px;
}

.kya-ratings-table th {
    text-align: left;
    padding: 8px 4px;
    color: #64748b;
    font-weight: 600;
    border-bottom: 2px solid #e2e8f0;
    font-size: 10px;
    text-transform: uppercase;
}

.kya-ratings-table td {
    padding: 8px 4px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: top; /* Keeps badges aligned at the top if historical wraps */
}

/* ==========================================================================
   SCHOOLS & EDUCATION
   ========================================================================== */
.kya-school-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
}

/* Ofsted Badges (Inherits structure from CQC, adds new colors) */
.kya-ofsted-badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.kya-ofsted-outstanding { background-color: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0; }
.kya-ofsted-good { background-color: #ecfdf5; color: #059669; border: 1px solid #a7f3d0; }
.kya-ofsted-requires { background-color: #fffbeb; color: #d97706; border: 1px solid #fde68a; }
.kya-ofsted-inadequate { background-color: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }
.kya-ofsted-special { background-color: #7f1d1d; color: #fecaca; border: 1px solid #450a0a; } /* Special Measures */
.kya-ofsted-norating { background-color: #f8fafc; color: #64748b; border: 1px solid #e2e8f0; }

/* Census Stat Grid */
.kya-census-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 10px;
}

.kya-census-box {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 10px;
    text-align: center;
}

.kya-census-value {
    font-size: 18px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1;
    margin-bottom: 4px;
}

.kya-census-label {
    font-size: 10px;
    color: #64748b;
    text-transform: uppercase;
    font-weight: 600;
}

/* New 5-Point Scale Ofsted Badges */
.kya-ofsted-exceptional { background-color: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }
.kya-ofsted-strong { background-color: #ecfdf5; color: #059669; border: 1px solid #a7f3d0; }
.kya-ofsted-expected { background-color: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0; }
.kya-ofsted-attention { background-color: #fffbeb; color: #d97706; border: 1px solid #fde68a; }
.kya-ofsted-urgent { background-color: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }

/* Trend Indicators */
.kya-trend-improving { color: #16a34a; font-weight: 800; }
.kya-trend-declining { color: #dc2626; font-weight: 800; }
.kya-trend-stable { color: #64748b; font-weight: 700; }

/* Official "One Card" Grid Layout */
.kya-ofsted-grid {
    display: flex;
    gap: 4px;
    margin-bottom: 15px;
    align-items: stretch;
}

.kya-ofsted-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.kya-ofsted-col-header {
    padding: 4px 2px;
    text-align: center;
    font-weight: 700;
    font-size: 11px;
    line-height: 1.1;
    height: 42px; /* Fixed height forces perfect horizontal alignment on mobile */
    display: flex;
    align-items: center;
    justify-content: center;
}

.kya-ofsted-box {
    padding: 5px 2px; /* Halved from 10px 4px */
    text-align: center;
    font-size: 11px;
    line-height: 1.3;
    color: #1e293b;
}

/* Safeguarding Bottom Block */
.kya-safeguarding-block {
    border: 1px solid #cbd5e1;
    background: #f8fafc;
    padding: 6px 12px; /* Halved from 10px 15px */
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 4px;
}

/* ==========================================================================
   MINI PIE CHARTS (Responsive Grid)
   ========================================================================== */
.kya-pie-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.kya-pie-wrapper {
    flex: 1 1 130px; /* Automatically stack side-by-side, wrap on small screens! */
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 10px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
}

.kya-pie-chart {
    width: 40px; /* Slightly smaller to fit gracefully side-by-side */
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.kya-pie-legend {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.kya-pie-legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    color: #334155;
    font-weight: 600;
    line-height: 1.1;
}

.kya-pie-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* HIGHLIGHTS LAYER */
.kya-highlight-good { background-color: #dcfce7; color: #16a34a; border: 1px solid #bbf7d0; }
.kya-highlight-bad { background-color: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }
.kya-highlight-neutral { background-color: #f1f5f9; color: #475569; border: 1px solid #e2e8f0; }

.kya-particulars-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.kya-particulars-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
    font-size: 13px;
    line-height: 1.5;
    color: #334155;
    background: #f8fafc;
    padding: 10px 12px;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
}

/* ==========================================================================
   GLOBAL LEAFLET OVERRIDES: Kill Tooltip Fade Delays
   ========================================================================== */
.leaflet-tooltip, 
.leaflet-tooltip-fade {
    transition: none !important;
    animation: none !important;
}