/*
 * Scholar Project - Custom CSS
 * ----------------------------
 * This file contains custom styles to override or extend the Bootswatch theme.
 */

/* Load Inter font */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  color-scheme: light;
  --brand-primary: #f7b500;
  --brand-dark: #3a2c00;
  --brand-muted: #7c6a00;
  --surface-base: #f8f9fa;
  --surface-card: #ffffff;
  --surface-muted: #f1f3f5;
  --text-primary: #212529;
  --text-secondary: #4c5158;
  --border-color: rgba(15, 23, 42, 0.08);
  --input-bg: #ffffff;
  --input-border: rgba(15, 23, 42, 0.15);
  --nav-bg: #ffffff;
  --nav-text: #322408;
  --nav-text-muted: #4f3b0a;
  --nav-outline: rgba(247, 181, 0, 0.35);
  --nav-avatar-bg: rgba(247, 181, 0, 0.18);
  --nav-avatar-border: rgba(247, 181, 0, 0.38);
  --nav-avatar-text: #5c4200;
  --footer-bg: #ffffff;
  --footer-border: rgba(15, 23, 42, 0.08);
  --shadow-soft: 0 4px 16px rgba(15, 23, 42, 0.08);
  --link-color: #b48a00;
  --link-hover: #8a6600;
  --hero-bg-start: #ffe066;
  --hero-bg-end: #f7b500;
  --hero-text: #3a2c00;
  --hero-accent: #b48a00;
  --hero-muted: #7c6a00;
}

:root.dark {
  color-scheme: dark;
  --brand-primary: #f7b500;
  --brand-dark: #ffe071;
  --brand-muted: rgba(255, 224, 113, 0.75);
  --surface-base: #0a0f1a;
  --surface-card: #121a2b;
  --surface-muted: #0d1625;
  --text-primary: #f8fafc;
  --text-secondary: rgba(226, 232, 240, 0.82);
  --border-color: rgba(148, 163, 184, 0.18);
  --input-bg: rgba(17, 25, 39, 0.9);
  --input-border: rgba(148, 163, 184, 0.35);
  --nav-bg: rgba(8, 13, 22, 0.95);
  --nav-text: #fff6ce;
  --nav-text-muted: rgba(255, 230, 140, 0.85);
  --nav-outline: rgba(247, 181, 0, 0.45);
  --nav-avatar-bg: rgba(247, 181, 0, 0.24);
  --nav-avatar-border: rgba(247, 181, 0, 0.45);
  --nav-avatar-text: #fff4b3;
  --footer-bg: rgba(8, 13, 22, 0.96);
  --footer-border: rgba(148, 163, 184, 0.16);
  --shadow-soft: 0 14px 32px rgba(2, 6, 23, 0.6);
  --link-color: #ffe28a;
  --link-hover: #f7b500;
  --hero-bg-start: #dca600;
  --hero-bg-end: #f7b500;
  --hero-text: #fff7d6;
  --hero-accent: #ffd75a;
  --hero-muted: rgba(255, 239, 200, 0.82);
}

/* General styles */
html {
  background-color: var(--surface-base);
}

body {
  font-family: 'Inter', sans-serif;
  background-color: var(--surface-base);
  color: var(--text-primary);
  transition: background-color 0.35s ease, color 0.35s ease;
}

a {
  color: var(--link-color);
  transition: color 0.2s ease;
}

a:hover,
a:focus {
  color: var(--link-hover);
}

/* Django notification styling aligned with golden theme */
.alert {
  border: none !important;
  border-radius: 0.85rem !important;
  padding: 0.95rem 1.2rem !important;
  box-shadow: 0 12px 30px rgba(247, 181, 0, 0.12) !important;
}

.alert-info {
  background: linear-gradient(120deg, rgba(255, 240, 186, 0.9), rgba(255, 223, 128, 0.85)) !important;
  color: #4a3500 !important;
}

.alert-success {
  background: linear-gradient(120deg, rgba(187, 247, 208, 0.95), rgba(134, 239, 172, 0.9)) !important;
  color: #14532d !important;
}

.alert-warning {
  background: linear-gradient(120deg, rgba(254, 240, 138, 0.95), rgba(253, 224, 71, 0.9)) !important;
  color: #7c2d12 !important;
}

.alert-danger {
  background: linear-gradient(120deg, rgba(254, 202, 202, 0.95), rgba(252, 165, 165, 0.9)) !important;
  color: #7f1d1d !important;
}

