:root {
  /* ------------------------------------------------------------------ */
  /*  CROSTORION brand palette                                           */
  /*                                                                     */
  /*  70% deep green / 20% off-white / 10% gold.                         */
  /*                                                                     */
  /*  The 70% is the *surface*: page, sidebar and cards are deep green    */
  /*  rather than neutral black. The 20% is the reading layer -- off      */
  /*  white text, which lands at 11:1 on the card and is what the         */
  /*  operator actually looks at. The 10% is gold, kept for accents       */
  /*  only: active nav, card rules, focus. Spend it anywhere else and it  */
  /*  stops meaning "look here".                                          */
  /*                                                                     */
  /*  Status colours are DERIVED from the brand hues but lifted until     */
  /*  they clear 4.5:1 on the card. Energy Green as shipped is 3.07:1 on  */
  /*  deep green -- brand-correct and unreadable, which on a screen that  */
  /*  reports plant state is not a trade worth making.                    */
  /* ------------------------------------------------------------------ */

  /* --- brand, as supplied ------------------------------------------- */
  --brand-deep-green: #123D32;
  --brand-forest: #1D5545;
  --brand-energy: #3E8F6B;
  --brand-gold: #B28F50;
  --brand-light-gold: #D0B77A;
  --brand-off-white: #F5F5F1;
  --brand-green-black: #091F19;
  /* Pale sage: the off-white tinted toward the greens, so a fourth accent can
     stand apart from grid/CHP/BESS without importing a colour from outside. */
  --brand-mist: #B3C7BE;
  --ems-chart-grey: #C4CBCD;   /* neutral series colour, no status meaning */
  --ems-chart-blue: #5B9BD5;   /* third strategy colour; nowhere else */
  --ems-chart-sell: #FFB833;   /* dispatch bars: sell / discharge (bright amber) */
  --ems-chart-charge: #37AFA5; /* dispatch bars: charge (cyan, the product's charging colour) */

  /* --- surfaces: the 70% -------------------------------------------- */
  --ems-bg: #091F19;            /* page -- Deep Green Black */
  --ems-panel: #123D32;         /* card -- Deep Green, the dominant surface */
  --ems-panel-2: #164A3C;       /* card top edge, so the panel reads top-lit */
  --ems-border: #1D5545;        /* Forest Green -- visible, not a suggestion */
  --ems-border-hot: #3E8F6B;    /* Energy Green -- focus and active edges */

  /* --- reading layer: the 20% --------------------------------------- */
  --ems-text: #F5F5F1;          /* Off White, 11.05:1 on the card */
  --ems-text-strong: #FFFFFF;
  --ems-muted: #9DB5AB;         /* green-tinted grey, 5.54:1 -- still readable */

  /* --- accent: the 10% ---------------------------------------------- */
  --ems-gold: #B28F50;          /* rules, dividers, decoration */
  --ems-gold-bright: #D0B77A;   /* gold used as text or icon, 6.17:1 */

  /* --- status: derived from brand hues, lifted to 4.5:1 on the card -- */
  --ems-green: #34B47B;         /* running / export / OK      4.58:1 */
  --ems-cyan: #37AFA5;          /* charging / import / info   4.51:1 (teal, in family) */
  --ems-amber: #D0B77A;         /* warning / stale            6.17:1 (Light Gold) */
  --ems-red: #FF6B5E;           /* fault -- the one colour that must never be subtle */

  /* --- shell -------------------------------------------------------- */
  --ems-menu-text: #F5F5F1;
  --ems-shell-1: #0D2A22;       /* sidebar top */
  --ems-shell-2: #071A15;       /* sidebar foot, darker than the page */
  --ems-submenu-bg: #0F3329;

  /* --- derived surfaces (kept for older rules) ---------------------- */
  --ems-surf-1: rgba(9, 31, 25, 0.96);
  --ems-surf-2: rgba(18, 61, 50, 0.98);
  --ems-surf-3: rgba(9, 31, 25, 0.98);
  --ems-surf-4: rgba(22, 74, 60, 0.98);
  --ems-surf-5: rgba(13, 42, 34, 0.98);
  --ems-surf-6: rgba(9, 31, 25, 0.92);
  --ems-surf-7: rgba(13, 42, 34, 0.94);
  --ems-surf-8: rgba(9, 31, 25, 0.92);
  --ems-ovl-025: rgba(245, 245, 241, 0.025);
  --ems-ovl-028: rgba(245, 245, 241, 0.028);
  --ems-ovl-03: rgba(245, 245, 241, 0.03);
  --ems-ovl-035: rgba(245, 245, 241, 0.035);
  --ems-ovl-04: rgba(245, 245, 241, 0.04);
  --ems-ovl-045: rgba(245, 245, 241, 0.045);
  --ems-ovl-06: rgba(245, 245, 241, 0.06);
  --ems-ovl-07: rgba(245, 245, 241, 0.07);
  --ems-ovl-075: rgba(245, 245, 241, 0.075);
  --ems-ovl-08: rgba(245, 245, 241, 0.08);
  --ems-ovl-10: rgba(245, 245, 241, 0.1);
  --ems-ovl-14: rgba(245, 245, 241, 0.14);
}

html[data-ems-theme="light"] {
  /* The light theme is where Off White genuinely is the page background.
     The sidebar stays deep green in both themes: it is the brand, and a
     white-on-white shell would leave the product with no identity at all. */
  --ems-bg: #F5F5F1;            /* Off White */
  --ems-panel: #FFFFFF;
  --ems-panel-2: #FAFAF7;
  --ems-border: #DCDCD4;
  --ems-border-hot: #3E8F6B;
  --ems-text: #0E2A22;
  --ems-muted: #566B62;
  /* Status colours darkened instead of lifted -- same hues, inverted ground. */
  --ems-green: #157A52;
  --ems-cyan: #10756D;
  --ems-amber: #8A6B28;
  --ems-red: #C0392B;
  --ems-gold: #8A6B28;
  --ems-gold-bright: #B28F50;
  --ems-text-strong: #091F19;
  --ems-menu-text: #F5F5F1;
  --ems-shell-1: #0D2A22;
  --ems-shell-2: #071A15;
  --ems-submenu-bg: #0F3329;
  --ems-surf-1: rgba(255, 255, 255, 0.96);
  --ems-surf-2: rgba(255, 255, 255, 0.98);
  --ems-surf-3: rgba(244, 247, 250, 0.98);
  --ems-surf-4: rgba(248, 250, 252, 0.98);
  --ems-surf-5: rgba(255, 255, 255, 0.98);
  --ems-surf-6: rgba(248, 250, 252, 0.95);
  --ems-surf-7: rgba(244, 247, 250, 0.96);
  --ems-surf-8: rgba(240, 244, 248, 0.95);
  --ems-ovl-025: rgba(0, 0, 0, 0.04);
  --ems-ovl-028: rgba(0, 0, 0, 0.04);
  --ems-ovl-03: rgba(0, 0, 0, 0.04);
  --ems-ovl-035: rgba(0, 0, 0, 0.05);
  --ems-ovl-04: rgba(0, 0, 0, 0.05);
  --ems-ovl-045: rgba(0, 0, 0, 0.06);
  --ems-ovl-06: rgba(0, 0, 0, 0.07);
  --ems-ovl-07: rgba(0, 0, 0, 0.08);
  --ems-ovl-075: rgba(0, 0, 0, 0.09);
  --ems-ovl-08: rgba(0, 0, 0, 0.10);
  --ems-ovl-10: rgba(0, 0, 0, 0.10);
  --ems-ovl-14: rgba(0, 0, 0, 0.12);
}

html,
body {
  background: var(--ems-bg) !important;
  color: var(--ems-text) !important;
}

body {
  letter-spacing: 0;
}

a,
a:hover {
  color: var(--ems-text);
}

.pcoded-navbar,
.pcoded-navbar.navbar-dark,
.pcoded-navbar.menupos-fixed {
  /* Deep green, darkening downwards, with a single gold hairline separating
     it from the content. The gold line is most of the brand's 10% budget --
     it runs the full height of the product and nothing else needs to shout. */
  background: linear-gradient(180deg,
              var(--ems-shell-1) 0%,
              #0A2219 55%,
              var(--ems-shell-2) 100%) !important;
  border-right: 1px solid rgba(178, 143, 80, 0.26);
  box-shadow: 1px 0 0 rgba(178, 143, 80, 0.07),
              16px 0 48px rgba(0, 0, 0, 0.45);
}

.pcoded-navbar .navbar-brand,
.pcoded-navbar .navbar-wrapper {
  background: transparent !important;
}

.pcoded-navbar .navbar-brand {
  border-bottom: 1px solid rgba(178, 143, 80, 0.22);
  background: linear-gradient(180deg, rgba(18, 61, 50, 0.55), transparent) !important;
}

.b-brand {
  gap: 10px;
}

.b-brand .ems-brand-logo {
  display: block;
  width: 34px;
  height: 34px;
  max-width: 34px;
  max-height: 34px;
  object-fit: contain;
  flex: 0 0 34px;
}

.b-brand .b-bg {
  background: linear-gradient(135deg, var(--brand-energy), var(--brand-deep-green)) !important;
  box-shadow: 0 0 20px rgba(62, 143, 107, 0.28);
}

.b-brand .b-title {
  color: var(--ems-text) !important;
  font-weight: 700;
  letter-spacing: 0;
  /* "Green Gold CHIMERA" is 18 characters; at the template's 18px it runs
     past the sidebar edge under the header buttons. 15px fits with room. */
  font-size: 15px;
  margin-left: 6px;
  white-space: nowrap;
}

.pcoded-navbar .pcoded-inner-navbar > li.pcoded-menu-caption > label {
  /* Gold, not green: green now means "running" everywhere else, and a section
     heading that borrows a status colour teaches the wrong thing. */
  color: var(--ems-gold-bright) !important;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  opacity: 0.9;
}

.pcoded-navbar .pcoded-inner-navbar li > a {
  color: var(--ems-menu-text) !important;
}

.pcoded-navbar .pcoded-inner-navbar li > a {
  position: relative;
  transition: background .16s ease, color .16s ease;
}

.pcoded-navbar .pcoded-inner-navbar li > a:hover {
  color: var(--ems-text) !important;
  background: rgba(62, 143, 107, 0.14) !important;
}

.pcoded-navbar .pcoded-inner-navbar li.pcoded-trigger > a,
.pcoded-navbar .pcoded-inner-navbar li.active > a {
  color: var(--ems-text-strong) !important;
  background: linear-gradient(90deg,
              rgba(178, 143, 80, 0.16),
              rgba(29, 85, 69, 0.30) 42%,
              transparent) !important;
}

/* A gold rail on the active row. One clear "you are here" marker instead of a
   tinted block that competes with the status colours in the content area. */
.pcoded-navbar .pcoded-inner-navbar > li.active > a::before,
.pcoded-navbar .pcoded-inner-navbar > li.pcoded-trigger > a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: var(--ems-gold);
  box-shadow: 0 0 10px rgba(178, 143, 80, 0.5);
}

.pcoded-navbar .pcoded-inner-navbar > li.active > a .pcoded-micon i,
.pcoded-navbar .pcoded-inner-navbar > li.pcoded-trigger > a .pcoded-micon i {
  color: var(--ems-gold-bright) !important;
}

.pcoded-navbar .pcoded-submenu {
  background: var(--ems-submenu-bg) !important;
  box-shadow: inset 3px 0 0 rgba(178, 143, 80, 0.18);
}

.pcoded-navbar .pcoded-submenu li.active > a {
  color: var(--ems-gold-bright) !important;
  font-weight: 650;
}

.pcoded-navbar .pcoded-inner-navbar .pcoded-submenu li > a {
  padding-top: 9px;
  padding-bottom: 9px;
}

.pcoded-navbar .pcoded-inner-navbar .pcoded-submenu .pcoded-submenu li > a {
  color: var(--ems-muted) !important;
  padding-left: 74px;
}

.pcoded-micon i,
.ems-subicon {
  color: var(--brand-energy);
}

.ems-subicon {
  width: 18px;
  margin-right: 8px;
  font-size: 14px;
  vertical-align: -1px;
}

.ems-danger i,
.ems-danger .ems-subicon {
  color: var(--ems-red) !important;
}

.pcoded-header,
.pcoded-header.navbar-light {
  background: var(--ems-surf-1) !important;
  border-bottom: 1px solid rgba(55, 175, 165, 0.13);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.28);
}

.pcoded-header .navbar-nav > li > a,
.pcoded-header .dropdown-toggle,
.pcoded-header .mobile-menu,
.pcoded-header .b-title {
  color: var(--ems-text) !important;
}

.pcoded-main-container,
.pcoded-content,
.pcoded-inner-content,
.main-body,
.page-wrapper {
  background: var(--ems-bg) !important;
}

.card,
.ems-placeholder-panel {
  background: linear-gradient(180deg, var(--ems-panel-2), var(--ems-panel)) !important;
  border: 1px solid var(--ems-border) !important;
  border-radius: 8px !important;
  color: var(--ems-text) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.24);
}

.ems-page {
  min-height: calc(100vh - 190px);
}


.ems-panel-label {
  color: var(--ems-green);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}


.ems-page__status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid rgba(52, 180, 123, 0.35);
  border-radius: 999px;
  color: var(--ems-green);
  font-size: 12px;
  font-weight: 700;
}

.ems-status-dot {
  width: 8px;
  height: 8px;
  background: var(--ems-green);
  border-radius: 50%;
  box-shadow: 0 0 16px rgba(52, 180, 123, 0.8);
}

.ems-placeholder-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.ems-placeholder-panel {
  min-height: 128px;
  padding: 20px;
}

.ems-placeholder-panel strong {
  display: block;
  margin-top: 12px;
  color: var(--ems-text-strong);
  font-size: 22px;
  font-weight: 700;
}

.ems-mode-lock {
  display: inline-flex;
  align-items: center;
  color: var(--ems-amber);
  cursor: default;
}

.ems-mode-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ems-cyan);
  cursor: pointer;
  transition: color 0.16s ease, transform 0.16s ease;
}

.ems-mode-toggle:hover {
  color: var(--ems-green);
  transform: rotate(-12deg);
}

.ems-toolbar,
.ems-table-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.ems-toolbar h2,
.ems-table-header h3,
.ems-admin-card h3 {
  margin: 6px 0 0;
  color: var(--ems-text-strong);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0;
}

.ems-toolbar__actions {
  display: inline-flex;
  gap: 8px;
}

.ems-message-stack {
  display: grid;
  gap: 10px;
  margin-bottom: 16px;
}

.ems-message {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  color: var(--ems-text);
  background: rgba(55, 175, 165, 0.08);
  border: 1px solid rgba(55, 175, 165, 0.18);
  border-radius: 8px;
}

.ems-message i {
  color: var(--ems-cyan);
}

.ems-message--success {
  background: rgba(52, 180, 123, 0.08);
  border-color: rgba(52, 180, 123, 0.2);
}

.ems-message--success i {
  color: var(--ems-green);
}

.ems-message--error {
  background: rgba(255, 107, 94, 0.08);
  border-color: rgba(255, 107, 94, 0.2);
}

.ems-message--error i {
  color: var(--ems-red);
}

.ems-icon-button,
.ems-table-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: var(--ems-cyan);
  background: rgba(55, 175, 165, 0.08);
  border: 1px solid rgba(55, 175, 165, 0.24);
  border-radius: 8px;
}

