/* CSS/additional.css */

/* ==========================================================================
   1.0 SPECIFIC COMPONENTS & VIEWS
   ========================================================================== */

/* 1.1 Analytics Grid Fix */
.analytics-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}

.stat-card {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    border-left: 4px solid #2c5364;
    display: flex;
    flex-direction: column;
}

.stat-card h4 {
    margin-bottom: 5px;
    color: #333;
}

/* Ensure Graph Wrapper has strict bounds so Chart.js renders labels */
.graph-card {
    min-height: 350px !important; 
}
.graph-wrapper canvas {
    width: 100% !important;
    height: 100% !important;
}

/* 1.2 Settings Page */
.settings-container { 
    max-width: 1200px; 
    margin: 0 auto; 
}

.settings-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
    gap: 20px; 
    margin-top: 20px; 
}

.setting-card { 
    background: #f8f9fa; 
    padding: 20px; 
    border-radius: 8px; 
    border-left: 4px solid #2c5364; 
    display: flex; 
    flex-direction: column; 
    justify-content: space-between; 
}

.setting-card h4 { 
    margin-bottom: 10px; 
    color: #2c5364; 
}

.setting-card p { 
    font-size: 13px; 
    color: #666; 
    margin-bottom: 15px; 
    line-height: 1.4; 
}

/* =========================================
   2.0 DESKTOP SETTINGS SPLIT & ALIAS BUILDER
   ========================================= */
.settings-split { display: flex; flex-direction: column; gap: 20px; }
.settings-right { display: none; }

@media (min-width: 901px) {
    .settings-container { max-width: 100% !important; width: 100% !important; padding: 0 30px !important; }
    .settings-split { flex-direction: row; align-items: stretch; height: calc(100vh - 120px); }
    .settings-left { flex: 0 0 350px; overflow-y: auto; padding-right: 10px; }
    .settings-right { display: flex; flex-direction: column; flex: 1; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); box-sizing: border-box; overflow: hidden; }
    .mobile-alias-card { display: none !important; }
    .theme-dark .settings-right { background: rgba(0,0,0,0.2); border: 1px solid #444; }
    
    /* Proper Sticky Columns + Gap above the footer */
    .col-left, .col-right {
        position: sticky;
        top: 20px;
        height: calc(100vh - 160px); 
        margin-bottom: 20px; 
        display: flex;
        flex-direction: column;
        z-index: 10;
        overflow-y: auto; 
    }
    
    .col-left::-webkit-scrollbar, .col-right::-webkit-scrollbar { width: 4px; }
    .col-left::-webkit-scrollbar-track, .col-right::-webkit-scrollbar-track { background: transparent; }
    .col-left::-webkit-scrollbar-thumb, .col-right::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; }
}

