/* =========================================================
   ROOT VARIABLES
========================================================= */

:root{

    /* =========================
       COLORS
    ========================= */
    --dashboard-primary: #198754;
    --dashboard-primary-dark: #157347;

    --dashboard-white: #ffffff;
    --dashboard-black: #000000;
    --dashboard-gray-light: rgba(245, 245, 245, 1);

    --dashboard-text: #111827;
    --dashboard-text-light: #1f2937;
    --dashboard-muted: #6b7280;

    --dashboard-border: #d1d5db;
    --dashboard-border-light: #e5e7eb;

    --dashboard-bg-soft: #f9fafb;

    --dashboard-danger: #ff4d4f;

    /* =========================
       GRADIENTS
    ========================= */
    --dashboard-banner-gradient:
        linear-gradient(
            rgba(20, 122, 68, 0.92),
            rgba(20, 122, 68, 0.92)
        );

    --dashboard-overlay-gradient:
        linear-gradient(
            90deg,
            rgba(0,0,0,0.10),
            rgba(0,0,0,0.04)
        );

    --dashboard-glow-gradient:
        radial-gradient(
            circle,
            rgba(255,255,255,0.12) 0%,
            transparent 70%
        );

    /* =========================
       TYPOGRAPHY
    ========================= */
    --dashboard-font-main: "Inter", sans-serif;

    --dashboard-fw-medium: 500;
    --dashboard-fw-semibold: 600;
    --dashboard-fw-bold: 700;

    --dashboard-title-xl: 64px;
    --dashboard-title-lg: 54px;
    --dashboard-title-md: 44px;
    --dashboard-title-sm: 36px;
    --dashboard-title-xs: 30px;

    --dashboard-text-lg: 20px;
    --dashboard-text-md: 17px;
    --dashboard-text-sm: 16px;
    --dashboard-text-xs: 15px;

    /* =========================
       SPACING
    ========================= */
    --dashboard-container-padding: 20px;

    --dashboard-gap-xs: 10px;
    --dashboard-gap-sm: 12px;
    --dashboard-gap-md: 16px;
    --dashboard-gap-lg: 18px;
    --dashboard-gap-xl: 24px;
    --dashboard-gap-2xl: 28px;
    --dashboard-gap-3xl: 40px;

    /* =========================
       RADIUS
    ========================= */
    --dashboard-radius-sm: 10px;
    --dashboard-radius-md: 12px;
    --dashboard-radius-lg: 14px;
    --dashboard-radius-xl: 18px;
    --dashboard-radius-2xl: 24px;
    --dashboard-radius-pill: 999px;

    /* =========================
       SHADOWS
    ========================= */
    --dashboard-shadow-soft:
        0 10px 40px rgba(0,0,0,0.06);

    --dashboard-shadow-nav:
        0 12px 30px rgba(0,0,0,0.08);

    --dashboard-shadow-dropdown:
        0 20px 50px rgba(0,0,0,0.12);

    /* =========================
       TRANSITIONS
    ========================= */
    --dashboard-transition:
        all 0.3s ease;

    --dashboard-transition-slow:
        all 0.5s ease;

    /* =========================
       GLASS EFFECT
    ========================= */
    --dashboard-glass-bg:
        rgba(255,255,255,0.12);

    --dashboard-glass-hover:
        rgba(255,255,255,0.22);

    --dashboard-glass-border:
        rgba(255,255,255,0.15);

    --dashboard-backdrop-blur: blur(10px);

    /* =========================
       Z-INDEX
    ========================= */
    --dashboard-z-negative-overlay: -1;    
    --dashboard-z-overlay: 1;
    --dashboard-z-content: 2;
    --dashboard-z-header: 999;

    /* =========================
       PARTICLE EFFECTS
    ========================= */
    --dashboard-particle-size-1: 180px;
    --dashboard-particle-size-2: 260px;

    --dashboard-particle-opacity: 0.10;

    /* =========================
       RESPONSIVE
    ========================= */
    --dashboard-breakpoint-xl: 1399px;
    --dashboard-breakpoint-lg: 1199px;
    --dashboard-breakpoint-md: 991px;
    --dashboard-breakpoint-sm: 767px;
    --dashboard-breakpoint-xs: 575px;
}

