/* Design-system tokens + custom helpers on top of compiled Tailwind. */

body {
  font-family: 'Inter', sans-serif;
  background-color: #FDF8EF; /* Light cream background */
  color: #333;
}

/* Design tokens (ported from the React theme) */
.bg-maroon-dark      { background-color: #241A22; }              /* Sidebar bg */
.text-maroon-light   { color: #D81B60; }                          /* Primary pinkish-maroon */
.bg-maroon-gradient  { background: linear-gradient(135deg, #3A1024 0%, #5B1638 50%, #762143 100%); }
.bg-sidebar-active   { background-color: #352331; }

/* Icons are Font Awesome 6 (css/fa.min.css + assets/fonts/fa). */

/* Short, subtle animations that respect reduced motion. */

@keyframes viewFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.animate-view { animation: viewFade .28s ease-out; }

@keyframes rowFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.animate-row { animation: rowFade .22s ease-out both; }

@keyframes chipPop { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
.animate-chip { animation: chipPop .18s ease-out both; }

@keyframes toastIn { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
#toast-root > div { animation: toastIn .2s ease-out; }

/* hover lift for cards */
.card-lift { transition: transform .18s ease, box-shadow .18s ease; }
.card-lift:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(36, 26, 34, .08); }

/* press feedback for buttons */
.btn-press { transition: transform .12s ease, background-color .15s ease, opacity .15s ease; }
.btn-press:active { transform: scale(.97); }

/* small spinner for in-flight button states (e.g. "Sending…") */
@keyframes spin { to { transform: rotate(360deg); } }
.animate-spin { animation: spin .8s linear infinite; }

/* sidebar icon nudge on hover */
#sidebar-nav a .fa-solid { transition: transform .15s ease; }
#sidebar-nav a:hover .fa-solid { transform: translateX(2px) scale(1.08); }

/* donut chart draw-in */
.donut-seg { transition: stroke-dashoffset .7s ease; }

/* trend line chart: cap how wide/tall it can grow on large screens, and
   draw the line + points in on load instead of just popping in at full size */
.trend-chart-shell { max-width: 480px; }
.trend-line-path { transition: stroke-dashoffset 1.1s cubic-bezier(.65,0,.35,1); }
.trend-point { transition: r .35s ease, opacity .35s ease; transition-delay: var(--pt-delay, 0s); }
.trend-fill { transition: opacity .6s ease .5s; }

@media (prefers-reduced-motion: reduce) {
  .animate-view, .animate-row, .animate-chip, #toast-root > div,
  .card-lift, .btn-press, .donut-seg, .animate-spin,
  .trend-line-path, .trend-point, .trend-fill { animation: none !important; transition: none !important; }
}

/* Slim scrollbars across entire application, modals, and content */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.18) transparent;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.18);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.32);
}

#sidebar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); border-radius: 999px; }
#sidebar::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.3); }

pre::-webkit-scrollbar-thumb,
.bg-gray-900::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.25); border-radius: 999px; }
pre::-webkit-scrollbar-thumb:hover,
.bg-gray-900::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.45); }

.clickable { cursor: pointer; }

/* Buttons */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .625rem 1.25rem;
  border-radius: .75rem;
  background: #DB2777;
  color: #fff;
  font-size: .875rem;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
  cursor: pointer;
  transition: background-color .15s ease;
}
.btn-primary:hover { background: #BE185D; }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .625rem 1.25rem;
  border-radius: .75rem;
  background: #fff;
  color: #4B5563;
  font-size: .875rem;
  font-weight: 600;
  border: 1px solid #E5E7EB;
  cursor: pointer;
  transition: background-color .15s ease;
}
.btn-ghost:hover { background: #F9FAFB; }

/* Module-page building blocks */
.osas-card {
  background: #fff;
  border-radius: 1.5rem;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  border: 1px solid #f1f1ef;
}
.osas-section-label {
  font-size: 10px;
  font-weight: 700;
  color: #DB2777; /* pink-600 */
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: 6px;
}
.osas-h3 {
  font-size: 28px;
  font-weight: 800;
  color: #111827;
  letter-spacing: -.025em;
}
.osas-sub {
  font-size: 15px;
  color: #6b7280;
  margin-top: 4px;
}

/* Centered Modal Overlay & Edge-Free Card */
.osas-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  background-color: rgba(0, 0, 0, 0.65);
  overflow-y: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  box-sizing: border-box;
  opacity: 0;
  transition: opacity 0.25s ease-out;
  -webkit-overflow-scrolling: touch;
}
.osas-modal-overlay.active {
  opacity: 1;
}
.osas-modal-card {
  margin: auto;
  background-color: #ffffff;
  border-radius: 1.5rem;
  border: none !important;
  outline: none;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35);
  width: 100%;
  max-width: 42rem;
  position: relative;
  min-height: 240px;
  overflow: hidden;
  transform: scale(0.96);
  opacity: 0;
  transition: transform 0.25s ease-out, opacity 0.25s ease-out;
}
.osas-modal-overlay.active .osas-modal-card {
  transform: scale(1);
  opacity: 1;
}

/* Remove harsh nested borders and redundant backgrounds from forms placed inside modal */
.osas-modal-card > form,
.osas-modal-card > div,
.osas-modal-card > div > form {
  border: none !important;
  box-shadow: none !important;
}

/* Modal Rate-Limiting Transparent Blur Loader */
.osas-modal-loader {
  position: absolute;
  inset: 0;
  z-index: 50;
  border-radius: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: rgba(15, 12, 16, 0.45);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #ffffff;
  padding: 2rem;
  text-align: center;
  opacity: 1;
  border: none !important;
  transition: opacity 0.35s ease-out;
  pointer-events: all;
  cursor: wait;
}
.osas-modal-loader.fade-out {
  opacity: 0;
  pointer-events: none;
}
.osas-spinner-white {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 9999px;
  border: 3.5px solid rgba(255, 255, 255, 0.25);
  border-top-color: #ffffff;
  animation: spin 0.8s linear infinite;
  margin-bottom: 1rem;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.35));
}
@keyframes spin {
  to { transform: rotate(360deg); }
}