/* Custom styles for Debt Tracker App */

/* CSS Variables for Theming */
:root {
    --body-bg-color: #f8f9fa;
    --text-color: #212529;
    --card-bg-color: #ffffff;
    --card-header-bg-color: #f8f9fa; /* Slightly off-white for light theme headers */
    --card-shadow-color: rgba(0, 0, 0, 0.1);
    --card-border-color: #dee2e6; /* Used for general borders as well */
    --table-cell-border-color: #f0f0f0;
    --table-header-bg-color: #f8f9fa; 
    --table-row-bg-color: var(--card-bg-color); /* Default table row to card bg */
    --table-row-hover-bg-color: #e9ecef; 
    --primary-color: #0d6efd;
    --secondary-color: #6c757d;
    --success-color: #198754; /* Original Bootstrap success green */
    --danger-color: #dc3545;  /* Original Bootstrap danger red */
    --amount-positive-color: var(--success-color); /* Default to success color */
    --amount-negative-color: var(--danger-color);  /* Default to danger color */
    --link-color: #007bff;
    --button-primary-bg: #0d6efd;
    --button-primary-text: #ffffff;
    --button-secondary-bg: #6c757d;
    --button-secondary-text: #ffffff;
    --button-danger-bg: #dc3545;
    --button-danger-text: #ffffff;
    --input-bg-color: #ffffff;
    --input-text-color: #495057;
    --input-border-color: #ced4da;
    --dropdown-bg-color: #ffffff;
    --dropdown-border-color: #dee2e6;
    --dropdown-shadow-color: rgba(0, 0, 0, 0.1);
    --dropdown-link-color: #212529;
    --dropdown-link-hover-bg-color: #f8f9fa;
    --dropdown-divider-color: #dee2e6;
    --spinner-border-color: rgba(0, 0, 0, 0.1);
    --spinner-left-border-color: #007bff;
    --card-odd-border-left-color: #0d6efd;
    --card-even-border-left-color: #6610f2;
    --list-group-item-bg-color: var(--card-bg-color);
    --primary-color-rgb: 13, 110, 253; /* RGB for #0d6efd */
}

body.dark-theme {
    --body-bg-color: #121212;
    --text-color: #e0e0e0;
    --card-bg-color: #1e1e1e;
    --card-header-bg-color: #2c2c2c; 
    --card-shadow-color: rgba(255, 255, 255, 0.05);
    --card-border-color: #333333;
    --table-cell-border-color: #2c2c2c;
    --table-header-bg-color: #1a1a1a;
    --table-row-bg-color: var(--card-bg-color); /* Dark theme table row to card bg */
    --table-row-hover-bg-color: #252525;
    --primary-color: #378BFF;
    --secondary-color: #8A9197;
    --success-color: #28a745; 
    --danger-color: #ff4d4f;  
    --amount-positive-color: #34C759; 
    --amount-negative-color: #FF3B30; 
    --link-color: #378BFF;
    --button-primary-bg: #378BFF;
    --button-primary-text: #ffffff;
    --button-secondary-bg: #8A9197;
    --button-secondary-text: #000000;
    --button-danger-bg: #ff4d4f;
    --button-danger-text: #ffffff;
    --input-bg-color: #2c2c2c;
    --input-text-color: #e0e0e0;
    --input-border-color: #555555;
    --dropdown-bg-color: #1e1e1e;
    --dropdown-border-color: #444444;
    --dropdown-shadow-color: rgba(255, 255, 255, 0.07);
    --dropdown-link-color: #e0e0e0;
    --dropdown-link-hover-bg-color: #2c2c2c;
    --dropdown-divider-color: #444444;
    --spinner-border-color: rgba(255, 255, 255, 0.1);
    --spinner-left-border-color: #378BFF;
    --card-odd-border-left-color: #378BFF;
    --card-even-border-left-color: #8c52ff; 
    --list-group-item-bg-color: var(--card-bg-color);
    --primary-color-rgb: 55, 139, 255; /* RGB for #378BFF */
}

/* Base styles */
body {
    background-color: var(--body-bg-color);
    color: var(--text-color);
}

/* Card base styles */
.card {
    background-color: var(--card-bg-color);
    border: 1px solid var(--card-border-color);
    box-shadow: 0 2px 5px var(--card-shadow-color);
}

