/* =========================================================
   BABILCO SOLAR WEALTH DASHBOARD
   PROFESSIONAL INVESTMENT UI
   PART 1/3
========================================================= */

/* =========================================================
   RESET
========================================================= */

*,
*::before,
*::after{
    box-sizing:border-box;
    margin:0;
    padding:0;
}

html{
    scroll-behavior:smooth;
}

body.sw-body{

    min-height:100vh;

    background:
    radial-gradient(circle at top left,#17243d 0%,#070b14 40%),
    #070b14;

    color:#edf3ff;

    font-family:
    "Segoe UI",
    Tahoma,
    sans-serif;

    overflow-x:hidden;
}


/* =========================================================
   SCROLLBAR
========================================================= */

::-webkit-scrollbar{
    width:8px;
    height:8px;
}

::-webkit-scrollbar-track{
    background:#0c1322;
}

::-webkit-scrollbar-thumb{
    background:#2a3b5f;
    border-radius:20px;
}

::-webkit-scrollbar-thumb:hover{
    background:#3d5788;
}


/* =========================================================
   NAVBAR
========================================================= */

.sw-navbar{

    height:70px;

    background:
    rgba(12,19,34,.85);

    backdrop-filter:blur(16px);

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

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 24px;

    position:sticky;

    top:0;

    z-index:500;
}

.sw-nav-logo{

    color:#fff;

    text-decoration:none;

    font-size:22px;

    font-weight:700;

    letter-spacing:.5px;
}

.sw-nav-user{

    color:#9fb3d9;

    font-size:14px;
}

.sw-nav-menu{

    background:#131f36;

    border:1px solid #263756;

    border-radius:14px;
}


/* =========================================================
   MAIN CONTAINER
========================================================= */

.sw-container{

    width:100%;

    max-width:1600px;

    margin:auto;

    padding:24px 24px 100px;
}


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

.sw-portfolio{

    position:relative;

    overflow:hidden;

    border-radius:26px;

    padding:30px;

    margin-bottom:24px;

    background:
    linear-gradient(
    135deg,
    rgba(24,39,66,.95),
    rgba(11,18,32,.95)
    );

    border:
    1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(20px);

    box-shadow:
    0 15px 40px rgba(0,0,0,.25);
}

.sw-portfolio::before{

    content:"";

    position:absolute;

    width:300px;
    height:300px;

    right:-100px;
    top:-100px;

    border-radius:50%;

    background:
    radial-gradient(
    circle,
    rgba(46,204,113,.18),
    transparent 70%
    );
}

.sw-label{

    color:#93a7cc;

    font-size:13px;

    text-transform:uppercase;

    letter-spacing:1px;
}

.sw-portfolio h2{

    font-size:42px;

    font-weight:700;

    margin-top:10px;
    margin-bottom:24px;
}

.sw-growth{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    margin-top:20px;

    padding:8px 14px;

    border-radius:999px;

    background:
    rgba(46,204,113,.15);

    color:#79ffad;

    font-weight:600;

    font-size:13px;
}

.sw-portfolio-grid{

    display:grid;

    grid-template-columns:
    repeat(3,minmax(0,1fr));

    gap:18px;
}

.sw-portfolio-grid div{

    background:
    rgba(8,14,25,.75);

    border:
    1px solid rgba(255,255,255,.05);

    border-radius:18px;

    padding:18px;
}

.sw-portfolio-grid span{

    color:#8fa3c7;

    display:block;

    font-size:13px;

    margin-bottom:10px;
}

.sw-portfolio-grid strong{

    font-size:24px;

    font-weight:700;

    color:#fff;
}


/* =========================================================
   WALLET
========================================================= */

.sw-wallet{

    background:
    rgba(16,25,44,.92);

    border:
    1px solid rgba(255,255,255,.07);

    border-radius:24px;

    padding:24px;

    margin-bottom:24px;

    backdrop-filter:blur(16px);
}

.sw-wallet-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:22px;
}

.sw-wallet-header h4{

    font-size:20px;

    font-weight:600;
}

.sw-wallet-header span{

    font-size:24px;

    font-weight:700;

    color:#79ffad;
}

.sw-wallet-grid{

    display:grid;

    grid-template-columns:
    repeat(2,minmax(0,1fr));

    gap:18px;
}

.sw-wallet-item{

    background:
    rgba(8,14,25,.75);

    border:
    1px solid rgba(255,255,255,.05);

    border-radius:18px;

    padding:18px;
}

.sw-wallet-item span{

    display:block;

    color:#8fa3c7;

    font-size:13px;

    margin-bottom:10px;
}

