/* ==========================================================================
   Chiller Platform — Design System
   RTL-first (logical properties only), mobile-first, light + dark via prefers-color-scheme.
   Tokens → base → layout → components. Modules add no global CSS; component-specific
   styles go in a .razor.css file next to the component.
   ========================================================================== */

@font-face {
  font-family: "Vazirmatn";
  src: url("../fonts/Vazirmatn-Variable.woff2") format("woff2-variations"),
       url("../fonts/Vazirmatn-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* Surfaces & text: cool, low-glare neutrals suited to long monitoring sessions */
  --bg: #f2f5f7;
  --surface: #ffffff;
  --surface-2: #f7f9fa;
  --border: #dbe2e7;
  --border-strong: #c3ccd3;
  --text: #13212b;
  --text-muted: #5a6a77;
  --text-inverse: #ffffff;

  /* Brand: deep "chilled-water" teal — trust and calm, not alarm */
  --primary: #0b6e8a;
  --primary-hover: #095a71;
  --primary-soft: #e2f1f5;
  --focus: #1a9cc0;

  /* Semantic states — always paired with text or icon, never color alone */
  --success: #1c7f52;  --success-soft: #e3f4ea;
  --warning: #9a6512;  --warning-soft: #fcf1dc;
  --danger:  #b3362a;  --danger-soft:  #fbe8e5;
  --info:    #0b6e8a;  --info-soft:    #e2f1f5;

  /* Sidebar */
  --nav-bg: #0f1d27;
  --nav-text: #b9c7d1;
  --nav-muted: #6f8392;
  --nav-active-bg: rgba(255, 255, 255, 0.07);
  --nav-accent: #4cc1dd;

  /* Scale */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px;
  --space-4: 16px; --space-5: 24px; --space-6: 32px;
  --shadow-sm: 0 1px 2px rgba(16, 33, 43, 0.06);
  --shadow: 0 1px 3px rgba(16, 33, 43, 0.08), 0 8px 24px rgba(16, 33, 43, 0.06);
  --sidebar-w: 264px;
  --topbar-h: 60px;

  --font: "Vazirmatn", Tahoma, system-ui, sans-serif;
  --fs-xs: 0.75rem; --fs-sm: 0.875rem; --fs: 0.9375rem; --fs-lg: 1.125rem; --fs-xl: 1.375rem; --fs-2xl: 1.75rem;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b141a;
    --surface: #121e26;
    --surface-2: #17252f;
    --border: #233440;
    --border-strong: #2f4452;
    --text: #e2e9ee;
    --text-muted: #93a4b0;

    --primary: #2fa6c6;
    --primary-hover: #4bb7d4;
    --primary-soft: rgba(47, 166, 198, 0.14);
    --focus: #5cc6e2;

    --success: #4cc28a;  --success-soft: rgba(76, 194, 138, 0.13);
    --warning: #e3a84a;  --warning-soft: rgba(227, 168, 74, 0.13);
    --danger:  #ef7a6d;  --danger-soft:  rgba(239, 122, 109, 0.13);
    --info:    #2fa6c6;  --info-soft:    rgba(47, 166, 198, 0.14);

    --nav-bg: #0a1217;
    --shadow-sm: none;
    --shadow: 0 1px 0 rgba(255, 255, 255, 0.03), 0 8px 24px rgba(0, 0, 0, 0.35);
    color-scheme: dark;
  }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; line-height: 1.35; font-weight: 700; }
p { margin: 0; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
code { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 0.85em; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-sm); }

