@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
/* B.E.A.N.S LMS - Global styles
   Tailwind via CDN handles the bulk; this file holds custom additions. */

:root {
  --beans-primary: #f59e0b;   /* amber-500 - bean color */
  --beans-primary-dark: #d97706;
  --beans-accent: #10b981;    /* emerald */
  --beans-ink: #0f172a;
}

html { scroll-behavior: smooth; }
body { font-family: 'Inter', system-ui, -apple-system, sans-serif; }

/* Smooth theme transitions */
*, *::before, *::after {
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

/* Gradient text */
.gradient-text {
  background: linear-gradient(135deg, #f59e0b 0%, #ef4444 50%, #8b5cf6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Brand gradient surfaces */
.bg-brand-gradient {
  background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
}
.bg-mesh {
  background-image:
    radial-gradient(at 20% 10%, rgba(245,158,11,.18) 0, transparent 50%),
    radial-gradient(at 80% 20%, rgba(139,92,246,.18) 0, transparent 50%),
    radial-gradient(at 60% 80%, rgba(16,185,129,.15) 0, transparent 50%);
}

/* Card hover lift */
.card-lift {
  transition: transform .25s ease, box-shadow .25s ease;
}
.card-lift:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -18px rgba(0,0,0,.25);
}

/* Sidebar nav active state */
.nav-item {
  display: flex; align-items: center; gap: .75rem;
  padding: .625rem .875rem; border-radius: .625rem;
  color: rgb(71 85 105); font-weight: 500; font-size: .9rem;
}
.dark .nav-item { color: rgb(148 163 184); }
.nav-item:hover { background: rgb(241 245 249); color: rgb(15 23 42); }
.dark .nav-item:hover { background: rgb(30 41 59); color: white; }
.nav-item.active {
  background: linear-gradient(135deg, rgba(245,158,11,.15), rgba(239,68,68,.1));
  color: rgb(180 83 9); font-weight: 600;
}
.dark .nav-item.active {
  background: linear-gradient(135deg, rgba(245,158,11,.2), rgba(239,68,68,.15));
  color: rgb(252 211 77);
}
.nav-item i { width: 1.1rem; text-align: center; }

/* Animated bean spinner */
.bean-spinner {
  width: 32px; height: 32px;
  border: 3px solid rgba(245,158,11,.2);
  border-top-color: #f59e0b;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Fade-in animation */
.fade-in { animation: fadeIn .4s ease-out; }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Toast container */
#toast-container {
  position: fixed; top: 1rem; right: 1rem; z-index: 9999;
  display: flex; flex-direction: column; gap: .5rem; pointer-events: none;
}
.toast {
  padding: .75rem 1rem; border-radius: .625rem;
  background: white; color: #0f172a; font-size: .875rem;
  box-shadow: 0 10px 30px -10px rgba(0,0,0,.25);
  border-left: 4px solid #f59e0b; min-width: 250px;
  animation: slideIn .3s ease-out;
}
.dark .toast { background: #1e293b; color: #f1f5f9; }
.toast.success { border-color: #10b981; }
.toast.error { border-color: #ef4444; }
.toast.info { border-color: #3b82f6; }
@keyframes slideIn {
  from { opacity: 0; transform: translateX(100%); }
  to { opacity: 1; transform: translateX(0); }
}

/* Pretty scrollbars */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(148,163,184,.4); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(148,163,184,.7); }

/* Hide scrollbar utility */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }

/* Sidebar mobile slide */
@media (max-width: 1023px) {
  #sidebar {
    transform: translateX(-100%);
    transition: transform .3s ease;
  }
  #sidebar.open { transform: translateX(0); }
}

/* Form inputs */
.beans-input {
  width: 100%; padding: .625rem .875rem;
  background: white; border: 1px solid rgb(226 232 240);
  border-radius: .5rem; font-size: .9rem; color: rgb(15 23 42);
  outline: none;
}
.dark .beans-input {
  background: rgb(30 41 59); border-color: rgb(51 65 85); color: rgb(241 245 249);
}
.beans-input:focus {
  border-color: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,.15);
}

.beans-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .625rem 1.25rem; border-radius: .5rem; font-weight: 600; font-size: .9rem;
  cursor: pointer; border: none; transition: all .15s ease;
}
.beans-btn-primary {
  background: linear-gradient(135deg, #f59e0b, #ef4444); color: white;
}
.beans-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 20px -8px rgba(245,158,11,.6); }
.beans-btn-secondary {
  background: rgb(241 245 249); color: rgb(15 23 42);
}
.dark .beans-btn-secondary { background: rgb(30 41 59); color: rgb(241 245 249); }

/* Badge */
.badge {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .125rem .625rem; border-radius: 9999px;
  font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em;
}

/* Progress bar */
.progress-bar {
  height: 8px; background: rgb(226 232 240); border-radius: 4px; overflow: hidden;
}
.dark .progress-bar { background: rgb(51 65 85); }
.progress-bar > div {
  height: 100%;
  background: linear-gradient(90deg, #f59e0b, #ef4444);
  transition: width .4s ease;
}

/* Print styles for certificate */
@media print {
  body * { visibility: hidden; }
  #certificate, #certificate * { visibility: visible; }
  #certificate { position: absolute; left: 0; top: 0; width: 100%; }
  .no-print { display: none !important; }
}

/* Reference theme: mint, leaf green, white surfaces. Presentation only. */

:root{--beans-primary:#398847;--beans-primary-dark:#286b36;--beans-accent:#71b77b;--beans-ink:#111a16}
body{font-family:'DM Sans','Inter',sans-serif!important;background:#eef6f1!important;color:#17251d!important}h1,h2,h3,h4,.font-bold,.font-extrabold{font-family:'Manrope','Inter',sans-serif;letter-spacing:-.025em}h1{color:#0e1612}.bg-mesh{background-color:#e9f4ee;background-image:radial-gradient(at 15% 10%,#d6ebdf 0,transparent 55%),radial-gradient(at 85% 80%,#d9e9e0 0,transparent 55%)}.gradient-text{background:linear-gradient(110deg,#2d753c,#55a660);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}.bg-brand-gradient,.beans-btn-primary{background:linear-gradient(105deg,#337d40,#489750)!important;color:#fff!important}.beans-btn{border-radius:10px}.beans-btn-primary:hover{box-shadow:0 8px 24px -10px #2d753c80}.beans-input{border-color:#dce5df;color:#1d3025;border-radius:9px}.beans-input:focus{border-color:#4b9857;box-shadow:0 0 0 3px #dcefe1}.nav-item{color:#58675e}.nav-item:hover{background:#f1f7f2;color:#246e35}.nav-item.active{background:#e8f5eb;color:#287239}.bean-spinner{border-color:#dcefe1;border-top-color:#398847}.toast{border-left-color:#398847}.progress-bar{background:#e6eee8}.progress-bar>div{background:linear-gradient(90deg,#4c9b59,#82c88d)}.beans-btn-secondary{background:#e7efe9;color:#304b38}.card-lift:hover{box-shadow:0 18px 40px -20px #335d4138}
html:not(.dark) .bg-slate-50,html:not(.dark) .bg-slate-100{background-color:#edf5ef!important}html:not(.dark) .bg-white{background-color:#fff!important}html:not(.dark) [class*="border-slate-"]{border-color:#dde7df!important}html:not(.dark) [class*="text-slate-9"]{color:#15221a!important}html:not(.dark) [class*="text-slate-5"],html:not(.dark) [class*="text-slate-6"]{color:#617066!important}
html:not(.dark) [class*="text-amber-"],html:not(.dark) [class*="text-orange-"],html:not(.dark) [class*="text-purple-"],html:not(.dark) [class*="text-indigo-"]{color:#317c40!important}html:not(.dark) [class*="bg-amber-"],html:not(.dark) [class*="bg-orange-"],html:not(.dark) [class*="bg-purple-"],html:not(.dark) [class*="bg-indigo-"]{background-color:#e6f3e9!important}html:not(.dark) [class*="border-amber-"]{border-color:#bcdcc5!important}[class*="from-amber-"]{--tw-gradient-from:#398847!important;--tw-gradient-to:rgb(57 136 71 / 0)!important}[class*="to-orange-"],[class*="to-red-"]{--tw-gradient-to:#6bb678!important}[class*="via-red-"]{--tw-gradient-via:#4d995b!important}
html.dark body{background:#13241b!important;color:#e8f3eb!important}.dark h1{color:#edf6ef}.dark .bg-mesh{background-color:#193124;background-image:radial-gradient(at 20% 20%,#284a3480 0,transparent 65%)}.dark .nav-item{color:#b1c8b8}.dark .nav-item.active,.dark .nav-item:hover{background:#244931;color:#b5e1bf}.dark .beans-input,.dark .toast{background:#20382a;border-color:#3c5845;color:#edf6ef}.dark .beans-btn-secondary{background:#294532;color:#e5f1e8}.dark [class*="dark:bg-slate-9"]{background-color:#162a1f!important}.dark [class*="dark:bg-slate-8"]{background-color:#213c2c!important}.dark [class*="dark:text-amber-"]{color:#acd8b4!important}.dark [class*="dark:border-slate-"]{border-color:#36553f!important}input[type=checkbox],input[type=radio]{accent-color:#398847}:focus-visible{outline-color:#398847}@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}html{scroll-behavior:auto}}