html,
body {
  font-family: "Inter", Helvetica, Arial, sans-serif;
  background-image: none;
  min-height: 100%;
}

body {
  padding-bottom: var(--safe-area-inset-bottom);
}

/* Fan placement segmented control */
.fan-placement-segment {
  display: inline-flex;
  border: 1px solid var(--rz-primary, #0d6efd);
  border-radius: 0.375rem;
  overflow: hidden;
}

.fan-placement-segment--disabled {
  opacity: 0.5;
  pointer-events: none;
}

.fan-placement-segment__btn {
  padding: 0.25rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 500;
  border: none;
  background: transparent;
  color: var(--rz-primary, #0d6efd);
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
  white-space: nowrap;
}

.fan-placement-segment__btn:first-child {
  border-right: 1px solid var(--rz-primary, #0d6efd);
}

.fan-placement-segment__btn--active {
  background: var(--rz-primary, #0d6efd);
  color: var(--rz-white, #fff);
}

.fan-placement-segment__btn:not(.fan-placement-segment__btn--active):hover {
  background: color-mix(in srgb, var(--rz-primary, #0d6efd) 10%, transparent);
}

.fan-placement-segment__btn:disabled {
  cursor: not-allowed;
}

*::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.rz-layout::-webkit-scrollbar-thumb,
.rz-layout ::-webkit-scrollbar-thumb,
.rz-scrollbars::-webkit-scrollbar-thumb,
.rz-scrollbars ::-webkit-scrollbar-thumb {
  border-width: 1px;
}

@supports not selector(::-webkit-scrollbar) {
  * {
    scrollbar-width: thin;
  }

  .rz-day-view .rz-view-header,
  .rz-week-view .rz-view-header {
    scrollbar-width: thin;
  }
}

.text-xs {
  font-size: 0.75rem;
}

.projectimg {
  border-radius: var(--rz-card-border-radius);
}

#blazor-error-ui {
  background: var(--bs-body-bg, #fff);
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
}

.blazor-error-boundary {
  background-color: red;
  padding: 1rem 1rem 1rem 3.7rem;
  color: white;
}

.blazor-error-boundary::after {
  content: "An error has occurred.";
}

.startup-loading {
  display: grid;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 1rem;
  color: var(--bs-body-color, #212529);
  place-content: center;
  justify-items: center;
  text-align: center;
}

.trace-logo--animated {
  --trace-logo-tile: #e22225;
  --trace-logo-foreground: #fff;
  --trace-logo-duration: 2.040703s;
  display: block;
  max-width: 100%;
  overflow: hidden;
  color: var(--trace-logo-foreground);
  background: var(--trace-logo-tile);
  border-radius: 33.333%;
  forced-color-adjust: none;
  animation: trace-logo-tile var(--trace-logo-duration) linear infinite;
}

.startup-logo {
  width: clamp(4.5rem, 18vw, 8rem);
  height: auto;
  aspect-ratio: 1;
}

.trace-logo__solid {
  transform-box: view-box;
  transform-origin: center;
  animation: trace-logo-solid var(--trace-logo-duration) linear infinite;
}

.trace-logo__cutout {
  animation: trace-logo-cutout var(--trace-logo-duration) linear infinite;
}

.trace-logo__outline {
  --trace-logo-outline-rest:
    19.5313% 29.9479%, 19.5313% 29.9479%, 72.1354% 29.9479%,
    72.1354% 49.2188%, 72.1354% 49.2188%, 55.4688% 49.2188%,
    55.4688% 82.5521%, 55.4688% 82.5521%, 36.1979% 82.5521%,
    36.1979% 49.2188%, 19.5313% 49.2188%;
  clip-path: polygon(var(--trace-logo-outline-rest));
  animation: trace-logo-outline var(--trace-logo-duration) linear infinite;
}

.startup-loading__status {
  display: flex;
  min-width: 8rem;
  margin-top: 1rem;
  flex-direction: column;
  gap: 0.25rem;
  align-items: center;
}

.loading-progress-text {
  min-height: 1.5em;
  font-weight: bold;
  font-variant-numeric: tabular-nums;
}

.loading-progress-text:after {
  content: var(--blazor-load-percentage-text, "0%");
}

@keyframes trace-logo-tile {
  0% {
    transform: scale(0.8333);
  }

  5.5558% {
    transform: scale(0.989);
  }

  11.1117%,
  100% {
    transform: scale(1);
  }
}

@keyframes trace-logo-solid {
  0% {
    opacity: 0;
    visibility: visible;
    transform: translate(-8.3333%, 8.3333%) scale(0);
  }

  5.5558% {
    opacity: 0.6667;
    transform: translate(-8.3333%, 8.3333%) scale(0.646);
  }

  11.1117% {
    opacity: 0.864;
    transform: translate(-8.3333%, 8.3333%) scale(0.844);
  }

  16.6676%,
  27.7793% {
    opacity: 1;
    transform: translate(-8.3333%, 8.3333%) scale(1);
  }

  33.3352%,
  44.4469% {
    opacity: 1;
    transform: translate(-8.3333%, 8.3333%) scale(1);
  }

  50.0028% {
    opacity: 1;
    transform: translate(-8.3333%, 8.3333%) scale(1);
  }

  55.5531% {
    opacity: 1;
    transform: translate(-8.3333%, 8.3333%) scale(1);
  }

  61.1089% {
    opacity: 1;
    transform: translate(-2.0833%, 2.0833%) scale(1);
  }

  66.6648%,
  100% {
    opacity: 1;
    visibility: hidden;
    transform: translate(0, 0) scale(1);
  }
}

@keyframes trace-logo-cutout {
  0% {
    visibility: visible;
  }

  66.6648%,
  100% {
    visibility: hidden;
  }
}

/* Reveal the swept T silhouette without moving the source outline or exposing detached connectors. */
@keyframes trace-logo-outline {
  0%,
  50.0028% {
    opacity: 0;
  }

  55.5531% {
    opacity: 1;
    clip-path: polygon(var(--trace-logo-outline-rest));
  }

  61.1089% {
    opacity: 1;
    clip-path: polygon(
      19.5313% 29.9479%, 25.7813% 23.6979%, 78.3854% 23.6979%,
      78.3854% 42.9688%, 72.1354% 49.2188%, 61.7188% 49.2188%,
      61.7188% 76.3021%, 55.4688% 82.5521%, 36.1979% 82.5521%,
      36.1979% 49.2188%, 19.5313% 49.2188%
    );
  }

  66.6648%,
  100% {
    opacity: 1;
    clip-path: polygon(
      19.5313% 29.9479%, 27.8646% 21.6146%, 80.4688% 21.6146%,
      80.4688% 40.8854%, 72.1354% 49.2188%, 63.8021% 49.2188%,
      63.8021% 74.2188%, 55.4688% 82.5521%, 36.1979% 82.5521%,
      36.1979% 49.2188%, 19.5313% 49.2188%
    );
  }
}

@media (prefers-reduced-motion: reduce) {
  .trace-logo--animated,
  .trace-logo__solid,
  .trace-logo__cutout,
  .trace-logo__outline {
    animation: none;
  }

  .trace-logo__solid,
  .trace-logo__cutout {
    display: none;
  }

  .trace-logo__outline {
    clip-path: none;
    opacity: 1;
  }
}

@media (forced-colors: active) {
  .startup-loading {
    color: CanvasText;
  }

  .trace-logo--animated {
    outline: 0.125rem solid CanvasText;
  }
}

:root {
  --rz-scrollbar-size: 6px;
  --safe-area-inset-top: env(safe-area-inset-top, 0px);
  --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
  --elevation-2:
    0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14),
    0px 1px 5px 0px rgba(0, 0, 0, 0.12);
  --elevation-3:
    0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14),
    0px 1px 8px 0px rgba(0, 0, 0, 0.12);
  --elevation-4:
    0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14),
    0px 1px 10px 0px rgba(0, 0, 0, 0.12);
  --elevation-6:
    0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14),
    0px 1px 18px 0px rgba(0, 0, 0, 0.12);
  --elevation-8:
    0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14),
    0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --elevation-16:
    0px 8px 10px -5px rgba(0, 0, 0, 0.2), 0px 16px 24px 2px rgba(0, 0, 0, 0.14),
    0px 6px 30px 5px rgba(0, 0, 0, 0.12);
}

.elevation-2 {
  box-shadow: var(--elevation-2);
}

.elevation-3 {
  box-shadow: var(--elevation-3);
}

.elevation-4 {
  box-shadow: var(--elevation-4);
}

.elevation-6 {
  box-shadow: var(--elevation-6);
}

.elevation-8 {
  box-shadow: var(--elevation-8);
}

.elevation-16 {
  box-shadow: var(--elevation-16);
}

/* nav-link */
.nav-link:hover {
  cursor: pointer;
}

/* Library card emojis */
.lib-emoji {
  font-size: 2em;
  vertical-align: middle;
}

/* Header icon buttons */
.navbar-nav .tt-header-icon {
  transition: background-color 0.15s ease;
}

.navbar-nav .tt-header-icon:hover {
  background-color: var(--rz-panel-menu-hover-background-color) !important;
}

.navbar-nav .tt-header-icon .nav-link.material-symbols-outlined {
  transition: color 0.15s ease;
}

.navbar-nav .tt-header-icon:hover .nav-link.material-symbols-outlined {
  color: white !important;
}

/* Theme Overrides */
:root {
  /* Trane Colors */
  --trane-primary-darker: #ff8870;
  --trane-primary-dark: #ff5e3d;
  --trane-primary-darkalt: #ff4019;
  --trane-primary: #ff2b00;
  --trane-secondary: #e02500;
  --trane-tertiary: #991900;
  --trane-primary-light: #4d0d00;
  --trane-primary-lighter: #290700;
  --trane-primary-lighteralt: #0a0200;
  /* TT Colors */
  --tt-primary-darker: #a970ff;
  --tt-primary-dark: #8b3dff;
  --tt-primary-darkalt: #7519ff;
  --tt-primary: #6400ff;
  --tt-secondary: #5a00e0;
  --tt-tertiary: #3d0099;
  --tt-primary-light: #1f004d;
  --tt-primary-lighter: #100029;
  --tt-primary-lighteralt: #0400a;
  /* TT Link Colors */
  --tt-link-active-background-color: rgb(128, 128, 128);
  --tt-link-active-background-color-hover: rgba(128, 128, 128, 0.6);
}

/* Theme-specific Radzen Layout Background Color */
[data-bs-theme="light"] {
  --rz-layout-background-color: var(--rz-white);
  --rz-secondary: #8a8886;
  --rz-menu-item-icon-color: var(--rz-text-color);
  --rz-text-disabled-color: var(--rz-text-tertiary-color);
  --rz-grid-hover-background-color: #f0f0f0;
  --rz-grid-hover-color: var(--rz-black);
  --rz-grid-selected-color: var(--rz-white);
  --rz-grid-selected-background-color: #5c5c5c;
  --rz-pager-numeric-button-selected-background-color: #edebe9;
  --rz-pager-numeric-button-background-color: transparent;
  --rz-pager-next-button-background-color: transparent;
  --rz-pager-summary-color: #3b3a39;
  --rz-body-background-color: #faf9f8;
  --rz-layout-background-color: #faf9f8;
  --rz-radio-checked-background-color: var(--trane-primary);
  --rz-radio-circle-background-color: var(--rz-white);
  --rz-radio-icon-height: 0.5rem;
  --rz-radio-icon-width: 0.5rem;
  --rz-input-focus-border: var(--rz-border-width) solid var(--trane-primary);
  --rz-form-field-focus-shadow: none;
  --rz-radio-checked-border: var(--trane-primary) var(--rz-border-width) solid;
  --rz-dialog-close-color: #605e5c;
  --rz-dropdown-item-hover-background-color: rgb(243, 242, 241);
  --rz-dropdown-item-selected-background-color: rgb(243, 242, 241);
  --rz-dropdown-item-selected-hover-background-color: rgb(237, 235, 233);
  --rz-panel-menu-item-color: #323130;
  --rz-panel-menu-item-hover-background-color: #f3f2f1;
  --rz-panel-menu-item-border: var(--rz-border-width) solid #edebe9;
  --rz-danger: var(--trane-primary);
  /* tabs */
  --rz-tabs-tab-hover-background-color: rgba(28, 28, 28, 0.05);
  /* TT Switch Colors */
  --rz-switch-circle-background-color: #323130;
  --tt-switch-border-empty: #323130;
  /* tt table colors */
  --rz-grid-header-background-color: var(--rz-white);
  --rz-grid-column-resizer-helper-background-color: var(--rz-secondary);
  --rz-grid-frozen-cell-background-color: var(--rz-white);
  --tt-trash-buttonicon-background-color: #f3e3e4;
  --tt-trash-buttonicon-background-hover-color: #e0b6b8;
  --tt-trash-buttonicon-color: #7c2024;
}

[data-bs-theme="dark"] {
  --rz-layout-background-color: #1f1f1f;
  --rz-primary: #adadad;
  --rz-primary-light: #adadad !important;
  --rz-radio-circle-background-color: var(--trane-primary);
  --rz-radio-circle-hover-background-color: var(--trane-primary-light);
  --rz-radio-checked-border: var(--trane-primary) var(--rz-border-width) solid;
  --rz-secondary: #2e2e2e;
  --rz-grid-selected-color: var(--rz-white);
  --rz-grid-selected-background-color: #5c5c5c;
  --rz-grid-hover-background-color: #333333;
  --rz-grid-hover-color: var(--rz-white);
  --rz-pager-numeric-button-selected-background-color: #5c5c5c;
  --rz-pager-numeric-button-selected-color: var(--rz-white);
  --rz-body-background-color: #1f1f1f;
  --rz-layout-background-color: #1f1f1f;
  --rz-dropdown-item-hover-background-color: rgb(61, 61, 61);
  --rz-dropdown-item-hover-color: var(--rz-white);
  --rz-dropdown-item-selected-background-color: rgb(61, 61, 61);
  --rz-dropdown-item-selected-hover-background-color: rgb(56, 56, 56);
  --rz-dropdown-item-selected-hover-color: var(--rz-white);
  --rz-dropdown-item-selected-color: var(--rz-white);
  --rz-danger: var(--trane-primary);
  /* tabs */
  --rz-tabs-tab-hover-background-color: #363636;
  --rz-base-background-color: #292929;
  /* TT Switch Colors */
  --rz-switch-circle-background-color: #adadad;
  --tt-switch-border-empty: #adadad;
  /* tt table colors */
  --rz-grid-header-background-color: #292929;
  --rz-grid-frozen-cell-background-color: #292929;
  --tt-trash-buttonicon-background-color: var(
    --tt-link-active-background-color
  );
  --tt-trash-buttonicon-background-hover-color: var(
    --tt-link-active-background-color-hover
  );
}

.rz-button i[class*="rz-button-icon"] {
  color: inherit !important;
}

.rz-icons-loading .rzi {
  color: inherit !important;
}

[data-bs-theme="light"] span.notranslate.rzi.rzi-times {
  color: var(--rz-dialog-close-color) !important;
}

[data-bs-theme="dark"] span.notranslate.rzi.rzi-times {
  color: var(--rz-white) !important;
}

i.notranslate.rz-button-icon-left.rzi {
  font-weight: 500;
}

/* switch / toggle styles */
.rz-switch {
  width: 2.5rem;
  min-width: 2.5rem;
  height: 1.25rem;
}

.rz-switch .rz-switch-circle:before {
  width: 0.75rem;
  height: 0.75rem;
  inset-inline-start: 0.25rem;
  margin-block-start: -0.375rem;
}

.rz-switch.rz-state-empty {
  border: 1px solid var(--tt-switch-border-empty);
}

/* icons */
.rz-button.rz-danger.rz-shade-lighter {
  background-color: var(--tt-trash-buttonicon-background-color);
  color: var(--tt-trash-buttonicon-color);
}

.rz-button.rz-danger.rz-shade-lighter:hover {
  background-color: var(--tt-trash-buttonicon-background-hover-color);
}

/* When TraceQuantity has no up/down buttons, remove reserved spacing */
.quantity-no-spinner .rz-form-field-content > .rz-numeric {
  --rz-numeric-input-padding-inline: 0.5rem 0.5rem;
}
.quantity-no-spinner .rz-numeric .rz-numeric-button {
  display: none;
}

.quantity-dropdown {
  border: transparent !important;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.5rem 0.5rem !important;
}

/* buttons */

@media (hover: hover) and (pointer: fine) {
  [data-bs-theme="dark"]
    rzi.rz-button.rz-variant-text.rz-base:not(.rz-state-disabled):hover {
    background-color: #141414;
    color: inherit;
  }
}

@media (hover: hover) and (pointer: fine) {
  [data-bs-theme="light"]
    .rz-button.rz-variant-text.rz-base:not(.rz-state-disabled):hover {
    background-color: var(--rz-white);
    color: inherit;
  }
}

.dashboard-item {
  border: 1px solid #ddd;
  border-radius: var(--bs-border-radius);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  align-items: center;
  height: fit-content;
  margin: 1rem 0;
  padding: 1rem 0;
}

.separating-line {
  max-width: 70%;
  margin: 0 auto;
  padding: 0 1rem;
}

.separating-line hr {
  border: 1px solid gray;
}

.selectable-row {
  cursor: pointer;
  transition: background 0.2s;
}

.selectable-row:hover {
  background: var(--trane-primary);
}

/* Hide popovers and tooltips on mobile (app.css loads after Bootstrap) */
@media (max-width: 767.98px) {
  .popover,
  .tooltip {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* Prevent TraceYearlyGraph Y-axis title from being clipped by card padding */
  .trace-yearly-graph-wrapper {
    padding-left: 6px;
  }
}

/* ── Weather module shared rules ────────────────────────────────────────── */

/* Segmented toolbar control shared by LocationsTab (data-type toggle) and the PeriodSelector
   (period set + Chart/Table view toggle). The default active pill uses the accent literal
   #ff2b00 (design-system KEEP-list; same hex in light + dark). PeriodSelector.razor.css opts
   into a white-pill variant via .seg-control-track--light. */
.seg-control-track {
  display: inline-flex;
  background: var(--rz-grid-foot-background-color, #f3f2f1);
  border-radius: 6px;
  padding: 3px;
  gap: 2px;
}

.seg-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: none;
  background: transparent;
  color: var(--rz-text-color, #201f1e);
  font-size: 13px;
  font-weight: 500;
  border-radius: 4px;
  cursor: pointer;
}

.seg-item.is-active {
  background: #ff2b00;
  color: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

/* Uppercase mini-caps label preceding each toolbar group ("Period", "View", "Variables").
   Shared by PeriodSelector and VariableChipRow. */
.weather-toolbar-eyebrow {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--rz-text-tertiary-color, #8a8886);
  font-weight: 700;
}

/* Climate-zone chip — ASHRAE zone categorical color buckets.
   Empty state uses Radzen tokens (theme-adaptive); zone-bucket variants are
   semantic categorical literals (same in light + dark per design-system KEEP-list). */
.weather-cz-chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: var(--rz-grid-foot-background-color, #f3f2f1);
  color: var(--rz-text-color, #201f1e);
}
.weather-cz-chip--hot {
  background: #fde0d6;
  color: #8b1c00;
}
.weather-cz-chip--warm {
  background: #fff1d6;
  color: #7a4a00;
}
.weather-cz-chip--cool {
  background: #dcefff;
  color: #003a72;
}
.weather-cz-chip--cold {
  background: #e6e9f4;
  color: #2b3470;
}

/* Secondary-color meta text at 12px — weatherStation meta lines, info-card sublines. */
.weather-meta-text {
  font-size: 12px;
  color: var(--rz-text-secondary-color, #605e5c);
}

/* Marker / legend indicator dot. Color variants encode marker semantics
   (WeatherStation blue, Inspecting/Project Trane red) per design-system KEEP-list. */
.weather-legend-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--rz-text-tertiary-color, #8a8886);
}
.weather-legend-dot--sm {
  width: 8px;
  height: 8px;
}
.weather-legend-dot--weatherStation {
  background: #1f6feb;
}
.weather-legend-dot--selected {
  background: #ff2b00;
  box-shadow: 0 0 0 2px rgba(255, 43, 0, 0.25);
}
.weather-legend-dot--project {
  background: #ff2b00;
  box-shadow: 0 0 0 2px rgba(255, 43, 0, 0.45);
}

/* Min-width-0 host enabling Bootstrap text-truncate inside a flex child. */
.text-truncate-host {
  min-width: 0;
}

/* Fixed-width container for compact TraceDropDownBox placement
   (e.g. AMY year picker, period-selector month picker). */
.trace-dropdown-fixed-width {
  min-width: 7rem;
}

/* Visual disabled state for cap-blocked / mutually-exclusive chips that must
   remain focus-reachable for screen-reader tooltip announce (aria-disabled
   pattern; the click handler early-returns at the cap rather than using the
   native disabled attribute). Opacity multiplier preserves theme-token color
   cascade in both light and dark themes. Mirrors Plants canonical
   .sequence-badge.assigned (Modules/Plants/Pages/Component/SequenceActivationCard.razor.css:142-146). */
.trace-chip-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}