/* assets/css/journal.css (KOMPLETT ERSETZEN) */

#journalTable{font-size:.84rem}
#journalTable th,#journalTable td{padding:.30rem .42rem}
#journalTable th{position:static !important}
.journal-card{min-height:0}

/* KPI bar: full width, equal */
.kpi-bar{
  width:100%;
  display:grid;
  grid-template-columns:repeat(6, minmax(0,1fr));
  gap:.6rem;
  align-items:stretch;
}
.kpi-bar .pill{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding:.45rem .65rem;
}
@media (max-width: 1200px){
  .kpi-bar{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}
@media (max-width: 680px){
  .kpi-bar{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}

/* Details */
.details-row td{padding:0;border-bottom:none}
.details{
  padding:.75rem;
  border-top:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.18);
  width:100%;
  max-width:none;
  margin:0;
}
:root[data-theme="light"] .details{
  border-top:1px solid rgba(0,0,0,.10);
  background:rgba(255,255,255,.90);
}

/* Header filter */
.thcell{display:flex;align-items:center;justify-content:space-between;gap:.35rem;min-width:0}
.thtitle{font-weight:850;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.thfilter-wrap{display:flex;align-items:center;gap:.25rem;position:relative}

.filter-btn{
  width:26px;height:26px;border-radius:8px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.18);
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;
}
:root[data-theme="light"] .filter-btn{border:1px solid rgba(0,0,0,.12);background:rgba(255,255,255,.95)}
.filter-btn:hover{border-color:rgba(0,212,255,.35);box-shadow:var(--glow)}
:root[data-theme="light"] .filter-btn:hover{border-color:rgba(0,109,255,.35)}
.filter-btn.active{border-color:rgba(0,212,255,.55);box-shadow:var(--glow)}
.filter-btn::before{
  content:"";width:12px;height:12px;display:block;background:currentColor;
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M3 4h18l-7 8v6l-4 2v-8z"/></svg>') center/contain no-repeat;
          mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M3 4h18l-7 8v6l-4 2v-8z"/></svg>') center/contain no-repeat;
  color:var(--text-muted);
}

/* Filter popup: open RIGHT; JS may shift left using --shift */
.filter-pop{
  display:none;
  position:absolute;
  top:30px;
  left:0;                 /* ✅ open right */
  right:auto;
  transform: translateX(var(--shift, 0px));
  z-index:30;

  width: min(200px, calc(100vw - 28px));
  max-height:280px;
  overflow:auto;

  border:1px solid var(--border);
  border-radius:12px;
  background:rgba(20,20,40,.98);
  box-shadow:0 14px 45px rgba(0,0,0,.55);
  padding:.55rem;
}
:root[data-theme="light"] .filter-pop{
  background:rgba(255,255,255,.98);
  box-shadow:0 14px 40px rgba(0,0,0,.18);
}
.thfilter-wrap.open .filter-pop{display:block}

.filter-pop .pop-head{display:flex;justify-content:space-between;align-items:center;gap:.5rem;margin-bottom:.35rem}
.filter-pop .pop-title{font-weight:850;font-size:.9rem}
.filter-pop label{display:flex;gap:.5rem;align-items:center;padding:.25rem .2rem;border-radius:8px;cursor:pointer}
.filter-pop label:hover{background:rgba(255,255,255,.06)}
:root[data-theme="light"] .filter-pop label:hover{background:rgba(0,0,0,.04)}
.filter-pop input[type="checkbox"]{width:16px;height:16px}

/* TP cells */
.tp-cell{display:flex;flex-direction:column;gap:.1rem}
.tp-price{font-weight:800}
.tp-qty{font-size:.78rem;color:var(--text-muted)}

/* TP editor */
.tp-edit{
  margin-top:.75rem;
  padding:.75rem;
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
  background:rgba(0,0,0,.10);
}
:root[data-theme="light"] .tp-edit{border:1px solid rgba(0,0,0,.10);background:rgba(0,0,0,.03)}
.tp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.5rem;margin-top:.5rem}

