/* ══ NxTGen Journal — dashboard-tradelog.css (original styles.css lines 464-891) ══ */

/* ════════════ PAGE ════════════════════════════════ */
.page{flex:1;overflow-y:auto;padding:24px;display:none;scroll-behavior:smooth;min-width:0}
#page-dashboard{padding:0}
.page.active{display:block}
.page-inner{max-width:920px;margin:0 auto;min-width:0}
.dash-layout .page-inner,.dash-left .page-inner{max-width:none;margin:0}
/* Full-width ("port view") pages — same edge-to-edge treatment as
   Trade Log, Calendar, and Dashboard. Everything else still uses the
   centered 920px column above by default. */
#page-watchlist .page-inner,
#page-accounts .page-inner,
#page-ai .page-inner,
#page-playbook .page-inner,
#page-goals .page-inner,
#page-quarter .page-inner,
#page-monthly .page-inner,
#page-trash .page-inner,
#page-profile .page-inner{
  max-width:none;
  width:100%;
  margin:0;
  box-sizing:border-box;
}

@keyframes pageIn{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}
.page.active .page-inner{animation:pageIn 0.24s var(--ease-out)}

/* ════════════ COVER BANNER ════════════════════════ */
.cover{
  background:linear-gradient(135deg,
    rgba(13,18,32,0.96) 0%,
    rgba(20,30,54,0.92) 55%,
    rgba(15,22,40,0.96) 100%);
  backdrop-filter:var(--blur-md);
  -webkit-backdrop-filter:var(--blur-md);
  border-radius:var(--r-xl);
  padding:22px 26px;margin-bottom:20px;
  border:1px solid var(--glass-border);
  position:relative;overflow:hidden;
  box-shadow:var(--shadow-lg),inset 0 1px 0 var(--glass-shine);
}
.cover::before{
  content:'';position:absolute;top:-60%;right:-5%;
  width:360px;height:360px;border-radius:50%;
  background:radial-gradient(circle,rgba(96,165,250,0.08) 0%,transparent 65%);
  pointer-events:none;
}
.cover::after{
  content:'';position:absolute;bottom:-40%;left:15%;
  width:240px;height:240px;border-radius:50%;
  background:radial-gradient(circle,rgba(167,139,250,0.06) 0%,transparent 65%);
  pointer-events:none;
}
[data-theme="light"] .cover{
  background:linear-gradient(135deg,rgba(79,70,229,0.88),rgba(79,70,229,0.82),rgba(79,70,229,0.88));
  border-color:rgba(255,255,255,0.18);
  box-shadow:var(--shadow-lg),inset 0 1px 0 rgba(255,255,255,0.2);
}
[data-theme="light"] .cover .cover-label{color:rgba(255,255,255,0.7)}
[data-theme="light"] .cover .cover-title{color:#fff}
[data-theme="light"] .cover .cover-sub{color:rgba(255,255,255,0.6)}
.cover-label{font-size:10px;font-weight:700;color:var(--blue);text-transform:uppercase;letter-spacing:.14em;margin-bottom:5px;position:relative;z-index:1}
.cover-title{font-family:var(--font-head);font-size:22px;font-weight:800;color:var(--text);line-height:1.2;letter-spacing:-0.5px;position:relative;z-index:1}
.cover-sub{font-size:12px;color:var(--text2);margin-top:5px;position:relative;z-index:1;line-height:1.5}

/* ════════════ KPI CARDS ══════════════════════════ */
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:10px}
.kpi-card{
  background:var(--glass-1);
  backdrop-filter:var(--blur-md);
  -webkit-backdrop-filter:var(--blur-md);
  border:1px solid var(--glass-border);
  border-radius:var(--r-lg);padding:15px 16px;
  transition:var(--t-med);position:relative;overflow:hidden;
  box-shadow:var(--shadow-sm);
}
.kpi-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent 0%,var(--glass-shine) 50%,transparent 100%);
}
.kpi-card::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:40%;
  background:linear-gradient(to top,rgba(0,0,0,0.06),transparent);
  pointer-events:none;
}
.kpi-card:hover{
  background:var(--glass-2);border-color:var(--glass-border-h);
  box-shadow:var(--shadow-md);transform:translateY(-2px);
}
/* Net PnL toggle card */
.kpi-card--toggle{cursor:pointer;user-select:none;}
.kpi-card--toggle:hover{border-color:rgba(99,179,237,0.35);}
.kpi-card--toggle:active{transform:scale(0.97);}
.kpi-toggle-hint{
  font-size:8px;color:var(--text3);text-transform:uppercase;
  letter-spacing:.06em;opacity:.7;margin-left:4px;
  font-family:var(--font-body);
}
.kpi-pnl-flipping .kpi-value,
.kpi-pnl-flipping .cal-an-value{
  animation:pnl-flip .28s ease;
}
@keyframes pnl-flip{
  0%{opacity:1;transform:rotateX(0deg);}
  45%{opacity:0;transform:rotateX(90deg);}
  55%{opacity:0;transform:rotateX(-90deg);}
  100%{opacity:1;transform:rotateX(0deg);}
}
.kpi-label{
  font-size:10px;color:var(--text3);margin-bottom:8px;
  font-weight:600;text-transform:uppercase;letter-spacing:.08em;
  display:flex;align-items:center;gap:5px;flex-wrap:wrap;
}
.kpi-label .cal-kpi-icon{font-size:11px;line-height:1;flex-shrink:0}
.kpi-value{
  font-family:var(--font-mono);font-size:24px;font-weight:700;
  line-height:1;letter-spacing:-0.8px;position:relative;z-index:1;
}
.kpi-value.green{color:var(--green);text-shadow:0 0 24px var(--green-glow)}
.kpi-value.red{color:var(--red);text-shadow:0 0 24px var(--red-glow)}
.kpi-value.blue{color:var(--blue);text-shadow:0 0 24px var(--blue-glow)}
.kpi-value.gold{color:var(--gold);text-shadow:0 0 24px var(--gold-glow)}
.kpi-value.teal{color:var(--teal);text-shadow:0 0 20px rgba(45,212,191,0.25)}
.kpi-value.white{color:var(--text)}

