/* Market Insights Clean Professional Theme */
:root {
    --mi-primary: #fe497e;
    /* Pink/Red */
    --mi-primary-dark: #d6336c;
    --mi-bg-page: #f9fafb;
    --mi-bg-card: #ffffff;
    --mi-text-dark: #111827;
    --mi-text-muted: #6b7280;
    --mi-border: #e5e7eb;
    --mi-success: #10b981;
    --mi-danger: #ef4444;
    --mi-font: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body {
    font-family: var(--mi-font);
    background: var(--mi-bg-page);
    color: var(--mi-text-dark);
    margin: 0;
    padding: 0;
    font-size: 15px;
    /* Base size 15px - balanced readability */
    line-height: 1.6;
}

.mi-dashboard {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.mi-header {
    background: var(--mi-bg-card);
    border: 1px solid var(--mi-border);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: center;
}

.mi-logo {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 1px solid var(--mi-border);
    object-fit: contain;
}

.mi-ticker {
    font-size: 2rem;
    font-weight: 700;
    color: var(--mi-text-dark);
}

.mi-price {
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--mi-text-dark);
}

.mi-change {
    font-size: 1.125rem;
    /* 18px */
    font-weight: 600;
    margin-top: 4px;
}

.mi-change.text-green-600 {
    color: var(--mi-success);
}

.mi-change.text-red-600 {
    color: var(--mi-danger);
}

.mi-card {
    background: var(--mi-bg-card);
    border: 1px solid var(--mi-border);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 24px;
    /* No hover animation */
}

.mi-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--mi-border);
    padding-bottom: 8px;
}

.mi-card-header h3 {
    font-size: 1.25rem;
    /* 20px */
    margin: 0;
}

.mi-chart-controls {
    display: flex;
    gap: 6px;
}

.mi-time-tab {
    background: transparent;
    border: 1px solid var(--mi-border);
    border-radius: 9999px;
    /* pill */
    padding: 4px 12px;
    font-size: 1rem;
    /* 16px */
    font-weight: 600;
    color: var(--mi-text-muted);
    cursor: pointer;
    transition: none;
    /* remove animation */
}

.mi-toggle-group {
    display: flex;
    gap: 6px;
}

.mi-time-tab.active {
    background: var(--mi-primary);
    color: #fff;
    border-color: var(--mi-primary-dark);
}

.mi-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 1rem;
    /* 16px */
}

.mi-table th,
.mi-table td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--mi-border);
}

.mi-table th {
    background: var(--mi-bg-page);
    color: var(--mi-text-muted);
    text-transform: uppercase;
    font-weight: 600;
    font-size: 0.875rem;
    /* 14px minimum for headers is usually acceptable, but let's stick to 14px+ */
}

.mi-table tr:nth-child(even) {
    background: #f9fafb;
}

.mi-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.875rem;
    /* 14px */
    font-weight: 700;
    text-transform: uppercase;
}

.mi-badge-success {
    background: #d1fae5;
    color: #065f46;
}

.mi-badge-danger {
    background: #fee2e2;
    color: #991b1b;
}

.mi-badge-neutral {
    background: #f3f4f6;
    color: #374151;
}

.mi-sentiment-bar-container {
    height: 8px;
    background: var(--mi-border);
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    margin: 8px 0;
}

.mi-sentiment-bar-buy {
    background: var(--mi-success);
}

.mi-sentiment-bar-sell {
    background: var(--mi-danger);
}

/* Remove any hover effects on cards, buttons, etc. */
.mi-card:hover {
    background: var(--mi-bg-card);
}

.mi-time-tab:hover {
    background: #f3f4f6;
    color: var(--mi-text-dark);
}

.mi-time-tab.active:hover {
    background: var(--mi-primary);
    color: #fff;
}

/* Chart Stats Row */
#mi-chart-stats {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #f1f5f9;
    overflow-x: auto;
    width: 100%;
    font-size: 1rem;
    /* 16px */
}

.mi-stat-item {
    flex: 1;
    text-align: center;
    cursor: pointer;
    padding: 8px 4px;
    border-radius: 6px;
    transition: background 0.2s;
    min-width: 60px;
    /* Prevent crushing on small screens */
}

.mi-stat-item:hover {
    background: #f1f5f9;
}

#mi-chart-stats::-webkit-scrollbar {
    height: 4px;
}

#mi-chart-stats::-webkit-scrollbar-track {
    background: #f1f5f9;
}

#mi-chart-stats::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 2px;
}

/* Scorecard Styles */
.mi-score-section {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--mi-border);
}

.mi-score-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.mi-score-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    font-size: 1.125rem;
    /* 18px */
    font-weight: 600;
    color: var(--mi-text-dark);
}

.mi-score-val {
    font-weight: 700;
    color: var(--mi-primary);
    font-size: 1.125rem;
    /* 18px */
}

.mi-health-bar {
    display: flex;
    gap: 4px;
    height: 8px;
}

.health-seg {
    flex: 1;
    background: #e2e8f0;
    border-radius: 2px;
}

.health-seg.active {
    background: var(--mi-success);
}

.mi-upside {
    font-size: 1rem;
    /* 16px */
    color: var(--mi-success);
}

.mi-fair-value-box {
    background: #f8fafc;
    padding: 10px;
    border-radius: 6px;
    text-align: center;
    margin-bottom: 8px;
}

.mi-fv-label {
    font-size: 0.875rem;
    /* 14px */
    color: var(--mi-text-muted);
    text-transform: uppercase;
    margin-bottom: 2px;
}

.mi-fv-val {
    font-size: 1.25rem;
    /* 20px */
    font-weight: 700;
    color: var(--mi-text-dark);
}

.mi-tech-rating {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.875rem;
    /* 14px */
    text-transform: uppercase;
    font-weight: 700;
}

.mi-tech-rating.buy,
.mi-tech-rating.strong-buy {
    background: #dcfce7;
    color: #16a34a;
}

.mi-tech-rating.sell,
.mi-tech-rating.strong-sell {
    background: #fee2e2;
    color: #dc2626;
}

.mi-tech-rating.hold,
.mi-tech-rating.neutral {
    background: #f1f5f9;
    color: #475569;
}

.mi-mini-gauge {
    height: 40px;
    position: relative;
    overflow: hidden;
    margin-top: 10px;
}

.mi-gauge-arc {
    width: 80px;
    height: 40px;
    background: conic-gradient(from 270deg, #ef4444 0deg 60deg, #f59e0b 60deg 120deg, #22c55e 120deg 180deg);
    border-radius: 40px 40px 0 0;
    margin: 0 auto;
    position: relative;
}

.mi-gauge-needle {
    width: 2px;
    height: 36px;
    background: #0f172a;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform-origin: bottom center;
    transform: rotate(-90deg);
    /* Start at left */
    transition: transform 1s ease-out;
}

.mi-protips {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mi-protips li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 12px;
    font-size: 1rem;
    /* 16px */
    color: var(--mi-text-muted);
    line-height: 1.5;
}

.mi-protips li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--mi-success);
    font-weight: bold;
}

