/*
 * Catalyst/Tailwind Pro bridge for the legacy Flask UI.
 *
 * Source inspiration:
 * - /opt/streambeheer/audiostreamen-ui/audiostreamen-ui/shared/tokens.css
 * - /opt/streambeheer/audiostreamen-ui/audiostreamen-ui/shared/globals.css
 * - /opt/streambeheer/audiostreamen-ui/audiostreamen-ui/shared/components/Button.tsx
 *
 * This does not replace a real Tailwind build. It normalizes the legacy Jinja UI
 * onto the same design language until the main app is migrated properly.
 */

:root {
  --cp-brand-blue: #4f46e5;
  --cp-brand-blue-hover: #6366f1;
  --cp-brand-dark: #0f172a;
  --cp-surface: #ffffff;
  --cp-surface-soft: #f8fafc;
  --cp-border: #e2e8f0;
  --cp-border-strong: #cbd5e1;
  --cp-text: #0f172a;
  --cp-text-muted: #64748b;
  --cp-success: #047857;
  --cp-success-bg: #ecfdf5;
  --cp-success-border: #a7f3d0;
  --cp-warning: #b45309;
  --cp-warning-bg: #fffbeb;
  --cp-warning-border: #fcd34d;
  --cp-danger: #be123c;
  --cp-danger-bg: #fff1f2;
  --cp-danger-border: #fda4af;
  --cp-radius-sm: 0.5rem;
  --cp-radius-md: 0.75rem;
  --cp-radius-lg: 1rem;
  --cp-radius-pill: 9999px;
  --cp-shadow-soft: 0 1px 2px rgba(15, 23, 42, 0.06), 0 8px 24px rgba(15, 23, 42, 0.08);
}

body {
  color: var(--cp-text);
  background:
    radial-gradient(circle at top left, rgba(99, 102, 241, 0.08), transparent 24rem),
    linear-gradient(180deg, #f8fafc 0%, #f3f6fb 100%);
}

.card,
section,
.section {
  border: 1px solid var(--cp-border);
  border-radius: var(--cp-radius-lg);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--cp-shadow-soft);
}

.card-header {
  border-bottom: 1px solid var(--cp-border);
  background:
    linear-gradient(180deg, rgba(248, 250, 252, 0.95), rgba(255, 255, 255, 0.96));
}

.table-wrap,
.ui-table-wrap {
  border-radius: var(--cp-radius-lg);
}

.table {
  border-color: var(--cp-border);
  border-radius: var(--cp-radius-lg);
  background: var(--cp-surface);
}