/* Navbar enhancements */
.navbar {
  background-color: var(--nav-bg) !important;
  color: var(--nav-text);
  box-shadow: var(--shadow-soft);
  border-bottom: 1px solid var(--border-color);
  transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

.navbar-brand {
  color: var(--nav-text);
  font-size: 1.5rem;
  letter-spacing: -0.5px;
}

/* Hero section for the homepage */
.hero {
  padding: 4rem 0;
  background: var(--surface-card);
  border-radius: 0.5rem;
  margin-bottom: 2rem;
  text-align: center;
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--border-color);
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.hero h1 {
  font-weight: 700;
  font-size: 3rem;
  margin-bottom: 1rem;
  color: var(--text-primary);
}

.hero p {
  font-size: 1.25rem;
  color: var(--text-secondary);
}

/* Card styles */
.card {
  border: 1px solid var(--border-color);
  background-color: var(--surface-card);
  color: var(--text-primary);
  box-shadow: var(--shadow-soft);
  transition: transform 0.2s, box-shadow 0.3s ease, border-color 0.3s ease;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 32px rgba(247, 181, 0, 0.18);
}

/* Footer styles */
footer {
  background: var(--footer-bg);
  color: var(--text-secondary);
  padding: 2rem 0;
  margin-top: 3rem;
  border-top: 1px solid var(--footer-border);
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.dark footer {
  background:
    radial-gradient(circle at top, rgba(255, 224, 130, 0.12), transparent 60%),
    linear-gradient(180deg, rgba(6, 10, 18, 0.98), rgba(4, 7, 14, 0.98));
  color: rgba(241, 245, 249, 0.82);
  border-top: 1px solid rgba(148, 163, 184, 0.25);
  box-shadow: inset 0 1px 0 rgba(248, 250, 252, 0.04);
}

footer a {
  color: var(--link-color);
}

footer a:hover,
footer a:focus {
  color: var(--link-hover);
}

.dark footer h5,
.dark footer a,
.dark footer p,
.dark footer li,
.dark footer i {
  color: rgba(248, 250, 252, 0.82) !important;
}

.dark footer .btn-outline-dark {
  border-color: rgba(248, 250, 252, 0.55) !important;
  color: rgba(248, 250, 252, 0.82) !important;
  background: transparent !important;
}

.dark footer .btn-outline-dark:hover {
  background: rgba(248, 250, 252, 0.08) !important;
  color: rgba(248, 250, 252, 0.95) !important;
  border-color: rgba(248, 250, 252, 0.75) !important;
}

.theme-toggle-btn {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  background: var(--surface-card);
  color: var(--nav-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}

.theme-toggle-btn:hover,
.theme-toggle-btn:focus {
  background: rgba(247, 181, 0, 0.16);
  color: var(--hero-accent);
  box-shadow: 0 6px 16px rgba(247, 181, 0, 0.22);
}

.theme-toggle-btn:focus {
  outline: 3px solid rgba(247, 181, 0, 0.35);
  outline-offset: 2px;
}

.theme-toggle-btn i {
  font-size: 1.1rem;
  line-height: 1;
}

.dark .theme-toggle-btn {
  background: rgba(8, 13, 22, 0.9);
  border-color: rgba(148, 163, 184, 0.3);
  color: rgba(248, 250, 252, 0.85);
  box-shadow: 0 10px 24px rgba(2, 6, 23, 0.55);
}

.dark .theme-toggle-btn:hover,
.dark .theme-toggle-btn:focus {
  background: rgba(59, 130, 246, 0.18);
  color: rgba(224, 231, 255, 0.95);
  box-shadow: 0 12px 30px rgba(59, 130, 246, 0.25);
}

/* Responsive refinements */
@media (max-width: 992px) {
  .app-navbar {
    margin: 0.75rem 0.5rem;
    border-radius: 18px;
  }

  .app-navbar .navbar-brand span:last-child {
    font-size: 1.05rem;
  }

  .app-navbar .navbar-collapse {
    padding: 1rem 0.75rem;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: var(--surface-card);
  }

  .app-navbar .nav-right {
    flex-wrap: wrap !important;
    justify-content: center !important;
  }

  .hero {
    padding: 3rem 1.75rem;
    margin: 0 0.5rem 2rem;
  }

  .hero h1 {
    font-size: clamp(2rem, 7vw, 2.6rem);
  }

  .hero p {
    font-size: 1.05rem;
  }

  .hero .btn,
  .btn-cta {
    width: 100%;
    margin-bottom: 0.6rem;
  }

  .programs-body .sidebar-layout {
    gap: 1.5rem;
  }

  .programs-body .agents-card,
  .liked-body .program-card,
  .documents-container,
  .cover-card {
    border-radius: 18px;
  }

  .liked-body .hero-section {
    margin-inline: 0.75rem;
  }

  .documents-container {
    margin: 1.5rem auto;
    padding: 1.5rem 1.3rem;
  }

  .documents-page .documents-main {
    flex-direction: column;
  }

  .documents-page .documents-upload {
    width: 100%;
  }

  .cover-hero {
    margin-inline: 0.25rem;
  }
}

@media (max-width: 768px) {
  .app-navbar .navbar-brand {
    gap: 4px;
  }

  .app-navbar .nav-menu .nav-link {
    padding: 0.45rem 0.75rem;
  }

  .programs-body .hero-section {
    border-radius: 20px;
    padding: 2.5rem 1.4rem;
    margin: 0 0.5rem 1.5rem;
  }

  .programs-body .btn-cta {
    width: 100%;
  }

  .programs-body .filter-sidebar {
    padding: 1.25rem;
  }

  .programs-body .agents-card {
    border-radius: 16px;
    padding: 1.2rem;
  }

  .programs-body .program-card {
    margin-bottom: 1rem;
  }

  .programs-body .pagination {
    justify-content: center;
  }

  .compare-body .comparison-wrapper {
    overflow-x: auto;
    padding: 1.25rem;
  }

  .compare-body .comparison-table {
    min-width: 580px;
  }

  .liked-body .program-card {
    padding-inline: 0.75rem;
  }

  .liked-body .program-card .card-body {
    padding-inline: 0.75rem;
  }

  .documents-page .documents-main {
    gap: 1.5rem;
  }

  .documents-page .documents-title {
    font-size: 1.8rem;
  }

  footer .row > div {
    margin-bottom: 1.5rem;
  }
}

@media (max-width: 576px) {
  .hero {
    padding: 2.5rem 1.15rem;
  }

  .hero .btn,
  .btn-cta {
    font-size: 1rem;
  }

  .programs-body .hero-title,
  .liked-body .hero-title {
    font-size: 1.9rem;
  }

  .programs-body .hero-desc,
  .liked-body .hero-desc {
    font-size: 1rem;
  }

  .liked-body .program-title {
    font-size: 1.05rem;
  }

  .documents-page .documents-desc {
    font-size: 0.95rem;
  }

  .documents-page .documents-upload {
    padding: 1.1rem 1rem;
  }
}

/* Typography & base smoothing */
html, body { scroll-behavior: smooth; }
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--text-primary);
}

/* Navbar polish */
.navbar-light .navbar-nav .nav-link {
  color: var(--nav-text-muted);
  font-weight: 500;
}
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus,
.navbar-light .navbar-nav .nav-link.active {
  color: var(--hero-accent);
}

/* Buttons - unified yellow theme */
.btn-primary {
  background: linear-gradient(90deg, var(--hero-bg-start) 0%, var(--hero-bg-end) 100%) !important;
  color: var(--hero-text) !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(247, 181, 0, 0.15) !important;
}
.btn-primary:hover,
.btn-primary:focus {
  background: linear-gradient(90deg, var(--hero-bg-end) 0%, var(--hero-bg-start) 100%) !important;
  color: var(--hero-text) !important;
}

.btn-outline-primary {
  color: var(--hero-accent) !important;
  border: 2px solid var(--hero-accent) !important;
  background: transparent !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
  color: var(--hero-text) !important;
  background: linear-gradient(90deg, var(--hero-bg-start) 0%, var(--hero-bg-end) 100%) !important;
  border-color: var(--hero-bg-end) !important;
}

/* Hero tweaks */
.hero {
  background: linear-gradient(180deg, var(--surface-card) 0%, var(--surface-base) 100%);
  border: 1px solid var(--border-color);
}

/* Cards */
.card-title { font-weight: 600; }
.card .feature-icon { width: 60px; height: 60px; }

/* Utilities */
.section { padding: 3rem 0; }
.text-muted-700 { color: var(--brand-muted); }
.text-golden { color: var(--hero-accent) !important; }

/* ===========================================================
   Global Yellow Theme for Hero sections (applies to all pages)
   =========================================================== */
/* Use !important to standardize theme across pages that define inline styles */
.hero-section {
  background: linear-gradient(120deg, var(--hero-bg-start) 60%, var(--hero-bg-end) 100%) !important;
  padding: 3rem 0 2rem !important;
  text-align: center !important;
  color: var(--hero-text) !important;
  box-shadow: 0 2px 12px rgba(255, 224, 102, 0.08) !important;
}

.hero-title {
  font-size: 2.5rem !important;
  font-weight: 700 !important;
  letter-spacing: -1px !important;
  color: var(--hero-accent) !important;
  margin-bottom: 1rem !important;
}

.hero-desc {
  font-size: 1.2rem !important;
  color: var(--hero-muted) !important;
  margin-bottom: 2rem !important;
}

/* Consistent CTA style used within hero across pages */
.btn-cta {
  font-size: 1.1rem !important;
  padding: 0.75rem 2rem !important;
  border-radius: 0.7rem !important;
  background: linear-gradient(90deg, var(--hero-bg-start) 0%, var(--hero-bg-end) 100%) !important;
  color: var(--hero-text) !important;
  font-weight: 600 !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(247, 181, 0, 0.15) !important;
  transition: background 0.2s !important;
}
.btn-cta:hover {
  background: linear-gradient(90deg, var(--hero-bg-end) 0%, var(--hero-bg-start) 100%) !important;
  color: var(--hero-text) !important;
}

/* ============================
   App Navbar (matches mock)
   ============================ */
.app-navbar {
  border-radius: 14px;
  border: 1px solid var(--border-color);
  background: var(--nav-bg);
  padding: 8px 0;
  box-shadow: 0 0 0 2px var(--nav-outline); /* subtle outline using yellow accent */
  transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.app-navbar .brand-title {
  font-weight: 800;
  color: var(--nav-text);
  font-size: 1.1rem;
  letter-spacing: -0.3px;
}

.app-navbar .nav-menu .nav-link {
  color: var(--nav-text-muted) !important;
  font-weight: 700;
  padding: 0.5rem 1rem;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.app-navbar .nav-menu .nav-link:hover,
.app-navbar .nav-menu .nav-link:focus {
  color: var(--hero-accent) !important;
}

/* Ensure navbar items are visible */
.app-navbar .navbar-nav {
  display: flex !important;
  visibility: visible !important;
}

.app-navbar .nav-item {
  display: block !important;
  visibility: visible !important;
}

.app-navbar .nav-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef4444;
  display: inline-block;
  margin-left: -6px;   /* tucks dot near label */
  margin-top: -8px;
}

.app-navbar .nav-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--nav-avatar-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--nav-avatar-text);
  font-weight: 800;
  border: 2px solid var(--nav-avatar-border);
  font-size: 0.95rem;
}

