:root {
  --page: #f1f5fb;
  --panel: #ffffff;
  --panel-2: #f8fafc;
  --ink: #0f172a;
  --muted: #64748b;
  --line: #e2e8f0;
  --brand: #2563eb;
  --brand-2: #4f46e5;
  --brand-soft: #eaf1ff;
  --ok: #0f9d67;
  --ok-soft: #e3f9ee;
  --warn: #d97706;
  --warn-soft: #fef3e2;
  --danger: #dc2626;
  --danger-soft: #fee2e2;
  --radius: 12px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 14px 32px rgba(15, 23, 42, 0.09);
  --shadow-lg: 0 4px 10px rgba(15, 23, 42, 0.06), 0 24px 48px rgba(15, 23, 42, 0.14);
}

body.dark {
  --page: #0a1120;
  --panel: #101a2e;
  --panel-2: #152238;
  --ink: #eef4fc;
  --muted: #94a6bf;
  --line: #24344f;
  --brand: #5b8def;
  --brand-2: #8b7bef;
  --brand-soft: #16233d;
  --ok: #34d399;
  --ok-soft: #123626;
  --warn: #fbbf24;
  --warn-soft: #402c0c;
  --danger: #f87171;
  --danger-soft: #3f1a1e;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 16px 36px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 4px 10px rgba(0, 0, 0, 0.35), 0 26px 52px rgba(0, 0, 0, 0.48);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background: var(--page);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

body.login-required .app-shell,
body.login-required .alert-toggle,
body.login-required .alerts-drawer {
  display: none;
}

.login-screen {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  place-items: center;
  padding: 20px;
  background: radial-gradient(circle at top left, #163d66, #071423 58%);
}

body.login-required .login-screen {
  display: grid;
}

.login-card {
  display: grid;
  width: min(420px, 100%);
  gap: 14px;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.login-brand-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.login-brand-row img,
.login-card > img {
  width: 150px;
  max-height: 62px;
  object-fit: contain;
  padding: 8px;
  border-radius: 8px;
  background: #ffffff;
}

.login-brand-row img:first-child {
  width: 118px;
}

.login-brand-row img:last-child {
  width: 170px;
}

.login-error {
  min-height: 18px;
  margin: 0;
  color: var(--danger);
  font-weight: 700;
}

.login-help {
  margin: -4px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  border: 0;
}

.app-shell {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  min-height: 100vh;
}

body.sidebar-collapsed .app-shell {
  grid-template-columns: 66px minmax(0, 1fr);
}

.sidebar {
  position: sticky;
  top: 0;
  z-index: 25;
  width: 260px;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  background: linear-gradient(180deg, #0b2a52 0%, #081d3d 60%, #061530 100%);
  color: #ffffff;
  transition: width 0.18s ease, padding 0.18s ease;
}

.sidebar-toggle {
  display: grid;
  place-items: center;
  width: 38px;
  min-height: 38px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  cursor: pointer;
  font-size: 18px;
  transition: background 0.15s ease;
}

.sidebar-toggle:hover {
  background: rgba(255, 255, 255, 0.18);
}

/* Hidden by default (desktop); the @media (max-width: 1100px) block further
   down makes it visible - must be defined here, BEFORE that media query in
   source order, or the equal-specificity "display: none" here would always
   win over the media query's "display: grid" regardless of viewport width. */
.mobile-sidebar-toggle {
  display: none;
  /* Overrides the base .sidebar-toggle's near-transparent styling (tuned for
     sitting on the sidebar's own dark background) - this one sits directly
     on the light page background instead, so it needs to be solid/visible
     on its own. */
  background: #0b2a52;
  box-shadow: 0 6px 16px rgba(4, 12, 24, 0.35);
}

body.sidebar-collapsed .sidebar {
  width: 66px;
  overflow: hidden;
  padding: 14px 9px;
}

body.sidebar-collapsed .sidebar:hover,
body.sidebar-collapsed .sidebar:focus-within {
  width: 260px;
  box-shadow: 16px 0 30px rgba(0, 0, 0, 0.22);
}

body.sidebar-collapsed .customer-card,
body.sidebar-collapsed .logger-card {
  justify-items: center;
  padding: 8px 6px;
}

body.sidebar-collapsed .customer-card strong,
body.sidebar-collapsed .customer-card span,
body.sidebar-collapsed .logger-card span,
body.sidebar-collapsed .logger-card strong,
body.sidebar-collapsed .profile-copy,
body.sidebar-collapsed .nav-list button span {
  display: none;
}

body.sidebar-collapsed .sidebar:hover .customer-card strong,
body.sidebar-collapsed .sidebar:hover .customer-card span,
body.sidebar-collapsed .sidebar:hover .logger-card span,
body.sidebar-collapsed .sidebar:hover .logger-card strong,
body.sidebar-collapsed .sidebar:hover .profile-copy,
body.sidebar-collapsed .sidebar:hover .nav-list button span,
body.sidebar-collapsed .sidebar:focus-within .customer-card strong,
body.sidebar-collapsed .sidebar:focus-within .customer-card span,
body.sidebar-collapsed .sidebar:focus-within .logger-card span,
body.sidebar-collapsed .sidebar:focus-within .logger-card strong,
body.sidebar-collapsed .sidebar:focus-within .profile-copy,
body.sidebar-collapsed .sidebar:focus-within .nav-list button span {
  display: initial;
}

body.sidebar-collapsed .customer-card img {
  width: 38px;
  height: 28px;
  padding: 4px;
}

body.sidebar-collapsed .nav-list button {
  min-height: 38px;
  padding: 0;
  text-align: center;
}

body.sidebar-collapsed .nav-list button::before {
  content: attr(data-short);
  font-size: 16px;
  font-weight: 800;
}

body.sidebar-collapsed .sidebar:hover .nav-list button,
body.sidebar-collapsed .sidebar:focus-within .nav-list button {
  padding: 0 12px;
  text-align: left;
}

body.sidebar-collapsed .sidebar:hover .nav-list button::before,
body.sidebar-collapsed .sidebar:focus-within .nav-list button::before {
  content: "";
}

.customer-card,
.logger-card {
  display: grid;
  gap: 8px;
  width: 100%;
  padding: 13px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.07);
  color: inherit;
  text-align: left;
}

button.customer-card {
  cursor: pointer;
}

button.customer-card:hover {
  border-color: rgba(83, 166, 255, 0.75);
  background: rgba(83, 166, 255, 0.13);
}

.customer-card img {
  width: 145px;
  max-height: 58px;
  object-fit: contain;
  padding: 7px;
  border-radius: 8px;
  background: #ffffff;
}

.customer-card span,
.logger-card span {
  color: #c7def7;
  font-size: 13px;
}

.customer-profile-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border-radius: 8px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  margin-bottom: 14px;
}

.customer-profile-head img {
  width: 150px;
  max-height: 70px;
  object-fit: contain;
  padding: 8px;
  border-radius: 8px;
  background: #ffffff;
}

.customer-profile-head div {
  display: grid;
  gap: 5px;
}

.customer-profile-head strong {
  font-size: 18px;
}

.customer-profile-head span {
  color: var(--muted);
}

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

.profile-subscription-card {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.profile-subscription-card .section-title {
  margin-bottom: 10px;
}

.profile-subscription-card h4 {
  margin: 2px 0 0;
  font-size: 18px;
}

.profile-grid-compact .profile-item {
  min-height: 64px;
}

.profile-item {
  display: grid;
  gap: 6px;
  min-height: 72px;
  padding: 11px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--panel-2);
}

.profile-item span {
  color: var(--muted);
  font-size: 12px;
}

.profile-item strong {
  font-size: 15px;
  line-height: 1.25;
}

.nav-list {
  display: grid;
  gap: 8px;
}

.nav-list button {
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  border-radius: var(--radius);
  background: transparent;
  color: #c7def7;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  font-weight: 600;
  transition: background 0.15s ease, color 0.15s ease;
}

.nav-list button:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

.nav-list button.active {
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #ffffff;
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.35);
}

.profile-card {
  display: flex;
  width: 100%;
  min-height: 46px;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.07);
  color: #ffffff;
  text-align: left;
  cursor: pointer;
}

