/* ================================================================== */
/* 1. ROOT VARIABLES                                                  */
/* Centralizes theme colors and values for easy updates.              */
/* ================================================================== */
:root {
    --text-primary: #FFFFFF;
    --text-secondary: #c1c1c1;
    --text-muted: #525f7f;
    --text-dark: #344675;

    /* Theme colors from black-dashboard.css for reference */
    --theme-primary: #e14eca;
    --theme-success: #00f2c3;
    --theme-info: #1d8cf8;
    --theme-warning: #ff8d72;
    --theme-danger: #fd5d93;

    /* Custom App-Specific Colors */
    --highlight-blue-color: #007bff;
    --bullish-color: #4ade80;
    /* Brighter green for bullish */
    --bearish-color: #f87171;
    /* Softer red for bearish */
    --bubble-breakout-bg: #00bf72;
    /* A specific green for breakouts */
    --bubble-breakdown-bg: var(--theme-danger);
    /* Use theme's danger color */

    /* Trading Page Specific Colors */
    --nav-link-purple: #bb86fc;
    --help-trigger-blue: #3498db;
    --bubble-trade-success: #27ae60;
    --bubble-trade-danger: #c0392b;

    /* Backgrounds */
    --bg-dark-primary: #1e1e2d;
    --bg-dark-secondary: #2c3e50;
    --bg-dark-tertiary: #34495e;
    --bg-trading-dark: #121212;
    --bg-trading-nav: #1f1f1f;
    --table-header-dark: #333;
    --table-border-dark: #444;

    --font-body: "Poppins", sans-serif;
    --font-special: 'Pacifico', cursive;
}


/* ================================================================== */
/* 2. GLOBAL & LAYOUT STYLES                                          */
/* ================================================================== */

/* --- Navbar --- */
.navbar-dark .navbar-brand,
.navbar-dark .navbar-nav .nav-link.active {
    color: var(--text-primary) !important;
}

.navbar-dark .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* --- Sidebar --- */
.sidebar .nav p,
.sidebar .nav button p {
    color: var(--text-primary) !important;
}

.sidebar .nav li.active>a p {
    color: var(--theme-primary) !important;
}

/* --- Footer --- */
/* This may be redundant, test removing it. */
.footer {
    left: 0;
    width: 100%;
}


/* ================================================================== */
/* 3. CUSTOM COMPONENT STYLES                                         */
/* ================================================================== */

/* --- Homepage Hero Title --- */
.hero-title {
    font-family: var(--font-body);
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.highlight-blue {
    color: var(--highlight-blue-color) !important;
}

/* --- Progress Bars (Bullish/Bearish) --- */
.progress-label {
    font-weight: 500;
    margin-bottom: 0.5rem;
    text-align: center;
    text-transform: uppercase;
    font-size: 0.8em;
}

.label-bullish {
    color: var(--bullish-color) !important;
}

.label-bearish {
    color: var(--bearish-color) !important;
}

.progress {
    height: 35px;
    font-size: 1.25rem;
    /* Slightly larger font for better visibility */
    background-color: #27293d;
    /* Using a specific dark color */
    border-radius: .4285rem;
    overflow: hidden;
}

.progress-bar {
    font-weight: bold;
    color: white;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: width 0.6s ease;
}

/* --- FIX: Using consistent variables --- */
.progress-bar-bullish {
    background-color: var(--bullish-color);
}

.progress-bar-bearish {
    background-color: var(--bearish-color);
}

/* --- Form Elements --- */
select.form-control {
    color: #ecf0f1;
    background-color: var(--bg-dark-secondary);
    border: 1px solid var(--bg-dark-tertiary);
    border-radius: 5px;
    padding: 10px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    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%23ECF0F1%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');
    background-repeat: no-repeat;
    background-position: right 10px top 50%;
    background-size: .65em auto;
}

select.form-control option {
    /* Use !important to override system-level default colors */
    background-color: #2c3e50 !important;
    /* Use a solid dark color for the background */
    color: #ecf0f1 !important;
    /* Use light text for the options */
}

select.form-control option:checked,
select.form-control option:hover {
    background-color: #3498db !important;
    /* A highlight color */
    color: #ffffff !important;
    /* White text on highlight */
}

/* --- Portfolio Card Text Fix --- */
.card .list-group-item {
    color: var(--text-muted) !important;
    background-color: var(--text-primary) !important;
}

.card .list-group-item strong {
    color: var(--text-dark) !important;
}

.card-pie-chart .card-body {
    min-height: 300px;
    /* Adjust this value as needed */
    display: flex;
    align-items: center;
    justify-content: center;
}

.chart-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding-top: 50%; /* Adjusted Aspect Ratio */
}