.sw-wallet-item strong{

    font-size:24px;

    color:#fff;
}


/* =========================================================
   ACCOUNT STATUS
========================================================= */

.sw-status-card{

    background:
    rgba(16,25,44,.92);

    border:
    1px solid rgba(255,255,255,.07);

    border-radius:24px;

    padding:24px;

    margin-bottom:24px;
}

.sw-status-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:8px 16px;

    border-radius:999px;

    font-size:13px;

    font-weight:700;
}

.sw-status-badge.active{

    background:
    rgba(46,204,113,.18);

    color:#7effb4;
}

#accountStatusText{

    margin-top:14px;

    color:#b5c5e4;

    line-height:1.6;
}


/* =========================================================
   INVESTMENT JOURNEY
========================================================= */

.sw-journey{

    background:
    rgba(16,25,44,.92);

    border:
    1px solid rgba(255,255,255,.07);

    border-radius:24px;

    padding:24px;

    margin-bottom:28px;
}

.sw-journey-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:20px;
}

.sw-journey-header h4{

    font-size:20px;
}

#journeyPercent{

    color:#79ffad;

    font-weight:700;
}

.sw-journey-progress{

    height:10px;

    background:#202b43;

    border-radius:999px;

    overflow:hidden;

    margin-bottom:24px;
}

.sw-journey-progress-bar{

    height:100%;

    width:0;

    transition:.5s ease;

    background:
    linear-gradient(
    90deg,
    #2ecc71,
    #79ffad
    );
}
/* =========================================================
   SOLAR ASSETS SECTION
   PART 2/3
========================================================= */

.sw-assets{

    margin-top:30px;
}

.sw-assets-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:20px;
}

.sw-assets-header h4{

    font-size:22px;

    font-weight:700;
}

.sw-assets-header span{

    color:#8fa3c7;
}


/* =========================================================
   CARD GRID
========================================================= */

.sw-assets-wrapper{

    display:grid;

    grid-template-columns:
    repeat(auto-fill,minmax(380px,1fr));

    gap:24px;
}


/* =========================================================
   SOLAR CARD
========================================================= */

.solar-card{

    position:relative;

    display:flex;

    flex-direction:column;

    min-height:580px;

    border-radius:26px;

    padding:24px;

    overflow:hidden;

    background:
    linear-gradient(
    145deg,
    rgba(15,23,42,.96),
    rgba(8,14,25,.96)
    );

    border:
    1px solid rgba(255,255,255,.06);

    transition:
    transform .25s ease,
    box-shadow .25s ease;

    backdrop-filter:blur(16px);
}

.solar-card:hover{

    transform:translateY(-4px);
}


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

.solar-card-header{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:12px;

    margin-bottom:22px;
}

.solar-card-header h4{

    margin:0;

    font-size:20px;

    font-weight:700;

    color:#fff;
}

.solar-card-header span{

    color:#8fa3c7;

    font-size:13px;
}


/* =========================================================
   STATUS BADGE
========================================================= */

.status-badge{

    white-space:nowrap;

    padding:8px 14px;

    border-radius:999px;

    font-size:12px;

    font-weight:700;

    letter-spacing:.5px;
}


/* =========================================================
   STATUS COLORS
========================================================= */

.status-badge.pending{

    background:#123e63;

    color:#7ec8ff;
}

.status-badge.reject{

    background:#5f1919;

    color:#ff8c8c;
}

.status-badge.active{

    background:#124d2e;

    color:#81ffb3;
}

.status-badge.income-ready{

    background:#5c4300;

    color:#ffd166;
}

.status-badge.income-pending{

    background:#665100;

    color:#ffe082;
}

.status-badge.withdraw-complete{

    background:#0d5b63;

    color:#7cefff;
}

.status-badge.sale-pending{

    background:#4a2166;

    color:#d6a5ff;
}

.status-badge.sold{

    background:#6b5600;

    color:#ffd95f;
}


/* =========================================================
   CARD GLOW STATES
========================================================= */

.solar-card.pending{

    box-shadow:
    0 0 30px rgba(52,152,219,.18);
}

.solar-card.reject{

    box-shadow:
    0 0 30px rgba(231,76,60,.22);
}

.solar-card.active{

    box-shadow:
    0 0 30px rgba(46,204,113,.18);
}

.solar-card.income-ready{

    box-shadow:
    0 0 30px rgba(255,193,7,.20);
}

.solar-card.income-pending{

    box-shadow:
    0 0 30px rgba(255,214,102,.18);
}

.solar-card.withdraw-complete{

    box-shadow:
    0 0 30px rgba(0,188,212,.18);
}