/* Share Button */
.mi-share-btn {
    background: transparent;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.mi-share-btn:hover {
    color: var(--mi-primary);
    background: #fff1f2;
}

.mi-share-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Modal Animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#mi-share-modal>div {
    animation: fadeIn 0.3s ease-out;
}

/* Full Height Scorecard */
.mi-scorecard {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.mi-scorecard .mi-score-section:last-child {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.mi-scorecard .mi-protips {
    flex-grow: 1;
    /* Distribute items evenly if needed, or just let them sit */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    /* Pack to top */
}

/* Watermark for Share */
.mi-card {
    position: relative;
    /* Ensure absolute children are positioned relative to card */
}

.mi-watermark {
    position: absolute;
    bottom: 15px;
    right: 15px;
    width: 120px;
    height: auto;
    z-index: 50;

    pointer-events: none;
}

/* New Header Styles */
.mi-header-left {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 1;
    min-width: 250px;
}

.mi-title-group {
    display: flex;
    flex-direction: column;
}

.mi-sub-title {
    display: flex;
    gap: 10px;
    font-size: 0.875rem;
    /* 14px */
    color: var(--mi-text-muted);
}

.mi-header-center {
    text-align: center;
    flex: 1;
    min-width: 200px;
}

.mi-change-group {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.mi-date {
    font-size: 0.875rem;
    /* 14px */
    color: var(--mi-text-muted);
    margin-top: 4px;
}

.mi-header-right {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    min-width: 200px;
}

.mi-consensus-box {
    text-align: right;
}

.mi-consensus-label {
    font-size: 0.875rem;
    /* 14px */
    color: var(--mi-text-muted);
    margin-bottom: 4px;
}

.mi-consensus-rating {
    font-size: 1.125rem;
    /* 18px */
    font-weight: 700;
    margin-bottom: 6px;
}

.mi-meter {
    width: 120px;
    height: 6px;
    background: #e2e8f0;
    border-radius: 3px;
    overflow: hidden;
    margin-left: auto;
    margin-bottom: 4px;
}

.mi-meter-fill {
    height: 100%;
}

.mi-consensus-score {
    font-size: 0.875rem;
    /* 14px */
    color: var(--mi-text-muted);
}

.mi-header-summary {
    width: 100%;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #f1f5f9;
    font-size: 1rem;
    /* 16px */
    line-height: 1.6;
    color: var(--mi-text-dark);
}

/* Share Button Text + Icon */
.mi-share-btn-text {
    background: transparent;
    border: 1px solid var(--mi-border);
    border-radius: 9999px;
    /* Pill shape */
    padding: 6px 14px;
    font-size: 1rem;
    /* 16px */
    font-weight: 600;
    color: var(--mi-text-muted);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
    /* Space between icon and text */
    margin-left: auto;
}

.mi-share-btn-text:hover {
    background: var(--mi-primary);
    color: #fff;
    border-color: var(--mi-primary);
}

.mi-share-btn-text svg {
    width: 14px;
    height: 14px;
    /* ensure stroke color inherits from button text color */
    stroke: currentColor;
}

/* Updated ProTips */
.mi-protips li {
    position: relative;
    padding-left: 28px;
    /* More space for checkmark */
    margin-bottom: 12px;
    /* More spacing */
    font-size: 1rem;
    /* 16px */
    color: #334155;
    /* Darker text */
    line-height: 1.5;
}

.mi-protips li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--mi-success);
    font-weight: 800;
    font-size: 1.1rem;
}

/* Sentiment Side-by-Side */
.mi-sentiment-row {
    display: flex;
    gap: 15px;
    /* Space between boxes */
}

.mi-sentiment-col {
    flex: 1;
    /* Equal width */
    min-width: 0;
    /* Prevent overflow */
}

/* =============================================
   SINGLE ASSET DESKTOP HEADER LAYOUT
   Scoped to .mi-single-header to not affect comparison pages
   ============================================= */
@media (min-width: 769px) {

    /* Single Asset Header - 2-column layout: Identity | Price+Consensus */
    .mi-single-header .mi-header-top-row {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 20px !important;
        flex-wrap: nowrap !important;
    }

    /* Identity section - left */
    .mi-single-header .mi-header-identity {
        display: flex !important;
        align-items: center !important;
        gap: 15px !important;
        flex: 1 !important;
    }

    /* Logo - restore desktop size */
    .mi-single-header .mi-logo {
        width: 60px !important;
        height: 60px !important;
        border-radius: 12px !important;
    }

    /* Ticker text - restore desktop size */
    .mi-single-header .mi-ticker {
        font-size: 1.75rem !important;
        margin: 0 !important;
    }

    /* Subtitle text - restore desktop styling */
    .mi-single-header .mi-header-identity p {
        font-size: 14px !important;
        color: #64748b !important;
    }

    /* Price section (under ticker on left) - show on desktop */
    .mi-single-header .mi-header-price-desktop {
        display: block !important;
    }

    .mi-single-header .mi-header-price-desktop {
        display: block !important;
        text-align: right !important;
    }

    .mi-single-header .mi-header-price-desktop .mi-price {
        font-size: 2rem !important;
    }

    /* Mobile price section - hide on desktop */
    .mi-single-header .mi-header-price-mobile {
        display: none !important;
    }

    /* Mobile consensus - hide on desktop */
    .mi-single-header .mi-header-consensus-mobile {
        display: none !important;
    }

    /* Show share button on desktop */
    .mi-single-header .mi-share-btn-hero {
        display: flex !important;
    }

    /* Header - restore desktop flex layout */
    .mi-single-header {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
    }
}

/* Mobile Responsive */
@media (max-width: 768px) {

    body,
    .mi-time-tab,
    .mi-table,
    .mi-header-summary,
    .mi-protips li,
    .mi-share-btn-text {
        font-size: 14px !important;
    }

    .mi-ticker,
    .mi-price {
        font-size: 1.5rem;
    }

    .mi-change {
        font-size: 1rem;
    }

    /* SINGLE ASSET MOBILE LAYOUT - Responsive Consensus */
    .mi-single-header .mi-consensus-box {
        padding: 8px 12px !important;
        border-radius: 8px !important;
    }

    .mi-single-header .mi-consensus-rating {
        font-size: 16px !important;
    }

    .mi-single-header .mi-consensus-score {
        font-size: 11px !important;
    }

    .mi-single-header .mi-consensus-label {
        font-size: 9px !important;
    }

    /* Hide share button on mobile */
    .mi-single-header .mi-share-btn-hero {
        display: none !important;
    }

    /* Mobile Header Layout: Strict Vertical Stack */
    /* Mobile Header Layout: Row Wrap for Side-by-Side */
    .mi-header {
        flex-flow: row wrap !important;
        align-items: flex-start !important;
        justify-content: space-between !important;
        gap: 0px;
        /* Gap handled by margins/padding */
    }

    /* FIX: Ensure AI Summary stays at the bottom */
    .mi-header-summary {
        order: 10 !important;
        width: 100% !important;
        margin-top: 10px;
    }

    /* 1. Identity/Ticker Section (Top) */
    /* 1. Identity/Ticker Section (Top Left) */
    /* 1. Identity/Ticker Section (Top Left) */
    .mi-header-left {
        box-sizing: border-box !important;
        width: 55% !important;
        /* Reduced from 58% */
        flex: 0 0 55% !important;
        max-width: 55% !important;
        order: 1 !important;
        margin-bottom: 0px;
        flex-direction: row !important;
        /* Logo + Ticker side-by-side */
        align-items: flex-start;
        padding: 0 !important;
        /* Remove padding */
        overflow: hidden;
        flex-wrap: wrap;
        /* Allow wrapping if needed */
        gap: 8px !important;
        /* Reduced gap */
    }

    /* Shrink logo on mobile */
    .mi-header-left .mi-logo {
        width: 35px !important;
        height: 35px !important;
        flex-shrink: 0;
    }

    /* Shrink ticker font on mobile */
    .mi-header-left .mi-ticker {
        font-size: 1.25rem !important;
        /* Reduced from default */
    }

    /* FIX: Allow H1 title to wrap on mobile instead of truncating */
    .mi-single-header .mi-ticker,
    .mi-single-header h1.mi-ticker {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;
        word-break: break-word !important;
    }

    /* Also fix the subtitle line below the H1 */
    .mi-header-identity p {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;
    }

    /* Hide Share buttons on mobile to save space */
    .mi-share-btn-hero {
        display: none !important;
    }

    /* Hide global share button on mobile — reclaim H1 space */
    .mi-header-share {
        display: none !important;
    }

    /* 2. Consensus Section (Top Right) */
    .mi-header-right {
        box-sizing: border-box !important;
        width: 42% !important;
        /* Increased from 40% */
        flex: 0 0 42% !important;
        max-width: 42% !important;
        order: 2 !important;
        margin-bottom: 0px;
        display: flex;
        justify-content: flex-end;
        padding: 0 !important;
        /* Remove padding */
    }

    /* 3. Price Section (Middle) */
    .mi-header-center {
        order: 3 !important;
        width: 100% !important;
        flex: 1 1 100% !important;
        text-align: left;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #f8fafc;
        padding: 10px;
        border-radius: 8px;
        margin-top: 10px;
    }

    /* 4. Metadata Section (Restored Footer) */
    .mi-header-metadata {
        order: 4 !important;
        width: 100% !important;
        flex: 1 1 100% !important;
        margin-top: 8px;
        padding-top: 8px;
        border-top: 1px solid #f1f5f9;
        display: block !important;
        /* Ensure visible */
    }

    /* 5. Summary (Bottom) */
    .mi-header-summary {
        order: 5 !important;
        width: 100% !important;
        margin-top: 10px;
    }

    /* Ensure Title Group Truncates */
    .mi-title-group,
    .mi-title-container,
    .mi-title-row {
        width: 100%;
        min-width: 0;
    }

    /* Remove hidden class if present */
    .mi-hidden-mobile {
        display: block !important;
    }

    /* Consensus Box Styling for tight squeeze */
    .mi-consensus-box {
        flex-direction: column !important;
        align-items: flex-end !important;
        gap: 2px !important;
        width: 100%;
        padding: 6px !important;
        /* Reduce padding */
    }

    .mi-consensus-wrapper {
        align-items: flex-end;
        text-align: right;
    }

    .mi-consensus-label {
        font-size: 9px !important;
        /* Smaller label */
        text-align: right;
        margin-bottom: 2px;
    }

    .mi-consensus-text {
        font-size: 13px !important;
        line-height: 1.2;
    }

    .mi-consensus-score {
        font-size: 10px !important;
    }

    /* Hide the bar on mobile to save space */
    .mi-consensus-bar-container {
        display: none !important;
    }

    /* CARD HEADER FIX: Ensure headers wrap on mobile */
    .mi-card>div[style*="display: flex"] {
        flex-wrap: wrap;
        gap: 8px;
    }

    /* Ensure title breaks if needed */
    .mi-card h3 {
        width: 100%;
        margin-bottom: 5px !important;
    }

    /* Fix share button alignment in cards */
    .mi-card .mi-share-btn-text {
        margin-left: 0 !important;
    }

    .mi-consensus-text {
        font-size: 14px;
    }

    .mi-consensus-score {
        font-size: 11px;
    }

    /* 3. Price Section (Middle -> Now Bottom) */
    .mi-header-center {
        order: 3 !important;
        /* New Line */
        width: 100% !important;
        flex: 1 1 100% !important;
        text-align: left;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #f8fafc;
        padding: 10px;
        border-radius: 8px;
        margin-top: 10px;
    }

    /* Mobile Share Button tweaks */
    .mi-share-btn-hero {
        align-self: flex-start;
        margin-top: 2px;
    }

    .mi-consensus-box {
        text-align: left;
        display: flex;
        align-items: center;
        gap: 16px;
        width: 100%;
    }

    .mi-meter {
        margin-left: 0;
        /* Reset auto margin */
        flex-grow: 1;
    }
}

/* Symmetrical Layout Fixes */
.mi-col-stack {
    height: 100%;
    /* Ensure the stack takes full height of the grid cell */
    display: flex;
    flex-direction: column;
    /* Inline style in PHP handles gap, but good to have here */
}

.mi-col-stack .mi-card:last-child {
    flex-grow: 1;
    /* Force the last card (Technical Indicators) to stretch and fill empty space */
}

/* FORCE grid items to match heights */
.mi-grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px !important;
    align-items: stretch !important;
}