.chart-container-short {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding-top: 50%; /* Taller Aspect Ratio */
}

.chart-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.placeholder-message {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    min-height: 200px;
    color: #6c757d;
}

/* Dropdown Menu Dark Theme Override */
.dropdown-menu {
    background-color: #2c3e50;
    /* A dark background color */
    border: 1px solid #34495e;
    /* Optional: a subtle border */
    padding: 5px 0;
    /* Optional: adds some spacing */
    border-radius: 4px;
    /* Optional: rounded corners */
}

.dropdown-item {
    color: #ecf0f1;
    /* A light text color for contrast */
    padding: 8px 15px;
    /* Optional: makes items easier to click */
    display: block;
    /* Ensures the item takes up the full width */
    text-decoration: none;
    /* Removes underline if they are links */
}

.dropdown-item:hover {
    background-color: #3498db;
    /* A highlight color on hover */
    color: #ffffff;
    /* White text on highlight */
}

/* Profile Page Watchlist Container */
.watchlist-container {
    max-height: 300px;
    /* Example max height */
    overflow-y: auto;
    /* Add scrollbar if needed */
    border: 1px solid #ced4da;
    /* Optional border */
    padding: 10px;
    border-radius: 0.25rem;
}

.form-check {
    margin-bottom: 0.5rem;
    /* Add spacing between checkboxes */
}

/* ================================================================== */
/* 4. PAGE-SPECIFIC STYLES (From public_dashboard.css)                */
/* ================================================================== */

.card-sidebar .card-header h5 {
    margin-bottom: 0;
    font-size: 1em;
}

.card-sidebar .accordion-item {
    background-color: transparent;
    border: none;
}

/* Combined rule for the accordion button, including reduced padding */
.card-sidebar .accordion-button {
    background-color: rgba(255, 255, 255, 0.05);
    color: #ffffff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 0.75rem 1.25rem;
    /* Reduced padding */
}

.card-sidebar .accordion-button:not(.collapsed) {
    background-color: var(--theme-primary);
    /* Black Dashboard primary color */
}

.card-sidebar .accordion-body {
    background-color: transparent;
    color: #ced4da;
}

/* Combined rule for the bubble container, including reduced padding */
.bubble-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0.75rem;
    /* Reduced padding */
}

.symbol-bubble {
    display: inline-block;
    padding: 0.3rem 0.8rem;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.8rem;
    color: #ffffff;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
}

.symbol-bubble:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    color: #ffffff;
}

.bubble-success {
    background-color: var(--bubble-breakout-bg);
    /* Green for breakouts */
}

.bubble-danger {
    background-color: var(--bubble-breakdown-bg);
    /* Red/pink for breakdowns */
}

/* Table Styles for Public Dashboard */
.table-responsive .table th,
.table-responsive .table td {
    padding: 0.5rem;
    /* Reduce padding from the default */
    font-size: 0.8rem;
    /* Reduce the font size */
}

/* Overrides the default "faded" text color in the dark table */
.table-dark td {
    color: #ffffff;
}


/* ================================================================== */
/* 5. PAGE-SPECIFIC STYLES (Trading Page)                             */
/* ================================================================== */

/* --- General Layout & Typography (Trading Page) --- */
/* These styles are intended for a page *not* using base.html */

.trading-page-body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: var(--bg-trading-dark);
    color: #e0e0e0;
    margin: 0;
    font-size: 16px;
}

.trading-page-body .content-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 1rem 2rem;
}

.trading-page-body h1,
.trading-page-body h2,
.trading-page-body h3 {
    color: #ffffff;
}

.trading-page-body .error {
    color: #cf6679;
    font-weight: bold;
}


/* --- Navigation Bar (Trading Page) --- */
.trading-page-body nav {
    background-color: var(--bg-trading-nav);
    padding: 1em 2rem;
    border-bottom: 1px solid var(--table-header-dark);
}

.trading-page-body nav a {
    color: var(--nav-link-purple);
    text-decoration: none;
    margin-right: 1.5em;
    font-weight: bold;
    font-size: 1.1em;
}


/* --- Table Styles (Trading Page) --- */
.trading-page-body .portfolio-table {
    overflow-x: auto;
    /* Ensures table is scrollable on small screens */
}

.trading-page-body table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1em;
}

