/* ============================================
   5-OVERRIDES.CSS
   Final optimizations and fixes
   ============================================ */

/* ============================================
   BASIC OVERRIDES
   ============================================ */

/* ============================================
   LAYOUT CONSISTENCY - Explicit Single Column
   Making the single-column layout explicit and intentional
   rather than happening as a side effect of container constraints
   ============================================ */

/* Charts: explicit single column for all screen sizes */
.charts-grid,
.charts-grid[data-chart-count] {
    grid-template-columns: 1fr !important;
}

/* Stats: explicit single column for all screen sizes */
.stats-grid {
    grid-template-columns: 1fr !important;
}

/* ============================================
   HEADER LOGO - Base Styles (Mobile First)
   ============================================ */

.header-logo {
    margin-left: -14px;
    border-radius: 0;
    padding: 6px 8px;
}

/* ============================================
   DESKTOP/TABLET ONLY - Sidebar Alignment Fix
   Apply only when sidebar is visible (≥769px)
   ============================================ */

@media (min-width: 769px) {
    /* Header transparent over sidebar area */
    .unified-header-bar {
        background: linear-gradient(
            to right,
            transparent 0,
            transparent 48px,
            var(--bg-secondary) 48px
        ) !important;
    }

    /* Sidebar extends to top */
    .sidebar {
        top: 0 !important;
        height: 100vh !important;
        padding-top: 4rem;
        box-sizing: border-box !important;
    }
}



.logs-viewer {
    max-height: 100%;
}



/* ============================================
   CRITICAL FIX: Panel and Page Scrolling
   ============================================ */

/**
 * ISSUE: Base .panel class has overflow: hidden which prevents
 * any scrolling within panels or their children.
 * 
 * FIX: Override panel overflow and ensure children can scroll.
 */

/* Remove overflow restriction from panels */
.panel {
    overflow: visible !important;
}

/* Ensure panel-content can scroll properly */
.panel-content {
    overflow-y: auto !important;
    height: 100%;
}

/* Ensure page views can scroll when opened in panels */
.charts-page-view,
.stats-page-view,
.account-page-view,
.logs-page-view {
    height: 100%;
    overflow-y: auto;
}

/* ============================================
   FIX: Hide Duplicate Headers in Panel Views
   ============================================ */

/**
 * ISSUE: When page-views are loaded into panels, they have their own
 * page-header which duplicates the panel-header.
 * 
 * FIX: Hide page-header when views are inside panel-content
 */

.panel-content .page-header {
    display: none !important;
}

/* Remove top padding from page views when in panels */
.panel-content .charts-page-view,
.panel-content .stats-page-view,
.panel-content .account-page-view,
.panel-content .logs-page-view {
    padding-top: 0;
}

/* ============================================
   BOT SETTINGS PANEL - IMPROVED VERSION
   (Remaining settings panel styles from original file...)
   ============================================ */

/* Position Calculator - Fixed overflow issues */
.position-calculator {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
    padding: 0;
    width: 100%;
    max-width: 100%;  /* Prevent overflow */
    overflow: hidden;  /* Hide accidental overflow */
}

/* Ensure all children respect width constraints */
.position-calculator * {
    box-sizing: border-box;
    max-width: 100%;
}

.calculator-inputs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-sm);
    width: 100%;
    grid-column: 1 / -1;
}

/* PANELS: Always use narrow layout (panels are 375-800px wide)
   Panel at 35% is always narrower than tablet breakpoint,
   so content should always stack more */
.panel-content .calculator-inputs,
.settings-panel .calculator-inputs {
    grid-template-columns: repeat(2, 1fr); /* Max 2 columns in panels */
}

/* Mobile: Stack completely */
@media (max-width: 768px) {
    .calculator-inputs {
        grid-template-columns: 1fr;
    }
}

.calculator-inputs .form-field-inline {
    margin-bottom: 0;
}

.calculator-current-fg {
    grid-column: 1;
    grid-row: 2;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    width: 100%;
    display: flex;
    align-items: center;
    min-height: 60px;
}

.calculator-result {
    grid-column: 2;
    grid-row: 2;
    background: var(--bg-tertiary);
    border: 1px solid var(--accent-primary);
    border-radius: var(--radius-sm);
    padding: var(--spacing-md);
    width: 100%;
}

.calculator-actions,
.calculator-info {
    grid-column: 1 / -1;
}

.calculator-fg-display {
    display: flex;
    align-items: center;
    justify-content: flex-start;  /* FIXED: Left-justify instead of space-between */
    flex-wrap: wrap;  /* FIXED: Allow F&G value to wrap when space is tight */
    gap: var(--spacing-md);
    width: 100%;
}

.calculator-fg-display label {
    font-size: var(--font-size-tiny);
    font-weight: var(--font-weight-medium);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    /* REMOVED: white-space: nowrap - allows label to wrap */
}

.fg-value-display {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;  /* FIXED: Allow age text to wrap if needed */
    gap: var(--spacing-xs);
    /* REMOVED: margin-left: auto - now left-justified instead of right-aligned */
}