.table thead th,
.card .table thead th {
  background: #f8fafc !important;
  color: var(--cp-brand-dark) !important;
  border-bottom: 1px solid var(--cp-border);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.table tbody td {
  border-bottom-color: #eef2f7;
}

.table tbody tr:nth-child(even) {
  background: rgba(248, 250, 252, 0.55);
}

.table tbody tr:hover {
  background: rgba(79, 70, 229, 0.05);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.5rem;
  padding: 0.625rem 1rem;
  border: 1px solid var(--cp-border-strong);
  border-radius: var(--cp-radius-pill);
  background: var(--cp-surface);
  color: var(--cp-text);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    color 160ms ease,
    box-shadow 160ms ease,
    transform 120ms ease;
}

.btn:hover {
  text-decoration: none;
  background: #f8fafc;
  border-color: #cbd5e1;
}

.btn:focus-visible {
  outline: 2px solid rgba(79, 70, 229, 0.25);
  outline-offset: 2px;
}

.btn:active {
  transform: translateY(1px);
}

.btn:disabled,
.btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.btn-sm {
  min-height: 2rem;
  padding: 0.45rem 0.8rem;
  font-size: 0.8125rem;
}

.btn-primary {
  border-color: var(--cp-brand-blue);
  background: var(--cp-brand-blue);
  color: #fff;
}

.btn-primary:hover {
  background: var(--cp-brand-blue-hover);
  border-color: var(--cp-brand-blue-hover);
  color: #fff;
}

.btn-danger,
.btn-error {
  border-color: #e11d48;
  background: #e11d48;
  color: #fff;
}

.btn-danger:hover,
.btn-error:hover {
  border-color: #f43f5e;
  background: #f43f5e;
  color: #fff;
}

.btn-warning {
  border-color: #f59e0b;
  background: #f59e0b;
  color: #fff;
}

.btn-warning:hover {
  border-color: #fbbf24;
  background: #fbbf24;
  color: #fff;
}

.btn-info {
  border-color: #0ea5e9;
  background: #0ea5e9;
  color: #fff;
}

.btn-info:hover {
  border-color: #38bdf8;
  background: #38bdf8;
  color: #fff;
}

.btn-outline,
.btn-outline-secondary {
  border-color: var(--cp-border-strong);
  background: rgba(255, 255, 255, 0.72);
  color: var(--cp-text);
}

.btn-outline:hover,
.btn-outline-secondary:hover {
  background: #f8fafc;
  border-color: #94a3b8;
  color: var(--cp-text);
}

.btn-outline-primary {
  border-color: rgba(79, 70, 229, 0.32);
  background: rgba(79, 70, 229, 0.06);
  color: #4338ca;
}

.btn-outline-primary:hover {
  background: rgba(79, 70, 229, 0.12);
  border-color: rgba(79, 70, 229, 0.42);
  color: #3730a3;
}

.btn-outline-danger {
  border-color: rgba(225, 29, 72, 0.28);
  background: rgba(255, 241, 242, 0.88);
  color: var(--cp-danger);
}

.btn-outline-danger:hover {
  background: rgba(255, 228, 230, 0.96);
  border-color: rgba(225, 29, 72, 0.42);
  color: #9f1239;
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 1.55rem;
  padding: 0.2rem 0.65rem;
  border: 1px solid var(--cp-border);
  border-radius: var(--cp-radius-pill);
  background: #f8fafc;
  color: var(--cp-text);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
}

.badge.ok,
.badge.bg-success {
  background: var(--cp-success-bg);
  border-color: var(--cp-success-border);
  color: var(--cp-success) !important;
}

.badge.warn,
.badge.bg-warning {
  background: var(--cp-warning-bg);
  border-color: var(--cp-warning-border);
  color: var(--cp-warning) !important;
}

.badge.down,
.badge.bg-danger {
  background: var(--cp-danger-bg);
  border-color: var(--cp-danger-border);
  color: var(--cp-danger) !important;
}

.badge.https {
  background: rgba(79, 70, 229, 0.08);
  border-color: rgba(79, 70, 229, 0.2);
  color: #4338ca;
}

.badge.http {
  background: rgba(14, 165, 233, 0.08);
  border-color: rgba(14, 165, 233, 0.18);
  color: #0369a1;
}

.badge.mute,
.badge.bg-secondary,
.badge-subtle {
  background: #f1f5f9 !important;
  border-color: #dbe3ef !important;
  color: #475569 !important;
}

input,
select,
textarea {
  min-height: 2.5rem;
  border: 1px solid var(--cp-border-strong);
  border-radius: var(--cp-radius-md);
  background: rgba(255, 255, 255, 0.96);
  color: var(--cp-text);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: rgba(79, 70, 229, 0.58);
  box-shadow:
    0 0 0 3px rgba(79, 70, 229, 0.12),
    0 1px 2px rgba(15, 23, 42, 0.04);
}

label {
  color: var(--cp-text-muted);
}

.ops-cell {
  gap: 0.6rem;
}

.ops-cell .ops-line {
  gap: 0.5rem;
  flex-wrap: wrap;
}

.cards-page__hero,
.stream-card,
.stream-card__form,
.backend-monitoring-form {
  backdrop-filter: blur(10px);
}

.row-disabled {
  opacity: 0.62;
}

@media (max-width: 900px) {
  .btn,
  .btn-sm {
    min-height: 2.25rem;
  }

  .cards-toolbar__actions .btn {
    flex: 1 1 auto;
  }
}