/* TRADLYT - professional polish. Load LAST, after every other stylesheet.
   Scoped to the Dashboard, Trade Journal, Weekly Report, Analytics, Settings, Playbooks,
   Reports, sidebar and login. The Calendar, Lot Size and Mindset Journal are not touched. */

/* Aligned, steady numbers everywhere that shows money or stats */
.stat-value, .stat-sub, .breakdown-table td, .breakdown-table th,
.eq-tip, .score-badge, .rp-net, .rp-kv dd, .wk-val { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* Keyboard focus that is visible but quiet */
.btn:focus-visible, .tab:focus-visible, .small-btn:focus-visible, .text-button:focus-visible,
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible,
.currency-select:focus-visible { outline: 2px solid #22c55e; outline-offset: 2px; }

/* Page headings */
#dashboard .page-heading h2, #history .page-heading h2, #weekly .page-heading h2,
#analytics .page-heading h2, #settings .page-heading h2, #playbooks .page-heading h2,
#reports .page-heading h2 { font-size: clamp(24px, 2.6vw, 30px); letter-spacing: -0.02em; font-weight: 800; }

/* Sidebar: clear active marker */
.sidebar .tab { position: relative; transition: background .15s ease, color .15s ease; }
.sidebar .tab.active::before {
  content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 3px; border-radius: 0 3px 3px 0; background: #22c55e;
}

/* Stat cards: calmer, no lift on hover (feels like a terminal, not a landing page) */
#dashboard .stat-card, #history .stat-card, #analytics .stat-card { transition: border-color .15s ease; }
#dashboard .stat-card:hover, #history .stat-card:hover, #analytics .stat-card:hover { transform: none; box-shadow: none; border-color: var(--border-light, #2b3953); }

/* Tables: sticky header, row hover, tidy edges */
.table-wrap { overflow: auto; border-radius: 10px; }
.breakdown-table thead th { position: sticky; top: 0; z-index: 1; background: var(--panel, #0e1524); }
.breakdown-table tbody tr { transition: background .12s ease; }
.breakdown-table tbody tr:hover { background: rgba(128, 128, 128, .08); }
.breakdown-table tbody tr:last-child td { border-bottom: 0; }
.breakdown-table td.positive, .breakdown-table .positive { color: #22c55e; }
.breakdown-table td.negative, .breakdown-table .negative { color: #ef4444; }

/* Result badges read at a glance */
.trade-badge { letter-spacing: .04em; font-weight: 800; }

/* Trade journal cards */
#history .trade-card { border-radius: 14px; }
#history .trade-card:hover { border-color: var(--border-light, #2b3953); box-shadow: none; }

/* Equity chart (interactive) */
.eq-host { position: relative; color: var(--text, #f5f7fb); }
.eq-svg { width: 100%; height: auto; display: block; touch-action: pan-y; }
.eq-svg #eqHit { cursor: crosshair; }
.eq-tip {
  position: absolute; transform: translate(-50%, -100%); pointer-events: none; z-index: 5;
  min-width: 140px; padding: 9px 12px; border-radius: 10px;
  background: var(--panel-2, #121b2e); color: var(--text, #f5f7fb);
  border: 1px solid var(--border-light, #2b3953); box-shadow: 0 10px 28px rgba(0, 0, 0, .35);
}
.eq-tip[hidden] { display: none; }
.eq-tip-date { font-size: 11px; color: var(--text-muted, #7f8ba1); margin-bottom: 3px; }
.eq-tip-bal { font-size: 16px; font-weight: 800; }
.eq-tip-pnl { font-size: 12px; font-weight: 700; margin-top: 2px; }
.eq-tip-pnl.positive { color: #22c55e; }
.eq-tip-pnl.negative { color: #ef4444; }

/* Login card */
.auth-card { border-radius: 18px; }
.auth-card .btn.primary { min-height: 46px; }

/* Thin, modern scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--border-light, #2b3953) transparent; }

@media (prefers-reduced-motion: reduce) {
  *:not(.calendar-day) { transition: none !important; animation: none !important; }
}
/* =========================================================
   CALENDAR WEEK TOTALS + AVG WIN/LOSS + COMPACT DASHBOARD
   Paste at the VERY BOTTOM of tradlyt-polish.css
   (delete the older block with this same title first)
========================================================= */

/* ---------- Calendar: 7 days + a Week column ---------- */

.calendar-weekdays,
.calendar-grid {
  grid-template-columns: repeat(7, minmax(0, 1fr)) 108px;
}

.cal-week-head {
  text-align: center;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.cal-week {
  min-height: 74px;
  padding: 8px;

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

  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.cal-week-label {
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 700;
}

.cal-week-pnl {
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  word-break: break-word;
}

.cal-week-pnl.positive { color: var(--green); }
.cal-week-pnl.negative { color: var(--red); }

.cal-week-days {
  align-self: flex-start;
  padding: 2px 8px;

  color: var(--text-muted);
  background: var(--panel-2);
  border-radius: 999px;

  font-size: 10px;
  font-weight: 600;
}

.calendar-summary-item strong.positive { color: var(--green); }
.calendar-summary-item strong.negative { color: var(--red); }


/* ---------- Dashboard: compact cards, all in ONE row ---------- */

#dashboard .tl-one-row .stat-card {
  padding: 10px 11px 10px 13px !important;
  min-height: 0 !important;
  border-radius: 12px;
}

#dashboard .tl-one-row .stat-label {
  margin-bottom: 5px !important;

  font-size: 9.5px !important;
  letter-spacing: 0.04em !important;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#dashboard .tl-one-row .stat-value {
  font-size: clamp(13px, 1.15vw, 17px) !important;
  letter-spacing: -0.02em;

  white-space: nowrap !important;
  word-break: normal !important;
}

#dashboard .tl-one-row .stat-sub {
  margin-top: 4px !important;

  font-size: 10px !important;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* ---------- Avg win / loss card ---------- */

.avg-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 12px;
  height: 12px;
  margin-left: 4px;

  border: 1px solid var(--text-muted);
  border-radius: 50%;

  color: var(--text-muted);
  font-size: 8px;
  font-weight: 700;
  font-style: italic;
  text-transform: none;

  cursor: help;
}

.avg-wl-body {
  display: flex;
  align-items: center;
  gap: 8px;
}

.avg-wl-ratio {
  font-size: clamp(16px, 1.5vw, 20px);
  font-weight: 800;
  line-height: 1;
}

.avg-wl-bars {
  flex: 1;
  min-width: 0;
}

.avg-wl-track {
  display: flex;
  height: 6px;
  overflow: hidden;

  background: var(--panel-2);
  border-radius: 999px;
}

.avg-wl-track i { display: block; height: 100%; }
.avg-wl-track .g { background: var(--green); }
.avg-wl-track .r { background: var(--red); }

.avg-wl-amts {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  margin-top: 4px;

  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.avg-wl-amts .positive { color: var(--green); }
.avg-wl-amts .negative { color: var(--red); }


/* ---------- Import trades button (top right, next to New Trade) ---------- */

.tl-import-top {
  flex-shrink: 0;
  width: auto !important;
  margin: 0 !important;
}

.tl-import-top:not(.btn) {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 42px;
  padding: 0 16px;

  color: var(--text-soft);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 9px;

  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.tl-import-top:not(.btn):hover {
  color: var(--text);
  background: var(--panel-hover);
}


/* ---------- Top bar: icons only ---------- */

#themeBtn.tl-icon-btn {
  width: 40px;
  min-width: 40px;
  padding: 0;

  font-size: 17px;
  line-height: 1;
}

.currency-field.tl-cur-icon {
  position: relative;
  width: 44px;
  min-width: 0;
}

.currency-field.tl-cur-icon .currency-select {
  width: 44px;
  padding: 0;

  color: transparent;
  text-align: center;
  cursor: pointer;
}

.currency-field.tl-cur-icon .currency-select option {
  color: var(--text);
  background: var(--panel);
}

.currency-field.tl-cur-icon .cur-icon {
  position: absolute;
  inset: 0;

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

  color: var(--text);
  font-size: 15px;
  font-weight: 800;

  pointer-events: none;
}


/* ---------- Small screens ---------- */

@media (max-width: 700px) {

  .calendar-weekdays,
  .calendar-grid {
    grid-template-columns: repeat(7, minmax(0, 1fr)) 64px;
  }

  .cal-week { padding: 5px; }
  .cal-week-pnl { font-size: 9px; }
  .cal-week-days { display: none; }

}


/* =========================================================
   Main (account) box -> far top right of the Dashboard
   + Trade Journal: Import / New Trade buttons
========================================================= */

/* Dashboard: account dropdown goes to the far right */
#dashboard .acct-bar { justify-content: flex-end; }
#dashboard .acct-bar #acctSel { order: 99; margin-left: auto; }

/* Trade Journal: Import + New Trade side by side, top right */
#history .page-heading { align-items: center; }
#history .hist-actions {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-left: auto; flex-shrink: 0;
}

/* Import = same green as the Dashboard */
#history .tl-import-top {
  display: inline-flex !important; align-items: center; justify-content: center; gap: 8px;
  min-height: 42px; padding: 0 16px !important; border: 1px solid transparent !important;
  border-radius: 9px !important; font-size: 13px; font-weight: 700; color: #fff !important;
  cursor: pointer; margin: 0 !important; width: auto !important;
  background: linear-gradient(135deg, #22c55e, #16a34a) !important;
  box-shadow: 0 4px 14px rgba(34, 197, 94, .25) !important;
}
#history .tl-import-top:hover {
  background: linear-gradient(135deg, #34d399, #16a34a) !important;
  box-shadow: 0 8px 22px rgba(34, 197, 94, .35) !important;
  transform: translateY(-1px);
}

/* New Trade = same purple (btn primary) as the Dashboard */
#history #histNewTrade { min-height: 42px; padding: 0 16px; border-radius: 9px; font-size: 13px; font-weight: 700; }