.muted { color: var(--text-muted); }
.num { font-variant-numeric: tabular-nums; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.icon { flex-shrink: 0; vertical-align: middle; }

.skip-link {
  position: absolute; inset-inline-start: var(--space-4); inset-block-start: -100px;
  z-index: 100; padding: var(--space-2) var(--space-4);
  background: var(--primary); color: var(--text-inverse); border-radius: var(--radius-sm);
}
.skip-link:focus { inset-block-start: var(--space-3); }

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

/* ---------- App shell ---------- */
.shell { min-height: 100dvh; }

.sidebar {
  position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 40;
  width: var(--sidebar-w); max-width: 85vw;
  display: flex; flex-direction: column;
  background: var(--nav-bg); color: var(--nav-text);
  transform: translateX(100%);           /* off-canvas toward the inline-start (right) edge in RTL */
  transition: transform 0.2s ease;
  overflow-y: auto;
}
[dir="ltr"] .sidebar { transform: translateX(-100%); }
.shell--nav-open .sidebar { transform: none; }

.shell__scrim { position: fixed; inset: 0; z-index: 30; background: rgba(5, 12, 17, 0.45); }

.sidebar__brand {
  display: flex; align-items: center; gap: var(--space-3);
  min-height: var(--topbar-h); padding-inline: var(--space-4);
  color: #fff; font-weight: 700; font-size: var(--fs);
  border-block-end: 1px solid rgba(255, 255, 255, 0.06);
}
.sidebar__logo {
  display: inline-grid; place-items: center; width: 34px; height: 34px;
  border-radius: var(--radius-sm); background: var(--primary); color: #fff;
}

.nav { display: flex; flex-direction: column; gap: 2px; padding: var(--space-3); }
.nav__section {
  margin-block: var(--space-4) var(--space-1); padding-inline: var(--space-3);
  font-size: var(--fs-xs); font-weight: 600; color: var(--nav-muted);
}
.nav__link {
  position: relative; display: flex; align-items: center; gap: var(--space-3);
  min-height: 42px; padding-inline: var(--space-3);
  border-radius: var(--radius-sm); color: var(--nav-text); font-size: var(--fs-sm);
}
.nav__link:hover { background: var(--nav-active-bg); color: #fff; text-decoration: none; }
.nav__link.active { background: var(--nav-active-bg); color: #fff; font-weight: 600; }
.nav__link.active::before {
  content: ""; position: absolute; inset-inline-start: 0; inset-block: 9px;
  width: 3px; border-radius: 3px; background: var(--nav-accent);
}

.shell__main { display: flex; flex-direction: column; min-height: 100dvh; min-width: 0; }

.topbar {
  position: sticky; inset-block-start: 0; z-index: 20;
  display: flex; align-items: center; gap: var(--space-2);
  min-height: var(--topbar-h); padding-inline: var(--space-4);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(8px);
  border-block-end: 1px solid var(--border);
}
.topbar__spacer { flex: 1; }
.topbar__user { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-sm); }
.topbar__name { max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar__logout { margin: 0; }
.avatar {
  display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--primary-soft); color: var(--primary);
}

.content { flex: 1; width: 100%; max-width: 1360px; margin-inline: auto; padding: var(--space-4); }
.content:focus { outline: none; }

@media (min-width: 1024px) {
  .shell { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); }
  .sidebar { position: sticky; inset-block-start: 0; height: 100dvh; transform: none; max-width: none; }
  [dir="ltr"] .sidebar { transform: none; }
  .shell__scrim, .topbar__menu { display: none; }
  .content { padding: var(--space-6); }
}

/* ---------- Page header ---------- */
.page-header {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: var(--space-3); margin-block-end: var(--space-5);
}
.page-header__title { font-size: var(--fs-xl); }
.page-header__subtitle { margin-block-start: var(--space-1); color: var(--text-muted); font-size: var(--fs-sm); }
.page-header__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
@media (min-width: 768px) { .page-header__title { font-size: var(--fs-2xl); } }

/* ---------- Cards & grids ---------- */
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); padding: var(--space-4);
}
@media (min-width: 768px) { .card { padding: var(--space-5); } }
.card + .card { margin-block-start: var(--space-4); }
.card--narrow { max-width: 720px; }
.card__title { font-size: var(--fs-lg); margin-block-end: var(--space-4); }

.stack { display: flex; flex-direction: column; gap: var(--space-4); }
.stack > .card + .card { margin: 0; }
.grid { display: grid; gap: var(--space-4); }
.grid--2 { grid-template-columns: 1fr; }
.grid--form { grid-template-columns: 1fr; align-items: start; }
@media (min-width: 640px) { .grid--2 { grid-template-columns: 1fr 1fr; } }
.grid--3 { grid-template-columns: 1fr; }
@media (min-width: 640px) { .grid--3 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .grid--3 { grid-template-columns: 1fr 1fr 1fr; } }
@media (min-width: 1100px) { .grid--form { grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); } }

.notice { display: flex; gap: var(--space-4); align-items: flex-start; color: var(--primary); }
.notice .card__title { color: var(--text); margin-block-end: var(--space-2); }

.kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-4); margin-block-end: var(--space-4); }
.kpi {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: var(--space-3);
  align-items: center; padding: var(--space-4) var(--space-5);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
.kpi__icon {
  grid-row: span 2; display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: var(--radius); background: var(--primary-soft); color: var(--primary);
}
.kpi__label { color: var(--text-muted); font-size: var(--fs-sm); }
.kpi__value { font-size: var(--fs-2xl); font-weight: 700; line-height: 1.2; }

.meta { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-4); margin: 0 0 var(--space-4); font-size: var(--fs-sm); }
.meta dt { color: var(--text-muted); }
.meta dd { margin: 0; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 40px; padding: 0 var(--space-4);
  border: 1px solid transparent; border-radius: var(--radius-sm);
  font: inherit; font-size: var(--fs-sm); font-weight: 600; line-height: 1;
  cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn:hover { text-decoration: none; }
.btn:disabled, fieldset:disabled .btn { opacity: 0.5; cursor: not-allowed; }
.btn--primary { background: var(--primary); color: #fff; }
.btn--primary:hover:not(:disabled) { background: var(--primary-hover); }
.btn--secondary { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.btn--secondary:hover:not(:disabled) { background: var(--surface-2); }
.btn--ghost { background: transparent; color: var(--text-muted); }
.btn--ghost:hover:not(:disabled) { background: var(--surface-2); color: var(--text); }
.btn--danger { background: var(--danger); color: #fff; }
.btn--danger:hover:not(:disabled) { filter: brightness(0.92); }
.btn--icon { width: 40px; padding: 0; }
.btn--sm { min-height: 32px; padding: 0 var(--space-3); font-size: var(--fs-xs); }
.btn--block { width: 100%; }

/* ---------- Forms ---------- */
.form { display: flex; flex-direction: column; gap: var(--space-4); }
.form__fieldset { display: contents; }
.form__fieldset:disabled { opacity: 1; }
.form__actions { display: flex; gap: var(--space-2); padding-block-start: var(--space-2); }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }

.field { display: flex; flex-direction: column; gap: var(--space-1); }
.field__label { font-size: var(--fs-sm); font-weight: 600; padding: 0; }
.field__hint { font-size: var(--fs-xs); color: var(--text-muted); }
.field__error { font-size: var(--fs-xs); color: var(--danger); }
.field__static { padding-block: var(--space-2); }

.input {
  width: 100%; min-height: 42px; padding: var(--space-2) var(--space-3);
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  font: inherit; font-size: var(--fs);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
textarea.input { min-height: auto; resize: vertical; }
.input::placeholder { color: var(--text-muted); opacity: 0.8; }
.input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.input[readonly], .input:disabled { background: var(--surface-2); color: var(--text-muted); }
.input.invalid { border-color: var(--danger); }
.input.invalid:focus { box-shadow: 0 0 0 3px var(--danger-soft); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--primary); width: 18px; height: 18px; margin: 0; flex-shrink: 0; }

.check { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-sm); cursor: pointer; }

.choice-list { display: flex; flex-direction: column; gap: var(--space-2); }
.choice-list--grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.choice {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius);
  cursor: pointer; transition: border-color 0.15s ease, background-color 0.15s ease;
}
.choice:hover { border-color: var(--border-strong); }
.choice:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }
.choice input { margin-block-start: 3px; }
.choice__title { display: block; font-size: var(--fs-sm); font-weight: 600; }
.choice__desc { display: block; font-size: var(--fs-xs); color: var(--text-muted); }

.segmented { display: inline-flex; padding: 3px; gap: 3px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); }
.segmented__item { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-4); border-radius: var(--radius-sm); cursor: pointer; font-size: var(--fs-sm); }
.segmented__item:has(input:checked) { background: var(--surface); box-shadow: var(--shadow-sm); font-weight: 600; }

.perm-group + .perm-group { margin-block-start: var(--space-5); }
.perm-group__title { font-size: var(--fs); font-weight: 700; margin-block-end: var(--space-3); padding: 0; }

/* ---------- Card header with action / equipment components ---------- */
.card__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-block-end: var(--space-4); }
.card__header .card__title { margin-block-end: 0; }
.component-form { margin-block-end: var(--space-5); padding: var(--space-4); background: var(--surface-2); border-radius: var(--radius); }
.row--muted td { color: var(--text-muted); }

/* ---------- Access grants (building sharing) ---------- */
.grant-list { list-style: none; margin: 0; padding: 0; }
.grant-list__item {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding-block: var(--space-3); border-block-end: 1px solid var(--border);
}
.grant-list__item:last-child { border-block-end: 0; }
.grant-list__actions { display: flex; align-items: center; gap: var(--space-1); }
.share-form { margin-block-start: var(--space-4); padding-block-start: var(--space-4); border-block-start: 1px solid var(--border); gap: var(--space-2); }

/* ---------- Toolbar ---------- */
.toolbar { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block-end: var(--space-4); }
.toolbar__search { position: relative; flex: 1 1 240px; }
.toolbar__search .input { padding-inline-start: 38px; }
.toolbar__search-icon { position: absolute; inset-inline-start: 12px; inset-block-start: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; }
.toolbar__select { flex: 0 1 220px; width: auto; }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; margin-inline: calc(-1 * var(--space-4)); }
@media (min-width: 768px) { .table-wrap { margin-inline: 0; } }
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.table th {
  padding: var(--space-3) var(--space-4); text-align: start; white-space: nowrap;
  font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted);
  background: var(--surface-2); border-block-end: 1px solid var(--border);
}
.table td { padding: var(--space-3) var(--space-4); border-block-end: 1px solid var(--border); vertical-align: middle; }
.table tbody tr:hover { background: var(--surface-2); }
.table tbody tr:last-child td { border-block-end: 0; }
.table--dense td { padding-block: var(--space-2); }
.table .num { text-align: end; }
.cell-primary { font-weight: 600; }
.cell-secondary { font-size: var(--fs-xs); color: var(--text-muted); }
.cell-clip { max-width: 38ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell-actions { text-align: end; white-space: nowrap; }

/* Below tablet width, rows become stacked cards labeled from data-label. */
@media (max-width: 767.98px) {
  .table--responsive thead { display: none; }
  .table--responsive, .table--responsive tbody, .table--responsive tr, .table--responsive td { display: block; }
  .table--responsive tr { padding: var(--space-3) var(--space-4); border-block-end: 1px solid var(--border); }
  .table--responsive td { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-1) 0; border: 0; text-align: start; }
  .table--responsive td[data-label]::before { content: attr(data-label); color: var(--text-muted); font-size: var(--fs-xs); flex-shrink: 0; }
  .table--responsive td.num { text-align: start; }
  .table--responsive .cell-actions { justify-content: flex-end; padding-block-start: var(--space-2); }
  .table--responsive tbody tr:hover { background: transparent; }
}

