/* ========== Base Setup ========== */
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;700&display=swap');

/* ========== Core Styles ========== */
body {
  font-family: 'Josefin Sans', sans-serif;
  line-height: 1.6;
}

/* ========== Typography Enhancements ========== */
[class^="color-"] {
  &-red { color: #FF0000; }
  &-blue { color: #0000FF; }
  &-green { color: #008000; }
  &-yellow { color: #FFFF00; }
  &-orange { color: #FFA500; }
  &-brand { color: #e64626; }
}

a {
  color: #5ebccf;
  transition: color 0.3s ease;
}

a:hover {
  color: darken(#5ebccf, 10%);
}

/* ========== Component Styles ========== */
.bql {
  padding: 1rem;
  margin: 0.5rem;
  background: rgba(255, 255, 255, 0.95);
  border: 2px solid #E6E6E6;
  border-left: 5px solid #E6E6E6;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 0.5rem;
  font-style: italic;
  font-weight: 600;
  font-size: 1.1rem;
}

/* ========== Data Table Improvements ========== */
.dataTable-wrapper {
  color: #0148A4;
}

.dataTable tbody tr {
  transition: background 0.3s ease;
}

.dataTable tbody tr.odd {
  background: lighten(#E6E6E6, 5%);
}

.dataTable tbody tr.even {
  background: #0148A4;
}

.dataTable tbody tr:hover {
  background: #386247;
  color: white;
}

/* ========== Utility Classes ========== */
.fade {
  opacity: 0.5;
  transition: opacity 0.3s ease;
}

.fade:hover {
  opacity: 1;
}

.spoiler {
  position: relative;
  cursor: pointer;
}

.spoiler::before {
  content: "⚠️ Spoiler Alert - Click to Reveal";
  position: absolute;
  background: rgba(230, 70, 38, 0.1);
  padding: 0.5rem;
  border-radius: 0.3rem;
}

.spoiler:hover::before {
  display: none;
}

/* ========== Layout Improvements ========== */
.pull-left, .pull-right {
  width: 50%;
  padding: 1rem;
}

@media (max-width: 768px) {
  .pull-left, .pull-right {
    width: 100%;
    float: none;
  }
}

/* ========== Code Display ========== */
code {
  background: rgba(#E6E6E6, 0.3);
  padding: 0.2em 0.4em;
  border-radius: 0.3em;
  font-family: 'Source Code Pro', monospace;
  font-size: 0.9em;
}

/* ========== Navbar Dropdown ========== */
.navbar .dropdown-menu {
  max-height: 70vh;
  overflow-y: auto;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.download-link {
  display: block;
  margin-top: 1rem;
  color: #666;
  font-size: 0.9em;
  text-decoration: none;
}

.download-link:hover {
  color: #333;
  text-decoration: underline;
}