.avatar {
  display: grid;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: var(--brand);
  color: #ffffff;
  font-weight: 800;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-copy {
  display: grid;
  min-width: 0;
}

.profile-copy strong,
.profile-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-copy small {
  color: #c7def7;
}

.logger-card {
  margin-top: auto;
}

.dashboard-shell {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 8px 10px;
}

.app-view {
  display: none;
  gap: 14px;
}

.app-view.active {
  display: grid;
}

.topbar,
.top-actions,
.panel-header,
.modal-header,
.modal-actions {
  display: flex;
  align-items: center;
}

.topbar {
  justify-content: space-between;
  min-height: 42px;
  gap: 10px;
}

.meta-strip {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.meta-strip span {
  display: grid;
  min-width: 92px;
  min-height: 34px;
  align-content: center;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.meta-strip b {
  color: var(--muted);
  font-size: 10px;
  line-height: 1;
  text-transform: uppercase;
}

.meta-strip strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.eyebrow {
  margin: 0 0 4px;
  color: var(--brand);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 0;
  font-size: clamp(27px, 3vw, 42px);
  line-height: 1.05;
}

h2,
h3 {
  margin-bottom: 0;
}

h2 {
  font-size: 20px;
}

h3 {
  font-size: 20px;
}

.top-actions {
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.icon-button,
.ghost-button,
.primary-button {
  min-height: 38px;
  border-radius: var(--radius);
  cursor: pointer;
  font-weight: 700;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.icon-button {
  width: 38px;
  background: var(--panel-2);
  color: var(--ink);
}

.ghost-button {
  padding: 0 13px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
}

.ghost-button:not(:disabled):hover {
  border-color: var(--brand);
  color: var(--brand);
  background: var(--brand-soft);
}

.primary-button {
  padding: 0 16px;
  border: 1px solid transparent;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #ffffff;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--brand) 30%, transparent);
}

.primary-button:not(:disabled):hover {
  box-shadow: 0 6px 18px color-mix(in srgb, var(--brand) 42%, transparent);
  transform: translateY(-1px);
}

.primary-button:disabled,
.ghost-button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}

.primary-button.is-loading,
.ghost-button.is-loading {
  position: relative;
  opacity: 0.78;
  pointer-events: none;
}

.primary-button.is-loading::before,
.ghost-button.is-loading::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 8px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  vertical-align: -2px;
  animation: reportSpin 0.8s linear infinite;
}

.app-busy {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-content: center;
  gap: 12px;
  background: rgba(2, 11, 24, 0.72);
  color: #ffffff;
  backdrop-filter: blur(7px);
}

.app-busy[hidden] {
  display: none;
}

.app-busy span {
  width: 42px;
  height: 42px;
  justify-self: center;
  border: 4px solid rgba(255, 255, 255, 0.32);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: reportSpin 0.8s linear infinite;
}

@keyframes reportSpin {
  to { transform: rotate(360deg); }
}

.subscription-banner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.subscription-banner[hidden] {
  display: none;
}

.subscription-banner.status-due,
.subscription-banner.status-grace {
  border-color: var(--warn);
  background: color-mix(in srgb, var(--warn-soft) 18%, var(--panel));
}

.subscription-banner.status-expired {
  border-color: var(--danger);
  background: color-mix(in srgb, var(--danger-soft) 20%, var(--panel));
}

.subscription-banner.status-extended {
  border-color: var(--ok);
  background: color-mix(in srgb, var(--ok-soft) 18%, var(--panel));
}

.subscription-copy {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.subscription-copy h2,
.subscription-copy p {
  margin: 0;
}

.subscription-copy h2 {
  font-size: 20px;
}

.subscription-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.subscription-meta span {
  display: grid;
  min-width: 118px;
  gap: 2px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-2);
}

.subscription-meta b {
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
}

.subscription-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

body.subscription-locked .app-view,
body.subscription-locked .topbar,
body.subscription-locked .alerts-drawer,
body.subscription-locked .subscription-banner > :not(.subscription-lock-screen) {
  visibility: hidden;
}

body.subscription-locked .subscription-banner {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 0;
  background: #06111f;
}

.subscription-lock-screen {
  display: grid;
  width: min(560px, calc(100vw - 32px));
  gap: 14px;
  padding: 28px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(21, 39, 66, 0.98), rgba(7, 19, 35, 0.98));
  color: #ffffff;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.42);
  text-align: center;
}

.subscription-lock-screen strong {
  font-size: 28px;
}

.subscription-lock-screen span {
  color: #c7d9ec;
}

.value-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  grid-auto-flow: dense;
  grid-auto-rows: 96px;
  gap: 8px;
}

.insight-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
  gap: 10px;
}