.app-navbar .navbar-brand {
  gap: 6px;
}

.app-navbar .nav-right {
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
  visibility: visible !important;
}

/* Nav-right container improvements */
.app-navbar .nav-right {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  margin-left: auto !important;
}

/* For unauthenticated users - ensure buttons are aligned properly */
.app-navbar .navbar-collapse:has(.nav-right:only-child) {
  margin-left: auto !important;
}

/* Gear icon styling */
.app-navbar .nav-right .bi-gear {
  font-size: 1.3rem !important;
  color: var(--nav-text-muted) !important;
  transition: color 0.2s ease !important;
}

.app-navbar .nav-right .bi-gear:hover {
  color: var(--hero-accent) !important;
}

.app-navbar .nav-right .nav-link {
  color: var(--nav-text-muted) !important;
  display: inline-flex !important;
  align-items: center !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.app-navbar .nav-right .nav-link:hover {
  color: var(--hero-accent) !important;
}

.app-navbar .nav-avatar {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: var(--nav-avatar-bg) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--nav-avatar-text) !important;
  font-weight: 800 !important;
  border: 2px solid var(--nav-avatar-border) !important;
  font-size: 0.95rem !important;
  visibility: visible !important;
}

.app-navbar .btn {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.app-navbar .btn-outline-primary,
.app-navbar .btn-cta {
  padding: 0.5rem 1.5rem !important;
  font-weight: 600 !important;
  border-radius: 0.5rem !important;
  transition: all 0.3s ease !important;
  white-space: nowrap !important;
}

/* Sign Up button - gold/yellow outline style */
.app-navbar .btn-outline-primary {
  color: var(--hero-accent) !important;
  border: 2px solid var(--hero-accent) !important;
  background: transparent !important;
}

.app-navbar .btn-outline-primary:hover {
  color: var(--hero-text) !important;
  background: linear-gradient(90deg, var(--hero-bg-start) 0%, var(--hero-bg-end) 100%) !important;
  border-color: var(--hero-bg-end) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 8px rgba(247, 181, 0, 0.2) !important;
}

/* Login button - gold/yellow filled style */
.app-navbar .btn-cta {
  background: linear-gradient(90deg, var(--hero-bg-start) 0%, var(--hero-bg-end) 100%) !important;
  color: var(--hero-text) !important;
  border: 2px solid var(--hero-bg-end) !important;
  box-shadow: 0 2px 6px rgba(247, 181, 0, 0.15) !important;
}

.app-navbar .btn-cta:hover {
  background: linear-gradient(90deg, var(--hero-bg-end) 0%, var(--hero-bg-start) 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 10px rgba(247, 181, 0, 0.25) !important;
}

.app-navbar .navbar-brand {
  gap: 6px;
}

/* Ensure navbar items are visible on all screen sizes */
@media (max-width: 991px) {
  .app-navbar .navbar-collapse {
    background: #fff;
    padding: 1rem;
    border-radius: 0.5rem;
    margin-top: 0.5rem;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  }
  
  .app-navbar .nav-right {
    flex-direction: row !important;
    justify-content: center !important;
    margin-top: 1rem !important;
  }
}

/* Ensure navbar toggle button is visible */
.app-navbar .navbar-toggler {
  display: inline-block !important;
  border: 2px solid #2f3e46 !important;
  padding: 0.5rem 0.75rem !important;
}

.app-navbar .navbar-toggler:focus {
  box-shadow: 0 0 0 0.25rem rgba(47, 62, 70, 0.25) !important;
}

/* ==========================================
   Landing Page Refresh (October 2025)
   ========================================== */
:root {
  --landing-bg: #fff9e6;
  --landing-bg-secondary: #fff3c4;
  --landing-surface: #ffffff;
  --landing-border: rgba(247, 181, 0, 0.35);
  --landing-muted: #765c1a;
  --landing-dark: #2f260a;
}

.landing-page {
  background: radial-gradient(circle at top right, rgba(255, 209, 92, 0.25), transparent 45%), var(--landing-bg);
  color: var(--landing-dark);
}

.landing-main {
  max-width: none;
  padding: 0;
  margin-top: 0;
}

.landing-shell section {
  padding: clamp(3rem, 6vw, 5rem) 0;
}

.landing-hero {
  background: linear-gradient(140deg, rgba(255, 244, 186, 0.9), rgba(255, 213, 115, 0.65));
  position: relative;
  overflow: hidden;
}

.landing-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 15% 15%, rgba(255,255,255,0.6), transparent 35%),
              radial-gradient(circle at 85% 10%, rgba(255,233,162,0.7), transparent 40%);
  opacity: 0.7;
  pointer-events: none;
}

