/* Layout shell (sidebar, header, footer) and the dashboard on Views/Home/Index. Loaded after theme-dark.css. */
:root {
  --sh-bg: #f4f6fa;
  --sh-surface: #ffffff;
  --sh-side: #f7f8fc;
  --sh-line: #e4e6ef;
  --sh-head: #181c32;
  --sh-text: #3f4254;
  --sh-muted: #5e6278;
  --sh-brand: #2f3388;
  --sh-brand-soft: #e9ebf9;
  --sh-active-bg: #e9ebf9;
  --sh-active-text: #2f3388;
  --sh-footer: #f4f6fa;
  --sh-brand-on: #ffffff;
  --sh-ok: #45a85a;
  --sh-ok-soft: #e8f5eb;
  --sh-ok-text: #1f6b32;
  --sh-warn: #e0a030;
  --sh-warn-soft: #fdf1dc;
  --sh-warn-text: #9a6a0c;
  --sh-bad: #c8372d;
  --sh-bad-soft: #fbe6e4;
  --sh-line-2: #2f3388;
  --sh-shadow: 0 0 20px rgba(76, 87, 125, 0.04);
}

html[data-theme="dark"] {
  /* Same palette as the dark theme of the admin web. */
  --sh-bg: #151521;
  --sh-surface: #1e1e2d;
  --sh-side: #1e1e2d;
  --sh-footer: #1b1b28;
  --sh-line: #2b2b40;
  --sh-head: #ffffff;
  --sh-text: #cdcdde;
  --sh-muted: #92929f;
  --sh-brand: #3699ff;
  --sh-brand-soft: #212e48;
  --sh-brand-on: #000000;
  --sh-active-bg: #1b1b28;
  --sh-active-text: #ffffff;
  --sh-ok: #50cd89;
  --sh-ok-soft: #1c3238;
  --sh-ok-text: #50cd89;
  --sh-warn: #ffc700;
  --sh-warn-soft: #392f28;
  --sh-warn-text: #ffc700;
  --sh-bad: #f1416c;
  --sh-bad-soft: #3a2434;
  --sh-line-2: #3699ff;
  --sh-shadow: none;
}

/* ---- Shell ---- */
html[data-theme] body,
html[data-theme] body .wrapper,
html[data-theme] body .content {
  background-color: var(--sh-bg);
}
html[data-theme] body .header,
html[data-theme] body .header-fixed .header {
  background-color: var(--sh-surface);
  border-bottom: 1px solid var(--sh-line);
  box-shadow: none;
}
html[data-theme] body .footer {
  background-color: var(--sh-footer);
  border-top: 1px solid var(--sh-line);
}
html[data-theme] body .footer a,
html[data-theme] body .footer .menu-link {
  color: var(--sh-muted);
}
html[data-theme] body .footer a:hover,
html[data-theme] body .footer .menu-link:hover {
  color: var(--sh-brand);
}

