/* ==========================================================================
   SMART TECHNICAL ANALYSIS - INSTITUTIONAL RESPONSIVE FRONTEND DASHBOARD
   Phase 6 Modern Financial Styling (RTL Native, Dark Slate Palette)
   ========================================================================== */

:root {
    --sta-bg-main: #0b0f19;
    --sta-bg-card: #111827;
    --sta-bg-card-hover: #162032;
    --sta-bg-sub: #1e293b;
    --sta-border: #334155;
    --sta-border-subtle: #1e293b;
    --sta-text-main: #f1f5f9;
    --sta-text-sub: #94a3b8;
    --sta-text-dim: #64748b;
    
    --sta-emerald: #10b981;
    --sta-emerald-bg: rgba(16, 185, 129, 0.12);
    --sta-crimson: #ef4444;
    --sta-crimson-bg: rgba(239, 68, 68, 0.12);
    --sta-rose: #f43f5e;
    --sta-blue: #3b82f6;
    --sta-blue-bg: rgba(59, 130, 246, 0.12);
    --sta-purple: #a855f7;
    --sta-purple-bg: rgba(168, 85, 247, 0.12);
    --sta-amber: #f59e0b;
    --sta-amber-bg: rgba(245, 158, 11, 0.12);
    
    --sta-radius-sm: 6px;
    --sta-radius-md: 10px;
    --sta-radius-lg: 14px;
    --sta-radius-pill: 9999px;
}

/* ==========================================================================
   WORDPRESS DEDICATED PAGE SHELL INTEGRATION
   Ensures edge-to-edge layout & hides redundant theme page headings.
   ========================================================================== */
body:has(.sta-dashboard-wrapper) .wp-block-post-title,
body:has(.sta-dashboard-wrapper) .entry-title,
body.page-id-5 .wp-block-post-title,
body.page-id-5 .entry-title {
    display: none !important;
}

body:has(.sta-dashboard-wrapper) .entry-content,
body:has(.sta-dashboard-wrapper) .wp-block-post-content,
body:has(.sta-dashboard-wrapper) .wp-block-group.is-layout-constrained,
body.page-id-5 .entry-content,
body.page-id-5 .wp-block-post-content,
body.page-id-5 .wp-block-group {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.sta-dashboard-wrapper {
    width: 100%;
    max-width: 1380px;
    margin: 16px auto;
    padding: 0 16px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--sta-text-main);
    background-color: var(--sta-bg-main);
    border-radius: var(--sta-radius-lg);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.5);
    direction: rtl;
    text-align: right;
    box-sizing: border-box;
}

.sta-dashboard-wrapper * {
    box-sizing: border-box;
}

/* 1. Header & Controls */
.sta-dash-header {
    padding: 24px;
    border-bottom: 1px solid var(--sta-border);
}

.sta-header-main {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.sta-symbol-hud {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sta-symbol-title-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sta-active-symbol {
    margin: 0;
    font-size: 28px;
    font-weight: 900;
    letter-spacing: 0.5px;
    color: #ffffff;
}

.sta-active-tf-badge {
    padding: 4px 10px;
    background: var(--sta-bg-sub);
    border: 1px solid var(--sta-border);
    border-radius: var(--sta-radius-sm);
    font-size: 13px;
    font-weight: 700;
    color: #e2e8f0;
}

.sta-freshness-pill {
    padding: 4px 12px;
    border-radius: var(--sta-radius-pill);
    font-size: 12px;
    font-weight: 700;
}

.sta-freshness-pill.sta-live {
    background: var(--sta-emerald-bg);
    border: 1px solid var(--sta-emerald);
    color: var(--sta-emerald);
}

.sta-freshness-pill.sta-stale {
    background: var(--sta-amber-bg);
    border: 1px solid var(--sta-amber);
    color: var(--sta-amber);
}

.sta-price-display {
    display: flex;
    align-items: baseline;
    gap: 14px;
}

.sta-current-price {
    font-size: 32px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: #ffffff;
}

.sta-timestamp {
    font-size: 13px;
    color: var(--sta-text-sub);
    font-variant-numeric: tabular-nums;
}

/* Nav Controls & Chips */
.sta-nav-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 24px;
}

.sta-control-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sta-control-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--sta-text-sub);
}

.sta-chips-container {
    display: flex;
    gap: 6px;
    background: var(--sta-bg-sub);
    padding: 4px;
    border-radius: var(--sta-radius-md);
    border: 1px solid var(--sta-border);
}