.landing-hero .container-xxl,
.landing-hero .row {
  position: relative;
  z-index: 1;
}

.landing-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--landing-muted);
  background: rgba(255, 255, 255, 0.6);
  border-radius: 999px;
  padding: 0.5rem 1rem;
  border: 1px solid rgba(247, 181, 0, 0.4);
  backdrop-filter: blur(6px);
}

.landing-hero__title {
  font-size: clamp(2.4rem, 3.4vw, 3.6rem);
  font-weight: 800;
  letter-spacing: -0.5px;
  margin-top: 1.5rem;
  margin-bottom: 1.25rem;
  color: var(--landing-dark);
}

.landing-hero__subtitle {
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--landing-muted);
  max-width: 36rem;
}

.landing-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2rem;
  margin-bottom: 2.5rem;
}

.landing-hero__actions .btn-outline-dark {
  border-width: 2px;
  border-radius: 0.75rem;
  padding: 0.85rem 2rem;
}

.landing-hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}

.landing-hero__stat {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.landing-hero__stat-value {
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--landing-dark);
}

.landing-hero__stat-label {
  font-size: 0.95rem;
  color: var(--landing-muted);
}

.landing-hero__panel {
  background: rgba(255, 255, 255, 0.75);
  border-radius: 1.5rem;
  border: 1px solid var(--landing-border);
  box-shadow: 0 22px 55px rgba(247, 181, 0, 0.2);
  overflow: hidden;
  backdrop-filter: blur(10px);
}

.landing-hero__panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  padding: 1.25rem 1.5rem 0.5rem;
  font-size: 0.85rem;
}

.landing-hero__panel-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.85rem;
  background: rgba(47, 38, 10, 0.08);
  border-radius: 999px;
  font-weight: 600;
  color: var(--landing-dark);
}

.landing-hero__panel-body {
  padding: 0 1.5rem 1.5rem;
}

.landing-hero__panel-card {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.96), rgba(255, 243, 196, 0.9));
  border-radius: 1.25rem;
  padding: 1.75rem;
  border: 1px solid rgba(247, 181, 0, 0.35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
}

.landing-hero__panel-meta {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.landing-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
}

.landing-pill.success {
  background: rgba(34, 197, 94, 0.15);
  color: #15803d;
}

.landing-pill.warning {
  background: rgba(234, 179, 8, 0.2);
  color: #b45309;
}

.landing-hero__panel-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--landing-dark);
  margin-bottom: 0.75rem;
}

.landing-hero__panel-text {
  color: var(--landing-muted);
  margin-bottom: 1.25rem;
}

.landing-hero__panel-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  display: grid;
  gap: 0.65rem;
  color: var(--landing-dark);
}

.landing-hero__panel-list i {
  color: #22c55e;
  margin-right: 0.65rem;
}

.landing-hero__panel-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.5rem 0;
  border-top: 1px dashed rgba(247, 181, 0, 0.4);
  margin-top: 1.5rem;
}

.landing-hero__panel-label {
  font-size: 0.8rem;
  color: var(--landing-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.landing-card {
  background: var(--landing-surface);
  border-radius: 1.5rem;
  border: 1px solid var(--landing-border);
  box-shadow: 0 18px 40px rgba(247, 181, 0, 0.15);
  padding: clamp(2rem, 4vw, 2.75rem);
}

.landing-card--search {
  position: relative;
  overflow: hidden;
}

.landing-card--search::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 240, 186, 0.55), transparent 65%);
  pointer-events: none;
}

