/* ============================================================ */
/* portfolio.css — Portfolio.exe + Flexes.exe (Feature 12)       */
/* Win98 chrome: Tahoma 11px, #d4d0c8, inset/outset borders.     */
/* ============================================================ */

.win98-window.window-portfolio,
.win98-window.window-flexes {
  width: 640px;
  max-width: calc(100vw - 24px);
  min-height: 380px;
  max-height: min(600px, calc(100vh - 96px));
  display: flex;
  flex-direction: column;
  font-family: Tahoma, sans-serif;
  font-size: 11px;
}

/* ── Shared toolbar/tabs ── */
.pf-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  border-bottom: 1px solid #808080;
  background: #d4d0c8;
  flex-wrap: wrap;
}
.pf-toolbar-spacer { flex: 1; }

.pf-tab, .flexes-filter, .flexes-sort {
  font-family: Tahoma, sans-serif;
  font-size: 11px;
  padding: 2px 10px;
  background: #d4d0c8;
  border: 1px solid;
  border-color: #fff #808080 #808080 #fff;
  cursor: pointer;
  color: #000;
}
.pf-tab:hover, .flexes-filter:hover, .flexes-sort:hover { background: #dedbd6; }
.pf-tab.active, .flexes-filter.active, .flexes-sort.active {
  background: #fff;
  border-color: #808080 #fff #fff #808080;
  font-weight: bold;
}

.pf-pane {
  flex: 1;
  overflow: auto;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pf-empty { text-align: center; padding: 18px; color: #666; }
.pf-pct-up   { color: #006600; }
.pf-pct-down { color: #990000; }
.pf-num { text-align: right; font-variant-numeric: tabular-nums; }
.pf-sym { font-weight: bold; }

.pf-status { min-height: 13px; font-size: 10px; color: #444; }
.pf-status.is-error   { color: #990000; }
.pf-status.is-success { color: #006600; }
.pf-status.is-busy    { color: #666; }

/* ── Sign-in gate ── */
.pf-signed-out {
  padding: 24px;
  text-align: center;
  color: #333;
}
.pf-signed-out a { color: #0000cc; }

/* ── Holdings ── */
.pf-total-bar {
  display: flex;
  justify-content: space-between;
  padding: 4px 6px;
  background: #fff;
  border: 1px inset #d4d0c8;
}
.pf-total-bar b { font-weight: bold; }

.pf-grid {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border: 1px inset #d4d0c8;
}
.pf-grid thead th {
  background: #d4d0c8;
  border: 1px solid #808080;
  border-top: 1px solid #fff;
  border-left: 1px solid #fff;
  padding: 3px 6px;
  text-align: left;
  font-weight: normal;
  white-space: nowrap;
}
.pf-grid thead th.pf-num { text-align: right; }
.pf-grid tbody td { padding: 3px 6px; border-bottom: 1px solid #e8e4dc; white-space: nowrap; }
.pf-grid tbody tr:nth-child(even) { background: #f8f6f2; }
.pf-row-actions { white-space: nowrap; }

.pf-form {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: flex-end;
  padding: 6px;
  background: #d4d0c8;
  border: 1px solid;
  border-color: #fff #808080 #808080 #fff;
}
.pf-form-field { display: flex; flex-direction: column; gap: 1px; }
.pf-form-field label { font-size: 10px; color: #333; }
.pf-form-field input, .pf-form-field select {
  font-family: Tahoma, sans-serif;
  font-size: 11px;
  padding: 2px 4px;
  border: 1px solid;
  border-color: #808080 #fff #fff #808080;
  background: #fff;
}
.pf-form-field input { width: 90px; }
.pf-form-field input.pf-wide { width: 170px; }

/* ── Wallets ── */
.pf-wallet-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 6px;
  background: #fff;
  border: 1px solid #e8e4dc;
}
.pf-wallet-chain { font-weight: bold; min-width: 38px; }
.pf-wallet-label { color: #333; min-width: 60px; }
.pf-wallet-addr {
  font-family: 'Courier New', monospace;
  font-size: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
.pf-wallet-bal { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── History ── */
.pf-history-chart svg { border: 1px inset #d4d0c8; background: #fff; display: block; max-width: 100%; }
.pf-history-meta { font-size: 10px; color: #444; }

/* ── Settings (privacy = the entire game) ── */
.pf-privacy-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  background: #fff;
  border: 1px inset #d4d0c8;
}
.pf-privacy-option { display: flex; align-items: flex-start; gap: 6px; }
.pf-privacy-option .pf-privacy-copy { font-family: 'Courier New', monospace; font-size: 11px; }
.pf-privacy-option .pf-privacy-desc { color: #555; font-size: 10px; display: block; }

.pf-doxxed-confirm {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  background: #ffe4e4;
  border: 1px solid #a00;
  padding: 6px;
  font-size: 10px;
}

/* ── Flexes cards ── */
.pf-flex-card {
  background: #fff;
  border: 1px inset #d4d0c8;
  padding: 6px 8px;
  margin-bottom: 6px;
}
.pf-flex-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  border-bottom: 1px solid #e8e4dc;
  padding-bottom: 3px;
  margin-bottom: 4px;
}
.pf-flex-handle { font-weight: bold; }
.pf-flex-mode { color: #666; font-size: 10px; }
.pf-flex-total { font-variant-numeric: tabular-nums; }
.pf-flex-pnl { margin-left: auto; font-size: 10px; color: #444; white-space: nowrap; }

.pf-flex-alloc-row { display: flex; align-items: center; gap: 6px; padding: 1px 0; }
.pf-flex-alloc-sym { min-width: 52px; font-weight: bold; }
.pf-flex-alloc-bar {
  flex: 1;
  height: 8px;
  background: #e8e4dc;
  border: 1px solid #808080;
  overflow: hidden;
}
.pf-flex-alloc-bar span { display: block; height: 100%; background: #000080; }
.pf-flex-alloc-pct { min-width: 44px; text-align: right; font-variant-numeric: tabular-nums; }
.pf-flex-alloc-pnl { min-width: 56px; text-align: right; font-variant-numeric: tabular-nums; font-size: 10px; }

.pf-flex-table { width: 100%; border-collapse: collapse; margin-bottom: 4px; }
.pf-flex-table th {
  text-align: left; font-weight: normal; color: #666;
  border-bottom: 1px solid #e8e4dc; padding: 1px 4px; font-size: 10px;
}
.pf-flex-table th.pf-num { text-align: right; }
.pf-flex-table td { padding: 1px 4px; }
.pf-flex-wallet { font-size: 10px; color: #444; word-break: break-all; }

/* ── Mobile (375px checklist item) ── */
@media (max-width: 480px) {
  .pf-form-field input, .pf-form-field input.pf-wide { width: 120px; }
  .pf-flex-pnl { margin-left: 0; width: 100%; }
  .pf-wallet-label { display: none; }
}