/* =============================================================================
   COMPONENTS.CSS - Shared UI Component Styles
   =============================================================================
   This file contains standardized component styles used across the application.
   Import this file after styles.css to use these components.

   IMPORTANT: All colors must use theme variables defined in styles.css
   Do not use explicit hex colors - add new variables to :root if needed.

   Contents:
   1. Summary Stats Cards
   2. Chart Cards
   3. Data Tables (Light Theme)
   4. Data Tables (Dark Theme)
   5. Buttons
   6. Form Inputs
   7. Dropdowns
   8. Tab Navigation
   9. Page Headers
   10. Section Containers
   11. Ticker Pills & Badges
   12. Search Suggestions
   13. Progress Bars
   14. Modal Dialogs
   15. Utility Classes
   ============================================================================= */

/* =============================================================================
   1. SUMMARY STATS CARDS
   Displays key metrics in a horizontal grid layout
   Usage: Accounts page aggregate stats, dashboard summaries
   ============================================================================= */

.stats-card {
    background: var(--theme-bg-darkest);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1.5rem;
    padding: 1rem 1.5rem;
    background: var(--theme-bg-medium);
    border-radius: 8px;
}

.stats-item {
    text-align: center;
}

.stats-label {
    display: block;
    font-size: 0.85rem;
    color: var(--theme-text-muted);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stats-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--theme-text-light);
}

.stats-value.positive {
    color: var(--theme-positive);
}

.stats-value.negative {
    color: var(--theme-negative);
}

/* =============================================================================
   2. CHART CARDS
   Container for charts with header controls and optional footer
   Usage: Performance charts, allocation charts, any Chart.js visualizations
   ============================================================================= */

.chart-card {
    background: var(--theme-bg-darkest);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.chart-card-light {
    background: var(--theme-bg-white);
}

.chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--chart-grid-color);
    background: var(--theme-bg-darkest);
    min-height: 62px;
    box-sizing: border-box;
}

.chart-header h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
    color: var(--theme-text-light);
}

.chart-subtitle {
    font-size: 0.9rem;
    color: var(--theme-text-muted);
}

.chart-controls {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.chart-body {
    padding: 1rem 1.5rem;
    min-height: 350px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chart-footer {
    padding: 0.75rem 1.5rem;
    background: var(--theme-bg-darkest);
    display: flex;
    justify-content: center;
    gap: 0.5rem;
}

/* Chart grid layouts */
.charts-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.charts-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

@media (max-width: 1600px) {
    .charts-grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 1000px) {
    .charts-grid-2,
    .charts-grid-3 {
        grid-template-columns: 1fr;
    }
}

/* =============================================================================
   3. DATA TABLES (Light Theme)
   White background tables for holdings, transactions, editable data
   Usage: Holdings tables, Target Editor, activity logs
   ============================================================================= */

.table-container {
    overflow-x: auto;
    border-radius: 8px;
    background: var(--theme-bg-white);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    color: var(--theme-text-dark);
}

.data-table th,
.data-table td {
    padding: 0.625rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--theme-table-border);
}

.data-table th {
    background: var(--theme-table-header);
    font-weight: 600;
    color: var(--theme-text-dark);
    white-space: nowrap;
}

.data-table th.sortable {
    cursor: pointer;
    user-select: none;
}

.data-table th.sortable:hover {
    background: var(--theme-table-border);
}

.data-table tbody tr {
    transition: background 0.15s;
    background: var(--theme-bg-white);
}

.data-table tbody tr:hover {
    background: var(--theme-table-hover);
}

/* Numeric columns */
.data-table .col-numeric {
    text-align: right;
}

.data-table .col-center {
    text-align: center;
}

/* Value colors */
.data-table .positive {
    color: var(--theme-positive);
}

.data-table .negative {
    color: var(--theme-negative);
}

/* Total row */
.data-table .total-row td {
    background: var(--theme-table-header);
    border-top: 2px solid var(--theme-table-border);
    border-bottom: none;
    font-weight: 600;
}

/* =============================================================================
   4. DATA TABLES (Dark Theme)
   Dark background tables for datasheet-style views
   Usage: Datasheet page, performance metrics, dark mode tables
   ============================================================================= */

.data-table-dark {
    width: 100%;
    border-collapse: collapse;
}

.data-table-dark th,
.data-table-dark td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--theme-table-border-dark);
}

.data-table-dark th {
    background: var(--theme-bg-medium);
    font-weight: 600;
    color: var(--theme-text-light);
}

.data-table-dark td {
    background: var(--theme-bg-darkest);
    color: var(--theme-text-light);
}

.data-table-dark .col-numeric {
    text-align: center;
}

/* =============================================================================
   4b. DARK SCROLLABLE TABLE (Sticky Header)
   Scrollable dark table with sticky header that doesn't bleed through
   Usage: Holdings tables, activity tables, any scrollable dark table
   ============================================================================= */

/* Container - enables scrolling */
.dark-scroll-container {
    overflow-y: auto;
    overflow-x: auto;
    border-bottom: 1px solid var(--theme-text-light);
    position: relative;
    background: var(--theme-bg-darkest);
}

