@import 'enterprise-core.css';
@import 'enterprise-layout.css';
@import 'enterprise-components.css';
@import 'enterprise-specialized.css';
@import 'enterprise-textarea-utilities.css';
@import 'enterprise-charts.css';

/* ===================================================================
   ENTERPRISE TABS STYLING (for unified analytics and other pages)
   =================================================================== */

/* Enterprise tabs — see "GLOBAL TAB STYLING" block below for the
   gold-themed underline definition. Item margin + icon spacing live here. */
.nav-tabs.enterprise-tabs .nav-item {
    margin-bottom: -2px;
}

.nav-tabs.enterprise-tabs .nav-link i {
    font-size: 0.95rem;
    margin-right: 0.5rem;
}

@media (max-width: 991px) {
    .nav-tabs.enterprise-tabs .nav-link {
        padding: 0.6rem 1rem;
        font-size: 0.9rem;
    }
}

@media (max-width: 767px) {
    .nav-tabs.enterprise-tabs .nav-link {
        padding: 0.5rem 0.75rem;
        font-size: 0.85rem;
    }

    .nav-tabs.enterprise-tabs .nav-link i {
        font-size: 0.85rem;
    }
}

/* ===================================================================
   INSPIRED BY BADGE (for products page attribution)
   =================================================================== */

.inspired-by-badge {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    background: transparent;
    padding: 0.5rem 0.85rem;
    border-radius: 8px;
    border: 1px solid rgba(255, 215, 0, 0.3);
    box-shadow: 0 0 5px rgba(255, 215, 0, 0.3);
    z-index: 10;
}

