@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--moQDi {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.asyncMultiSelect-module__searchBox--7UP4u {
  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--7UP4u:focus {
  border-color: var(--color-accent-500);
}

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

.asyncMultiSelect-module__chip--tZsIM {
  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--EQu-f {
  all: unset;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  color: var(--color-accent-500);
}

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

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

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

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

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

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

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

.badge-module__badge--9NABz {
  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--90UdW { background: var(--color-primary-100); color: var(--color-primary-700); }
.badge-module__success--tilSG { background: var(--color-green-300); color: var(--color-green-700); }
.badge-module__warning--cyGmi { background: var(--color-orange-500); color: var(--color-white); }
.badge-module__danger--Okxlv { background: var(--color-red-300); color: var(--color-red-700); }
.badge-module__neutral--NMk3v { background: var(--color-neutral-300); color: var(--color-neutral-900); }
.badge-module__sm--zPMu9 { padding: 2px var(--space-1); font-size: var(--font-size-xs); }
.badge-module__md--D4YL1 { padding: var(--space-1) var(--space-2); font-size: var(--font-size-s); }

.button-module__button--lx7zy {
  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--lx7zy:disabled { opacity: 0.5; cursor: not-allowed; }
.button-module__button--lx7zy:not(:disabled):hover { opacity: 0.9; }

.button-module__primary--x-xoS { background: var(--color-primary-500); color: var(--color-white); }
.button-module__secondary--Vg-hY { background: var(--color-neutral-300); color: var(--color-neutral-900); }
.button-module__outline--aVfM0 { background: transparent; color: var(--color-primary-500); border: 2px solid var(--color-primary-500); }
.button-module__text--oJq3P { background: transparent; color: var(--color-primary-500); }
.button-module__danger--n7UFQ { background: var(--color-red-500); color: var(--color-white); }

.button-module__sm--HVjP1 { padding: var(--space-1) var(--space-2); font-size: var(--font-size-s); }
.button-module__md--cqGAH { padding: var(--space-1) var(--space-3); font-size: var(--font-size-m); }
.button-module__lg--lLycc { padding: var(--space-2) var(--space-4); font-size: var(--font-size-l); }

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

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

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

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

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

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

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

.input-module__input--weU0U {
  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--weU0U:focus {
  outline: none;
  border-color: var(--color-primary-500);
}

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

.input-module__input--weU0U.input-module__error--MMe0H {
  border-color: var(--color-red-500);
}

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

.modal-module__overlay--NLBnB {
  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--7\+lHu {
  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--by68Z {
  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--pjb\+2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3);
  border-bottom: 1px solid var(--color-neutral-300);
}
.modal-module__title--9QGQj { font-size: var(--font-size-l); font-weight: var(--font-weight-bold); color: var(--color-neutral-900); }

.modal-module__closeBtn--ad39P {
  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--ad39P:hover { color: var(--color-neutral-900); }

.modal-module__body--\+EVFj {
  padding: var(--space-3);
}

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

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

.select-module__select--PHWl\+ {
  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--PHWl\+:focus {
  outline: none;
  border-color: var(--color-primary-500);
}

.select-module__select--PHWl\+:disabled {
  background: var(--color-neutral-100);
  cursor: not-allowed;
}

.select-module__select--PHWl\+.select-module__error--y3wTY {
  border-color: var(--color-red-500);
}

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

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

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

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

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

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

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

.text-module__xs--af7rr { font-size: var(--font-size-xs); }
.text-module__s--qipj- { font-size: var(--font-size-s); }
.text-module__m--28U5O { font-size: var(--font-size-m); }
.text-module__l--3bIP7 { font-size: var(--font-size-l); }
.text-module__xl--ACEny { font-size: var(--font-size-xl); }
.text-module__xxl--hfbkS { font-size: var(--font-size-xxl); }

.text-module__regular--Xxgc6 { font-weight: var(--font-weight-regular); }
.text-module__semiBold--mKDud { font-weight: var(--font-weight-semibold); }
.text-module__bold--8F6Lb { font-weight: var(--font-weight-bold); }

.summaryCard-module__root--YXE9h {
  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--YXE9h:hover { box-shadow: var(--shadow-md); }

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

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

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

.summaryCard-module__iconWrap--6-sKK svg { width: 28px; height: 28px; }

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

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

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

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

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

.summaryCard-module__info--JTRZA::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--JTRZA:hover::after {
  opacity: 1;
}

/* Variants */
.summaryCard-module__alert--1Qk79 { border-color: var(--color-red-300); background: var(--color-red-50); }
.summaryCard-module__alert--1Qk79 .summaryCard-module__iconWrap--6-sKK { color: #CE2C31; }
.summaryCard-module__alert--1Qk79 .summaryCard-module__value--yXciH { color: var(--color-red-500); }

.summaryCard-module__outOfRange--AYHJS { border-color: #f5c8a1; background: #fef6ee; }
.summaryCard-module__outOfRange--AYHJS .summaryCard-module__iconWrap--6-sKK { color: #ec7d10; }
.summaryCard-module__outOfRange--AYHJS .summaryCard-module__value--yXciH { color: #ec7d10; }

.summaryCard-module__warning--84XIk { border-color: var(--color-amber-300); background: var(--color-amber-50); }
.summaryCard-module__warning--84XIk .summaryCard-module__iconWrap--6-sKK { color: var(--color-amber-500); }
.summaryCard-module__warning--84XIk .summaryCard-module__value--yXciH { color: var(--color-amber-500); }

.summaryCard-module__connected--grwAI { border-color: var(--color-green-300); background: var(--color-green-50); }
.summaryCard-module__connected--grwAI .summaryCard-module__value--yXciH { color: var(--color-neutral-900); }

.summaryCard-module__disconnected--28g-3 { border-color: var(--color-neutral-300); background: var(--color-neutral-bg); }
.summaryCard-module__disconnected--28g-3 .summaryCard-module__value--yXciH { color: var(--color-neutral-900); }

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

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

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

.modalBase-module__root--SX3Fe {
  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--B9\+\+P {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #DFE3E8;
}

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

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

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

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

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

.modalBase-module__outlineBtn--KaQqM {
  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--KaQqM:hover {
  background: #F2F2F2;
}

.modalBase-module__primaryBtn--sXE6b {
  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--sXE6b:hover {
  background: #0954BD;
}

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

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

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

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

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

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

.controlBar-module__vertDividerSmall--42xs3 { height: 24px; }

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

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

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

.controlBar-module__searchInput--qpfQl:focus,
.controlBar-module__searchInputHasText--nOHV5 { border-color: #0C6FF9; }
.controlBar-module__searchInput--qpfQl::placeholder { color: #8B8D98; }

.controlBar-module__searchClear--EK9Q5 {
  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--EK9Q5:hover { color: #323233; }

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

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

.controlBar-module__toggleSwitch--xb\+cZ input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

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

.controlBar-module__toggleTrack--KtKxR::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--xb\+cZ input:checked + .controlBar-module__toggleTrack--KtKxR { background: #0C6FF9; }
.controlBar-module__toggleSwitch--xb\+cZ input:checked + .controlBar-module__toggleTrack--KtKxR::before { transform: translateX(32px); }

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

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

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

/* ── Row 2: Filters ── */
.controlBar-module__bottom--18FRO {
  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--p0pC0 {
  position: relative;
  min-width: 0;
}

.controlBar-module__scrollWrap--p0pC0::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--onTEw {
  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--onTEw::-webkit-scrollbar { display: none; }

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

.controlBar-module__filtersBtn--iq15Q {
  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--iq15Q:hover { background: #F2F2F2; }

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

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

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

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

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

.dropdownBase-module__wrapper--9kdJc {
  position: relative;
}

.dropdownBase-module__trigger--hoinz {
  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--hoinz:hover {
  background: #F2F2F2;
}

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

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

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

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

.dropdownBase-module__popover--oN5eN {
  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--vTECw {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 13px;
  color: #323233;
}

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

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

.filterDropdown-module__wrapper--MK4R3 { }

.filterDropdown-module__trigger--dgz6f {
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.filterDropdown-module__trigger--dgz6f:hover { background: #F2F2F2; }

.filterDropdown-module__triggerActive--ke6lI { }
.filterDropdown-module__triggerActive--ke6lI:hover { background: #F4FAFE; }
.filterDropdown-module__triggerActive--ke6lI .filterDropdown-module__icon--so4zi { color: #0C6FF9; }

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

.filterDropdown-module__chevron--q8\+gI { }
.filterDropdown-module__chevronOpen--qFNYA { }

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

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

.filterDropdown-module__popoverFixed--GPcxb {
  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--9UVCj {
  padding: 8px;
  border-bottom: 1px solid #DFE3E8;
}

.filterDropdown-module__searchInput--lsW0\+ {
  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--lsW0\+:focus { border-color: #0C6FF9; }
.filterDropdown-module__searchInput--lsW0\+::placeholder { color: #8B8D98; }

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

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

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

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

.filterDropdown-module__backdrop--wD-Pr { }

.groupByDropdown-module__wrapper--3aigj {
  margin-left: auto;
}

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

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

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

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

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

.groupByDropdown-module__chevronOpen--z-2J6 { }

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

.groupByDropdown-module__option--rjzS7 {
  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--rjzS7:hover { background: var(--color-neutral-100); }

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

.groupByDropdown-module__backdrop--tgtLR { }

.formField-module__field--3gdIa {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

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

.formField-module__fieldInput--z149- {
  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--z149-:focus {
  border-color: #0C6FF9;
}

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

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

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

.savedViewsModal-module__backdrop--x3buW {
  z-index: 1002;
}

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

.savedViewsModal-module__header--463dN { }

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

.savedViewsModal-module__closeBtn--uPrXO { }

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

.savedViewsModal-module__field--Ii04d { }
.savedViewsModal-module__fieldLabel--je6j1 { }
.savedViewsModal-module__fieldInput--0C5w1 { }

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

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

.savedViewsModal-module__outlineBtn--dqpK9 { }
.savedViewsModal-module__primaryBtn--MhNzq { }

.savedViewsModal-module__dangerBtn--107OD {
  background: #E54D2E;
}

.savedViewsModal-module__dangerBtn--107OD:hover { background: #C4391A; }

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

.savedViewsMenu-module__saveBtn--IAQ15 {
  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--IAQ15:hover { background: #F2F2F2; }

.savedViewsMenu-module__divider--JC-\+J {
  width: 1px;
  height: 24px;
  background: #DFE3E8;
  flex-shrink: 0;
}

.savedViewsMenu-module__triggerWrap--sWiww { position: relative; }

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

.savedViewsMenu-module__trigger--6JzZ0:hover { background: #F2F2F2; }

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

.savedViewsMenu-module__chevron--bl9gI { }
.savedViewsMenu-module__chevronOpen--Sbxbn { }

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

.savedViewsMenu-module__dropdownItem--vYxtN {
  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--vYxtN:hover { background: #F2F2F2; }

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

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

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

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

.savedViewsMenu-module__itemActionBtn--7ZgUS:hover { color: #323233; background: #E8E8E8; }

.savedViewsMenu-module__backdrop--mV4MO { }

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

.statusPill-module__root--W6it5 {
  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--d2IMW { cursor: pointer; user-select: none; }
.statusPill-module__clickable--d2IMW:hover { box-shadow: 0 0 0 1px currentColor; }

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

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

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

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

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

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

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

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

.searchableSelect-module__trigger--yqj4P {
  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--DwI8E {
  flex: 1;
  border: none;
  outline: none;
  font-size: var(--font-size-s);
  font-family: inherit;
  background: transparent;
  min-width: 0;
}

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

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

.searchableSelect-module__clearBtn--JNlOi {
  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--JNlOi:hover { color: var(--color-neutral-900); }

.searchableSelect-module__dropdown--uD\+iJ {
  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--2LUbX {
  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--2LUbX:hover { background: var(--color-neutral-hover); }

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

.searchableSelect-module__noResults--7gRPa, .searchableSelect-module__loading--7uli2 {
  padding: 8px 12px;
  font-size: var(--font-size-s);
  color: var(--color-neutral-600);
}

.createWorkOrderModal-module__backdrop--PkYmv {
  z-index: 1010;
}

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

.createWorkOrderModal-module__header--b5uzF { }
.createWorkOrderModal-module__title--7hand { }
.createWorkOrderModal-module__closeBtn--96oOR { }

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

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

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

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

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

.createWorkOrderModal-module__field--RQC-j { }
.createWorkOrderModal-module__fieldLabel--RJs0O { }
.createWorkOrderModal-module__fieldInput--xMrKW { }
.createWorkOrderModal-module__fieldTextarea--Kk9ZY { }
.createWorkOrderModal-module__fieldSelect--CDZNM { }

.createWorkOrderModal-module__footer--V4QhJ { }
.createWorkOrderModal-module__outlineBtn--Vr8yI { }
.createWorkOrderModal-module__primaryBtn--eYego { }

/* Expanded container with collapse animation */
.sensorRowExpanded-module__root--gbbK0 {
  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--qpFBc {
  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--iGAIt {
  display: flex;
  align-items: center;
  gap: 0;
  border-bottom: 2px solid var(--color-neutral-300);
  margin-bottom: 4px;
}

.sensorRowExpanded-module__tab--7Ker6 {
  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--7Ker6:hover { color: var(--color-neutral-600); }

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

.sensorRowExpanded-module__viewDetails---lsig {
  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---lsig:hover { opacity: 0.9; }

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

.sensorRowExpanded-module__readingCard--8mGnQ {
  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--iFfvG { background: #F4FBFC; border-color: #ADDDC0; }
.sensorRowExpanded-module__readingCardAlert--wQisF { background: var(--color-red-50); border-color: var(--color-red-300); }
.sensorRowExpanded-module__readingCardOutOfRange--d-dsM { background: var(--color-orange-50); border-color: var(--color-orange-300); }
.sensorRowExpanded-module__readingCardWarning---I8J0 { background: var(--color-amber-50); border-color: var(--color-amber-300); }

.sensorRowExpanded-module__readingLabel--hq-e1 {
  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--3us18 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.sensorRowExpanded-module__readingValue--T82dk {
  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--GupCk { color: #218358; }
.sensorRowExpanded-module__readingValueCritical--x6ZgZ { color: var(--color-red-500); }
.sensorRowExpanded-module__readingValueOutOfRange--JCw-7 { color: var(--color-orange-500); }
.sensorRowExpanded-module__readingValueWarning--RSc1D { color: var(--color-amber-500); }
.sensorRowExpanded-module__readingValueDisconnected--HZ8UH { color: var(--color-neutral-700); }

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

.sensorRowExpanded-module__readingInfo--px241 {
  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--kZY5r {
  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--LCgmh {
  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--r\+b6T {
  overflow-x: auto;
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius-lg);
}

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

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

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

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

.sensorRowExpanded-module__actionsCell--GIs\+m { position: relative; vertical-align: middle; }

.sensorRowExpanded-module__actionsBtn--1\+7zz {
  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--1\+7zz:hover { background: var(--color-neutral-hover); }

.sensorRowExpanded-module__createWorkOrderButton--CFGzZ {
  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--CFGzZ:hover {
  background: var(--color-primary-50);
}

.sensorRowExpanded-module__actionsMenu--Au7A- {
  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--tQ4Is {
  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--tQ4Is:hover { background: var(--color-neutral-hover); }

/* Status badges in alerts table */
.sensorRowExpanded-module__statusBadge--vWQiG {
  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--BqDKv {
  background: var(--color-red-50);
  color: var(--color-red-500);
}

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

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

.sensorRowExpanded-module__valueAlert--aGO4i { color: var(--color-red-500); }
.sensorRowExpanded-module__valueOutOfRange--H0kZ4 { color: var(--color-orange-500); }
.sensorRowExpanded-module__valueWarning--4aBFn { color: var(--color-amber-500); }

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

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

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

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

.sensorRowExpanded-module__insightCard--uZ8dP {
  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--kM7RT {
  border-left-color: var(--color-amber-500);
  background: var(--color-amber-50);
}

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

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

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

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

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

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

.workOrderPill-module__pill--48XMF {
  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--8q12u {
  text-decoration: underline;
  font-size: var(--font-size-s);
}

.workOrderPill-module__link--8q12u:hover { text-decoration: none; }

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

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

.workOrderPill-module__tooltip--AXQ8n {
  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--54pEe {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
}

.workOrderPill-module__tooltipRow--54pEe:hover {
  background: #f5f5f5;
}

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

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

.workOrderPill-module__tooltipStatus--6k2e\+ {
  margin-left: auto;
  font-size: 12px;
  color: #60646c;
}

/* Work-order status color variants */
.workOrderPill-module__woOpen---mTOe { --wo-color: #60646C; }
.workOrderPill-module__woInProgress--2V\+A6 { --wo-color: #218358; }
.workOrderPill-module__woOnHold--4XT\+d { --wo-color: #AB6400; }
.workOrderPill-module__woComplete---9xzm { --wo-color: #3A5BC7; }
.workOrderPill-module__woArchived--UOEAz { --wo-color: #8B8D98; }

.workOrderPill-module__pillColored--fDXmI { border-color: var(--wo-color, #60646C); }
.workOrderPill-module__linkColored--rabUJ { color: var(--wo-color, #60646C); }

.exportReadingsModal-module__backdrop--ldyDR {
  z-index: 1010;
}

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

.exportReadingsModal-module__header--hljY3 { }
.exportReadingsModal-module__title--QB-a\+ { }
.exportReadingsModal-module__closeBtn--fqFAd { }
.exportReadingsModal-module__body--q\+-Lz { }

.exportReadingsModal-module__field--qzD7U { }
.exportReadingsModal-module__fieldLabel--wANQK { }
.exportReadingsModal-module__fieldInput--i6rMb { }
.exportReadingsModal-module__fieldSelect--S0FMp { }

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

.exportReadingsModal-module__footer--wy823 { }
.exportReadingsModal-module__outlineBtn--2LScI { }
.exportReadingsModal-module__primaryBtn--Q7LVJ { }

.connectionStatusBadge-module__root---6ANd {
  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--yqgta {
  color: #005C33;
  border: 1px solid rgba(0, 145, 64, 0.44);
  background: rgba(0, 163, 47, 0.04);
}

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

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

.sensorRowDropdown-module__root--7cl-Y {
  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--rL107 {
  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--rL107:hover {
  background: var(--color-neutral-hover);
}

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

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

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

.sensorRow-module__expandable--Vbv7Y .sensorRow-module__top--TDKwe,
.sensorRow-module__expandable--Vbv7Y .sensorRow-module__divider--rWhl-,
.sensorRow-module__expandable--Vbv7Y .sensorRow-module__bottom--OUV-6 { cursor: pointer; }

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

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

.sensorRow-module__sensorName--KYdWe {
  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--KYdWe:hover { text-decoration: underline; }

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

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

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

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

.sensorRow-module__optionsButton--XcjF8 {
  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--XcjF8 svg { width: 16px; height: 16px; }

.sensorRow-module__expandButton---ghfG {
  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--lsbJF { transform: rotate(180deg); }

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

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

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

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

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

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

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

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

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

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

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

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

/* Count badges */
.sensorRow-module__countBadge--JgOlO {
  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--q0eYd {
  background: #fefbe9;
  color: #9E5D00;
}

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

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

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

.sensorRow-module__countBadgeOutOfRange--90zSa {
  background: #fef6ee;
  color: #AD5700;
}

.sensorRow-module__countBadgeOutOfRange--90zSa svg { color: #AD5700; }

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

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

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

/* Loading state */
.sensorRow-module__loading--3IbQ1 {
  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--rvEzF {
  to { transform: rotate(360deg); }
}

.sensorRow-module__spinner--q2iFb {
  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--rvEzF 0.7s linear infinite;
}

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

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

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

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

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

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

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

.assetGroup-module__chevronBtn--U8O2l {
  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--U8O2l:hover { background: var(--color-neutral-hover); }

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

.assetGroup-module__body--0J3hz {
  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--dFHMx {
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
  pointer-events: none;
  visibility: hidden;
}

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

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

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

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

.sensorGrid-module__spinner--j8A3B {
  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--aik2L 0.7s linear infinite;
}

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

.modalMultiSelect-module__chipBox--g2eJv {
  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--g2eJv:focus-within {
  border-color: #0C6FF9;
}

.modalMultiSelect-module__chip--nWyzA {
  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--EEeZU {
  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--EEeZU:hover {
  color: #323233;
  background: rgba(0, 0, 0, 0.08);
}

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

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

.modalMultiSelect-module__chevronBtn--3u6JX {
  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--Fn8ZP { transform: rotate(180deg); }

.modalMultiSelect-module__dropdown--BSBFR {
  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--eOrWW {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  cursor: pointer;
  font-size: 13px;
}

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

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

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

.addFilterMenu-module__root--81s\+q {
  position: relative;
  display: inline-flex;
}

.addFilterMenu-module__trigger--kdgRT {
  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--kdgRT:hover { background: #F4FAFE; }

.addFilterMenu-module__popover--ITYRa {
  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--GHxbF {
  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--GHxbF:hover { background: #F2F2F2; }

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

.filterModal-module__backdrop--BerDj {
  z-index: 1000;
}

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

.filterModal-module__header--NvWVM { }
.filterModal-module__title--Tdwcv { }

.filterModal-module__closeBtn--ywJXE {
  justify-content: center;
}

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

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

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

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

.filterModal-module__removeBtn--JKcyl {
  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--JKcyl:hover { background: #FFF0F1; }

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

.filterModal-module__emptyTitle--n5\+s8 {
  font-size: 14px;
  font-weight: 600;
  color: #323233;
}

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

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

.filterModal-module__footerActions--9Q0sx {
  display: flex;
  align-items: center;
  gap: 12px;
}
.filterModal-module__outlineBtn--ZLnKX { }
.filterModal-module__primaryBtn--KXHeF { }

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

.sensorsPage-module__loading--BT5Ce {
  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);
}