/* Bootstrap's .table-responsive sets overflow-x:auto, which - per the CSS overflow
   spec - silently forces overflow-y to compute as "auto" too the moment one axis
   isn't visible, turning it into its own scroll container. That breaks page-level
   sticky <thead> positioning (it sticks to this div instead of the page, and since
   the div isn't height-constrained there's nothing to visibly stick against). We
   want the table to flow with the page and let a wide table widen the page itself
   rather than trapping vertical stickiness inside an invisible scroll container. */
.table-responsive {
    overflow: visible;
}

.manage-portfolio-row {
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--border-hairline);
}

.manage-portfolio-row:last-child {
    border-bottom: none;
}

.manage-portfolio-name-input {
    max-width: 320px;
    font-weight: 600;
    margin-bottom: 0.2rem;
}

.manage-portfolio-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
    flex-wrap: wrap;
}

/* A table is meant to fill its card edge-to-edge (Kite-style), not float in the
   card's normal padding - the header/cell padding below already provides plenty
   of internal spacing on its own. Matches a .table-responsive that is either the
   card's only content (Open Positions) or nested one level in via a tab panel
   (Trade Log) - both cases cancel the very same ancestor .card-panel's padding. */
.card-panel > .table-responsive:last-child,
.card-panel .subtab-panel .table-responsive {
    margin: 0 -1.5rem -1.5rem;
}

table.data-table {
    font-size: 0.8rem;
}

table.data-table td, table.data-table th {
    vertical-align: middle;
    color: var(--text-primary);
    border-color: var(--gridline);
    padding: 0.55rem 0.6rem;
    border-right: 1px solid var(--gridline);
}

table.data-table td:last-child, table.data-table th:last-child {
    border-right: none;
}

/* Numbers read faster right-aligned (decimal points line up down the column) -
   text columns (symbol, date, side) stay left-aligned by not carrying this class. */
table.data-table td.text-end, table.data-table th.text-end {
    text-align: right;
}

/* table.data-table td's color above otherwise always wins over .value-good/
   .value-critical by specificity (2 type + 1 class beats 1 class), silently
   graying out profit/loss text in every data table - these two-class overrides
   restore the intended green/red. */
table.data-table td.value-good { color: var(--good); }
table.data-table td.value-critical { color: var(--critical); }

table.data-table th {
    font-weight: 600;
    color: var(--text-secondary);
    border-top: none;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

table.data-table.table-hover tbody tr:hover td {
    color: var(--text-primary);
    background-color: rgba(137, 135, 129, 0.08);
}

#openPositionsTable .stop-loss-input {
    width: 78px;
}

tr.trade-row-clickable {
    cursor: pointer;
}

/* Sticky table headers: the quick-nav bar above is itself sticky at top:0, so these
   stick just below it - --sticky-table-top is measured from the quick-nav's actual
   rendered height in charts-common.js rather than a guessed pixel value. */
table.data-table thead th {
    position: sticky;
    top: var(--sticky-table-top, 0px);
    background-color: var(--surface-1);
    z-index: 5;
    box-shadow: 0 1px 0 var(--gridline);
}

tr.reveal-sentinel td {
    border-top: none;
}

.tv-link {
    display: inline-flex;
    vertical-align: middle;
    margin-left: 0.4rem;
    color: var(--text-muted);
}

.tv-link:hover {
    color: var(--series-blue);
}

.tv-link svg {
    width: 13px;
    height: 13px;
}

.stop-loss-input {
    width: 90px;
    font-size: 0.85rem;
    padding: 0.2rem 0.4rem;
    border-radius: 6px;
    border: 1px solid var(--border-hairline);
    background-color: var(--surface-1);
    color: var(--text-primary);
    /* Typed entry only - the up/down spinner buttons take space without adding
       anything useful for a price that's usually typed, not clicked up one cent
       at a time. */
    appearance: textfield;
    -moz-appearance: textfield;
}

.stop-loss-input::-webkit-outer-spin-button,
.stop-loss-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.stop-loss-input.saved {
    border-color: var(--good);
}

th[data-sort-key] {
    cursor: pointer;
    user-select: none;
}

th[data-sort-key]::after {
    content: "";
    display: inline-block;
    width: 0.6em;
    margin-left: 0.3em;
    opacity: 0.35;
}

th[data-sort-key].sorted-asc::after {
    content: "▲";
    opacity: 1;
    color: var(--series-blue);
}

th[data-sort-key].sorted-desc::after {
    content: "▼";
    opacity: 1;
    color: var(--series-blue);
}

/* Table sub-tabs (Trades / Symbol / Day) and the portfolio switcher tab bar
   share this same pill treatment as .range-preset-btn - one visual language
   for "pick one of these" across the app instead of an underline here and a
   pill there. */
