/* =========================
   BASE
========================= */
body {
    background: radial-gradient(circle at top, #1b2a3d, #0b1220);
    font-family: 'Inter', sans-serif;
    color: #ffffff;
}

.dashboard-wrapper {
    max-width: 1300px;
    margin: auto;
    /*padding: 40px 20px;*/
}

.page-title {
    font-weight: 700;
}

.page-subtitle {
    color: #9fb3c8;
}

/* =========================
   GLASS CARDS
========================= */
.glass-card {
    background: linear-gradient(
        145deg,
        rgba(255,255,255,0.06),
        rgba(255,255,255,0.02)
    );
    border-radius: 18px;
    padding: 20px;
    backdrop-filter: blur(20px);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
}

.big-card {
    padding: 30px;
}

.success {
    background: linear-gradient(
        135deg,
        rgba(0,255,170,0.12),
        rgba(0,255,170,0.02)
    );
}

.danger {
    background: linear-gradient(
        135deg,
        rgba(255,80,80,0.12),
        rgba(255,80,80,0.02)
    );
}

.icon-box {
    width: 50px;
    height: 50px;
    background: rgba(0,255,170,0.15);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

/* =========================
   SOFT BACKGROUNDS
========================= */
.bg-success-soft {
    background: rgba(0,255,170,0.12);
}

.bg-danger-soft {
    background: rgba(255,80,80,0.12);
}

.trade-row {
    background: rgba(255,255,255,0.05);
    padding: 12px;
    border-radius: 12px;
}

/* =========================
   CALENDAR WRAPPER
========================= */
.calendar-wrapper {
    padding: 24px;
}

/* =========================
   CALENDAR HEADER
========================= */
.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.today-btn {
    background: rgba(255,255,255,0.08);
    border: none;
    color: #ffffff;
    padding: 6px 14px;
    border-radius: 10px;
    font-size: 12px;
    cursor: pointer;
}

.month-nav {
    display: flex;
    align-items: center;
    gap: 14px;
}

.nav-btn {
    background: none;
    border: 1px solid rgba(255,255,255,0.3);
    color: #ffffff;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    cursor: pointer;
}

.weekly-title {
    font-weight: 600;
    color: #ffffff;
}

/* =========================
   CALENDAR BODY
========================= */
.calendar-body {
    display: grid;
    grid-template-columns: 3fr 1.2fr;
    gap: 20px;
}

/* =========================
   WEEKDAYS ROW
========================= */
.calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    color: #9fb3c8;
    font-size: 13px;
    margin-bottom: 12px;
}

.calendar-weekdays div {
    padding: 6px 0;
}

/* =========================
   CALENDAR GRID
========================= */
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 12px;
}

/* =========================
   CALENDAR DAY CELL
========================= */
.calendar-day {
    position: relative;
    height: 86px;
    border-radius: 14px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.25);
    padding: 10px;
}

.calendar-day.empty {
    background: transparent;
    border: none;
}

/* Today highlight */
.calendar-day.today {
    border: 2px solid #3b82f6;
}

/* Day number (TOP-RIGHT) */
.calendar-day .day-number {
    position: absolute;
    top: 8px;
    right: 10px;
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
    z-index: 2;
}

/* Daily P/L (BOTTOM-LEFT) */
.calendar-day .pl {
    position: absolute;
    bottom: 10px;
    left: 10px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    z-index: 1;
}

/* Profit / Loss coloring */
.calendar-day.profit .pl {
    color: #34f5c5;
}

.calendar-day.loss .pl {
    color: #ff6b6b;
}

/* =========================
   WEEKLY SUMMARY
========================= */
.calendar-right {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.week-card {
    border-radius: 16px;
    padding: 16px;
    background: rgba(255,255,255,0.04);
}

.week-card.profit {
    background: rgba(0,255,170,0.12);
}

.week-card.loss {
    background: rgba(255,80,80,0.12);
}

.week-head {
    display: flex;
    justify-content: space-between;
    color: #9fb3c8;
    font-size: 13px;
}

.week-amount {
    font-size: 22px;
    font-weight: 700;
    margin-top: 10px;
    color: #34f5c5;
}

.week-card.loss .week-amount {
    color: #ff6b6b;
}

.week-days {
    font-size: 12px;
    color: #9fb3c8;
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 992px) {
    .calendar-body {
        grid-template-columns: 1fr;
    }

    .calendar-day {
        height: 72px;
    }

    .calendar-day .pl {
        font-size: 12px;
    }
}




.equity-chart-wrap {
    height: 260px;      /* FIXED HEIGHT */
    position: relative;
}

.equity-chart-wrap canvas {
    width: 100% !important;
    height: 100% !important;
}

.nav-btn {
    background: none;
    border: 1px solid rgba(255,255,255,0.3);
    color: #fff;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    text-decoration: none;
}

.nav-btn:hover {
    background: rgba(255,255,255,0.1);
}



.success { background: linear-gradient(...green...); }
.danger  { background: linear-gradient(...red...); }

/* ================= TOP SUMMARY COMPACT ================= */
.top-summary .glass-card.compact {
    padding: 20px 22px;   /* reduced height */
}

.top-summary h1 {
    font-size: 36px;
    line-height: 1.1;
}

/* ================= MINI STAT CARDS ================= */
.mini-stat-card {
    border-radius: 12px;
    padding: 8px 10px;
    text-align: center;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.18);
}

.mini-stat-card h4 {
    margin-top: 4px;
    font-weight: 700;
    font-size: 18px;
}

.mini-stat-card.profit {
    border-color: rgba(0,255,170,0.6);
    color: #34f5c5;
}

.mini-stat-card.loss {
    border-color: rgba(255,80,80,0.6);
    color: #ff6b6b;
}


/* ================= CENTERED SUMMARY CARDS ================= */
.summary-center {
    display: flex;
    flex-direction: column;
    justify-content: center;   /* vertical center */
    align-items: center;       /* horizontal center */
    text-align: center;
}

.summary-center small {
    opacity: 0.85;
}

.summary-center h1 {
    margin-top: 10px;
}


.calendar-day.today {
    border: 2px solid #3b82f6;
    box-shadow: 0 0 0 2px rgba(59,130,246,0.3);
}

.calendar-day.today .day-number {
    color: #3b82f6;
    font-weight: 700;
}


.text-muted {
    --bs-text-opacity: 1;
    color: rgb(139 139 139 / 75%) !important;
}