/* ---------- Badges ---------- */
.badge {
  display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px;
  font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; line-height: 1.6;
}
.badge--neutral { background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--border); }
.badge--info { background: var(--info-soft); color: var(--info); }
.badge--success { background: var(--success-soft); color: var(--success); }
.badge--warning { background: var(--warning-soft); color: var(--warning); }
.badge--danger { background: var(--danger-soft); color: var(--danger); }

/* ---------- Alerts / feedback ---------- */
.alert {
  display: flex; gap: var(--space-3); align-items: flex-start;
  padding: var(--space-3) var(--space-4); margin-block-end: var(--space-4);
  border-radius: var(--radius); font-size: var(--fs-sm);
}
.alert .icon { margin-block-start: 3px; }
.alert--success { background: var(--success-soft); color: var(--success); }
.alert--danger { background: var(--danger-soft); color: var(--danger); }
.alert--info { background: var(--info-soft); color: var(--info); }
.alert--warning { background: var(--warning-soft); color: var(--warning); }
.alert__list { margin: 0; padding-inline-start: var(--space-4); }

/* ---------- Loading / empty / error states ---------- */
.state {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3);
  padding: var(--space-6) var(--space-4); text-align: center; color: var(--text-muted);
}
.state--loading { flex-direction: row; }
.state--error { color: var(--danger); }
.state__title { font-size: var(--fs); font-weight: 600; color: var(--text); }
.spinner {
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--border-strong); border-block-start-color: var(--primary);
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Pager ---------- */
.pager { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-block-start: var(--space-4); font-size: var(--fs-sm); color: var(--text-muted); }
.pager__buttons { display: flex; gap: var(--space-1); }

/* ---------- Dialog ---------- */
.dialog-backdrop { position: fixed; inset: 0; z-index: 60; background: rgba(5, 12, 17, 0.5); }
.dialog {
  position: fixed; z-index: 61; inset-inline: var(--space-4); inset-block-start: 50%; transform: translateY(-50%);
  max-width: 460px; margin-inline: auto; padding: var(--space-5);
  background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow);
}
.dialog:focus { outline: none; }
.dialog__title { font-size: var(--fs-lg); margin-block-end: var(--space-3); }
.dialog__body { color: var(--text-muted); font-size: var(--fs-sm); margin-block-end: var(--space-5); }
.dialog__actions { display: flex; gap: var(--space-2); }

/* ---------- Auth pages ---------- */
.auth {
  min-height: 100dvh; display: grid; place-items: center; padding: var(--space-4);
  background:
    radial-gradient(1200px 600px at 100% 0%, var(--primary-soft), transparent 60%),
    var(--bg);
}
.auth__panel {
  width: 100%; max-width: 420px; padding: var(--space-6) var(--space-5);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow);
}
.auth__panel > .muted { margin-block-end: var(--space-5); font-size: var(--fs-sm); }
.auth__brand { display: flex; align-items: center; gap: var(--space-3); margin-block-end: var(--space-6); font-weight: 700; color: var(--text); }
.auth__title { font-size: var(--fs-xl); margin-block-end: var(--space-2); }

/* ---------- Circuit reconnect & fatal error ---------- */
.reconnect { display: none; }
.reconnect.components-reconnect-show,
.reconnect.components-reconnect-retrying,
.reconnect.components-reconnect-failed,
.reconnect.components-reconnect-rejected,
.reconnect.components-reconnect-paused,
.reconnect.components-reconnect-resume-failed {
  display: grid; place-items: center; position: fixed; inset: 0; z-index: 1000; background: rgba(5, 12, 17, 0.55);
}
.reconnect__box {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-4);
  max-width: 360px; margin: var(--space-4); padding: var(--space-5);
  background: var(--surface); color: var(--text); border-radius: var(--radius-lg); box-shadow: var(--shadow); text-align: center;
}
.reconnect__msg, #components-reconnect-button { display: none; }
.components-reconnect-show .reconnect__msg--show,
.components-reconnect-retrying .reconnect__msg--show { display: block; }
.components-reconnect-failed .reconnect__msg--failed,
.components-reconnect-resume-failed .reconnect__msg--failed { display: block; }
.components-reconnect-rejected .reconnect__msg--rejected { display: block; }
.components-reconnect-failed #components-reconnect-button,
.components-reconnect-resume-failed #components-reconnect-button,
.components-reconnect-rejected #components-reconnect-button { display: inline-flex; }

#blazor-error-ui {
  display: none; position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 1000;
  padding: var(--space-3) var(--space-5); background: var(--danger); color: #fff; font-size: var(--fs-sm);
}
#blazor-error-ui .reload { color: #fff; text-decoration: underline; margin-inline-start: var(--space-3); }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; inset-inline-end: var(--space-4); }