/* Table - critical: border-top: 0 prevents bleed-through */
.dark-scroll-table {
    width: 100%;
    border-collapse: collapse;
    border-top: 0;
    font-size: 0.875rem;
    color: var(--theme-text-light);
}

/* Sticky header */
.dark-scroll-table thead {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--theme-bg-darker);
}

/* Header cells - box-shadow creates persistent borders */
.dark-scroll-table th {
    padding: 0.625rem 0.75rem;
    text-align: left;
    font-weight: 600;
    color: var(--theme-text-light);
    background: var(--theme-bg-dark);
    border-top: 0;
    border-bottom: none;
    box-shadow: inset 0 1px 0 var(--theme-border-grey), inset 0 -1px 0 var(--theme-border-grey);
    white-space: nowrap;
}

.dark-scroll-table th:hover {
    background: var(--theme-bg-dark);
}

/* Body - border-top: 0 prevents white line above first row */
.dark-scroll-table tbody {
    border-top: 0;
}

.dark-scroll-table tbody tr {
    background: var(--theme-bg-darkest);
    border-bottom: 1px solid var(--theme-border-grey);
}

.dark-scroll-table tbody tr:hover {
    background: var(--theme-bg-medium);
}

.dark-scroll-table td {
    padding: 0.625rem 0.75rem;
    border-bottom: 1px solid var(--theme-border-grey);
    color: var(--theme-text-light);
}

.dark-scroll-table .col-numeric,
.dark-scroll-table .numeric {
    text-align: right;
}

/* Custom scrollbar for dark scroll container */
.dark-scroll-container::-webkit-scrollbar {
    height: 8px;
    width: 8px;
}

.dark-scroll-container::-webkit-scrollbar-track {
    background: var(--theme-bg-darkest);
    border-radius: 4px;
}

.dark-scroll-container::-webkit-scrollbar-thumb {
    background: var(--theme-bg-light);
    border-radius: 4px;
}

.dark-scroll-container::-webkit-scrollbar-thumb:hover {
    background: var(--theme-bg-medium);
}

.dark-scroll-container::-webkit-scrollbar-corner {
    background: var(--theme-bg-darkest);
}

/* =============================================================================
   5. BUTTONS
   Standardized button styles for all interactions
   ============================================================================= */

/* Base button reset */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid transparent;
    text-decoration: none;
    white-space: nowrap;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Primary button - Dark background */
.btn-primary {
    background: var(--theme-bg-darkest);
    color: var(--theme-text-light);
    border-color: rgba(255, 255, 255, 0.2);
}

.btn-primary:hover:not(:disabled) {
    background: var(--theme-hover-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Secondary button - Medium blue background */
.btn-secondary {
    background: var(--theme-bg-dark);
    color: var(--theme-text-light);
    border-color: var(--theme-border-grey);
}

.btn-secondary:hover:not(:disabled) {
    background: var(--theme-bg-medium);
    border-color: var(--theme-text-light);
}

/* Action button - Light blue background */
.btn-action {
    background: var(--theme-bg-dark);
    color: var(--theme-text-light);
    border-color: rgba(255, 255, 255, 0.2);
}

.btn-action:hover:not(:disabled) {
    background: var(--theme-hover-light);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Success button - Green */
.btn-success {
    background: var(--theme-success);
    color: var(--theme-text-light);
    border-color: var(--theme-success);
}

.btn-success:hover:not(:disabled) {
    background: var(--theme-success-hover);
    border-color: var(--theme-success-hover);
}

/* Danger button - Red */
.btn-danger {
    background: var(--theme-danger);
    color: var(--theme-text-light);
    border-color: var(--theme-danger);
}

.btn-danger:hover:not(:disabled) {
    background: var(--theme-danger-hover);
    border-color: var(--theme-danger-hover);
}

/* Warning button - Orange/Amber */
.btn-warning {
    background: var(--theme-warning);
    color: var(--theme-bg-darkest);
    border-color: var(--theme-warning);
}

.btn-warning:hover:not(:disabled) {
    background: #d97706;
    border-color: #d97706;
}

/* Ghost button - Transparent */
.btn-ghost {
    background: transparent;
    color: var(--theme-text-light);
    border-color: transparent;
}

.btn-ghost:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.1);
}

/* Danger outline button - Red border, transparent bg, fills on hover */
.btn-danger-outline {
    border: 1px solid #dc3545;
    background: transparent;
    color: #dc3545;
    font-weight: 600;
}

.btn-danger-outline:hover:not(:disabled) {
    background: #dc3545;
    color: #fff;
}

/* =====================================================
   Active Filter Pills
   ===================================================== */
.active-filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}

.active-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.65rem 0.3rem 0.5rem;
    border-radius: 20px;
    border: 1px solid var(--theme-bg-white);
    background: var(--theme-positive);
    color: var(--theme-text-dark);
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.active-filter-pill:hover {
    background: rgba(220, 53, 69, 0.25);
    border-color: rgba(220, 53, 69, 0.6);
    color: var(--theme-text-light);
}