.insight-panel {
  min-height: 180px;
}

.insight-panel h2 {
  margin: 5px 0 8px;
  font-size: 24px;
}

.insight-panel p:last-child {
  margin-bottom: 0;
  color: var(--muted);
}

.health-bars {
  display: grid;
  gap: 10px;
}

.health-bars label,
.demand-bar {
  gap: 4px;
}

.demand-bar {
  display: grid;
}

meter {
  width: 100%;
  height: 14px;
}

.energy-analysis-panel {
  display: grid;
  align-content: start;
  gap: 8px;
}

.energy-bars-panel {
  display: grid;
  align-content: start;
}

.demand-mini {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.demand-mini strong {
  font-size: 22px;
}

.demand-mini span {
  overflow-wrap: anywhere;
}

.analysis-link {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}

.analysis-link:hover span {
  color: var(--brand);
}

.compact-panel-header {
  align-items: flex-start;
}

.energy-bar-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.energy-bar-controls button {
  min-height: 28px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
  font-weight: 800;
}

.energy-bar-controls button.active {
  background: var(--brand);
  color: #ffffff;
}

.energy-bar-controls label {
  display: flex;
  min-height: 28px;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.energy-bar-controls input {
  width: 82px;
}

.energy-mini-bars {
  margin-top: 10px;
}

.daily-energy-bars {
  display: grid;
  align-items: end;
  gap: 8px;
  min-height: 120px;
  overflow-x: auto;
  padding-top: 4px;
}

.daily-energy-bar {
  display: grid;
  grid-template-rows: 18px 76px 18px 16px;
  align-items: end;
  min-width: 0;
  font-size: 12px;
  text-align: center;
}

.daily-energy-bar b {
  display: block;
  width: 100%;
  min-height: 4px;
  border-radius: 6px 6px 2px 2px;
  background: linear-gradient(180deg, var(--brand), #0f7b3f);
}

.daily-energy-bar span,
.daily-energy-bar strong,
.daily-energy-bar em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.daily-energy-bar em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  line-height: 1.1;
}

.digital-status-panel {
  display: grid;
  align-content: start;
}

.digital-status-panel[hidden] {
  display: none;
}

.di-toggle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 8px;
  margin-top: 6px;
}

.di-toggle-pill {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 32px;
  align-items: center;
  gap: 7px;
  min-width: 0;
  min-height: 34px;
  padding: 5px 7px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-2);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.di-toggle-pill span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.di-toggle-pill i {
  position: relative;
  display: block;
  width: 32px;
  height: 18px;
  border-radius: 999px;
  background: var(--line);
}

.di-toggle-pill i::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ffffff;
  transition: transform 0.18s ease;
}

