/* ======================================================================
   BMIET Learning Portal – Custom UI
   - Modern, light look on top of Bootstrap 5.3
   - Mobile-first tweaks
   - Cards, hero, badges, progress, tables, embeds
   ====================================================================== */

/* ---- Theme tokens --------------------------------------------------- */
:root {
  --brand: #0d6efd;     /* Bootstrap primary */
  --brand-2: #6f42c1;   /* purple accent */
  --surface: #ffffff;
  --surface-subtle: #f8fafc;
  --border-subtle: rgba(0,0,0,.06);
  --shadow-1: 0 .5rem 1rem rgba(0,0,0,.07);
}

/* Dark mode (Bootstrap toggles via data-bs-theme="dark") */
:root[data-bs-theme="dark"] {
  --surface: #0f1115;
  --surface-subtle: #0b0d10;
  --border-subtle: rgba(255,255,255,.08);
  --shadow-1: 0 .5rem 1rem rgba(0,0,0,.35);
}

html, body { height: 100%; }
body { background: var(--surface-subtle); }

/* ---- Typography ----------------------------------------------------- */
.navbar-brand { font-weight: 800; letter-spacing: -.01em; }

h1, .display-5 { letter-spacing: -.02em; }
h1 span.text-primary { text-shadow: 0 .04em .04em rgba(13,110,253,.12); }

/* ---- Hero ----------------------------------------------------------- */
.hero {
  background: linear-gradient(135deg, rgba(13,110,253,.08), rgba(111,66,193,.08));
  border: 1px solid var(--border-subtle);
  border-radius: 1.25rem;
  padding: 2rem 1.25rem;
}
@media (min-width: 768px) { .hero { padding: 3rem 2rem; } }
.hero .badge-soft {
  background: rgba(13,110,253,.12);
  color: var(--brand);
  font-weight: 600;
  letter-spacing: .02em;
}

/* ---- Cards ---------------------------------------------------------- */
.card-hover {
  transition: transform .18s ease, box-shadow .18s ease;
}
.card-hover:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-1);
}

/* Compact card footers */
.card-footer.bg-white { background-color: var(--surface) !important; }

/* ---- Badges / Subtle variants -------------------------------------- */
.badge-soft      { background: rgba(13,110,253,.12); color: var(--brand); }
.badge-soft-purple { background: rgba(111,66,193,.12); color: var(--brand-2); }

.badge.bg-primary-subtle   { color: var(--brand); }
.badge.bg-secondary-subtle { color: #555; }

/* ---- Buttons -------------------------------------------------------- */
.btn-primary { box-shadow: 0 .25rem .75rem rgba(13,110,253,.25); }
.btn-primary:hover { box-shadow: 0 .35rem .9rem rgba(13,110,253,.3); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* ---- Forms ---------------------------------------------------------- */
.form-control:focus, .form-select:focus {
  border-color: rgba(13,110,253,.45);
  box-shadow: 0 0 0 .2rem rgba(13,110,253,.15);
}

/* ---- Lists / Disabled links ---------------------------------------- */
.list-group-item.disabled,
a.list-group-item.disabled {
  pointer-events: none;
  opacity: .6;
}

/* ---- Progress ------------------------------------------------------- */
.progress { height: .85rem; background: rgba(0,0,0,.05); }
:root[data-bs-theme="dark"] .progress { background: rgba(255,255,255,.08); }
.progress-bar { font-size: .7rem; }

/* ---- Tables --------------------------------------------------------- */
.table thead th {
  border-bottom-width: 1px;
}
.table-sm td, .table-sm th { vertical-align: middle; }

/* ---- Footer --------------------------------------------------------- */
footer { background: var(--surface); border-top: 1px solid var(--border-subtle); }

/* ---- Utilities ------------------------------------------------------ */
.rounded-2xl { border-radius: 1rem !important; }
.text-gradient {
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Responsive video embeds (if not using .ratio from Bootstrap) */
.video-embed {
  position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: .75rem;
  background: #000;
}
.video-embed iframe, .video-embed object, .video-embed embed {
  position: absolute; top:0; left:0; width:100%; height:100%;
}

/* Alerts */
.alert { border-radius: .75rem; }

/* Make navbar toggler icon visible on custom bg */
.navbar-toggler { border: none; }
.navbar-toggler:focus { box-shadow: 0 0 0 .15rem rgba(13,110,253,.25); }

/* Spacing helpers used on home/dashboard */
.section-title { margin-bottom: .75rem; }