.solar-card.sale-pending{

    box-shadow:
    0 0 30px rgba(155,89,182,.22);
}

.solar-card.sold{

    background:
    linear-gradient(
    145deg,
    rgba(50,40,0,.95),
    rgba(20,16,0,.95)
    );

    border-color:
    rgba(255,215,0,.25);
}



/* =========================================================
   CARD INFO BLOCK
========================================================= */

.solar-card-fixed{

    display:grid;

    grid-template-columns:
    repeat(3,1fr);

    gap:12px;

    margin-bottom:26px;
}

.solar-card-fixed div{

    background:
    rgba(255,255,255,.03);

    border:
    1px solid rgba(255,255,255,.05);

    border-radius:14px;

    padding:14px;
}

.solar-card-fixed span{

    display:block;

    color:#8fa3c7;

    font-size:12px;

    margin-bottom:6px;
}

.solar-card-fixed strong{

    color:#fff;

    font-size:18px;
}


/* =========================================================
   PANEL LIFE CYCLE
========================================================= */

.life-cycle{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:6px;

    margin-bottom:24px;

    position:relative;
}

.life-step{

    flex:1;

    position:relative;

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;
}

.life-step:not(:last-child)::after{

    content:"";

    position:absolute;

    top:7px;

    left:55%;

    width:100%;

    height:2px;

    background:#334155;
}

.life-step span{

    width:14px;
    height:14px;

    border-radius:50%;

    z-index:2;
}

.life-step label{

    margin-top:10px;

    font-size:10px;

    color:#b5c5e4;

    line-height:1.4;
}


/* STATES */

.life-step.done span{

    background:#2ecc71;

    box-shadow:
    0 0 12px #2ecc71;
}

.life-step.current span{

    background:#3498db;

    box-shadow:
    0 0 14px #3498db;
}

.life-step.future span{

    background:#566273;
}

.life-step.sold span{

    background:#ffd700;

    box-shadow:
    0 0 16px #ffd700;
}

.life-step.rejected span{
    
    /*background:#3498db;*/

    background:#ef4444;
    
    box-shadow:
    0 0 14px #3498db;

    

    border-color:#ef4444;
}

.life-step.rejected label{

    color:#ef4444;

    font-weight:600;
}



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

.panel-actions{

    display:flex;

    gap:10px;

    /*margin-top:auto;*/

    margin-bottom:14px;
}

.panel-btn{

    flex:1;

    border:none;

    border-radius:14px;

    padding:12px;

    cursor:pointer;

    font-weight:700;

    transition:.25s;

    color:#fff;
}

.panel-btn:hover:not(:disabled){

    transform:translateY(-2px);
}

.panel-btn:disabled{

    opacity:.45;

    cursor:not-allowed;
}

/* دکمه فعال */

.panel-btn.primary-action{

    opacity:100 ;
    filter:saturate(.99);
    
    transform:scale(1.04);
    box-shadow: 0 0 25px rgba(255,193,7,.45);
}
.solar-card.action-focus{

    opacity:100;
    filter:saturate(.7);
}



/* Withdraw */

.panel-btn.income{

    background:
    linear-gradient(
    135deg,
    #d68910,
    #f1c40f
    );

    color:#111;
}

/* Sale */

.panel-btn.sale{

    background:
    linear-gradient(
    135deg,
    #7d3c98,
    #bb6bd9
    );
}


/* =========================================================
   EXPAND BUTTON
========================================================= */

.expand-btn{

    width:100%;

    border:none;

    border-radius:14px;

    padding:12px;

    background:#1a2945;

    color:#d9e7ff;

    font-weight:600;

    transition:.25s;
}

.expand-btn:hover{

    background:#27406a;
}


/* =========================================================
   COLLAPSE AREA
========================================================= */

.collapse-area{

    max-height:0;

    opacity:0;

    overflow:hidden;

    transition:
    max-height .35s ease,
    opacity .35s ease;

    background:
    rgba(255,255,255,.03);

    border-radius:16px;

    margin-top:0;
}

.collapse-area.show{

    max-height:500px;

    opacity:1;

    margin-top:16px;

    padding:16px;
}

.collapse-area p{

    margin-bottom:10px;

    color:#c8d6ef;

    font-size:13px;
}


/* =========================================================
   REJECT BOX
========================================================= */

.reject-box{

    margin-top:14px;

    border-radius:12px;

    padding:14px;

    background:
    rgba(231,76,60,.12);

    border:
    1px solid rgba(231,76,60,.35);

    color:#ff9d9d;

    line-height:1.6;
}
/* =========================================================
   PART 3/3
   FOOTER + RESPONSIVE + MOBILE
========================================================= */


