/* BOE Electricity Market Indicators – Frontend Styles
 * Matches the dark-blue dashboard with gradient meter bars and semicircular gauge
 * Version: 1.0.0
 */

/* ===== RESET & BASE ===== */
.boe-ei-wrap *,
.boe-ei-wrap *::before,
.boe-ei-wrap *::after {
	box-sizing: border-box;
}

.boe-ei-wrap {
	--boe-blue-dark:   #0b1e3d;
	--boe-blue-mid:    #0f2a52;
	--boe-blue-panel:  #122d5a;
	--boe-blue-border: #1e4a8a;
	--boe-green:       #22c55e;
	--boe-yellow:      #eab308;
	--boe-red:         #ef4444;
	--boe-cyan:        #22d3ee;
	--boe-white:       #f0f8ff;
	--boe-muted:       #94a3b8;
	--boe-font:        'Segoe UI', system-ui, -apple-system, sans-serif;

	font-family:     var(--boe-font);
	background:      var(--boe-blue-dark);
	color:           var(--boe-white);
	border-radius:   16px;
	padding:         0;
	overflow:        hidden;
	box-shadow:      0 8px 40px rgba(0,0,0,0.5);
	max-width:       1200px;
	margin:          0 auto 2rem;
}

/* ===== HEADER ===== */
.boe-ei-header {
	display:          flex;
	align-items:      center;
	justify-content:  space-between;
	flex-wrap:        wrap;
	gap:              12px;
	background:       linear-gradient(135deg, #0a1628 0%, #0f2348 100%);
	padding:          20px 28px;
	border-bottom:    2px solid var(--boe-blue-border);
}

.boe-ei-header-left,
.boe-ei-header-right {
	display:    flex;
	align-items: center;
	gap:         16px;
}

.boe-ei-logo {
	display:    flex;
	align-items: center;
	gap:         12px;
}

.boe-ei-logo-icon {
	font-size:   2rem;
	filter:      drop-shadow(0 0 8px #22d3ee);
}

.boe-ei-logo-title {
	display:     block;
	font-size:   1.3rem;
	font-weight: 800;
	color:       var(--boe-white);
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.boe-ei-logo-sub {
	display:     block;
	font-size:   0.75rem;
	color:       var(--boe-cyan);
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.boe-ei-last-updated {
	font-size:   0.78rem;
	color:       var(--boe-muted);
}

.boe-ei-powered-by {
	background:   var(--boe-cyan);
	color:        var(--boe-blue-dark) !important;
	font-weight:  700;
	font-size:    0.78rem;
	padding:      5px 14px;
	border-radius: 20px;
	text-decoration: none;
	text-transform:  uppercase;
	letter-spacing:  0.05em;
	transition:   background 0.2s, transform 0.2s;
}

.boe-ei-powered-by:hover {
	background:  #67e8f9;
	transform:   translateY(-1px);
}

/* ===== OVERALL GAUGE PANEL ===== */
.boe-ei-overall {
	background:    linear-gradient(180deg, #0d2347 0%, #0b1e3d 100%);
	text-align:    center;
	padding:       32px 24px 24px;
	border-bottom: 2px solid var(--boe-blue-border);
	position:      relative;
}

.boe-ei-overall-label {
	font-size:      0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color:          var(--boe-cyan);
	margin-bottom:  8px;
}

.boe-ei-gauge-wrap {
	display:       inline-block;
	width:         220px;
	max-width:     100%;
}

.boe-ei-gauge {
	width:    100%;
	height:   auto;
	overflow: visible;
}

.boe-ei-gauge-arc {
	transition: stroke-dashoffset 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.boe-ei-overall-score {
	font-size:   3.5rem;
	font-weight: 900;
	color:       var(--boe-cyan);
	line-height: 1;
	margin:      -4px 0 8px;
	text-shadow: 0 0 20px rgba(34, 211, 238, 0.4);
}

.boe-ei-overall-severity {
	display:         inline-block;
	font-size:       1rem;
	font-weight:     800;
	letter-spacing:  0.15em;
	padding:         6px 28px;
	border-radius:   6px;
	text-transform:  uppercase;
}

.boe-ei-overall-severity.boe-ei-sev-low  { background: var(--boe-green);  color: #052e16; }
.boe-ei-overall-severity.boe-ei-sev-med  { background: var(--boe-yellow); color: #422006; }
.boe-ei-overall-severity.boe-ei-sev-high { background: var(--boe-red);    color: #fff; }

/* ===== GRID LAYOUT ===== */
.boe-ei-grid {
	display:    grid;
	gap:        0;
}

.boe-ei-cols-1 { grid-template-columns: 1fr; }
.boe-ei-cols-2 { grid-template-columns: repeat(2, 1fr); }
.boe-ei-cols-3 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 768px) {
	.boe-ei-cols-2,
	.boe-ei-cols-3 { grid-template-columns: 1fr; }
}

@media (min-width: 769px) and (max-width: 1024px) {
	.boe-ei-cols-3 { grid-template-columns: repeat(2, 1fr); }
}

/* ===== CATEGORY SECTIONS ===== */
.boe-ei-category {
	padding:     0;
	border-right: 1px solid var(--boe-blue-border);
	border-bottom: 1px solid var(--boe-blue-border);
}

.boe-ei-category-title {
	font-size:       0.7rem;
	text-transform:  uppercase;
	letter-spacing:  0.15em;
	color:           var(--boe-cyan);
	background:      rgba(34, 211, 238, 0.06);
	margin:          0;
	padding:         10px 20px;
	border-bottom:   1px solid var(--boe-blue-border);
	font-weight:     600;
}

.boe-ei-category-indicators {
	padding: 0;
}

/* ===== INDICATOR CARD ===== */
.boe-ei-card {
	padding:        16px 20px;
	border-bottom:  1px solid rgba(30, 74, 138, 0.5);
	transition:     background 0.2s;
}

.boe-ei-card:hover {
	background: rgba(34, 211, 238, 0.04);
}

.boe-ei-card:last-child {
	border-bottom: none;
}

.boe-ei-card-header {
	display:         flex;
	align-items:     center;
	gap:             10px;
	margin-bottom:   12px;
}

.boe-ei-card-icon {
	flex-shrink:  0;
	width:        28px;
	height:       28px;
	color:        var(--boe-cyan);
	opacity:      0.85;
}

.boe-ei-card-icon svg {
	width:  100%;
	height: 100%;
}

.boe-ei-card-meta {
	flex:        1;
	min-width:   0;
}

.boe-ei-card-title {
	display:      block;
	font-size:    0.88rem;
	font-weight:  700;
	color:        var(--boe-white);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	white-space:  nowrap;
	overflow:     hidden;
	text-overflow: ellipsis;
}

.boe-ei-card-unit {
	display:   block;
	font-size: 0.68rem;
	color:     var(--boe-muted);
	margin-top: 1px;
}

.boe-ei-card-right {
	display:    flex;
	flex-direction: column;
	align-items: flex-end;
	gap:         2px;
	flex-shrink: 0;
}

.boe-ei-card-value {
	font-size:   1.5rem;
	font-weight: 900;
	color:       var(--boe-white);
	line-height: 1;
}

.boe-ei-card-trend {
	font-size:   0.75rem;
	font-weight: 700;
}

.boe-ei-trend-up      { color: var(--boe-green);  }
.boe-ei-trend-down    { color: var(--boe-red);    }
.boe-ei-trend-neutral { color: var(--boe-muted);  }

/* ===== GRADIENT BAR — CROSS-BROWSER (Chrome, Firefox, Safari, Edge) =====
 *
 * Technique: CSS pseudo-elements on the track div. No child fill div needed.
 *
 * ::before  = full-width green→yellow→red gradient (always 100% of track)
 * ::after   = dark overlay anchored to the RIGHT, covering (100% - fill%)
 *             Width driven by --boe-fill CSS custom property set inline on track.
 *
 * Why this works everywhere:
 * - Gradient is always 100% wide — no background-size tricks, no fixed pixels
 * - Dark overlay clips it — works identically in Firefox, Chrome, Safari
 * - CSS custom properties supported in all modern browsers
 * - Zero JavaScript required
 * ========================================================================= */
.boe-ei-bar-wrap {
	margin-bottom: 10px;
}

.boe-ei-bar-track {
	position:         relative;
	height:           16px;
	border-radius:    8px;
	overflow:         hidden;
	background-color: rgba(255, 255, 255, 0.08);
	/* --boe-fill is set inline via PHP, e.g. style="--boe-fill:45%" */
}

/* Full-width gradient layer — always spans entire track */
.boe-ei-bar-track::before {
	content:       '';
	position:      absolute;
	inset:         0;
	border-radius: inherit;
	background:    linear-gradient(
		to right,
		#16a34a  0%,
		#22c55e 18%,
		#a3e635 35%,
		#eab308 52%,
		#f97316 70%,
		#ef4444 85%,
		#dc2626 100%
	);
}

/* Dark overlay — covers the unfilled right portion */
.boe-ei-bar-track::after {
	content:          '';
	position:         absolute;
	top:              0;
	right:            0;
	bottom:           0;
	width:            calc(100% - var(--boe-fill, 0%));
	background-color: #0b1e3d;
	border-radius:    0 8px 8px 0;
	transition:       width 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.boe-ei-bar-labels {
	display:         flex;
	justify-content: space-between;
	font-size:       0.6rem;
	color:           var(--boe-muted);
	margin-top:      3px;
	padding:         0 2px;
}

/* ===== SEVERITY BADGE ON CARD ===== */
.boe-ei-card-desc {
	font-size:   0.7rem;
	color:       var(--boe-muted);
	margin:      4px 0 8px;
	line-height: 1.4;
}

.boe-ei-card-severity {
	display:         inline-block;
	font-size:       0.65rem;
	font-weight:     800;
	letter-spacing:  0.12em;
	padding:         2px 10px;
	border-radius:   4px;
	text-transform:  uppercase;
}

.boe-ei-sev-low  { background: rgba(34,197,94,0.15);  color: #4ade80; border: 1px solid rgba(34,197,94,0.3); }
.boe-ei-sev-med  { background: rgba(234,179,8,0.15);  color: #facc15; border: 1px solid rgba(234,179,8,0.3); }
.boe-ei-sev-high { background: rgba(239,68,68,0.15);  color: #f87171; border: 1px solid rgba(239,68,68,0.3); }

/* ===== FOOTER ===== */
.boe-ei-footer {
	background:   rgba(0,0,0,0.3);
	padding:      16px 28px;
	border-top:   1px solid var(--boe-blue-border);
	text-align:   center;
}

.boe-ei-footer p {
	font-size:  0.73rem;
	color:      var(--boe-muted);
	margin:     0;
	line-height: 1.6;
}

.boe-ei-footer a {
	color:           var(--boe-cyan);
	text-decoration: none;
}

.boe-ei-footer a:hover {
	text-decoration: underline;
}

/* ===== NO DATA ===== */
.boe-ei-no-data {
	text-align:   center;
	padding:      40px;
	color:        var(--boe-muted);
	font-style:   italic;
}