/**
 * 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;
}

/* 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 var(--duration-slow) ease-out, transform var(--duration-slow) ease-out, max-height var(--duration-slow) 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 var(--duration-slow) ease-out, opacity var(--duration-slow) ease-out, margin var(--duration-slow) 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 var(--duration-slow) ease-out, padding var(--duration-slow) 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;
  @apply transition-all duration-150 ease-out;
  font-family: inherit;
}

.pac-container.pac-hidden {
  @apply opacity-0 invisible;
  transform: translateY(-4px);
}

.pac-container.pac-visible {
  @apply opacity-100 visible;
  transform: translateY(0);
}

.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 - Clean Cards
   ============================================ */

.field-group {
  @apply bg-white border border-gray-200 rounded-xl;
}

.field-group-header {
  @apply px-5 pt-5 pb-4;
}

.field-group-title {
  @apply text-base font-semibold text-gray-900 mb-0.5;
}

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

/* Reduce gap when description is last item (no alternative buttons) */
.field-group-description:last-child {
  @apply mb-0;
}

/* Alternative Buttons - Underline Tab Style */
/* Explicit CSS to override any conflicting utility-generated rules */
.alternative-buttons {
  display: grid;
  gap: calc(var(--spacing) * 0.5);
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

.alternative-btn {
  @apply relative py-2 px-3 text-sm font-medium cursor-pointer rounded-md;
  @apply text-charter-text-light bg-transparent border border-transparent;
  @apply transition-all duration-150 ease-out;
}

.alternative-btn:hover {
  @apply text-charter-text-medium bg-gray-50;
}

.alternative-btn.active {
  @apply text-blue-600 bg-blue-50 border-blue-100;
}

.field-group-content {
  @apply px-5 pb-5 pt-4 border-t border-gray-100;
}

.alternative-content {
  @apply hidden;
}

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

/* Alternative description - subtle inline hint */
.alternative-description {
  @apply text-xs text-charter-text-light mb-4 flex items-center gap-0.5;
}

.alternative-description .material-symbols-outlined {
  @apply text-base text-charter-text-lighter;
}

/* ============================================
   Choice Cards - Clean Buttons
   ============================================ */

.choice-card {
  @apply min-h-11 py-2.5 px-4 text-sm font-medium;
  @apply bg-white border border-gray-200 rounded-lg;
  @apply text-charter-text-subtle cursor-pointer;
  @apply transition-all duration-150 ease-out;
}

.choice-card:hover {
  @apply border-gray-300 text-charter-text-muted bg-gray-50;
}

.choice-card-active,
.choice-card[aria-checked="true"] {
  @apply bg-blue-50 text-blue-600 border-blue-200;
}

.choice-card-active:hover,
.choice-card[aria-checked="true"]:hover {
  @apply bg-blue-50 border-blue-300;
}

/* Document Item (Documents Panel) */
.document-item {
  @apply w-full flex items-center gap-3 py-2.5 px-3;
  @apply bg-white border border-gray-200 rounded-lg;
  @apply text-left cursor-pointer;
  @apply transition-all duration-150 ease-out;
}

.document-item:hover {
  @apply border-gray-300 bg-gray-50;
}

.document-item[aria-selected="true"] {
  @apply bg-blue-50 border-blue-200;
}

.document-item[aria-selected="true"]:hover {
  @apply bg-blue-50 border-blue-300;
}

.document-item-icon {
  @apply w-9 h-9 rounded-lg bg-gray-100 flex items-center justify-center shrink-0 text-charter-text-subtle;
}

.document-item[aria-selected="true"] .document-item-icon {
  @apply bg-blue-100 text-blue-600;
}

.document-item-logo {
  @apply w-9 h-9 object-contain rounded-lg bg-white border border-gray-200 shrink-0;
}

.document-item[aria-selected="true"] .document-item-logo {
  @apply border-blue-200;
}

.document-item-title {
  @apply text-sm font-medium text-charter-text-subtle truncate;
}

.document-item[aria-selected="true"] .document-item-title {
  @apply text-blue-700;
}

.document-item-subtitle {
  @apply text-xs text-charter-text-light truncate;
}

.document-item[aria-selected="true"] .document-item-subtitle {
  @apply text-blue-600/70;
}

/* Document Panel Transitions */
#document-empty,
#document-loading,
#document-error,
#document-info {
  @apply transition-opacity duration-200 ease-out;
}