/* ---------- Devices ---------- */
.secret-panel { border: 2px solid var(--warning); }
.secret-panel .input { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: var(--fs-sm); }
.point-write { color: var(--warning); font-weight: 600; }

/* ---------- Live monitoring ---------- */
.live-values dd { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: baseline; }
.live-values__value .num { font-weight: 600; font-size: var(--fs-md, 1rem); }
.live-values__value--stale .num { color: var(--text-muted, inherit); text-decoration: line-through; text-decoration-thickness: 1px; }
.live-values__age { font-size: var(--fs-sm); color: var(--warning); }

/* ---------- Trend chart (single series; colors validated with the dataviz palette checks) ---------- */
:root { --chart-1: #0a78a8; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --chart-1: #2b9ccf; } }
:root[data-theme="dark"] { --chart-1: #2b9ccf; }
.trend { margin: 0; }
.trend__svg { width: 100%; height: auto; display: block; overflow: visible; }
.trend__grid { stroke: var(--border); stroke-width: 1; }
.trend__label { fill: var(--text-muted); font-size: 11px; font-family: var(--font); }
.trend__line { fill: none; stroke: var(--chart-1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.trend__band { fill: var(--chart-1); opacity: 0.14; stroke: none; }
.trend__dot { fill: var(--chart-1); }
.trend__last { fill: var(--chart-1); stroke: var(--surface); stroke-width: 2; }
.trend__hit { fill: transparent; }
.trend__hit:hover { fill: var(--text); opacity: 0.06; }
.trend__caption { margin-block-start: var(--space-2); font-size: var(--fs-sm); color: var(--text-muted); }
.trend__caption strong { color: var(--text); }
.trend__table { margin-block-start: var(--space-3); font-size: var(--fs-sm); }
.trend__ref { fill: var(--success); opacity: 0.1; stroke: var(--success); stroke-opacity: 0.5; stroke-dasharray: 4 4; stroke-width: 1; }
.trend__ref-key { color: var(--success); }
.trend__table summary { cursor: pointer; color: var(--text-muted); }
.range-picker { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }

/* ---------- Alarms ---------- */
.ack-form { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.ack-form .input { min-width: 12rem; }

/* ---------- Billing ---------- */
.plain-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.plan-card { margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.plan-card ul { margin: 0; padding-inline-start: var(--space-5); }
.plan-card--current { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.invoice__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--space-3); margin-block-end: var(--space-4); }
.invoice__label { font-size: var(--fs-sm); color: var(--text-muted); margin-block-end: var(--space-2); }
.invoice tfoot th { text-align: start; font-weight: 500; }
.invoice__total th, .invoice__total td { font-weight: 700; }
.invoice__note { margin-block-start: var(--space-3); font-size: var(--fs-sm); }
.invoice__instructions { white-space: pre-line; padding: var(--space-3); border-radius: var(--radius); background: var(--surface-2); }
.result { max-width: 40rem; margin-inline: auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
.result__title { font-size: var(--fs-xl); }
.result__meta { text-align: start; }
.result__actions { justify-content: center; }
.result__icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; }
.result__icon--success { color: var(--success); background: var(--success-soft); }
.result__icon--pending { color: var(--info); background: var(--info-soft); }
.result__icon--danger { color: var(--danger); background: var(--danger-soft); }

.approval { border-color: var(--warning); box-shadow: 0 0 0 1px var(--warning); }
.approval__changes { margin-block-end: var(--space-3); font-size: var(--fs-sm); }
.approval__code { max-width: 14rem; }
.approval__code .input { font-size: var(--fs-lg); letter-spacing: 0.3em; text-align: center; }

.kpi__value small { font-size: var(--fs-xs); font-weight: 400; color: var(--text-muted); }
.rev-bar-cell { inline-size: 35%; min-inline-size: 6rem; }
.rev-bar { display: block; inline-size: 100%; block-size: 8px; }
[dir="rtl"] .rev-bar { transform: scaleX(-1); }   /* bars grow from the inline start */
.rev-bar__track { fill: var(--surface-2); }
.rev-bar__value { fill: var(--chart-1); }

/* ---------- Subscription notice & lockout (layout) ---------- */
.sub-notice { margin-block-end: var(--space-4); }
.lockout { max-width: 36rem; margin: var(--space-6) auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }

/* ---------- Notification bell & inbox ---------- */
.bell { position: relative; }
.bell__button { position: relative; }
.bell__badge {
  position: absolute; inset-block-start: 2px; inset-inline-end: 2px; min-inline-size: 18px; block-size: 18px; padding-inline: 4px;
  border-radius: 9px; background: var(--danger); color: #fff; font-size: 11px; line-height: 18px; text-align: center; font-weight: 700;
}
.bell__scrim { position: fixed; inset: 0; z-index: 49; }
.bell__panel {
  position: absolute; inset-inline-end: 0; inset-block-start: calc(100% + 6px); z-index: 50;
  inline-size: min(380px, calc(100vw - 24px)); max-block-size: 70vh; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow);
}
.bell__head, .bell__foot { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-4); }
.bell__head { border-block-end: 1px solid var(--border); }
.bell__foot { border-block-start: 1px solid var(--border); justify-content: center; font-size: var(--fs-sm); }
.bell__empty { padding: var(--space-4); }
.bell__list { list-style: none; margin: 0; padding: 0; }
.bell__item + .bell__item { border-block-start: 1px solid var(--border); }
.bell__link { display: flex; gap: var(--space-3); inline-size: 100%; padding: var(--space-3) var(--space-4); background: none; border: 0; text-align: start; color: inherit; font: inherit; cursor: pointer; }
.bell__link:hover { background: var(--surface-2); }
.bell__item--unread .bell__title, .inbox__item--unread .inbox__title { font-weight: 700; }
.bell__text { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; }
.bell__title { font-size: var(--fs-sm); }
.bell__body { font-size: var(--fs-xs); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.bell__time { font-size: var(--fs-xs); color: var(--text-muted); }
.bell__dot { flex: none; inline-size: 10px; block-size: 10px; border-radius: 50%; margin-block-start: 6px; }
.bell__dot--danger { background: var(--danger); }
.bell__dot--warning { background: var(--warning); }
.bell__dot--info { background: var(--info); }
.inbox { list-style: none; margin: 0; padding: 0; }
.inbox__item { display: flex; gap: var(--space-3); align-items: flex-start; padding-block: var(--space-3); }
.inbox__item + .inbox__item { border-block-start: 1px solid var(--border); }
.inbox__item--unread { background: linear-gradient(to left, var(--info-soft), transparent 40%); }
.inbox__text { flex: 1; min-inline-size: 0; }
.inbox__body { font-size: var(--fs-sm); margin-block-start: 2px; }
.inbox__meta { font-size: var(--fs-xs); margin-block-start: var(--space-1); }
.inbox__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; justify-content: flex-end; }

/* ---------- Shared bits used by maintenance (and later health) ---------- */
.pbar { display: block; inline-size: 100%; block-size: 8px; }
[dir="rtl"] .pbar { transform: scaleX(-1); }
.pbar__track { fill: var(--surface-2); }
.pbar__value { fill: var(--info); }
.pbar--success .pbar__value { fill: var(--success); }
.pbar--warning .pbar__value { fill: var(--warning); }
.pbar--danger .pbar__value { fill: var(--danger); }
.pbar--neutral .pbar__value { fill: var(--text-muted); }
.text-danger { color: var(--danger); }
.row--muted td { color: var(--text-muted); }
.chip { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 999px; font-size: var(--fs-xs); background: var(--surface-2); border: 1px solid var(--border); color: var(--text-muted); white-space: nowrap; }
.chip--danger { color: var(--danger); border-color: var(--danger); background: var(--danger-soft); }
.chip--warning { color: var(--warning); border-color: var(--warning); background: var(--warning-soft); }
.prio { font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; }
.prio--1 { color: var(--danger); }
.prio--2 { color: var(--warning); }
.prio--3 { color: var(--text); }
.prio--4 { color: var(--text-muted); }
.kpi--danger { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger); }
.kpi--danger .kpi__icon { background: var(--danger-soft); color: var(--danger); }
.kpi--warning { border-color: var(--warning); }
.kpi--warning .kpi__icon { background: var(--warning-soft); color: var(--warning); }
.empty-good { display: flex; align-items: center; gap: var(--space-3); color: var(--success); padding-block: var(--space-3); }
.empty-good p { margin: 0; color: var(--text); }
.inline-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); padding: var(--space-3); margin-block: var(--space-3); border: 1px dashed var(--border); border-radius: var(--radius); background: var(--surface-2); }
.inline-form .field { margin: 0; min-inline-size: 10rem; flex: 1 1 10rem; }
.inline-form .form__actions { margin: 0; }
.inline-form .field__hint { flex-basis: 100%; margin: 0; }
.hint-warning { display: flex; gap: var(--space-2); align-items: center; color: var(--warning); font-size: var(--fs-sm); margin-block-start: var(--space-3); }
.fieldset { border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-3) var(--space-4); margin: 0; }
.fieldset legend { padding-inline: var(--space-2); font-size: var(--fs-sm); color: var(--text-muted); }
button.segmented__item { border: 0; background: transparent; color: inherit; font: inherit; }
.segmented__item--on { background: var(--surface); box-shadow: var(--shadow-sm); font-weight: 600; }
.segmented__item--ok { background: var(--success-soft); color: var(--success); font-weight: 600; }
.segmented__item--bad { background: var(--danger-soft); color: var(--danger); font-weight: 600; }
.segmented__item:disabled { cursor: default; opacity: .7; }
.link-button { border: 0; background: none; padding: 0; color: var(--primary); font: inherit; font-size: var(--fs-sm); cursor: pointer; }
.is-on { background: var(--surface-2); font-weight: 600; }