.active-filter-pill-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.2);
    color: var(--theme-text-dark);
    font-size: 0.65rem;
    line-height: 1;
    flex-shrink: 0;
    transition: background 0.15s;
}

.active-filter-pill:hover .active-filter-pill-x {
    background: rgba(220, 53, 69, 0.6);
    color: var(--theme-text-light);
}

.active-filter-clear-all {
    font-size: 0.78rem;
    color: var(--theme-text-muted);
    cursor: pointer;
    padding: 0.3rem 0.5rem;
    transition: color 0.15s;
    white-space: nowrap;
}

.active-filter-clear-all:hover {
    color: #dc3545;
}

/* Light button - For dark backgrounds */
.btn-light {
    background: var(--theme-bg-white);
    color: var(--theme-text-dark);
    border-color: var(--theme-table-border);
}

.btn-light:hover:not(:disabled) {
    background: var(--theme-table-header);
    border-color: var(--theme-input-border);
}

/* Button sizes */
.btn-sm {
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
}

.btn-lg {
    padding: 0.75rem 2rem;
    font-size: 1rem;
    font-weight: 600;
}

/* Icon button */
.btn-icon {
    padding: 0.375rem;
    width: 32px;
    height: 32px;
}

.btn-icon-sm {
    padding: 0.25rem;
    width: 24px;
    height: 24px;
    font-size: 1rem;
}

/* Time range buttons (chart controls) */
.btn-time-range {
    padding: 0.4rem 0.6rem;
    background: var(--theme-bg-dark);
    border: 1px solid var(--theme-border-grey);
    border-radius: 6px;
    font-size: 0.8rem;
    color: var(--theme-text-light);
    cursor: pointer;
    transition: all 0.2s;
}

.btn-time-range:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
}

.btn-time-range.active {
    background: var(--theme-bg-darkest);
    border-color: rgba(255, 255, 255, 0.4);
}

/* Zoom preset buttons (smaller) */
.btn-zoom {
    padding: 0.25rem 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: var(--theme-bg-medium);
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--theme-text-light);
    transition: all 0.2s;
}

.btn-zoom:hover {
    background: var(--theme-hover-light);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
}

.btn-zoom.active {
    background: var(--theme-bg-darkest);
    border-color: rgba(255, 255, 255, 0.3);
}

/* Close button */
.btn-close {
    background: transparent;
    color: var(--theme-text-secondary);
    border: 1px solid var(--theme-input-border);
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
}

.btn-close:hover {
    background: var(--theme-table-header);
    color: var(--theme-text-dark);
    border-color: var(--theme-input-disabled);
}

/* Remove button (for table rows) */
.btn-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--theme-text-secondary);
    background: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-remove:hover {
    background: var(--theme-danger);
    color: var(--theme-text-light);
}

/* =============================================================================
   6. FORM INPUTS
   Standardized input, select, and checkbox styles
   ============================================================================= */

/* Text and number inputs */
.input,
.form-input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    color: var(--theme-text-dark);
    background: var(--theme-bg-white);
    border: 1px solid var(--theme-border-grey);
    border-radius: 4px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.input:focus,
.form-input:focus {
    outline: none;
    border-color: var(--theme-bg-medium);
    box-shadow: 0 0 0 2px rgba(27, 74, 121, 0.2);
}

.input::placeholder,
.form-input::placeholder {
    color: var(--theme-text-secondary);
}

/* Dark theme inputs */
.input-dark,
.form-input-dark {
    background: var(--theme-bg-dark);
    color: var(--theme-text-light);
    border-color: var(--theme-bg-light);
}

.input-dark:focus,
.form-input-dark:focus {
    border-color: var(--theme-text-light);
}

/* Number input in tables (centered, compact) */
.input-table-number {
    width: 70px;
    max-width: 80px;
    padding: 0.375rem 0.5rem;
    font-size: 0.875rem;
    text-align: center;
    color: var(--theme-text-dark);
    background: var(--theme-bg-white);
    border: 1px solid var(--theme-border-grey);
    border-radius: 4px;
}

.input-table-number:focus {
    outline: none;
    border-color: var(--theme-bg-medium);
    box-shadow: 0 0 0 2px rgba(27, 74, 121, 0.2);
}

/* Hide number spinners */
.input-table-number::-webkit-inner-spin-button,
.input-table-number::-webkit-outer-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}

.input-table-number {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* Select dropdowns */
.select,
.form-select {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    color: var(--theme-text-dark);
    background: var(--theme-bg-white);
    border: 1px solid var(--theme-border-grey);
    border-radius: 4px;
    cursor: pointer;
    transition: border-color 0.15s;
}

.select:focus,
.form-select:focus {
    outline: none;
    border-color: var(--theme-bg-medium);
    box-shadow: 0 0 0 2px rgba(27, 74, 121, 0.2);
}

/* Dark theme select */
.select-dark,
.form-select-dark {
    background: var(--theme-bg-dark);
    color: var(--theme-text-light);
    border-color: var(--theme-bg-light);
}

.select-dark option {
    background: var(--theme-bg-darkest);
    color: var(--theme-text-light);
}

/* Checkbox styling */
.checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    user-select: none;
    font-size: 0.875rem;
}