/* =========================================================
   GLOBAL
========================================================= */

.container-dashboard{
    max-width: 1840px;
    margin: 0 auto;
    padding: 0 var(--dashboard-container-padding);
    box-sizing: border-box;
}

.customer-dashboard-banner{
    position: relative;
    overflow: hidden;

    background:
        var(--dashboard-banner-gradient),
        url('../images/dashboard-banner.png');

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    min-height: 320px;
    isolation: isolate;
}

.dashboard-content-area{
    background-color: var(--dashboard-gray-light);
}

/* Tab switch: keep previous content visible, light dim + fast transition */
#dashboard-content-area.dashboard-tab-loading,
.dashboard-morph-content.dashboard-tab-loading{
    opacity: 0.72;
    pointer-events: none;
    transition: opacity 0.12s ease-out;
}

#dashboard-content-area.dashboard-tab-loading{
    position: relative;
}

#dashboard-content-area.dashboard-tab-loading::after{
    content: "";
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 1.75rem;
    height: 1.75rem;
    border: 0.2rem solid rgba(25, 135, 84, 0.25);
    border-top-color: #198754;
    border-radius: 50%;
    animation: dashboard-tab-spin 0.55s linear infinite;
    z-index: 5;
    pointer-events: none;
}

@keyframes dashboard-tab-spin{
    to{
        transform: rotate(360deg);
    }
}

/* =========================================================
   PARTICLE EFFECTS
========================================================= */

.customer-dashboard-banner::before,
.customer-dashboard-banner::after{
    content: "";
    position: absolute;
    border-radius: 50%;
    background: var(--dashboard-glow-gradient);
    opacity: var(--dashboard-particle-opacity);
    z-index: 0;
    animation: floatingParticles 12s infinite ease-in-out;
}

.customer-dashboard-banner::before{
    width: var(--dashboard-particle-size-1);
    height: var(--dashboard-particle-size-1);
    top: -60px;
    right: 8%;
}

.customer-dashboard-banner::after{
    width: var(--dashboard-particle-size-2);
    height: var(--dashboard-particle-size-2);
    bottom: -100px;
    left: 5%;
    animation-delay: 2s;
}

@keyframes floatingParticles{

    0%{
        transform: translateY(0px) rotate(0deg);
    }

    50%{
        transform: translateY(-20px) rotate(8deg);
    }

    100%{
        transform: translateY(0px) rotate(0deg);
    }
}

/* =========================================================
   OVERLAY
========================================================= */

.dashboard-banner-overlay{
    position: absolute;
    inset: 0;
    background: var(--dashboard-overlay-gradient);
    z-index: var(--dashboard-z-negative-overlay);
}

/* =========================================================
   HEADER
========================================================= */

.customer-dashboard-header{
    position: relative;
    z-index: var(--dashboard-z-header);
    padding: 18px 0;
}

.dashboard-header-wrapper{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--dashboard-gap-xl);
}

/* =========================================================
   LOGO
========================================================= */

.dashboard-logo{
    flex-shrink: 0;
}

.dashboard-logo img{
    height: 80px;
    object-fit: contain;
    display: block;
}

/* =========================================================
   NAVIGATION
========================================================= */

.dashboard-navigation{
    display: flex;
    align-items: center;
    gap: var(--dashboard-gap-2xl);

    background: var(--dashboard-white);

    padding: 10px 26px;

    border-radius: var(--dashboard-radius-pill);

    box-shadow: var(--dashboard-shadow-nav);

    position: relative;
    overflow: hidden;
}

.dashboard-navigation::before{
    content: "";
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            120deg,
            rgba(255,255,255,0.4),
            transparent
        );

    pointer-events: none;
}

.dashboard-nav-link{
    position: relative;

    text-decoration: none;

    color: var(--dashboard-text-light);

    font-size: 14px;
    font-weight: var(--dashboard-fw-medium);

    transition: var(--dashboard-transition);

    white-space: nowrap;
}

.dashboard-nav-link:hover,
.dashboard-nav-link.active{
    color: var(--dashboard-primary);
}

