/* =========================================================
   Root Theme Variables
========================================================= */
:root {
  --accent-green:#69F769;
  --accent-red:#EE4266;
  --bg-0:#ffffff;
  --bg-1:#f7f7f8;
  --bg-2:#f0f1f2;
  --text-1:#0a0a0a;
  --muted:#6b7280;
  --border:#e5e7eb;
  --card-shadow:0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.06);
}

[data-bs-theme=dark] {
  --bg-0:#0b0b0c;
  --bg-1:#111214;
  --bg-2:#15171a;
  --text-1:#f9fafb;
  --muted:#9aa1ab;
  --border:#23252a;
  --card-shadow:0 1px 2px rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.35);
}

html, body { height:100%; }
body.app-body {
  background:var(--bg-0);
  color:var(--text-1);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}

.app-wrap { display:flex; min-height:100vh; }


/* =========================================================
   Sidebar
========================================================= */
.sidebar {
  width:280px;
  flex:0 0 280px;
  height:100vh;
  position:sticky;
  top:0;
  background:linear-gradient(180deg,#000 0%, #111 100%);
  color:#fff;
  border-right:1px solid var(--border);
}

.sidebar .logo-row {
  padding:18px 18px 10px;
  display:flex;
  align-items:center;
  gap:10px;
}

.logo-mark {
  width:32px;
  height:32px;
  border-radius:10px;
  background:#fff;
  color:#000;
  display:grid;
  place-items:center;
  font-weight:800;
}

.sidebar .nav { padding:10px; }

.sidebar .nav-link {
  color:#e5e7eb;
  padding:10px 12px;
  border-radius:10px;
  margin:2px 4px;
  display:flex;
  align-items:center;
  gap:10px;
}

.sidebar .nav-link .fa {
  width:18px;
  text-align:center;
  opacity:.9;
}

.sidebar .nav-link:hover {
  background:rgba(255,255,255,.06);
  color:#fff;
}

.sidebar .nav-link.active {
  background:#fff;
  color:#000;
}

.sidebar .bottom {
  margin-top:auto;
  padding:16px;
  border-top:1px solid rgba(255,255,255,.12);
}

.sidebar .btn-group .btn {
  border-color:rgba(255,255,255,.2);
  color:#fff;
}

.sidebar .btn-group .btn:hover {
  background:rgba(255,255,255,.08);
}


/* =========================================================
   Content + Cards + KPI
========================================================= */
.content {
  flex:1;
  padding:24px 28px;
  background:var(--bg-1);
}

.page-title {
  font-weight:800;
  letter-spacing:.2px;
}

.card-flat {
  padding:25px;
  border:1px solid var(--border);
  background:var(--bg-0);
  border-radius:16px;
  box-shadow:var(--card-shadow);
}

.card-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:8px;
}

.card-head h6 {
  margin:0;
  font-weight:700;
}

.kpi {
  display:flex;
  gap:12px;
  align-items:center;
  padding:16px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--bg-0);
  box-shadow:var(--card-shadow);
}

.kpi .label { font-size:.85rem; color:var(--muted); }
.kpi .value { font-weight:800; font-size:1.35rem; }
.kpi i { opacity:.7; }


/* =========================================================
   Tables + Utility
========================================================= */
.table thead th {
  background:var(--bg-2);
  border-bottom:1px solid var(--border);
}

.table td,
.table th {
  border-color:var(--border);
}

.badge-soft { background:rgba(0,0,0,.08); }
[data-bs-theme=dark] .badge-soft { background:rgba(255,255,255,.08); }

.text-profit { color:var(--accent-green)!important; }
.text-loss   { color:var(--accent-red)!important; }
.bg-profit   { background:rgba(105,247,105,.12); }
.bg-loss     { background:rgba(238,66,102,.12); }


/* =========================================================
   Calendar
========================================================= */

/* 8-column layout */
.calendar-grid {
  display:grid;
  grid-template-columns:repeat(8, 1fr);
  gap:6px;
}

.calendar-header-grid {
  display:grid;
  grid-template-columns:repeat(8, 1fr);
  gap:6px;
  text-align:center;
}
.calendar-header-grid div { 
  font-weight:700;
  font-size:.9rem;
  color:var(--muted);
}

/* Day cell */
.calendar .day {
  position:relative;
  display:flex;
  flex-direction:column;
  background:var(--bg-0);
  border:1px solid var(--border);
  border-radius:12px;
  padding:8px;
  cursor:pointer;
  min-height:130px;
  font-size:.85rem;
  box-shadow:var(--card-shadow);
}

.calendar .day.muted { opacity:.35; }

.calendar .add {
  position:absolute;
  top:4px;
  right:6px;
}

.calendar .add i {
  font-size:12px;
  opacity:.6;
}

.cal-select { width:auto; min-width:110px; }

/* Weekly P&L cell */
.week-pnl {
  aspect-ratio: 5 / 4;
  height: auto;
  background:rgba(0,0,0,0.05);
  border-radius:8px;
  padding:8px 4px;
  text-align:center;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items: center;
}

.week-pnl .value {
  font-weight:700;
  margin-top:4px;
}

/* Today's date highlight */
.calendar .day.today {
  border-color:var(--accent-green);
  box-shadow:0 0 10px rgba(105,247,105,0.25);
}

.calendar .day.today::after {
  content:"Today";
  position:absolute;
  bottom:6px;
  right:8px;
  font-size:.65rem;
  font-weight:600;
  color:var(--accent-green);
  opacity:.85;
}

/* =========================================================
   Responsive Calendar Aspect Ratios
========================================================= */

@media (max-width:1900px) {
  .calendar .day { aspect-ratio:5/4; }
}

@media (max-width:1600px) {
  .calendar .day { aspect-ratio:5/4; }
}

@media (max-width:1400px) {
  .calendar .day { aspect-ratio:4/4; }
}

@media (max-width:1100px) {
  .calendar .day { aspect-ratio:3.5/4; }
}

@media (max-width:768px) {
  .calendar .day { aspect-ratio:2/4; }
}


/* =========================================================
   Dark Mode Overrides
========================================================= */
[data-bs-theme="dark"] .add {
  background-color:#444 !important;
  border-color:#555 !important;
  color:#f8f9fa !important;
}
[data-bs-theme="dark"] .week-pnl {
  background: rgba(255,255,255,0.06) !important;
}