/* Disabled state */
.input:disabled,
.select:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--theme-table-header);
}

/* =============================================================================
   7. DROPDOWNS
   Dropdown menus for column selectors, actions, etc.
   ============================================================================= */

.dropdown-container {
    position: relative;
}

.dropdown-trigger {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--theme-bg-dark);
    border: 1px solid var(--theme-border-grey);
    border-radius: 6px;
    font-size: 0.875rem;
    color: var(--theme-text-light);
    cursor: pointer;
    transition: all 0.2s;
}

.dropdown-trigger:hover {
    background: var(--theme-bg-medium);
    border-color: var(--theme-text-light);
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    max-height: 400px;
    overflow-y: auto;
    background: var(--theme-bg-darkest);
    border: 1px solid var(--theme-border-grey);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 1050;
    display: none;
    margin-top: 2px;
}

.dropdown-menu.open {
    display: block;
}

.dropdown-menu.dropdown-right {
    left: auto;
    right: 0;
}

.dropdown-menu.dropdown-up {
    top: auto;
    bottom: 100%;
    margin-top: 0;
    margin-bottom: 2px;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    font-size: 0.85rem;
    color: var(--theme-text-light);
    cursor: pointer;
    transition: background 0.15s;
}

.dropdown-item:hover {
    background: var(--theme-bg-medium);
}

.dropdown-item.active {
    background: var(--theme-bg-medium);
}

.dropdown-divider {
    height: 1px;
    background: var(--theme-border-grey);
    margin: 0.25rem 0;
}

.dropdown-section-title {
    padding: 0.5rem 1rem 0.25rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--theme-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* =============================================================================
   8. TAB NAVIGATION
   Sticky tab navigation with action buttons
   ============================================================================= */

.tabs-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid var(--theme-bg-medium);
    margin-bottom: 2rem;
    position: sticky;
    top: 60px;
    background: var(--theme-bg-darkest);
    z-index: 99;
}

.tabs {
    display: flex;
    gap: 0;
}

.tab {
    padding: 0.75rem 1.5rem;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500;
    color: var(--theme-text-muted);
    transition: all 0.2s;
    position: relative;
    top: 2px;
}

.tab:hover {
    color: var(--theme-text-light);
    background: var(--theme-bg-dark);
}

.tab.active {
    color: var(--theme-accent);
    border-bottom-color: var(--theme-accent);
    font-weight: 600;
}

.tab.hidden {
    display: none;
}

.tabs-actions {
    display: flex;
    gap: 0.75rem;
    padding-right: 0.5rem;
}

/* =============================================================================
   9. PAGE HEADERS
   Page titles and header layouts
   ============================================================================= */

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--theme-bg-medium);
}

.page-title {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--theme-text-light);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.page-title-icon {
    width: 32px;
    height: 32px;
}

.page-subtitle {
    font-size: 0.875rem;
    color: var(--theme-text-muted);
    font-weight: 400;
    margin-left: 1rem;
}

.page-actions {
    display: flex;
    gap: 0.75rem;
}

/* =============================================================================
   9b. COMPACT PAGE HEADER
   Sticky header with inline title, tabs, and actions
   Use for pages with tab navigation that need to remain visible while scrolling
   Responsive: tabs wrap below title, then actions wrap below tabs
   ============================================================================= */

.compact-header {
    position: sticky;
    top: 60px; /* Below the topbar */
    z-index: 100;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 0.625rem 0;
    background: var(--theme-bg-dark);
    border-bottom: 1px solid var(--theme-bg-medium);
    margin-bottom: 1.5rem;
    gap: 0.5rem 1rem;
}

/* Two-row variant: title+actions on top row, tabs on second row */
.compact-header:has(.compact-header-top) {
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
}

.compact-header-top,
.compact-header-left {
    display: flex;
    align-items: center;
    gap: 0.5rem 1rem;
}

/* Back button in compact header */
.compact-header-top .back-btn,
.compact-header-left .back-btn {
    padding: 0.4rem 0.6rem;
    min-width: auto;
}

.compact-header-top .back-btn svg,
.compact-header-left .back-btn svg {
    width: 18px;
    height: 18px;
}

.compact-header-title {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--theme-text-light);
    margin: 0;
    white-space: nowrap;
}

.compact-header-title svg {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    align-self: center;
}

.compact-header-tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0;
    margin-left: 0;
}

.compact-header-tab {
    padding: 0.25rem 0.75rem;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
    font-weight: 400;
    color: var(--theme-text-muted);
    transition: color 0.15s;
    white-space: nowrap;
}

.compact-header-tab:hover {
    color: var(--theme-text-light);
}

.compact-header-tab.active {
    color: var(--theme-text-light);
    font-weight: 600;
}

.compact-header-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto; /* Push to right even when wrapped */
}

