/* assets/styles.css */

/* --- Explicit Light Mode Base Styles --- */
body:not(.dark-mode) {
  background-color: #ffffff; /* White background */
  color: #1a1a1a;           /* Dark text */
  margin: 0;
  padding: 0;
  transition: background-color 0.3s ease, color 0.3s ease;
}

#app-container:not(.dark-mode) {
  background-color: #ffffff;
  color: #1a1a1a;
  transition: background-color 0.3s ease, color 0.3s ease;
}
/* --- End Explicit Light Mode --- */


/* Basic Light Mode Defaults (usually covered by Bootstrap/Plotly White) */
body {
  background-color: #ffffff;
  color: #1a1a1a; /* Slightly softer black for text */
  margin: 0; /* Remove default body margin */
  padding: 0; /* Remove default body padding */
  transition: background-color 0.3s ease, color 0.3s ease;
}

#app-container {
  background-color: inherit; /* Inherit from body */
  color: inherit;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* --- Dark Mode Styles --- */
body.dark-mode {
  background-color: #1e1e1e; /* Dark grey background */
  color: #e0e0e0;           /* Light grey text */
  margin: 0; /* Ensure margin is zero in dark mode too */
  padding: 0; /* Ensure padding is zero in dark mode too */
}

#app-container.dark-mode {
  background-color: #1e1e1e;
  color: #e0e0e0;
}

/* Example: Style Dash Bootstrap Components in dark mode */
.dark-mode .card {
    background-color: #2a2a2a;
    border: 1px solid #444;
    color: #e0e0e0;
}

.dark-mode .dropdown-menu {
    background-color: #2a2a2a;
    border: 1px solid #444;
}
.dark-mode .dropdown-item {
    color: #e0e0e0;
}
.dark-mode .dropdown-item:hover {
    background-color: #3a3a3a;
    color: #ffffff;
}

.dark-mode .form-control,
.dark-mode .form-select {
    background-color: #2a2a2a;
    color: #e0e0e0;
    border: 1px solid #444;
}
.dark-mode .form-control::placeholder {
    color: #888;
}

.dark-mode .table { /* Style basic Bootstrap tables */
    color: #e0e0e0;
}
.dark-mode .table th,
.dark-mode .table td {
    border-color: #444;
}
.dark-mode .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.05);
}

/* Style specific components if necessary */

/* Ensure Plotly uses dark template (already handled in Python) */
/* But you might need overrides for specific plot elements if template isn't enough */
.dark-mode .js-plotly-plot .plotly,
.dark-mode .js-plotly-plot .plotly svg {
    background-color: transparent !important; /* Ensure plot background matches body */
}

/* Style the levels table specifically */
.dark-mode #spread-levels-table-v2 table {
    background-color: #111 !important; /* Override inline style if necessary */
    border: 1px solid #555;
}
.dark-mode #spread-levels-table-v2 th {
    color: #eee !important; /* Override inline style */
    border-bottom: 1px solid #555 !important;
}
.dark-mode #spread-levels-table-v2 td {
    color: #ddd !important; /* Override inline style */
}
/* Keep the highlight distinct */
.dark-mode #spread-levels-table-v2 tr[style*="darkgrey"] {
    background-color: #555 !important;
    color: #fff !important;
}
.dark-mode #spread-levels-table-v2 tr[style*="darkgrey"] td {
     color: #fff !important;
}

/* --- AG Grid Conditional Formatting --- */
.red-text {
    color: #dc3545 !important; /* Bootstrap danger red */
    font-weight: bold;
}

.green-text {
    color: #20c997 !important; /* Bootstrap success teal/green */
    font-weight: bold;
}

/* Basic Text Color Rules */
.green-text { color: green; }
.red-text { color: red; }

/* Light theme is default (no specific rule needed unless overriding) */

/* Dark Mode Theme */
.dark-mode {
    background-color: #222;
    color: #ddd;
}
/* Apply dark mode to the body or a main container if needed */
.dark-mode body {
    background-color: #222;
    color: #ddd;
}

.dark-mode .card { /* Style cards in dark mode */
    background-color: #333;
    border-color: #444;
    color: #ddd;
}
.dark-mode .table { /* Style tables in dark mode if needed */
    color: #ddd;
}
.dark-mode .form-control, .dark-mode .form-select { /* Style inputs */
    background-color: #444;
    border-color: #555;
    color: #ddd;
}
.dark-mode .btn-light { /* Make light buttons stand out */
     background-color: #555;
     border-color: #666;
     color: #ddd;
}
.dark-mode .nav-tabs .nav-link { /* Style tabs */
    color: #bbb;
    border-color: #444;
}
.dark-mode .nav-tabs .nav-link.active {
    color: #fff;
    background-color: #444;
    border-color: #555;
}
.dark-mode .list-group-item { /* Example for list groups if used */
    background-color: #333;
    border-color: #444;
}