.landing-eyebrow {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--landing-muted);
}

.landing-card__title {
  font-weight: 700;
  font-size: 1.75rem;
  margin: 1rem 0;
  color: var(--landing-dark);
}

.landing-card__subtitle {
  color: var(--landing-muted);
  margin-bottom: 1.5rem;
}

.landing-card__cta .btn-link {
  font-weight: 600;
  color: var(--landing-dark);
}

.landing-search__form .form-control,
.landing-search__form .form-select {
  border-radius: 0.9rem;
  border: 1px solid rgba(247, 181, 0, 0.4);
  box-shadow: none;
}

.landing-search__form .btn-primary {
  border-radius: 0.9rem;
  font-weight: 600;
}

.landing-search__actions {
  margin-top: 0.75rem;
}

.landing-trust__shell {
  position: relative;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 1.5rem;
  border: 1px solid var(--landing-border);
  padding: clamp(2rem, 5vw, 2.75rem);
  box-shadow: 0 15px 40px rgba(247, 181, 0, 0.12);
}

.landing-trust__shell::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at top center, rgba(255, 236, 179, 0.55), transparent 55%);
  opacity: 0.8;
  pointer-events: none;
}

.landing-trust__header {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1rem 1.5rem;
  position: relative;
  z-index: 1;
}

.landing-trust__shell .landing-eyebrow {
  letter-spacing: 0.12em;
}

.landing-pill.neutral {
  background: rgba(47, 38, 10, 0.08);
  color: var(--landing-dark);
  border: 1px solid rgba(47, 38, 10, 0.12);
}

.landing-trust__logos {
  position: relative;
  z-index: 1;
  margin-top: clamp(1.5rem, 3.5vw, 2.25rem);
  padding-top: 1.25rem;
  border-top: 1px solid rgba(247, 181, 0, 0.28);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1rem, 3vw, 2.5rem);
}

.landing-trust__logos::before,
.landing-trust__logos::after {
  content: '';
  position: absolute;
  top: -4px;
  height: 8px;
  width: 40px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(247, 181, 0, 0.45), rgba(255, 224, 102, 0.05));
}

.landing-trust__logos::before {
  left: clamp(12%, 28vw, 28%);
}

.landing-trust__logos::after {
  right: clamp(12%, 28vw, 28%);
  background: linear-gradient(90deg, rgba(255, 224, 102, 0.05), rgba(247, 181, 0, 0.45));
}

.landing-trust__logo {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-weight: 600;
  color: rgba(47, 38, 10, 0.78);
  padding: 0.65rem 1.3rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(247, 181, 0, 0.22);
  box-shadow: 0 8px 16px rgba(247, 181, 0, 0.08);
  backdrop-filter: blur(4px);
}

.landing-trust__logos {
  color: rgba(0, 0, 0, 0.65);
}

.landing-section__title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--landing-dark);
}

.landing-section__subtitle {
  color: var(--landing-muted);
  max-width: 48rem;
  margin: 0.75rem auto 0;
}

.landing-feature-card {
  position: relative;
  background: var(--landing-surface);
  border-radius: 1.25rem;
  padding: 2rem;
  border: 1px solid rgba(247, 181, 0, 0.25);
  box-shadow: 0 18px 35px rgba(247, 181, 0, 0.12);
  height: 100%;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.landing-feature-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 45px rgba(247, 181, 0, 0.18);
}

.landing-feature-card h3 {
  font-weight: 700;
  margin: 1.5rem 0 0.75rem;
  color: var(--landing-dark);
}

.landing-feature-card p {
  color: var(--landing-muted);
  margin-bottom: 1.5rem;
}

.landing-feature-card .stretched-link {
  font-weight: 600;
  color: var(--landing-dark);
}

.landing-feature-icon {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
}

.landing-journey {
  background: linear-gradient(120deg, rgba(255, 244, 186, 0.65), rgba(255, 255, 255, 0.75));
}

.landing-journey__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2rem;
}

.landing-timeline {
  background: rgba(255, 255, 255, 0.85);
  border-radius: 1.25rem;
  border: 1px solid rgba(247, 181, 0, 0.3);
  padding: 2.5rem;
  display: grid;
  gap: 1.75rem;
  box-shadow: 0 20px 35px rgba(247, 181, 0, 0.15);
}

.landing-timeline__step {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 1.25rem;
  align-items: start;
}

.landing-timeline__icon {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background: rgba(247, 181, 0, 0.15);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.45rem;
  color: var(--landing-dark);
}

.landing-timeline__step h3 {
  margin-bottom: 0.5rem;
  font-weight: 700;
  color: var(--landing-dark);
}

.landing-timeline__step p {
  margin: 0;
  color: var(--landing-muted);
}

.landing-testimonial-card {
  background: var(--landing-surface);
  border-radius: 1.5rem;
  border: 1px solid rgba(247, 181, 0, 0.35);
  padding: clamp(2.5rem, 6vw, 3.5rem);
  box-shadow: 0 25px 50px rgba(247, 181, 0, 0.18);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.landing-testimonial-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top, rgba(255, 240, 186, 0.45), transparent 55%);
  opacity: 0.7;
  pointer-events: none;
}

.landing-testimonial-card blockquote {
  font-size: clamp(1.3rem, 2.4vw, 1.6rem);
  font-weight: 600;
  color: var(--landing-dark);
  line-height: 1.7;
  margin: 1.5rem auto 2rem;
  max-width: 48rem;
}

.landing-testimonial-quote {
  font-size: 2rem;
  color: rgba(247, 181, 0, 0.75);
}

.landing-testimonial-author {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  color: var(--landing-muted);
}

.landing-cta {
  padding-top: 0;
}

.landing-cta__card {
  background: linear-gradient(135deg, rgba(47, 38, 10, 0.92), rgba(103, 71, 0, 0.88));
  color: #fff;
  border-radius: 1.75rem;
  padding: clamp(2.75rem, 6vw, 3.75rem);
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 40px 60px rgba(47, 38, 10, 0.25);
}