.desktop-alias-rows { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; align-content: flex-start; padding-right: 5px; }
.alias-row-item { display: flex; align-items: center; background: #f8f9fa; border: 1px solid #ddd; border-radius: 5px; padding: 6px 8px; border-left-width: 4px; border-left-style: solid; height: 38px; overflow: hidden; transition: transform 0.1s; }
.alias-row-item input { font-size: 14px; font-weight: 500; padding: 0 5px; width: 100%; min-width: 30px; border: none; background: transparent; outline: none; color: #333; }
.alias-row-item:hover { transform: scale(1.02); box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.desktop-alias-palette { display: grid; grid-template-columns: repeat(auto-fill, minmax(36px, 1fr)); gap: 12px; max-height: 250px; overflow-y: auto; padding: 5px; }
.desktop-alias-rows.locked .delete-btn { display: none !important; }
.desktop-alias-rows.compact-mode .alias-row-item { height: 28px; padding: 2px 4px; }
.desktop-alias-rows.compact-mode .alias-row-item input { font-size: 12px; }


/* ==========================================================================
   3.0 RESPONSIVE DESIGN (MOBILE OVERRIDES)
   ========================================================================== */
.hidden-desktop { display: none !important; }

@media (max-width: 900px) {
    body, html { overflow-x: hidden; height: auto; overflow-y: auto; }
    .main-content { padding: 0 !important; margin: 0 !important; overflow: visible; }
    .split-container { padding: 0 !important; margin: 0 !important; gap: 0 !important; flex-direction: column; height: auto; overflow: visible; }
    .pane { width: 100% !important; min-height: 60vh; padding: 10px 5px !important; margin: 0 !important; border-radius: 0 !important; box-shadow: none !important; border-left: none !important; border-right: none !important; }
    .dashboard-card { margin-left: 0 !important; margin-right: 0 !important; border-radius: 0 !important; border-left: none !important; border-right: none !important; }
    #my-list { height: 400px; flex: none; }
    .right-pane { padding-top: 10px; border-top: 2px solid #e9ecef; }
    .hidden-desktop { display: flex !important; }
    .resizer { display: none !important; }
    .mobile-pane-tabs { width: 100%; background: transparent; padding: 10px 5px; gap: 5px; justify-content: space-between; border-bottom: 2px solid #eee; box-sizing: border-box; border-radius: 0 !important; }
    .mobile-tab-btn { flex: 1; padding: 10px; border: 1px solid #ccc; background: #fff; border-radius: 5px; font-weight: bold; color: #555; cursor: pointer; text-align: center; transition: background 0.2s; }
    .mobile-tab-btn.active { background: #2c5364; color: #fff; border-color: #2c5364; }
    #mobile-active-bank-display { border-radius: 0 !important; width: 100% !important; box-sizing: border-box; }
    .mobile-hidden { display: none !important; }
    
    .list-item { flex-direction: column; align-items: flex-start !important; padding: 15px 10px !important; height: auto !important; }
    .list-item > div:first-child { width: 100%; margin-bottom: 12px; }
    .item-controls { width: 100%; flex-wrap: wrap; justify-content: flex-start; gap: 10px; }
    .item-controls input, .item-controls select { flex: 1 1 30%; margin: 0 !important; min-width: 80px; }
    
    .modal-overlay { padding: 10px; }
    .modal-content { width: 100% !important; max-height: 85vh !important; overflow-y: auto !important; padding: 15px; display: flex; flex-direction: column; }
    #new-row-form { width: 100%; box-sizing: border-box; padding: 15px; flex-direction: column; }
    .setting-group { flex: 1 1 100% !important; min-width: 100% !important; margin-bottom: 10px; }
    .bulk-action-panel { flex-direction: column; align-items: stretch !important; }
    .bulk-action-panel span, .bulk-action-panel select, .bulk-action-panel input, .bulk-action-panel button { width: 100% !important; margin-bottom: 5px !important; box-sizing: border-box; }

    /* Analytics Mobile Fix */
    .analytics-stats-grid { grid-template-columns: 1fr 1fr; }

    /* SEO Landing Page Mobile Ad Stacking */
    .seo-page-view { overflow-y: auto !important; }
    .landing-page { display: flex; flex-direction: column; gap: 20px; }
    .landing-col { display: contents; }
    
    /* Strict Order Stacking for the Landing Pages */
    .col-left > .ad-space:first-child { order: 1; min-height: 90px !important; max-height: 90px; width: 100%; }
    .col-middle > .landing-card { order: 2; }
    .col-right > .landing-card { order: 3; margin-top: 10px; }
    .col-left > .ad-space:last-child { order: 4; min-height: 250px !important; }
    .col-right > .ad-space { order: 5; min-height: 250px !important; }
}


/* ==========================================================================
   4.0 THEMES & OVERRIDES
   ========================================================================== */

/* --------------------------------------------------------
   4.1 DARK THEME
-------------------------------------------------------- */
body.theme-dark {
    --chart-line: #00e5ff; 
    --chart-fill: rgba(0, 229, 255, 0.15);
    background-color: #121212; 
    color: #ffffff;
    --sidebar-bg: #1a1a1a;
    --sidebar-text: #ffffff;
    --sidebar-hover: #333333;
    --sidebar-active: #2d2d2d;
    --sidebar-submenu-bg: #121212;
    --sidebar-submenu-text: #b0bec5;
}

body.theme-dark .sidebar-item { border-bottom: 1px solid rgba(255,255,255,0.05); }
body.theme-dark .sidebar-submenu a { border-bottom: 1px solid rgba(255,255,255,0.05); }
body.theme-dark .sidebar-submenu a:hover { background: rgba(255,255,255,0.05); color: #00e5ff; }

body.theme-dark .app-header { background: linear-gradient(135deg, #1a1a1a, #2c2c2c, #1f1f1f); border-bottom: 1px solid #333; }
body.theme-dark .section, body.theme-dark .dashboard-card, body.theme-dark .landing-card, body.theme-dark .split-container, body.theme-dark .modal-content, body.theme-dark .dropdown-content, body.theme-dark .cp-dropdown-content { background: #1e1e1e; color: #ffffff; box-shadow: 0 4px 6px rgba(0,0,0,0.5); }
body.theme-dark .right-pane, body.theme-dark .row-settings-grid { background: #121212; }
body.theme-dark h2, body.theme-dark h3, body.theme-dark h4, body.theme-dark p, body.theme-dark span:not(.status-pill):not(.color-dot), body.theme-dark label, body.theme-dark a { color: #ffffff !important; }
body.theme-dark .ad-space { background-color: #121212; border-color: #333; color: #555 !important; }
body.theme-dark .tab-btn { color: #ffffff; }
body.theme-dark .tab-btn.active { color: #00e5ff !important; border-bottom-color: #00e5ff !important; }
body.theme-dark .list-total, body.theme-dark #timeline-display { color: #00e5ff !important; }
body.theme-dark .list-item-container.incomplete .list-item { background-color: #833535 !important; border-left-color: #ff6b6b !important; }
body.theme-dark .warning-text { color: #ff6b6b !important; }
body.theme-dark .list-item, body.theme-dark .setting-card, body.theme-dark .stat-card, body.theme-dark .goal-card { background: #41474d; border-left-color: #00e5ff;}
body.theme-dark .pot-completion-info { background-color: #333; color: #00e5ff; border-color: #555; }
body.theme-dark .list-header, body.theme-dark .audit-grid-header { border-bottom-color: #444; color: #aaa !important; }
body.theme-dark .list-header span, body.theme-dark .audit-grid-header span { color: #aaa !important; }
body.theme-dark .status-pill.on-track { background-color: rgba(40, 167, 69, 0.15); color: #4ade80 !important; border: 1px solid #28a745; }
body.theme-dark .status-pill.off-track { background-color: rgba(220, 53, 69, 0.15); color: #ff8a8a !important; border: 1px solid #dc3545; }
body.theme-dark .bank-list-item { background: #2d2d2d; color: #ffffff; border-left-color: #00e5ff; }
body.theme-dark .bank-tab { background: transparent !important; color: #ffffff !important; border: 2px solid #ffffff !important; }
body.theme-dark .bank-tab span:not(.color-dot) { color: #ffffff !important; }
body.theme-dark .bank-tab:hover, body.theme-dark .bank-tab.active { background: #ffffff !important; color: #000000 !important; }
body.theme-dark .bank-tab:hover span:not(.color-dot), body.theme-dark .bank-tab.active span:not(.color-dot) { color: #000000 !important; }
body.theme-dark .bank-tab.active { box-shadow: 0 0 5px rgba(255,255,255,0.3); }
body.theme-dark .color-dot, body.theme-dark .item-group-dot { border: 2px solid #ffffff; }
body.theme-dark .bank-tab:hover .color-dot, body.theme-dark .bank-tab.active .color-dot { border-color: #000000 !important; }
body.theme-dark .add-bank-btn { background: transparent !important; color: #ffffff !important; border: 2px dashed #ffffff !important; }
body.theme-dark .add-bank-btn:hover { background: #ffffff !important; color: #000000 !important; }
body.theme-dark #my-list::-webkit-scrollbar-track { background: #121212; }
body.theme-dark #my-list::-webkit-scrollbar-thumb { background: #444; }
body.theme-dark #my-list::-webkit-scrollbar-thumb:hover { background: #666; }
body.theme-dark input, body.theme-dark select, body.theme-dark textarea { background-color: #2d2d2d !important; color: #ffffff !important; border: 1px solid #555 !important; }
body.theme-dark input[type="range"] { accent-color: #00e5ff; }
body.theme-dark .dropdown-btn, body.theme-dark .cp-menu-btn { color: #ffffff !important; border-color: #ffffff !important; }
body.theme-dark .dropdown-content a, body.theme-dark .cp-dropdown-content a { color: #ffffff !important; }
body.theme-dark .dropdown-content a:hover, body.theme-dark .cp-dropdown-content a:hover { background-color: #333; color: #00e5ff !important; }

body.theme-dark button:not(.secondary-btn, .tab-btn, .chevron-btn, .dropdown-btn, .cp-menu-btn, .delete-btn, .modal-close, .add-bank-btn, .filter-btn, .menu-toggle-btn) { background-color: #4463cd !important; color: #f8f0f0 !important; font-weight: bold; }
body.theme-dark button:hover:not(.secondary-btn, .tab-btn, .chevron-btn, .dropdown-btn, .cp-menu-btn, .delete-btn, .modal-close, .add-bank-btn, .filter-btn, .menu-toggle-btn) { background-color: #00b8cc; }
body.theme-dark .filter-btn { background-color: #4463cd; }
body.theme-dark .filter-btn:hover { background-color: #00b8cc; }
body.theme-dark .modal-content { border: 2px solid white !important; }
body.theme-dark #options-modal .setting-card { background: #333 !important; border-left-color: #00e5ff !important; }
body.theme-dark .bulk-action-panel { display: flex; align-items: center; gap: 10px; margin-bottom: 15px; background: #41474d !important; padding: 10px; border-radius: 5px; border-left: 4px solid #28a745; }
body.theme-dark .bulk-action-panel span, body.theme-dark .bulk-action-panel div { color: #ffffff !important; }
body.theme-dark .danger-zone-panel p { color: #000000 !important; }
body.theme-dark .danger-zone-panel h4 { color: #dc3545 !important; }
body.theme-dark .app-footer { border-top-color: #444; color: #aaa; }
body.theme-dark .app-footer a { color: #00e5ff; }
body.theme-dark .rich-text-content h1, body.theme-dark .rich-text-content h2, body.theme-dark .rich-text-content h3, body.theme-dark .rich-text-content p { color: #fff !important; }
body.theme-dark .alias-row-item { background: #333; border-color: #444; }
body.theme-dark .alias-row-item input { color: #fff; }
body.theme-dark .desktop-alias-palette { border-top-color: #444; }

/* --------------------------------------------------------
   4.2 BEACH THEME
-------------------------------------------------------- */
body.theme-beach {
    --chart-line: #e67e22;
    --chart-fill: rgba(230, 126, 34, 0.15);
    background-color: #fdfaf6; 
    color: #2c3e50;
    --sidebar-bg: #ffffff;
    --sidebar-text: #333333;
    --sidebar-hover: #f0f2f5;
    --sidebar-active: #e9ecef;
    --sidebar-submenu-bg: #F6D3B4; 
    --sidebar-submenu-text: #333333;
}

body.theme-beach .app-header { background: linear-gradient(135deg, #00b4db, #0083b0); }
body.theme-beach .list-item:not(.goal-card), body.theme-beach .dashboard-card, body.theme-beach .stat-card, body.theme-beach .setting-card, body.theme-beach .row-settings-grid { border-left-color: #e67e22; }
body.theme-beach .actual-amount { color: #0083b0; }
body.theme-beach .pot-completion-info { background-color: #fdfaf6; color: #e67e22; border-color: #e67e22; }
body.theme-beach .bank-tab { background-color: transparent !important; color: #333 !important; border: 2px solid #333 !important; }
body.theme-beach .bank-tab span:not(.color-dot) { color: #333 !important; }
body.theme-beach .bank-tab:hover, body.theme-beach .bank-tab.active { background-color: #333 !important; color: #ffffff !important; border: 2px solid #333 !important; }
body.theme-beach .bank-tab:hover span:not(.color-dot), body.theme-beach .bank-tab.active span:not(.color-dot) { color: #ffffff !important; }
body.theme-beach .dropdown-btn { background-color: rgba(255, 255, 255, 0.1) !important; color: #ffffff !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; }
body.theme-beach .dropdown-btn:hover { background-color: rgba(255, 255, 255, 0.2) !important; }
body.theme-beach .cp-menu-btn { background-color: transparent !important; border-color: #e67e22 !important; color: #e67e22 !important; }
body.theme-beach .dropdown-content, body.theme-beach .cp-dropdown-content { background-color: #0083b0; }
body.theme-beach .dropdown-content a, body.theme-beach .cp-dropdown-content a { color: #ffffff; border-bottom: 1px solid rgba(255,255,255,0.2); }
body.theme-beach .dropdown-content a:hover, body.theme-beach .cp-dropdown-content a:hover { background-color: #00b4db; color: #ffffff; }
body.theme-beach button:not(.secondary-btn, .tab-btn, .chevron-btn, .dropdown-btn, .cp-menu-btn, .delete-btn, .modal-close, .add-bank-btn, .filter-btn, .menu-toggle-btn) { background-color: #e67e22; color: #ffffff; }
body.theme-beach button:hover:not(.secondary-btn, .tab-btn, .chevron-btn, .dropdown-btn, .cp-menu-btn, .delete-btn, .modal-close, .add-bank-btn, .filter-btn, .menu-toggle-btn) { background-color: #d35400; }
body.theme-beach .filter-btn { background-color: #e67e22; }
body.theme-beach .filter-btn:hover { background-color: #d35400; }
body.theme-beach h2, body.theme-beach h3, body.theme-beach h4 { color: #0083b0; }
body.theme-beach .list-total, body.theme-beach #timeline-display { color: #e67e22; }
body.theme-beach input[type="range"] { accent-color: #e67e22; }
body.theme-beach .tab-btn.active { color: #e67e22 !important; border-bottom-color: #e67e22 !important; }
body.theme-beach #options-modal .setting-card { background: #fff !important; border-left-color: #e67e22 !important; }
body.theme-beach .bulk-action-panel { display: flex; align-items: center; gap: 10px; margin-bottom: 15px; background: #e7e7e7 !important; padding: 10px; border-radius: 5px; border-left: 4px solid #28a745; }
body.theme-beach .list-item { background: #e7e7e7 !important; }
body.theme-beach .row-settings-grid { background: #e67e2257 !important; }
body.theme-beach .app-footer a { color: #e67e22; }

/* --------------------------------------------------------
   4.3 COOL BLUE THEME
-------------------------------------------------------- */
body.theme-blue {
    --chart-line: #2980b9;
    --chart-fill: rgba(41, 128, 185, 0.15);
    background-color: #e3f2fd; 
    color: #154360;
    --sidebar-bg: #ffffff;
    --sidebar-text: #333333;
    --sidebar-hover: #f0f2f5;
    --sidebar-active: #e9ecef;
    --sidebar-submenu-bg: #D4E6F1; 
    --sidebar-submenu-text: #333333;
}

body.theme-blue .app-header { background: linear-gradient(135deg, #154360, #2980b9); }
body.theme-blue .section, body.theme-blue .dashboard-card, body.theme-blue .split-container { background: #ffffff; }
body.theme-blue .right-pane { background: #e3f2fd; }
body.theme-blue .list-item:not(.goal-card), body.theme-blue .stat-card, body.theme-blue .setting-card { background: #f4f9f9; border-left-color: #2980b9; }
body.theme-blue .actual-amount { color: #154360; }
body.theme-blue .pot-completion-info { background-color: #154360; color: #ffffff; border-color: #2980b9; }
body.theme-blue .bank-tab { background-color: transparent !important; color: #333 !important; border: 2px solid #333 !important; }
body.theme-blue .bank-tab span:not(.color-dot) { color: #333 !important; }
body.theme-blue .bank-tab:hover, body.theme-blue .bank-tab.active { background-color: #092133 !important; color: #ffffff !important; border: 2px solid #092133 !important; }
body.theme-blue .bank-tab:hover span:not(.color-dot), body.theme-blue .bank-tab.active span:not(.color-dot) { color: #ffffff !important; }
body.theme-blue .bank-tab.active { box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
body.theme-blue .dropdown-btn { background-color: rgba(255, 255, 255, 0.1) !important; color: #ffffff !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; }
body.theme-blue .dropdown-btn:hover { background-color: rgba(255, 255, 255, 0.2) !important; }
body.theme-blue .cp-menu-btn { background-color: transparent !important; border-color: #2980b9 !important; color: #2980b9 !important; }
body.theme-blue .dropdown-content, body.theme-blue .cp-dropdown-content { background-color: #154360; }
body.theme-blue .dropdown-content a, body.theme-blue .cp-dropdown-content a { color: #ffffff; border-bottom: 1px solid rgba(255,255,255,0.2); }
body.theme-blue .dropdown-content a:hover, body.theme-blue .cp-dropdown-content a:hover { background-color: #1f618d; color: #ffffff; }
body.theme-blue button:not(.secondary-btn, .tab-btn, .chevron-btn, .dropdown-btn, .cp-menu-btn, .delete-btn, .modal-close, .add-bank-btn, .filter-btn, .menu-toggle-btn) { background-color: #2980b9; color: #ffffff; }
body.theme-blue button:hover:not(.secondary-btn, .tab-btn, .chevron-btn, .dropdown-btn, .cp-menu-btn, .delete-btn, .modal-close, .add-bank-btn, .filter-btn, .menu-toggle-btn) { background-color: #1f618d; }
body.theme-blue .filter-btn { background-color: #2980b9; }
body.theme-blue .filter-btn:hover { background-color: #1f618d; }
body.theme-blue h2, body.theme-blue h3, body.theme-blue h4, body.theme-blue .list-total, body.theme-blue #timeline-display { color: #154360; }
body.theme-blue input[type="range"] { accent-color: #2980b9; }
body.theme-blue .tab-btn.active { color: #2980b9 !important; border-bottom-color: #2980b9 !important; }
body.theme-blue #options-modal .setting-card { background: #fff !important; border-left-color: #2980b9 !important; }
body.theme-blue .list-item { background: #e7f3f3 !important; }
body.theme-blue .row-settings-grid { background: #7bb5ef75 !important; }
body.theme-blue .app-footer a { color: #2980b9; }


/* ==========================================================================
   5.0 DYNAMIC BUTTON OVERRIDES
   ========================================================================== */

/* Default Light Theme - Grey Style */
button[onclick="window.toggleNewRowForm()"] {
    color: #6c757d !important;
    border-color: #6c757d !important;
    background-color: transparent !important;
}
button[onclick="window.toggleNewRowForm()"]:hover {
    background-color: #f8f9fa !important;
    color: #343a40 !important;
}

/* Dark Theme - Cyan Style */
body.theme-dark button[onclick="window.toggleNewRowForm()"] {
    color: #00e5ff !important;
    border-color: #00e5ff !important;
}
body.theme-dark button[onclick="window.toggleNewRowForm()"]:hover {
    background-color: rgba(0, 229, 255, 0.1) !important;
    color: #ffffff !important;
}

/* Beach Theme - Orange Style */
body.theme-beach button[onclick="window.toggleNewRowForm()"] {
    color: #e67e22 !important;
    border-color: #e67e22 !important;
}
body.theme-beach button[onclick="window.toggleNewRowForm()"]:hover {
    background-color: rgba(230, 126, 34, 0.1) !important;
    color: #d35400 !important;
}

/* Cool Blue Theme - Blue Style */
body.theme-blue button[onclick="window.toggleNewRowForm()"] {
    color: #2980b9 !important;
    border-color: #2980b9 !important;
}
body.theme-blue button[onclick="window.toggleNewRowForm()"]:hover {
    background-color: rgba(41, 128, 185, 0.1) !important;
    color: #1f618d !important;
}


/* ==========================================================================
   6.0 MODAL & INLINE STYLE OVERRIDES (Dark Mode Contrast Fix)
   ========================================================================== */

/* Dark Theme Overrides */
body.theme-dark .modal-content label,
body.theme-dark .modal-content span:not(.color-dot) {
    color: #e0e0e0 !important;
}

body.theme-dark .modal-content input,
body.theme-dark .modal-content select {
    background-color: #2d2d2d !important;
    color: #ffffff !important;
    border-color: #555 !important;
}

body.theme-dark .modal-content input::placeholder {
    color: #999 !important;
}

/* FIX: 'background' shorthand override */
body.theme-dark #cc-fields {
    background: #1e1e1e !important;
    border-left-color: #ff6b6b !important;
}

/* FIX: 'background' shorthand override */
body.theme-dark .bank-list-item {
    background: #2d2d2d !important;
    border: 1px solid #444 !important;
}

body.theme-dark .bank-list-item span,
body.theme-dark .bank-list-item input {
    color: #ffffff !important;
    background-color: transparent !important;
}

/* Beach Theme Overrides */
body.theme-beach #cc-fields {
    background: rgba(230, 126, 34, 0.05) !important;
    border-left-color: #e67e22 !important;
}
body.theme-beach .bank-list-item {
    background: #ffffff !important;
    border: 1px solid rgba(230, 126, 34, 0.3) !important;
}

/* Blue Theme Overrides */
body.theme-blue #cc-fields {
    background: rgba(41, 128, 185, 0.05) !important;
    border-left-color: #2980b9 !important;
}
body.theme-blue .bank-list-item {
    background: #ffffff !important;
    border: 1px solid rgba(41, 128, 185, 0.3) !important;
}