.di-toggle-pill.on {
  border-color: rgba(18, 143, 83, 0.55);
  color: var(--ok);
}

.di-toggle-pill.on i {
  background: var(--ok);
}

.di-toggle-pill.on i::after {
  transform: translateX(14px);
}

.apfc-diagnostics-panel {
  margin-top: 14px;
}

.apfc-diagnostics-panel[hidden] {
  display: none;
}

.apfc-panel {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.analysis-badge {
  display: inline-grid;
  min-height: 30px;
  align-items: center;
  padding: 0 10px;
  border: 1px solid rgba(18, 143, 83, 0.35);
  border-radius: 8px;
  background: rgba(18, 143, 83, 0.08);
  color: var(--ok);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.apfc-note,
.apfc-source-line {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.apfc-meter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 8px;
}

.apfc-metric {
  display: grid;
  gap: 4px;
  min-height: 62px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-2);
}

.apfc-metric span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.apfc-metric strong {
  overflow: hidden;
  color: var(--text);
  font-size: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.apfc-metric.status-warn {
  border-color: var(--warn);
  background: color-mix(in srgb, var(--warn-soft) 24%, var(--panel-2));
}

.apfc-metric.status-danger {
  border-color: var(--danger);
  background: color-mix(in srgb, var(--danger-soft) 28%, var(--panel-2));
}

.apfc-metric.status-danger strong {
  color: var(--danger);
}

.apfc-metric.status-warn strong {
  color: var(--warn);
}

.apfc-source-line {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  font-size: 12px;
}

.apfc-di-section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
}

.apfc-di-bank {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-2);
}

.apfc-di-bank strong,
.apfc-di-bank span {
  display: block;
}

.apfc-di-bank > div:first-child span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.apfc-di-bits {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.apfc-di-bit {
  min-width: 0;
  padding: 6px 7px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel);
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-align: center;
}

.apfc-di-bit.active {
  border-color: rgba(18, 143, 83, 0.45);
  background: rgba(18, 143, 83, 0.1);
  color: var(--ok);
}

.value-card,
.panel {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}

.value-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}

.value-card {
  display: grid;
  grid-template-rows: minmax(28px, auto) minmax(34px, 1fr);
  align-content: stretch;
  min-height: 96px;
  padding: 12px 14px;
  overflow: hidden;
}

.value-card.gauge-card {
  display: grid;
  grid-row: span 2;
  min-height: 142px;
  place-items: center;
  align-content: center;
  gap: 8px;
  text-align: center;
}

.gauge-label {
  grid-column: auto;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.gauge {
  --percent: 0;
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: conic-gradient(var(--brand) calc(var(--percent) * 1%), var(--line) 0);
}

.gauge::after {
  content: "";
  position: absolute;
}

.gauge-value {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: var(--panel);
  color: var(--ink);
  padding: 2px;
  font-size: 14px;
  font-weight: 800;
  text-align: center;
  line-height: 1.05;
}

.value-card span,
label,
.data-table span,
.quality-list span {
  color: var(--muted);
}

.value-card strong {
  display: block;
  align-self: center;
  margin-top: 0;
  overflow-wrap: anywhere;
  font-size: clamp(17px, 1.2vw, 24px);
  line-height: 1.05;
}

.value-card > span:first-child {
  display: block;
  min-height: 28px;
  overflow: visible;
  line-height: 1.15;
}

.value-card small {
  display: none;
  align-self: end;
  justify-self: start;
  max-width: 100%;
  margin-top: 2px;
  padding: 4px 7px;
  border-radius: 8px;
  background: var(--warn-soft);
  color: var(--warn);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.projection-note {
  margin-top: 12px;
  padding: 12px;
  border-radius: 8px;
  background: var(--panel-2);
  color: var(--muted);
  line-height: 1.45;
}

.value-card small.stable,
.state.online {
  background: var(--ok-soft);
  color: var(--ok);
}

.value-card small.danger,
.state.danger {
  background: var(--danger-soft);
  color: var(--danger);
}

.value-card.status-warn {
  border-color: var(--warn);
  background: color-mix(in srgb, var(--warn-soft) 24%, var(--panel));
}

.value-card.status-danger {
  border-color: var(--danger);
  background: color-mix(in srgb, var(--danger-soft) 28%, var(--panel));
}

.value-card.status-danger .gauge {
  background: conic-gradient(var(--danger) calc(var(--percent) * 1%), var(--line) 0);
}

.value-card.status-warn .gauge {
  background: conic-gradient(var(--warn) calc(var(--percent) * 1%), var(--line) 0);
}

.value-card.status-ok .gauge {
  background: conic-gradient(var(--ok) calc(var(--percent) * 1%), var(--line) 0);
}

.main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(310px, 0.75fr);
  gap: 14px;
}

.dashboard-alerts {
  min-height: 260px;
}

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

.mini-chart-panel canvas {
  height: 220px;
  max-height: 220px;
}

.dashboard-chart-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
  max-width: 100%;
}