.landing-cta__card h2 {
  font-weight: 700;
  margin-bottom: 0.75rem;
  max-width: 28rem;
}

.landing-cta__card p {
  margin: 0;
  color: rgba(255, 255, 255, 0.8);
}

.landing-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.landing-session {
  padding-top: 0;
  padding-bottom: 3rem;
}

.landing-session .alert {
  border-radius: 1rem;
  border: none;
}

@media (max-width: 991px) {
  .landing-hero__panel {
    margin-top: 2rem;
  }

  .landing-hero__stats {
    gap: 1.25rem;
  }

  .landing-feature-card {
    height: auto;
  }

  .landing-timeline {
    padding: 2rem;
  }

  .landing-trust__header {
    flex-direction: column;
  }

  .landing-trust__logos::before,
  .landing-trust__logos::after {
    display: none;
  }
}

@media (max-width: 767px) {
  .landing-shell section {
    padding: 2.5rem 0;
  }

  .landing-hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .landing-hero__stats {
    flex-direction: column;
    gap: 1rem;
  }

  .landing-timeline {
    grid-template-columns: 1fr;
  }

  .landing-timeline__step {
    grid-template-columns: 48px 1fr;
    gap: 1rem;
  }

  .landing-cta__card {
    text-align: center;
    justify-content: center;
  }

  .landing-cta__card h2,
  .landing-cta__card p {
    max-width: none;
  }

  .landing-trust__logos {
    gap: 1rem;
  }
}

/* Show navbar on larger screens */
@media (min-width: 992px) {
  .app-navbar .navbar-collapse {
    display: flex !important;
    visibility: visible !important;
  }
  
  .app-navbar .nav-right {
    margin-top: 0 !important;
  }
}

/* Ensure navbar brand and buttons are on same line for unauthenticated users */
.app-navbar .container {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
}

/* When navbar-collapse is empty (unauthenticated), hide it */
.app-navbar .navbar-collapse:empty {
  display: none !important;
}

/* ============================
   Standardized Button Alignment
   ============================ */

:root {
  --btn-row-gap: 0.5rem;
}

/* Common wrappers where action buttons live */
.btn-row,
.action-buttons,
.form-actions,
.doc-actions,
.settings-action {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: var(--btn-row-gap) !important;
  align-items: center !important;
}

/* Default justification per context */
.form-actions { justify-content: flex-end !important; }
.action-buttons { justify-content: flex-start !important; }
.doc-actions { justify-content: flex-start !important; }
.settings-action { justify-content: flex-start !important; }

/* Remove ad-hoc margins and normalize children */
.action-buttons .btn,
.form-actions .btn,
.doc-actions .btn,
.settings-action .btn,
.doc-actions .btn-doc {
  margin: 0 !important;
}

/* Also catch direct anchors/buttons without .btn class */
.action-buttons a, .action-buttons button,
.form-actions a, .form-actions button,
.doc-actions a, .doc-actions button,
.settings-action a, .settings-action button {
  margin: 0 !important;
}

/* Normalize icon alignment inside buttons */
.btn .bi, .btn svg { vertical-align: -0.125em; }