.sta-chip {
    background: transparent;
    border: none;
    color: var(--sta-text-sub);
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 700;
    border-radius: var(--sta-radius-sm);
    cursor: pointer;
    transition: all 0.15s ease-in-out;
    min-height: 38px;
}

.sta-chip:hover {
    color: var(--sta-text-main);
    background: rgba(255, 255, 255, 0.05);
}

.sta-chip-active {
    background: var(--sta-blue) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4);
}

/* Status Banner */
.sta-status-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    margin-top: 16px;
    border-radius: var(--sta-radius-md);
    font-size: 14px;
    font-weight: 600;
}

.sta-banner-hidden {
    display: none !important;
}

.sta-banner-error {
    background: var(--sta-crimson-bg);
    border: 1px solid var(--sta-crimson);
    color: #fca5a5;
}

.sta-banner-warning {
    background: var(--sta-amber-bg);
    border: 1px solid var(--sta-amber);
    color: #fde68a;
}

/* 2. Executive Summary Bar */
.sta-executive-bar {
    display: grid;
    grid-template-columns: 1fr 1.2fr 1.8fr;
    gap: 16px;
    padding: 24px;
    border-bottom: 1px solid var(--sta-border);
}

.sta-metric-card {
    background: var(--sta-bg-card);
    border: 1px solid var(--sta-border);
    border-radius: var(--sta-radius-md);
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 12px;
}

.sta-metric-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--sta-text-sub);
    text-transform: uppercase;
}

.sta-metric-value-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Technical Score Card */
.sta-score-gauge-wrap {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.sta-score-number {
    font-size: 38px;
    font-weight: 900;
    line-height: 1;
    color: #38bdf8;
    font-variant-numeric: tabular-nums;
}

.sta-score-scale {
    font-size: 16px;
    font-weight: 700;
    color: var(--sta-text-dim);
}

.sta-score-progress-bar {
    width: 100%;
    height: 8px;
    background: var(--sta-bg-sub);
    border-radius: var(--sta-radius-pill);
    overflow: hidden;
}

.sta-score-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6, #10b981);
    border-radius: var(--sta-radius-pill);
    transition: width 0.4s ease-out;
}

/* Badges & Tags */
.sta-badge {
    padding: 6px 14px;
    border-radius: var(--sta-radius-pill);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.5px;
    display: inline-block;
}

.sta-sentiment-bullish { background: var(--sta-emerald-bg); color: var(--sta-emerald); border: 1px solid var(--sta-emerald); }
.sta-sentiment-bearish { background: var(--sta-crimson-bg); color: var(--sta-crimson); border: 1px solid var(--sta-crimson); }
.sta-sentiment-neutral { background: var(--sta-bg-sub); color: var(--sta-text-sub); border: 1px solid var(--sta-border); }

.sta-sub-pill {
    padding: 4px 10px;
    background: var(--sta-bg-sub);
    border: 1px solid var(--sta-border);
    border-radius: var(--sta-radius-sm);
    font-size: 12px;
    font-weight: 700;
    color: #e2e8f0;
}

.sta-structure-tags {
    display: flex;
    gap: 8px;
}

.sta-tag-chip {
    padding: 3px 8px;
    border-radius: var(--sta-radius-sm);
    font-size: 11px;
    font-weight: 700;
    background: var(--sta-bg-sub);
    color: var(--sta-text-dim);
    border: 1px solid var(--sta-border);
}

.sta-tag-chip.sta-tag-active {
    background: var(--sta-emerald-bg);
    color: var(--sta-emerald);
    border-color: var(--sta-emerald);
}

/* Safety & Status */
.sta-status-trade_ready { background: var(--sta-emerald-bg); color: var(--sta-emerald); border: 1px solid var(--sta-emerald); }
.sta-status-wait_for_confirmation { background: var(--sta-amber-bg); color: var(--sta-amber); border: 1px solid var(--sta-amber); }
.sta-status-no_valid_setup { background: var(--sta-crimson-bg); color: var(--sta-crimson); border: 1px solid var(--sta-crimson); }

.sta-quality-high { background: var(--sta-emerald-bg); color: var(--sta-emerald); border: 1px solid var(--sta-emerald); }
.sta-quality-moderate { background: var(--sta-amber-bg); color: var(--sta-amber); border: 1px solid var(--sta-amber); }
.sta-quality-low { background: var(--sta-crimson-bg); color: var(--sta-crimson); border: 1px solid var(--sta-crimson); }

.sta-permission-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: var(--sta-radius-sm);
    font-size: 13px;
    font-weight: 700;
}