.dashboard-chart-tools .chip-group button {
  min-width: 54px;
  min-height: 30px;
  padding: 0 8px;
  font-size: 12px;
}

.dashboard-chart-tools .zoom-control,
.dashboard-chart-tools .points-control {
  min-height: 30px;
  padding: 0 8px;
}

.dashboard-chart-tools .zoom-control input {
  width: 74px;
}

.dashboard-chart-tools .points-control input {
  width: 58px;
  min-height: 24px;
}

.mini-series-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.mini-series {
  display: flex;
  min-height: 30px;
  align-items: center;
  gap: 5px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-2);
  font-size: 12px;
}

.mini-series input {
  width: 14px;
  min-height: 14px;
}

.panel {
  padding: 16px 18px;
}

.chart-panel,
.alert-panel {
  min-height: 390px;
}

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

.grid-chart-panel {
  padding: 12px;
}

.grid-chart-panel h3 {
  margin: 0 0 8px;
  font-size: 16px;
}

.grid-chart-panel canvas {
  height: 200px;
  max-height: 200px;
}

.panel-header {
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.chart-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.analyzer-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-2);
}

.chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip-group button {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-2);
  color: var(--ink);
  cursor: pointer;
  font-weight: 700;
}

.chip-group button.active {
  border-color: var(--brand);
  background: var(--brand);
  color: #ffffff;
}

.chip-group.compact button {
  min-width: 70px;
  min-height: 32px;
  padding: 0 10px;
}

.zoom-control {
  display: flex;
  min-height: 40px;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.zoom-control span {
  color: var(--muted);
  font-size: 12px;
}

.zoom-control input {
  width: 120px;
  min-height: auto;
  padding: 0;
  border: 0;
}

.points-control {
  display: flex;
  min-height: 40px;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.date-control {
  display: flex;
  min-height: 40px;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.date-control span {
  color: var(--muted);
  font-size: 12px;
}

.date-control input {
  width: 132px;
  min-height: 28px;
  padding: 3px 6px;
}

.points-control span {
  color: var(--muted);
  font-size: 12px;
}

.points-control input {
  width: 88px;
  min-height: 28px;
}

.series-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}

.series-toggles label {
  display: flex;
  min-height: 32px;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-2);
  color: var(--ink);
}

.series-toggles input {
  width: 16px;
  min-height: 16px;
}

canvas {
  width: 100%;
  height: 300px;
  max-height: 300px;
}

.chart-tooltip {
  position: fixed;
  z-index: 80;
  display: none;
  min-width: 135px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  box-shadow: var(--shadow);
  pointer-events: none;
}

.chart-tooltip.show {
  display: grid;
  gap: 3px;
}

.chart-tooltip span {
  color: var(--muted);
  font-size: 12px;
}

.chart-tooltip b {
  font-size: 18px;
}

.alert-count {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--warn-soft);
  color: var(--warn);
  font-weight: 800;
}

.alert-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
}

.alert-toggle.has-alerts {
  border-color: var(--danger);
  color: var(--danger);
  animation: alertBlink 1s infinite;
}

@keyframes alertBlink {
  0%, 100% { box-shadow: 0 0 0 0 rgba(217, 48, 37, 0.25); }
  50% { box-shadow: 0 0 0 4px rgba(217, 48, 37, 0.12); }
}

.alerts-drawer {
  position: fixed;
  top: 0;
  right: -430px;
  width: min(430px, 92vw);
  height: 100vh;
  z-index: 40;
  padding: 16px;
  border-left: 1px solid var(--line);
  background: var(--panel);
  box-shadow: var(--shadow);
  transition: right 0.2s ease;
}

.alerts-drawer.open {
  right: 0;
}

.alerts-drawer .alert-list {
  max-height: calc(100vh - 110px);
}

.alert-list {
  display: grid;
  gap: 10px;
  max-height: 315px;
  padding: 0;
  margin: 0;
  overflow: auto;
  list-style: none;
}

.alert-list li {
  padding: 12px;
  border-left: 4px solid var(--warn);
  border-radius: 8px;
  background: var(--warn-soft);
}

.alert-list li.danger {
  border-left-color: var(--danger);
  background: var(--danger-soft);
}

.alert-list strong,
.alert-list span {
  display: block;
}

.alert-list span {
  margin-top: 5px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.4;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 14px;
  background: rgba(3, 12, 24, 0.62);
}

.modal-backdrop.open {
  display: flex;
}

.modal-card {
  width: min(1060px, 100%);
  max-height: 88vh;
  overflow: auto;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
  animation: modalEnter 0.18s ease both;
}

button,
.nav-item,
.settings-menu button,
.report-history-card,
.user-row {
  transition: transform 0.16s ease, border-color 0.16s ease, background-color 0.16s ease, opacity 0.16s ease, box-shadow 0.16s ease;
}

button:not(:disabled):active,
.nav-item:not(:disabled):active,
.settings-menu button:not(:disabled):active {
  transform: translateY(1px) scale(0.99);
}

