/* Kwalee BI — Background task error handling styles
 * Story 5.3: Background Task Error Handling
 *
 * Error category modifiers on .tile-error for differentiated error UX.
 * Also styles the service-unavailable banner for broker failures.
 */

/* -----------------------------------------------------------------------
 * Category-specific border colours
 * ----------------------------------------------------------------------- */
.tile-error--auth {
  border-color: var(--color-warning);
  border-style: solid;
}

.tile-error--connection,
.tile-error--warehouse {
  border-color: var(--color-sky-500);
  border-style: dashed;
}

.tile-error--query {
  border-color: var(--color-error);
}

.tile-error--broker,
.tile-error--worker {
  border-color: var(--color-error);
  border-style: dashed;
}

.tile-error--timeout {
  border-color: var(--color-warning);
  border-style: dashed;
}

/* -----------------------------------------------------------------------
 * Service Unavailable Banner (broker failure — AC3)
 * ----------------------------------------------------------------------- */
.service-unavailable-banner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-md, 8px);
  background: var(--color-error-bg);
  border: 1px solid var(--color-error);
  margin-bottom: 1rem;
}

.service-unavailable-banner__icon {
  font-size: 1.25rem;
  flex-shrink: 0;
}

.service-unavailable-banner__text {
  font-size: 0.875rem;
  color: var(--color-error-text);
  font-weight: 500;
  line-height: 1.4;
}

/* -----------------------------------------------------------------------
 * Dark mode overrides
 * ----------------------------------------------------------------------- */
[data-theme="dark"] .tile-error--auth {
  border-color: var(--color-warning-text);
}

[data-theme="dark"] .tile-error--connection,
[data-theme="dark"] .tile-error--warehouse {
  border-color: var(--color-sky-500);
}

[data-theme="dark"] .tile-error--query {
  border-color: var(--color-error-text);
}

[data-theme="dark"] .tile-error--broker,
[data-theme="dark"] .tile-error--worker {
  border-color: var(--color-error-text);
}

[data-theme="dark"] .tile-error--timeout {
  border-color: var(--color-warning-text);
}

[data-theme="dark"] .service-unavailable-banner {
  background: var(--color-error-bg);
  border-color: var(--color-error-text);
}

[data-theme="dark"] .service-unavailable-banner__text {
  color: var(--color-error-text);
}