/* ─── Base ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 14px;
  scroll-behavior: smooth;
}

@media (min-width: 768px) {
  html { font-size: 16px; }
}

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: #f5f6fa;
  color: #1e2235;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  margin: 0;
}

/* ─── Focus rings ───────────────────────────────────────────────────────── */
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus,
.form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #4f46e5;
}

/* ─── Navbar ────────────────────────────────────────────────────────────── */
.bk-navbar {
  background: linear-gradient(135deg, #1e1b4b 0%, #312e81 60%, #4338ca 100%);
  padding: 0.6rem 0;
}

.bk-navbar .navbar-toggler {
  border-color: rgba(255,255,255,.3);
}
.bk-navbar .navbar-toggler-icon {
  filter: invert(1);
}

/* Brand */
.bk-brand-icon {
  position: relative;
  display: inline-flex;
  font-size: 1.5rem;
  color: #a5b4fc;
  width: 1.6rem;
  height: 1.6rem;
}
.bk-brand-icon .bi:last-child { color: #c7d2fe; }

.bk-brand-text {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -.5px;
  color: #fff;
}
.bk-brand-text span { color: #a5b4fc; }

/* Nav links */
.bk-nav-link {
  color: rgba(255,255,255,.75) !important;
  font-size: .9rem;
  font-weight: 500;
  padding: .45rem .85rem !important;
  border-radius: 8px;
  transition: background .2s, color .2s;
}
.bk-nav-link:hover {
  color: #fff !important;
  background: rgba(255,255,255,.12);
}
.bk-nav-link.active {
  color: #fff !important;
  background: rgba(255,255,255,.18);
  font-weight: 600;
}

/* ─── Page wrapper / main fade-in ───────────────────────────────────────── */
.bk-page-wrapper {
  flex: 1;
}

.bk-main-fade {
  animation: fadeInUp .35s ease both;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── Cards (global polish) ─────────────────────────────────────────────── */
.card {
  border: none;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,.07), 0 4px 16px rgba(0,0,0,.06);
}
.card-header {
  border-radius: 12px 12px 0 0 !important;
  font-weight: 600;
  letter-spacing: .01em;
}

/* ─── Buttons ────────────────────────────────────────────────────────────── */
.btn {
  border-radius: 8px;
  font-weight: 500;
  transition: transform .12s, box-shadow .12s;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.12); }
.btn:active { transform: translateY(0); }

/* ─── Tables ─────────────────────────────────────────────────────────────── */
.table { border-radius: 10px; overflow: hidden; }
.table thead th {
  background: #f0f0f8;
  font-weight: 600;
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #4f46e5;
}

/* ─── Footer ─────────────────────────────────────────────────────────────── */
.bk-footer {
  background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%);
  border-top: 3px solid #4f46e5;
  margin-top: auto;
}

.bk-footer-brand {
  font-weight: 700;
  color: #a5b4fc;
  font-size: .95rem;
}

.bk-footer-link {
  color: rgba(255,255,255,.65);
  text-decoration: none;
  font-size: .85rem;
  font-weight: 500;
  transition: color .2s;
}
.bk-footer-link:hover { color: #fff; }

/* ─── Form controls ──────────────────────────────────────────────────────── */
.form-control, .form-select {
  border-radius: 8px;
  border: 1.5px solid #dde1ef;
  transition: border-color .2s, box-shadow .2s;
}
.form-control:focus, .form-select:focus {
  border-color: #4f46e5;
}

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}
.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* ─── Alerts ─────────────────────────────────────────────────────────────── */
.alert { border-radius: 10px; border: none; }
