:root {
  --brand-primary: #0d6efd;
  --brand-sky: #0ea5e9;
  --brand-sky-light: #e0f4fe;
  --brand-navy: #0b4a8f;
  --surface-bg: #f2f8fd;
}

html, body {
  overflow-x: hidden;
}

body {
  background-color: var(--surface-bg);
}

a {
  color: var(--brand-primary);
}

/* ---------------------------------------------------------------------
   Re-point Bootstrap's own primary-colour components at our theme
   variables (Bootstrap ships a hardcoded blue via its own --bs-* vars),
   so a user's chosen accent colour changes buttons/badges/etc too, not
   just the custom classes above.
--------------------------------------------------------------------- */
.btn-primary {
  --bs-btn-bg: var(--brand-primary);
  --bs-btn-border-color: var(--brand-primary);
  --bs-btn-hover-bg: var(--brand-navy);
  --bs-btn-hover-border-color: var(--brand-navy);
  --bs-btn-active-bg: var(--brand-navy);
  --bs-btn-active-border-color: var(--brand-navy);
  --bs-btn-color: var(--on-primary);
  --bs-btn-hover-color: var(--on-primary);
  --bs-btn-active-color: var(--on-primary);
  --bs-btn-disabled-bg: var(--brand-primary);
  --bs-btn-disabled-border-color: var(--brand-primary);
}

.btn-outline-primary {
  --bs-btn-color: var(--brand-primary);
  --bs-btn-border-color: var(--brand-primary);
  --bs-btn-hover-bg: var(--brand-primary);
  --bs-btn-hover-border-color: var(--brand-primary);
  --bs-btn-hover-color: var(--on-primary);
  --bs-btn-active-bg: var(--brand-primary);
  --bs-btn-active-border-color: var(--brand-primary);
  --bs-btn-active-color: var(--on-primary);
}

.text-primary { color: var(--brand-primary) !important; }
.bg-primary { background-color: var(--brand-primary) !important; }
.border-primary { border-color: var(--brand-primary) !important; }
.badge.bg-primary { background-color: var(--brand-primary) !important; }

.form-check-input:checked {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--brand-sky);
  box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--brand-primary) 25%, transparent);
}

.page-link { color: var(--brand-primary); }
.page-item.active .page-link {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
  color: var(--on-primary);
}

.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--brand-primary);
  color: var(--on-primary);
}

/* ---------------------------------------------------------------------
   Site header: logo + school name + motto, shown on every page
--------------------------------------------------------------------- */
.site-header {
  background: #fff;
  border-top: 4px solid var(--brand-sky);
}

.site-header__logo {
  height: 48px;
  width: 48px;
  object-fit: contain;
}

.site-header__logo-fallback {
  font-size: 2rem;
  color: var(--brand-primary);
}

.site-header__name {
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--brand-navy);
  letter-spacing: 0.3px;
}

.site-header__motto {
  font-size: 0.8rem;
  color: var(--brand-sky);
  font-style: italic;
  font-weight: 600;
}

@media (max-width: 575.98px) {
  .site-header__name { font-size: 1rem; }
  .site-header__motto { font-size: 0.72rem; }
  .site-header__logo { height: 38px; width: 38px; }
}

.navbar.bg-white .nav-link.active,
.navbar.bg-white .nav-link:hover {
  color: var(--brand-primary);
}

/* ---------------------------------------------------------------------
   Homepage hero: blue -> sky-blue gradient, white text
--------------------------------------------------------------------- */
.hero-panel {
  background: linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-primary) 55%, var(--brand-sky) 100%);
  color: #fff;
  border-radius: 0.75rem;
}

.hero-panel .lead,
.hero-panel p {
  color: rgba(255, 255, 255, 0.92);
}

.hero-panel .btn-primary {
  background-color: #fff;
  border-color: #fff;
  color: var(--brand-navy);
  font-weight: 600;
}

.hero-panel .btn-primary:hover {
  background-color: var(--brand-sky-light);
  border-color: var(--brand-sky-light);
}

.info-card {
  border-top: 3px solid var(--brand-sky);
}

.info-card h5 i {
  color: var(--brand-sky);
}

/* ---------------------------------------------------------------------
   General layout polish
--------------------------------------------------------------------- */
.card {
  border: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.table-responsive {
  border-radius: 0.375rem;
}

/* Keep wide content (tables, chat, code) from forcing horizontal page scroll */
.container, .container-fluid {
  max-width: 100%;
}

/* ---------------------------------------------------------------------
   Library file cards / thumbnails
--------------------------------------------------------------------- */
.library-thumb {
  width: 100%;
  height: 170px;
  object-fit: cover;
  /* A document's title/heading is almost always near the top of page 1 --
     crop from the top, not the vertical center, or the title gets cut off. */
  object-position: top center;
  background: var(--brand-sky-light);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.library-thumb-icon {
  width: 100%;
  height: 170px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-sky-light);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  font-size: 3rem;
  color: var(--brand-sky);
}

/* ---------------------------------------------------------------------
   Chat
--------------------------------------------------------------------- */
.chat-scroll {
  height: 60vh;
  max-height: 70vh;
  overflow-y: auto;
}

.chat-bubble {
  max-width: 85%;
  border-radius: 1rem;
  padding: 0.5rem 0.9rem;
  word-break: break-word;
}

.chat-bubble.mine {
  margin-left: auto;
  background: var(--brand-primary);
  color: #fff;
}

.chat-bubble.theirs {
  background: var(--brand-sky-light);
}

@media (min-width: 768px) {
  .chat-bubble {
    max-width: 75%;
  }
}