/* components.css -- SI-REQ-020 shared component classes (Task 4). Token-only. */

/* Bare inline text links (2026-08-23): links without a component class (e.g. the
   Manage Tickers page's "Bulk import…" / "Export notebook bundle", portfolio
   empty-state links) get the shared text-link treatment -- accent color + a quiet
   underline that intensifies on hover -- so they never read as plain text.
   Component links (.btn, .bf-chip, nav items, tabs) carry classes and set their
   own colors/decoration, so they are unaffected by this base rule. */
a:not([class]) { color: var(--accent); text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 2px; }
a:not([class]):hover { text-decoration-color: var(--accent); }
a:not([class]):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.btn { display:inline-block; font:inherit; font-weight:var(--fw-medium); padding:7px 14px; border-radius:var(--radius-sm); border:none; background:var(--accent); color:var(--on-accent); cursor:pointer; text-decoration:none; transition:filter var(--dur-fast) var(--ease); }
.btn:hover { filter:brightness(1.1); }
.btn--ghost { background:var(--panel-2); color:var(--fg); border:1px solid var(--border); }
.card { background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:var(--space-4); box-shadow:var(--shadow-sm); }
.table { width:100%; border-collapse:collapse; font-size:var(--fs-base); }
.table th, .table td { padding:var(--space-2) var(--space-3); border-bottom:1px solid var(--border); text-align:right; }
.table th:first-child, .table td:first-child { text-align:left; }
.table th { position:sticky; top:0; z-index:1; color:var(--muted); font-weight:var(--fw-semibold); text-transform:uppercase; font-size:var(--fs-xs); letter-spacing:0.04em; background:var(--panel); }
.table tbody tr { transition:background var(--dur-fast) var(--ease); }
.table--hover tbody tr:hover { background:var(--panel-2); }
.chip { display:inline-block; padding:2px var(--space-2); border-radius:999px; font-size:var(--fs-xs); font-weight:var(--fw-semibold); background:var(--panel-2); color:var(--muted); border:1px solid var(--border); }
.badge { display:inline-block; padding:2px var(--space-2); border-radius:var(--radius-sm); font-size:var(--fs-xs); font-weight:var(--fw-semibold); background:color-mix(in srgb, var(--accent) 20%, transparent); color:var(--accent); }
.empty-state { color:var(--muted); font-style:italic; padding:var(--space-5) var(--space-4); text-align:center; }
.skeleton { background:linear-gradient(90deg, var(--panel-2), var(--panel), var(--panel-2)); background-size:200% 100%; animation:skeleton-shimmer 1.4s var(--ease) infinite; border-radius:var(--radius-sm); color:transparent; }
@keyframes skeleton-shimmer { 0% { background-position:200% 0; } 100% { background-position:-200% 0; } }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--radius-sm); }

/* Wide-table scroll wrapper (>=768px: scroll within the panel, not the page) */
.table-wrap { overflow-x: auto; }

/* Chart series key (SI-REQ-019 follow-up: explain the chart panes/lines) */
.chart-key { margin-top:var(--space-2); font-size:var(--fs-xs); color:var(--muted); line-height:var(--lh); }
.chart-key .key-item { display:block; margin-bottom:2px; }
.chart-key .key-item .swatch { margin-right:5px; vertical-align:middle; }
.chart-key .key-item b { color:var(--fg); font-weight:var(--fw-semibold); }
.chart-key .swatch { display:inline-block; width:14px; height:3px; border-radius:2px; }
.chart-key .swatch--price { background:var(--pos); }
.chart-key .swatch--vol { background:color-mix(in srgb, var(--muted) 50%, transparent); }
.chart-key .swatch--sma20 { background:var(--chart-sma20); }
.chart-key .swatch--sma50 { background:var(--chart-sma50); }
.chart-key .swatch--bench { background:var(--chart-bench); }
.chart-bench-label { position:absolute; font-size:var(--fs-xs); color:var(--chart-bench); background:var(--panel); padding:1px 5px; border:1px solid var(--chart-bench); border-radius:3px; pointer-events:none; z-index:5; white-space:nowrap; }