/* ---------- Maintenance ---------- */
.due-list, .plan-list { list-style: none; margin: 0; padding: 0; }
.due-item { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; justify-content: space-between; padding: var(--space-3); border-inline-start: 4px solid var(--border); }
.due-item + .due-item { border-block-start: 1px solid var(--border); }
.due-item--4 { border-inline-start-color: var(--danger); }
.due-item--3 { border-inline-start-color: var(--warning); }
.due-item--2 { border-inline-start-color: var(--info); }
.due-item__main { flex: 1 1 22rem; min-inline-size: 0; }
.due-item__title { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.due-item__meta { font-size: var(--fs-sm); margin-block-start: var(--space-1); }
.due-item__actions { display: flex; gap: var(--space-2); }
.timeline__month { font-size: var(--fs-sm); color: var(--text-muted); margin-block: var(--space-3) var(--space-2); }
.timeline li { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: baseline; }
.timeline__date { min-inline-size: 6.5rem; color: var(--text-muted); font-size: var(--fs-sm); }
.timeline__note { font-size: var(--fs-xs); margin-block-start: var(--space-3); }
.plan-row { padding-block: var(--space-4); }
.plan-row + .plan-row { border-block-start: 1px solid var(--border); }
.plan-row__head { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: space-between; align-items: center; }
.plan-row__title { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.plan-row__tags { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.plan-row__triggers { display: grid; gap: var(--space-2); margin-block: var(--space-3); }
.plan-row__foot { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: space-between; align-items: center; font-size: var(--fs-sm); }
.plan-row__actions { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.trigger { display: grid; grid-template-columns: 7rem minmax(6rem, 1fr) auto; gap: var(--space-3); align-items: center; font-size: var(--fs-sm); }
.trigger__label { color: var(--text-muted); }
.trigger__value { white-space: nowrap; }
@media (max-width: 639.98px) { .trigger { grid-template-columns: 1fr; gap: var(--space-1); } }
.plan-disabled { margin-block-start: var(--space-3); color: var(--text-muted); }
.plan-disabled summary { cursor: pointer; }
.wo-head__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-block-end: var(--space-3); }
.wo-head__desc { margin-block: var(--space-3) 0; white-space: pre-line; }
.wo-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block-start: var(--space-4); }
@media (max-width: 767.98px) {
  /* Technicians on site: the main actions stay at hand. */
  .wo-actions { position: sticky; inset-block-end: 0; z-index: 10; background: var(--surface); padding-block: var(--space-3); border-block-start: 1px solid var(--border); }
}
.checklist { list-style: none; counter-reset: task; margin: var(--space-3) 0 0; padding: 0; }
.checklist__item { counter-increment: task; display: grid; gap: var(--space-2); padding: var(--space-3); border-inline-start: 4px solid var(--border); }
.checklist__item + .checklist__item { border-block-start: 1px solid var(--border); }
.checklist__item--pass { border-inline-start-color: var(--success); }
.checklist__item--fail { border-inline-start-color: var(--danger); background: var(--danger-soft); }
.checklist__item--na { border-inline-start-color: var(--text-muted); }
.checklist__text::before { content: counter(task) ". "; color: var(--text-muted); }
.checklist__req { color: var(--danger); margin-inline-start: 2px; }
.checklist__range { font-size: var(--fs-xs); }
.checklist__controls { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.checklist__controls .btn, .checklist__controls .segmented__item { min-block-size: 40px; }
.checklist__value { inline-size: 9rem; }
.checklist__unit { color: var(--text-muted); font-size: var(--fs-sm); }
.wo-cost { margin-block-start: var(--space-3); font-size: var(--fs-sm); }
.comment-box { display: flex; gap: var(--space-2); margin-block-end: var(--space-3); }
.comment-box .input { flex: 1; }
.timeline-log { list-style: none; margin: 0; padding: 0; }
.timeline-log__item { display: grid; grid-template-columns: 9.5rem 8rem 1fr; gap: var(--space-3); padding-block: var(--space-2); font-size: var(--fs-sm); }
.timeline-log__item + .timeline-log__item { border-block-start: 1px solid var(--border); }
.timeline-log__item--4 .timeline-log__text { font-weight: 600; }
.timeline-log__time, .timeline-log__who { color: var(--text-muted); }
@media (max-width: 639.98px) { .timeline-log__item { grid-template-columns: 1fr; gap: 0; } }
.meter-at-completion { margin-block: var(--space-2); }
.meter-at-completion summary { cursor: pointer; color: var(--text-muted); font-size: var(--fs-sm); }
.task-editor { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; padding-block: var(--space-2); }
.task-editor + .task-editor { border-block-start: 1px dashed var(--border); }
.task-editor__no { inline-size: 1.5rem; color: var(--text-muted); }
.task-editor__text { flex: 1 1 18rem; }
.task-editor__type { flex: 0 1 9rem; inline-size: auto; }
.task-editor__small { flex: 0 1 6rem; inline-size: 6rem; }
.task-editor__tools { display: inline-flex; gap: 2px; }

/* ---------- Print (invoices) ---------- */
@media print {
  .sidebar, .topbar, .shell__scrim, .no-print, .skip-link, #blazor-error-ui, .alert { display: none !important; }
  .shell { display: block; }
  .content { padding: 0; }
  body, .card, .invoice, .invoice * { background: #fff !important; color: #000 !important; }
  .card { border: none; box-shadow: none; padding: 0; }
  .table th, .table td { border-color: #999; }
  a { color: inherit; text-decoration: none; }
}

/* ---------- Analytics (Phase 6 step 2) ---------- */
.analytics-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-block-end: var(--space-4); }
.kpi > .pbar, .kpi__foot { grid-column: 2; }
.kpi > .pbar { margin-block-start: var(--space-2); }
.kpi__foot { font-size: var(--fs-xs); margin-block-start: var(--space-1); }
.analytics-note { align-items: flex-start; margin-block-end: var(--space-4); }
.analytics-note p { margin: 0; color: var(--text); font-size: var(--fs-sm); line-height: 1.9; }

.kpi-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--space-3); }
.kpi-card {
  display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); border-inline-start-width: 4px;
}
.kpi-card--1 { border-inline-start-color: var(--success); }
.kpi-card--2 { border-inline-start-color: var(--warning); }
.kpi-card--3 { border-inline-start-color: var(--danger); }
.kpi-card--na { background: var(--surface-2); border-style: dashed; border-inline-start-width: 1px; }
.kpi-card.is-selected { box-shadow: 0 0 0 2px var(--focus); }
.kpi-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); }
.kpi-card__title { margin: 0; font-size: var(--fs-sm); font-weight: 600; line-height: 1.6; }
.kpi-card__value { margin: 0; font-size: var(--fs-xl); font-weight: 700; line-height: 1.2; }
.kpi-card__unit { font-size: var(--fs-sm); font-weight: 400; color: var(--text-muted); }
.kpi-card__meta, .kpi-card__hint { margin: 0; font-size: var(--fs-xs); }
.kpi-card__na { display: flex; gap: var(--space-2); align-items: flex-start; margin: 0; font-size: var(--fs-sm); color: var(--text-muted); }
.kpi-card__trend { align-self: flex-start; }
.kpi-card__foot { margin-block-start: auto; padding-block-start: var(--space-2); border-block-start: 1px dashed var(--border); font-size: var(--fs-xs); }
.kpi-card__circuits { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.kpi-card__circuits th { text-align: start; font-weight: 400; color: var(--text-muted); white-space: nowrap; }
.kpi-card__circuits th, .kpi-card__circuits td { padding: var(--space-1) 0; }
.kpi-card__circuits td:last-child { text-align: end; }
.kpi-card__circuits tr.is-selected th { color: var(--focus); font-weight: 600; }

.band { display: inline-flex; align-items: center; gap: 4px; padding: 2px var(--space-2); border-radius: 999px; font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; }
.band--1 { background: var(--success-soft); color: var(--success); }
.band--2 { background: var(--warning-soft); color: var(--warning); }
.band--3 { background: var(--danger-soft); color: var(--danger); }

.qscore { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-sm); vertical-align: middle; }
.qscore__track { fill: none; stroke: var(--border); stroke-width: 4; }
.qscore__value { fill: none; stroke-width: 4; stroke-linecap: round; }
.qscore--good .qscore__value { stroke: var(--success); }
.qscore--fair .qscore__value { stroke: var(--warning); }
.qscore--poor .qscore__value { stroke: var(--danger); }
.qscore__text { display: inline-flex; gap: var(--space-1); align-items: baseline; }
.qscore__text span { color: var(--text-muted); font-size: var(--fs-xs); font-weight: 400; }