/* =========================================================
   NEXT ACTION
========================================================= */

.sw-next-action{

    margin-bottom:28px;
}

.sw-buy-card{

    background:
    linear-gradient(
    135deg,
    rgba(31,111,235,.18),
    rgba(46,204,113,.12)
    );

    border:
    1px solid rgba(255,255,255,.08);

    border-radius:24px;

    padding:24px;

    backdrop-filter:blur(12px);
}

.sw-buy-card h4{

    margin-bottom:10px;

    font-size:22px;

    font-weight:700;
}

.sw-buy-card p{

    color:#b7c8e7;

    line-height:1.7;
}


/* =========================================================
   JOURNEY STEPS
========================================================= */

#journeyContainer{

    display:flex;

    align-items:flex-start;

    justify-content:space-between;

    gap:12px;

    overflow-x:auto;

    padding-bottom:10px;
}

.journey-step{

    min-width:160px;

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

    position:relative;
}

.journey-step span{

    width:18px;

    height:18px;

    border-radius:50%;

    margin-bottom:10px;
}

.journey-step.done span{

    background:#2ecc71;

    box-shadow:
    0 0 15px #2ecc71;
}

.journey-step.pending span{

    background:#4c5b74;
}

.journey-step label{

    color:#d9e5fb;

    font-size:13px;

    line-height:1.5;
}

.journey-step small{

    display:block;

    margin-top:8px;

    color:#8fa3c7;

    font-size:11px;
}


/* =========================================================
   FOOTER
========================================================= */

.sw-footer{

    position:fixed;

    left:0;
    right:0;
    bottom:0;

    height:72px;

    z-index:999;

    display:flex;

    align-items:center;

    justify-content:space-around;

    background:
    rgba(11,18,32,.96);

    backdrop-filter:blur(18px);

    border-top:
    1px solid rgba(255,255,255,.08);
}

.sw-footer a{

    flex:1;

    height:100%;

    text-decoration:none;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:5px;

    color:#8398be;

    transition:.25s;
}

.sw-footer a i{

    font-size:20px;
}

.sw-footer a span{

    font-size:11px;

    font-weight:600;
}

.sw-footer a:hover{

    color:#ffffff;
}

.sw-footer a.active{

    color:#7effb4;
}

.sw-footer a.active i{

    text-shadow:
    0 0 12px rgba(46,204,113,.7);
}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes fadeUp{

    from{

        opacity:0;

        transform:
        translateY(20px);
    }

    to{

        opacity:1;

        transform:
        translateY(0);
    }
}

.solar-card{

    animation:
    fadeUp .35s ease;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width:1200px){

    .sw-assets-wrapper{

        grid-template-columns:
        repeat(2,minmax(0,1fr));
    }

    .sw-portfolio-grid{

        grid-template-columns:
        repeat(3,minmax(0,1fr));
    }
}


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

@media (max-width:768px){

    .sw-container{

        padding:
        14px
        14px
        95px;
    }

    .sw-navbar{

        padding:0 14px;
    }

    .sw-nav-logo{

        font-size:18px;
    }

    /* HERO */

    .sw-portfolio{

        padding:20px;
    }

    .sw-portfolio h2{

        font-size:28px;
    }

    .sw-portfolio-grid{

        grid-template-columns:1fr;
    }

    /* WALLET */

    .sw-wallet-grid{

        grid-template-columns:1fr;
    }

    .sw-wallet-header{

        flex-direction:column;

        align-items:flex-start;

        gap:8px;
    }

    .sw-wallet-header span{

        font-size:20px;
    }

    /* ASSETS */

    .sw-assets-wrapper{

        grid-template-columns:1fr;
    }

    .solar-card{

        min-height:auto;

        padding:18px;
    }

    .solar-card-header{

        flex-direction:column;

        align-items:flex-start;

        gap:12px;
    }

    .solar-card-fixed{

        grid-template-columns:1fr;
    }

    /* TIMELINE */

    .life-cycle{

        overflow-x:auto;

        justify-content:flex-start;

        padding-bottom:6px;
    }

    .life-step{

        min-width:90px;
    }

    .life-step label{

        font-size:10px;
    }

    /* ACTIONS */

    .panel-actions{

        flex-direction:column;
    }

    .panel-btn{

        width:100%;
    }

    .expand-btn{

        width:100%;
    }

    /* JOURNEY */

    #journeyContainer{

        justify-content:flex-start;
    }

    .journey-step{

        min-width:130px;
    }

    /* FOOTER */

    .sw-footer{

        height:68px;
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width:480px){

    .sw-portfolio h2{

        font-size:24px;
    }

    .sw-assets-header{

        flex-direction:column;

        align-items:flex-start;

        gap:8px;
    }

    .solar-card-header h4{

        font-size:18px;
    }

    .status-badge{

        font-size:11px;
    }

    .sw-wallet-item strong,
    .sw-portfolio-grid strong{

        font-size:20px;
    }
}