/* ---- Sidebar ---- */
html[data-theme] .sp-aside {
  background-color: var(--sh-side);
  border-right: 1px solid var(--sh-line);
  box-shadow: none;
}
.sp-aside .aside-logo {
  background-color: transparent;
  padding: 0 1.5rem;
}
.sp-brand-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.sp-brand-name {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--sh-brand);
}
html[data-theme="dark"] .sp-brand-name {
  color: var(--sh-head);
}
.sp-aside .aside-toggle .svg-icon svg [fill] {
  fill: var(--sh-muted);
}
.sp-aside .menu .menu-item .menu-link {
  border-radius: 0.5rem;
  color: var(--sh-text);
}
.sp-aside .menu .menu-item .menu-link .menu-title {
  color: var(--sh-text);
  font-weight: 500;
}
.sp-aside .menu .menu-item .menu-link .menu-icon i,
.sp-aside .menu .menu-item .menu-link .menu-icon .svg-icon {
  color: var(--sh-muted);
}
.sp-aside .menu .menu-item .menu-link .menu-icon .svg-icon svg [fill]:not(.permanent):not(g) {
  fill: var(--sh-muted);
}
.sp-aside .menu .menu-item .menu-link:hover:not(.active) {
  background-color: var(--sh-active-bg);
}
.sp-aside .menu .menu-item .menu-link.active {
  background-color: var(--sh-active-bg);
}
.sp-aside .menu .menu-item .menu-link:hover .menu-title,
.sp-aside .menu .menu-item .menu-link.active .menu-title {
  color: var(--sh-active-text);
}
.sp-aside .menu .menu-item .menu-link:hover .menu-icon i,
.sp-aside .menu .menu-item .menu-link.active .menu-icon i,
.sp-aside .menu .menu-item .menu-link:hover .menu-icon .svg-icon,
.sp-aside .menu .menu-item .menu-link.active .menu-icon .svg-icon {
  color: var(--sh-brand);
}
.sp-aside .menu .menu-item .menu-link:hover .menu-icon .svg-icon svg [fill]:not(.permanent):not(g),
.sp-aside .menu .menu-item .menu-link.active .menu-icon .svg-icon svg [fill]:not(.permanent):not(g) {
  fill: var(--sh-brand);
}
.sp-aside .menu .menu-section {
  color: var(--sh-muted) !important;
  font-weight: 600;
}

/* ---- Dashboard ---- */
.dash-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.dash-head h1 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--sh-head);
}
.dash-sub {
  margin: 0.25rem 0 0;
  color: var(--sh-muted);
  font-size: 0.9375rem;
}
.dash-tag {
  display: inline-block;
  margin-left: 0.375rem;
  padding: 0.125rem 0.5rem;
  border-radius: 0.375rem;
  background: var(--sh-warn-soft);
  color: var(--sh-warn-text);
  font-size: 0.75rem;
  font-weight: 600;
}
.dash-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.dash-seg {
  display: inline-flex;
  padding: 0.25rem;
  border: 1px solid var(--sh-line);
  border-radius: 0.625rem;
  background: var(--sh-surface);
}
.dash-seg button {
  padding: 0.4rem 0.9rem;
  border: 0;
  border-radius: 0.5rem;
  background: transparent;
  color: var(--sh-muted);
  font-weight: 500;
}
.dash-seg button.active {
  background: var(--sh-brand);
  color: var(--sh-brand-on);
  font-weight: 600;
}
.dash-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1.1rem;
  border: 1px solid var(--sh-line);
  border-radius: 0.625rem;
  background: var(--sh-surface);
  color: var(--sh-head);
  font-weight: 600;
}
.dash-grid {
  display: grid;
  gap: 1.25rem;
  margin-bottom: 1.25rem;
}
.dash-kpis {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.dash-split {
  grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr);
}
.dash-split-even {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
}
.dash-card {
  padding: 1.5rem;
  border: 1px solid var(--sh-line);
  border-radius: 0.875rem;
  background: var(--sh-surface);
  box-shadow: var(--sh-shadow);
}
.dash-card h3 {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--sh-head);
}
.dash-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.dash-card-head a {
  color: var(--sh-brand);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: underline;
}
.dash-kpi-label {
  color: var(--sh-muted);
  font-size: 0.9375rem;
}
.dash-kpi-value {
  margin: 0.375rem 0 0.75rem;
  color: var(--sh-head);
  font-size: 2.125rem;
  font-weight: 700;
  line-height: 1.1;
}
.dash-kpi-value small {
  margin-left: 0.25rem;
  color: var(--sh-muted);
  font-size: 1rem;
  font-weight: 500;
}
.dash-pill {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 600;
}
.dash-pill.ok { background: var(--sh-ok-soft); color: var(--sh-ok-text); }
.dash-pill.warn { background: var(--sh-warn-soft); color: var(--sh-warn-text); }
.dash-pill.brand { background: var(--sh-brand-soft); color: var(--sh-brand); }
.dash-meter {
  height: 6px;
  margin-top: 0.5rem;
  border-radius: 3px;
  background: var(--sh-line);
  overflow: hidden;
}
.dash-meter > span {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--sh-ok);
}