/* Close panel */
.close-panel{
  margin-top:.75rem;
  padding:.6rem;
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
  background:rgba(0,0,0,.16);
}
:root[data-theme="light"] .close-panel{border:1px solid rgba(0,0,0,.10);background:rgba(255,255,255,.75)}
.close-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:.5rem;margin-top:.5rem;
}
.close-grid input,.close-grid select{
  width:100%;
  padding:.22rem .38rem;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.25);
  color:var(--text);
  font-size:.84rem;
}
:root[data-theme="light"] .close-grid input,
:root[data-theme="light"] .close-grid select{
  border:1px solid rgba(0,0,0,.12);
  background:rgba(255,255,255,.95);
}

/* ✅ Journal KPI Summary: wirklich volle Breite der Journal-Box */
#journalSummary{
  width:100% !important;
  display:block !important;
  grid-column: 1 / -1; /* falls parent ein grid ist */
}

#journalSummary .kpi-bar{
  width:100% !important;
  grid-column: 1 / -1; /* safety */
}

#journalSummary .kpi-bar .pill{
  width:100% !important;
}

/* Entry Splits & Exit Splits: Zeilen nebeneinander */
.fill-grid .fill-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.45rem;
}

.fill-grid .fill-row input[type="datetime-local"]{ width:200px; }
.fill-grid .fill-row input{ width:140px; max-width:40vw; }

/* Delete oder REST pill ganz rechts */
.fill-grid .fill-row [data-ef-del],
.fill-grid .fill-row .pill{
  margin-left:auto;
}

/* Close panel buttons nebeneinander */
.close-panel .inline{
  display:flex;
  flex-wrap:wrap;
  gap:.45rem;
  align-items:center;
}

/* ============================
   Journal – Tabellarische Exit-Splits (Slots)
   ============================ */

.slot-box{
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
  padding:.6rem;
  background: rgba(0,0,0,.10);
  margin-top:.6rem;
}
:root[data-theme="light"] .slot-box{
  border:1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.85);
}

/* Titelzeile wie Tabellen-Header: Slot | Plan | Gebucht | Rest | Toggle */
.slot-head{
  display:grid;
  grid-template-columns:
    minmax(140px, 1.4fr)  /* slot */
    minmax(140px, 1fr)    /* plan */
    minmax(140px, 1fr)    /* booked */
    minmax(140px, 1fr)    /* rest */
    46px;                 /* + / - */
  gap:.45rem;
  align-items:center;
  padding:.45rem .55rem;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
}
:root[data-theme="light"] .slot-head{
  border:1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.04);
}

.slot-head .pill{
  width:100%;
  display:inline-flex;
  justify-content:center;
  align-items:center;
  padding:.28rem .45rem;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.12);
  font-size:.82rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
:root[data-theme="light"] .slot-head .pill{
  border:1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.95);
}

.slot-head button.btn.small{
  width:46px;
  height:32px;
  padding:0;
  border-radius:10px;
  justify-self:end;
}

/* Exit Event Rows (Time | Price | Qty | Fee | PnL | X) */
.slot-box .fill-row{
  display:grid;
  grid-template-columns:
    210px                 /* time */
    minmax(130px, 1fr)    /* price */
    minmax(130px, 1fr)    /* qty */
    minmax(150px, 1fr)    /* fee */
    minmax(160px, 1fr)    /* pnl */
    46px;                 /* button */
  gap:.45rem;
  align-items:center;
  padding:.42rem .55rem;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.10);
  margin-top:.45rem;
}
:root[data-theme="light"] .slot-box .fill-row{
  border:1px solid rgba(0,0,0,.08);
  background: rgba(0,0,0,.03);
}
.slot-box .fill-row:nth-child(even){
  background: rgba(255,255,255,.04);
}
:root[data-theme="light"] .slot-box .fill-row:nth-child(even){
  background: rgba(0,0,0,.02);
}

.slot-box .fill-row input{
  width:100%;
  height:34px;
  padding:.25rem .45rem;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  color: var(--text);
  font-size:.85rem;
}
:root[data-theme="light"] .slot-box .fill-row input{
  border:1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.95);
  color:#111;
}

.slot-box .fill-row .btn.small{
  width:46px;
  height:34px;
  padding:0;
  border-radius:10px;
}