/* Mobile: stack buttons full-width for better UX */
@media (max-width: 576px) {
  .btn-row,
  .action-buttons,
  .form-actions,
  .doc-actions,
  .settings-action {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .btn-row .btn,
  .action-buttons .btn,
  .form-actions .btn,
  .doc-actions .btn,
  .settings-action .btn,
  .doc-actions .btn-doc,
  .action-buttons a, .action-buttons button,
  .form-actions a, .form-actions button,
  .doc-actions a, .doc-actions button,
  .settings-action a, .settings-action button {
    width: 100% !important;
  }
}

/* Override inline spacing patterns seen in some templates */
.action-buttons .btn + .btn,
.form-actions .btn + .btn,
.doc-actions .btn + .btn,
.settings-action .btn + .btn,
.doc-actions .btn-doc + .btn-doc {
  margin-left: 0 !important;
}

/* ============================
   Scholar Assistant Chatbot
   ============================ */
.chatbot-layout {
  align-items: stretch;
}

.chatbot-panel {
  border-radius: 1.25rem;
  background: linear-gradient(150deg, rgba(255, 240, 180, 0.4) 0%, rgba(255, 255, 255, 0.95) 45%, rgba(232, 244, 255, 0.6) 100%);
  border: 1px solid rgba(255, 200, 80, 0.25);
  box-shadow: 0 18px 40px -18px rgba(15, 23, 42, 0.25);
  min-height: 560px;
}

.chatbot-session-bar {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(226, 232, 240, 0.7);
  border-radius: 1rem;
  padding: 1rem 1.25rem;
  box-shadow: 0 10px 30px -24px rgba(15, 23, 42, 0.45);
}

.chatbot-session-bar .btn {
  box-shadow: none;
}

.chatbot-session-bar .dropdown-menu {
  max-height: 320px;
  overflow-y: auto;
  padding: 0.5rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(226, 232, 240, 0.8);
}

.chatbot-session-bar .dropdown-item {
  border-radius: 0.65rem;
  padding: 0.55rem 0.75rem;
}

.chatbot-session-bar .dropdown-item.active,
.chatbot-session-bar .dropdown-item:active {
  background: rgba(37, 99, 235, 0.12);
  color: #1e3a8a;
}

.chatbot-session-bar .session-label {
  font-weight: 600;
}

.chatbot-messages {
  background: rgba(255, 255, 255, 0.85);
  border-radius: 1rem;
  padding: 1.5rem;
  overflow-y: auto;
  max-height: 540px;
  border: 1px solid rgba(255, 215, 90, 0.25);
  font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
}

.chatbot-messages::-webkit-scrollbar {
  width: 6px;
}

.chatbot-messages::-webkit-scrollbar-thumb {
  background: rgba(247, 181, 0, 0.5);
  border-radius: 10px;
}

.chat-message {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.chat-message.user {
  flex-direction: row-reverse;
}

.chat-message.user .chat-content {
  align-items: flex-end;
  text-align: right;
}

.chat-content {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-width: 100%;
}

.chat-message:last-child {
  margin-bottom: 0;
}

.chat-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.4rem;
  box-shadow: 0 10px 25px -10px rgba(15, 23, 42, 0.4);
}

.chat-message.assistant .chat-avatar {
  background: linear-gradient(135deg, var(--hero-bg-start), var(--hero-bg-end));
  color: var(--hero-text);
}

.chat-message.user .chat-avatar {
  background: linear-gradient(135deg, rgba(255, 207, 86, 0.9), rgba(247, 181, 0, 0.95));
  color: var(--hero-text);
}

.chat-bubble {
  background: var(--surface-card);
  border-radius: 1rem;
  padding: 1rem 1.25rem;
  font-size: 0.95rem;
  line-height: 1.5;
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.chat-message.assistant .chat-bubble {
  background: rgba(247, 181, 0, 0.12);
  border: 1px solid rgba(247, 181, 0, 0.35);
}

.chat-message.user .chat-bubble {
  background: linear-gradient(120deg, rgba(255, 224, 102, 0.95) 0%, rgba(247, 181, 0, 0.95) 100%);
  color: var(--hero-text);
  font-weight: 500;
}

.chat-meta {
  font-size: 0.78rem;
  color: var(--text-secondary);
  letter-spacing: 0.01em;
}

.chat-message.user .chat-meta {
  color: rgba(15, 23, 42, 0.6);
}

.chat-bubble p {
  margin-bottom: 0.75rem;
}

.chat-bubble p:last-child {
  margin-bottom: 0;
}

.chat-bubble ul,
.chat-bubble ol {
  margin-bottom: 0.75rem;
  padding-left: 1.25rem;
}

.chat-bubble code {
  background: rgba(15, 23, 42, 0.08);
  border-radius: 4px;
  padding: 0.1rem 0.4rem;
  font-size: 0.85rem;
}

.chat-bubble pre {
  background: rgba(15, 23, 42, 0.86);
  color: #f9fafb;
  padding: 0.85rem 1rem;
  border-radius: 0.75rem;
  font-size: 0.85rem;
  overflow-x: auto;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  margin-bottom: 0.85rem;
}

.animate-in {
  animation: fadeInUp 0.35s ease forwards;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.typing-indicator .chat-bubble {
  display: flex;
  gap: 6px;
  align-items: center;
  min-width: 72px;
}

.typing-indicator .dot {
  width: 10px;
  height: 10px;
  background: #2563eb;
  border-radius: 50%;
  animation: typingBlink 1s infinite ease-in-out;
}

.typing-indicator .dot:nth-child(2) {
  animation-delay: 0.2s;
}

.typing-indicator .dot:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes typingBlink {
  0%, 80%, 100% {
    opacity: 0.2;
    transform: translateY(0);
  }
  40% {
    opacity: 1;
    transform: translateY(-3px);
  }
}

.chat-input-bar {
  background: rgba(255, 255, 255, 0.9);
  padding: 0.75rem;
  border-radius: 1rem;
  border: 1px solid rgba(226, 232, 240, 0.6);
  box-shadow: 0 12px 30px -20px rgba(15, 23, 42, 0.3);
}

.chat-input {
  border-radius: 0.85rem;
  border: 1px solid rgba(203, 213, 225, 0.8);
  box-shadow: none;
}

.chat-input:focus {
  border-color: rgba(37, 99, 235, 0.7);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}

.chatbot-footer .btn.disabled {
  opacity: 0.6;
  pointer-events: none;
}

.chat-input-row {
  width: 100%;
}

.chat-attach-trigger {
  border-radius: 0.85rem !important;
  border-width: 1px !important;
  font-size: 1.05rem !important;
  height: 48px;
  width: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 28px -18px rgba(15, 23, 42, 0.35);
}

.chat-attach-trigger:hover,
.chat-attach-trigger:focus {
  color: #1d4ed8 !important;
  background: rgba(237, 242, 255, 0.8) !important;
}

.chat-attach-trigger.disabled {
  opacity: 0.45 !important;
  pointer-events: none !important;
}

.chat-attachment-preview {
  margin-top: 0.75rem;
}

.chat-attachment-chip {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-radius: 0.85rem;
  padding: 0.6rem 0.9rem;
  background: rgba(248, 250, 252, 0.92);
  border: 1px solid rgba(221, 227, 239, 0.75);
  box-shadow: 0 12px 20px -18px rgba(15, 23, 42, 0.3);
}

.chat-attachment-chip.inline {
  display: inline-flex;
  margin-top: 0.85rem;
}

.chat-attachment-name {
  font-weight: 600;
  color: #1f2937;
}

.chat-attachment-icon {
  font-size: 1.35rem;
  color: #2563eb;
}

.chatbot-sidecard {
  border-radius: 1.1rem;
  border: 1px solid rgba(226, 232, 240, 0.6);
  box-shadow: 0 16px 30px -22px rgba(15, 23, 42, 0.25);
}

.icon-badge {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  background: rgba(37, 99, 235, 0.12);
}

.chatbot-pill-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.pill-list-item {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  background: rgba(248, 250, 252, 0.9);
  border-radius: 0.9rem;
  padding: 0.75rem 1rem;
  border: 1px solid rgba(221, 227, 239, 0.8);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pill-list-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 18px -18px rgba(15, 23, 42, 0.3);
}

.pill-badge {
  font-size: 0.75rem;
  font-weight: 600;
  color: #2563eb;
  background: rgba(37, 99, 235, 0.12);
  border-radius: 999px;
  padding: 0.25rem 0.75rem;
  margin-top: 0.1rem;
}

.pill-detail strong {
  display: block;
  font-size: 0.95rem;
}

.pill-detail small {
  color: #475569;
}

.liked-programs-scroll {
  max-height: 320px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding-right: 0.3rem;
}

.liked-programs-scroll::-webkit-scrollbar {
  width: 6px;
}

.liked-programs-scroll::-webkit-scrollbar-thumb {
  background: rgba(15, 23, 42, 0.15);
  border-radius: 6px;
}

.liked-program-card {
  display: block;
  border-radius: 1rem;
  padding: 1rem 1.1rem;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.85), rgba(255, 247, 217, 0.7));
  border: 1px solid rgba(253, 230, 138, 0.6);
  color: inherit;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.liked-program-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 32px -24px rgba(15, 23, 42, 0.45);
}

.liked-program-title {
  font-weight: 600;
  margin-bottom: 0.35rem;
  color: #1f2937;
}

.liked-program-meta {
  font-size: 0.85rem;
  color: #475569;
  margin-bottom: 0.5rem;
}

.liked-program-tags {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.6rem;
}

.liked-program-tags .badge {
  border-radius: 999px;
  padding: 0.4rem 0.75rem;
  font-weight: 500;
}

.liked-program-deadline {
  font-size: 0.85rem;
  color: #1e3a8a;
  font-weight: 600;
}

.chat-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 2.5rem 1rem;
  color: #1f2937;
}