.mi-grid-2>* {
    margin-bottom: 0 !important;
    align-self: stretch !important;
    min-height: 100%;
}

/* Scorecard needs to be a flex container to fill properly */
.mi-grid-2>.mi-card.mi-scorecard {
    display: flex !important;
    flex-direction: column !important;
}

/* Col-stack already has flex, ensure it fills */
.mi-grid-2>.mi-col-stack {
    display: flex !important;
    flex-direction: column !important;
}

/* Tooltip Fix */
.mi-tooltip {
    position: relative;
    cursor: help;
}

.mi-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-5px);
    background: #0f172a;
    color: #fff;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    white-space: pre-wrap;
    min-width: 180px;
    text-align: center;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    pointer-events: none;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    line-height: 1.4;
}

.mi-tooltip::before {
    /* Arrow */
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(0px);
    border: 6px solid transparent;
    border-top-color: #0f172a;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    z-index: 100;
}

.mi-tooltip:hover::after,
.mi-tooltip:hover::before {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-5px);
    /* Tooltip shift */
}

.mi-tooltip:hover::before {
    transform: translateX(-50%);
    /* Arrow doesn't shift up/down as much */
}

/* Sidebar Layout */
.mi-dashboard-wrapper {
    display: flex;
    gap: 25px;
    align-items: stretch;
}