/* Responsive: On narrower screens, actions wrap to their own row */
@media (max-width: 900px) {
    .compact-header:not(:has(.compact-header-top)) {
        flex-direction: column;
        align-items: flex-start;
    }

    .compact-header-left {
        width: 100%;
    }

    .compact-header:not(:has(.compact-header-top)) .compact-header-actions {
        width: 100%;
        justify-content: flex-end;
        margin-top: 0.25rem;
    }

    .compact-header-top {
        flex-wrap: wrap;
    }
}

/* =============================================================================
   10. SECTION CONTAINERS
   Content sections with optional titles
   ============================================================================= */

.section {
    margin-bottom: 3rem;
    scroll-margin-top: 120px;
}

.section-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: var(--theme-text-light);
}

.section-subtitle {
    font-size: 1rem;
    font-weight: 600;
    color: var(--theme-text-muted);
    margin-bottom: 0.75rem;
    margin-top: 1rem;
}

.section-content {
    background: var(--theme-bg-darkest);
    border: 1px solid var(--theme-bg-light);
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.section-content-light {
    background: var(--theme-bg-white);
    border-color: var(--theme-table-border);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* =============================================================================
   10b. INFO TOOLTIPS
   Click-to-show tooltip icons (ⓘ) with positioned tooltip popover
   ============================================================================= */

.info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px; height: 15px;
  border-radius: 50%;
  border: 1.5px solid var(--theme-text-muted);
  color: var(--theme-text-muted);
  font-size: 10px;
  font-weight: 600;
  font-style: italic;
  font-family: Georgia, serif;
  cursor: pointer;
  margin-left: 0.35rem;
  vertical-align: middle;
  flex-shrink: 0;
  transition: border-color 0.15s, color 0.15s;
  position: relative;
}
.info-icon:hover, .info-icon.active {
  border-color: var(--theme-text-light);
  color: var(--theme-text-light);
}

.info-tooltip {
  position: fixed;
  z-index: 100000;
  max-width: 320px;
  padding: 0.6rem 0.8rem;
  background: var(--theme-bg-dark, #1e1e2e);
  border: 1px solid var(--theme-border-grey, #333);
  border-radius: 6px;
  color: var(--theme-text-light, #e0e0e0);
  font-size: 0.8rem;
  line-height: 1.5;
  font-weight: 400;
  font-style: normal;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  opacity: 0;
  transition: opacity 0.15s;
  pointer-events: none;
}
.info-tooltip.visible { opacity: 1; pointer-events: auto; }
.info-tooltip strong { color: var(--theme-text-light); }


/* =============================================================================
   11. TICKER PILLS & BADGES
   Instrument identifiers and status badges
   ============================================================================= */

.ticker-pill {
    display: inline-block;
    padding: 0.125rem 0.375rem;
    margin-right: 0.5rem;
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--theme-bg-darkest);
    background: rgba(8, 18, 41, 0.1);
    border-radius: 3px;
}

.ticker-pill-dark {
    display: inline-block;
    padding: 0.125rem 0.375rem;
    margin-right: 0.5rem;
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--theme-text-light);
    background: rgba(255, 255, 255, 0.15);
    border-radius: 3px;
}

.badge {
    display: inline-block;
    padding: 0.125rem 0.375rem;
    font-size: 0.7rem;
    font-weight: 500;
    border-radius: 3px;
}

.badge-muted {
    color: var(--theme-text-muted);
    background: var(--theme-bg-dark);
}

.badge-success {
    color: var(--theme-success-hover);
    background: rgba(22, 163, 74, 0.15);
}

.badge-warning {
    color: var(--theme-warning);
    background: rgba(217, 119, 6, 0.15);
}

.badge-danger {
    color: var(--theme-danger);
    background: rgba(220, 38, 38, 0.15);
}

/* =============================================================================
   12. SEARCH SUGGESTIONS
   Autocomplete dropdown for instrument search
   ============================================================================= */

.suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    min-width: 400px;
    max-height: 300px;
    margin: 0;
    padding: 0;
    list-style: none;
    background: var(--theme-bg-darkest);
    border: 1px solid var(--theme-border-grey);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    overflow-y: auto;
    z-index: 1000;
    display: none;
}

.suggestions.active {
    display: block;
}

.suggestion-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    cursor: pointer;
    transition: background 0.15s;
    color: var(--theme-text-light);
}

.suggestion-item:hover {
    background: var(--theme-bg-medium);
}

.suggestion-item.in-list {
    opacity: 0.6;
}

.suggestion-ticker {
    font-weight: 600;
    color: var(--theme-text-light);
}