.ems-table-icon {
  width: 30px;
  height: 30px;
  margin-right: 6px;
}

.ems-table-icon--danger {
  color: var(--ems-red);
  border-color: rgba(255, 107, 94, 0.28);
  background: rgba(255, 107, 94, 0.08);
}

.ems-admin-grid {
  display: grid;
  gap: 16px;
}

.ems-admin-grid--roles,
.ems-admin-grid--settings {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ems-admin-grid--keys {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ems-admin-grid--policy {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 18px;
}

.ems-admin-card {
  padding: 20px;
  background: linear-gradient(180deg, var(--ems-panel-2), var(--ems-panel));
  border: 1px solid var(--ems-border);
  border-radius: 8px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.24);
}

.ems-admin-card--wide {
  margin-top: 16px;
}

.ems-admin-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.ems-admin-card p {
  min-height: 66px;
  margin: 14px 0;
  color: var(--ems-muted);
  line-height: 1.55;
}

.ems-collapse-card {
  position: relative;
  transition: border-color 0.18s ease, background 0.18s ease, opacity 0.18s ease;
}

.ems-collapse-card > .ems-table-header,
.ems-collapse-card > .ems-admin-card__top {
  cursor: pointer;
  outline: 0;
}

.ems-collapse-card > .ems-table-header:focus-visible,
.ems-collapse-card > .ems-admin-card__top:focus-visible {
  box-shadow: 0 0 0 2px rgba(55, 175, 165, 0.2);
  border-radius: 8px;
}

.ems-collapse-card:hover {
  border-color: rgba(55, 175, 165, 0.22);
}

.ems-collapse-card.is-collapsed {
  border-color: rgba(55, 175, 165, 0.16);
}

.ems-collapse-card.is-collapsed > .ems-table-header {
  margin-bottom: 0;
}

.ems-collapse-card--compact.is-collapsed {
  min-height: 0;
}

.ems-collapse-body[hidden] {
  display: none !important;
}

.ems-collapse-toggle {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-left: auto;
  color: var(--ems-cyan);
  background: rgba(55, 175, 165, 0.08);
  border: 1px solid rgba(55, 175, 165, 0.22);
  border-radius: 8px;
  cursor: pointer;
}

.ems-collapse-toggle i {
  pointer-events: none;
  transition: transform 0.16s ease;
}

.ems-collapse-card.is-collapsed .ems-collapse-toggle i {
  transform: rotate(-90deg);
}

.ems-admin-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  color: var(--ems-cyan);
  background: rgba(55, 175, 165, 0.1);
  border: 1px solid rgba(55, 175, 165, 0.24);
  border-radius: 8px;
}

.ems-admin-card--green .ems-admin-icon,
.ems-admin-card--green .ems-admin-badge {
  color: var(--ems-green);
  border-color: rgba(52, 180, 123, 0.28);
  background: rgba(52, 180, 123, 0.08);
}

.ems-admin-card--amber .ems-admin-icon,
.ems-admin-card--amber .ems-admin-badge {
  color: var(--ems-amber);
  border-color: rgba(208, 183, 122, 0.3);
  background: rgba(208, 183, 122, 0.08);
}

.ems-admin-card--danger .ems-admin-icon,
.ems-admin-card--danger .ems-admin-badge {
  color: var(--ems-red);
  border-color: rgba(255, 107, 94, 0.3);
  background: rgba(255, 107, 94, 0.08);
}

.ems-admin-badge,
.ems-pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 8px;
  color: var(--ems-cyan);
  background: rgba(55, 175, 165, 0.08);
  border: 1px solid rgba(55, 175, 165, 0.24);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}

.ems-pill--green {
  color: var(--ems-green);
  border-color: rgba(52, 180, 123, 0.28);
  background: rgba(52, 180, 123, 0.08);
}

.ems-pill--amber {
  color: var(--ems-amber);
  border-color: rgba(208, 183, 122, 0.3);
  background: rgba(208, 183, 122, 0.08);
}

.ems-pill--red {
  color: var(--ems-red);
  border-color: rgba(255, 107, 94, 0.28);
  background: rgba(255, 107, 94, 0.08);
}

.ems-admin-badge--green {
  color: var(--ems-green);
  border-color: rgba(52, 180, 123, 0.28);
  background: rgba(52, 180, 123, 0.08);
}

.ems-admin-badge--amber {
  color: var(--ems-amber);
  border-color: rgba(208, 183, 122, 0.3);
  background: rgba(208, 183, 122, 0.08);
}

.ems-admin-badge--red {
  color: var(--ems-red);
  border-color: rgba(255, 107, 94, 0.3);
  background: rgba(255, 107, 94, 0.08);
}

.ems-admin-scope {
  min-height: 48px;
  padding: 12px;
  color: var(--ems-text-strong);
  background: var(--ems-ovl-03);
  border: 1px solid var(--ems-ovl-06);
  border-radius: 8px;
}

.ems-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.ems-table {
  width: 100%;
  min-width: 760px;
  color: var(--ems-text);
  border-collapse: collapse;
}

.ems-table th,
.ems-table td {
  padding: 13px 12px;
  border-bottom: 1px solid var(--ems-ovl-06);
  text-align: left;
  vertical-align: middle;
}

.ems-table th {
  color: var(--ems-green);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ems-site-table {
  min-width: 1320px;
}

.ems-site-address,
.ems-muted-line {
  display: block;
}

.ems-muted-line {
  margin-top: 4px;
  color: var(--ems-muted);
  font-size: 12px;
}

.ems-table-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ems-inline-form {
  display: inline-flex;
  margin: 0;
}

.ems-inline-form .ems-table-icon,
.ems-table-actions .ems-table-icon {
  margin-right: 0;
}

.ems-view-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px;
  background: var(--ems-ovl-035);
  border: 1px solid var(--ems-ovl-07);
  border-radius: 8px;
}

.ems-mode-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 8px 12px;
  color: var(--ems-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
}

.ems-mode-button.active,
.ems-mode-button:hover {
  color: var(--ems-text-strong);
  background: rgba(55, 175, 165, 0.1);
  border-color: rgba(55, 175, 165, 0.28);
}

.ems-mode-button i {
  color: var(--ems-cyan);
}

.ems-empty {
  color: var(--ems-muted);
  text-align: center !important;
}

.ems-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.ems-form-full {
  grid-column: 1 / -1;
}

.ems-form label {
  display: block;
}

.ems-form label span {
  display: block;
  margin-bottom: 8px;
  color: var(--ems-muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.ems-form input,
.ems-form select,
.ems-form textarea,
.ems-password-form input {
  width: 100%;
  padding: 10px 12px;
  color: var(--ems-text);
  background: var(--ems-ovl-04);
  border: 1px solid var(--ems-border);
  border-radius: 8px;
}

.ems-form input,
.ems-form select,
.ems-password-form input {
  height: 44px;
}

.ems-form textarea {
  min-height: 76px;
  resize: vertical;
}

.ems-form select {
  appearance: none;
}

.ems-form select option,
.ems-form select optgroup {
  color: #07111f;
  background: #f7fbff;
}

.ems-form select option:checked {
  color: #ffffff;
  background: #12324a;
}

.ems-form input:disabled {
  color: var(--ems-muted);
  cursor: not-allowed;
}

.ems-field-hint {
  display: block;
  margin-top: 6px;
  color: var(--ems-green);
  font-size: 11px;
  font-weight: 700;
}

.ems-form input:focus,
.ems-form select:focus,
.ems-form textarea:focus,
.ems-password-form input:focus {
  border-color: rgba(55, 175, 165, 0.52);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(55, 175, 165, 0.1);
}

.ems-form-grid--dense {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ems-checkline {
  display: flex !important;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin-top: 24px;
}

.ems-checkline input {
  width: 18px;
  height: 18px;
  accent-color: var(--ems-green);
}

.ems-checkline span {
  margin: 0 !important;
  color: var(--ems-text) !important;
  font-size: 13px !important;
  text-transform: none !important;
}

.ems-form-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}

.ems-user-list {
  display: grid;
  gap: 14px;
}

.ems-user-card {
  padding: 16px;
  background: var(--ems-ovl-025);
  border: 1px solid var(--ems-ovl-06);
  border-radius: 8px;
}

.ems-user-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.ems-user-card__head h4 {
  margin: 0 0 4px;
  color: var(--ems-text-strong);
  font-size: 16px;
}

.ems-user-card__head p {
  margin: 0;
  color: var(--ems-muted);
}

.ems-user-card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--ems-ovl-06);
}

.ems-password-form {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(140px, 0.8fr) auto;
  gap: 8px;
  width: min(100%, 540px);
}

.ems-empty-panel {
  padding: 24px;
  background: var(--ems-ovl-025);
  border: 1px solid var(--ems-ovl-06);
  border-radius: 8px;
}

.ems-filter-form {
  margin-bottom: 18px;
  padding: 14px;
  background: var(--ems-ovl-025);
  border: 1px solid var(--ems-ovl-06);
  border-radius: 8px;
}

.ems-setting-list {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.ems-setting-item {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 12px;
  background: var(--ems-ovl-025);
  border: 1px solid var(--ems-ovl-06);
  border-radius: 8px;
}

.ems-setting-item label {
  display: block;
}

.ems-setting-item label span {
  display: block;
  margin-bottom: 7px;
  color: var(--ems-muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.ems-setting-item input,
.ems-setting-item textarea {
  width: 100%;
  padding: 10px 12px;
  color: var(--ems-text);
  background: var(--ems-ovl-04);
  border: 1px solid var(--ems-border);
  border-radius: 8px;
}

.ems-setting-item input {
  height: 42px;
}

.ems-setting-item textarea {
  min-height: 64px;
  resize: vertical;
}

.ems-meta-list {
  display: grid;
  grid-template-columns: minmax(110px, 0.42fr) 1fr;
  gap: 10px 14px;
  margin: 16px 0 0;
}

.ems-meta-list dt {
  color: var(--ems-muted);
  font-weight: 700;
}

.ems-meta-list dd {
  margin: 0;
  color: var(--ems-text);
}

.ems-policy-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  color: var(--ems-text);
  background: rgba(52, 180, 123, 0.05);
  border: 1px solid rgba(52, 180, 123, 0.14);
  border-radius: 8px;
}

.ems-policy-item i {
  color: var(--ems-green);
}

.ems-modal .modal-content {
  color: var(--ems-text);
  background: linear-gradient(180deg, var(--ems-panel-2), var(--ems-panel));
  border: 1px solid rgba(55, 175, 165, 0.18);
  border-radius: 8px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.48);
}

.ems-modal .modal-header,
.ems-modal .modal-footer {
  border-color: var(--ems-ovl-08);
}

.ems-modal .modal-title {
  margin: 6px 0 0;
  color: var(--ems-text-strong);
  font-size: 18px;
  font-weight: 700;
}

.ems-modal-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--ems-ovl-08);
}

.ems-permission-panel {
  margin-top: 0;
}

.ems-subnav,
.ems-site-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.ems-subnav a,
.ems-site-selector a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 8px 10px;
  color: var(--ems-muted);
  background: var(--ems-ovl-035);
  border: 1px solid var(--ems-ovl-07);
  border-radius: 8px;
}

.ems-subnav a.active,
.ems-subnav a:hover,
.ems-site-selector a.active,
.ems-site-selector a:hover {
  color: var(--ems-text-strong);
  border-color: rgba(55, 175, 165, 0.34);
  background: rgba(55, 175, 165, 0.1);
}

.ems-subnav i {
  color: var(--ems-cyan);
}