.dashboard-nav-link:hover::after,
.dashboard-nav-link.active::after{
    width: 100%;
}

/* =========================================================
   ACTIONS
========================================================= */

.dashboard-header-actions{
    display: flex;
    align-items: center;
    gap: var(--dashboard-gap-lg);
}

/* =========================================================
   NOTIFICATION
========================================================= */

.notification-btn{
    position: relative;

    width: 42px;
    height: 42px;

    border: 1px solid var(--dashboard-glass-border);

    background: var(--dashboard-glass-bg);

    border-radius: 50%;

    color: var(--dashboard-white);

    font-size: 16px;

    transition: var(--dashboard-transition);

    backdrop-filter: var(--dashboard-backdrop-blur);
}

.notification-btn:hover{
    background: var(--dashboard-glass-hover);
    transform: translateY(-2px);
}

.notification-dot{
    position: absolute;

    top: 9px;
    right: 10px;

    width: 8px;
    height: 8px;

    background: var(--dashboard-danger);

    border-radius: 50%;

    border: 2px solid var(--dashboard-white);
}

/* =========================================================
   USER DROPDOWN
========================================================= */

.dashboard-user-dropdown{
    display: flex;
    align-items: center;
    gap: var(--dashboard-gap-sm);

    border: none;
    background: transparent;
    padding: 0;

    color: var(--dashboard-white);
}

.dashboard-user-dropdown::after{
    display: none;
}

.dashboard-user-avatar img{
    width: 46px;
    height: 46px;

    border-radius: 50%;

    object-fit: cover;

    border: 2px solid rgba(255,255,255,0.4);

    transition: var(--dashboard-transition);
}

.dashboard-user-avatar img:hover{
    transform: scale(1.05);
}

.dashboard-user-info{
    text-align: left;
}

.dashboard-user-info h6{
    margin: 0;

    font-size: 14px;
    font-weight: var(--dashboard-fw-semibold);

    color: var(--dashboard-white);
}

.dashboard-user-info span{
    display: block;

    margin-top: 2px;

    font-size: 12px;

    color: rgba(255,255,255,0.75);
}

/* =========================================================
   DROPDOWN MENU
========================================================= */

.dashboard-user-menu{
    min-width: 230px;

    border: none;

    border-radius: var(--dashboard-radius-xl);

    padding: 10px;

    box-shadow: var(--dashboard-shadow-dropdown);
}

.dashboard-user-menu .dropdown-item{
    display: flex;
    align-items: center;
    gap: var(--dashboard-gap-sm);

    border-radius: var(--dashboard-radius-sm);

    padding: 12px 14px;

    font-size: 14px;
    font-weight: var(--dashboard-fw-medium);

    transition: var(--dashboard-transition);
}

.dashboard-user-menu .dropdown-item:hover{
    background: #f3f4f6;
    color: var(--dashboard-primary);
}

/* =========================================================
   HERO
========================================================= */

.dashboard-hero-section{
    position: relative;
    z-index: var(--dashboard-z-content);

    padding: 48px 0 60px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: var(--dashboard-gap-3xl);
}

.dashboard-hero-content{
    max-width: 700px;
}

.dashboard-page-title{
    font-size: var(--dashboard-title-xl);
    font-weight: var(--dashboard-fw-bold);

    line-height: 1.1;

    color: var(--dashboard-white);

    margin-bottom: 18px;
}

.dashboard-page-description{
    font-size: var(--dashboard-text-lg);

    line-height: 1.7;

    color: rgba(255,255,255,0.88);

    margin: 0;
}

/* =========================================================
   BUTTONS
========================================================= */

.dashboard-hero-actions{
    display: flex;
    align-items: center;
    gap: var(--dashboard-gap-md);
}

.dashboard-primary-btn,
.dashboard-outline-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 16px 32px;

    border-radius: var(--dashboard-radius-md);

    text-decoration: none;

    font-size: 15px;
    font-weight: var(--dashboard-fw-semibold);

    transition: var(--dashboard-transition);

    position: relative;
    overflow: hidden;
}