.mi-main-col {
    flex: 1;
    min-width: 0;
}

.mi-sidebar-col {
    width: 350px;
    flex-shrink: 0;
}

.mi-sidebar-sticky {
    display: flex;
    flex-direction: column;
    gap: 25px;
    height: 100%;
}

/* Ensure sidebar cards don't have extra margin */
.mi-sidebar-col .mi-card {
    margin-top: 0 !important;
    margin-bottom: 0;
}

/* Risk & Volatility card - align with Monte Carlo chart */
.mi-risk-volatility-card {
    min-height: 420px;
    display: flex;
    flex-direction: column;
}

/* Push Risk Considerations to bottom */
.mi-risk-volatility-card>div:last-child {
    margin-top: auto;
}

@media (max-width: 1024px) {
    .mi-dashboard-wrapper {
        flex-direction: column;
    }

    .mi-sidebar-col {
        width: 100%;
    }
}

/* Comparison Widget */
.mi-compare-widget {
    background: #fff;
    border-radius: 8px;
}

.mi-compare-search-box {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.mi-compare-input {
    flex: 1;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 10px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s;
}

.mi-compare-input:focus {
    border-color: #fe497e;
}

.mi-compare-btn-add {
    background: #fe497e;
    color: #fff;
    border: none;
    padding: 0 16px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    transition: background 0.2s;
}

.mi-compare-btn-add:hover {
    background: #d6336c;
}

.mi-compare-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mi-compare-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    transition: all 0.2s;
}

.mi-compare-item:hover {
    border-color: #cbd5e1;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.mi-compare-item.current {
    background: #f8fafc;
    border-color: #e2e8f0;
}

.mi-compare-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mi-compare-ticker {
    font-weight: 700;
    font-size: 16px;
    color: #0f172a;
}

.mi-compare-name {
    font-size: 12px;
    color: #64748b;
    max-width: 120px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mi-compare-stats {
    text-align: right;
}

.mi-compare-price {
    font-weight: 600;
    font-size: 15px;
    color: #0f172a;
}

.mi-rm-btn {
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    font-size: 16px;
    padding: 0 0 0 10px;
    margin-left: 5px;
}

/* Compare Widget Slots */
.mi-compare-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.mi-compare-card {
    background: #ffffff;
    border-radius: 8px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100px;
    color: #0f172a;
    border: 1px solid #e2e8f0;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.mi-compare-card:hover {
    border-color: #cbd5e1;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07);
}

.mi-compare-card.main {
    background: #ffffff;
    border: 2px solid #f43f5e;
    box-shadow: 0 2px 4px rgba(244, 63, 94, 0.1);
}

.mi-compare-card.main:hover {
    box-shadow: 0 4px 8px rgba(244, 63, 94, 0.15);
}

.mi-compare-card.empty {
    background: #f8fafc;
    border: 2px dashed #cbd5e1;
    color: #64748b;
    align-items: center;
    cursor: pointer;
    box-shadow: none;
}

.mi-compare-card.empty:hover {
    border-color: #f43f5e;
    background: #fff;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(244, 63, 94, 0.1);
}

.mi-cc-header {
    margin-bottom: 6px;
}

.mi-cc-ticker {
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.3px;
    color: #0f172a;
}

.mi-cc-price {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 4px;
    color: #0f172a;
}

.mi-cc-change {
    font-size: 13px;
    font-weight: 600;
}

.mi-plus-icon {
    font-size: 28px;
    line-height: 1;
    margin-bottom: 4px;
    font-weight: 300;
    color: #f43f5e;
}

.mi-add-text {
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
}

.mi-filled-remove {
    position: absolute;
    top: 5px;
    right: 5px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    color: #e2e8f0;
}

.mi-filled-remove:hover {
    background: rgba(239, 68, 68, 0.8);
    color: #fff;
}

/* Modal Custom */
.mi-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 99999;
    align-items: center;
    justify-content: center;
    display: flex;
    /* Flex is set via JS display:flex when opened, but good to have here */
}

.mi-modal-content {
    background: #fff;
    border-radius: 12px;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    animation: miFadeScale 0.2s ease-out;
}

@keyframes miFadeScale {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.mi-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #e2e8f0;
}

.mi-modal-header h3 {
    margin: 0;
    font-size: 18px;
    color: #0f172a;
}

.mi-modal-close {
    background: none;
    border: none;
    font-size: 24px;
    line-height: 1;
    color: #94a3b8;
    cursor: pointer;
}

.mi-modal-body {
    padding: 20px;
}

.mi-input-lg {
    transition: all 0.2s;
    outline: none;
}

.mi-input-lg:focus {
    border-color: #fe497e;
    box-shadow: 0 0 0 3px rgba(254, 73, 126, 0.1);
}

.mi-btn-outline-primary {
    display: flex;
    align-items: center;
    padding: 8px 16px;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    color: #334155;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 14px;
}

.mi-btn-outline-primary:hover {
    border-color: #94a3b8;
    background: #f8fafc;
    color: #0f172a;
}



.mi-rm-btn:hover {
    color: #ef4444;
}

/* Full Screen Comparison Modal */
.mi-fs-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0f172a;
    /* Dark Navy Background */
    z-index: 99999;
    display: none;
    flex-direction: column;
    overflow-y: auto;
}

.mi-fs-modal-content {
    max-width: 1000px;
    margin: 0 auto;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    position: relative;
    /* Anchor for absolute-positioned search overlay */
    overflow: visible;
    /* Allow dropdown to overflow */
}

.mi-fs-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}

.mi-fs-close {
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 32px;
    cursor: pointer;
    line-height: 1;
}

.mi-fs-close:hover {
    color: #fff;
}

.mi-fs-deck {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 25px;
}