.fg-number {
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-bold);
    color: var(--accent-primary);
}

.fg-age {
    font-size: var(--font-size-tiny);
    color: var(--text-muted);
}

.fg-unavailable {
    font-size: var(--font-size-small);
    color: var(--text-muted);
    font-style: italic;
}

.calculator-result label {
    display: block;
    font-size: var(--font-size-tiny);
    font-weight: var(--font-weight-medium);
    color: var(--text-secondary);
    margin-bottom: var(--spacing-sm);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.calculator-output {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    width: 100%;
}

.output-value {
    font-size: 1.25rem;
    font-weight: var(--font-weight-bold);
    color: var(--accent-primary);
}

.output-breakdown {
    font-size: var(--font-size-tiny);
    color: var(--text-secondary);
    font-family: 'Courier New', monospace;
}

.calculator-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-sm);
    width: 100%;
}

.calculator-actions button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-base);
    border: 1px solid var(--border);
    min-height: 40px;
    width: 100%;
}

.calculator-actions button .btn-icon {
    display: none;
}

.calculator-info {
    background: var(--bg-tertiary);
    border-left: 3px solid var(--accent-primary);
    border-radius: var(--radius-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    width: 100%;
}

.calculator-info .info-text {
    margin: 0;
    font-size: var(--font-size-small);
    color: var(--text-secondary);
    line-height: var(--line-height-base);
}

.calculator-info strong {
    color: var(--text-primary);
    font-weight: var(--font-weight-semibold);
}

/* Form Fields - Fixed label alignment and flexible label width */
.form-field-inline {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: var(--spacing-md);
    align-items: start;  /* CHANGED: was 'center' - allows labels to align at top */
    margin-bottom: var(--spacing-md);
    width: 100%;
}

/* PANELS: Narrower labels (more room for inputs) */
.panel-content .form-field-inline:not(.position-calculator .form-field-inline),
.settings-panel .form-field-inline:not(.position-calculator .form-field-inline) {
    grid-template-columns: 120px 1fr;
}

.position-calculator .form-field-inline {
    width: 100%;
    max-width: none;
    grid-template-columns: 1fr;
    gap: var(--spacing-xs);
    margin-bottom: 0;
}

.position-calculator .form-field-inline .form-label {
    text-align: left;
    font-size: var(--font-size-tiny);
    margin-bottom: var(--spacing-xs);
    padding-top: 0;  /* Override general padding for calculator */
}

.position-calculator .form-field-inline .form-input,
.position-calculator .form-field-inline .form-select {
    padding: var(--spacing-sm) var(--spacing-sm);
}

.form-field-inline .form-label {
    margin-bottom: 0;
    text-align: right;
    font-size: var(--font-size-small);
    padding-top: var(--spacing-sm);  /* Aligns with input field top */
    line-height: var(--line-height-tight);  /* Tighter spacing for wrapped text */
    word-wrap: break-word;  /* Allow long words to wrap */
    hyphens: auto;  /* Hyphenate long words if needed */
}

.form-field-dual {
    display: grid;
    grid-template-columns: 160px 1fr 1fr;
    gap: var(--spacing-md);
    align-items: start;  /* CHANGED: was 'center' - matches form-field-inline */
    margin-bottom: var(--spacing-md);
}

/* PANELS: Narrower labels */
.panel-content .form-field-dual,
.settings-panel .form-field-dual {
    grid-template-columns: 120px 1fr 1fr;
}

.form-field-dual .form-label {
    margin-bottom: 0;
    text-align: right;
    font-size: var(--font-size-small);
    padding-top: var(--spacing-sm);  /* Aligns with input field top */
    line-height: var(--line-height-tight);  /* Consistent with form-field-inline */
    word-wrap: break-word;
    hyphens: auto;
}

.form-input-with-unit {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.form-input-with-unit .form-input {
    flex: 1;
}

.form-input-with-unit .unit-label {
    font-size: var(--font-size-small);
    color: var(--text-secondary);
    font-weight: var(--font-weight-medium);
    min-width: 40px;
}

.position-calculator .form-input-with-unit .unit-label {
    font-size: var(--font-size-tiny);
    min-width: 30px;
}

.form-field-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    margin-bottom: var(--spacing-md);
}

.form-field-toggle .form-label {
    margin-bottom: 0;
    font-size: var(--font-size-small);
}

/* Limit Orders Display */
.limit-orders-display {
    margin-bottom: var(--spacing-lg);
}

.limit-orders-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: var(--spacing-sm);
}

.limit-order-badge {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-tiny);
    text-align: center;
    font-family: 'Courier New', monospace;
}

/* Settings Sections */
.settings-section {
    margin-bottom: var(--spacing-xl);
}

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-md);
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    margin-bottom: var(--spacing-md);
    cursor: pointer;
    transition: all var(--transition-base);
}

.section-header:hover {
    background: var(--bg-hover);
}