/* =========================================================
   UTILITIES
========================================================= */

.text-success{

    color:#7effb4 !important;
}

.text-warning{

    color:#ffd166 !important;
}

.text-danger{

    color:#ff8c8c !important;
}

.text-info{

    color:#7cefff !important;
}

.hidden{

    display:none !important;
}

/* =========================================================
   PAYMENT STATES
========================================================= */

.solar-card.payment-pending{
    border-color:#2b6cb0;
    box-shadow:0 0 35px rgba(66,153,225,.25);
}

.solar-card.rejected{
    border-color:#c53030;
    box-shadow:0 0 35px rgba(245,101,101,.25);
}

.payment-warning{
    margin:16px 0;
    padding:14px;
    border-radius:14px;

    background:rgba(66,153,225,.12);
    border:1px solid rgba(66,153,225,.35);

    color:#90cdf4;
}

.reject-warning{
    margin:16px 0;
    padding:14px;
    border-radius:14px;

    background:rgba(245,101,101,.12);
    border:1px solid rgba(245,101,101,.35);

    color:#feb2b2;
}

/* =========================================================
   دکمه قفل شده
========================================================= */

.panel-btn.locked{

    background:#2d3748 !important;

    color:#a0aec0 !important;

    cursor:not-allowed;

    opacity:1;
}
/* =========================================================
نمایش وضعیت درامد
========================================================= */


.panel-income-box{

    margin-bottom:18px;

    padding:16px;

    border-radius:14px;

    background:
    rgba(255,255,255,.03);

    border:
    1px solid rgba(255,255,255,.06);
}

.panel-income-row{

    display:flex;

    justify-content:space-between;

    margin-bottom:8px;
}

.panel-income-row:last-child{

    margin-bottom:0;
}

.panel-income-row span{

    color:#8fa3c7;
}

.panel-income-row strong{

    color:#fff;
}
/* =========================================================
Timeline واقعی پنل
========================================================= */

.panel-timeline{

    margin-top:18px;

    border-top:
    1px solid rgba(255,255,255,.06);

    padding-top:18px;
}

.panel-timeline-item{

    position:relative;

    padding-left:24px;

    margin-bottom:14px;
}

.panel-timeline-item:last-child{

    margin-bottom:0;
}

.panel-timeline-item::before{

    content:"";

    position:absolute;

    left:0;
    top:5px;

    width:10px;
    height:10px;

    border-radius:50%;

    background:#2ecc71;
}

.panel-timeline-item label{

    display:block;

    color:#fff;

    font-size:13px;
}

.panel-timeline-item small{

    color:#8fa3c7;
}

/* CSS Production CART*/
.production-status-card{

    margin:15px 0;

    padding:16px;

    border-radius:12px;

    background:
    rgba(34,197,94,.08);

    border:
    1px solid rgba(34,197,94,.2);
}

.production-status-header{

    font-size:14px;

    font-weight:700;

    margin-bottom:12px;

    color:#22c55e;
}

.production-status-grid{

    display:grid;

    grid-template-columns:
    repeat(2,1fr);

    gap:12px;
}

.production-status-grid span{

    display:block;

    font-size:12px;

    opacity:.7;
}

.production-status-grid strong{

    display:block;

    margin-top:4px;

    font-size:15px;
}

/* ========================================================
شمارنده معکوس کارت تولید
========================================================= */
.production-countdown{

    margin:15px 0;

    padding:18px;

    text-align:center;

    border-radius:12px;

    background:
    linear-gradient(
        135deg,
        rgba(59,130,246,.08),
        rgba(34,197,94,.08)
    );

    border:
    1px solid rgba(59,130,246,.15);
}

.countdown-title{

    font-size:13px;

    opacity:.7;

    margin-bottom:8px;
}

.countdown-value{

    font-size:28px;

    font-weight:700;
}

.countdown-value span{

    display:block;

    margin-top:4px;

    font-size:12px;

    font-weight:400;

    opacity:.7;
}
/*=============================================
ابرجسته شدن اطلاعات مالی کارت
================================================*/
.panel-divider{

    border:none;

    border-top:
    1px solid rgba(255,255,255,.08);

    margin:12px 0;
}

.panel-income-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:8px;
}