.ems-site-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.ems-grid-summary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ems-grid-site-picker {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.ems-grid-site-picker__form {
  display: grid;
  grid-template-columns: minmax(260px, 520px) auto auto;
  align-items: end;
  gap: 10px;
  width: min(100%, 720px);
}

.ems-grid-site-picker__form label {
  margin: 0;
}

.ems-grid-site-picker__form label span {
  display: block;
  margin-bottom: 7px;
  color: var(--ems-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.ems-grid-site-picker__form select {
  width: 100%;
  min-height: 44px;
  color: var(--ems-text);
  background: var(--ems-surf-8);
  border: 1px solid rgba(55, 175, 165, 0.22);
  border-radius: 8px;
  padding: 0 12px;
  outline: none;
}

.ems-grid-site-picker__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.ems-grid-section {
  scroll-margin-top: 92px;
}

.ems-grid-two-column {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.ems-grid-two-column > .ems-admin-card {
  margin-top: 0;
}

.ems-site-detail-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.ems-detail-tile {
  min-height: 84px;
  padding: 14px;
  background: var(--ems-ovl-035);
  border: 1px solid var(--ems-ovl-07);
  border-radius: 8px;
}

.ems-detail-tile span {
  display: block;
  margin-bottom: 8px;
  color: var(--ems-muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.ems-detail-tile strong {
  color: var(--ems-text);
  font-size: 14px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.ems-site-empty-cta {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  border-color: rgba(52, 180, 123, 0.24);
  background: linear-gradient(135deg, rgba(52, 180, 123, 0.08), rgba(55, 175, 165, 0.06) 52%, var(--ems-panel));
}

.ems-site-empty-cta h3 {
  margin: 4px 0 6px;
  color: var(--ems-text-strong);
}

.ems-site-empty-cta p {
  min-height: 0;
  margin: 0;
}

.ems-module-selector {
  margin-bottom: 16px;
}

.ems-module-selector__form {
  display: grid;
  grid-template-columns: minmax(320px, 1.35fr) minmax(180px, 0.65fr) auto;
  align-items: end;
  gap: 12px;
}

.ems-electrical-selector .ems-module-selector__form {
  grid-template-columns: minmax(320px, 1.35fr) minmax(180px, 0.65fr) auto auto;
}

.ems-module-selector__form label {
  margin: 0;
}

.ems-module-selector__form label span {
  display: block;
  margin-bottom: 8px;
  color: var(--ems-muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.ems-module-selector__form select {
  width: 100%;
  color: var(--ems-text);
  background: var(--ems-surf-7);
  border: 1px solid rgba(55, 175, 165, 0.24);
  border-radius: 8px;
  outline: none;
}

.ems-module-site-select select {
  min-height: 56px;
  padding: 0 16px;
  font-size: 18px;
  font-weight: 800;
}

.ems-module-group-select select {
  min-height: 42px;
  padding: 0 12px;
  font-size: 13px;
}

.ems-energy-source-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.ems-energy-source-card {
  position: relative;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  min-height: 128px;
  margin: 0;
  padding: 14px;
  cursor: pointer;
  color: var(--ems-text);
  background: var(--ems-ovl-035);
  border: 1px solid var(--ems-ovl-08);
  border-radius: 8px;
}

.ems-energy-source-card input {
  position: absolute;
  inset: 10px 10px auto auto;
  width: 18px;
  height: 18px;
  accent-color: var(--ems-cyan);
}

.ems-energy-source-card .ems-admin-icon {
  width: 42px;
  height: 42px;
  margin-top: 2px;
  font-size: 20px;
  border-color: rgba(55, 175, 165, 0.26);
  background: rgba(55, 175, 165, 0.1);
}

.ems-energy-source-card__content {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.ems-energy-source-card strong {
  display: block;
  padding-right: 26px;
  color: var(--ems-text-strong);
  font-size: 14px;
  line-height: 1.25;
}

.ems-energy-source-card small {
  color: var(--ems-muted);
  font-size: 11px;
  line-height: 1.35;
}

.ems-energy-source-card__status {
  font-weight: 700;
  text-transform: uppercase;
}

.ems-energy-source-card__description {
  max-width: 34ch;
}

.ems-energy-source-card:hover,
.ems-energy-source-card:has(input:checked) {
  border-color: rgba(55, 175, 165, 0.36);
  background: rgba(55, 175, 165, 0.08);
}

.ems-energy-source-card.is-configured {
  cursor: default;
  border-color: rgba(52, 180, 123, 0.24);
  background: rgba(52, 180, 123, 0.07);
}

.ems-energy-source-card--cyan .ems-admin-icon {
  color: var(--ems-cyan);
  border-color: rgba(55, 175, 165, 0.34);
  background: rgba(55, 175, 165, 0.12);
}

.ems-energy-source-card--green .ems-admin-icon {
  color: var(--ems-green);
  border-color: rgba(52, 180, 123, 0.3);
  background: rgba(52, 180, 123, 0.1);
}

.ems-energy-source-card--amber .ems-admin-icon {
  color: var(--ems-amber);
  border-color: rgba(208, 183, 122, 0.32);
  background: rgba(208, 183, 122, 0.1);
}

.ems-energy-source-card--blue .ems-admin-icon {
  color: var(--ems-cyan);
  border-color: rgba(55, 175, 165, 0.32);
  background: rgba(55, 175, 165, 0.1);
}

.ems-energy-source-card--violet .ems-admin-icon {
  color: var(--brand-mist);
  border-color: rgba(179, 199, 190, 0.32);
  background: rgba(179, 199, 190, 0.1);
}

.ems-energy-source-card--red .ems-admin-icon {
  color: var(--ems-red);
  border-color: rgba(255, 107, 94, 0.3);
  background: rgba(255, 107, 94, 0.1);
}

.ems-energy-source-card--muted .ems-admin-icon {
  color: var(--ems-muted);
}

.ems-site-module-grid {
  margin-top: 0;
}

.ems-site-module-card {
  min-height: 100%;
}

.ems-electrical-module-warning {
  border-color: rgba(208, 183, 122, 0.34);
  background: linear-gradient(135deg, rgba(208, 183, 122, 0.12), rgba(55, 175, 165, 0.06) 52%, var(--ems-panel));
}

.ems-electrical-module-section {
  margin-top: 16px;
}

.ems-meter-section {
  margin-top: 18px;
}

.ems-meter-group {
  margin-top: 14px;
}

.ems-meter-group__title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 10px;
  color: var(--ems-cyan);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.ems-meter-group__title small {
  color: var(--ems-muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: none;
}

.ems-electrical-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.ems-electrical-summary-tile {
  min-height: 180px;
}

.ems-electrical-row-list {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.ems-electrical-row {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--ems-ovl-07);
}

.ems-electrical-row:first-of-type {
  border-top: 0;
}

.ems-electrical-row small {
  color: var(--ems-muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.ems-electrical-row strong {
  color: var(--ems-text-strong);
  font-size: 13px;
  font-weight: 700;
  text-align: right;
  overflow-wrap: anywhere;
}

.ems-electrical-module-grid {
  grid-template-columns: minmax(0, 1fr);
  margin-top: 0;
}

.ems-electrical-module-card {
  min-height: 100%;
}

.ems-electrical-module-titlebar {
  align-items: flex-start;
}

.ems-electrical-module-heading {
  display: flex;
  align-items: flex-start;
  min-width: 0;
  gap: 12px;
}

.ems-electrical-module-heading h3 {
  margin-top: 3px;
}

.ems-electrical-module-heading small {
  display: block;
  margin-top: 4px;
  color: var(--ems-muted);
  font-size: 12px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.ems-electrical-module-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-left: auto;
}

.ems-electrical-module-card--editing {
  border-color: rgba(208, 183, 122, 0.28);
  background: rgba(208, 183, 122, 0.06);
}

.ems-electrical-module-card--inactive {
  opacity: 0.78;
  border-color: rgba(208, 183, 122, 0.18);
  background: rgba(208, 183, 122, 0.035);
}

.ems-form-section-title {
  margin: 18px 0 10px;
  color: var(--ems-cyan);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.ems-form-section-title:first-of-type {
  margin-top: 0;
}

.ems-electrical-module-form {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--ems-ovl-08);
}

.ems-electrical-module-form:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.ems-electrical-module-inline-form {
  margin-top: 16px;
}

.ems-electrical-submit {
  justify-content: flex-end;
}

.ems-tariff-selector {
  margin-bottom: 16px;
}

.ems-tariff-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.ems-tariff-card {
  --tariff-accent: var(--ems-cyan);
  --tariff-soft: rgba(55, 175, 165, 0.1);
  position: relative;
  min-width: 0;
  padding: 16px;
  color: var(--ems-text);
  background:
    linear-gradient(135deg, var(--tariff-soft), var(--ems-ovl-028) 46%, var(--ems-surf-6)),
    var(--ems-panel);
  border: 1px solid var(--ems-ovl-075);
  border-top: 3px solid var(--tariff-accent);
  border-radius: 8px;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.22);
}

.ems-tariff-card--cyan {
  --tariff-accent: var(--ems-cyan);
  --tariff-soft: rgba(55, 175, 165, 0.13);
}

.ems-tariff-card--green {
  --tariff-accent: var(--ems-green);
  --tariff-soft: rgba(52, 180, 123, 0.12);
}

.ems-tariff-card--amber {
  --tariff-accent: var(--ems-amber);
  --tariff-soft: rgba(208, 183, 122, 0.13);
}

.ems-tariff-card--blue {
  --tariff-accent: #37AFA5;
  --tariff-soft: rgba(55, 175, 165, 0.13);
}

.ems-tariff-card--violet {
  --tariff-accent: #B3C7BE;
  --tariff-soft: rgba(179, 199, 190, 0.13);
}

.ems-tariff-card--red {
  --tariff-accent: var(--ems-red);
  --tariff-soft: rgba(255, 107, 94, 0.13);
}

.ems-tariff-card--teal {
  --tariff-accent: #4AA37C;
  --tariff-soft: rgba(74, 163, 124, 0.13);
}

.ems-tariff-card--indigo {
  --tariff-accent: #8FB8A6;
  --tariff-soft: rgba(143, 184, 166, 0.13);
}

.ems-tariff-card--slate {
  --tariff-accent: #94a3b8;
  --tariff-soft: rgba(148, 163, 184, 0.13);
}

.ems-tariff-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.ems-tariff-card__title {
  display: flex;
  align-items: flex-start;
  min-width: 0;
  gap: 12px;
}

.ems-tariff-card__title h3 {
  margin: 2px 0 0;
  color: var(--ems-text-strong);
  font-size: 17px;
  font-weight: 800;
}

.ems-tariff-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  color: var(--ems-text-strong);
  background: color-mix(in srgb, var(--tariff-accent) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--tariff-accent) 48%, transparent);
  border-radius: 8px;
  flex: 0 0 38px;
  box-shadow: 0 0 22px color-mix(in srgb, var(--tariff-accent) 24%, transparent);
}

.ems-tariff-card__status {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 5px 8px;
  color: var(--tariff-accent);
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid color-mix(in srgb, var(--tariff-accent) 34%, transparent);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  white-space: nowrap;
}

.ems-tariff-card__description {
  min-height: 42px;
  margin: 12px 0 10px;
  color: var(--ems-muted);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.45;
}

.ems-tariff-card__unit {
  display: inline-flex;
  align-items: center;
  margin-bottom: 14px;
  padding: 6px 9px;
  color: var(--ems-text-strong);
  background: var(--ems-ovl-045);
  border: 1px solid color-mix(in srgb, var(--tariff-accent) 24%, transparent);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 800;
}

.ems-tariff-form {
  margin-top: 0;
}

.ems-tariff-form__grid {
  grid-template-columns: 1fr;
  gap: 12px;
}

.ems-tariff-form label small {
  display: block;
  margin-top: 6px;
  color: color-mix(in srgb, var(--tariff-accent) 74%, #ffffff);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.35;
}

.ems-tariff-card__actions {
  justify-content: flex-end;
  margin-top: 14px;
}

.ems-device-meter-table {
  min-width: 1240px;
}

.ems-meter-mode-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.ems-meter-mode-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  width: 100%;
  min-height: 112px;
  padding: 14px;
  color: var(--ems-text);
  background: var(--ems-ovl-035);
  border: 1px solid var(--ems-ovl-08);
  border-radius: 8px;
  text-align: left;
}

.ems-meter-mode-card i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  color: var(--ems-cyan);
  background: rgba(55, 175, 165, 0.08);
  border: 1px solid rgba(55, 175, 165, 0.22);
  border-radius: 8px;
  grid-row: span 2;
}

.ems-meter-mode-card span {
  color: var(--ems-text-strong);
  font-size: 15px;
  font-weight: 800;
}

.ems-meter-mode-card small {
  color: var(--ems-muted);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.45;
}

.ems-meter-mode-card.is-active {
  border-color: rgba(52, 180, 123, 0.34);
  background: linear-gradient(135deg, rgba(52, 180, 123, 0.1), rgba(55, 175, 165, 0.055));
  box-shadow: 0 0 0 3px rgba(52, 180, 123, 0.055);
}

.ems-device-meter-form-panel {
  margin-bottom: 16px;
}

.ems-connection-debug {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  margin-top: 16px;
  padding: 10px 12px;
  background: var(--ems-ovl-035);
  border: 1px solid var(--ems-ovl-08);
  border-radius: 8px;
}

.ems-connection-debug strong {
  color: var(--ems-text);
  font-size: 13px;
  font-weight: 700;
}

.ems-icon-button:disabled,
.ems-table-icon:disabled {
  opacity: 0.42;
  cursor: not-allowed;
  box-shadow: none;
}

.ems-grid-import-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.ems-grid-import-strip span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 9px 11px;
  color: var(--ems-text);
  background: var(--ems-ovl-035);
  border: 1px solid var(--ems-ovl-07);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
}

.ems-grid-import-strip i {
  color: var(--ems-green);
}

.ems-site-delete-form {
  margin-top: 10px;
}

.ems-api-key-grid {
  margin-top: 16px;
}

.ems-permission-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.ems-permission-legend span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  color: var(--ems-muted);
  background: var(--ems-ovl-035);
  border: 1px solid var(--ems-ovl-06);
  border-radius: 8px;
}

.ems-permission-legend i {
  color: var(--ems-cyan);
}

.ems-permission-table {
  min-width: 1180px;
}

.ems-permission-table th,
.ems-permission-table td {
  text-align: center;
}

.ems-permission-table th:first-child,
.ems-permission-table th:nth-child(2),
.ems-permission-table td:first-child,
.ems-permission-table td:nth-child(2) {
  text-align: left;
}

.ems-permission-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 220px;
}

.ems-permission-item span {
  color: var(--ems-text);
  font-weight: 650;
}

.ems-permission-item small,
.ems-permission-parent {
  color: var(--ems-muted);
  font-size: 11px;
}

.ems-permission-item--level-1 {
  padding-left: 18px;
}

.ems-permission-item--level-2 {
  padding-left: 36px;
}

.ems-switch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}

.ems-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.ems-switch span {
  position: relative;
  display: inline-block;
  width: 34px;
  height: 20px;
  background: var(--ems-ovl-10);
  border: 1px solid var(--ems-ovl-14);
  border-radius: 999px;
  transition: background 0.18s ease, border-color 0.18s ease;
}

.ems-switch span::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 12px;
  height: 12px;
  background: var(--ems-muted);
  border-radius: 50%;
  transition: transform 0.18s ease, background 0.18s ease;
}

.ems-switch input:checked + span {
  background: rgba(52, 180, 123, 0.18);
  border-color: rgba(52, 180, 123, 0.42);
}

.ems-switch input:checked + span::after {
  transform: translateX(14px);
  background: var(--ems-green);
}

.ems-meter-hero {
  position: relative;
  overflow: hidden;
}

.ems-meter-hero::after {
  content: "";
  position: absolute;
  right: 22px;
  bottom: -34px;
  width: 260px;
  height: 120px;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 0 24px, rgba(55, 175, 165, 0.12) 24px 25px, transparent 25px 52px),
    linear-gradient(0deg, transparent 0 22px, rgba(52, 180, 123, 0.10) 22px 23px, transparent 23px 48px);
  opacity: 0.8;
  transform: skewX(-14deg);
}

.ems-live-strip {
  display: grid;
  grid-template-columns: 1.35fr repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.ems-live-tile,
.ems-monitor-panel {
  padding: 18px;
  background: linear-gradient(180deg, var(--ems-surf-4), var(--ems-surf-5));
  border: 1px solid var(--ems-border);
  border-radius: 8px;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.28);
}

.ems-live-tile {
  position: relative;
  min-height: 128px;
  overflow: hidden;
}

.ems-live-tile::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 3px;
  background: linear-gradient(90deg, var(--ems-cyan), transparent);
  opacity: 0.75;
}

.ems-live-tile--power::after,
.ems-live-tile--import::after {
  background: linear-gradient(90deg, var(--ems-green), var(--ems-cyan), transparent);
}

.ems-live-tile--export::after {
  background: linear-gradient(90deg, var(--ems-amber), var(--ems-cyan), transparent);
}

.ems-live-tile strong {
  display: block;
  margin-top: 12px;
  color: var(--ems-text-strong);
  font-size: 30px;
  font-weight: 750;
  letter-spacing: 0;
}

.ems-live-tile--power strong {
  font-size: 38px;
}

.ems-live-tile small {
  display: block;
  margin-top: 8px;
  color: var(--ems-muted);
}

.ems-monitor-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.ems-flow-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.ems-flow-step {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 12px;
  min-height: 118px;
  padding: 14px;
  background: var(--ems-ovl-025);
  border: 1px solid rgba(55, 175, 165, 0.13);
  border-radius: 8px;
}

.ems-flow-step i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: var(--ems-cyan);
  background: rgba(55, 175, 165, 0.08);
  border: 1px solid rgba(55, 175, 165, 0.22);
  border-radius: 8px;
}

.ems-flow-step strong {
  display: block;
  margin: 8px 0 4px;
  color: var(--ems-text-strong);
  font-size: 15px;
  font-weight: 700;
}

.ems-flow-step small {
  display: block;
  color: var(--ems-muted);
  line-height: 1.45;
}

.ems-monitor-panel--wide {
  margin-top: 16px;
}

.ems-panel-action {
  margin: -6px 0 14px;
}

.ems-inline-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ems-cyan);
  font-size: 12px;
  font-weight: 700;
}

.ems-inline-link:hover {
  color: var(--ems-text-strong);
}

.ems-power-chart {
  min-height: 360px;
}

.ems-main-meter-table {
  min-width: 920px;
}

.ems-direction {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}

.ems-direction--import {
  color: var(--ems-green);
  background: rgba(52, 180, 123, 0.08);
  border: 1px solid rgba(52, 180, 123, 0.24);
}

.ems-direction--export {
  color: var(--ems-amber);
  background: rgba(208, 183, 122, 0.08);
  border: 1px solid rgba(208, 183, 122, 0.24);
}

.ems-direction--neutral,
.ems-direction--unknown {
  color: var(--ems-muted);
  background: var(--ems-ovl-04);
  border: 1px solid var(--ems-ovl-08);
}

.ems-status-live {
  border-color: rgba(52, 180, 123, 0.38);
  color: var(--ems-green);
}