.section-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    margin: 0;
    color: var(--text-primary);
}

.section-toggle {
    transition: transform var(--transition-base);
}

.settings-section.collapsed .section-toggle {
    transform: rotate(-90deg);
}

.section-content {
    padding: 0 var(--spacing-md);
}

.settings-section.collapsed .section-content {
    display: none;
}

.form-fields-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

/* PANELS: Always single column (panels are narrow) */
.panel-content .form-fields-grid,
.settings-panel .form-fields-grid {
    grid-template-columns: 1fr;
}

/* Mobile: Stack completely */
@media (max-width: 768px) {
    .form-fields-grid {
        grid-template-columns: 1fr;
    }
}

/* Backups Panel */
.backups-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    border-bottom: 1px solid var(--border);
    background: var(--bg-secondary);
}

.backups-back {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-md);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all var(--transition-base);
    align-self: flex-start;
    min-height: 32px;
}

.backups-back:hover {
    background: var(--bg-hover);
    border-color: var(--accent-primary);
    color: var(--text-primary);
}

.backups-back svg {
    flex-shrink: 0;
}

.backups-title {
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin: 0;
}

.backups-actions {
    padding: var(--spacing-lg);
    border-bottom: 1px solid var(--border);
}

.btn-block {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
}

.backups-content {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-lg);
}

.backups-loading,
.backups-empty,
.backups-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-2xl);
    text-align: center;
}

.backups-loading p,
.backups-empty p {
    font-size: var(--font-size-small);
    color: var(--text-secondary);
    margin: var(--spacing-md) 0 0;
}

.backups-error p {
    font-size: var(--font-size-base);
    color: var(--danger);
    margin: 0;
}

.backup-item {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    transition: all var(--transition-base);
}

.backup-item:last-child {
    margin-bottom: 0;
}

.backup-item:hover {
    border-color: var(--accent-primary);
    background: var(--bg-secondary);
}

.backup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-sm);
    gap: var(--spacing-sm);
}

.backup-time {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
}

.backup-type {
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-tiny);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.backup-type.manual {
    background: rgba(196, 124, 78, 0.2);
    color: var(--accent-primary);
    border: 1px solid var(--accent-primary);
}

.backup-type.auto {
    background: rgba(142, 142, 142, 0.2);
    color: var(--text-muted);
    border: 1px solid var(--border);
}

.backup-meta {
    display: flex;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
    font-size: var(--font-size-small);
    color: var(--text-secondary);
}

.backup-size {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.backup-timestamp {
    font-family: 'Courier New', monospace;
    color: var(--text-muted);
    font-size: var(--font-size-tiny);
}

.backup-actions {
    display: flex;
    gap: var(--spacing-sm);
    padding-top: var(--spacing-sm);
    border-top: 1px solid var(--border);
}

.backup-actions .btn {
    flex: 1;
    min-height: 36px;
    font-size: var(--font-size-small);
    padding: var(--spacing-xs) var(--spacing-md);
}

/* Dropdown Selectors */
.form-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23b4b4b4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--spacing-sm) center;
    padding-right: calc(var(--spacing-md) + 20px);
}

.form-select::-ms-expand {
    display: none;
}

.form-select:focus {
    border-color: var(--accent-primary);
    outline: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23c47c4e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

.form-select option {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    padding: var(--spacing-sm);
}

/* Settings Footer */
.settings-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-lg);
    border-top: 1px solid var(--border);
    background: var(--bg-secondary);
    gap: var(--spacing-md);
}

.settings-actions {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
}

.settings-actions .btn {
    min-height: 40px;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.settings-actions #backupsBtn svg {
    transition: transform var(--transition-base);
}

.settings-actions #backupsBtn:hover svg {
    transform: translateX(2px);
}

/* ============================================
   RESPONSIVE - MOBILE STACKING
   ============================================ */

@media (max-width: 768px) {
    .position-calculator {
        grid-template-columns: 1fr;
    }
    
    .calculator-current-fg,
    .calculator-result {
        grid-column: 1;
        grid-row: auto;
    }
    
    .calculator-actions {
        grid-template-columns: 1fr;
    }
    
    .form-field-inline,
    .form-field-dual {
        grid-template-columns: 1fr;
        gap: var(--spacing-xs);
    }
    
    .form-field-inline .form-label,
    .form-field-dual .form-label {
        text-align: left;
    }
    
    .form-fields-grid {
        grid-template-columns: 1fr;
    }
    
    .backup-actions {
        flex-direction: column;
    }
    
    .backup-actions .btn {
        width: 100%;
    }
    
    .settings-footer {
        flex-direction: row !important;
        padding: var(--spacing-sm);
        gap: var(--spacing-sm);
        align-items: center !important;
    }
    
    .settings-status {
        font-size: var(--font-size-tiny);
        padding: var(--spacing-xs) var(--spacing-sm);
        flex-shrink: 1;
    }
    
    .settings-status .status-text {
        font-size: var(--font-size-tiny);
    }
    
    .settings-actions {
        flex-direction: row !important;
        gap: var(--spacing-xs);
        flex-shrink: 0;
    }
    
    .settings-actions .btn {
        font-size: var(--font-size-tiny);
        padding: var(--spacing-xs) var(--spacing-sm);
        min-height: 36px;
        white-space: nowrap;
        flex: 0 1 auto;
    }
    
    .settings-actions #backupsBtn span {
        display: none;
    }
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

