/* Dark theme overrides for pages using cok_style.css */
:root {
  --bg: #121212;
  --card: #1a1a1a;
  --ink: #e8ecf1;
  --muted: #b9c8dc;
  --border: #2a2a2a;
  --accent: #81d4fa;
  --accent-hover: #5fbef0;
  --ok-bg: #163e2b;   --ok-border:#1f6a46;
  --warn-bg:#3d3314;  --warn-border:#7a6728;
}

/* Page */
html, body { background: var(--bg) !important; color: var(--ink) !important; }
body { padding: 40px 20px; }

/* Cards / containers */
.family-card, .container, form, .child-entry {
  background: var(--card) !important;
  color: var(--ink) !important;
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
}
.family-card.completed { background: #0e1912 !important; border-left-color: #28a745 !important; }

/* Headings */
h1, h2, h3, h4 { color: var(--ink) !important; }

/* Tables */
table { background: transparent !important; color: var(--ink) !important; }
th { background: #1f1f1f !important; color: var(--muted) !important; }
td, th { border-bottom: 1px solid var(--border) !important; }
tr:hover { background: #181818 !important; }

/* Inputs (if any on these pages) */
input, select, textarea {
  background: #0f1420 !important; color: var(--ink) !important;
  border: 1px solid #223049 !important;
}
label { color: var(--ink) !important; }

/* Buttons / links */
.btn, button {
  background: var(--accent) !important; color: #0b111a !important;
  border: 0 !important;
}
.btn:hover, button:hover { background: var(--accent-hover) !important; }
.actions-footer .btn { background: var(--accent) !important; }

/* Badges */
.badge {
  background: #233045 !important; color: var(--muted) !important;
  border: 1px solid #2d3d58 !important;
}

/* Child entry states */
.child-entry { background:#151a22 !important; border-left: 3px solid #2d3d58 !important; }
.child-entry.fulfilled { background:#14241a !important; border-left-color:#28a745 !important; }
.child-entry.pending { background:#2b2612 !important; border-left-color:#fbc02d !important; }

/* Links in dark mode */
a { color: var(--accent) !important; }
a:hover { color: var(--accent-hover) !important; text-decoration: underline; }