.card-header {
    background-color: var(--card-header-bg-color);
    border-bottom: 1px solid var(--card-border-color);
    color: var(--text-color); 
}

.card-body {
    background-color: var(--card-bg-color); 
    color: var(--text-color); 
}

/* Card view for mobile devices */
@media (max-width: 768px) {
    #transactions-table thead {
        display: none;
    }
    
    #transactions-table, 
    #transactions-table tbody {
        display: block;
        width: 100%;
    }
    
    #transactions-table tr { /* This also applies to rows in mobile card view */
        display: block;
        margin-bottom: 15px;
        border-radius: 8px;
        box-shadow: 0 2px 5px var(--card-shadow-color);
        background-color: var(--card-bg-color); 
        overflow: hidden;
        padding: 0;
        border: 1px solid var(--card-border-color); 
    }
    
    #transactions-table td {
        display: flex;
        padding: 10px 15px;
        text-align: right;
        border-bottom: 1px solid var(--table-cell-border-color);
        justify-content: space-between;
        align-items: center;
        color: var(--text-color); 
    }

    /* Styles for the card toggle icon */
    .card-toggle-icon {
        cursor: pointer;
        font-size: 1.2rem;
        padding: 0 5px; /* Adjusted padding */
        color: var(--primary-color);
        transition: transform 0.2s ease-in-out; /* For rotating the icon */
    }

    .card-toggle-icon.collapsed-icon {
        transform: rotate(-90deg); /* Or use a different icon class */
    }

    /* Hide card content when collapsed - these are the TDs that act as card body rows */
    #transactions-table tr.collapsed .card-body-td {
        display: none;
    }

    /* Style for the text part of the transaction card header (SN/Amount) */
    /* This will be applied to a span inside the td[data-label="#"] */
    .transaction-header-text {
        flex-grow: 1; /* Allows text to take available space */
        text-align: left; /* Align text to the left */
        margin-right: 5px; /* Space before the icon */
        overflow: hidden; /* Prevent long text from breaking layout */
        text-overflow: ellipsis; /* Show ... for very long text */
        white-space: nowrap; /* Keep it on one line */
    }

    /* Styles for the main card toggle icon (mobile only via d-md-none in HTML) */
    .main-card-toggle-icon {
        cursor: pointer;
        font-size: 1.2rem; /* Consistent with transaction card toggle */
        padding: 0 5px;
        color: var(--primary-color);
        transition: transform 0.2s ease-in-out;
    }

    .main-card-toggle-icon.collapsed-icon {
        transform: rotate(-90deg);
    }

    /* General rule for collapsing card bodies - JS will control when 'collapsed' class is added */
    /* This will apply to any card, including main ones and transaction TRs if they get .card class + .collapsed */
    .card.collapsed > .card-body { /* '>' ensures only direct child card-body is affected */
        display: none;
    }

    /* Styles for Description Autofill Dropdown */
    .description-field-container {
        position: relative; /* For positioning the suggestions dropdown absolutely within it */
    }

    /* Parent of input needs to be relative for absolute positioning of dropdown */
    /* This will be the .mb-3 div containing the description input */
    /* We can target it via a more specific selector if needed, or add a class in HTML. */
    /* For now, assuming the JS will handle positioning if this generic approach is not enough */
    /* Let's assume the input's parent div.mb-3 will get a class like 'description-input-container' if needed */
    /* Or, more simply, the JS can calculate position relative to the input itself. */

    .suggestions-dropdown {
        display: none; /* Hidden by default */
        position: absolute;
        background-color: var(--card-bg-color);
        border: 1px solid var(--input-border-color);
        border-top-width: 0; /* Avoid double border if input has bottom border */
        z-index: 1050; /* Above most other content */
        width: calc(100% - 2px); /* Match input width typically; adjust as needed based on parent padding */
        max-height: 200px;
        overflow-y: auto;
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        border-radius: 0 0 0.25rem 0.25rem; /* Optional: if input has rounded bottom corners */
    }

    .suggestion-item {
        padding: 0.5rem 0.75rem;
        cursor: pointer;
        color: var(--text-color);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .suggestion-item:hover {
        background-color: var(--table-row-hover-bg-color);
        /* color: var(--text-color); Ensure text color is still good on hover */
    }

    .suggestion-item.active { /* For keyboard navigation highlight */
        background-color: var(--primary-color);
        color: var(--button-primary-text);
    }
    
    #transactions-table td:last-child {
        border-bottom: none;
        justify-content: center;
        padding: 12px 15px;
        background-color: var(--card-header-bg-color); 
    }
    
    #transactions-table td::before {
        content: attr(data-label);
        font-weight: 600;
        margin-right: auto;
        text-align: left;
        color: var(--secondary-color);
    }
    
    #transactions-table td[data-label="Amount"] {
        font-weight: 600;
        font-size: 1.1rem;
    }
    
    #transactions-table td[data-label="Date"] {
        color: var(--secondary-color);
    }
    
    #transactions-table td[data-label="Description"] {
        font-weight: 500;
        color: var(--text-color);
    }
    
    .transaction-actions {
        display: flex;
        gap: 10px;
        width: 100%;
        justify-content: center;
    }
    
    .transaction-actions .btn {
        flex: 1;
        max-width: 120px;
    }
}