.sta-perm-allowed {
    background: var(--sta-emerald-bg);
    color: var(--sta-emerald);
    border: 1px solid var(--sta-emerald);
}

.sta-perm-blocked {
    background: var(--sta-crimson-bg);
    color: var(--sta-crimson);
    border: 1px solid var(--sta-crimson);
}

.sta-rejection-notes {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.sta-reason-chip {
    background: var(--sta-bg-sub);
    border: 1px solid var(--sta-border);
    padding: 3px 8px;
    border-radius: var(--sta-radius-sm);
    font-size: 11px;
    color: #fca5a5;
}

/* 3. TradingView Chart Section */
.sta-chart-section {
    padding: 24px;
    border-bottom: 1px solid var(--sta-border);
}

.sta-chart-toolbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: var(--sta-bg-card);
    border: 1px solid var(--sta-border);
    border-radius: var(--sta-radius-md) var(--sta-radius-md) 0 0;
    border-bottom: none;
}

.sta-chart-hud {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    color: #e2e8f0;
}

.sta-hud-item strong {
    color: var(--sta-text-sub);
    margin-left: 4px;
}

.sta-chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 12px;
    color: var(--sta-text-sub);
}

.sta-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.sta-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.sta-dot-res { background: var(--sta-rose); }
.sta-dot-sup { background: var(--sta-emerald); }
.sta-dot-bull { background: var(--sta-blue); }
.sta-dot-bear { background: var(--sta-purple); }
.sta-dot-stop { background: var(--sta-crimson); }

.sta-chart-canvas-container {
    position: relative;
    width: 100%;
    height: 480px;
    background: #0b0f19;
    border: 1px solid var(--sta-border);
    border-radius: 0 0 var(--sta-radius-md) var(--sta-radius-md);
    overflow: hidden;
}

.sta-chart-loading-overlay {
    position: absolute;
    inset: 0;
    background: rgba(11, 15, 25, 0.8);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 12px;
    z-index: 10;
    color: #e2e8f0;
    font-size: 14px;
    font-weight: 600;
}

.sta-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid var(--sta-border);
    border-top-color: var(--sta-blue);
    border-radius: 50%;
    animation: sta-spin 0.8s linear infinite;
}

@keyframes sta-spin {
    to { transform: rotate(360deg); }
}

/* 4. Dual Scenarios Section */
.sta-scenarios-section {
    padding: 24px;
    border-bottom: 1px solid var(--sta-border);
}

.sta-section-title {
    margin: 0 0 16px 0;
    font-size: 20px;
    font-weight: 800;
    color: #ffffff;
}

.sta-scenarios-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.sta-scenario-card {
    background: var(--sta-bg-card);
    border-radius: var(--sta-radius-md);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    border-top: 4px solid var(--sta-border);
}

.sta-scenario-card.sta-scen-bull {
    border-top-color: var(--sta-emerald);
    box-shadow: 0 4px 20px -2px rgba(16, 185, 129, 0.1);
}

.sta-scenario-card.sta-scen-bear {
    border-top-color: var(--sta-crimson);
    box-shadow: 0 4px 20px -2px rgba(239, 68, 68, 0.1);
}

.sta-scen-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.sta-scen-badge {
    font-size: 11px;
    font-weight: 700;
    color: var(--sta-text-sub);
    text-transform: uppercase;
}

.sta-scen-direction {
    margin: 4px 0 0 0;
    font-size: 18px;
    font-weight: 800;
    color: #ffffff;
}

.sta-scen-prob-badge {
    text-align: center;
    background: var(--sta-bg-sub);
    border: 1px solid var(--sta-border);
    padding: 6px 12px;
    border-radius: var(--sta-radius-md);
}

.sta-prob-value {
    display: block;
    font-size: 22px;
    font-weight: 900;
    color: #ffffff;
    font-variant-numeric: tabular-nums;
}

.sta-prob-label {
    font-size: 11px;
    color: var(--sta-text-sub);
}

.sta-levels-table {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--sta-bg-sub);
    border-radius: var(--sta-radius-sm);
    padding: 12px;
}

.sta-level-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    padding: 4px 0;
}

.sta-level-label {
    color: var(--sta-text-sub);
}

.sta-level-value {
    font-variant-numeric: tabular-nums;
    font-size: 15px;
}

