/* High-contrast Dark Theme */
:root{
  --bg:#0f1115; --card:#161b22; --text:#e6edf3; --muted:#9aa4b2;
  --border:#2a2f3a; --primary:#3b82f6; --success:#22c55e; --warning:#f59e0b;
}

html,body{height:100%}
body{
  background:var(--bg); color:var(--text); font-size:16px;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

/* Navbar */
.navbar{ background:#1b2230 !important; border-bottom:1px solid var(--border); }

/* Cards */
.card{
  background:var(--card) !important; color:var(--text) !important;
  border:1px solid var(--border) !important; border-radius:12px !important;
}

/* Learn card */
#learn-card h4{ color:#fff; font-size:1.9rem; font-weight:800; letter-spacing:.2px; }

/* Checkboxes + Labels */
.form-check-input{ width:1.2rem; height:1.2rem; margin-top:.25rem; border:2px solid var(--muted); background:transparent; }
.form-check-input:focus{ box-shadow:0 0 0 .2rem rgba(59,130,246,.25); border-color:var(--primary); }
.form-check-input:checked{ background-color:var(--primary); border-color:var(--primary); }
.form-check-label{ color:var(--text); font-size:1.08rem; line-height:1.5; }

/* Buttons */
.btn{ border-radius:10px; padding:.55rem 1rem; font-weight:600; }
.btn-primary{ background:var(--primary); border-color:var(--primary); }
.btn-primary:hover{ filter:brightness(1.05); }
.btn-outline-light{ color:var(--text); border-color:var(--border); }
.btn-outline-light:hover{ background:#202938; }

/* Progressbar */
.progress{ height:14px; background:#212734; border-radius:999px; }
.progress-bar{ background:var(--primary) !important; transition:width .3s ease; border-radius:999px; }

/* Tables (Manage) */
.table-dark{ --bs-table-bg:#121620; --bs-table-striped-bg:#151b28; color:var(--text); }
.table-dark td, .table-dark th{ border-color:var(--border) !important; }
.table-responsive #tbl th, .table-responsive #tbl td{ white-space:nowrap; }

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

/* Muted */
.text-muted{ color:var(--muted) !important; }

/* ---------- Mobile Tweaks ---------- */
@media (max-width: 768px){
  body{ font-size:17px; }
  #learn-card{ padding:1rem !important; }
  #learn-card h4{ font-size:1.6rem; }
  .form-check-label{ font-size:1.12rem; }
  .form-check-input{ width:1.4rem; height:1.4rem; }
  .btn{ padding:.7rem 1rem; font-size:1rem; }
  .progress{ height:12px; }
  .navbar .navbar-brand{ font-size:1.1rem; }
  /* Manage actions: Buttons untereinander */
  td.actions .btn{ width:100%; margin-bottom:.35rem; }
}

@media (max-width: 576px){
  .container{ padding-left:12px; padding-right:12px; }
  .btn{ width:100%; }               /* große Touch-Ziele */
  .d-flex.gap-2 > .btn,
  .d-flex.gap-2 > form{ flex:1 1 100%; }
}