/* ============================================================================
   Online Meters — overrides on Solar Admin (Bootstrap 5.3)
   "combine" pass: Solar's shell + components  +  the CRMHq dashboard look
   (Helvetica/Arial like the PDF reports, cool-grey canvas, soft rounded cards, pastel KPI cards, pill buttons)
   ========================================================================== */

:root{
  --om-font: Helvetica, Arial, "Liberation Sans", sans-serif;   /* same face the PDF reports use */
  --om-canvas:#eef2f8;
  --om-panel:#ffffff;
  --om-rule:#e9eef6;
  --om-ink:#25324c;
  --om-ink-2:#69788f;
  --om-ink-3:#9aa6bd;
  --om-accent:#4d7cff;
  --om-accent-wash:#eaf0ff;
  --om-shadow:0 1px 2px rgba(37,51,77,.05), 0 8px 24px -8px rgba(37,51,77,.14);
  --om-radius:16px;

  --k1-bg:#fdefe9; --k1-ic:#f5731f;   /* Energy      — peach  */
  --k2-bg:#fff5e4; --k2-ic:#f4a723;   /* Max demand  — cream  */
  --k3-bg:#e6f6f1; --k3-ic:#12a58c;   /* Avg load    — mint   */
  --k4-bg:#e8f1fe; --k4-ic:#3d8bf0;   /* Load factor — sky    */
  --k5-bg:#efeafb; --k5-ic:#7a5cf0;   /* Power factor— lilac  */
}
.dark-skin{
  --om-canvas:#0a0f1c;
  --om-panel:#131a2c;
  --om-rule:#232c44;
  --om-ink:#e7ecf7;
  --om-ink-2:#9fadc9;
  --om-ink-3:#6b7899;
  --om-accent:#5b8bff;
  --om-accent-wash:#1c2a4d;
  --om-shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 30px -8px rgba(0,0,0,.5);
  --k1-bg:#2a1d16; --k1-ic:#f5731f;
  --k2-bg:#2a2312; --k2-ic:#f4a723;
  --k3-bg:#122a26; --k3-ic:#19c0a3;
  --k4-bg:#152437; --k4-ic:#4f95f5;
  --k5-bg:#211c3a; --k5-ic:#8f74f5;
}

/* ---- typography: one face everywhere, the same Helvetica the PDF reports use ---- */
body, .box, .box-title, .page-title, .breadcrumb, .sidebar-menu, .dropdown-menu, .base-font, .heading-font, .grid-stack-item-content, .progressbar-text,
h1,h2,h3,h4,h5,h6, .btn, .form-control, .form-select, input, select, textarea, .badge, .table{
  font-family:var(--om-font) !important;
}
h1,h2,h3,h4,.box-title,.page-title{ font-weight:800 !important; letter-spacing:-.01em; }
body{ font-weight:500; }

/* ---- surfaces ---- */
body, .wrapper, .content-wrapper, .container-full{ background:var(--om-canvas) !important; }
.dark-skin body, .dark-skin .wrapper, .dark-skin .content-wrapper{ background:var(--om-canvas) !important; }

.box{
  border-radius:var(--om-radius) !important;
  border:1px solid var(--om-rule) !important;
  box-shadow:var(--om-shadow) !important;
  background:var(--om-panel) !important;
}
.box-header{ border-bottom:1px solid var(--om-rule) !important; padding:16px 20px !important; }
.box-header.with-border{ border-bottom:1px solid var(--om-rule) !important; display:flex; flex-wrap:wrap; align-items:baseline; column-gap:12px; row-gap:2px; }
.box-header .box-title{ margin:0; }
.box-body{ padding:18px 20px !important; }
.box-title{ font-size:15.5px !important; color:var(--om-ink) !important; }