.sta-color-trigger { color: #60a5fa; }
.sta-color-target { color: var(--sta-emerald); }
.sta-color-stop { color: var(--sta-crimson); }
.sta-color-rr { color: var(--sta-amber); font-weight: 900; }

.sta-rr-row {
    border-top: 1px dashed var(--sta-border);
    padding-top: 8px;
    margin-top: 4px;
}

/* 5. Indicators Grid Section */
.sta-indicators-section {
    padding: 24px;
    border-bottom: 1px solid var(--sta-border);
}

.sta-indicators-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}

.sta-indicator-card {
    background: var(--sta-bg-card);
    border: 1px solid var(--sta-border);
    border-radius: var(--sta-radius-md);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sta-ind-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sta-ind-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--sta-text-sub);
}

.sta-ind-tag {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: var(--sta-radius-sm);
}

.sta-tag-bull { background: var(--sta-emerald-bg); color: var(--sta-emerald); }
.sta-tag-bear { background: var(--sta-crimson-bg); color: var(--sta-crimson); }
.sta-tag-neutral { background: var(--sta-bg-sub); color: var(--sta-text-sub); }

.sta-ind-value {
    font-size: 26px;
    font-weight: 900;
    color: #ffffff;
    font-variant-numeric: tabular-nums;
}

.sta-ind-sub-grid {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    color: var(--sta-text-sub);
    font-variant-numeric: tabular-nums;
}

.sta-ind-sub {
    font-size: 12px;
    color: var(--sta-text-sub);
    font-variant-numeric: tabular-nums;
}

.sta-ind-desc {
    font-size: 12px;
    color: var(--sta-text-dim);
}

/* 6. Arabic Narrative Section */
.sta-narrative-section {
    padding: 24px;
    border-bottom: 1px solid var(--sta-border);
}

.sta-narrative-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sta-narr-card {
    background: var(--sta-bg-card);
    border: 1px solid var(--sta-border);
    border-radius: var(--sta-radius-md);
    padding: 20px;
    line-height: 1.8;
}

.sta-narr-heading {
    margin: 0 0 12px 0;
    font-size: 16px;
    font-weight: 800;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 8px;
}

.sta-narr-icon {
    font-size: 18px;
}

.sta-narr-card p {
    margin: 0;
    color: #cbd5e1;
    font-size: 14px;
}

.sta-narr-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.sta-card-bullish { border-right: 4px solid var(--sta-emerald); }
.sta-card-bearish { border-right: 4px solid var(--sta-crimson); }
.sta-narr-risk { background: rgba(245, 158, 11, 0.05); border-color: rgba(245, 158, 11, 0.3); }

/* 7. Footer & Diagnostics */
.sta-dash-footer {
    padding: 16px 24px;
    background: var(--sta-bg-card);
    border-radius: 0 0 var(--sta-radius-lg) var(--sta-radius-lg);
}

.sta-footer-info {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    color: var(--sta-text-dim);
}

.sta-code-uuid {
    background: var(--sta-bg-sub);
    padding: 2px 6px;
    border-radius: var(--sta-radius-sm);
    color: #93c5fd;
    font-family: monospace;
}

.sta-gate-badge {
    color: var(--sta-emerald);
    font-weight: 700;
}

/* Empty State */
.sta-empty-state {
    padding: 60px 24px;
    text-align: center;
}

.sta-empty-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid var(--sta-border);
    border-top-color: var(--sta-blue);
    border-radius: 50%;
    margin: 0 auto 20px auto;
    animation: sta-spin 0.8s linear infinite;
}

/* ==========================================================================
   RESPONSIVE MEDIA QUERIES
   ========================================================================== */
@media (max-width: 1024px) {
    .sta-executive-bar {
        grid-template-columns: 1fr 1fr;
    }
    .sta-safety-card {
        grid-column: span 2;
    }
}

@media (max-width: 768px) {
    .sta-dashboard-wrapper {
        padding: 0 8px;
        margin: 12px auto;
    }
    .sta-dash-header, .sta-executive-bar, .sta-chart-section, .sta-scenarios-section, .sta-indicators-section, .sta-narrative-section {
        padding: 16px;
    }
    .sta-header-main {
        flex-direction: column;
        align-items: stretch;
    }
    .sta-nav-controls {
        flex-direction: column;
        align-items: stretch;
    }
    .sta-control-group {
        flex-direction: column;
        align-items: stretch;
    }
    .sta-chips-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .sta-executive-bar {
        grid-template-columns: 1fr;
    }
    .sta-safety-card {
        grid-column: span 1;
    }
    .sta-scenarios-grid {
        grid-template-columns: 1fr;
    }
    .sta-narr-grid-2 {
        grid-template-columns: 1fr;
    }
    .sta-chart-canvas-container {
        height: 360px;
    }
}