.subtabs {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.subtab-btn {
    padding: 0.4rem 1rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    border: 1px solid var(--border-hairline);
    background-color: transparent;
    color: var(--text-secondary);
    margin-bottom: 0;
}

.subtab-btn.active {
    background-color: var(--series-blue);
    border-color: var(--series-blue);
    color: #fff;
}

.subtabs form {
    display: contents;
}

.subtab-panel {
    display: none;
}

.subtab-panel.active {
    display: block;
}

/* Month calendar */
.calendar-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.calendar-title {
    font-weight: 700;
    font-size: 1.2rem;
    flex: 1;
}

.calendar-badge {
    padding: 0.35rem 0.9rem;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.9rem;
    border: 1px solid transparent;
}

.calendar-badge.good {
    background-color: rgba(12, 163, 12, 0.12);
    border-color: rgba(12, 163, 12, 0.3);
    color: var(--good);
}

.calendar-badge.critical {
    background-color: rgba(208, 59, 59, 0.12);
    border-color: rgba(208, 59, 59, 0.3);
    color: var(--critical);
}

.calendar-nav-btn, .calendar-today-btn {
    border: 1px solid var(--border-hairline);
    background-color: transparent;
    color: var(--text-secondary);
    border-radius: 8px;
    padding: 0.3rem 0.7rem;
    font-weight: 600;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.calendar-weekday {
    text-align: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    padding-bottom: 0.4rem;
}

.calendar-day {
    aspect-ratio: 2.2;
    border-radius: 6px;
    padding: 0.3rem 0.4rem;
    background-color: var(--gridline);
    opacity: 0.5;
    font-size: 0.68rem;
    color: var(--text-muted);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.calendar-day.empty {
    background: none;
    opacity: 0;
}

.calendar-day.has-data {
    opacity: 1;
    color: var(--text-primary);
    cursor: pointer;
}

.calendar-day.profit {
    background-color: rgba(12, 163, 12, 0.16);
}

.calendar-day.loss {
    background-color: rgba(208, 59, 59, 0.16);
}

.calendar-day.flat {
    background-color: var(--neutral-wash);
}

.calendar-day .day-number {
    font-weight: 600;
}

.calendar-day .day-amount {
    font-weight: 700;
    font-size: 0.72rem;
}

.calendar-day.profit .day-amount { color: var(--good); }
.calendar-day.loss .day-amount { color: var(--critical); }
.calendar-day.flat .day-amount { color: var(--series-blue); }

.win-loss-badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
    border-radius: 20px;
    vertical-align: middle;
    margin-left: 0.5rem;
}

.win-loss-badge.good {
    background-color: rgba(12, 163, 12, 0.14);
    color: var(--good);
}

.win-loss-badge.critical {
    background-color: rgba(208, 59, 59, 0.14);
    color: var(--critical);
}

.win-loss-badge.partial {
    background-color: rgba(250, 178, 25, 0.16);
    color: #b8860b;
}

:root[data-theme="dark"] .win-loss-badge.partial {
    color: #e0b23d;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .win-loss-badge.partial {
        color: #e0b23d;
    }
}

/* Trade detail modal */
.modal-backdrop-custom {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 100;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: 4rem 1rem;
    overflow-y: auto;
}

.modal-backdrop-custom.open {
    display: flex;
}

.trade-detail-modal {
    background-color: var(--surface-1);
    border-radius: 12px;
    max-width: 980px;
    width: 100%;
    padding: 1.5rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    position: relative;
}

.trade-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
    padding-right: 2rem;
}

.trade-detail-title {
    font-size: 1.2rem;
    font-weight: 700;
}

.trade-detail-subtitle {
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin-top: 0.2rem;
}

.trade-detail-close {
    position: absolute;
    top: 1.25rem;
    right: 1.5rem;
    border: none;
    background: none;
    font-size: 1.3rem;
    line-height: 1;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.25rem;
    z-index: 1;
}

.price-chart-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.price-chart-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.chart-privacy-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
}

.chart-privacy-toggle input {
    margin: 0;
}

.chart-expand-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    background: none;
    border: 1px solid var(--border-hairline);
    border-radius: 6px;
    padding: 0.25rem 0.6rem;
}

.chart-expand-btn svg {
    width: 13px;
    height: 13px;
}

/* Expanded state: the chart takes over the whole modal, everything else (stats,
   sell executions, buy lots) is hidden so the trader has maximum room to study
   exactly where a trade landed relative to price action/DEMA/swing points. */
.trade-detail-modal.chart-expanded {
    max-width: 96vw;
    width: 96vw;
    height: 90vh;
    display: flex;
    flex-direction: column;
}

.trade-detail-modal.chart-expanded .trade-detail-collapsible {
    display: none;
}

.trade-detail-modal.chart-expanded #priceChartSection {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.trade-detail-modal.chart-expanded .price-chart-container {
    flex: 1;
    height: auto;
    min-height: 0;
}

.trade-detail-modal.chart-expanded .price-chart-container.price-chart-volume {
    flex: 0 0 160px;
}

.modal-backdrop-custom.chart-expanded-view {
    padding: 1.5rem;
}

.trade-detail-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.trade-detail-stat-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.trade-detail-stat-value {
    font-weight: 600;
    font-size: 1rem;
}

.trade-detail-section-title {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 1rem 0 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.price-chart-legend {
    display: flex;
    gap: 1rem;
    margin-bottom: 0.4rem;
}

.price-chart-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    color: var(--text-secondary);
}

.price-chart-legend-item i {
    width: 10px;
    height: 3px;
    border-radius: 2px;
    display: inline-block;
}

.price-chart-container {
    height: 400px;
    position: relative;
}

.price-chart-container.price-chart-volume {
    height: 110px;
    margin-top: 0.25rem;
}