.suggestion-name {
    flex: 1;
    color: var(--theme-text-light);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.suggestion-badge {
    padding: 0.125rem 0.375rem;
    font-size: 0.7rem;
    color: var(--theme-text-muted);
    background: var(--theme-bg-dark);
    border-radius: 3px;
}

.suggestion-empty {
    padding: 0.75rem 1rem;
    color: var(--theme-text-muted);
    text-align: center;
    font-style: italic;
}

/* =============================================================================
   13. PROGRESS BARS
   Loading and progress indicators
   ============================================================================= */

.progress-section {
    display: none;
    background: var(--theme-bg-medium);
    border: 1px solid var(--theme-bg-light);
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.progress-section.active {
    display: block;
}

.progress-text {
    font-size: 1rem;
    color: var(--theme-text-light);
    margin-bottom: 0.5rem;
}

.progress-bar-container {
    width: 100%;
    height: 30px;
    background: var(--theme-bg-darkest);
    border-radius: 15px;
    overflow: hidden;
    margin: 1rem 0;
    border: 1px solid var(--theme-bg-light);
}

.progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--theme-success), var(--theme-success-hover));
    transition: width 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--theme-text-light);
    font-weight: 600;
    font-size: 0.85rem;
}

/* =============================================================================
   14. MODAL DIALOGS
   Overlay dialogs for confirmations, forms, and information display
   Usage: Delete confirmations, edit forms, info panels
   ============================================================================= */

/* Modal overlay - covers the entire viewport */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

/* Alternative class name for compatibility */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

/* Modal dialog container */
.modal-dialog,
.modal-content {
    background: var(--theme-bg-white);
    border-radius: 8px;
    width: 90%;
    max-width: 500px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

/* Wide modal variant */
.modal-dialog.modal-wide,
.modal-content.modal-wide {
    max-width: 700px;
}

/* Extra wide modal variant */
.modal-dialog.modal-extra-wide,
.modal-content.modal-extra-wide {
    max-width: 900px;
}

/* Modal header */
.modal-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--theme-table-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h3 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--theme-text-dark);
}

/* Modal close button */
.modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--theme-text-secondary);
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.15s ease;
}

.modal-close:hover {
    background: var(--theme-table-header);
    color: var(--theme-text-dark);
}

/* Modal body */
.modal-body {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1;
}

/* Modal body text styles */
.modal-body p {
    margin: 0 0 1rem 0;
    color: var(--theme-text-light);
    line-height: 1.5;
}

.modal-body p:last-child {
    margin-bottom: 0;
}

/* Modal footer */
.modal-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--theme-table-border);
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

/* Modal divider (for separating sections within body) */
.modal-divider {
    border: none;
    border-top: 1px solid var(--theme-table-border);
    margin: 1rem 0;
}

/* Warning message in modal */
.modal-warning {
    margin-bottom: 1.5rem;
    color: var(--theme-danger);
    font-size: 0.875rem;
    background: var(--theme-danger-bg);
    padding: 0.75rem;
    border-radius: 0.375rem;
    border-left: 3px solid var(--theme-danger);
}

/* Info message in modal */
.modal-info {
    margin-bottom: 1.5rem;
    color: var(--theme-info);
    font-size: 0.875rem;
    background: var(--theme-info-bg);
    padding: 0.75rem;
    border-radius: 0.375rem;
    border-left: 3px solid var(--theme-info);
}

/* Form groups within modals */
.modal-body .form-group {
    margin-bottom: 1rem;
}

.modal-body .form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--theme-text-dark);
}

/* -----------------------------------------------------------------------------
   Dark Theme Modal Variants
   Use .modal-dark class on the overlay to switch to dark theme
   ----------------------------------------------------------------------------- */

/* Dark overlay - slightly darker background */
.modal-overlay.modal-dark {
    background: rgba(0, 0, 0, 0.6);
}

/* Dark modal dialog */
.modal-dark .modal-dialog,
.modal-dark .modal-content,
.modal-dialog-dark,
.modal-content-dark {
    background: var(--theme-bg-darkest);
    border: 1px solid var(--theme-bg-medium);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
}

/* Dark modal header */
.modal-dark .modal-header,
.modal-header-dark {
    border-bottom-color: var(--theme-bg-medium);
}

.modal-dark .modal-header h3,
.modal-header-dark h3 {
    color: var(--theme-text-light);
}

/* Dark modal close button */
.modal-dark .modal-close,
.modal-close-dark {
    color: var(--theme-text-muted);
}

.modal-dark .modal-close:hover,
.modal-close-dark:hover {
    color: var(--theme-text-light);
    background: var(--theme-bg-medium);
}

/* Dark modal body */
.modal-dark .modal-body p,
.modal-body-dark p {
    color: var(--theme-text-muted);
}

/* Dark modal footer */
.modal-dark .modal-footer,
.modal-footer-dark {
    border-top-color: var(--theme-bg-medium);
}

/* Dark modal divider */
.modal-dark .modal-divider {
    border-top-color: var(--theme-bg-medium);
}

/* Dark modal warning */
.modal-dark .modal-warning {
    background: rgba(220, 53, 69, 0.15);
    border-left-color: var(--theme-danger);
    color: #ff6b7a;
}

/* Dark modal info */
.modal-dark .modal-info {
    background: rgba(0, 102, 204, 0.15);
    border-left-color: var(--theme-info);
    color: #66b3ff;
}

/* Dark modal form labels */
.modal-dark .modal-body .form-group label {
    color: var(--theme-text-light);
}

