/* ===========================
   DASHBOARD - SOLAR POS THEME
=========================== */

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

.page-content{
    margin-left:260px;
    padding:105px 28px 30px;
    min-height:100vh;
    background:linear-gradient(135deg,#FFFDF5,#F8FAFC);
    font-family:'Inter',sans-serif;
}

.page-content .container-fluid{
    max-width:1700px;
}

/* Heading */

.page-content h2{
    font-family:'Poppins',sans-serif;
    font-size:24px;
    font-weight:700;
    letter-spacing:-.3px;
    background:linear-gradient(90deg,#D97706,#F59E0B,#FBBF24,#D97706);
    background-size:300% auto;
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    margin-bottom:3px;
    animation:sunShimmer 6s linear infinite;
}

.page-content p{
    font-size:12.5px;
    font-weight:500;
    letter-spacing:.2px;
    color:#94A3B8;
    opacity:0;
    animation:fadeUp .6s ease forwards;
    animation-delay:.15s;
}

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

@keyframes fadeUp{
    from{ opacity:0; transform:translateY(25px); }
    to{ opacity:1; transform:translateY(0); }
}

@keyframes sunShimmer{
    0%{background-position:0% center;}
    100%{background-position:300% center;}
}

@keyframes sunPulse{
    0%,100%{box-shadow:0 10px 25px rgba(0,0,0,.08);}
    50%{box-shadow:0 10px 30px rgba(245,158,11,.25);}
}

@keyframes sunRise{
    from{ opacity:0; transform:translateY(40px) scale(.96); }
    to{ opacity:1; transform:translateY(0) scale(1); }
}

/* Cards */

.card{
    border:none;
    border-radius:16px;
    background:#fff;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
    transition:transform .35s ease, box-shadow .35s ease;
    opacity:0;
    animation:sunRise .6s cubic-bezier(.22,1,.36,1) forwards, sunPulse 4s ease-in-out infinite 1s;
    overflow:hidden;
    position:relative;
}

.card::before{
    content:"";
    position:absolute;
    top:0;
    left:-100%;
    width:60%;
    height:100%;
    background:linear-gradient(120deg,transparent,rgba(245,158,11,.08),transparent);
    transition:left .6s ease;
    pointer-events:none;
}

.card:hover::before{ left:130%; }

.card:hover{
    transform:translateY(-8px) scale(1.01);
    box-shadow:0 20px 45px rgba(245,158,11,.25);
}

/* Staggered entrance - Row 2 (stat cards) */
.row:nth-child(2) .col-sm-6:nth-child(1) .card{ animation-delay:.05s, 1.05s; }
.row:nth-child(2) .col-sm-6:nth-child(2) .card{ animation-delay:.15s, 1.15s; }
.row:nth-child(2) .col-sm-6:nth-child(3) .card{ animation-delay:.25s, 1.25s; }
.row:nth-child(2) .col-sm-6:nth-child(4) .card{ animation-delay:.35s, 1.35s; }

/* Staggered entrance - Row 3 (expense cards) */
.row:nth-child(3) .col-sm-6:nth-child(1) .card{ animation-delay:.45s, 1.45s; }
.row:nth-child(3) .col-sm-6:nth-child(2) .card{ animation-delay:.55s, 1.55s; }
.row:nth-child(3) .col-sm-6:nth-child(3) .card{ animation-delay:.65s, 1.65s; }

/* Chart + Recent Sales row */
.row:nth-child(4) .col-xl-8 .card{ animation-delay:.75s, 1.75s; }
.row:nth-child(4) .col-xl-4 .card{ animation-delay:.85s, 1.85s; }

/* Stat Card Left Border */

.row:nth-child(2) .col-xl-3:nth-child(1) .card{ border-left:6px solid #F59E0B; }
.row:nth-child(2) .col-xl-3:nth-child(2) .card{ border-left:6px solid #10B981; }
.row:nth-child(2) .col-xl-3:nth-child(3) .card{ border-left:6px solid #3B82F6; }
.row:nth-child(2) .col-xl-3:nth-child(4) .card{ border-left:6px solid #EF4444; }
.row:nth-child(3) .col-xl-4:nth-child(1) .card{ border-left:6px solid #06B6D4; }
.row:nth-child(3) .col-xl-4:nth-child(2) .card{ border-left:6px solid #F97316; }
.row:nth-child(3) .col-xl-4:nth-child(3) .card{ border-left:6px solid #DC2626; }

/* Card Body */

.card-body{
    padding:20px 18px;
}

/* Labels - small, spaced out, muted */

.card p{
    font-family:'Inter',sans-serif;
    font-size:11px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:1px;
    margin-bottom:6px;
    color:#94A3B8;
}

/* Values - smaller now, still bold */

.card h4{
    font-family:'Poppins',sans-serif;
    font-size:21px;
    font-weight:700;
    letter-spacing:-.3px;
    color:#111827;
    transition:color .3s ease, transform .3s ease;
}

.card:hover h4{
    color:#F59E0B;
    transform:scale(1.03);
}

/* Section headings (Expense Chart / Recent Sales) */

.card h5{
    font-family:'Poppins',sans-serif;
    font-size:15px;
    font-weight:700;
    letter-spacing:-.1px;
    color:#D97706;
    padding-bottom:10px;
    border-bottom:1px solid #E5E7EB;
    margin-bottom:16px;
}

/* Table */

.table{
    margin-bottom:0;
    font-family:'Inter',sans-serif;
}

.table thead{
    background:linear-gradient(90deg,#F59E0B,#FBBF24);
    color:#fff;
}

.table thead th{
    padding:10px 12px;
    font-size:10.5px;
    font-weight:700;
    letter-spacing:.6px;
    text-transform:uppercase;
    border:none;
}

.table tbody td{
    padding:10px 12px;
    font-size:12.5px;
    font-weight:500;
    color:#334155;
    vertical-align:middle;
    border-color:#EEF2F7;
}

.table tbody td:first-child{
    font-weight:700;
    color:#111827;
}

.table tbody tr{
    transition:background .3s ease, transform .2s ease;
    opacity:0;
    animation:fadeUp .5s ease forwards;
}

.table tbody tr:nth-child(1){ animation-delay:.9s; }
.table tbody tr:nth-child(2){ animation-delay:1s; }
.table tbody tr:nth-child(3){ animation-delay:1.1s; }
.table tbody tr:nth-child(4){ animation-delay:1.2s; }
.table tbody tr:nth-child(5){ animation-delay:1.3s; }

.table tbody tr:hover{
    background:#FFF8E7;
    transform:translateX(4px);
}

/* Chart */

#dashboardExpenseChart{
    width:100%!important;
    height:340px!important;
    opacity:0;
    animation:fadeUp .8s ease forwards;
    animation-delay:.8s;
}

/* Reduced motion */
@media(prefers-reduced-motion:reduce){
    *{ animation:none!important; transition:none!important; }
}

/* Responsive */

@media(max-width:991px){
    .page-content{
        margin-left:0;
        padding:95px 15px 20px;
    }
}

@media(max-width:576px){
    .page-content h2{ font-size:19px; }
    .page-content p{ font-size:11px; }
    .card h4{ font-size:18px; }
    .card p{ font-size:10px; }
    .card-body{ padding:14px; }
}