/* ════════════ INSIGHT BOX ════════════════════════ */
.insight{
  display:flex;gap:12px;
  background:linear-gradient(135deg,
    rgba(96,165,250,0.08) 0%,
    rgba(96,165,250,0.04) 100%);
  border:1px solid rgba(96,165,250,0.16);
  border-radius:var(--r-md);
  padding:13px 16px;margin-bottom:20px;align-items:flex-start;
  backdrop-filter:var(--blur-xs);
  box-shadow:inset 0 1px 0 rgba(96,165,250,0.08);
}
.insight-ico{font-size:16px;flex-shrink:0;margin-top:2px}
.insight-text{font-size:12.5px;color:rgba(148,188,255,0.88);line-height:1.55;font-weight:400}
[data-theme="light"] .insight-text{color:rgba(79,70,229,0.82)}
[data-theme="light"] .insight{background:linear-gradient(135deg,rgba(79,70,229,0.07),rgba(79,70,229,0.03));border-color:rgba(79,70,229,0.15)}

/* ════════════ SECTION HEADERS ════════════════════ */
.sec-head{
  font-size:10px;font-weight:700;color:var(--text3);
  text-transform:uppercase;letter-spacing:.14em;margin:22px 0 10px;
  display:flex;align-items:center;gap:10px;
}
.sec-head::after{content:'';flex:1;height:1px;background:var(--glass-border);opacity:.8}

/* ════════════ DATA TABLES ════════════════════════ */
.data-table{width:100%;border-collapse:collapse}
.data-table th{
  text-align:left;font-size:10px;font-weight:700;color:var(--text3);
  padding:9px 12px;border-bottom:1px solid var(--glass-border);
  text-transform:uppercase;letter-spacing:.09em;
}
.data-table td{
  padding:10px 12px;border-bottom:1px solid var(--border2);
  font-size:12.5px;color:var(--text2);
}
.data-table tbody tr{
  transition:var(--t-fast);cursor:pointer;
}
.data-table tbody tr:hover{
  background:var(--glass-1);
}
.data-table tbody tr:hover td{color:var(--text)}
.data-table tbody tr:last-child td{border-bottom:none}
.data-table td.bold{font-weight:600;color:var(--text)}
.data-table td.mono{font-family:var(--font-mono);font-size:12px;letter-spacing:-0.2px}