.backup-item:focus-within {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

.section-header:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: -2px;
}

@media (prefers-reduced-motion: reduce) {
    .settings-status::before,
    .section-toggle,
    .backup-item {
        transition: none;
    }
    
    @keyframes pulse {
        0%, 100% { opacity: 1; }
    }
}

/* ============================================
   REFRESH BUTTON LOADING STATE
   ============================================ */

/**
 * Spinning animation for refresh button icon
 * Applied when data is being reloaded
 */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Loading state for refresh button */
.btn-refresh.loading {
    pointer-events: none;
    opacity: 0.6;
    cursor: not-allowed;
}

/* Spin the SVG icon inside refresh button */
.btn-refresh.loading svg {
    animation: spin 1s linear infinite;
}

/* Smooth transition when entering/exiting loading state */
.btn-refresh {
    transition: opacity var(--transition-base);
}

.btn-refresh svg {
    transition: opacity var(--transition-base);
}

/* Disable spin animation for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .btn-refresh.loading svg {
        animation: none;
        opacity: 0.5;
    }
}

/* ============================================
   BOT SETTINGS PANEL - BOT TYPE BADGE
   ============================================ */

/* Panel title with badge - SCOPED to settings panel only */
.settings-panel .panel-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.settings-bot-name {
    /* Keep existing title styles */
}

/* Bot type badge */
.bot-badge {
    display: inline-block;
    font-size: var(--font-size-tiny);
    font-weight: var(--font-weight-semibold);
    padding: 3px 10px;
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1;
}

/* Long bot styling */
.settings-panel[data-bot="long"] .bot-badge {
    background: rgba(94, 189, 144, 0.15);
    color: var(--success);
}

/* Short bot styling */
.settings-panel[data-bot="short"] .bot-badge {
    background: rgba(212, 88, 89, 0.15);
    color: var(--danger);
}

/* ============================================
   STATS PAGE - STYLING IMPROVEMENTS
   ============================================ */

/* Fix stat card hover effect to be more subtle */
.stat-card:hover {
    border-color: var(--border) !important;
    box-shadow: none !important;
    transform: translateY(-2px);
}

/* Improve card title styling */
.stat-card .card-title {
    font-size: var(--font-size-base) !important;
    font-weight: var(--font-weight-semibold) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: var(--text-secondary) !important;
    margin: 0 0 var(--spacing-lg) 0 !important;
    padding-bottom: var(--spacing-md) !important;
}

/* Stat metric rows - improve spacing and alignment */
.stat-metric-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm) 0;
    border-bottom: 1px solid rgba(68, 68, 68, 0.3);
}

.stat-metric-row:last-child {
    border-bottom: none;
}

.stat-metric-row .label {
    font-size: var(--font-size-small);
    color: var(--text-secondary);
    font-weight: var(--font-weight-normal);
}

.stat-metric-row .value {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    text-align: right;
}

/* Color-coded values */
.stat-metric-row .value.positive {
    color: var(--success);
}

.stat-metric-row .value.negative {
    color: var(--danger);
}

.stat-metric-row .value.warning {
    color: var(--warning);
}

.stat-metric-row .value.neutral {
    color: var(--text-secondary);
}

/* Bot comparison columns */
.bot-compare-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
}

.bot-column h4 {
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--accent-primary);
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    border-bottom: 2px solid var(--accent-primary);
}

/* Status badges for stop indicators */
.status-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-size: var(--font-size-tiny);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-badge.active {
    background: rgba(94, 189, 144, 0.15);
    color: var(--success);
}

.status-badge.inactive {
    background: rgba(142, 142, 142, 0.15);
    color: var(--text-muted);
}

/* Empty state styling */
.stat-card .empty-state {
    padding: var(--spacing-xl) var(--spacing-lg);
    text-align: center;
    color: var(--text-muted);
    font-size: var(--font-size-small);
}

/* Loading state styling */
.stat-card .loading-state {
    padding: var(--spacing-xl) var(--spacing-lg);
    text-align: center;
    color: var(--text-muted);
    font-size: var(--font-size-small);
}

/* Performance grid improvements */
.performance-grid {
    display: grid;
    gap: var(--spacing-sm);
}

/* Responsive adjustments for stats */
@media (max-width: 768px) {
    .bot-compare-columns {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
    }
}

/* ============================================
   ACCOUNT PAGE - LAYOUT IMPROVEMENTS
   ============================================ */

/* Remove max-width constraint for better space usage */
.account-page-view {
    max-width: 1200px !important;
    width: 100%;
    overflow-x: hidden;
}