.chart-sma20-label { position:absolute; font-size:var(--fs-xs); color:var(--chart-sma20); background:var(--panel); padding:1px 5px; border:1px solid var(--chart-sma20); border-radius:3px; pointer-events:none; z-index:5; white-space:nowrap; }
.chart-sma50-label { position:absolute; font-size:var(--fs-xs); color:var(--chart-sma50); background:var(--panel); padding:1px 5px; border:1px solid var(--chart-sma50); border-radius:3px; pointer-events:none; z-index:5; white-space:nowrap; }

/* Chart expand button + one-column focus mode (2026-08-23) */
.chart-panel { min-width: 0; }
.chart-maximize-btn { position:absolute; top:8px; right:8px; z-index:20; display:inline-flex; align-items:center; gap:4px; background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-sm); padding:5px 10px; font-size:var(--fs-sm); font-weight:var(--fw-medium); color:var(--fg); cursor:pointer; box-shadow:var(--shadow-sm); }
.chart-maximize-btn:hover { border-color:var(--accent); color:var(--accent); }
.chart-maximize-btn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
/* Expand folds the two-column page into ONE column: the chart panel becomes the
   column, keeping its description (highlights + chart key) in the flow below the
   graph; the page scrolls to the chart. Nothing is hidden except the sibling
   table column. */
.layout.chart-focused, .screener-layout.chart-focused { grid-template-columns: 1fr; }
.layout.chart-focused > .watchlist-panel, .screener-layout.chart-focused > .screener-panel { display: none; }
.chart-focused .chart-wrap { height: min(72vh, 900px); min-height: 420px; }

/* Markets overview collapsible */
.markets-panel { margin-bottom: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.markets-summary { padding: var(--space-2) var(--space-3); cursor: pointer; font-size: var(--fs-sm); color: var(--muted); background: var(--panel-2); }
.markets-summary:hover { color: var(--fg); }
.markets-panel[open] .markets-summary { border-bottom: 1px solid var(--border); }
#markets-chart { width: 100%; height: 100%; }

/* Shared row-action styles (moved to components.css by SI-DEV-REQ-040 trial
   feedback r1): the portfolio page's savings rows need them too. */
.col-actions {
  text-align: left;
  white-space: nowrap;
}
/* (0,2,1) overrides (trial feedback r4): rows have variable button counts
   (Settle only on matured GICs, Redeem hidden once redeemed), so action
   buttons and their headers justify LEFT everywhere -- a clean leading edge
   instead of a ragged left. .portfolio th forces right at (0,1,1) and its
   stylesheet loads after this file, so each table needs an explicit
   left-override here. */
th.col-actions,
.portfolio th.col-actions,
.account-table th.col-actions,
.savings-table th.col-actions,
.plan-table th.col-actions {
  text-align: left;
}

.btn-edit,
.btn-delete {
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.75rem;
  background: transparent;
  color: var(--muted);
  margin-left: 0.3rem;
}

.btn-delete:hover {
  border-color: var(--neg);
  color: var(--neg);
}

.btn-edit:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* A row's Delete action is a POST form (csrf + filter carry inputs); keep it
   inline so it sits on the same line as the other row actions (SI-DEV-REQ-040
   trial feedback d: block forms wrapped Delete onto a second row). */
form.savings-delete-form {
  display: inline-flex;
  margin: 0;
}

/* Sortable table headers (SI-DEV-REQ-044): one affordance app-wide. The <th>
   markup is owned by templates/_sort_header.html; these styles are token-only
   (hex gate) and apply to every table adopting sortable headers. */
.table--sortable th.sortable a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: inherit;
  text-decoration: none;
}
.table--sortable th.sortable a:hover { color: var(--accent); }
.table--sortable th.sortable a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
th.sortable .sort-arrow { font-size: var(--fs-xs); color: var(--muted); }
th.sortable[aria-sort] .sort-arrow { color: var(--accent); }
th.sortable .sort-arrow--idle { opacity: 0.55; }