@media (max-width: 767px) {
    html, body {
        height: auto !important;
        overflow-y: auto !important; /* This is the missing link */        
    }
}
/* Ensure body doesn't trigger scrollbars */
body {
    height: 100vh;
    overflow: hidden; 
    margin: 0;
}

/*                    */
/*   Navigation Bar   */
/*                    */
.navbar-custom {
    display: flex;
    align-items: center; /* This is the key: Vertically centers everything */
    height: 45px;        /* Increased slightly for better breathing room */
    background: #0a0b10;
    border-bottom: 1px solid #1f2937;
    padding: 0 5px;
    overflow: hidden;
}

.ticker-wrapper {
    flex: 1;
    position: relative;
    height: 60px;       /* Match the navbar height */
    margin: 0 20px;
    overflow: hidden;
    display: flex;
    align-items: center; /* Vertically centers the rolling content */
}

.ticker-content {
    display: flex;
    gap: 40px;
    position: absolute;
    left: 50%;
    align-items: center; /* Vertically centers the links inside the div */
    white-space: nowrap;
    will-change: transform;
}

.logo-area, .auth-area {
    flex: 0 0 160px; /* Anchors the sides */
    display: flex;
    align-items: center;
    text-decoration: none !important;
    padding-left: 5px;
}

.auth-area { 
    justify-content: flex-end; 
    gap: 20px; 
    padding-right: 12px;
}

.ticker-item {
    color: #ffffff;
    text-decoration: none !important;
    font-size: 14px;
    transition: color 0.3s;
    cursor: pointer;
}

.ticker-item:hover { color: #38bdf8; }
/*                    */
/*   Navigation Bar   */
/*                    */

.app-container {
    display: flex;
    flex-direction: column;
    height: 100vh; /* Entire screen */
    width: 100vw;
    overflow: hidden;
}

/* The navbar needs a fixed height so we can subtract it */
.navbar {
    height: 40px; /* Match the compact height we set earlier */
    flex-shrink: 0; /* Never let the nav shrink */
    margin-bottom: 5px;
}

/* The chart-container fills exactly what's left */
.chart-container {
    flex: 1; /* Grow to fill available space */
    height: calc(100vh - 40px); /* Total height minus navbar */
    overflow: hidden;
    display: flex;
    flex-direction: row;
    width: 100%;
    margin-bottom: 5px;
}

.rparams-dashboard-wrapper {
    display: flex;
    flex-direction: row;
    height: 100%; /* Fill the chart-container */
    width: 100%;
    overflow: hidden;
}

/* --- Compact Navbar Overrides --- */

/* 2. Shrink the logo */
.logo {
    height: 24px !important;          /* Reduced from 30px or 40px */
    width: auto;
}

.nav__logo-name {
    margin-left: 5px;
    color: #ffffff;
    font-family: var(--font-mono);
    font-size: 13px;
    letter-spacing: 0.14em;
    font-weight: 500;
}

/* 3. Tighten the font size for the navbar links */
.navbar-brand, .nav-link {
    font-size: 0.9rem !important;     /* Smaller text */
    padding: 0 10px !important;       /* Tighter spacing between links */
}

/* 4. Fix the navbar-brand flex container */
.navbar-brand {
    padding: 0 !important;            /* Remove default padding from brand */
    margin: 0 !important;
}

/* 5. Adjust the toggler (the hamburger menu) for the smaller height */
.navbar-toggler {
    padding: 2px 5px !important;
    font-size: 0.8rem !important;
}

/* Main Content */
.container {
    background-color: #2D3748; /* Dark container */
    padding: 50px;
    border-radius: 20px;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
}

/* Buttons */
.btn {
    padding: 10px 20px;
    font-size: 1rem;
    border-radius: 5px;
    color: #F7FAFC;
}

/* Footer */
.footer {
    margin-top: 20px;
    font-size: 0.9rem;
    color: #CBD5E0;
}

/* Form Styling */
.form-group label {
    font-weight: bold;
    color: #E2E8F0;
}

/* Dashboard Specific Styling */
.dashboard-content h2 {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    margin-bottom: 20px;
    color: #F7FAFC;
}

.copy-container {
    text-align: right;
}

.copy-container label {
    font-size: 0.95rem;
    line-height: 1.2;
    margin: 0;
    padding: 0;
    display: inline-block;
}

.form-referral {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
    color: #63B3ED;
}

/* Animations */
a.btn {
    transition: all 0.3s ease-in-out;
}
a.btn:hover {
    transform: scale(1.05);
}

/* Dashboard Styles */
.dashboard-container {
    margin-top: 30px;
    margin-bottom: 30px;
}

/* Card Styling */
.card {
    background-color: #2D3748;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}

/* Form Group Styling */

.form-group label {
    font-weight: 600;
    color: #63B3ED;
}

.form-control {
    border-radius: 8px;
    padding: 2px;
    background-color: #4A5568;
    color: #E2E8F0;
}

.risk-form {
    border-radius: 8px;
    padding: 2px;
    background-color: #4A5568;
    color: #E2E8F0;
}

/* Button Styles */
.btn-primary {
    background-color: #2B6CB0;
    border: none;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background-color: #3182CE;
    transform: scale(1.03);
}

/* Hero Section with Video */
.hero-container {
    position: relative;
    height: 100vh;
    overflow: hidden;
    text-align: center;
}

.video-header {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: relative;
}

.video-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: zoomIn 15s infinite alternate ease-in-out;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
}

.hero-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #F7FAFC;
    text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000;
    z-index: 1;
}

/* Features Section */
.features-section {
    background-color: #2D3748;
    padding: 60px 0;
}

.feature-card {
    background: #4A5568;
    padding: 25px;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s ease;
}

.feature-card:hover {
    transform: scale(1.05);
}

/* Feature Icons */
.feature-icon {
    font-size: 40px;
    color: #63B3ED;
    margin-bottom: 20px;
}

/* Button Animations */
.btn-primary {
    background-color: #2B6CB0;
    padding: 12px 25px;
    border-radius: 8px;
    transition: background-color 0.3s ease, transform 0.2s ease-in-out;
}

.btn-primary:hover {
    background-color: #3182CE;
    transform: scale(1.05);
}