/* Full-width layout for Account Summary and Risk Metrics - cleaner, no overflow */
.account-overview-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

/* Remove margin from cards inside grid to prevent height issues */
.account-overview-grid .account-summary-card,
.account-overview-grid .risk-metrics-card {
    margin-bottom: 0 !important;
}

/* Make sections fill grid cell height and align self stretch */
.account-overview-grid .account-section {
    display: flex;
    flex-direction: column;
    align-self: stretch; /* Explicitly stretch to grid cell height */
}

/* Make section titles not grow */
.account-overview-grid .section-title {
    flex-shrink: 0;
}

/* Make cards stretch to fill remaining section height */
.account-overview-grid .account-summary-card,
.account-overview-grid .risk-metrics-card {
    flex: 1; /* Grow to fill available space */
    display: flex;
    flex-direction: column;
}

/* Section titles - better styling */
.account-section .section-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-md);
}

/* Account metric rows - subtle dividers */
.account-metric-row {
    border-bottom: 1px solid rgba(68, 68, 68, 0.3) !important;
    min-height: 48px !important;
    align-items: center !important;
}

/* Risk metrics card styling */
.risk-metrics-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
}

/* Inside grid, risk metrics should space out rows to match account summary */
.account-overview-grid .risk-metrics-card {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important; /* Space out the 3 rows */
}

/* Positions container - single column for better readability of dense information */
.positions-container {
    grid-template-columns: 1fr !important;
}

/* Position cards - better internal spacing */
.position-card {
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.position-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* Position card body - 3 columns on wider cards */
.position-card-body {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--spacing-md) var(--spacing-lg) !important;
}

@media (min-width: 1200px) {
    .position-card-body {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* Position metric improvements */
.position-metric-label {
    font-size: var(--font-size-tiny) !important;
    color: var(--text-muted) !important;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.position-metric-value {
    font-size: var(--font-size-base) !important;
    font-weight: var(--font-weight-semibold) !important;
}

.position-metric-value.positive {
    color: var(--success);
}

.position-metric-value.negative {
    color: var(--danger);
}

/* Position symbol styling */
.position-symbol {
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}

/* Empty state for positions */
.positions-container .empty-state {
    grid-column: 1 / -1;
    padding: var(--spacing-2xl);
    text-align: center;
    color: var(--text-muted);
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

/* ============================================
   UNIFIED SETTINGS PANEL - FIXES
   ============================================ */

/* Fix 2px borders to 1px for consistency */
.sound-toggle-card,
.sound-option {
    border: 1px solid var(--border) !important;
}

/* API card borders moved to API Configuration section at end of file */

/* Sound option improvements */
.sound-option {
    transition: all var(--transition-base);
}

.sound-option:hover {
    border-color: var(--accent-primary) !important;
    transform: translateY(-1px);
}

.sound-option.active {
    border-color: var(--accent-primary) !important;
    background: rgba(196, 124, 78, 0.05) !important;
}

/* Sound option header spacing */
.sound-option-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--spacing-lg);
}

/* Sound option info */
.sound-option-info {
    flex: 1;
}

.sound-option-name {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
    text-transform: capitalize;
}

.sound-option-desc {
    font-size: var(--font-size-small);
    color: var(--text-secondary);
    margin-bottom: var(--spacing-xs);
    line-height: var(--line-height-base);
}

.sound-option-specs {
    font-size: var(--font-size-tiny);
    color: var(--text-muted);
    font-family: 'Courier New', monospace;
}

/* Sound option controls */
.sound-option-controls {
    display: flex;
    gap: var(--spacing-sm);
    flex-shrink: 0;
}

/* Sound test button */
.sound-test-btn {
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all var(--transition-base);
    white-space: nowrap;
}

.sound-test-btn:hover {
    background: var(--bg-hover);
    border-color: var(--text-secondary);
    transform: translateY(-1px);
}

.sound-test-btn:active {
    transform: translateY(0);
}

/* Sound select button */
.sound-select-btn {
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all var(--transition-base);
    min-width: 80px;
}

.sound-select-btn:hover {
    background: var(--bg-tertiary);
    border-color: var(--accent-primary);
}

/* Selected state */
.sound-select-btn.selected {
    background: rgba(196, 124, 78, 0.15);
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    font-weight: var(--font-weight-semibold);
}

.sound-select-btn.selected:hover {
    background: rgba(196, 124, 78, 0.2);
}

/* Sound settings intro text */
.sound-settings-intro {
    font-size: var(--font-size-small);
    color: var(--text-secondary);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--spacing-lg);
    padding: var(--spacing-md);
    background: var(--bg-tertiary);
    border-left: 3px solid var(--accent-primary);
    border-radius: var(--radius-sm);
}

/* Sound toggle card improvements */
.sound-toggle-card {
    margin-bottom: var(--spacing-xl) !important;
}

.sound-toggle-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-lg);
}