.panel-income-row.highlight{

    font-weight:700;

    color:#79ffad;
}

.production-progress{

    margin-bottom:18px;
}

.progress-label{

    display:flex;

    justify-content:space-between;

    margin-bottom:8px;

    font-size:13px;
}

.progress-track{

    height:10px;

    border-radius:999px;

    overflow:hidden;

    background:#202b43;
}

.progress-fill{

    height:100%;

    width:0;

    transition:.4s;

    background:
    linear-gradient(
        90deg,
        #2ecc71,
        #79ffad
    );
}

.progress-footer{

    margin-top:6px;

    text-align:right;

    font-size:12px;

    opacity:.8;
}
/*================================================
شمارنده روز معکوس مربوط به دکمه
===================================================*/
.panel-action-group{

    display:flex;

    flex-direction:column;

    gap:8px;

    width:100%;
}

.action-note{

    display:block;

    text-align:center;

    font-size:12px;

    color:#9ca3af;
}
/*========================================================
کارت خرید CTA
=======================================================*/
.cta-plan{

    display:flex;
    flex-direction:column;
    gap:10px;

    margin-top:12px;
}

.cta-plan hr{

    border:none;
    height:1px;

    background:
    rgba(255,255,255,.08);
}

.cta-total{

    font-size:18px;
    font-weight:700;

    color:#79ffad;
}

.cta-upgrade{

    padding:10px;

    border-radius:10px;

    text-align:center;

    font-weight:700;

    background:
    rgba(46,204,113,.15);

    color:#79ffad;
}

.cta-buy-btn{

    margin-top:10px;

    display:block;

    text-align:center;

    text-decoration:none;

    padding:12px;

    border-radius:12px;

    font-weight:700;

    color:#08111f;

    background:
    linear-gradient(
        90deg,
        #2ecc71,
        #79ffad
    );
}
/*===================================================
استایل تب وضعیت پنل ها 
======================================================*/
.panel-tabs{

    display:flex;

    gap:10px;

    overflow-x:auto;

    margin-bottom:20px;

    padding-bottom:8px;
    padding-top:8px;
    padding-left:3px;
}

.panel-tab{

    border:none;

    cursor:pointer;

    white-space:nowrap;

    border-radius:999px;

    padding:10px 18px;

    background:#1e293b;

    color:#cbd5e1;

    font-size:.85rem;
}

.panel-tab.active{

    background:#2ecc71;

    color:#fff;
}

.panel-tab[data-filter="action"]

.tab-badge{

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

    min-width:18px;
    height:18px;

    padding:0 6px;

    margin-left:6px;

    border-radius:999px;

    background:#ff4d4f;

    color:#fff;

    font-size:11px;
    font-weight:700;

    line-height:1;
}

.pending-tab .tab-badge{

    background:#ff9800;
}



/*=====================================
فیلتر تب وضعیت پنل ها 
======================================*/
.empty-panels{

    padding:40px 20px;

    text-align:center;

    border-radius:18px;

    color:#94a3b8;

    background:
    rgba(255,255,255,.03);

    border:
    1px solid rgba(255,255,255,.05);
}

/* =====================================================
PANEL METRICS
===================================================== */

.panel-metrics{

    display:grid;

    grid-template-columns:
    repeat(2,minmax(0,1fr));

    gap:12px;

    margin-bottom:18px;
}

.metric-card{

    padding:14px;

    border-radius:14px;

    background:
    rgba(255,255,255,.04);

    border:
    1px solid rgba(255,255,255,.06);

    text-align:center;
}

.metric-label{

    display:block;

    font-size:12px;

    opacity:.7;

    margin-bottom:6px;
}

.metric-value{

    display:block;

    font-size:20px;

    font-weight:700;

    color:#fff;
}

.metric-card small{

    display:block;

    margin-top:4px;

    opacity:.65;

    font-size:11px;
}

/*========================================
استایل دکمه های وضعیت
=============================================*/
.pulse-btn{

    animation:
    pulseGlow 2s infinite;
}

@keyframes pulseGlow{

    0%{

        transform:scale(1);
    }

    50%{

        transform:scale(1.03);
    }

    100%{

        transform:scale(1);
    }
}

.action-success{

    color:#00b050;
    font-weight:600;
}

.pending-btn{

    background:#f59e0b;
    color:#fff;
}

.completed-btn{

    background:#16a34a;
    color:#fff;
}
/* =====================================================
NOTIFICATION RIBBONS
===================================================== */

.panel-ribbon{

    padding:10px 14px;

    margin:12px 0;

    border-radius:10px;

    font-size:13px;
    font-weight:600;

    line-height:1.4;
}

