@keyframes loading-indicator {
  0% {
    transform: scaleX(0);
    transform-origin: left;
  }
  50% {
    transform: scaleX(0.2);
    transform-origin: 20%;
  }
  70% {
    transform: scaleX(0.5);
    transform-origin: 50%;
  }
  80% {
    transform: scaleX(0.5);
    transform-origin: 80%;
  }
  90% {
    transform: scaleX(0.2);
    transform-origin: 110%;
  }
  100% {
    transform: scaleX(0);
    transform-origin: 120%;
  }
}

.one {
    opacity: 0;
    -webkit-animation: dot 1.3s infinite;
    -webkit-animation-delay: 0.0s;
    animation: dot 1.3s infinite;
    animation-delay: 0.0s;
}

.two {
    opacity: 0;
    -webkit-animation: dot 1.3s infinite;
    -webkit-animation-delay: 0.2s;
      animation: dot 1.3s infinite;
      animation-delay: 0.2s;
}

.three {
    opacity: 0;
    -webkit-animation: dot 1.3s infinite;
    -webkit-animation-delay: 0.3s;
     animation: dot 1.3s infinite;
     animation-delay: 0.3s;
}

@-webkit-keyframes dot {
      0% { opacity: 0; }
     50% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes dot {
      0% { opacity: 0; }
     50% { opacity: 0; }
    100% { opacity: 1; }
}


.placeholder {
  animation: placeholder-animation ease-in-out 2s infinite;
}


@keyframes placeholder-animation {
  0% {
    background-color: #f2f2f2;
  }
  50% {
    background-color: #dfe3e8;
  }
  100% {
    background-color: #f2f2f2;
  }
}


/* DayPicker styles */

.DayPicker {
  display: inline-block;
  font-size: 1rem;
}

.DayPicker-wrapper {
  position: relative;

  flex-direction: row;
  padding-bottom: 1em;

  -webkit-user-select: none;

     -moz-user-select: none;

      -ms-user-select: none;

          user-select: none;
}

.DayPicker-Months {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.DayPicker-Month {
  display: table;
  margin: 0 1em;
  margin-top: 1em;
  border-spacing: 0;
  border-collapse: collapse;

  -webkit-user-select: none;

     -moz-user-select: none;

      -ms-user-select: none;

          user-select: none;
}

.DayPicker-NavBar {
}

.DayPicker-NavButton {
  position: absolute;
  top: 1em;
  right: 1.5em;
  left: auto;

  display: inline-block;
  margin-top: 2px;
  width: 1.25em;
  height: 1.25em;
  background-position: center;
  background-size: 50%;
  background-repeat: no-repeat;
  color: #8B9898;
  cursor: pointer;
}

.DayPicker-NavButton:hover {
  opacity: 0.8;
}

.DayPicker-NavButton--prev {
  margin-right: 1.5em;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAwCAYAAAB5R9gVAAAABGdBTUEAALGPC/xhBQAAAVVJREFUWAnN2G0KgjAYwPHpGfRkaZeqvgQaK+hY3SUHrk1YzNLay/OiEFp92I+/Mp2F2Mh2lLISWnflFjzH263RQjzMZ19wgs73ez0o1WmtW+dgA01VxrE3p6l2GLsnBy1VYQOtVSEH/atCCgqpQgKKqYIOiq2CBkqtggLKqQIKgqgCBjpJ2Y5CdJ+zrT9A7HHSTA1dxUdHgzCqJIEwq0SDsKsEg6iqBIEoq/wEcVRZBXFV+QJxV5mBtlDFB5VjYTaGZ2sf4R9PM7U9ZU+lLuaetPP/5Die3ToO1+u+MKtHs06qODB2zBnI/jBd4MPQm1VkY79Tb18gB+C62FdBFsZR6yeIo1YQiLJWMIiqVjQIu1YSCLNWFgijVjYIuhYYCKoWKAiiFgoopxYaKLUWOii2FgkophYp6F3r42W5A9s9OcgNvva8xQaysKXlFytoqdYmQH6tF3toSUo0INq9AAAAAElFTkSuQmCC');
}

.DayPicker-NavButton--next {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAwCAYAAAB5R9gVAAAABGdBTUEAALGPC/xhBQAAAXRJREFUWAnN119ugjAcwPHWzJ1gnmxzB/BBE0n24m4xfNkTaOL7wOtsl3AXMMb+Vjaa1BG00N8fSEibPpAP3xAKKs2yjzTPH9RAjhEo9WzPr/Vm8zgE0+gXATAxxuxtqeJ9t5tIwv5AtQAApsfT6TPdbp+kUBcgVwvO51KqVhMkXKsVJFXrOkigVhCIs1Y4iKlWZxB1rX4gwlpRIIpa8SDkWmggrFq4IIRaJKCYWnSgnrXIQV1r8YD+1Vrn+bReagysIFfLABRt31v8oBu1xEBttfRbltmfjgEcWh9snUS2kNdBK6WN1vrOWxObWsz+fjxevsxmB1GQDfINWiev83nhaoiB/CoOU438oPrhXS0WpQ9xc1ZQWxWHqUYe0I0qrKCQKjygDlXIQV2r0IF6ViEBxVTBBSFUQQNhVYkHIVeJAtkNsbQ7c1LtzP6FsObhb2rCKv7NBIGoq4SDmKoEgTirXAcJVGkFSVVpgoSrXICGUMUH/QBZNSUy5XWUhwAAAABJRU5ErkJggg==');
}

.DayPicker-NavButton--interactionDisabled {
  display: none;
}

.DayPicker-Caption {
  display: table-caption;
  margin-bottom: 0.5em;
  padding: 0 0.5em;
  text-align: left;
}

.DayPicker-Caption > div {
  font-weight: 500;
  font-size: 1.15em;
}

.DayPicker-Weekdays {
  display: table-header-group;
  margin-top: 1em;
}

.DayPicker-WeekdaysRow {
  display: table-row;
}

.DayPicker-Weekday {
  display: table-cell;
  padding: 0.5em;
  color: #8B9898;
  text-align: center;
  font-size: 0.875em;
}

.DayPicker-Weekday abbr[title] {
  border-bottom: none;
  text-decoration: none;
}

.DayPicker-Body {
  display: table-row-group;
}

.DayPicker-Week {
  display: table-row;
}

.DayPicker-Day {
  display: table-cell;
  padding: 0.5em;
  border-radius: 50%;
  vertical-align: middle;
  text-align: center;
  cursor: pointer;
}

.DayPicker-WeekNumber {
  display: table-cell;
  padding: 0.5em;
  min-width: 1em;
  border-right: 1px solid #EAECEC;
  color: #8B9898;
  vertical-align: middle;
  text-align: right;
  font-size: 0.75em;
  cursor: pointer;
}

.DayPicker--interactionDisabled .DayPicker-Day {
  cursor: default;
}

.DayPicker-Footer {
  padding-top: 0.5em;
}

.DayPicker-TodayButton {
  border: none;
  background-color: transparent;
  background-image: none;
  box-shadow: none;
  color: #4A90E2;
  font-size: 0.875em;
  cursor: pointer;
}

/* Default modifiers */

.DayPicker-Day--today {
  color: #D0021B;
  font-weight: 700;
}

.DayPicker-Day--outside {
  color: #8B9898;
  cursor: default;
}

.DayPicker-Day--disabled {
  color: #DCE0E0;
  cursor: default;
  /* background-color: #eff1f1; */
}

/* Example modifiers */

.DayPicker-Day--sunday {
  background-color: #F7F8F8;
}

.DayPicker-Day--sunday:not(.DayPicker-Day--today) {
  color: #DCE0E0;
}

.DayPicker-Day--selected:not(.DayPicker-Day--disabled):not(.DayPicker-Day--outside) {
  position: relative;

  background-color: #4A90E2;
  color: #F0F8FF;
}

.DayPicker-Day--selected:not(.DayPicker-Day--disabled):not(.DayPicker-Day--outside):hover {
  background-color: #51A0FA;
}

.DayPicker:not(.DayPicker--interactionDisabled)
  .DayPicker-Day:not(.DayPicker-Day--disabled):not(.DayPicker-Day--selected):not(.DayPicker-Day--outside):hover {
  background-color: #F0F8FF;
}

/* DayPickerInput */
.DayPickerInput {
  display: inline-block;
}

.DayPickerInput-OverlayWrapper {
  position: relative;
}

/* Standard overlay */
.DayPickerInput-Overlay {
  position: absolute;
  z-index: 1;
  right: 0;

  background: white;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}

/* Used explicitly to shift overlay right */
.DayPickerInput-OverlayLeft {
  position: absolute;
  z-index: 1;
  left: 0;

  background: white;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}

.DayPickerInput > input {
  outline: none;
  background: none;
  border-color: #b8b8b8;
  border-radius: 4px;
  border-style: solid;
  border-width: 1px;
  padding: 12px;
  line-height: 1.33;
  height: 40px;
  font-family: 'Lato', sans-serif;
  font-size: 16px;
  font-weight: 400;
  width: 100%;
}

.DayPickerInput > input:focus {
  border-color: #0c6ff9;
  box-shadow: 0 0 0 3px #e2f2ff;
}

.DayPickerInput > input:disabled {
  background-color: #f2f2f2;
}

/* CSS Custom Properties for Theme Colors */
:root {
  /* Base Colors */
  --sensor-details-white: #fff;
  --sensor-details-black: #000;

  /* Neutral Colors */
  --sensor-details-neutral-50: #fafafa;
  --sensor-details-neutral-100: #f2f2f2;
  --sensor-details-neutral-200: #dfe3e8;
  --sensor-details-neutral-300: #dfe3e8;
  --sensor-details-neutral-400: #b8b8b8;
  --sensor-details-neutral-500: #767676;
  --sensor-details-neutral-600: var(--sensor-details-neutral-500);
  --sensor-details-neutral-700: var(--sensor-details-neutral-500);
  --sensor-details-neutral-900: #323233;

  /* Primary Colors */
  --sensor-details-primary-50: #dbe6ee;
  --sensor-details-primary-100: #e2f2ff;
  --sensor-details-primary-500: #0c6ff9;
  --sensor-details-primary-700: #0954bd;

  /* Blue Colors (aliases for primary) */
  --sensor-details-blue-50: var(--sensor-details-primary-50);
  --sensor-details-blue-100: var(--sensor-details-primary-100);
  --sensor-details-blue-500: var(--sensor-details-primary-500);
  --sensor-details-blue-700: var(--sensor-details-primary-700);

  /* Red Colors */
  --sensor-details-red-300: #ffeaef;
  --sensor-details-red-500: #e01e5a;
  --sensor-details-red-600: var(--sensor-details-red-500);
  --sensor-details-red-700: #b90c42;

  /* Green Colors */
  --sensor-details-green-50: #d0dfe0;
  --sensor-details-green-300: #e6f6e7;
  --sensor-details-green-500: #00875a;
  --sensor-details-green-700: #036645;

  /* Orange Colors */
  --sensor-details-orange-500: #ec7d10;
  --sensor-details-orange-600: var(--sensor-details-orange-500);

  /* Purple Colors */
  --sensor-details-purple-300: #d5d7e8;
  --sensor-details-purple-500: #8777d9;

  /* Special Colors */
  --sensor-details-card-border-positive: #eb8e90;
  --sensor-details-card-bg-positive: #fff7f7;
  --sensor-details-trend-positive: #717680;
  --sensor-details-trend-negative: #218358;
}

/* Card Base Styles */
.sensor-details-card {
  background-color: var(--sensor-details-white);
  border: 1px solid var(--sensor-details-neutral-300);
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.sensor-details-card-rounded {
  background-color: var(--sensor-details-white);
  border: 1px solid var(--sensor-details-neutral-300);
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Card Padding Variants */
.sensor-details-card-padding-xs {
  padding: 8px;
}

.sensor-details-card-padding-sm {
  padding: 16px;
}

.sensor-details-card-padding-md {
  padding: 24px;
}

.sensor-details-card-padding-lg {
  padding: 32px;
}

.sensor-details-card-padding-xl {
  padding: 48px;
}

.sensor-details-card-padding-xxl {
  padding: 64px;
}

/* Layout Utilities - Flex */
.sensor-details-flex {
  display: flex;
}

.sensor-details-flex-row {
  display: flex;
  flex-direction: row;
}

.sensor-details-flex-col {
  display: flex;
  flex-direction: column;
}

.sensor-details-flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.sensor-details-flex-between {
  display: flex;
  justify-content: space-between;
}

.sensor-details-flex-align-center {
  display: flex;
  align-items: center;
}

.sensor-details-flex-wrap {
  flex-wrap: wrap;
}

/* Layout Utilities - Gap */
.sensor-details-gap-xs {
  gap: 4px;
}

.sensor-details-gap-sm {
  gap: 8px;
}

.sensor-details-gap-md {
  gap: 16px;
}

.sensor-details-gap-lg {
  gap: 24px;
}

.sensor-details-gap-xl {
  gap: 32px;
}

/* Layout Utilities - Spacing */
.sensor-details-margin-top-xs {
  margin-top: 4px;
}

.sensor-details-margin-top-sm {
  margin-top: 8px;
}

.sensor-details-margin-top-md {
  margin-top: 16px;
}

.sensor-details-margin-top-lg {
  margin-top: 24px;
}

.sensor-details-margin-top-xl {
  margin-top: 32px;
}

.sensor-details-margin-bottom-xs {
  margin-bottom: 4px;
}

.sensor-details-margin-bottom-sm {
  margin-bottom: 8px;
}

.sensor-details-margin-bottom-md {
  margin-bottom: 16px;
}

.sensor-details-margin-bottom-lg {
  margin-bottom: 24px;
}

.sensor-details-margin-bottom-xl {
  margin-bottom: 32px;
}

/* Text Alignment */
.sensor-details-text-left {
  text-align: left;
}

.sensor-details-text-right {
  text-align: right;
}

.sensor-details-text-center {
  text-align: center;
}

/* Width Utilities */
.sensor-details-width-full {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.sensor-details-overflow-hidden {
  overflow: hidden;
}

.sensor-details-overflow-x-hidden {
  overflow-x: hidden;
}

/* Position Utilities */
.sensor-details-relative {
  position: relative;
}

.sensor-details-absolute {
  position: absolute;
}

/* Responsive Utilities - Mobile Padding */
@media (max-width: 767px) {
  .sensor-details-mobile-padding-h {
    padding-left: 16px;
    padding-right: 16px;
  }

  .sensor-details-mobile-padding-v {
    padding-top: 16px;
    padding-bottom: 16px;
  }

  .sensor-details-mobile-margin-top {
    margin-top: 24px;
  }

  .sensor-details-mobile-gap {
    gap: 24px;
  }
}

/* Responsive Typography - Tablet and Mobile */
/* Tablet (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  .sensor-details-beta-main {
    font-size: 13px;
  }

  .sensor-details-control-bar,
  .sensor-details-latest-readings,
  .sensor-details-filter-container,
  .sensor-details-incidents-section {
    font-size: 13px;
  }
}

/* Mobile (max-width: 767px) */
@media (max-width: 767px) {
  .sensor-details-beta-main {
    font-size: 12px;
  }

  .sensor-details-control-bar,
  .sensor-details-latest-readings,
  .sensor-details-filter-container,
  .sensor-details-incidents-section {
    font-size: 12px;
  }

  .sensor-details-graph-container,
  .sensor-details-graph-header,
  .sensor-details-graph-property-chips,
  .sensor-details-summary-card,
  .sensor-details-heatmap-card,
  .sensor-details-table-container {
    font-size: 12px;
  }
}

/* Empty State Card */
.sensor-details-empty-state {
  background-color: var(--sensor-details-white);
  border: 1px solid var(--sensor-details-neutral-300);
  border-radius: 6px;
  padding: 48px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  min-height: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.sensor-details-empty-state-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px;
}

/* Tooltip */
.sensor-details-tooltip {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  background-color: var(--sensor-details-neutral-900);
  color: var(--sensor-details-white);
  padding: 8px 12px;
  border-radius: 4px;
  z-index: 1000;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  line-height: 1.4;
}

@media (max-width: 767px) {
  .sensor-details-tooltip {
    max-width: calc(100vw - 32px);
    width: calc(100vw - 32px);
  }
}

@media (min-width: 768px) {
  .sensor-details-tooltip {
    max-width: 500px;
    width: 450px;
  }
}

/* Summary Card */
.sensor-details-summary-card {
  border-radius: 10px;
  padding: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.sensor-details-summary-card-positive {
  background-color: var(--sensor-details-card-bg-positive);
  border: 1px solid var(--sensor-details-card-border-positive);
}

.sensor-details-summary-card-neutral {
  background-color: var(--sensor-details-white);
  border: 1px solid #e0e1e6;
}

.sensor-details-summary-card-content {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sensor-details-summary-card-trend {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sensor-details-summary-card-value {
  text-align: right;
}

@media (max-width: 767px) {
  .sensor-details-summary-card {
    padding: 16px;
  }
}

/* Heatmap */
.sensor-details-heatmap-card {
  background-color: var(--sensor-details-white);
  border: 1px solid var(--sensor-details-neutral-300);
  border-radius: 10px;
  padding: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
}

.sensor-details-heatmap-container {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.sensor-details-heatmap-row {
  display: flex;
}

.sensor-details-heatmap-time-labels {
  display: flex;
  flex-direction: column;
  padding-right: 16px;
}

.sensor-details-heatmap-time-label {
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 12px;
}

.sensor-details-heatmap-grid {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.sensor-details-heatmap-row-container {
  display: flex;
  flex-direction: column;
}

.sensor-details-heatmap-cell-row {
  display: flex;
  gap: 4px;
  height: 20px;
  margin-bottom: 12px;
}

.sensor-details-heatmap-cell {
  flex: 1;
  border-radius: 7px;
  height: 20px;
  min-height: 20px;
}

.sensor-details-heatmap-days {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
}

.sensor-details-heatmap-day {
  text-align: center;
  flex: 1;
  font-size: 12px;
}

/* Table Styles - Enhanced */
.sensor-details-table-container {
  background-color: var(--sensor-details-white);
  border: 1px solid var(--sensor-details-neutral-300);
  border-radius: 6px;
  padding: 32px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.sensor-details-table-title {
  margin-bottom: 24px;
}

.sensor-details-table {
  overflow: hidden;
}

.sensor-details-table-header {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  background-color: var(--sensor-details-white);
  padding: 12px;
  border-bottom: 1px solid var(--sensor-details-neutral-200);
}

.sensor-details-table-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  padding: 12px;
}

.sensor-details-table-row-even {
  background-color: var(--sensor-details-white);
}

.sensor-details-table-row-odd {
  background-color: var(--sensor-details-white);
}

.sensor-details-table-empty {
  padding: 64px;
  text-align: center;
}

.sensor-details-table-cell-center {
  display: flex;
  align-items: center;
}

/* Graph Container */
.sensor-details-graph-container {
  padding: 24px;
  background-color: var(--sensor-details-white);
  border-radius: 6px;
  border: 1px solid var(--sensor-details-neutral-300);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.sensor-details-graph-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.sensor-details-graph-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sensor-details-graph-dropdown {
  position: relative;
}

.sensor-details-graph-dropdown-list {
  z-index: 1000;
}

.sensor-details-graph-property-chips {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.sensor-details-graph-property-chip {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border-radius: 3px;
}

.sensor-details-graph-loading {
  margin-top: 24px;
  padding: 32px;
  background-color: var(--sensor-details-white);
  border-radius: 6px;
  border: 1px solid var(--sensor-details-neutral-300);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;
}

.sensor-details-graph-error {
  margin-top: 24px;
  padding: 32px;
  background-color: var(--sensor-details-white);
  border-radius: 6px;
  border: 1px solid var(--sensor-details-neutral-300);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  text-align: center;
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sensor-details-graph-chart-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.sensor-details-graph-clear-all {
  cursor: pointer;
  padding: 4px 8px;
}

/* Filter Controls */
.sensor-details-filter-container {
  grid-column: 1 / span 1;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  background-color: var(--sensor-details-white);
}

.sensor-details-filter-inner {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background-color: var(--sensor-details-white);
  padding: 16px;
  border-radius: 6px;
  border: 1px solid var(--sensor-details-neutral-300);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .sensor-details-filter-inner {
    padding: 24px;
  }
}

.sensor-details-filter-controls {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

@media (min-width: 768px) {
  .sensor-details-filter-controls {
    flex-direction: row;
    align-items: center;
  }
}

.sensor-details-date-dropdown-wrapper {
  position: relative;
  width: 100%;
}

@media (min-width: 768px) {
  .sensor-details-date-dropdown-wrapper {
    width: 380px;
  }
}

.sensor-details-date-dropdown {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--sensor-details-neutral-300);
  border-radius: 6px;
  background-color: var(--sensor-details-white);
  cursor: pointer;
  width: 100%;
}

@media (min-width: 768px) {
  .sensor-details-date-dropdown {
    width: 380px;
  }
}

.sensor-details-date-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  background-color: var(--sensor-details-white);
  border: 1px solid var(--sensor-details-neutral-300);
  border-radius: 6px;
  padding: 8px 0;
  min-width: 200px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 100;
}

.sensor-details-date-dropdown-item {
  padding: 8px 12px;
  cursor: pointer;
  background-color: var(--sensor-details-white);
}

.sensor-details-date-dropdown-item:hover {
  background-color: var(--sensor-details-neutral-50);
}

.sensor-details-date-dropdown-item-active {
  background-color: var(--sensor-details-neutral-100);
}

.sensor-details-custom-date-picker {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  background-color: var(--sensor-details-white);
  border: 1px solid var(--sensor-details-neutral-300);
  border-radius: 6px;
  padding: 16px;
  min-width: 300px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 100;
}

.sensor-details-custom-date-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sensor-details-custom-date-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
  font-size: 13px;
}

.sensor-details-custom-date-label {
  min-width: 0;
  flex-shrink: 0;
}

.sensor-details-custom-date-inputs {
  display: flex;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.sensor-details-custom-date-warning {
  margin-top: 8px;
  margin-bottom: 4px;
}

.sensor-details-custom-date-input {
  flex: 1;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--sensor-details-neutral-300);
  border-radius: 4px;
  font-size: 14px;
}

.sensor-details-custom-date-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
}

.sensor-details-custom-date-button {
  padding: 6px 12px;
  border: 1px solid var(--sensor-details-neutral-300);
  border-radius: 4px;
  cursor: pointer;
  background-color: var(--sensor-details-white);
}

.sensor-details-custom-date-button-apply {
  background-color: var(--sensor-details-blue-500);
  border-color: var(--sensor-details-blue-500);
  cursor: pointer;
  opacity: 1;
}

.sensor-details-custom-date-button-apply:disabled {
  background-color: var(--sensor-details-neutral-300);
  border-color: var(--sensor-details-neutral-300);
  cursor: not-allowed;
  opacity: 0.6;
}

.sensor-details-split-view-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sensor-details-split-view-dropdown-wrapper {
  position: relative;
  width: 100%;
}

@media (min-width: 768px) {
  .sensor-details-split-view-dropdown-wrapper {
    width: 320px;
  }
}

.sensor-details-split-view-dropdown {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--sensor-details-neutral-300);
  border-radius: 6px;
  background-color: var(--sensor-details-white);
  cursor: pointer;
  width: 100%;
}

.sensor-details-split-view-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  background-color: var(--sensor-details-white);
  border: 1px solid var(--sensor-details-neutral-300);
  border-radius: 6px;
  padding: 8px 0;
  width: 100%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 100;
}

.sensor-details-split-view-dropdown-item {
  padding: 12px 16px;
  cursor: pointer;
  background-color: transparent;
}

.sensor-details-split-view-dropdown-item:hover {
  background-color: var(--sensor-details-neutral-50);
}

.sensor-details-split-view-dropdown-item-active {
  background-color: var(--sensor-details-neutral-100);
}

.sensor-details-view-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  background-color: var(--sensor-details-white);
  border: 1px solid var(--sensor-details-neutral-300);
  border-radius: 6px;
  padding: 12px;
  width: 100%;
  max-height: 320px;
  overflow-y: auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 100;
}

.sensor-details-view-dropdown-select-all {
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--sensor-details-neutral-200);
}

.sensor-details-view-dropdown-checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 4px 0;
}

.sensor-details-view-dropdown-checkbox {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.sensor-details-view-dropdown-property-item {
  margin-bottom: 4px;
}

.sensor-details-click-away-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99;
}

/* Incidents Section */
.sensor-details-incidents-section {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 24px;
}

@media (min-width: 768px) {
  .sensor-details-incidents-section {
    gap: 32px;
    margin-top: 32px;
  }
}

.sensor-details-incidents-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sensor-details-incidents-tooltip-icon {
  position: relative;
  cursor: help;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sensor-details-incidents-tooltip {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  background-color: var(--sensor-details-neutral-900);
  color: var(--sensor-details-white);
  padding: 16px 24px;
  border-radius: 4px;
  z-index: 1000;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  max-width: 500px;
  width: 450px;
  line-height: 1.4;
  transform: translateX(0);
}

@media (max-width: 767px) {
  .sensor-details-incidents-tooltip {
    max-width: calc(100vw - 32px);
    width: calc(100vw - 32px);
  }
}

.sensor-details-incidents-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  background-color: var(--sensor-details-white);
  border: 1px solid var(--sensor-details-neutral-300);
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.sensor-details-incidents-grid {
  display: grid;
  gap: 16px;
}

@media (min-width: 1201px) {
  .sensor-details-incidents-grid {
    grid-template-columns: 1fr 0 1.25fr;
    gap: 16px;
  }
}

@media (max-width: 1200px) {
  .sensor-details-incidents-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
  }
}

/* Control Bar Beta */
.sensor-details-control-bar {
  grid-column: 1 / span 1;
  grid-row: 1 / span 1;
  display: grid;
  align-items: center;
  border-bottom: 2px solid var(--sensor-details-primary-500);
  background-color: var(--sensor-details-white);
  min-width: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  position: sticky;
  top: 0;
  z-index: 10;
}

/* Latest Readings */
.sensor-details-latest-readings {
  grid-column: 1 / span 1;
  background-color: var(--sensor-details-white);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.sensor-details-latest-readings-grid {
  display: grid;
  margin-top: 24px;
}

.sensor-details-latest-readings-title {
  margin-bottom: 0;
}

/* Main Container */
.sensor-details-beta-main {
  position: fixed;
  min-height: 100vh;
  top: 0;
  bottom: 0;
  z-index: 2;
  width: 100%;
  max-width: 100%;
  background-color: var(--sensor-details-white);
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows:
    min-content
    min-content
    min-content
    1fr;
  overflow-y: auto;
  box-sizing: border-box;
}

.sensor-details-beta-loading {
  position: fixed;
  min-height: 100vh;
  top: 0;
  bottom: 0;
  z-index: 2;
  width: 100%;
  background-color: var(--sensor-details-white);
  display: grid;
  align-items: center;
  justify-content: center;
}

/* Reading Block */
.sensor-details-reading-block {
  position: relative;
  border-radius: 8px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  cursor: default;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  min-height: 65px;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .sensor-details-reading-block {
    min-height: 56px;
  }
}

@media (max-width: 767px) {
  .sensor-details-reading-block {
    min-height: 52px;
  }
}

.sensor-details-reading-block-label {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}

.sensor-details-reading-block-label-text {
  color: #60646c;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.sensor-details-reading-block-value {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  min-width: 0;
}

/* Highcharts Overrides */
.highcharts-reset-zoom {
  display: none !important;
  visibility: hidden !important;
}

.highcharts-button {
  display: none !important;
  visibility: hidden !important;
}

/* Control Bar Beta - Responsive Grid Layouts */
.sensor-details-control-bar {
  min-height: 60px;
  height: 60px;
  row-gap: 0;
  padding: 0;
}

.sensor-details-control-bar-compact {
  min-height: auto;
  height: auto;
  grid-template-rows:
    [row1] min-content
    [row2] min-content;
  row-gap: 12px;
  padding: 12px 0;
}

@media (max-width: 767px) {
  .sensor-details-control-bar-compact {
    grid-template-columns:
      16px
      [back-button] max-content
      8px
      [divider] max-content
      16px
      [header-text] minmax(0, 1fr)
      16px
      [view-toggle] max-content
      16px;
  }
}

@media (min-width: 768px) {
  .sensor-details-control-bar-compact {
    grid-template-columns:
      16px
      [back-button] max-content
      8px
      [divider] max-content
      16px
      [header-text] minmax(0, 1fr)
      16px
      [view-toggle] max-content
      16px;
  }
}

@media (min-width: 768px) {
  .sensor-details-control-bar {
    grid-template-columns:
      32px
      [back-button] max-content
      8px
      [divider] max-content
      16px
      [header-text] max-content
      16px
      [view-toggle] max-content
      1fr
      [metadata] max-content
      16px
      [dropdown-menu] max-content
      16px;
    grid-template-rows: [row1] 1fr;
  }
}

.sensor-details-control-bar-back-button {
  grid-column: back-button / span 1;
  grid-row: row1 / span 1;
}

.sensor-details-control-bar-divider {
  grid-column: divider / span 1;
  grid-row: row1 / span 1;
}

.sensor-details-control-bar-header-text {
  grid-column: header-text / span 1;
  grid-row: row1 / span 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  max-width: 100%;
}

.sensor-details-control-bar-view-toggle {
  grid-column: view-toggle / span 1;
  grid-row: row1 / span 1;
}

/* Metadata Display - Responsive Layouts */
.sensor-details-metadata-display {
  grid-column: metadata / span 1;
  grid-row: row1 / span 1;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: flex-start;
  width: auto;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .sensor-details-metadata-display {
    flex-wrap: nowrap;
    width: max-content;
    min-width: 0;
  }
}

.sensor-details-metadata-display-compact {
  grid-column: 1 / -1;
  grid-row: row2 / span 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  justify-self: stretch;
  padding-left: 16px;
  padding-right: 16px;
  width: 100%;
  flex-wrap: nowrap;
  gap: 12px;
}

@media (min-width: 768px) {
  .sensor-details-metadata-display-compact {
    padding-left: 16px;
    padding-right: 16px;
    flex-wrap: nowrap;
  }
}

@media (max-width: 400px) {
  .sensor-details-metadata-display-compact {
    flex-wrap: wrap;
  }
}

.sensor-details-metadata-display-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.sensor-details-metadata-display-group-main {
  flex: 0 1 auto;
  min-width: 0;
}

.sensor-details-metadata-display-compact
  .sensor-details-metadata-display-group:first-child {
  flex: 1 1 0;
  min-width: 0;
  max-width: calc(100% - 180px);
  flex-wrap: nowrap;
  overflow: hidden;
}

.sensor-details-metadata-display-group-secondary {
  flex: 0 0 auto;
  flex-shrink: 0;
  margin-left: 0;
  min-width: 0;
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .sensor-details-metadata-display-group-secondary {
    margin-left: auto;
  }
}

.sensor-details-metadata-display-compact
  .sensor-details-metadata-display-group-secondary {
  flex: 0 0 auto;
  flex-shrink: 0;
  margin-left: auto;
  white-space: nowrap;
  flex-wrap: nowrap;
}

@media (max-width: 400px) {
  .sensor-details-metadata-display-group-secondary {
    flex-basis: 100%;
    margin-left: 0;
    margin-top: 12px;
    width: 100%;
    justify-content: flex-end;
  }

  .sensor-details-metadata-display-compact
    .sensor-details-metadata-display-group-secondary {
    flex-basis: 100%;
    margin-left: 0;
    margin-top: 12px;
    width: 100%;
    justify-content: flex-end;
  }

  .sensor-details-metadata-display-compact
    .sensor-details-metadata-display-group:first-child {
    max-width: 100%;
  }
}

.sensor-details-metadata-display-icon-group {
  display: grid;
  grid-template-columns: max-content max-content;
  grid-column-gap: 4px;
  align-items: center;
}

.sensor-details-metadata-display-icon {
  fill: var(--sensor-details-neutral-500);
  width: 18px;
  height: 18px;
}

.sensor-details-metadata-display-timestamp {
  display: inline;
  color: var(--sensor-details-neutral-900);
}

.sensor-details-metadata-display-dropdown-wrapper {
  position: relative;
}

/* Latest Readings - Responsive Grid */
@media (max-width: 767px) {
  .sensor-details-latest-readings {
    padding: 24px 16px;
  }
}

@media (min-width: 768px) {
  .sensor-details-latest-readings {
    padding: 24px 32px;
  }
}

@media (max-width: 480px) {
  .sensor-details-latest-readings-grid {
    grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
    grid-gap: 12px;
  }
}

@media (min-width: 481px) and (max-width: 767px) {
  .sensor-details-latest-readings-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    grid-gap: 12px;
  }
}

@media (min-width: 768px) {
  .sensor-details-latest-readings-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    grid-gap: 16px;
  }

  .sensor-details-reading-block {
    max-width: 300px;
  }
}

@media (min-width: 1024px) {
  .sensor-details-latest-readings-grid {
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 16px;
  }

  .sensor-details-reading-block {
    max-width: 100%;
  }
}

/* Reading Block - Responsive Padding and Gap */
@media (max-width: 767px) {
  .sensor-details-reading-block {
    padding: 12px 16px;
    gap: 8px;
  }

  .sensor-details-reading-block-icon {
    width: 16px;
    height: 16px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .sensor-details-reading-block {
    padding: 12px 20px;
    gap: 16px;
  }

  .sensor-details-reading-block-icon {
    width: 18px;
    height: 18px;
  }
}

@media (min-width: 1024px) {
  .sensor-details-reading-block {
    padding: 16px 20px;
    gap: 16px;
  }

  .sensor-details-reading-block-icon {
    width: 20px;
    height: 20px;
  }
}

.sensor-details-reading-block-icon {
  fill: #8B8D98;
}

.sensor-details-reading-block-value-container {
  display: flex;
  align-items: baseline;
  gap: 4px;
  min-width: 0;
  overflow: hidden;
}

.sensor-details-reading-block-value-text {
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.sensor-details-reading-block-value-unit {
  flex-shrink: 0;
}

.sensor-details-reading-block-info {
  position: relative;
  cursor: help;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sensor-details-reading-block-tooltip {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  background-color: var(--sensor-details-neutral-900);
  color: var(--sensor-details-white);
  padding: 8px 12px;
  border-radius: 4px;
  white-space: nowrap;
  z-index: 1000;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.sensor-details-reading-block-tooltip-text {
  color: var(--sensor-details-white);
}

.sensor-details-reading-block-tooltip-arrow {
  position: absolute;
  top: -4px;
  right: 8px;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 4px solid var(--sensor-details-neutral-900);
}

/* Metadata Row - Responsive Layout */
.sensor-details-metadata-row {
  grid-column: 1 / span 1;
  grid-row: 2 / span 1;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 16px 24px;
  padding: 24px 32px;
  background-color: var(--sensor-details-white);
  border-bottom: 1px solid var(--sensor-details-neutral-300);
  align-items: center;
  justify-content: flex-start;
}

@media (max-width: 767px) {
  .sensor-details-metadata-row {
    padding: 16px 16px;
    justify-content: flex-start;
  }

  .sensor-details-metadata-row-group-right {
    margin-left: 0;
  }
}

@media (min-width: 768px) {
  .sensor-details-metadata-row {
    justify-content: space-between;
  }

  .sensor-details-metadata-row-group-right {
    margin-left: auto;
  }
}

.sensor-details-metadata-row-group {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  align-items: center;
}

.sensor-details-metadata-row-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.sensor-details-metadata-row-item-with-gap {
  gap: 8px;
}

.sensor-details-metadata-row-type-badge {
  padding: 4px 12px;
  border: 1px solid var(--sensor-details-neutral-300);
  border-radius: 4px;
}

.sensor-details-metadata-row-icon {
  fill: var(--sensor-details-neutral-500);
}

/* Filter Container - Responsive Padding */
@media (max-width: 767px) {
  .sensor-details-filter-container {
    padding: 16px 16px;
    margin-top: 24px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .sensor-details-filter-container {
    padding: 24px 24px;
    margin-top: 0;
  }
}

@media (min-width: 1024px) {
  .sensor-details-filter-container {
    padding: 24px 32px;
    margin-top: 0;
  }
}

.sensor-details-filter-empty-state-wrapper {
  margin-top: 24px;
}

/* Graph Components */
.sensor-details-graph-hint-text {
  margin-left: 16px;
}

.sensor-details-graph-property-chip-close {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 4px;
}

.sensor-details-graph-property-chip-text {
  color: var(--sensor-details-neutral-900);
}

.sensor-details-graph-clear-all {
  font-weight: 500;
}

/* Date Range Filter */
.sensor-details-date-dropdown-icon {
  fill: var(--sensor-details-neutral-500);
}

.sensor-details-date-dropdown-text {
  flex: 1;
}

.sensor-details-custom-date-header {
  margin-bottom: 16px;
}

.sensor-details-custom-date-warning {
  font-style: italic;
  font-size: 12px;
}

.sensor-details-custom-date-button-apply.disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

/* View Dropdown */
.sensor-details-view-dropdown-label {
  margin-right: 4px;
}

.sensor-details-view-dropdown-selected {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Split View Dropdown */
.sensor-details-split-view-dropdown-label {
  margin-right: 4px;
}

.sensor-details-split-view-dropdown-selected {
  flex: 1;
}

.sensor-details-split-view-dropdown-item-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sensor-details-split-view-dropdown-item-label {
  font-weight: 600;
  color: var(--sensor-details-neutral-900);
}

/* Incidents Section */
.sensor-details-incidents-icon {
  fill: var(--sensor-details-neutral-500);
  width: 18px;
  height: 18px;
}

.sensor-details-incidents-tooltip-text {
  color: var(--sensor-details-white);
}

/* Summary Cards Grid */
.sensor-details-summary-cards-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  grid-template-rows: auto auto;
  gap: 32px;
  height: auto;
}

@media (max-width: 767px) {
  .sensor-details-summary-cards-grid {
    gap: 24px;
  }
}

.sensor-details-summary-cards-grid-compact {
  grid-column: 1 / -1;
}

/* Summary Card Conditional Styles */
.sensor-details-summary-card-content-with-title-lines {
  flex: 1;
  min-width: 0;
}

.sensor-details-summary-card-title-with-lines {
  line-height: 1.2;
  word-break: break-word;
  overflow-wrap: break-word;
}

.sensor-details-summary-card-icon {
  width: 30px;
  height: 30px;
}

.sensor-details-summary-card-value-with-title-lines {
  flex-shrink: 0;
  margin-left: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Heatmap Card */
.sensor-details-heatmap-card-compact {
  grid-column: 1 / -1;
  grid-row: 2;
}

@media (min-width: 1201px) {
  .sensor-details-heatmap-card {
    grid-column: 3;
    grid-row: 1 / 3;
  }
}

.sensor-details-heatmap-title {
  margin-bottom: 24px;
}

@media (max-width: 767px) {
  .sensor-details-heatmap-time-labels {
    width: 80px;
  }
}

@media (min-width: 768px) {
  .sensor-details-heatmap-time-labels {
    width: 130px;
  }
}

.sensor-details-heatmap-time-label-text {
  text-align: right;
  font-size: 12px;
}

/* Table Row - Remove Border from Last Child */
.sensor-details-table-row:last-child {
  border-bottom: none;
}

/* Empty State */
.sensor-details-empty-state-icon {
  fill: var(--sensor-details-neutral-400);
  margin-bottom: 4px;
}

.sensor-details-empty-state-message {
  text-align: center;
  max-width: 300px;
}

.asyncMultiSelect-module__root--2HZE4 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.asyncMultiSelect-module__searchBox--RTzIh {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius-md);
  font-size: 13px;
  line-height: 20px;
  outline: none;
  box-sizing: border-box;
}

.asyncMultiSelect-module__searchBox--RTzIh:focus {
  border-color: var(--color-accent-500);
}

.asyncMultiSelect-module__chips--1zlZw {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.asyncMultiSelect-module__chip--1bPwp {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-size: 12px;
  line-height: 18px;
  background: var(--color-accent-50);
  border: 1px solid var(--color-accent-200);
  border-radius: 999px;
  color: var(--color-accent-700);
  cursor: default;
}

.asyncMultiSelect-module__chipRemove--lBLfP {
  all: unset;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  color: var(--color-accent-500);
}

.asyncMultiSelect-module__chipRemove--lBLfP:hover {
  color: var(--color-error-500);
}

.asyncMultiSelect-module__list--1dcBG {
  max-height: 200px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.asyncMultiSelect-module__item--2PdHF {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 2px;
  font-size: 13px;
  line-height: 20px;
  cursor: pointer;
  user-select: none;
}

.asyncMultiSelect-module__item--2PdHF:hover {
  background: var(--color-neutral-50);
}

.asyncMultiSelect-module__checkbox--1A03d {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.asyncMultiSelect-module__noItems--29UgK {
  padding: 8px 2px;
  font-size: 13px;
  color: var(--color-text-muted);
}

.asyncMultiSelect-module__loading--3uU9z {
  padding: 8px 2px;
  font-size: 13px;
  color: var(--color-text-muted);
}

.badge-module__badge--2JiRz {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-family);
  font-weight: var(--font-weight-semibold);
  border-radius: var(--radius-full);
}

.badge-module__info--3wPKo { background: var(--color-primary-100); color: var(--color-primary-700); }
.badge-module__success--mmbx8 { background: var(--color-green-300); color: var(--color-green-700); }
.badge-module__warning--3iZEe { background: var(--color-orange-500); color: var(--color-white); }
.badge-module__danger--2oT_i { background: var(--color-red-300); color: var(--color-red-700); }
.badge-module__neutral--2poZq { background: var(--color-neutral-300); color: var(--color-neutral-900); }
.badge-module__sm--3D91P { padding: 2px var(--space-1); font-size: var(--font-size-xs); }
.badge-module__md--2y_Zb { padding: var(--space-1) var(--space-2); font-size: var(--font-size-s); }

.button-module__button--By9Dx {
  font-family: var(--font-family);
  font-weight: var(--font-weight-semibold);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.button-module__button--By9Dx:disabled { opacity: 0.5; cursor: not-allowed; }
.button-module__button--By9Dx:not(:disabled):hover { opacity: 0.9; }

.button-module__primary--AYKui { background: var(--color-primary-500); color: var(--color-white); }
.button-module__secondary--3UAQQ { background: var(--color-neutral-300); color: var(--color-neutral-900); }
.button-module__outline--B_vcG { background: transparent; color: var(--color-primary-500); border: 2px solid var(--color-primary-500); }
.button-module__text--hS75j { background: transparent; color: var(--color-primary-500); }
.button-module__danger--frdCa { background: var(--color-red-500); color: var(--color-white); }

.button-module__sm--2XWav { padding: var(--space-1) var(--space-2); font-size: var(--font-size-s); }
.button-module__md--2skn0 { padding: var(--space-1) var(--space-3); font-size: var(--font-size-m); }
.button-module__lg--48ExI { padding: var(--space-2) var(--space-4); font-size: var(--font-size-l); }

.icon-module__icon--2E0AY {
  display: inline-block;
  vertical-align: middle;
}

.icon-module__sm--1Chq4 {
  width: 16px;
  height: 16px;
}

.icon-module__md--2T1ev {
  width: 20px;
  height: 20px;
}

.icon-module__lg--1G6xV {
  width: 24px;
  height: 24px;
}

.icon-module__xl--KIAYx {
  width: 32px;
  height: 32px;
}

.input-module__wrapper--3fXST {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.input-module__label--1SQ4n {
  font-size: var(--font-size-s);
  font-weight: var(--font-weight-semibold);
  color: var(--color-neutral-900);
}

.input-module__input--6egKv {
  font-family: var(--font-family);
  font-size: var(--font-size-m);
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius-md);
  color: var(--color-neutral-900);
  background: var(--color-white);
}

.input-module__input--6egKv:focus {
  outline: none;
  border-color: var(--color-primary-500);
}

.input-module__input--6egKv:disabled {
  background: var(--color-neutral-100);
  cursor: not-allowed;
}

.input-module__input--6egKv.input-module__error--aEFOo {
  border-color: var(--color-red-500);
}

.input-module__errorText--2B-gV {
  font-size: var(--font-size-s);
  color: var(--color-red-500);
}

.modal-module__overlay--1K8AM {
  border: none;
  padding: 0;
  max-width: none;
  max-height: none;
  position: fixed;
  inset: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-module__backdrop--2LOK6 {
  appearance: none;
  position: fixed;
  inset: 0;
  border: none;
  padding: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  cursor: default;
}

.modal-module__card--1Sf4Q {
  position: relative;
  z-index: 1;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  max-width: 90vw;
  max-height: 90vh;
  overflow: auto;
}

.modal-module__header--Z_mEb {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3);
  border-bottom: 1px solid var(--color-neutral-300);
}
.modal-module__title--8izIZ { font-size: var(--font-size-l); font-weight: var(--font-weight-bold); color: var(--color-neutral-900); }

.modal-module__closeBtn--Ogk4d {
  background: none;
  border: none;
  font-size: var(--font-size-xl);
  cursor: pointer;
  color: var(--color-neutral-500);
  padding: 0;
  line-height: 1;
}
.modal-module__closeBtn--Ogk4d:hover { color: var(--color-neutral-900); }

.modal-module__body--3AUjS {
  padding: var(--space-3);
}

.select-module__wrapper--1Yepi {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.select-module__label--3rSVb {
  font-size: var(--font-size-s);
  font-weight: var(--font-weight-semibold);
  color: var(--color-neutral-900);
}

.select-module__select--1e2Nl {
  font-family: var(--font-family);
  font-size: var(--font-size-m);
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius-md);
  color: var(--color-neutral-900);
  background: var(--color-white);
}

.select-module__select--1e2Nl:focus {
  outline: none;
  border-color: var(--color-primary-500);
}

.select-module__select--1e2Nl:disabled {
  background: var(--color-neutral-100);
  cursor: not-allowed;
}

.select-module__select--1e2Nl.select-module__error--2EmdZ {
  border-color: var(--color-red-500);
}

.select-module__errorText--1And5 {
  font-size: var(--font-size-s);
  color: var(--color-red-500);
}

.spinner-module__spinner--181DO {
  border: 2px solid var(--color-neutral-200);
  border-top-color: var(--color-primary-500);
  border-radius: 50%;
  animation: spinner-module__spin--ZMGrC 0.8s linear infinite;
}

.spinner-module__sm--3VQFy {
  width: 16px;
  height: 16px;
}

.spinner-module__md--JDH2o {
  width: 24px;
  height: 24px;
}

.spinner-module__lg--1_TTk {
  width: 32px;
  height: 32px;
}

@keyframes spinner-module__spin--ZMGrC {
  to {
    transform: rotate(360deg);
  }
}

.text-module__text--9lyb5 {
  font-family: var(--font-family);
  color: var(--color-neutral-900);
}

.text-module__xs--RpcyQ { font-size: var(--font-size-xs); }
.text-module__s--37OWx { font-size: var(--font-size-s); }
.text-module__m--2TXwo { font-size: var(--font-size-m); }
.text-module__l--3mzeO { font-size: var(--font-size-l); }
.text-module__xl--1IFFc { font-size: var(--font-size-xl); }
.text-module__xxl--2z2K6 { font-size: var(--font-size-xxl); }

.text-module__regular--2tWQ5 { font-weight: var(--font-weight-regular); }
.text-module__semiBold--1FEvE { font-weight: var(--font-weight-semibold); }
.text-module__bold--FhAee { font-weight: var(--font-weight-bold); }

.summaryCard-module__root--1f1pC {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 22px;
  min-height: 78px;
  font: inherit;
  color: inherit;
  text-align: left;
  background: var(--color-white);
  border: 2px solid var(--color-neutral-200);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: box-shadow 0.15s ease, transform 0.1s ease;
  user-select: none;
}

.summaryCard-module__root--1f1pC:hover { box-shadow: var(--shadow-md); }

.summaryCard-module__active--1dy2v {
  outline: 3px solid currentColor;
  outline-offset: -1px;
  transform: scale(1.02);
}

.summaryCard-module__left--3AoWq {
  display: flex;
  align-items: center;
  gap: 12px;
}

.summaryCard-module__iconWrap--1qJqQ {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.summaryCard-module__iconWrap--1qJqQ svg { width: 28px; height: 28px; }

.summaryCard-module__label--1yN4U {
  font-size: var(--font-size-l);
  color: var(--color-neutral-600);
}

.summaryCard-module__right--mtpDV {
  display: flex;
  align-items: center;
  gap: 12px;
}

.summaryCard-module__value--1MT56 {
  font-size: var(--font-size-xxl);
  font-weight: var(--font-weight-bold);
  color: var(--color-neutral-600);
}

.summaryCard-module__info--3g_4T {
  position: relative;
  display: flex;
  align-items: center;
  cursor: help;
  color: var(--color-neutral-700);
}

.summaryCard-module__info--3g_4T svg { width: 16px; height: 16px; }

.summaryCard-module__info--3g_4T::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  padding: 6px 10px;
  width: max-content;
  max-width: 350px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-white);
  background: var(--color-neutral-900);
  border-radius: var(--radius-md);
  white-space: normal;
  line-height: 1.4;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.1s ease;
  z-index: 10;
}

.summaryCard-module__info--3g_4T:hover::after {
  opacity: 1;
}

/* Variants */
.summaryCard-module__alert--PCsEZ { border-color: var(--color-red-300); background: var(--color-red-50); }
.summaryCard-module__alert--PCsEZ .summaryCard-module__iconWrap--1qJqQ { color: #CE2C31; }
.summaryCard-module__alert--PCsEZ .summaryCard-module__value--1MT56 { color: var(--color-red-500); }

.summaryCard-module__outOfRange--3Edkl { border-color: #f5c8a1; background: #fef6ee; }
.summaryCard-module__outOfRange--3Edkl .summaryCard-module__iconWrap--1qJqQ { color: #ec7d10; }
.summaryCard-module__outOfRange--3Edkl .summaryCard-module__value--1MT56 { color: #ec7d10; }

.summaryCard-module__warning--RvXSi { border-color: var(--color-amber-300); background: var(--color-amber-50); }
.summaryCard-module__warning--RvXSi .summaryCard-module__iconWrap--1qJqQ { color: var(--color-amber-500); }
.summaryCard-module__warning--RvXSi .summaryCard-module__value--1MT56 { color: var(--color-amber-500); }

.summaryCard-module__connected--32WiK { border-color: var(--color-green-300); background: var(--color-green-50); }
.summaryCard-module__connected--32WiK .summaryCard-module__value--1MT56 { color: var(--color-neutral-900); }

.summaryCard-module__disconnected--2_0cg { border-color: var(--color-neutral-300); background: var(--color-neutral-bg); }
.summaryCard-module__disconnected--2_0cg .summaryCard-module__value--1MT56 { color: var(--color-neutral-900); }

.summaryCards-module__root--1Vl9U {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 32px;
}

.summaryCards-module__root--1Vl9U > * {
  flex: 1;
  min-width: 180px;
}

.modalBase-module__backdrop--3AfCV {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
}

.modalBase-module__root--2GCBW {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}

.modalBase-module__header--keE9P {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #DFE3E8;
}

.modalBase-module__title--udUkS {
  font-size: 18px;
  font-weight: 600;
  color: #323233;
}

.modalBase-module__closeBtn--3AIx_ {
  display: flex;
  align-items: center;
  padding: 4px;
  background: none;
  border: none;
  cursor: pointer;
  color: #8B8D98;
  border-radius: 4px;
}

.modalBase-module__closeBtn--3AIx_:hover {
  color: #323233;
  background: #F2F2F2;
}

.modalBase-module__body--2JANj {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.modalBase-module__footer--3dL8U {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 20px;
  border-top: 1px solid #DFE3E8;
}

.modalBase-module__outlineBtn--3ZBTy {
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  border: 1px solid #B8B8B8;
  border-radius: 4px;
  background: #FFFFFF;
  color: #323233;
  cursor: pointer;
}

.modalBase-module__outlineBtn--3ZBTy:hover {
  background: #F2F2F2;
}

.modalBase-module__primaryBtn--ccCvW {
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  border: none;
  border-radius: 4px;
  background: #0C6FF9;
  color: #FFFFFF;
  cursor: pointer;
}

.modalBase-module__primaryBtn--ccCvW:hover {
  background: #0954BD;
}

.modalBase-module__primaryBtn--ccCvW:disabled {
  opacity: 0.5;
  cursor: default;
}

.controlBar-module__root--5_UWg {
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border: 1px solid #DFE3E8;
  border-radius: 8px;
  margin-bottom: 24px;
}

/* ── Row 1: Actions ── */
.controlBar-module__top--2FnzD {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 24px;
  border-bottom: 1px solid #DFE3E8;
  gap: 12px;
}

.controlBar-module__topLeft---nhJ_ {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.controlBar-module__results--2EPut {
  font-size: 14px;
  font-weight: 600;
  color: #323233;
  white-space: nowrap;
}

.controlBar-module__vertDivider--1fg6- {
  width: 1px;
  height: 28px;
  background: #DFE3E8;
  flex-shrink: 0;
}

.controlBar-module__vertDividerSmall--2EUy_ { height: 24px; }

.controlBar-module__searchWrapper--1TJbq {
  position: relative;
  min-width: 200px;
  max-width: 340px;
}

.controlBar-module__searchInput--1ro3P {
  width: 100%;
  padding: 7px 12px;
  font-size: 14px;
  font-family: inherit;
  border: 1px solid #DFE3E8;
  border-radius: 4px;
  outline: none;
}

.controlBar-module__searchInputHasText--2FrUy { padding-right: 28px; }

.controlBar-module__searchInput--1ro3P:focus,
.controlBar-module__searchInputHasText--2FrUy { border-color: #0C6FF9; }
.controlBar-module__searchInput--1ro3P::placeholder { color: #8B8D98; }

.controlBar-module__searchClear--3RpJc {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px;
  font-size: 16px;
  line-height: 1;
  color: #8B8D98;
}

.controlBar-module__searchClear--3RpJc:hover { color: #323233; }

.controlBar-module__topRight--zseoX {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.controlBar-module__toggleSwitch--ThedV {
  position: relative;
  display: inline-block;
  width: 64px;
  height: 32px;
  cursor: pointer;
  flex-shrink: 0;
}

.controlBar-module__toggleSwitch--ThedV input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.controlBar-module__toggleTrack--3lqbQ {
  position: absolute;
  inset: 0;
  background: #B8B8B8;
  border-radius: 16px;
  transition: background 0.2s;
}

.controlBar-module__toggleTrack--3lqbQ::before {
  content: "";
  position: absolute;
  width: 24px;
  height: 24px;
  left: 4px;
  top: 4px;
  background: #FFFFFF;
  border-radius: 50%;
  transition: transform 0.2s;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.controlBar-module__toggleSwitch--ThedV input:checked + .controlBar-module__toggleTrack--3lqbQ { background: #0C6FF9; }
.controlBar-module__toggleSwitch--ThedV input:checked + .controlBar-module__toggleTrack--3lqbQ::before { transform: translateX(32px); }

.controlBar-module__toggleLabel--2PRAK {
  font-size: 14px;
  font-weight: 500;
  color: #323233;
  margin-left: 8px;
  white-space: nowrap;
}

.controlBar-module__outlineBtn--3scCc {
  padding: 7px 14px;
  white-space: nowrap;
}

.controlBar-module__primaryBtn--wjuxv {
  padding: 7px 14px;
  white-space: nowrap;
}

/* ── Row 2: Filters ── */
.controlBar-module__bottom--3kQPU {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  padding: 10px 24px;
  background: #F8F9FA;
  gap: 7px;
  border-radius: 0 0 8px 8px;
}

.controlBar-module__scrollWrap--34kRU {
  position: relative;
  min-width: 0;
}

.controlBar-module__scrollWrap--34kRU::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 32px;
  background: linear-gradient(to right, transparent, #F8F9FA);
  pointer-events: none;
  z-index: 1;
}

.controlBar-module__scrollSection--2gkf0 {
  display: flex;
  align-items: center;
  gap: 7px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-right: 24px;
}

.controlBar-module__scrollSection--2gkf0::-webkit-scrollbar { display: none; }

.controlBar-module__scrollSection--2gkf0 > * { flex-shrink: 0; }

.controlBar-module__filtersBtn--19mcc {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  border: 1px solid #B8B8B8;
  border-radius: 4px;
  background: #FFFFFF;
  color: #323233;
  cursor: pointer;
  white-space: nowrap;
  line-height: 20px;
  flex-shrink: 0;
}

.controlBar-module__filtersBtn--19mcc:hover { background: #F2F2F2; }

.controlBar-module__filtersBtnActive--2Vete {
  background: #E2F2FF;
  border-color: #0C6FF9;
  color: #0954BD;
}

.controlBar-module__filtersBtnActive--2Vete:hover { background: #F4FAFE; }

.controlBar-module__resetBtn--3WW5r {
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  color: #0C6FF9;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.controlBar-module__resetBtn--3WW5r:hover { color: #0954BD; text-decoration: underline; }

.controlBar-module__rightGroup--3f2WW {
  display: flex;
  align-items: center;
  gap: 12px;
}

.dropdownBase-module__wrapper--2jDoc {
  position: relative;
}

.dropdownBase-module__trigger--sqJ_t {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  border: 1px solid #B8B8B8;
  border-radius: 4px;
  background: #FFFFFF;
  color: #323233;
  cursor: pointer;
  white-space: nowrap;
  line-height: 20px;
}

.dropdownBase-module__trigger--sqJ_t:hover {
  background: #F2F2F2;
}

.dropdownBase-module__triggerActive--1NdSf {
  background: #E2F2FF;
  border-color: #0C6FF9;
  color: #0954BD;
}

.dropdownBase-module__triggerActive--1NdSf:hover {
  background: #F4FAFE;
}

.dropdownBase-module__chevron--3rDam {
  display: flex;
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

.dropdownBase-module__chevronOpen--3uMTP {
  transform: rotate(180deg);
}

.dropdownBase-module__popover--3KXzX {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  background: #FFFFFF;
  border: 1px solid #DFE3E8;
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  z-index: 50;
}

.dropdownBase-module__option--1DOTN {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 13px;
  color: #323233;
}

.dropdownBase-module__option--1DOTN:hover {
  background: #F2F2F2;
}

.dropdownBase-module__backdrop--2zj0i {
  position: fixed;
  inset: 0;
  z-index: 49;
}

.filterDropdown-module__wrapper--2GCU6 { }

.filterDropdown-module__trigger--1N-9w {
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.filterDropdown-module__trigger--1N-9w:hover { background: #F2F2F2; }

.filterDropdown-module__triggerActive--3e657 { }
.filterDropdown-module__triggerActive--3e657:hover { background: #F4FAFE; }
.filterDropdown-module__triggerActive--3e657 .filterDropdown-module__icon--T_2iw { color: #0C6FF9; }

.filterDropdown-module__icon--T_2iw {
  display: flex;
  flex-shrink: 0;
  color: #323233;
}

.filterDropdown-module__chevron--3VMor { }
.filterDropdown-module__chevronOpen--12Fqs { }

.filterDropdown-module__extraCount--QE5KK {
  font-size: 12px;
  font-weight: 600;
  margin-left: 2px;
}

.filterDropdown-module__popover---95_e {
  min-width: 240px;
  max-width: 320px;
  overflow: hidden;
}

.filterDropdown-module__popoverFixed--1eg4w {
  position: fixed;
  background: #FFFFFF;
  border: 1px solid #DFE3E8;
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  z-index: 50;
  min-width: 240px;
  max-width: 320px;
  overflow: hidden;
}

.filterDropdown-module__searchWrap--3uFv9 {
  padding: 8px;
  border-bottom: 1px solid #DFE3E8;
}

.filterDropdown-module__searchInput--x4isr {
  width: 100%;
  padding: 6px 10px;
  font-size: 13px;
  font-family: inherit;
  border: 1px solid #DFE3E8;
  border-radius: 4px;
  outline: none;
  box-sizing: border-box;
}

.filterDropdown-module__searchInput--x4isr:focus { border-color: #0C6FF9; }
.filterDropdown-module__searchInput--x4isr::placeholder { color: #8B8D98; }

.filterDropdown-module__optionsList--2zB5e {
  max-height: 240px;
  overflow-y: auto;
  padding: 4px 0;
}

.filterDropdown-module__optionItem--19nJE {
  gap: 8px;
  padding: 7px 12px;
  transition: background 0.1s ease;
}

.filterDropdown-module__checkbox--1QGNT {
  width: 16px;
  height: 16px;
  accent-color: #0C6FF9;
  flex-shrink: 0;
  cursor: pointer;
}

.filterDropdown-module__noResults--231VV {
  padding: 12px;
  font-size: 13px;
  color: #8B8D98;
  text-align: center;
}

.filterDropdown-module__backdrop--2u1e2 { }

.groupByDropdown-module__wrapper--yvaPp {
  margin-left: auto;
}

.groupByDropdown-module__trigger--24Mqb {
  border-color: var(--color-neutral-400);
  color: var(--color-neutral-900);
}

.groupByDropdown-module__trigger--24Mqb:hover { background: var(--color-neutral-100); }

.groupByDropdown-module__triggerActive--2xgks {
  border-color: var(--color-primary-500);
  color: var(--color-primary-600);
}

.groupByDropdown-module__triggerHighlighted--1sxyR {
  background: #E2F2FF;
  border-color: #0C6FF9;
  color: #0954BD;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.groupByDropdown-module__triggerHighlighted--1sxyR:hover,
.groupByDropdown-module__triggerHighlighted--1sxyR:focus { background: #F4FAFE; }

.groupByDropdown-module__chevron--2HR3M {
  width: 14px;
  height: 14px;
}

.groupByDropdown-module__chevronOpen--3U7JN { }

.groupByDropdown-module__menu--29SnE {
  right: 0;
  left: auto;
  min-width: 140px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 4px 0;
}

.groupByDropdown-module__option--237b_ {
  display: block;
  width: 100%;
  font-size: 14px;
  font-family: inherit;
  background: none;
  border: none;
  text-align: left;
  color: var(--color-neutral-900);
}

.groupByDropdown-module__option--237b_:hover { background: var(--color-neutral-100); }

.groupByDropdown-module__optionActive--1qjEt {
  color: var(--color-primary-600);
  font-weight: 600;
}

.groupByDropdown-module__backdrop--2UQs- { }

.formField-module__field--1g6GC {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.formField-module__fieldLabel--2LXNV {
  font-size: 13px;
  font-weight: 600;
  color: #666;
}

.formField-module__fieldInput--bAVGs {
  width: 100%;
  padding: 8px 12px;
  font-size: 14px;
  font-family: inherit;
  border: 1px solid #DFE3E8;
  border-radius: 4px;
  outline: none;
  box-sizing: border-box;
}

.formField-module__fieldInput--bAVGs:focus {
  border-color: #0C6FF9;
}

.formField-module__fieldInput--bAVGs::placeholder {
  color: #8B8D98;
}

.formField-module__fieldTextarea--2LPK5 {
  resize: vertical;
  min-height: 140px;
}

.formField-module__fieldSelect--O99U_ {
  background: #FFFFFF;
  appearance: auto;
}

.savedViewsModal-module__backdrop--1V7lz {
  z-index: 1002;
}

.savedViewsModal-module__root--21W2e {
  border: none;
  padding: 0;
  max-height: none;
  width: 400px;
  max-width: 90vw;
  z-index: 1003;
}

.savedViewsModal-module__header--cY2VF { }

.savedViewsModal-module__title--1Ad2o {
  font-size: 16px;
}

.savedViewsModal-module__closeBtn--3Fom6 { }

.savedViewsModal-module__body--fL9et { padding: 20px; }

.savedViewsModal-module__field--1HPI7 { }
.savedViewsModal-module__fieldLabel--2obZE { }
.savedViewsModal-module__fieldInput--8yHMJ { }

.savedViewsModal-module__deleteText--16iqF {
  font-size: 14px;
  color: #323233;
}

.savedViewsModal-module__footer--pnbsu {
  gap: 8px;
}

.savedViewsModal-module__outlineBtn--1A_Ds { }
.savedViewsModal-module__primaryBtn--1d4LB { }

.savedViewsModal-module__dangerBtn--3wbzp {
  background: #E54D2E;
}

.savedViewsModal-module__dangerBtn--3wbzp:hover { background: #C4391A; }

.savedViewsMenu-module__root--2BaZE {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-left: auto;
}

.savedViewsMenu-module__saveBtn--_YlT8 {
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  color: #0C6FF9;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
}

.savedViewsMenu-module__saveBtn--_YlT8:hover { background: #F2F2F2; }

.savedViewsMenu-module__divider--YpXOu {
  width: 1px;
  height: 24px;
  background: #DFE3E8;
  flex-shrink: 0;
}

.savedViewsMenu-module__triggerWrap--3C4qA { position: relative; }

.savedViewsMenu-module__trigger--2hNZr {
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  color: #323233;
  background: transparent;
  border: none;
  padding: 4px 8px;
  max-width: 180px;
}

.savedViewsMenu-module__trigger--2hNZr:hover { background: #F2F2F2; }

.savedViewsMenu-module__triggerLabel--dV9-Z {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.savedViewsMenu-module__chevron--3hGMh { }
.savedViewsMenu-module__chevronOpen--1QOZx { }

.savedViewsMenu-module__dropdown--381sg {
  right: 0;
  left: auto;
  min-width: 200px;
  max-width: 280px;
  padding: 4px 0;
}

.savedViewsMenu-module__dropdownItem--2nsqc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  font-size: 13px;
  font-family: inherit;
  color: #323233;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
}

.savedViewsMenu-module__dropdownItem--2nsqc:hover { background: #F2F2F2; }

.savedViewsMenu-module__clearItem--2vPzE { color: #8B8D98; }

.savedViewsMenu-module__itemName--14gNg {
  all: unset;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.savedViewsMenu-module__itemActions--3Yys9 {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.savedViewsMenu-module__itemActionBtn--2-dtY {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  background: none;
  border: none;
  cursor: pointer;
  color: #8B8D98;
  border-radius: 2px;
}

.savedViewsMenu-module__itemActionBtn--2-dtY:hover { color: #323233; background: #E8E8E8; }

.savedViewsMenu-module__backdrop--361CZ { }

.statusPill-module__btnReset--6CHLw {
  appearance: none;
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.statusPill-module__root--2aSG0 {
  border-radius: var(--radius-full);
  padding: 6px 12px;
  font-size: var(--font-size-s);
  font-weight: var(--font-weight-medium);
  line-height: 20px;
  border: 1px solid var(--color-neutral-200);
  background: var(--color-neutral-50);
  color: var(--color-neutral-900);
  white-space: nowrap;
  transition: box-shadow 0.15s ease, transform 0.1s ease;
}

.statusPill-module__clickable--hvYrS { cursor: pointer; user-select: none; }
.statusPill-module__clickable--hvYrS:hover { box-shadow: 0 0 0 1px currentColor; }

.statusPill-module__active--1miFt {
  outline: 2px solid currentColor;
  outline-offset: -1px;
  font-weight: var(--font-weight-semibold);
}

.statusPill-module__info--1giIE {
  border-color: var(--color-primary-input-border);
  background: var(--color-primary-50);
  color: var(--color-primary-600);
}

.statusPill-module__neutral--1rH8I {
  border-color: var(--color-neutral-300);
  background: var(--color-neutral-bg);
  color: var(--color-neutral-600);
}

.statusPill-module__risk--2VkxL {
  border-color: var(--color-red-300);
  background: var(--color-red-50);
  color: var(--color-red-500);
}

.statusPill-module__warning--1RPHR {
  border-color: var(--color-amber-300);
  background: var(--color-amber-50);
  color: var(--color-amber-500);
}

.searchableSelect-module__root--1hbiL {
  position: relative;
  width: 100%;
}

.searchableSelect-module__disabled--3RkHy { opacity: 0.6; pointer-events: none; }

.searchableSelect-module__triggerRow--1ooy4 {
  display: flex;
  align-items: center;
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius-md);
  background: var(--color-white);
}

.searchableSelect-module__trigger--1dhdO {
  appearance: none;
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  text-align: left;
  min-height: 38px;
  padding: 6px 12px;
  border: none;
  border-radius: var(--radius-md);
  background: transparent;
  cursor: pointer;
  font-size: var(--font-size-s);
  font-family: inherit;
}

.searchableSelect-module__input--3LimB {
  flex: 1;
  border: none;
  outline: none;
  font-size: var(--font-size-s);
  font-family: inherit;
  background: transparent;
  min-width: 0;
}

.searchableSelect-module__valueLabel--1Xn-o { flex: 1; color: var(--color-neutral-900); }

.searchableSelect-module__placeholder--3JcTU { flex: 1; color: var(--color-neutral-700); }

.searchableSelect-module__clearBtn--3XLG4 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-right: 8px;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--color-neutral-600);
  font-size: 16px;
  flex-shrink: 0;
}

.searchableSelect-module__clearBtn--3XLG4:hover { color: var(--color-neutral-900); }

.searchableSelect-module__dropdown--2mQHA {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 200px;
  overflow-y: auto;
  background: var(--color-white);
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  z-index: 50;
  margin-top: 4px;
}

.searchableSelect-module__option--1mLpC {
  border: none;
  background: none;
  font: inherit;
  color: inherit;
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  cursor: pointer;
  font-size: var(--font-size-s);
}

.searchableSelect-module__option--1mLpC:hover { background: var(--color-neutral-hover); }

.searchableSelect-module__optionSelected--3MkaB { background: var(--color-primary-50); font-weight: var(--font-weight-medium); }

.searchableSelect-module__noResults--O3-nI, .searchableSelect-module__loading--3UMPa {
  padding: 8px 12px;
  font-size: var(--font-size-s);
  color: var(--color-neutral-600);
}

.createWorkOrderModal-module__backdrop--1bxhT {
  z-index: 1010;
}

.createWorkOrderModal-module__root--1Hy8Q {
  border: none;
  padding: 0;
  max-height: none;
  width: 600px;
  max-width: 90vw;
  z-index: 1011;
}

.createWorkOrderModal-module__header--3u3Ld { }
.createWorkOrderModal-module__title--22Ek9 { }
.createWorkOrderModal-module__closeBtn--3oMFL { }

.createWorkOrderModal-module__body--py-gw {
  overflow-y: auto;
  max-height: 60vh;
}

.createWorkOrderModal-module__statusBanner--2JwpB {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  font-size: var(--font-size-s);
}

.createWorkOrderModal-module__statusBannerAlert---vubd {
  background: var(--color-red-50);
  border: 1px solid var(--color-red-300);
  color: var(--color-red-500);
}

.createWorkOrderModal-module__statusBannerOutOfRange--2t0kp {
  background: #fef3e2;
  border: 1px solid #f5c882;
  color: #AD5700;
}

.createWorkOrderModal-module__statusBannerWarning--2o7MO {
  background: var(--color-amber-50);
  border: 1px solid var(--color-amber-300);
  color: var(--color-amber-500);
}

.createWorkOrderModal-module__field--2cZaD { }
.createWorkOrderModal-module__fieldLabel--1Pm5d { }
.createWorkOrderModal-module__fieldInput--1Vc6X { }
.createWorkOrderModal-module__fieldTextarea--1qmX5 { }
.createWorkOrderModal-module__fieldSelect--10Dzt { }

.createWorkOrderModal-module__footer--3Ks-L { }
.createWorkOrderModal-module__outlineBtn--yN-J4 { }
.createWorkOrderModal-module__primaryBtn--2T8wm { }

/* Expanded container with collapse animation */
.sensorRowExpanded-module__root--1PxNq {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--color-neutral-300);
  overflow: visible;
  transition:
    max-height var(--duration-slow) var(--ease-default),
    opacity 0.3s ease-in-out,
    margin-top var(--duration-slow) var(--ease-default),
    padding-top var(--duration-slow) var(--ease-default),
    visibility 0.3s ease-in-out;
  max-height: 2000px;
  opacity: 1;
  visibility: visible;
  cursor: default;
}

.sensorRowExpanded-module__collapsed--1Z3ub {
  max-height: 0;
  opacity: 0;
  margin-top: 0;
  padding-top: 0;
  border-top: none;
  gap: 0;
  pointer-events: none;
  visibility: hidden;
  overflow: hidden;
}

/* Tabs */
.sensorRowExpanded-module__tabs--3EwAx {
  display: flex;
  align-items: center;
  gap: 0;
  border-bottom: 2px solid var(--color-neutral-300);
  margin-bottom: 4px;
}

.sensorRowExpanded-module__tab--3AK6O {
  padding: 10px 20px 12px;
  margin: 0;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  background: none;
  font-size: 15px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-neutral-700);
  cursor: pointer;
  transition: color var(--duration-fast) ease, border-color var(--duration-fast) ease;
}

.sensorRowExpanded-module__tab--3AK6O:hover { color: var(--color-neutral-600); }

.sensorRowExpanded-module__tabActive--2kHSm {
  color: var(--color-neutral-900);
  border-bottom-color: var(--color-neutral-900);
}

.sensorRowExpanded-module__viewDetails--1R5AR {
  margin-left: auto;
  margin-bottom: 10px;
  padding: 8px 16px;
  font-size: var(--font-size-s);
  font-weight: var(--font-weight-medium);
  color: var(--color-white);
  background: var(--color-primary-500);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
}

.sensorRowExpanded-module__viewDetails--1R5AR:hover { opacity: 0.9; }

/* Readings grid */
.sensorRowExpanded-module__readingsList--6Ze_I {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px 12px;
  font-size: var(--font-size-s);
}

.sensorRowExpanded-module__readingCard--13Z5A {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius-md);
  background: #FAFAFB;
  font-size: var(--font-size-s);
}

.sensorRowExpanded-module__readingCardNormal--2msZp { background: #F4FBFC; border-color: #ADDDC0; }
.sensorRowExpanded-module__readingCardAlert--1XkH8 { background: var(--color-red-50); border-color: var(--color-red-300); }
.sensorRowExpanded-module__readingCardOutOfRange--3oF5f { background: var(--color-orange-50); border-color: var(--color-orange-300); }
.sensorRowExpanded-module__readingCardWarning--b3Lr3 { background: var(--color-amber-50); border-color: var(--color-amber-300); }

.sensorRowExpanded-module__readingLabel--N2Own {
  color: var(--color-neutral-600);
  font-size: var(--font-size-s);
  line-height: var(--line-height-tight);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sensorRowExpanded-module__readingValueRow--1WSiO {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.sensorRowExpanded-module__readingValue--2IZ3S {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-s);
  color: var(--color-neutral-900);
  line-height: var(--line-height-tight);
}

.sensorRowExpanded-module__readingValueNormal--ewebr { color: #218358; }
.sensorRowExpanded-module__readingValueCritical--3xL_- { color: var(--color-red-500); }
.sensorRowExpanded-module__readingValueOutOfRange--XCZvb { color: var(--color-orange-500); }
.sensorRowExpanded-module__readingValueWarning--2p__j { color: var(--color-amber-500); }
.sensorRowExpanded-module__readingValueDisconnected--1FInX { color: var(--color-neutral-700); }

.sensorRowExpanded-module__readingUnit--1hGQJ {
  color: var(--color-neutral-700);
  font-size: var(--font-size-s);
  font-weight: var(--font-weight-medium);
  margin-left: 4px;
}

.sensorRowExpanded-module__readingInfo--2L2Ry {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  position: relative;
  display: flex;
  align-items: center;
  cursor: help;
  color: #8B8D98;
  flex-shrink: 0;
}

.sensorRowExpanded-module__readingTooltip--2Fo2j {
  position: absolute;
  bottom: calc(100% + 6px);
  right: 0;
  background: #323233;
  color: #fff;
  font-size: 12px;
  font-weight: 400;
  padding: 6px 10px;
  border-radius: 4px;
  white-space: nowrap;
  z-index: 1000;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.sensorRowExpanded-module__readingTooltipArrow--188xl {
  position: absolute;
  bottom: -4px;
  right: 6px;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid #323233;
}

/* Alerts table */
.sensorRowExpanded-module__tableWrap--R9vcV {
  overflow-x: auto;
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius-lg);
}

.sensorRowExpanded-module__table--3QX7a {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-s);
}

.sensorRowExpanded-module__table--3QX7a th,
.sensorRowExpanded-module__table--3QX7a td {
  padding: 16px;
  text-align: left;
  border-bottom: 1px solid var(--color-neutral-300);
}

.sensorRowExpanded-module__table--3QX7a th {
  font-weight: var(--font-weight-extrabold);
  color: var(--color-neutral-600);
  background: var(--color-neutral-bg);
  font-size: 15px;
}

.sensorRowExpanded-module__table--3QX7a tbody tr:last-child td { border-bottom: none; }

.sensorRowExpanded-module__actionsCell--3FN_w { position: relative; vertical-align: middle; }

.sensorRowExpanded-module__actionsBtn--1abay {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius-md);
  background: var(--color-white);
  cursor: pointer;
  color: var(--color-neutral-900);
}

.sensorRowExpanded-module__actionsBtn--1abay:hover { background: var(--color-neutral-hover); }

.sensorRowExpanded-module__createWorkOrderButton--3RzbW {
  padding: 8px 12px;
  border: 1px solid var(--color-primary-500);
  border-radius: var(--radius-md);
  background: var(--color-white);
  color: var(--color-primary-500);
  font-size: var(--font-size-s);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
}

.sensorRowExpanded-module__createWorkOrderButton--3RzbW:hover {
  background: var(--color-primary-50);
}

.sensorRowExpanded-module__actionsMenu--1KT7s {
  min-width: 180px;
  padding: 8px 0;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-neutral-300);
  box-shadow: var(--shadow-md);
}

.sensorRowExpanded-module__actionsMenuItem--7vAHA {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  font-size: var(--font-size-s);
  color: var(--color-neutral-900);
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}

.sensorRowExpanded-module__actionsMenuItem--7vAHA:hover { background: var(--color-neutral-hover); }

/* Status badges in alerts table */
.sensorRowExpanded-module__statusBadge--6UOa8 {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-lg);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}

.sensorRowExpanded-module__statusAlert--3sj2S {
  background: var(--color-red-50);
  color: var(--color-red-500);
}

.sensorRowExpanded-module__statusOutOfRange--2EBT- {
  background: var(--color-orange-50);
  color: var(--color-orange-500);
}

.sensorRowExpanded-module__statusWarning--2-OiW {
  background: var(--color-amber-50);
  color: var(--color-amber-500);
}

.sensorRowExpanded-module__valueAlert--3UauS { color: var(--color-red-500); }
.sensorRowExpanded-module__valueOutOfRange--1eX8Y { color: var(--color-orange-500); }
.sensorRowExpanded-module__valueWarning--1WN2G { color: var(--color-amber-500); }

.sensorRowExpanded-module__empty--3xQJV {
  font-size: var(--font-size-s);
  color: var(--color-neutral-500);
}

/* Insights */
.sensorRowExpanded-module__insightsSection--1U0u8 {
  border-top: 1px solid var(--color-neutral-300);
  padding-top: 16px;
}

.sensorRowExpanded-module__insightsHeading--mhFUU {
  font-size: 16px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-neutral-900);
  margin-bottom: 8px;
}

.sensorRowExpanded-module__insightsGrid--VCiMl {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sensorRowExpanded-module__insightCard--1jVlH {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  border-left: 3px solid var(--color-neutral-400);
  background: var(--color-neutral-bg);
}

.sensorRowExpanded-module__insightCardActionable--39p3k {
  border-left-color: var(--color-amber-500);
  background: var(--color-amber-50);
}

.sensorRowExpanded-module__insightCardPositive--2QN0Y {
  border-left-color: var(--color-green-500);
  background: var(--color-green-50);
}

.sensorRowExpanded-module__insightText--2JXGv {
  flex: 1;
  font-size: var(--font-size-s);
  color: var(--color-neutral-900);
  line-height: var(--line-height-normal);
}

.sensorRowExpanded-module__insightLoading--eCHma {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--font-size-s);
  color: var(--color-neutral-600);
  padding: 12px 0;
}

.sensorRowExpanded-module__backdrop--3o_XG {
  position: fixed;
  inset: 0;
  z-index: 9998;
}

.sensorRowExpanded-module__actionsMenuFixed--2mKPz {
  position: fixed;
  z-index: 9999;
}

.workOrderPill-module__root--2OfY8 {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.workOrderPill-module__pill--2mSub {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  border: 1px solid;
  background: var(--color-white);
  white-space: nowrap;
}

.workOrderPill-module__link--14J5a {
  text-decoration: underline;
  font-size: var(--font-size-s);
}

.workOrderPill-module__link--14J5a:hover { text-decoration: none; }

.workOrderPill-module__extraWrap--2sI5C {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  position: relative;
  display: inline-flex;
  align-items: center;
}

.workOrderPill-module__extra--2aTQC {
  font-size: var(--font-size-s);
  color: var(--color-neutral-600);
  cursor: default;
}

.workOrderPill-module__tooltip--3ssh9 {
  position: fixed;
  transform: translateX(-50%);
  z-index: 9999;
  min-width: 180px;
  background: #fff;
  border: 1px solid #8b8d98;
  border-radius: 8px;
  padding: 8px 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.workOrderPill-module__tooltipRow--1gKy2 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
}

.workOrderPill-module__tooltipRow--1gKy2:hover {
  background: #f5f5f5;
}

.workOrderPill-module__tooltipLink--3giey {
  font-size: 13px;
  font-weight: 500;
  text-decoration: underline;
}

.workOrderPill-module__tooltipLink--3giey:hover {
  text-decoration: none;
}

.workOrderPill-module__tooltipStatus--8dXso {
  margin-left: auto;
  font-size: 12px;
  color: #60646c;
}

/* Work-order status color variants */
.workOrderPill-module__woOpen--Jeo2M { --wo-color: #60646C; }
.workOrderPill-module__woInProgress--2ggiQ { --wo-color: #218358; }
.workOrderPill-module__woOnHold--3DTvQ { --wo-color: #AB6400; }
.workOrderPill-module__woComplete--Qh3Mz { --wo-color: #3A5BC7; }
.workOrderPill-module__woArchived--3Aq5K { --wo-color: #8B8D98; }

.workOrderPill-module__pillColored--GtTRI { border-color: var(--wo-color, #60646C); }
.workOrderPill-module__linkColored--38tWh { color: var(--wo-color, #60646C); }

.exportReadingsModal-module__backdrop--2ZuHi {
  z-index: 1010;
}

.exportReadingsModal-module__root--3OnnB {
  border: none;
  padding: 0;
  max-height: none;
  width: 520px;
  max-width: 90vw;
  z-index: 1011;
}

.exportReadingsModal-module__header--Cg4Vw { }
.exportReadingsModal-module__title--39iwW { }
.exportReadingsModal-module__closeBtn--2qsT2 { }
.exportReadingsModal-module__body--3PJzV { }

.exportReadingsModal-module__field--2dEPb { }
.exportReadingsModal-module__fieldLabel--1oN3q { }
.exportReadingsModal-module__fieldInput--2R-HX { }
.exportReadingsModal-module__fieldSelect--1Ma0G { }

.exportReadingsModal-module__dateRow--1-fEz {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.exportReadingsModal-module__footer--R1TWF { }
.exportReadingsModal-module__outlineBtn--2a5G3 { }
.exportReadingsModal-module__primaryBtn--1w603 { }

.connectionStatusBadge-module__root--2Kj3G {
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: 0.04px;
  white-space: nowrap;
}

.connectionStatusBadge-module__connected--QAgV3 {
  color: #005C33;
  border: 1px solid rgba(0, 145, 64, 0.44);
  background: rgba(0, 163, 47, 0.04);
}

.connectionStatusBadge-module__connectedButOutOfRange--2xOTK {
  color: #9E5D00;
  border: 1px solid var(--color-amber-300);
  background: #fefbe9;
}

.connectionStatusBadge-module__disconnected--30k0x {
  color: #60646c;
  border: 1px solid #e0e1e6;
  background: #fcfcfd;
}

.sensorRowDropdown-module__root--3heBA {
  position: fixed;
  min-width: 240px;
  padding: 12px 0;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-neutral-300);
  box-shadow: var(--shadow-md);
  z-index: 1000;
}

.sensorRowDropdown-module__item--3omcj {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 16px;
  padding: 8px 20px;
  font-size: var(--font-size-m);
  color: var(--color-neutral-900);
  text-decoration: none;
  cursor: pointer;
  background: none;
  border: none;
  box-sizing: border-box;
}

.sensorRowDropdown-module__item--3omcj:hover {
  background: var(--color-neutral-hover);
}

.sensorRow-module__root--2Xc5W {
  display: flex;
  flex-direction: column;
  padding: 16px;
  border: 1px solid #e0e1e6;
  border-radius: 8px;
  background: #fcfcfd;
  cursor: pointer;
}

.sensorRow-module__rootExpanded--2NWL1 {
  padding: 16px;
  border: 2px solid #60646c;
  background: #f9f9fb;
}

/* Top section */
.sensorRow-module__top--3bQfA {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 16px;
}

.sensorRow-module__expandable--yp0q_ .sensorRow-module__top--3bQfA,
.sensorRow-module__expandable--yp0q_ .sensorRow-module__divider--1L2IN,
.sensorRow-module__expandable--yp0q_ .sensorRow-module__bottom--2FO_B { cursor: pointer; }

.sensorRow-module__topDropdownOpen--1BKPj { position: relative; z-index: 20; }

.sensorRow-module__titleSection--1HxA5 {
  display: flex;
  flex-direction: column;
  gap: 0;
  cursor: pointer;
}

.sensorRow-module__sensorName--3iaU8 {
  border: none;
  background: none;
  padding: 0;
  font-family: inherit;
  font-size: 20px;
  font-weight: 700;
  line-height: 32px;
  color: #1c2024;
  cursor: pointer;
  align-self: flex-start;
  width: fit-content;
}

.sensorRow-module__sensorName--3iaU8:hover { text-decoration: underline; }

.sensorRow-module__deviceType--1XPFi {
  font-size: 14px;
  line-height: 20px;
  color: #60646c;
}

/* Meta section */
.sensorRow-module__meta--1MwCq {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  position: relative;
}

.sensorRow-module__metaIconGroup--LzCCb {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 52px;
}

.sensorRow-module__metaIconLabel--3DhpR {
  font-size: var(--font-size-s);
  line-height: 20px;
  color: #60646c;
  letter-spacing: 0.25px;
  white-space: nowrap;
}

.sensorRow-module__optionsButton--1nvUe {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e0e1e6;
  border-radius: 8px;
  padding: 8px;
  height: 32px;
  width: 32px;
  cursor: pointer;
  color: var(--color-neutral-900);
  background: transparent;
}

.sensorRow-module__optionsButton--1nvUe svg { width: 16px; height: 16px; }

.sensorRow-module__expandButton--3Hkde {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  height: 32px;
  width: 32px;
  border: 1px solid #e0e1e6;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  transition: transform var(--duration-normal) ease;
  color: var(--color-neutral-900);
}

.sensorRow-module__expandButtonExpanded--2dLwW { transform: rotate(180deg); }

.sensorRow-module__expandButton--3Hkde:hover:not(:disabled) { background: var(--color-neutral-hover); }
.sensorRow-module__expandButton--3Hkde:disabled { cursor: default; opacity: 0.6; }

/* Divider */
.sensorRow-module__divider--1L2IN {
  height: 1px;
  background: #e0e1e6;
  margin: 16px 0;
  flex-shrink: 0;
}

/* Bottom section */
.sensorRow-module__bottom--2FO_B {
  display: flex;
  align-items: center;
  gap: 16px;
}

.sensorRow-module__locationSection--o1K91 {
  display: flex;
  align-items: center;
}

.sensorRow-module__location--3tn99 {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #60646c;
}

.sensorRow-module__locationLink--3AgFn {
  font-size: 14px;
  line-height: 20px;
  color: #60646c;
  text-decoration: none;
  cursor: pointer;
}

.sensorRow-module__locationLink--3AgFn:hover { text-decoration: underline; }

.sensorRow-module__locationText--1kGKS {
  font-size: 14px;
  line-height: 20px;
  color: #60646c;
}

.sensorRow-module__lastReading--2OPNN {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: auto;
  flex-wrap: wrap;
}

.sensorRow-module__lastReadingLabel--2hWf3 {
  font-size: var(--font-size-s);
  color: #60646c;
  line-height: 20px;
  letter-spacing: 0.25px;
}

.sensorRow-module__lastReadingLabel--2hWf3 strong {
  font-weight: var(--font-weight-medium);
}

.sensorRow-module__inlineBtn--ytze9 {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Count badges */
.sensorRow-module__countBadge--193bb {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  border-radius: 4px;
  font-size: var(--font-size-xs);
  cursor: pointer;
}

.sensorRow-module__countBadgeWarning--1hT5x {
  background: #fefbe9;
  color: #9E5D00;
}

.sensorRow-module__countBadgeWarning--1hT5x svg { stroke: #9E5D00; }

.sensorRow-module__countBadgeAlert--1kOoz {
  background: #fff7f7;
  color: #ce2c31;
}

.sensorRow-module__countBadgeAlert--1kOoz svg { stroke: #ce2c31; }

.sensorRow-module__countBadgeOutOfRange--3TckB {
  background: #fef6ee;
  color: #AD5700;
}

.sensorRow-module__countBadgeOutOfRange--3TckB svg { color: #AD5700; }

.sensorRow-module__countBadgeWo--gbWu1 {
  background: #edf2fe;
  color: #3a5bc7;
}

.sensorRow-module__countBadgeWo--gbWu1 svg { stroke: #3a5bc7; }

.sensorRow-module__countBadgeText--3mUsN {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: 16px;
}

/* Loading state */
.sensorRow-module__loading--w3vmv {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 28px;
  border: 2px solid var(--color-neutral-300);
  border-radius: var(--radius-lg);
  background: var(--color-neutral-bg);
}

@keyframes sensorRow-module__spin--PKrPu {
  to { transform: rotate(360deg); }
}

.sensorRow-module__spinner--1-mBB {
  width: 24px;
  height: 24px;
  border: 3px solid var(--color-neutral-300);
  border-top-color: var(--color-primary-600);
  border-radius: 50%;
  animation: sensorRow-module__spin--PKrPu 0.7s linear infinite;
}

.assetGroup-module__root--jIXKd {
  background: var(--color-white);
  border: 1px solid #e0e1e6;
  border-radius: 8px;
}

.assetGroup-module__header--3W9Rl {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 24px;
}

.assetGroup-module__title--1wynj {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-neutral-900);
}

.assetGroup-module__titleText--1vlkH {
  font-size: var(--font-size-l);
  font-weight: var(--font-weight-bold);
  line-height: 26px;
  color: #1c2024;
}

.assetGroup-module__titleLink--3qX37 {
  font-size: var(--font-size-l);
  font-weight: var(--font-weight-bold);
  line-height: 26px;
  color: #1c2024;
  text-decoration: none;
}

.assetGroup-module__titleLink--3qX37:hover {
  text-decoration: underline;
}

.assetGroup-module__badges--2VMjj {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: flex-end;
}

.assetGroup-module__chevronBtn--2Uk6- {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid #e0e1e6;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  transition: transform var(--duration-normal) ease;
  color: var(--color-neutral-900);
  padding: 0;
}

.assetGroup-module__chevronBtn--2Uk6-:hover { background: var(--color-neutral-hover); }

.assetGroup-module__chevronBtnCollapsed--1yATP {
  transform: rotate(-90deg);
}

.assetGroup-module__body--2_Vw8 {
  display: grid;
  gap: 12px;
  padding: 0 24px 24px;
  overflow: hidden;
  transition:
    max-height var(--duration-slow) var(--ease-default),
    opacity 0.3s ease-in-out,
    padding var(--duration-slow) var(--ease-default),
    visibility 0.3s ease-in-out;
  max-height: 10000px;
  opacity: 1;
  visibility: visible;
}

.assetGroup-module__bodyCollapsed--3dXFv {
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
  pointer-events: none;
  visibility: hidden;
}

.sensorGrid-module__root--1Aish {
  display: grid;
  gap: 32px;
  transition: opacity 0.15s ease;
}

.sensorGrid-module__refetching--OtRFh {
  opacity: 0.5;
  pointer-events: none;
}

.sensorGrid-module__loadingMore--3rJuF {
  display: flex;
  justify-content: center;
  padding: 24px 0;
}

@keyframes sensorGrid-module__spin--1sQtb {
  to { transform: rotate(360deg); }
}

.sensorGrid-module__spinner--3jOAV {
  width: 24px;
  height: 24px;
  border: 3px solid var(--color-neutral-300);
  border-top-color: var(--color-primary-600);
  border-radius: 50%;
  animation: sensorGrid-module__spin--1sQtb 0.7s linear infinite;
}

.modalMultiSelect-module__root--jbclz {
  position: relative;
  width: 100%;
}

.modalMultiSelect-module__chipBox--14nsw {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  min-height: 38px;
  padding: 4px 8px;
  border: 1px solid #DFE3E8;
  border-radius: 6px;
  background: #fff;
  cursor: text;
}

.modalMultiSelect-module__chipBox--14nsw:focus-within {
  border-color: #0C6FF9;
}

.modalMultiSelect-module__chip--1LvaH {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px 2px 8px;
  background: #E8F0FE;
  border-radius: 4px;
  font-size: 13px;
  color: #323233;
  white-space: nowrap;
}

.modalMultiSelect-module__chipRemove--1NHDf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
  color: #666;
  font-size: 14px;
  line-height: 1;
  border-radius: 2px;
}

.modalMultiSelect-module__chipRemove--1NHDf:hover {
  color: #323233;
  background: rgba(0, 0, 0, 0.08);
}

.modalMultiSelect-module__searchInput--2xwt8 {
  flex: 1;
  min-width: 60px;
  border: none;
  outline: none;
  font-size: 13px;
  font-family: inherit;
  padding: 4px 0;
  background: transparent;
}

.modalMultiSelect-module__searchInput--2xwt8::placeholder { color: #8B8D98; }

.modalMultiSelect-module__chevronBtn--SSw5E {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: auto;
  padding: 2px;
  border: none;
  background: none;
  color: #8B8D98;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.modalMultiSelect-module__chevronOpen--30PyU { transform: rotate(180deg); }

.modalMultiSelect-module__dropdown--33yo3 {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 200px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #DFE3E8;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 10;
}

.modalMultiSelect-module__optionItem--3BKr0 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  cursor: pointer;
  font-size: 13px;
}

.modalMultiSelect-module__optionItem--3BKr0:hover { background: #F2F2F2; }

.modalMultiSelect-module__checkbox--8Io60 {
  width: 16px;
  height: 16px;
  accent-color: #0C6FF9;
  flex-shrink: 0;
  cursor: pointer;
}

.modalMultiSelect-module__noResults--1SHfW {
  padding: 12px;
  font-size: 13px;
  color: #8B8D98;
  text-align: center;
}

.addFilterMenu-module__root--RZm-u {
  position: relative;
  display: inline-flex;
}

.addFilterMenu-module__trigger--1mytX {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  color: #0C6FF9;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 4px;
}

.addFilterMenu-module__trigger--1mytX:hover { background: #F4FAFE; }

.addFilterMenu-module__popover--23VJt {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 200px;
  background: #fff;
  border: 1px solid #DFE3E8;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 10;
  padding: 4px 0;
}

.addFilterMenu-module__item--3K46m {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 14px;
  font-size: 13px;
  font-family: inherit;
  color: #323233;
  background: none;
  border: none;
  cursor: pointer;
}

.addFilterMenu-module__item--3K46m:hover { background: #F2F2F2; }

.addFilterMenu-module__backdrop--23r8W {
  position: fixed;
  inset: 0;
  background: transparent;
  z-index: 5;
}

.filterModal-module__backdrop--2nz_V {
  z-index: 1000;
}

.filterModal-module__root--1ngRC {
  border: none;
  padding: 0;
  min-width: 480px;
  width: 90%;
  max-width: 520px;
  max-height: 750px;
  z-index: 1001;
  overflow: visible;
}

.filterModal-module__header--3W2st { }
.filterModal-module__title--2Z1PG { }

.filterModal-module__closeBtn--1IeUR {
  justify-content: center;
}

.filterModal-module__body--2K87l {
  padding: 20px;
  overflow-y: visible;
  flex: 1;
  min-height: 0;
  gap: 20px;
}

.filterModal-module__section--3jC_l {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.filterModal-module__sectionHeader--35Ing {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.filterModal-module__sectionLabel--3rq02 {
  font-size: 13px;
  font-weight: 600;
  color: #666;
  letter-spacing: 0.3px;
}

.filterModal-module__removeBtn--2LB0x {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
  color: #767676;
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: inherit;
}

.filterModal-module__removeBtn--2LB0x:hover { background: #FFF0F1; }

.filterModal-module__emptyState--1ymYg {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 32px 16px;
}

.filterModal-module__emptyTitle--3TdUk {
  font-size: 14px;
  font-weight: 600;
  color: #323233;
}

.filterModal-module__emptyHint--8S9_j {
  font-size: 13px;
  color: #8B8D98;
}

.filterModal-module__footer--Ecrth {
  justify-content: space-between;
}

.filterModal-module__footerActions--33Hk9 {
  display: flex;
  align-items: center;
  gap: 12px;
}
.filterModal-module__outlineBtn--3OKnc { }
.filterModal-module__primaryBtn--37fAP { }

.sensorsPage-module__root--QMp0i {
  min-height: 100vh;
  padding: var(--space-4);
  background: var(--color-neutral-50);
}

.sensorsPage-module__loading--1Do4X {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
}

:root {
  /* Neutral */
  --color-white: #fff;
  --color-black: #000;
  --color-neutral-50: #fafafa;
  --color-neutral-100: #f2f2f2;
  --color-neutral-200: #dfe3e8;
  --color-neutral-300: #E0E1E6;
  --color-neutral-400: #b8b8b8;
  --color-neutral-500: #767676;
  --color-neutral-600: #60646C;
  --color-neutral-700: #8B8D98;
  --color-neutral-900: #1C2024;
  --color-neutral-bg: #FCFCFD;
  --color-neutral-bg-subtle: #F9F9FB;
  --color-neutral-hover: #F4F4F5;

  /* Primary / Blue */
  --color-primary-50: #EDF2FE;
  --color-primary-100: #DDE5FC;
  --color-primary-500: #3E63DD;
  --color-primary-600: #3A5BC7;
  --color-primary-700: #3A5BC7;
  --color-primary-input-border: #ABBDF9;

  /* Red / Alert */
  --color-red-50: #FFF7F7;
  --color-red-100: #FFEAEF;
  --color-red-300: #FDBDBE;
  --color-red-500: #CE2C31;
  --color-red-700: #b90c42;

  /* Success alpha (connected badge) */
  --color-success-alpha-2: rgba(0, 163, 47, 0.04);
  --color-success-alpha-7: rgba(0, 145, 64, 0.44);
  --color-success-alpha-11: rgba(0, 113, 63, 0.87);

  /* Green / Connected */
  --color-green-50: #F4FBF6;
  --color-green-100: #E8F5E9;
  --color-green-300: #ADDDC0;
  --color-green-400: #81C784;
  --color-green-500: #218358;
  --color-green-700: #036645;

  /* Amber / Warning */
  --color-amber-50: #FEFBE9;
  --color-amber-300: #F3D673;
  --color-amber-500: #AB6400;

  /* Orange / Out of Range */
  --color-orange-50: #FFF3EB;
  --color-orange-300: #FFBA6B;
  --color-orange-500: #ec7d10;

  /* Purple */
  --color-purple-300: #d5d7e8;
  --color-purple-500: #8777d9;

  /* Typography */
  --font-family: 'Lato', sans-serif;
  --font-size-xs: 12px;
  --font-size-s: 14px;
  --font-size-m: 15px;
  --font-size-l: 18px;
  --font-size-xl: 22px;
  --font-size-xxl: 30px;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --line-height-ui: 1;
  --line-height-tight: 1.3;
  --line-height-paragraph: 1.5;

  /* Spacing (base 8px) */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-8: 64px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);

  /* Border radius */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 10px;
  --radius-full: 9999px;

  /* Transitions */
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 0.15s;
  --duration-normal: 0.2s;
  --duration-slow: 0.4s;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size-m);
  color: var(--color-neutral-900);
  background-color: var(--color-white);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

/* FONT FACES */
@font-face {
  font-family: Lato;
  font-weight: 400;
  src: url('/ui/fonts/Lato-Regular.woff2') format('woff2'),
    url('/ui/fonts/Lato-Regular.woff') format('woff');
}

@font-face {
  font-family: Lato;
  font-weight: 600;
  src: url('/ui/fonts/Lato-Semibold.woff2') format('woff2'),
    url('/ui/fonts/Lato-Semibold.woff') format('woff');
}

@font-face {
  font-family: Lato;
  font-weight: 800;
  src: url('/ui/fonts/Lato-Heavy.woff2') format('woff2'),
    url('/ui/fonts/Lato-Heavy.woff') format('woff');
}

/* GLOBAL SETUP */
html {
  box-sizing: border-box;
  height: 100%;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body {
  margin: 0;
  font-family: Lato, sans-serif;
  color: #323233; /* gray900 */
  font-size: 15px;
  line-height: 1;
  height: 100%;
}

#app-root {
  height: 100%;
}

/* RESETS */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
}

ul, ol {
  margin: 0;
  padding: 0;
}

p {
  margin: 0;
}

a {
  text-decoration: none;
  color: hsl(209, 47%, 26%); /* grey900 */
}

button {
  padding: 0;
  background: none;
  border: none;
  outline: none;
}

::-webkit-input-placeholder {
  color: hsl(208, 13%, 81%); /* grey500 */
  font-style: italic;
}

::-moz-placeholder {
  color: hsl(208, 13%, 81%); /* grey500 */
  font-style: italic;
  opacity: 1;
}

:-ms-input-placeholder {
  color: hsl(208, 13%, 81%); /* grey500 */
  font-style: italic;
}

input[type="radio"] {
  margin: 0;
}

/* styles for modal window*/

#modal-root > div {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
  background-color: rgba(0,0,0,0.5);
}