:root{
  --bg:#0c0f12;         /* dark charcoal */
  --panel:#171b21;      /* card background */
  --text:#e8edf2;       /* primary text */
  --muted:#a8b1bb;      /* secondary text */
  --primary:#6ee7b7;    /* mint accent */
  --danger:#ef4444;
  --border:#2a313a;
  --radius:14px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu;
  color:var(--text); background:var(--bg);
}

.container{max-width:900px;margin:0 auto;padding:24px}

.site-header{
  border-bottom:1px solid var(--border); background:rgba(23,27,33,.7);
  position:sticky; top:0; backdrop-filter: blur(10px); z-index:10
}

.header-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 24px}
.brand{color:var(--text);text-decoration:none;font-weight:700;letter-spacing:.3px}
.nav a{margin-left:12px}

.site-footer{border-top:1px solid var(--border);margin-top:32px;color:var(--muted)}

.card{
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius);
  padding:28px; box-shadow:0 10px 30px rgba(0,0,0,.25)
}

h1,h2,h3{margin:0 0 14px}
h1{font-size:28px}
p.muted{color:var(--muted);margin-top:4px}

.form{
  display:grid; grid-template-columns:1fr; gap:16px; margin-top:12px
}
.form .row{display:grid;gap:8px}
label{color:var(--muted);font-size:14px}
input[type="text"], input[type="password"], input[type="email"], input[type="file"]{
  background:#0e1216; border:1px solid var(--border); color:var(--text);
  border-radius:10px; padding:12px 14px; outline:none;
}
input:focus{border-color:var(--primary); box-shadow:0 0 0 3px rgba(110,231,183,.15)}

.btn{
  display:inline-block; border-radius:10px; padding:10px 16px; border:1px solid var(--border);
  background:#0e1216; color:var(--text); text-decoration:none; cursor:pointer
}
.btn:hover{border-color:#3b444f}
.btn-primary{
  background:linear-gradient(135deg,#34d399,#4ade80); color:#0a0f0c; border:none; font-weight:600
}
.btn-danger{background:#1b1010; border:1px solid #3a1a1a; color:#ffb4b4}

.form-actions{display:flex;gap:10px;align-items:center;margin-top:4px}

.helptext,.errorlist{font-size:13px}
.helptext{color:var(--muted)}
.errorlist{list-style:none;padding:0;margin:4px 0;color:var(--danger)}

.flash .alert{padding:10px 14px;border-radius:10px;margin:10px 0;background:#132018;border:1px solid #1f3a2e}
.alert.error{background:#2a1414;border-color:#4a2323}

/* static/css/main.css */
.navbar img.rounded-circle {
  width: 28px;
  height: 28px;
  object-fit: cover;
  border: 1px solid rgba(0,0,0,.1);
}

/* ===== Get Started: force high contrast + correct stacking ===== */

/* Ensure content sits above decorative background */
.on-dark { position: relative; z-index: 1; }

/* Page heading + subheading */
.on-dark h1,
.on-dark .h1,
.on-dark h1 * { 
  color: #ffffff !important; 
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
}
.on-dark > p.text-muted,
.on-dark .page-subtitle {
  color: rgba(255,255,255,.82) !important;
}


/* Card title + description */
.on-dark .card-glass .card-title,
.on-dark .card-glass h5 {
  color: #ffffff !important;
}
.on-dark #role-desc,
.on-dark .card-glass .text-muted {
  color: rgba(255,255,255,.75) !important;
}

/* Toggle chips: readable on dark */
.on-dark .toggle-chip { 
  color: #e6e9f2 !important; 
  border-color: rgba(255,255,255,.28) !important; 
}
.on-dark .toggle-chip.active { color: #fff !important; }

/* Keep Bootstrap button text as-is (don’t force white on all) */
.on-dark .btn, .on-dark .btn * { color: inherit; }

/* Optional: slightly brighten the whole card text */
.on-dark .card-glass { color: #e6e9f2 !important; }

/* Page title + subtitle above the card */
body .on-dark > h1 { 
  color: #ffffff !important; 
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
}
body .on-dark > p.text-muted {
  color: rgba(255,255,255,.85) !important;
}

/* Card header text inside the glass card */
body .on-dark .card-glass .card-title,
body .on-dark .card-glass h5 {
  color: #ffffff !important;
}
body .on-dark #role-desc {
  color: rgba(255,255,255,.78) !important;
}

/* Put decorative background behind all page content */
.ui-bg { z-index: -1 !important; }   /* was 0 */