/* Sort indicators */
.sort-indicator {
    display: inline-block;
    margin-left: 5px;
    font-size: 0.75rem;
    color: var(--text-color);
}

.sortable {
    cursor: pointer;
}

.sortable:hover {
    background-color: var(--table-row-hover-bg-color);
}

/* Mobile sort controls */
@media (min-width: 769px) {
    .mobile-sort-controls {
        display: none;
    }
}

/* Positive/negative amount colors */
.amount-positive {
    color: var(--amount-positive-color);
}

.amount-negative {
    color: var(--amount-negative-color);
}

/* User list styles */
.list-group-item { 
    background-color: var(--list-group-item-bg-color);
    color: var(--text-color);
    border: 1px solid var(--card-border-color); 
}

.user-list-item { 
    cursor: pointer;
    /* transition: background-color 0.2s; */ /* Old transition */
    transition: background-color 0.2s ease-in-out, 
                border-color 0.2s ease-in-out, 
                transform 0.2s ease-in-out, 
                box-shadow 0.2s ease-in-out,
                color 0.2s ease-in-out;
    /* Base styles like background-color, color, border are inherited from .list-group-item */
}

.user-list-item:hover {
    background-color: var(--table-row-hover-bg-color);
    transform: scale(1.02);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    /* Consider adding: border-color: var(--primary-color); if desired for more emphasis */
}

#user-list {
    width: 70%;
    margin: 0 auto;
}

/* Hover effect for dark theme */
.dark-theme .user-list-item:hover {
    background-color: var(--table-row-hover-bg-color); /* Resolves to #252525 in dark theme */
    transform: scale(1.02);
    box-shadow: 0 4px 8px rgba(0,0,0,0.25); /* Darker shadow for dark theme */
    /* Consider adding: border-color: var(--primary-color); */
}

/* Base style for icons on user list items (placeholder) */
.user-list-item::before {
    content: "\f28a";  /* bi-circle */
    font-family: "bootstrap-icons";
    margin-right: 8px;
    vertical-align: -0.125em;
    color: var(--secondary-color); 
    transition: color 0.2s ease-in-out;
}

.user-list-item:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
    box-shadow: 0 0 0 0.2rem rgba(var(--primary-color-rgb), 0.5);
}

.user-list-item.active {
    background-color: var(--table-row-hover-bg-color); 
    border-color: var(--primary-color); 
    color: var(--text-color); /* Ensure text is dark in light theme */
}

/* Selected icon for light theme */
.user-list-item.active::before {
    content: "\f4d5"; /* bi-person-check-fill */
    color: var(--primary-color); /* Active icon color */
    /* font-family, margin-right, vertical-align are inherited */
}

/* Ensure text alignment for selected user name in light theme */
.user-list-item.active span.fw-medium {
    text-align: left;
    flex-grow: 1;
}

/* Dark theme specific style for selected user */
.dark-theme .user-list-item.active {
    background-color: #637085; /* User requested color */
    border-color: var(--primary-color); /* Contrasting border */
    color: var(--text-color); /* Readable text color */
}

