/**
 * HedgerPro Unified Modal Design System
 * Global styling for all native <dialog> modals, headers, tabs, cards, and footers.
 * Driven entirely by CSS variables in cards/styles/base.css (--hp-modal-*).
 */

/* ==========================================================================
   1. Base Dialog Container & Backdrop
   ========================================================================== */

dialog.hp-modal-dialog,
.hp-modal-dialog {
    /* Anchor permanently to top of viewport with bottom clearance */
    position: fixed;
    top: var(--hp-modal-top-offset, 35px);
    bottom: auto;
    left: 0;
    right: 0;
    margin: 0 auto; /* Explicitly reset native dialog margins for perfect horizontal centering */

    /* Boundaries & Dimensions */
    width: var(--hp-modal-width, 740px);
    max-width: var(--hp-modal-max-width, 92vw);
    max-height: var(--hp-modal-max-height, calc(100vh - var(--hp-modal-top-offset, 35px) - var(--hp-modal-bottom-offset, 35px)));

    /* Frame Aesthetics */
    padding: 0;
    border: var(--hp-modal-border, 1px solid #334155);
    border-radius: var(--hp-modal-border-radius, 8px);
    box-shadow: var(--hp-modal-shadow, 0 25px 50px -12px rgba(0, 0, 0, 0.45));
    background: var(--hp-modal-bg, #ffffff);
    color: var(--hp-modal-text-color, #1e293b);
    font-family: var(--font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);

    /* Flex Shell Layout */
    overflow: hidden;
    display: none;
    flex-direction: column;
}

dialog.hp-modal-dialog[open],
.hp-modal-dialog[open] {
    display: flex !important;
    border: 3px solid #ffffff;
    border-radius: 4px;
}

dialog.hp-modal-dialog::backdrop,
.hp-modal-dialog::backdrop {
    background: var(--hp-modal-backdrop-bg, rgba(15, 23, 42, 0.65));
    backdrop-filter: blur(var(--hp-modal-backdrop-blur, 2px));
}

/* Width Variations */
dialog.hp-modal-dialog.hp-modal-wide,
.hp-modal-dialog.hp-modal-wide {
    width: var(--hp-modal-width-wide, 880px);
}

dialog.hp-modal-dialog.hp-modal-narrow,
.hp-modal-dialog.hp-modal-narrow {
    width: var(--hp-modal-width-narrow, 520px);
}

/* ==========================================================================
   2. Header Bar (.hp-modal-header)
   ========================================================================== */

.hp-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--hp-modal-header-padding, 12px 18px);
    background: var(--hp-modal-header-bg, var(--blue-darker));
    color: var(--hp-modal-header-color, #f8fafc);
    border-bottom: 1px solid var(--hp-modal-header-border, #1e293b);
    flex: 0 0 auto;
}

.hp-modal-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--hp-modal-header-font-size, 14px);
    font-weight: var(--hp-modal-header-font-weight, 700);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.hp-modal-title i {
    color: var(--hp-modal-header-icon-color, #38bdf8);
    font-size: 15px;
}

.hp-modal-subtitle {
    font-weight: 400;
    font-size: var(--hp-modal-header-subtitle-size, 13px);
    color: var(--hp-modal-header-subtitle-color, #94a3b8);
    margin-left: 4px;
    text-transform: none;
    letter-spacing: normal;
}

.hp-modal-close-btn {
    background: var(--hp-modal-close-bg, rgba(255, 255, 255, 0.12));
    border: none;
    color: var(--hp-modal-close-color, #ffffff);
    font-size: var(--hp-modal-close-size, 14px);
    font-weight: bold;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 4px;
    transition: all 0.15s ease;
    line-height: 1;
}

.hp-modal-close-btn:hover {
    color: var(--hp-modal-close-hover-color, #ffffff);
    background: var(--hp-modal-close-hover-bg, rgba(255, 255, 255, 0.24));
}

/* ==========================================================================
   3. Tab Navigation Bar (.hp-modal-tabs-bar)
   ========================================================================== */

.hp-modal-tabs-bar {
    display: flex;
    background: var(--hp-modal-tabs-bg, #0f172a);
    border-bottom: 1px solid var(--hp-modal-tabs-border, #1e293b);
    padding: var(--hp-modal-tabs-padding, 0 16px);
    gap: var(--hp-modal-tabs-gap, 4px);
    flex: 0 0 auto;
}

.hp-modal-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--hp-modal-tab-color, #94a3b8);
    font-size: var(--hp-modal-tab-font-size, 13px);
    font-weight: var(--hp-modal-tab-font-weight, 600);
    padding: var(--hp-modal-tab-padding, 9px 14px);
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
}

.hp-modal-tab-btn:hover {
    color: var(--hp-modal-tab-hover-color, #f1f5f9);
}

.hp-modal-tab-btn.active {
    color: var(--hp-modal-tab-active-color, #38bdf8);
    border-bottom-color: var(--hp-modal-tab-active-border, #38bdf8);
}

.hp-modal-tab-badge {
    background: var(--hp-modal-badge-bg, #334155);
    color: var(--hp-modal-badge-color, #e2e8f0);
    font-size: 11px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 10px;
    line-height: 1.2;
}

.hp-modal-tab-btn.active .hp-modal-tab-badge {
    background: var(--hp-modal-badge-active-bg, #0284c7);
    color: var(--hp-modal-badge-active-color, #ffffff);
}

.hp-modal-tab-badge.badge-green {
    background: var(--hp-modal-badge-green-bg, #065f46);
    color: var(--hp-modal-badge-green-color, #a7f3d0);
}

/* ==========================================================================
   3b. Modal Sub-header / Toolbar (.hp-modal-toolbar)
   ========================================================================== */

.hp-modal-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: var(--hp-modal-toolbar-bg, #f1f5f9);
    border-bottom: 1px solid var(--hp-modal-toolbar-border, #cbd5e1);
    flex: 0 0 auto;
}

/* ==========================================================================
   4. Modal Body Container (.hp-modal-body)
   ========================================================================== */

.hp-modal-body {
    display: flex;
    flex-direction: column;
    gap: var(--hp-modal-body-gap, 14px);
    padding: var(--hp-modal-body-padding, 16px 20px);
    background: var(--hp-modal-body-bg, #f8fafc);
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0; /* CRITICAL: Allows flex child to shrink and scroll */
}

/* ==========================================================================
   5. Card Containers (.hp-modal-card)
   ========================================================================== */

.hp-modal-card {
    background: var(--hp-modal-card-bg, #ffffff);
    border: 1px solid var(--hp-modal-card-border, #e2e8f0);
    border-radius: var(--hp-modal-card-radius, 8px);
    box-shadow: var(--hp-modal-card-shadow, 0 1px 3px rgba(0, 0, 0, 0.05));
    padding: var(--hp-modal-card-padding, 14px 18px);
    position: relative;
    overflow: hidden;
}

.hp-modal-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.hp-modal-card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--hp-modal-card-title-color, #1e293b);
}

/* ==========================================================================
   6. Semantic Status Pills & Chips (.hp-modal-chip / .hp-modal-pill)
   ========================================================================== */

.hp-modal-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--hp-modal-chip-bg, #e2e8f0);
    color: var(--hp-modal-chip-color, #1e293b);
    font-size: var(--hp-modal-chip-font-size, 11px);
    font-weight: 500;
    padding: var(--hp-modal-chip-padding, 3px 9px);
    border-radius: var(--hp-modal-chip-radius, 6px);
}

.hp-modal-chip.chip-amber {
    background: var(--hp-modal-color-warning-bg, #fef3c7);
    color: var(--hp-modal-color-warning-text, #b45309);
}

.hp-modal-chip.chip-purple {
    background: var(--hp-modal-color-purple-bg, #f3e8ff);
    color: var(--hp-modal-color-purple-text, #6b21a8);
    border: 1px solid var(--hp-modal-color-purple-border, #e9d5ff);
}

.hp-modal-chip.chip-green {
    background: var(--hp-modal-color-success-bg, #d1fae5);
    color: var(--hp-modal-color-success-text, #047857);
}

.hp-modal-pill {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.hp-modal-pill.pill-warning {
    background: var(--hp-modal-color-warning-bg, #fef3c7);
    color: var(--hp-modal-color-warning-text, #b45309);
    border: 1px solid var(--hp-modal-color-warning-border, #fcd34d);
}

.hp-modal-pill.pill-purple {
    background: var(--hp-modal-color-purple-bg, #f3e8ff);
    color: var(--hp-modal-color-purple-text, #6b21a8);
    border: 1px solid var(--hp-modal-color-purple-border, #e9d5ff);
}

.hp-modal-pill.pill-success {
    background: var(--hp-modal-color-success-bg, #d1fae5);
    color: var(--hp-modal-color-success-text, #047857);
    border: 1px solid var(--hp-modal-color-success-border, #6ee7b7);
}

/* ==========================================================================
   7. Footer Bar (.hp-modal-footer)
   ========================================================================== */

.hp-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: var(--hp-modal-footer-padding, 10px 18px);
    background: var(--hp-modal-footer-bg, #f1f5f9);
    border-top: 1px solid var(--hp-modal-footer-border, #e2e8f0);
    flex: 0 0 auto;
}

.hp-modal-footer-left {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-right: auto;
}

.hp-modal-footer-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Footer Buttons */
.hp-modal-footer .hp-modal-footer-btn,
.hp-modal-footer .dash_btn {
    min-width: 80px;
    padding: 6px 16px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    border-radius: var(--hp-modal-btn-radius, 6px);
    border: 1px solid var(--hp-modal-card-border, #cbd5e1);
    background: #ffffff;
    color: var(--hp-modal-card-title-color, #1e293b);
    transition: all 0.15s ease;
    line-height: 1.4;
}

.hp-modal-footer .hp-modal-footer-btn:hover,
.hp-modal-footer .dash_btn:hover {
    background: #e2e8f0;
    color: #0f172a;
}

.hp-modal-footer .hp-modal-footer-btn-primary {
    background: var(--hp-modal-btn-primary-bg, #0284c7);
    color: var(--hp-modal-btn-primary-color, #ffffff);
    border-color: var(--hp-modal-btn-primary-bg, #0284c7);
}

.hp-modal-footer .hp-modal-footer-btn-primary:hover {
    background: var(--hp-modal-btn-primary-hover, #0369a1);
    border-color: var(--hp-modal-btn-primary-hover, #0369a1);
    color: #ffffff;
}

/* ==========================================================================
   8. Modal Overrides: Strategy Advisor (#hp_strategy_advisor_dialog)
   ========================================================================== */

#hp_strategy_advisor_dialog.hp-modal-dialog {
    width: var(--hp-modal-width, 740px);
    max-width: var(--hp-modal-max-width, 92vw);
}

/* Tab Badges */
#hp_strategy_advisor_dialog .hp-modal-tab-badge.badge-blue {
    background: #1e3a8a;
    color: #93c5fd;
}

#hp_strategy_advisor_dialog .hp-modal-tab-badge.badge-vip {
    background: #d97706;
    color: #ffffff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.5px;
    padding: 1px 5px;
}

#hp_strategy_advisor_dialog .hp-modal-tab-badge.badge-green {
    background: var(--hp-modal-badge-green-bg, #065f46);
    color: var(--hp-modal-badge-green-color, #a7f3d0);
}

#hp_strategy_advisor_dialog .hp-modal-tab-btn.active .hp-modal-tab-badge.badge-green {
    background: var(--hp-modal-badge-green-active-bg, #059669);
    color: #ffffff;
}

/* Tab Panels & Layout */
#hp_strategy_advisor_dialog .hp-advisor-tab-panel {
    display: flex;
    flex-direction: column;
    gap: var(--hp-modal-body-gap, 16px);
}

#hp_strategy_advisor_dialog .hp-advisor-tab-panel .filter_importance_wrapper {
    padding: 0;
    background: transparent;
    overflow: visible;
}

/* VIP Locked State Card */
#hp_strategy_advisor_dialog .hp-advisor-vip-locked-card {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    padding: 24px;
    background: #ffffff;
    border: 1px solid #fde68a;
    border-radius: var(--hp-modal-card-radius, 8px);
    box-shadow: 0 4px 12px rgba(217, 119, 6, 0.08);
}

#hp_strategy_advisor_dialog .hp-advisor-vip-lock-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #fef3c7;
    color: #d97706;
    font-size: 22px;
    flex-shrink: 0;
}

#hp_strategy_advisor_dialog .hp-advisor-vip-locked-content {
    flex: 1;
}

#hp_strategy_advisor_dialog .hp-advisor-vip-badge-tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    color: #b45309;
    background: #fef3c7;
    border: 1px solid #fde68a;
    padding: 2px 8px;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

#hp_strategy_advisor_dialog .hp-advisor-vip-title {
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 8px;
}

#hp_strategy_advisor_dialog .hp-advisor-vip-desc {
    font-size: 13px;
    line-height: 1.5;
    color: #475569;
    margin-bottom: 16px;
}

#hp_strategy_advisor_dialog .hp-advisor-vip-features-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 13px;
    color: #334155;
    margin-bottom: 16px;
}

#hp_strategy_advisor_dialog .hp-advisor-vip-features-list div {
    display: flex;
    align-items: center;
    gap: 8px;
}

#hp_strategy_advisor_dialog .hp-advisor-vip-features-list i {
    color: #10b981;
}

/* Overview Card & Robustness Score */
#hp_strategy_advisor_dialog .hp-advisor-overview-card {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: var(--hp-modal-card-padding, 16px 20px);
    border-radius: var(--hp-modal-card-radius, 8px);
    background: var(--hp-modal-card-bg, #ffffff);
    border: 1px solid var(--hp-modal-card-border, #e2e8f0);
    box-shadow: var(--hp-modal-card-shadow, 0 1px 3px rgba(0, 0, 0, 0.05));
}

#hp_strategy_advisor_dialog .hp-advisor-overview-card.hp-advisor-badge-overfitted {
    border-left: 5px solid var(--hp-modal-color-danger, #ef4444);
}

#hp_strategy_advisor_dialog .hp-advisor-overview-card.hp-advisor-badge-moderate {
    border-left: 5px solid var(--hp-modal-color-warning, #f59e0b);
}

#hp_strategy_advisor_dialog .hp-advisor-overview-card.hp-advisor-badge-healthy {
    border-left: 5px solid var(--hp-modal-color-success, #10b981);
}

#hp_strategy_advisor_dialog .hp-advisor-score-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 95px;
}

#hp_strategy_advisor_dialog .hp-advisor-score-circle {
    display: flex;
    align-items: baseline;
    justify-content: center;
    background: #0f172a;
    color: #ffffff;
    padding: 8px 14px;
    border-radius: 8px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
}

#hp_strategy_advisor_dialog .hp-advisor-score-val {
    font-size: 26px;
    font-weight: 800;
    line-height: 1;
}

#hp_strategy_advisor_dialog .hp-advisor-score-denom {
    font-size: 13px;
    font-weight: 500;
    color: #94a3b8;
    margin-left: 2px;
}

#hp_strategy_advisor_dialog .hp-advisor-score-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: #64748b;
    margin-top: 5px;
    letter-spacing: 0.3px;
}

#hp_strategy_advisor_dialog .hp-advisor-summary-block {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

#hp_strategy_advisor_dialog .hp-advisor-status-pill {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

#hp_strategy_advisor_dialog .hp-advisor-status-pill.hp-advisor-badge-overfitted {
    background: var(--hp-modal-color-danger-bg, #fee2e2);
    color: var(--hp-modal-color-danger-text, #b91c1c);
    border: 1px solid var(--hp-modal-color-danger-border, #fca5a5);
}

#hp_strategy_advisor_dialog .hp-advisor-status-pill.hp-advisor-badge-moderate {
    background: var(--hp-modal-color-warning-bg, #fef3c7);
    color: var(--hp-modal-color-warning-text, #b45309);
    border: 1px solid var(--hp-modal-color-warning-border, #fcd34d);
}

#hp_strategy_advisor_dialog .hp-advisor-status-pill.hp-advisor-badge-healthy {
    background: var(--hp-modal-color-success-bg, #d1fae5);
    color: var(--hp-modal-color-success-text, #047857);
    border: 1px solid var(--hp-modal-color-success-border, #6ee7b7);
}

#hp_strategy_advisor_dialog .hp-advisor-status-desc {
    font-size: 13px;
    color: #334155;
    line-height: 1.45;
}

#hp_strategy_advisor_dialog .hp-advisor-metric-chips {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    flex-wrap: wrap;
}

/* Findings Section */
#hp_strategy_advisor_dialog .hp-advisor-findings-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#hp_strategy_advisor_dialog .hp-advisor-findings-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2px;
}

#hp_strategy_advisor_dialog .hp-advisor-findings-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #475569;
}

#hp_strategy_advisor_dialog .hp-advisor-findings-count {
    font-size: 12px;
    color: #64748b;
    font-weight: 500;
}

#hp_strategy_advisor_dialog .hp-advisor-clean-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
    color: #15803d;
}

#hp_strategy_advisor_dialog .hp-advisor-clean-card i {
    font-size: 28px;
    color: #16a34a;
}

#hp_strategy_advisor_dialog .hp-advisor-clean-title {
    font-size: 14px;
    font-weight: 700;
    color: #166534;
}

#hp_strategy_advisor_dialog .hp-advisor-clean-sub {
    font-size: 12px;
    color: #15803d;
    margin-top: 2px;
}

#hp_strategy_advisor_dialog .hp-advisor-findings-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#hp_strategy_advisor_dialog .hp-advisor-finding-card {
    transition: border-color 0.15s ease;
}

#hp_strategy_advisor_dialog .hp-advisor-finding-card:hover {
    border-color: #cbd5e1;
}

#hp_strategy_advisor_dialog .hp-advisor-finding-name i {
    font-size: 11px;
    color: #64748b;
}

#hp_strategy_advisor_dialog .hp-advisor-finding-settings {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: var(--hp-modal-body-bg, #f8fafc);
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid #f1f5f9;
}

#hp_strategy_advisor_dialog .hp-advisor-setting-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 12px;
}

#hp_strategy_advisor_dialog .hp-advisor-setting-row .setting-label {
    font-weight: 600;
    color: #64748b;
    min-width: 125px;
}

#hp_strategy_advisor_dialog .hp-advisor-setting-row .setting-val.current {
    color: var(--hp-modal-color-danger-text, #b91c1c);
    font-weight: 600;
}

#hp_strategy_advisor_dialog .hp-advisor-setting-row .setting-val.suggested {
    color: var(--hp-modal-color-success-text, #047857);
    font-weight: 600;
}

#hp_strategy_advisor_dialog .hp-advisor-finding-msg {
    font-size: 12px;
    color: #475569;
    line-height: 1.4;
    padding-left: 2px;
}

/* Strategy Advisor Specific Pills */
#hp_strategy_advisor_dialog .hp-modal-pill.pill-overconstrained {
    background: var(--hp-modal-color-warning-bg, #fef3c7);
    color: var(--hp-modal-color-warning-text, #92400e);
    border: 1px solid var(--hp-modal-color-warning-border, #fde68a);
}

#hp_strategy_advisor_dialog .hp-modal-pill.pill-skipped {
    background: var(--hp-modal-color-purple-bg, #f3e8ff);
    color: var(--hp-modal-color-purple-text, #6b21a8);
    border: 1px solid var(--hp-modal-color-purple-border, #e9d5ff);
}

#hp_strategy_advisor_dialog .hp-modal-pill.pill-fill_notch {
    background: var(--hp-modal-color-purple-bg, #f3e8ff);
    color: var(--hp-modal-color-purple-text, #6b21a8);
    border: 1px solid var(--hp-modal-color-purple-border, #e9d5ff);
}

#hp_strategy_advisor_dialog .hp-modal-pill.pill-widen_window {
    background: var(--hp-modal-color-warning-bg, #fef3c7);
    color: var(--hp-modal-color-warning-text, #92400e);
    border: 1px solid var(--hp-modal-color-warning-border, #fde68a);
}

#hp_strategy_advisor_dialog .hp-modal-pill.pill-remove_filter {
    background: #e0f2fe;
    color: var(--hp-modal-btn-primary-bg, #0369a1);
    border: 1px solid #bae6fd;
}

/* Deep Optimizer Intro Hero Card */
#hp_strategy_advisor_dialog .hp-advisor-opt-intro-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
    background: var(--hp-modal-card-bg, #ffffff);
    border: 1px solid var(--hp-modal-card-border, #e2e8f0);
    border-radius: var(--hp-modal-card-radius, 8px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

#hp_strategy_advisor_dialog .hp-advisor-opt-intro-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background: #e0f2fe;
    color: var(--hp-modal-btn-primary-bg, #0284c7);
    font-size: 20px;
    flex-shrink: 0;
}

#hp_strategy_advisor_dialog .hp-advisor-opt-intro-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

#hp_strategy_advisor_dialog .hp-advisor-opt-intro-title {
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
}

#hp_strategy_advisor_dialog .hp-advisor-opt-intro-desc {
    font-size: 12px;
    color: #64748b;
    line-height: 1.4;
}

#hp_strategy_advisor_dialog .hp-advisor-run-btn {
    padding: var(--hp-modal-btn-padding, 8px 16px);
    background: var(--hp-modal-btn-primary-bg, #0284c7);
    color: var(--hp-modal-btn-primary-color, #ffffff);
    border: none;
    border-radius: var(--hp-modal-btn-radius, 6px);
    font-size: var(--hp-modal-btn-font-size, 13px);
    font-weight: var(--hp-modal-btn-font-weight, 600);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    transition: background 0.15s ease;
}

#hp_strategy_advisor_dialog .hp-advisor-run-btn:hover:not(:disabled) {
    background: #0369a1;
}

#hp_strategy_advisor_dialog .hp-advisor-run-btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

/* Optimizing Banner & Empty State */
#hp_strategy_advisor_dialog .hp-advisor-optimizing-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: #e0f2fe;
    border: 1px solid #bae6fd;
    border-radius: 6px;
    color: #0369a1;
    font-size: 12px;
    font-weight: 600;
}

#hp_strategy_advisor_dialog .hp-advisor-empty-opt-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 36px 20px;
    background: #ffffff;
    border: 2px dashed #cbd5e1;
    border-radius: 8px;
    color: #64748b;
    gap: 10px;
}

#hp_strategy_advisor_dialog .hp-advisor-empty-opt-card i {
    font-size: 32px;
    color: #94a3b8;
}

#hp_strategy_advisor_dialog .hp-advisor-empty-title {
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
}

#hp_strategy_advisor_dialog .hp-advisor-empty-desc {
    font-size: 12px;
    color: #64748b;
    max-width: 480px;
    line-height: 1.45;
}

/* Footer note */
#hp_strategy_advisor_dialog .hp-advisor-footer-note {
    margin-right: auto;
    font-size: 12px;
    color: #475569;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Recommendation Cards */
#hp_strategy_advisor_dialog .hp-advisor-rec-cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#hp_strategy_advisor_dialog .hp-advisor-rec-card {
    background: var(--hp-modal-card-bg, #ffffff);
    border: 1px solid var(--hp-modal-card-border, #e2e8f0);
    border-radius: var(--hp-modal-card-radius, 8px);
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-shadow: var(--hp-modal-card-shadow, 0 1px 3px rgba(0,0,0,0.04));
    transition: border-color 0.15s ease;
}

#hp_strategy_advisor_dialog .hp-advisor-rec-card:hover {
    border-color: #cbd5e1;
}

#hp_strategy_advisor_dialog .hp-advisor-rec-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#hp_strategy_advisor_dialog .hp-advisor-rec-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #0f172a;
}

#hp_strategy_advisor_dialog .hp-advisor-rec-rank {
    background: #0f172a;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 4px;
}

#hp_strategy_advisor_dialog .hp-advisor-rec-desc {
    font-size: 12px;
    color: #475569;
}

#hp_strategy_advisor_dialog .hp-advisor-rec-diff {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: var(--hp-modal-body-bg, #f8fafc);
    border: 1px solid #f1f5f9;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 12px;
}

#hp_strategy_advisor_dialog .diff-line.diff-cur {
    color: var(--hp-modal-color-danger-text, #b91c1c);
}

#hp_strategy_advisor_dialog .diff-line.diff-prop {
    color: var(--hp-modal-color-success-text, #047857);
    font-weight: 600;
}

#hp_strategy_advisor_dialog .diff-tag {
    color: #64748b;
    font-weight: 600;
    margin-right: 6px;
}

#hp_strategy_advisor_dialog .hp-advisor-rec-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 2px;
}

#hp_strategy_advisor_dialog .rec-metric-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 4px;
}

#hp_strategy_advisor_dialog .rec-metric-chip.chip-pos {
    background: var(--hp-modal-color-success-bg, #dcfce7);
    color: var(--hp-modal-color-success-text, #15803d);
    border: 1px solid var(--hp-modal-color-success-border, #bbf7d0);
}

#hp_strategy_advisor_dialog .rec-metric-chip.chip-neutral {
    background: var(--hp-modal-chip-bg, #f1f5f9);
    color: var(--hp-modal-card-muted-color, #475569);
    border: 1px solid var(--hp-modal-card-border, #e2e8f0);
}

#hp_strategy_advisor_dialog .rec-metric-chip.chip-neg {
    background: var(--hp-modal-color-danger-bg, #fee2e2);
    color: var(--hp-modal-color-danger-text, #b91c1c);
    border: 1px solid var(--hp-modal-color-danger-border, #fca5a5);
}

/* ==========================================================================
   9. Modal Overrides: Expanded Chart Dialog (#expanded_chart_dialog)
   ========================================================================== */

#expanded_chart_dialog.hp-modal-dialog {
    width: min(810px, 95vw);
    max-width: 95vw;
}

/* ==========================================================================
   10. Modal Overrides: Slice Actions Dialog (#slice_actions_dialog)
   ========================================================================== */

#slice_actions_dialog.hp-modal-dialog,
.slice_actions_dialog.hp-modal-dialog {
    width: min(880px, 95vw);
    max-width: 95vw;
}

#slice_actions_dialog .slice_actions_selected_count {
    color: var(--hp-modal-header-subtitle-color, #94a3b8);
    font-size: 12px;
    font-weight: 500;
}

/* ==========================================================================
   11. Modal Overrides: History Archive Dialog (#history_archive_dialog)
   ========================================================================== */

#history_archive_dialog.hp-modal-dialog {
    width: min(780px, 95vw);
}