@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

:root{
  --primary:#00FF9C;
  --primary-2:#02f7e1;
  --bg-deep:#020617;      /* slate-950 */
  --bg-card:#0f172a;      /* slate-900 */
  --bg-alt:#1E293B;       /* slate-800/700 */
  --text:#e2e8f0;         /* slate-200 */
  --muted:#94a3b8;        /* slate-400 */
  --ok:#10b981;           /* emerald-500 */
  --warn:#f59e0b;         /* amber-500 */
  --err:#ef4444;          /* red-500 */
  --info:#60a5fa;         /* blue-400 */
}

*{ box-sizing:border-box }

html, body {
  height: 100%;
  background: transparent !important; /* no gradient, no fill */
  color: var(--text);
  font-family: 'Poppins', sans-serif;
  overflow-x: hidden;
}

body.light-mode{
  background: transparent !important;    /* keep image also in light mode */
  color:#0f172a;
}

.sparkline { width: 100%; height: 32px; }
a{ color:inherit }

nav{
  background: linear-gradient(90deg,#02343F 0%, #1E293B 100%);
  box-shadow:0 6px 24px rgba(0,0,0,.35);
}
body.light-mode nav{ background:#f1f5f9; }

.nav-link{ transition:color .25s ease }
.nav-link:hover{ color:var(--primary) }

.bg-hero {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: url("../images/energy-bg.jpg"); /* optional fallback */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 1;               /* make sure it's 100% visible */
  filter: none !important;  /* remove blur or saturation filters */
}

/* ---------- Colored parameter titles ---------- */
.param-title {
  font-weight: 600;
  letter-spacing: 0.5px;
  text-shadow: 0 0 8px rgba(255,255,255,0.15);
}

/* Voltage parameters — Neon green */
.param-title[data-type*="voltage"] {
  font-size: 1.1rem; /* increased font size */
  font-weight: 700;  /* stronger emphasis */
  color: #00FF9C;
  text-shadow: 0 0 10px rgba(0,255,156,0.6);
  letter-spacing: 0.7px;
  transition: all 0.3s ease-in-out;
}

/* Current parameters — Aqua blue */
.param-title[data-type*="current"] {
  color: #22d3ee;
  text-shadow: 0 0 10px rgba(34,211,238,0.6);
  font-size: 1.1rem; /* increased font size */
  font-weight: 700;  /* stronger emphasis */
  letter-spacing: 0.7px;
  transition: all 0.3s ease-in-out;
}

/* Power Factor — Purple glow */
.param-title[data-type*="pf"] {
  font-size: 1.1rem; /* increased font size */
  font-weight: 700;  /* stronger emphasis */
  color: #a78bfa;
  text-shadow: 0 0 14px rgba(167,139,250,0.85), 0 0 20px rgba(167,139,250,0.4);
  letter-spacing: 0.7px;
  transition: all 0.3s ease-in-out;
}

/* Frequency — Sky blue */
.param-title[data-type*="frequency"] {
  color: #38bdf8;
  text-shadow: 0 0 10px rgba(56,189,248,0.6);
  font-size: 1.1rem; /* increased font size */
  font-weight: 700;  /* stronger emphasis */
  letter-spacing: 0.7px;
  transition: all 0.3s ease-in-out;
}

/* KWh / KVA — Amber yellow */
.param-title[data-type*="kwh"],
.param-title[data-type*="kva"] {
  color: #f59e0b;
  text-shadow: 0 0 10px rgba(245,158,11,0.6);
  font-size: 1.1rem; /* increased font size */
  font-weight: 700;  /* stronger emphasis */
  letter-spacing: 0.7px;
  transition: all 0.3s ease-in-out;
}

/* Default fallback (for misc fields) */
.param-title[data-type*="date"] {
  color: #94a3b8;  /* muted gray for datetime tile */
  text-shadow: none;
}

.energy-card{
  background: linear-gradient(180deg, var(--bg-alt) 0%, var(--bg-card) 100%);
  border:1px solid rgba(0,255,156,.2);
  box-shadow:0 0 18px rgba(0,255,156,.06);
  border-radius:16px; transition:transform .35s, box-shadow .35s;
}
.energy-card:hover{
  transform:translateY(-4px);
  box-shadow:0 0 28px rgba(0,255,156,.28);
}

.param-title {
  color: var(--primary);                /* Neon green highlight */
  text-shadow: 0 0 8px rgba(0,255,156,0.5); /* Glow effect */
  letter-spacing: 0.5px;
  font-weight: 600;
}

.energy-card:hover .param-title {
  filter: brightness(1.3);
  text-shadow: 0 0 14px currentColor;
  transition: all 0.3s ease;
}

.glow-text{ color:var(--primary); text-shadow:0 0 10px var(--primary) }

.btn-ghost:hover {
  background: rgba(0,255,156,0.08);
  box-shadow: 0 0 10px rgba(0,255,156,0.2);
}

.btn-primary{
  background:linear-gradient(90deg,var(--primary) 0%, var(--primary-2) 100%);
  color:#0b1220; font-weight:600;
  border-radius:10px; padding:.6rem 1rem;
  transition:transform .2s ease, filter .2s ease;
}
.btn-primary:hover{ transform:translateY(-1px) scale(1.02); filter:brightness(1.06) }

.btn-ghost{
  background:transparent; border:1px solid rgba(255,255,255,.15);
  padding:.5rem .9rem; border-radius:10px;
}
body.light-mode .btn-ghost{ border-color:#cbd5e1 }

.card{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  border-radius:14px; padding:16px;
}
body.light-mode .card{
  background:#fff; border-color:#e5e7eb;
}

.chart-card{ composes: card; }
.chart-card:hover{ box-shadow:0 0 25px rgba(0,255,156,.18) }

.table{
  width:100%; border-collapse:separate; border-spacing:0;
  font-size:.9rem;
}
.table thead th{
  background:rgba(255,255,255,.08);
  padding:.7rem; text-align:left; position:sticky; top:0; z-index:1;
}
.table tbody td{ padding:.65rem; border-top:1px solid rgba(255,255,255,.08) }
body.light-mode .table thead th{ background:#f1f5f9 }
body.light-mode .table tbody td{ border-color:#e5e7eb }

.badge{
  display:inline-block; padding:.18rem .55rem; border-radius:999px; font-size:.75rem; font-weight:600;
}
.badge-info{ background:rgba(96,165,250,.15); color:#93c5fd; border:1px solid rgba(96,165,250,.35) }
.badge-warn{ background:rgba(245,158,11,.15); color:#fcd34d; border:1px solid rgba(245,158,11,.35) }
.badge-err{  background:rgba(239,68,68,.15);  color:#fecaca; border:1px solid rgba(239,68,68,.35) }
.badge-alert{background:rgba(16,185,129,.15); color:#a7f3d0; border:1px solid rgba(16,185,129,.35) }

.section{
  display:flex; align-items:center; justify-content:space-between;
  margin:12px 0 18px;
}

.fade-in{ animation:fadeIn .9s ease forwards; opacity:0; transform:translateY(14px) }
@keyframes fadeIn{ to{ opacity:1; transform:none } }

/* Inputs */
.input, .select{
  width:100%; background:#0b1220; border:1px solid rgba(255,255,255,.12);
  color:var(--text); border-radius:10px; padding:.55rem .7rem;
}
.input:focus, .select:focus{ outline:none; border-color:var(--primary) }
body.light-mode .input, body.light-mode .select{ background:#fff; color:#0f172a; border-color:#cbd5e1 }

/* Collapsible */
.collapse{ border:1px solid rgba(255,255,255,.12); border-radius:12px; overflow:hidden }
.collapse summary{
  cursor:pointer; list-style:none; padding:12px 14px; background:rgba(255,255,255,.04); font-weight:600;
}
.collapse .content{ padding:14px }

/* Toastify override for dark nav spacing */
.toastify{ border-radius:10px; font-weight:600 }


/* Base */
.param-value {
  text-shadow: 0 0 8px rgba(255,255,255,0.12);
}

/* Voltage — Neon green */
.param-title[data-type*="voltage"],
.param-value[data-type*="voltage"] {
  color: #00FF9C;
  text-shadow: 0 0 10px rgba(0,255,156,0.6);
}

/* Current — Aqua blue */
.param-title[data-type*="current"],
.param-value[data-type*="current"] {
  color: #22d3ee;
  text-shadow: 0 0 10px rgba(34,211,238,0.6);
}

.param-value[data-type*="current_rphase"] {
  color: #d60404;
  text-shadow: 0 0 14px rgba(167,139,250,0.85);
}

.param-value[data-type*="voltage_rphase"] {
  color: #d60404;
  text-shadow: 0 0 14px rgba(167,139,250,0.85);
}

.param-value[data-type*="voltage_yphase"] {
  color: #d6c104;
  text-shadow: 0 0 14px rgba(167,139,250,0.85);
}

.param-value[data-type*="current_yphase"] {
  color: #d6c104;
  text-shadow: 0 0 14px rgba(167,139,250,0.85);
}

.param-value[data-type*="voltage_bphase"] {
  color: #0451d6;
  text-shadow: 0 0 14px rgba(167,139,250,0.85);
}

.param-value[data-type*="current_bphase"] {
  color: #0451d6;
  text-shadow: 0 0 14px rgba(167,139,250,0.85);
}

/* Power Factor — Purple (bigger, bolder per your last request) */
.param-title[data-type*="pf"] {
  color: #a78bfa;
  font-size: 1.1rem;
  font-weight: 700;
  text-shadow: 0 0 14px rgba(167,139,250,0.85), 0 0 20px rgba(167,139,250,0.4);
  letter-spacing: 0.7px;
}
.param-value[data-type*="pf"] {
  color: #a78bfa;
  text-shadow: 0 0 14px rgba(167,139,250,0.85);
}

/* Frequency — Sky blue */
.param-title[data-type*="frequency"],
.param-value[data-type*="frequency"] {
  color: #38bdf8;
  text-shadow: 0 0 10px rgba(56,189,248,0.6);
}

/* KWh / KVA — Amber */
.param-title[data-type*="kwh"],
.param-value[data-type*="kwh"],
.param-title[data-type*="kva"],
.param-value[data-type*="kva"] {
  color: #f59e0b;
  text-shadow: 0 0 10px rgba(245,158,11,0.6);
}

/* Datetime — muted */
.param-title[data-type*="date"],
.param-value[data-type*="date"] {
  color: #94a3b8;
  text-shadow: none;
}

/* Optional hover punch */
.energy-card:hover .param-title,
.energy-card:hover .param-value {
  filter: brightness(1.2);
  text-shadow: 0 0 14px currentColor;
  transition: all .25s ease;
}

/* ---------- Mobile-first tweaks ---------- */

/* Make all cards auto-wrap nicely on any width */
#cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

/* Friendlier, fluid typography for titles/values inside tiles */
.param-title { font-size: clamp(.8rem, 1.8vw, 1.1rem); }
.param-value { font-size: clamp(1.2rem, 4.6vw, 1.85rem); }

/* Buttons: full-width on narrow screens, correct tap size */
.btn-primary, .btn-ghost { min-height: 44px; }
@media (max-width: 640px) {
  .btn-primary, .btn-ghost { width: 100%; }
}

/* Section header: stack title + actions on small screens */
.section { gap: 12px; }
@media (max-width: 768px) {
  .section { flex-direction: column; align-items: flex-start; }
}

/* Forms: inputs span full width; action buttons wrap under */
.card form .grid { row-gap: 10px; }
@media (max-width: 768px) {
  .card form .flex.gap-2 { width: 100%; }
  .card form .flex.gap-2 > * { flex: 1; }
}

/* Charts: slightly shorter on mobile to avoid vertical scroll */
.chart-card canvas { height: 220px !important; }
@media (max-width: 768px) {
  .chart-card canvas { height: 160px !important; }
}

/* Table readability on phones */
.table { table-layout: fixed; }
.table thead th, .table tbody td {
  word-break: break-word;
  white-space: nowrap;
}
@media (max-width: 768px) {
  .table { font-size: .85rem; }
  /* keep header sticky but reduce padding */
  .table thead th { padding: .55rem; }
  .table tbody td { padding: .5rem; }
}

/* Ensure table container can scroll horizontally on small screens */
.card.overflow-x-auto { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Nav: allow wrapping and keep links tappable */
nav { padding: 8px 12px; }
@media (max-width: 768px) {
  .nav-actions, .nav-links { flex-wrap: wrap; gap: 8px; }
}

/* Background image: keep performance and readability */
.bg-hero { background-attachment: fixed; }
@media (max-width: 768px) {
  .bg-hero { background-attachment: scroll; } /* smoother on mobile */
}

/* Hard stop: never let the page exceed the viewport width */
html, body { max-width: 100vw; overflow-x: hidden; }

/* Any main container/cards/sections should never exceed the viewport */
.section, .card, .chart-card { max-width: 100%; }
.section > *, .card > *, .chart-card > * { min-width: 0; }  /* allow shrinking in flex */

/* Chart canvases: always fluid, never wider than their parent */
canvas { display: block; width: 100% !important; height: auto; }

/* On small screens hide the little badges to save horizontal space */
@media (max-width: 768px){
  .badge { display: none; }
}

/* Grid of metric tiles – allow natural wrapping without overflow */
#cards { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.energy-card { min-width: 0; }  /* prevent flex/grid overflow */

/* Nav can wrap instead of forcing horizontal scroll */
nav .nav-links, nav .nav-actions { display:flex; flex-wrap:wrap; gap:10px; }

/* ---- NAV (mobile-first) ---- */
.site-nav{
  position: sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:10px 16px;
  background: linear-gradient(90deg,#02343F 0%, #1E293B 100%);
  box-shadow:0 6px 24px rgba(0,0,0,.35);
}

/* brand never shrinks */
.brand{display:flex; align-items:center; gap:10px; flex:0 0 auto; white-space:nowrap;}
.brand .text{font-weight:700; font-size:clamp(18px,5vw,24px);}

/* links container (hidden by default on phones) */
.nav-menu{
  display:none;                 /* <-- important */
  position:fixed; left:0; right:0; top:56px;
  flex-direction:column; align-items:flex-start; gap:14px;
  padding:14px 16px;
  background:rgba(2,6,23,.96); backdrop-filter:blur(8px);
  border-top:1px solid rgba(255,255,255,.08);
}
.nav-menu.open{ display:flex; }
.nav-link{font-size:clamp(14px,2.6vw,18px); opacity:.95; text-decoration:none;}
.nav-actions{display:flex; align-items:center; gap:12px; width:100%;}
.nav-actions .btn-primary{ width:100%; }

/* hamburger shown by default; sits to the right of brand */
.nav-toggle{display:block; background:transparent; border:0; width:40px; height:40px; flex:0 0 auto;}
.nav-toggle span{display:block; height:2px; background:var(--text); margin:6px 0; border-radius:2px}

/* prevent page scroll when menu is open */
body.no-scroll{ overflow:hidden; }

/* ---- Desktop ≥900px: inline menu, hide hamburger ---- */
@media (min-width: 900px){
  .nav-toggle{ display:none; }
  .nav-menu{
    position:static; display:flex !important;
    flex-direction:row; align-items:center; gap:18px; padding:0;
    background:transparent; border:0;
  }
  .nav-actions{ width:auto; }
  body.no-scroll{ overflow:auto; }
}

/* --- HARD OVERRIDES FOR MOBILE NAV --- */

/* never let the brand shrink or wrap under links */
.site-nav{ flex-wrap:nowrap !important; }
.brand{ flex:0 0 auto; white-space:nowrap; }

/* links container: HIDDEN by default on phones */
.site-nav .nav-menu{
  display:none !important;           /* <- force hidden on small screens */
  position:fixed; left:0; right:0; top:56px;
  flex-direction:column; align-items:flex-start; gap:14px;
  padding:14px 16px;
  background:rgba(2,6,23,.96); backdrop-filter:blur(8px);
  border-top:1px solid rgba(255,255,255,.08);
}
.site-nav .nav-menu.open{ display:flex !important; }

/* hamburger always visible on phones */
.site-nav .nav-toggle{ display:block !important; width:40px; height:40px; border:0; background:transparent; }
.site-nav .nav-toggle span{ display:block; height:2px; background:var(--text); margin:6px 0; border-radius:2px; }

/* link size a touch smaller on narrow screens so nothing collides with brand */
.site-nav .nav-link{ font-size:clamp(13px, 3.2vw, 16px); }

/* DESKTOP >= 900px: show inline menu, hide hamburger */
@media (min-width:900px){
  .site-nav .nav-menu{
    position:static; display:flex !important;
    flex-direction:row; align-items:center; gap:18px; padding:0;
    background:transparent; border:0;
  }
  .site-nav .nav-toggle{ display:none !important; }
}

/* ---- Responsive tables ---- */

/* Smooth iOS scrolling for horizontal tables */
.card.overflow-x-auto { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Default desktop/tablet look stays the same */
.table { width: 100%; border-collapse: separate; border-spacing: 0; }
.table thead th { position: sticky; top: 0; z-index: 1; }

/* Phones: let the table keep a reasonable width and scroll sideways
   instead of squishing columns into each other. */
@media (max-width: 768px) {
  /* Energy report has many columns – give it a big min-width and
     use auto layout so columns size by content. */
  .table-report {
    table-layout: auto;      /* <- important: no forced equal widths */
    min-width: 1100px;       /* adjust if you add/remove columns */
    font-size: .85rem;       /* slightly smaller text on phones */
  }

  /* Logs table needs less width but allow "Details" to wrap */
  .table-logs {
    table-layout: auto;
    min-width: 760px;
    font-size: .9rem;
  }
  /* Allow the Details column (5th) to wrap so it doesn't force huge width */
  .table-logs td:nth-child(5), .table-logs th:nth-child(5) {
    white-space: normal;
    word-break: break-word;
  }

  /* Trim padding a bit on phones for both tables */
  .table thead th { padding: .55rem; }
  .table tbody td { padding: .5rem; }
}

/* --------- Report table: desktop vs mobile --------- */

/* Desktop & large tablets: equal column widths, no wrapping, ellipses */
/* ✅ Always allow full headings + horizontal scroll for report table */
.table-report {
  table-layout: auto !important;   /* let columns size naturally */
  min-width: 1400px;               /* ensure scroll for many columns */
  white-space: nowrap;             /* keep headers and data inline */
}

/* wrapper should always scroll horizontally if needed */
.card.overflow-x-auto {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* optional: make header text slightly smaller for readability */
.table-report thead th {
  font-size: 0.9rem;
  white-space: nowrap;
}

/* allow text wrapping in Logs details column only */
.table-logs td:nth-child(5),
.table-logs th:nth-child(5) {
  white-space: normal;
  word-break: break-word;
}