/* Hourly chart */
.dash-legend {
  display: flex;
  gap: 1rem;
  color: var(--sh-muted);
  font-size: 0.8125rem;
}
.dash-legend i {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 0.375rem;
  border-radius: 3px;
  vertical-align: -1px;
}
.dash-legend i.prod { background: var(--sh-ok); }
.dash-legend i.cons {
  height: 0;
  border-top: 2px dashed var(--sh-line-2);
  border-radius: 0;
  vertical-align: 3px;
}
.dash-chart {
  width: 100%;
  height: auto;
  display: block;
}
.dash-chart .grid { stroke: var(--sh-line); stroke-width: 1; }
.dash-chart .prod-line { fill: none; stroke: var(--sh-ok); stroke-width: 2.5; }
.dash-chart .prod-area { fill: var(--sh-ok); opacity: 0.18; }
.dash-chart .cons-line { fill: none; stroke: var(--sh-line-2); stroke-width: 2; stroke-dasharray: 6 5; }

/* Device status */
.dash-big {
  color: var(--sh-head);
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
}
.dash-big small {
  color: var(--sh-muted);
  font-size: 1.0625rem;
  font-weight: 500;
}
.dash-stack {
  display: flex;
  gap: 4px;
  height: 10px;
  margin: 1.25rem 0;
}
.dash-stack span { border-radius: 5px; }
.dash-legend-list { margin: 0; padding: 0; list-style: none; }
.dash-legend-list li {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0;
  color: var(--sh-text);
}
.dash-legend-list li b { margin-left: auto; color: var(--sh-head); }
.dash-dot { width: 10px; height: 10px; border-radius: 50%; }
.dash-dot.ok { background: var(--sh-ok); }
.dash-dot.warn { background: var(--sh-warn); }
.dash-dot.bad { background: var(--sh-bad); }

/* Alerts */
.dash-alerts { margin: 0; padding: 0; list-style: none; }
.dash-alerts li {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.875rem 0;
  border-bottom: 1px solid var(--sh-line);
}
.dash-alerts li:last-child { border-bottom: 0; padding-bottom: 0; }
.dash-alert-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 44px;
  height: 44px;
  border-radius: 0.625rem;
  font-size: 1.375rem;
}
.dash-alert-icon.warn { background: var(--sh-warn-soft); color: var(--sh-warn-text); }
.dash-alert-icon.bad { background: var(--sh-bad-soft); color: var(--sh-bad); }
.dash-alerts b { display: block; color: var(--sh-head); }
.dash-alerts small { color: var(--sh-muted); }

/* Projects table */
.dash-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.dash-table th {
  padding: 0.75rem 0.75rem;
  background: var(--sh-bg);
  color: var(--sh-muted);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.dash-table th:first-child { border-radius: 0.5rem 0 0 0.5rem; }
.dash-table th:last-child { border-radius: 0 0.5rem 0.5rem 0; }
.dash-table td {
  padding: 0.875rem 0.75rem;
  border-bottom: 1px solid var(--sh-line);
  color: var(--sh-text);
}
.dash-table tr:last-child td { border-bottom: 0; }
.dash-table td:first-child { color: var(--sh-head); font-weight: 600; }

@media (max-width: 991.98px) {
  .dash-split,
  .dash-split-even { grid-template-columns: minmax(0, 1fr); }
}

.dash-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 0.5rem;
  color: var(--sh-muted);
  font-size: 0.75rem;
}