/* Get Started Page Styles */
.get-started-container {
    max-width: 900px;
    margin: 50px auto;
    padding: 20px;
    background-color: #2D3748;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

.get-started-container h1,
.get-started-container h2,
.get-started-container h3 {
    text-align: center;
    color: #E2E8F0;
}

.get-started-container p {
    text-align: center;
    line-height: 1.6;
    color: #CBD5E0;
}

/* Diagram Section */
.diagram-container {
    text-align: center;
    margin: 20px 0;
}

.diagram-container img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

/* Step Boxes */
.steps {
    margin-top: 30px;
}

.step-box {
    margin-bottom: 20px;
    padding: 15px;
    background-color: #4A5568;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

.step-box h3 {
    margin-top: 0;
    color: #63B3ED;
}

/* Button Container */
.btn-container {
    text-align: center;
    margin-top: 30px;
}

.btn-get-started {
    padding: 10px 20px;
    background-color: #2B6CB0;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    margin: 5px;
    transition: background-color 0.3s ease, transform 0.2s ease-in-out;
}

.btn-get-started:hover {
    background-color: #3182CE;
    transform: scale(1.05);
}

.pricing-card h5 {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 10px;
    color: #63B3ED;
}

/* Hide button on desktop */
.collapsedmenu-btn {
    display: none;
    background: transparent;
    border: 1px;
    color: white;
    cursor: pointer;
    border-radius: 4px;
}
/* Responsive Design */
@media (max-width: 768px) {
    .dashboard-container {
        padding: 20px;
    }

    .hero-text {
        width: 90%;
    }

    .features-section {
        padding: 40px 20px;
    }

    .logo-area, .auth-area {
        flex: 0 0 5px !important; /* Anchors the sides */        
    }

    .nav__logo-name {
        display: none;
    }

    .collapsedmenu-btn {
        display: block; /* Show button only on mobile */
        padding-right: 20px;
    }

    .collapsedmenu-links {
        display: none; /* Hidden by default */
        position: absolute;
        top: 50px;
        right: 0;
        border: 1px solid #334155;
        background: #000;
        flex-direction: column;
        border-radius: 6px;
        min-width: 100px;
        z-index: 1000;
    }

    .collapsedmenu-links.show {
        display: flex; /* Shown when toggled */
    }
    
    .collapsedmenu-links a {
        padding: 8px 0;
        text-decoration: none;
        color: white;
    }
}

.box {
    border: 2px solid #ffffff; /* White border for visibility */
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5); /* Soft glow effect */
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 10px;
    background-color: #2c2c2c; /* Dark grey background */
}

.form-control[readonly] {
    border-radius: 8px;
    padding: 12px;
    background-color: #4A5568;
    color: #E2E8F0;
}

.boxx {
  /* Existing styles */
  margin-bottom: 4;
  padding: 4;
  background-color: dark;
  color: white;
  border-radius: .25rem;
  display: flex;
  flex-direction: column; /* Keep the overall box as a column */
}

/* Style for the container of the two list boxes */
.d-flex {
  display: flex;
  flex-direction: row; /* Arrange children (the two form-group divs) in a row */
  gap: 1em; /* Optional: Add some space between the list boxes */
}

/* Optional: Add some right margin to the first list box for spacing */
.mr-2 {
  margin-right: 0.5em; /* Adjust as needed */
}

/* Optional: Adjust the flex-grow of the list boxes to make them take equal width */
.d-flex > .form-group {
  flex-grow: 1;
}

body {
    background-color: #1a1a1a; /* Dark background similar to OKX */
    color: #e0e0e0;
    font-family: Arial, sans-serif;
}

.d-flex { display: flex; }
.flex-row { flex-direction: row; }
.mt-4 { margin-top: 1.5rem; }
.mb-2 { margin-bottom: 0.5rem; }
.gap-2 { gap: 0.5rem; } /* Or use column-gap in CSS */
.gap-3 { gap: 1rem; } /* Or use column-gap in CSS */
.card {
    background-color: #2D3748;
    color: #E2E8F0;
    border-radius: 8px;
    padding: 1rem;
}


.input-error {
    border-color: #dc3545; /* Red border, matches Bootstrap's danger color */
}

    /* Two previous patches (align-items: center on the row, align-self on #btnIndicators) treated
       the symptom without finding why .form-group and .crefresher-container were still off. The
       real causes, found by tracing every rule that touches this row's children:
       1. .form-group is a SHARED utility class also used for label-above-input forms elsewhere in
          the app: "display: flex; flex-direction: column;" (line ~678). That's fine for a labeled
          input, but on the symbol dropdown here it turns .form-group into ITS OWN nested flex
          container, which interacts unpredictably with the outer row's own flex alignment.
       2. ".d-flex > .form-group { flex-grow: 1; }" (line ~516) was written for a completely
          different "two list boxes" layout, but matches this row's dropdown too since it's also a
          .form-group inside a .d-flex — silently stretching the dropdown wider than intended.
       3. .crefresher-container is "display: inline-block", not flex — its buttons (share/save/
          clear/refresh) position via old-fashioned baseline text alignment. An inline <svg> and an
          inline emoji character don't share the same baseline, so the SVG-based share button drifts
          relative to its emoji-icon siblings even though each button's OWN internal content is
          flex-centered — the misalignment is between the buttons themselves, one level up.
       Fixing all three at their actual source, scoped to .chart-toolbar-row so none of this touches
       .form-group / .d-flex / .crefresher-container anywhere else they're used in the app. */
    /* CHANGED: START add breathing room under the toolbar row */
    .chart-toolbar-row {
        display: flex;
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        gap: 1em;
        padding-bottom: 5px;
    }
    /* CHANGED: END add breathing room under the toolbar row */
    /* Blanket safety net: whatever shows up in this row (now or later), center it — immune to
       any nested flex-direction/flex-grow quirks a child brings in from a shared class. */
    .chart-toolbar-row > * {
        align-self: center;
    }
    /* Give .crefresher-container real flex centering instead of baseline-aligned inline flow —
       part of why the share button drifted from its siblings. gap replaces the whitespace-based
       spacing flex naturally removes between inline elements. */
    .chart-toolbar-row .crefresher-container {
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    /* Every previous attempt tried to make different element TYPES (an <input>, a <button>, a
       <select>) match each other's natural rendered height — which depends on font metrics and
       OS/browser-native form-control rendering that CSS alone can't fully predict without actually
       looking at it live in a browser. Doing it "backwards" as requested: instead of guessing whose
       natural size is right and matching everyone else to it, force every clickable element in this
       row to the exact same explicit height. Nobody's natural size matters anymore, so there's
       nothing left to drift out of alignment. Wrapper elements (.form-group, .rparams-timeframe-
       container, .crefresher-container) aren't listed here on purpose — they're plain block/flex
       boxes that size themselves to their content, so once the actual buttons/input inside them are
       all 32px, the wrappers naturally become 32px too. */
    .chart-toolbar-row .chart-symbol-search-input,
    .chart-toolbar-row #btnIndicators,
    .chart-toolbar-row #btnChartType,
    .chart-toolbar-row #btnSettings,
    .chart-toolbar-row .rparams-mobile-trigger,
    .chart-toolbar-row .resolution-selector .rparams-btn,
    .chart-toolbar-row .crefresher-container .rparams-btn {
        height: 32px;
        box-sizing: border-box;
    }

    .chart-symbol-search {
        display: block;
        position: relative;
        flex-grow: 0;
    }
    .chart-symbol-search-input {
        width: 160px;
        text-align: left;
        cursor: text;
    }
    .chart-symbol-search-input::placeholder {
        color: rgba(148, 163, 184, 0.6);
    }
    /* #symbol_list stays in the DOM as updateChartSymbol()'s real source of truth, just not shown —
       visually-hidden rather than display:none so it stays focusable/readable for anything that
       expects a real <select> (screen readers, any other script that queries it). */
    .chart-symbol-native-select {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
    .chart-symbol-search-results {
        position: absolute;
        top: 100%;
        left: 0;
        margin-top: 4px;
        width: 220px;
        max-height: 280px;
        overflow-y: auto;
        background: #0f172a;
        border: 1px solid #334155;
        border-radius: 4px;
        z-index: 1000;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
    }
    .chart-symbol-search-item {
        padding: 8px 12px;
        font-size: 13px;
        color: #94a3b8;
        cursor: pointer;
        white-space: nowrap;
    }
    .chart-symbol-search-item:hover,
    .chart-symbol-search-item.active {
        background-color: #334155;
        color: #f8fafc;
    }

    .chart-type-container {
        position: relative;
    }
    .chart-type-dropdown {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        margin-top: 4px;
        min-width: 170px;
        background: #0f172a;
        border: 1px solid #334155;
        border-radius: 4px;
        z-index: 1000;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
        padding: 4px;
    }
    .chart-type-dropdown.open {
        display: block;
    }
    .chart-type-option {
        display: block;
        width: 100%;
        text-align: left;
        padding: 8px 10px;
        background: transparent;
        border: none;
        border-radius: 4px;
        color: #94a3b8;
        font-size: 13px;
        cursor: pointer;
    }
    .chart-type-option:hover {
        background-color: #334155;
        color: #f8fafc;
    }
    .chart-type-option.active {
        background-color: #3b82f6;
        color: #ffffff;
        font-weight: 600;
    }

    /* #btnShareChart's icon is an inline SVG hardcoded to 16x16px, independent of font-size — but
       its sibling icon buttons (#btnSaveDrawings 💾, #btnClearDrawings 🗑️, #refresherauditbutton's
       ↻) render their glyph off .rparams-btn's inherited 13px font-size. That mismatch (16px fixed
       vs ~13px font-driven) is what makes the buttons look inconsistently sized/aligned next to
       each other. Bumping the glyph font-size to match the SVG's 16px brings every button's
       padding+content footprint back in line, without touching .rparams-btn's other use elsewhere
       in the app (timeframe/resolution buttons, symbol picker, etc. aren't inside this container).
    */
    .crefresher-container .rparams-btn {
        font-size: 16px;
        line-height: 1;
    }
    .crefresher-container .rparams-btn svg {
        display: block;
    }

    .crefresher-container {
        position: relative;
        display: inline-block;
    }

    .crefresher-text {
        visibility: hidden;
        width: 150px;
        background-color: black;
        color: #fff;
        text-align: center;
        padding: 7px 0;
        border-radius: 6px;
        position: absolute;
        z-index: 1;
        bottom: 125%; /* Position above the button */
        left: 50%;
        margin-left: -60px; /* Center the tooltip */
    }

    .crefresher-container:hover .crefresher-text {
        visibility: visible;
    }

    .crefresher-button {
        /* Background color based on the image */
        background-color: #34373F; /* Dark grey/blue */

        /* Text color */
        color: #E0E0E0; /* Very light grey, close to white */

        /* Padding to give space around the text */
        padding: 6px 14px; /* Vertical and horizontal padding */

        /* Rounded corners */
        border-radius: 8px; /* Noticeably rounded corners */

        /* Subtle box shadow for depth */
        box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4), /* Bottom shadow */
                    0px 0px 0px 1px rgba(255, 255, 255, 0.1) inset; /* Inner subtle highlight */

        /* Text styling */
        font-family: sans-serif; /* General sans-serif, adjust if you have a specific font */
        font-size: 22px; /* Example font size, adjust as needed */
        font-weight: bold; /* Bold text */
        text-align: center;
        text-decoration: none; /* No underline for links */
        cursor: pointer;
        border: none; /* No default border */
        transition: background-color 0.2s ease, box-shadow 0.2s ease; /* Smooth transitions for hover */
    }

    .crefresher-button:hover {
        background-color: #3F434D; /* Slightly lighter on hover for interaction feedback */
        box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.5),
                    0px 0px 0px 1px rgba(255, 255, 255, 0.15) inset;
    }


/* Ensure alerts don't push the chart off-screen */
.alert {
    margin: 10px;
    font-size: 0.85rem;
}

/* Base styles for the chart container */
.klinecharts-pro {
    /* Default Light Theme Variables */
    --klinecharts-pro-primary-color: #1677ff;
    --klinecharts-pro-background-color: #FFFFFF;
    --klinecharts-pro-text-color: #051441;
    --klinecharts-pro-border-color: #eeeeee;
    --klinecharts-pro-watermark-alpha: 0.1;
}

/* Official Dark Theme Variables */
.klinecharts-pro[data-theme="dark"] {
    --klinecharts-pro-background-color: #151517;
    --klinecharts-pro-text-color: #F8F8F8;
    --klinecharts-pro-text-second-color: #929AA5;
    --klinecharts-pro-border-color: #2a2e39;
    --klinecharts-pro-hover-background-color: rgba(22, 119, 255, 0.15);
    --klinecharts-pro-watermark-alpha: 0.15;
}

/* LONG SHORT BUTTON */
.input-row {
    display: flex;
    align-items: flex-end;
    gap: 15px;
    font-family: sans-serif;
}

.form-group {
    display: flex;
    flex-direction: column;
}

/* The Swap Button Styling */
.toggle-btn {
    height: 38px; /* Matches standard input heights */
    padding: 0 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    color: white;
    transition: background-color 0.2s, transform 0.1s;
    min-width: 100px;
}

.toggle-btn:active {
    transform: scale(0.95);
}

/* Replay css */
.btn-replay {
    background: transparent;
    border: 1px solid #2a2a2a;
    color: #C8A84B;
    font-size: 20px;
    padding: 1px 1px;
    border-radius: 4px;
    cursor: pointer;
    letter-spacing: 0.05em;
    transition: background 0.15s, border-color 0.15s;
    margin-right: 3px;
}

.btn-replay.active {
    background-color: #C8A84B;
    color: #000;
    box-shadow: 0 0 0 2px rgba(200, 168, 75, 0.4);
}

.btn-replay:hover {
    background: rgba(200,168,75,0.08);
    border-color: #C8A84B;
}
/* Replay css */

/* State Colors */
.btn-long { background-color: #28a745; } /* Green */
.btn-short { background-color: #dc3545; } /* Red */
.btn-modify { background-color: #192eeb; } /* Dark Blue */
.btn-modify:hover { background-color: #3146fd; color : white} /* Darker Blue */
.btn-save { background-color: #4083ff; } /* Light Blue */
.btn-save:hover { background-color: #3473e7; color: white;} /* Dimmer Blue */
.btn-cancel { background-color: #159e09; } /* Green */
.btn-cancel:hover { background-color: #0fad5e; color: white;} /* Dimmer Green */


/* Prefix: rparams- */
.rparams-container {
    background: #121417; /* Deep Charcoal */
    padding: 5px;
    border-radius: 8px;
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 13px;
    border: 1px solid #2d3139;
    color: #e0e0e0;
}

.rparams-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
    align-items: flex-end;
}


.rparams-group {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 50px;
}

.rparams-label {
    font-weight: 600;
    color: #94a3b8; /* Muted Slate */
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 5px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Dark Inputs */
.rparams-input {
    height: 32px;
    padding: 4px 5px;
    border: 1px solid #334155;
    border-radius: 4px;
    font-size: 13px;
    background-color: #1e293b; /* Dark Slate Blue */
    color: #ffffff;
    transition: border-color 0.2s, box-shadow 0.2s;
}


.rparams-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.rparams-input:disabled {
    border-color: #5f5f5f !important; /* Bright Red */
    background-color: #6a6a6a !important; /* Slight red tint to the background */
    box-shadow: 0 0 8px rgba(95, 95, 95, 0.4); /* Red outer glow */
    color: #ffffff; /* Light pinkish text for readability */
}

/* Readonly fields - more subtle in dark mode */
.rparams-input[readonly] {
    background-color: #0f172a;
    color: #94a3b8;
    border: 1px solid #1e293b;
    cursor: default;
}

/* CHANGED: .rparams-input-risk added to these 3 rules — it's a standalone class (not combined
   with .rparams-input), so risk_perc/risk_fixed would otherwise lose focus styling and, more
   importantly, still show the browser's native number spinner arrows next to the app's own
   custom ▲/▼ buttons. */
/* Remove spinners for Chrome, Safari, Edge, and Opera */
.rparams-input::-webkit-outer-spin-button,
.rparams-input::-webkit-inner-spin-button,
.rparams-input-risk::-webkit-outer-spin-button,
.rparams-input-risk::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Remove spinners for Firefox */
.rparams-input[type=number],
.rparams-input-risk[type=number] {
    -moz-appearance: textfield;
}

.rparams-input-risk:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

/* Header Bar */
.rparams-header {
    background: #1e293b;
    padding: 3px 6px;
    border-radius: 4px;
    margin-bottom: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-left: 3px solid #3b82f6; /* Accent strip */
}

/* Trading Toggles */
.rparams-toggle {
    height: 32px;
    border: none;
    border-radius: 4px;
    color: white;
    font-weight: bold;
    cursor: pointer;
    min-width: 70px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.rparams-btn-long { 
    background-color: #10b981; /* Emerald Green */
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.2);
}

.rparams-btn-short { 
    background-color: #ef4444; /* Bright Red */
    box-shadow: 0 0 10px
}

/* Highly specific selector to override the default dark border */
.rparams-input.rparams-error {
    border-color: #ef4444 !important; /* Bright Red */
    background-color: #2d1a1a !important; /* Slight red tint to the background */
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.4); /* Red outer glow */
    color: #fee2e2; /* Light pinkish text for readability */
}

/* Optional: Animation to catch the user's eye */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

.rparams-error-shake {
    animation: shake 0.2s ease-in-out 0s 2;
}

.rparams-toolbar {
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
    padding: 5px;
    background: #0f172a;
    border-bottom: 1px solid #334155;
    
    /* NEW: Prevent the toolbar from forcing items to stretch */
    flex-wrap: nowrap; 
    
    /* NEW: Ensure the container doesn't get wider than the sidebar */
    width: 100%;
    overflow-x: auto; /* Adds a scrollbar ONLY if items physically cannot fit */
}

/* --- Mobile Overrides --- */
@media (max-width: 767px) {
    /* 1. Unlock the page height so the browser can scroll */
    .app-container,
    .chart-container {
        height: auto !important; 
        overflow: visible !important;
        display: block; /* Stack elements normally */
        padding-right: 8px !important;
    }

    /* 2. Fix the chart to 500px and allow it to take full width */
    .rparams-main-chart {
        height: 500px !important;
        width: 100% !important;
        flex: none !important;
        margin-bottom: 15px; /* Space between chart and sidebar */
        padding-right: 8px !important;
    }

    /* 3. Ensure the dashboard wrapper doesn't force a flex-row */
    .rparams-dashboard-wrapper {
        flex-direction: column !important;
        height: auto !important;
    }

    /* 4. Let the sidebar scroll naturally beneath the chart */
    .rparams-sidebar {
        width: 100% !important;
        height: auto !important;
        overflow: visible !important;
        padding-right: 8px !important;
    }

    .rparams-tab-header {
        padding-right: 8px !important;
    }
    
    /* 5. Ensure the toolbar doesn't break on small screens */
    .rparams-toolbar {
        flex-wrap: wrap; /* Allow buttons to wrap to next line if needed */
        height: auto;
    }

    .rparams-scroll-viewport {
        max-height: 500px !important;
    }
}

/* The Chart takes all remaining space */
.rparams-main-chart {
    flex: 1;            /* NEW: Takes all available width */
    height: 100%;       /* NEW: Fills the wrapper height */
    display: flex;
    flex-direction: column;
    overflow: hidden;   /* NEW: Keep chart inside */
    margin: 0;
    padding: 0;
    padding-top: 5px;
}

/* The Sidebar stays fixed-width */
.rparams-sidebar {
    max-width: 400px;       /* Keep your sidebar width */
    flex-shrink: 0;     /* NEW: Don't let it squish */
    height: 100%;       /* NEW: Fills the wrapper height */
    overflow-y: auto;   /* NEW: Scroll only the sidebar content */
    background: #2D3748;
    margin: 5px;
    background-color: #0f172a;
    border: 1px solid #334155;
    border-radius: 6px;
    width: 100%;
    margin-bottom: 8px;
    padding: 5px;
}

/* Force the widget container to be exactly as tall as the wrapper */
#tradingview_advanced {
    height: 100% !important;
    min-height: inherit; 
}

/* This class will be added via JS when the journal opens */
.rparams-main-chart.chart-expanded {
    min-height: 750px; /* Adjust this value to match your journal's depth */
}

/* Mobile Overrides */
@media (max-width: 767px) {
    .rparams-sidebar {
        /* Remove the width restrictions */
        max-width: none !important; 
        min-width: 0 !important;
        width: 100% !important;
        
        /* Optional: Flatten the bottom corners if it's the top item */
        /* or add a margin to separate it from the chart below */
        margin-bottom: 10px;
        
        /* Ensure the flex container doesn't try to shrink it */
        flex: none; 
    }
}


/* Container to sit input and button side-by-side */
.rparams-input-with-btn {
    display: flex;
    gap: 4px;
    align-items: center;
}


/* The tiny refresh button */
.rparams-inline-btn {
    background: #1e293b;
    border: 1px solid #334155;
    color: #94a3b8;
    border-radius: 4px;
    height: 32px; /* Match your input height */
    width: 32px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    font-size: 14px;
}

.rparams-inline-btn:hover {
    background: #334155;
    color: #fbbf24; /* Amber glow on hover */
    border-color: #475569;
}

.rparams-inline-btn:active {
    transform: scale(0.9);
}

/* Optional: Spin animation when clicked */
.rparams-spin {
    animation: rparams-spin-anim 0.5s ease-in-out;
}

@keyframes rparams-spin-anim {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Update this container */
.rparams-input-with-btn {
    display: flex;
    gap: 2px; /* Reduced gap to save pixels */
    align-items: center;
    width: 100%;
}

/* Ensure the input takes up the remaining space but doesn't shrink to zero */
.rparams-input-with-btn .rparams-input {
    flex: 1;
    min-width: 0; /* Critical for flexbox math */
    padding: 4px 5px; /* Slightly tighter padding for small boxes */
}

/* Keep the button size fixed so it doesn't get squished */
.rparams-inline-btn {
    flex-shrink: 0; 
    width: 28px; /* Slightly smaller button to fit the row */
    height: 32px;
}

/* Update your row to prevent overlapping items */
.rparams-row {
    display: flex;
    flex-wrap: nowrap; /* Keep them on one line */
    gap: 8px; /* Control space between columns */
    overflow: hidden; /* Prevent items from bleeding out */
}


/* Container for Label + Button */
.rparams-label-row {
    display: flex;
    justify-content: space-between; /* Pushes button to the far right of the label area */
    align-items: center;
    margin-bottom: 4px;
    width: 100%;
}

/* A smaller, cleaner refresh button for the header */
.rparams-mini-refresh {
    background: transparent;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    padding: 0 4px;
    font-size: 12px; /* Smaller to match the label size */
    transition: color 0.2s, transform 0.2s;
    line-height: 1;
}

.rparams-mini-refresh:hover {
    color: #fbbf24; /* Amber glow */
}

.rparams-mini-refresh:active {
    transform: rotate(90deg); /* Slight rotation feel on click */
}

/* The spin animation from before */
.rparams-spin {
    animation: rparams-spin-anim 0.5s ease-in-out;
}

@keyframes rparams-spin-anim {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* --- DESKTOP VIEW --- */
.rparams-mobile-trigger {
    display: none !important; /* Always hide trigger on desktop */
}

/* Base Style for your Custom Buttons */
.rparams-btn {
    background-color: #1e293b;
    border: 1px solid #334155;
    color: #94a3b8;
    border-radius: 4px;
    font-size: 13px;
    padding: 6px 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.rparams-btn:hover {
    background-color: #334155;
    color: #f8fafc;
    border-color: #475569;
}

/* Active/Selected State (e.g., current timeframe) */
.rparams-btn.active {
    background-color: #3b82f6; /* Trading Blue */
    color: #ffffff;
    border-color: #60a5fa;
    font-weight: 600;
}

/* --- MOBILE SPECIFIC OVERRIDES --- */
@media (max-width: 767px) {
    /* Container must be relative so the drawer anchors to it */
    .rparams-timeframe-container {
        position: relative;
        display: flex;
        justify-content: flex-end; /* Keeps trigger on the right */
    }

    .rparams-mobile-trigger {
        display: flex !important;
        min-width: 50px;
        margin-bottom: 5px;
        justify-content: space-between;
        gap: 8px;
    }

    .rparams-drawer {
        display: none; 
        width: 180px;
        background: #0f172a;
        padding: 6px;
        border-radius: 4px;
        border: 1px solid #334155;
        position: absolute; 
        top: 100%;    /* Sits right below the trigger */
        right: 0;     /* ANCHOR TO RIGHT: Grows leftward */
        z-index: 1000; /* High z-index to float over charts */
        box-shadow: -5px 5px 15px rgba(0, 0, 0, 0.5);
    }

    .rparams-drawer.open { 
        display: block !important; 
    }

    .resolution-selector {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 4px !important;
    }

    /* Make buttons square-ish and tight on mobile */
    .resolution-selector .rparams-btn {
        padding: 10px 0 !important;
        font-size: 11px !important;
        width: 100% !important;
        min-width: 0 !important; /* Prevents button from bloating the grid */
    }
}

/* --- DESKTOP VIEW --- */
@media (min-width: 768px) {
    .rparams-mobile-trigger { display: none !important; }
    .rparams-drawer { display: block !important; }
    .resolution-selector {
        display: flex;
        gap: 6px;
    }
}

/* -- risk parameter buttons -- */
/* CHANGED: START fixed width for the Risk %/Fixed Risk group
   Widened to 190px (was 160px) to actually fit the fixed-width inner pieces below (150px
   input-stack + 4px gap + 35px vertical-controls = 189px) without flexbox having to shrink them
   back down and undo the point of fixing their widths in the first place. */
.rparams-group-with-sidebar {
    display: flex !important;
    flex-direction: row !important;
    gap: 4px;
    align-items: stretch; /* This forces the buttons to match the height */
    margin-bottom: 8px;
    flex: 0 0 190px;
    width: 190px;
}
/* CHANGED: END fixed width for the Risk %/Fixed Risk group */

/* CHANGED: fixed 150px width (was flex: 1) — every level of the risk stack is now a fixed size,
   so "Risk %" vs "Fixed $" never changes anything's footprint on mode switch. */
.rparams-input-stack {
    display: flex;
    flex-direction: column;
    width: 150px;
}

/* CHANGED: START Risk % / Fixed Risk mode toggle
   Small two-option segmented switch that replaces the old static "Risk %" label above the risk
   input. Active-state color matches .chart-type-option elsewhere in the app for visual
   consistency between the two "pick one of a few options" controls in this UI. */
.risk-mode-toggle {
    display: flex;
    flex-direction: row;
    gap: 5px;
    background: #1e293b;
    border-radius: 4px;
    margin-top: 4px;
    margin-bottom: 4px;
    width: 150px; /* CHANGED: fixed width, matches .rparams-input-stack/.rparams-input-risk */
}
.risk-mode-option {
    flex: 1;
    border: none;
    background: transparent;
    color: #94a3b8;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 4px 6px;
    border-radius: 3px;
    cursor: pointer;
}
.risk-mode-option:hover {
    color: #f8fafc;
}
.risk-mode-option.active {
    background-color: #3b82f6;
    color: #ffffff;
}
/* CHANGED: END Risk % / Fixed Risk mode toggle */

/* CHANGED: START dedicated fixed-width input style for the two risk inputs
   Copy of .rparams-input (which is shared across many other inputs in the app and left untouched)
   plus an explicit 150px width, so risk_perc/risk_fixed render at the exact same size as each
   other and as .risk-mode-toggle above them, regardless of which one is currently visible. */
.rparams-input-risk {
    height: 32px;
    padding: 4px 5px;
    border: 1px solid #334155;
    border-radius: 4px;
    font-size: 13px;
    background-color: #1e293b; /* Dark Slate Blue */
    color: #ffffff;
    transition: border-color 0.2s, box-shadow 0.2s;
    width: 150px;
}
/* CHANGED: END dedicated fixed-width input style for the two risk inputs */

/* CHANGED: START "USDT" suffix on the Fixed Risk input (display-only)
   A number input can't contain text of its own, so the "USDT" label is a separate element laid
   over the input's own box: wrapper is position:relative + the same fixed 150px width as
   everything else in this column, the input inside stretches to fill it (width: 100%, so the
   wrapper's 150px is the only place the width is set now), and the suffix is absolutely
   positioned inside the input's right edge with pointer-events: none so clicks/typing still go
   straight to the input underneath it, not the label sitting on top. */
.risk-fixed-input-wrap {
    position: relative;
    width: 150px;
}
.risk-fixed-input-wrap .rparams-input-risk {
    width: 100%;
    padding-right: 42px; /* room for the suffix so typed digits never run under it */
}
.risk-fixed-suffix {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    font-size: 10px;
    font-weight: 600;
    color: #64748b;
    letter-spacing: 0.5px;
    pointer-events: none;
}
/* CHANGED: END "USDT" suffix on the Fixed Risk input (display-only) */

.rparams-vertical-controls {
    display: flex;
    flex-direction: column;
    width: 35px; /* Adjust width as needed */
    gap: 2px;
    padding-top: 18px; /* Optional: Aligns top button closer to the center of the input height */
}

/* Specific styling for the full-height buttons */
.rparams-control-btn-full {
    flex: 1; /* Each button takes 50% height */
    background: #1e293b;
    border: 1px solid #334155;
    color: #94a3b8;
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    transition: background 0.2s;
}

.rparams-control-btn-full:hover {
    background: #334155;
    color: #fff;
}

.rparams-control-btn-full:active {
    background: #3b82f6;
}

/* Balance Lot size and summary of trade possible outcome */
/* Container holding the two main sections */
.rparams-summary-container {
    display: flex;
    flex-direction: row;
    gap: 5px;
    background: #1a1d21;
    padding: 5px;
    border-radius: 8px;
    border: 1px solid #2d3139;
}

/* Left side - Normal vertical stack */
.rparams-summary-main {
    flex: 1.2; /* Slightly wider */
    display: flex;
    flex-direction: column;
    max-width: 120px;
}

.rparams-big-input {
    font-size: 14px !important;
    font-weight: bold;
    color: #fbbf24 !important; /* Gold/Yellow for visibility */
}

/* Right side - Compact table style */
.rparams-summary-metrics {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-left: 1px solid #334155;
    padding-left: 15px;    
    margin-left: 10px;
}

/* Individual table rows */
.rparams-compact-row {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Push content to right */
    margin-left: 5px;
    padding-top: 0;
    padding-bottom: 0;
    row-gap: 0;
}

.rparams-compact-row label {
    font-size: 11px;
    color: #94a3b8;
    text-align: right;
    align-content: center;
    white-space: nowrap;
    text-transform: uppercase;
    margin: 0;
    padding: 0;
}

.rparams-compact-row input {
    width: 80px;
    background: none;
    border: none;
    color: #e2e8f0;
    font-size: 11px;
    text-align: left;
    font-family: monospace;
    pointer-events: none; /* Looks like text, not a box */
    margin-left: 5px;
    margin: 0;
    padding: 0;
    padding-left: 5px;
    line-height: 1;
}

.rparams-compact-row input.warning {
    color: #ed2102 !important;
}
.rparams-compact-row label.warning {
    color: #ed2102 !important;
}

.rparams-onp-row {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Push content to right */
    margin-left: 5px;
    padding-top: 0;
    padding-bottom: 0;
    row-gap: 0;
}

.rparams-onp-row-invalid {
    background-color: rgba(220, 53, 69, 0.2) !important;
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Push content to right */
    margin-left: 5px;
    padding-top: 0;
    padding-bottom: 0;
    row-gap: 0;
}
/* The Gear Icon */
.rparams-settings-icon {
    position: absolute;
    top: 5px;    /* 5 pixels from the top of the DIV */
    right: 5px;  /* 5 pixels from the right of the DIV */
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
    z-index: 100;
    line-height: 1;
    padding: 0;
    margin: 0;
}


.rparams-settings-icon:hover {
    opacity: 1;
}

/* Position the dropdown so it also stays inside/near the div */
.rparams-settings-dropdown {
    display: none;
    position: absolute;
    top: 25px;   /* Appears just below the gear */
    right: 0px;
    background: #0f172a;
    border: 1px solid #334155;
    padding: 10px;
    border-radius: 4px;
    z-index: 101;
    width: 180px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
}

.rparams-settings-dropdown.show {
    display: block;
}

/* Ensure the input inside doesn't look weird */
#max-fee-threshold {
    width: 60px !important;
    text-align: center;
}

/* Responsive adjustment for small screens */
@media (max-width: 600px) {
    .rparams-summary-container {
        flex-direction: row;
    }
    .rparams-summary-metrics {
        border-left: none;
        border-top: 1px solid #334155;
        padding-left: 0;
        padding-top: 10px;
    }
}

/* Journal Toggle Button */
.rparams-journal-toggle {
    width: 100%;
    background: #2d3139;
    border: 1px solid #3d424d;
    color: #94a3b8;
    padding: 8px;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 1px;
    cursor: pointer;
    border-radius: 4px;
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Large Textarea Styling */
.rparams-textarea {
    resize: none; /* Prevents user from breaking layout */
    min-height: 60px;
    font-size: 12px;
    line-height: 1.4;
}

.rparams-char-count {
    font-size: 10px;
    color: #4b5563;
    text-align: right;
    margin-top: 4px;
}



/* Tab Header Buttons */
.rparams-tab-header {
    display: flex;
    background-color: #1e293b;
    border-radius: 4px;
    padding: 3px;
    margin-bottom: 10px;
}

.rparams-tab-link {
    flex: 1;
    background: transparent;
    border: none;
    padding: 6px 6px;
    color: #64748b;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.rparams-tab-link.active {
    background-color: #334155;
    color: #ffffff;
}

/* Tab Content Areas */
.rparams-tab-content {
    display: none;
    margin-left: 5px;
    margin-right: 5px;
}

.rparams-tab-content.active {
    display: block;
}

/* Section spacing */
.rparams-section {
    margin-bottom: 16px;
}

/* The main container that limits height */
.rparams-scroll-viewport {
    max-height: calc(100vh - 150px); /* Adjust this value based on your sidebar height */
    overflow-y: auto;  /* Enable vertical scrolling */
    overflow-x: hidden; /* Prevent horizontal jitter */
    padding-right: 4px; /* Space for the scrollbar */
}

/* Custom Scrollbar Styling (Webkit browsers like Chrome/Edge/Safari) */
.rparams-scroll-viewport::-webkit-scrollbar {
    width: 4px;
}

.rparams-scroll-viewport::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 10px;
}

.rparams-scroll-viewport::-webkit-scrollbar-thumb {
    background: #475569; /* Slate-500 */
    border-radius: 10px;
}

.rparams-scroll-viewport::-webkit-scrollbar-thumb:hover {
    background: #64748b; /* Slate-400 */
}

/* Firefox Support */
.rparams-scroll-viewport {
    scrollbar-width: thin;
    scrollbar-color: #475569 rgba(255, 255, 255, 0.02);
}


.input-with-addon {
    display: flex;
    align-items: center;
    gap: 5px;
}

.input-with-addon .rparams-input {
    flex: 1;
}


/* --- Drawer & Button Styling (Matching Dark Slate Theme) --- */
/* Container for the two buttons */

.btn-group {
    display: flex;
    border: 1px solid #334155;
    border-radius: 4px;
    overflow: hidden;
    height: 32px; /* Matched to your input height */
    background-color: #1e293b;
}

.addon-btn {
    padding: 0 10px;
    background-color: #1e293b;
    border: none;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    color: #94a3b8; /* Slate gray text */
    transition: all 0.2s;
}

.addon-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: #696969;
    border-color: #2d3748;
}

.addon-btn:first-child {
    border-right: 1px solid #334155;
}

.addon-btn.active {
    background-color: #3b82f6; /* Bright blue for active state */
    color: #ffffff;
}

.addon-btn:hover:not(.active) {
    background-color: #334155;
    color: #ffffff;
}

/* The Drawer Popout */
.rrgparams-drawer {
    position: absolute;
    /* Move the drawer above the input group */
    bottom: 100%; 
    /* Anchor to the right side of the container */
    right: 0;
    /* Add a small margin so it doesn't touch the input */
    margin-bottom: 4px; 
    
    z-index: 1000;
    background: #0f172a;
    border: 1px solid #334155;
    padding: 8px;
    box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.3); /* Shadow adjusted for upward pop */
    border-radius: 6px;
    
    /* Ensure it doesn't get squished */
    min-width: 150px;
}

/* Ensure the tab container acts as the anchor for the drawer */
#tab-trade {
    position: relative; 
    overflow: visible; /* Allows the drawer to hang 'outside' the box if needed */
}

/* Specialized Journal Drawer Style */
.journal-popout-drawer {
    position: absolute;
    top: 208px; /* Adjust this value to sit exactly above your button group */
    left: 0;      /* Pin to the left of the sidebar */
    width: 100%;  /* Match sidebar width */
    z-index: 1000;
    background: #0f172a;
    border: 1px solid #334155;
    padding: 15px;
    box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.5);
    border-radius: 6px 6px 0 0;
    display: none; 
    overflow-y: auto;
    max-height: 350px;
    box-sizing: border-box; /* Crucial: ensures padding doesn't push the width out */
}

.journal-popout-drawer.open {
    display: block;
}

.rrgparams-selector {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    justify-content: flex-end; /* Align buttons to the right side of the drawer */
}

/* Buttons inside the drawer */
.rrgparams-btn {
    background-color: #1e293b;
    color: #e2e8f0;
    border: 1px solid #334155;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    transition: background 0.2s;
}

.rrgparams-btn:hover {
    background-color: #334155;
    border-color: #475569;
}

/* Buttons inside the drawer */
.rrgparams-btn {
    background-color: #1e293b;
    color: #e2e8f0;
    border: 1px solid #334155;
    padding: 5px 10px;
    border-radius: 4px;
    pointer-events: auto !important;
    cursor: pointer !important;
    font-size: 12px;
    transition: background 0.2s;
}

.rrgparams-btn:hover {
    background-color: #334155;
    border-color: #475569;
}

.rrgparams-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: #696969;
    border-color: #2d3748;
}

/**********************************/
/**********************************/
/****** Orders and position *******/
/**********************************/
/**********************************/
/* Container for Symbol + Price */
.order-info {
    display: flex;
    flex-direction: column;
    gap: 0px;
}

.order-price {
    font-size: 11px;
    color: #94a3b8; /* Muted slate color */
}

/* Button Group on the right */
.order-actions {
    display: flex;
    gap: 8px;
    margin-left: auto; /* Pushes the buttons to the far right */
    align-items: center;
    padding-right: 10px;
}

.order-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
    padding: 4px;
    color: #64748b;
    transition: color 0.2s ease;
    line-height: 1;
}

.order-btn:hover {
    color: #ffffff;
}

.delete-btn:hover {
    color: #f87171; /* Red on hover for delete */
}

/* Ensure the row doesn't collapse */
.order-row {
    padding: 2px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.position-row {
    padding: 2px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.rparams-onp-label {
    font-weight: 600;
    color: #94a3b8; /* Muted Slate */
    margin: 0;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 2px;
    position: relative;
}

.section-header h6 {
    margin: 0;
}

.menu-dots {
    background: none;
    border: none;
    color: #64748b;
    cursor: pointer;
    font-size: 18px;
    padding: 0 4px;
    line-height: 1;
}

.menu-dots:hover {
    color: #ffffff;
}

/* Dropdown Menu Container */
.rparams-dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    background-color: #1e293b; /* Dark slate */
    min-width: 140px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.5);
    z-index: 100;
    border: 1px solid #334155;
    border-radius: 4px;
}

.dropdown-content a {
    color: #f87171; /* Red for danger actions */
    padding: 8px 12px;
    text-decoration: none;
    display: block;
    font-size: 11px;
}

.dropdown-content a:hover {
    background-color: #334155;
}

/* Show class */
.show { display: block; }

.pnl-positive {
    color: green
}
.pnl-negative {
    color: red
}
.side-buy {
    color: green
}
.side-sell {
    color: red
}
.order-info {
    text-align: left !important;
    display: flex;
    flex-direction: column;
    align-items: flex-start !important;
}

/* Compact the popup container */
.swal2-popup.journal-popup {
    padding: 15px !important;
    width: 400px !important;
    border-radius: 8px;
}

/* ONLY style your specific input class - ignore SweetAlert's internal classes */
.journal-popup .rparams-input {
    display: block !important;
    margin: 5px 0 15px 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    padding: 8px !important;
}

/* Ensure labels look consistent inside your custom popup */
.journal-popup label {
    display: block;
    text-align: left;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 2px;
}

/**********************************/
/**********************************/
/****** Orders and position *******/
/**********************************/
/**********************************/



/********************************/
/****** Battle Station Deploy ***/
/********************************/

.journal-replay-container {
    perspective: 1400px;
}

.journal-popout-drawer1 {
    display: flex;
    min-height: 200px;
    flex-direction: row;
    align-items: stretch;
    gap: 10px;
    padding: 4px;
    padding-left: 10px;
    padding-right: 10px;
    position: relative;

    transform-origin: center bottom;
    transform-style: preserve-3d;
    will-change: transform, opacity;

    border: 1px solid transparent;
    box-shadow: none;
}

/* ---- Hidden / closed state ---- */
.journal-popout-drawer1.drawer-hidden {
    display: none;
    transform: rotateX(-35deg) translateY(24px);
    opacity: 0;
    pointer-events: none;
}

/* ---- Deploy animation ---- */
.drawer-deploying {
    animation: riseDeploy 1s cubic-bezier(0.22, 0.9, 0.3, 1) forwards,
               borderGlow 1.4s ease-out forwards;
}

@keyframes riseDeploy {
    0% {
        transform: rotateX(-35deg) translateY(24px);
        opacity: 0;
    }
    65% {
        transform: rotateX(3deg) translateY(-3px);
        opacity: 1;
    }
    100% {
        transform: rotateX(0deg) translateY(0);
        opacity: 1;
    }
}

@keyframes borderGlow {
    0% {
        border-color: transparent;
        box-shadow: none;
    }
    40% {
        border-color: var(--accent-gold, #C8A84B);
        box-shadow: 0 0 12px rgba(200, 168, 75, 0.55),
                    inset 0 0 8px rgba(200, 168, 75, 0.25);
    }
    100% {
        border-color: rgba(200, 168, 75, 0.25);
        box-shadow: 0 0 0 rgba(200, 168, 75, 0);
    }
}

/* ---- Retract animation (for hiding) ---- */
.drawer-retracting {
    animation: riseRetract 0.6s cubic-bezier(0.5, 0, 0.75, 0) forwards;
}

@keyframes riseRetract {
    0% {
        transform: rotateX(0deg) translateY(0);
        opacity: 1;
    }
    100% {
        transform: rotateX(-35deg) translateY(24px);
        opacity: 0;
    }
}

/* ---- Corner brackets (HUD targeting frame) ---- */
.drawer-bracket {
    position: absolute;
    width: 14px;
    height: 14px;
    border: 2px solid var(--accent-gold, #C8A84B);
    opacity: 0;
    z-index: 5;
}

.bracket-tl { top: -1px;    left: -1px;   border-right: none;  border-bottom: none; }
.bracket-tr { top: -1px;    right: -1px;  border-left: none;   border-bottom: none; }
.bracket-bl { bottom: -1px; left: -1px;   border-right: none;  border-top: none; }
.bracket-br { bottom: -1px; right: -1px;  border-left: none;   border-top: none; }

.drawer-deploying .drawer-bracket {
    animation: bracketSnap 0.6s ease-out forwards;
    animation-delay: 0.44s;
}

.drawer-retracting .drawer-bracket {
    animation: bracketFade 0.3s ease-in forwards;
}

@keyframes bracketSnap {
    0%   { opacity: 0; transform: scale(1.4); }
    60%  { opacity: 1; transform: scale(0.9); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes bracketFade {
    0%   { opacity: 1; }
    100% { opacity: 0; }
}

/* ---- Staggered field ignition ---- */
.ignite {
    opacity: 0;
    transform: translateY(6px);
}

.drawer-deploying .ignite {
    animation: fieldIgnite 0.6s ease-out forwards;
    animation-delay: calc(0.5s + (var(--ignite-delay) * 0.1s));
}

@keyframes fieldIgnite {
    0% {
        opacity: 0;
        transform: translateY(6px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/********************************/


/********************************/
/****** Chart and Journal *******/
/********************************/
.journal-replay-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

.rparams-main {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.rparams-summary1 {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    gap: 6px;
    padding-left: 10px;
    border-left: 1px solid var(--border-color, #2a2a2a);
    align-items: center;
    min-width: 150px;
}

.rparams-summary-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    text-align: center;
    width: 100%;
}

.rparams-rows {
    display: flex;
    flex-direction: column;
}

.rparams-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.rparams-row-3 > .rparams-group {
    flex: 1;
    min-width: 0;
}

.rparams-row-2 > .rparams-group {
    flex: 1;
    min-width: 0;
    padding: 0;
    margin: 0
}

.rparams-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rparams-group-grow {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.rparams-group-grow .rparams-textarea-lg {
    flex: 1;
    resize: vertical;
}

.rparams-textarea-sm {
    height: 30px;
    min-height: 30px;
    resize: none;
    overflow-y: auto;
}

.rparams-textarea-lg {
    min-height: 80px;
}

.rparams-label1 {
    font-weight: 600;
    color: #94a3b8;
    margin-bottom: 5px;
    margin-left: 5px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.rparams-summary-label {
    font-weight: 600;
    color: #94a3b8;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.rparams-summary-value {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 13px;
    color: var(--text-primary, #e5e5e5);
    padding-left: 10px;
}

.rparams-checkbox {
    margin-left: 10px;
    align-items: center;
}



/********************************/
/****** Chart and Journal *******/
/********************************/


/********************************/
/********* TAB Journal **********/
/********************************/

.position-row {
    cursor: pointer;
}

.position-detail-row {
    border-left: 2px solid #C8A84B;
    padding: 10px 16px;
    margin-bottom: 6px;
}

.detail-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.detail-item {
    display: flex;
    flex-direction: column;
}

.detail-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.6;
    font-family: 'IBM Plex Mono', monospace;
}

.detail-value {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 13px;
    color: #C8A84B;
}


/********************************/
/********* TAB Journal **********/
/********************************/


/********************************/
/********** PNL SHARE ***********/
/********************************/

.pnl-share-btn {
    background: transparent;
    border: none;
    outline: none;
    color: #64748b;
    padding: 4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
}
.pnl-share-btn:hover { color: #ffffff }

.pnl-share-overlay {
    position: fixed;
    inset: 0;
    background: rgba(5,7,10,0.85);
    backdrop-filter: blur(4px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pnl-share-overlay.drawer-hidden { display: none; }

.pnl-share-modal {
    background: #11151C;
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 10px;
    padding: 25px;
    max-width: 1000px;
    width: 92%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
}

.pnl-share-close {
    position: absolute;
    top: 16px; right: 16px;
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.5);
    font-size: 24px;
    cursor: pointer;
    line-height: 1;
}
.pnl-share-close:hover { color: #fff; }

.pnl-share-layout {
    display: grid;
    grid-template-columns: 400px 1fr;
    gap: 25px;
}
@media (max-width: 720px) { .pnl-share-layout { grid-template-columns: 1fr; } }

.pnl-share-preview { display: flex; justify-content: center; }
#pnl-share-canvas {
    width: 100%;
    max-width: 340px;
    height: auto;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.10);
    box-shadow: 0 12px 32px rgba(0,0,0,0.35);
}

.pnl-share-controls { display: flex; flex-direction: column; margin-bottom: 8px;}
.pnl-share-field { margin-bottom: 15px; }

/* Stacks text-before / image / text-after vertically so the preview matches how the caption and
   image will actually lay out in the Discord/Telegram post. PnL card mode is untouched — its own
   preview is still just the single canvas, centered as before. */
.pnl-share-overlay.mode-chart .pnl-share-preview {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
}

.chart-share-mockup-text {
    background: #1a1f29;
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 8px;
    padding: 12px 14px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 13px;
    line-height: 1.65;
    color: rgba(255,255,255,0.85);
    white-space: pre-wrap;
    word-break: break-word;
}
/* Higher specificity than the base .chart-only-field show rule below, so an empty section
   (e.g. disclaimer turned off) collapses instead of leaving an empty box in the mockup. */
.pnl-share-overlay.mode-chart .chart-share-mockup-text:empty {
    display: none !important;
}

/* "No need to be conservative on space" — chart mode gets a noticeably bigger panel and preview
   column than the PnL card (which stays tuned to its 1080x1350 portrait card format). */
.pnl-share-overlay.mode-chart .pnl-share-modal {
    max-width: 1300px;
}
.pnl-share-overlay.mode-chart .pnl-share-layout {
    grid-template-columns: 640px 1fr;
}
.pnl-share-overlay.mode-chart #pnl-share-canvas {
    max-width: 100%;
}

/* Same modal is reused for both the PnL card and the raw chart snapshot; fields that only
   make sense for the PnL card (background image, strategy/emotion/pnl toggles) hide here. */
.pnl-share-modal-title {
    display: block;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 15px;
    font-weight: 600;
    color: #ffffff;
}

.pnl-share-overlay.mode-chart .pnl-only-field {
    display: none !important;
}

/* Hidden by default (PnL card mode); shown only once .mode-chart is on the overlay. */
.chart-only-field {
    display: none !important;
}
.pnl-share-overlay.mode-chart .chart-only-field {
    display: flex !important;
}

.pnl-share-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255,255,255,0.45);
    margin-bottom: 8px;
}

.pnl-share-help {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px; height: 16px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.3);
    font-size: 10px;
    cursor: help;
    color: rgba(255,255,255,0.6);
}
.pnl-share-help:hover .pnl-share-tooltip { display: block; }

.pnl-share-tooltip {
    display: none;
    position: absolute;
    top: 20px; left: 0;
    background: #05070A;
    border: 1px solid #C8A84B;
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 11px;
    line-height: 1.6;
    color: rgba(255,255,255,0.8);
    width: 300px;
    z-index: 10;
    text-transform: none;
    letter-spacing: normal;
}

.pnl-share-upload-btn {
    background: #1a1f29;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 6px;
    color: #fff;
    padding: 8px 12px;
    font-size: 13px;
    cursor: pointer;
}
.pnl-share-upload-btn:hover { border-color: #C8A84B; }

.pnl-share-upload-status { display: block; margin-top: 6px; font-size: 11px; color: rgba(255,255,255,0.5); }
.pnl-share-upload-status.success { color: #3DDC97; }
.pnl-share-upload-status.error { color: #FF5C5C; }

.pnl-share-checks { display: flex; gap: 20px; }
.pnl-share-check { display: flex; align-items: center; gap: 6px; font-size: 13px; color: rgba(255,255,255,0.7); cursor: pointer; }

.pnl-share-message {
    width: 100%;
    background: #1a1f29;
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 6px;
    padding: 8px 10px;
    color: rgba(255,255,255,0.5);
    font-family: inherit;
    font-size: 13px;
    resize: none;
    height: 85%;
}
.pnl-share-message:disabled { opacity: 0.5; cursor: not-allowed; }

.pnl-share-action-btn {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: #1a1f29;
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 6px;
    padding: 10px 8px;
    color: rgba(255,255,255,0.4);
    font-size: 11px;
    cursor: not-allowed;
}

.pnl-share-input {
    width: 100%;
    background: #1a1f29;
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 6px;
    padding: 8px 12px;
    color: #fff;
    font-family: inherit;
    font-size: 13px;
}
.pnl-share-input:focus { outline: none; border-color: #C8A84B; }

/* ── Action grid: 3 equal columns, rows size to content ── */
.pnl-share-actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: auto;
}

.pnl-share-action-btn.active { color: #05070A; background: #C8A84B; border-color: #C8A84B; cursor: pointer; }
.pnl-share-action-btn.active:hover { opacity: 0.9; }

/* ── Platform group (button + channel select), same grid cell width ── */
.pnl-share-platform-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-sizing: border-box;
}
.pnl-share-platform-group .pnl-share-action-btn { flex: 1; }

.pnl-share-target-select {
    width: 100%;
    box-sizing: border-box;
    background: #1a1f29;
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 6px;
    color: rgba(255,255,255,0.7);
    font-family: inherit;
    font-size: 11px;
    padding: 4px 6px;
    cursor: pointer;
}
.pnl-share-target-select:focus { outline: none; border-color: #C8A84B; }
.pnl-share-target-select:disabled { opacity: 0.4; cursor: not-allowed; }

/********************************/
/********** PNL SHARE ***********/
/********************************/


/********************************/
/************ NOTEBOOK **********/
/********************************/

/* Wraps the chart so the Notebook panel can overlay it without ever resizing/pushing it */
.chart-notebook-wrapper {
    position: relative;
    height: 100%;
    width: 100%;
}

/* Collapsed state: a slim vertical tab pinned to the chart's left edge */
.notebook-toggle-tab {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    z-index: 40;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    background: #1e293b;
    border: 1px solid #334155;
    border-left: none;
    border-radius: 0 6px 6px 0;
    color: #94a3b8;
    padding: 12px 6px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.35);
    transition: background 0.2s, color 0.2s;
    cursor: grab;
    touch-action: none; /* stops touch drags from also scrolling the page */
    user-select: none;
}

.notebook-toggle-tab:hover {
    background: #334155;
    color: #f8fafc;
}

.notebook-toggle-tab.dragging {
    cursor: grabbing;
    opacity: 0.85;
    transition: none; /* no lag while actively dragging */
}

.notebook-toggle-icon {
    writing-mode: horizontal-tb;
    font-size: 16px;
}

/* Hide the tab once the panel is open */
.chart-notebook-wrapper.notebook-open .notebook-toggle-tab {
    display: none;
}

/* The sliding panel itself: an absolute overlay, so it never affects chart layout/size */
.notebook-panel {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 380px;
    max-width: 90%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    background: #0f172a;
    border-right: 1px solid #334155;
    box-shadow: 6px 0 24px rgba(0, 0, 0, 0.5);
    padding: 10px;
    z-index: 45;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
}

.chart-notebook-wrapper.notebook-open .notebook-panel {
    transform: translateX(0);
}

.notebook-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.notebook-panel-title {
    font-weight: 600;
    color: #e2e8f0;
    font-size: 13px;
    letter-spacing: 0.3px;
}

.notebook-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.notebook-save-status {
    font-size: 10px;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.notebook-save-status.dirty { color: #94a3b8; }
.notebook-save-status.saving { color: #fbbf24; }
.notebook-save-status.saved { color: #34d399; }
.notebook-save-status.error { color: #f87171; }

.notebook-close-btn {
    background: transparent;
    border: 1px solid #334155;
    color: #94a3b8;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.notebook-close-btn:hover {
    background: #334155;
    color: #fff;
}

.notebook-guest-note {
    font-size: 11px;
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.08);
    border: 1px solid rgba(251, 191, 36, 0.3);
    border-radius: 4px;
    padding: 6px 8px;
    margin-bottom: 8px;
    line-height: 1.4;
}

.notebook-pages-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

.notebook-pages-list {
    flex: 1;
    display: flex;
    gap: 4px;
    overflow-x: auto;
    padding-bottom: 2px;
    min-width: 0;
}

.notebook-pages-list::-webkit-scrollbar { height: 4px; }
.notebook-pages-list::-webkit-scrollbar-thumb { background: #475569; border-radius: 10px; }

.notebook-page-chip {
    flex-shrink: 0;
    background: #1e293b;
    border: 1px solid #334155;
    color: #94a3b8;
    border-radius: 4px;
    padding: 5px 10px;
    font-size: 11px;
    cursor: pointer;
    white-space: nowrap;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all 0.2s;
}

.notebook-page-chip:hover {
    background: #334155;
    color: #f8fafc;
}

.notebook-page-chip.active {
    background: #3b82f6;
    border-color: #60a5fa;
    color: #ffffff;
    font-weight: 600;
}

.notebook-add-page-btn {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    background: #1e293b;
    border: 1px solid #334155;
    color: #94a3b8;
    border-radius: 4px;
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.notebook-add-page-btn:hover {
    background: #334155;
    color: #fbbf24;
}

.notebook-page-title-row {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
}

.notebook-page-title-input {
    flex: 1;
    min-width: 0;
}

.notebook-delete-page-btn {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    background: #1e293b;
    border: 1px solid #334155;
    color: #94a3b8;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.notebook-delete-page-btn:hover {
    background: #2d1a1a;
    color: #f87171;
    border-color: #7f1d1d;
}

.notebook-content-area {
    flex: 1;
    width: 100%;
    box-sizing: border-box;
    resize: none;
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 6px;
    color: #e2e8f0;
    font-size: 13px;
    line-height: 1.5;
    padding: 10px;
    font-family: 'IBM Plex Mono', monospace;
}

.notebook-content-area:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

/* Mobile: chart is fixed at 500px tall, so keep the panel from being wider than the screen */
@media (max-width: 767px) {
    .notebook-panel {
        width: 92vw;
        max-width: 340px;
    }
}

/********************************/
/************ NOTEBOOK **********/
/********************************/