/**
 * CEE Sheet Page Styles
 * Styles specific to the CEE sheet detail page with simulator
 */

/* Thin scrollbar */
#content-wrapper {
  scrollbar-width: thin;
  scrollbar-color: #d1d5db transparent;
}

#content-wrapper::-webkit-scrollbar {
  width: 6px;
}

#content-wrapper::-webkit-scrollbar-track {
  background: transparent;
}

#content-wrapper::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 3px;
}

#content-wrapper::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}

/* Form group hidden state */
.form-group[data-hidden="true"] {
  @apply hidden;
}

/* Required field asterisk */
.form-label.required::after {
  content: " *";
  @apply text-red-500;
}

/* Loading spinner animation */
@keyframes spin {
  to { transform: rotate(360deg); }
}

.loading-spinner {
  animation: spin 0.6s linear infinite;
}

/* Result value - tabular numbers for smooth counting animation */
[data-result-value] {
  font-variant-numeric: tabular-nums;
}

/* Bonus item animations */
.bonus-item {
  @apply overflow-hidden;
  transition: opacity 350ms ease-out, transform 350ms ease-out, max-height 350ms ease-out;
  transform-origin: top center;
}

.bonus-item.entering {
  animation: bonusSlideIn 350ms ease-out forwards;
}

.bonus-item.leaving {
  animation: bonusSlideOut 250ms ease-out forwards;
}

@keyframes bonusSlideIn {
  0% {
    opacity: 0;
    transform: translateY(-8px) scale(0.95);
    max-height: 0;
  }
  50% {
    max-height: 80px;
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    max-height: 80px;
  }
}

@keyframes bonusSlideOut {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
    max-height: 80px;
  }
  100% {
    opacity: 0;
    transform: translateY(-8px) scale(0.95);
    max-height: 0;
  }
}

/* Bonus section container */
.bonus-section {
  @apply overflow-hidden;
  transition: max-height 350ms ease-out, opacity 350ms ease-out, margin 350ms ease-out;
}

.bonus-section.collapsed {
  max-height: 0 !important;
  opacity: 0;
  margin-bottom: 0 !important;
}

.bonus-section.expanded {
  max-height: 500px;
  opacity: 1;
}

/* Bonus divider transition */
.bonus-divider {
  transition: opacity 350ms ease-out, padding 350ms ease-out;
}

.bonus-section.collapsed + .bonus-divider {
  padding-top: 0 !important;
}

/* Google Maps Autocomplete Dropdown Styling */
.pac-container {
  @apply bg-charter-bg border border-charter-border-strong rounded-md shadow-md mt-1;
  font-family: inherit;
}

.pac-item {
  @apply py-3 px-4 cursor-pointer border-t border-charter-border-muted text-sm leading-5;
}

.pac-item:first-child {
  @apply border-t-0;
}

.pac-item:hover {
  @apply bg-charter-bg-subtle;
}

.pac-item-selected {
  @apply bg-charter-bg-muted;
}

.pac-matched {
  @apply font-semibold text-charter-text;
}

.pac-item-query {
  @apply text-charter-text font-medium;
}

.pac-icon {
  @apply hidden; /* Hide Google's location icon */
}

/* Choice card styles are in home/styles.css */

/* Field Groups Styling (New Architecture) */
.field-group {
  @apply border border-charter-border rounded-xl overflow-hidden bg-charter-bg;
}

.field-group-header {
  background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
  @apply p-5 border-b border-charter-border;
}

.field-group-title {
  @apply text-lg font-semibold text-charter-text mb-2 flex items-center gap-2;
}

.field-group-description {
  @apply text-sm text-charter-text-subtle mb-4;
}

.alternative-buttons {
  @apply flex gap-2 flex-wrap;
}

.alternative-btn {
  @apply py-2 px-4 border-2 border-charter-border rounded-md bg-charter-bg text-charter-text-subtle text-sm font-medium cursor-pointer transition-all duration-200 flex items-center gap-1.5;
}