.inspired-by-badge span {
    font-size: 0.6rem;
    color: var(--yellow-primary, #f0c000);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
}

.inspired-by-badge a {
    display: block;
    line-height: 0;
}

.inspired-by-badge a.disabled {
    pointer-events: none;
    cursor: default;
}

.inspired-by-badge img {
    height: 44px;
    width: auto;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.inspired-by-badge a:hover img {
    opacity: 0.8;
    transform: scale(1.05);
}

/* Ensure feature-card has relative positioning for badge placement */
.feature-card {
    position: relative;
}

/* ===================================================================
   FIX: Nav-pills bullet points (horizontal + vertical)
   =================================================================== */
.nav-pills li {
    list-style: none !important;
}
.nav-pills li::before,
.nav-pills li::after {
    display: none !important;
}

/* ====================================================================
   GLOBAL TAB STYLING — applies app-wide to all Bootstrap tab variants
   Single source of truth for tab coloring. Modify these blocks to
   change tabs across the entire application.
   ==================================================================== */

/* --- Bootstrap nav-pills: gold-accent active state ---------------- */
.nav-pills .nav-link {
    color: var(--enterprise-text-secondary, #adb5bd);
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    font-weight: 500;
    padding: 0.5rem 0.95rem;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.nav-pills .nav-link:hover,
.nav-pills .nav-link:focus-visible {
    color: #ffd966;
    background-color: rgba(255, 215, 0, 0.06);
    border-color: rgba(255, 215, 0, 0.22);
    outline: none;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    color: #0a0a0a;
    background-color: var(--enterprise-accent, #ffd700);
    border-color: var(--enterprise-accent, #ffd700);
    font-weight: 600;
}

/* --- Bootstrap nav-tabs: gold underline + gold active text ------- */
.nav-tabs {
    border-bottom: 1px solid rgba(255, 215, 0, 0.18);
}

.nav-tabs .nav-link {
    color: var(--enterprise-text-secondary, #adb5bd);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    font-weight: 500;
    padding: 0.6rem 1.1rem;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus-visible {
    color: #ffd966;
    border-bottom-color: rgba(255, 215, 0, 0.45);
    background: transparent;
    outline: none;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    color: var(--enterprise-accent, #ffd700);
    background: transparent;
    border-bottom-color: var(--enterprise-accent, #ffd700);
    font-weight: 600;
}

/* --- Legacy .enterprise-tabs: now uses gold tokens too ----------- */
.nav-tabs.enterprise-tabs {
    border-bottom: 2px solid rgba(255, 215, 0, 0.18);
    margin-bottom: 1.5rem;
}

.nav-tabs.enterprise-tabs .nav-link {
    border: none;
    border-bottom: 3px solid transparent;
    background: transparent;
    color: var(--enterprise-text-secondary, #adb5bd);
    font-weight: 500;
    padding: 0.75rem 1.5rem;
    transition: all 0.2s ease;
}

.nav-tabs.enterprise-tabs .nav-link:hover {
    border-color: transparent;
    border-bottom-color: rgba(255, 215, 0, 0.45);
    color: #ffd966;
    background: transparent;
}

.nav-tabs.enterprise-tabs .nav-link.active {
    border-color: transparent;
    border-bottom-color: var(--enterprise-accent, #ffd700);
    color: var(--enterprise-accent, #ffd700);
    background: transparent;
    font-weight: 600;
}

/* ===================================================================
   WARGAMING COMPACT LAYOUT CLASSES
   =================================================================== */

/* Compact probability grid — 4 columns */
.wg-prob-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.4rem;
}
.wg-prob-grid label {
    font-size: 0.75rem;
    margin-bottom: 0.15rem;
    color: var(--enterprise-text-secondary, #6c757d);
}
.wg-prob-grid input {
    font-size: 0.8rem;
    padding: 0.25rem 0.4rem;
}

/* Compact projection row — 2 columns (stacked: TS/TE then Low%/High%) */
.wg-proj-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.4rem;
    margin-bottom: 0.5rem;
}
.wg-proj-row label {
    font-size: 0.75rem;
    margin-bottom: 0.15rem;
    color: var(--enterprise-text-secondary, #6c757d);
}
.wg-proj-row input {
    font-size: 0.8rem;
    padding: 0.25rem 0.4rem;
}

/* Compact section label (replaces h5 headers) */
.wg-section-label {
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 0.4rem;
    color: var(--enterprise-primary, #f7d000);
}

/* 6-column probability grid for key levels */
.wg-prob-grid-6 {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.4rem;
}
.wg-prob-grid-6 label {
    font-size: 0.75rem;
    margin-bottom: 0.15rem;
    color: var(--enterprise-text-secondary, #6c757d);
}
.wg-prob-grid-6 input {
    font-size: 0.8rem;
    padding: 0.25rem 0.4rem;
}

/* Wargaming analysis area — large for screenshot pasting */
.wg-analysis-area .ql-editor {
    min-height: 675px;
}
.wg-analysis-area textarea {
    min-height: 675px;
}
.wg-chart-preview {
    width: 100%;
    max-height: 675px;
    object-fit: contain;
    transition: opacity 0.2s ease;
}
.wg-chart-preview:hover {
    opacity: 0.9;
}

/* -------------------------------------------------------
   Wargaming scenario pills — gold theme, horizontal fill
   Override the sidebar-style .nav-pills defaults
   ------------------------------------------------------- */
.wg-scenario-pills {
    display: flex !important;
    flex-direction: row !important;
    padding-left: 0;
    margin-bottom: 0.75rem;
    border-bottom: 2px solid var(--enterprise-border, #2e3a4d);
    gap: 0.25rem;
}
.wg-scenario-pills .nav-item {
    flex: 1;
    text-align: center;
}
.wg-scenario-pills .nav-link {
    width: 100%;
    text-align: center !important;
    justify-content: center !important;
    border-radius: 0.375rem 0.375rem 0 0 !important;
    margin-bottom: -2px;
    padding: 0.6rem 0.75rem !important;
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--enterprise-text-secondary, #94a3b8);
    background: transparent;
    border: 1px solid transparent;
    border-bottom: 2px solid transparent;
    transition: all 0.2s ease;
}
.wg-scenario-pills .nav-link:hover {
    color: var(--enterprise-primary, #f7d000);
    background: rgba(247, 208, 0, 0.06);
    border-bottom-color: rgba(247, 208, 0, 0.4);
}
.wg-scenario-pills .nav-link.active {
    color: var(--enterprise-primary, #f7d000) !important;
    background: rgba(247, 208, 0, 0.1) !important;
    border-color: var(--enterprise-border, #2e3a4d);
    border-bottom-color: var(--enterprise-bg-primary, #0f1319) !important;
    font-weight: 600;
    box-shadow: none !important;
}
.wg-scenario-pills .nav-link.active i {
    opacity: 1;
}

/* ===================================================================
   PREDICTIVE ANALYTICS MODAL — Accordion Sections
   =================================================================== */
.pa-accordion-section {
    margin-bottom: 0.35rem;
}
.pa-accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.4rem 0.5rem;
    border-bottom: 1px solid var(--enterprise-border-color, #2e3a4d);
    cursor: pointer;
    user-select: none;
    transition: background 0.15s ease;
}
.pa-accordion-header:hover {
    background: rgba(255, 255, 255, 0.03);
}
.pa-accordion-header h6 {
    margin-bottom: 0;
}
.pa-accordion-header .pa-chevron {
    transition: transform 0.2s ease;
    font-size: 0.7rem;
    opacity: 0.5;
}
.pa-accordion-header.pa-collapsed .pa-chevron {
    transform: rotate(-90deg);
}
.pa-accordion-body {
    overflow: hidden;
    transition: max-height 0.25s ease, opacity 0.2s ease;
    max-height: 2000px;
    opacity: 1;
}
.pa-accordion-body.pa-hidden {
    max-height: 0;
    opacity: 0;
    margin: 0;
    padding: 0;
}
.pa-accordion-badges {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.7rem;
}

/* Predictive Analytics modal — softer body text, vivid headers & alerts */
.pa-modal-body {
    color: rgba(185, 193, 207, 0.85);
}
.pa-modal-body strong,
.pa-modal-body .fw-semibold {
    color: rgba(210, 216, 226, 0.9);
}
.pa-modal-body .text-pre-line {
    color: rgba(175, 183, 198, 0.82);
}

/* Section headers — bright and distinct from body text */
.pa-modal-body h6.text-primary,
.pa-modal-body .pa-accordion-header h6.text-primary {
    color: #5ea8f5 !important;
    opacity: 1;
}
.pa-modal-body h6.text-warning {
    color: #f0ad4e !important;
    opacity: 1;
}

/* Four-step labels within accordion body */
.pa-modal-body .fw-semibold.text-primary {
    color: #6db3f8 !important;
}

/* Danger/caution alerts — punchy, unmissable */
.pa-modal-body .badge.bg-danger {
    background-color: #dc3545 !important;
    color: #fff !important;
    opacity: 1;
}
.pa-modal-body .badge.bg-warning {
    background-color: #f0ad4e !important;
    color: #1a1a1a !important;
    opacity: 1;
}
.pa-modal-body .badge.bg-success {
    background-color: #28a745 !important;
    color: #fff !important;
    opacity: 1;
}
.pa-modal-body .text-danger,
.pa-modal-body .fa-angle-right.text-danger {
    color: #e8616d !important;
    opacity: 1;
}
.pa-modal-body .text-warning,
.pa-modal-body .fa-angle-right.text-warning {
    color: #f0ad4e !important;
    opacity: 1;
}
.pa-modal-body .text-success {
    color: #4cce6b !important;
    opacity: 1;
}

/* Warning/alert boxes — richer backgrounds so they pop */
.pa-modal-body [style*="border: 1px solid rgba(220, 53, 69"] {
    background: rgba(220, 53, 69, 0.14) !important;
    border-color: rgba(220, 53, 69, 0.45) !important;
}
.pa-modal-body [style*="border: 1px solid rgba(255, 193, 7"] {
    background: rgba(255, 193, 7, 0.12) !important;
    border-color: rgba(255, 193, 7, 0.4) !important;
}

/* Status badges in model cards — keep full visibility */
.pa-modal-body .status-badge {
    opacity: 1;
}

/* Group headers (VOLATILITY MANAGEMENT, SYSTEM ACTIVATION, etc.) — distinct color */
.pa-modal-body .pa-group-header,
.pa-modal-body .pa-group-header strong {
    color: #e0c46c !important;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.03em;
}

/* Hide sticky action buttons when a modal overlay is visible */
body.modal-open .sticky-action-buttons {
    display: none !important;
}

/* Cursor utility */
.cursor-pointer { cursor: pointer; }

/* Wargaming feed three-column card grid */
.wg-card-col {
    width: calc(33.333% - 0.667rem);
    min-width: 0;
}
@media (max-width: 1199.98px) {
    .wg-card-col {
        width: calc(50% - 0.5rem);
    }
}
@media (max-width: 767.98px) {
    .wg-card-col {
        width: 100%;
    }
}

/* ============================================================================
   IDLE TIMEOUT MODAL
   Banking-style session timeout warning with countdown
   ============================================================================ */

.idle-timeout-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1060;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.idle-timeout-backdrop.visible {
    opacity: 1;
    visibility: visible;
}

.idle-timeout-modal {
    background: var(--enterprise-bg-primary, #1a1d23);
    border: 1px solid var(--enterprise-border, #2d3139);
    border-radius: 12px;
    padding: 2rem 2.5rem;
    max-width: 420px;
    width: 90%;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    transform: scale(0.9) translateY(20px);
    transition: transform 0.3s ease;
}

.idle-timeout-backdrop.visible .idle-timeout-modal {
    transform: scale(1) translateY(0);
}

.idle-timeout-icon {
    font-size: 2.5rem;
    color: var(--enterprise-warning, #f0ad4e);
    margin-bottom: 1rem;
}

.idle-timeout-title {
    color: var(--enterprise-text-primary, #e8eaed);
    font-size: 1.35rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.idle-timeout-text {
    color: var(--enterprise-text-muted, #9ca3af);
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
}

.idle-timeout-countdown-wrap {
    margin-bottom: 1.5rem;
}

.idle-timeout-countdown-bar {
    height: 6px;
    background: var(--enterprise-bg-tertiary, #2d3139);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.idle-timeout-countdown-fill {
    height: 100%;
    background: var(--enterprise-accent, #4f8ff7);
    border-radius: 3px;
    transition: width 1s linear;
}

.idle-timeout-countdown-fill.danger {
    background: var(--enterprise-danger, #dc3545);
}

.idle-timeout-countdown-label {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--enterprise-text-primary, #e8eaed);
    font-variant-numeric: tabular-nums;
}

.idle-timeout-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.idle-timeout-actions .btn-primary {
    padding: 0.65rem 1.5rem;
    font-weight: 600;
}

.idle-timeout-actions .btn-outline-secondary {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}

@media (max-width: 576px) {
    .idle-timeout-modal {
        padding: 1.5rem;
    }

    .idle-timeout-countdown-label {
        font-size: 1.5rem;
    }
}

/* ============================================================================
   THEMED ALERTS — dark-mode variants that match the TDP gold-on-black theme.
   Use these instead of bootstrap .alert-warning / .alert-danger on pages
   where the bright bootstrap palette clashes (e.g. the dashboard sidebar
   panels). Yellow accent matches the gold theme; dark surface matches
   the rest of the page.
   ============================================================================ */

.alert-themed-warning {
    color: #ffd966;
    background-color: rgba(255, 215, 0, 0.08);
    border: 1px solid rgba(255, 215, 0, 0.35);
    border-left-width: 4px;
    border-radius: 0.375rem;
}

.alert-themed-warning .text-danger {
    color: #ff8a80 !important;
}

.alert-themed-warning .small.text-muted {
    color: rgba(255, 255, 255, 0.65) !important;
}

.alert-themed-danger {
    color: #ff8a80;
    background-color: rgba(220, 53, 69, 0.10);
    border: 1px solid rgba(220, 53, 69, 0.40);
    border-left-width: 4px;
    border-radius: 0.375rem;
}

/* Inner card inside a themed alert — replaces bg-white which would
   render as a bright white panel against the dark theme. */
.alert-themed-warning .themed-inner-card,
.alert-themed-danger .themed-inner-card {
    background-color: rgba(15, 15, 20, 0.55);
    border: 1px solid rgba(255, 215, 0, 0.12);
    border-radius: 0.375rem;
}

.alert-themed-warning .themed-inner-card .table,
.alert-themed-danger .themed-inner-card .table {
    color: rgba(255, 255, 255, 0.85);
    --bs-table-bg: transparent;
}

.alert-themed-warning .themed-inner-card .table thead,
.alert-themed-danger .themed-inner-card .table thead {
    background-color: rgba(255, 215, 0, 0.05) !important;
    color: #ffd966;
}

/* FullCalendar — Trades-Only Status (no journal yet). Distinct from
   fc-event-open (journal exists but incomplete) so the user can spot
   days where they traded but never opened a journal. */
.fc .fc-event.fc-event-trades-only {
    background: rgba(255, 138, 76, 0.15);
    border-left: 3px solid #ff8a4c;
    color: #ffb37a;
}

.fc .fc-event.fc-event-trades-only:hover {
    background: rgba(255, 138, 76, 0.25);
}

/* ============================================================================
   PERIODIC REVIEW PAGES
   Shared components used by the weekly, monthly, quarterly, and annual
   review templates. Closes in-app tickets #205, #210, #429 — the original
   10px rating dots were too small to be obviously clickable, leaving
   users unable to complete reviews. The new component meets the 44x44
   touch-target standard, is keyboard-accessible via Tab/Space/Arrow,
   and announces itself as a radiogroup to assistive tech.
   ============================================================================ */

/* ---- Period navigator (header center) -------------------------------- */

.review-period-nav {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.6rem;
    border: 1px solid rgba(255, 215, 0, 0.18);
    border-radius: 999px;
    background: rgba(15, 15, 20, 0.55);
}

.review-period-nav-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: var(--enterprise-text-primary, #f5f5f5);
    background: transparent;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.review-period-nav-arrow:hover,
.review-period-nav-arrow:focus-visible {
    background: rgba(255, 215, 0, 0.12);
    color: #ffd966;
    outline: none;
}

.review-period-nav-arrow:active {
    transform: scale(0.94);
}

.review-period-nav-label {
    padding: 0 0.75rem;
    font-family: 'Sora', 'Inter', system-ui, sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.01em;
    color: var(--enterprise-text-primary, #f5f5f5);
    white-space: nowrap;
}

/* Clickable label variant — used by date pickers that open a native input */
.review-period-nav-label-clickable {
    cursor: pointer;
    padding: 0.35rem 0.75rem;
    border-radius: 6px;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.review-period-nav-label-clickable:hover,
.review-period-nav-label-clickable:focus-visible {
    background: rgba(255, 215, 0, 0.08);
    color: #ffd966;
    outline: none;
}

.review-period-nav-today {
    margin-left: 0.5rem;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    background: rgba(255, 215, 0, 0.12);
    color: #ffd966;
    border: 1px solid rgba(255, 215, 0, 0.30);
    font-size: 0.825rem;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}

.review-period-nav-today:hover,
.review-period-nav-today:focus-visible {
    background: rgba(255, 215, 0, 0.22);
    color: #fff;
    outline: none;
}

@media (max-width: 767px) {
    .review-period-nav { gap: 0.25rem; padding: 0.3rem; }
    .review-period-nav-label { font-size: 0.85rem; padding: 0 0.4rem; }
    .review-period-nav-today { font-size: 0.75rem; padding: 0.3rem 0.55rem; }
}

/* ---- Section card (replaces ad-hoc bg-light blocks) ------------------ */

.review-section-card {
    background: rgba(15, 15, 20, 0.45);
    border: 1px solid rgba(255, 215, 0, 0.08);
    border-radius: 12px;
    overflow: hidden;
}

.review-section-card-header {
    padding: 0.75rem 1.1rem 0.6rem;
    border-bottom: 1px solid rgba(255, 215, 0, 0.10);
    background: linear-gradient(180deg,
        rgba(255, 215, 0, 0.06) 0%,
        rgba(255, 215, 0, 0.00) 100%);
}

.review-section-card-title {
    font-family: 'Sora', 'Inter', system-ui, sans-serif;
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: -0.005em;
    margin: 0;
    color: #ffd966;
}

.review-section-card-title i {
    color: rgba(255, 215, 0, 0.85);
}

.review-section-card-sub {
    margin-top: 0.35rem;
    font-size: 0.825rem;
    color: rgba(245, 245, 245, 0.65);
}

.review-section-card-body {
    padding: 0.85rem 1.1rem 1rem;
}

/* ---- Performance Coach list (consistent icon-prefixed bullets) ------ */

.ai-suggest-list {
    list-style: none;
    padding-left: 0;
    margin: 0.35rem 0 0;
}

.ai-suggest-list li {
    position: relative;
    padding-left: 1.25rem;
    margin-bottom: 0.35rem;
    line-height: 1.45;
}

.ai-suggest-list li:last-child {
    margin-bottom: 0;
}

.ai-suggest-list li::before {
    content: "\f105"; /* fa-angle-right */
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome;
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 0.05rem;
    color: var(--enterprise-accent, #ffd700);
    font-size: 0.85em;
}

.ai-suggest-list.ai-suggest-list-positive li::before {
    content: "\f00c"; /* fa-check */
    color: var(--enterprise-success, #28a745);
}

.ai-suggest-list.ai-suggest-list-negative li::before {
    content: "\f071"; /* fa-triangle-exclamation */
    color: var(--enterprise-danger, #dc3545);
}

/* ======================================================================
   EDITORIAL ANALYTICS DESIGN SYSTEM
   Bloomberg × Stripe vocabulary for the /analytics dashboard.
   - Tabular monospace numbers so columns of P&L values align
   - Display-font section headers w/ gold rule
   - Hero number treatment (large value + small-caps label + subcopy)
   - Eyebrow labels (small-caps gold above content blocks)
   - Hairline gold dividers as content separators
   - Subtle staggered fade-in on KPI grids
   ====================================================================== */

/* --- Tabular monospace numerals -------------------------------------- */
/* Applied to anything that renders a number column. Critical for P&L
   tables and KPI grids — without this, "$1,234" and "$10,234" misalign. */

.tabular-nums,
.kpi-value,
.metric-value,
.editorial-hero-number {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* --- Display-font section header w/ editorial gold rule -------------- */
/* Use INSTEAD of `<h3 class="text-primary pb-2 border-bottom">` for
   tab section headers in /analytics. The hairline-gold-rule + small
   eyebrow text + uppercase letter-spacing reads like a magazine page. */

/* Section divider: substantial gold rule + small gold square decorator
   on the left edge. Always rendered — to opt out (e.g. first section
   of a tab), add the `.editorial-section--first` modifier class.
   Previous version used :first-child which incorrectly matched every
   editorial-section that happened to be the first child of its own
   wrapper div, suppressing dividers that should have been visible. */
.editorial-section {
    margin: 3rem 0 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 215, 0, 0.4);
    position: relative;
}

.editorial-section::before {
    content: "";
    position: absolute;
    top: -4px;
    left: 0;
    width: 28px;
    height: 7px;
    background: var(--enterprise-accent, #ffd700);
    border-radius: 1px;
}

/* Opt-out for sections at the top of a tab (no preceding content to
   separate from). Add this class explicitly. */
.editorial-section.editorial-section--first {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}
.editorial-section.editorial-section--first::before {
    display: none;
}

.editorial-section-eyebrow {
    font-family: 'Sora', 'Inter', system-ui, sans-serif;
    font-weight: 600;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--enterprise-accent, #ffd700);
    margin-bottom: 0.4rem;
    display: block;
}

.editorial-section-title {
    font-family: 'Sora', 'Inter', system-ui, sans-serif;
    font-weight: 600;
    font-size: 1.35rem;
    letter-spacing: -0.01em;
    color: var(--enterprise-text-primary, #f5f5f5);
    margin: 0 0 0.25rem;
    line-height: 1.2;
}

.editorial-section-subcopy {
    font-size: 0.875rem;
    color: var(--enterprise-text-muted, #909090);
    line-height: 1.5;
    margin: 0 0 0.85rem;
    max-width: 60ch;
}

/* Sub-section: less prominent than .editorial-section. Used for h5
   sub-headers inside an editorial-section (e.g. "Temporal Performance"
   within "Performance Charts"). Bold gold accent left bar + faint
   gold underline. */
.editorial-subsection {
    margin: 2rem 0 1.25rem;
    padding: 0.25rem 0 0.5rem 1rem;
    border-left: 3px solid var(--enterprise-accent, #ffd700);
    border-bottom: 1px solid rgba(255, 215, 0, 0.15);
}

.editorial-subsection-title {
    font-family: 'Sora', 'Inter', system-ui, sans-serif;
    font-weight: 600;
    font-size: 1.15rem;
    letter-spacing: -0.005em;
    color: var(--enterprise-text-primary, #e0e0e0);
    margin: 0 0 0.15rem;
    line-height: 1.25;
}

.editorial-subsection-subcopy {
    font-size: 0.8rem;
    color: var(--enterprise-text-muted, #888888);
    line-height: 1.45;
    margin: 0;
    max-width: 70ch;
}

/* Constrain unbounded chart canvases — Chart.js with maintainAspectRatio:
   false fills the parent's height entirely, so an unconstrained parent
   produces giant charts. .chart-frame fixes the height and reserves
   space; canvas inside fills it. */
.chart-frame {
    position: relative;
    height: 200px;
}
.chart-frame-sm {
    position: relative;
    height: 160px;
}
.chart-frame-tall {
    position: relative;
    height: 280px;
}

/* Editorial bar-list — a slim, magazine-style horizontal bar chart
   rendered as pure HTML. Replaces chunky Chart.js bar charts for
   small-N categorical datasets (≤10 bars). Each row: label · value ·
   relative bar growing rightward from a fixed gutter.
   Mirrors the Slice & Dice visual language. */
.bar-list {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    font-variant-numeric: tabular-nums;
}

.bar-list-row {
    display: grid;
    grid-template-columns: 110px 1fr 90px;
    align-items: center;
    gap: 0.85rem;
    padding: 0.2rem 0;
}

.bar-list-label {
    font-family: 'Sora', 'Inter', system-ui, sans-serif;
    font-size: 0.78rem;
    color: var(--enterprise-text-secondary, #b8b8b8);
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bar-list-track {
    position: relative;
    height: 14px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 2px;
    overflow: hidden;
}

.bar-list-fill {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    border-radius: 2px;
    background: linear-gradient(90deg,
        rgba(255, 215, 0, 0.85) 0%,
        rgba(255, 215, 0, 0.55) 100%);
    transition: opacity 0.15s ease, transform 0.15s ease;
}
.bar-list-fill.is-neg {
    background: linear-gradient(90deg,
        rgba(239, 107, 120, 0.85) 0%,
        rgba(239, 107, 120, 0.55) 100%);
}
.bar-list-row:hover .bar-list-fill {
    opacity: 0.85;
}

.bar-list-value {
    font-family: 'Sora', 'Inter', system-ui, sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--enterprise-text-primary, #e0e0e0);
    text-align: right;
}
.bar-list-value.pos { color: var(--enterprise-accent, #ffd700); }
.bar-list-value.neg { color: #ef6b78; }

.bar-list-meta {
    font-size: 0.7rem;
    color: var(--enterprise-text-muted, #888888);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.4rem;
    display: flex;
    justify-content: space-between;
}

/* Diverging variant — zero in the middle, positives grow right (gold),
   negatives grow left (red). Use when the dataset has mixed signs and
   the zero line matters (e.g. Sequential Performance). */
.bar-list--diverging .bar-list-row {
    grid-template-columns: 110px 1fr 90px;
}
.bar-list--diverging .bar-list-track {
    background: rgba(255, 255, 255, 0.03);
    position: relative;
}
.bar-list--diverging .bar-list-track::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: rgba(255, 215, 0, 0.25);
}
.bar-list--diverging .bar-list-fill {
    left: auto;
    right: auto;
}
.bar-list--diverging .bar-list-fill.is-pos {
    left: 50%;
    background: linear-gradient(90deg,
        rgba(255, 215, 0, 0.85) 0%,
        rgba(255, 215, 0, 0.4) 100%);
}
.bar-list--diverging .bar-list-fill.is-neg {
    right: 50%;
    background: linear-gradient(270deg,
        rgba(239, 107, 120, 0.85) 0%,
        rgba(239, 107, 120, 0.4) 100%);
}

/* Compact comparison tile — replaces tiny bar charts that exist only to
   show "value A vs value B". A 2-bar chart wastes space; a tile pair
   reads at a glance. */
.compare-tile-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    align-items: stretch;
}

.compare-tile {
    padding: 1rem 1.25rem;
    border-top: 2px solid rgba(255, 215, 0, 0.4);
    background: rgba(255, 255, 255, 0.015);
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.compare-tile.is-win { border-top-color: rgba(255, 215, 0, 0.55); }
.compare-tile.is-loss { border-top-color: rgba(239, 107, 120, 0.55); }

.compare-tile-label {
    font-family: 'Sora', 'Inter', system-ui, sans-serif;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--enterprise-text-muted, #888888);
}
.compare-tile.is-win .compare-tile-label { color: var(--enterprise-accent, #ffd700); }
.compare-tile.is-loss .compare-tile-label { color: #ef6b78; }

.compare-tile-value {
    font-family: 'Sora', 'Inter', system-ui, sans-serif;
    font-size: 1.85rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    line-height: 1.05;
    color: var(--enterprise-text-primary, #e0e0e0);
}
.compare-tile.is-win .compare-tile-value { color: var(--enterprise-accent, #ffd700); }
.compare-tile.is-loss .compare-tile-value { color: #ef6b78; }

.compare-tile-bar {
    height: 4px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 0.25rem;
}
.compare-tile-bar-fill {
    height: 100%;
    border-radius: 2px;
}
.compare-tile.is-win .compare-tile-bar-fill { background: var(--enterprise-accent, #ffd700); }
.compare-tile.is-loss .compare-tile-bar-fill { background: #ef6b78; }

.compare-tile-footnote {
    font-size: 0.75rem;
    color: var(--enterprise-text-muted, #888888);
    font-variant-numeric: tabular-nums;
}

/* --- Hero number block (Stripe pattern) ------------------------------ */
/* Top-of-page anchor metric. Big number, small-caps label, subcopy. */

.editorial-hero {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.5rem 0;
}

.editorial-hero-eyebrow {
    font-family: 'Sora', 'Inter', system-ui, sans-serif;
    font-weight: 600;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--enterprise-accent, #ffd700);
}

.editorial-hero-number {
    font-family: 'Sora', 'Inter', system-ui, sans-serif;
    font-weight: 700;
    font-size: clamp(2rem, 5vw, 3rem);
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--enterprise-text-primary, #f5f5f5);
}

.editorial-hero-subcopy {
    font-size: 0.85rem;
    color: var(--enterprise-text-muted, #909090);
    line-height: 1.5;
    margin-top: 0.25rem;
    max-width: 50ch;
}

/* Hero row — sits at the top of a tab, hosts 3-4 .editorial-hero blocks
   separated by faint gold dividers. The right-hand border on each block
   creates the column separation; the last block opts out. */
.editorial-hero-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid rgba(255, 215, 0, 0.18);
}

.editorial-hero-row .editorial-hero {
    flex: 1 1 200px;
    min-width: 0;
    padding: 0.25rem 1.5rem;
    border-left: 1px solid rgba(255, 215, 0, 0.12);
}

.editorial-hero-row .editorial-hero:first-child {
    padding-left: 0;
    border-left: 0;
}

/* --- Hairline gold rule (decorative separator) ----------------------- */

.editorial-rule {
    border: 0;
    border-top: 1px solid rgba(255, 215, 0, 0.22);
    margin: 1.5rem 0;
}

.editorial-rule-with-label {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1.5rem 0;
    color: var(--enterprise-text-muted, #909090);
}

.editorial-rule-with-label::before,
.editorial-rule-with-label::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(255, 215, 0, 0.22);
}

.editorial-rule-with-label-text {
    font-family: 'Sora', 'Inter', system-ui, sans-serif;
    font-weight: 600;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--enterprise-accent, #ffd700);
}

/* --- Staggered KPI fade-in (page-load motion) ------------------------ */
/* Add `.editorial-kpi-stagger` to a KPI grid and the children fade in
   one after the other on initial load. Pure CSS; no JS hook required.
   nth-child up to 25 covers the Overview tab's full grid. */

@keyframes editorial-kpi-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.editorial-kpi-stagger > * {
    opacity: 0;
    animation: editorial-kpi-fade-in 0.45s ease-out forwards;
}

.editorial-kpi-stagger > *:nth-child(1)  { animation-delay: 0ms; }
.editorial-kpi-stagger > *:nth-child(2)  { animation-delay: 35ms; }
.editorial-kpi-stagger > *:nth-child(3)  { animation-delay: 70ms; }
.editorial-kpi-stagger > *:nth-child(4)  { animation-delay: 105ms; }
.editorial-kpi-stagger > *:nth-child(5)  { animation-delay: 140ms; }
.editorial-kpi-stagger > *:nth-child(6)  { animation-delay: 175ms; }
.editorial-kpi-stagger > *:nth-child(7)  { animation-delay: 210ms; }
.editorial-kpi-stagger > *:nth-child(8)  { animation-delay: 245ms; }
.editorial-kpi-stagger > *:nth-child(9)  { animation-delay: 280ms; }
.editorial-kpi-stagger > *:nth-child(10) { animation-delay: 315ms; }
.editorial-kpi-stagger > *:nth-child(n+11) { animation-delay: 350ms; }

/* Honor user's reduced-motion preference. */
@media (prefers-reduced-motion: reduce) {
    .editorial-kpi-stagger > * {
        opacity: 1;
        animation: none;
    }
}

/* --- Filter bar: editorial refinement -------------------------------- */
/* Tighter labels, gold accent on focus, subtle bottom rule when scrolling. */

.editorial-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem;
    padding: 1rem 0 1.25rem;
    border-bottom: 1px solid rgba(255, 215, 0, 0.12);
    margin-bottom: 1.5rem;
}

.editorial-filter-bar > * {
    flex: 1 1 140px;
    min-width: 0;
}

.editorial-filter-label {
    font-family: 'Sora', 'Inter', system-ui, sans-serif;
    font-weight: 600;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--enterprise-text-muted, #909090);
    display: block;
    margin-bottom: 0.35rem;
}

.editorial-filter-bar input,
.editorial-filter-bar select {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 215, 0, 0.18);
    color: var(--enterprise-text-primary, #f5f5f5);
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
    width: 100%;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.editorial-filter-bar input:focus,
.editorial-filter-bar select:focus {
    outline: none;
    border-color: var(--enterprise-accent, #ffd700);
    background: rgba(255, 215, 0, 0.05);
}

.editorial-filter-actions {
    flex: 0 0 auto;
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
}

/* --- KPI card hover refinement (subtle, restrained) ----------------- */
/* The existing .kpi-card already has hover-translate-Y. Add a more
   restrained gold border that doesn't fight the translation. */

.kpi-card {
    cursor: default;
}
.kpi-card[onclick] {
    cursor: pointer;
}

/* ====================================================================== */
/* Slice & Dice tables — relative-bar breakdowns                          */
/* ====================================================================== */
/* Editorial breakdown tables. Replaces dense numeric tables with bars in
   the Net P&L cell so magnitude is read at a glance. Used on the
   Performance tab Slice & Dice section. */

.slice-table {
    width: 100%;
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
    border-collapse: collapse;
}

.slice-table thead th {
    font-family: 'Sora', 'Inter', system-ui, sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--enterprise-text-muted, #888888);
    padding: 0.5rem 0.6rem;
    border-bottom: 1px solid rgba(255, 215, 0, 0.18);
    text-align: left;
    background: transparent;
}

.slice-table thead th.text-end {
    text-align: right;
}

.slice-table tbody td {
    padding: 0.55rem 0.6rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    color: var(--enterprise-text-secondary, #b8b8b8);
    vertical-align: middle;
}

.slice-table tbody tr:hover td {
    background: rgba(255, 215, 0, 0.03);
}

.slice-table tbody tr:last-child td {
    border-bottom: 0;
}

.slice-table .slice-label {
    color: var(--enterprise-text-primary, #e0e0e0);
    font-weight: 500;
}

/* Bar cell — holds a value + a relative bar that grows from the right
   edge. The value sits on top via a span; the bar is an absolutely
   positioned underlay. */
.slice-bar-cell {
    position: relative;
    text-align: right;
    min-width: 130px;
}

.slice-bar-cell .slice-bar-track {
    position: absolute;
    inset: 0.3rem 0.6rem;
    pointer-events: none;
}

.slice-bar-cell .slice-bar-fill {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    border-radius: 2px;
    opacity: 0.18;
    transition: opacity 0.15s ease;
}

.slice-table tbody tr:hover .slice-bar-cell .slice-bar-fill {
    opacity: 0.32;
}

.slice-bar-pos {
    background: var(--enterprise-accent, #ffd700);
}

.slice-bar-neg {
    background: #dc3545;
}

.slice-bar-cell .slice-bar-value {
    position: relative;
    z-index: 1;
    font-weight: 600;
}

.slice-bar-cell .slice-bar-value.pos {
    color: var(--enterprise-accent, #ffd700);
}

.slice-bar-cell .slice-bar-value.neg {
    color: #ef6b78;
}

/* Strike-rate inline pill: small horizontal bar plus the percentage. */
.slice-strike {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: flex-end;
}

.slice-strike-track {
    width: 48px;
    height: 4px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 2px;
    overflow: hidden;
}

.slice-strike-fill {
    height: 100%;
    background: var(--enterprise-text-secondary, #b8b8b8);
    border-radius: 2px;
}

.slice-strike-fill.is-good {
    background: var(--enterprise-accent, #ffd700);
}

.slice-table-empty {
    padding: 1.25rem 0.6rem;
    text-align: center;
    color: var(--enterprise-text-muted, #888888);
    font-size: 0.8rem;
    border: 1px dashed rgba(255, 255, 255, 0.08);
    border-radius: 4px;
}

/* Scrollable container — matches existing table-responsive heights but
   uses the gold-tinted scrollbar treatment. */
.slice-table-wrap {
    max-height: 320px;
    overflow-y: auto;
    border-top: 1px solid rgba(255, 215, 0, 0.18);
}
.slice-table-wrap thead th {
    position: sticky;
    top: 0;
    background: var(--enterprise-bg-primary, #1a1a1a);
    z-index: 1;
}

/* Direction comparison — two-column side-by-side, no card chrome. */
.direction-compare {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-top: 0.5rem;
}
@media (max-width: 767.98px) {
    .direction-compare {
        grid-template-columns: 1fr;
    }
}

.direction-card {
    padding: 1rem 1.25rem;
    border-top: 2px solid rgba(255, 215, 0, 0.4);
    background: rgba(255, 255, 255, 0.015);
}

.direction-card-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.direction-card-label {
    font-family: 'Sora', 'Inter', system-ui, sans-serif;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--enterprise-accent, #ffd700);
}

.direction-card-trades {
    font-size: 0.78rem;
    color: var(--enterprise-text-muted, #888888);
    font-variant-numeric: tabular-nums;
}

.direction-card-pnl {
    font-family: 'Sora', 'Inter', system-ui, sans-serif;
    font-size: 1.6rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    line-height: 1.1;
    margin-bottom: 0.15rem;
}
.direction-card-pnl.pos { color: var(--enterprise-accent, #ffd700); }
.direction-card-pnl.neg { color: #ef6b78; }

.direction-card-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    padding: 0.35rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    font-variant-numeric: tabular-nums;
}
.direction-card-row:first-of-type {
    border-top: 0;
}
.direction-card-row .label {
    color: var(--enterprise-text-muted, #888888);
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
}
.direction-card-row .value {
    color: var(--enterprise-text-primary, #e0e0e0);
    font-weight: 500;
}

/* ====================================================================== */
/* Hour-of-day tiles (Timing tab) — editorial replacement for the chunky  */
/* green/red blocks. Numeric value + relative bar at the bottom.          */
/* ====================================================================== */
.hour-tile {
    flex: 0 0 96px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 4px;
    padding: 0.65rem 0.75rem 0.5rem;
    font-variant-numeric: tabular-nums;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.hour-tile.is-pos { border-color: rgba(255, 215, 0, 0.3); }
.hour-tile.is-neg { border-color: rgba(239, 107, 120, 0.3); }
.hour-tile-time {
    font-family: 'Sora', 'Inter', system-ui, sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--enterprise-text-primary, #e0e0e0);
    letter-spacing: -0.01em;
}
.hour-tile-pnl {
    font-family: 'Sora', 'Inter', system-ui, sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
}
.hour-tile.is-pos .hour-tile-pnl { color: var(--enterprise-accent, #ffd700); }
.hour-tile.is-neg .hour-tile-pnl { color: #ef6b78; }
.hour-tile-count {
    font-size: 0.65rem;
    color: var(--enterprise-text-muted, #888888);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.hour-tile-bar {
    height: 3px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 0.3rem;
}
.hour-tile-bar-fill {
    height: 100%;
}
.hour-tile.is-pos .hour-tile-bar-fill { background: var(--enterprise-accent, #ffd700); }
.hour-tile.is-neg .hour-tile-bar-fill { background: #ef6b78; }

/* ====================================================================== */
/* Risk & Stats — tiered tiles + current streak hero                      */
/* ====================================================================== */
/* Editorial risk tiles. Tiered sizing (lg / md / sm) lets us hierarchize
   metrics by importance instead of dumping 20 same-sized cards into one
   grid. Color cues come from the metric's health_status. */
.risk-grid {
    display: grid;
    gap: 0.75rem;
}
.risk-grid--hero {
    grid-template-columns: repeat(4, 1fr);
}
.risk-grid--md {
    grid-template-columns: repeat(2, 1fr);
}
.risk-grid--sm {
    grid-template-columns: repeat(6, 1fr);
}
/* Uniform KPI grid — every tile the same size, 4-up at desktop */
.risk-grid--kpi {
    grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1199px) {
    .risk-grid--sm { grid-template-columns: repeat(3, 1fr); }
    .risk-grid--hero { grid-template-columns: repeat(2, 1fr); }
    .risk-grid--kpi { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
    .risk-grid--kpi { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
    .risk-grid--sm,
    .risk-grid--md,
    .risk-grid--hero,
    .risk-grid--kpi { grid-template-columns: 1fr; }
}

.risk-tile {
    position: relative;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 4px;
    padding: 1.1rem 1.35rem;
    transition: transform 0.15s ease, border-color 0.15s ease;
    font-variant-numeric: tabular-nums;
}
.risk-tile[onclick]:hover {
    transform: translateY(-1px);
    border-color: rgba(255, 215, 0, 0.35);
}
.risk-tile-label {
    font-family: 'Sora', 'Inter', system-ui, sans-serif;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--enterprise-text-muted, #888888);
    margin-bottom: 0.5rem;
    line-height: 1.2;
}
.risk-tile-value {
    font-family: 'Sora', 'Inter', system-ui, sans-serif;
    font-size: 1.7rem;
    font-weight: 600;
    color: var(--enterprise-text-primary, #e0e0e0);
    letter-spacing: -0.01em;
    line-height: 1.05;
}

/* Legacy hero modifier — kept for backwards compat but unused after the
   "uniform KPI grid" refactor. Same size as default now. */
.risk-tile--lg { padding: 1.1rem 1.35rem; }
.risk-tile--lg .risk-tile-value { font-size: 1.7rem; }
.risk-tile--lg .risk-tile-label { font-size: 0.7rem; margin-bottom: 0.5rem; }

/* Health color cues — pure border + value tint, no chunky fills */
.risk-tile.is-strong {
    border-color: rgba(255, 215, 0, 0.4);
    background: rgba(255, 215, 0, 0.04);
}
.risk-tile.is-strong .risk-tile-value { color: var(--enterprise-accent, #ffd700); }

.risk-tile.is-good {
    border-color: rgba(255, 215, 0, 0.2);
}
.risk-tile.is-good .risk-tile-value { color: var(--enterprise-text-primary, #e0e0e0); }

.risk-tile.is-fair {
    border-color: rgba(255, 193, 7, 0.3);
}
.risk-tile.is-fair .risk-tile-value { color: #ffc44d; }

.risk-tile.is-weak {
    border-color: rgba(239, 107, 120, 0.35);
    background: rgba(239, 107, 120, 0.04);
}
.risk-tile.is-weak .risk-tile-value { color: #ef6b78; }

/* Current streak — editorial hero replacing the bg-success/bg-danger card */
.current-streak {
    padding: 1.5rem 1.75rem;
    border: 1px solid rgba(255, 215, 0, 0.25);
    background: linear-gradient(180deg,
        rgba(255, 215, 0, 0.05) 0%,
        rgba(255, 255, 255, 0.01) 100%);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.current-streak.is-loss {
    border-color: rgba(239, 107, 120, 0.3);
    background: linear-gradient(180deg,
        rgba(239, 107, 120, 0.04) 0%,
        rgba(255, 255, 255, 0.01) 100%);
}
.current-streak.is-neutral {
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.015);
}
.current-streak-eyebrow {
    font-family: 'Sora', 'Inter', system-ui, sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--enterprise-accent, #ffd700);
}
.current-streak.is-loss .current-streak-eyebrow { color: #ef6b78; }
.current-streak.is-neutral .current-streak-eyebrow { color: var(--enterprise-text-muted, #888888); }
.current-streak-value {
    font-family: 'Sora', 'Inter', system-ui, sans-serif;
    font-size: 3rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    color: var(--enterprise-accent, #ffd700);
    letter-spacing: -0.02em;
}
.current-streak.is-loss .current-streak-value { color: #ef6b78; }
.current-streak-caption {
    font-size: 0.85rem;
    color: var(--enterprise-text-secondary, #b8b8b8);
    max-width: 70ch;
    margin: 0;
}

/* ====================================================================== */
/* Tag Intelligence — editorial tag chips, insights, perfect profile      */
/* ====================================================================== */

/* Slim editorial tag chip — replaces Bootstrap .badge for tag display */
.tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    background: rgba(255, 215, 0, 0.08);
    border: 1px solid rgba(255, 215, 0, 0.25);
    color: var(--enterprise-text-primary, #e0e0e0);
    font-family: 'Sora', 'Inter', system-ui, sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.02em;
    white-space: nowrap;
    line-height: 1.4;
}
.tag-chip.is-muted {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
    color: var(--enterprise-text-secondary, #b8b8b8);
}
.tag-chip.is-psych {
    background: rgba(139, 92, 246, 0.08);
    border-color: rgba(139, 92, 246, 0.3);
}
.tag-chip-group {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
}

/* Editorial insight tile — gold/red/blue left bar; copy on the right */
.insight-tile {
    padding: 0.85rem 1rem 0.85rem 1.1rem;
    background: rgba(255, 255, 255, 0.015);
    border-left: 3px solid rgba(255, 215, 0, 0.4);
    margin-bottom: 0.75rem;
}
.insight-tile.is-success { border-left-color: rgba(255, 215, 0, 0.65); }
.insight-tile.is-warning { border-left-color: rgba(255, 193, 7, 0.65); }
.insight-tile.is-danger  { border-left-color: rgba(239, 107, 120, 0.65); }
.insight-tile.is-info    { border-left-color: rgba(96, 165, 250, 0.55); }
.insight-tile-title {
    font-family: 'Sora', 'Inter', system-ui, sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--enterprise-text-primary, #e0e0e0);
    margin-bottom: 0.2rem;
}
.insight-tile-body {
    font-size: 0.8rem;
    color: var(--enterprise-text-secondary, #b8b8b8);
    line-height: 1.5;
    margin: 0;
}

/* Psychology × Execution matrix — editorial restyle. Keeps the existing
   .matrix-cell class but rewrites the surface and color band. */
.matrix-table {
    border-collapse: separate;
    border-spacing: 4px;
    margin: 0;
}
.matrix-table thead th {
    background: transparent !important;
    color: var(--enterprise-text-muted, #888888) !important;
    font-family: 'Sora', 'Inter', system-ui, sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-align: center;
    border: 0;
    padding: 0.5rem 0.4rem;
}
.matrix-table tbody td.row-header {
    background: transparent !important;
    border: 0;
    padding-right: 0.75rem;
}
.matrix-cell {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    font-variant-numeric: tabular-nums;
}
.matrix-cell:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}
.matrix-cell.performance-excellent {
    background: rgba(255, 215, 0, 0.14);
    border-color: rgba(255, 215, 0, 0.45);
}
.matrix-cell.performance-good {
    background: rgba(255, 215, 0, 0.07);
    border-color: rgba(255, 215, 0, 0.25);
}
.matrix-cell.performance-fair {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
}
.matrix-cell.performance-poor {
    background: rgba(239, 107, 120, 0.1);
    border-color: rgba(239, 107, 120, 0.35);
}
.matrix-cell.empty-cell {
    background: transparent;
    border-style: dashed;
    border-color: rgba(255, 255, 255, 0.04);
}
.matrix-cell-winrate {
    font-family: 'Sora', 'Inter', system-ui, sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--enterprise-text-primary, #e0e0e0);
    line-height: 1.1;
}
.matrix-cell-count {
    font-size: 0.7rem;
    color: var(--enterprise-text-muted, #888888);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 0.2rem;
}
.matrix-cell-pnl {
    font-size: 0.78rem;
    font-weight: 600;
    margin-top: 0.15rem;
}
.matrix-cell-pnl.text-success { color: var(--enterprise-accent, #ffd700) !important; }
.matrix-cell-pnl.text-danger  { color: #ef6b78 !important; }

/* Perfect Trade Profile — editorial card with gold accent */
.perfect-profile {
    border: 1px solid rgba(255, 215, 0, 0.25);
    background: linear-gradient(180deg,
        rgba(255, 215, 0, 0.04) 0%,
        rgba(255, 255, 255, 0.01) 100%);
    padding: 1.5rem;
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 2rem;
}
@media (max-width: 767.98px) {
    .perfect-profile {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}
.perfect-profile-header {
    grid-column: 1 / -1;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 215, 0, 0.2);
    padding-bottom: 0.75rem;
    margin-bottom: 0.25rem;
}
.perfect-profile-eyebrow {
    font-family: 'Sora', 'Inter', system-ui, sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--enterprise-accent, #ffd700);
}
.perfect-profile-sample {
    font-size: 0.72rem;
    color: var(--enterprise-text-muted, #888888);
    font-variant-numeric: tabular-nums;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.perfect-profile-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    gap: 1rem;
}
.perfect-profile-row:last-child { border-bottom: 0; }
.perfect-profile-row-category {
    font-family: 'Sora', 'Inter', system-ui, sans-serif;
    font-size: 0.7rem;
    color: var(--enterprise-text-muted, #888888);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    flex: 0 0 130px;
}
.perfect-profile-row-tag { flex: 1; }
.perfect-profile-row-freq {
    font-size: 0.78rem;
    color: var(--enterprise-text-secondary, #b8b8b8);
    font-variant-numeric: tabular-nums;
}

.perfect-profile-stats {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.perfect-profile-stat {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.perfect-profile-stat:last-child { border-bottom: 0; }
.perfect-profile-stat-label {
    font-family: 'Sora', 'Inter', system-ui, sans-serif;
    font-size: 0.7rem;
    color: var(--enterprise-text-muted, #888888);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.perfect-profile-stat-value {
    font-family: 'Sora', 'Inter', system-ui, sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--enterprise-accent, #ffd700);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    line-height: 1;
}

/* Combination row — used for top combinations list */
.combo-row {
    display: grid;
    grid-template-columns: 1.6fr 80px 90px 1fr 100px;
    gap: 1rem;
    align-items: center;
    padding: 0.6rem 0.4rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    font-variant-numeric: tabular-nums;
}
.combo-row:hover { background: rgba(255, 215, 0, 0.03); }
.combo-row-meta {
    font-size: 0.78rem;
    color: var(--enterprise-text-secondary, #b8b8b8);
}
.combo-row-strike {
    font-size: 0.8rem;
    color: var(--enterprise-text-primary, #e0e0e0);
    font-weight: 500;
}
.combo-row-bar {
    height: 6px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}
.combo-row-bar-fill {
    height: 100%;
    border-radius: 2px;
}
.combo-row-bar-fill.is-pos { background: linear-gradient(90deg, rgba(255, 215, 0, 0.85), rgba(255, 215, 0, 0.5)); }
.combo-row-bar-fill.is-neg { background: linear-gradient(90deg, rgba(239, 107, 120, 0.85), rgba(239, 107, 120, 0.5)); }
.combo-row-pnl {
    font-family: 'Sora', 'Inter', system-ui, sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    text-align: right;
}
.combo-row-pnl.pos { color: var(--enterprise-accent, #ffd700); }
.combo-row-pnl.neg { color: #ef6b78; }
.combo-header {
    display: grid;
    grid-template-columns: 1.6fr 80px 90px 1fr 100px;
    gap: 1rem;
    padding: 0 0.4rem 0.5rem;
    font-family: 'Sora', 'Inter', system-ui, sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--enterprise-text-muted, #888888);
    border-bottom: 1px solid rgba(255, 215, 0, 0.18);
}

/* ====================================================================== */
/* Daily Journal — flat metric row utilities (no card containers)         */
/* ====================================================================== */

.metric-row {
    display: flex;
    margin-bottom: 1.25rem;
}

.metric-cell {
    flex: 1 1 0;
    min-width: 0;
    padding-left: 1rem;
    padding-right: 1rem;
}

.metric-cell:first-child {
    padding-left: 0;
}

.metric-cell:last-child {
    padding-right: 0;
}

.metric-cell + .metric-cell {
    border-left: 1px solid rgba(255, 215, 0, 0.12);
}

.metric-label {
    font-family: 'Sora', 'Inter', system-ui, sans-serif;
    font-weight: 600;
    font-size: 0.72rem;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--enterprise-accent, #ffd700);
    margin-bottom: 0.3rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.metric-label i {
    font-size: 0.7rem;
    opacity: 0.85;
}

.metric-value {
    font-family: 'Sora', 'Inter', system-ui, sans-serif;
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.01em;
    margin-bottom: 0.25rem;
}

.metric-value-lg { font-size: 1.55rem; }
.metric-value-md { font-size: 1.2rem; }
.metric-value-sm { font-size: 1rem; }

.metric-caption {
    font-size: 0.7rem;
    color: var(--enterprise-text-muted);
    letter-spacing: 0.02em;
}

/* Mobile: stack metric cells vertically */
@media (max-width: 768px) {
    .metric-row {
        flex-direction: column;
        gap: 0.85rem;
    }
    .metric-cell,
    .metric-cell:first-child,
    .metric-cell:last-child {
        padding-left: 0;
        padding-right: 0;
    }
    .metric-cell + .metric-cell {
        border-left: 0;
        border-top: 1px solid var(--enterprise-bg-tertiary);
        padding-top: 0.85rem;
    }
}

/* ---- Flat alert banners (no card, no gradient) ---------------------- */

.flat-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    border-left: 4px solid var(--enterprise-bg-tertiary);
    background: rgba(255, 255, 255, 0.02);
    padding: 0.9rem 1rem;
    margin-bottom: 1rem;
}

.flat-alert .flat-alert-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-width: 1px;
    border-style: solid;
}

.flat-alert .flat-alert-body {
    flex: 1;
    min-width: 0;
}

.flat-alert .flat-alert-title {
    font-family: 'Sora', 'Inter', system-ui, sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 0.25rem;
}

.flat-alert-danger {
    border-left-color: var(--enterprise-danger, #dc3545);
    background: rgba(220, 53, 69, 0.06);
}
.flat-alert-danger .flat-alert-icon {
    border-color: var(--enterprise-danger, #dc3545);
    color: var(--enterprise-danger, #dc3545);
}
.flat-alert-danger .flat-alert-title { color: var(--enterprise-danger, #dc3545); }

.flat-alert-warning {
    border-left-color: var(--enterprise-warning, #ffc107);
    background: rgba(255, 193, 7, 0.05);
}
.flat-alert-warning .flat-alert-icon {
    border-color: var(--enterprise-warning, #ffc107);
    color: var(--enterprise-warning, #ffc107);
}
.flat-alert-warning .flat-alert-title { color: var(--enterprise-warning, #ffc107); }

.flat-alert-info {
    border-left-color: var(--enterprise-accent, #ffd700);
    background: rgba(255, 215, 0, 0.04);
}
.flat-alert-info .flat-alert-icon {
    border-color: var(--enterprise-accent, #ffd700);
    color: var(--enterprise-accent, #ffd700);
}
.flat-alert-info .flat-alert-title { color: var(--enterprise-accent, #ffd700); }

/* Inline chip pills used inside flat alerts */
.alert-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    background: rgba(0, 0, 0, 0.25);
    padding: 0.25rem 0.6rem;
    border-radius: 4px;
    font-size: 0.8rem;
    border-left: 2px solid transparent;
}
.alert-chip-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--enterprise-text-muted);
}
.alert-chip-danger { border-left-color: var(--enterprise-danger, #dc3545); }
.alert-chip-warning { border-left-color: var(--enterprise-warning, #ffc107); }

/* ---- Rating dots (used throughout daily journal) -------------------- */

.rating-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 215, 0, 0.35);
    background-color: rgba(255, 255, 255, 0.04);
    transition: all 0.15s ease;
    flex-shrink: 0;
}
.rating-dot-clickable { cursor: pointer; }
.rating-dot-clickable:hover {
    border-color: var(--enterprise-accent, #ffd700);
    transform: scale(1.15);
}
.rating-dot.is-active {
    background-color: var(--enterprise-accent, #ffd700);
    border-color: var(--enterprise-accent, #ffd700);
    box-shadow: 0 0 6px rgba(255, 215, 0, 0.4);
}
.rating-dot.is-active ~ .rating-dot { background-color: transparent; }

/* Row that contains a label + dot scale, side-by-side */
.rating-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid rgba(255, 215, 0, 0.05);
}
.rating-row:last-child { border-bottom: 0; }
.rating-row-label {
    font-family: 'Sora', 'Inter', system-ui, sans-serif;
    font-weight: 500;
    font-size: 0.85rem;
    color: var(--enterprise-text-secondary, #cfcfcf);
}

/* ---- Small subsection label (gold uppercase tag) -------------------- */

.label-subsection {
    font-family: 'Sora', 'Inter', system-ui, sans-serif;
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--enterprise-accent, #ffd700);
    margin-bottom: 0.4rem;
    display: block;
}

/* Bordered variant — gold underline, used as a subsection header inside
   trade-detail panes (replaces the heavier .enterprise-module pattern). */
.label-subsection-bordered {
    font-family: 'Sora', 'Inter', system-ui, sans-serif;
    font-weight: 600;
    font-size: 0.82rem;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--enterprise-accent, #ffd700);
    padding-bottom: 0.4rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid rgba(255, 215, 0, 0.22);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ---- Tooltip dark-theme (moved from manage_daily_journal.html) ------ */

.tooltip { z-index: 1080 !important; }

.tooltip .tooltip-inner {
    background-color: rgba(30, 30, 30, 0.98) !important;
    color: #e0e0e0 !important;
    padding: 8px 12px !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1) !important;
    font-size: 0.85rem !important;
    max-width: 300px !important;
    text-align: left !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    line-height: 1.4 !important;
}

.tooltip.bs-tooltip-top .tooltip-arrow::before    { border-top-color: rgba(30, 30, 30, 0.98) !important; }
.tooltip.bs-tooltip-bottom .tooltip-arrow::before { border-bottom-color: rgba(30, 30, 30, 0.98) !important; }
.tooltip.bs-tooltip-start .tooltip-arrow::before  { border-left-color: rgba(30, 30, 30, 0.98) !important; }
.tooltip.bs-tooltip-end .tooltip-arrow::before    { border-right-color: rgba(30, 30, 30, 0.98) !important; }

/* ---- Rating scale (1-5 buttons) -------------------------------------- */

.review-rating-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.5rem;
    padding: 0.5rem 0;
}

.review-rating-row + .review-rating-row {
    border-top: 1px solid rgba(255, 215, 0, 0.06);
}

.review-rating-label {
    font-family: 'Sora', 'Inter', system-ui, sans-serif;
    font-weight: 500;
    font-size: 0.95rem;
    color: var(--enterprise-text-primary, #f5f5f5);
    letter-spacing: 0.005em;
}

.review-rating-scale {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.review-rating-button {
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 10px;
    border: 1px solid rgba(255, 215, 0, 0.18);
    background: rgba(20, 20, 28, 0.7);
    color: rgba(245, 245, 245, 0.85);
    font-family: 'Sora', 'Inter', system-ui, sans-serif;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: transform 0.1s ease,
                background-color 0.15s ease,
                border-color 0.15s ease,
                color 0.15s ease,
                box-shadow 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.review-rating-button:hover {
    transform: translateY(-1px);
    background: rgba(255, 215, 0, 0.12);
    border-color: rgba(255, 215, 0, 0.45);
    color: #fff;
}

.review-rating-button:focus-visible {
    outline: 2px solid #ffd966;
    outline-offset: 2px;
}

.review-rating-button:active {
    transform: translateY(0);
}

/* Selected state — color-coded by rating value so glance-scanning the
   page surfaces low ratings without reading numbers. Reuses the gradient
   intent of the legacy .rating-dot.filled-N rules. */

.review-rating-button.is-selected {
    color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
    transform: translateY(-1px);
}

.review-rating-button.is-selected[data-value="1"] { background: linear-gradient(180deg, #ef4444 0%, #b91c1c 100%); }
.review-rating-button.is-selected[data-value="2"] { background: linear-gradient(180deg, #fb923c 0%, #c2410c 100%); }
.review-rating-button.is-selected[data-value="3"] { background: linear-gradient(180deg, #ffc857 0%, #b88a00 100%); color: #1a1a22; }
.review-rating-button.is-selected[data-value="4"] { background: linear-gradient(180deg, #34d399 0%, #047857 100%); }
.review-rating-button.is-selected[data-value="5"] { background: linear-gradient(180deg, #fde047 0%, #ca8a04 100%); color: #1a1a22; }

/* Read-only display variant (.rating_display macro) — same swatch row
   but no hover, no cursor pointer, no clear button. Used on
   view-only summaries. */

.review-rating-row-readonly .review-rating-button {
    cursor: default;
    pointer-events: none;
}

.review-rating-row-readonly .review-rating-button:hover {
    transform: none;
    background: rgba(20, 20, 28, 0.7);
    border-color: rgba(255, 215, 0, 0.18);
    color: rgba(245, 245, 245, 0.85);
}

.review-rating-row-readonly .review-rating-button.is-selected:hover {
    /* preserve the selected gradient */
}

/* Clear button (x) — visually subordinate to the value buttons */

.review-rating-clear-wrap {
    display: inline-flex;
    align-items: center;
    margin-left: 0.4rem;
    padding-left: 0.5rem;
    border-left: 1px solid rgba(255, 215, 0, 0.10);
}

.review-rating-clear {
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 8px;
    border: 1px solid rgba(245, 245, 245, 0.12);
    background: transparent;
    color: rgba(245, 245, 245, 0.45);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s ease, border-color 0.15s ease;
    font-size: 0.85rem;
}

.review-rating-clear:hover,
.review-rating-clear:focus-visible {
    color: #ff8a80;
    border-color: rgba(255, 138, 128, 0.4);
    outline: none;
}

/* ---- Responsive rating layout: stack label above buttons on small screens */

@media (max-width: 575px) {
    .review-rating-row {
        grid-template-columns: 1fr;
        gap: 0.65rem;
        padding: 1rem 0;
    }
    .review-rating-scale {
        flex-wrap: wrap;
    }
    .review-rating-button {
        width: 48px;
        height: 48px;
    }
}

/* ---- Review tabs rail (left-side nav) -------------------------------- */

.review-tabs-rail {
    flex: 0 0 232px;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding-right: 1.25rem;
    border-right: 1px solid rgba(255, 215, 0, 0.08);
}

.review-tab-pill {
    text-align: left;
    width: 100%;
    padding: 0.7rem 1rem;
    border-radius: 10px;
    border: 1px solid transparent;
    background: rgba(15, 15, 20, 0.4);
    color: rgba(245, 245, 245, 0.75);
    font-family: 'Sora', 'Inter', system-ui, sans-serif;
    font-weight: 500;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background-color 0.15s ease,
                color 0.15s ease,
                border-color 0.15s ease;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.review-tab-pill:hover {
    background: rgba(255, 215, 0, 0.08);
    color: #fff;
}

.review-tab-pill.active {
    background: rgba(255, 215, 0, 0.16);
    color: #ffd966;
    border-color: rgba(255, 215, 0, 0.30);
    font-weight: 600;
}

.review-tab-pill .review-tab-pill-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: rgba(255, 215, 0, 0.12);
    color: #ffd966;
    font-size: 0.75rem;
    font-weight: 700;
}

.review-tab-pill.active .review-tab-pill-step {
    background: #ffd966;
    color: #1a1a22;
}

.review-tab-pill .review-tab-pill-badge {
    margin-left: auto;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: rgba(255, 215, 0, 0.20);
    color: #ffd966;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

@media (max-width: 767px) {
    .review-tabs-rail {
        flex: 1 1 auto;
        flex-direction: row;
        gap: 0.4rem;
        padding-right: 0;
        border-right: none;
        padding-bottom: 1rem;
        margin-bottom: 1rem;
        border-bottom: 1px solid rgba(255, 215, 0, 0.08);
        overflow-x: auto;
    }
    .review-tab-pill {
        flex: 0 0 auto;
    }
}

/* ---- Review page layout: stack tabs above content on mobile ---------- */

@media (max-width: 767px) {
    .review-page-layout {
        flex-direction: column !important;
    }
}

/* ---- Aggregated psychology panel (periodic reviews) ----------------- */

.psych-aggregates {
    /* container layout governed by the section card body */
}

.psych-aggregates-coverage {
    font-size: 0.78rem;
    color: rgba(245, 245, 245, 0.65);
    padding: 0.3rem 0.55rem;
    border-left: 3px solid rgba(255, 215, 0, 0.35);
    background: rgba(255, 215, 0, 0.04);
    border-radius: 0 6px 6px 0;
    margin-bottom: 0.65rem;
}

.psych-aggregates-coverage strong {
    color: #ffd966;
    font-weight: 600;
}

.psych-aggregates-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1.25rem;
    align-items: stretch;
}

.psych-aggregates-list {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.psych-aggregates-row {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr) 48px;
    align-items: center;
    gap: 0.7rem;
    padding: 0.15rem 0;
}

.psych-aggregates-label {
    font-family: 'Sora', 'Inter', system-ui, sans-serif;
    font-size: 0.85rem;
    color: rgba(245, 245, 245, 0.85);
    font-weight: 500;
}

.psych-aggregates-bar {
    height: 8px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.psych-aggregates-bar-fill {
    height: 100%;
    background: linear-gradient(90deg,
        rgba(255, 138, 76, 0.55) 0%,
        rgba(255, 215, 0, 0.85) 100%);
    transition: width 0.3s ease;
    border-radius: 999px;
}

.psych-aggregates-bar-fill[data-value="0"] {
    background: transparent;
}

.psych-aggregates-value {
    font-family: 'Sora', 'Inter', system-ui, sans-serif;
    font-size: 0.85rem;
    color: #ffd966;
    font-weight: 600;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.psych-aggregates-overall {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(255, 215, 0, 0.10);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-family: 'Sora', 'Inter', system-ui, sans-serif;
    font-weight: 500;
    color: rgba(245, 245, 245, 0.85);
    font-size: 0.9rem;
}

.psych-aggregates-overall-value {
    color: #ffd966;
    font-weight: 700;
    font-size: 1.1rem;
    font-variant-numeric: tabular-nums;
}

.psych-aggregates-radar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-height: 100%;
}

.psych-radar-canvas {
    max-width: 100%;
    width: 270px;
    height: 270px;
}

/* Add a 4-column grid for compact reflection textareas — matches the
   daily review density per user feedback. */
.review-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

@media (max-width: 1199px) {
    .review-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575px) {
    .review-grid-4 { grid-template-columns: 1fr; }
}

@media (max-width: 991px) {
    .psych-aggregates-body {
        grid-template-columns: 1fr;
    }
    .psych-aggregates-radar {
        order: -1;
        justify-self: center;
    }
}

@media (max-width: 575px) {
    .psych-aggregates-row {
        grid-template-columns: 110px minmax(0, 1fr) 48px;
        gap: 0.55rem;
    }
}

/* ---- Side-by-side two-column body inside section cards --------------- */

.review-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.review-two-col .review-two-col-divider {
    border-right: 1px solid rgba(255, 215, 0, 0.08);
    padding-right: 1.5rem;
}

.review-two-col > div:last-child {
    padding-left: 1.5rem;
    border-left: 1px solid rgba(255, 215, 0, 0.08);
    margin-left: -1.5rem;
}

@media (max-width: 767px) {
    .review-two-col {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .review-two-col > div:last-child {
        padding-left: 0;
        border-left: none;
        margin-left: 0;
    }
    .review-two-col .review-two-col-divider {
        border-right: none;
        padding-right: 0;
        padding-bottom: 1rem;
        border-bottom: 1px solid rgba(255, 215, 0, 0.08);
    }
}

/* ===================================================================
   TRADE ANALYSIS RICH-TEXT CONTENT (#1230)
   Constrains pasted images and long unbroken strings inside the
   Pre/Post-Trade Analysis blocks on view_trade_detail.html so user
   content cannot overflow the 50% flex columns and break the page.
   =================================================================== */
.trade-analysis-content {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.trade-analysis-content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0.5rem 0;
}