.mi-fs-card {
    background: #1e293b;
    border-radius: 8px;
    padding: 15px;
    border: 1px solid #334155;
    position: relative;
    min-height: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.mi-fs-card.main {
    background: #0f172a;
    border-color: #475569;
}

.mi-fs-card.empty {
    cursor: pointer;
    align-items: center;
    border: 1px dashed #475569;
    background: rgba(30, 41, 59, 0.5);
    transition: all 0.2s;
}

.mi-fs-card.empty:hover {
    background: #1e293b;
    border-color: #94a3b8;
}

.mi-fs-add-content {
    color: #94a3b8;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
}

.mi-fs-add-content .plus {
    font-size: 20px;
}

.mi-fs-card-top {
    display: flex;
    flex-direction: column;
    margin-bottom: 5px;
}

.mi-fs-card-top .mi-ticker {
    font-weight: 700;
    color: #60a5fa;
    font-size: 15px;
}

.mi-fs-card-top .mi-name {
    font-size: 11px;
    color: #94a3b8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mi-fs-card-price {
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    display: flex;
    gap: 8px;
    align-items: center;
}

.mi-fs-card-price span.up {
    color: #22c55e;
    font-size: 14px;
}

.mi-fs-card-price span.down {
    color: #ef4444;
    font-size: 14px;
}

/* Table */
.mi-fs-table-wrapper {
    overflow-x: auto;
}

.mi-fs-table {
    width: 100%;
    border-collapse: collapse;
    color: #e2e8f0;
    font-size: 14px;
}

.mi-fs-table th,
.mi-fs-table td {
    padding: 12px 10px;
    text-align: right;
    border-bottom: 1px solid #334155;
    white-space: nowrap;
}

.mi-fs-table th:first-child,
.mi-fs-table td:first-child {
    text-align: left;
    color: #94a3b8;
    width: 200px;
    /* Fixed label width */
    position: sticky;
    left: 0;
    background: #0f172a;
    /* Keep label readable on horizontal scroll */
    z-index: 2;
    border-right: 1px solid #334155;
}

.mi-fs-table tr.section-head td {
    background: transparent;
    border-bottom: none;
    padding-top: 30px;
    padding-bottom: 10px;
    text-align: left;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
}

.mi-fs-table tr:hover td {
    background: #1e293b;
    /* Maintain sticky bg on hover */
}

.mi-fs-table tr:hover td:first-child {
    background: #1e293b;
}

.mi-fs-remove {
    position: absolute;
    top: 5px;
    right: 5px;
    color: #64748b;
    cursor: pointer;
    font-size: 16px;
    padding: 5px;
}

.mi-fs-remove:hover {
    color: #ef4444;
}

/* Sidebar Trigger */
.mi-compare-card.empty {
    cursor: pointer;
}

/* Search Dropdown */
.mi-fs-dropdown {
    background: #1e293b;
    border: 1px solid #334155;
    border-top: none;
    max-height: 250px;
    overflow-y: auto;
    position: absolute;
    width: 100%;
    left: 0;
    top: 100%;
    /* Position right below input */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    z-index: 2147483647 !important;
    /* Ensure it's above everything */
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.mi-fs-dropdown-item {
    padding: 12px 15px;
    cursor: pointer;
    border-bottom: 1px solid #334155;
    color: #f1f5f9;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.15s;
}

.mi-fs-dropdown-item:last-child {
    border-bottom: none;
}

.mi-fs-dropdown-item:hover {
    background: #334155;
}

.mi-fs-dropdown-symbol {
    font-weight: 700;
    color: #60a5fa;
    margin-right: 10px;
}

.mi-fs-dropdown-name {
    font-size: 0.9em;
    color: #cbd5e1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 140px;
}

.mi-fs-dropdown-meta {
    font-size: 0.75em;
    color: #64748b;
    text-transform: uppercase;
}

/* Chart Container */
.mi-fs-chart-container {
    margin-bottom: 30px;
    padding: 20px;
    background: #0f172a;
    /* Match modal bg or slightly lighter */
    border-radius: 8px;
    border: 1px solid #334155;
    height: 350px;
    position: relative;
}

/* Adjust search overlay wrapper to allow visible overflow for dropdown if needed */
#mi-fs-search-overlay {
    overflow: visible !important;
    position: absolute;
    top: 180px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 300px;
    z-index: 2147483647;
    /* Maximum z-index to ensure visibility */
}

/* Related Insights Section (SEO Internal Linking) */
.mi-related-insights {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 20px;
    margin-top: 40px;
}

.mi-related-insights h2 {
    margin: 0 0 20px 0;
    font-size: 20px;
    font-weight: 700;
    color: #0f172a;
}

.mi-related-insights-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
}

.mi-related-insights-list li {
    margin: 0;
    padding: 0;
}

.mi-related-link {
    display: block;
    padding: 12px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    color: #0f172a;
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    transition: all 0.2s ease;
    background: #f8fafc;
}

.mi-related-link:hover {
    background: #fff;
    border-color: #fe497e;
    color: #fe497e;
    box-shadow: 0 2px 4px rgba(254, 73, 126, 0.1);
}

/* Phase 2: Mobile Responsive Fixes */

/* 2A: Analysis timestamp - fix mobile text wrapping */
.mi-analysis-timestamp {
    margin-top: 8px;
    margin-bottom: 0;
    font-size: 13px;
    color: #0f172a;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

@media (max-width: 768px) {
    .mi-analysis-timestamp {
        font-size: 12px;
        line-height: 1.4;
    }
}

/* 2B: Header responsive layout */
@media (min-width: 1024px) {
    .mi-header {
        display: grid;
        grid-template-columns: 1fr auto auto;
        gap: 30px;
        align-items: start;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .mi-header {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 20px;
    }
}

/* REMOVED: Old mobile header column layout - consolidated into primary mobile rules at line 686 */

.mi-header-left {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.mi-header-center {
    text-align: center;
    padding: 12px 0;
}

@media (max-width: 767px) {
    .mi-header-center {
        text-align: left;
        padding: 0;
    }
}

.mi-header-right {
    text-align: right;
}

/* REMOVED: Old mobile header-right width override - consolidated into primary mobile rules at line 686 */

.mi-title-group {
    flex: 1;
    min-width: 0;
}

.mi-sub-title {
    display: flex;
    gap: 8px;
    font-size: 14px;
    flex-wrap: wrap;
}

.mi-header-summary {
    width: 100%;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--mi-border);
}

@media (min-width: 1024px) {
    .mi-header-summary {
        grid-column: 1 / -1;
    }
}

/* Logo sizing mobile */
.mi-logo {
    flex-shrink: 0;
}

@media (max-width: 480px) {
    .mi-logo {
        width: 48px;
        height: 48px;
    }
}

/* Ticker font size mobile */
.mi-ticker {
    font-size: 2rem;
}

@media (max-width: 767px) {
    .mi-ticker {
        font-size: 1.5rem;
    }
}

/* Price font size mobile */
.mi-price {
    font-size: 2.25rem;
}

@media (max-width: 767px) {
    .mi-price {
        font-size: 1.875rem;
    }
}

/* 2C: Chart controls mobile responsive */
.mi-chart-controls {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

@media (max-width: 768px) {
    .mi-chart-controls {
        flex-wrap: wrap;
        justify-content: flex-start;
        width: 100%;
        margin-top: 12px;
    }
}

@media (max-width: 480px) {
    .mi-chart-controls {
        justify-content: space-between;
    }
}

.mi-time-tab {
    background: transparent;
    border: 1px solid var(--mi-border);
    border-radius: 9999px;
    padding: 6px 12px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--mi-text-muted);
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

@media (max-width: 480px) {
    .mi-time-tab {
        padding: 4px 10px;
        font-size: 0.75rem;
    }
}

.mi-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--mi-border);
    padding-bottom: 8px;
    gap: 12px;
}

@media (max-width: 768px) {
    .mi-card-header {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }
}

.mi-card-header h2,
.mi-card-header h3 {
    flex-shrink: 0;
    min-width: 0;
    margin: 0;
}

.mi-chart-container {
    height: 400px;
    width: 100%;
    position: relative;
}

@media (max-width: 768px) {
    .mi-chart-container {
        height: 300px;
    }
}

@media (max-width: 480px) {
    .mi-chart-container {
        height: 250px;
    }
}

#mi-chart-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 15px;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #f1f5f9;
    overflow-x: visible;
}