.alternative-btn:hover {
  @apply border-charter-accent-medium text-charter-accent-medium -translate-y-px;
}

.alternative-btn.active {
  @apply border-charter-accent-medium bg-charter-accent-medium text-white;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}

.field-group-content {
  @apply p-5;
}

.alternative-content {
  @apply hidden;
}

.alternative-content.active {
  @apply block;
}

/* Alternative description - small badge style */
.alternative-description {
  @apply text-xs text-charter-accent-medium bg-charter-accent-lightest py-1.5 px-3 rounded-md mb-4 inline-block;
}

/* Smaller choice cards for field groups */
.choice-card {
  @apply min-h-10 py-2.5 px-3.5 text-[13px];
}

/* Tab Navigation */
#sheet-tabs .tab {
  @apply gap-2 px-5 py-3.5 transition-all duration-200 border-b-2 border-transparent inline-flex items-center;
  @apply font-medium text-charter-text-subtle text-[15px];
  @apply hover:text-charter-text hover:bg-charter-bg-subtle;
}

#sheet-tabs .tab.tab-active {
  @apply font-semibold text-charter-accent-medium border-charter-accent-medium;
}

#sheet-tabs .tab .material-symbols-outlined {
  @apply transition-transform duration-200;
}

#sheet-tabs .tab:hover .material-symbols-outlined {
  @apply scale-110;
}

/* Version Dropdown */
#version-dropdown {
  transform-origin: top right;
  animation: dropdownFadeIn 200ms ease-out;
}

#version-dropdown.hidden {
  display: none;
}

@keyframes dropdownFadeIn {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

#version-arrow {
  transition: transform 200ms ease-out;
}


/* Tab Panel Transitions */
.tab-panel {
  animation: tabFadeIn 250ms ease-out;
}

.tab-panel.hiding {
  animation: tabFadeOut 150ms ease-out forwards;
}

@keyframes tabFadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes tabFadeOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-4px);
  }
}

/* Regulatory filter transitions */
.regulatory-item {
  @apply overflow-hidden;
  transition: opacity 300ms ease-in-out, max-height 350ms cubic-bezier(0.4, 0, 0.2, 1), padding 350ms cubic-bezier(0.4, 0, 0.2, 1);
  max-height: 150px;
  opacity: 1;
}

button.regulatory-item:focus,
button.regulatory-item:focus-visible,
button.regulatory-item:active {
  outline: none;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
}

.regulatory-item.filtered-out {
  @apply pointer-events-none;
  transition: opacity 200ms ease-out, max-height 250ms cubic-bezier(0.4, 0, 0.2, 1), padding 250ms cubic-bezier(0.4, 0, 0.2, 1);
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
}

/* Viewer panel transitions */
#viewer-empty,
#viewer-pdf,
#viewer-text {
  @apply transition-opacity duration-200 ease-out;
}

#viewer-empty.fade-out,
#viewer-pdf.fade-out,
#viewer-text.fade-out {
  @apply opacity-0;
}

/* FAQ content fade-in */
#viewer-text-content {
  @apply transition-opacity duration-300 ease-out;
}

#viewer-text-content.loading {
  @apply opacity-50;
}

#viewer-text-content.fade-in {
  animation: fadeInContent 300ms ease-out forwards;
}

@keyframes fadeInContent {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* JORF Extracts Styling */
.jorf-item {
  @apply transition-all duration-200;
}

.jorf-item:hover {
  @apply shadow-lg;
}

.jorf-pdf-viewer {
  @apply relative;
}

.jorf-pdf-viewer embed {
  @apply min-h-96;
}

/* Mobile responsive PDF viewer */
@media (max-width: 640px) {
  .jorf-pdf-viewer embed {
    @apply h-64;
  }

  .jorf-item .flex {
    @apply flex-col items-start gap-3;
  }
}