.chat-loader-text {
  font-weight: 500;
  letter-spacing: 0.01em;
}

.chat-loader.fade-out {
  opacity: 0;
  transition: opacity 0.2s ease;
}

@media (max-width: 991.98px) {
  .chatbot-panel {
    min-height: auto;
  }

  .chatbot-messages {
    max-height: none;
    height: 420px;
  }

  .liked-programs-scroll {
    max-height: 260px;
  }
}

@media (max-width: 575.98px) {
  .chat-input-bar {
    flex-direction: column;
  }

  .chat-input {
    width: 100%;
  }

  .chatbot-messages {
    padding: 1rem;
  }

  .chatbot-session-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
}

/* ============================
   Program Card Footer Actions
   ============================ */
.program-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.85rem 1rem;
  border-top: 1px solid rgba(226, 232, 240, 0.7);
  background: rgba(255, 255, 255, 0.96);
}

.program-card-footer-left,
.program-card-footer-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.program-date {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.04);
  font-weight: 600;
  color: #475569;
  font-size: 0.8rem;
}

.program-warning {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.35rem 0.6rem;
  border-radius: 999px;
  background: rgba(250, 204, 21, 0.25);
  color: #b45309;
  font-weight: 600;
  font-size: 0.78rem;
}

.program-open-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.75rem;
  border-radius: 0.75rem;
  background: rgba(59, 130, 246, 0.12);
  color: #1d4ed8;
  text-decoration: none;
  font-weight: 600;
  transition: background 0.2s ease, color 0.2s ease;
}

.program-open-link:hover {
  background: rgba(59, 130, 246, 0.2);
  color: #1e40af;
}

.program-report-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.4rem 0.7rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(248, 113, 113, 0.35);
  background: rgba(254, 226, 226, 0.6);
  color: #b91c1c;
  font-weight: 600;
  font-size: 0.78rem;
  transition: all 0.2s ease;
}

.program-report-btn:hover {
  background: rgba(248, 113, 113, 0.15);
  border-color: rgba(248, 113, 113, 0.45);
}

.program-report-btn.is-submitted {
  background: rgba(148, 163, 184, 0.18);
  border-color: rgba(148, 163, 184, 0.35);
  color: #1f2937;
}

.chatbot-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  border: none;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.14) 0%, rgba(99, 102, 241, 0.18) 100%);
  color: #1d4ed8;
  font-weight: 600;
  font-size: 0.78rem;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.chatbot-pill:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -18px rgba(37, 99, 235, 0.5);
}

.vote-chip-group {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.vote-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.75rem;
  border-radius: 0.85rem;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(248, 250, 252, 0.85);
  color: #1f2937;
  font-weight: 600;
  font-size: 0.8rem;
  transition: all 0.2s ease;
}

.vote-chip .vote-icon {
  font-size: 1rem;
}

.vote-chip .vote-count {
  min-width: 1.5rem;
  text-align: center;
}

.vote-chip-up:hover {
  border-color: rgba(16, 185, 129, 0.45);
  background: rgba(16, 185, 129, 0.12);
}

.vote-chip-down:hover {
  border-color: rgba(148, 163, 184, 0.55);
  background: rgba(148, 163, 184, 0.15);
}

.vote-chip-up.is-active {
  border-color: rgba(16, 185, 129, 0.8);
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.24), rgba(5, 150, 105, 0.28));
  color: #047857;
}

.vote-chip-down.is-active {
  border-color: rgba(148, 163, 184, 0.85);
  background: linear-gradient(135deg, rgba(148, 163, 184, 0.24), rgba(100, 116, 139, 0.28));
  color: #334155;
}

@media (max-width: 576px) {
  .program-card-footer {
    flex-direction: column;
    align-items: stretch;
  }

  .program-card-footer-left,
  .program-card-footer-right {
    justify-content: space-between;
  }

  .vote-chip-group {
    width: 100%;
    justify-content: flex-end;
  }
}

/* Text Color Utilities for Better Contrast */
.text-gray-300 {
  color: #d1d5db !important;
}

.text-gray-700 {
  color: #374151 !important;
}

.text-gray-600 {
  color: #4b5563 !important;
}

.text-gray-500 {
  color: #6b7280 !important;
}

.text-secondary-soft {
  color: var(--text-secondary) !important;
}

/* Dark mode overrides for consistent theming */
:root.dark .text-gray-300 {
  color: #e5e7eb !important;
}

:root.dark .text-gray-700 {
  color: #d1d5db !important;
}

:root.dark .text-gray-600 {
  color: #d1d5db !important;
}

:root.dark .text-gray-500 {
  color: #e5e7eb !important;
}

:root.dark .text-secondary-soft {
  color: var(--text-secondary) !important;
}

/* Card styling for dark mode */
:root.dark .card {
  background-color: var(--surface-card);
  border-color: var(--border-color);
}

:root.dark .bg-white {
  background-color: var(--surface-card) !important;
}

:root.dark .border-0 {
  border-color: var(--border-color) !important;
}