/* ---- header + sidebar ---- */
.main-header, .light-skin .main-header .navbar{ background:var(--om-panel) !important; }
.main-sidebar, .light-skin .main-sidebar{ background:var(--om-panel) !important; border-right:1px solid var(--om-rule) !important; }
.sidebar-menu > li > a{ font-weight:700 !important; border-radius:10px; margin:2px 10px; color:var(--om-ink-2) !important; }
.sidebar-menu > li.active > a, .sidebar-menu > li > a:hover{
  background:var(--om-accent-wash) !important; color:var(--om-accent) !important;
}
.sidebar-menu > li.active > a{ box-shadow:inset 3px 0 0 var(--om-accent); }
.sidebar-menu .header{
  color:var(--om-ink-3) !important; font-weight:800 !important; letter-spacing:.04em;
  font-size:11px !important; padding:16px 20px 6px !important;
}
.main-footer{ background:var(--om-panel) !important; color:var(--om-ink-3) !important; border-top:1px solid var(--om-rule) !important; }

/* ---- text helpers align to CRMHq ink ---- */
.text-fade{ color:var(--om-ink-3) !important; }
.page-title{ font-size:21px !important; color:var(--om-ink) !important; }
.breadcrumb-item, .breadcrumb-item a{ color:var(--om-ink-3) !important; font-weight:700; }
.breadcrumb-item.active{ color:var(--om-ink-2) !important; }