.dashboard-primary-btn{
    background: var(--dashboard-white);
    color: var(--dashboard-text);
}

.dashboard-primary-btn:hover{
    transform: translateY(-3px);
    color: var(--dashboard-primary);
}

.dashboard-outline-btn{
    border: 1px solid rgba(255,255,255,0.4);
    color: var(--dashboard-white);
}

.dashboard-outline-btn:hover{
    background: var(--dashboard-white);
    color: var(--dashboard-primary);
}

/* =========================================================
   MOBILE TOGGLE
========================================================= */

.mobile-menu-toggle{
    width: 44px;
    height: 44px;

    border: none;

    background: var(--dashboard-glass-bg);

    border-radius: var(--dashboard-radius-md);

    color: var(--dashboard-white);

    font-size: 18px;

    transition: var(--dashboard-transition);

    backdrop-filter: var(--dashboard-backdrop-blur);
}

.mobile-menu-toggle:hover{
    background: var(--dashboard-glass-hover);
}

/* =========================================================
   MOBILE SIDEBAR
========================================================= */

.customer-mobile-sidebar{
    width: 320px !important;
    border: none;
}

.customer-mobile-sidebar .offcanvas-header{
    padding: 22px 20px;
    border-bottom: 1px solid var(--dashboard-border-light);
}

.customer-mobile-sidebar .offcanvas-body{
    padding: 20px;
}

/* =========================================================
   MOBILE NAVIGATION
========================================================= */

.mobile-dashboard-navigation{
    display: flex;
    flex-direction: column;
    gap: var(--dashboard-gap-xs);
}

.mobile-dashboard-link{
    display: flex;
    align-items: center;
    gap: 14px;

    padding: 14px 16px;

    border-radius: var(--dashboard-radius-lg);

    text-decoration: none;

    color: var(--dashboard-text-light);

    font-size: 14px;
    font-weight: var(--dashboard-fw-medium);

    transition: var(--dashboard-transition);
}

.mobile-dashboard-link:hover,
.mobile-dashboard-link.active{
    background: var(--dashboard-primary);
    color: var(--dashboard-white);
}

/* =========================================================
   DASHBOARD CARD
========================================================= */

.dashboard-card{
    background: var(--dashboard-white);

    border-radius: var(--dashboard-radius-2xl);

    padding: 30px;

    box-shadow: var(--dashboard-shadow-soft);

    height: 100%;
}

/* =========================================================
   INPUTS
========================================================= */

.dashboard-input,
.dashboard-textarea{
    width: 100%;

    border: 1px solid var(--dashboard-border);

    border-radius: var(--dashboard-radius-lg);

    padding: 14px 18px;

    background: var(--dashboard-white);

    transition: var(--dashboard-transition);
}

.dashboard-input:focus,
.dashboard-textarea:focus{
    border-color: var(--dashboard-primary);

    box-shadow:
        0 0 0 4px rgba(25,135,84,0.10);

    outline: none;
}

.customer-dashboard-banner.sticky-active .profile-hero-health-card .profile-health-progress {
    display: none;
}
.customer-dashboard-banner.sticky-active .profile-hero-avatar img {
    width: 60px;
    height: 60px;
}
.customer-dashboard-banner.sticky-active .profile-hero-avatar span.profile-status-indicator {
    right: 0;
    bottom: 0;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1399px){

    .dashboard-navigation{
        gap: 20px;
    }

    .dashboard-page-title{
        font-size: var(--dashboard-title-lg);
    }
}