#document-empty.fade-out,
#document-loading.fade-out,
#document-error.fade-out {
  @apply opacity-0;
}

/* Slide-in animation when document info appears */
#document-info:not(.hidden) {
  animation: slide-in-up 250ms ease-out;
}

/* 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 is now CSS-only using <details>/<summary> */
/* Animation via tw-animate-css classes in template */


/* Tab Panel Transitions (uses shared animations from styles.css) */
.tab-panel {
  animation: slide-in-up 250ms ease-out;
}

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

/* Regulatory filter transitions */
.regulatory-item {
  transition: opacity var(--duration-medium) ease-in-out;
}

/* Regulatory item selected state */
.regulatory-item.selected,
.regulatory-item.selected:hover {
  @apply bg-charter-accent-lightest border-transparent rounded-lg;
}

@media (min-width: 1024px) {
  .regulatory-item.selected,
  .regulatory-item.selected:hover {
    @apply border-l-transparent;
  }
}

/* Document item selected state */
.document-item.selected,
.document-item.selected:hover {
  @apply bg-charter-accent-lightest border-transparent rounded-lg;
}

@media (min-width: 1024px) {
  .document-item.selected,
  .document-item.selected:hover {
    @apply border-l-transparent;
  }
}

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

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 hidden;
}

/* 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;
}

/* Uses shared slide-in-up animation from styles.css */
#viewer-text-content.fade-in {
  animation: slide-in-up 300ms ease-out forwards;
}

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

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

/* Mobile responsive for JORF items */
@media (max-width: 640px) {
  .jorf-item .flex {
    @apply flex-col items-start gap-3;
  }
}

/* ============================================
   Cumac Valuation Card Styles
   ============================================ */

/* Input wrapper with suffix */
.cumac-input-wrapper {
  @apply flex items-center border border-gray-200 rounded-md bg-white overflow-hidden;
  @apply transition-all duration-150;
}

.cumac-input-wrapper:hover {
  @apply border-gray-300;
}

.cumac-input-wrapper:focus-within {
  @apply border-emerald-500 ring-2 ring-emerald-500/10;
}

.cumac-input {
  @apply w-full min-w-0 px-3 py-2 text-sm text-gray-900 bg-transparent border-0;
  @apply focus:outline-hidden focus:ring-0;
  -moz-appearance: textfield;
}

.cumac-input::-webkit-outer-spin-button,
.cumac-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.cumac-input-suffix {
  @apply px-3 text-xs font-medium text-charter-text-subtle bg-gray-50 border-l border-gray-200 whitespace-nowrap self-stretch flex items-center;
}

/* Value number styling - tabular for smooth animations */
.cumac-value {
  font-variant-numeric: tabular-nums;
  transition: transform var(--duration-medium) ease-out, color var(--duration-medium) ease-out;
}

/* Emphasis state for larger value */
.cumac-result-emphasis .cumac-value {
  @apply text-3xl text-green-600;
  transform: scale(1.02);
}

.cumac-result-prime:not(.cumac-result-emphasis) .cumac-value,
.cumac-result-apport:not(.cumac-result-emphasis) .cumac-value {
  @apply text-xl text-charter-text-medium;
  transform: scale(0.95);
}


/* Mobile responsive */
@media (max-width: 640px) {
  .cumac-valuation-card .p-5 {
    @apply p-4;
  }
}

/* ============================================
   Content List Styles (ul, ol, li)
   For CKEditor content with lists
   ============================================ */

/* Lists within content sections */
.cee-content ul,
.cee-content ol {
  @apply my-3 pl-6 space-y-2;
}

.cee-content ul {
  @apply list-disc;
}

.cee-content ol {
  @apply list-decimal;
}

.cee-content li {
  @apply leading-relaxed;
}

/* Nested lists */
.cee-content ul ul,
.cee-content ol ul {
  @apply list-[circle] mt-2;
}

.cee-content ul ol,
.cee-content ol ol {
  @apply list-[lower-alpha] mt-2;
}

/* Ensure list items are visible */
.cee-content li::marker {
  @apply text-charter-text-medium;
}

/* ============================================
   Alert Banner Animation
   ============================================ */

.alert-banner {
  animation: bannerSlideIn 300ms ease-out;
}

.alert-banner.dismissing {
  animation: bannerDismiss 250ms ease-out forwards;
}

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

@keyframes bannerDismiss {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
    max-height: 100px;
    margin-bottom: 1.5rem;
  }
  100% {
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
    max-height: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-width: 0;
  }
}