.sound-toggle-info h3 {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
}

.sound-toggle-info p {
    font-size: var(--font-size-small);
    color: var(--text-secondary);
    margin: 0;
}

/* Sound toggle button improvements */
.sound-toggle-btn {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-base);
}

.sound-toggle-btn:hover {
    background: var(--bg-hover);
    border-color: var(--text-secondary);
}

.sound-toggle-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.sound-status-text {
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}

.sound-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--success);
    display: flex;
    align-items: center;
    justify-content: center;
}

.sound-toggle-btn.muted .sound-status-dot {
    background: var(--text-muted);
}

/* API card header styles moved to API Configuration section at end of file */

/* Responsive adjustments for sound options */
@media (max-width: 768px) {
    .sound-option-header {
        flex-direction: column;
        gap: var(--spacing-md);
    }
    
    .sound-option-controls {
        width: 100%;
    }
    
    .sound-test-btn,
    .sound-select-btn {
        flex: 1;
    }
}

/* ============================================
   OPTION 2: SLIDERS (Modern)
   Clean, represents adjustable settings
   ============================================ */


.sidebar-item[data-view="settings"] .sidebar-icon * {
    display: none;
}

.sidebar-item[data-view="settings"] .sidebar-icon {
    background-color: currentColor;
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* ============================================
   LOGO HOVER EFFECT - BRIGHTNESS INSTEAD OF BACKGROUND
   
   Instead of changing background color on hover,
   brighten the logo image itself for a cleaner effect
   ============================================ */

/* Remove background hover effect */
.header-logo:hover {
    background: transparent !important;
}

/* Add brightness to logo on hover */
.header-logo:hover .logo-image {
    filter: brightness(1.3);
    transform: scale(1.05);
}



/* Optional: Add slight glow effect on hover (subtle) */

.header-logo:hover .logo-image {
    filter: brightness(1.3) drop-shadow(0 0 8px rgba(196, 124, 78, 0.4));
    transform: scale(1.05);
}

/* ============================================
   BOT SETTINGS ICON - MATCH SIDEBAR SLIDERS ICON
   
   Replace the gear icon with sliders icon to maintain
   visual consistency across the application
   ============================================ */

.card-settings-btn .icon-settings * {
    display: none;
}

.card-settings-btn .icon-settings {
    background-color: currentColor;
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.sidebar-footer {
    margin-top: 0;
}


/* ============================================
   COMPLETE PANEL FIX - Final Version
   Fixed: % units inside inputs, mobile 2-column layout
   ============================================ */

/* ============================================
   PANELS: Force 2 columns max
   ============================================ */

.panel .settings-section-body,
.settings-panel .settings-section-body {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--spacing-md) !important;
}

/* ============================================
   FIELD DUAL: Full width with level as header
   ============================================ */

.panel .field-dual,
.settings-panel .field-dual {
    grid-column: 1 / -1 !important;
    display: grid;
    grid-template-columns: 1fr 1fr; /* Just Activation | Callback */
    gap: var(--spacing-md);
    align-items: start;
    width: 100%;
    padding: var(--spacing-sm);
    background: rgba(255, 255, 255, 0.02);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    margin-bottom: var(--spacing-sm);
}

/* Level label as header */
.field-dual .field-dual-main-label {
    grid-column: 1 / -1; /* Full width */
    font-weight: var(--font-weight-semibold);
    color: var(--accent-primary);
    font-size: var(--font-size-small);
    margin-bottom: var(--spacing-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Each item (Activation or Callback) - with positioned unit */
.field-dual-item {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    width: 100%;
    position: relative; /* Positioning context for unit */
}

.field-dual-item .form-label {
    font-size: var(--font-size-tiny);
    color: var(--text-secondary);
    margin-bottom: 0;
}

/* Input with space for unit on right */
.field-dual-item .form-input {
    width: 100%;
    padding-right: 35px !important; /* Space for % sign */
}

/* Unit (%) positioned inside input field - vertically centered */
.field-dual-item .form-input-unit {
    position: absolute;
    right: var(--spacing-sm);
    bottom: 12px; /* Fixed position works for standard ~40px inputs */
    font-size: var(--font-size-medium);
    color: var(--text-muted);
    pointer-events: none;
    line-height: 1;
}

/* ============================================
   FIELD INLINE: Proper alignment
   ============================================ */

.panel .field-inline,
.settings-panel .field-inline {
    align-items: start !important;
}

.panel .field-inline .form-label,
.settings-panel .field-inline .form-label {
    padding-top: var(--spacing-sm) !important;
    line-height: var(--line-height-tight) !important;
    word-wrap: break-word !important;
    hyphens: auto !important;
}

/* ============================================
   SINGLE ITEMS: Span full width if needed
   ============================================ */

.panel .settings-section-body > .grid-col-span-2 {
    grid-column: 1 / -1;
}

/* ============================================
   CALCULATOR: Keep 2 columns
   ============================================ */

.panel .calculator-inputs {
    grid-template-columns: repeat(2, 1fr) !important;
}

/* ============================================
   OVERFLOW PREVENTION
   ============================================ */

.panel .settings-section-body > * {
    max-width: 100% !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
}

.panel .form-input-wrapper {
    max-width: 100% !important;
}

.panel .calculator-current-fg,
.panel .calculator-result,
.panel .calculator-actions,
.panel .calculator-info {
    max-width: 100% !important;
    overflow: hidden !important;
}

/* ============================================
   MOBILE: Keep 2 columns for calculator & trailing stops
   ============================================ */

@media (max-width: 768px) {
    .panel .settings-section-body,
    .settings-panel .settings-section-body {
        grid-template-columns: 1fr !important;
    }
    
    /* Calculator/Trigger points: KEEP 2 columns on mobile */
    .panel .calculator-inputs {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--spacing-xs);
    }
    
    /* Field dual: Keep 2 columns (Activation | Callback) */
    .panel .field-dual,
    .settings-panel .field-dual {
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-sm);
    }
    
    .field-dual .field-dual-main-label {
        grid-column: 1 / -1;
        margin-bottom: var(--spacing-xs);
    }
}

/* ============================================
   END OF COMPLETE PANEL FIX
   ============================================ */

/* ============================================
   API CONFIGURATION STYLES
   Consolidated from 6-api-overrides.css (November 5, 2025)
   
   INCLUDES:
   - API Keys section styling
   - Status displays
   - Form layouts and inputs
   - Trading mode selector
   - Settings panel width fixes
   
   Browser Support:
   - Uses :has() selector (Chrome 105+, Firefox 121+, Safari 15.4+)
   - Fallback provided for older browsers using grid-column
   ============================================ */

/* ============================================
   BOT API KEYS SECTION
   Styling for the API Keys tab in bot settings
   ============================================ */

/* Main container */
.api-keys-section {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    width: 100%;
}

/* ============================================
   STATUS DISPLAY
   ============================================ */

.api-keys-status {
    padding: var(--spacing-md);
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.status-indicator {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-small);
}

.status-indicator.success {
    color: var(--success);
}

.status-indicator.warning {
    color: var(--warning);
}

.status-indicator.error {
    color: var(--danger);
}

/* Status icon - SVG container */
.status-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.status-icon svg {
    width: 100%;
    height: 100%;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.status-text {
    font-weight: var(--font-weight-medium);
}

/* Status Details - More compact on desktop */
.status-details {
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--border);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-sm);
}

