/**
 * Questionator - Main Stylesheet
 * Complements Bootstrap 5 with clean, accessible design.
 */

:root {
  --app-radius: 0.5rem;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Brand & Header */
.brand-icon {
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.25rem;
  border-radius: 0.375rem;
  background: linear-gradient(135deg, #0d6efd, #0dcaf0);
  color: #ffffff;
  box-shadow: 0 2px 4px rgba(13, 110, 253, 0.25);
}

/* Drag and Drop Zone */
.drop-zone {
  border: 2px dashed var(--bs-border-color);
  border-radius: var(--app-radius);
  padding: 1.5rem 1rem;
  text-align: center;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
}

.drop-zone:hover,
.drop-zone.dragover {
  border-color: var(--bs-primary);
  background-color: var(--bs-primary-bg-subtle);
}

/* Document Item */
.doc-item {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.doc-item:hover {
  transform: translateY(-1px);
}

/* Question Cards in Workbench */
.question-edit-card {
  transition: border-color 0.2s ease;
}

.question-edit-card.needs-review {
  border-left: 4px solid var(--bs-danger);
}

.question-edit-card.ready {
  border-left: 4px solid var(--bs-success);
}

/* Option Row in Editor */
.option-edit-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.option-badge {
  min-width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

/* Results: Winning Answer Banner */
.selected-answer-banner {
  border-radius: var(--app-radius);
}

.winning-letter-box {
  min-width: 54px;
  height: 54px;
  font-size: 1.8rem;
}

/* Probability Row */
.probability-row {
  transition: background-color 0.15s ease;
}

/* Accessibility & Focus */
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
}

/* Responsive adjustments */
@media (max-width: 991.98px) {
  .panel-column {
    margin-bottom: 2rem;
  }
}

/* Collapsible Card Chevrons */
[data-bs-toggle="collapse"] .chevron-icon {
  transition: transform 0.2s ease-in-out;
  display: inline-block;
}

[data-bs-toggle="collapse"][aria-expanded="true"] .chevron-icon {
  transform: rotate(180deg);
}

[data-bs-toggle="collapse"][aria-expanded="false"] .chevron-icon {
  transform: rotate(0deg);
}