.ems-status-delayed {
  border-color: rgba(208, 183, 122, 0.38);
  color: var(--ems-amber);
}

.ems-status-stale {
  border-color: rgba(255, 107, 94, 0.38);
  color: var(--ems-red);
}

.ems-status-no-data {
  border-color: var(--ems-ovl-08);
  color: var(--ems-muted);
}

/* CHP / Cogeneration mode variants */
.ems-direction--generating {
  color: var(--ems-green);
  background: rgba(52, 180, 123, 0.08);
  border: 1px solid rgba(52, 180, 123, 0.24);
}

.ems-direction--consuming {
  color: var(--ems-amber);
  background: rgba(208, 183, 122, 0.08);
  border: 1px solid rgba(208, 183, 122, 0.24);
}

.ems-live-tile--generating::after {
  background: linear-gradient(90deg, var(--ems-green), var(--ems-cyan), transparent);
}

.ems-live-tile--consuming::after {
  background: linear-gradient(90deg, var(--ems-amber), var(--ems-cyan), transparent);
}

/* Importing = negative power. Deliberately a different hue from Generating. */
.ems-direction--importing {
  color: var(--ems-amber);
  background: rgba(208, 183, 122, 0.10);
  border: 1px solid rgba(208, 183, 122, 0.30);
}

.ems-live-tile--importing::after {
  background: linear-gradient(90deg, var(--ems-amber), transparent);
}

/* ---- Current Power hero card (prominent, colour-coded by sign) ---- */
.ems-power-hero {
  position: relative;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 26px;
  align-items: center;
  margin-bottom: 16px;
  padding: 24px 30px 24px 34px;
  border-radius: 14px;
  overflow: hidden;
  background:
    radial-gradient(130% 150% at 0% 0%, rgba(55, 175, 165, 0.06), transparent 55%),
    var(--ems-ovl-025);
  border: 1px solid var(--ems-ovl-08);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.ems-power-hero::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: var(--ems-cyan);
}

.ems-power-hero--generating {
  border-color: rgba(52, 180, 123, 0.32);
  box-shadow: inset 0 0 46px rgba(52, 180, 123, 0.06);
}
.ems-power-hero--generating::before {
  background: linear-gradient(180deg, var(--ems-green), transparent);
}

.ems-power-hero--importing {
  border-color: rgba(208, 183, 122, 0.36);
  box-shadow: inset 0 0 46px rgba(208, 183, 122, 0.07);
}
.ems-power-hero--importing::before {
  background: linear-gradient(180deg, var(--ems-amber), transparent);
}

.ems-power-hero--neutral::before {
  background: linear-gradient(180deg, var(--ems-muted), transparent);
}

.ems-power-hero__label {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 12px;
  font-weight: 700;
  color: var(--ems-muted);
}

.ems-power-hero__value {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-top: 10px;
}

.ems-power-hero__value strong {
  font-size: 66px;
  line-height: 0.95;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ems-text-strong);
  font-variant-numeric: tabular-nums;
}

.ems-power-hero__sign {
  font-size: 42px;
  font-weight: 800;
  color: var(--ems-text-strong);
}

.ems-power-hero__unit {
  margin-left: 6px;
  font-size: 22px;
  font-weight: 700;
  color: var(--ems-muted);
}

.ems-power-hero--generating .ems-power-hero__value strong,
.ems-power-hero--generating .ems-power-hero__sign {
  color: var(--ems-green);
}

.ems-power-hero--importing .ems-power-hero__value strong,
.ems-power-hero--importing .ems-power-hero__sign {
  color: var(--ems-amber);
}

.ems-power-hero__badges {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.ems-mode-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 13px;
}
.ems-mode-badge i { font-size: 15px; }

.ems-power-hero__hint {
  color: var(--ems-muted);
  font-size: 12px;
}

.ems-power-hero__side {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.ems-power-hero__meter {
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--ems-ovl-025);
  border: 1px solid var(--ems-ovl-08);
}

.ems-power-hero__meter strong {
  display: block;
  margin-top: 6px;
  font-size: 19px;
  font-weight: 750;
  color: var(--ems-text-strong);
}

.ems-hero-generating { color: var(--ems-green) !important; }
.ems-hero-importing { color: var(--ems-amber) !important; }

@media (max-width: 991.98px) {
  .ems-power-hero {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .ems-power-hero__value strong { font-size: 52px; }
}

.ems-range-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ems-range-tab {
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.ems-range-tab:not(.is-active) {
  color: var(--ems-muted);
}

.ems-range-tab.is-active {
  color: var(--ems-green);
}

.ems-table-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 14px;
}

.ems-table-footer__info {
  color: var(--ems-muted);
  font-size: 12px;
}

.ems-pager {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.ems-pager__status {
  min-width: 96px;
  text-align: center;
  color: var(--ems-muted);
  font-size: 12px;
  font-weight: 700;
}

.ems-pager__btn {
  cursor: pointer;
  padding: 6px 16px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ems-text-strong);
  background: var(--ems-ovl-04);
  border: 1px solid rgba(55, 175, 165, 0.22);
  transition: border-color 0.15s ease, opacity 0.15s ease;
}

.ems-pager__btn:hover:not(:disabled) {
  border-color: var(--ems-cyan);
}

.ems-pager__btn:disabled {
  opacity: 0.4;
  cursor: default;
}

/* BESS ESS control panel */
.ems-control-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 6px;
}

.ems-cmd-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 750;
  color: var(--ems-text-strong);
  background: var(--ems-ovl-04);
  border: 1px solid var(--ems-ovl-08);
  cursor: pointer;
  transition: border-color 0.15s ease, opacity 0.15s ease;
}

.ems-cmd-btn i { font-size: 15px; }
.ems-cmd-btn:hover:not(:disabled) { border-color: var(--ems-cyan); }
.ems-cmd-btn:disabled { opacity: 0.45; cursor: default; }

.ems-cmd-btn--start { border-color: rgba(52, 180, 123, 0.4); color: var(--ems-green); }
.ems-cmd-btn--standby { border-color: rgba(208, 183, 122, 0.4); color: var(--ems-amber); }
.ems-cmd-btn--stop { border-color: rgba(255, 107, 94, 0.4); color: var(--ems-red); }

.ems-cmd-result {
  color: var(--ems-muted);
  font-size: 12px;
  flex: 1 1 260px;
}

.ems-cmd-topic {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 12px;
  color: var(--ems-muted);
  font-size: 11px;
}

.ems-cmd-topic code {
  color: var(--ems-cyan);
  background: var(--ems-ovl-025);
  padding: 2px 6px;
  border-radius: 4px;
}

@media (max-width: 991.98px) {
  .ems-page__header {
    align-items: flex-start;
    flex-direction: column;
  }

  .ems-placeholder-grid,
  .ems-live-strip,
  .ems-monitor-grid,
  .ems-flow-grid,
  .ems-admin-grid--roles,
  .ems-admin-grid--keys,
  .ems-admin-grid--settings,
  .ems-admin-grid--policy,
  .ems-form-grid,
  .ems-form-grid--dense,
  .ems-site-detail-grid,
  .ems-grid-import-strip,
  .ems-grid-summary,
  .ems-grid-site-picker,
  .ems-grid-site-picker__form,
  .ems-grid-two-column,
  .ems-electrical-selector .ems-module-selector__form,
  .ems-module-selector__form,
  .ems-energy-source-grid,
  .ems-tariff-grid,
  .ems-meter-mode-grid,
  .ems-electrical-summary-grid,
  .ems-site-empty-cta,
  .ems-password-form {
    grid-template-columns: 1fr;
  }

  .ems-electrical-row {
    grid-template-columns: 1fr;
  }

  .ems-electrical-row strong {
    text-align: left;
  }

  .ems-grid-site-picker,
  .ems-grid-site-picker__meta {
    align-items: flex-start;
    justify-content: flex-start;
  }

  .ems-module-site-select select {
    font-size: 15px;
  }
}

/* ==========================================================================
   Dispatch & Strategy page
   ========================================================================== */

.ems-mode-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.ems-mode-card {
  position: relative;
  display: block;
  padding: 16px;
  background: var(--ems-ovl-025);
  border: 1px solid var(--ems-border);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.ems-mode-card:hover {
  border-color: rgba(55, 175, 165, 0.4);
  background: var(--ems-ovl-04);
}

.ems-mode-card--active {
  border-color: var(--ems-green);
  background: rgba(52, 180, 123, 0.06);
  box-shadow: inset 0 0 0 1px rgba(52, 180, 123, 0.18);
}

.ems-mode-card input[type="radio"] {
  position: absolute;
  top: 16px;
  right: 16px;
  accent-color: var(--ems-green);
}

.ems-mode-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-right: 28px;
  color: var(--ems-text-strong);
}

.ems-mode-card__head i {
  color: var(--ems-cyan);
  font-size: 18px;
}

.ems-mode-card__head strong {
  font-size: 13px;
  letter-spacing: 0.02em;
}

.ems-mode-card--active .ems-mode-card__head i {
  color: var(--ems-green);
}

.ems-mode-card__purpose {
  margin: 10px 0 8px;
  color: var(--ems-muted);
  font-size: 12px;
}

.ems-mode-card__points {
  margin: 0;
  padding-left: 16px;
  color: var(--ems-text);
  font-size: 11.5px;
  line-height: 1.7;
}

.ems-dispatch-sections {
  display: grid;
  gap: 0;
}

/* colour-code each parameter card so the groups are distinguishable */
.ems-dispatch-card {
  border-left: 3px solid var(--ems-border);
}

.ems-dispatch-card--grid { border-left-color: var(--ems-cyan); }
.ems-dispatch-card--bess { border-left-color: var(--ems-green); }
.ems-dispatch-card--chp { border-left-color: var(--ems-amber); }
.ems-dispatch-card--market { border-left-color: var(--ems-gold-bright); }
.ems-dispatch-card--control { border-left-color: var(--ems-muted); }

.ems-dispatch-card .ems-panel-label i {
  margin-right: 6px;
}

.ems-field-note {
  display: block;
  margin-top: 6px;
  color: var(--ems-muted);
  font-size: 10.5px;
  font-weight: 400;
  line-height: 1.5;
}

.ems-field-error {
  margin-top: 8px;
  color: var(--ems-red);
  font-size: 11.5px;
  font-weight: 600;
}

.ems-dispatch-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  margin-top: 18px;
}

.ems-dispatch-updated {
  color: var(--ems-muted);
  font-size: 11px;
}

.ems-primary-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: linear-gradient(180deg, rgba(52, 180, 123, 0.18), rgba(52, 180, 123, 0.08));
  color: var(--ems-green);
  border: 1px solid rgba(52, 180, 123, 0.45);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.ems-primary-button:hover {
  background: linear-gradient(180deg, rgba(52, 180, 123, 0.26), rgba(52, 180, 123, 0.12));
  border-color: var(--ems-green);
}

.ems-rules-list {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.ems-rules-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--ems-text);
  font-size: 12px;
  line-height: 1.6;
}

.ems-rules-list i {
  margin-top: 2px;
  color: var(--ems-green);
  flex-shrink: 0;
}

@media (max-width: 1100px) {
  .ems-mode-grid {
    grid-template-columns: 1fr;
  }
}

/* BESS console: active power setpoint (protocol point 20020) */
.ems-control-bar--setpoint {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--ems-border);
  flex-wrap: wrap;
}

.ems-setpoint-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ems-setpoint-field span {
  color: var(--ems-muted);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ems-setpoint-field input {
  width: 190px;
  padding: 8px 10px;
  background: var(--ems-ovl-03);
  color: var(--ems-text);
  border: 1px solid var(--ems-border);
  border-radius: 6px;
  font-size: 13px;
}

.ems-setpoint-field input:focus {
  border-color: rgba(55, 175, 165, 0.52);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(55, 175, 165, 0.1);
}

.ems-cmd-btn--setpoint {
  align-self: flex-end;
}

.ems-setpoint-hint {
  align-self: flex-end;
  color: var(--ems-muted);
  font-size: 11px;
}

/* Operations Dashboard: the four pillars */
.ems-ops-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.ems-ops-card {
  padding: 18px;
  background: linear-gradient(180deg, var(--ems-panel-2), var(--ems-panel));
  border: 1px solid var(--ems-border);
  border-top: 3px solid var(--ems-border);
  border-radius: 8px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.24);
}

.ems-ops-card--grid { border-top-color: var(--ems-cyan); }
.ems-ops-card--chp { border-top-color: var(--ems-amber); }
.ems-ops-card--bess { border-top-color: var(--ems-green); }
.ems-ops-card--load { border-top-color: var(--brand-mist); }

.ems-ops-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}

.ems-ops-card__head .ems-panel-label i {
  margin-right: 6px;
}

.ems-ops-value {
  display: block;
  color: var(--ems-text-strong);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
}

.ems-ops-value small {
  color: var(--ems-muted);
  font-size: 13px;
  font-weight: 600;
}

.ems-ops-note {
  margin: 8px 0 6px;
  color: var(--ems-text);
  font-size: 12px;
}

.ems-ops-stamp {
  color: var(--ems-muted);
  font-size: 10.5px;
}

@media (max-width: 1200px) {
  .ems-ops-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .ems-ops-grid { grid-template-columns: 1fr; }
}

/* Alarms page */
.ems-alarm-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.ems-alarm-tile {
  padding: 14px 16px;
  background: linear-gradient(180deg, var(--ems-panel-2), var(--ems-panel));
  border: 1px solid var(--ems-border);
  border-left: 3px solid var(--ems-border);
  border-radius: 8px;
}

.ems-alarm-tile strong {
  display: block;
  margin-top: 6px;
  color: var(--ems-text-strong);
  font-size: 24px;
  font-weight: 700;
}

.ems-alarm-tile--emergency { border-left-color: var(--ems-red); }
.ems-alarm-tile--critical { border-left-color: var(--ems-red); }
.ems-alarm-tile--warning { border-left-color: var(--ems-amber); }
.ems-alarm-tile--info { border-left-color: var(--ems-cyan); }

.ems-alarms-page .ems-empty-panel i {
  margin-right: 8px;
  color: var(--ems-green);
}

@media (max-width: 1100px) {
  .ems-alarm-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- dispatch: layer headings, priority chain, blockers, window table ----- */

.ems-layer-heading {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 28px 0 4px;
  padding: 14px 18px;
  border-radius: 8px;
  border: 1px solid var(--ems-border);
  background: var(--ems-ovl-03);
}

.ems-layer-heading i {
  font-size: 22px;
}

.ems-layer-heading h2 {
  margin: 0;
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ems-text-strong);
}

.ems-layer-heading p {
  margin: 4px 0 0;
  font-size: 11.5px;
  color: var(--ems-muted);
}

.ems-layer-heading--safety {
  border-left: 3px solid var(--ems-red);
}

.ems-layer-heading--safety i {
  color: var(--ems-red);
}

.ems-layer-heading--economic {
  border-left: 3px solid var(--ems-cyan);
}

.ems-layer-heading--economic i {
  color: var(--ems-cyan);
}

.ems-priority-chain {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.ems-priority-step {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 180px;
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid var(--ems-border);
  background: var(--ems-ovl-025);
}

.ems-priority-step__rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.06);
  color: var(--ems-text-strong);
}

.ems-priority-step strong {
  display: block;
  font-size: 12px;
  color: var(--ems-text-strong);
}