@keyframes modalEnter {
  from { opacity: 0; transform: translateY(10px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

.settings-modal {
  width: min(1480px, 100%);
  max-height: 94vh;
}

.modal-header,
.modal-actions {
  justify-content: space-between;
  gap: 12px;
}

.modal-header {
  margin-bottom: 16px;
}

.device-table,
.data-table {
  display: grid;
  gap: 2px;
}

.device-table [role="row"],
.data-row {
  display: grid;
  grid-template-columns: 0.7fr 1.6fr 0.7fr 0.7fr;
  gap: 12px;
  align-items: center;
  padding: 11px 12px;
  border-radius: var(--radius);
  transition: background 0.12s ease;
}

.device-table [role="row"]:not(.table-head):hover,
.data-row:hover {
  background: var(--brand-soft);
}

.data-row {
  grid-template-columns: 0.8fr 1.4fr 1fr 0.8fr;
}

.device-table [role="row"]:not(.table-head),
.data-row {
  background: var(--panel-2);
}

.table-head {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.state {
  justify-self: start;
  padding: 5px 8px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 800;
}

.state.caution {
  background: var(--warn-soft);
  color: var(--warn);
}

.report-controls,
.settings-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

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

.template-grid textarea {
  min-height: 116px;
  resize: vertical;
}

.enhanced-report-controls {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.settings-layout {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 16px;
}

.settings-menu {
  display: grid;
  align-content: start;
  gap: 8px;
}

.settings-menu button {
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-2);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  font-weight: 800;
}

.settings-menu button.active {
  border-color: var(--brand);
  background: var(--brand);
  color: #ffffff;
}

.settings-pages {
  min-width: 0;
  overflow-x: hidden;
}

.settings-page {
  display: none;
}

.settings-page.active {
  display: grid;
  gap: 14px;
}

.settings-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.check-row {
  display: flex;
  min-height: 40px;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-2);
}

.check-row input[type="checkbox"] {
  position: relative;
  flex: 0 0 auto;
  width: 42px;
  min-height: 24px;
  appearance: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
}

.check-row input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--muted);
  transition: transform 0.18s ease, background 0.18s ease;
}

.check-row input[type="checkbox"]:checked {
  border-color: var(--brand);
  background: var(--brand);
}

.check-row input[type="checkbox"]:checked::after {
  transform: translateX(18px);
  background: #ffffff;
}

.check-row input[type="checkbox"]:disabled {
  cursor: not-allowed;
  opacity: 0.65;
}

.inline-actions {
  align-items: stretch;
}

label {
  display: grid;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
}

input,
select,
textarea {
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input:hover:not(:disabled),
select:hover:not(:disabled),
textarea:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--brand) 45%, var(--line));
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 20%, transparent);
}

input:disabled,
select:disabled,
textarea:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

textarea {
  resize: vertical;
}

.wide-field {
  grid-column: span 2;
}

.report-summary {
  flex: 1;
  padding: 12px;
  border-radius: 8px;
  background: var(--brand-soft);
  color: var(--ink);
}

.settings-section {
  margin-top: 18px;
}

.compact-section {
  margin-top: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(12, 44, 76, 0.25);
}

.switch-card {
  border-color: rgba(80, 166, 255, 0.45);
}

.cost-note {
  margin-top: 12px;
}

.recipient-manager {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.card-section + .card-section {
  margin-top: 22px;
}

.scroll-panel {
  max-height: 320px;
  overflow-y: auto;
  padding-right: 4px;
}

.email-recipient-table {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.email-recipient-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--panel-2);
}

.email-recipient-row strong {
  flex: 1 0 100%;
  overflow-wrap: anywhere;
}

.email-recipient-types {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  flex: 1;
}

.email-recipient-types .check-row.small {
  min-height: auto;
  gap: 5px;
  padding: 4px 8px;
  border-color: transparent;
  background: transparent;
  font-size: 12px;
  color: var(--muted);
}

.email-recipient-types .check-row.small input[type="checkbox"] {
  position: static;
  width: 14px;
  min-height: 0;
  height: 14px;
  appearance: auto;
  border: none;
  border-radius: 0;
  background: none;
}

.email-recipient-types .check-row.small input[type="checkbox"]::after {
  content: none;
}

.template-control-grid {
  grid-template-columns: minmax(180px, .8fr) minmax(240px, 1.2fr) minmax(180px, .8fr) minmax(240px, 1.2fr);
}

.log-toolbar {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 240px));
  gap: 10px;
}

.recipient-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.recipient-chip,
.empty-chip {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  gap: 8px;
  padding: 6px 8px 6px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-2);
}

.recipient-chip button {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: var(--danger-soft);
  color: var(--danger);
  cursor: pointer;
  font-weight: 900;
}