/* New Exit Row highlight */
.slot-box .fill-row[data-ev-new]{
  border-color: rgba(0,212,255,.35);
}
:root[data-theme="light"] .slot-box .fill-row[data-ev-new]{
  border-color: rgba(0,109,255,.30);
}

/* Responsive */
@media (max-width: 900px){
  .slot-head{
    grid-template-columns: 1fr 1fr 1fr 1fr 46px;
  }
  .slot-box .fill-row{
    grid-template-columns: 1fr 1fr;
  }
  .slot-box .fill-row input[type="datetime-local"]{ grid-column: 1 / -1; }
  .slot-box .fill-row .btn.small{ grid-column: 2; justify-self:end; }
}

/* Journal Focus row */
.journal-focus{
  width:100%;
  display:flex;
  gap:.6rem;
  align-items:center;
  margin-top:.85rem;
  padding:.55rem .7rem;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.10);
}
:root[data-theme="light"] .journal-focus{
  border:1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.92);
}
.journal-focus label{ font-weight:850; color:var(--text); white-space:nowrap; }
.journal-focus select{ flex:1; min-width:180px; }

/* Exit table */
.exit-editor{
  margin-top:.85rem;
  padding:.75rem;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.10);
}
:root[data-theme="light"] .exit-editor{
  border:1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.90);
}

.exit-head{
  display:flex;
  justify-content:space-between;
  gap:.8rem;
  align-items:flex-end;
}
.exit-head .left{ display:flex; gap:.55rem; align-items:center; flex-wrap:wrap; }
.exit-head .right{ display:flex; gap:.45rem; align-items:center; }

.exit-table{
  margin-top:.7rem;
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
  overflow:hidden;
}
:root[data-theme="light"] .exit-table{
  border:1px solid rgba(0,0,0,.10);
}

.exit-table .thead, .exit-table .trow{
  display:grid;
  grid-template-columns: 210px 1fr 1fr 1fr 1fr 56px;
  gap:.4rem;
  align-items:center;
  padding:.42rem .55rem;
}
.exit-table .thead{
  font-weight:900;
  background: rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.10);
}
:root[data-theme="light"] .exit-table .thead{
  background: rgba(0,0,0,.04);
  border-bottom:1px solid rgba(0,0,0,.10);
}

.exit-table .trow{
  background: rgba(0,0,0,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.exit-table .trow:nth-child(even){ background: rgba(255,255,255,.03); }
:root[data-theme="light"] .exit-table .trow{ background: rgba(255,255,255,.92); }
:root[data-theme="light"] .exit-table .trow:nth-child(even){ background: rgba(0,0,0,.02); }

.exit-table input{
  width:100%;
  height:34px;
  padding:.25rem .45rem;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  color:var(--text);
  font-size:.85rem;
}
:root[data-theme="light"] .exit-table input{
  border:1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.95);
  color:#111;
}
.exit-table .btn.small{
  width:56px;
  height:34px;
  padding:0;
  border-radius:10px;
}
.exit-table .trow.new{
  border-top:1px solid rgba(0,212,255,.25);
}
.exit-table .trow.new .hint{
  font-weight:900;
  color: var(--text-muted);
  text-align:center;
}

.exit-table .done{
  padding:.6rem .75rem;
  color: var(--text-muted);
  background: rgba(0,0,0,.08);
}

/* Responsive */
@media (max-width: 900px){
  .exit-table .thead{ display:none; }
  .exit-table .trow{
    grid-template-columns: 1fr 1fr;
  }
  .exit-table .trow input[type="datetime-local"]{ grid-column: 1/-1; }
  .exit-table .trow .btn.small,
  .exit-table .trow .hint{ grid-column: 2; justify-self:end; }
}

.tp-cell.hit .tp-price{
  font-weight: 950;
  color: var(--secondary);
  font-size: 1.05rem;
}
td:nth-child(9) { font-weight: 900; } /* SL column slightly stronger */
.focus-row{ outline: 2px solid rgba(0,212,255,.25); }
.manual-trade{
  margin-top:.7rem;
  padding:.7rem;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.10);
}
.manual-trade .grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
  gap:.6rem;
}

.tp-cell.hit .tp-price{
  font-weight: 950;
  color: var(--secondary);
  font-size: 1.05rem;
}