/* standard styles */
/* Fixed size for radio buttons and checkboxes */
input[type="radio"],
input[type="checkbox"] {
    width: 1rem !important;
    height: 1rem !important;
    flex-shrink: 0;
}

.h1 {
    font-family: verdana;
    color: rgb(33, 37, 41);
    font-size: 48px;
}

h4 {
    font-family: (whatever font you want);
    color: (whatever color you want);
    font-size: (Whatever size you want);
}

.sca_nav_link {
    font-family: verdana;
    font-size: 20px;
    color: rgb(108, 117, 125);
}

/* Collapsible Container Component - Structural only, colors via Tailwind */
.collapsible-content {
    max-height: 2000px; /* Large enough for content */
    opacity: 1;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
}

.collapsible-content:not(.js-restored) {
    opacity: 0 !important;
    transition: none !important;
}

.collapsible-content.collapsed {
    max-height: 0;
    opacity: 0;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.collapsible-chevron {
    transition: transform 0.3s ease;
}

.collapsible-chevron.collapsed {
    transform: rotate(-90deg);
}

.collapsible-header {
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.filter-form-layout {
    display: grid;
    gap: 1.5rem;
    width: 100%;
}

.filter-form-fields {
    display: grid;
    grid-template-columns: 1fr;
    column-gap: 1.5rem;
    row-gap: 0.75rem;
}

.filter-form-fields > div {
    min-width: 0;
}

@media (min-width: 640px) {
    .filter-form-fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.filter-form-presets {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.filter-form-presets .chart_button {
    width: 100%;
}

.filter-form-fields input::placeholder,
.filter-form-fields textarea::placeholder,
.filter-form-fields select::placeholder {
    color: #6b7280;
    font-size: 0.875rem;
    opacity: 1;
}

.filter-form-fields input,
.filter-form-fields select {
    min-height: 1.75rem;
    height: 1.75rem;
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
}

.filter-form-fields textarea {
    min-height: 2.25rem;
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
}

.filter-form-fields > div {
    margin-bottom: 0.5rem;
}

.filter-form-fields > div:last-child {
    margin-bottom: 0;
}

.filter-form-fields label {
    margin-bottom: 0.25rem;
}

.filter-presets-card {
    font-size: 0.875rem;
}

@media (min-width: 768px) {
    /* Give the left filter column significantly more width */
    .filter-form-layout {
        grid-template-columns: minmax(0, 3fr) minmax(20rem, 1fr);
        column-gap: 1.5rem;
        align-items: start;
    }

    .filter-form-presets {
        width: 100%;
    }
}

@media (min-width: 1024px) {
    .filter-form-fields {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.filter-field-span-2 {
    grid-column: span 2;
}

.filter-field-span-3 {
    grid-column: 1 / -1;
}

.sca_dashboard_card {
    width: 245px;
}

/* Charting filtered presets layout */
.charting-filter-panel {
    max-width: 60rem;
}

.share-selection-header--sticky {
    position: sticky;
    top: 0;
    z-index: 30;
    background: #ffffff;
    padding-top: 0.5rem;
}

.charting-filter-panel--sticky {
    position: sticky;
    top: 4.5rem;
    z-index: 25;
    background: #ffffff;
    padding-top: 0.25rem;
    padding-bottom: 0.5rem;
}

.charting-results-scroll {
    max-height: calc(100vh - 11rem);
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 0.5rem;
    overscroll-behavior: contain;
}

.charting-results-scroll table {
    width: 100%;
    border-collapse: separate;
}

.charting-filter-card {
    width: 100%;
    max-width: 60rem;
}

.charting-source-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.charting-source-column {
    min-width: 0;
}

.charting-source-column--filters,
.charting-source-column--strategies {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.charting-filter-disclosure {
    width: 100%;
    max-width: 60rem;
}

.charting-filter-summary {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
    max-width: 60rem;
    padding: 1rem 1.25rem;
    border: 1px solid #bfdbfe;
    border-radius: 0.75rem;
    background: #eff6ff;
    cursor: pointer;
}

.charting-filter-summary::-webkit-details-marker {
    display: none;
}

.charting-filter-summary-label {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #1d4ed8;
}

.charting-filter-summary-value {
    margin: 0.15rem 0 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: #0f172a;
}

.charting-filter-summary-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    padding: 0.45rem 0.8rem;
    border-radius: 9999px;
    background: #dbeafe;
    color: #1d4ed8;
    font-size: 0.8rem;
    font-weight: 600;
}

.charting-filter-row {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.charting-filter-actions {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.charting-filter-button {
    display: block;
    width: 100%;
}

@media (min-width: 640px) {
    .charting-source-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: start;
    }

    .charting-filter-summary {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .charting-filter-summary-action {
        align-self: auto;
    }

    .charting-filter-row {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .charting-filter-row.charting-filter-row--preset {
        align-items: flex-start;
    }

    .charting-filter-actions {
        margin-left: auto;
        width: auto;
        text-align: right;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .charting-filter-button {
        width: auto;
    }
}

@media (max-width: 767px) {
    .share-selection-header--sticky,
    .charting-filter-panel--sticky {
        position: static;
        top: auto;
    }

    .charting-results-scroll {
        max-height: none;
        overflow: visible;
        padding-right: 0;
    }
}

/* css for details panel */
.chart_button {
    /* Background, shadow, and border colors now controlled by Tailwind utilities */
    border-radius: 6px;
    border: 1px solid transparent;
    display: inline-block;
    cursor: pointer;
    color: #ffffff;
    font-family: Arial;
    font-size: 15px;
    font-weight: bold;
    padding: 6px 12px;
    text-decoration: none;
}

.chart_button:active {
    /* position:relative; */
    top: 1px;
}
@media all and (max-width:30em) {
    chart_button {
        display: block;
        margin: 0.4em auto;
    }
}

/* css for dashboard buttons */
.button_share {
    line-height: 1rem;
    border: none;
    color: white;
    padding: 10px 5px 10px 5px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 16px;
    width: 15rem;
    height: 9.5rem;
}

/* css for heatmap */


/* css for charts
body {
    font-family: verdana;
    font-size: 12px;
}
    */

details {
    background-color: #F5F5DC;
}

text {
    fill: #292b2c;
}

text.symbol {
    /*fill: #BBBBBB;*/
    font: 14px verdana;
    fill: (133,131,132);
}

text.heatHeading {
    font: 14px verdana;
    fill: white;
    font-weight: bold;
}

text.heatStandard {
    font: 12px verdana;
    font-weight: normal;
    fill: white;
}

text.heatSmall {
    font: 9px verdana;
    font-weight: normal;
    fill: white;
}

text.standard {
    font: 12px verdana;
    font-weight: normal;
    fill: rgb(108, 117, 125);
    padding-left: 12px;
    pointer-events: all;
    cursor: pointer;
}

text.standardBold {
    font: 12px verdana;
    font-weight: 600;
    fill: #2B2D2F;
}

text.standardUnderline {
    font: 12px verdana;
    font-weight: bold;
    fill: #2B2D2F;
    text-decoration: underline;
}

/* Strategy alert color classes */
text.price-alert-buy {
    font: 12px verdana;
    font-weight: bold;
    fill: #00bf00; /* Green for buy alert */
    padding-left: 12px;
    pointer-events: all;
    cursor: pointer;
}

text.price-alert-sell {
    font: 12px verdana;
    font-weight: bold;
    fill: #ff0443; /* Red for sell alert */
    padding-left: 12px;
    pointer-events: all;
    cursor: pointer;
}

text.price-alert-neutral {
    font: 12px verdana;
    font-weight: normal;
    fill: rgb(108, 117, 125); /* Standard gray */
    padding-left: 12px;
    pointer-events: all;
    cursor: pointer;
}

.sca-chart {
    background-color: #FFFAFA;
    padding-top: 12px;
    margin-bottom: 12px;
    min-height: 120px;
}

path:not(.performance-shading) {
    fill: none;
    stroke-width: 1;
}

/* Override for chart lines (portfolio and benchmark) */
path.chart-line {
    stroke-width: inherit !important;
}

/* Override for performance shading areas - let SVG attributes work */
path.performance-shading {
    stroke: none !important;
}

path.candle {
    stroke: #000000;
    stroke-width: 1;
}

path.candle.body {
    stroke-width: 0;
}

/* Add max-width constraint for candlesticks */
.candlestick path {
    max-width: 8px; /* Maximum width for candlesticks */
}

path.candle.up {
    fill: #00bf00;
    stroke: #00bf00;
}

path.candle.down {
    fill: #ff0443;
    stroke: #ff0443
}

.close.annotation.up path {
    fill: #00AA00;
}

path.volume {
    fill: #DDDDDD;
}

path.volume.up {
    fill:  #a3e190;
}

path.volume.down {
    fill: #ff9f9c;
}

.indicator-plot path.line {
    fill: none;
    stroke-width: 1;
}

.ma-0 path.line {
    stroke: #ff0000;
}

.ma-1 path.line {
    stroke: #000000;
}

.ma-2 path.line {
    stroke: #000000;
}

button {
    /* position: absolute; */
    right: 110px;
    top: 25px;
}

path.signal {
    stroke: #FF9999;
}

path.macd {
    stroke: #0000AA;
}

path.zero {
    stroke: #BBBBBB;
    stroke-dasharray: 0;
    stroke-opacity: 0.5;
}

path.difference {
    fill: #e2d7fc;
    opacity: 0.7;
}

path.rsi {
    stroke: #000000;
}

path.overbought, path.oversold {
    stroke: #FF9999;
    stroke-dasharray: 5, 5;
}

path.middle, path.zero {
    stroke: #BBBBBB;
    stroke-dasharray: 5, 5;
}

.analysis path, .analysis circle {
    stroke: blue;
    stroke-width: 0.8;
}

.trendline circle {
    stroke-width: 0;
    display: none;
}

.mouseover .trendline path {
    stroke-width: 1.2;
}

.mouseover .trendline circle {
    stroke-width: 1;
    display: inline;
}

.dragging .trendline path, .dragging .trendline circle {
    stroke: darkblue;
}

.interaction path, .interaction circle {
    pointer-events: all;
}

.interaction .body {
    cursor: move;
}

.trendlines .interaction .start, .trendlines .interaction .end {
    cursor: nwse-resize;
}

.supstance path {
    stroke-dasharray: 2, 2;
}

.supstances .interaction path {
    pointer-events: all;
    cursor: ns-resize;
}

.mouseover .supstance path {
    stroke-width: 1.5;
}

.dragging .supstance path {
    stroke: darkblue;
}

.crosshair {
    cursor: crosshair;
}

.crosshair path.wire {
    stroke: #DDDDDD;
    stroke-dasharray: 1, 1;
}

.crosshair .axisannotation path {
    fill: #e2d7fc;
}

.tradearrow path.tradearrow {
    stroke: none;
}

.tradearrow path.buy {
    fill: #0000FF;
}

.tradearrow path.sell {
    fill: #9900FF;
}

.tradearrow path.highlight {
    fill: none;
    stroke-width: 2;
}

.tradearrow path.highlight.buy {
    stroke: #0000FF;
}

.tradearrow path.highlight.sell {
    stroke: #9900FF;
}

.select-css {
    display: block;
    font-family: Arial;
    font-size: 15px;
    color: #444;
    line-height: 1.6;
    padding: 6px 12px;
    width: 75%;
    max-width: 100%; /* useful when width is set to anything other than 100% */
    box-sizing: border-box;
    margin: 0;
    margin-top: 6px;
    margin-bottom: 6px;
    border: 1px solid #89c403;
    box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
    border-radius: .5em;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-color: #fff;
    /* note: bg image below uses 2 urls. The first is an svg data uri for the arrow icon, and the second is the gradient.
        for the icon, if you want to change the color, be sure to use `%23` instead of `#`, since it's a url. You can also swap in a different svg icon or an external image reference

    */
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
      linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
    background-repeat: no-repeat, repeat;
    /* arrow icon position (1em from the right, 50% vertical) , then gradient position*/
    background-position: right .7em top 50%, 0 0;
    /* icon size, then gradient */
    background-size: .65em auto, 100%;
}
/* Hide arrow icon in IE browsers */
.select-css::-ms-expand {
    display: none;
}
/* Hover style */
.select-css:hover {
    border-color: #888;
}
/* Focus style */
.select-css:focus {
    border-color: #aaa;
    /* It'd be nice to use -webkit-focus-ring-color here but it doesn't work on box-shadow */
    box-shadow: 0 0 1px 1px rgba(59, 153, 252, .7);
    box-shadow: 0 0 0 1px -moz-mac-focusring;
    color: #89c403;
    outline: none;
}

/* Set options to normal weight */
.select-css option {
    font-weight: normal;
}

/* Support for rtl text, explicit support for Arabic and Hebrew */
*[dir="rtl"] .select-css, :root:lang(ar) .select-css, :root:lang(iw) .select-css {
    background-position: left .7em top 50%, 0 0;
    padding: .6em .8em .5em 1.4em;
}

/* Disabled styles */
.select-css:disabled, .select-css[aria-disabled=true] {
    color: graytext;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22graytext%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
      linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
}

.select-css:disabled:hover, .select-css[aria-disabled=true] {
    border-color: #aaa;
}

.modal {
    display: none;
    position: fixed;
    z-index: 100;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.4);
}

/* Fallback modal content styling */
.modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 500px;
    text-align: center;
    position: relative;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}


/* Modern spinner: animated dual ring */
.spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  margin: auto;
}

.spinner::after {
  content: "";
  display: block;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 6px solid #eee;
  border-top: 6px solid #3eb0c1;
  animation: spin 0.8s cubic-bezier(0.4, 0.2, 0.2, 1) infinite;
}

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

.close {
    position: absolute;
    top: 10px;
    right: 20px;
    color: #aaa;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.ai-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.4);
}

.ai-button {
    background-color: #6610f2;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    margin: 10px 5px 10px 0;
}

.ai-button:hover {
    background-color: #520dc2;
}

.strategy-button {
    background-color: #28a745;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    margin: 10px 0;
}

.strategy-button:hover {
    background-color: #218838;
}

.strategy-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.4);
}

.strategy-content .form-group {
    margin-bottom: 15px;
}

/* Price fields container - put buy and sell on same line */
.strategy-content .price-fields {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
}

.strategy-content .price-field {
    flex: 1;
}

.strategy-content label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.strategy-content .form-control {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
}

/* Strategy modal - standard width */
.strategy-modal .modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 500px !important;
    min-width: 400px !important;
    max-width: 600px !important;
    position: relative;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* AI modal - twice as wide */
.ai-modal .modal-content {
    background-color: #fefefe;
    display: flex;
    flex-direction: column;
    margin: 5vh auto;
    padding: 18px;
    border: 1px solid #888;
    width: 1000px !important;
    min-width: 800px !important;
    max-width: 90vw !important;
    max-height: 90vh;
    position: relative;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}



/* Add a header section for drag handle */
.modal-header {
    display: block;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
    margin-bottom: 10px;
    position: relative;
    min-height: 40px;
}

.modal-header h4 {
    margin: 0;
    font-size: 1.2rem;
    color: #333;
    padding-right: 50px; /* Make space for close button */
}

.close {
    color: #aaa;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    z-index: 9999;
    position: absolute;
    right: 5px;
    top: 5px;
    padding: 5px 10px;
    min-width: 30px;
    min-height: 30px;
    display: block;
    text-align: center;
    line-height: 1;
    pointer-events: all;
}

.close:hover {
    color: #000;
}

/* Strategy form styling */
.strategy-content {
    padding: 20px;
    position: relative;
    z-index: 1;
}

/* Button wrapper centering approach */
.button-center-wrapper {
    text-align: center;
    margin-top: 15px;
}

.button-center-wrapper .btn {
    display: inline-block;
    padding: 10px 20px;
    font-size: 14px;
    cursor: pointer;
    background-color: #007bff;
    color: white;
    border: 1px solid #007bff;
    border-radius: 4px;
    text-decoration: none;
}

/* Center the save button and force button styling to override Tailwind */
.strategy-modal .strategy-content form button[type="button"].btn.btn-primary {
    /* Centering properties */
    margin: 15px auto 0 auto !important;
    display: block !important;
    width: fit-content !important;

    /* Button styling - force to override Tailwind reset */
    padding: 10px 20px !important;
    font-size: 14px !important;
    cursor: pointer !important;
    background-color: #007bff !important;
    color: white !important;
    border: 1px solid #007bff !important;
    border-radius: 4px !important;
    text-align: center !important;

    /* Additional properties for proper button appearance */
    box-sizing: border-box !important;
    text-decoration: none !important;
    vertical-align: middle !important;
}

.strategy-content .btn:hover {
    background-color: #0056b3;
    border-color: #0056b3;
}

.strategy-content .btn:active {
    background-color: #004085;
    border-color: #004085;
    transform: translateY(1px);
}

.spinner {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80px;
    padding: 20px;
}

.spinner::after {
    content: "";
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3b82f6;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Remove old pulse animation styles */
.pulse {
    display: none;
}

.pulse span {
    display: none;
}

.summary-content {
    flex: 1 1 auto;
    min-height: 0;
    padding: 8px 20px 20px;
    white-space: pre-wrap !important;
    word-wrap: break-word;
    overflow-wrap: break-word;
    text-align: left;
    line-height: 1.6;
    font-size: 14px;
    max-height: none;
    overflow-y: auto;
}

.ai-analysis {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    margin: 0;
    padding: 4px;
    white-space: pre-line !important;
    word-wrap: break-word;
    overflow-wrap: break-word;
    width: 100%;
}

.ai-analysis--rich {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    color: #172033;
}

.ai-hero-card {
    position: relative;
    overflow: hidden;
    padding: 0.85rem 1rem;
    border: 1px solid rgba(23, 32, 51, 0.08);
    border-radius: 1.25rem;
    background:
        radial-gradient(circle at top right, rgba(20, 184, 166, 0.18), transparent 30%),
        linear-gradient(135deg, #fffdf8 0%, #eef7ff 100%);
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08);
}

.ai-hero-card__eyebrow {
    margin-bottom: 0.3rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #0f766e;
}

.ai-hero-card__body {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}

.ai-hero-card__text {
    margin: 0;
    font-size: 1.02rem;
    line-height: 1.65;
    color: #172033;
}

.ai-signal-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 5.5rem;
    padding: 0.45rem 0.85rem;
    border-radius: 9999px;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.ai-signal-pill--sell {
    background: #fee2e2;
    color: #b91c1c;
}

.ai-signal-pill--hold {
    background: #fef3c7;
    color: #b45309;
}

.ai-signal-pill--buy {
    background: #dcfce7;
    color: #166534;
}

.ai-metric-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
    gap: 0.45rem;
}

.ai-metric-card {
    padding: 0.6rem 0.72rem;
    border-radius: 1rem;
    border: 1px solid rgba(23, 32, 51, 0.08);
    background: #ffffff;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
}

.ai-metric-card--negative {
    background: linear-gradient(180deg, #fff7f7 0%, #ffffff 100%);
}

.ai-metric-card--positive {
    background: linear-gradient(180deg, #f2fffb 0%, #ffffff 100%);
}

.ai-metric-card__label {
    display: block;
    margin-bottom: 0.12rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
}

.ai-metric-card__value {
    display: block;
    font-size: 1rem;
    line-height: 1.3;
    color: #0f172a;
}

.ai-section-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
}

.ai-section-card {
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(23, 32, 51, 0.08);
    border-radius: 1.1rem;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
    overflow: hidden;
}

.ai-section-card__header {
    padding: 0.6rem 0.78rem 0.08rem;
}

.ai-section-card__header h3 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: #22436d;
}

.ai-section-card__content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0.2rem;
    padding: 0 0.78rem 0.68rem;
}

.ai-section-card__text {
    margin: 0;
    color: #334155;
}

.ai-section-card__list {
    margin: 0;
    padding-left: 1.15rem;
    color: #1f2937;
}

.ai-section-card__list li + li {
    margin-top: 0.32rem;
}

.ai-debug-panel {
    margin-top: 0.35rem;
    border: 1px dashed #cbd5e1;
    border-radius: 0.95rem;
    background: #f8fafc;
}

.ai-debug-panel summary {
    cursor: pointer;
    padding: 0.85rem 1rem;
    font-size: 0.84rem;
    font-weight: 700;
    color: #475569;
    list-style: none;
}

.ai-debug-panel summary::-webkit-details-marker {
    display: none;
}

.ai-debug-panel pre {
    margin: 0;
    padding: 0 1rem 1rem;
    white-space: pre-wrap;
    word-break: break-word;
    color: #334155;
    font-size: 0.8rem;
    line-height: 1.55;
}

.ai-analysis__fallback {
    padding: 1rem 1.15rem;
    border-radius: 1rem;
    background: #ffffff;
    border: 1px solid rgba(23, 32, 51, 0.08);
}

.ai-analysis strong {
    color: #2c5282;
    font-weight: 600;
}

.ai-analysis br {
    margin-bottom: 10px;
    display: block;
    content: "";
}

.sca-chart {
    position: relative;
}

/* Ensure charts scale responsively */
.chart-responsive-container {
    width: 100%;
    overflow-x: auto;
}

/* Mobile-specific chart optimizations */
@media (max-width: 767px) {
    .ai-modal .modal-content {
        width: min(92vw, 1000px) !important;
        min-width: 0 !important;
        margin: 3vh auto !important;
        max-height: 94vh;
        padding: 16px;
    }

    .summary-content {
        padding: 12px;
        max-height: 78vh;
    }

    .ai-section-grid {
        grid-template-columns: 1fr;
    }

    .ai-hero-card,
    .ai-section-card,
    .ai-metric-card {
        border-radius: 0.95rem;
    }

    .sca-chart svg {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Reduce font sizes on mobile for better readability */
    .sca-chart text {
        font-size: 10px !important;
    }

    /* Ensure axis labels don't overlap */
    .sca-chart .axis text {
        font-size: 9px !important;
    }

    /* Allow full chart height without clipping */
    .chart-responsive-container {
        -webkit-overflow-scrolling: touch;
        overflow-y: visible !important;
    }
}

#score-tooltip { position: absolute; /* ...other styles... */ }

/* Custom Dropdown Styles for Tailwind CSS Integration */
.dropdown-menu-custom {
    position: absolute !important;
    background: white !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    border-radius: 0.375rem !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
    z-index: 50 !important;
    min-width: 14rem !important;
}

.dropdown-item-custom {
    display: block !important;
    padding: 0.5rem 1rem !important;
    color: #374151 !important;
    text-decoration: none !important;
    font-size: 0.875rem !important;
    line-height: 1.25rem !important;
    transition: background-color 0.15s ease-in-out !important;
}

.dropdown-item-custom:hover {
    background-color: #f3f4f6 !important;
    color: #111827 !important;
    text-decoration: none !important;
}

/* Custom Dropdown Button Styles */
.dropdown-button-custom {
    display: inline-flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    padding: 0.25rem 0.75rem !important;
    background-color: white !important;
    border: 1px solid #d1d5db !important;
    border-radius: 0.375rem !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    color: #374151 !important;
    cursor: pointer !important;
    transition: all 0.15s ease-in-out !important;
    white-space: nowrap !important;
    min-height: 2rem !important;
}

.dropdown-button-custom:hover {
    background-color: #f9fafb !important;
    border-color: #9ca3af !important;
}

.dropdown-button-custom:focus {
    outline: none !important;
    box-shadow: 0 0 0 2px #3b82f6 !important;
    border-color: #3b82f6 !important;
}

/* Increase spacing between Share Selection and navigation buttons */
.share-selection-header {
    margin-top: 2rem !important;
    margin-bottom: 1rem !important;
}

.share-navigation-buttons {
    margin-top: 0.5rem !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important; /* 8px gap between buttons both horizontally and vertically */
}

/* Top level navigation - now uses Tailwind classes directly in template */