.report-history-card {
  display: grid;
  grid-template-columns: minmax(260px, 1.2fr) minmax(300px, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  box-shadow: var(--shadow);
}

.report-history-card + .report-history-card {
  margin-top: 10px;
}

.report-history-main {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.report-history-main strong,
.report-history-main small {
  overflow-wrap: anywhere;
}

.report-type-pill {
  justify-self: start;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.report-history-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.report-history-meta span {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  overflow-wrap: anywhere;
}

.report-history-meta b {
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
}

.report-history-actions {
  display: grid;
  justify-items: end;
  gap: 8px;
}

.report-history-actions .small-button {
  min-width: 142px;
}

.manual-test-panel {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.manual-test-panel[hidden] {
  display: none;
}

.settings-footer {
  position: sticky;
  bottom: -20px;
  z-index: 5;
  margin: 14px -20px -20px;
  padding: 12px 20px;
  border-top: 1px solid var(--line);
  background: var(--panel);
}

#fieldSettingsRows,
#diSettingsRows {
  display: grid;
  gap: 8px;
}

.mail-log-row {
  display: grid;
  grid-template-columns: minmax(260px, 1.7fr) minmax(170px, .75fr) minmax(190px, .85fr);
  gap: 14px;
  align-items: start;
  padding: 12px;
  border-bottom: 1px solid var(--line);
}

.mail-log-row strong,
.mail-log-row span {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.setting-row {
  display: grid;
  grid-template-columns: 90px 1fr 96px 96px;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border-radius: 8px;
  background: var(--panel-2);
}

.compact-setting-row {
  grid-template-columns: 76px minmax(0, 1fr) 78px 62px 74px;
  min-height: 46px;
  padding: 7px 9px;
}

.compact-setting-row .setting-label {
  overflow: hidden;
  color: var(--ink);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rename-input {
  display: none;
  min-height: 32px;
}

.compact-setting-row.renaming .setting-label {
  display: none;
}

.compact-setting-row.renaming .rename-input {
  display: block;
}

.compact-setting-row:not(.renaming) .rename-input {
  display: none;
}

.small-button.active {
  border: 1px solid var(--brand);
  background: var(--brand);
  color: #ffffff;
}

.threshold-table {
  display: grid;
  gap: 10px;
}

.threshold-header,
.threshold-row {
  display: grid;
  grid-template-columns: minmax(150px, 1.25fr) 64px repeat(2, minmax(132px, 1fr)) minmax(118px, .8fr) minmax(118px, .8fr);
  gap: 10px;
  align-items: center;
}

.threshold-header {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.threshold-row {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-2);
}

.threshold-row.threshold-disabled .threshold-wa,
.threshold-row.threshold-disabled .threshold-cooldown {
  opacity: 0.55;
}

.threshold-point {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.threshold-point strong {
  color: var(--ink);
  font-size: 15px;
}

.threshold-point span,
.threshold-cell span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.2;
}

.threshold-cell {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.threshold-cell input,
.threshold-cooldown input {
  min-width: 0;
  min-height: 36px;
}

.threshold-switch {
  justify-self: center;
}

.threshold-wa {
  min-height: 40px;
  justify-content: center;
  padding: 8px 10px;
}

.threshold-wa span {
  color: var(--ink);
  white-space: nowrap;
}

.switch {
  position: relative;
  display: inline-flex !important;
  width: 46px;
  height: 24px;
  align-items: center;
}

.switch input {
  position: absolute;
  opacity: 0;
}

.switch span {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--line);
  transition: background 0.18s ease;
}

.switch span::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ffffff;
  transition: transform 0.18s ease;
}

.switch input:checked + span {
  background: var(--brand);
}

.switch input:checked + span::after {
  transform: translateX(22px);
}

.apfc-placeholder {
  display: grid;
  gap: 6px;
  padding: 14px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: var(--panel-2);
}

.apfc-placeholder span {
  color: var(--muted);
  line-height: 1.45;
}

.setting-row label {
  display: flex;
  align-items: center;
  gap: 8px;
}

.setting-row input[type="checkbox"] {
  width: 18px;
  min-height: 18px;
}

.user-table {
  display: grid;
  gap: 8px;
}

.user-row {
  display: grid;
  grid-template-columns: 1.2fr 0.7fr 0.8fr 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border-radius: 8px;
  background: var(--panel-2);
}

@media (max-width: 760px) {
  .user-row {
    grid-template-columns: 1fr;
  }
}

.user-row span {
  color: var(--muted);
  font-size: 13px;
}

.user-row .user-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.mail-log .user-row {
  grid-template-columns: 1.4fr 0.7fr 0.6fr 1fr;
}

.mail-target-grid {
  grid-template-columns: 1.2fr 1.2fr 0.8fr;
  margin: 8px 0;
}

.mail-sent {
  color: var(--ok) !important;
  font-weight: 800;
}

.mail-failed {
  color: var(--danger) !important;
  font-weight: 800;
}

.protected-user {
  display: inline-grid;
  place-items: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 8px;
  background: var(--brand-soft);
  color: var(--brand) !important;
  font-size: 12px;
  font-weight: 800;
}

.small-button {
  min-height: 30px;
  padding: 0 9px;
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
  font-weight: 700;
}

.small-button.danger {
  background: var(--danger-soft);
  color: var(--danger);
}

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

  body.sidebar-collapsed .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
    height: auto;
  }

  body.sidebar-collapsed .customer-card strong,
  body.sidebar-collapsed .customer-card span,
  body.sidebar-collapsed .logger-card,
  body.sidebar-collapsed .nav-list button {
    font-size: inherit;
  }

  body.sidebar-collapsed .customer-card img {
    width: 145px;
    max-height: 58px;
  }

  .nav-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .logger-card {
    margin-top: 0;
  }

  .main-grid {
    grid-template-columns: 1fr;
  }

  .insight-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-chart-grid,
  .charts-grid-section {
    grid-template-columns: 1fr;
  }

  .subscription-banner {
    grid-template-columns: 1fr;
  }

  .subscription-actions {
    justify-content: stretch;
  }

  .subscription-actions .primary-button,
  .subscription-actions .ghost-button {
    flex: 1 1 180px;
  }

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

  .threshold-header {
    display: none;
  }

  .threshold-row {
    grid-template-columns: minmax(180px, 1.2fr) 64px repeat(2, minmax(130px, 1fr));
  }

  .threshold-wa,
  .threshold-cooldown {
    grid-column: span 1;
  }

  .report-history-card {
    grid-template-columns: 1fr;
  }

  .report-history-meta {
    grid-template-columns: 1fr;
  }

  .report-history-actions {
    justify-items: stretch;
  }
}

@media (max-width: 760px) {
  .dashboard-shell,
  .sidebar {
    padding: 14px;
  }

  .topbar,
  .panel-header,
  .modal-actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .top-actions,
  .meta-strip,
  .chart-actions,
  .primary-button,
  .ghost-button,
  .chart-actions select,
  .zoom-control,
  .points-control {
    width: 100%;
  }

  .meta-strip {
    justify-content: stretch;
  }

  .meta-strip span {
    flex: 1 1 130px;
  }

  .zoom-control input {
    width: 100%;
  }

  .alert-toggle {
    width: 100%;
    justify-content: center;
  }

  .nav-list,
  .report-controls,
  .settings-grid,
  .settings-layout,
  .profile-grid {
    grid-template-columns: 1fr;
  }

  .wide-field {
    grid-column: auto;
  }

  .recipient-manager {
    grid-template-columns: 1fr;
  }

  .template-control-grid,
  .log-toolbar {
    grid-template-columns: 1fr;
  }

  .customer-profile-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .device-table [role="row"],
  .data-row,
  .mail-log-row,
  .setting-row,
  .threshold-row {
    grid-template-columns: 1fr;
  }

  .threshold-switch {
    justify-self: start;
  }

  .threshold-wa {
    justify-content: flex-start;
  }

  .table-head {
    display: none !important;
  }
}

@media (max-width: 1100px) {
  /* The sidebar previously just stacked in normal document flow above the
     dashboard content on mobile/tablet widths - meaning a visitor had to
     scroll past the entire nav (every item, full height) before reaching
     any actual data. Turns it into a proper off-canvas overlay instead,
     reusing the existing hamburger toggle (body.sidebar-collapsed) rather
     than adding new JS state - note the meaning inverts from desktop
     (there, .sidebar-collapsed means "shrunk to icons"; here it means
     "the overlay is open") since it's still the same single toggle button. */
  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 60;
    width: 260px;
    max-width: 82vw;
    height: 100vh;
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    box-shadow: none;
  }

  body.sidebar-collapsed .sidebar {
    width: 260px;
    max-width: 82vw;
    padding: 14px;
    transform: translateX(0);
    box-shadow: 20px 0 44px rgba(4, 12, 24, 0.45);
  }

  /* Full nav content (not icon-only) once the overlay is open, overriding
     the desktop icon-collapse rules that also match .sidebar-collapsed. */
  body.sidebar-collapsed .customer-card strong,
  body.sidebar-collapsed .customer-card span,
  body.sidebar-collapsed .logger-card span,
  body.sidebar-collapsed .logger-card strong,
  body.sidebar-collapsed .profile-copy,
  body.sidebar-collapsed .nav-list button span {
    display: initial;
  }

  body.sidebar-collapsed .nav-list button {
    padding: 0 12px;
    text-align: left;
  }

  body.sidebar-collapsed .nav-list button::before {
    content: "";
  }

  /* Dim/backdrop behind the open overlay; tapping it closes the sidebar via
     the existing #sidebarToggle click-outside-friendly pattern below. */
  body.sidebar-collapsed .app-shell::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 55;
    background: rgba(4, 12, 24, 0.55);
  }

  .app-shell {
    position: relative;
  }

  /* Lives outside .sidebar deliberately - once the sidebar translates
     off-canvas (closed), its own internal toggle button goes with it and
     would be unreachable. This one stays fixed to the viewport regardless
     of the sidebar's transform, and only shows while the sidebar is closed
     (the internal toggle takes over once it's open, avoiding a duplicate
     button in the same corner). */
  .mobile-sidebar-toggle {
    display: grid;
    position: fixed;
    top: 14px;
    left: 14px;
    z-index: 50;
  }

  body.sidebar-collapsed .mobile-sidebar-toggle {
    display: none;
  }
}