/* LMS Platform — global UI tokens & compat layer */

:root {
  color-scheme: light;
  --color-primary: #2F318E;
  --color-accent: #0A653C;
  --color-muted: #6B7C7E;
  --color-ink: #221F20;
  --color-primary-hover: #262770;
  --color-accent-hover: #085130;
}

html, body {
  height: 100%;
  color: var(--color-ink);
}

body {
  background: #f4f5f7;
}

body[data-overlay-open="true"] {
  overflow: hidden;
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
*::-webkit-scrollbar-thumb {
  background: rgba(107, 124, 126, 0.35);
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.65);
}
*::-webkit-scrollbar-track {
  background: transparent;
}

/* Bootstrap-compat (legacy markup) */
.container {
  width: 100%;
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

.row { display: flex; flex-wrap: wrap; }
.g-4 { gap: 1rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-5 { margin-bottom: 1.25rem; }
.mt-5 { margin-top: 1.25rem; }
.w-100 { width: 100%; }
.h-100 { height: 100%; }
.min-vh-100 { min-height: 100vh; }

@media (min-width: 1024px) {
  .col-lg-3 { width: 25%; }
  .col-lg-4 { width: 33.3333%; }
  .col-lg-5 { width: 41.6667%; }
  .col-lg-6 { width: 50%; }
  .col-lg-8 { width: 66.6667%; }
  .col-lg-12 { width: 100%; }
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .65rem 1rem;
  border-radius: 1rem;
  font-weight: 600;
  font-size: .875rem;
  border: 1px solid rgba(107, 124, 126, 0.25);
  background: #fff;
  color: var(--color-ink);
  box-shadow: 0 1px 2px rgba(34, 31, 32, 0.06);
  text-decoration: none;
}
.btn:hover { background: #f4f5f7; }
.btn-primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.btn-primary:hover { background: var(--color-primary-hover); }
.btn-outline-dark { background: #fff; border-color: var(--color-muted); }

.badge {
  display: inline-flex;
  align-items: center;
  padding: .2rem .6rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 700;
}
.bg-success { background: rgba(10, 101, 60, 0.12); color: var(--color-accent); }

.table { width: 100%; border-collapse: collapse; }
.table th, .table td {
  padding: .75rem 1rem;
  border-bottom: 1px solid rgba(107, 124, 126, 0.2);
}