/* Selected icon for dark theme */
.dark-theme .user-list-item.active::before {
    content: "\f4d5"; /* bi-person-check-fill */
    color: var(--primary-color); /* Active icon color for dark theme */
    /* font-family, margin-right, vertical-align are inherited */
}

/* Fix for text alignment of user name in dark theme active state */
.dark-theme .user-list-item.active span.fw-medium {
    text-align: left; /* Explicitly align text to the left */
    flex-grow: 1; /* Allow the name to take available space, pushing balance to the right */
}

/* Sync status indicator */
#sync-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* Transaction actions */
.transaction-actions {
    display: flex;
    gap: 8px;
}

/* Login form styles */
.login-container {
    max-width: 400px;
    margin: 50px auto;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px var(--card-shadow-color);
    background-color: var(--card-bg-color);
    border: 1px solid var(--card-border-color);
}

.login-header {
    text-align: center;
    margin-bottom: 20px;
    color: var(--text-color);
}

.login-form {
    margin-bottom: 20px;
}

.login-footer {
    text-align: center;
    font-size: 0.9rem;
    color: var(--secondary-color);
}

/* User profile dropdown */
.user-profile {
    position: relative;
    display: inline-block;
}

.user-profile-dropdown {
    position: absolute;
    right: 0;
    top: 100%;
    background-color: var(--dropdown-bg-color);
    border: 1px solid var(--dropdown-border-color);
    border-radius: 4px;
    box-shadow: 0 2px 10px var(--dropdown-shadow-color);
    min-width: 200px;
    z-index: 1000;
    display: none;
}

.user-profile-dropdown.show {
    display: block;
}

.user-profile-dropdown a {
    display: block;
    padding: 8px 15px;
    color: var(--dropdown-link-color);
    text-decoration: none;
}

.user-profile-dropdown a:hover {
    background-color: var(--dropdown-link-hover-bg-color);
}

.user-profile-dropdown .divider {
    height: 1px;
    background-color: var(--dropdown-divider-color);
    margin: 5px 0;
}

/* Loading spinner */
.loading-spinner {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 2px solid var(--spinner-border-color);
    border-left-color: var(--spinner-left-border-color);
    border-radius: 50%;
    animation: spinner 0.6s linear infinite;
}

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

/* Card header for mobile transaction cards */
@media (max-width: 768px) {
    .transaction-card-header { 
        background-color: var(--card-header-bg-color);
        padding: 10px 15px;
        border-bottom: 1px solid var(--card-border-color); 
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .transaction-card-header .serial-number {
        font-weight: 600;
        color: var(--secondary-color);
    }
    
    .transaction-card-header .transaction-date {
        color: var(--secondary-color);
        font-size: 0.9rem;
    }
    
    #transactions-list tr:nth-child(odd) {
        border-left: 3px solid var(--card-odd-border-left-color);
    }
    
    #transactions-list tr:nth-child(even) {
        border-left: 3px solid var(--card-even-border-left-color);
    }
}

/* General input styling */
input[type="text"],
input[type="number"],
input[type="date"],
input[type="email"],
input[type="password"],
select,
textarea {
    background-color: var(--input-bg-color);
    color: var(--input-text-color);
    border: 1px solid var(--input-border-color);
}

input[type="text"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
select:focus,
textarea:focus {
    border-color: var(--primary-color); 
    box-shadow: 0 0 0 0.2rem rgba(var(--primary-color-rgb, 13, 110, 253), 0.25); 
}

/* Ensure Bootstrap button styles are themeable */
.btn-primary {
    background-color: var(--button-primary-bg);
    border-color: var(--button-primary-bg); 
    color: var(--button-primary-text);
}
.btn-primary:hover {
    filter: brightness(90%);
}

.btn-secondary {
    background-color: var(--button-secondary-bg);
    border-color: var(--button-secondary-bg);
    color: var(--button-secondary-text);
}
.btn-secondary:hover {
    filter: brightness(90%);
}

.btn-danger {
    background-color: var(--button-danger-bg);
    border-color: var(--button-danger-bg);
    color: var(--button-danger-text);
}
.btn-danger:hover {
    filter: brightness(90%);
}

/* Table styling for desktop */
#transactions-table th { 
    background-color: var(--table-header-bg-color);
    color: var(--text-color);
    border-bottom: 2px solid var(--card-border-color); 
}

