/* Caliza Status Theme — dark, blue-forward */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

:root {
  /* Brand blues */
  --brand: rgb(61 74 86);
  --brand-600: #2a2525;
  --brand-700: #362a2a;

  /* Dark background & gradient */
  --bg: #000000;
  --bg-grad-a: #9dbae7;   /* subtle left tint */
  --bg-grad-b: #0b6dc0;   /* subtle right tint */

  /* Surfaces & text */
  --surface: #1A2236;
  --text: #353e4a;
  --text-dim: #94A3B8;
  --muted: #64748B;

  /* Semantic colors */
  --ok: #16A34A;
  --warn: #F59E0B;
  --down: #EF4444;
  --border: #202A3C;
  --shadow: 0 8px 24px rgba(0,0,0,0.45);
}

html, body, #__next, .App {
  background: radial-gradient(1200px 600px at 25% 20%, var(--bg-grad-a), transparent),
                    radial-gradient(1200px 600px at 25% 0%, var(--bg-grad-b), transparent);  
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--text) !important;
}

/* Navbar */
.header, nav, .Navbar, .navbar {
  background: transparent !important;
  border-bottom: 1px solid var(--border) !important;
}
.navbar a, .Navbar a { color: var(--text) !important; opacity: 0.9; }
.navbar a:hover, .Navbar a:hover { color: var(--brand) !important; opacity: 1; }

/* Hero / intro */
.hero, .intro, .App .Header {
  background: transparent !important;
  border-bottom: 1px solid var(--border);
}
.hero h1, .intro h1, .Header h1 { color: var(--text) !important; }
.hero p, .intro p { color: var(--text-dim) !important; }

/* Cards */
.card, .site, .Site, .Status, .content .box, .box {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow);
  border-radius: 14px !important;
}
.card h2, .site h2, .Site h2 { color: var(--text) !important; }

/* Badges */
.badge, .label, .Tag {
  background: rgba(47,86,255,0.15) !important;
  color: var(--brand) !important;
  border: 1px solid rgba(47,86,255,0.35) !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
}
.badge--success { background: rgba(22,163,74,0.15) !important; color: var(--ok) !important; border-color: rgba(22,163,74,0.35) !important; }
.badge--warning { background: rgba(245,158,11,0.15) !important; color: var(--warn) !important; border-color: rgba(245,158,11,0.35) !important; }
.badge--danger  { background: rgba(239,68,68,0.15) !important; color: var(--down) !important; border-color: rgba(239,68,68,0.35) !important; }

/* Links & buttons */
a, .link { color: var(--brand) !important; }
a:hover, .link:hover { color: var(--brand-700) !important; }
button, .btn {
  background: var(--brand) !important;
  color: #fff !important;
  border-radius: 10px !important;
  border: none !important;
}
button:hover, .btn:hover { background: var(--brand-700) !important; }

/* Charts / sparkline accents */
svg .stroke-brand,
svg path[stroke="#00bcd4"],
svg path[stroke="#00BCD4"] {
  stroke: var(--brand) !important;
}
svg .stroke-success { stroke: var(--ok) !important; }
svg .stroke-warning { stroke: var(--warn) !important; }
svg .stroke-danger  { stroke: var(--down) !important; }

/* Tables */
table, .Table {
  background: var(--surface) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}
table th, table td { border-color: var(--border) !important; }

footer p {
  display: none !important;
}

footer::before {
  content: "© " attr(data-year) " Caliza Status";
  content: "© 2025 Caliza Status"; /* simpler, hardcoded */
  display: block;
  text-align: center;
  color: var(--brand);
  padding: 1rem 0;
  font-size: 0.9rem;
}