@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans");/* failure-header.css */

/* Card: flush, edge-to-edge toolbar bar (no title, no border, no radius)
   NOTE: .mnm-card sets width:470px, min-height:186px, flex-direction:column
   with the same specificity as .failure-header-card (both single class), so
   these overrides need !important to win regardless of CSS import order. */
.failure-header-card,
.failure-header-card.mnm-card--solid {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  width: 100% !important;
  height: 56px !important;
  min-height: unset !important;
  padding: 8px 14px !important;
  border: none !important;
  border-radius: 0 !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

.failure-header-card .mnm-card__header {
  display: none !important;
}

.failure-header-card .mnm-card__content {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  overflow: visible !important;
}

.page__header {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.page__header-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  height: 100%;
  flex-wrap: wrap;
  box-sizing: border-box;
}

.page__header-right-group {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 100%;
  flex-wrap: wrap;
  box-sizing: border-box;
}

/* Date range: From / To pickers */
.page__header-filters {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 100%;
  box-sizing: border-box;
}

/* This toolbar has a fixed height (see .failure-header-card above), so a
   DatePicker's error message (rendered in normal flow, below the input)
   would grow the wrapper taller than the toolbar and overlap the page
   content underneath it. Float it below the input instead, so it never
   affects the toolbar's height. */
.page__header-filters [data-testid$='-wrapper'] {
  position: relative;
}

.page__header-filters [data-testid$='-error-container'] {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  width: 220px;
  z-index: 20;
  background-color: var(--card-solid-bg, var(--DarkBlue-DarkBlue-700, #1e202f));
  border: 1px solid var(--card-solid-border);
  border-radius: 6px;
  padding: 6px 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  align-items: flex-start !important;
}

/* List / Timeline tabs */
.page__header-tabs {
  display: flex;
  align-items: center;
  height: 100%;
  box-sizing: border-box;
}

/* Responsive adjustments */
@media (max-width: 1440px), (max-height: 850px) {
  .failure-header-card,
  .failure-header-card.mnm-card--solid {
    padding: 8px 16px 8px 24px !important;
  }

  .page__header-right-group {
    gap: 12px;
  }

  .page__header-filters {
    gap: 8px;
  }
}

@media (max-width: 1024px) {
  .failure-header-card,
  .failure-header-card.mnm-card--solid {
    height: auto !important;
    padding: 12px !important;
  }

  .page__header-row {
    flex-direction: column;
    align-items: stretch;
    height: auto;
    gap: 16px;
  }

  .page__header-right-group {
    width: 100%;
    justify-content: flex-end;
    gap: 16px;
  }

  .page__header-filters {
    flex: 1;
    gap: 12px;
  }

  .page__header-filters > * {
    flex: 1;
    min-width: 140px;
  }
}

@media (max-width: 768px) {
  .failure-header-card,
  .failure-header-card.mnm-card--solid {
    padding: 12px 16px 12px 24px !important;
  }

  .page__header-right-group {
    flex-direction: column;
    align-items: stretch;
  }

  .page__header-filters {
    width: 100%;
  }

  .page__header-tabs {
    width: 100%;
    justify-content: flex-start;
  }
}

@media (max-width: 480px) {
  .page__header-filters {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
}

/* Hide the Timeline tab from the header */
.page__header-tabs [data-testid*='timeline'],
.page__header-tabs [id*='timeline'],
.page__header-tabs .mnm-tabs__item:nth-child(2),
.page__header-tabs .mnm-tab:nth-child(2),
.page__header-tabs button:nth-child(2),
.page__header-tabs a:nth-child(2),
.page__header-tabs li:nth-child(2) {
  display: none !important;
}
/* failure-list.css */
.list-view__header {
  margin-bottom: 8px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
}

/* List View Control Bar */
.list-view__controls {
  display: flex;
  justify-content: space-between; /* Space items: left-group on left, right-group on right */
  align-items: center;
  gap: 4px;
  margin-bottom: 16px;
  width: 100%;
  box-sizing: border-box;
}

.list-view__left-group {
  flex: 1;
  display: flex;
  align-items: center;
}

.failure-search {
  width: 100%;
  display: flex;
}

.failure-search > * {
  width: 100%;
}

.list-view__total {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text);
}

.list-view__right-group {
  display: flex;
  align-items: center;
  gap: 24px; /* Distance between checkbox and buttons */
  flex-wrap: wrap;
}

.list-view__switch {
  display: flex;
  align-items: center;
}

/* Switch component label text color: white in dark mode, black in light mode */
.list-view__switch,
.list-view__switch label,
.list-view__switch span,
.list-view__switch .mnm-switch__label,
.list-view__switch .mnm-label {
  color: currentColor !important;
}

.list-view__actions {
  display: flex;
  gap: 4px;
  align-items: center;
}

/* Table styling wrapper and internal containers: NO SCROLLBARS AT ALL */
.list-view__table-container,
.list-view__table-container .mnm-table-container,
.list-view__table-container .mnm-table,
.list-view__table-container .mnm-table__body {
  overflow: visible !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
  max-height: none !important;
}

.list-view__table-container {
  width: 100%;
  box-sizing: border-box;
  padding: 0 !important; /* Internal padding to create separation from wrapper container border */
}

/* Table layout & row separation overrides */
.list-view__table-container table {
  border-collapse: separate !important;
  border-spacing: 0 10px !important; /* Beautiful vertical spacing between rows */
  width: 100% !important;
}

/* Elevate the active row stacking context on hover so dropdowns don't paint behind other rows */
.list-view__table-container tr:hover,
.list-view__table-container .mnm-row:hover {
  z-index: 101 !important;
}

/* Row hover background (Figma: Grey 300). Light theme only — dark keeps the library's default slate hover. */
html[data-theme='light'] .list-view__table-container tr:hover,
html[data-theme='light'] .list-view__table-container .mnm-row:hover {
  background-color: var(--Grey-Grey-300, #e0e0e0) !important;
}

/* Ensure the entire row containing an open menu list, focused/active trigger, or expanded trigger has a higher stacking priority than any other hovered row (z-index 99) */
.list-view__table-container tr:focus-within,
.list-view__table-container .mnm-row:focus-within,
.list-view__table-container tr:has(button[aria-expanded='true']),
.list-view__table-container .mnm-row:has(button[aria-expanded='true']),
.list-view__table-container tr:has([aria-expanded='true']),
.list-view__table-container .mnm-row:has([aria-expanded='true']),
.list-view__table-container tr:has(.mnm-menu__list),
.list-view__table-container .mnm-row:has(.mnm-menu__list) {
  z-index: 100 !important;
  position: relative !important;
}

/* Force the dropdown list itself to have an extremely high z-index and stay on top */
.mnm-menu__list {
  z-index: 999999 !important;
}

.list-view__table-container th {
  padding: 8px 16px !important;
  font-weight: 600;
  font-size: 13px;
  color: var(--color-text-secondary, rgba(255, 255, 255, 0.6));
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: none !important; /* No line under headers since rows are separated cards */
  text-align: left;
}

.list-view__table-container td {
  padding: 14px 16px !important; /* Inside row breathing space */
  font-size: 14px;
  background-color: var(--background-color-secondary, #2a2d3d) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.03) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03) !important;
}

/* Rounded corners for the cells on the ends to make rows look like modern cards */
.list-view__table-container tbody tr td:first-child {
  border-left: 1px solid rgba(255, 255, 255, 0.03) !important;
  border-top-left-radius: 8px !important;
  border-bottom-left-radius: 8px !important;
}

.list-view__table-container tbody tr td:last-child {
  border-right: 1px solid rgba(255, 255, 255, 0.03) !important;
  border-top-right-radius: 8px !important;
  border-bottom-right-radius: 8px !important;
}

/* Prevent text wrapping in table headers and cells to keep the layout clean when scrolling horizontally */
.list-view__table-container th,
.list-view__table-container td,
.list-view__table-container .mnm-cell,
.list-view__table-container .mnm-header-cell,
.list-view__table-container .mnm-row__cell,
.list-view__table-container .mnm-header-row__cell,
.list-view__table-container .mnm-header-cell__title {
  white-space: nowrap !important;
}

/* Left-align all table headers, cells, and their inner elements/descendants
   recursively. Icon-only columns (.col-icon: ADR/comments/attachments/menu)
   are re-centered right below, since those hold centered icons, not text. */
.list-view__table-container th,
.list-view__table-container td,
.list-view__table-container .mnm-cell,
.list-view__table-container .mnm-cell *,
.list-view__table-container .mnm-header-cell,
.list-view__table-container .mnm-header-cell *,
.list-view__table-container .mnm-row__cell,
.list-view__table-container .mnm-row__cell *,
.list-view__table-container .mnm-header-row__cell,
.list-view__table-container .mnm-header-row__cell *,
.list-view__table-container .mnm-header-cell__title {
  text-align: left !important;
  justify-content: flex-start !important;
  align-items: center !important;
}

.list-view__table-container .col-icon,
.list-view__table-container .col-icon * {
  text-align: center !important;
  justify-content: center !important;
}

/* Restore horizontal centering for chips inside table cells, overriding recursive alignment */
.list-view__table-container .mnm-chip {
  justify-content: center !important;
  text-align: center !important;
}

/* Prevent recursive centering from aligning dropdown items (Ver detalle, Editar, Eliminar) to center */
.list-view__table-container .mnm-menu__list,
.list-view__table-container .mnm-menu__list * {
  text-align: left !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
}

.list-view__table-container .mnm-menu__item,
.list-view__table-container .mnm-menu__item * {
  text-align: left !important;
  justify-content: flex-start !important;
  align-items: center !important;
}

/* First 5 text columns (both headers and row cells) must contain their space and never overflow/overlap on each other */
.list-view__table-container .mnm-header-cell:nth-child(-n + 5),
.list-view__table-container .mnm-cell:nth-child(-n + 5),
.list-view__table-container .mnm-header-row__cell:nth-child(-n + 5),
.list-view__table-container .mnm-row__cell:nth-child(-n + 5),
.list-view__table-container .mnm-header-cell__title {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Allow the 9th column cell (actions menu) to display absolute-positioned dropdowns without being clipped */
.list-view__table-container td:last-child,
.list-view__table-container .mnm-cell:last-child,
.list-view__table-container .mnm-row__cell:last-child,
.col-icon {
  overflow: visible !important;
}

/* Explicitly override the CSS Grid template columns to make the first 5 columns perfectly equal, and tighten the 4 icon columns */
.list-view__table-container .mnm-header-row,
.list-view__table-container .mnm-row {
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 44px 44px 44px 44px !important;
}

/* Force table rows (.mnm-row) to have a height of exactly 40px */
.list-view__table-container .mnm-row {
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
}

/* Clean class-based styling for icon columns */
.col-icon {
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  text-align: center !important;
  overflow: visible !important; /* Allow the actions menu dropdown to float outside the cell! */
}

/* Wrapper for elements inside icon cells */
.icon-cell-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  width: 100%;
  position: relative;
  overflow: visible !important;
}

.icon-cell-wrapper--active {
  color: currentColor !important;
  opacity: 1 !important;
}

.icon-cell-wrapper--inactive {
  color: currentColor !important;
}

.icon-cell-wrapper--inactive > svg {
  opacity: 0.2 !important;
}

.icon-cell-wrapper--draft-active {
  width: 24px;
  height: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  color: currentColor;
  cursor: pointer;
}

.icon-cell-wrapper--draft-active:hover {
  color: var(--Purple-Purple-400, #d688ff) !important;
}

/* Comment and file count display inline, vertically centered with the icon */
.comment-count-text,
.file-count-text {
  font-size: 10px;
  font-weight: 700;
  color: var(--color-text) !important;
  line-height: 1;
}

/* Ensure all table header titles are in uppercase */
.list-view__table-container .mnm-header-cell__title,
.header-sortable {
  text-transform: uppercase !important;
}

/* Sorting headers & icons */
.header-sortable {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  font: inherit;
  text-align: inherit;
}

.header-sortable:hover {
  opacity: 0.8;
}

.sort-icon {
  font-size: 11px;
  opacity: 0.4;
  margin-left: 4px;
}

.sort-icon--active {
  opacity: 1;
  color: var(--color-purple-500, #b34be9);
}

/* Status cell styling */
.status-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}

.status-icon {
  flex-shrink: 0;
}

.status-text {
  text-transform: capitalize;
}

/* Asset cell content layout */
.asset-cell-content {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  max-width: 100%;
}

.asset-cell-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

/* Tooltip for the Filter and "New failure prediction" (+) action buttons, styled per Figma spec */
.action-tooltip-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.action-tooltip-box {
  display: inline-flex;
  padding: 10px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  border-radius: 6px;
  border: 1px solid var(--DarkBlue-DarkBlue-400, #3e3659);
  background: var(--DarkBlue-DarkBlue-700, #212330);
  box-shadow: 0 0 12px 0 rgba(41, 41, 61, 0.08);
  color: var(--color-text, #ffffff);
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.15s ease,
    visibility 0.15s ease;
  z-index: 1000;
}

.action-tooltip-wrapper:hover .action-tooltip-box,
.action-tooltip-wrapper:focus-within .action-tooltip-box {
  opacity: 1;
  visibility: visible;
}

/* Constrain Tooltip wrappers inside table cells to enable proper ellipsis truncation */
.list-view__table-container .mnm-tooltip-wrapper,
.list-view__table-container .mnm-tooltip-wrapper * {
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.asset-cell-text,
.mode-cell-text {
  display: inline-block !important;
  max-width: 140px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  vertical-align: middle;
}

@media (min-width: 1400px) {
  .asset-cell-text,
  .mode-cell-text {
    max-width: 260px !important;
  }
}

@media (max-width: 1200px) {
  .asset-cell-text,
  .mode-cell-text {
    max-width: 110px !important;
  }
}

@media (max-width: 820px) {
  .asset-cell-text,
  .mode-cell-text {
    max-width: 80px !important;
  }
}

/* Time cell content layout */
.time-cell-content {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  max-width: 100%;
}

.time-date-group {
  display: flex;
  align-items: center;
  gap: 4px;
}

.time-separator {
  color: currentColor !important;
  opacity: 0.5;
  margin: 0 4px;
}

.time-cell-icon {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  color: currentColor !important; /* Automatically white in dark mode, black in light mode */
  opacity: 0.6;
}

/* Pagination row */
.list-view__pagination-container {
  display: flex;
  justify-content: flex-end; /* Align pagination to the right on desktop and tablet */
  align-items: center;
  margin-top: 16px;
  width: 100%;
  box-sizing: border-box;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .list-view__controls {
    justify-content: space-between;
    gap: 16px;
  }
}

@media (max-width: 480px) {
  /* On small mobile screens, stack layout elements */
  .list-view__controls {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .list-view__left-group {
    justify-content: flex-start;
  }

  .list-view__right-group {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .list-view__switch {
    justify-content: flex-end !important;
  }

  .list-view__actions {
    width: 100%;
  }

  .list-view__actions > * {
    width: 100% !important;
    justify-content: center;
  }

  .list-view__pagination-container {
    justify-content: center; /* Center on small mobile for better spacing and ergonomics */
  }
}

@media (max-width: 820px) {
  /* Prevent search and filters/buttons from colliding by stacking them on tablet viewport sizes */
  .list-view__controls {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }

  .list-view__left-group {
    width: 100% !important;
  }

  .list-view__right-group {
    width: 100% !important;
    justify-content: space-between !important;
    gap: 12px !important;
  }

  /* Hide Última act, Mensaje (Comments), and Archivos (Attachments) columns on smaller screens, keeping Draft (ADR) visible */
  .list-view__table-container th:nth-child(5),
  .list-view__table-container td:nth-child(5),
  .list-view__table-container th:nth-child(7),
  .list-view__table-container td:nth-child(7),
  .list-view__table-container th:nth-child(8),
  .list-view__table-container td:nth-child(8),
  .list-view__table-container .mnm-header-cell:nth-child(5),
  .list-view__table-container .mnm-cell:nth-child(5),
  .list-view__table-container .mnm-header-cell:nth-child(7),
  .list-view__table-container .mnm-cell:nth-child(7),
  .list-view__table-container .mnm-header-cell:nth-child(8),
  .list-view__table-container .mnm-cell:nth-child(8),
  .list-view__table-container .mnm-header-row__cell:nth-child(5),
  .list-view__table-container .mnm-row__cell:nth-child(5),
  .list-view__table-container .mnm-header-row__cell:nth-child(7),
  .list-view__table-container .mnm-row__cell:nth-child(7),
  .list-view__table-container .mnm-header-row__cell:nth-child(8),
  .list-view__table-container .mnm-row__cell:nth-child(8) {
    display: none !important;
  }

  /* Redefine grid template columns to fit the remaining 6 visible columns perfectly, allocating more width to Time and less to Severity, and showing ADR */
  .list-view__table-container .mnm-header-row,
  .list-view__table-container .mnm-row {
    grid-template-columns: 1.2fr 1.2fr 90px 1.6fr 44px 44px !important;
  }

  /* Make table content and headings more compact on tablet viewports */
  .list-view__table-container td {
    padding: 6px 8px !important;
    font-size: 12px !important;
  }

  .list-view__table-container th {
    padding: 6px 8px !important;
    font-size: 11px !important;
  }

  /* Reset horizontal padding on icon columns on tablet to allow the 32px trigger to fit inside the 44px column */
  .list-view__table-container td.col-icon,
  .list-view__table-container .col-icon {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Optimize space for dates inside Time cell */
  .list-view__table-container .time-cell-icon {
    width: 12px !important;
    height: 12px !important;
  }

  .time-cell-content {
    gap: 4px !important;
  }

  .time-date-group {
    gap: 2px !important;
  }

  .time-separator {
    margin: 0 2px !important;
  }
}

/* Media query for laptop/notebook screens (both width-based and height-based limits, typical for 14" laptops) */
@media (max-width: 1440px), (max-height: 850px) {
  /* Make list-view controls more compact */
  .list-view__controls {
    margin-bottom: 8px !important;
    gap: 8px !important;
  }

  /* Make row padding and row spacing smaller */
  .list-view__table-container {
    padding: 0 !important; /* Reduce outer padding */
  }

  .list-view__table-container table {
    border-spacing: 0 4px !important; /* Reduce vertical spacing between rows */
  }

  .list-view__table-container td {
    padding: 6px 12px !important; /* Reduce cell padding for smaller row height */
    font-size: 13px !important;
  }

  .list-view__table-container th {
    padding: 6px 12px !important;
    font-size: 12px !important;
  }

  /* Compact header height / spacing */
  .list-view__header {
    margin-bottom: 4px !important;
  }
}

/* Center the three dots SVG inside the Menu trigger circular button (Figma: Menu / Terciary / Large) */
/* Selector is scoped with .list-view__table-container .col-icon to out-specificity the
   ".list-view__table-container td:nth-child(2) *" rule above, which otherwise wins the
   justify-content cascade (same !important, higher specificity) and left-aligns the icon. */
.list-view__table-container .col-icon .mnm-menu__trigger {
  box-sizing: border-box !important;
  width: 26px !important;
  height: 26px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 0 !important;
  line-height: 0 !important;
  border-radius: 100px !important;
  z-index: auto !important;
}

.list-view__table-container .col-icon .mnm-menu__trigger svg {
  display: block !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
}

/* Light theme overrides for Menu trigger */
html[data-theme='light']
  .list-view__table-container
  .col-icon
  .mnm-menu__trigger {
  color: #1c1a27 !important;
}

html[data-theme='light']
  .list-view__table-container
  .col-icon
  .mnm-menu__trigger
  svg {
  color: #1c1a27 !important;
}

/* Menu trigger hover background (Figma: Grey 400), distinct from the darker --open state below */
html[data-theme='light']
  .list-view__table-container
  .col-icon
  .mnm-menu__trigger:hover {
  background-color: var(--Grey-Grey-400, #cccccc) !important;
}

/* Ensure the Menu trigger has the correct background and no purple when open or selected */
.list-view__table-container
  .col-icon
  .mnm-menu__trigger.mnm-menu__trigger--open,
.list-view__table-container
  .col-icon
  .mnm-menu__trigger.mnm-menu__trigger--open:hover,
.list-view__table-container
  .col-icon
  .mnm-menu__trigger.mnm-menu__trigger--open:focus {
  background-color: var(--DarkBlue-DarkBlue-600, #2a2d3d) !important;
  color: var(--color-text-primary, #ffffff) !important;
  border-color: transparent !important;
  box-shadow: none !important;
  z-index: 100 !important;
}

.list-view__table-container
  .col-icon
  .mnm-menu__trigger.mnm-menu__trigger--open
  svg,
.list-view__table-container
  .col-icon
  .mnm-menu__trigger.mnm-menu__trigger--open:hover
  svg,
.list-view__table-container
  .col-icon
  .mnm-menu__trigger.mnm-menu__trigger--open:focus
  svg {
  color: var(--color-text-primary, #ffffff) !important;
}

/* Light theme overrides for Menu trigger when open (grey 400 / #cccccc) */
html[data-theme='light']
  .list-view__table-container
  .col-icon
  .mnm-menu__trigger.mnm-menu__trigger--open,
html[data-theme='light']
  .list-view__table-container
  .col-icon
  .mnm-menu__trigger.mnm-menu__trigger--open:hover,
html[data-theme='light']
  .list-view__table-container
  .col-icon
  .mnm-menu__trigger.mnm-menu__trigger--open:focus {
  background-color: var(--Grey-Grey-400, #cccccc) !important;
  color: #1c1a27 !important;
}

html[data-theme='light']
  .list-view__table-container
  .col-icon
  .mnm-menu__trigger.mnm-menu__trigger--open
  svg,
html[data-theme='light']
  .list-view__table-container
  .col-icon
  .mnm-menu__trigger.mnm-menu__trigger--open:hover
  svg,
html[data-theme='light']
  .list-view__table-container
  .col-icon
  .mnm-menu__trigger.mnm-menu__trigger--open:focus
  svg {
  color: #1c1a27 !important;
}

/* Light theme overrides for Menu Dropdown List and Items */
html[data-theme='light'] .list-view__table-container .mnm-menu__list {
  background-color: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

html[data-theme='light'] .list-view__table-container .mnm-menu__item {
  background-color: transparent !important;
  color: #1c1a27 !important;
}

html[data-theme='light'] .list-view__table-container .mnm-menu__item:hover {
  background-color: #f0f2f5 !important;
  color: #1c1a27 !important;
}

html[data-theme='light'] .list-view__table-container .mnm-menu__item svg,
html[data-theme='light'] .list-view__table-container .mnm-menu__item-icon svg {
  color: #5c5e66 !important;
}

html[data-theme='light'] .list-view__table-container .mnm-menu__item:hover svg,
html[data-theme='light']
  .list-view__table-container
  .mnm-menu__item-icon:hover
  svg {
  color: #1c1a27 !important;
}

/* Styling for filter active chip and dot badge */
.list-view__actions .mnm-chip,
.list-view__actions [class*='chip'] {
  background-color: var(--Purple-Purple-400, #d688ff) !important;
  color: #1c1a27 !important;
  font-weight: 600;
}
.files-tab-pane {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.files-pane-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.files-sort-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--Grey-Grey-600, #949494);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* List container and item rows, matching the Comments tab card style */
.files-list-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.file-item-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  transition: background-color 0.2s;
}

.file-item-row:hover {
  background: rgba(255, 255, 255, 0.04);
}

html[data-theme='light'] .file-item-row {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.06);
}

html[data-theme='light'] .file-item-row:hover {
  background: rgba(0, 0, 0, 0.04);
}

.file-item-top,
.file-item-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.file-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text, #ffffff);
  cursor: pointer;
  transition: color 0.2s;
}

.file-name:hover {
  color: var(--background-color-primary, #b34be9);
}

.file-size {
  font-size: 12px;
  color: var(--Grey-Grey-600, #949494);
}

.file-date {
  font-size: 13px;
  color: var(--Grey-Grey-600, #949494);
}

.file-actions-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

.icon-button {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: var(--color-text, #ffffff);
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

html[data-theme='light'] .icon-button {
  color: #000000;
}

.icon-button:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--background-color-primary, #b34be9);
}

html[data-theme='light'] .icon-button:hover {
  background: rgba(0, 0, 0, 0.06);
}

/* Add-file modal: drag & drop zone */
.file-drag-drop-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  border: 2px dashed var(--background-color-primary, #b34be9);
  border-radius: 8px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.02);
  transition: all 0.2s;
  gap: 12px;
  text-align: center;
  margin-bottom: 20px;
  width: 100%;
  box-sizing: border-box;
}

html[data-theme='light'] .file-drag-drop-zone {
  background: rgba(0, 0, 0, 0.02);
}

.file-drag-drop-zone.dragging {
  border: 2px solid var(--background-color-primary, #b34be9);
  background: rgba(179, 75, 233, 0.06);
}

.file-drag-drop-icon {
  width: 32px;
  height: 32px;
  color: var(--Grey-Grey-600, #949494);
}

.file-drag-drop-title {
  margin: 0 0 4px 0;
  font-weight: 500;
  font-size: 15px;
  color: var(--color-text, #ffffff);
}

.file-drag-drop-caption {
  margin: 0;
  font-size: 12px;
  color: var(--Grey-Grey-600, #949494);
}

/* Add-file modal: staged files thumbnail grid */
.staged-files-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 20px;
}

.staged-file-thumb {
  position: relative;
  width: 84px;
  height: 84px;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

html[data-theme='light'] .staged-file-thumb {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.08);
}

.staged-file-badge {
  position: absolute;
  top: 4px;
  left: 4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background-color: var(--background-color-primary, #b34be9);
  color: #ffffff;
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.staged-file-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.staged-file-generic-icon {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--Grey-Grey-600, #949494);
}

.staged-file-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background-color: rgba(0, 0, 0, 0.6);
  color: #ffffff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.file-modal-footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 16px;
  margin-top: 8px;
}

html[data-theme='light'] .file-modal-footer {
  border-top-color: rgba(0, 0, 0, 0.08);
}
.changelog-tab-pane {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  gap: 16px;
  width: 100%;
}

.changelog-pane-header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
}

.changelog-sort-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--Grey-Grey-600, #949494);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}

.changelog-sort-label:hover {
  color: var(--color-text, #ffffff);
}

.changelog-sort-icon {
  transition: transform 0.2s ease;
}

.changelog-sort-icon--desc {
  transform: rotate(180deg);
}

/* List container and item rows, matching the Files tab card style */
.changelog-list-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.changelog-item-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  transition: background-color 0.2s;
}

.changelog-item-row:hover {
  background: rgba(255, 255, 255, 0.04);
}

html[data-theme='light'] .changelog-item-row {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.06);
}

html[data-theme='light'] .changelog-item-row:hover {
  background: rgba(0, 0, 0, 0.04);
}

.changelog-item-top,
.changelog-item-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.changelog-description {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text, #ffffff);
}

.changelog-date {
  font-size: 13px;
  color: var(--Grey-Grey-600, #949494);
}

.changelog-user {
  font-size: 12px;
  color: var(--Grey-Grey-600, #949494);
}
.events-tab-pane {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.events-pane-header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  margin-bottom: 4px;
}

/* Stretch the table container slightly wider than the content box to maximize layout width */
.events-table-container {
  width: calc(100% + 24px);
  margin-left: -12px;
}

/* 
  OVERRIDE global !important rule from failure-list.css 
  Enforce precise CSS Grid layout for view mode (5 columns) 
*/
.events-table-container .mnm-header-row,
.events-table-container .mnm-row {
  grid-template-columns: 32px 1fr 2fr 1fr 1fr !important;
}

/* 
  OVERRIDE global !important rule from failure-list.css 
  Enforce precise CSS Grid layout for edit mode (6 columns) 
*/
.events-table-container.events-table-container--edit .mnm-header-row,
.events-table-container.events-table-container--edit .mnm-row {
  grid-template-columns: 32px 1fr 2fr 1fr 1fr 40px !important;
}

/* Modal Table CSS Grid layout (6 columns: Checkbox, Severity, Type, Property, Start, End) */
.link-modal-table-container .mnm-header-row,
.link-modal-table-container .mnm-row {
  grid-template-columns: 40px 1.2fr 1.5fr 2fr 1.5fr 1.5fr !important;
}

/* Ensure header cells do not truncate their text */
.link-modal-table-container .mnm-header-cell__title {
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

/* Modal sizing override to ensure there's plenty of space for 5 columns */
.link-event-coincidence-modal {
  width: 90vw !important;
  max-width: 1100px !important;
}

/* Modal Table Row Card Styling */
.link-modal-table-container .mnm-row {
  background-color: var(--row-bg) !important;
  color: var(--row-cell-color) !important;
  border-radius: var(--row-radius, 8px) !important;
  border: 1px solid rgba(255, 255, 255, 0.03) !important;
  margin-bottom: 8px !important;
  transition:
    background-color 0.2s ease,
    transform 0.15s ease !important;
  box-sizing: border-box !important;
  cursor: pointer;
}

.link-modal-table-container .mnm-row:hover {
  background-color: rgba(255, 255, 255, 0.06) !important;
}

html[data-theme='light'] .link-modal-table-container .mnm-row {
  border: 1px solid rgba(0, 0, 0, 0.04) !important;
}

.link-modal-selected-row {
  border-color: var(--color-purple-500, #b34be9) !important;
  background-color: rgba(179, 75, 233, 0.1) !important;
}

/* 
  Style each row using native CSS variables for row background, cell color, and radius.
  This ensures perfect matching with the initial/main list view table in both themes.
*/
.events-table-container .mnm-row {
  background-color: var(--row-bg) !important;
  color: var(--row-cell-color) !important;
  border-radius: var(--row-radius, 8px) !important;
  border: 1px solid rgba(255, 255, 255, 0.03) !important;
  margin-bottom: 8px !important;
  transition:
    background-color 0.2s ease,
    transform 0.15s ease !important;
  box-sizing: border-box !important;
}

.events-table-container .mnm-row:hover {
  background-color: rgba(255, 255, 255, 0.06) !important;
}

.event-type-cell-content {
  display: flex;
  align-items: center;
  gap: 8px;
}

.event-type-text {
  font-size: 14px;
  font-weight: 500;
}

html[data-theme='light'] .event-type-text {
  color: #000000;
}

html[data-theme='dark'] .event-type-text {
  color: #ffffff;
}

.event-severity-cell-content {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

/* Ensure all headers and cells in the modal table are left-aligned */
.link-modal-table-container .mnm-cell,
.link-modal-table-container .mnm-header-cell {
  justify-content: flex-start !important;
  text-align: left !important;
  align-items: center !important;
}

/* Truncate long property values with ellipsis (...) */
.events-table-container .mnm-cell {
  min-width: 0 !important;
}

.events-table-container [data-testid^='event-property-'] {
  display: block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Override library's built-in modal title styles to match Figma specifications */
.link-event-coincidence-modal .mnm-modal__title {
  font-weight: 400 !important;
  line-height: 30px !important;
}

/* Custom header content layout matching Figma spec */
.link-event-coincidence-modal .mnm-modal__header-content {
  display: flex !important;
  width: 766px !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 8px !important;
}

/* Styled active status chip when event finished date is not present */
.mnm-chip--active {
  display: inline-flex !important;
  padding: 1px 8px !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 2px !important;
  border-radius: 100px !important;
  border: 1px solid var(--Alarm-Severity-Active, #264dc1) !important;
  background: var(
    --alarm-severity-active-bg,
    rgba(38, 77, 193, 0.15)
  ) !important;
  color: #ffffff !important; /* White in dark theme by default */
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  line-height: 12px !important;
  width: max-content !important;
}

html[data-theme='light'] .mnm-chip--active {
  color: var(--Alarm-Severity-Active, #264dc1) !important;
}

/* Styled smaller date cell text to prevent overlapping */
.event-date-cell {
  font-size: 12px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
/* detail-failure-prediction.css */

/* @monom/monom-components ships this class with its width disabled, but we
   override it explicitly so this modal never depends on that fixed size. */
.mnm-modal--xl {
  width: auto !important;
}

/* Custom modal sizing: occupy almost the full viewport on every screen size */
.detail-modal-custom-width {
  position: relative !important;
  margin: 0 !important;
  width: 96vw !important;
  max-width: 1800px !important;
  height: auto !important;
  max-height: 95vh !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
  padding: 20px 40px 40px !important;
  box-sizing: border-box !important;
  overflow-y: auto !important; /* Allow vertical scrolling when content exceeds viewport height */
  overflow-x: hidden !important; /* Avoid horizontal scrolling */
  scrollbar-width: none !important; /* Firefox */
  -ms-overflow-style: none !important; /* IE and Edge */
  border-radius: 12px !important;
  border: 1px solid
    var(--modal-border-color, var(--DarkBlue-DarkBlue-400, #3e3659)) !important;
  background-color: var(
    --modal-bg,
    var(--DarkBlue-DarkBlue-900, #0a051a)
  ) !important;
  box-shadow: var(--modal-shadow) !important;
}

.detail-modal-custom-width::-webkit-scrollbar {
  display: none !important; /* Chrome, Safari and Opera */
}

html[data-theme='dark'] .detail-modal-custom-width {
  background-color: var(--DarkBlue-DarkBlue-900, #0a051a) !important;
}

html[data-theme='light'] .detail-modal-custom-width {
  background-color: var(--modal-bg, #ffffff) !important;
  border-color: var(--modal-border-color, rgba(0, 0, 0, 0.1)) !important;
}

.mnm-card--solid {
  background-color: var(--card-solid-bg) !important;
  border: 1px solid var(--card-solid-border) !important;
}

/* Ensure the inner children of the modal stretch to fit the modal width exactly and never overflow */
.detail-modal-custom-width > div {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.detail-loading-container,
.detail-error-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 350px;
  width: 100%;
  color: var(--color-text, #ffffff);
  font-family: inherit;
}

.detail-failure-prediction {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  box-sizing: border-box;
}

/* Header Section */
.detail-header {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: auto; /* Allow negative margin-right to expand width */
  margin-right: -34px; /* Pull the header to the right to align trash button vertically under close X */
  margin-left: -34px; /* Pull the header to the left to align with padding of the modal and prevent overflow */
  padding-left: 34px; /* Compensate for negative left margin to keep text aligned */
  padding-bottom: 16px;
  box-sizing: border-box;
  margin-top: -34px; /* Pull the header up to align perfectly on the same line as the modal's close X button */
  padding-right: 0px; /* Reset padding-right to allow alignment */
  pointer-events: none; /* Let clicks on empty area pass through to the close X button of the modal */
}

.detail-header__top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding-right: 60px; /* Leaves room for close X button on the right */
  box-sizing: border-box;
  pointer-events: none;
}

.detail-header__top-right-actions {
  display: flex;
  align-items: center;
  pointer-events: auto; /* Allow clicks on children */
}

.detail-header__ask-hannah-container {
  display: flex;
  align-items: center;
  gap: 8px;
  transform: translateY(
    -9px
  ); /* Align perfectly centered with the close X button */
  margin-right: 15px; /* Space between the ask Hannah button and the trash button */
}

.detail-header__ask-hannah-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background-color: var(--background-color-primary, #b34be9);
  border: none;
  border-radius: 50%;
  padding: 0;
  margin: 0;
  cursor: pointer;
  transition:
    transform 0.2s ease,
    background-color 0.2s ease;
}

.detail-header__ask-hannah-icon-btn:hover {
  transform: scale(1.08);
  background-color: #9e36d4; /* Slightly darker purple for hover feedback */
}

.detail-header__ask-hannah-icon-btn .detail-header__hannah-icon {
  width: 14px;
  height: 14px;
  color: #ffffff;
  margin: 0;
  flex-shrink: 0;
}

.detail-header__ask-hannah-text {
  color: var(--color-text, #ffffff);
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  user-select: none;
}

.detail-header__meta-title {
  color: var(--color-text, #ffffff);
  font-feature-settings:
    'liga' off,
    'clig' off;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: 30px; /* 125% */
  pointer-events: none;
}

html[data-theme='dark'] .detail-header__meta-title {
  color: #ffffff !important;
}

html[data-theme='light'] .detail-header__meta-title {
  color: #000000 !important;
}

.detail-header__main-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  width: 100%;
  padding-right: 41px; /* Align trash icon vertically directly below the close X button */
  box-sizing: border-box;
}

.detail-header__left {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  flex: 1 1 auto; /* Take remaining space instead of splitting evenly with
    .detail-header__right, so it's the title that shrinks/truncates. */
  min-width: 80px; /* Floor so the ellipsis has room to show *something*
    instead of the title collapsing to ~0 width on narrow screens. */
  pointer-events: auto; /* Enable clicks on left header items */
}

.detail-header__text-wrapper {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.detail-header__title {
  color: var(--color-text, #ffffff);
  font-feature-settings:
    'liga' off,
    'clig' off;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: 30px; /* 125% */
  margin: 0;
  min-width: 0;
  overflow: hidden;
}

/* Reset inherited h1 typography on Select elements in the header */
.detail-header__title:has(.mnm-select) {
  overflow: visible;
}

.detail-header__title .mnm-select,
.detail-header__title .mnm-select * {
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: normal !important;
}

.detail-header__asset-type-label {
  color: var(--Purple-Purple-400, #d688ff);
  font-feature-settings:
    'liga' off,
    'clig' off;
  /* Label M */
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 11px;
  font-style: normal;
  font-weight: 500;
  line-height: 18px; /* 163.636% */
  letter-spacing: 2.42px;
  text-transform: uppercase;
  margin: 0;
}

.detail-header__icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.detail-header__asset-icon,
.detail-header__asset-icon.mnm-icons-sm {
  width: 40px !important;
  height: 40px !important;
  color: var(--color-text, #ffffff) !important;
}

.detail-header__subtitle {
  display: block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.detail-header__right {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
  pointer-events: auto; /* Enable clicks on right header items */
}

.detail-header__status-block {
  display: flex;
  flex-direction: row;
  gap: 6px;
  align-items: center;
}

.detail-header__status-label {
  color: var(--Grey-Grey-600, #949494);
  font-feature-settings:
    'liga' off,
    'clig' off;
  /* Label S bold */
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 9px;
  font-style: normal;
  font-weight: 700;
  line-height: 12px; /* 133.333% */
  letter-spacing: 1.8px;
  text-transform: uppercase;
  margin: 0;
}

.detail-header__status-badge {
  color: var(--color-text, #ffffff);
  font-feature-settings:
    'liga' off,
    'clig' off;
  /* Label S */
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 9px;
  font-style: normal;
  font-weight: 500;
  line-height: 12px; /* 133.333% */
  letter-spacing: 1.8px;
  text-transform: uppercase;
  margin: 0;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

.detail-header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.detail-header__action-btn {
  all: unset;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  color: var(--color-text, #ffffff);
  cursor: pointer;
  transition: all 0.2s;
  box-sizing: border-box;
}

.detail-header__action-btn:hover {
  color: var(--background-color-primary, #b34be9) !important;
}

.detail-header__action-btn--delete:hover {
  color: var(--background-color-primary, #b34be9) !important;
}

.detail-header__action-icon {
  width: 18px;
  height: 18px;
}

/* Metadata Card
   width must be !important: @monom/monom-components ships .mnm-card with
   its own fixed width (470px), same specificity as this rule, so without
   !important it depends on cascade order to win and can silently regress. */
.detail-info-card {
  width: 100% !important;
  box-sizing: border-box !important;
  background-color: var(
    --card-solid-bg,
    var(--DarkBlue-DarkBlue-700, #1e202f)
  ) !important;
  border: 1px solid var(--card-solid-border) !important;
  border-radius: var(--card-border-radius, 12px) !important;
}

.detail-info-card .mnm-card__header {
  display: none !important;
}

.detail-info-title {
  margin: 0;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text, #ffffff);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.detail-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px 40px;
  padding: 8px 0;
  min-width: 0;
}

.detail-info-column {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

/* Guard against the two DatePickers overflowing their grid column: wrap onto
   their own rows instead of forcing a fixed width past the available space. */
.detail-date-range-edit-column {
  min-width: 0;
}

.detail-date-range-edit-container {
  flex-wrap: wrap !important;
}

.detail-date-range-edit-container .detail-info-item-select {
  min-width: 140px;
}

.detail-info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 8px;
}

.detail-info-item:last-child {
  padding-bottom: 0;
}

.detail-info-item-select {
  width: 100%;
  box-sizing: border-box;
}

/* Completely eliminate any horizontal divider lines or borders within the metadata card fields */
.detail-info-card .detail-info-item {
  border-bottom: none !important;
}

.detail-info-card label,
.detail-info-label {
  font-size: 16px;
  font-weight: 500;
  color: var(--Grey-Grey-600, #949494) !important;
}

/* @monom/monom-components >=1.60 dropped the underline from
   .mnm-input-view-container (border-bottom -> border: 0). Restore it here,
   scoped to this card only, so upgrading the library doesn't change how
   this screen looks. */
.detail-info-grid .mnm-input-view-container,
.assets-tab-pane .mnm-input-view-container {
  width: 100% !important;
}

.detail-info-value {
  font-size: 13px;
  color: var(--color-text, #ffffff);
  font-weight: 400;
  text-align: right;
}

/* Ensure labels in assets tab pane match detail view style exactly */
.assets-tab-pane label,
.assets-tab-pane .detail-info-label {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--Grey-Grey-600, #949494) !important;
}

/* Ensure chips in assets tab are grey instead of green */
.assets-tab-pane .mnm-chip,
.assets-tab-pane [class*='chip'] {
  background-color: var(--chip-grey-bg, rgba(255, 255, 255, 0.08)) !important;
  color: var(--chip-grey-text, #e2e2e2) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

html[data-theme='light'] .assets-tab-pane .mnm-chip,
html[data-theme='light'] .assets-tab-pane [class*='chip'] {
  background-color: #f2f2f2 !important;
  color: #111111 !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
}

/* Style for action links in the asset tab */
.asset-action-link {
  transition:
    color 0.2s ease,
    opacity 0.2s ease;
}

.asset-action-link:hover {
  text-decoration: underline !important;
  opacity: 0.85;
}

/* Date range with Calendar icons style */
.detail-date-range-container {
  display: flex;
  align-items: center;
  gap: 6px 12px;
  flex-wrap: wrap; /* Wrap "to" onto its own line instead of clipping on narrow columns */
  min-width: 0;
}

.detail-date-item {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.detail-date-preposition {
  color: var(--Grey-Grey-600, #949494);
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  text-transform: lowercase;
}

.detail-date-icon {
  width: 14px;
  height: 14px;
  color: var(--color-text, #ffffff) !important;
  flex-shrink: 0;
}

.detail-date-value {
  font-size: 13px;
  color: var(--color-text, #ffffff);
  font-weight: 400;
}

.detail-info-value-status {
  font-size: 12px;
  font-weight: 600;
  color: var(--background-color-primary, #b34be9);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Columns Section */
.detail-layout-columns-section {
  display: grid;
  grid-template-columns: 40fr 60fr;
  gap: 20px;
  width: 100%;
}

/* Edit Mode Footer */
.detail-layout-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  width: 100%;
  padding-top: 20px;
  margin-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  box-sizing: border-box;
}

.detail-footer-left {
  display: flex;
  align-items: center;
}

.detail-footer-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

.detail-footer-metadata {
  display: flex;
  align-items: center;
  gap: 24px;
  justify-content: flex-end;
}

.detail-footer-metadata-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.detail-footer-metadata-label {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--Grey-Grey-600, #949494);
}

.detail-footer-metadata-value {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: var(--color-text, #ffffff);
}

.detail-footer-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

html[data-theme='light'] .detail-layout-footer {
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.detail-layout-column {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0; /* Prevents flex items from overflowing */
  height: 100%;
}

/* Action Detail Card (Comments / Changelog)
   width must be !important: @monom/monom-components ships .mnm-card with
   its own fixed width (470px), same specificity as this rule, so without
   !important it depends on cascade order to win -- it silently lost,
   making both columns render at a fixed ~470px instead of following the
   35/65 grid split from .detail-layout-columns-section. */
.detail-action-card,
.detail-adrs-card {
  width: 100% !important;
  min-height: 480px !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
  background-color: var(--card-solid-bg) !important;
  border: 1px solid var(--card-solid-border) !important;
  border-radius: var(--card-border-radius, 12px) !important;
  height: 100% !important;
  flex: 1 !important;
  /* Grid/flex items default to min-width:auto (shrink-to-fit their content's
     intrinsic size). Without min-width:0 here, unwrapped content (e.g. the
     action tabs) could force these cards wider than their column, and since
     the modal clips overflow-x, that content got silently cut off instead of
     scrolling or wrapping. */
  min-width: 0;
}

/* @monom/monom-components' Card always renders a title header; these cards
   have no title in this layout, so hide it (matches .detail-info-card). */
.detail-action-card .mnm-card__header,
.detail-adrs-card .mnm-card__header {
  display: none !important;
}

/* @monom/monom-components' Card wraps children in .mnm-card__content, which
   only sets flex: 1 (relying on .mnm-card being the flex column parent) but
   is not itself a flex container. That breaks the flex: 1 chain down to
   .detail-action-content / .comments-tab-pane / .comments-list-container,
   so instead of stretching to fill the card they kept their natural content
   height, leaving a large blank gap whenever the sibling card was taller. */
.detail-action-card > .mnm-card__content,
.detail-adrs-card > .mnm-card__content {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.detail-action-tabs {
  margin-bottom: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}

.detail-action-tabs::-webkit-scrollbar {
  display: none;
}

.detail-action-tabs .mnm-tabs-view__badge {
  border-radius: 100px !important;
  background: var(--DarkBlue-DarkBlue-500, #35394e) !important;
  color: var(--color-text, #ffffff) !important;
}

html[data-theme='light'] .detail-action-tabs .mnm-tabs-view__badge {
  background: var(--Grey-Grey-200, #e2e2e2) !important;
  color: var(--Grey-Grey-600, #949494) !important;
}

.detail-action-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.comments-tab-pane {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  gap: 16px;
}

.comments-pane-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.comments-mark-read-switch-container {
  display: flex;
  justify-content: flex-end;
}

.comments-add-toggle-btn {
  background: transparent;
  border: none;
  padding: 0;
  color: var(--Purple-Purple-400, #d688ff);
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.comments-add-toggle-btn:hover {
  opacity: 0.8;
}

.comments-add-toggle-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.comments-add-toggle-btn:disabled:hover {
  opacity: 0.4;
}

.comments-add-toggle-icon {
  width: 16px;
  height: 16px;
}

.comments-list-container {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-right: 6px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Scrollbar Customization */
.comments-list-container::-webkit-scrollbar,
.changelog-list-container::-webkit-scrollbar,
.adrs-tabs-container::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.comments-list-container::-webkit-scrollbar-track,
.changelog-list-container::-webkit-scrollbar-track,
.adrs-tabs-container::-webkit-scrollbar-track {
  background: transparent;
}

.comments-list-container::-webkit-scrollbar-thumb,
.changelog-list-container::-webkit-scrollbar-thumb,
.adrs-tabs-container::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

.comments-list-container::-webkit-scrollbar-thumb:hover,
.changelog-list-container::-webkit-scrollbar-thumb:hover,
.adrs-tabs-container::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.no-comments-message,
.no-changelog-message {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 120px;
  font-size: 14px;
  color: var(--color-text-secondary, rgba(255, 255, 255, 0.6));
  font-style: italic;
}

.comment-item {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 0;
  padding: 12px 0;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: 6px;
  transition: background-color 0.2s;
}

html[data-theme='light'] .comment-item {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.comment-item:hover {
  background: transparent;
}

.comment-item--unread {
  border-left: none;
  background: transparent;
}

.comment-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.comment-item-meta {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Comment Meta Icons (Mail/MailOpen) */
.comment-meta-icon {
  width: 16px !important;
  height: 16px !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
}

/* Mail icon (comentario sin leer / unread): Color Purple 400 */
.comment-meta-icon--unread {
  color: var(--Purple-Purple-400, #d688ff) !important;
}

/* MailOpen icon (comentario abierto / leido): Blanco en Dark theme, Negro en Light theme */
.comment-meta-icon--read {
  color: #ffffff !important;
}

html[data-theme='light'] .comment-meta-icon--read {
  color: #000000 !important;
}

.comment-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-weight: 600;
  font-size: 13px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.comment-author-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.comment-item-author {
  font-size: 13px;
  font-weight: normal;
  color: var(--color-text, #ffffff);
}

.comment-item--unread .comment-item-author {
  color: var(--Purple-Purple-400, #d688ff) !important;
  font-weight: normal;
}

.comment-item-date {
  font-size: 11px;
  color: var(--Grey-Grey-600, #949494) !important;
}

.comment-read-toggle-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  color: var(--color-text-secondary, rgba(255, 255, 255, 0.6));
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.comment-read-toggle-btn:hover {
  color: var(--color-text, #ffffff);
  background: rgba(255, 255, 255, 0.05);
}

.comment-status-icon {
  width: 16px;
  height: 16px;
}

.comment-status-icon--unread {
  color: var(--background-color-primary, #b34be9);
}

.comment-item-text {
  font-size: 13px;
  line-height: 1.5;
  color: var(--Grey-Grey-600, #949494) !important;
  word-break: break-word;
}

.comment-item-footer {
  display: flex !important;
  justify-content: flex-end !important;
}

/* Comment Header Actions: Switch + Read + Edit Button + Delete Button */
.comment-header-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.comment-read-switch-wrapper {
  display: inline-flex !important;
  align-items: center !important;
}

.comment-read-switch-wrapper .mnm-switch {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  height: auto !important;
  line-height: normal !important;
  cursor: pointer !important;
}

.comment-read-switch-wrapper .mnm-switch__track {
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
}

.comment-read-switch-wrapper,
.comment-read-switch-wrapper label,
.comment-read-switch-wrapper span,
.comment-read-switch-wrapper .mnm-switch__label,
.comment-read-switch-wrapper .mnm-label {
  color: var(--color-text, #ffffff) !important;
  display: inline-flex !important;
  align-items: center !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  user-select: none !important;
}

html[data-theme='light'] .comment-read-switch-wrapper,
html[data-theme='light'] .comment-read-switch-wrapper label,
html[data-theme='light'] .comment-read-switch-wrapper span,
html[data-theme='light'] .comment-read-switch-wrapper .mnm-switch__label,
html[data-theme='light'] .comment-read-switch-wrapper .mnm-label {
  color: #000000 !important;
}

.comment-item--unread .comment-read-switch-wrapper,
.comment-item--unread .comment-read-switch-wrapper label,
.comment-item--unread .comment-read-switch-wrapper span,
.comment-item--unread .comment-read-switch-wrapper .mnm-switch__label,
.comment-item--unread .comment-read-switch-wrapper .mnm-label {
  color: var(--Grey-Grey-600, #949494) !important;
  font-weight: normal !important;
}

.comment-action-btn {
  background: transparent !important;
  border: none !important;
  padding: 4px !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--color-text, #ffffff) !important;
  transition: all 0.2s ease !important;
  border-radius: 4px !important;
}

html[data-theme='light'] .comment-action-btn {
  color: #000000 !important;
}

.comment-action-btn:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--background-color-primary, #b34be9) !important;
}

html[data-theme='light'] .comment-action-btn:hover {
  background: rgba(0, 0, 0, 0.06) !important;
}

.comment-action-icon {
  width: 16px !important;
  height: 16px !important;
}

/* Comment Form */
.add-comment-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 16px;
}

.add-comment-textarea {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 10px 12px;
  color: var(--color-text, #ffffff);
  font-family: inherit;
  font-size: 13px;
  line-height: 1.4;
  resize: none;
  outline: none;
  box-sizing: border-box;
  width: 100%;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}

.add-comment-textarea:focus {
  border-color: var(--background-color-primary, #b34be9);
  box-shadow: 0 0 0 1px var(--background-color-primary, #b34be9);
}

.add-comment-textarea:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.add-comment-actions {
  display: flex;
  justify-content: flex-end;
}

/* Changelog */
.changelog-list-container {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.changelog-item {
  background: rgba(255, 255, 255, 0.01);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 6px;
  padding: 12px;
}

.changelog-code {
  margin: 0;
  font-family: monospace;
  font-size: 12px;
  color: var(--color-text-secondary, rgba(255, 255, 255, 0.6));
  white-space: pre-wrap;
  word-break: break-all;
}

/* ADRs Card */
.detail-adrs-title {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text, #ffffff);
}

.no-adrs-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  margin-top: 48px;
}

.adrs-content-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
  min-height: 0;
}

.adrs-tabs-container {
  margin-bottom: 8px;
}

.adr-details-pane {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
  overflow-y: auto;
  padding: 0;
}

.adr-details-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 24px;
  padding-bottom: 16px;
}

.adr-details-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.adr-details-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-secondary, rgba(255, 255, 255, 0.6));
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.adr-details-value {
  font-size: 13px;
  color: var(--color-text, #ffffff);
  display: flex;
  align-items: center;
}

.published-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
}

.published-badge--yes {
  color: #4cd964;
}

.published-badge--no {
  color: #ff3b30;
}

.published-badge-icon {
  width: 14px;
  height: 14px;
}

.adr-text-fields {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.adr-text-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.adr-text-field-title {
  margin: 0;
  color: var(--White, #fff);
  font-feature-settings:
    'liga' off,
    'clig' off;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 19px; /* 135.714% */
}

html[data-theme='light'] .adr-text-field-title {
  color: #000000 !important;
}

.adr-text-field-content {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text, #ffffff);
  background: rgba(255, 255, 255, 0.01);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 6px;
  padding: 10px 12px;
  word-break: break-word;
}

/* Media query for laptop/notebook screens (both width-based and height-based limits, typical for 14" laptops) */
@media (max-width: 1440px), (max-height: 850px) {
  .detail-modal-custom-width {
    width: 96vw !important;
    max-width: 96vw !important;
    max-height: 94vh !important;
  }

  .detail-failure-prediction {
    gap: 12px;
  }

  .detail-header {
    gap: 10px;
    padding-bottom: 10px;
    margin-top: -32px; /* Adjust pull-up for smaller modal headers */
    margin-right: -32px;
    margin-left: -32px;
    padding-left: 32px;
  }

  .detail-info-grid {
    gap: 8px 30px;
    padding: 4px 0;
  }

  .detail-layout-columns-section {
    gap: 12px;
  }

  .detail-action-card,
  .detail-adrs-card {
    min-height: 310px !important; /* Extremely optimized, compact card height */
  }

  .comments-tab-pane {
    gap: 8px; /* Reduce gaps inside tab pane */
  }

  .no-comments-message,
  .no-changelog-message {
    height: 60px !important;
  }

  .add-comment-form {
    padding-top: 8px;
    gap: 6px;
  }

  .add-comment-textarea {
    padding: 6px 10px;
    font-size: 12px;
    height: 48px !important; /* Smaller textarea */
  }

  .adrs-content-container {
    gap: 8px;
  }

  .adr-details-pane {
    gap: 8px;
    padding: 0;
  }

  .adr-details-grid {
    gap: 8px 16px;
    padding-bottom: 8px;
  }

  .adr-details-item {
    gap: 2px;
  }

  .adr-details-label {
    font-size: 10px;
  }

  .adr-details-value {
    font-size: 11px;
  }

  .adr-text-fields-container {
    gap: 8px;
  }

  .adr-text-field {
    gap: 4px;
  }

  .adr-text-field-title {
    font-size: 12px;
    line-height: 16px;
  }

  .adr-text-field-content {
    font-size: 11px;
    padding: 6px 10px;
  }
}

/* Media query for tablet screens (width-based limits) */
@media (max-width: 1024px) {
  .detail-modal-custom-width {
    width: 95vw !important;
    max-width: 95vw !important;
    max-height: 94vh !important;
  }

  .detail-info-grid {
    grid-template-columns: 1fr 1fr; /* Keep two fields per row on tablet, like on desktop */
    gap: 10px 24px;
  }

  /* In view mode, .detail-info-column groups 2 fields each into 3 wrapper
     divs. With only 2 grid columns those 3 wrappers auto-place as
     column1+column3 stacked on the left (4 fields) and column2 alone on the
     right (2 fields). Promote the individual fields to direct grid items
     instead, so they can be explicitly arranged into 2 balanced columns of 3,
     with "Estado" directly under "Propiedad de diagnóstico". */
  .detail-info-column {
    display: contents;
  }

  .detail-info-grid [data-testid='detail-info-value-severity-wrapper'] {
    grid-column: 1;
    grid-row: 1;
  }

  .detail-info-grid [data-testid='detail-info-value-failure-mode-wrapper'] {
    grid-column: 1;
    grid-row: 2;
  }

  .detail-info-grid [data-testid='detail-info-value-date-range-wrapper'] {
    grid-column: 1;
    grid-row: 3;
  }

  .detail-info-grid [data-testid='detail-info-value-component-wrapper'] {
    grid-column: 2;
    grid-row: 1;
  }

  .detail-info-grid
    [data-testid='detail-info-value-dynamic-properties-wrapper'] {
    grid-column: 2;
    grid-row: 2;
  }

  .detail-info-grid [data-testid='detail-info-value-status-wrapper'] {
    grid-column: 2;
    grid-row: 3;
  }

  /* In edit mode, "Rango de fechas" holds two DatePickers ("desde"/"hasta")
     side by side. Each datepicker widget (label + fixed-width input + icon)
     doesn't fit twice within a half-width tablet grid column, which pushed
     the grid track wider and overlapped the "Modo fallo" column next to it.
     Stack them vertically instead so the field stays within its column. */
  .detail-date-range-edit-container {
    flex-direction: column !important;
  }

  .detail-date-range-edit-container .detail-info-item-select {
    width: 100% !important;
    flex: 1 1 auto !important;
  }

  .detail-layout-columns-section {
    grid-template-columns: 1fr 1fr; /* Maintain 2 columns on tablet as requested */
    gap: 14px;
  }

  .detail-action-card,
  .detail-adrs-card {
    min-height: 310px !important;
  }

  /* Responsive Detail Modal Footer layout using CSS display: contents on the wrapping right element */
  .detail-layout-footer {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    row-gap: 16px !important;
    column-gap: 12px !important;
    align-items: center !important;
    width: 100% !important;
  }

  .detail-footer-right {
    display: contents !important;
  }

  .detail-footer-metadata {
    grid-column: span 2 !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
  }

  .detail-footer-left {
    grid-column: 1 !important;
    justify-content: flex-start !important;
  }

  .detail-footer-actions {
    grid-column: 2 !important;
    justify-content: flex-end !important;
  }

  /* Prevent ADR tabs and main detail action tabs from overflowing by enabling smooth horizontal scrolling */
  .adrs-tabs-container,
  .adrs-tabs-container-flex,
  .detail-action-tabs {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    padding-bottom: 4px !important; /* Spacing for custom scrollbar */
    min-width: 0 !important;
  }

  /* Prevent tab buttons and their internal icons/texts from shrinking on smaller screens, forcing overflow scroll */
  .adrs-tabs-container *,
  .detail-action-tabs * {
    flex-shrink: 0 !important;
  }

  /* Style custom scrollbar so it is visible and beautiful on tablets */
  .adrs-tabs-container::-webkit-scrollbar,
  .detail-action-tabs::-webkit-scrollbar {
    height: 4px !important;
  }

  .adrs-tabs-container::-webkit-scrollbar-track,
  .detail-action-tabs::-webkit-scrollbar-track {
    background: transparent !important;
  }

  .adrs-tabs-container::-webkit-scrollbar-thumb,
  .detail-action-tabs::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.15) !important;
    border-radius: 2px !important;
  }

  html[data-theme='light'] .adrs-tabs-container::-webkit-scrollbar-thumb,
  html[data-theme='light'] .detail-action-tabs::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.15) !important;
  }

  .adrs-tabs-container .mnm-line-tabs,
  .adrs-tabs-container .mnm-tabs,
  .adrs-tabs-container .mnm-line-tabs-root,
  .detail-action-tabs .mnm-line-tabs,
  .detail-action-tabs .mnm-tabs,
  .detail-action-tabs .mnm-line-tabs-root {
    display: flex !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
  }

  /* Align the ADR status switch block to the left under the Chip row on tablets */
  .adr-details-grid--view {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    width: 100% !important;
  }

  .adr-view-published-wrapper {
    margin-left: 0 !important;
    width: 100% !important;
    justify-content: flex-start !important;
  }
}

/* Media query for screens smaller than tablet */
@media (max-width: 768px) {
  .detail-modal-custom-width {
    width: 95vw !important;
    max-width: 95vw !important;
    height: auto !important;
    max-height: 92vh !important;
    overflow-y: auto !important; /* Allow modal internal scrolling on super-small heights */
  }

  .detail-layout-columns-section {
    grid-template-columns: 1fr !important; /* Stack columns on mobile */
  }

  .detail-action-card,
  .detail-adrs-card {
    min-height: auto !important;
  }

  .detail-info-grid {
    grid-template-columns: 1fr !important; /* Stack fields on mobile */
  }
}

/* Media query for small phones: the title (asset/component name) and the
   status+actions block no longer fit side by side without the title
   collapsing to near-0 width. Stack them instead of fighting over space. */
@media (max-width: 480px) {
  .detail-header__main-row {
    flex-wrap: wrap;
    align-items: flex-start;
    padding-right: 0;
    row-gap: 8px;
  }

  .detail-header__left {
    flex: 1 1 100%;
    min-width: 0;
  }

  .detail-header__right {
    flex: 1 1 100%;
    justify-content: space-between;
  }

  /* Stack metadata items vertically on mobile viewports to prevent wrapping and alignment issues */
  .detail-footer-metadata {
    flex-direction: column !important;
    align-items: center !important;
    gap: 4px !important;
  }
}

/* Align DatePicker container heights to Select height (40px) in Detail view */
.detail-info-grid .mnm-datepicker-container--medium {
  height: 40px !important;
}

/* Comment Add/Edit Modal Style overrides */
.comment-add-edit-modal .mnm-modal {
  padding: 24px !important;
  border-radius: 12px !important;
  border: 1px solid var(--modal-border-color, #3e3659) !important;
}

html[data-theme='dark'] .comment-add-edit-modal .mnm-modal {
  background-color: #171924 !important;
  border-color: #3e3659 !important;
}

html[data-theme='light'] .comment-add-edit-modal .mnm-modal {
  background-color: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
}

.comment-add-edit-modal .mnm-modal__header {
  border-bottom: none !important;
  padding: 0 !important;
  margin-bottom: 6px !important;
}

.comment-add-edit-modal .mnm-modal__title {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--color-text, #ffffff) !important;
  text-align: left !important;
}

html[data-theme='light'] .comment-add-edit-modal .mnm-modal__title {
  color: #000000 !important;
}

.comment-modal-subtitle {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  color: var(--Grey-Grey-600, #949494) !important;
  text-align: left !important;
  margin: 0 !important;
  margin-bottom: -10px !important; /* Compensate for the 16px content gap to leave exactly 6px spacing */
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.comment-modal-content {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.comment-modal-textarea {
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 8px !important;
  padding: 12px 14px !important;
  color: var(--color-text, #ffffff) !important;
  font-family: inherit !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  resize: none !important;
  outline: none !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 100px !important;
  transition:
    border-color 0.2s,
    box-shadow 0.2s !important;
}

html[data-theme='light'] .comment-modal-textarea {
  background: #ffffff !important;
  border: 1px solid #cccccc !important;
  color: #000000 !important;
}

.comment-modal-textarea:focus {
  border-color: var(--background-color-primary, #b34be9) !important;
  box-shadow: 0 0 0 1px var(--background-color-primary, #b34be9) !important;
}

.comment-modal-textarea:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

.comment-modal-footer {
  display: flex !important;
  justify-content: space-between !important; /* Cancel on left, Save on right */
  gap: 12px !important; /* Space between Cancel and Save buttons */
  margin-top: 8px !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

/* Force identical heights and alignment of 40px for ADR edit inputs */
.adr-details-grid--edit .mnm-datepicker-container,
.adr-details-grid--edit .mnm-datepicker-input {
  height: 40px !important;
  box-sizing: border-box !important;
}

/* ADR Pestañas e Iconos */
.adr-tab-icon-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.adr-tab-draft-icon {
  opacity: 0.6;
  flex-shrink: 0;
}

/* ADR Grid en Edición */
.adr-details-grid--edit {
  display: flex !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 16px !important;
  padding-bottom: 16px !important;
  margin-bottom: 16px !important;
  width: 100% !important;
  flex-wrap: wrap !important;
}

.adr-edit-col-severity,
.adr-edit-col-date {
  min-width: 180px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 2px;
}

.adr-edit-col-published {
  flex: 1;
  min-width: 180px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: flex-start;
}

.adr-edit-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text, #ffffff);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
  line-height: 1.2;
}

.adr-edit-switch-wrapper {
  display: flex;
  align-items: center;
  align-self: flex-end;
  gap: 8px;
  height: 40px;
  margin-left: 16px;
}

.adr-edit-switch-spacer {
  height: 17px;
  margin-bottom: 4px;
}

/* Custom styles for the Published Switch (Track and Thumb) to match Figma specs and improve contrast */
[id^='adr-published-switch-'] .mnm-switch__track {
  width: 40px !important;
  height: 20px !important;
  border-radius: 20px !important; /* Fully rounded pill shape */
  padding: 4px !important;
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
  position: relative !important;
}

/* Unchecked track style */
[id^='adr-published-switch-']
  .mnm-switch__track:not(.mnm-switch__track--checked):not([class*='checked']) {
  background-color: var(--DarkBlue-DarkBlue-600, #2a2d3d) !important;
}

/* Checked track style */
[id^='adr-published-switch-'] .mnm-switch__track.mnm-switch__track--checked,
[id^='adr-published-switch-'] .mnm-switch__track[class*='checked'] {
  background-color: var(--background-color-primary, #b34be9) !important;
}

[id^='adr-published-switch-'] .mnm-switch__thumb {
  width: 12px !important;
  height: 12px !important;
  border-radius: 50% !important; /* Perfect circle */
  box-sizing: border-box !important;
}

/* Unchecked thumb style: Figma background with a crisp light border for high contrast */
[id^='adr-published-switch-']
  .mnm-switch__track:not(.mnm-switch__track--checked):not([class*='checked'])
  .mnm-switch__thumb {
  background-color: var(--DarkBlue-DarkBlue-700, #1e202f) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.45) !important; /* Elegant light border so the ball stands out clearly */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;
}

/* Checked thumb style: solid bright white for maximum visibility */
[id^='adr-published-switch-']
  .mnm-switch__track.mnm-switch__track--checked
  .mnm-switch__thumb,
[id^='adr-published-switch-']
  .mnm-switch__track[class*='checked']
  .mnm-switch__thumb {
  background-color: #ffffff !important;
  border: none !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;
}

/* Light Theme overrides for Published Switch */
html[data-theme='light']
  [id^='adr-published-switch-']
  .mnm-switch__track:not(.mnm-switch__track--checked):not([class*='checked']) {
  background-color: var(--Grey-Grey-300, #cccccc) !important;
}

html[data-theme='light']
  [id^='adr-published-switch-']
  .mnm-switch__track:not(.mnm-switch__track--checked):not([class*='checked'])
  .mnm-switch__thumb {
  background-color: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.15) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

/* ADR Grid en Visualización (View) */
.adr-details-grid--view {
  display: flex !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding-bottom: 12px !important;
  margin-bottom: 16px !important;
  flex-wrap: wrap !important;
}

.adr-view-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

div[data-testid='adr-details-item-severity'] {
  display: flex !important;
}

span[data-testid='adr-details-value-severity'] {
  display: inline-flex !important;
  align-items: center !important;
}

.adr-view-date-value {
  font-size: 13px;
  color: #ffffff !important;
}

html[data-theme='light'] .adr-view-date-value {
  color: #000000 !important;
}

.adr-view-published-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}

.adr-status-text--active {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text, #ffffff);
}

.adr-status-text--inactive {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.4);
}

html[data-theme='light'] .adr-status-text--active {
  color: var(--color-text-primary, #000000) !important;
}

html[data-theme='light'] .adr-status-text--inactive {
  color: var(--Grey-Grey-600, #949494) !important;
}

/* ADR Fila Secundaria de Metadatos */
.adr-details-sub-row {
  display: flex;
  align-items: center;
  gap: 8px 24px;
  flex-wrap: wrap; /* Was nowrap + overflow:hidden, which silently clipped
    "Last human review" off-screen on narrow columns/viewports instead of
    wrapping it onto its own line. */
  padding-bottom: 16px;
  margin-bottom: 16px;
}

.adr-sub-row-item {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.adr-sub-row-icon {
  flex-shrink: 0;
  display: block;
}

.adr-sub-row-label {
  font-size: 12px;
  color: var(--Grey-Grey-600, #949494);
}

.adr-sub-row-value {
  font-size: 12px;
  color: var(--color-text, #ffffff);
  font-weight: 500;
}

.adr-sub-row-divider {
  width: 1px;
  height: 14px;
  background-color: rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}

/* Ocultado */
.display-none {
  display: none !important;
}

/* Estilo del botón de nombre de archivo para heredar estilos de span plano */
.file-name-btn {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  font: inherit !important;
  color: var(--color-primary, #b34be9) !important;
  cursor: pointer !important;
  text-align: left !important;
  outline: none !important;
  transition: opacity 0.2s ease !important;
}

.file-name-btn:hover {
  text-decoration: underline !important;
  opacity: 0.85 !important;
}

/* Estilo para los textareas del ADR en modo vista (read-only) */
.adr-details-textarea {
  width: 100% !important;
  min-height: 80px !important;
  background-color: rgba(0, 0, 0, 0.2) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 6px !important;
  padding: 10px 12px !important;
  color: var(--color-text, #ffffff) !important;
  font-family: inherit !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  resize: none !important;
  outline: none !important;
  box-sizing: border-box !important;
}

html[data-theme='light'] .adr-details-textarea {
  background-color: #ededf0 !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  color: #111111 !important;
}

/* Fila de cabecera de pestañas ADR y botón Añadir */
.adrs-tabs-header-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 16px !important;
  margin-bottom: 16px !important;
  width: 100% !important;
  flex-wrap: wrap !important;
}

.adrs-tabs-container-flex {
  flex: 1 !important;
  min-width: 200px !important;
  margin-bottom: 0 !important;
}

/* 
  Style Detail, Actions, and ADR cards with a grayer background color 
  and subtle borders in light theme to distinguish them perfectly.
*/
html[data-theme='light'] .detail-info-card {
  background-color: var(--Grey-Grey-100, #f5f5f7) !important;
  border: 1px solid rgba(0, 0, 0, 0.04) !important;
}

html[data-theme='light'] .detail-action-card,
html[data-theme='light'] .detail-adrs-card {
  background-color: #f5f5f7 !important;
  border: 1px solid rgba(0, 0, 0, 0.04) !important;
}

/* Custom scroll buttons for horizontally scrollable tabs on all screen sizes */
.detail-action-tabs-wrapper,
.adrs-tabs-wrapper {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  overflow: visible !important;
}

.tabs-scroll-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  color: var(--color-text, #ffffff) !important;
  cursor: pointer !important;
  z-index: 10 !important;
  transition:
    color 0.2s,
    opacity 0.2s !important;
  padding: 0 4px !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  box-shadow: none !important;
  flex-shrink: 0 !important;
  height: 32px !important;
  line-height: 1 !important;
}

html[data-theme='light'] .tabs-scroll-btn {
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  color: #1c1a27 !important;
  box-shadow: none !important;
}

.tabs-scroll-btn:hover {
  color: var(--background-color-primary, #b34be9) !important;
  background: none !important;
  background-color: transparent !important;
}

.tabs-scroll-btn--left {
  margin-right: 6px !important;
}

.tabs-scroll-btn--right {
  margin-left: 6px !important;
}
/* failure-layout.css */
.page {
  /* No padding here: header/toolbar must sit flush (edge-to-edge) against
     the shell's TopBar above, with no gap and no left/right inset. */
  padding: 0;
  background-color: transparent;
  color: var(--color-text);
  font-family: var(--font-family, 'IBM Plex Sans', sans-serif);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  height: 100% !important;
  max-height: 100vh !important;
  overflow-y: auto !important;
  scrollbar-width: none !important; /* Firefox */
  -ms-overflow-style: none !important; /* IE and Edge */
}

.page::-webkit-scrollbar {
  display: none !important; /* Chrome, Safari and Opera */
}

.page__container {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  box-sizing: border-box;
}

/* Content */
.page__content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  /* Left padding stays fixed at 24px across all breakpoints to match the
     shell TopBar's fixed left offset (8px navbar + 16px body = 24px) and
     keep the page title and content vertically aligned. */
  padding: 0 24px 24px 24px;
  box-sizing: border-box;
}

/* Responsive adjustments */
/* Media query for laptop/notebook screens (both width-based and height-based limits, typical for 14" laptops) */
@media (max-width: 1440px), (max-height: 850px) {
  .page__container {
    gap: 12px !important;
  }
  .page__content {
    gap: 12px !important;
    padding: 0 16px 12px 24px !important;
  }
}

@media (max-width: 1024px) {
  .page__content {
    padding: 0 12px 12px 12px !important;
  }
}

@media (max-width: 768px) {
  .page__container {
    gap: 16px;
  }
  .page__content {
    padding: 0 16px 16px 24px;
  }
}

@media (max-width: 480px) {
  .page__container {
    gap: 12px;
  }
  .page__content {
    padding: 0 12px 12px 24px;
  }
}

/* Styling for Delete Confirmation Modal */
.delete-confirmation-modal {
  position: relative !important;
  margin: 0 !important;
  width: 440px !important;
  max-width: 95vw !important;
  padding: 24px !important;
  box-sizing: border-box !important;
  border-radius: 12px !important;
  border: 1px solid var(--modal-border-color, #3e3659) !important;
  box-shadow: var(--modal-shadow) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

html[data-theme='dark'] .delete-confirmation-modal {
  background-color: #171924 !important;
  border-color: #3e3659 !important;
}

html[data-theme='light'] .delete-confirmation-modal {
  background-color: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
}

.delete-confirmation-modal .delete-modal-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.delete-confirmation-modal .delete-modal-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}

.delete-confirmation-modal .delete-modal-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  background-color: transparent !important;
  flex-shrink: 0;
}

.delete-confirmation-modal .delete-modal-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
}

/* Force Trash SVG stroke to be the label's gray color by default and set its large size */
.delete-confirmation-modal .delete-modal-icon-wrapper svg,
.delete-confirmation-modal .delete-modal-icon svg {
  stroke: var(--Grey-Grey-600, #949494) !important;
  width: 48px !important;
  height: 48px !important;
}

.delete-confirmation-modal .delete-modal-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #ffffff !important; /* Default to white */
  text-align: center;
}

html[data-theme='light'] .delete-confirmation-modal .delete-modal-title {
  color: #1f1a24 !important; /* Black in light */
}

.delete-confirmation-modal .delete-modal-body {
  padding-left: 0 !important;
  text-align: center;
}

.delete-confirmation-modal .delete-modal-message {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: #ffffff !important; /* Default to white */
  text-align: center;
}

html[data-theme='light'] .delete-confirmation-modal .delete-modal-message {
  color: #1f1a24 !important; /* Black in light */
}

.delete-confirmation-modal .delete-modal-footer {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 8px;
}

/* Align and style DatePicker elements globally to center prefix label, input text, and icon together both horizontally and vertically */
.mnm-datepicker-container {
  justify-content: center !important;
  align-items: center !important;
}

.mnm-datepicker-input {
  flex: unset !important;
  text-align: left !important;
  width: 140px !important;
  height: 100% !important;
}

.mnm-datepicker-label-into {
  display: inline-flex !important;
  align-items: center !important;
  margin-bottom: 0 !important;
  min-height: unset !important;
  height: 100% !important;
  text-transform: lowercase !important;
  color: var(--Grey-Grey-600, #949494) !important;
  font-weight: 500 !important;
  font-size: 13px !important;
}

.mnm-datepicker-icon,
.mnm-datepicker-clear-button {
  align-self: center !important;
}

/* Unlink / Link / Cancel Confirmation Modals styles */
.unlink-modal-content {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 20px !important;
  width: 100% !important;
}

.unlink-modal-icon-row {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
}

.unlink-modal-title-row {
  align-self: stretch !important;
  text-align: center !important;
  font-feature-settings:
    'liga' off,
    'clig' off !important;
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 24px !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 30px !important; /* 125% */
  color: var(
    --color-text,
    #000000
  ) !important; /* Base color: dynamically adapts to theme */
}

/* Light Theme - Black Text */
html[data-theme='light'] .unlink-modal-title-row,
[data-theme='light'] .unlink-modal-title-row {
  color: var(--color-text, #000000) !important;
}

/* Dark Theme - White Text */
html[data-theme='dark'] .unlink-modal-title-row,
[data-theme='dark'] .unlink-modal-title-row {
  color: var(--color-text, #ffffff) !important;
}

/* Message row is always consistent grey across themes */
.unlink-modal-message-row {
  align-self: stretch !important;
  text-align: center !important;
  font-feature-settings:
    'liga' off,
    'clig' off !important;
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 14px !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 19px !important; /* 135.714% */
  color: var(--Grey-Grey-600, #949494) !important;
}

.unlink-modal-footer {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  margin-top: 12px !important;
}

/* Light Theme overrides for table row background color (.mnm-row) to use #f2f2f2 (grey200) */
html[data-theme='light'] .mnm-row,
[data-theme='light'] .mnm-row {
  background-color: #f2f2f2 !important;
  --row-bg: #f2f2f2 !important;
}

/* Light Theme: standardize all inputs, datepickers, filter/add buttons, and inactive switch tracks to the same #f2f2f2 (grey200) background */
html[data-theme='light'] .mnm-input-container,
[data-theme='light'] .mnm-input-container,
html[data-theme='light'] .mnm-datepicker-container,
[data-theme='light'] .mnm-datepicker-container,
html[data-theme='light'] .mnm-button--filter,
[data-theme='light'] .mnm-button--filter {
  background-color: #f2f2f2 !important;
}

html[data-theme='light'] .mnm-input-container .mnm-input,
[data-theme='light'] .mnm-input-container .mnm-input {
  background-color: transparent !important;
}

/* Ensure inactive switch tracks have the same #f2f2f2 background, without overriding active/checked states */
html[data-theme='light']
  .mnm-switch__track:not(.mnm-switch__track--checked):not(
    .mnm-switch__track--active
  ):not([class*='checked']):not([class*='active']),
[data-theme='light']
  .mnm-switch__track:not(.mnm-switch__track--checked):not(
    .mnm-switch__track--active
  ):not([class*='checked']):not([class*='active']) {
  background-color: #f2f2f2 !important;
}

/* =========================================================
   DESIGN TOKENS (Primitive & Base Variables)
   ========================================================= */
:root {
  /* --- 1. TYPOGRAPHY --- */
  --font-family-base: "IBM Plex Sans", sans-serif;

  /* Font Sizes Primitive Scale */
  --font-size-2xs: 10px;
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-md: 16px;
  --font-size-lg: 20px;
  --font-size-xl: 24px;
  --font-size-2xl: 32px;

  /* Font Weights Primitive Scale */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  /* Line Heights Primitive Scale */
  --line-height-2xs: 12px;
  --line-height-xs: 16px;
  --line-height-sm: 20px;
  --line-height-md: 24px;
  --line-height-lg: 28px;
  --line-height-xl: 32px;
  --line-height-2xl: 40px;

  /* Letter Spacing Primitive Scale */
  --letter-spacing-normal: normal;
  --letter-spacing-overline: 1.5px;

  /* --- 2. BRAND COLORS (Monom Purple Palette) --- */
  --color-purple-200: #f1e6f7;
  --color-purple-400: #d688ff;
  --color-purple-500: #b34be9;
  --color-purple-700: #57206f;
  --color-purple-800: #6a1b9a;

  /* --- 3. NEUTRAL COLORS --- */
  --color-neutral-white: #ffffff;
  --color-neutral-050: #fafafa;
  --color-neutral-100: #f2f2f2;
  --color-neutral-150: #ededed;
  --color-neutral-200: #dbdbdb;
  --color-neutral-300: #b5b5b5;
  --color-neutral-400: #949494;
  --color-neutral-500: #6b6b6b;
  --color-neutral-600: #4a4a4a;
  --color-neutral-700: #2c2c2c;
  --color-neutral-800: #212330;
  --color-neutral-900: #0d0d0d;
  --color-neutral-1000: #111111;

   /* Aliases for external/legacy compatibility */
  --Grey-Grey-300: var(--color-neutral-150:);
  --Grey-Grey-400: var(--color-neutral-200);

  /* --- 4. SLATE / SYSTEM BLUE COLORS (Used in complex panels/tables) --- */
  --color-slate-200: #dbdbdb;
  --color-slate-700: #2a2d3d;
  --color-slate-800: #212330;
  --color-slate-900: #1e2030;
  --color-slate-950: #171923;
  --color-slate-hover: #35394e;
  --color-slate-border: #3e3659;

  /* --- CHART COLORS --- */
  --color-chart-grid-light: #e8e8e9;
  --color-chart-event-marker: #00e0bb;

  /* --- 5. ALERT & CHIPS STATUS COLORS --- */
  /* Emergency */
  --color-status-emergency-bg-light: #f2f3f5;
  --color-status-emergency-border-light: #171923;
  --color-status-emergency-bg-dark: #363636;
  --color-status-emergency-border-dark: #ebecf0;

  /* Critical */
  --color-status-critical-bg-light: #f9a9c1;
  --color-status-critical-border-light: #ee084d;
  --color-status-critical-bg-dark: #821138;
  --color-status-critical-border-dark: #ee084d;

  /* High */
  --color-status-high-bg-light: #ffc48d;
  --color-status-high-border-light: #ff891c;
  --color-status-high-bg-dark: #8b5120;
  --color-status-high-border-dark: #ff891c;

  /* Medium */
  --color-status-medium-bg-light: #fff38d;
  --color-status-medium-border-light: #ffe81c;
  --color-status-medium-bg-dark: #837713;
  --color-status-medium-border-dark: #ffe81c;

  /* Low */
  --color-status-low-bg-light: #ffdce9;
  --color-status-low-border-light: #ffb9d2;
  --color-status-low-bg-dark: #83606e;
  --color-status-low-border-dark: #ffb9d2;

  /* Good */
  --color-status-good-bg-light: #cff6a9;
  --color-status-good-border-light: #a0ec53;
  --color-status-good-bg-dark: #3b7410;
  --color-status-good-border-dark: #a0ec53;

  /* Normal */
  --color-status-normal-bg-light: #89dfb5;
  --color-status-normal-border-light: #14be6c;
  --color-status-normal-bg-dark: #0a6534;
  --color-status-normal-border-dark: #14be6c;

  /* Critical Sensor */
  --color-status-criticalSensor-bg-light: #9fd4ff;
  --color-status-criticalSensor-border-light: #3fa9ff;
  --color-status-criticalSensor-bg-dark: #084c9c;
  --color-status-criticalSensor-border-dark: #3fa9ff;

  /* Active */
  --color-status-active-bg-light: #cbd8ff;
  --color-status-active-border-light: #264dc1;
  --color-status-active-bg-dark: #112975;
  --color-status-active-border-dark: #264dc1;

  /* Auto 400 */
  --color-status-auto400-bg-light: #dbdbdb;
  --color-status-auto400-border-light: transparent;
  --color-status-auto400-bg-dark: #2a2d3d;
  --color-status-auto400-border-dark: transparent;

  /* Auto 500 */
  --color-status-auto500-bg-light: #ecd1fa;
  --color-status-auto500-border-light: transparent;
  --color-status-auto500-bg-dark: #511c75;
  --color-status-auto500-border-dark: transparent;

  /* Unknown */
  --color-status-unknown-bg-light: #dbdbdb;
  --color-status-unknown-border-light: #b5b5b5;
  --color-status-unknown-bg-dark: #363636;
  --color-status-unknown-border-dark: #b5b5b5;

  /* Auto */
  --color-status-auto-bg-light: #dbdbdb;
  --color-status-auto-border-light: #b5b5b5;
  --color-status-auto-bg-dark: #363636;
  --color-status-auto-border-dark: #b5b5b5;

  /* --- 6. TOAST ALERTS PALETTE --- */
  --color-toast-ok-bg: #edf9f2;
  --color-toast-ok-border: #a0ec53;
  --color-toast-ok-bar: #14be6c;

  --color-toast-alert-bg: #fef0f4;
  --color-toast-alert-border: #f9a9c1;
  --color-toast-alert-bar: #ee084d;

  --color-toast-alert-orange-bg: #fef7ee;
  --color-toast-alert-orange-border: #ffc48d;
  --color-toast-alert-orange-bar: #ff891c;

  --color-toast-info-bg: #eef1fb;
  --color-toast-info-border: #cbd8ff;
  --color-toast-info-bar: #264dc1;

  --color-toast-system-bg: #f2f3f5;
  --color-toast-system-border: #dbdbdb;
  --color-toast-system-bar: #6b6b6b;

  /* --- 7. ADDITIONAL DESIGN SYSTEM COLORS & OPACITIES --- */
  /* Hex colors */
  --color-status-error-hex: #D0345C;
  --color-neutral-scrollbar-thumb-light: #C4C4C4;
  --color-neutral-off-white: #FEFEFE;
  --color-neutral-card-border-default: #d9d9d9;
  --color-neutral-login-hover-dark: #E6E6E6;
  --color-neutral-login-disabled-text-dark: #858585;
  --color-neutral-emergency-border: #EBECF0;

  /* RGBA opacities */
  --color-rgba-scrollbar-thumb-light: rgba(255, 255, 255, 0.35);
  --color-rgba-input-label-disabled-light: rgba(13, 13, 13, 0.2);
  --color-rgba-input-helper-disabled: rgba(148, 148, 148, 0.2);
  --color-rgba-input-arrows-hover: rgba(0, 0, 0, 0.08);
  --color-rgba-modal-overlay: rgba(0, 0, 0, 0.6);
  --color-rgba-shadow-modal-grouping: rgba(41, 41, 61, 0.08);
  --color-rgba-shadow-toast: rgba(0, 0, 0, 0.18);
  --color-rgba-shadow-menu: rgba(41, 41, 61, 0.12);
  --color-rgba-tab-hover-dark: rgba(255, 255, 255, 0.04);
  --color-rgba-pagination-hover-light: rgba(0, 0, 0, 0.05);
  --color-rgba-scrollbar-thumb-dark: rgba(0, 0, 0, 0.35);
  --color-rgba-tab-hover-light: rgba(0, 0, 0, 0.04);
  --color-rgba-input-label-disabled-dark: rgba(255, 255, 255, 0.2);
  --color-rgba-pagination-hover-dark: rgba(255, 255, 255, 0.05);
}
/* =========================================================
   1. DEFAULT BASE VARIABLES
   ========================================================= */
:root {
  /* Base typography */
  --font-family: var(--font-family-base);

  /* --- TYPOGRAPHY SEMANTIC TOKENS --- */
  --font-h1-size: var(--font-size-2xl);
  --font-h1-weight: var(--font-weight-semibold);
  --font-h1-line-height: var(--line-height-2xl);
  --font-h1-letter-spacing: var(--letter-spacing-normal);

  --font-h2-size: var(--font-size-xl);
  --font-h2-weight: var(--font-weight-semibold);
  --font-h2-line-height: var(--line-height-xl);
  --font-h2-letter-spacing: var(--letter-spacing-normal);

  --font-h3-size: var(--font-size-lg);
  --font-h3-weight: var(--font-weight-semibold);
  --font-h3-line-height: var(--line-height-lg);
  --font-h3-letter-spacing: var(--letter-spacing-normal);

  --font-h4-size: var(--font-size-md);
  --font-h4-weight: var(--font-weight-semibold);
  --font-h4-line-height: var(--line-height-md);
  --font-h4-letter-spacing: var(--letter-spacing-normal);

  --font-h5-size: var(--font-size-sm);
  --font-h5-weight: var(--font-weight-semibold);
  --font-h5-line-height: var(--line-height-sm);
  --font-h5-letter-spacing: var(--letter-spacing-normal);

  --font-h6-size: var(--font-size-xs);
  --font-h6-weight: var(--font-weight-semibold);
  --font-h6-line-height: var(--line-height-xs);
  --font-h6-letter-spacing: var(--letter-spacing-normal);

  /* Subtitles */
  --font-subtitle-large-size: var(--font-size-md);
  --font-subtitle-large-weight: var(--font-weight-medium);
  --font-subtitle-large-line-height: var(--line-height-md);
  --font-subtitle-large-letter-spacing: var(--letter-spacing-normal);

  --font-subtitle-medium-size: var(--font-size-sm);
  --font-subtitle-medium-weight: var(--font-weight-medium);
  --font-subtitle-medium-line-height: var(--line-height-sm);
  --font-subtitle-medium-letter-spacing: var(--letter-spacing-normal);

  --font-subtitle-small-size: var(--font-size-xs);
  --font-subtitle-small-weight: var(--font-weight-medium);
  --font-subtitle-small-line-height: var(--line-height-xs);
  --font-subtitle-small-letter-spacing: var(--letter-spacing-normal);

  /* Body */
  --font-body-large-bold-size: var(--font-size-md);
  --font-body-large-bold-weight: var(--font-weight-semibold);
  --font-body-large-bold-line-height: var(--line-height-md);
  --font-body-large-bold-letter-spacing: var(--letter-spacing-normal);

  --font-body-large-regular-size: var(--font-size-md);
  --font-body-large-regular-weight: var(--font-weight-regular);
  --font-body-large-regular-line-height: var(--line-height-md);
  --font-body-large-regular-letter-spacing: var(--letter-spacing-normal);

  --font-body-medium-bold-size: var(--font-size-sm);
  --font-body-medium-bold-weight: var(--font-weight-semibold);
  --font-body-medium-bold-line-height: var(--line-height-sm);
  --font-body-medium-bold-letter-spacing: var(--letter-spacing-normal);

  --font-body-medium-regular-size: var(--font-size-sm);
  --font-body-medium-regular-weight: var(--font-weight-regular);
  --font-body-medium-regular-line-height: var(--line-height-sm);
  --font-body-medium-regular-letter-spacing: var(--letter-spacing-normal);

  --font-body-small-bold-size: var(--font-size-xs);
  --font-body-small-bold-weight: var(--font-weight-semibold);
  --font-body-small-bold-line-height: var(--line-height-xs);
  --font-body-small-bold-letter-spacing: var(--letter-spacing-normal);

  --font-body-small-regular-size: var(--font-size-xs);
  --font-body-small-regular-weight: var(--font-weight-regular);
  --font-body-small-regular-line-height: var(--line-height-xs);
  --font-body-small-regular-letter-spacing: var(--letter-spacing-normal);

  /* Button */
  --font-button-large-size: var(--font-size-md);
  --font-button-large-weight: var(--font-weight-semibold);
  --font-button-large-line-height: var(--line-height-md);
  --font-button-large-letter-spacing: var(--letter-spacing-normal);

  --font-button-medium-size: var(--font-size-sm);
  --font-button-medium-weight: var(--font-weight-semibold);
  --font-button-medium-line-height: var(--line-height-sm);
  --font-button-medium-letter-spacing: var(--letter-spacing-normal);

  --font-button-small-size: var(--font-size-xs);
  --font-button-small-weight: var(--font-weight-semibold);
  --font-button-small-line-height: var(--line-height-xs);
  --font-button-small-letter-spacing: var(--letter-spacing-normal);

  /* Caption & Overline */
  --font-caption-bold-size: var(--font-size-2xs);
  --font-caption-bold-weight: var(--font-weight-semibold);
  --font-caption-bold-line-height: var(--line-height-2xs);
  --font-caption-bold-letter-spacing: var(--letter-spacing-normal);

  --font-caption-regular-size: var(--font-size-2xs);
  --font-caption-regular-weight: var(--font-weight-regular);
  --font-caption-regular-line-height: var(--line-height-2xs);
  --font-caption-regular-letter-spacing: var(--letter-spacing-normal);

  --font-overline-bold-size: var(--font-size-2xs);
  --font-overline-bold-weight: var(--font-weight-semibold);
  --font-overline-bold-line-height: var(--line-height-2xs);
  --font-overline-bold-letter-spacing: var(--letter-spacing-overline);

  --font-overline-regular-size: var(--font-size-2xs);
  --font-overline-regular-weight: var(--font-weight-regular);
  --font-overline-regular-line-height: var(--line-height-2xs);
  --font-overline-regular-letter-spacing: var(--letter-spacing-overline);

  /* Purple */
  --purple-400: var(--color-purple-400);

  /* Colores base */
  --primary-color: var(--color-purple-400);
  --color-bg: var(--color-neutral-1000);
  --color-text: var(--color-neutral-white);
  --color-text-button: var(--color-neutral-white);
  --color-text-secondary: var(--color-purple-800);
  --color-text-disabled: var(--color-neutral-400);

  /* Button badge */
  --button-badge-text-color: var(--color-neutral-white);
  --button-badge-notification-bg: var(--input-error-color);
  --button-badge-primary-bg: var(--color-purple-400);

  /* Variants */
  --background-color-primary: var(--color-purple-500);

  /* Variants hover */
  --background-color-primary-hover: var(--color-purple-700);
  --background-color-secondary-hover: var(--color-purple-200);
  --background-color-filter: var(--color-slate-700);
  --background-color-filter-hover: var(--color-slate-hover);
  --background-color-filter-disabled: var(--color-slate-800);
  --color-text-filter: var(--color-neutral-white);
  --color-text-filter-disabled: var(--color-slate-700);

  /* Variants disabled */
  --background-color-primary-disabled: var(--color-neutral-200);
  --border-color-secondary-disabled: var(--color-neutral-300);

  /* Variants login */
  --background-color-login: var(--color-neutral-900);
  --background-color-login-hover: var(--color-neutral-700);
  --background-color-login-disabled: var(--color-neutral-200);
  --color-text-login: var(--color-neutral-white);
  --color-text-login-disabled: var(--color-neutral-500);

  /* Chips Spacing */
  --chip-height-sm: 14px;
  --chip-height-md: 18px;
  --chip-height-lg: 24px;
  --chip-height-xl: 30px;

  --chip-radius: 100px;
  --chip-font-size-sm: 9px;
  --chip-font-size-md: 9px;
  --chip-font-size-lg: 11px;
  --chip-font-size-xl: 14px;

  --chip-letter-spacing-sm: 1.8px;
  --chip-letter-spacing-md: 1.8px;
  --chip-letter-spacing-lg: 2.42px;
  --chip-letter-spacing-xl: 3.08px;

  --chip-font-weight: 500;
  --chip-gap: 6px;

  /* Fallback de colores de chip */
  --chip-emergency-bg: var(--color-status-emergency-bg-light);
  --chip-emergency-border: var(--color-status-emergency-border-light);

  --chip-critical-bg: var(--color-status-critical-bg-light);
  --chip-critical-border: var(--color-status-critical-border-light);

  --chip-high-bg: var(--color-status-high-bg-light);
  --chip-high-border: var(--color-status-high-border-light);

  --chip-medium-bg: var(--color-status-medium-bg-light);
  --chip-medium-border: var(--color-status-medium-border-light);

  --chip-low-bg: var(--color-status-low-bg-light);
  --chip-low-border: var(--color-status-low-border-light);

  --chip-good-bg: var(--color-status-good-bg-light);
  --chip-good-border: var(--color-status-good-border-light);

  --chip-normal-bg: var(--color-status-normal-bg-light);
  --chip-normal-border: var(--color-status-normal-border-light);

  --chip-criticalSensor-bg: var(--color-status-criticalSensor-bg-light);
  --chip-criticalSensor-border: var(--color-status-criticalSensor-border-light);

  --chip-active-bg: var(--color-status-active-bg-light);
  --chip-active-border: var(--color-status-active-border-light);

  --chip-auto400-bg: var(--color-status-auto400-bg-light);
  --chip-auto400-border: var(--color-status-auto400-border-light);

  --chip-auto500-bg: var(--color-status-auto500-bg-light);
  --chip-auto500-border: var(--color-status-auto500-border-light);

  --chip-unknown-bg: var(--color-status-unknown-bg-light);
  --chip-unknown-border: var(--color-status-unknown-border-light);

  --chip-auto-bg: var(--color-status-auto-bg-light);
  --chip-auto-border: var(--color-status-auto-border-light);

  --chip-text: var(--color-neutral-900);
  --chip-counter: var(--color-neutral-200);

  /* Dropdown */
  --select-control-bg: var(--color-slate-700);
  --select-dropdown-bg: var(--color-slate-700);
  --select-dropdown-text: var(--color-neutral-white);
  --select-border-color: var(--color-slate-border);
  --select-scrollbar-thumb: var(--color-rgba-scrollbar-thumb-light);
  --select-placeholder-color: var(--color-neutral-600);

  /* Input */
  --input-bg: var(--color-neutral-150);
  --input-label-color: var(--color-neutral-900);
  --input-label-disabled-color: var(--color-rgba-input-label-disabled-light);
  --input-text-color: var(--color-neutral-900);
  --input-placeholder-color: var(--color-neutral-400);
  --textarea-placeholder-color: var(--color-neutral-400);
  --textarea-formated-placeholder-color: var(--color-neutral-400);
  --input-border-color: var(--color-neutral-150);
  --input-border-focus-color: var(--color-purple-500);
  --input-border-error-color: var(--color-status-error-hex);
  --input-icon-color: var(--color-neutral-400);
  --input-helper-color: var(--color-neutral-400);
  --input-helper-disabled-color: var(--color-rgba-input-helper-disabled);
  --input-error-color: var(--color-status-error-hex);
  --input-scrollbar-thumb: var(--color-neutral-scrollbar-thumb-light);
  --input-scrollbar-track: transparent;
  --input-arrows-hover-bg: var(--color-rgba-input-arrows-hover);
  --opacity-disabled: 0.2;

  /* Checkbox */
  --checkbox-border: var(--color-neutral-200);
  --checkbox-bg: var(--color-neutral-100);
  --checkbox-icon-color: var(--color-neutral-off-white);
  --checkbox-label-color: var(--color-neutral-900);
  --checkbox-active-bg: var(--color-purple-500);
  --checkbox-active-border: var(--color-purple-500);

  /* RadioButton */
  --radio-button-border: var(--color-neutral-400);
  --radio-button-bg: transparent;
  --radio-button-active-bg: transparent;
  --radio-button-active-border: var(--color-purple-400);
  --radio-button-active-dot: var(--color-purple-400);
  --radio-button-check-bg: var(--color-purple-500);
  --radio-button-check-icon: var(--color-neutral-white);
  --radio-button-disabled-bg: transparent;
  --radio-button-disabled-opacity: var(--opacity-disabled);
  --radio-button-label-color: var(--color-neutral-900);
  --radio-button-label-active-color: var(--color-neutral-900);

  /* Modal */
  --modal-bg: var(--color-neutral-050);
  --modal-overlay-bg: var(--color-rgba-modal-overlay);
  --modal-border-color: var(--color-neutral-200);
  --modal-border-radius: 6px;
  --modal-shadow: 0px 0px 12px 0px var(--color-rgba-shadow-modal-grouping);
  --modal-title-color: var(--color-neutral-900);
  --modal-subtitle-color: var(--color-neutral-400);
  --modal-close-color: var(--color-neutral-900);

  /* Card */
  --card-solid-bg: var(--color-neutral-050);
  --card-solid-border: var(--color-neutral-100);
  --card-outline-bg: transparent;
  --card-outline-border: var(--color-neutral-100);
  --card-only-border-bg: transparent;
  --card-only-border-border: var(--color-neutral-100);
  --card-title-color: var(--color-neutral-900);
  --card-action-color: var(--color-purple-500);
  --card-hover-bg: var(--color-neutral-100);

  /* Empty */
  --empty-bg: var(--color-neutral-150);
  --empty-text-color: var(--color-neutral-900);
  --empty-action-color: var(--color-purple-500);
  --empty-icon-wrapper-bg: var(--color-neutral-200);
  --empty-monom-bg: var(--color-neutral-200);
  --empty-monom-path: var(--color-neutral-400);

  /* Notification */
  --notification-list-bg: var(--color-neutral-050);
  --notification-list-border: var(--color-neutral-300);
  --notification-list-radius: 4px;
  --notification-item-bg: var(--color-neutral-100);
  --notification-item-bg-hover: var(--color-neutral-150);
  --notification-title-color: var(--color-neutral-900);
  --notification-subtitle-color: var(--color-neutral-400);
  --notification-description-color: var(--color-neutral-400);
  --notification-value-color: var(--color-neutral-900);
  --notification-date-color: var(--color-neutral-400);
  --notification-header-color: var(--color-neutral-900);
  --notification-action-color: var(--color-purple-500);
  --notification-empty-color: var(--color-neutral-900);
  --notification-empty-icon-color: var(--color-neutral-900);
  --notification-icon-color: var(--color-neutral-white);

  --notification-emergency-bar: var(--color-status-emergency-border-light);
  --notification-emergency-icon-bg: var(--color-status-emergency-bg-light);
  --notification-emergency-icon-color: var(--color-status-emergency-border-light);

  --notification-critical-bar: var(--color-status-critical-border-light);
  --notification-critical-icon-bg: var(--color-status-critical-bg-light);
  --notification-critical-icon-color: var(--color-neutral-900);

  --notification-high-bar: var(--color-status-high-border-light);
  --notification-high-icon-bg: var(--color-status-high-bg-light);
  --notification-high-icon-color: var(--color-neutral-900);

  --notification-medium-bar: var(--color-status-medium-border-light);
  --notification-medium-icon-bg: var(--color-status-medium-bg-light);
  --notification-medium-icon-color: var(--color-neutral-900);

  --notification-low-bar: var(--color-status-low-border-light);
  --notification-low-icon-bg: var(--color-status-low-bg-light);
  --notification-low-icon-color: var(--color-neutral-900);

  --notification-good-bar: var(--color-status-good-border-light);
  --notification-good-icon-bg: var(--color-status-good-bg-light);
  --notification-good-icon-color: var(--color-neutral-900);

  --notification-normal-bar: var(--color-status-normal-border-light);
  --notification-normal-icon-bg: var(--color-status-normal-bg-light);
  --notification-normal-icon-color: var(--color-neutral-900);

  --notification-criticalSensor-bar: var(--color-status-criticalSensor-border-light);
  --notification-criticalSensor-icon-bg: var(--color-status-criticalSensor-bg-light);
  --notification-criticalSensor-icon-color: var(--color-neutral-900);

  --notification-active-bar: var(--color-status-active-border-light);
  --notification-active-icon-bg: var(--color-status-active-bg-light);
  --notification-active-icon-color: var(--color-neutral-900);

  --notification-auto400-bar: var(--color-status-auto400-bg-light);
  --notification-auto400-icon-bg: var(--color-status-auto400-bg-light);
  --notification-auto400-icon-color: var(--color-neutral-900);

  --notification-auto500-bar: var(--color-status-auto500-bg-light);
  --notification-auto500-icon-bg: var(--color-status-auto500-bg-light);
  --notification-auto500-icon-color: var(--color-neutral-900);

  --notification-unknown-bar: var(--color-status-unknown-border-light);
  --notification-unknown-icon-bg: var(--color-status-unknown-bg-light);
  --notification-unknown-icon-color: var(--color-neutral-900);

  /* Toast */
  --toast-width: 364px;
  --toast-border-radius: 8px;
  --toast-shadow: 0px 2px 16px 0px var(--color-rgba-shadow-toast);
  --toast-title-color: var(--color-neutral-900);
  --toast-description-color: var(--color-neutral-600);
  --toast-close-color: var(--color-neutral-600);

  --toast-ok-bg: var(--color-toast-ok-bg);
  --toast-ok-border: var(--color-toast-ok-border);
  --toast-ok-bar: var(--color-toast-ok-bar);

  --toast-alert-bg: var(--color-toast-alert-bg);
  --toast-alert-border: var(--color-toast-alert-border);
  --toast-alert-bar: var(--color-toast-alert-bar);

  --toast-alert-orange-bg: var(--color-toast-alert-orange-bg);
  --toast-alert-orange-border: var(--color-toast-alert-orange-border);
  --toast-alert-orange-bar: var(--color-toast-alert-orange-bar);

  --toast-info-bg: var(--color-toast-info-bg);
  --toast-info-border: var(--color-toast-info-border);
  --toast-info-bar: var(--color-toast-info-bar);

  --toast-system-bg: var(--color-toast-system-bg);
  --toast-system-border: var(--color-toast-system-border);
  --toast-system-bar: var(--color-toast-system-bar);

  /* GROUPING */
  --grouping-bg: var(--color-neutral-white);
  --grouping-border-color: var(--color-neutral-200);
  --grouping-shadow: 0px 0px 12px 0px var(--color-rgba-shadow-modal-grouping);

  /* Menu */
  --menu-bg: var(--color-neutral-white);
  --menu-border-color: var(--color-neutral-200);
  --menu-radius: 6px;
  --menu-shadow: 0px 4px 16px 0px var(--color-rgba-shadow-menu);
  --menu-text-color: var(--color-neutral-900);
  --menu-trigger-color: var(--color-neutral-900);
  --menu-trigger-hover-bg: var(--color-neutral-100);
  --menu-trigger-hover-color: var(--color-neutral-900);
  --menu-trigger-open-color: var(--color-neutral-white);
  --menu-item-color: var(--color-neutral-900);
  --menu-item-hover-bg: var(--color-purple-500);
  --menu-item-hover-color: var(--color-neutral-white);
  --menu-item-active-color: var(--color-neutral-white);
  --menu-accent-color: var(--color-purple-500);

  /* Action Table */
  --action-table-bg: var(--color-purple-200);
  --action-table-text: var(--color-neutral-900);
  --action-table-radius: 6px;
  --action-table-gap: 6px;
  --action-table-font-size: 14px;
  --action-table-font-weight: 400;
  --action-table-title-max-width: 170px;

  /* Header Cell */
  --header-cell-text: var(--color-neutral-900);
  --header-cell-gap: 4px;
  --header-cell-font-size: 11px;
  --header-cell-font-weight: 500;
  --header-cell-width: 220px;
  --header-cell-title-max-width: 180px;

  /* Row */
  --row-bg: var(--color-neutral-050);
  --row-bg-hover: var(--color-neutral-200);
  --row-radius: 6px;
  --row-padding-y: 8px;
  --row-padding-x: 10px;
  --row-gap: 10px;
  --row-cell-max-width: 215px;
  --row-cell-color: var(--color-neutral-900);

  /* Empty Table */
  --empty-table-bg: var(--color-neutral-050);

  /* Table */
  --table-row-gap: 4px;
  --table-column-gap: 10px;
  --table-main-col-width: 215px;
  --table-bulk-action-active-color: var(--color-neutral-300);
  --table-bulk-action-disabled-color: var(--color-neutral-300);
  --table-bulk-action-hover-bg: var(--color-neutral-200);

  /* Add Button */
  --add-button-size: 32px;
  --add-button-radius: 6px;
  --add-button-bg: var(--color-slate-700);
  --add-button-bg-hover: var(--color-slate-border);
  --add-button-color: var(--color-neutral-white);

  /* Tabs */
  --tab-bg: var(--color-neutral-white);
  --tab-color: var(--color-neutral-300);
  --tab-bg-hover: var(--color-rgba-tab-hover-dark);
  --tab-active-bg: var(--color-neutral-100);
  --tab-panel-bg: var(--color-neutral-white);
  --tab-border-color: var(--color-neutral-200);
  --tab-panel-border-color: var(--color-neutral-200);
  --tab-border-active: var(--color-neutral-200);
  --tab-active-color: var(--color-neutral-white);
  --tab-radius: 6px;
  --tab-height: 40px;
  --tab-gap: 8px;
  --tab-font-size: 14px;
  --tab-font-weight: 500;
  --tab-label-max-width: 180px;
  --tab-panel-padding: 16px;
  --tabs-gap: 10px;

  /* Line Tabs */
  --line-tab-color: var(--color-neutral-900);
  --line-tab-inactive-color: var(--color-neutral-400);
  --line-tab-hover-color: var(--color-purple-400);
  --line-tab-active-color: var(--color-neutral-900);
  --line-tab-accent-color: var(--color-purple-500);
  --line-tab-focus-color: var(--line-tab-accent-color);
  --line-tab-panel-color: var(--color-neutral-900);
  --line-tab-divider-color: var(--color-neutral-200);
  --tabs-view-active-bg: var(--color-neutral-100);
  --tabs-background-bg: var(--color-neutral-white);
  --tabs-background-color: var(--color-neutral-900);
  --tabs-background-border: var(--color-neutral-200);
  --tabs-background-active-border: var(--color-neutral-200);
  --tabs-badge-bg: var(--color-neutral-200);
  --tabs-badge-color: var(--color-neutral-900);
  --tabs-badge-active-bg: var(--color-status-auto500-bg-light);
  --tabs-badge-active-color: var(--color-neutral-900);
  --tabs-add-color: var(--color-purple-500);
  --tabs-metric-color: var(--color-neutral-400);
  --tabs-metric-active-color: var(--color-neutral-900);

  /* Divider */
  --divider-color: var(--color-neutral-200);

  /* Pagination */
  --pagination-color: var(--color-neutral-900);
  --pagination-hover-bg: var(--color-rgba-pagination-hover-light);
  --pagination-active-bg: var(--color-purple-500);
  --pagination-active-color: var(--color-neutral-white);
  --pagination-disabled-opacity: 0.4;
}

/* =========================================================
   2. THEME LIGHT
   ========================================================= */
[data-theme="light"],
[data-theme="LIGHT"] {
  --primary-color: var(--color-purple-400);
  --color-bg: var(--color-neutral-1000);
  --color-text: var(--color-neutral-900);
  --color-text-button: var(--color-neutral-white);
  --color-text-secondary: var(--color-purple-400);
  --color-text-disabled: var(--color-neutral-400);

  /* Button badge */
  --button-badge-text-color: var(--color-neutral-white);
  --button-badge-notification-bg: var(--input-error-color);
  --button-badge-primary-bg: var(--color-purple-400);

  /* Variants */
  --background-color-primary: var(--color-purple-500);

  /* Variants hover */
  --background-color-primary-hover: var(--color-purple-700);
  --background-color-secondary-hover: var(--color-purple-200);
  --background-color-filter: var(--color-neutral-200);
  --background-color-filter-hover: var(--color-neutral-300);
  --background-color-filter-disabled: var(--color-neutral-150);
  --color-text-filter: var(--color-neutral-900);
  --color-text-filter-disabled: var(--color-neutral-200);

  /* Variants disabled */
  --background-color-primary-disabled: var(--color-neutral-200);
  --border-color-secondary-disabled: var(--color-neutral-300);

  /* Variants login */
  --background-color-login: var(--color-neutral-900);
  --background-color-login-hover: var(--color-neutral-700);
  --background-color-login-disabled: var(--color-neutral-200);
  --color-text-login: var(--color-neutral-white);
  --color-text-login-disabled: var(--color-neutral-500);

  /* Chip Light Variants */
  --chip-emergency-bg: var(--color-status-emergency-bg-light);
  --chip-emergency-border: var(--color-status-emergency-border-light);

  --chip-critical-bg: var(--color-status-critical-bg-light);
  --chip-critical-border: var(--color-status-critical-border-light);

  --chip-high-bg: var(--color-status-high-bg-light);
  --chip-high-border: var(--color-status-high-border-light);

  --chip-medium-bg: var(--color-status-medium-bg-light);
  --chip-medium-border: var(--color-status-medium-border-light);

  --chip-low-bg: var(--color-status-low-bg-light);
  --chip-low-border: var(--color-status-low-border-light);

  --chip-good-bg: var(--color-status-good-bg-light);
  --chip-good-border: var(--color-status-good-border-light);

  --chip-normal-bg: var(--color-status-normal-bg-light);
  --chip-normal-border: var(--color-status-normal-border-light);

  --chip-criticalSensor-bg: var(--color-status-criticalSensor-bg-light);
  --chip-criticalSensor-border: var(--color-status-criticalSensor-border-light);

  --chip-active-bg: var(--color-status-active-bg-light);
  --chip-active-border: var(--color-status-active-border-light);

  --chip-auto400-bg: var(--color-status-auto400-bg-light);
  --chip-auto500-bg: var(--color-status-auto500-bg-light);

  --chip-unknown-bg: var(--color-status-unknown-bg-light);
  --chip-unknown-border: var(--color-status-unknown-border-light);

  --chip-auto-bg: var(--color-status-auto-bg-light);
  --chip-auto-border: var(--color-status-auto-border-light);

  --chip-text: var(--color-neutral-900);
  --chip-counter: var(--color-neutral-200);

  /* dropdown */
  --select-dropdown-bg: var(--color-neutral-white);
  --select-dropdown-text: var(--color-neutral-900);
  --select-control-bg: var(--color-neutral-150);
  --select-border-color: var(--color-neutral-300);
  --select-scrollbar-thumb: var(--color-rgba-scrollbar-thumb-dark);
  --select-placeholder-color: var(--color-neutral-600);

  /* Input Light */
  --input-bg: var(--color-neutral-150);
  --input-label-color: var(--color-neutral-900);
  --input-label-disabled-color: var(--color-rgba-input-label-disabled-light);
  --input-text-color: var(--color-neutral-900);
  --input-placeholder-color: var(--color-neutral-400);
  --textarea-placeholder-color: var(--color-neutral-400);
  --textarea-formated-placeholder-color: var(--color-neutral-400);
  --input-border-color: var(--color-neutral-150);
  --input-border-focus-color: var(--color-purple-500);
  --input-border-error-color: var(--color-status-error-hex);
  --input-icon-color: var(--color-neutral-400);
  --input-helper-color: var(--color-neutral-400);
  --input-helper-disabled-color: var(--color-rgba-input-helper-disabled);
  --input-error-color: var(--color-status-error-hex);
  --input-scrollbar-thumb: var(--color-neutral-scrollbar-thumb-light);
  --input-scrollbar-track: transparent;
  --input-arrows-hover-bg: var(--color-rgba-input-arrows-hover);

  /* Checkbox Light */
  --checkbox-border: var(--color-neutral-200);
  --checkbox-bg: var(--color-neutral-100);
  --checkbox-icon-color: var(--color-neutral-white);
  --checkbox-label-color: var(--color-neutral-900);
  --checkbox-active-bg: var(--color-purple-500);
  --checkbox-active-border: var(--color-purple-500);

  /* RadioButton Light */
  --radio-button-border: var(--color-neutral-400);
  --radio-button-bg: transparent;
  --radio-button-active-bg: transparent;
  --radio-button-active-border: var(--color-purple-400);
  --radio-button-active-dot: var(--color-purple-400);
  --radio-button-check-bg: var(--color-purple-500);
  --radio-button-check-icon: var(--color-neutral-white);
  --radio-button-disabled-bg: transparent;
  --radio-button-disabled-opacity: var(--opacity-disabled);
  --radio-button-label-color: var(--color-neutral-900);
  --radio-button-label-active-color: var(--color-neutral-900);

  /* Card Light */
  --card-solid-bg: var(--color-neutral-050);
  --card-solid-border: var(--color-neutral-100);
  --card-outline-bg: transparent;
  --card-outline-border: var(--color-neutral-100);
  --card-only-border-bg: transparent;
  --card-only-border-border: var(--color-neutral-100);
  --card-title-color: var(--color-neutral-900);
  --card-action-color: var(--color-purple-500);
  --card-hover-bg: var(--color-neutral-100);

  /* Empty Light */
  --empty-bg: var(--color-neutral-150);
  --empty-text-color: var(--color-neutral-900);
  --empty-action-color: var(--color-purple-500);
  --empty-icon-wrapper-bg: var(--color-neutral-200);
  --empty-monom-bg: var(--color-neutral-200);
  --empty-monom-path: var(--color-neutral-400);

  /* Notification Light */
  --notification-list-bg: var(--color-neutral-050);
  --notification-list-border: var(--color-neutral-300);
  --notification-item-bg: var(--color-neutral-100);
  --notification-item-bg-hover: var(--color-neutral-150);
  --notification-title-color: var(--color-neutral-900);
  --notification-subtitle-color: var(--color-neutral-400);
  --notification-description-color: var(--color-neutral-400);
  --notification-value-color: var(--color-neutral-900);
  --notification-date-color: var(--color-neutral-400);
  --notification-header-color: var(--color-neutral-900);
  --notification-action-color: var(--color-purple-500);
  --notification-empty-color: var(--color-neutral-900);
  --notification-empty-icon-color: var(--color-neutral-900);
  --notification-icon-color: var(--color-neutral-white);

  --notification-emergency-bar: var(--color-status-emergency-border-light);
  --notification-emergency-icon-bg: var(--color-status-emergency-bg-light);
  --notification-emergency-icon-color: var(--color-status-emergency-border-light);

  --notification-critical-bar: var(--color-status-critical-border-light);
  --notification-critical-icon-bg: var(--color-status-critical-bg-light);
  --notification-critical-icon-color: var(--color-neutral-900);

  --notification-high-bar: var(--color-status-high-border-light);
  --notification-high-icon-bg: var(--color-status-high-bg-light);
  --notification-high-icon-color: var(--color-neutral-900);

  --notification-medium-bar: var(--color-status-medium-border-light);
  --notification-medium-icon-bg: var(--color-status-medium-bg-light);
  --notification-medium-icon-color: var(--color-neutral-900);

  --notification-low-bar: var(--color-status-low-border-light);
  --notification-low-icon-bg: var(--color-status-low-bg-light);
  --notification-low-icon-color: var(--color-neutral-900);

  --notification-good-bar: var(--color-status-good-border-light);
  --notification-good-icon-bg: var(--color-status-good-bg-light);
  --notification-good-icon-color: var(--color-neutral-900);

  --notification-normal-bar: var(--color-status-normal-border-light);
  --notification-normal-icon-bg: var(--color-status-normal-bg-light);
  --notification-normal-icon-color: var(--color-neutral-900);

  --notification-criticalSensor-bar: var(--color-status-criticalSensor-border-light);
  --notification-criticalSensor-icon-bg: var(--color-status-criticalSensor-bg-light);
  --notification-criticalSensor-icon-color: var(--color-neutral-900);

  --notification-active-bar: var(--color-status-active-border-light);
  --notification-active-icon-bg: var(--color-status-active-bg-light);
  --notification-active-icon-color: var(--color-neutral-900);

  --notification-auto400-bar: var(--color-status-auto400-bg-light);
  --notification-auto400-icon-bg: var(--color-status-auto400-bg-light);
  --notification-auto400-icon-color: var(--color-neutral-900);

  --notification-auto500-bar: var(--color-status-auto500-bg-light);
  --notification-auto500-icon-bg: var(--color-status-auto500-bg-light);
  --notification-auto500-icon-color: var(--color-neutral-900);

  --notification-unknown-bar: var(--color-status-unknown-border-light);
  --notification-unknown-icon-bg: var(--color-status-unknown-bg-light);
  --notification-unknown-icon-color: var(--color-neutral-900);

  /* Modal Light */
  --modal-bg: var(--color-neutral-050);
  --modal-title-color: var(--color-neutral-900);
  --modal-subtitle-color: var(--color-neutral-400);
  --modal-close-color: var(--color-neutral-900);
  --modal-border-color: var(--color-neutral-200);

  /* Toast Light */
  --toast-title-color: var(--color-neutral-900);
  --toast-description-color: var(--color-neutral-600);
  --toast-close-color: var(--color-neutral-600);

  --toast-ok-bg: var(--color-toast-ok-bg);
  --toast-ok-border: var(--color-toast-ok-border);
  --toast-ok-bar: var(--color-toast-ok-bar);

  --toast-alert-bg: var(--color-toast-alert-bg);
  --toast-alert-border: var(--color-toast-alert-border);
  --toast-alert-bar: var(--color-toast-alert-bar);

  --toast-alert-orange-bg: var(--color-toast-alert-orange-bg);
  --toast-alert-orange-border: var(--color-toast-alert-orange-border);
  --toast-alert-orange-bar: var(--color-toast-alert-orange-bar);

  --toast-info-bg: var(--color-toast-info-bg);
  --toast-info-border: var(--color-toast-info-border);
  --toast-info-bar: var(--color-toast-info-bar);

  --toast-system-bg: var(--color-toast-system-bg);
  --toast-system-border: var(--color-toast-system-border);
  --toast-system-bar: var(--color-toast-system-bar);

  /* Menu Light */
  --menu-bg: var(--color-neutral-white);
  --menu-border-color: var(--color-neutral-200);
  --menu-text-color: var(--color-neutral-900);
  --menu-trigger-color: var(--color-neutral-900);
  --menu-trigger-hover-bg: var(--color-neutral-100);
  --menu-trigger-hover-color: var(--color-neutral-900);
  --menu-trigger-open-color: var(--color-neutral-white);
  --menu-item-color: var(--color-neutral-900);
  --menu-item-hover-bg: var(--color-purple-500);
  --menu-item-hover-color: var(--color-neutral-white);
  --menu-item-active-color: var(--color-neutral-white);
  --menu-accent-color: var(--color-purple-500);

  /* Action Table Light */
  --action-table-bg: var(--color-purple-200);
  --action-table-text: var(--color-neutral-900);

  /* Header Cell Light */
  --header-cell-text: var(--color-neutral-900);

  /* Row Light */
  --row-bg: var(--color-neutral-050);
  --row-bg-hover: var(--color-neutral-200);
  --row-cell-color: var(--color-neutral-900);

  /* Table Light */
  --empty-table-bg: var(--color-neutral-050);
  --table-bulk-action-active-color: var(--color-neutral-900);
  --table-bulk-action-disabled-color: var(--color-neutral-300);
  --table-bulk-action-hover-bg: var(--color-neutral-200);

  /* Add Button Light */
  --add-button-bg: var(--color-neutral-150);
  --add-button-bg-hover: var(--color-neutral-200);
  --add-button-color: var(--color-neutral-900);

  /* Tabs Light */
  --tab-bg: var(--color-neutral-white);
  --tab-color: var(--color-neutral-300);
  --tab-bg-hover: var(--color-rgba-tab-hover-light);
  --tab-active-bg: var(--color-neutral-100);
  --tab-panel-bg: var(--color-neutral-white);
  --tab-border-color: var(--color-neutral-200);
  --tab-panel-border-color: var(--color-neutral-200);
  --tab-border-active: var(--color-neutral-200);
  --tab-active-color: var(--color-neutral-900);

  /* Line Tabs Light */
  --line-tab-color: var(--color-neutral-900);
  --line-tab-inactive-color: var(--color-neutral-400);
  --line-tab-active-color: var(--color-neutral-900);
  --line-tab-accent-color: var(--color-purple-500);
  --line-tab-focus-color: var(--line-tab-accent-color);
  --line-tab-panel-color: var(--color-neutral-900);
  --line-tab-divider-color: var(--color-neutral-200);
  --tabs-view-active-bg: var(--color-neutral-100);
  --tabs-background-bg: var(--color-neutral-white);
  --tabs-background-color: var(--color-neutral-900);
  --tabs-background-border: var(--color-neutral-200);
  --tabs-background-active-border: var(--color-neutral-200);
  --tabs-badge-bg: var(--color-neutral-200);
  --tabs-badge-bg-last: var(--color-neutral-150);
  --tabs-badge-color: var(--color-neutral-900);
  --tabs-badge-color-last: var(--color-neutral-900);
  --tabs-badge-active-bg: var(--color-status-auto500-bg-light);
  --tabs-badge-active-color: var(--color-neutral-900);
  --tabs-add-color: var(--color-purple-500);
  --tabs-metric-color: var(--color-neutral-400);
  --tabs-metric-active-color: var(--color-neutral-900);

  /* Divider Light */
  --divider-color: var(--color-slate-hover);

  /* Pagination Light */
  --pagination-color: var(--color-neutral-900);
  --pagination-hover-bg: var(--color-rgba-pagination-hover-light);
  --pagination-active-bg: var(--color-purple-500);
  --pagination-active-color: var(--color-neutral-white);

  /* Banner Light */
  --banner-title-color: var(--color-neutral-900);
  --banner-subtitle-color: var(--color-neutral-500);
  --banner-subtitle-bg: var(--color-neutral-150);
  --banner-illustration-bg: var(--color-neutral-150);
  --banner-illustration-error-monom: url('/assets/logo_monom_light-DasqHK3J.svg');
}

/* =========================================================
   3. THEME DARK
   ========================================================= */
[data-theme="dark"],
[data-theme="DARK"] {
  --primary-color: var(--color-purple-500);
  --color-bg: var(--color-neutral-1000);
  --color-text: var(--color-neutral-white);
  --color-text-button: var(--color-neutral-white);
  --color-text-secondary: var(--color-purple-400);
  --color-text-disabled: var(--color-neutral-400);

  /* Button badge */
  --button-badge-text-color: var(--color-neutral-white);
  --button-badge-notification-bg: var(--input-error-color);
  --button-badge-primary-bg: var(--color-purple-400);

  /* Variants */
  --background-color-primary: var(--color-purple-500);

  /* Variants hover */
  --background-color-primary-hover: var(--color-purple-700);
  --background-color-secondary-hover: var(--color-slate-border);
  --background-color-filter: var(--color-slate-700);
  --background-color-filter-hover: var(--color-slate-hover);
  --background-color-filter-disabled: var(--color-slate-800);
  --color-text-filter: var(--color-neutral-white);
  --color-text-filter-disabled: var(--color-slate-700);

  /* Variants disabled */
  --background-color-primary-disabled: var(--color-slate-border);
  --border-color-secondary-disabled: var(--color-neutral-300);

  /* Variants login */
  --background-color-login: var(--color-neutral-white);
  --background-color-login-hover: var(--color-neutral-login-hover-dark);
  --background-color-login-disabled: var(--color-slate-border);
  --color-text-login: var(--color-neutral-900);
  --color-text-login-disabled: var(--color-neutral-login-disabled-text-dark);

  /* Chip Dark Variants */
  --chip-emergency-bg: var(--color-neutral-600);
  --chip-emergency-border: var(--color-neutral-emergency-border);

  --chip-critical-bg: var(--color-status-critical-bg-dark);
  --chip-critical-border: var(--color-status-critical-border-dark);

  --chip-high-bg: var(--color-status-high-bg-dark);
  --chip-high-border: var(--color-status-high-border-dark);

  --chip-medium-bg: var(--color-status-medium-bg-dark);
  --chip-medium-border: var(--color-status-medium-border-dark);

  --chip-low-bg: var(--color-status-low-bg-dark);
  --chip-low-border: var(--color-status-low-border-dark);

  --chip-good-bg: var(--color-status-good-bg-dark);
  --chip-good-border: var(--color-status-good-border-dark);

  --chip-normal-bg: var(--color-status-normal-bg-dark);
  --chip-normal-border: var(--color-status-normal-border-dark);

  --chip-criticalSensor-bg: var(--color-status-criticalSensor-bg-dark);
  --chip-criticalSensor-border: var(--color-status-criticalSensor-border-dark);

  --chip-active-bg: var(--color-status-active-bg-dark);
  --chip-active-border: var(--color-status-active-border-dark);

  --chip-auto400-bg: var(--color-status-auto400-bg-dark);
  --chip-auto500-bg: var(--color-status-auto500-bg-dark);

  --chip-unknown-bg: var(--color-status-unknown-bg-dark);
  --chip-unknown-border: var(--color-status-unknown-border-dark);

  --chip-auto-bg: var(--color-status-auto-bg-dark);
  --chip-auto-border: var(--color-status-auto-border-dark);

  --chip-text: var(--color-neutral-white);
  --chip-counter: var(--color-slate-border);

  /* dropdown */
  --select-dropdown-bg: var(--color-slate-700);
  --select-dropdown-text: var(--color-neutral-white);
  --select-control-bg: var(--color-slate-700);
  --select-border-color: var(--color-slate-border);
  --select-scrollbar-thumb: var(--color-rgba-scrollbar-thumb-light);
  --select-placeholder-color: var(--color-neutral-400);

  /* Input Dark */
  --input-bg: var(--color-slate-700);
  --input-label-color: var(--color-neutral-white);
  --input-label-disabled-color: var(--color-rgba-input-label-disabled-dark);
  --input-text-color: var(--color-neutral-white);
  --input-placeholder-color: var(--color-neutral-500);
  --textarea-placeholder-color: var(--color-neutral-400);
  --textarea-formated-placeholder-color: var(--color-neutral-400);
  --input-border-color: var(--color-slate-800);
  --input-border-focus-color: var(--color-purple-500);
  --input-border-error-color: var(--color-status-error-hex);
  --input-icon-color: var(--color-neutral-500);
  --input-helper-color: var(--color-neutral-500);
  --input-helper-disabled-color: var(--color-rgba-input-helper-disabled);
  --input-error-color: var(--color-status-error-hex);
  --input-scrollbar-thumb: var(--color-neutral-600);
  --input-scrollbar-track: transparent;
  --input-arrows-hover-bg: var(--color-slate-900);

  /* Checkbox Dark */
  --checkbox-border: var(--color-neutral-200);
  --checkbox-bg: var(--color-slate-700);
  --checkbox-icon-color: var(--color-neutral-white);
  --checkbox-label-color: var(--color-neutral-white);
  --checkbox-active-bg: var(--color-purple-400);
  --checkbox-active-border: var(--color-purple-400);

  /* RadioButton Dark */
  --radio-button-border: var(--color-neutral-200);
  --radio-button-bg: var(--color-slate-700);
  --radio-button-active-bg: transparent;
  --radio-button-active-border: var(--color-purple-400);
  --radio-button-active-dot: var(--color-purple-400);
  --radio-button-check-bg: var(--color-purple-400);
  --radio-button-check-icon: var(--color-neutral-white);
  --radio-button-disabled-bg: transparent;
  --radio-button-disabled-opacity: var(--opacity-disabled);
  --radio-button-label-color: var(--color-neutral-white);
  --radio-button-label-active-color: var(--color-neutral-off-white);

  /* Card Dark */
  --card-solid-bg: var(--color-slate-800);
  --card-solid-border: var(--color-slate-border);
  --card-outline-bg: transparent;
  --card-outline-border: var(--color-slate-border);
  --card-only-border-bg: transparent;
  --card-only-border-border: var(--color-slate-border);
  --card-title-color: var(--color-neutral-white);
  --card-action-color: var(--color-purple-400);
  --card-hover-bg: var(--color-slate-hover);

  /* Empty Dark */
  --empty-bg: var(--color-slate-800);
  --empty-text-color: var(--color-neutral-white);
  --empty-action-color: var(--color-purple-400);
  --empty-icon-wrapper-bg: var(--color-slate-700);
  --empty-monom-bg: var(--color-slate-700);
  --empty-monom-path: var(--color-neutral-400);

  /* Notification Dark */
  --notification-list-bg: var(--color-slate-800);
  --notification-list-border: var(--color-slate-700);
  --notification-item-bg: var(--color-slate-700);
  --notification-item-bg-hover: var(--color-slate-hover);
  --notification-title-color: var(--color-neutral-white);
  --notification-subtitle-color: var(--color-neutral-400);
  --notification-description-color: var(--color-neutral-400);
  --notification-value-color: var(--color-neutral-white);
  --notification-date-color: var(--color-neutral-400);
  --notification-header-color: var(--color-neutral-white);
  --notification-action-color: var(--color-purple-400);
  --notification-empty-color: var(--color-neutral-white);
  --notification-empty-icon-color: var(--color-neutral-white);
  --notification-icon-color: var(--color-neutral-white);

  --notification-emergency-bar: var(--color-neutral-emergency-border);
  --notification-emergency-icon-bg: var(--color-neutral-600);
  --notification-emergency-icon-color: var(--color-neutral-emergency-border);

  --notification-critical-bar: var(--color-status-critical-border-dark);
  --notification-critical-icon-bg: var(--color-status-critical-bg-dark);
  --notification-critical-icon-color: var(--color-neutral-white);

  --notification-high-bar: var(--color-status-high-border-dark);
  --notification-high-icon-bg: var(--color-status-high-bg-dark);
  --notification-high-icon-color: var(--color-neutral-white);

  --notification-medium-bar: var(--color-status-medium-border-dark);
  --notification-medium-icon-bg: var(--color-status-medium-bg-dark);
  --notification-medium-icon-color: var(--color-neutral-white);

  --notification-low-bar: var(--color-status-low-border-dark);
  --notification-low-icon-bg: var(--color-status-low-bg-dark);
  --notification-low-icon-color: var(--color-neutral-white);

  --notification-good-bar: var(--color-status-good-border-dark);
  --notification-good-icon-bg: var(--color-status-good-bg-dark);
  --notification-good-icon-color: var(--color-neutral-white);

  --notification-normal-bar: var(--color-status-normal-border-dark);
  --notification-normal-icon-bg: var(--color-status-normal-bg-dark);
  --notification-normal-icon-color: var(--color-neutral-white);

  --notification-criticalSensor-bar: var(--color-status-criticalSensor-border-dark);
  --notification-criticalSensor-icon-bg: var(--color-status-criticalSensor-bg-dark);
  --notification-criticalSensor-icon-color: var(--color-neutral-white);

  --notification-active-bar: var(--color-status-active-border-dark);
  --notification-active-icon-bg: var(--color-status-active-bg-dark);
  --notification-active-icon-color: var(--color-neutral-white);

  --notification-auto400-bar: var(--color-status-auto400-bg-dark);
  --notification-auto400-icon-bg: var(--color-status-auto400-bg-dark);
  --notification-auto400-icon-color: var(--color-neutral-white);

  --notification-auto500-bar: var(--color-status-auto500-bg-dark);
  --notification-auto500-icon-bg: var(--color-status-auto500-bg-dark);
  --notification-auto500-icon-color: var(--color-neutral-white);

  --notification-unknown-bar: var(--color-status-unknown-border-dark);
  --notification-unknown-icon-bg: var(--color-status-unknown-bg-dark);
  --notification-unknown-icon-color: var(--color-neutral-white);

  /* Modal Dark */
  --modal-bg: var(--color-slate-950);
  --modal-title-color: var(--color-neutral-white);
  --modal-subtitle-color: var(--color-neutral-400);
  --modal-close-color: var(--color-neutral-white);
  --modal-border-color: var(--color-slate-border);

  /* Toast Dark */
  --toast-title-color: var(--color-neutral-white);
  --toast-description-color: var(--color-neutral-400);
  --toast-close-color: var(--color-neutral-400);

  --toast-ok-bg: var(--color-slate-800);
  --toast-ok-border: var(--color-status-normal-border-dark);
  --toast-ok-bar: var(--color-status-normal-border-dark);

  --toast-alert-bg: var(--color-slate-800);
  --toast-alert-border: var(--color-status-critical-border-dark);
  --toast-alert-bar: var(--color-status-critical-border-dark);

  --toast-alert-orange-bg: var(--color-slate-800);
  --toast-alert-orange-border: var(--color-status-high-border-dark);
  --toast-alert-orange-bar: var(--color-status-high-border-dark);

  --toast-info-bg: var(--color-slate-800);
  --toast-info-border: var(--color-status-active-border-dark);
  --toast-info-bar: var(--color-status-active-border-dark);

  --toast-system-bg: var(--color-slate-800);
  --toast-system-border: var(--color-neutral-600);
  --toast-system-bar: var(--color-neutral-500);

  /* Menu Dark */
  --menu-bg: var(--color-slate-700);
  --menu-border-color: var(--color-slate-border);
  --menu-text-color: var(--color-neutral-white);
  --menu-trigger-color: var(--color-neutral-white);
  --menu-trigger-hover-bg: var(--color-slate-hover);
  --menu-trigger-hover-color: var(--color-neutral-white);
  --menu-trigger-open-color: var(--color-neutral-white);
  --menu-item-color: var(--color-neutral-white);
  --menu-item-hover-bg: var(--color-purple-500);
  --menu-item-hover-color: var(--color-neutral-white);
  --menu-item-active-color: var(--color-neutral-white);
  --menu-accent-color: var(--color-purple-500);

  /* Action Table Dark */
  --action-table-bg: var(--color-slate-border);
  --action-table-text: var(--color-neutral-white);

  /* Header Cell Dark */
  --header-cell-text: var(--color-neutral-white);

  /* Row Dark */
  --row-bg: var(--color-slate-800);
  --row-bg-hover: var(--color-slate-700);
  --row-cell-color: var(--color-neutral-white);

  /* Empty Table Dark */
  --empty-table-bg: var(--color-slate-800);

  /* Table Dark */
  --table-border-color: var(--color-slate-border);
  --table-bulk-action-active-color: var(--color-neutral-white);
  --table-bulk-action-disabled-color: var(--color-slate-hover);
  --table-bulk-action-hover-bg: var(--color-slate-700);

  /* Add Button Dark */
  --add-button-bg: var(--color-slate-700);
  --add-button-bg-hover: var(--color-slate-border);
  --add-button-color: var(--color-neutral-white);

  /* Tabs Dark */
  --tab-bg: var(--color-slate-800);
  --tab-color: var(--color-neutral-500);
  --tab-bg-hover: var(--color-rgba-tab-hover-dark);
  --tab-active-bg: var(--color-slate-700);
  --tab-panel-bg: var(--color-slate-800);
  --tab-border-color: var(--color-slate-border);
  --tab-panel-border-color: var(--color-slate-hover);
  --tab-border-active: var(--color-slate-border);
  --tab-active-color: var(--color-neutral-white);

  /* Line Tabs Dark */
  --line-tab-color: var(--color-neutral-white);
  --line-tab-inactive-color: var(--color-neutral-400);
  --line-tab-active-color: var(--color-neutral-white);
  --line-tab-accent-color: var(--color-purple-400);
  --line-tab-focus-color: var(--line-tab-accent-color);
  --line-tab-panel-color: var(--color-neutral-white);
  --line-tab-divider-color: var(--color-slate-hover);
  --tabs-view-active-bg: var(--color-slate-hover);
  --tabs-background-bg: var(--color-slate-800);
  --tabs-background-color: var(--color-neutral-white);
  --tabs-background-border: var(--color-slate-800);
  --tabs-background-active-border: var(--color-status-auto500-bg-light);
  --tabs-badge-bg: var(--color-neutral-200);
  --tabs-badge-bg-last: var(--color-slate-700);
  --tabs-badge-color: var(--color-neutral-900);
  --tabs-badge-color-last: var(--color-neutral-white);
  --tabs-badge-active-bg: var(--color-status-auto500-bg-light);
  --tabs-badge-active-color: var(--color-neutral-900);
  --tabs-add-color: var(--color-purple-400);
  --tabs-metric-color: var(--color-neutral-400);
  --tabs-metric-active-color: var(--color-neutral-white);

  /* Divider Dark */
  --divider-color: var(--color-slate-hover);

  /* Pagination Dark */
  --pagination-color: var(--color-neutral-white);
  --pagination-hover-bg: var(--color-rgba-pagination-hover-dark);
  --pagination-active-bg: var(--color-purple-500);
  --pagination-active-color: var(--color-neutral-white);

  /* Banner Dark */
  --banner-title-color: var(--color-neutral-white);
  --banner-subtitle-color: var(--color-neutral-400);
  --banner-subtitle-bg: var(--color-slate-800);
  --banner-illustration-bg: var(--color-slate-800);
  --banner-illustration-error-monom: url('/assets/logo_monom_dark-BSAB6-Qa.svg');
}
/*$vite$:1*/