/* Dark modal input styling */
.modal-dark .modal-body input[type="text"],
.modal-dark .modal-body input[type="number"],
.modal-dark .modal-body select,
.modal-dark .modal-body textarea {
    background: var(--theme-bg-medium);
    border: 1px solid var(--theme-table-border-dark);
    color: var(--theme-text-light);
    border-radius: 4px;
    padding: 0.5rem 0.75rem;
}

.modal-dark .modal-body input:focus,
.modal-dark .modal-body select:focus,
.modal-dark .modal-body textarea:focus {
    border-color: var(--theme-info);
    outline: none;
}

/* =============================================================================
   15. UTILITY CLASSES
   Helper classes for common patterns
   ============================================================================= */

/* Text alignment */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* Text colors */
.text-light { color: var(--theme-text-light); }
.text-dark { color: var(--theme-text-dark); }
.text-muted { color: var(--theme-text-muted); }
.text-positive { color: var(--theme-positive); }
.text-negative { color: var(--theme-negative); }

/* Flex utilities */
.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.flex-end { display: flex; justify-content: flex-end; }
.gap-sm { gap: 0.5rem; }
.gap-md { gap: 1rem; }
.gap-lg { gap: 1.5rem; }

/* Spacing */
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }

/* Visibility */
.hidden { display: none !important; }
.visible { display: block; }

/* Loading state */
.loading {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 3rem;
    color: var(--theme-text-muted);
}

.loading-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--theme-bg-medium);
    border-top-color: var(--theme-text-light);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Placeholder content */
.placeholder-content {
    padding: 3rem;
    text-align: center;
    color: var(--theme-text-muted);
    background: var(--theme-bg-dark);
    border-radius: 8px;
}

/* ============================================================================
   Edit Mode Components
   ============================================================================ */

/* Edit mode background - warmer navy to signal different mode */
:root {
    --theme-bg-edit: #1a2744;
}

/* Section in edit mode */
.edit-mode-active {
    background: var(--theme-bg-edit) !important;
    border: 2px solid var(--theme-warning);
    border-radius: 8px;
    transition: background 0.2s ease, border-color 0.2s ease;
}

/* Edit mode header controls */
.edit-mode-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.edit-mode-controls .btn {
    padding: 0.35rem 0.75rem;
    font-size: 0.85rem;
}

.btn-undo, .btn-redo {
    background: var(--theme-bg-medium);
    color: var(--theme-text-light);
    border: 1px solid var(--theme-table-border);
}

.btn-undo:hover:not(:disabled), .btn-redo:hover:not(:disabled) {
    background: var(--theme-bg-light);
}

.btn-undo:disabled, .btn-redo:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Edit mode buttons */
.btn-exit-edit,
.btn-cancel-edit {
    font-weight: 500;
    border: 1px solid var(--theme-border-grey);
}

.btn-exit-edit {
    background: var(--theme-success);
    color: var(--theme-text-light);
}

.btn-exit-edit:hover {
    background: var(--theme-positive);
    filter: brightness(1.1);
}

.btn-cancel-edit {
    background: var(--theme-bg-medium);
    color: var(--theme-text-light);
}

.btn-cancel-edit:hover {
    background: var(--theme-danger);
}

/* Editable cells */
.cell-editable {
    color: var(--theme-text-light);
    cursor: pointer;
    transition: background 0.15s ease;
    position: relative;
}

.cell-editable:hover {
    background: var(--theme-bg-medium);
}

.cell-editable::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 4px;
    right: 4px;
    height: 1px;
    background: var(--theme-text-muted);
    opacity: 0;
    transition: opacity 0.15s;
}

.cell-editable:hover::after {
    opacity: 0.3;
}

/* Non-editable cells in edit mode */
.cell-readonly {
    color: var(--theme-text-muted);
    opacity: 0.6;
}

/* Cell being edited */
.cell-editing {
    padding: 0 !important;
    background: transparent !important;
}

.cell-editing input,
.cell-editing select {
    width: 100%;
    height: 100%;
    min-height: 32px;
    padding: 0.4rem 0.5rem;
    background: var(--theme-bg-dark);
    border: 2px solid var(--theme-info);
    border-radius: 4px;
    color: var(--theme-text-light);
    font-size: inherit;
    font-family: inherit;
    outline: none;
}

