:root {
  /* CSS HEX */
  --bs-primary: #3C4F76;
  --bs-dark: #383F51;
  --bs-secondary: #DDDBF1;
  --vanilla: #fff9a5ff;
  --beaver: #b48b7dff;
}
.btn-outline-primary {
  color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
  background-color: var(--bs-primary) !important;
  color: #fff !important;
  border-color: var(--bs-primary) !important;
}

.nav-link.active,
.nav-link:focus,
.nav-link:hover {
  background-color: var(--bs-primary) !important;
  color: #fff !important;
}
#sidebarMenu .nav-link{
  color:var(--bs-dark)
}
.bg-primary,
.btn-primary,
.text-primary,

.border-primary {
  background-color: var(--bs-primary) !important;
  color: #fff !important;
  border-color: var(--bs-primary) !important;
}

.text-primary {
  color: var(--bs-primary) !important;
}

.bg-secondary,
.btn-secondary,
.text-secondary,
.border-secondary {
  background-color: var(--bs-secondary) !important;
  color: #fff !important;
  border-color: var(--bs-secondary) !important;
}
/* Sidebar tweaks */
#sidebarMenu .nav-link.active {
  color: #fff;
}

/* Make <input> & <select> elements look Bootstrapy when using {{ form.as_p }} */
input, select, textarea {
  /* Form widgets rendered by Django will inherit these classes */
  @apply form-control;
}

button {
  @apply btn;
}
body {
  font-family: 'Poppins', sans-serif;
  background-color: #f8f9fa;
}

.btn-primary {
  background-color: #003049;
  border: none;
  transition: background-color 0.2s;
}

.btn-primary:hover {
  background-color: #001f2e;
}

.form-floating > label {
  color: #6c757d;
}

.card, .shadow-lg {
  border-radius: 1rem;
}
input.form-control {
  height: 45px;
  font-size: 0.95rem;
  padding: 0.375rem 0.75rem;
}

label.form-label {
  font-weight: 500;
  margin-bottom: 0.3rem;
}
input.form-control {
  width: 100% !important;
}


.card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
   -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* -------------------------------------------------
   1. Universal “lift & zoom” for any .hover-shadow
   -------------------------------------------------*/
.hover-shadow {
  transition: transform .25s ease, box-shadow .25s ease;
  will-change: transform;
}

.hover-shadow:hover {
  transform: translateY(-6px); /* just move up, no scale */
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
  will-change: transform;
}


/* -------------------------------------------------
   2. Extra safety: disable the effect while the
      upload card shows its back face
   -------------------------------------------------*/
.flip-container.flipped .hover-shadow:hover {
  transform: none;
  box-shadow: none;
}
.flip-container:not(.flipped) .front:hover {
  transform: translateY(-6px); /* just move up, no scale */
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
  will-change: transform;
}



/* Button animation for recent analysis */
.btn-outline-primary {
  transition: all 0.2s ease;
}
.btn-outline-primary:hover {
  background-color: var(--bs-primary);
  color: #fff;
  transform: scale(1.03);
}

.card-title {
  font-size: 1.25rem;
}
.card ul li {
  margin-bottom: 0.5rem;
}

.flip-container {
  perspective: 1200px;
  height: 100%;
  position: relative;
  min-height: 400px;
}

.flipper {
  position: relative;
  transition: 0.6s;
  transform-style: preserve-3d;
  height: 100%;
}

.flip-container.flipped .flipper {
  transform: rotateY(180deg);
  will-change: transform;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}


.front, .back {
  backface-visibility: hidden;
  transition: all 0.3s ease;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.front {
  z-index: 2;
}

.back {
  transform: rotateY(180deg);
  z-index: 1;
}
/* put this **after** the existing flip rules                         */
.flip-container.flipped .front {
  pointer-events: none;   /* ignore the mouse while we’re on the back */
  z-index: 1;             /* optional – just push it underneath       */
}

.flip-container.flipped .back {
  z-index: 2;             /* make sure the back is the face on top    */
}

.dashboard-card-img {
  width: auto;
  max-width: 100%;
  height: clamp(90px, 25vh, 210px); /* Grow based on screen height */
  object-fit: contain;
  transition: height 0.3s ease;
}
/* Accordion → list-group alignment */
.accordion .list-group-item {
  border-left: none;
  border-right: none;
}
.accordion .list-group-item:first-child { border-top: none; }
.accordion .list-group-item:last-child  { border-bottom: none; }
/* Sharper list-group visuals */
.list-group-item {
  padding-top: .75rem;
  padding-bottom: .75rem;
}
.list-group-item strong    { color: var(--bs-primary); }
.list-group-item em        { color: var(--bs-dark);    }

/* Result card tweaks */
.stats-output strong       { color: var(--bs-primary); }
.stats-output em           { font-style: italic; }
/* Preserve line breaks inside result / AI blocks */
.md-inline           { white-space: pre-wrap; }
.list-group-item .md-inline { white-space: normal; }  /* don’t wrap suggestion titles */