.ems-priority-step small {
  display: block;
  margin-top: 2px;
  font-size: 10.5px;
  line-height: 1.45;
  color: var(--ems-muted);
}

.ems-priority-step--safety {
  border-color: rgba(255, 107, 94, 0.4);
}

.ems-priority-step--safety .ems-priority-step__rank {
  background: rgba(255, 107, 94, 0.18);
  color: var(--ems-red);
}

.ems-priority-step--economic .ems-priority-step__rank {
  background: rgba(55, 175, 165, 0.16);
  color: var(--ems-cyan);
}

.ems-blocker-card {
  margin-top: 16px;
  padding: 16px 18px;
  border-radius: 8px;
  border: 1px solid rgba(255, 107, 94, 0.5);
  background: rgba(255, 107, 94, 0.07);
}

.ems-blocker-card__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.ems-blocker-card__head i {
  color: var(--ems-red);
  font-size: 20px;
}

.ems-blocker-card__head strong {
  display: block;
  color: var(--ems-red);
  font-size: 13px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.ems-blocker-card__head small {
  display: block;
  margin-top: 3px;
  color: var(--ems-muted);
  font-size: 11px;
}

.ems-blocker-list {
  margin: 12px 0 0;
  padding-left: 34px;
  color: var(--ems-text);
  font-size: 12px;
  line-height: 1.65;
}

.ems-dispatch-card--protection { border-left-color: var(--ems-red); }
.ems-dispatch-card--backflow { border-left-color: var(--ems-red); }
.ems-dispatch-card--failsafe { border-left-color: var(--ems-red); }
.ems-dispatch-card--peak { border-left-color: #ff9f4a; }
.ems-dispatch-card--vpp { border-left-color: #7ad7ff; }

.ems-window-table {
  margin-top: 16px;
  border: 1px solid var(--ems-border);
  border-radius: 6px;
  overflow-x: auto;
}

.ems-window-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 0.8fr 0.8fr 1fr 0.6fr 0.6fr;
  gap: 10px;
  align-items: center;
  padding: 8px 12px;
  min-width: 720px;
  border-bottom: 1px solid var(--ems-border);
}

.ems-window-row:last-child {
  border-bottom: 0;
}

.ems-window-row--head {
  background: var(--ems-ovl-04);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ems-muted);
}

.ems-window-row input,
.ems-window-row select {
  width: 100%;
}

.ems-window-check {
  text-align: center;
}

.ems-window-check input {
  width: auto;
}


/* ==================================================================== */
/*  EMS COMPONENT LAYER                                                 */
/*                                                                      */
/*  Instrument-panel language: dense, measured, hairline-ruled. Colour   */
/*  is never decorative -- green reads OK/export, cyan reads active/     */
/*  import, amber reads degraded, red reads fault. Anything that is not  */
/*  carrying a status stays neutral.                                     */
/*                                                                      */
/*  Everything below is written against the tokens at the top of this    */
/*  file, so the light theme follows automatically.                      */
/* ==================================================================== */

:root {
  --ems-accent: var(--ems-cyan);
  --ems-radius: 10px;
  --ems-radius-sm: 6px;
  --ems-hairline: rgba(255, 255, 255, 0.14);
  --ems-rule: rgba(255, 255, 255, 0.09);
  --ems-glow: rgba(55, 175, 165, 0.20);
  /* A real drop onto a near-black page, plus a light top edge, is what makes
     the card read as a physical panel rather than a flat colour patch. */
  --ems-lift: 0 1px 0 rgba(255, 255, 255, 0.06) inset,
              0 2px 4px rgba(0, 0, 0, 0.40),
              0 16px 40px rgba(0, 0, 0, 0.55);
  --ems-mono: "JetBrains Mono", "SF Mono", "Cascadia Mono", Consolas, monospace;
  --ems-micro: 0.68rem;
}

html[data-ems-theme="light"] {
  --ems-hairline: rgba(14, 30, 45, 0.10);
  --ems-rule: rgba(14, 30, 45, 0.06);
  --ems-glow: rgba(15, 143, 196, 0.12);
  --ems-lift: 0 1px 2px rgba(16, 32, 48, 0.06), 0 10px 24px rgba(16, 32, 48, 0.07);
}

/* Numbers are the product. Tabular figures stop columns dancing on every
   refresh and are the single biggest credibility win on a metering page. */
.ems-page,
.ems-page input,
.ems-page select,
.ems-page table {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "cv01" 1;
}

/* -------------------------------------------------------- page shell */

.ems-page {
  padding: 4px 2px 40px;
  color: var(--ems-text);
}

.ems-page__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 4px 0 18px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--ems-hairline);
}

.ems-page__header h1 {
  margin: 6px 0 0;
  font-size: 1.6rem;
  font-weight: 650;
  letter-spacing: -0.015em;
  color: var(--ems-text-strong);
}

.ems-page__header > div > p {
  margin: 8px 0 0;
  max-width: 68ch;
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--ems-muted);
}

.ems-page__eyebrow {
  font-size: var(--ems-micro);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ems-muted);
  opacity: 0.85;
}

.ems-page__status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex-shrink: 0;
  padding: 7px 14px;
  border: 1px solid var(--ems-border);
  border-radius: 999px;
  background: var(--ems-panel);
  font-size: var(--ems-micro);
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ems-text-strong);
  white-space: nowrap;
}

/* ------------------------------------------------------ status dot */

.ems-status-dot {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--ems-green);
  box-shadow: 0 0 0 3px rgba(52, 180, 123, 0.14);
}

/* A slow pulse says "this is live" without demanding attention. */
.ems-page__status .ems-status-dot { animation: ems-breathe 2.8s ease-in-out infinite; }

.ems-status-dot--stale {
  background: var(--ems-amber);
  box-shadow: 0 0 0 3px rgba(208, 183, 122, 0.14);
  animation: none;
}

.ems-status-dot--fault {
  background: var(--ems-red);
  box-shadow: 0 0 0 3px rgba(255, 107, 94, 0.16);
  animation: none;
}

@keyframes ems-breathe {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}

@media (prefers-reduced-motion: reduce) {
  .ems-page__status .ems-status-dot { animation: none; }
}

/* ---------------------------------------------------------- toolbar */

.ems-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.ems-toolbar__form {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.ems-toolbar input[type="date"],
.ems-toolbar input[type="text"] {
  padding: 6px 12px;
  border: 1px solid var(--ems-border);
  border-radius: var(--ems-radius-sm);
  background: var(--ems-panel);
  color: var(--ems-text);
  font-size: 0.82rem;
  font-family: var(--ems-mono);
}

.ems-toolbar .btn {
  border-radius: var(--ems-radius-sm);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 6px 14px;
}

.ems-toolbar .btn-outline-light {
  border-color: var(--ems-border);
  color: var(--ems-muted);
  background: transparent;
}

.ems-toolbar .btn-outline-light:hover {
  border-color: var(--ems-border-hot);
  color: var(--ems-text-strong);
  background: var(--ems-panel);
}

/* ------------------------------------------------------------- card */

.ems-page .card.ems-card,
.ems-page section.ems-card {
  position: relative;
  margin-bottom: 20px;
  border: 1px solid var(--ems-border);
  border-radius: var(--ems-radius);
  background: linear-gradient(180deg, var(--ems-panel-2), var(--ems-panel));
  box-shadow: var(--ems-lift);
  overflow: hidden;
}

/* A one-pixel accent across the top edge. Reads as engineered rather than
   decorated, and costs no vertical space. */
.ems-page .ems-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  /* Gold hairline across the top edge. The brand's accent, spent on the one
     line that appears on every panel -- which is why nothing else gets it. */
  background: linear-gradient(90deg,
              transparent,
              rgba(178, 143, 80, 0.55) 16%,
              rgba(208, 183, 122, 0.75) 50%,
              rgba(178, 143, 80, 0.55) 84%,
              transparent);
}

.ems-page .ems-card > .card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--ems-hairline);
  background: transparent;
}

.ems-page .ems-card > .card-header h5 {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-size: 0.82rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ems-text-strong);
}

.ems-page .ems-card > .card-header h5 i { color: var(--ems-accent); font-size: 0.95rem; }

/* The base theme paints .card-body solid black, which punches a hole in the
   card's own gradient. The card owns the surface; the body only owns padding. */
.ems-page .ems-card > .card-body {
  padding: 18px;
  background: transparent;
}

/* -------------------------------------------------------- stat tile */

.ems-page .ems-stat { margin-bottom: 20px; }

.ems-page .ems-stat > .card-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 16px 18px;
}

.ems-stat__label {
  font-size: var(--ems-micro);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ems-muted);
}

.ems-stat__value {
  font-size: 1.85rem;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ems-text-strong);
  font-variant-numeric: tabular-nums;
}

.ems-stat__unit { font-size: 0.74rem; color: var(--ems-muted); }

/* ------------------------------------------------------------ badge */

.ems-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border: 1px solid var(--ems-border);
  border-radius: 4px;
  background: var(--ems-panel);
  font-size: var(--ems-micro);
  font-weight: 650;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ems-muted);
  white-space: nowrap;
}

.ems-badge--active {
  border-color: rgba(52, 180, 123, 0.38);
  background: rgba(52, 180, 123, 0.10);
  color: var(--ems-green);
}

.ems-badge--info {
  border-color: rgba(55, 175, 165, 0.38);
  background: rgba(55, 175, 165, 0.10);
  color: var(--ems-cyan);
}

.ems-badge--warning {
  border-color: rgba(208, 183, 122, 0.38);
  background: rgba(208, 183, 122, 0.10);
  color: var(--ems-amber);
}

.ems-badge--danger {
  border-color: rgba(255, 107, 94, 0.38);
  background: rgba(255, 107, 94, 0.10);
  color: var(--ems-red);
}

.ems-badge--muted { opacity: 0.62; }

/* ---------------------------------------------------------- callout */

.ems-callout {
  position: relative;
  margin-bottom: 20px;
  padding: 14px 18px 14px 20px;
  border: 1px solid var(--ems-border);
  border-left-width: 3px;
  border-radius: var(--ems-radius-sm);
  background: var(--ems-panel);
  font-size: 0.84rem;
  line-height: 1.65;
  color: var(--ems-text);
}

.ems-callout h4 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 7px;
  font-size: 0.86rem;
  font-weight: 650;
  color: var(--ems-text-strong);
}

.ems-callout p:last-child,
.ems-callout ul:last-child { margin-bottom: 0; }

.ems-callout ul { margin: 0; padding-left: 18px; }
.ems-callout li + li { margin-top: 4px; }

.ems-callout--warning { border-left-color: var(--ems-amber); }
.ems-callout--warning h4 i { color: var(--ems-amber); }

.ems-callout--info { border-left-color: var(--ems-cyan); }
.ems-callout--info h4 i { color: var(--ems-cyan); }

.ems-callout--danger { border-left-color: var(--ems-red); }
.ems-callout--danger h4 i { color: var(--ems-red); }

.ems-callout--inline {
  margin: 14px 0 0;
  padding: 9px 12px;
  font-size: 0.78rem;
}

/* --------------------------------------------------------- key list */

.ems-kv-list { margin: 0; padding: 0; list-style: none; }

.ems-kv-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px solid var(--ems-rule);
  font-size: 0.82rem;
}

.ems-kv-list li:last-child { border-bottom: 0; }

.ems-kv-list li > span {
  color: var(--ems-muted);
  flex: 0 0 auto;
  white-space: nowrap;
}

.ems-kv-list li > strong {
  color: var(--ems-text-strong);
  font-weight: 600;
  text-align: right;
  flex: 1 1 auto;
  min-width: 0;
  /* Long endpoints and URLs break inside the value, never by splitting the
     label into two lines. */
  overflow-wrap: anywhere;
  word-break: break-word;
}

.ems-kv-list code {
  font-family: var(--ems-mono);
  font-size: 0.76rem;
  color: var(--ems-cyan);
  background: none;
  padding: 0;
}

/* ------------------------------------------------------------ table */

.ems-page table.ems-table {
  width: 100%;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--ems-text);
  font-size: 0.82rem;
}

.ems-page table.ems-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 9px 12px;
  border: 0;
  border-bottom: 1px solid var(--ems-border);
  background: var(--ems-panel);
  font-size: var(--ems-micro);
  font-weight: 650;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ems-muted);
  white-space: nowrap;
}

.ems-page table.ems-table tbody td {
  padding: 9px 12px;
  border: 0;
  border-bottom: 1px solid var(--ems-rule);
  vertical-align: middle;
}

.ems-page table.ems-table tbody tr:hover td { background: rgba(255, 255, 255, 0.022); }
.ems-page table.ems-table tbody tr:last-child td { border-bottom: 0; }

.ems-page table.ems-table code {
  font-family: var(--ems-mono);
  font-size: 0.76rem;
  color: var(--ems-cyan);
  background: none;
  padding: 0;
}

.ems-table--compact tbody td,
.ems-table--compact thead th { padding: 6px 10px; font-size: 0.78rem; }

/* Row states. Each one answers "why is this row different". */
.ems-table .ems-row-highlight > td { background: rgba(55, 175, 165, 0.06); }
.ems-table .ems-row-muted > td { opacity: 0.6; }
.ems-table .ems-row-negative > td { color: var(--ems-red); }

/* Decision rows carry a left rule so the plan reads as a shape, not a list. */
.ems-decision-sell > td:first-child { box-shadow: inset 2px 0 0 var(--ems-green); }
.ems-decision-charge > td:first-child { box-shadow: inset 2px 0 0 var(--ems-cyan); }
.ems-decision-sell > td { background: rgba(52, 180, 123, 0.045); }
.ems-decision-charge > td { background: rgba(55, 175, 165, 0.045); }
.ems-decision-idle > td { color: var(--ems-muted); }

.ems-scroll-y { max-height: 520px; overflow-y: auto; }

.ems-scroll-y::-webkit-scrollbar { width: 9px; height: 9px; }
.ems-scroll-y::-webkit-scrollbar-track { background: transparent; }
.ems-scroll-y::-webkit-scrollbar-thumb {
  background: var(--ems-border);
  border-radius: 5px;
}
.ems-scroll-y::-webkit-scrollbar-thumb:hover { background: var(--ems-border-hot); }

/* ------------------------------------------------------------- text */

.ems-hint {
  margin: 0 0 14px;
  font-size: 0.78rem;
  line-height: 1.65;
  color: var(--ems-muted);
}

.ems-hint:last-child { margin-bottom: 0; }

.ems-hint code {
  font-family: var(--ems-mono);
  font-size: 0.74rem;
  color: var(--ems-cyan);
  background: rgba(55, 175, 165, 0.07);
  padding: 1px 5px;
  border-radius: 3px;
}

/* "no data" must never be mistaken for a zero. It is deliberately not a
   number: different weight, different colour, italic. */
.ems-nodata {
  font-style: italic;
  font-weight: 400;
  color: var(--ems-muted);
  opacity: 0.6;
}

.ems-empty {
  margin: 0;
  padding: 26px 18px;
  border: 1px dashed var(--ems-border);
  border-radius: var(--ems-radius-sm);
  text-align: center;
  font-size: 0.84rem;
  color: var(--ems-muted);
}

.ems-text-warn { color: var(--ems-amber); }
.ems-text-up { color: var(--ems-green); }
.ems-text-down { color: var(--ems-red); }

.ems-source-note { margin-top: 18px; opacity: 0.65; }

