/* AlgoSoc Dashboard — Orange Theme Overrides */
/* This file loads AFTER input_filter.css; uses !important for override safety */

/* ===== GENERAL THEME ===== */

.navbar-brand {
  color: #e89c2d !important;
}

.nav-tabs .nav-link.active {
  border-bottom: 3px solid #e89c2d;
}

.navbar .nav-link {
  color: #e89c2d !important;
}

.navbar .nav-link:hover {
  color: #000000 !important;
}

a { color: #f39917; }
a:hover { color: #000 !important; }

/* ===== QUESTION TEXT ===== */

p > em:only-child {
  display: block;
  border-left: 4px solid #f39917;
  background-color: #fff8f0;
  padding: 12px 16px;
  margin: 0.5em 0;
  font-style: italic;
  color: #444;
  font-size: 0.95em;
  line-height: 1.5;
}

/* ===== VERTICAL SPACING — Tighten Everything ===== */

/* Reduce Quarto's default content margins */
.quarto-body-content > .content-block,
.quarto-body-content > div {
  margin-bottom: 0.25rem;
}

/* Tighter show-when sections */
.viz-show-when {
  margin-bottom: 2px;
  margin-top: 0;
}

/* Input groups with vertical spacing */
.dashboardr-input-group {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  margin: 10px auto !important;
  min-width: auto !important;
}

/* Tighter input rows */
.dashboardr-input-row {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 8px 12px !important;
  margin: 4px 0 !important;
  background: #fafafa;
  border: 1px solid #eee;
  border-radius: 8px;
}

.dashboardr-input-row .dashboardr-input-group {
  margin: 0 !important;
}

/* Reduce spacing above/below charts */
.cell-output-display {
  margin-top: 0 !important;
  margin-bottom: 0.25rem !important;
}

/* ===== BUTTON GROUP — Orange Theme ===== */

.dashboardr-button-group {
  display: inline-flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  margin: 0 auto !important;
  border-radius: 8px !important;
  overflow: visible !important;
}

/* Prevent last button from stretching */
.dashboardr-button-option {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

/* Desktop: pill-style buttons inside the pill container */
@media (min-width: 769px) {
  .dashboardr-button-option {
    border-radius: 999px !important;
    border: none !important;
    background: transparent !important;
    padding: 6px 16px !important;
  }
  .dashboardr-button-option.active {
    background-color: #f39917 !important;
    color: #fff !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12) !important;
  }
}

/* Active state: orange */
.dashboardr-button-option.active {
  background-color: #f39917 !important;
  color: #fff !important;
  border-color: #f39917 !important;
}

.dashboardr-button-option.active:hover {
  background-color: #e08a0e !important;
}

.dashboardr-button-option:hover:not(.active) {
  background-color: #fff8f0 !important;
}

.dashboardr-button-option:focus {
  box-shadow: inset 0 0 0 2px rgba(243, 153, 23, 0.4) !important;
}

/* ===== MOBILE BUTTON GROUP — Pill-style wrap ===== */

@media (max-width: 768px) {
  .dashboardr-button-option.active {
    border-color: #f39917 !important;
  }
}

/* ===== RADIO BUTTONS — Orange Theme ===== */

.dashboardr-radio-group {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 4px 14px !important;
  margin: 0 auto !important;
  width: 100% !important;
}

.dashboardr-radio input:checked + .dashboardr-radio-mark {
  background-color: #f39917 !important;
  border-color: #f39917 !important;
}

.dashboardr-radio input:focus + .dashboardr-radio-mark {
  box-shadow: 0 0 0 3px rgba(243, 153, 23, 0.2) !important;
}

.dashboardr-radio input:checked:hover + .dashboardr-radio-mark {
  background-color: #e08a0e !important;
  border-color: #e08a0e !important;
}

/* ===== CHECKBOX — Orange Theme ===== */

.dashboardr-checkbox input:checked + .dashboardr-checkbox-mark {
  background-color: #f39917 !important;
  border-color: #f39917 !important;
}

.dashboardr-checkbox input:checked:hover + .dashboardr-checkbox-mark {
  background-color: #e08a0e !important;
  border-color: #e08a0e !important;
}

/* ===== SWITCH — Orange Theme ===== */

.dashboardr-switch input:checked + .dashboardr-switch-slider {
  background-color: #f39917 !important;
}

.dashboardr-switch input:checked:hover + .dashboardr-switch-slider {
  background-color: #e08a0e !important;
}

/* ===== SLIDER — Orange Theme ===== */

.dashboardr-slider-value {
  color: #f39917 !important;
  background-color: #fff8f0 !important;
}

.dashboardr-slider {
  background: linear-gradient(to right, #f39917 0%, #f39917 var(--slider-percent, 0%), #e5e7eb var(--slider-percent, 0%), #e5e7eb 100%) !important;
}

.dashboardr-slider::-webkit-slider-thumb {
  border-color: #f39917 !important;
}

.dashboardr-slider::-moz-range-thumb {
  border-color: #f39917 !important;
}

/* ===== SELECT/CHOICES — Orange Theme ===== */

.dashboardr-choices.is-focused .choices__inner,
.dashboardr-choices.is-open .choices__inner {
  border-color: #f39917 !important;
  box-shadow: 0 0 0 3px rgba(243, 153, 23, 0.1) !important;
}

.dashboardr-choices .choices__list--dropdown .choices__item--selectable.is-highlighted {
  background-color: #f39917 !important;
}

/* ===== ICONIFY ICONS IN BUTTONS & RADIO ===== */

.dashboardr-button-option iconify-icon,
.dashboardr-radio-text iconify-icon {
  font-size: 1.1em;
  vertical-align: -0.125em;
}

/* ===== SPACING BETWEEN INPUT TYPES ===== */

/* Add space between radio group and button group sections */
.dashboardr-radio-group {
  margin-bottom: 6px !important;
}

/* Space before demo button groups (after charts) */
.viz-show-when + .dashboardr-input-group {
  margin-top: 16px !important;
}

/* Ensure button groups render in normal flow below charts */
.dashboardr-input-group {
  position: relative !important;
  z-index: 1 !important;
}

/* Contain chart overflow to prevent overlap with adjacent elements */
.dashboardr-deferred-hydrated {
  overflow: hidden !important;
}

/* Ensure inline (first) chart htmlwidget fills its container height */
.dashboardr-inline-chart .highchart.html-widget {
  width: 100% !important;
  height: 100% !important;
}

/* ===== HOME PAGE — Navigation Buttons ===== */

.buttontop {
  display: inline-block;
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  margin: 10px;
  cursor: pointer;
  border-radius: 5px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.buttontop:hover {
  background-color: #45a049;
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
  color: white;
  text-decoration: none;
}

/* ===== HOME PAGE — Highlighted Blockquote ===== */

blockquote.highlightit {
  font-size: 1em;
  color: #333;
  border-left: 5px solid #f39917;
  border-right: 5px solid #f39917;
  background-color: #f7e3ce;
  padding: 10px 20px;
  margin: 20px 0;
  line-height: 1.6;
  position: relative;
}

/* ===== ABOUT PAGE — Creator Cards ===== */

.creator-card {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
  padding: 15px;
  border: 1px solid #eee;
  border-radius: 8px;
}

.creator-card img {
  max-width: 150px;
  border-radius: 8px;
}

.creator-card .card-text {
  font-size: 0.95em;
  line-height: 1.5;
}

/* ===== JUSTIFY TEXT ===== */

.justify {
  text-align: justify;
}

/* ===== PAGE INTRO — Icon-based hint bar ===== */

.page-intro {
  text-align: center;
  color: #777;
  font-size: 0.88em;
  padding: 6px 16px;
  margin: 0 auto 4px auto;
}

.page-intro iconify-icon {
  color: #f39917;
  font-size: 1.1em;
  vertical-align: -0.1em;
  margin: 0 2px 0 8px;
}

.page-intro iconify-icon:first-child {
  margin-left: 0;
}

/* ===== LANDING PAGE — Narrower content ===== */

.landing-wrapper {
  max-width: 850px;
  margin: 0 auto;
}

/* ===== LAYOUT FIX — Show-when containers need full width ===== */

.viz-show-when {
  width: 100% !important;
}

/* Radio groups (wave selector) need full width for centering */
body .dashboardr-input-group:has(.dashboardr-radio-group) {
  width: 100% !important;
}

/* Button groups: pill-style, shrink-to-fit, centered */
body .dashboardr-input-group:has(.dashboardr-button-group) {
  width: fit-content !important;
  margin-left: auto !important;
  margin-right: auto !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 0 !important;
  background: transparent !important;
}

/* Ensure button group centers its buttons properly */
.dashboardr-input-group.align-center .dashboardr-button-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

/* ===== NAVBAR — Subtle grey background ===== */

#quarto-header,
.navbar {
  background-color: #f7f7f7 !important;
  border-bottom: 1px solid #eee;
}