@media (max-width: 768px) {
    #mi-chart-stats {
        grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
        gap: 10px;
    }
}

@media (max-width: 480px) {
    #mi-chart-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
}

.mi-chart-stat {
    text-align: center;
    padding: 8px;
    border-radius: 6px;
    background: #f8fafc;
    font-size: 12px;
}

.mi-chart-stat-label {
    color: #64748b;
    font-size: 11px;
    margin-bottom: 4px;
}

.mi-chart-stat-value {
    font-weight: 700;
    color: #0f172a;
    word-break: break-word;
}

.mi-chart-stat-pct {
    font-size: 11px;
    color: #10b981;
    margin-top: 4px;
}

/* 2D: Card spacing mobile */
.mi-card {
    margin-bottom: 25px;
}

@media (max-width: 768px) {
    .mi-card {
        padding: 16px;
        margin-bottom: 20px;
    }
}

.mi-grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 25px;
    margin-bottom: 25px;
}

@media (max-width: 768px) {
    .mi-grid-2 {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-bottom: 20px;
    }
}

@media (max-width: 480px) {
    .mi-grid-2 {
        gap: 16px;
        margin-bottom: 16px;
    }
}

/* Phase 3: Growth Comparison Feature */
.mi-growth-comparison {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--mi-border);
}

.mi-growth-comparison h3 {
    margin-top: 0;
    margin-bottom: 12px;
    font-size: 1.125rem;
    color: var(--mi-text-dark);
}

.mi-comparison-input-group {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

@media (max-width: 768px) {
    .mi-comparison-input-group {
        flex-direction: column;
    }
}

.mi-input {
    flex: 1;
    min-width: 200px;
    padding: 10px 12px;
    border: 1px solid var(--mi-border);
    border-radius: 6px;
    font-size: 1rem;
    font-family: var(--mi-font);
    color: var(--mi-text-dark);
    background: var(--mi-bg-card);
}

@media (max-width: 768px) {
    .mi-input {
        width: 100%;
        min-width: unset;
    }
}

.mi-input:focus {
    outline: none;
    border-color: var(--mi-primary);
    box-shadow: 0 0 0 3px rgba(254, 73, 126, 0.1);
}

.mi-btn {
    padding: 10px 16px;
    border: none;
    border-radius: 6px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: var(--mi-font);
    white-space: nowrap;
}

.mi-btn-primary {
    background: var(--mi-primary);
    color: white;
}

.mi-btn-primary:hover:not(:disabled) {
    background: #fe2952;
}

.mi-btn-primary:disabled {
    background: #ccc;
    cursor: not-allowed;
}

.mi-btn-secondary {
    background: #f3f4f6;
    color: var(--mi-text-dark);
    border: 1px solid var(--mi-border);
}

.mi-btn-secondary:hover {
    background: #e5e7eb;
}

#mi-comparison-status {
    border-radius: 6px;
    font-size: 13px;
    padding: 12px;
}

#mi-comparison-status.success {
    background: #d1fae5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}

#mi-comparison-status.error {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

#mi-comparison-status.loading {
    background: #dbeafe;
    color: #1e40af;
    border: 1px solid #bfdbfe;
}

/* =========================================
   MOBILE RESPONSIVE FIXES v4.0.34
   ========================================= */

/* REMOVED: Old mobile header layout rules that conflicted with side-by-side layout.
   These have been consolidated into the primary mobile rules at line 686.
   Nothing here - rules moved to prevent override conflicts. */

/* Fix: Spacing between sidebar and Insider Trading section on mobile */
@media (max-width: 1024px) {
    .mi-dashboard-wrapper+.mi-card {
        margin-top: 30px !important;
    }

    /* Ensure proper spacing after sidebar closes */
    .mi-sidebar-col+.mi-related-insights,
    .mi-sidebar-col~.mi-card {
        margin-top: 30px !important;
    }
}

@media (max-width: 767px) {

    /* More spacing on smaller screens */
    .mi-dashboard-wrapper+.mi-card {
        margin-top: 25px !important;
    }

    /* Sidebar cards need bottom margin on mobile */
    .mi-sidebar-col .mi-card {
        margin-bottom: 20px !important;
    }

    /* Risk & Volatility card spacing */
    .mi-risk-volatility-card {
        margin-bottom: 25px !important;
        min-height: auto !important;
    }

    /* Ensure cards after sidebar have proper spacing */
    .mi-sidebar-sticky {
        margin-bottom: 25px;
    }
}

/* Fix: Price card header on mobile */
@media (max-width: 768px) {
    .mi-card-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px;
    }

    .mi-price-card .mi-card-header {
        flex-direction: column !important;
    }
}

/* Fix: Analysis timestamp on mobile */
@media (max-width: 480px) {
    .mi-analysis-timestamp {
        font-size: 11px;
        line-height: 1.4;
        word-wrap: break-word;
    }

    .mi-title-group>div:last-child {
        font-size: 11px !important;
    }
}

/* === Consensus Section Styles === */
.mi-consensus-wrapper {
    text-align: right;
}

.mi-consensus-label {
    font-size: 12px;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    font-weight: 600;
}