@media (min-width: 600px) {
    .status-details {
        grid-template-columns: repeat(2, 1fr);
    }
}

.status-details > div {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-small);
}

.status-details strong {
    color: var(--text-secondary);
    font-weight: var(--font-weight-medium);
    min-width: 80px;
}

.status-details code {
    background: var(--bg-primary);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    font-family: 'Courier New', monospace;
    font-size: var(--font-size-tiny);
    color: var(--text-primary);
}

.status-message {
    margin-top: var(--spacing-sm);
    color: var(--text-muted);
    font-size: var(--font-size-small);
}

/* ============================================
   API KEYS FORM
   ============================================ */

.api-keys-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

/* Responsive grid on larger screens for better horizontal space usage */
@media (min-width: 600px) {
    .api-keys-form {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-md);
    }
    
    /* API Key field - full width to accommodate long strings */
    .api-keys-form > .form-group:nth-child(1) {
        grid-column: 1 / -1;
    }
    
    /* API Secret field - full width to accommodate long strings */
    .api-keys-form > .form-group:nth-child(2) {
        grid-column: 1 / -1;
    }
    
    /* Trading Mode - full width for important decision */
    .api-keys-form > .form-group:nth-child(3) {
        grid-column: 1 / -1;
    }
    
    /* Form actions - full width, buttons will be side by side naturally */
    .form-actions {
        grid-column: 1 / -1;
    }
}

/* Even better utilization on very wide screens */
@media (min-width: 900px) {
    .api-keys-form {
        grid-template-columns: repeat(3, 1fr);
    }
    
    /* On very wide screens, we can arrange differently */
    .api-keys-form > .form-group:nth-child(1) {
        grid-column: 1 / 3; /* API Key takes 2 columns */
    }
    
    .api-keys-form > .form-group:nth-child(2) {
        grid-column: 1 / 3; /* API Secret takes 2 columns */
    }
    
    .api-keys-form > .form-group:nth-child(3) {
        grid-column: 1 / -1; /* Trading mode still full width */
    }
    
    .form-actions {
        grid-column: 1 / -1;
    }
}

/* ============================================
   INPUT GROUP (for password with toggle)
   ============================================ */

.input-group {
    display: flex;
    gap: var(--spacing-sm);
    align-items: stretch;
}

.input-group .form-input {
    flex: 1;
}

