/* =========================================================
   JUMBO BLOCK® Control Center – CSS Overlay
   Loads AFTER /css/admin.css
   CSP-safe: no inline styles required
   ========================================================= */

/* Page role hint (optional) */
body[data-role="control"] .header-title-wrap .header-subtitle {
  opacity: 0.85;
}

/* Background layer (same pattern as admin/index)
   NOTE: requires <div class="bg-layer"></div> in control.html */
.bg-layer {
  position: fixed;
  inset: 0;
  background: url("/images/background.jpg") no-repeat center center fixed;
  background-size: cover;
/* opacity bestimmt die Transparenz: 0.25 bis 0.70 (normal), 1.00 ohne Transparenz */
  opacity: 0.65; 
  z-index: -1;
}

body[data-theme="dark"] .bg-layer,
body.theme-dark .bg-layer {
  opacity: 0.35;
}

/* Layout: keep admin-like spacing (SCOPED!) */
body[data-role="control"] {
  margin: 20px;
}

@media (max-width: 600px) {
  body[data-role="control"] { margin: 10px; }
}

/* ===== Header: clamp logo + align controls (admin-like) ===== */
body[data-role="control"] header.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}

body[data-role="control"] .header-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

body[data-role="control"] .header-logo {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  display: block;
}

body[data-role="control"] .header-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

body[data-role="control"] .header-right {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  align-items: flex-end;
}

body[data-role="control"] .header-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

/* Ensure control toggles look like admin mini buttons */
body[data-role="control"] .lang-switch,
body[data-role="control"] .theme-switch {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

/* Mobile stacking */
@media (max-width: 720px) {
  body[data-role="control"] header.header {
    flex-direction: column;
    align-items: flex-start;
  }
  body[data-role="control"] .header-right {
    align-items: flex-start;
    width: 100%;
  }
}

/* ===== Main layout ===== */
body[data-role="control"] .grid-2-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

@media (max-width: 980px) {
  body[data-role="control"] .grid-2-col { grid-template-columns: 1fr; }
}

/* KPI cards
   Your HTML has 4 KPI cards. If you want 2 per row, keep repeat(2,...).
   If you want 4 in one row on desktop, switch to repeat(4,...). */
body[data-role="control"] .kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 520px) {
  body[data-role="control"] .kpi-grid { grid-template-columns: 1fr; }
}

body[data-role="control"] .kpi-card {
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 12px;
  padding: 12px;
}

body[data-theme="dark"] body[data-role="control"] .kpi-card,
body.theme-dark body[data-role="control"] .kpi-card {
  border-color: rgba(255,255,255,0.10);
}

body[data-role="control"] .kpi-label { opacity: 0.7; font-size: 0.95rem; }
body[data-role="control"] .kpi-value { font-size: 1.05rem; font-weight: 650; margin-top: 4px; line-height: 1.35; }
body[data-role="control"] .kpi-sub { opacity: 0.55; font-size: 0.90rem; margin-top: 2px; }

/* Separators */
body[data-role="control"] .divider {
  height: 1px;
  margin: 14px 0;
  background: rgba(0,0,0,0.12);
}
body[data-theme="dark"] body[data-role="control"] .divider,
body.theme-dark body[data-role="control"] .divider {
  background: rgba(255,255,255,0.10);
}

/* Control blocks */
body[data-role="control"] .control-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

body[data-role="control"] .control-box {
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 12px;
  padding: 12px;
}
body[data-theme="dark"] body[data-role="control"] .control-box,
body.theme-dark body[data-role="control"] .control-box {
  border-color: rgba(255,255,255,0.10);
}

body[data-role="control"] .form-row { display: grid; gap: 6px; margin-top: 10px; }
body[data-role="control"] .select { width: 100%; }

/* Buttons */
body[data-role="control"] .button-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }

/* Text helpers */
body[data-role="control"] .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
body[data-role="control"] .small { font-size: 0.9em; opacity: 0.85; }

body[data-role="control"] .clean-list { list-style: none; padding: 0; margin: 8px 0 0 0; }
body[data-role="control"] .clean-list li { margin: 6px 0; }