/* ---- Landing page for visitors who are not signed in ---- */
.lp-wrap { max-width: 1320px; margin: 0 auto; padding: 0 2rem; }
html[data-theme] body .header.lp-header { height: 80px; }
.lp-header .container-fluid { max-width: 1320px; margin: 0 auto; padding: 0 2rem; }
.lp-nav { align-items: center; gap: 2rem; }
.lp-nav a { color: var(--sh-text); font-weight: 500; }
.lp-nav a:hover { color: var(--sh-brand); }
.lp-hero { background: var(--sh-bg); padding: 5rem 0; }
.lp-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; align-items: center; }
.lp-eyebrow {
  display: inline-block; padding: 0.375rem 0.75rem; margin-bottom: 1.25rem;
  border-radius: 999px; background: var(--sh-ok-soft); color: var(--sh-ok-text);
  font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em;
}
.lp-title { margin: 0 0 1.25rem; color: var(--sh-head); font-size: 3.25rem; line-height: 1.15; font-weight: 700; }
.lp-title span { color: var(--sh-brand); }
.lp-lead { max-width: 560px; margin-bottom: 2rem; color: var(--sh-muted); font-size: 1.125rem; }
.lp-btn {
  display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.875rem 1.75rem;
  border: 1px solid transparent; border-radius: 0.625rem; font-weight: 600;
}
.lp-btn-primary { background: var(--sh-brand); color: var(--sh-brand-on); }
.lp-btn-primary:hover { color: var(--sh-brand-on); opacity: 0.92; }
.lp-btn-light { background: var(--sh-surface); border-color: var(--sh-line); color: var(--sh-head); }
.lp-btn-light:hover { color: var(--sh-brand); }
.lp-btn-white { background: #ffffff; color: #2f3388; }
.lp-btn-white:hover { color: #2f3388; opacity: 0.92; }
.lp-btn-outline { border-color: rgba(255, 255, 255, 0.35); color: #ffffff; }
.lp-btn-outline:hover { color: #ffffff; background: rgba(255, 255, 255, 0.1); }

.lp-preview-wrap { position: relative; padding: 2rem 0; }
.lp-deco { position: absolute; border-radius: 2rem; transform: rotate(45deg); }
.lp-deco-green { width: 200px; height: 200px; left: -40px; top: 3rem; background: #45a85a; }
.lp-deco-blue { width: 150px; height: 150px; right: -30px; bottom: -1rem; background: #393d96; }
html[data-theme="dark"] .lp-deco-blue { background: #1b3a66; }
.lp-preview {
  position: relative; padding: 1.5rem; border-radius: 1.25rem;
  background: var(--sh-surface); box-shadow: 0 20px 50px rgba(76, 87, 125, 0.18);
}
html[data-theme="dark"] .lp-preview { box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4); }
.lp-preview-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; color: var(--sh-head); }
.lp-preview-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 0.875rem; margin-bottom: 1rem; }
.lp-preview-kpis > div { padding: 0.875rem 1rem; border-radius: 0.75rem; background: var(--sh-bg); }
.lp-preview-kpis small { display: block; color: var(--sh-muted); font-size: 0.8125rem; }
.lp-preview-kpis b { color: var(--sh-head); font-size: 1.5rem; }
.lp-preview-kpis b small { display: inline; font-size: 0.8125rem; font-weight: 500; }

.lp-section { padding: 5rem 0 4rem; background: var(--sh-surface); }
.lp-h2 { margin: 0 0 0.75rem; text-align: center; color: var(--sh-head); font-size: 2.25rem; font-weight: 700; }
.lp-sub { margin-bottom: 3rem; text-align: center; color: var(--sh-muted); }
.lp-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; margin-bottom: 5rem; }
.lp-feature { padding: 2rem; border: 1px solid var(--sh-line); border-radius: 1rem; background: var(--sh-surface); }
.lp-feature h3 { margin: 1.25rem 0 0.5rem; color: var(--sh-head); font-size: 1.25rem; font-weight: 700; }
.lp-feature p { margin: 0; color: var(--sh-muted); }
.lp-feature-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 0.75rem; font-size: 1.5rem;
}
.lp-feature-icon.brand { background: var(--sh-brand-soft); color: var(--sh-brand); }
.lp-feature-icon.ok { background: var(--sh-ok-soft); color: var(--sh-ok-text); }
.lp-feature-icon.warn { background: var(--sh-warn-soft); color: var(--sh-warn-text); }

.lp-cta {
  position: relative; overflow: hidden; display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 2rem; padding: 3rem 3.75rem; border-radius: 1.5rem;
  background: #2f3388; color: #d9dbf0;
}
html[data-theme="dark"] .lp-cta { background: #1b1b28; border: 1px solid var(--sh-line); }
.lp-cta::after {
  content: ""; position: absolute; right: 40px; top: -20px; width: 90px; height: 330px;
  border-radius: 24px; background: #45a85a; opacity: 0.9; transform: rotate(45deg); pointer-events: none;
}
.lp-cta h2 { margin: 0 0 0.5rem; color: #ffffff; font-size: 2rem; font-weight: 700; }
.lp-cta p { margin: 0; }
.lp-cta > * { position: relative; z-index: 1; }

@media (max-width: 991.98px) {
  .lp-hero-grid, .lp-features { grid-template-columns: minmax(0, 1fr); }
  .lp-title { font-size: 2.5rem; }
  .lp-cta { padding: 2rem 1.5rem; }
}

/* theme-dark.css colours every link and icon; keep the button colours above it. */
html[data-theme] .lp-btn-primary, html[data-theme] .lp-btn-primary:hover, html[data-theme] .lp-btn-primary i { color: var(--sh-brand-on); }
html[data-theme] .lp-btn-light { color: var(--sh-head); }
html[data-theme] .lp-btn-light:hover { color: var(--sh-brand); }
html[data-theme] .lp-btn-white, html[data-theme] .lp-btn-white:hover { color: #2f3388; }
html[data-theme] .lp-btn-outline, html[data-theme] .lp-btn-outline:hover { color: #ffffff; }
html[data-theme] .lp-nav a { color: var(--sh-text); }
html[data-theme] .lp-nav a:hover { color: var(--sh-brand); }

/* Dark theme: the primary landing button is green (the logo colour) instead of the blue accent. */
html[data-theme="dark"] .lp-btn-primary { background: #50cd89; border-color: #50cd89; }
html[data-theme="dark"] .lp-btn-primary, html[data-theme="dark"] .lp-btn-primary:hover, html[data-theme="dark"] .lp-btn-primary i { color: #0f1a14; }

/* Collapsed sidebar: show only the logo icon (the text would be cut off); the full brand returns on hover. */
[data-kt-aside-minimize=on] .sp-aside:not(:hover) .sp-brand-name { display: none; }
[data-kt-aside-minimize=on] .sp-aside:not(:hover) .aside-logo .sp-brand-link .logo { display: inline-block; }

/* Visitor menu on small screens. */
html[data-theme] body .header.lp-header { position: relative; }
.lp-mobile-nav { position: absolute; left: 0; right: 0; top: 100%; z-index: 100; display: flex; flex-direction: column; padding: 0.5rem 2rem 1rem; background: var(--sh-surface); border-bottom: 1px solid var(--sh-line); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08); }
.lp-mobile-nav[hidden] { display: none; }
html[data-theme] .lp-mobile-nav a { padding: 0.75rem 0; color: var(--sh-text); font-weight: 500; }
html[data-theme] .lp-mobile-nav a:hover { color: var(--sh-brand); }

/* Visitor header: brand stays at the far left and the theme switch at the far right on every width. */
.lp-header .container-fluid > .d-flex { flex-grow: 1; }
.lp-header .container-fluid > .d-flex > .d-flex.flex-shrink-0 { margin-left: auto; }