.dq-facts { display: flex; flex-wrap: wrap; gap: var(--space-5); margin: 0 0 var(--space-3); font-size: var(--fs-sm); }
.dq-facts dt { color: var(--text-muted); font-size: var(--fs-xs); }
.dq-facts dd { margin: 0; font-weight: 600; }
.dq-issues { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.dq-issue { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3); border-radius: var(--radius-sm); background: var(--surface-2); }
.dq-issue p { margin: var(--space-1) 0 0; font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.8; }
.dq-issue--1 > .icon { color: var(--info); }
.dq-issue--2 > .icon { color: var(--warning); }
.dq-issue--3 { background: var(--danger-soft); }
.dq-issue--3 > .icon { color: var(--danger); }
.gap-list { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); font-size: var(--fs-sm); }
.gap-list li { padding: var(--space-2) var(--space-3); border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); line-height: 1.9; }

.kpi-explain { margin-block-start: var(--space-4); padding: var(--space-3) var(--space-4); background: var(--surface-2); border-radius: var(--radius); font-size: var(--fs-sm); line-height: 1.9; }
.kpi-explain p { margin: 0 0 var(--space-1); }
.kpi-explain p:last-child { margin: 0; }
.trend__note { font-size: var(--fs-xs); margin: var(--space-2) 0 0; }

.fleet-table th[scope="row"] { font-weight: 600; }
.fleet-value { display: inline-flex; align-items: center; gap: 4px; }
.fleet-value--2 { color: var(--warning); font-weight: 600; }
.fleet-value--3 { color: var(--danger); font-weight: 600; }
.fleet-note { font-size: var(--fs-xs); margin: var(--space-3) 0 0; }