body {
    margin: 0;
    background: #0f172a;
    color: #0f172a;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.app-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 16px;
}

.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 12px;
    background: radial-gradient(circle at top left, #1e293b, #020617);
    color: #e5e7eb;
    margin-bottom: 16px;
    box-shadow: 0 18px 45px rgba(15,23,42,0.75);
}

.app-title { margin:0; font-size:1.4rem; font-weight:600; }
.app-subtitle { margin:4px 0 0; font-size:.85rem; color:#9ca3af; }

.topbar-right { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

.btn {
    border: none;
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 0.85rem;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: transform 0.08s ease, box-shadow 0.08s ease, background-color 0.08s ease;
}
.btn-sm { padding:5px 10px; font-size:.8rem; }
.btn-xs { padding:3px 8px; font-size:.75rem; }
.btn-primary { background:#2563eb; color:#f9fafb; box-shadow:0 8px 18px rgba(37,99,235,0.45); }
.btn-primary:hover { background:#1d4ed8; transform:translateY(-1px); }
.btn-secondary { background:#4b5563; color:#f9fafb; box-shadow:0 8px 18px rgba(55,65,81,0.45); }
.btn-secondary:hover { background:#374151; transform:translateY(-1px); }
.btn-ghost { background:transparent; color:#e5e7eb; border:1px solid rgba(148,163,184,0.4); }
.btn-ghost:hover { background:rgba(148,163,184,0.18); transform:translateY(-1px); }

.pill {
    display:inline-flex; align-items:center;
    padding:2px 10px; border-radius:999px;
    font-size:.75rem; background:rgba(15,23,42,0.75);
    color:#e5e7eb; border:1px solid rgba(148,163,184,0.35);
}
.pill-role { text-transform:uppercase; letter-spacing:.04em; font-weight:600; }
.pill-type { margin-right:6px; background:#0f172a; border-color:rgba(148,163,184,0.6); }

.badge {
    display:inline-flex; align-items:center; justify-content:center;
    min-width:22px; height:20px; padding:0 6px;
    border-radius:999px; background:#dc2626; color:#f9fafb;
    font-size:.75rem; font-weight:600;
}

.layout-grid {
    display:grid;
    grid-template-columns:minmax(0,1.6fr) minmax(0,1.4fr);
    gap:14px;
}
.card-wide { grid-column:1 / -1; }

.card {
    background: linear-gradient(145deg, #0b1120, #020617);
    border-radius:12px;
    padding:10px 12px 12px;
    color:#e5e7eb;
    box-shadow:0 16px 40px rgba(15,23,42,0.9);
    border:1px solid rgba(148,163,184,0.25);
}
.card-header { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px; }
.card-title { margin:0; font-size:1rem; font-weight:600; }
.card-body { font-size:.86rem; }

.table { width:100%; border-collapse:collapse; }
.table-compact th, .table-compact td {
    padding:6px 4px;
    border-bottom:1px solid rgba(30,64,175,0.4);
    font-size:.82rem;
}
.table-compact th { text-align:left; color:#9ca3af; font-weight:500; }

.list { list-style:none; padding:0; margin:0; }
.list-item { padding:6px 4px; border-bottom:1px solid rgba(30,64,175,0.35); }
.list-item:last-child { border-bottom:none; }
.list-item-title { font-size:.86rem; }
.list-item-meta { font-size:.75rem; color:#9ca3af; margin-top:2px; }

.tiles { display:flex; flex-wrap:wrap; gap:10px; }
.tile { flex:1 1 140px; border-radius:10px; background:radial-gradient(circle at top left, rgba(37,99,235,0.25), rgba(15,23,42,0.9));
        padding:10px 12px; border:1px solid rgba(37,99,235,0.45); }
.tile-label { font-size:.75rem; color:#9ca3af; }
.tile-value { margin-top:4px; font-size:1.2rem; font-weight:600; color:#e5e7eb; }

.muted { color:#9ca3af; }
.text-success { color:#22c55e; }
.text-danger { color:#f97316; }

.quick-links { display:flex; flex-wrap:wrap; gap:8px; }

@media (max-width: 900px) {
    .layout-grid { grid-template-columns:minmax(0,1fr); }
    .topbar { flex-direction:column; align-items:flex-start; }
    .topbar-right { align-self:stretch; justify-content:flex-start; }
}



/* === Global dark theme fixes === */
body {
    color: #e5e7eb;
}

/* Headings & text */
h1, h2, h3, h4, h5, h6,
p, span, div, label, th, td {
    color: #e5e7eb;
}

/* Tables */
table th, table td {
    color: #e5e7eb;
}

/* Links */
a { color: #93c5fd; }
a:hover { color: #bfdbfe; }

/* Inputs */
input, select, textarea {
    background: #ffffff;
    color: #000000;
    border: 1px solid #cbd5e1;
}

/* Buttons */
button, .btn {
    color: #e5e7eb;
}

/* Muted text */
.muted {
    color: rgba(148,163,184,.95);
}

/* Uren pagina expliciet */
.page-uren,
.page-uren * {
    color: #e5e7eb;
}


/* === Force dark text colors (override) === */
.page-dashboard, .page-dashboard * {
  color: #e5e7eb !important;
}
.page-dashboard input, .page-dashboard select, .page-dashboard textarea {
  color: #000000 !important;
  background: #ffffff !important;
}
.page-dashboard a { color: #93c5fd !important; }


/* === Weekrooster: tekst in shift-blokken zwart (override global dark text) === */
.page-weekrooster .shift-pill,
.page-weekrooster .shift-card,
.page-weekrooster .shift-item,
.page-weekrooster .shift-block,
.page-weekrooster .shift-badge,
.page-weekrooster .shift {
  color: #000000 !important;
}
.page-weekrooster .shift-pill *,
.page-weekrooster .shift-card *,
.page-weekrooster .shift-item *,
.page-weekrooster .shift-block *,
.page-weekrooster .shift-badge *,
.page-weekrooster .shift * {
  color: #000000 !important;
}