@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;
}

/* 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;
  }
}
/* 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;
}

/* 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;
}

/* 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;
}

/* 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 {
  display: flex;
  flex-direction: column;
  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 (4 columns) 
*/
.events-table-container .mnm-header-row,
.events-table-container .mnm-row {
  grid-template-columns: 1fr 2fr 1.5fr 1.5fr !important;
}

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

/* Modal Table CSS Grid layout (5 columns: Severity, Type, Property, Start, End) */
.link-modal-table-container .mnm-header-row,
.link-modal-table-container .mnm-row {
  grid-template-columns: 1fr 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;
}

/* Ensure neat cells that do not wrap and align perfectly with standard styling */
.event-type-text,
[data-testid^='event-property-'],
[data-testid^='event-start-'],
[data-testid^='event-end-'] {
  white-space: nowrap !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;
}
/* 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;
  border-color: var(--DarkBlue-DarkBlue-400, #3e3659) !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;
  padding: 24px !important;
}

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

.detail-info-title {
  margin: 0 0 16px 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: 0;
  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;
}

/* Ensure labels in the form grid have identical height and bottom-alignment to support multi-line wrap gracefully */
.detail-info-grid label:not(.mnm-datepicker-label-into),
.detail-info-grid .detail-info-label {
  min-height: 34px !important;
  display: flex !important;
  align-items: flex-end !important;
  margin-bottom: 8px !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 {
  border-bottom: 1px solid var(--input-border-color) !important;
  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;
  padding: 24px !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;
}

.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-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(--color-purple-500, #b34be9);
  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-icon {
  width: 16px;
  height: 16px;
}

.comments-list-container {
  flex: 1;
  max-height: 440px;
  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;
  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;
  max-height: 380px;
  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;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  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 */
    padding: 12px 16px !important; /* Minimize Card vertical padding to make it fit beautifully */
  }

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

  .comments-list-container {
    max-height: 110px !important; /* Substantially shorter comments list to fit the compact card */
  }

  .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 */
  }

  .changelog-list-container {
    max-height: 180px !important; /* Shorter changelog list */
  }

  .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;
  }

  .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;
    padding: 12px 16px !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;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  padding-bottom: 16px !important;
  margin-bottom: 16px !important;
  width: 100% !important;
  flex-wrap: wrap !important;
}

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

.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;
  gap: 8px;
  height: 40px;
  margin-left: 16px;
}

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

/* ADR Grid en Visualización (View) */
.adr-details-grid--view {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 16px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !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: var(--color-text-secondary, rgba(255, 255, 255, 0.6));
}

.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;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  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: center !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;

  /* --- 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;

  /* --- 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-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);

  /* 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-300);
  --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-300);

  /* 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-800);
  --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-700);

  /* 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*/