/* ==========================================================================
   Base CSS — shared across all dashboards
   Theme variables are injected at runtime by theme.js via :root style props.
   ========================================================================== */

/* --------------------------------------------------------------------------
   CSS custom properties — default to dark theme so the page looks correct
   even before theme.js runs (avoids flash of unstyled content).
   -------------------------------------------------------------------------- */
:root {
  --background: #0a0a0a;
  --foreground: #e8eefc;
  --card: #171717;
  --card-foreground: #e8eefc;
  --primary: #57c2ba;
  --primary-foreground: #ffffff;
  --secondary: #9a9a9a;
  --secondary-foreground: #f8fafc;
  --muted: #212121;
  --muted-foreground: #94a3b8;
  --accent: #212121;
  --accent-foreground: #e8eefc;
  --border: #212121;
  --ring: #57c2ba;
  --ring-text: #171717;

  /* Status colours — fixed regardless of theme */
  --color-critical: #ff5252;
  --color-critical-bg: rgba(255, 82, 82, 0.15);
  --color-warn: #ffc107;
  --color-warn-bg: rgba(255, 193, 7, 0.1);
  --color-ok: #4caf50;

  /* Spacing scale */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;

  /* Typography */
  --font-sans: "Inter", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", monospace;
  --font-size-sm: 12px;
  --font-size-base: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;

  /* Borders */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  background-color: var(--background);
  color: var(--foreground);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--primary);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--muted);
  padding: 1px 4px;
  border-radius: 3px;
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
.page {
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--space-lg);
}

.page-header {
  margin-bottom: var(--space-lg);
  border-bottom: 1px solid var(--border);
  padding-bottom: var(--space-md);
}

.page-title {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--foreground);
}

.page-subtitle {
  font-size: var(--font-size-base);
  color: var(--muted-foreground);
  margin-top: var(--space-xs);
}

.grid {
  display: grid;
  gap: var(--space-md);
}

.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 900px) {
  .grid-2,
  .grid-3 {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   Card
   -------------------------------------------------------------------------- */
.card {
  background: var(--card);
  color: var(--card-foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
}

.card-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  margin-bottom: var(--space-md);
  color: var(--foreground);
}

/* --------------------------------------------------------------------------
   Badge
   -------------------------------------------------------------------------- */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: var(--font-size-sm);
  font-weight: 600;
}

.badge-primary  { background: var(--primary); color: var(--primary-foreground); }
.badge-ring     { background: var(--ring);    color: var(--ring-text); }
.badge-muted    { background: var(--muted);   color: var(--muted-foreground); }
.badge-critical { background: var(--color-critical-bg); color: var(--color-critical); }
.badge-warn     { background: var(--color-warn-bg);     color: var(--color-warn); }
.badge-ok       { background: rgba(76, 175, 80, 0.15);  color: var(--color-ok); }

/* --------------------------------------------------------------------------
   Tables — mirrors base_css from mcp_utils/themes.py
   -------------------------------------------------------------------------- */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-base);
  border-radius: var(--radius-md);
  overflow: hidden;
}

thead {
  background: var(--muted);
}

th,
td {
  padding: var(--space-xs) var(--space-sm);
  text-align: left;
}

th {
  padding: var(--space-sm) var(--space-sm);
  font-weight: 600;
  color: var(--muted-foreground);
  font-size: var(--font-size-sm);
  letter-spacing: 0.04em;
}

tbody tr {
  border-top: 1px solid var(--border);
  transition: background 0.15s;
}

tbody tr:hover {
  background: var(--accent);
}

/* Status rows — mirrors mcp_utils base_css */
.row-critical td { background-color: var(--color-critical-bg) !important; }
.row-warn     td { background-color: var(--color-warn-bg) !important; }

/* Status text helpers */
.text-critical { color: var(--color-critical) !important; }
.text-warn     { color: var(--color-warn) !important; }
.text-ok       { color: var(--color-ok) !important; }
.text-muted    { color: var(--muted-foreground) !important; }
.text-primary  { color: var(--primary) !important; }
.text-secondary { color: var(--secondary) !important; }

/* --------------------------------------------------------------------------
   State indicators (loading / error / empty)
   -------------------------------------------------------------------------- */
.state-loading,
.state-error,
.state-empty {
  padding: var(--space-lg);
  text-align: center;
  color: var(--muted-foreground);
  font-size: var(--font-size-base);
}

.state-error {
  color: var(--color-critical);
}

/* --------------------------------------------------------------------------
   Timestamp / refresh footer
   -------------------------------------------------------------------------- */
.refresh-bar {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--font-size-sm);
  color: var(--muted-foreground);
  margin-top: var(--space-md);
}

.refresh-bar .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.3; }
}