/* positions.css — styles for positions.js (trade positions panel, row actions,
   confirm dialog). Theme tokens only (web/style.css :root), so dark and light
   both work; under 640px the tables become stacked cards. */

.pos-panel { gap: 8px; }
.pos-head { flex-wrap: wrap; gap: 6px; margin-top: 0; }
.pos-head .btn { margin-left: auto; }
.pos-badge { margin-top: 0; }
.pos-badge-paper { background: var(--surface-3); color: var(--text-dim); }
.pos-badge-be {
  margin: 0 0 0 4px; padding: 0 5px; font-size: 9px;
  background: var(--success-soft); color: var(--success);
}
.pos-head .manage-badge-danger { background: var(--danger-soft); border: 1px solid var(--danger-line); }
.pos-head .manage-badge-warn { background: var(--warn-soft); border: 1px solid var(--warn-line); }
.pos-asof { flex: 1 1 auto; min-width: 0; }

.pos-note {
  font-size: 11.5px; color: var(--text-dim); padding: 5px 8px;
  border: 1px solid var(--border-soft); border-radius: var(--radius-sm); background: var(--surface-2);
  overflow-wrap: anywhere;
}
.pos-note-warn { color: var(--warn); border-color: var(--warn-line); background: var(--warn-soft); }
.pos-error { color: var(--danger); }

.pos-section-title {
  font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--text-faint); margin-top: 4px;
}
.pos-table td { vertical-align: middle; white-space: nowrap; }
.pos-table td strong { color: var(--text); font-weight: 600; }
.pos-dim { color: var(--text-faint); }
.pos-side { font-weight: 700; font-size: 10.5px; letter-spacing: 0.4px; }
.pos-side-long { color: var(--success); }
.pos-side-short { color: var(--danger); }
.pos-gain { color: var(--success); }
.pos-loss { color: var(--danger); }
.pos-tp-hit { color: var(--success); font-weight: 600; }
.pos-run { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px; }
.pos-row-cancelled td { opacity: 0.7; }
.pos-row-actions { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.pos-actions-cell { text-align: right; }

.pos-closed > summary {
  cursor: pointer; font-size: 10.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--text-faint); padding: 2px 0;
}
.pos-closed[open] > summary { margin-bottom: 4px; }

/* "Last cycle" explanation under an empty Open section */
.pos-lc {
  display: flex; flex-direction: column; gap: 3px; padding: 6px 8px; font-size: 11.5px;
  border: 1px solid var(--border-soft); border-radius: var(--radius-sm); background: var(--surface-2);
  min-width: 0;
}
.pos-lc-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.pos-lc-title {
  font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-faint);
}
.pos-lc-meta { color: var(--text-dim); flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.pos-lc-runs { margin-left: auto; }
.pos-lc-line { color: var(--text); overflow-wrap: anywhere; }
.pos-lc-warn { color: var(--warn); }
.pos-lc-dim { color: var(--text-dim); }

/* Confirm dialog */
.pos-confirm-body { padding-bottom: 0; }
.pos-confirm-line { margin: 0 0 6px; overflow-wrap: anywhere; }
.pos-confirm-line:first-child { color: var(--text); font-weight: 600; }
.pos-confirm-extra { padding: 4px 18px 0; display: flex; flex-direction: column; gap: 4px; }
.pos-confirm-extra:empty { display: none; }
.pos-confirm-error { padding: 6px 18px 0; min-height: 0; }
.pos-confirm-error:empty { display: none; }

/* Phone width: each row becomes a stacked card (label ← data-label). */
@media (max-width: 640px) {
  .pos-scroll { overflow-x: visible; }
  .pos-table, .pos-table tbody, .pos-table tr, .pos-table td { display: block; width: 100%; }
  .pos-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .pos-table tr {
    border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
    background: var(--surface-2); padding: 4px 8px; margin-bottom: 6px;
  }
  .pos-table td {
    display: flex; justify-content: space-between; align-items: center; gap: 10px;
    border-top: 0; padding: 3px 0; white-space: normal; overflow-wrap: anywhere; text-align: right;
  }
  .pos-table td::before {
    content: attr(data-label); flex: 0 0 auto; text-align: left;
    font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-faint);
  }
  .pos-table td.pos-actions-cell { display: block; padding-top: 6px; }
  .pos-table td.pos-actions-cell::before { display: none; }
  .pos-row-actions { justify-content: stretch; }
  .pos-row-actions .btn { flex: 1 1 auto; }
}