/**
 * Custom Styles for Interactive Feasibility Report
 * 
 * This file contains:
 * - Brand color definitions as CSS variables
 * - Custom scrollbar styling
 * - Tab button styling
 */

/* Define brand colors as CSS variables for easier use */
:root {
    --color-mla-green: #00774B;
    --color-mla-green-light: #BEDCCD;
    --color-mla-gold: #FDB714;
    --color-mla-gold-light: #FFECC1;
    --color-mla-grey: #4B4F54;
    --color-mla-grey-light: #D0D0D1;
    --color-secondary-l-green: #A0CF67;
    --color-secondary-l-blue: #3AB0C8;
    --color-secondary-d-brown: #5D4A25;
    --color-secondary-orange: #DC8419;
    --color-secondary-purple: #6D3076;
    --color-secondary-red: #CC3727;
}

/* Custom scrollbar for a more polished look */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #D0D0D1; /* mla-grey-light */
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #4B4F54; /* mla-grey */
}

/* Custom CSS for Tab Buttons */
.tab-button {
    display: flex;
    align-items: center;
    padding: 0.75rem 1.25rem; /* 12px 20px */
    font-size: 0.875rem; /* 14px */
    font-weight: 600; /* semibold */
    border-radius: 0.5rem; /* 8px */
    transition: all 0.2s ease-in-out;
    white-space: nowrap;
}



.tab-dropdown {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
              opacity 0.3s ease,
              transform 0.3s ease;
  opacity: 0;
  transform: translateY(-8px);
}

.tab-dropdown.open {
  max-height: 500px;
  opacity: 1;
  transform: translateY(0);
}

/* Mobile tab item animation */
.mobile-tab-item {
  opacity: 0;
  transform: translateX(-10px);
  transition: all 0.25s ease;
}

.tab-dropdown.open .mobile-tab-item {
  opacity: 1;
  transform: translateX(0);
}

.tab-dropdown.open .mobile-tab-item:nth-child(1) { transition-delay: 0.05s; }
.tab-dropdown.open .mobile-tab-item:nth-child(2) { transition-delay: 0.08s; }
.tab-dropdown.open .mobile-tab-item:nth-child(3) { transition-delay: 0.11s; }
.tab-dropdown.open .mobile-tab-item:nth-child(4) { transition-delay: 0.14s; }
.tab-dropdown.open .mobile-tab-item:nth-child(5) { transition-delay: 0.17s; }
.tab-dropdown.open .mobile-tab-item:nth-child(6) { transition-delay: 0.20s; }
.tab-dropdown.open .mobile-tab-item:nth-child(7) { transition-delay: 0.23s; }
.tab-dropdown.open .mobile-tab-item:nth-child(8) { transition-delay: 0.26s; }

/* Chevron rotation */
.chevron-icon {
  transition: transform 0.3s ease;
}

.chevron-icon.rotated {
  transform: rotate(180deg);
}

/* Active indicator dot for mobile */
.active-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #2d6a4f;
  margin-left: auto;
}