/* =========================
   TABS (top tabs)
   ========================= */

/* Base for all tabs */
.tab {
    transition: 
        background-color 0.2s ease,
        color 0.2s ease,
        transform 0.15s ease;
    padding: 10px 16px;
}

/* Hover */
.tab:hover {
    transform: translateY(-2px);
}

/* Selected tab */
.tab--selected {
    background-color: #2c7be5;
    color: #006ed4;
    animation: tabPop 0.25s ease-in;
    border-radius: 6px 6px 0 0;
    transform: translateY(-8px);
}

.tab--selected:hover {
    transform: translateY(-10px);
}

.grid_element {
    animation: SubcomponentEnter 0.2s ease-in;
}

tr {
    animation: SubcomponentEnter 0.2s ease-in;
}

/* filters section align rules*/
.dash-dropdown-wrapper {
    padding: 0px !important;
    align-items: flex-start !important;

}
.dash-dropdown-content{
    animation: SubcomponentEnter 0.25s ease-in;
}

.dash-datepicker-content{
    animation: SubcomponentEnter 0.25s ease-in;
}
.layout-filters-wrapper{
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 20px;
    animation: fadeSlideIn 0.25s ease-in;
}
#insights-output{
    animation: fadeSlideIn 0.25s ease-in;
}


/* Selected tab animation */
@keyframes tabPop {
    0% {
        transform: scale(0.95);
    }
    60% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
        transform: translateY(-8px);
    }
}


/* =========================
   TAB CONTENT
   ========================= */

/* Tab content wrapper */
.tab-content {
    animation: fadeSlideIn 0.35s ease-in;
}

/* Tab content entrance animation */
@keyframes fadeSlideIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Tab content entrance animation */
@keyframes fadeSlideOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-12px);
    }
}
/* Subcomponent content entrance animation */
@keyframes SubcomponentEnter {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* Dashboard entrance animation */
.dashboard-enter {
    animation: dashboardEnter .3s cubic-bezier(.2,.8,.2,1);
  }
  
  @keyframes dashboardEnter {
    from {
      opacity:0;
      transform:translateY(10px) scale(.98);
    }
    to {
      opacity:1;
      transform:translateY(0) scale(1);
    }
  }