.trading-page-body th,
.trading-page-body td {
    border: 1px solid var(--table-border-dark);
    padding: 10px 12px;
}

.trading-page-body th {
    background-color: var(--table-header-dark);
}


/* --- Help Section & Watchlists (Trading Page) --- */
.trading-page-body .help-section {
    background-color: var(--bg-dark-secondary);
    margin-bottom: 2rem;
    padding: 1.5rem 0;
}

.trading-page-body .help-section-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
}

.trading-page-body .help-section h2 {
    text-align: center;
    color: #ecf0f1;
    margin-top: 0;
    margin-bottom: 1.5rem;
}

.trading-page-body .help-bar-container {
    display: flex;
    flex-direction: column;
    /* This stacks the rows vertically */
    gap: 20px;
}

.trading-page-body .help-topic-group {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
    /* Centers the help bubbles in the top row */
    padding-bottom: 20px;
    /* Adds space below the help bubbles */
    border-bottom: 1px solid #4a627a;
    /* Adds a separator line */
}


/* --- New Wrapper for Watchlist Boxes (Trading Page) --- */
.trading-page-body .watchlists-wrapper {
    display: flex;
    gap: 20px;
    width: 100%;
}

/* --- Help Topic Hover Bubbles (Trading Page) --- */
.trading-page-body .help-topic {
    position: relative;
    display: inline-block;
}

.trading-page-body .help-trigger {
    background-color: var(--help-trigger-blue);
    color: white;
    padding: 10px 20px;
    border-radius: 20px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.trading-page-body .help-bubble {
    visibility: hidden;
    opacity: 0;
    width: 300px;
    background-color: var(--bg-dark-tertiary);
    color: #ecf0f1;
    text-align: left;
    border-radius: 6px;
    padding: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    position: absolute;
    z-index: 10;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.trading-page-body .help-topic:hover .help-bubble {
    visibility: visible;
    opacity: 1;
}

.trading-page-body .help-bubble p {
    margin: 0;
    line-height: 1.6;
}


/* --- Watchlist Boxes & Bubbles (Trading Page) --- */
.trading-page-body .watchlist-box {
    background-color: var(--bg-dark-tertiary);
    border-radius: 8px;
    padding: 15px;
    flex: 1;
    /* Allows boxes to grow and fill available space */
    min-width: 280px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.trading-page-body .watchlist-box h3 {
    margin: 0;
    color: #ecf0f1;
    text-align: center;
    font-size: 1.1em;
    border-bottom: 1px solid #4a627a;
    padding-bottom: 10px;
}

.trading-page-body .bubbles-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.trading-page-body .stock-bubble {
    color: white;
    padding: 5px 12px;
    border-radius: 15px;
    font-size: 0.9em;
    font-weight: bold;
}

.trading-page-body .stock-bubble small {
    opacity: 0.8;
    font-weight: normal;
}

.trading-page-body .stock-bubble.breakout {
    background-color: var(--bubble-trade-success);
    /* Green */
}

.trading-page-body .stock-bubble.breakdown {
    background-color: var(--bubble-trade-danger);
    /* Red */
}


/* ================================================================== */
/* 6. THEME SWITCHER TOGGLE                                           */
/* ================================================================== */

/* The switch - the box around the slider */
.switch {
    --width-of-switch: 3.5em;
    --height-of-switch: 2em;
    /* size of sliding icon -- sun and moon */
    --size-of-icon: 1.4em;
    /* it is like a inline-padding of switch */
    --slider-offset: 0.3em;
    position: relative;
    width: var(--width-of-switch);
    height: var(--height-of-switch);
    margin-bottom: 0;
}

/* Hide default HTML checkbox */
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* The slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #eaeaea;
    transition: .4s;
    border-radius: 30px;
}

.slider:before {
    position: absolute;
    content: "";
    height: var(--size-of-icon, 1.4em);
    width: var(--size-of-icon, 1.4em);
    border-radius: 20px;
    left: var(--slider-offset, 0.3em);
    top: 50%;
    transform: translateY(-50%);
    background: linear-gradient(40deg, #ff0080, #ff8c00 70%);
    ;
    transition: .4s;
}

input:checked+.slider {
    background-color: #303136;
}

input:checked+.slider:before {
    left: calc(100% - (var(--size-of-icon, 1.4em) + var(--slider-offset, 0.3em)));
    background: #303136;
    /* change the value of second inset in box-shadow to change the angle and direction of the moon  */
    box-shadow: inset -3px -2px 5px -2px #8983f7, inset -10px -4px 0 0 #a3dafb;
}