/* ------------------------------------------------------------- form */

.ems-field { margin-bottom: 16px; }

.ems-field > label {
  display: block;
  margin-bottom: 6px;
  font-size: var(--ems-micro);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ems-muted);
}

.ems-field input[type="text"],
.ems-field input[type="number"],
.ems-field input[type="date"],
.ems-field input[type="time"],
.ems-field select,
.ems-field textarea {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--ems-border);
  border-radius: var(--ems-radius-sm);
  background: var(--ems-bg);
  color: var(--ems-text-strong);
  font-size: 0.84rem;
  font-family: var(--ems-mono);
  transition: border-color 0.14s ease, box-shadow 0.14s ease;
}

.ems-field input:focus,
.ems-field select:focus,
.ems-field textarea:focus {
  outline: none;
  border-color: var(--ems-border-hot);
  box-shadow: 0 0 0 3px var(--ems-glow);
}

.ems-field input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--ems-green);
  vertical-align: middle;
}

.ems-field__hint {
  display: block;
  margin-top: 5px;
  font-size: 0.71rem;
  line-height: 1.55;
  color: var(--ems-muted);
  opacity: 0.85;
}

.ems-field__error {
  display: block;
  margin-top: 5px;
  font-size: 0.73rem;
  color: var(--ems-red);
}

.ems-form-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 4px 0 28px;
}

.ems-form-actions .btn-primary {
  padding: 9px 20px;
  border: 0;
  border-radius: var(--ems-radius-sm);
  background: linear-gradient(180deg, var(--ems-cyan), #159bcc);
  font-size: 0.8rem;
  font-weight: 650;
  letter-spacing: 0.03em;
  color: #04131c;
}

.ems-form-actions .btn-primary:hover { filter: brightness(1.08); }

.ems-message-stack { display: grid; gap: 10px; margin-bottom: 20px; }

.ems-message {
  padding: 11px 16px;
  border: 1px solid var(--ems-border);
  border-left: 3px solid var(--ems-cyan);
  border-radius: var(--ems-radius-sm);
  background: var(--ems-panel);
  font-size: 0.84rem;
}

.ems-message--success { border-left-color: var(--ems-green); }
.ems-message--error { border-left-color: var(--ems-red); }
.ems-message--warning { border-left-color: var(--ems-amber); }

/* --------------------------------------------- page-specific pieces */

/* API Configuration: the card edge carries the verdict, so a wall of cards
   can be scanned without reading any of them. */
.ems-api-card--ok::before { background: var(--ems-green); opacity: 0.8; }
.ems-api-card--stale::before { background: var(--ems-amber); opacity: 0.8; }
.ems-api-card--no-data::before { background: var(--ems-border); opacity: 0.9; }
.ems-api-card--error::before { background: var(--ems-red); opacity: 0.8; }

/* SCADA plan strip */
.ems-plan-strip--on-plan { border-color: rgba(52, 180, 123, 0.3); }
.ems-plan-strip--off-plan { border-color: rgba(208, 183, 122, 0.4); }
.ems-plan-strip .ems-ops-value { display: block; margin-top: 4px; font-size: 1.3rem; }
.ems-plan-strip .ems-ops-value small { font-size: 0.72rem; color: var(--ems-muted); }

/* Contract: term progress */
.ems-progress {
  height: 5px;
  margin: 12px 0 6px;
  border-radius: 3px;
  background: var(--ems-rule);
  overflow: hidden;
}

.ems-progress__bar {
  height: 100%;
  background: linear-gradient(90deg, var(--ems-cyan), var(--ems-green));
}

/* Contract: price bridge. The arithmetic has to read top to bottom. */
.ems-kv-list--bridge li {
  padding-left: 11px;
  border-left: 2px solid transparent;
}

.ems-kv-list--bridge .ems-bridge-add { border-left-color: rgba(208, 183, 122, 0.5); }

.ems-kv-list--bridge .ems-bridge-total {
  border-left-color: var(--ems-green);
  background: rgba(52, 180, 123, 0.06);
  margin-top: 4px;
}

.ems-kv-list--bridge .ems-bridge-total strong { color: var(--ems-green); }

.ems-window-card {
  height: 100%;
  padding: 14px 16px;
  border: 1px solid var(--ems-border);
  border-radius: var(--ems-radius-sm);
  background: rgba(255, 255, 255, 0.015);
}

.ems-window-card .ems-panel-label { display: block; margin-bottom: 8px; }

/* Contract: clause groups */
.ems-clause-group {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 24px 0 10px;
  font-size: var(--ems-micro);
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ems-muted);
}

.ems-clause-group--direct { color: var(--ems-green); }
.ems-clause-group--info { color: var(--ems-cyan); }

.ems-table--clauses td {
  vertical-align: top;
  line-height: 1.6;
  font-size: 0.79rem;
}

.ems-table--clauses .ems-clause__summary { color: var(--ems-text); }
.ems-table--clauses .ems-clause__implication { color: var(--ems-muted); }

.ems-clause--direct > td:first-child { box-shadow: inset 2px 0 0 var(--ems-green); }
.ems-clause--info > td:first-child { box-shadow: inset 2px 0 0 var(--ems-cyan); }
.ems-clause--direct .ems-clause__implication { color: var(--ems-text); }

/* ---------------------------------------------------------- charts */

/* Apex injects its own surface; keep it transparent so the card shows through. */
.ems-page .apexcharts-canvas,
.ems-page .apexcharts-svg { background: transparent !important; }

.ems-page .apexcharts-tooltip {
  border: 1px solid var(--ems-border) !important;
  background: var(--ems-panel) !important;
  box-shadow: var(--ems-lift) !important;
  font-family: inherit !important;
}

.ems-page .apexcharts-tooltip-title {
  border-bottom: 1px solid var(--ems-hairline) !important;
  background: transparent !important;
  font-weight: 650 !important;
}

.ems-page .apexcharts-menu {
  border: 1px solid var(--ems-border) !important;
  background: var(--ems-panel) !important;
}

/* ------------------------------------------------------ responsive */

@media (max-width: 991px) {
  .ems-page__header { flex-direction: column; gap: 14px; }
  .ems-page__header h1 { font-size: 1.35rem; }
  .ems-stat__value { font-size: 1.5rem; }
  .ems-toolbar { gap: 8px; }
}

/* ------------------------------------------------- collapsible card */

.ems-card--collapsible > .card-header {
  cursor: pointer;
  user-select: none;
  transition: background 0.14s ease;
}

.ems-card--collapsible > .card-header:hover { background: rgba(255, 255, 255, 0.02); }

.ems-card--collapsible > .card-header:focus-visible {
  outline: 2px solid var(--ems-border-hot);
  outline-offset: -2px;
}

.ems-collapse-caret {
  margin-left: auto;
  font-size: 1rem;
  color: var(--ems-muted);
  transition: transform 0.18s ease;
}

.ems-card--collapsible.is-collapsed .ems-collapse-caret { transform: rotate(180deg); }
.ems-card--collapsible.is-collapsed > .card-body { display: none; }
.ems-card--collapsible.is-collapsed > .card-header { border-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  .ems-collapse-caret { transition: none; }
}

/* A loopback check changes nothing, so it must not look like a dispatch. */
.ems-cmd-btn--check {
  border-color: rgba(55, 175, 165, 0.4);
  background: rgba(55, 175, 165, 0.08);
  color: var(--ems-cyan);
}
.ems-cmd-btn--check:hover { background: rgba(55, 175, 165, 0.16); }

/* ---------------------------------------------------------- table pager */

.ems-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--ems-rule);
}

.ems-pager__count {
  font-size: 0.76rem;
  color: var(--ems-muted);
  font-variant-numeric: tabular-nums;
}

.ems-pager--single { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--ems-rule); }

.ems-pager__controls { display: inline-flex; align-items: center; gap: 6px; }

.ems-pager__btn {
  display: inline-flex;
  align-items: center;
  min-width: 34px;
  height: 28px;
  padding: 0 10px;
  justify-content: center;
  border: 1px solid var(--ems-border);
  border-radius: var(--ems-radius-sm);
  background: var(--ems-panel);
  color: var(--ems-text);
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color .14s ease, color .14s ease;
}

.ems-pager__btn:hover { border-color: var(--ems-border-hot); color: var(--ems-text-strong); }

/* Disabled controls stay in place so the row does not reflow at the ends. */
.ems-pager__btn.is-disabled { opacity: .35; pointer-events: none; }

.ems-pager__page {
  padding: 0 10px;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--ems-text-strong);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ems-toolbar__label {
  margin: 0 2px 0 6px;
  font-size: var(--ems-micro);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ems-muted);
}

/* Freshness label on the power-flow diagram. Amber once the feed stops
   answering, so a frozen diagram cannot be mistaken for a quiet plant. */
.ems-flow-legend .ems-muted-line.is-stale { color: var(--ems-amber); font-weight: 600; }


/* ==================================================================== */
/*  Brand finish                                                        */
/* ==================================================================== */

/* The page header rule carries a short gold lead-in, so the brand reads at
   the top of every screen without a second logo. */
.ems-page__header {
  position: relative;
}

.ems-page__header::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 54px;
  height: 2px;
  border-radius: 1px;
  background: linear-gradient(90deg, var(--ems-gold), var(--ems-gold-bright));
}

.ems-page__eyebrow {
  color: var(--ems-gold-bright);
  opacity: 0.95;
}

/* Status pill: gold ring rather than a flat grey border. */
.ems-page__status {
  border-color: rgba(178, 143, 80, 0.32);
  background: linear-gradient(180deg, rgba(22, 74, 60, 0.9), rgba(18, 61, 50, 0.9));
}

/* Card headers get a faint deep-green wash so the title band separates from
   the body without another border line. */
.ems-page .ems-card > .card-header {
  background: linear-gradient(180deg, rgba(29, 85, 69, 0.28), transparent);
}

.ems-page .ems-card > .card-header h5 i {
  color: var(--ems-gold-bright);
}

/* Table headers sit on the card, so they take the same wash. */
.ems-page table.ems-table thead th {
  background: linear-gradient(180deg, rgba(29, 85, 69, 0.34), rgba(18, 61, 50, 1));
  border-bottom-color: rgba(178, 143, 80, 0.26);
}

/* Stat tiles: the figure is the point, so it gets the only large type and a
   gold underline to tie the row together. */
.ems-page .ems-stat > .card-body { position: relative; }

.ems-page .ems-stat > .card-body::after {
  content: "";
  position: absolute;
  left: 18px;
  bottom: 12px;
  width: 22px;
  height: 2px;
  border-radius: 1px;
  background: var(--ems-gold);
  opacity: 0.6;
}

.ems-stat__label { color: var(--ems-gold-bright); opacity: 0.82; }