.input-group .btn-icon {
    flex-shrink: 0;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: var(--font-size-base);
    cursor: pointer;
    transition: all var(--transition-base);
    min-height: 40px;
    min-width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.input-group .btn-icon:hover {
    background: var(--bg-hover);
    border-color: var(--text-secondary);
}

/* Icon inside button */
.input-group .btn-icon svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ============================================
   TRADING MODE SELECTOR
   ============================================ */

.trading-mode-selector {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

/* Horizontal layout on tablet and desktop */
@media (min-width: 600px) {
    .trading-mode-selector {
        flex-direction: row;
        gap: var(--spacing-md);
    }
}

.radio-option {
    display: flex;
    align-items: center;
    padding: var(--spacing-md);
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-base);
    background: var(--bg-tertiary);
    flex: 1;
}

.radio-option:hover {
    border-color: var(--text-secondary);
    background: var(--bg-hover);
}

.radio-option input[type="radio"] {
    margin: 0;
    margin-right: var(--spacing-md);
    cursor: pointer;
    flex-shrink: 0;
}

/* Test Mode styles */
.radio-option.test-mode:has(input:checked) {
    border-color: var(--accent-primary);
    background: rgba(196, 124, 78, 0.05);
}

/* Live Mode styles */
.radio-option.live-mode:has(input:checked) {
    border-color: var(--danger);
    background: rgba(212, 88, 89, 0.05);
}

.radio-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    flex: 1;
}

/* Mode icon - SVG container */
.mode-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mode-icon svg {
    width: 100%;
    height: 100%;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Test mode icon styling */
.radio-option.test-mode .mode-icon {
    color: var(--accent-primary);
}

.radio-option.test-mode:has(input:checked) .mode-icon {
    color: var(--accent-primary);
}

/* Live mode icon styling */
.radio-option.live-mode .mode-icon {
    color: var(--danger);
}

.radio-option.live-mode:has(input:checked) .mode-icon {
    color: var(--danger);
}

.mode-text {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.mode-text strong {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}

.mode-text small {
    font-size: var(--font-size-small);
    color: var(--text-secondary);
    font-weight: var(--font-weight-normal);
}

/* ============================================
   FORM ACTIONS
   ============================================ */

.form-actions {
    display: flex;
    gap: var(--spacing-sm);
    padding-top: var(--spacing-sm);
}

.form-actions button {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all var(--transition-base);
    min-height: 40px;
}

/* Button icon - SVG */
.form-actions .btn-icon {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.form-actions .btn-icon svg {
    width: 100%;
    height: 100%;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ============================================
   API KEYS WARNING BOX
   ============================================ */

.api-keys-warning {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: rgba(212, 88, 89, 0.1);
    border: 2px solid var(--danger);
    border-radius: var(--radius-sm);
    color: var(--danger);
}

/* Warning icon - SVG container */
.warning-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.warning-icon svg {
    width: 100%;
    height: 100%;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.warning-content {
    flex: 1;
}

.warning-content strong {
    display: block;
    margin-bottom: var(--spacing-xs);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
}

.warning-content p {
    margin: 0;
    font-size: var(--font-size-small);
    line-height: var(--line-height-base);
    color: var(--danger);
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 599px) {
    .form-actions {
        flex-direction: column;
    }
    
    .form-actions button {
        width: 100%;
    }
}

/* ============================================
   SETTINGS PANEL API FORM WIDTH FIX
   
   Problem: .settings-section-body has a 3-column grid that constrains children
   Solution: Override to block display for API forms using :has() selector
   Fallback: grid-column span for browsers without :has() support
   ============================================ */

/* Fix ONLY the settings-section-body that contains the API keys form */
.settings-panel .settings-section-body:has(.api-keys-section) {
    display: block !important; /* Remove grid layout */
    width: 100% !important;
    max-width: none !important;
}

/* Fallback for browsers without :has() support */
.settings-panel .api-keys-section {
    grid-column: 1 / -1 !important; /* Span all columns */
    width: 100% !important;
    max-width: none !important;
}

/* Ensure no constraints on the form containers */
.settings-panel .api-keys-form,
.settings-panel .api-keys-form .form-group {
    width: 100% !important;
    max-width: none !important;
}

/* Inputs stretch to parent */
.settings-panel .api-keys-form input.form-input,
#botApiKeyInput,
#botApiSecretInput {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
}

/* Input group */
.settings-panel .api-keys-form .input-group {
    width: 100% !important;
    display: flex !important;
}

.settings-panel .api-keys-form .input-group .form-input {
    flex: 1 !important;
}

/* ============================================
   API CARD STYLES (Previously in main overrides)
   ============================================ */

/* Fix 2px borders to 1px for consistency */
.api-status-card,
.api-config-card {
    border: 1px solid var(--border) !important;
}

/* API card headers */
.api-status-header,
.api-config-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--border);
}

.api-status-header h3,
.api-config-header h3 {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin: 0;
}

.api-config-header p {
    font-size: var(--font-size-small);
    color: var(--text-secondary);
    margin: 0;
}

/* ============================================
   END OF API CONFIGURATION STYLES
   ============================================ */