/**
 * Enhanced Profile Trading Display Styles
 */

/* Calendar Styles */
.calendar-enhanced {
    margin: 8px 0;
    padding: 0;
    background: transparent;
    border-radius: 8px;
}

.calendar-header {
    margin-bottom: 12px;
}

.calendar-header h3 {
    margin: 0;
    font-size: 1.1em;
    color: #e4e4e7;
    font-weight: 600;
}

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

.calendar-day-header {
    padding: 6px;
    text-align: center;
    font-weight: 600;
    font-size: 11px;
    background: rgba(255,255,255,0.05);
    color: #71717a;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.calendar-day {
    min-height: 60px;
    padding: 6px;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 4px;
    background: rgba(255,255,255,0.02);
    position: relative;
}

.calendar-day.has-events {
    cursor: pointer;
}

.calendar-day.has-events:hover {
    border-color: rgba(16, 185, 129, 0.55);
}

.calendar-day.is-expanded {
    outline: 1px solid rgba(16, 185, 129, 0.65);
}

.calendar-day-details {
    margin-top: 12px;
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 10px;
    background: rgba(255,255,255,0.03);
    padding: 12px;
}

.calendar-day-details__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.calendar-day-details__header h4 {
    margin: 0;
    color: #e4e4e7;
    font-size: 0.95em;
}

.calendar-day-details__close {
    border: 1px solid rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.06);
    color: #d4d4d8;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 12px;
    cursor: pointer;
}

.calendar-day-details__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
}

.calendar-detail-card {
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    padding: 10px;
    background: rgba(0,0,0,0.16);
}

.calendar-detail-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #a1a1aa;
    margin-bottom: 6px;
}

.calendar-detail-list {
    display: grid;
    gap: 4px;
    font-size: 12px;
    color: #d4d4d8;
}

.calendar-detail-list a {
    color: #67e8f9;
    text-decoration: none;
}

.calendar-detail-list a:hover {
    text-decoration: underline;
}

.calendar-day.empty {
    background: transparent;
    border: none;
}

.calendar-day.today {
    border: 2px solid #10b981;
    background: rgba(16, 185, 129, 0.08);
}

.calendar-day.win-day {
    background: rgba(34, 197, 94, 0.1);
    border-color: rgba(34, 197, 94, 0.35);
}

.calendar-day.loss-day {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.35);
}

.calendar-day.neutral-day {
    background: rgba(234, 179, 8, 0.1);
    border-color: rgba(234, 179, 8, 0.3);
}

.calendar-day.active-day {
    background: rgba(6, 182, 212, 0.1);
    border-color: rgba(6, 182, 212, 0.3);
}

.calendar-day.opened-day {
    background: rgba(113, 113, 122, 0.15);
    border-color: rgba(113, 113, 122, 0.3);
}

.day-number {
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 3px;
    color: #d4d4d8;
}

.day-badge {
    font-size: 9px;
    padding: 1px 4px;
    border-radius: 3px;
    margin-bottom: 2px;
    display: block;
    text-align: center;
}

.day-badge.opened {
    background: rgba(113, 113, 122, 0.4);
    color: #d4d4d8;
}

.day-badge.closed {
    background: rgba(16, 185, 129, 0.25);
    color: #6ee7b7;
}

.day-badge.active {
    background: rgba(6, 182, 212, 0.25);
    color: #67e8f9;
}

/* Enhanced calendar — toolbar, view switcher, search, legend */
.calendar-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.cal-nav { display: flex; align-items: center; gap: 6px; }
.cal-nav-btn {
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.05);
    color: #e4e4e7;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
}
.cal-nav-btn:hover { background: rgba(255,255,255,0.1); }
.cal-today-btn { font-size: 12px; }
.cal-period-label {
    margin-left: 6px;
    font-weight: 600;
    color: #e4e4e7;
    font-size: 1.02em;
    min-width: 120px;
}
.cal-views { display: flex; gap: 4px; }
.cal-view-btn {
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.04);
    color: #a1a1aa;
    border-radius: 6px;
    padding: 4px 12px;
    font-size: 12px;
    cursor: pointer;
}
.cal-view-btn:hover { color: #e4e4e7; }
.cal-view-btn.active {
    background: rgba(16,185,129,0.18);
    border-color: rgba(16,185,129,0.5);
    color: #6ee7b7;
}
.cal-search { margin-left: auto; }
.cal-search input {
    background: rgba(0,0,0,0.25);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 6px;
    padding: 5px 10px;
    color: #e4e4e7;
    font-size: 12px;
    min-width: 230px;
}
.cal-search input:focus { outline: none; border-color: rgba(16,185,129,0.5); }
.cal-note {
    font-size: 12px;
    color: #fbbf24;
    margin-bottom: 8px;
}
.cal-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 10px;
    font-size: 11px;
    color: #a1a1aa;
}
.cal-legend-item { display: inline-flex; align-items: center; gap: 5px; }
.cal-swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }

/* Day cells coloured for non-PL event types */
.calendar-day.anchor-day {
    background: rgba(147, 51, 234, 0.12);
    border-color: rgba(147, 51, 234, 0.35);
}
.calendar-day.post-day {
    background: rgba(148, 163, 184, 0.1);
    border-color: rgba(148, 163, 184, 0.28);
}

/* Year view — 12-month grid */
.calendar-grid.year-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
.calendar-month-cell {
    min-height: 80px;
    padding: 10px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
    background: rgba(255,255,255,0.02);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.calendar-month-cell.has-events { cursor: pointer; }
.calendar-month-cell.has-events:hover { border-color: rgba(16,185,129,0.55); }
.calendar-month-cell.today { outline: 1px solid rgba(16,185,129,0.6); }
.cal-month-name { font-weight: 600; color: #e4e4e7; font-size: 13px; }
.cal-month-r { font-size: 18px; font-weight: 700; }
.cal-month-r.muted { color: #52525b; font-weight: 600; }
.cal-month-meta { font-size: 10px; color: #a1a1aa; }

/* Day view */
.cal-day-view { margin-top: 4px; }
.calendar-day-details__summary {
    font-size: 13px;
    color: #d4d4d8;
    margin-bottom: 10px;
}

@media (max-width: 640px) {
    .calendar-grid.year-grid { grid-template-columns: repeat(3, 1fr); }
    .cal-search { margin-left: 0; width: 100%; }
    .cal-search input { width: 100%; }
}

/* Active Trades Styles */
.active-trades-section,
.recently-closed-section,
.quick-stats-section,
.signals-aggregate-section,
.asset-storyboard-section {
    margin: 8px 0;
    padding: 16px;
    background: var(--panel, #18181b);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 12px;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    padding-bottom: 10px;
}

.section-header h3 {
    margin: 0;
    font-size: 1em;
    color: #e4e4e7;
    font-weight: 600;
}

.quick-stats-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.quick-stats-link {
    text-decoration: none;
    background: rgba(6, 182, 212, 0.9);
}

.quick-stats-link:hover {
    background: rgba(8, 145, 178, 0.95);
}

.net-r-risk {
    font-size: 0.95em;
    font-weight: 700;
    color: #10b981;
}

.expand-btn {
    padding: 6px 14px;
    background: #10b981;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: background 0.2s;
}

.expand-btn:hover {
    background: #059669;
}

.filters {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.filters input,
.filters select {
    padding: 6px 10px;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    font-size: 13px;
    background: rgba(255,255,255,0.05);
    color: #d4d4d8;
}

.filters input:focus,
.filters select:focus {
    outline: none;
    border-color: #10b981;
}

.active-trades-grid,
.closed-trades-grid,
.storyboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
}

.trade-card {
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 10px;
    padding: 14px;
    background: rgba(255,255,255,0.03);
    transition: transform 0.2s, box-shadow 0.2s;
}

.trade-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.trade-card.active {
    border-left: 3px solid #06b6d4;
}

.trade-card.closed.positive {
    border-left: 3px solid #22c55e;
}

.trade-card.closed.negative {
    border-left: 3px solid #ef4444;
}

.trade-card.closed.neutral {
    border-left: 3px solid #eab308;
}

.trade-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}

.trade-header .symbol {
    font-size: 1.1em;
    font-weight: 700;
    color: #f4f4f5;
}

.trade-header .direction {
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.trade-header .direction.long {
    background: rgba(34, 197, 94, 0.2);
    color: #4ade80;
}

.trade-header .direction.short {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
}

.trade-header .status {
    padding: 3px 7px;
    border-radius: 4px;
    font-size: 11px;
    background: rgba(113, 113, 122, 0.3);
    color: #a1a1aa;
}

.trade-body {
    font-size: 13px;
}

.price-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
    color: #a1a1aa;
}

.price-row .current-price {
    font-weight: 600;
    color: #10b981;
}

.r-pl {
    margin-top: 8px;
    padding: 8px;
    border-radius: 6px;
    text-align: center;
    font-size: 1em;
}

.r-pl.positive {
    background: rgba(34, 197, 94, 0.12);
    color: #4ade80;
}

.r-pl.negative {
    background: rgba(239, 68, 68, 0.12);
    color: #f87171;
}

.r-pl.neutral {
    background: rgba(234, 179, 8, 0.12);
    color: #facc15;
}

.r-result {
    margin: 8px 0;
    padding: 8px;
    border-radius: 6px;
    text-align: center;
    font-size: 1em;
    font-weight: 700;
}

.trade-card.closed.positive .r-result {
    background: rgba(34, 197, 94, 0.12);
    color: #4ade80;
}

.trade-card.closed.negative .r-result {
    background: rgba(239, 68, 68, 0.12);
    color: #f87171;
}

.trade-card.closed.neutral .r-result {
    background: rgba(234, 179, 8, 0.12);
    color: #facc15;
}

.trade-meta {
    margin-top: 8px;
    font-size: 11px;
    color: #71717a;
}

.view-post-link {
    display: inline-block;
    margin-top: 8px;
    padding: 5px 12px;
    background: #10b981;
    color: #fff;
    text-decoration: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    transition: background 0.2s;
}

.view-post-link:hover {
    background: #059669;
}

/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
}

.stats-grid.expanded {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}

.stat-card {
    padding: 14px;
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(16,185,129,0.15) 0%, rgba(5,150,105,0.1) 100%);
    color: #e4e4e7;
    text-align: center;
}

.stat-label {
    font-size: 11px;
    margin-bottom: 4px;
    opacity: 0.75;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.stat-value {
    font-size: 1.6em;
    font-weight: 700;
    color: #10b981;
}

/* Signals Aggregate */
.aggregate-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 8px;
}

.aggregate-card {
    padding: 10px;
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 8px;
    background: rgba(255,255,255,0.03);
    text-align: center;
}

.aggregate-label {
    font-size: 10px;
    color: #71717a;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.aggregate-value {
    font-size: 1.3em;
    font-weight: 700;
    color: #e4e4e7;
}

/* Asset Storyboard */
.storyboard-card {
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 10px;
    padding: 14px;
    background: rgba(255,255,255,0.03);
    transition: transform 0.2s, box-shadow 0.2s;
}

.storyboard-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.storyboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}

.storyboard-header .symbol {
    font-size: 1.1em;
    font-weight: 700;
    color: #f4f4f5;
}

.storyboard-header .bias {
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.storyboard-header .bias.bullish {
    background: rgba(34, 197, 94, 0.2);
    color: #4ade80;
}

.storyboard-header .bias.bearish {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
}

.storyboard-header .bias.neutral {
    background: rgba(113, 113, 122, 0.25);
    color: #a1a1aa;
}

.storyboard-body {
    font-size: 13px;
}

.storyboard-actions {
    margin-top: 8px;
}

.storyboard-expand-btn {
    width: 100%;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 6px;
    padding: 6px 8px;
    background: rgba(255,255,255,0.06);
    color: #d4d4d8;
    cursor: pointer;
    font-size: 12px;
}

.storyboard-expand-btn:hover {
    border-color: rgba(16,185,129,0.7);
}

.storyboard-related {
    margin-top: 10px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.storyboard-related-col {
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 8px;
    background: rgba(0,0,0,0.16);
    padding: 8px;
}

.storyboard-related-title {
    font-size: 11px;
    color: #a1a1aa;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
}

.storyboard-related-list {
    display: grid;
    gap: 4px;
    font-size: 12px;
    color: #d4d4d8;
}

.storyboard-related-list a {
    color: #67e8f9;
    text-decoration: none;
}

.storyboard-related-list a:hover {
    text-decoration: underline;
}

.stat-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
    padding: 3px 0;
    color: #a1a1aa;
}

.stat-row span:first-child {
    font-weight: 500;
}

.stat-row .positive {
    color: #4ade80;
    font-weight: 700;
}

.stat-row .negative {
    color: #f87171;
    font-weight: 700;
}

.stat-row .neutral {
    color: #facc15;
    font-weight: 700;
}

/* No Data / Empty State */
.no-data {
    padding: 24px;
    text-align: center;
    color: #52525b;
    font-size: 0.95em;
}

.no-data::before {
    content: '';
    display: block;
    font-size: 1.5em;
    margin-bottom: 6px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .calendar-grid {
        font-size: 11px;
    }

    .calendar-day {
        min-height: 48px;
        padding: 4px;
    }

    .active-trades-grid,
    .closed-trades-grid,
    .storyboard-grid {
        grid-template-columns: 1fr;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .filters {
        flex-direction: column;
    }

    .filters input,
    .filters select {
        width: 100%;
    }
}


/* ---- Owner QA #965 (calendar), 2026-10-04: tokens from /static/tokens.css ---- */
.day-badge--r { font-weight: 700; font-size: 10px; }
.day-badge--gain { background: var(--bull, #22c55e); color: var(--on-bull, #052e16); }
.day-badge--loss { background: var(--bear, #f87171); color: var(--on-bear, #450a0a); }
.cal-swatch--gain { background: rgba(34, 197, 94, 0.24); border: 1px solid rgba(34, 197, 94, 0.9); }
.cal-swatch--loss { background: rgba(239, 68, 68, 0.24); border: 1px solid rgba(239, 68, 68, 0.9); }

/* ---- Owner QA #967 (recently closed), 2026-10-04: tokens from /static/tokens.css ---- */
.trade-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 10px; }
.trade-card__toggle {
    background: transparent; border: 1px solid var(--border, #3a4150); border-radius: 6px;
    color: var(--text-2, #cbd5e1); font: inherit; font-size: 12px; padding: 4px 10px; cursor: pointer;
}
.trade-card__toggle:hover { border-color: var(--link, #60a5fa); color: var(--fg, #f1f5f9); }
.trade-card__toggle:focus-visible, #recently-closed-container .view-post-link:focus-visible {
    outline: 2px solid var(--focus, #60a5fa); outline-offset: 2px;
}
#recently-closed-container .view-post-link {
    display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600;
    color: var(--link, #60a5fa); text-decoration: underline; text-underline-offset: 3px;
}
#recently-closed-container .view-post-link:hover { color: var(--link-hover, #93c5fd); }

/* ---- Pinned / key posts (owner QA #966 / #975), tokens from /static/tokens.css ---- */
.featured-posts { margin: 8px 0; padding: 16px; background: var(--panel, #18181b); border: 1px solid var(--border, #3a4150); border-radius: 10px; }
.featured-posts h3 { margin: 0; font-size: 1.05rem; color: var(--fg, #f1f5f9); }
.fp-note, .fp-counts { margin: 6px 0 10px; font-size: 13px; color: var(--text-2, #cbd5e1); line-height: 1.45; }
.fp-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border, #3a4150); border-radius: 8px; overflow: hidden; }
.fp-item { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 10px 12px; }
.fp-item + .fp-item { border-top: 1px solid var(--border, #3a4150); }
.fp-item--anchor { box-shadow: inset 3px 0 0 #a78bfa; }
.fp-item--analysis { box-shadow: inset 3px 0 0 var(--info, #38bdf8); }
.fp-item--signal { box-shadow: inset 3px 0 0 var(--muted, #9aa4b2); }
.fp-link { flex: 1 1 16rem; min-width: 0; color: var(--link, #60a5fa); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.fp-link:hover { color: var(--link-hover, #93c5fd); }
.fp-meta { font-size: 12px; color: var(--muted, #9aa4b2); }
.fp-pin { background: transparent; border: 1px solid var(--border, #3a4150); border-radius: 6px; color: var(--text-2, #cbd5e1); font: inherit; font-size: 12px; padding: 3px 10px; cursor: pointer; }
.fp-pin[aria-pressed="true"] { border-color: var(--link, #60a5fa); color: var(--fg, #f1f5f9); }
.fp-pin:focus-visible, .fp-link:focus-visible { outline: 2px solid var(--focus, #60a5fa); outline-offset: 2px; }
.fp-anchors, .fp-edit { margin-top: 12px; }
.fp-anchors summary, .fp-edit summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--fg, #f1f5f9); padding: 4px 0 8px; }
.fp-msg { margin: 8px 0 0; font-size: 13px; color: var(--warn, #fbbf24); min-height: 1em; }