/* Ensure AG Grid text colors inherit correctly or override */
.dark-mode .ag-theme-alpine .ag-cell {
    color: #ddd; /* Default text color for cells in dark mode */
}
.dark-mode .ag-theme-alpine .ag-header-cell-text {
    color: #ddd; /* Header text color */
}
.dark-mode .ag-theme-alpine .green-text {
    color: lightgreen; /* Make green stand out more in dark mode */
}
.dark-mode .ag-theme-alpine .red-text {
    color: #ff7777; /* Make red stand out more in dark mode */
}

/* Hide spinners on number inputs */
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none !important; 
    margin: 0; 
}
input[type=number] {
    -moz-appearance: textfield !important; /* Firefox */
    appearance: none !important; /* Standard property */
}

/* --- Ticker Type Colors --- */
.bank-ticker-color {
    color: #fd7e14 !important; /* Bootstrap orange */
    font-weight: bold;
}

.convertible-ticker-color {
    color: #6f42c1 !important; /* Bootstrap purple */
    font-weight: bold;
}

/* Optional: Style for OTHER, defaults to grid text color if omitted */
/* .other-ticker-color { color: inherit; } */

/* --- Dark Mode Ticker Type Colors --- */
.dark-mode .ag-theme-alpine .bank-ticker-color {
    color: #ffa94d !important; /* Lighter orange for dark mode */
}

.dark-mode .ag-theme-alpine .convertible-ticker-color {
    color: #be95f7 !important; /* Lighter purple for dark mode */
}

/* Optional: Dark mode style for OTHER */
/* .dark-mode .ag-theme-alpine .other-ticker-color { color: #ccc !important; } */

/* --- Custom Button Colors --- */

/* --- Banks Button --- */
/* Light Mode - Active */
.filter-button.filter-bank-active {
    background-color: #8b4513 !important; /* Saddle Brown */
    border-color: #8b4513 !important;
    color: white !important;
}
/* Light Mode - Inactive (Outline) */
.filter-button.filter-bank-inactive {
    color: #8b4513 !important;
    border-color: #8b4513 !important;
    background-color: transparent !important;
}
.filter-button.filter-bank-inactive:hover {
    background-color: #8b4513 !important;
    color: white !important;
}

/* Dark Mode - Active */
.dark-mode .filter-button.filter-bank-active {
    background-color: #cd853f !important; /* Peru */
    border-color: #cd853f !important;
    color: #1e1e1e !important;
}
/* Dark Mode - Inactive (Outline) */
.dark-mode .filter-button.filter-bank-inactive {
    color: #cd853f !important;
    border-color: #cd853f !important;
    background-color: transparent !important;
}
.dark-mode .filter-button.filter-bank-inactive:hover {
    background-color: #cd853f !important;
    color: #1e1e1e !important;
}

/* --- Convertibles Button --- */
/* Light Mode - Active */
.filter-button.filter-convertible-active {
    background-color: #6f42c1 !important; /* Bootstrap purple */
    border-color: #6f42c1 !important;
    color: white !important;
}
/* Light Mode - Inactive (Outline) */
.filter-button.filter-convertible-inactive {
    color: #6f42c1 !important;
    border-color: #6f42c1 !important;
    background-color: transparent !important;
}
.filter-button.filter-convertible-inactive:hover {
    background-color: #6f42c1 !important;
    color: white !important;
}

/* Dark Mode - Active */
.dark-mode .filter-button.filter-convertible-active {
    background-color: #be95f7 !important; /* Lighter purple */
    border-color: #be95f7 !important;
    color: #1e1e1e !important;
}
/* Dark Mode - Inactive (Outline) */
.dark-mode .filter-button.filter-convertible-inactive {
    color: #be95f7 !important;
    border-color: #be95f7 !important;
    background-color: transparent !important;
}
.dark-mode .filter-button.filter-convertible-inactive:hover {
    background-color: #be95f7 !important;
    color: #1e1e1e !important;
}

/* --- Others Button (uses btn-secondary defaults, but needs hover/inactive states) --- */
/* Light Mode - Inactive is default .btn-secondary outline */
/* Dark Mode - Inactive */
.dark-mode .filter-button.filter-other-inactive {
    color: #adb5bd !important; /* Match default dark secondary outline text */
    border-color: #adb5bd !important;
    background-color: transparent !important;
}
.dark-mode .filter-button.filter-other-inactive:hover {
    background-color: #adb5bd !important;
    color: #1e1e1e !important;
}

/* --- REMOVE Loading Cursor --- */
/* 
body.app-loading, 
body.app-loading * { 
    cursor: wait !important;
}
*/