.mi-consensus-box {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    background: #f8fafc;
    padding: 12px 20px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

.mi-consensus-rating {
    text-align: left;
}

.mi-consensus-text {
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
}

.mi-consensus-score {
    font-size: 13px;
    color: #64748b;
    margin-top: 4px;
}

.mi-consensus-bar-container {
    width: 120px;
}

.mi-consensus-bar-bg {
    background: #e2e8f0;
    height: 8px;
    border-radius: 10px;
    overflow: hidden;
}

.mi-consensus-bar-fill {
    height: 100%;
    border-radius: 10px;
    transition: width 0.3s ease;
}

/* REMOVED: Old mobile consensus alignment rules that conflicted with side-by-side layout.
   These have been consolidated into the primary mobile rules at line 686. */

@media (max-width: 480px) {
    .mi-consensus-box {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 12px 15px;
    }

    .mi-consensus-bar-container {
        width: 100%;
        max-width: none;
    }

    .mi-consensus-text {
        font-size: 24px;
    }
}

/* Contextual Links */
.mi-context-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #f1f5f9;
    color: #475569;
    border-radius: 20px;
    font-size: 13px;
    text-decoration: none;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.mi-context-link:hover {
    background: #fff;
    color: var(--mi-primary);
    border-color: var(--mi-primary);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.mi-context-link strong {
    font-weight: 600;
    color: #0f172a;
}

.mi-context-link:hover strong {
    color: var(--mi-primary);
}

/* Tooltip Icon Styling */
.mi-info-icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #e2e8f0;
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
    font-family: serif;
    cursor: help;
    margin-left: 6px;
    vertical-align: middle;
    transition: all 0.2s ease;
}

.mi-info-icon:hover {
    background: #cbd5e1;
    color: #0f172a;
}

/* Mobile Header Stacked Layout for Single Asset Pages */
@media (max-width: 768px) {
    .mi-single-header .mi-header-top-row {
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        text-align: center !important;
        gap: 24px !important;
    }

    .mi-header-identity {
        width: 100% !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .mi-header-identity>div {
        text-align: center !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    .mi-ticker {
        font-size: 28px !important;
    }

    .mi-header-price {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        margin-top: 12px !important;
        width: 100% !important;
    }

    .mi-price {
        font-size: 36px !important;
        line-height: 1.1 !important;
        margin-right: 0 !important;
    }

    .mi-change {
        font-size: 16px !important;
        margin-left: 0 !important;
        margin-top: 4px !important;
    }

    /* Move Consensus to order 2 */
    .mi-header-consensus {
        width: 100% !important;
        order: 2 !important;
        margin-top: 10px !important;
        text-align: center !important;
    }

    .mi-consensus-box {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Move Share to order 3 at bottom */
    .mi-header-share {
        width: 100% !important;
        order: 3 !important;
        align-self: center !important;
        margin-top: 4px !important;
    }

    .mi-share-btn {
        width: 100% !important;
        justify-content: center !important;
        height: 44px !important;
        font-size: 16px !important;
    }
}

/* Mobile Consensus Refinements */
@media (max-width: 768px) {

    /* Center text inside Consensus Box */
    .mi-consensus-box {
        text-align: center !important;
        align-items: center !important;
        justify-content: center !important;
        /* Ensure vertical stacking if it was reset */
        display: flex !important;
        flex-direction: column !important;
        position: relative !important;
        /* For share btn positioning if needed */
    }

    /* Move share button to top right of the Consensus Section as requested? 
       Actually user might mean 'top right of the PAGE' or 'top right of the Header'.
       The screenshot shows Share button at the bottom full width.
       User says 'move share button to be in the top right of that section'.
       If 'that section' is the consensus section, it means small icon?
       Or does he mean top right of the CARD (Header)?
       'Top right of that section' usually refers to the header card.
       Layout: Logo (Left), Share (Top Right), Ticker (Below).
       This requires absolute positioning on mobile.
    */

    .mi-header-share {
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        width: auto !important;
        margin-top: 0 !important;
    }

    .mi-share-btn {
        width: auto !important;
        padding: 8px 12px !important;
        border: none !important;
        /* Minimalist icon style? Or keep pill? */
        /* If keeping pill, it might crowd logo. */
    }

    /* Ensure Identity doesn't overlap Share */
    .mi-header-identity {
        padding-top: 10px !important;
        /* Space if needed */
        width: 100% !important;
    }
}

/* Mobile Header Layout Final Tweaks */
@media (max-width: 768px) {
    .mi-single-header .mi-header-top-row {
        position: relative !important;
        /* Anchor for absolute share button */
    }

    /* Force Consensus Box Content Centering */
    .mi-consensus-box {
        text-align: center !important;
        align-items: center !important;
        justify-content: center !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .mi-consensus-label {
        text-align: center !important;
        width: 100% !important;
    }

    /* Position Share Button Absolute Top Right */
    .mi-header-share {
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        width: auto !important;
        margin: 0 !important;
        align-self: auto !important;
    }

    .mi-share-btn {
        width: auto !important;
        padding: 6px 12px !important;
        /* Smaller cleaner button */
        font-size: 13px !important;
        /* background: transparent !important; border: none !important; color: #64748b !important; */
        /* Keeping border style but smaller */
    }
}

/* Universal Mobile Share Button Positioning (Comparison + All Cards) */
@media (max-width: 768px) {

    /* 1. Header Share Buttons (Single & Compare) */
    /* Ensure header container is relative */
    .mi-single-header .mi-header-top-row,
    .mi-header {
        /* Covers comparison header */
        position: relative !important;
    }

    /* Position the wrapper absolute top-right */
    .mi-header-share {
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        width: auto !important;
        margin: 0 !important;
        z-index: 10 !important;
    }

    /* Stylize the button inside wrapper */
    .mi-header-share .mi-share-btn {
        width: auto !important;
        padding: 6px 12px !important;
        font-size: 13px !important;
        background: #fff !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 20px !important;
    }

    /* 2. Card/Section Share Buttons */
    /* Ensure containers are relative */
    .mi-card,
    .mi-insight-box,
    .mi-verdict-card {
        position: relative !important;
    }

    /* Position buttons inside cards items absolute top-right */
    .mi-card .mi-share-btn,
    .mi-card .mi-share-btn-text,
    .mi-insight-box .mi-share-btn,
    .mi-verdict-card .mi-share-btn {
        position: absolute !important;
        top: 15px !important;
        right: 15px !important;
        margin: 0 !important;
        width: auto !important;
        height: auto !important;
        padding: 6px 12px !important;
        font-size: 13px !important;
        z-index: 5 !important;
        background: #fff !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 20px !important;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
    }
}
/* =========================================
   MOBILE DESIGN FIXES (v6.12.70)
   ========================================= */

/* 1. Price Header Value */
.mi-header-price-val {
    font-size: 32px;
}

/* 2. Technical Rating Grid */
.mi-tech-grid {
    display: grid; 
    grid-template-columns: repeat(4, 1fr); 
    gap: 10px;
}

/* 3. Trade Bias Toggle */
.mi-bias-grid {
    display: flex; 
    gap: 8px;
}

/* 4. Profit Targets */
.mi-targets-grid {
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    gap: 12px;
}
.mi-target-val {
    font-size: 20px;
}

/* 5. Price History (ATH/ATL) */
.mi-history-val {
    font-size: 22px;
}

/* MOBILE OVERRIDES */
@media (max-width: 768px) {
    /* Prevent Price Wrapping */
    .mi-header-price-val {
        font-size: 24px !important;
        white-space: nowrap;
    }
    
    /* Fix Technical Rating Grid (2x2 instead of 1x4) */
    .mi-tech-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    /* Fix Trade Bias Buttons (Reduce padding/font) */
    .mi-bias-grid {
        gap: 4px !important;
    }
    .mi-bias-btn {
        padding: 8px 4px !important;
        font-size: 13px !important;
    }
    
    /* Fix Profit Targets */
    .mi-targets-grid {
        gap: 6px !important;
    }
    .mi-target-val {
        font-size: 16px !important; /* Smaller to fit */
    }
    
    /* Fix ATH/ATL wrapping */
    .mi-history-val {
        font-size: 18px !important;
        white-space: nowrap;
    }
}

/* ===========================
   AI vs Wall Street Card
   =========================== */
.mi-vs-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px;
}
.mi-vs-card .mi-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.mi-vs-badge {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.mi-vs-aligned { background: #dcfce7; color: #16a34a; }
.mi-vs-partially-aligned { background: #fef3c7; color: #d97706; }
.mi-vs-divergent { background: #fee2e2; color: #dc2626; }
.mi-vs-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 20px;
    align-items: center;
}
.mi-vs-panel {
    text-align: center;
    padding: 16px;
    background: #f8fafc;
    border-radius: 10px;
}
.mi-vs-label {
    font-size: 12px;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}
.mi-vs-rating {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 4px;
}
.mi-vs-score {
    font-size: 14px;
    color: #64748b;
    margin-bottom: 10px;
}
.mi-vs-bar {
    height: 6px;
    background: #e2e8f0;
    border-radius: 3px;
    overflow: hidden;
}
.mi-vs-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}
.mi-vs-divider {
    display: flex;
    align-items: center;
    justify-content: center;
}
.mi-vs-divider span {
    font-size: 14px;
    font-weight: 700;
    color: #94a3b8;
    background: #f1f5f9;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mi-vs-breakdown {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 10px;
    justify-content: center;
}
.mi-ws-pill {
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
}
.mi-ws-strong-buy { background: #dcfce7; color: #16a34a; }
.mi-ws-buy { background: #d1fae5; color: #059669; }
.mi-ws-hold { background: #fef3c7; color: #d97706; }
.mi-ws-sell { background: #fee2e2; color: #dc2626; }
.mi-ws-strong-sell { background: #fecaca; color: #b91c1c; }
.mi-vs-explanation {
    margin-top: 16px;
    padding: 12px 16px;
    background: #f8fafc;
    border-radius: 8px;
    font-size: 13px;
    color: #475569;
    line-height: 1.5;
    border-left: 3px solid #cbd5e1;
}

/* ===========================
   Price Target Range Bar
   =========================== */
.mi-price-target-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px;
}
.mi-pt-range-container {
    padding: 40px 30px 60px;
    position: relative;
}
.mi-pt-range-bar {
    height: 8px;
    background: #e2e8f0;
    border-radius: 4px;
    position: relative;
}
.mi-pt-range-fill {
    position: absolute;
    height: 100%;
    background: linear-gradient(90deg, #fbbf24, #10b981);
    border-radius: 4px;
    top: 0;
}
.mi-pt-marker {
    position: absolute;
    top: -30px;
    transform: translateX(-50%);
    text-align: center;
}
.mi-pt-marker-line {
    width: 2px;
    height: 20px;
    background: #94a3b8;
    margin: 0 auto 4px;
}
.mi-pt-marker-label {
    font-size: 11px;
    color: #64748b;
    white-space: nowrap;
    line-height: 1.3;
}
.mi-pt-marker.mi-pt-low,
.mi-pt-marker.mi-pt-high {
    top: auto;
    bottom: -55px;
}
.mi-pt-marker.mi-pt-low .mi-pt-marker-line,
.mi-pt-marker.mi-pt-high .mi-pt-marker-line {
    margin: 4px auto 0;
    order: -1;
}
.mi-pt-marker-dot {
    width: 12px;
    height: 12px;
    background: #0f172a;
    border: 2px solid #fff;
    border-radius: 50%;
    margin: 0 auto;
    box-shadow: 0 0 0 2px #0f172a;
    position: relative;
    top: -2px;
}
.mi-pt-marker.mi-pt-current {
    top: -35px;
}
.mi-pt-summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #f1f5f9;
}
.mi-pt-stat {
    text-align: center;
}
.mi-pt-stat-label {
    display: block;
    font-size: 12px;
    color: #64748b;
    margin-bottom: 4px;
}
.mi-pt-stat-value {
    display: block;
    font-size: 22px;
    font-weight: 700;
    color: #0f172a;
}
.mi-pt-stat-change {
    display: block;
    font-size: 14px;
    font-weight: 600;
    margin-top: 2px;
}

/* ===========================
   Earnings Estimates Table
   =========================== */
.mi-estimates-table-wrap {
    overflow-x: auto;
}
.mi-estimates-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.mi-estimates-table th {
    text-align: left;
    padding: 8px 12px;
    background: #f8fafc;
    color: #64748b;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid #e2e8f0;
}
.mi-estimates-table td {
    padding: 10px 12px;
    border-bottom: 1px solid #f1f5f9;
    color: #0f172a;
}
.mi-estimates-table tr:last-child td {
    border-bottom: none;
}

/* ===========================
   Growth Estimate Bars
   =========================== */
.mi-growth-bars {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.mi-growth-bar-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.mi-growth-bar-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: #475569;
}
.mi-growth-bar-track {
    height: 6px;
    background: #e2e8f0;
    border-radius: 3px;
    overflow: hidden;
}
.mi-growth-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.5s ease;
}

/* ===========================
   Analyst Ratings Feed
   =========================== */
.mi-analyst-feed {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
}
.mi-analyst-feed-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-height: 400px;
    overflow-y: auto;
}
.mi-analyst-feed-item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 10px 0;
    border-bottom: 1px solid #f1f5f9;
}
.mi-analyst-feed-item:last-child {
    border-bottom: none;
}
.mi-af-icon {
    font-size: 16px;
    font-weight: 700;
    width: 24px;
    text-align: center;
    flex-shrink: 0;
    margin-top: 2px;
}
.mi-af-content {
    flex: 1;
    min-width: 0;
}
.mi-af-firm {
    font-size: 13px;
    font-weight: 600;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mi-af-detail {
    display: flex;
    gap: 8px;
    font-size: 12px;
    margin-top: 2px;
}
.mi-af-date {
    font-size: 11px;
    color: #94a3b8;
    margin-top: 2px;
}

/* ===========================
   Responsive: AI vs Wall Street
   =========================== */
@media (max-width: 768px) {
    .mi-vs-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .mi-vs-divider {
        margin: 5px 0;
    }
    .mi-pt-summary {
        grid-template-columns: 1fr;
    }
    .mi-pt-range-container {
        padding: 30px 15px 50px;
    }
    .mi-pt-marker-label {
        font-size: 10px;
    }
}