@media (max-width: 1199px){

    .dashboard-navigation{
        display: none !important;
    }

    .dashboard-hero-section{
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 991px){

    .dashboard-page-title{
        font-size: var(--dashboard-title-md);
    }

    .dashboard-page-description{
        font-size: var(--dashboard-text-md);
    }
}

@media (max-width: 767px){

    .customer-dashboard-header{
        padding: 14px 0;
    }

    .dashboard-logo img{
        height: 46px;
    }

    .dashboard-header-actions{
        gap: var(--dashboard-gap-sm);
    }

    .dashboard-hero-section{
        padding: 36px 0 48px;
    }

    .dashboard-page-title{
        font-size: var(--dashboard-title-sm);
    }

    .dashboard-page-description{
        font-size: var(--dashboard-text-sm);
    }

    .dashboard-hero-actions{
        width: 100%;
        /* display: none; */
        flex-direction: column;
        align-items: stretch;
    }
}

@media (max-width: 575px){

    .customer-dashboard-banner{
        min-height: auto;
    }

    .dashboard-logo img{
        height: 40px;
    }

    .dashboard-page-title{
        font-size: var(--dashboard-title-xs);
    }

    .dashboard-page-description{
        font-size: var(--dashboard-text-xs);
    }

    .dashboard-primary-btn,
    .dashboard-outline-btn{
        width: 100%;
    }
    .customer-dashboard-banner.sticky-active .dashboard-hero-actions{
        display: none;
    }
    .customer-dashboard-banner.sticky-active .morph-title{
        margin-bottom: 10px;
    }
}



/* Morph State (Base Banner) */
.customer-dashboard-banner{
    position: relative;

    min-height: 240px;

    overflow: hidden;

    transition:
        min-height 0.45s cubic-bezier(0.22,1,0.36,1),
        background 0.45s cubic-bezier(0.22,1,0.36,1);

    will-change:
        min-height,
        backdrop-filter,
        background;
}

/* Morph State (Sticky State) */
.customer-dashboard-banner.sticky-active{

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    min-height: 82px;

    z-index: 9999;

    background:
        rgba(20, 122, 68, 0.78);

    backdrop-filter: blur(18px);

    box-shadow:
        0 12px 30px rgba(0,0,0,0.10);

    border-bottom:
        1px solid rgba(255,255,255,0.08);

    overflow: visible;    
}

/* Morph Wrapper */
.dashboard-morph-content{

    transition:
        all 0.45s cubic-bezier(0.22,1,0.36,1);

    will-change:
        transform,
        opacity;
}

/* Hero Compression */
.customer-dashboard-banner.sticky-active
.dashboard-hero-section{

    padding: 0;

    min-height: 0;

    align-items: center;
}

/* Title Morphing */
.morph-title{

    transition:
        font-size 0.45s cubic-bezier(0.22,1,0.36,1),
        transform 0.45s cubic-bezier(0.22,1,0.36,1),
        margin 0.45s cubic-bezier(0.22,1,0.36,1);

    transform-origin: left center;
}

.customer-dashboard-banner.sticky-active
.morph-title{

    font-size: 26px;
    transform: translateY(-2px);
}

/* Description Fade */
.dashboard-page-description{

    transition:
        opacity 0.35s ease,
        transform 0.35s ease,
        max-height 0.35s ease;

    max-height: 120px;
}
.customer-dashboard-banner.sticky-active
.dashboard-page-description{

    opacity: 0;

    transform: translateY(-10px);

    max-height: 0;

    overflow: hidden;
}

/* CTA Fade Out */
.dashboard-hero-actions{

    transition:
        opacity 0.35s ease,
        transform 0.35s ease;
}
.customer-dashboard-banner.sticky-active
.dashboard-hero-actions{

    opacity: 0;

    pointer-events: none;

    transform: translateY(-12px);
}

/* Header Compression */
.customer-dashboard-banner.sticky-active
.customer-dashboard-header{

    padding: 10px 0;
}

/* Logo Shrink */
.dashboard-logo img{

    transition:
        height 0.45s cubic-bezier(0.22,1,0.36,1);
}
.customer-dashboard-banner.sticky-active
.dashboard-logo img{

    height: 40px;
}

/* Nav Compression */
.dashboard-navigation{

    transition:
        padding 0.45s cubic-bezier(0.22,1,0.36,1),
        gap 0.45s cubic-bezier(0.22,1,0.36,1),
        transform 0.45s cubic-bezier(0.22,1,0.36,1);
}
.customer-dashboard-banner.sticky-active
.dashboard-navigation{

    padding: 8px 20px;

    gap: 18px;

    transform: translateY(-1px);
}

.dashboard-banner-spacer{
    height: 0px;
}
.dashboard-banner-spacer.active{
    height: 300px;
}