@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

 body {
     font-family: 'Inter', sans-serif;
     background-color: #f8fafc;
     /* slate-50 */
     color: #0f172a;
     /* slate-900 */
 }

 /* Mandatory Chart Container Styles */
 .chart-container {
     position: relative;
     width: 100%;
     max-width: 100%;
     margin-left: auto;
     margin-right: auto;
     height: 300px;
     max-height: 350px;
     display: flex;
     justify-content: center;
     align-items: center;
 }

 @media (min-width: 768px) {
     .chart-container {
         height: 350px;
     }
 }

 /* Custom Scrollbar */
 ::-webkit-scrollbar {
     width: 8px;
 }

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

 ::-webkit-scrollbar-thumb {
     background: #cbd5e1;
     border-radius: 4px;
 }

 ::-webkit-scrollbar-thumb:hover {
     background: #94a3b8;
 }

 .tab-active {
     border-bottom: 2px solid #0d9488;
     /* teal-600 */
     color: #0d9488;
     font-weight: 600;
 }

 .tab-inactive {
     color: #64748b;
     /* slate-500 */
 }

 .tab-inactive:hover {
     color: #334155;
     /* slate-700 */
 }

 .fade-in {
     animation: fadeIn 0.3s ease-in-out;
 }

 @keyframes fadeIn {
     from {
         opacity: 0;
         transform: translateY(5px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 /* Mobile menu overlay */
 .mobile-menu-overlay {
     background-color: rgba(15, 23, 42, 0.5);
     /* slate-900/50 */
     backdrop-filter: blur(4px);
 }