/* Proposals */
body[data-role="control"] .proposal-card {
  border: 1px dashed rgba(0,0,0,0.20);
  border-radius: 12px;
  padding: 12px;
  margin-top: 8px;
}
body[data-theme="dark"] body[data-role="control"] .proposal-card,
body.theme-dark body[data-role="control"] .proposal-card {
  border-color: rgba(255,255,255,0.18);
}

body[data-role="control"] .proposal-title { font-weight: 800; }
body[data-role="control"] .proposal-reason { opacity: 0.85; margin-top: 6px; }
body[data-role="control"] .proposal-meta { opacity: 0.7; margin-top: 8px; }

/* Output */
body[data-role="control"] .output {
  white-space: pre-wrap;
}

/* KPI: allow multi-line values (Block / Plant) */
body[data-role="control"] #kpi-fill-value {
  white-space: pre-line;
}

/* =========================================================
   Plant model – group cards (CSP-safe, no inline styles)
   ========================================================= */

body[data-role="control"] .plant-group-status {
  margin-top: 6px;
}

body[data-role="control"] .plant-group-median {
  margin-top: 8px;
}

/* =========================================================
   Footer Center Overrides (scoped, bulletproof)
   ========================================================= */

#footer-slot .footer-panel-center {
  text-align: center !important;
}

/* Partner */
#footer-slot .footer-partners {
  text-align: center !important;
}

#footer-slot .footer-logos {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 18px !important;
}

/* Version/Release line */
#footer-slot .footer-meta-left {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
  text-align: center !important;
}

#footer-slot .footer-meta-spacer {
  display: inline-block !important;
  width: 12px !important;
}

/* Badge */
#footer-slot .footer-info-bar {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
}

/* Action buttons */
#footer-slot .footer-meta-row,
#footer-slot .footer-meta-row-center {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  text-align: center !important;
}

/* Tagline + copyright */
#footer-slot .footer-tagline,
#footer-slot .footer-bottom-row,
#footer-slot .footer-bottom-row-center {
  text-align: center !important;
}

/* =========================================================
   Footer KRITIS / NIS-2 Badge – multi-line safe button
   Fixes overflow on small screens
   ========================================================= */

#footer-slot .nis2-badge {
  display: inline-block;
  max-width: 100%;
  white-space: normal;          /* allow line breaks */
  word-break: break-word;       /* break long words if needed */
  overflow-wrap: anywhere;      /* last-resort safety */
  text-align: center;

  padding: 8px 14px;
  line-height: 1.35;

  box-sizing: border-box;
}

/* Ensure parent does not force single-line layout */
#footer-slot .footer-info-bar,
#footer-slot .footer-info-bar a {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;              /* IMPORTANT */
  max-width: 100%;
}

/* On very small screens: slightly tighter padding */
@media (max-width: 480px) {
  #footer-slot .nis2-badge {
    padding: 8px 10px;
    font-size: 0.9rem;
  }
}

/* =========================================================
   Compact spacing override (wins against later rules)
   ========================================================= */

/* tighten vertical gaps between all major blocks */
.section{
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}

/* compact variant even tighter */
.section.compact{
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

/* reduce header-to-content gap */
.header-bar{
  margin-bottom: 12px !important;
}

/* if any panels add extra outer spacing, keep it tight */
.panel{
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* CONTROL-CENTER – CSP-safe helper (replaces removed inline style) */
.plant-group-fill{
  margin-top: 6px;
  opacity: 0.85;
}

/* =========================
   Risk Visual Intensity (CONTROL)
   Force-visible stage effect (no inline styles)
   ========================= */

/* Make sure we can show a strong left bar even if existing borders are dashed */
#panel-control .proposal-card {
  position: relative;
  transition: box-shadow 0.35s ease, transform 0.35s ease;
}

/* The colored bar is drawn via inset shadow, independent of border styles */
#panel-control .proposal-card.risk-low {
  box-shadow: inset 10px 0 0 rgba(46, 204, 113, 0.95) !important;
}

#panel-control .proposal-card.risk-watch {
  box-shadow: inset 10px 0 0 rgba(241, 196, 15, 0.95) !important;
}

#panel-control .proposal-card.risk-elevated {
  box-shadow: inset 10px 0 0 rgba(230, 126, 34, 0.95) !important;
}