#transactions-table tbody tr { 
    background-color: var(--table-row-bg-color);
    color: var(--text-color);
}

#transactions-table td { 
    border-bottom: 1px solid var(--card-border-color); 
    color: var(--text-color); 
}

#transactions-table tbody tr:hover {
    background-color: var(--table-row-hover-bg-color);
}

/* Modal styles */
.modal-content {
    background-color: var(--card-bg-color);
    color: var(--text-color);
    border: 1px solid var(--card-border-color);
}
.modal-header {
    background-color: var(--card-header-bg-color); 
    border-bottom: 1px solid var(--card-border-color);
}
.modal-header .btn-close {
    filter: var(--text-color) == #e0e0e0 ? invert(1) brightness(2) : none; 
}
.modal-footer {
    background-color: var(--card-header-bg-color); 
    border-top: 1px solid var(--card-border-color);
}

/* Badges (like online/offline status) */
.badge.bg-success {
    background-color: var(--success-color) !important; 
}
.badge.bg-danger {
    background-color: var(--danger-color) !important; 
}

/* General container adjustments for theme */
.container, .container-fluid {
    color: var(--text-color);
}

/* Text muted elements */
.text-muted {
    color: var(--secondary-color) !important; 
}

/* Links */
a {
    color: var(--link-color);
}
a:hover {
    filter: brightness(80%);
}

/* Specific Bootstrap Overrides for cards if needed */
.card-header.bg-light { 
    background-color: var(--card-header-bg-color) !important;
}

/* Bootstrap text color overrides for dark theme */
body.dark-theme .text-success {
    color: var(--amount-positive-color) !important;
}
body.dark-theme .text-danger {
    color: var(--amount-negative-color) !important;
}

/* Dark theme specific styles for export option inputs */
body.dark-theme #export-format,
body.dark-theme #export-filter,
body.dark-theme #amount-from,
body.dark-theme #amount-to,
body.dark-theme #date-from,
body.dark-theme #date-to {
    background-color: var(--input-bg-color);
    color: var(--input-text-color);
    border-color: var(--input-border-color);
}

/* Dark theme specific styles for transaction list table */
body.dark-theme #transactions-table tbody tr {
    background-color: var(--table-row-bg-color) !important; 
    color: var(--text-color) !important;
}

body.dark-theme #transactions-table thead th {
    background-color: var(--table-header-bg-color);
    color: var(--text-color);
    border-bottom-color: var(--input-border-color); 
}

body.dark-theme #transactions-table tbody tr:hover {
    background-color: var(--table-row-hover-bg-color) !important;
}

/* Dark theme specific styles for Calculator */
body.dark-theme .equation-input {
    background-color: var(--input-bg-color);
    color: var(--input-text-color);
    border-color: var(--input-border-color);
}

body.dark-theme .equation-input::placeholder {
    color: var(--secondary-color);
    opacity: 0.7;
}

body.dark-theme .equation-input:focus {
   border-color: var(--primary-color); 
   box-shadow: 0 0 0 0.2rem rgba(var(--primary-color-rgb), 0.25);
}

body.dark-theme .result-output { /* Targets <output class="... result-output ..."> */
    color: var(--text-color); 
}

/* More specific rule if .form-control-plaintext is making its color too muted */
body.dark-theme .form-control-plaintext.result-output {
   color: var(--text-color); 
}

/* Highly specific rule for TDs in dark theme transaction table */
body.dark-theme #transactions-table tbody tr td {
    background-color: var(--table-row-bg-color) !important; /* Ensures TD matches TR background */
    color: var(--text-color) !important; /* Ensures TD text color matches theme */
    border-color: var(--card-border-color) !important; /* Ensures TD borders match theme; use --table-cell-border-color if different */
}

/* Adjust TD border for mobile card view in dark theme if needed - it already uses --table-cell-border-color */
@media (max-width: 768px) {
    body.dark-theme #transactions-table td { /* For mobile card view cells */
        border-bottom: 1px solid var(--table-cell-border-color) !important; /* Ensure themed border */
    }
    body.dark-theme #transactions-table td:last-child {
        border-bottom: none !important; /* Keep last cell borderless if intended */
    }
}