.ribbon-pending{

    background:rgba(245,158,11,.15);
    color:#fbbf24;
    border:1px solid rgba(245,158,11,.35);
}

.ribbon-rejected{

    background:rgba(239,68,68,.15);
    color:#f87171;
    border:1px solid rgba(239,68,68,.35);
}

.ribbon-income-ready{

    background:rgba(34,197,94,.15);
    color:#4ade80;
    border:1px solid rgba(34,197,94,.35);
}

.ribbon-income-pending{

    background:rgba(59,130,246,.15);
    color:#60a5fa;
    border:1px solid rgba(59,130,246,.35);
}

.ribbon-sale-ready{

    background:rgba(16,185,129,.15);
    color:#34d399;
    border:1px solid rgba(16,185,129,.35);
}

.ribbon-sale-pending{

    background:rgba(139,92,246,.15);
    color:#a78bfa;
    border:1px solid rgba(139,92,246,.35);
}

.ribbon-completed{

    background:rgba(16,185,129,.15);
    color:#34d399;
    border:1px solid rgba(16,185,129,.35);
}
/* =====================================
PORTFOLIO CHARTS
===================================== */

.portfolio-charts{

    display:grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(420px,1fr)
        );

    gap:24px;

    margin-bottom:32px;
}

.chart-card{

    background:
        rgba(12,25,55,.85);

    border:1px solid
        rgba(255,255,255,.08);

    border-radius:20px;

    padding:24px;

    min-height:420px;

    position:relative;
}

.chart-card h4{

    margin-bottom:20px;
}


.chart-card canvas{

    width:100% !important;

    height:320px !important;

    max-height:320px !important;
}

/* =====================================================
NEW NAVBAR
===================================================== */

/*.sw-nav-right{*/

/*    display:flex;*/

/*    align-items:center;*/

/*    gap:18px;*/
/*}*/

/*.sw-icon-btn{*/

/*    position:relative;*/

/*    width:44px;*/

/*    height:44px;*/

/*    border:none;*/

/*    cursor:pointer;*/

/*    border-radius:50%;*/

/*    background:#182846;*/

/*    color:#fff;*/
/*}*/

/*.notification-badge{*/

/*    position:absolute;*/

/*    top:-4px;*/

/*    right:-2px;*/

/*    min-width:18px;*/

/*    height:18px;*/

/*    border-radius:999px;*/

/*    background:#ef4444;*/

/*    color:#fff;*/

/*    font-size:11px;*/

/*    display:flex;*/

/*    align-items:center;*/

/*    justify-content:center;*/
/*}*/

/*.sw-user-btn{*/

/*    display:flex;*/

/*    align-items:center;*/

/*    gap:8px;*/

/*    background:none;*/

/*    border:none;*/

/*    color:#fff;*/

/*    cursor:pointer;*/
/*}*/

/*.sw-dropdown{*/

/*    display:none;*/

/*    position:absolute;*/

/*    top:60px;*/

/*    right:0;*/

/*    width:260px;*/

/*    border-radius:18px;*/

/*    background:#17243d;*/

/*    border:1px solid rgba(255,255,255,.08);*/

/*    overflow:hidden;*/

/*    z-index:999;*/
/*}*/

/*.sw-dropdown.show{*/

/*    display:block;*/
/*}*/

/*.sw-dropdown a{*/

/*    display:block;*/

/*    padding:14px 18px;*/

/*    color:#fff;*/

/*    text-decoration:none;*/
/*}*/

/*.sw-dropdown a:hover{*/

/*    background:#223554;*/
/*}*/

/*.sw-dropdown hr{*/

/*    border:none;*/

/*    border-top:1px solid rgba(255,255,255,.08);*/
/*}*/

/*==================================================
MODERN NAVBAR
==================================================*/

.sw-navbar{

    position:fixed;

    top:0;

    left:0;

    right:0;

    height:64px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 18px;

    background:#0f172a;

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

    z-index:1000;

}

.sw-navbar-title{

    font-size:20px;

    font-weight:700;

    color:#fff;

}

.sw-navbar-right{

    display:flex;

    gap:12px;

    align-items:center;

}

.sw-nav-btn{

    width:42px;

    height:42px;

    border:none;

    border-radius:12px;

    background:#16213c;

    color:#fff;

    cursor:pointer;

    position:relative;

    transition:.25s;

}

.sw-nav-btn:hover{

    background:#22345f;

}

.notification-badge{

    position:absolute;

    top:-5px;

    right:-5px;

    min-width:20px;

    height:20px;

    border-radius:50%;

    background:#ef4444;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:11px;

    font-weight:700;

}


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