#panel-control .proposal-card.risk-high {
  box-shadow: inset 10px 0 0 rgba(231, 76, 60, 0.95) !important;
}

#panel-control .proposal-card.risk-critical {
  box-shadow:
    inset 10px 0 0 rgba(142, 0, 0, 0.95),
    0 0 18px rgba(200, 0, 0, 0.35) !important;
  transform: translateY(-1px);
}

/* =========================
   System Risk Block
   ========================= */

.system-risk-block {
  margin-bottom: 18px;
  padding: 14px 18px;
  border-radius: 8px;
  background: var(--panel-bg, rgba(245,247,250,0.9));
  transition: all 0.3s ease;
}

.system-risk-block .risk-title {
  font-weight: 600;
  margin-bottom: 6px;
}

.system-risk-block .risk-score {
  font-size: 1.2rem;
  font-weight: 600;
}

.system-risk-block .risk-class {
  font-size: 0.9rem;
  opacity: 0.75;
}

/* reuse risk bands */

.system-risk-block.risk-low {
  border-left: 6px solid #2ecc71;
}

.system-risk-block.risk-watch {
  border-left: 6px solid #f1c40f;
}

.system-risk-block.risk-elevated {
  border-left: 6px solid #e67e22;
}

.system-risk-block.risk-high {
  border-left: 6px solid #e74c3c;
}

.system-risk-block.risk-critical {
  border-left: 6px solid #8e0000;
  box-shadow: 0 0 18px rgba(200,0,0,0.35);
}

/* Proposal Box (System proposals) – risk bands mirror */

.proposal-box{
  border-radius: 8px;
  background: rgba(245,247,250,0.9);
}

/* inset-band links */
.proposal-box.risk-low{ box-shadow: inset 8px 0 0 rgba(46, 204, 113, 0.95); }
.proposal-box.risk-watch{ box-shadow: inset 8px 0 0 rgba(241, 196, 15, 0.95); }
.proposal-box.risk-elevated{ box-shadow: inset 8px 0 0 rgba(230, 126, 34, 0.95); }
.proposal-box.risk-high{ box-shadow: inset 8px 0 0 rgba(231, 76, 60, 0.95); }
.proposal-box.risk-critical{
  box-shadow: inset 8px 0 0 rgba(142, 0, 0, 0.95), 0 0 14px rgba(200,0,0,0.25);
}

/* Monitor risk mirror line */
.monitor-risk-line{
  margin: 8px 0 10px;
  padding: 8px 10px;
  border-radius: 8px;
  font-weight: 600;
  background: rgba(245,247,250,0.9);
}

.monitor-risk-line.risk-low{ box-shadow: inset 8px 0 0 rgba(46, 204, 113, 0.95); }
.monitor-risk-line.risk-watch{ box-shadow: inset 8px 0 0 rgba(241, 196, 15, 0.95); }
.monitor-risk-line.risk-elevated{ box-shadow: inset 8px 0 0 rgba(230, 126, 34, 0.95); }
.monitor-risk-line.risk-high{ box-shadow: inset 8px 0 0 rgba(231, 76, 60, 0.95); }
.monitor-risk-line.risk-critical{
  box-shadow: inset 8px 0 0 rgba(142, 0, 0, 0.95), 0 0 14px rgba(200,0,0,0.25);
}

/* --- Control Center: ensure operator note button is text-capable (DE/EN) --- */
body[data-role="control"] #btn-operator-note{
  width: auto;
  min-width: 180px;
  padding: 10px 14px;
  white-space: nowrap;
}

/* === FAILSAFE: System Risk block must be readable in DARK theme === */
body[data-theme="dark"] #system-risk-block {
  background: rgba(22, 24, 28, 0.92) !important;
  color: rgba(235, 238, 242, 0.96) !important;
}

body[data-theme="dark"] #system-risk-block .risk-title,
body[data-theme="dark"] #system-risk-block .risk-score,
body[data-theme="dark"] #system-risk-block .risk-class {
  color: rgba(235, 238, 242, 0.96) !important;
}

body[data-theme="dark"] #system-risk-block .risk-class {
  opacity: 0.88 !important;
}

/* Light-mode polish: System Risk block should be neutral white */
body[data-theme="light"] #system-risk-block {
  background: rgba(255, 255, 255, 0.96) !important;
}