/* ── Compact Table View (Settings > Compact Table View) ── */
.data-table.compact-table th{ padding:5px 10px; font-size:9.5px }
.data-table.compact-table td{ padding:4px 10px; font-size:11.5px }
.data-table.compact-table tbody tr{ line-height:1.2 }

/* ════════════ PILLS ══════════════════════════════ */
.pill{
  display:inline-flex;align-items:center;
  padding:2px 9px;border-radius:var(--r-full);
  font-size:11px;font-weight:600;
  font-family:var(--font-mono);letter-spacing:0.1px;
}
.pill-green{background:var(--green-dim);color:var(--green);border:1px solid rgba(52,211,153,0.22)}
.pill-red{background:var(--red-dim);color:var(--red);border:1px solid rgba(248,113,113,0.22)}
.pill-blue{background:var(--blue-dim);color:var(--blue);border:1px solid rgba(96,165,250,0.22)}
.pill-gold{background:rgba(251,191,36,0.10);color:var(--gold);border:1px solid rgba(251,191,36,0.20)}
.pill-grey{background:var(--glass-1);color:var(--text2);border:1px solid var(--glass-border)}

/* ════════════ WIN BARS ══════════════════════════ */
.win-bar-wrap{display:flex;align-items:center;gap:8px}
.win-bar-bg{
  flex:1;height:3px;
  background:var(--glass-2);border-radius:var(--r-full);
  overflow:hidden;min-width:60px;
}
.win-bar-fill{
  height:100%;border-radius:var(--r-full);
  transition:width 0.9s var(--ease-out);
}
.win-bar-fill.green{background:linear-gradient(90deg,var(--green),rgba(52,211,153,0.5))}
.win-bar-fill.red{background:linear-gradient(90deg,var(--red),rgba(248,113,113,0.5))}

/* ════════════ OUTCOME COLORS ════════════════════ */
.outcome-win{color:var(--green);font-weight:600}
.outcome-loss{color:var(--red);font-weight:600}
.outcome-be{color:var(--blue);font-weight:600}
.pos-buy{color:var(--green);font-size:11px;font-weight:700;font-family:var(--font-mono)}
.pos-sell{color:var(--red);font-size:11px;font-weight:700;font-family:var(--font-mono)}
.stars{color:var(--gold);font-size:12px;letter-spacing:.5px;text-shadow:0 0 10px var(--gold-glow)}
.stars .empty{color:var(--text3);text-shadow:none}

/* ════════════ NEW TRADE MODAL ═══════════════════ */
.modal-overlay{
  position:fixed;inset:0;
  background:rgba(0,0,0,0.72);
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
  z-index:200;display:none;
  align-items:center;justify-content:center;
  animation:fadeInBG 0.2s var(--ease-out);
}
.modal-overlay.open{display:flex}
.modal{
  background:var(--glass-2);
  backdrop-filter:var(--blur-xl);
  -webkit-backdrop-filter:var(--blur-xl);
  border:1px solid var(--glass-border);
  border-radius:var(--r-xl);
  width:640px;max-width:calc(100vw - 32px);max-height:88vh;
  display:flex;flex-direction:column;
  box-shadow:var(--shadow-xl),inset 0 1px 0 var(--glass-shine);
  animation:slideUp 0.24s var(--ease-spring);
}
.modal-body{ padding:0 28px 4px; overflow-y:auto; flex:1; }
.modal-head{ padding:20px 28px 0; display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;flex-shrink:0; }
.form-actions{
  display:flex;gap:10px;justify-content:flex-end;
  padding:16px 28px 20px;
  border-top:1px solid var(--glass-border);
  flex-shrink:0;
  margin-top:0;
}