/* Primary action reads as brand green, not as a generic blue. */
.ems-form-actions .btn-primary,
.ems-toolbar .btn-primary {
  background: linear-gradient(180deg, var(--brand-energy), #2F7355);
  color: #F5F5F1;
  border: 1px solid rgba(178, 143, 80, 0.30);
}

.ems-form-actions .btn-primary:hover,
.ems-toolbar .btn-primary:hover {
  background: linear-gradient(180deg, #4AA37C, var(--brand-forest));
  filter: none;
}

.ems-pager__btn:hover {
  border-color: rgba(178, 143, 80, 0.5);
  color: var(--ems-gold-bright);
}

/* Focus is gold everywhere, so keyboard users get one consistent signal. */
.ems-field input:focus,
.ems-field select:focus,
.ems-field textarea:focus,
.ems-toolbar input:focus {
  border-color: var(--ems-gold);
  box-shadow: 0 0 0 3px var(--ems-glow);
  outline: none;
}

/* The top navbar is part of the shell, so it shares the sidebar's ground. */
.pcoded-header,
.pcoded-header.navbar-expand-lg {
  background: linear-gradient(180deg, #0D2A22, #0A2219) !important;
  border-bottom: 1px solid rgba(178, 143, 80, 0.22) !important;
  box-shadow: 0 1px 0 rgba(178, 143, 80, 0.06), 0 10px 28px rgba(0, 0, 0, 0.35);
}

.pcoded-header .navbar-nav > li > a,
.pcoded-header a {
  color: var(--ems-menu-text) !important;
}

.pcoded-header a:hover { color: var(--ems-gold-bright) !important; }

/* Bootstrap paints inline <code> magenta. In a green/gold shell that reads as
   an error, so literals take the gold accent instead. */
.ems-page code,
.ems-page kbd,
.ems-arming-dialog code {
  color: var(--ems-gold-bright);
  background: rgba(178, 143, 80, 0.10);
  border: 1px solid rgba(178, 143, 80, 0.20);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 0.86em;
}

.ems-page a {
  color: var(--ems-gold-bright);
  text-decoration-color: rgba(178, 143, 80, 0.4);
}

.ems-page a:hover { color: var(--ems-gold); }

/* Links that are already buttons or nav keep their own colour. */
.ems-page a.btn,
.ems-page a.ems-tab,
.ems-page a.ems-pager__btn,
.ems-page .ems-table a.ems-chip { color: inherit; }

html[data-ems-theme="light"] .ems-page code,
html[data-ems-theme="light"] .ems-page kbd {
  color: #6E5520;
  background: rgba(178, 143, 80, 0.12);
  border-color: rgba(178, 143, 80, 0.30);
}

html[data-ems-theme="light"] .ems-page a { color: #6E5520; }
html[data-ems-theme="light"] .ems-page a:hover { color: #4F3C14; }

/* ==================================================================== */
/*  Light theme: the shell stays deep green, the page does not          */
/* ==================================================================== */

/* The sidebar and top bar keep the brand's deep green in both themes, so
   anything sitting on them keeps light text regardless of page theme.
   Without this the header wordmark and icons vanish into their own ground. */
html[data-ems-theme="light"] .pcoded-header,
html[data-ems-theme="light"] .pcoded-header.navbar-light,
html[data-ems-theme="light"] .pcoded-header .b-brand,
html[data-ems-theme="light"] .pcoded-header .b-title,
html[data-ems-theme="light"] .pcoded-header a,
html[data-ems-theme="light"] .pcoded-header a i,
html[data-ems-theme="light"] .pcoded-header .navbar-nav > li > a,
html[data-ems-theme="light"] .pcoded-navbar .b-brand .b-title {
  color: var(--brand-off-white) !important;
}

html[data-ems-theme="light"] .pcoded-header a:hover,
html[data-ems-theme="light"] .pcoded-header a:hover i {
  color: var(--brand-light-gold) !important;
}

/* Active sidebar row: the rail is gold on deep green, so its label must stay
   light here too. */
html[data-ems-theme="light"] .pcoded-navbar .pcoded-inner-navbar li.active > a,
html[data-ems-theme="light"] .pcoded-navbar .pcoded-inner-navbar li.active > a i,
html[data-ems-theme="light"] .pcoded-navbar .pcoded-inner-navbar li.pcoded-trigger > a {
  color: var(--brand-light-gold) !important;
}

/* Table head: the dark wash belongs to the dark theme. On paper the head is a
   pale green band so the column labels stay readable. */
html[data-ems-theme="light"] .ems-page table.ems-table thead th {
  background: linear-gradient(180deg, rgba(62, 143, 107, 0.14), rgba(62, 143, 107, 0.07));
  border-bottom-color: rgba(178, 143, 80, 0.38);
  color: #1D5545;
}

html[data-ems-theme="light"] .ems-page .ems-card > .card-header {
  background: linear-gradient(180deg, rgba(62, 143, 107, 0.09), transparent);
}

/* Status pill and primary buttons: dark green ground, so light text. */
html[data-ems-theme="light"] .ems-page__status,
html[data-ems-theme="light"] .ems-page__status * {
  color: var(--brand-off-white);
}

html[data-ems-theme="light"] .ems-page__status {
  background: linear-gradient(180deg, #1D5545, #123D32);
  border-color: rgba(178, 143, 80, 0.45);
}

html[data-ems-theme="light"] .ems-form-actions .btn-primary,
html[data-ems-theme="light"] .ems-toolbar .btn-primary,
html[data-ems-theme="light"] .ems-tab.is-active,
html[data-ems-theme="light"] a.ems-tab.is-active,
html[data-ems-theme="light"] .ems-page .btn-primary,
html[data-ems-theme="light"] .ems-page .btn-primary i {
  color: var(--brand-off-white) !important;
}

/* Eyebrow and card-header icons: gold is the accent on dark, but light gold on
   white fails contrast, so they darken to the base gold. */
html[data-ems-theme="light"] .ems-page__eyebrow,
html[data-ems-theme="light"] .ems-page .ems-card > .card-header h5 i,
html[data-ems-theme="light"] .ems-stat__label {
  color: #6E5520;
}

html[data-ems-theme="light"] { --ems-glow: rgba(178, 143, 80, 0.20); }

/* ==================================================================== */
/*  Sign-in                                                             */
/* ==================================================================== */
/*  The login screen is the first thing anyone sees, so it carries the
    brand on its own -- the stock template's cyan and violet blobs were
    the last place the old palette survived.                            */

.ems-auth {
  background:
    radial-gradient(1100px 620px at 18% -10%, rgba(62, 143, 107, 0.22), transparent 62%),
    radial-gradient(900px 560px at 86% 108%, rgba(178, 143, 80, 0.14), transparent 60%),
    linear-gradient(160deg, #0D2A22 0%, var(--brand-green-black) 58%, #06140F 100%);
}

/* The decorative discs become brand rings rather than filled blobs: at this
   size a solid gold circle would blow past the 10% accent share. */
.ems-auth .auth-bg .r {
  background: transparent !important;
  border: 1px solid rgba(62, 143, 107, 0.30);
  opacity: 0.9;
}

.ems-auth .auth-bg .r:first-child {
  border-color: rgba(178, 143, 80, 0.26);
}

.ems-auth .auth-bg .r.s {
  width: 10px;
  height: 10px;
  background: var(--brand-gold) !important;
  border: none;
  opacity: 0.55;
}

.ems-auth .auth-bg .r.s:last-child {
  background: var(--brand-energy) !important;
}

.ems-auth > .auth-content > .card {
  background: linear-gradient(180deg, rgba(22, 74, 60, 0.96), rgba(13, 42, 34, 0.98)) !important;
  border: 1px solid var(--ems-border);
  border-radius: 12px;
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.55);
  overflow: hidden;
  position: relative;
}

/* One gold hairline across the top, the same signature the app's cards use. */
.ems-auth > .auth-content > .card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 2;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--brand-gold), var(--brand-light-gold), var(--brand-gold), transparent);
}

.ems-auth__brand {
  margin-bottom: 18px;
}

.ems-auth__brand img {
  display: block;
  margin: 0 auto;
  height: 64px;
  width: auto;
  max-width: 200px;
  max-height: 64px;
  object-fit: contain;
}

.ems-auth__title {
  margin: 0;
  font-size: 1.22rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  color: var(--brand-off-white);
}

.ems-auth__sub {
  margin: 4px 0 26px;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-light-gold);
  opacity: 0.8;
}

.ems-auth .form-control,
.ems-auth input[type="text"],
.ems-auth input[type="password"],
.ems-auth input[type="number"] {
  background: rgba(9, 31, 25, 0.72) !important;
  border: 1px solid var(--ems-border) !important;
  color: var(--brand-off-white) !important;
  border-radius: 7px;
  padding: 11px 14px;
  box-shadow: none !important;
}

.ems-auth .form-control::placeholder { color: var(--ems-muted) !important; }

.ems-auth .form-control:focus {
  border-color: var(--brand-gold) !important;
  box-shadow: 0 0 0 3px rgba(178, 143, 80, 0.22) !important;
}

.ems-auth label,
.ems-auth .text-muted { color: var(--ems-muted) !important; }

.ems-auth .btn-primary {
  width: 100%;
  padding: 11px 18px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--brand-off-white) !important;
  background: linear-gradient(180deg, var(--brand-energy), #2C6B50) !important;
  border: 1px solid rgba(178, 143, 80, 0.38) !important;
  border-radius: 7px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35) !important;
}

.ems-auth .btn-primary:hover {
  background: linear-gradient(180deg, #4AA37C, var(--brand-forest)) !important;
  border-color: var(--brand-gold) !important;
}

.ems-auth .text-danger { color: var(--ems-red) !important; font-size: 0.82rem; }

/* ==================================================================== */
/*  BESS power trend                                                    */
/* ==================================================================== */

.ems-trend-panel .ems-power-chart { min-height: 360px; }

.ems-trend-tools {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ems-trend-ranges {
  display: inline-flex;
  padding: 2px;
  border: 1px solid var(--ems-border);
  border-radius: 7px;
  background: rgba(9, 31, 25, 0.5);
}

.ems-trend-range {
  padding: 5px 11px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--ems-muted);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

.ems-trend-range:hover { color: var(--ems-text); }

.ems-trend-range.is-active {
  background: linear-gradient(180deg, rgba(62, 143, 107, 0.34), rgba(29, 85, 69, 0.34));
  color: var(--ems-text-strong);
  box-shadow: inset 0 0 0 1px rgba(178, 143, 80, 0.30);
}

.ems-trend-reset {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--ems-border);
  border-radius: 7px;
  background: rgba(9, 31, 25, 0.5);
  color: var(--ems-muted);
  cursor: pointer;
}

.ems-trend-reset:hover {
  border-color: rgba(178, 143, 80, 0.5);
  color: var(--ems-gold-bright);
}

.ems-trend-legend {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 2px 0 6px;
  font-size: 0.76rem;
  color: var(--ems-muted);
}

/* The swatch is the only thing tying a colour to a direction, so it is a
   filled chip rather than a thin line -- readable at a glance from a desk. */
.ems-trend-key::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 3px;
  margin-right: 7px;
  border-radius: 2px;
  vertical-align: 2px;
}

.ems-trend-key--discharge::before { background: var(--ems-green); }
.ems-trend-key--charge::before { background: var(--ems-cyan); }
.ems-trend-key--soc::before {
  background: repeating-linear-gradient(90deg,
              var(--ems-gold-bright) 0 4px, transparent 4px 7px);
}

.ems-trend-hint {
  margin-left: auto;
  opacity: 0.6;
  font-size: 0.72rem;
}

.ems-trend-meta {
  color: var(--ems-gold-bright);
  font-size: 0.72rem;
  font-weight: 600;
}

/* Wheel zoom owns the pointer over the plot, so the page must not scroll
   under it while the operator is zooming. */
.ems-trend-panel .ems-power-chart { overscroll-behavior: contain; }

/* ==================================================================== */
/*  Sidebar: contrast and hierarchy                                     */
/* ==================================================================== */
/*  Two problems fixed here.                                            */
/*                                                                      */
/*  1. Labels were the pale sage #B3C7BE -- a decorative tint borrowed  */
/*     as a reading colour. Against the deep green rail it measured     */
/*     5.5:1, which passes AA but reads washed out at 13px. The menu is */
/*     the one surface a user scans dozens of times a session, so it    */
/*     takes the off-white (11:1) and a slightly heavier weight.        */
/*                                                                      */
/*  2. The indent step was 8px. A top-level row's text started at 52px  */
/*     (icon + padding) and its children at 60px, so the hierarchy was  */
/*     effectively invisible -- a submenu looked like a sibling. The    */
/*     steps below are 22px with a guide rail, which is the smallest    */
/*     step that still reads as nesting at this type size.              */

.pcoded-navbar .pcoded-inner-navbar li > a {
  color: var(--ems-menu-text) !important;
  font-weight: 500;
}

.pcoded-navbar .pcoded-inner-navbar > li.pcoded-menu-caption > label {
  opacity: 1;
}

/* Level 2 -------------------------------------------------------------- */
.pcoded-navbar .pcoded-inner-navbar .pcoded-submenu > li > a {
  position: relative;
  padding-left: 74px !important;
  font-size: 0.82rem;
  font-weight: 500;
  color: rgba(245, 245, 241, 0.86) !important;
}

/* A short tick at the start of each child, aligned to the guide rail, so
   the eye has something to follow down the group rather than relying on
   white space alone. */
.pcoded-navbar .pcoded-inner-navbar .pcoded-submenu > li > a::after {
  content: "";
  position: absolute;
  left: 52px;
  top: 50%;
  width: 10px;
  height: 1px;
  background: rgba(178, 143, 80, 0.38);
}

/* Level 3 -------------------------------------------------------------- */
.pcoded-navbar .pcoded-inner-navbar .pcoded-submenu .pcoded-submenu > li > a {
  padding-left: 96px !important;
  font-size: 0.8rem;
  color: rgba(245, 245, 241, 0.72) !important;
}

.pcoded-navbar .pcoded-inner-navbar .pcoded-submenu .pcoded-submenu > li > a::after {
  left: 74px;
}

/* The guide rail runs the height of an open group, replacing the flat
   inset shadow the submenu had before. */
.pcoded-navbar .pcoded-submenu {
  position: relative;
  box-shadow: none;
}

.pcoded-navbar .pcoded-submenu::before {
  content: "";
  position: absolute;
  left: 51px;
  top: 4px;
  bottom: 4px;
  width: 1px;
  background: linear-gradient(180deg,
              rgba(178, 143, 80, 0.46), rgba(178, 143, 80, 0.12));
}

.pcoded-navbar .pcoded-submenu .pcoded-submenu::before { left: 73px; }

.pcoded-navbar .pcoded-inner-navbar .pcoded-submenu > li > a:hover {
  color: var(--brand-off-white) !important;
}

.pcoded-navbar .pcoded-submenu li.active > a {
  color: var(--ems-gold-bright) !important;
  font-weight: 650;
}

.pcoded-navbar .pcoded-submenu li.active > a::after {
  background: var(--ems-gold-bright);
  width: 12px;
}

/* Light theme keeps the deep-green rail, so the same light text applies. */
html[data-ems-theme="light"] .pcoded-navbar .pcoded-inner-navbar li > a {
  color: var(--ems-menu-text) !important;
}

html[data-ems-theme="light"] .pcoded-navbar .pcoded-inner-navbar .pcoded-submenu > li > a {
  color: rgba(245, 245, 241, 0.86) !important;
}

/* The stock theme also draws a 5px dot at x=35 on every submenu row. With the
   guide rail and tick above, that is a third marker for the same thing and it
   sits outside the rail, which breaks the alignment the rail establishes. */
.pcoded-navbar .pcoded-inner-navbar li.pcoded-hasmenu .pcoded-submenu li > a:before {
  display: none;
}

/* ==================================================================== */
/*  Footer build stamp + release notes                                  */
/* ==================================================================== */

.ems-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 28px;
  padding: 14px 2px 6px;
  border-top: 1px solid var(--ems-rule);
  font-size: 0.74rem;
  color: var(--ems-muted);
}

.ems-footer__org { opacity: 0.7; }

.ems-footer__version {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border: 1px solid var(--ems-border);
  border-radius: 999px;
  background: rgba(9, 31, 25, 0.4);
  color: var(--ems-muted) !important;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  transition: color .15s ease, border-color .15s ease;
}

.ems-footer__version:hover {
  color: var(--ems-gold-bright) !important;
  border-color: rgba(178, 143, 80, 0.5);
}

.ems-footer__version i { font-size: 12px; }

/* --- release notes ---------------------------------------------------- */

.ems-releases {
  position: relative;
  margin: 8px 0 0;
  padding: 0 0 0 26px;
  list-style: none;
}

/* One spine down the whole list: releases read as a sequence, and the spine
   is what makes "newest first" obvious without a label on every row. */
.ems-releases::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 10px;
  bottom: 10px;
  width: 1px;
  background: linear-gradient(180deg,
              rgba(178, 143, 80, 0.5), rgba(29, 85, 69, 0.5));
}

.ems-release {
  position: relative;
  margin-bottom: 18px;
  padding: 16px 18px;
  border: 1px solid var(--ems-border);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(22, 74, 60, 0.6), rgba(18, 61, 50, 0.6));
}

.ems-release--current {
  border-color: rgba(178, 143, 80, 0.38);
  background: linear-gradient(180deg, rgba(22, 74, 60, 0.95), rgba(18, 61, 50, 0.95));
}

.ems-release__marker {
  position: absolute;
  left: -26px;
  top: 22px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid var(--ems-panel);
  background: var(--ems-border-hot);
}

.ems-release--current .ems-release__marker {
  background: var(--ems-gold-bright);
  box-shadow: 0 0 10px rgba(178, 143, 80, 0.55);
}

.ems-release__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

.ems-release__version {
  font-family: var(--ems-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.82rem;
  font-weight: 650;
  color: var(--ems-gold-bright);
  letter-spacing: 0.02em;
}

.ems-release__date {
  margin-left: auto;
  font-size: 0.74rem;
  color: var(--ems-muted);
}

.ems-release__title {
  margin: 0 0 10px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ems-text-strong);
}

.ems-release__notes {
  margin: 0;
  padding-left: 18px;
  font-size: 0.84rem;
  line-height: 1.7;
  color: var(--ems-text);
}

.ems-release__notes li { margin-bottom: 3px; }

.ems-release__notes li::marker { color: var(--ems-border-hot); }

/* Run-calculation control in the Calculation Results toolbar. It sits apart
   from the date navigation because it writes -- the rest of that bar only
   changes what you are looking at. */
.ems-toolbar__run {
  margin-left: auto;
  display: inline-flex;
}

.ems-run-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.ems-run-btn:disabled,
.ems-run-btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.3);
}

/* While the request is in flight the button says so and refuses a second
   click: the calculation replaces the stored plan, so a double submit is a
   second write racing the first. */
.ems-run-btn.is-running {
  pointer-events: none;
  opacity: 0.7;
}

/* QILIN pull controls on the External Data toolbars. Pushed to the right of
   the date navigation because they fetch and store -- the rest of that bar
   only changes what you are looking at. */
.ems-toolbar__pull {
  margin-left: auto;
  display: inline-flex;
  gap: 8px;
}

.ems-pull-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.ems-pull-btn:disabled,
.ems-pull-btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.3);
}

.ems-pull-btn.is-running { pointer-events: none; opacity: 0.7; }

/* ==================================================================== */
/*  Master control interlock (SCADA)                                    */
/* ==================================================================== */
/*  This band is deliberately the loudest thing in the product. Every    */
/*  other panel looks identical whether or not the software is driving  */
/*  a 1.25 MW battery, so the difference has to be carried entirely     */
/*  here -- by colour, by size, and by a left edge thick enough to see  */
/*  from across a room.                                                 */

.ems-arming {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0 0 22px;
  padding: 18px 22px;
  border: 1px solid var(--ems-border);
  border-left: 6px solid var(--ems-muted);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(22, 74, 60, 0.9), rgba(18, 61, 50, 0.9));
}

