/* Design System CSS Variables */
:root {
  /* Spacing System */
  --primitives-spacing-0: 0px;
  --primitives-spacing-0-5: 2px;
  --primitives-spacing-1: 4px;
  --primitives-spacing-1-duplicate: 4px;
  --primitives-spacing-5: 20px;
  --primitives-spacing-11: 44px;
  --primitives-spacing-14: 56px;

  /* Border Radius */
  --themes-border-border-radius-rounded-sm: 4px;

  /* Background Colors */
  --themes-colors-background-bg-secondary-soft: #F9FAFB;
  --themes-colors-background-bg-secondary-medium: #f5f5f5;
  --themes-colors-background-bg-brand-softer: #e6f3ff;
  --themes-colors-background-bg-warning-soft: #fff8f1;
  --themes-colors-background-bg-danger-soft: #fef0f2;

  /* Border Colors */
  --themes-colors-border-border-base: #e5e5e5;
  --themes-colors-border-border-base-medium: #d1d1d1;
  --themes-colors-border-border-brand-subtle: #b3d9ff;
  --themes-colors-border-border-warning-subtle: #fcd9bd;
  --themes-colors-border-border-danger-subtle: #ffccd3;

  /* Text Colors */
  --themes-colors-text-text-body: #333333;
  --themes-colors-text-text-fg-brand-strong: #1c398e;
  --themes-colors-text-text-fg-warning: #771d1d;
  --themes-colors-text-text-fg-danger-strong: #8b0836;

  /* Brand Colors (Figma: Green/100) */
  --color-brand-green: #25AF88;
  --color-brand-green-hover: #1e9a73;

  /* Chart Colors (Figma: donut charts) */
  --color-chart-status-online: #22E5A1;
  --color-chart-status-offline: #FF5E5E;
  --color-chart-importance-low: #51C0FF;
  --color-chart-importance-medium: #FE9239;
  --color-chart-importance-high: #FF5E5E;

  /* Chart Colors (Figma: bar charts) */
  --color-chart-alert-bar: #5BDCC6;  /* Figma: Primary/300 teal */
}

/* Flowbite Badge Base Styles - High specificity */
table .flowbite-badge,
.flowbite-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  padding: 2px 4px !important;
  position: relative !important;
  border-radius: 4px !important;
  border: 1px solid !important;
  white-space: nowrap !important;
  font-family: "Ubuntu Sans-Medium", Helvetica !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  text-align: center !important;
  letter-spacing: 0 !important;
  line-height: 16px !important;
}

/* Flowbite Severity Badge Variants - High specificity - Design System Colors */
table .flowbite-badge-severity-low,
.flowbite-badge-severity-low {
  border-radius: 6px !important;
  border: 1px solid #BEDBFF !important;
  background: #EEF6FF !important;
  color: #1C398E !important;
  text-align: center !important;
  font-family: "Ubuntu Sans", sans-serif !important;
  font-size: 12px !important;
  font-style: normal !important;
  font-weight: 500 !important;
  line-height: 16px !important; /* 133.333% */
}

table .flowbite-badge-severity-medium,
.flowbite-badge-severity-medium {
  border-radius: 6px !important;
  border: 1px solid #FCD9BD !important;
  background: #FFF8F1 !important;
  color: #8B0836 !important;
  text-align: center !important;
  font-family: "Ubuntu Sans", sans-serif !important;
  font-size: 12px !important;
  font-style: normal !important;
  font-weight: 500 !important;
  line-height: 16px !important; /* 133.333% */
}

table .flowbite-badge-severity-high,
.flowbite-badge-severity-high {
  border-radius: 6px !important;
  border: 1px solid #FFCCD3 !important;
  background: #FEF0F2 !important;
  color: #8B0836 !important;
  text-align: center !important;
  font-family: "Ubuntu Sans", sans-serif !important;
  font-size: 12px !important;
  font-style: normal !important;
  font-weight: 500 !important;
  line-height: 16px !important; /* 133.333% */
}

table .flowbite-badge-severity-critical,
.flowbite-badge-severity-critical {
  border-radius: 6px !important;
  border: 1px solid #FFCCD3 !important;
  background: #FEF0F2 !important;
  color: #8B0836 !important;
  text-align: center !important;
  font-family: "Ubuntu Sans", sans-serif !important;
  font-size: 12px !important;
  font-style: normal !important;
  font-weight: 500 !important;
  line-height: 16px !important; /* 133.333% */
}

/* Flowbite Status Badge Variants - No dot icon, rounded shape */
table .flowbite-badge-status-active,
.flowbite-badge-status-active {
  background-color: #f5f5f5 !important;
  border-color: #d1d1d1 !important;
  color: #333333 !important;
  border-radius: 6px !important;
  padding: 2px 6px !important;
}

table .flowbite-badge-status-resolved,
.flowbite-badge-status-resolved {
  background-color: #e5e5e5 !important;
  border-color: #d1d1d1 !important;
  color: #666666 !important;
  border-radius: 6px !important;
  padding: 2px 6px !important;
}

table .flowbite-badge-status-acknowledged,
.flowbite-badge-status-acknowledged {
  background-color: #e6f3ff !important;
  border-color: #b3d9ff !important;
  color: #1c398e !important;
  border-radius: 6px !important;
  padding: 2px 6px !important;
}

/* Table Header Cell - Standard table cell, not flex container */
table thead th.table-header-cell {
  height: 44px;
  padding: 12px 20px;
  border-top: 1px solid #E5E7EB;
  border-bottom: 1px solid #E5E7EB;
  background: #F9FAFB;
  color: #4A5565;
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  text-transform: capitalize;
  vertical-align: middle;
  text-align: left;
}

/* Table Header Link - Flex container for text and icon alignment */
table thead th.table-header-cell .table-header-link {
  color: #4A5565;
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-transform: capitalize;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

/* Table header text */
table thead th.table-header-cell .table-header-link .table-header-text {
  display: inline;
}

/* SVG icons in table headers */
table thead th.table-header-cell .table-header-link svg {
  display: inline-block;
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  vertical-align: middle;
}

.table-header-link:hover {
  color: #1F2937;
}