.cell-editing input:focus,
.cell-editing select:focus {
    border-color: var(--theme-primary);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.cell-editing input[type="number"] {
    text-align: right;
}

.cell-editing input[type="date"] {
    color-scheme: dark;
}

/* User-created row indicator */
.row-user-created {
    position: relative;
}

.row-user-created td:first-child {
    border-left: 3px solid var(--theme-info);
}

/* New row (unsaved) */
.row-new {
    background: rgba(34, 197, 94, 0.08) !important;
}

.row-new td:first-child {
    border-left: 3px solid var(--theme-positive) !important;
}

/* Row marked for deletion */
.row-pending-delete {
    background: rgba(220, 38, 38, 0.1) !important;
    text-decoration: line-through;
    opacity: 0.6;
}

.row-pending-delete td:first-child {
    border-left: 3px solid var(--theme-danger) !important;
}

/* Delete button column */
.cell-delete-btn {
    width: 40px;
    text-align: center;
    padding: 0 !important;
}

.delete-row-btn {
    color: var(--theme-text-muted);
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.2rem;
    padding: 0.3rem 0.6rem;
    border-radius: 4px;
    line-height: 1;
    transition: all 0.15s ease;
}

.delete-row-btn:hover {
    color: var(--theme-danger);
    background: rgba(220, 38, 38, 0.15);
}

/* Add new row button */
.add-row-btn {
    color: var(--theme-positive);
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.3rem;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    transition: all 0.15s ease;
}

.add-row-btn:hover {
    background: rgba(34, 197, 94, 0.15);
}

/* New row placeholder */
.new-row-placeholder {
    background: rgba(34, 197, 94, 0.05);
    border: 1px dashed var(--theme-positive);
}

.new-row-placeholder td {
    padding: 0.5rem;
    color: var(--theme-text-muted);
    font-style: italic;
}

/* Instrument search cell */
.cell-instrument-search {
    cursor: pointer;
}

.cell-instrument-search:hover {
    background: var(--theme-bg-medium);
}

.cell-instrument-search .search-placeholder {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--theme-text-muted);
}

.cell-instrument-search .search-placeholder::before {
    content: '🔍';
    font-size: 0.9rem;
}

/* Validation error */
.cell-validation-error {
    border: 2px solid var(--theme-danger) !important;
    background: rgba(220, 38, 38, 0.1) !important;
    position: relative;
}

.validation-error-tooltip {
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--theme-danger);
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    white-space: nowrap;
    z-index: 1000;
    margin-top: 2px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.validation-error-tooltip::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 10px;
    border: 5px solid transparent;
    border-bottom-color: var(--theme-danger);
}

/* Manual badge for user-created entries */
.badge-manual {
    background: var(--theme-bg-medium);
    color: var(--theme-text-muted);
    font-size: 0.7rem;
    padding: 0.15rem 0.4rem;
    border-radius: 3px;
    margin-left: 0.5rem;
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Edit mode button (shown in table header) */
.btn-edit-mode {
    background: transparent;
    color: var(--theme-text-light);
    border: 1px solid var(--theme-table-border);
    padding: 0.35rem 0.75rem;
    font-size: 0.85rem;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-edit-mode:hover {
    background: var(--theme-bg-medium);
    border-color: var(--theme-text-muted);
}

.btn-edit-mode.active {
    background: var(--theme-warning);
    color: #000;
    border-color: var(--theme-warning);
}

/* Unsaved changes indicator */
.unsaved-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--theme-warning);
    font-size: 0.8rem;
    margin-left: 0.5rem;
}

.unsaved-indicator::before {
    content: '●';
    font-size: 0.6rem;
}

/* Section header controls wrapper */
.section-header-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Add row clickable row */
.add-row {
    cursor: pointer;
    transition: background 0.15s ease;
}

.add-row:hover {
    background: rgba(34, 197, 94, 0.12) !important;
}

.add-row .cell-add-btn {
    width: 40px;
    text-align: center;
}

.add-row-text {
    color: var(--theme-text-muted);
    font-style: italic;
}

/* Instrument search trigger in edit mode */
.instrument-search-trigger {
    color: var(--theme-info);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0;
    transition: color 0.15s ease;
}

.instrument-search-trigger::before {
    content: '🔍';
    font-size: 0.85rem;
}

.instrument-search-trigger:hover {
    color: var(--theme-primary);
    text-decoration: underline;
}

/* Type badge for transactions */
.type-badge {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.type-badge.type-buy {
    background: rgba(34, 197, 94, 0.15);
    color: var(--theme-positive);
}

.type-badge.type-sell {
    background: rgba(239, 68, 68, 0.15);
    color: var(--theme-negative);
}

.type-badge.type-dividend {
    background: rgba(59, 130, 246, 0.15);
    color: var(--theme-info);
}

.type-badge.type-deposit, .type-badge.type-withdrawal {
    background: rgba(156, 163, 175, 0.15);
    color: var(--theme-text-muted);
}

.type-badge.type-fee {
    background: rgba(245, 158, 11, 0.15);
    color: var(--theme-warning);
}

.type-badge.type-interest {
    background: rgba(16, 185, 129, 0.15);
    color: var(--theme-success);
}

.type-badge.type-transfer_in, .type-badge.type-transfer_out, .type-badge.type-transfer {
    background: rgba(139, 92, 246, 0.15);
    color: #8b5cf6;
}

.type-badge.type-tax {
    background: rgba(239, 68, 68, 0.15);
    color: var(--theme-danger);
}

/* Type select dropdown in edit mode */
.type-select {
    padding: 0.25rem 0.5rem;
    font-size: 0.85rem;
    min-width: 100px;
}

/* Modified row indicator */
.row-modified {
    position: relative;
}

.row-modified::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--theme-warning);
}

/* Readonly header styling */
.cell-readonly-header {
    color: var(--theme-text-muted);
    font-style: italic;
}