.modal-form-grid{ display:grid;grid-template-columns:1fr 1fr;gap:14px }
.modal-title{font-family:var(--font-head);font-size:17px;font-weight:700;letter-spacing:-0.3px}
.modal-close{
  background:var(--glass-1);border:1px solid var(--glass-border);
  color:var(--text2);font-size:18px;cursor:pointer;
  padding:4px 10px;border-radius:var(--r-sm);transition:var(--t-fast);
}
.modal-close:hover{background:var(--glass-2);color:var(--text);transform:scale(1.05)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-field{display:flex;flex-direction:column;gap:5px}
.form-field.full{grid-column:1/-1}
.form-label{
  font-size:10px;font-weight:700;color:var(--text3);
  text-transform:uppercase;letter-spacing:.09em;
}
.form-input,.form-select,.form-textarea{
  background:var(--glass-1);
  border:1px solid var(--glass-border);
  border-radius:var(--r-sm);padding:9px 12px;
  font-size:13px;color:var(--text);
  font-family:var(--font-body);transition:var(--t-fast);
  outline:none;width:100%;box-sizing:border-box;
  backdrop-filter:var(--blur-xs);
}
.form-input:focus,.form-select:focus,.form-textarea:focus{
  border-color:rgba(96,165,250,0.5);
  background:var(--glass-2);
  box-shadow:0 0 0 3px rgba(96,165,250,0.10);
}
[data-theme="light"] .form-input,[data-theme="light"] .form-select,[data-theme="light"] .form-textarea{
  background:rgba(255,255,255,0.7);border-color:var(--glass-border);
}
.form-select option{background:var(--bg2)}
.form-textarea{resize:vertical;min-height:80px;line-height:1.55}

/* ════════════ DETAIL PANEL ══════════════════════ */
.detail-panel{
  position:fixed;right:0;top:var(--topbar);bottom:0;width:420px;
  background:var(--glass-2);
  backdrop-filter:var(--blur-xl);
  -webkit-backdrop-filter:var(--blur-xl);
  border-left:1px solid var(--glass-border);
  overflow-y:auto;
  transform:translateX(100%);
  transition:transform 0.28s var(--ease-spring);
  z-index:150;padding:22px;
  box-shadow:-8px 0 40px rgba(0,0,0,0.3);
}
[data-theme="light"] .detail-panel{background:rgba(255,255,255,0.9);box-shadow:-6px 0 30px rgba(0,0,0,0.10)}
.detail-panel.open{transform:translateX(0)}
.detail-panel.resizing{transition:none!important}
/* Resize handle — lets desktop users drag the panel's left edge to widen/narrow it */
.detail-panel-resize-handle{
  position:absolute;top:0;left:-4px;bottom:0;width:8px;
  cursor:ew-resize;z-index:20;background:transparent;touch-action:none;
}
.detail-panel-resize-handle::after{
  content:'';position:absolute;top:0;bottom:0;left:3px;width:2px;
  border-radius:2px;background:transparent;transition:background .15s ease;
}
.detail-panel-resize-handle:hover::after,
.detail-panel.resizing .detail-panel-resize-handle::after{background:var(--blue)}
body.detail-resizing{cursor:ew-resize!important;user-select:none!important}
body.detail-resizing *{user-select:none!important}
/* Mobile is a bottom-sheet, not a resizable side panel — and fullscreen is a fixed 100vw state */
@media (max-width: 768px){
  .detail-panel-resize-handle{display:none}
}
.detail-panel.fullscreen .detail-panel-resize-handle{display:none}
.det-panel-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--glass-border);
}
.det-panel-close{
  width:30px;height:30px;border-radius:var(--r-sm);
  background:var(--glass-1);border:1px solid var(--glass-border);
  color:var(--text2);cursor:pointer;font-size:16px;
  display:flex;align-items:center;justify-content:center;
  transition:var(--t-fast);flex-shrink:0;
}
.det-panel-close:hover{background:var(--red-dim);border-color:rgba(248,113,113,0.35);color:var(--red);transform:scale(1.08)}
.det-panel-expand{
  width:30px;height:30px;border-radius:var(--r-sm);
  background:var(--glass-1);border:1px solid var(--glass-border);
  color:var(--text2);cursor:pointer;font-size:13px;
  display:flex;align-items:center;justify-content:center;
  transition:var(--t-fast);flex-shrink:0;
}
.det-panel-expand:hover{background:var(--glass-2);border-color:var(--glass-border-h);color:var(--text);transform:scale(1.08)}
/* full-screen mode */
.detail-panel.fullscreen{
  width:100vw!important;
  left:0!important;right:0!important;
  top:var(--topbar)!important;
  border-left:none;border-radius:0;
  z-index:160;
  padding:24px 28px;
}
.detail-panel.fullscreen #detail-content{
  max-width:1100px;margin:0 auto;
}
/* expand icon set via JS textContent */
.detail-pair{
  font-family:var(--font-head);font-size:26px;font-weight:800;
  margin-bottom:4px;letter-spacing:-0.8px;
}
.detail-meta{font-size:12px;color:var(--text2);margin-bottom:18px;font-weight:400}
.detail-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:18px}
.detail-stat{
  background:var(--glass-1);border:1px solid var(--glass-border);
  border-radius:var(--r-md);padding:11px 13px;transition:var(--t-fast);
}
.detail-stat:hover{background:var(--glass-2);border-color:var(--glass-border-h)}
.detail-stat-label{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px;font-weight:600}
.detail-stat-val{font-family:var(--font-mono);font-size:14px;font-weight:600;letter-spacing:-0.2px}
.detail-section{margin-bottom:16px}
.detail-section-label{font-size:10px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.10em;margin-bottom:8px}
.checklist{display:flex;flex-direction:column;gap:5px}
.check-item{
  display:flex;align-items:center;gap:9px;font-size:12px;
  padding:7px 11px;background:var(--glass-0);
  border:1px solid var(--glass-border);
  border-radius:var(--r-sm);color:var(--text2);
  transition:var(--t-fast);cursor:pointer;
}
.check-item:hover{background:var(--glass-1)}
.check-item .ci{
  width:15px;height:15px;border-radius:4px;
  border:1.5px solid var(--glass-border);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:9px;transition:var(--t-fast);
}
.check-item.checked .ci{background:var(--green);border-color:var(--green);color:#fff;box-shadow:0 0 8px var(--green-glow)}
.notes-area{
  width:100%;background:var(--glass-1);
  border:1px solid var(--glass-border);
  border-radius:var(--r-md);padding:11px 12px;
  font-size:12px;color:var(--text);font-family:var(--font-body);
  resize:vertical;min-height:90px;outline:none;line-height:1.55;
  transition:var(--t-fast);
}
.notes-area:focus{border-color:rgba(96,165,250,0.45);background:var(--glass-2);box-shadow:0 0 0 3px rgba(96,165,250,0.08)}
.img-upload-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:6px}
.img-slot{
  aspect-ratio:16/10;
  border:1.5px dashed var(--glass-border);
  border-radius:var(--r-md);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  cursor:pointer;background:var(--glass-0);
  transition:var(--t-fast);position:relative;overflow:hidden;font-size:20px;
}
.img-slot:hover{border-color:rgba(96,165,250,0.4);background:var(--glass-1);transform:scale(1.02)}
.img-slot .slot-label{font-size:10px;color:var(--text3);margin-top:4px;text-align:center}
.img-slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:10px}
.img-slot .img-overlay{
  position:absolute;inset:0;background:rgba(0,0,0,.55);
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:var(--t-fast);border-radius:10px;font-size:12px;color:#fff;
}
.img-slot:hover .img-overlay{opacity:1}
.emotion-btns{display:flex;flex-wrap:wrap;gap:6px}
.emo-btn{
  padding:5px 12px;border-radius:var(--r-full);
  border:1px solid var(--glass-border);background:var(--glass-1);
  color:var(--text2);font-size:11px;cursor:pointer;transition:var(--t-fast);font-weight:500;
}
.emo-btn:hover{background:var(--glass-2);color:var(--text);border-color:var(--glass-border-h)}
.emo-btn.active{background:var(--blue-dim);border-color:rgba(96,165,250,0.35);color:var(--blue);box-shadow:var(--glow-blue)}
.save-btn{
  width:100%;padding:11px;
  background:linear-gradient(135deg,rgba(96,165,250,0.22),rgba(96,165,250,0.14));
  border:1px solid rgba(96,165,250,0.35);
  border-radius:var(--r-md);color:var(--blue);font-size:13px;
  font-weight:600;font-family:var(--font-body);cursor:pointer;
  margin-top:14px;transition:var(--t-fast);
  box-shadow:var(--glow-blue);letter-spacing:0.2px;
}
.save-btn:hover{background:linear-gradient(135deg,rgba(96,165,250,0.32),rgba(96,165,250,0.22));box-shadow:0 0 28px rgba(96,165,250,0.25);transform:translateY(-1px)}
.save-btn.saved{background:linear-gradient(135deg,rgba(52,211,153,0.22),rgba(52,211,153,0.12));border-color:rgba(52,211,153,0.35);color:var(--green);box-shadow:var(--glow-green)}