:root {
  --bg:#fff;
  --fg:#111;
  --card:#f6f6f6;
  --border:#ddd;
  --accent:#0d6efd;
  --transition-speed: 0.35s;
}

[data-theme='dark'] {
  --bg:#0f1115;
  --fg:#e5e7eb;
  --card:#1a1f29;
  --border:#2b3240;
  --accent:#60a5fa;
}

/* Smooth fade animation for theme switch */
html, body {
  transition: background-color var(--transition-speed) ease,
              color var(--transition-speed) ease;
}

body {
  background:var(--bg);
  color:var(--fg);
  font-family:sans-serif;
  margin:0;
}

header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:1rem;
  border-bottom:1px solid var(--border);
}

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

.btn {
  padding: .35rem .7rem;
  border-radius: .4rem;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--fg);
  font-weight: 600;
  transition: background-color var(--transition-speed), color var(--transition-speed), border-color var(--transition-speed);
}

/* Light mode adjustments */
:root .btn {
  background: #f5f5f5;
  color: #111;
}

/* Dark mode adjustments */
[data-theme='dark'] .btn {
  background: #2b3240;       /* darker grey-blue for contrast */
  color: #e5e7eb;            /* light text for readability */
  border-color: #3d4556;
}

.btn:hover {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}

.btn {
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.container {
  max-width:1100px; /* 10% wider */
  margin:1rem auto;
  padding:0 1rem;
  transition: background-color var(--transition-speed);
}

.card {
  background:var(--card);
  padding:1rem;
  border-radius:.6rem;
  border:1px solid var(--border);
  transition: background-color var(--transition-speed), color var(--transition-speed);
}

table {
  width:100%;
  border-collapse:collapse;
  transition: color var(--transition-speed);
}

th, td {
  padding:.5rem;
  border-bottom:1px solid var(--border);
}

th {
  text-align:left;
  color:#666;
  transition: color var(--transition-speed);
}

.flash {
  padding:.4rem .6rem;
  margin-bottom:.5rem;
  border-radius:.4rem;
}

.flash.error {
  background:#ffe5e5;
  color:#800;
}

.flash.success {
  background:#eaffea;
  color:#040;
}

.flash.info {
  background:#e5f1ff;
  color:#003;
}

input[type=text] {
  padding:.3rem;
  border:1px solid var(--border);
  border-radius:.4rem;
  flex:1;
  transition: background-color var(--transition-speed), color var(--transition-speed);
}

form.searchbar {
  margin-bottom:1rem;
  display:flex;
  gap:.5rem;
}

button {
  cursor:pointer;
}

/* Theme-aware blacklisted row coloring */
tr.blacklisted {
  background-color: var(--blacklist-bg);
  color: var(--blacklist-fg);
}

/* Default (light mode) blacklist colors */
:root {
  --bg:#fff;
  --fg:#111;
  --card:#f6f6f6;
  --border:#ddd;
  --accent:#0d6efd;
  --blacklist-bg:#ffe5e5;
  --blacklist-fg:#800;
  --transition-speed:0.35s;
}

/* Dark mode blacklist colors */
[data-theme='dark'] {
  --bg:#0f1115;
  --fg:#e5e7eb;
  --card:#1a1f29;
  --border:#2b3240;
  --accent:#60a5fa;
  --blacklist-bg:#442222;   /* darker muted red background */
  --blacklist-fg:#ff8080;   /* soft red text, readable on dark */
}