.ems-arming__sign {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--ems-border);
  font-size: 20px;
  color: var(--ems-muted);
}

.ems-arming__body { flex: 1 1 auto; min-width: 0; }

.ems-arming__headline {
  margin: 0;
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ems-text-strong);
}

.ems-arming__detail {
  margin: 4px 0 0;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--ems-text);
  opacity: 0.9;
}

.ems-arming__meta {
  margin: 6px 0 0;
  font-size: 0.78rem;
  color: var(--ems-muted);
}

.ems-arming__action { flex: 0 0 auto; }

.ems-arming__note {
  font-size: 0.78rem;
  color: var(--ems-muted);
  font-style: italic;
}

.ems-arming__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 0.86rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  cursor: pointer;
  white-space: nowrap;
  border: 1px solid transparent;
}

/* --- disarmed: the normal, safe resting state ------------------------- */

.ems-arming--disarmed { border-left-color: var(--ems-gold); }
.ems-arming--disarmed .ems-arming__sign {
  color: var(--ems-gold-bright);
  border-color: rgba(178, 143, 80, 0.45);
}

/* The arm button is the only amber-filled control in the product, so it
   cannot be mistaken for one of the ordinary green actions. */
.ems-arming__btn--arm {
  background: linear-gradient(180deg, var(--ems-gold-bright), var(--ems-gold));
  color: #0B1F18;
  border-color: rgba(208, 183, 122, 0.7);
  box-shadow: 0 8px 22px rgba(178, 143, 80, 0.22);
}

.ems-arming__btn--arm:hover {
  background: linear-gradient(180deg, #E0C98E, var(--ems-gold-bright));
}

/* --- armed: live, and it should feel live ----------------------------- */

.ems-arming--armed {
  border-color: rgba(52, 180, 123, 0.45);
  border-left-color: var(--ems-green);
  background: linear-gradient(180deg, rgba(29, 95, 72, 0.95), rgba(20, 70, 55, 0.95));
  box-shadow: 0 0 0 1px rgba(52, 180, 123, 0.14), 0 14px 38px rgba(0, 0, 0, 0.35);
}

.ems-arming--armed .ems-arming__sign {
  color: #0B1F18;
  background: var(--ems-green);
  border-color: var(--ems-green);
  animation: ems-arming-pulse 2.4s ease-in-out infinite;
}

.ems-arming--armed .ems-arming__headline { color: var(--ems-green); }

/* Slow enough not to nag, present enough that a static screenshot and a
   live screen are visibly different. */
@keyframes ems-arming-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(52, 180, 123, 0.5); }
  50%      { box-shadow: 0 0 0 10px rgba(52, 180, 123, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .ems-arming--armed .ems-arming__sign { animation: none; }
}

.ems-arming__btn--disarm {
  background: rgba(9, 31, 25, 0.5);
  color: var(--ems-text);
  border-color: var(--ems-border-hot);
}

.ems-arming__btn--disarm:hover {
  border-color: var(--ems-red);
  color: var(--ems-red);
}

/* --- locked by deployment: nothing to do here ------------------------- */

.ems-arming--locked {
  border-left-color: var(--ems-muted);
  opacity: 0.92;
}

/* --- confirmation dialog ---------------------------------------------- */

.ems-arming-dialog {
  position: fixed;
  inset: 0;
  z-index: 1080;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(6, 18, 14, 0.76);
  backdrop-filter: blur(3px);
}

.ems-arming-dialog[hidden] { display: none; }

.ems-arming-dialog__panel {
  width: min(540px, 100%);
  padding: 26px 28px;
  border: 1px solid rgba(178, 143, 80, 0.4);
  border-radius: 12px;
  background: linear-gradient(180deg, #164A3C, #0F3329);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}

.ems-arming-dialog__panel h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ems-gold-bright);
}

.ems-arming-dialog__panel p {
  margin: 0 0 14px;
  font-size: 0.87rem;
  line-height: 1.6;
  color: var(--ems-text);
}

/* The physical facts, stated before the confirmation field rather than
   after it -- the point is to be read, not acknowledged. */
.ems-arming-dialog__facts {
  margin: 0 0 18px;
  padding: 12px 14px 12px 30px;
  border-left: 3px solid var(--ems-gold);
  border-radius: 0 6px 6px 0;
  background: rgba(9, 31, 25, 0.45);
  font-size: 0.82rem;
  line-height: 1.8;
  color: var(--ems-text);
}

.ems-arming-dialog__panel .ems-field { display: block; margin-bottom: 14px; }

.ems-arming-dialog__panel .ems-field > span {
  display: block;
  margin-bottom: 6px;
  font-size: 0.78rem;
  color: var(--ems-muted);
}

.ems-arming-dialog__panel input[type="text"] {
  width: 100%;
  padding: 10px 13px;
  border: 1px solid var(--ems-border);
  border-radius: 7px;
  background: rgba(9, 31, 25, 0.7);
  color: var(--ems-text);
}

.ems-arming-dialog__panel input[type="text"]:focus {
  border-color: var(--ems-gold);
  box-shadow: 0 0 0 3px rgba(178, 143, 80, 0.22);
  outline: none;
}

.ems-arming-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

html[data-ems-theme="light"] .ems-arming {
  background: linear-gradient(180deg, rgba(62, 143, 107, 0.08), transparent);
}

html[data-ems-theme="light"] .ems-arming--armed {
  background: linear-gradient(180deg, rgba(52, 180, 123, 0.14), rgba(52, 180, 123, 0.05));
}

html[data-ems-theme="light"] .ems-arming__headline,
html[data-ems-theme="light"] .ems-arming__detail { color: #123D32; }


/* ==================================================================== */
/*  Dispatch strategy: switch, filter, comparison                       */
/* ==================================================================== */

.ems-strategy {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--ems-border);
  border-radius: 7px;
  background: rgba(9, 31, 25, 0.5);
}

.ems-strategy--filter { margin: 0 0 12px; }
.ems-strategy--filter .ems-hint { margin-left: 10px; font-size: 0.72rem; }

.ems-strategy__opt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--ems-muted);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}

.ems-strategy__opt:hover { color: var(--ems-text); text-decoration: none; }

/* The active option is the one with consequence, so it carries the gold
   ring the rest of the product reserves for "this is the live setting". */
.ems-strategy__opt.is-active {
  background: linear-gradient(180deg, rgba(62, 143, 107, 0.34), rgba(29, 85, 69, 0.34));
  color: var(--ems-text-strong);
  box-shadow: inset 0 0 0 1px rgba(178, 143, 80, 0.45);
  cursor: default;
}

.ems-strategy__opt.is-active i { color: var(--ems-gold-bright); }
.ems-strategy__opt.is-locked { opacity: 0.5; cursor: not-allowed; }

.ems-strategy-tag {
  display: inline-block;
  padding: 2px 8px;
  margin-left: 8px;
  border-radius: 999px;
  border: 1px solid var(--ems-border);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ems-muted);
  vertical-align: middle;
}

.ems-strategy-tag.is-active {
  color: var(--ems-gold-bright);
  border-color: rgba(178, 143, 80, 0.45);
}

.ems-eyebrow-warn { color: var(--ems-amber); }

.ems-badge--gold {
  color: #0B1F18;
  background: var(--ems-gold-bright);
  border-color: var(--ems-gold-bright);
}

/* --- comparison card --------------------------------------------------- */

.ems-compare .card-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ems-compare .card-header .ems-hint { margin: 0; font-size: 0.74rem; }

.ems-compare__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}

.ems-compare__col {
  padding: 16px 18px;
  border: 1px solid var(--ems-border);
  border-radius: 9px;
  background: rgba(9, 31, 25, 0.35);
}

/* Active gets the gold frame; "viewing" gets a soft green wash. The two can
   coincide and usually do -- a comparison view is the exception, and it
   should look like one. */
.ems-compare__col.is-active { border-color: rgba(178, 143, 80, 0.5); }
.ems-compare__col.is-viewing { background: rgba(62, 143, 107, 0.10); }

.ems-compare__head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.ems-compare__name { font-weight: 650; color: var(--ems-text-strong); }

.ems-compare__big {
  margin: 4px 0 10px;
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ems-text-strong);
  font-variant-numeric: tabular-nums;
}

.ems-compare__big small { font-size: 0.9rem; font-weight: 500; color: var(--ems-muted); }

.ems-compare__kv {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 14px;
  margin: 0 0 12px;
  font-size: 0.8rem;
}
.ems-compare__kv dd small {
  display: block;
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--brand-mist);
  letter-spacing: 0.01em;
}

.ems-compare__kv dt { color: var(--ems-muted); }
.ems-compare__kv dd { margin: 0; text-align: right; color: var(--ems-text); font-variant-numeric: tabular-nums; }

.ems-compare__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 600;
}

.ems-compare__link.is-current { color: var(--ems-muted); }


/* ==================================================================== */
/*  Calculation page: two strategies stacked                            */
/* ==================================================================== */

.ems-calc-stack { display: grid; gap: 16px; }

.ems-calc-stack__item {
  padding: 10px 12px 4px;
  border: 0;
  border-left: 5px solid transparent;
  border-radius: 0;
  /* No tint behind the plot: the card already has its surface, and a second
     layer only muddied the price lines. The coloured left rule is all the
     framing a chart needs to say which strategy it is. */
  background: transparent;
}

/* The owner's colours: greedy red, balanced green, simple blue. The left
   rule is the same colour as the chart's ribbon and SOC line, so a glance at
   the edge says which chart this is. */
.ems-calc-stack__item--greedy   { border-left-color: var(--ems-red); }
.ems-calc-stack__item--balanced { border-left-color: var(--ems-green); }
.ems-calc-stack__item--simple   { border-left-color: var(--ems-chart-blue); }

.ems-calc-stack__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-bottom: 2px;
  font-size: 0.8rem;
}

.ems-calc-stack__head .ems-trend-key { font-weight: 700; color: var(--ems-text-strong); }
.ems-calc-stack__head .ems-trend-hint { margin-left: auto; }

.ems-calc-stack__margin {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ems-text-strong);
}

.ems-trend-key--greedy::before   { background: var(--ems-red); }
.ems-trend-key--balanced::before { background: var(--ems-green); }
.ems-trend-key--simple::before   { background: var(--ems-chart-blue); }
.ems-trend-key--bar-sell::before   { background: var(--ems-chart-sell); border-radius: 2px; }
.ems-trend-key--bar-charge::before { background: var(--ems-chart-charge); border-radius: 2px; }
.ems-calc-stack__head .ems-trend-key--bar-sell,
.ems-calc-stack__head .ems-trend-key--bar-charge { font-weight: 500; color: var(--ems-muted); margin-left: 6px; }

.ems-calc-stack__chart { min-height: 300px; }


/* ==================================================================== */
/*  CHP heat schedule page                                              */
/* ==================================================================== */

.ems-daypicker { display: flex; gap: 6px; flex-wrap: wrap; }

.ems-daypicker__day {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid var(--ems-border);
  border-radius: 7px;
  background: rgba(9, 31, 25, 0.5);
  color: var(--ems-text);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}

.ems-daypicker__day.is-weekend { color: var(--ems-muted); }
.ems-daypicker__day:has(input:checked) {
  border-color: rgba(178, 143, 80, 0.55);
  background: linear-gradient(180deg, rgba(62, 143, 107, 0.34), rgba(29, 85, 69, 0.34));
  color: var(--ems-text-strong);
}
.ems-daypicker__day input { accent-color: var(--ems-gold); }

.ems-check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.ems-check input { accent-color: var(--ems-gold); }

.ems-heat-preview {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
}

.ems-heat-preview__day {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--ems-border);
  border-left: 4px solid var(--ems-muted);
  border-radius: 7px;
  font-size: 0.78rem;
  color: var(--ems-muted);
}

.ems-heat-preview__day.is-on { border-left-color: var(--ems-green); color: var(--ems-text); }
.ems-heat-preview__day.is-today { box-shadow: inset 0 0 0 1px rgba(178, 143, 80, 0.45); }
.ems-heat-preview__date { font-weight: 650; color: var(--ems-text-strong); }
.ems-heat-preview__hours { font-variant-numeric: tabular-nums; }
.ems-heat-preview__why { font-size: 0.72rem; opacity: 0.85; }

.ems-row--muted td { color: var(--ems-muted); }
.ems-details summary { cursor: pointer; color: var(--ems-gold-bright); font-size: 0.8rem; margin: 8px 0; }
.ems-prose p { font-size: 0.84rem; line-height: 1.6; color: var(--ems-text); }
.ems-prose p:last-child { margin-bottom: 0; }

/* Placeholder dates on the heat page read like real entries on the dark
   ground; dim them so an empty list looks empty. */
.ems-heat-page textarea::placeholder { color: var(--ems-muted); opacity: 0.45; }


/* A window list that outgrew a line: folded to a count, expandable. */
.ems-trend-hint--fold summary {
  cursor: pointer;
  color: var(--brand-mist);
  list-style: none;
}
.ems-trend-hint--fold summary::before { content: "\25B8  "; color: var(--brand-light-gold); }
.ems-trend-hint--fold[open] summary::before { content: "\25BE  "; }
.ems-trend-hint--fold > span { display: block; margin-top: 4px; }


/* Account menu under the gear: who you are, as what, then the actions. */
.ems-account-menu .pro-head { display: flex; align-items: center; gap: 10px; }
.ems-account-menu__who { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.ems-account-menu__who strong { color: var(--brand-off-white); font-weight: 600; }
.ems-account-menu__who small { color: var(--brand-mist); font-size: 0.72rem; }
.ems-account-menu .pro-body .dropdown-item i { width: 18px; margin-right: 6px; color: var(--brand-light-gold); }
.ems-password-page .ems-field input { width: 100%; }

/* Header dropdowns (gear, language): dark.css paints every .dropdown-item
   #adb7be with !important, a pale grey that reads as disabled on the deep
   green menu. Override at higher specificity, also with !important, with
   the brand's text colour, and give the menu the brand surfaces. */
.pcoded-header .dropdown .profile-notification {
  background: var(--brand-deep-green) !important;
  border: 1px solid var(--brand-forest);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
}
.pcoded-header .dropdown .profile-notification .pro-head {
  background: var(--brand-forest) !important;
  color: var(--brand-off-white) !important;
}
.pcoded-header .dropdown .profile-notification .pro-head .dud-logout { color: var(--brand-off-white) !important; }
.pcoded-header .dropdown .profile-notification .pro-body li a,
.pcoded-header .dropdown .profile-notification .pro-body .dropdown-item,
.pcoded-header .dropdown .profile-notification .dropdown-item {
  color: var(--brand-off-white) !important;
  font-weight: 500;
  opacity: 1;
}
.pcoded-header .dropdown .profile-notification .pro-body li a:hover,
.pcoded-header .dropdown .profile-notification .pro-body li:hover > a,
.pcoded-header .dropdown .profile-notification .dropdown-item:hover,
.pcoded-header .dropdown .profile-notification .dropdown-item:focus {
  color: var(--brand-off-white) !important;
  background: rgba(178, 143, 80, 0.16) !important;      /* gold tint */
}
.pcoded-header .dropdown .profile-notification .pro-body li a i,
.pcoded-header .dropdown .profile-notification .dropdown-item i { color: var(--brand-light-gold) !important; }
.pcoded-header .dropdown.drp-user.show:before { color: var(--brand-forest) !important; }