/* ---- buttons: pill ---- */
.btn{ border-radius:999px !important; font-weight:700 !important; }
.btn-primary{ background:var(--om-accent) !important; border-color:var(--om-accent) !important; }
.rangeseg .btn-group{ background:var(--om-canvas); border:1px solid var(--om-rule); border-radius:999px; padding:3px; }
.rangeseg .btn-group .btn{ border:0 !important; background:transparent !important; color:var(--om-ink-2) !important; padding:6px 14px !important; }
.rangeseg .btn-group .btn.active{ background:var(--om-accent) !important; color:#fff !important; }
.omdate{ max-width:150px; border-radius:10px !important; }
.form-control, .form-select{ border-radius:10px !important; }

/* ============================ KPI CARDS (CRMHq) ============================ */
.kpi.box{ border:0 !important; box-shadow:none !important; }
.kpi.k1{ background:var(--k1-bg) !important; }
.kpi.k2{ background:var(--k2-bg) !important; }
.kpi.k3{ background:var(--k3-bg) !important; }
.kpi.k4{ background:var(--k4-bg) !important; }
.kpi.k5{ background:var(--k5-bg) !important; }
.kpi .box-body{ padding:20px !important; min-height:150px; display:flex; flex-direction:column; }
.kpi h2{ font-size:27px !important; font-weight:900 !important; color:var(--om-ink) !important; letter-spacing:-.02em; line-height:1.1; }
.kpi .kpi-label{ font-size:13px; font-weight:700; color:var(--om-ink-2); }

.kpi-ic{
  width:46px;height:46px;flex:0 0 46px;border-radius:13px;display:grid;place-items:center;color:#fff;
  background:var(--om-ink-3);
}
.kpi.k1 .kpi-ic{ background:var(--k1-ic); }
.kpi.k2 .kpi-ic{ background:var(--k2-ic); }
.kpi.k3 .kpi-ic{ background:var(--k3-ic); }
.kpi.k4 .kpi-ic{ background:var(--k4-ic); }
.kpi.k5 .kpi-ic{ background:var(--k5-ic); }
.kpi-ic i, .kpi-ic svg{ width:22px;height:22px; }
/* Baseline status card: green when saving, red when over-consuming, neutral when level with the baseline */
.kpi.bl-save{ background:rgba(39,183,55,.14) !important; }
.kpi.bl-save .kpi-ic{ background:#1aa251; }
.kpi.bl-over{ background:rgba(245,50,92,.12) !important; }
.kpi.bl-over .kpi-ic{ background:#e5484d; }
.kpi.bl-flat{ background:rgba(138,147,165,.16) !important; }
.bl-good{ color:#1aa251; } .bl-bad{ color:#e5484d; }
.dark-skin .bl-good{ color:#33b985; } .dark-skin .bl-bad{ color:#f0575c; }
.bl-tbl{ max-height:420px; overflow:auto; }

.kpi-delta{ font-size:12px;font-weight:800; }
.kpi-delta.up{ color:#1aa251; }
.kpi-delta.down{ color:#e5484d; }
.dark-skin .kpi-delta.up{ color:#33b985; }
.dark-skin .kpi-delta.down{ color:#f0575c; }

/* ============================ AUTH ============================ */
#auth{
  position:fixed;inset:0;z-index:2000;display:grid;place-items:center;padding:20px;
  background:#1b2a4e url(../images/auth-bg/bg-16.jpg) center/cover no-repeat;
}
#auth .auth-card{ width:404px;max-width:94vw;border-radius:20px !important; }
#auth .auth-top{ padding:26px 32px 0; }
#auth .auth-body{ padding:30px 34px 34px; }
#auth .brand-mark{
  width:48px;height:48px;border-radius:14px;display:grid;place-items:center;
  color:#fff;font-weight:800;font-size:16px;margin-bottom:14px;
  background:linear-gradient(135deg,var(--om-accent),#8b5cf6);
}
#auth h3{ font-weight:800 !important; }
#auth .btn-primary{ padding:12px; }

/* ============================ PHASOR ============================ */
.phasor{width:100%;max-width:420px;margin:0 auto;display:block}
.phasor .ring{fill:none;stroke:rgba(95,99,121,.25)}
.phasor .tick{stroke:rgba(95,99,121,.18)}
.phasor .axis{stroke:rgba(95,99,121,.18)}
.phasor .deg{fill:var(--om-ink-3);font-size:9px;font-weight:700}
.phasor .vlabel{font-size:10.5px;font-weight:700}
.dark-skin .phasor .ring,.dark-skin .phasor .tick,.dark-skin .phasor .axis{stroke:rgba(255,255,255,.14)}

/* ============================ MISC ============================ */
[hidden]{display:none !important}
#loader{display:none !important}   /* not used — kill Solar's preloader illustration */
.om-updated{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--om-ink-3);font-weight:700;white-space:nowrap}
.om-updated .live{width:7px;height:7px;border-radius:50%;background:#1aa251;animation:ompulse 2.4s ease-out infinite}
@keyframes ompulse{0%{box-shadow:0 0 0 0 rgba(26,162,81,.5)}70%{box-shadow:0 0 0 8px rgba(26,162,81,0)}100%{box-shadow:0 0 0 0 rgba(26,162,81,0)}}
.om-load{display:flex;align-items:center;justify-content:center;gap:10px;padding:40px;color:var(--om-ink-3);font-weight:700}
.om-sp{width:18px;height:18px;border:2.5px solid rgba(95,99,121,.25);border-top-color:var(--om-accent);border-radius:50%;animation:omspin .7s linear infinite}
@keyframes omspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.om-updated .live,.om-sp{animation:none}}
.picker-menu{max-height:60vh;overflow:auto;min-width:320px;border-radius:14px !important;box-shadow:var(--om-shadow) !important;border:1px solid var(--om-rule) !important}
.picker-menu .dropdown-item{white-space:normal;border-radius:8px;font-weight:600}
.picker-search{position:sticky;top:-10px;z-index:2;margin:-10px -10px 8px;padding:10px 10px 8px;background:var(--om-panel,#fff);border-bottom:1px solid var(--om-rule);border-radius:14px 14px 0 0}
.picker-search > svg,.picker-search > i{position:absolute;left:22px;top:21px;width:16px;height:16px;color:var(--om-mute,#8a93a5);pointer-events:none}
.picker-search .form-control{padding-left:36px;border-radius:10px;font-weight:600}
.picker-count{font-size:11.5px;font-weight:700;padding:5px 4px 0}
.picker-menu .dropdown-item.active{background:var(--om-accent-wash) !important;color:var(--om-accent) !important}

/* meter-account selector above the page heading */
.acct-bar .btn{
  background:var(--om-panel) !important; border:1px solid var(--om-rule) !important;
  color:var(--om-ink) !important; box-shadow:var(--om-shadow) !important;
  font-size:15px !important; border-radius:12px !important;
}
.acct-bar .btn:hover{ border-color:var(--om-accent) !important; }
.acct-bar .btn i{ color:var(--om-accent); }
/* Dashboard tariff comparison: a thin bar under each tariff name, scaled to the dearest tariff */
.om-tbar{ height:6px; border-radius:6px; background:var(--om-rule); overflow:hidden; max-width:360px; }
.om-tbar span{ display:block; height:100%; border-radius:6px; background:var(--om-accent); }
.om-tc{ display:flex; flex-wrap:wrap; gap:10px 28px; align-items:flex-start; padding:14px 0; border-top:1px solid var(--om-rule); }
.om-tc-name{ flex:1 1 300px; min-width:0; overflow-wrap:anywhere; }
.om-tc-fig{ display:flex; flex-wrap:wrap; gap:10px 26px; align-items:flex-start; }
.om-tc-fig > div{ min-width:96px; }
.om-tc-act{ align-self:center; }
@media (min-width:768px){
  .om-tc-fig{ flex-wrap:nowrap; }
  .om-tc-fig > div:not(.om-tc-act){ text-align:right; width:118px; }
  .om-tc-fig > div:nth-child(3){ width:170px; }
  .om-tc-fig > .om-tc-act{ width:64px; text-align:right; }
}
/* tariff selector — only present when the account has two or more tariffs; tariff names can be long */
.acct-bar .dropdown{ max-width:100%; }
.acct-bar .tariff-btn{ max-width:100%; text-align:left; }
.acct-bar .tariff-label{ display:inline-block; max-width:min(560px,68vw); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:bottom; }

/* version number — bottom-left in the footer, and on the login card */
.om-ver{ font-size:11.5px; font-weight:700; letter-spacing:.02em; color:var(--om-ink-3); }
.main-footer .om-foot-sep{ margin:0 6px; color:var(--om-ink-3); opacity:.5; }
#auth .om-ver{ margin-left:4px; opacity:.85; }

/* org banner logo in the top-left brand area. It is scaled to fill the brand slot (whatever the logo's
   shape or size) while keeping its proportions: the slot is the template's logo bar minus a little padding,
   and the image is laid over it, so a big logo can never push the header taller. */
.logo-box .logo{ overflow:visible !important; display:flex !important; align-items:stretch !important; box-sizing:border-box; padding-top:6px !important; padding-bottom:6px !important; }
.main-header .logo-box .logo{ height:80px; }
@media (max-width:767px){ .main-header .logo-box .logo{ height:66px; } }
.logo-box .logo-lg{ position:relative; display:flex; align-items:center; flex:1 1 auto; min-width:0; padding:0 !important; line-height:normal !important; }
.om-brand-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; object-position:center; box-sizing:border-box; }
/* the template hides the "light" logo span in the dark skin; ours holds the org logo/name, so keep it */
.dark-skin .main-header .logo .logo-lg .light-logo.om-brand{ display:block; }
.dark-skin .om-brand-img{ background:#fff; border-radius:10px; padding:4px 8px; }

/* resolution select in the range bar */
#rRes{ border-radius:999px !important; font-weight:700; }

/* prepaid / ledger — the available-balance hero card */
.pp-bal .box-body{ min-height:0; }
.pp-bal-amt{ font-size:30px !important; line-height:1.15; letter-spacing:-.02em; }
@media (min-width:992px){ .pp-bal-amt{ font-size:34px !important; } }
.pp-bal-amt.text-danger{ color:#e5484d !important; }
.dark-skin .pp-bal-amt.text-danger{ color:#f0575c !important; }
.table > :not(caption) > * > *{ border-color:var(--om-rule) !important; }