.sw-sidebar{

    position:fixed;

    top:0;

    left:-280px;

    width:260px;

    height:100%;

    background:#111827;

    transition:.30s;

    z-index:1200;

    overflow-y:auto;

    padding-top:25px;

}

.sw-sidebar.open{

    left:0;

}

.sw-sidebar-header{

    padding:20px;

    color:white;

    font-size:22px;

    font-weight:bold;

}

.sw-sidebar a{

    display:flex;

    align-items:center;

    gap:12px;

    padding:16px 22px;

    color:#cbd5e1;

    text-decoration:none;

    transition:.2s;

}

.sw-sidebar a:hover{

    background:#1f2937;

    color:#fff;

}

.sw-sidebar hr{

    border-color:#2d3748;

    margin:12px 0;

}


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

.sw-sidebar-overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.55);

    opacity:0;

    visibility:hidden;

    transition:.25s;

    z-index:1100;

}

.sw-sidebar-overlay.show{

    opacity:1;

    visibility:visible;

}

/*==================================================
AUTH PAGE
==================================================*/

.sw-auth-page{

    min-height:100vh;

    background:
    radial-gradient(circle at top,#1e3a8a,#071220);

    display:flex;

    align-items:center;

    justify-content:center;

    padding:40px;

}

.sw-auth-wrapper{

    width:100%;

    max-width:1180px;

    display:grid;

    grid-template-columns:1fr 460px;

    overflow:hidden;

    border-radius:30px;

    background:#09111d;

    box-shadow:
    0 30px 60px rgba(0,0,0,.45);

}

.sw-auth-brand{

    position:relative;

    overflow:hidden;

    padding:70px;

    background:
    linear-gradient(
    140deg,
    #0f172a,
    #0b2848,
    #134e4a);

    color:#fff;

}

.brand-glow{

    position:absolute;

    width:450px;

    height:450px;

    border-radius:50%;

    background:#16a34a55;

    top:-120px;

    right:-120px;

    filter:blur(80px);

}

.brand-content{

    position:relative;

    z-index:2;

}

.brand-logo{

    width:90px;

    height:90px;

    border-radius:50%;

    background:#16a34a;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:42px;

    margin-bottom:30px;

}

.brand-content h1{

    font-size:48px;

    font-weight:700;

}

.brand-content p{

    margin-top:20px;

    color:#cbd5e1;

    line-height:2;

    font-size:17px;

}

.brand-stats{

    display:flex;

    gap:25px;

    margin-top:60px;

}

.brand-stats div{

    text-align:center;

}

.brand-stats strong{

    display:block;

    font-size:30px;

    color:#22c55e;

}

.brand-stats span{

    color:#94a3b8;

    font-size:14px;

}

/* Right */

.sw-auth-card{

    background:#fff;

    padding:60px;

    display:flex;

    flex-direction:column;

    justify-content:center;

}

.auth-header h2{

    font-size:34px;

    font-weight:700;

    color:#0f172a;

}

.auth-header p{

    margin-top:10px;

    color:#64748b;

}

.sw-auth-field{

    margin-top:28px;

}

.sw-auth-field label{

    display:block;

    margin-bottom:8px;

    font-weight:600;

}

.sw-auth-input{

    width:100%;

    height:56px;

    border:1px solid #cbd5e1;

    border-radius:14px;

    padding:0 18px;

    transition:.25s;

}

.sw-auth-input:focus{

    outline:none;

    border-color:#16a34a;

    box-shadow:0 0 0 4px rgba(34,197,94,.15);

}

.sw-auth-btn{

    margin-top:35px;

    width:100%;

    height:58px;

    border:none;

    border-radius:14px;

    background:#16a34a;

    color:#fff;

    font-weight:700;

    font-size:17px;

    transition:.3s;

}

.sw-auth-btn:hover{

    background:#15803d;

}

.sw-auth-error{

    display:none;

    margin-top:20px;

    color:#dc2626;

}

.sw-auth-footer{

    margin-top:35px;

    text-align:center;

}

.sw-auth-footer a{

    color:#16a34a;

    text-decoration:none;

    font-weight:700;

}

/* Tablet */

@media(max-width:992px){

.sw-auth-wrapper{

grid-template-columns:1fr;

}

.sw-auth-brand{

padding:50px;

}

}

/* Mobile */

@media(max-width:700px){

.sw-auth-page{

padding:15px;

}

.sw-auth-brand{

display:none;

}

.sw-auth-card{

padding:35px 25px;

}

.auth-header h2{

font-size:28px;

}

}