/* Clean Dashboard-inspired Real Estate Page */

/* Global Enhancements */

/* Chart Toggle Styling */
#chartToggleGroup {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

#chartToggleGroup .btn {
    border: none;
    padding: 8px 16px;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-secondary);
    border-radius: 0;
}

#chartToggleGroup .btn:first-child {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

#chartToggleGroup .btn:last-child {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

#chartToggleGroup .btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    transform: translateY(-1px);
}

#chartToggleGroup .btn.active {
    background: var(--primary-color);
    color: white;
    box-shadow: 0 2px 8px rgba(5, 118, 185, 0.3);
}

#chartToggleGroup .btn.active:hover {
    background: var(--primary-color);
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(5, 118, 185, 0.4);
}

#refreshChartBtn {
    transition: all 0.3s ease;
}

#refreshChartBtn:hover {
    transform: rotate(180deg);
}

@media (max-width: 768px) {
    #chartToggleGroup .btn {
        padding: 6px 12px;
        font-size: 0.8rem;
    }
    
    #chartToggleGroup .btn i {
        margin-right: 4px !important;
    }
}

/* AI Advisory Tab Styling - Ensure it works on all pages */
#sidebar-menu ul li.ai-advisory-premium {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
    border-radius: 8px;
    margin: 8px 12px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
    transition: all 0.3s ease;
    list-style: none;
}

#sidebar-menu ul li.ai-advisory-premium::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

#sidebar-menu ul li.ai-advisory-premium:hover::before {
    left: 100%;
}

#sidebar-menu ul li.ai-advisory-premium > a {
    color: white !important;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    padding: 12px 16px !important;
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    z-index: 2;
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.3s ease;
    background: transparent !important;
}

#sidebar-menu ul li.ai-advisory-premium > a:hover {
    background: transparent !important;
    color: white !important;
}

#sidebar-menu ul li.ai-advisory-premium > a i {
    color: white !important;
    font-size: 1.1em;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
    width: 20px;
    text-align: center;
}

#sidebar-menu ul li.ai-advisory-premium > a span {
    color: white !important;
    font-weight: 600;
}

#sidebar-menu ul li.ai-advisory-premium:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
}

#sidebar-menu ul li.ai-advisory-premium .premium-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    background: linear-gradient(45deg, #ff6b6b, #ffa500);
    color: white;
    font-size: 0.65em;
    padding: 2px 6px;
    border-radius: 8px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(255, 107, 107, 0.4);
    position: relative;
    overflow: hidden;
    z-index: 3;
}

#sidebar-menu ul li.ai-advisory-premium .premium-badge::before {
    content: '✨';
    position: absolute;
    top: -1px;
    left: -1px;
    font-size: 0.7em;
    animation: sparkle 2s ease-in-out infinite;
    opacity: 0.8;
}

#sidebar-menu ul li.ai-advisory-premium .premium-badge::after {
    content: '✨';
    position: absolute;
    bottom: -1px;
    right: -1px;
    font-size: 0.5em;
    animation: sparkle 2s ease-in-out infinite 1s;
    opacity: 0.6;
}

/* Premium pulse animation */
@keyframes premium-pulse {
    0% {
        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
    }
    50% {
        box-shadow: 0 4px 25px rgba(102, 126, 234, 0.6);
    }
    100% {
        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
    }
}

#sidebar-menu ul li.ai-advisory-premium {
    animation: premium-pulse 3s ease-in-out infinite;
}

@keyframes sparkle {
    0%, 100% {
        transform: scale(1) rotate(0deg);
        opacity: 0.6;
    }
    50% {
        transform: scale(1.2) rotate(180deg);
        opacity: 1;
    }
}

/* Responsive adjustments for AI advisory tab */
@media (max-width: 768px) {
    #sidebar-menu ul li.ai-advisory-premium {
        margin: 6px 8px;
    }
    
    #sidebar-menu ul li.ai-advisory-premium > a {
        padding: 10px 12px !important;
    }
    
    #sidebar-menu ul li.ai-advisory-premium .premium-badge {
        font-size: 0.6em;
        padding: 1px 4px;
    }
}
:root {
    --primary-color: #0576b9;
    --primary-gradient: linear-gradient(135deg, #0576b9 0%, #47bce8 100%);
    --success-color: #2cb57e;
    --warning-color: #ffc107;
    --danger-color: #ef4444;
    --card-bg: #1a1f2e;
    --card-border: rgba(255, 255, 255, 0.08);
    --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    --card-shadow-hover: 0 8px 40px rgba(0, 0, 0, 0.25);
    --text-primary: #ffffff;
    --text-secondary: #a8b2c8;
    --text-muted: #6c757d;
    --border-radius: 12px;
    --border-radius-lg: 16px;
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --modal-bg: rgba(15, 20, 25, 0.95);
    --modal-content-bg: #1a1f2e;
    --form-control-bg: rgba(255, 255, 255, 0.05);
    --form-control-border: rgba(255, 255, 255, 0.15);
    --form-control-focus-bg: rgba(255, 255, 255, 0.08);
    --form-control-focus-border: #0576b9;
}

/* Page Layout */
.page-content {
    background: linear-gradient(135deg, #0f1419 0%, #1a1f2e 100%);
    min-height: 100vh;
    padding: 5rem 1rem 1rem 1rem;
}

.container-fluid {
    max-width: 1400px;
    margin: 0 auto;
}

/* Modern Card Styling */
.card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--border-radius);
    box-shadow: var(--card-shadow);
    transition: var(--transition);
    overflow: hidden;
    position: relative;
}

.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--primary-gradient);
    opacity: 0;
    transition: var(--transition);
}

.card:hover {
    box-shadow: var(--card-shadow-hover);
}

.card:hover::before {
    opacity: 1;
}

.card-body {
    padding: 1.5rem;
}

.card-header {
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid var(--card-border);
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.card-title {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 1.125rem;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.card-title i {
    color: var(--primary-color);
    font-size: 1rem;
}

/* Metric Cards */
.metric-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--border-radius);
    padding: 1.5rem;
    text-align: center;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.metric-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--primary-color);
    transform: scaleX(0);
    transition: var(--transition);
}

.metric-card:hover::before {
    transform: scaleX(1);
}

.metric-card:hover {
    box-shadow: var(--card-shadow-hover);
}

.metric-card .metric-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.metric-card .metric-label {
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Modern Buttons */
.btn {
    border-radius: 8px;
    font-weight: 500;
    padding: 0.75rem 1.5rem;
    transition: var(--transition);
    border: none;
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: var(--transition);
}

.btn:hover::before {
    left: 100%;
}

/* Enhanced Manage Expenses Button */
.manage-expenses-btn {
    background: linear-gradient(135deg, #ffc107 0%, #ff8c00 100%);
    border: 1px solid rgba(255, 193, 7, 0.3);
    color: #000;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 12px rgba(255, 193, 7, 0.3);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.manage-expenses-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.manage-expenses-btn:hover {
    background: linear-gradient(135deg, #ffb300 0%, #ff7f00 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 193, 7, 0.4);
    color: #000;
}

.manage-expenses-btn:hover::after {
    opacity: 1;
}

.manage-expenses-btn:active {
    transform: translateY(0);
    box-shadow: 0 4px 12px rgba(255, 193, 7, 0.3);
}

.manage-expenses-btn .btn-content {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
}

.manage-expenses-btn .btn-loading {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.manage-expenses-btn.loading .btn-content {
    opacity: 0;
    transform: scale(0.8);
}

.manage-expenses-btn.loading .btn-loading {
    opacity: 1;
    transform: scale(1);
}

.manage-expenses-btn .btn-badge {
    animation: pulse 2s infinite;
    z-index: 10;
}

@keyframes pulse {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.1);
        opacity: 0.8;
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}

.manage-expenses-btn.has-expenses {
    background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.4);
}

.manage-expenses-btn.has-expenses:hover {
    background: linear-gradient(135deg, #ff5722 0%, #ff6b35 100%);
    box-shadow: 0 8px 25px rgba(255, 107, 53, 0.5);
}

.manage-expenses-btn .btn-text {
    font-weight: 600;
    letter-spacing: 0.3px;
}

.manage-expenses-btn i {
    font-size: 0.9em;
    transition: transform 0.3s ease;
}

.manage-expenses-btn:hover i {
    transform: scale(1.1) rotate(5deg);
}

/* Mobile responsiveness for manage expenses button */
@media (max-width: 768px) {
    .manage-expenses-btn {
        padding: 0.5rem 0.75rem;
        font-size: 0.8rem;
    }
    
    .manage-expenses-btn .btn-text {
        display: none;
    }
    
    .manage-expenses-btn .btn-content {
        gap: 0.25rem;
    }
    
    .manage-expenses-btn .btn-badge {
        font-size: 0.5rem !important;
        padding: 0.2rem 0.4rem;
    }
}

/* Accessibility improvements */
.manage-expenses-btn:focus {
    outline: 2px solid rgba(255, 193, 7, 0.5);
    outline-offset: 2px;
}

.manage-expenses-btn:focus-visible {
    outline: 2px solid rgba(255, 193, 7, 0.8);
    outline-offset: 2px;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .manage-expenses-btn {
        transition: none;
    }
    
    .manage-expenses-btn::before,
    .manage-expenses-btn::after {
        transition: none;
    }
    
    .manage-expenses-btn:hover {
        transform: none;
    }
    
    .manage-expenses-btn:hover i {
        transform: none;
    }
    
    .manage-expenses-btn .btn-badge {
        animation: none;
    }
}

/* Streamlined Property Management Center Styling */
#expensesModal .modal-content {
    background: linear-gradient(135deg, #1a1f2e 0%, #2d3748 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    min-height: 80vh;
}

#expensesModal .property-header {
    background: linear-gradient(135deg, rgba(5, 118, 185, 0.2) 0%, rgba(71, 188, 232, 0.2) 100%);
    border-bottom: 2px solid rgba(5, 118, 185, 0.3);
    backdrop-filter: blur(10px);
}

#expensesModal .property-header h4 {
    color: #ffffff !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    font-weight: 700;
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

#expensesModal .property-header h4 i {
    color: #47bce8 !important;
    margin-right: 0.75rem;
    font-size: 1.3em;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    display: inline-block;
    vertical-align: middle;
}

#expensesModal .property-header h4 span {
    color: #ffffff !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    font-weight: 700;
}

#expensesModal .property-header p {
    color: rgba(255, 255, 255, 0.9) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    font-weight: 400;
    font-size: 1rem;
    margin-bottom: 0;
}

#expensesModal .quick-add-section {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

#expensesModal .quick-add-card {
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

#expensesModal .quick-add-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

#expensesModal .quick-add-card form {
    transition: all 0.3s ease;
}

#expensesModal .quick-add-card form:focus-within {
    transform: scale(1.02);
}

#expensesModal .content-tabs {
    background: rgba(26, 31, 46, 0.95);
}

#expensesModal .nav-pills {
    background: rgba(255, 255, 255, 0.05) !important;
    border-radius: 12px;
    margin: 0;
}

#expensesModal .nav-pills .nav-link {
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    padding: 1rem 1.5rem;
    font-weight: 500;
    transition: all 0.3s ease;
    border-radius: 8px;
    margin: 0 0.25rem;
}

#expensesModal .nav-pills .nav-link:hover {
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-1px);
}

#expensesModal .nav-pills .nav-link.active {
    color: #ffffff;
    background: linear-gradient(135deg, #0576b9 0%, #47bce8 100%);
    box-shadow: 0 4px 15px rgba(5, 118, 185, 0.4);
}

#expensesModal .nav-pills .nav-link .badge {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff;
    font-size: 0.7rem;
    padding: 0.25rem 0.5rem;
}

#expensesModal .tab-content {
    background: rgba(26, 31, 46, 0.95);
    color: #ffffff;
    min-height: 400px;
}

#expensesModal .tab-content h6 {
    color: #ffffff;
}

#expensesModal .tab-content small {
    color: rgba(255, 255, 255, 0.7);
}

#expensesModal .tab-content .text-dark {
    color: #ffffff !important;
}

#expensesModal .tab-content .text-muted {
    color: rgba(255, 255, 255, 0.7) !important;
}

#expensesModal .expenses-section,
#expensesModal .maintenance-section {
    min-height: 300px;
}

/* Enhanced form styling */
#expensesModal .form-control,
#expensesModal .form-select {
    background: rgba(45, 55, 72, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
    transition: all 0.3s ease;
}

#expensesModal .form-control:focus,
#expensesModal .form-select:focus {
    background: rgba(45, 55, 72, 0.9) !important;
    border-color: #0576b9 !important;
    box-shadow: 0 0 0 0.2rem rgba(5, 118, 185, 0.25) !important;
    transform: translateY(-1px);
}

#expensesModal .form-control::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
}

#expensesModal .form-select option {
    background: #2d3748;
    color: #ffffff;
}

/* Enhanced button styling */
#expensesModal .btn {
    transition: all 0.3s ease;
    border-radius: 8px;
    font-weight: 500;
}

#expensesModal .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

#expensesModal .btn-primary {
    background: linear-gradient(135deg, #0576b9 0%, #47bce8 100%);
    border: none;
    box-shadow: 0 4px 12px rgba(5, 118, 185, 0.3);
}

#expensesModal .btn-primary:hover {
    background: linear-gradient(135deg, #0469a3 0%, #3aa8d4 100%);
    box-shadow: 0 6px 20px rgba(5, 118, 185, 0.4);
}

#expensesModal .btn-warning {
    background: linear-gradient(135deg, #ffc107 0%, #ff8c00 100%);
    border: none;
    color: #000;
    box-shadow: 0 4px 12px rgba(255, 193, 7, 0.3);
}

#expensesModal .btn-warning:hover {
    background: linear-gradient(135deg, #ffb300 0%, #ff7f00 100%);
    box-shadow: 0 6px 20px rgba(255, 193, 7, 0.4);
    color: #000;
}

#expensesModal .btn-outline-primary {
    border-color: #0576b9;
    color: #0576b9;
    background: transparent;
}

#expensesModal .btn-outline-primary:hover {
    background: #0576b9;
    border-color: #0576b9;
    color: #ffffff;
}

#expensesModal .btn-outline-warning {
    border-color: #ffc107;
    color: #ffc107;
    background: transparent;
}

#expensesModal .btn-outline-warning:hover {
    background: #ffc107;
    border-color: #ffc107;
    color: #000;
}

/* Dark theme card styling */
#expensesModal .card {
    background: rgba(45, 55, 72, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

#expensesModal .card-header {
    background: rgba(45, 55, 72, 0.9);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

#expensesModal .expense-card {
    background: linear-gradient(135deg, rgba(45, 55, 72, 0.8) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    color: #ffffff;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

#expensesModal .expense-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #1abc9c 0%, #16a085 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

#expensesModal .expense-card:hover {
    background: linear-gradient(135deg, rgba(45, 55, 72, 0.9) 0%, rgba(30, 41, 59, 1) 100%);
    border-color: rgba(26, 188, 156, 0.4);
    transform: translateY(-3px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}

#expensesModal .expense-card:hover::before {
    opacity: 1;
}

/* Expense Card Header */
#expensesModal .expense-card .maintenance-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

#expensesModal .expense-card .maintenance-title {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
}

#expensesModal .expense-card .icon-main {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #1abc9c 0%, #16a085 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 1.25rem;
    box-shadow: 0 4px 12px rgba(26, 188, 156, 0.3);
    transition: all 0.3s ease;
}

#expensesModal .expense-card:hover .icon-main {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(26, 188, 156, 0.4);
}

#expensesModal .expense-card .title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 0.25rem;
    line-height: 1.2;
}

#expensesModal .expense-card .subtitle {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 400;
}

#expensesModal .expense-card .badge-status {
    background: linear-gradient(135deg, #1abc9c 0%, #16a085 100%);
    color: #ffffff;
    border-radius: 20px;
    padding: 0.5rem 1rem;
    font-weight: 600;
    font-size: 0.875rem;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(26, 188, 156, 0.3);
    transition: all 0.3s ease;
}

#expensesModal .expense-card:hover .badge-status {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(26, 188, 156, 0.4);
}

/* Expense Card Info Section */
#expensesModal .expense-card .maintenance-info {
    margin-bottom: 1.5rem;
}

#expensesModal .expense-card .info-block {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

#expensesModal .expense-card .info-block:last-child {
    border-bottom: none;
}

#expensesModal .expense-card .info-block i {
    width: 20px;
    color: #1abc9c;
    font-size: 1rem;
    text-align: center;
}

#expensesModal .expense-card .info-block .label {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.25rem;
}

#expensesModal .expense-card .info-block .value {
    font-size: 1rem;
    color: #ffffff;
    font-weight: 600;
}

/* Expense Card Actions */
#expensesModal .expense-card .maintenance-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

#expensesModal .expense-card .btn-edit-maintenance {
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
    border: none;
    color: #ffffff;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-weight: 500;
    font-size: 0.875rem;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 2px 8px rgba(52, 152, 219, 0.3);
}

#expensesModal .expense-card .btn-edit-maintenance:hover {
    background: linear-gradient(135deg, #2980b9 0%, #21618c 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.4);
    color: #ffffff;
}

#expensesModal .expense-card .btn-delete {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
    border: none;
    color: #ffffff;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-weight: 500;
    font-size: 0.875rem;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 2px 8px rgba(231, 76, 60, 0.3);
}

#expensesModal .expense-card .btn-delete:hover {
    background: linear-gradient(135deg, #c0392b 0%, #a93226 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(231, 76, 60, 0.4);
    color: #ffffff;
}

/* Mobile Responsiveness for Expense Cards */
@media (max-width: 768px) {
    #expensesModal .expense-card {
        margin-bottom: 1rem;
    }
    
    #expensesModal .expense-card .maintenance-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    
    #expensesModal .expense-card .maintenance-title {
        width: 100%;
    }
    
    #expensesModal .expense-card .badge-status {
        align-self: flex-end;
    }
    
    #expensesModal .expense-card .maintenance-info {
        margin-bottom: 1rem;
    }
    
    #expensesModal .expense-card .info-block {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
        padding: 0.5rem 0;
    }
    
    #expensesModal .expense-card .maintenance-actions {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    #expensesModal .expense-card .btn-edit-maintenance,
    #expensesModal .expense-card .btn-delete {
        width: 100%;
        justify-content: center;
    }
}

/* Animation for Expense Cards */
@keyframes expenseCardSlideIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#expensesModal .expense-card {
    animation: expenseCardSlideIn 0.4s ease-out;
}

#expensesModal .expense-card:nth-child(1) { animation-delay: 0.1s; }
#expensesModal .expense-card:nth-child(2) { animation-delay: 0.2s; }
#expensesModal .expense-card:nth-child(3) { animation-delay: 0.3s; }
#expensesModal .expense-card:nth-child(4) { animation-delay: 0.4s; }
#expensesModal .expense-card:nth-child(5) { animation-delay: 0.5s; }

/* Enhanced focus states for accessibility */
#expensesModal .expense-card:focus-within {
    outline: 2px solid #1abc9c;
    outline-offset: 2px;
}

#expensesModal .expense-card .btn-edit-maintenance:focus,
#expensesModal .expense-card .btn-delete:focus {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

/* Category-specific styling */
#expensesModal .expense-card[data-category="property tax"] .icon-main {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
}

#expensesModal .expense-card[data-category="insurance"] .icon-main {
    background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
}

#expensesModal .expense-card[data-category="repairs"] .icon-main {
    background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%);
}

#expensesModal .expense-card[data-category="maintenance"] .icon-main {
    background: linear-gradient(135deg, #e67e22 0%, #d35400 100%);
}

#expensesModal .expense-card[data-category="hoa"] .icon-main {
    background: linear-gradient(135deg, #34495e 0%, #2c3e50 100%);
}

#expensesModal .expense-card[data-category="utilities"] .icon-main {
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
}

#expensesModal .expense-card[data-category="property management"] .icon-main {
    background: linear-gradient(135deg, #1abc9c 0%, #16a085 100%);
}

#expensesModal .expense-card[data-category="other"] .icon-main {
    background: linear-gradient(135deg, #95a5a6 0%, #7f8c8d 100%);
}

/* Load More Button Styling */
#expensesModal #loadMoreExpenses {
    background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #ffffff;
    padding: 0.75rem 1.5rem;
    border-radius: 12px;
    font-weight: 500;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

#expensesModal #loadMoreExpenses:hover {
    background: linear-gradient(135deg, #5a6268 0%, #343a40 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    color: #ffffff;
}

#expensesModal #loadMoreExpenses:active {
    transform: translateY(0);
}

#expensesModal #loadMoreExpenses i {
    transition: transform 0.3s ease;
}

#expensesModal #loadMoreExpenses:hover i {
    transform: translateY(2px);
}

/* Property Management Center Modal Close Button */
#expensesModal .btn-close {
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    padding: 8px;
    transition: all 0.3s ease;
}

#expensesModal .btn-close:hover {
    background-color: rgba(255, 255, 255, 1);
    transform: scale(1.1);
}

#expensesModal .btn-close:focus {
    box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25);
}

/* Bulk Add Modal Styling */
#bulkAddExpensesModal .modal-content {
    background: linear-gradient(135deg, rgba(45, 55, 72, 0.95) 0%, rgba(30, 41, 59, 0.98) 100%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    color: #ffffff;
    backdrop-filter: blur(10px);
}

#bulkAddExpensesModal .modal-header {
    background: linear-gradient(135deg, #1abc9c 0%, #16a085 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px 16px 0 0;
}

#bulkAddExpensesModal .modal-title {
    color: #ffffff;
    font-weight: 600;
}

#bulkAddExpensesModal .modal-body {
    padding: 1.5rem;
}

#bulkAddExpensesModal .form-control {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border-radius: 8px;
    pointer-events: auto;
    user-select: text;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
}

#bulkAddExpensesModal .form-control:focus {
    background: rgba(255, 255, 255, 0.08);
    border-color: #1abc9c;
    color: #ffffff;
    box-shadow: 0 0 0 0.2rem rgba(26, 188, 156, 0.25);
}

#bulkAddExpensesModal .form-control::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

#bulkAddExpensesModal .form-label {
    color: #ffffff;
    font-weight: 500;
}

#bulkAddExpensesModal .form-text {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
}

#bulkAddExpensesModal .btn {
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.3s ease;
}

#bulkAddExpensesModal .btn-primary {
    background: linear-gradient(135deg, #1abc9c 0%, #16a085 100%);
    border: none;
    color: #ffffff;
}

#bulkAddExpensesModal .btn-primary:hover {
    background: linear-gradient(135deg, #16a085 0%, #138d75 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(26, 188, 156, 0.3);
}

#bulkAddExpensesModal .btn-secondary {
    background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
    border: none;
    color: #ffffff;
}

#bulkAddExpensesModal .btn-secondary:hover {
    background: linear-gradient(135deg, #5a6268 0%, #343a40 100%);
    transform: translateY(-1px);
}

#bulkAddExpensesModal .btn-outline-secondary,
#bulkAddExpensesModal .btn-outline-info {
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.8);
    background: transparent;
}

#bulkAddExpensesModal .btn-outline-secondary:hover,
#bulkAddExpensesModal .btn-outline-info:hover,
#bulkAddExpensesModal .btn-outline-warning:hover,
#bulkAddExpensesModal .btn-outline-success:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.3);
}

#bulkAddExpensesModal .table {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    overflow: hidden;
}

#bulkAddExpensesModal .table th {
    background: rgba(26, 188, 156, 0.2);
    color: #ffffff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

#bulkAddExpensesModal .table td {
    color: #ffffff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

#bulkAddExpensesModal .table-striped tbody tr:nth-of-type(odd) {
    background: rgba(255, 255, 255, 0.02);
}

/* Enhanced Expense Summary Styling */
#expensesModal .card-modern {
    background: linear-gradient(135deg, rgba(45, 55, 72, 0.8) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    color: #ffffff;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

#expensesModal .card-modern .card-header {
    background: linear-gradient(135deg, #1abc9c 0%, #16a085 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 1rem 1.5rem;
}

#expensesModal .card-modern .card-header h6 {
    color: #ffffff;
    font-weight: 600;
    margin: 0;
}

#expensesModal .card-modern .card-body {
    padding: 1.5rem;
}

#expensesModal .card-modern .bg-light {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
}

#expensesModal .card-modern .text-primary {
    color: #1abc9c !important;
}

#expensesModal .card-modern .bg-success {
    background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%) !important;
    border: none;
    color: #ffffff;
    font-weight: 600;
}

#expensesModal .card-modern .bg-primary {
    background: linear-gradient(135deg, #1abc9c 0%, #16a085 100%) !important;
    border: none;
    color: #ffffff;
}

#expensesModal .card-modern .text-white {
    color: #ffffff !important;
}

/* Empty state styling */
#expensesModal .empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: rgba(255, 255, 255, 0.7);
}

#expensesModal .empty-state i {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
    color: rgba(255, 255, 255, 0.6);
}

#expensesModal .empty-state h6 {
    color: #ffffff;
    margin-bottom: 0.5rem;
}

#expensesModal .empty-state p {
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 1.5rem;
}

#expensesModal .empty-state small {
    color: rgba(255, 255, 255, 0.6);
}

/* Enhanced button styling */
#expensesModal .btn-primary {
    background: linear-gradient(135deg, #0576b9 0%, #47bce8 100%);
    border: none;
    box-shadow: 0 4px 12px rgba(5, 118, 185, 0.3);
}

#expensesModal .btn-primary:hover {
    background: linear-gradient(135deg, #0469a3 0%, #3aa8d4 100%);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(5, 118, 185, 0.4);
}

#expensesModal .btn-warning {
    background: linear-gradient(135deg, #ffc107 0%, #ff8c00 100%);
    border: none;
    color: #000;
    box-shadow: 0 4px 12px rgba(255, 193, 7, 0.3);
}

#expensesModal .btn-warning:hover {
    background: linear-gradient(135deg, #ffb300 0%, #ff7f00 100%);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(255, 193, 7, 0.4);
    color: #000;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    #expensesModal .modal-dialog {
        margin: 0.5rem;
    }
    
    #expensesModal .nav-tabs .nav-link {
        padding: 0.75rem 1rem;
        font-size: 0.9rem;
    }
    
    #expensesModal .quick-actions-footer .row {
        flex-direction: column;
        gap: 1rem;
    }
    
    #expensesModal .quick-action-item {
        padding: 0.75rem;
    }
}

/* Loading states */
#expensesModal .loading-state {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    color: #6c757d;
}

#expensesModal .loading-state i {
    margin-right: 0.5rem;
    animation: spin 1s linear infinite;
}

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

/* Enhanced tab interactions */
#expensesModal .nav-tabs .nav-link {
    position: relative;
    overflow: hidden;
}

#expensesModal .nav-tabs .nav-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.5s ease;
}

#expensesModal .nav-tabs .nav-link:hover::before {
    left: 100%;
}

/* Tab content animations */
#expensesModal .tab-pane {
    animation: fadeInUp 0.3s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Enhanced empty state animations */
#expensesModal .empty-state {
    animation: fadeInScale 0.5s ease-out;
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Quick action hover effects */
#expensesModal .quick-action-item {
    position: relative;
    overflow: hidden;
}

#expensesModal .quick-action-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.6s ease;
}

#expensesModal .quick-action-item:hover::before {
    left: 100%;
}

/* Property info header enhancements */
#expensesModal .property-info-header {
    position: relative;
    overflow: hidden;
}

#expensesModal .property-info-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.05) 50%, transparent 70%);
    animation: shimmer 3s infinite;
}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Enhanced button states */
#expensesModal .btn:active {
    transform: translateY(1px);
}

#expensesModal .btn:focus {
    box-shadow: 0 0 0 0.2rem rgba(5, 118, 185, 0.25);
}



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

/* Responsive improvements */
@media (max-width: 576px) {
    #expensesModal .modal-dialog {
        margin: 0.25rem;
    }
    
    #expensesModal .property-info-header {
        padding: 1rem !important;
    }
    
    #expensesModal .property-info-header .d-flex {
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
    }
    
    #expensesModal .quick-actions-footer .row {
        gap: 0.5rem;
    }
    
    #expensesModal .empty-state {
        padding: 2rem 0.5rem;
    }
    
    #expensesModal .empty-state i {
        font-size: 2rem;
    }
}

.btn-primary {
    background: var(--primary-color);
    color: white;
    box-shadow: 0 4px 12px rgba(5, 118, 185, 0.3);
}

.btn-primary:hover {
    background: var(--primary-gradient);
    box-shadow: 0 6px 20px rgba(5, 118, 185, 0.4);
}

.btn-outline-primary {
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    background: transparent;
}

.btn-outline-primary:hover {
    background: var(--primary-color);
    color: white;
}

.btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}

/* Enhanced Accordion */
.accordion-item {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--border-radius);
    margin-bottom: 1rem;
    overflow: hidden;
}

.accordion-button {
    background: rgba(255, 255, 255, 0.02);
    color: var(--text-primary);
    border: none;
    padding: 1.25rem 1.5rem;
    font-weight: 500;
    transition: var(--transition);
}

.accordion-button:not(.collapsed) {
    background: var(--primary-color);
    color: white;
    box-shadow: none;
}

.accordion-button::after {
    transition: var(--transition);
}

.accordion-body {
    background: var(--card-bg);
    border-top: 1px solid var(--card-border);
    padding: 1.5rem;
}

/* Form Enhancements */
.form-control {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    color: var(--text-primary);
    padding: 0.75rem 1rem;
    transition: var(--transition);
}

.form-select {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    color: var(--text-primary);
    padding: 0.75rem 1rem;
    transition: var(--transition);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.form-control:focus {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(5, 118, 185, 0.1);
    color: var(--text-primary);
}

.form-select:focus {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(5, 118, 185, 0.1);
    color: var(--text-primary);
}

.form-control::placeholder {
    color: var(--text-secondary);
}

.form-label {
    color: var(--text-secondary);
    font-weight: 500;
    margin-bottom: 0.5rem;
}

/* Enhanced Modal */
.modal-content {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--border-radius-lg);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.modal-header {
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid var(--card-border);
    padding: 1.5rem;
}

.modal-title {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 1.25rem;
}

.modal-body {
    padding: 2rem;
}

.modal-footer {
    background: rgba(255, 255, 255, 0.02);
    border-top: 1px solid var(--card-border);
    padding: 1.5rem;
}

.card-footer {
    background: rgba(255, 255, 255, 0.02);
    border-top: 1px solid var(--card-border);
    padding: 1.5rem;
}

/* Modern Table */
.table {
    color: var(--text-primary);
    margin-bottom: 0;
}

.table thead th {
    background: rgba(255, 255, 255, 0.02);
    color: var(--text-primary);
    font-weight: 600;
    border: none;
    padding: 1rem;
    text-transform: uppercase;
    font-size: 0.875rem;
    letter-spacing: 0.5px;
}

.table tbody td {
    padding: 1rem;
    border-bottom: 1px solid var(--card-border);
    color: var(--text-secondary);
    vertical-align: middle;
}

.table tbody tr:hover {
    background: rgba(5, 118, 185, 0.05);
}

/* Enhanced Badges */
.badge {
    font-weight: 500;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge.bg-primary {
    background: var(--primary-color) !important;
}

.badge.bg-success {
    background: var(--success-color) !important;
}

.badge.bg-warning {
    background: var(--warning-color) !important;
    color: #000;
}

/* List Group */
.list-group-item {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--card-border);
    padding: 1rem;
    color: var(--text-secondary);
    transition: var(--transition);
}

.list-group-item:hover {
    background: rgba(5, 118, 185, 0.05);
}

.list-group-item:last-child {
    border-bottom: none;
}

/* Notification Carousel */
.notification-carousel {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--border-radius);
    padding: 2rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.notification-carousel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--warning-color);
}

.notification-display {
    color: var(--warning-color);
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.notification-navigation {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.notification-nav-btn {
    flex: 1;
    max-width: 60px;
    padding: 0.5rem;
    border-radius: 6px;
}

/* Chart Container */
.apex-charts {
    background: transparent;
}

/* Loading States */
.loading-shimmer {
    background: linear-gradient(90deg, 
        rgba(255, 255, 255, 0.05) 25%, 
        rgba(255, 255, 255, 0.1) 50%, 
        rgba(255, 255, 255, 0.05) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* Enhanced Hover Effects */
.card.bg-primary:hover,
.card.bg-success:hover,
.card.bg-warning:hover {
    box-shadow: var(--card-shadow-hover);
}

/* Text Color Overrides */
.text-primary {
    color: var(--primary-color) !important;
}

.text-success {
    color: var(--success-color) !important;
}

.text-warning {
    color: var(--warning-color) !important;
}

.text-danger {
    color: var(--danger-color) !important;
}

.text-muted {
    color: var(--text-secondary) !important;
}

/* Enhanced Property Cards */
#realEstateOverview .card {
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

#realEstateOverview .card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--primary-color);
    transform: scaleX(0);
    transition: var(--transition);
}

#realEstateOverview .card:hover::after {
    transform: scaleX(1);
}

/* Professional Property Card Styling */
#realEstateOverview .card-body {
    padding: 1.5rem;
    position: relative;
}

#realEstateOverview .card-body h5 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

#realEstateOverview .card-body h5 i {
    color: var(--primary-color);
    font-size: 1.1rem;
}

#realEstateOverview .card-body .badge {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.4rem 0.8rem;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(var(--primary-color), 0.15);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

#realEstateOverview .card-body .property-details {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1rem;
}

#realEstateOverview .card-body .property-detail-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

#realEstateOverview .card-body .property-detail-item:last-child {
    border-bottom: none;
}

#realEstateOverview .card-body .property-detail-label {
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
}

#realEstateOverview .card-body .property-detail-value {
    color: var(--text-primary);
    font-size: 0.875rem;
    font-weight: 600;
}

#realEstateOverview .card-body .property-actions {
    margin-top: 1.5rem;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

#realEstateOverview .card-body .btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
    font-weight: 500;
    border-radius: 8px;
    transition: var(--transition);
}

/* Modern Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary-gradient);
}

/* ========================================
   SOPHISTICATED PROPERTY DETAILS MODAL
   (Matching Retirement Action Plan Modal)
   ======================================== */

#propertyDetailsModal .modal-content {
    background: linear-gradient(135deg, #2a2a3e 0%, #3a3a52 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 20px !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5) !important;
    overflow: hidden;
}

#propertyDetailsModal .modal-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 2rem 2.5rem 1.5rem !important;
    background: linear-gradient(135deg, #003087 0%, #0070BA 100%);
    border-radius: 20px 20px 0 0 !important;
    position: relative;
}

#propertyDetailsModal .modal-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #FFC439 0%, #F39C12 50%, #E67E22 100%);
}

#propertyDetailsModal .modal-title {
    font-size: 1.75rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin: 0 !important;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

#propertyDetailsModal .modal-title::before {
    content: "🏠";
    font-size: 2rem;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

#propertyDetailsModal .modal-body {
    padding: 2.5rem !important;
    background: linear-gradient(135deg, #2a2a3e 0%, #3a3a52 100%);
    color: #ffffff;
}

#propertyDetailsModal .modal-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 1.5rem 2.5rem 2rem !important;
    background: linear-gradient(135deg, #2a2a3e 0%, #3a3a52 100%);
    border-radius: 0 0 20px 20px !important;
}

/* Enhanced Rental Term Section */
#propertyDetailsModal .modal-footer.bg-primary.bg-opacity-10 {
    background: linear-gradient(135deg, rgba(5, 118, 185, 0.15) 0%, rgba(71, 188, 232, 0.08) 100%) !important;
    border-top: 3px solid var(--primary-color) !important;
    position: relative;
}

#propertyDetailsModal .modal-footer.bg-primary.bg-opacity-10::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--primary-gradient);
    border-radius: 20px 20px 0 0;
}

#propertyDetailsModal .modal-footer h6.text-primary {
    font-weight: 600;
    font-size: 1.1rem;
    margin-bottom: 0.25rem;
}

#propertyDetailsModal .modal-footer h6.text-primary i {
    color: var(--primary-color);
    margin-right: 0.5rem;
}

#propertyDetailsModal .modal-footer small.text-muted {
    font-size: 0.875rem;
    opacity: 0.8;
}

#propertyDetailsModal .modal-footer .form-label {
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

#propertyDetailsModal .modal-footer .form-label i {
    color: var(--primary-color);
    margin-right: 0.25rem;
}

#propertyDetailsModal .modal-footer .form-control {
    border: 1px solid rgba(5, 118, 185, 0.2);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
    transition: var(--transition);
}

#propertyDetailsModal .modal-footer .form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(5, 118, 185, 0.25);
    background: rgba(255, 255, 255, 0.08);
}

#propertyDetailsModal .modal-footer .btn-primary {
    background: var(--primary-gradient);
    border: none;
    font-weight: 600;
    padding: 0.75rem 2rem;
    transition: var(--transition);
}

#propertyDetailsModal .modal-footer .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(5, 118, 185, 0.4);
}

/* Enhanced Close Button for Property Details Modal */
#propertyDetailsModal .btn-close {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 50% !important;
    width: 45px !important;
    height: 45px !important;
    opacity: 1 !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    filter: none !important;
}

#propertyDetailsModal .btn-close:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    transform: scale(1.1) rotate(90deg);
}

#propertyDetailsModal .btn-close::before {
    content: "×" !important;
    font-size: 1.5rem !important;
    font-weight: bold !important;
    color: #ffffff !important;
    line-height: 1 !important;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Enhanced Cards for Property Details */
#propertyDetailsModal .card {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 2px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 16px !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.3s ease;
    overflow: hidden;
}

#propertyDetailsModal .card:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: #FFC439 !important;
    box-shadow: 0 0 0 3px rgba(255, 196, 57, 0.2), inset 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    transform: translateY(-2px);
}

#propertyDetailsModal .card.bg-primary {
    background: linear-gradient(135deg, #0070BA 0%, #003087 100%) !important;
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
}

#propertyDetailsModal .card.bg-success {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
}

#propertyDetailsModal .card.bg-warning {
    background: linear-gradient(135deg, #FFC439 0%, #F39C12 100%) !important;
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
    color: #1a1a1a !important;
}

#propertyDetailsModal .card-header {
    background: rgba(255, 196, 57, 0.15) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 1.5rem !important;
    border-radius: 16px 16px 0 0 !important;
}

#propertyDetailsModal .card-header h6 {
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 1.1rem !important;
    margin: 0 !important;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

#propertyDetailsModal .card-header i {
    color: #FFC439 !important;
    font-size: 1.2rem;
}

/* Enhanced header action buttons */
#propertyDetailsModal .card-header .btn-sm {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 2px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 10px !important;
    padding: 0.6rem 1.2rem !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease !important;
    margin-left: 0.5rem;
    color: #a8b2d1 !important;
}

#propertyDetailsModal .card-header .btn-outline-info {
    border-color: rgba(23, 162, 184, 0.5) !important;
    color: #17a2b8 !important;
}

#propertyDetailsModal .card-header .btn-outline-info:hover {
    background: rgba(23, 162, 184, 0.15) !important;
    border-color: #17a2b8 !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(23, 162, 184, 0.3) !important;
}

#propertyDetailsModal .card-header .btn-outline-secondary {
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: #a8b2d1 !important;
}

#propertyDetailsModal .card-header .btn-outline-secondary:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.2) !important;
}

#propertyDetailsModal .card-body {
    padding: 1.5rem !important;
    background: transparent;
}

#propertyDetailsModal .list-group-item {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    padding: 1rem 1.5rem !important;
    transition: all 0.3s ease;
}

#propertyDetailsModal .list-group-item:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 196, 57, 0.3) !important;
}

#propertyDetailsModal .list-group-item:first-child {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}

#propertyDetailsModal .list-group-item:last-child {
    border-bottom-left-radius: 16px !important;
    border-bottom-right-radius: 16px !important;
}

/* Enhanced Table Styling */
#propertyDetailsModal .table {
    background: transparent !important;
    color: #ffffff !important;
    margin-bottom: 0 !important;
    table-layout: fixed !important;
    width: 100% !important;
}

/* Column width distribution */
#propertyDetailsModal .table th:nth-child(1),
#propertyDetailsModal .table td:nth-child(1) {
    width: 20% !important; /* Month */
}

#propertyDetailsModal .table th:nth-child(2),
#propertyDetailsModal .table td:nth-child(2) {
    width: 20% !important; /* Amount */
}

#propertyDetailsModal .table th:nth-child(3),
#propertyDetailsModal .table td:nth-child(3) {
    width: 20% !important; /* Status */
}

#propertyDetailsModal .table th:nth-child(4),
#propertyDetailsModal .table td:nth-child(4) {
    width: 15% !important; /* Days Late */
}

#propertyDetailsModal .table th:nth-child(5),
#propertyDetailsModal .table td:nth-child(5) {
    width: 25% !important; /* Actions */
    min-width: 140px !important;
}

#propertyDetailsModal .table thead th {
    background: rgba(255, 196, 57, 0.15) !important;
    border: none !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 1rem 1.5rem !important;
    font-size: 0.9rem !important;
}

#propertyDetailsModal .table tbody td {
    border-color: rgba(255, 255, 255, 0.1) !important;
    padding: 1rem 1.5rem !important;
    vertical-align: middle;
    background: transparent !important;
}

#propertyDetailsModal .table tbody tr:hover {
    background: rgba(255, 255, 255, 0.05) !important;
}

#propertyDetailsModal .table-responsive {
    border-radius: 12px;
    overflow: auto;
    max-height: 400px;
}

/* Ensure table container has proper width */
#propertyDetailsModal .table-responsive .table {
    min-width: 600px !important;
}

/* Enhanced Action Buttons in Table */
#propertyDetailsModal .table .btn-sm {
    padding: 0.4rem 0.6rem !important;
    font-size: 0.75rem !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    min-width: 35px !important;
    height: 30px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 0.15rem !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Ensure action buttons container is visible */
#propertyDetailsModal .table .d-flex {
    display: flex !important;
    gap: 0.25rem !important;
    justify-content: flex-end !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    min-width: 85px !important;
}

/* Force visibility of action buttons */
#propertyDetailsModal .table .edit-rent-btn,
#propertyDetailsModal .table .mark-collected-btn {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#propertyDetailsModal .table .edit-rent-btn {
    background: rgba(0, 112, 186, 0.1) !important;
    border: 2px solid rgba(0, 112, 186, 0.3) !important;
    color: #0070BA !important;
}

#propertyDetailsModal .table .edit-rent-btn:hover {
    background: rgba(0, 112, 186, 0.2) !important;
    border-color: #0070BA !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 112, 186, 0.3) !important;
}

#propertyDetailsModal .table .mark-collected-btn {
    background: rgba(40, 167, 69, 0.1) !important;
    border: 2px solid rgba(40, 167, 69, 0.3) !important;
    color: #28a745 !important;
}

#propertyDetailsModal .table .mark-collected-btn:hover {
    background: rgba(40, 167, 69, 0.2) !important;
    border-color: #28a745 !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3) !important;
}

#propertyDetailsModal .table .btn-sm:disabled {
    background: rgba(108, 117, 125, 0.1) !important;
    border-color: rgba(108, 117, 125, 0.2) !important;
    color: rgba(108, 117, 125, 0.5) !important;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

/* Action buttons group styling */
#propertyDetailsModal .table .text-end {
    white-space: nowrap !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    overflow: visible !important;
    text-align: right !important;
}

/* Enhanced status badges in table */
#propertyDetailsModal .table .badge.bg-success {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
    color: #ffffff !important;
    padding: 0.5em 1em !important;
    border-radius: 15px !important;
    font-weight: 600 !important;
    font-size: 0.75rem !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 6px rgba(40, 167, 69, 0.3);
}

#propertyDetailsModal .table .badge.bg-warning {
    background: linear-gradient(135deg, #FFC439 0%, #F39C12 100%) !important;
    color: #1a1a1a !important;
    padding: 0.5em 1em !important;
    border-radius: 15px !important;
    font-weight: 600 !important;
    font-size: 0.75rem !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 6px rgba(255, 196, 57, 0.3);
}

/* Enhanced Badges */
#propertyDetailsModal .badge {
    font-size: 0.8rem !important;
    padding: 0.5em 1.2em !important;
    border-radius: 20px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

#propertyDetailsModal .badge.bg-secondary {
    background: linear-gradient(135deg, #6c757d 0%, #495057 100%) !important;
    color: #ffffff !important;
}

#propertyDetailsModal .analytics-badge {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 20px !important;
    padding: 0.5rem 1rem !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    color: #a8b2d1 !important;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    transition: all 0.3s ease;
}

#propertyDetailsModal .analytics-badge:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 196, 57, 0.3) !important;
    transform: translateY(-1px);
}

/* Enhanced card footer styling */
#propertyDetailsModal .card-footer {
    background: rgba(255, 196, 57, 0.05) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 1.5rem !important;
    border-radius: 0 0 16px 16px !important;
}

#propertyDetailsModal .card-footer .fw-bold {
    font-weight: 700 !important;
    font-size: 1rem !important;
}

#propertyDetailsModal .card-footer .text-success {
    color: #20c997 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

#propertyDetailsModal .card-footer .text-warning {
    color: #FFC439 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Enhanced Form Controls in Footer */
#propertyDetailsModal .form-label {
    font-weight: 600 !important;
    color: #a8b2d1 !important;
    font-size: 0.9rem !important;
    margin-bottom: 0.5rem !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

#propertyDetailsModal .form-control {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 2px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 12px !important;
    color: #ffffff !important;
    font-size: 0.95rem !important;
    padding: 0.75rem 1rem !important;
    transition: all 0.3s ease !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    font-weight: 500;
}

#propertyDetailsModal .form-control:focus {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: #FFC439 !important;
    box-shadow: 0 0 0 3px rgba(255, 196, 57, 0.2), inset 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    color: #ffffff !important;
}

#propertyDetailsModal .form-control::placeholder {
    color: #8a92b2 !important;
    opacity: 0.8;
    font-style: italic;
}

/* Enhanced Buttons */
#propertyDetailsModal .btn-primary {
    background: linear-gradient(135deg, #FFC439 0%, #F39C12 50%, #E67E22 100%) !important;
    border: none !important;
    border-radius: 14px !important;
    padding: 1rem 2.5rem !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    text-transform: uppercase;
    letter-spacing: 0.75px;
    box-shadow: 0 6px 20px rgba(255, 196, 57, 0.4) !important;
    transition: all 0.3s ease !important;
    position: relative;
    overflow: hidden;
    color: #1a1a1a !important;
}

#propertyDetailsModal .btn-primary:hover:not(:disabled) {
    background: linear-gradient(135deg, #E67E22 0%, #D35400 100%) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 196, 57, 0.6) !important;
    color: #ffffff !important;
}

#propertyDetailsModal .btn-outline-primary {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 2px solid rgba(0, 112, 186, 0.5) !important;
    border-radius: 12px !important;
    padding: 0.75rem 1.5rem !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    color: #0070BA !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease !important;
}

#propertyDetailsModal .btn-outline-primary:hover {
    background: rgba(0, 112, 186, 0.15) !important;
    border-color: #0070BA !important;
    color: #ffffff !important;
    transform: translateY(-1px);
}

#propertyDetailsModal .btn-outline-secondary {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 12px !important;
    padding: 0.75rem 1.5rem !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    color: #a8b2d1 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease !important;
}

#propertyDetailsModal .btn-outline-secondary:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
}

#propertyDetailsModal .btn-outline-success {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 2px solid rgba(40, 167, 69, 0.5) !important;
    border-radius: 12px !important;
    padding: 0.75rem 1.5rem !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    color: #28a745 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease !important;
}

#propertyDetailsModal .btn-outline-success:hover {
    background: rgba(40, 167, 69, 0.15) !important;
    border-color: #28a745 !important;
    color: #ffffff !important;
    transform: translateY(-1px);
}

#propertyDetailsModal .btn-outline-info {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 2px solid rgba(23, 162, 184, 0.5) !important;
    border-radius: 12px !important;
    padding: 0.75rem 1.5rem !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    color: #17a2b8 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease !important;
}

#propertyDetailsModal .btn-outline-info:hover {
    background: rgba(23, 162, 184, 0.15) !important;
    border-color: #17a2b8 !important;
    color: #ffffff !important;
    transform: translateY(-1px);
}

/* Section Dividers */
#propertyDetailsModal .section-divider {
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 196, 57, 0.3) 50%, transparent 100%);
    margin: 2rem 0;
    border-radius: 2px;
}

/* Enhanced Progress and Status Elements */
#propertyDetailsModal .text-success {
    color: #20c997 !important;
}

#propertyDetailsModal .text-warning {
    color: #FFC439 !important;
}

#propertyDetailsModal .text-primary {
    color: #0070BA !important;
}

#propertyDetailsModal .fw-bold {
    font-weight: 700 !important;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    #propertyDetailsModal .modal-header {
        padding: 1.5rem 1.5rem 1rem;
    }
    
    #propertyDetailsModal .modal-body {
        padding: 1rem 1.5rem 1.5rem;
    }
    
    #propertyDetailsModal .modal-footer {
        padding: 1rem 1.5rem 1.5rem;
    }
    
    #propertyDetailsModal .card-header {
        padding: 1rem;
    }
    
    #propertyDetailsModal .card-body {
        padding: 1rem;
    }
    
    #propertyDetailsModal .list-group-item {
        padding: 0.75rem 1rem;
    }
    
    #propertyDetailsModal .btn-primary {
        padding: 0.875rem 2rem;
        font-size: 0.9rem;
    }
}

/* ========================================
   SOPHISTICATED EDIT PROPERTY MODAL
   (Matching Retirement Goals & Planning Modal)
   ======================================== */

#editPropertyModal .modal-content {
    background: linear-gradient(135deg, #2a2a3e 0%, #3a3a52 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 20px !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5) !important;
    overflow: hidden;
}

#editPropertyModal .modal-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 2rem 2.5rem 1.5rem !important;
    background: linear-gradient(135deg, #003087 0%, #0070BA 100%);
    border-radius: 20px 20px 0 0 !important;
    position: relative;
}

#editPropertyModal .modal-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color) 0%, var(--success-color) 50%, var(--warning-color) 100%);
}

#editPropertyModal .modal-title {
    font-size: 1.75rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin: 0 !important;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

#editPropertyModal .modal-title::before {
    content: "🏠";
    font-size: 2rem;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

#editPropertyModal .modal-body {
    padding: 2.5rem !important;
    background: linear-gradient(135deg, #2a2a3e 0%, #3a3a52 100%);
    color: #ffffff;
}

#editPropertyModal .modal-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 1.5rem 2.5rem 2rem !important;
    background: linear-gradient(135deg, #2a2a3e 0%, #3a3a52 100%);
    border-radius: 0 0 20px 20px !important;
}

/* Enhanced Close Button for Edit Modal */
#editPropertyModal .btn-close {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 50% !important;
    width: 45px !important;
    height: 45px !important;
    opacity: 1 !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    filter: none !important;
}

#editPropertyModal .btn-close:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    transform: scale(1.1) rotate(90deg);
}

#editPropertyModal .btn-close::before {
    content: "×" !important;
    font-size: 1.5rem !important;
    font-weight: bold !important;
    color: #ffffff !important;
    line-height: 1 !important;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Modern Form Controls for Edit Modal */
#editPropertyModal .form-label {
    font-weight: 600 !important;
    color: #a8b2d1 !important;
    font-size: 0.95rem !important;
    margin-bottom: 0.75rem !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

#editPropertyModal .form-control, 
#editPropertyModal .form-select {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 2px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 12px !important;
    color: #ffffff !important;
    font-size: 1rem !important;
    padding: 1rem 1.25rem !important;
    transition: all 0.3s ease !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    font-weight: 500;
}

#editPropertyModal .form-control:focus, 
#editPropertyModal .form-select:focus {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px rgba(5, 118, 185, 0.2), inset 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    color: #ffffff !important;
}

#editPropertyModal .form-control::placeholder {
    color: #8a92b2 !important;
    opacity: 0.8;
    font-style: italic;
}

#editPropertyModal .form-select {
    padding-right: 3rem !important;
}

#editPropertyModal .form-select:focus {
    /* Focus styles are handled by the general form-select:focus rule */
}

/* Modern Button Styling for Edit Modal */
#editPropertyModal .btn-primary {
    background: linear-gradient(135deg, var(--primary-color) 0%, #0070BA 100%) !important;
    border: none !important;
    border-radius: 14px !important;
    padding: 1rem 2.5rem !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    text-transform: uppercase;
    letter-spacing: 0.75px;
    box-shadow: 0 6px 20px rgba(5, 118, 185, 0.4) !important;
    transition: all 0.3s ease !important;
    position: relative;
    overflow: hidden;
}

#editPropertyModal .btn-primary:hover:not(:disabled) {
    background: linear-gradient(135deg, #003087 0%, #0070BA 100%) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(5, 118, 185, 0.6) !important;
}

#editPropertyModal .btn-primary:disabled {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #6c757d !important;
    box-shadow: none !important;
    cursor: not-allowed;
    transform: none;
}

#editPropertyModal .btn-secondary {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 14px !important;
    padding: 1rem 2.5rem !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    color: #a8b2d1 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease !important;
}

#editPropertyModal .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
}

/* Row and Column Spacing for Edit Modal */
#editPropertyModal .row.mb-3 {
    margin-bottom: 2rem !important;
}

#editPropertyModal .mb-3 {
    margin-bottom: 1.75rem !important;
}

/* Form Label Icons for Edit Modal */
#editPropertyModal .form-label i {
    color: var(--primary-color);
    margin-right: 0.5rem;
    width: 16px;
    text-align: center;
}

/* Loading State for Submit Button */
#editPropertyModal .btn-primary.loading {
    position: relative;
    color: transparent !important;
}

#editPropertyModal .btn-primary.loading::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    top: 50%;
    left: 50%;
    margin-left: -10px;
    margin-top: -10px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    border-top-color: transparent;
    animation: spin 1s linear infinite;
}

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

/* Responsive Design */
@media (max-width: 768px) {
    .page-content {
        padding: 5rem 0.5rem 1rem 0.5rem;
    }

    .card-header {
        text-align: center;
        justify-content: center;
    }

    .card-body {
        padding: 1rem;
    }

    .metric-card {
        padding: 1rem;
        margin-bottom: 1rem;
    }

    .metric-card .metric-value {
        font-size: 1.5rem;
    }

    .btn {
        padding: 0.6rem 1.2rem;
    }

    .modal-body {
        padding: 1.5rem;
    }
    
    .notification-navigation {
        flex-direction: row;
        gap: 1rem;
        justify-content: center;
    }
    
    .notification-nav-btn {
        max-width: 60px;
        flex: 0 0 auto;
    }

    /* Mobile Property Card Improvements */
    #realEstateOverview .card-body {
        padding: 1.25rem;
    }

    #realEstateOverview .card-body h5 {
        font-size: 1.1rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    #realEstateOverview .card-body .badge {
        font-size: 0.65rem;
        padding: 0.35rem 0.7rem;
        align-self: flex-start;
        max-width: 100%;
        word-wrap: break-word;
        white-space: normal;
    }

    #realEstateOverview .card-body .property-detail-item {
        padding: 0.4rem 0;
    }

    #realEstateOverview .card-body .property-detail-label,
    #realEstateOverview .card-body .property-detail-value {
        font-size: 0.8rem;
    }

    #realEstateOverview .card-body .property-actions {
        margin-top: 1rem;
        justify-content: center;
    }

    /* Mobile Edit Modal Responsiveness */
    #editPropertyModal .modal-header {
        padding: 1.5rem 1.5rem 1rem !important;
    }
    
    #editPropertyModal .modal-body {
        padding: 1.5rem !important;
    }
    
    #editPropertyModal .modal-footer {
        padding: 1rem 1.5rem 1.5rem !important;
    }
    
    #editPropertyModal .modal-title {
        font-size: 1.4rem !important;
    }
    
    #editPropertyModal .btn-primary,
    #editPropertyModal .btn-secondary {
        padding: 0.875rem 2rem !important;
        font-size: 0.9rem !important;
    }
} 

/* Enhanced STR Analytics Styles */
.str-analytics-card {
    background: linear-gradient(135deg, rgba(5, 118, 185, 0.1) 0%, rgba(71, 188, 232, 0.1) 100%);
    border: 1px solid rgba(5, 118, 185, 0.2);
    border-radius: var(--border-radius-lg);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    position: relative;
    overflow: hidden;
}

.str-analytics-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--primary-gradient);
}

.str-analytics-card .analytics-header {
    display: flex;
    justify-content: between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.str-analytics-card .analytics-header h6 {
    color: var(--text-primary);
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.str-analytics-card .analytics-header i {
    color: var(--primary-color);
}

.str-analytics-card .analytics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.str-analytics-card .metric-item {
    text-align: center;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--border-radius);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: var(--transition);
}

.str-analytics-card .metric-item:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-2px);
}

.str-analytics-card .metric-value {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.str-analytics-card .metric-label {
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-weight: 500;
}

/* Platform Badge Styles */
.platform-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.platform-badge.airbnb {
    background: linear-gradient(135deg, #ff5a5f 0%, #ff385c 100%);
    color: white;
}

.platform-badge.vrbo {
    background: linear-gradient(135deg, #00a699 0%, #008489 100%);
    color: white;
}

.platform-badge.booking {
    background: linear-gradient(135deg, #003580 0%, #0046a4 100%);
    color: white;
}

.platform-badge.expedia {
    background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
    color: white;
}

.platform-badge.direct {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
}

.platform-badge.other {
    background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
    color: white;
}

/* Enhanced STR Income Table */
.str-income-table {
    background: var(--card-bg);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--card-shadow);
}

.str-income-table .table {
    margin: 0;
}

.str-income-table .table th {
    background: rgba(5, 118, 185, 0.1);
    color: var(--text-primary);
    font-weight: 600;
    border: none;
    padding: 1rem;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.str-income-table .table td {
    padding: 1rem;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    vertical-align: middle;
}

.str-income-table .table tbody tr:hover {
    background: rgba(255, 255, 255, 0.02);
}

.str-income-table .income-details {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.str-income-table .income-date {
    font-weight: 600;
    color: var(--text-primary);
}

.str-income-table .income-meta {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.str-income-table .income-amount {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.str-income-table .gross-amount {
    font-weight: 600;
    color: var(--success-color);
}

.str-income-table .net-amount {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.str-income-table .platform-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.str-income-table .nightly-rate {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* STR Analytics Modal */
#strAnalyticsModal .modal-content {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--card-shadow-hover);
}

#strAnalyticsModal .modal-header {
    background: rgba(5, 118, 185, 0.1);
    border-bottom: 1px solid var(--card-border);
    padding: 1.5rem;
}

#strAnalyticsModal .modal-title {
    color: var(--text-primary);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

#strAnalyticsModal .modal-title i {
    color: var(--primary-color);
}

#strAnalyticsModal .modal-body {
    padding: 1.5rem;
}

#strAnalyticsModal .nav-tabs {
    border-bottom: 1px solid var(--card-border);
    margin-bottom: 2rem;
}

#strAnalyticsModal .nav-tabs .nav-link {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    padding: 0.75rem 1.5rem;
    border-radius: var(--border-radius) var(--border-radius) 0 0;
    font-weight: 500;
    transition: var(--transition);
}

#strAnalyticsModal .nav-tabs .nav-link:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
}

#strAnalyticsModal .nav-tabs .nav-link.active {
    color: var(--primary-color);
    background: rgba(5, 118, 185, 0.1);
    border-bottom: 2px solid var(--primary-color);
}

#strAnalyticsModal .nav-tabs .nav-link i {
    margin-right: 0.5rem;
}

#strAnalyticsModal .tab-content {
    padding-top: 1rem;
}

#strAnalyticsModal .kpi-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--border-radius);
    padding: 1.5rem;
    text-align: center;
    transition: var(--transition);
}

#strAnalyticsModal .kpi-card:hover {
    background: rgba(255, 255, 255, 0.05);
    transform: translateY(-2px);
}

#strAnalyticsModal .kpi-value {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

#strAnalyticsModal .kpi-label {
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

#strAnalyticsModal .platform-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--border-radius);
    padding: 1.5rem;
    text-align: center;
    transition: var(--transition);
    height: 100%;
}

#strAnalyticsModal .platform-card:hover {
    background: rgba(255, 255, 255, 0.05);
    transform: translateY(-2px);
}

#strAnalyticsModal .platform-card .card-title {
    color: var(--primary-color);
    font-weight: 600;
    margin-bottom: 1rem;
}

#strAnalyticsModal .platform-card .platform-revenue {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--success-color);
    margin-bottom: 0.5rem;
}

#strAnalyticsModal .platform-card .platform-stats {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

/* Responsive Design for STR Features */
@media (max-width: 768px) {
    .str-analytics-card .analytics-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
    
    .str-analytics-card .metric-item {
        padding: 0.75rem;
    }
    
    .str-analytics-card .metric-value {
        font-size: 1.25rem;
    }
    
    .str-analytics-card .metric-label {
        font-size: 0.75rem;
    }
    
    #strAnalyticsModal .nav-tabs .nav-link {
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
    }
    
    #strAnalyticsModal .kpi-value {
        font-size: 2rem;
    }
    
    #strAnalyticsModal .platform-card {
        padding: 1rem;
    }
    
    #strAnalyticsModal .platform-card .platform-revenue {
        font-size: 1.25rem;
    }
}

@media (max-width: 576px) {
    .str-analytics-card .analytics-grid {
        grid-template-columns: 1fr;
    }
    
    .str-income-table .table-responsive {
        max-height: 400px;
    }
    
    .str-income-table .table thead th,
    .str-income-table .table tbody td {
        padding: 0.5rem 0.25rem;
        font-size: 0.75rem;
    }
    
    .str-income-table .income-details,
    .str-income-table .income-amount,
    .str-income-table .platform-info {
        min-width: 120px;
    }
} 

/* --- STR Income Table UI Improvements (2024-07-08) --- */
.str-income-table {
  background: var(--card-bg);
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: var(--card-shadow);
  margin-bottom: 2rem;
}

.str-income-table .card-header {
  background: rgba(5, 118, 185, 0.08);
  border-bottom: 1px solid var(--card-border);
  padding: 1rem 1.5rem 0.5rem 1.5rem;
  border-radius: var(--border-radius) var(--border-radius) 0 0;
  box-shadow: none;
}

.str-income-table .card-header .d-flex {
  flex-wrap: wrap;
  gap: 0.5rem;
}

.str-income-table .card-header .row.g-2 {
  flex-wrap: wrap;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.str-income-table .card-header .form-control,
.str-income-table .card-header .form-select {
  min-width: 120px;
  max-width: 100%;
}

.str-income-table .table-responsive {
  overflow-x: auto;
  max-height: 400px;
  border-radius: 0 0 var(--border-radius) var(--border-radius);
}

.str-income-table .table {
  margin: 0;
  min-width: 700px;
  border-collapse: separate;
  border-spacing: 0;
}

.str-income-table .table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: rgba(5, 118, 185, 0.15);
  color: var(--text-primary);
  font-weight: 700;
  border-bottom: 2px solid var(--primary-color);
  padding: 1rem 0.75rem;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.str-income-table .table td {
  padding: 1rem 0.75rem;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  vertical-align: middle;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.str-income-table .table td .income-details,
.str-income-table .table td .income-amount,
.str-income-table .table td .platform-info {
  min-width: 0;
}

.str-income-table .table td .income-details .income-date,
.str-income-table .table td .income-details .income-meta,
.str-income-table .table td .income-amount .gross-amount,
.str-income-table .table td .income-amount .net-amount {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.str-income-table .table td[title] {
  cursor: help;
}

.str-income-table .table tbody tr {
  transition: background 0.15s;
}

.str-income-table .table tbody tr:hover {
  background: rgba(5, 118, 185, 0.07);
}

/* Responsive controls and table */
@media (max-width: 992px) {
  .str-income-table .card-header .d-flex {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  .str-income-table .card-header .row.g-2 {
    flex-direction: column;
    gap: 0.5rem;
  }
  .str-income-table .table {
    min-width: 500px;
  }
}
@media (max-width: 576px) {
  .str-income-table .table thead th,
  .str-income-table .table td {
    padding: 0.5rem 0.25rem;
    font-size: 0.85rem;
  }
  .str-income-table .card-header {
    padding: 0.5rem 0.5rem 0.25rem 0.5rem;
  }
} 

/* --- STR Income Table Controls Professional Inline Layout (2024-07-08) --- */
.str-income-table .controls-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}
.str-income-table .controls-row h6 {
  margin-bottom: 0 !important;
  margin-right: 1.25rem !important;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
}
.str-income-table .controls-row .btn {
  flex: 0 0 auto;
  min-width: 110px;
  height: 36px;
  padding: 0 1.25rem;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.str-income-table .controls-row .form-select {
  flex: 0 0 auto;
  min-width: 140px;
  height: 36px;
  font-size: 1rem;
}
.str-income-table .controls-row .form-control {
  flex: 1 1 180px;
  min-width: 160px;
  max-width: 220px;
  height: 36px;
  font-size: 1rem;
}
.str-income-table .controls-row .record-count {
  flex: 0 0 auto;
  min-width: 80px;
  text-align: right;
  color: var(--text-secondary);
  font-size: 1rem;
  margin-left: auto;
}
@media (max-width: 992px) {
  .str-income-table .controls-row {
    gap: 0.5rem;
  }
  .str-income-table .controls-row .form-control {
    min-width: 120px;
    max-width: 100%;
  }
  .str-income-table .controls-row .form-select {
    min-width: 100px;
  }
}
@media (max-width: 768px) {
  .str-income-table .controls-row {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }
  .str-income-table .controls-row h6 {
    margin-right: 0 !important;
    margin-bottom: 0.5rem !important;
  }
  .str-income-table .controls-row .record-count {
    text-align: left;
    margin-left: 0;
    margin-top: 0.25rem;
  }
}

/* --- STR Income Table Controls Inline Dropdown Fix (2024-07-08) --- */
.str-income-table .controls-row {
  overflow-x: auto;
  white-space: nowrap;
  gap: 1rem;
}
.str-income-table .controls-row > .btn,
.str-income-table .controls-row > h6,
.str-income-table .controls-row > .record-count {
  flex: 0 0 auto;
}
.str-income-table .controls-row > .form-control,
.str-income-table .controls-row > .form-select {
  flex: 1 1 120px;
  min-width: 100px;
  max-width: 180px;
  width: auto;
}
.str-income-table .controls-row select.form-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: var(--card-bg);
  padding-right: 2.5rem;
}
@media (max-width: 768px) {
  .str-income-table .controls-row {
    flex-direction: column;
    align-items: stretch;
    white-space: normal;
    gap: 0.5rem;
  }
  .str-income-table .controls-row > .form-control,
  .str-income-table .controls-row > .form-select {
    max-width: 100%;
  }
}

.str-income-table .controls-row .form-select {
  line-height: 36px;
  height: 36px;
  padding-top: 0;
  padding-bottom: 0;
}

.str-income-table .controls-row .form-select {
  font-size: 0.95rem;
}

.str-income-table .controls-row .form-select,
.str-income-table .controls-row .form-select-sm {
  width: auto !important;
  min-width: 120px;
  max-width: 240px;
  font-size: 0.92rem !important;
  padding-left: 1rem;
  padding-right: 2.5rem;
}

.str-income-table .controls-row select.form-select,
.str-income-table .controls-row select.form-select-sm,
.str-income-table .controls-row select.form-select option,
.str-income-table .controls-row select.form-select-sm option {
  font-size: 0.92rem !important;
}

@media (max-width: 768px) {
  .str-income-table .controls-row .form-select,
  .str-income-table .controls-row .form-select-sm,
  .str-income-table .controls-row .form-control,
  .str-income-table .controls-row .btn {
    height: 32px !important;
    font-size: 0.88rem !important;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 0.75rem;
    padding-right: 2rem;
    border-radius: 8px;
  }
  .str-income-table .controls-row .btn {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .str-income-table .controls-row .form-select,
  .str-income-table .controls-row .form-select-sm {
    min-width: 90px;
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  /* Tax Report button: horizontal, full-width, and touch-friendly */
  .card .btn-outline-success, .card-header .btn-outline-success {
    writing-mode: initial !important;
    transform: none !important;
    width: 100% !important;
    display: block !important;
    margin: 0.5rem 0 !important;
    text-align: center !important;
    border-radius: 8px !important;
    font-size: 1rem !important;
    letter-spacing: 0.04em;
  }
  /* Remove vertical alignment for the button container if present */
  .card-header, .card {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  /* Income Records controls: compact, grouped, and full-width */
  .str-income-table .controls-row {
    background: rgba(255,255,255,0.02);
    border-radius: 12px;
    padding: 0.5rem 0.5rem 0.25rem 0.5rem;
    margin-bottom: 1rem;
    gap: 0.5rem;
  }
  .str-income-table .controls-row > * {
    width: 100% !important;
    margin-bottom: 0.25rem !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
  .str-income-table .controls-row .btn,
  .str-income-table .controls-row .form-select,
  .str-income-table .controls-row .form-control {
    min-width: 0 !important;
    max-width: 100% !important;
    padding-left: 0.75rem;
    padding-right: 2rem;
    font-size: 0.92rem !important;
    height: 32px !important;
    border-radius: 8px !important;
  }
  .str-income-table .controls-row .btn {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .str-income-table .controls-row .record-count {
    text-align: right;
    margin-top: 0.25rem;
    font-size: 0.92rem;
  }
}

@media (max-width: 768px) {
  .str-income-table .controls-row .form-select,
  .str-income-table .controls-row .form-select-sm {
    height: 28px !important;
    font-size: 0.85rem !important;
    padding-left: 0.5rem !important;
    padding-right: 1.5rem !important;
    border-radius: 6px !important;
    max-width: 160px !important;
    min-width: 80px !important;
    width: 100% !important;
    margin: 0 auto 0.25rem auto !important;
    box-sizing: border-box;
  }
}

@media (max-width: 768px) {
  .str-income-table .controls-row .form-control,
  .str-income-table .controls-row .form-select,
  .str-income-table .controls-row .form-select-sm {
    background: #2c3240 !important;
    border: 2px solid #49516a !important;
    color: #e6e9f0 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    height: 38px !important;
    font-size: 1rem !important;
    padding-left: 1.25rem !important;
    padding-right: 2.5rem !important;
    margin-bottom: 0.5rem !important;
    transition: border-color 0.2s;
  }
  .str-income-table .controls-row .form-control:focus,
  .str-income-table .controls-row .form-select:focus,
  .str-income-table .controls-row .form-select-sm:focus {
    border-color: #0576b9 !important;
    outline: none !important;
  }
  .str-income-table .controls-row .form-control::placeholder {
    color: #a8b2c8 !important;
    opacity: 1;
  }
}

@media (max-width: 768px) {
  .str-income-table .controls-row .btn,
  .str-income-table .controls-row .form-control,
  .str-income-table .controls-row .form-select,
  .str-income-table .controls-row .form-select-sm {
    display: block;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 38px !important;
    font-size: 1rem !important;
    padding: 0 1.25rem !important;
    border-radius: 10px !important;
    border: 2px solid #49516a !important;
    background: #2c3240 !important;
    color: #e6e9f0 !important;
    box-sizing: border-box;
    margin-bottom: 0.5rem !important;
  }
  .str-income-table .controls-row .btn {
    font-weight: 600;
    text-align: center;
    letter-spacing: 0.02em;
  }
  .str-income-table .controls-row .form-control::placeholder {
    color: #a8b2c8 !important;
    opacity: 1;
  }
}

/* Modern Card */
.card-modern {
  background: #23293a;
  border-radius: 18px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.18);
  padding: 2rem;
  margin-bottom: 1.5rem;
  border: none;
}

/* Modern Button */
.btn-modern {
  background: linear-gradient(90deg, #1e90ff 0%, #00c6fb 100%);
  color: #fff;
  border-radius: 24px;
  padding: 0.75rem 2rem;
  font-weight: 600;
  border: none;
  box-shadow: 0 2px 8px rgba(30,144,255,0.15);
  transition: background 0.2s, box-shadow 0.2s;
}
.btn-modern:hover {
  background: linear-gradient(90deg, #00c6fb 0%, #1e90ff 100%);
  box-shadow: 0 4px 16px rgba(30,144,255,0.25);
}

/* Modern Input */
.input-modern {
  background: #1a1f2b;
  border: 1px solid #2c3446;
  border-radius: 18px;
  color: #fff;
  padding: 0.75rem 1.25rem;
  font-size: 1rem;
  margin-right: 1rem;
  transition: border 0.2s;
}
.input-modern:focus {
  border: 1.5px solid #1e90ff;
  outline: none;
}

/* Modern Tab Styles */
.tab-modern {
  border-radius: 18px 18px 0 0;
  background: #23293a;
  color: #fff;
  font-weight: 600;
  padding: 1rem 2rem;
  margin-right: 0.5rem;
  border: none;
  transition: background 0.2s;
}
.tab-modern.active, .tab-modern:hover {
  background: #1e90ff;
  color: #fff;
}

/* Modern Section Header */
.section-header-modern {
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 1rem;
  letter-spacing: 0.02em;
  border-left: 4px solid #1e90ff;
  padding-left: 1rem;
}

/* Modern Divider */
.divider-modern {
  border-top: 1px solid #2c3446;
  margin: 2rem 0;
}

/* Modern Icon Button */
.icon-btn-modern {
  background: none;
  border: none;
  color: #1e90ff;
  font-size: 1.2rem;
  border-radius: 50%;
  padding: 0.5rem;
  transition: background 0.2s;
}
.icon-btn-modern:hover {
  background: #1e90ff22;
  color: #fff;
}

/* --- Maintenance Edit Card Modern Styles --- */
.maintenance-edit-card {
  background: rgba(30,34,45,0.98);
  border-radius: 1rem;
  border: 1px solid #444;
  box-shadow: 0 4px 24px rgba(0,0,0,0.15);
  margin-bottom: 1.5rem;
}
.maintenance-edit-card input,
.maintenance-edit-card select {
  background: #23283a;
  color: #fff;
  border: 1px solid #555;
  font-size: 1rem;
  border-radius: 2rem;
  padding-left: 1rem;
  padding-right: 1rem;
}
.maintenance-edit-card input:focus,
.maintenance-edit-card select:focus {
  border-color: #6c63ff;
  box-shadow: 0 0 0 2px #6c63ff33;
  background: #23283a;
  color: #fff;
}
.maintenance-edit-card .btn-success {
  background: linear-gradient(90deg, #43e97b 0%, #38f9d7 100%);
  border: none;
  color: #fff;
  font-weight: 600;
}
.maintenance-edit-card .btn-outline-secondary {
  background: #444;
  color: #fff;
  border: 1px solid #888;
  font-weight: 600;
}
.maintenance-edit-card .btn-lg {
  font-size: 1.1rem;
  padding: 0.5rem 1.5rem;
  border-radius: 2rem;
}
.maintenance-edit-card .form-control,
.maintenance-edit-card .form-select {
  min-width: 110px;
  margin-bottom: 0;
}
@media (max-width: 900px) {
  .maintenance-edit-card .row.g-3 > [class^='col-'] {
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: 1rem;
  }
  .maintenance-edit-card .d-flex.gap-2 {
    flex-direction: row;
    justify-content: flex-end;
  }
}

/* --- Maintenance Edit Card Modern Styles --- */
.maintenance-edit-card form .row {
  display: flex;
  flex-wrap: wrap !important;
  width: 100%;
  clear: both;
}
.maintenance-edit-card form .row + .row {
  margin-top: 1rem;
}

/* Maintenance Modal Enhanced Styling */
.maintenance-modal-content {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--border-radius-lg);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

.maintenance-modal-header {
    background: linear-gradient(135deg, rgba(5, 118, 185, 0.1) 0%, rgba(71, 188, 232, 0.1) 100%);
    border-bottom: 1px solid var(--card-border);
    padding: 1.5rem;
    position: relative;
}

.maintenance-modal-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--primary-gradient);
}

.maintenance-modal-header .modal-title {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 1.25rem;
    margin: 0;
}

.maintenance-btn-close {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.maintenance-btn-close:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

.maintenance-modal-body {
    padding: 2rem;
    background: var(--card-bg);
}

.maintenance-property-info {
    margin-bottom: 2rem;
}

.property-info-card {
    background: linear-gradient(135deg, rgba(5, 118, 185, 0.1) 0%, rgba(71, 188, 232, 0.05) 100%);
    border: 1px solid rgba(5, 118, 185, 0.2);
    border-radius: var(--border-radius);
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    font-size: 0.95rem;
    color: var(--text-primary);
}

.property-info-card i {
    font-size: 1.1rem;
    margin-right: 0.75rem;
}

.property-address {
    color: var(--primary-color);
    font-weight: 500;
    margin-left: 0.5rem;
}

.maintenance-form {
    background: transparent;
}

.form-group-maintenance {
    margin-bottom: 1.5rem;
    position: relative;
}

.form-label-maintenance {
    display: flex;
    align-items: center;
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.form-label-maintenance i {
    font-size: 0.9rem;
    margin-right: 0.5rem;
    opacity: 0.8;
}

.required-asterisk {
    color: #ef4444;
    margin-left: 0.25rem;
    font-weight: 600;
}

.input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.form-control-maintenance {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--border-radius);
    color: var(--text-primary);
    padding: 0.875rem 1rem;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    width: 100%;
    backdrop-filter: blur(10px);
}

.form-control-maintenance:focus {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(5, 118, 185, 0.1);
    outline: none;
    transform: translateY(-1px);
}

.form-control-maintenance::placeholder {
    color: var(--text-muted);
    opacity: 0.7;
}

.form-control-maintenance:hover {
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.06);
}

/* Select specific styling */
.form-control-maintenance[type="date"],
.form-control-maintenance[type="text"] {
    padding-right: 2.5rem;
}

.input-icon {
    position: absolute;
    right: 1rem;
    color: var(--text-muted);
    font-size: 0.9rem;
    pointer-events: none;
    transition: all 0.3s ease;
}

.form-control-maintenance:focus + .input-icon {
    color: var(--primary-color);
    transform: scale(1.1);
}

/* Select arrow styling */
.select-arrow {
    position: absolute;
    right: 1rem;
    color: var(--text-muted);
    font-size: 0.8rem;
    pointer-events: none;
    transition: all 0.3s ease;
}

.form-control-maintenance:focus ~ .select-arrow {
    color: var(--primary-color);
    transform: rotate(180deg);
}

/* Textarea specific styling */
.form-control-maintenance[rows] {
    min-height: 100px;
    resize: vertical;
    line-height: 1.5;
}

/* Modal footer styling */
.maintenance-modal-footer {
    background: rgba(255, 255, 255, 0.02);
    border-top: 1px solid var(--card-border);
    padding: 1.5rem;
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
}

.maintenance-btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--text-secondary);
    padding: 0.75rem 1.5rem;
    border-radius: var(--border-radius);
    font-weight: 500;
    transition: all 0.3s ease;
}

.maintenance-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    color: var(--text-primary);
    transform: translateY(-1px);
}

.maintenance-btn-primary {
    background: var(--primary-gradient);
    border: none;
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: var(--border-radius);
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(5, 118, 185, 0.3);
}

.maintenance-btn-primary:hover {
    background: linear-gradient(135deg, #0468a3 0%, #3aa8d4 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(5, 118, 185, 0.4);
}

.maintenance-btn-primary:active {
    transform: translateY(0);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .maintenance-modal-body {
        padding: 1.5rem;
    }
    
    .property-info-card {
        padding: 0.875rem 1rem;
        font-size: 0.9rem;
    }
    
    .form-label-maintenance {
        font-size: 0.85rem;
    }
    
    .form-control-maintenance {
        padding: 0.75rem 0.875rem;
        font-size: 0.9rem;
    }
    
    .maintenance-modal-footer {
        padding: 1rem;
        flex-direction: column;
    }
    
    .maintenance-btn-secondary,
    .maintenance-btn-primary {
        width: 100%;
        justify-content: center;
    }
}

/* Animation for form elements */
.form-group-maintenance {
    animation: fadeInUp 0.4s ease-out;
}

.form-group-maintenance:nth-child(1) { animation-delay: 0.1s; }
.form-group-maintenance:nth-child(2) { animation-delay: 0.2s; }
.form-group-maintenance:nth-child(3) { animation-delay: 0.3s; }
.form-group-maintenance:nth-child(4) { animation-delay: 0.4s; }
.form-group-maintenance:nth-child(5) { animation-delay: 0.5s; }

/* Focus states for accessibility */
.form-control-maintenance:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Loading state for property address */
.property-address:contains("Loading") {
    opacity: 0.6;
    font-style: italic;
}

/* Enhanced select dropdown styling */
.form-control-maintenance option {
    background: var(--card-bg);
    color: var(--text-primary);
    padding: 0.5rem;
}

.form-control-maintenance option:hover {
    background: var(--primary-color);
}

/* Success state for completed fields */
.form-control-maintenance:valid {
    border-color: rgba(44, 181, 126, 0.3);
}

.form-control-maintenance:valid:focus {
    border-color: var(--success-color);
    box-shadow: 0 0 0 3px rgba(44, 181, 126, 0.1);
}

/* Enhanced Edit Maintenance Button */
.btn-edit-maintenance {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 12px;
    padding: 0.625rem 1.25rem;
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 100px;
    justify-content: center;
}

.btn-edit-maintenance::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.btn-edit-maintenance:hover {
    background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
    color: white;
}

.btn-edit-maintenance:hover::before {
    left: 100%;
}

.btn-edit-maintenance:active {
    transform: translateY(0);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.btn-edit-maintenance i {
    font-size: 0.875rem;
    transition: transform 0.3s ease;
}

.btn-edit-maintenance:hover i {
    transform: scale(1.1) rotate(5deg);
}

.btn-edit-maintenance:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.3), 0 8px 25px rgba(102, 126, 234, 0.4);
}

.btn-edit-maintenance:focus-visible {
    outline: 2px solid #667eea;
    outline-offset: 2px;
}

/* Loading state for edit button */
.btn-edit-maintenance.loading {
    pointer-events: none;
    opacity: 0.7;
}

.btn-edit-maintenance.loading i {
    animation: spin 1s linear infinite;
}

/* Responsive adjustments for edit button */
@media (max-width: 768px) {
    .btn-edit-maintenance {
        padding: 0.5rem 1rem;
        font-size: 0.8rem;
        min-width: 80px;
    }
    
    .btn-edit-maintenance i {
        font-size: 0.8rem;
    }
}

/* Animation for button appearance */
@keyframes buttonPulse {
    0% {
        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
    }
    50% {
        box-shadow: 0 4px 20px rgba(102, 126, 234, 0.5);
    }
    100% {
        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
    }
}

.btn-edit-maintenance.attention {
    animation: buttonPulse 2s ease-in-out infinite;
}

/* Success state after editing */
.btn-edit-maintenance.success {
    background: linear-gradient(135deg, #2cb57e 0%, #1a8f5f 100%);
    box-shadow: 0 4px 15px rgba(44, 181, 126, 0.3);
}

.btn-edit-maintenance.success:hover {
    background: linear-gradient(135deg, #25a06e 0%, #157a4f 100%);
    box-shadow: 0 8px 25px rgba(44, 181, 126, 0.4);
}

/* Disabled state */
.btn-edit-maintenance:disabled {
    background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
    color: rgba(255, 255, 255, 0.6);
    cursor: not-allowed;
    transform: none;
    box-shadow: 0 2px 8px rgba(108, 117, 125, 0.2);
}

.btn-edit-maintenance:disabled:hover {
    transform: none;
    box-shadow: 0 2px 8px rgba(108, 117, 125, 0.2);
}

.btn-edit-maintenance:disabled i {
    transform: none;
}

/* Modern PayPal-Style Maintenance Record Cards */
.maintenance-record {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
}

.maintenance-record::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-color) 0%, #47bce8 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.maintenance-record:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
    border-color: rgba(255, 255, 255, 0.2);
}

.maintenance-record:hover::before {
    opacity: 1;
}

/* Icon styling */
.maintenance-record .fa-2x {
    font-size: 2.5rem;
    background: linear-gradient(135deg, var(--primary-color) 0%, #47bce8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 2px 4px rgba(5, 118, 185, 0.3));
}

/* Title styling */
.maintenance-record h6 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    letter-spacing: -0.02em;
}

/* Description styling */
.maintenance-record p {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 1rem;
}

/* Info grid styling */
.maintenance-record .row.text-sm {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 1rem;
    margin: 0;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.maintenance-record .row.text-sm .col-md-4 {
    padding: 0.5rem 1rem;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
}

.maintenance-record .row.text-sm .col-md-4:last-child {
    border-right: none;
}

.maintenance-record .row.text-sm strong {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: block;
    margin-bottom: 0.25rem;
}

.maintenance-record .row.text-sm i {
    color: var(--primary-color);
    font-size: 0.9rem;
    margin-right: 0.5rem;
}

/* Badge styling */
.maintenance-record .badge {
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.8rem;
    padding: 0.5rem 1rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}

.maintenance-record .badge.bg-success {
    background: linear-gradient(135deg, #2cb57e 0%, #1a8f5f 100%) !important;
    color: white;
}

.maintenance-record .badge.bg-warning {
    background: linear-gradient(135deg, #ffc107 0%, #ff8c00 100%) !important;
    color: #000;
}

.maintenance-record .badge.bg-info {
    background: linear-gradient(135deg, #17a2b8 0%, #138496 100%) !important;
    color: white;
}

.maintenance-record .badge.bg-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    color: white;
}

.maintenance-record .badge i {
    font-size: 0.9rem;
    margin-right: 0.5rem;
}

/* Button container styling */
.maintenance-record .d-flex.gap-2 {
    gap: 0.75rem !important;
}

/* Enhanced delete button styling */
.maintenance-record .icon-btn-modern {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(220, 38, 38, 0.05) 100%);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 12px;
    color: #ef4444;
    font-size: 0.9rem;
    padding: 0.75rem 1rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.1);
}

.maintenance-record .icon-btn-modern:hover {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(220, 38, 38, 0.1) 100%);
    border-color: rgba(239, 68, 68, 0.4);
    color: #dc2626;
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(239, 68, 68, 0.2);
}

.maintenance-record .icon-btn-modern i {
    font-size: 0.9rem;
    margin-right: 0.5rem;
}

/* Card layout improvements */
.maintenance-record .d-flex.align-items-center {
    gap: 1.5rem;
}

.maintenance-record .d-flex.flex-column.align-items-end {
    min-width: 200px;
}

/* Responsive improvements */
@media (max-width: 768px) {
    .maintenance-record {
        padding: 1rem;
        flex-direction: column;
        align-items: stretch !important;
    }
    
    .maintenance-record .d-flex.align-items-center {
        flex-direction: column;
        text-align: center;
        margin-bottom: 1rem;
    }
    
    .maintenance-record .d-flex.flex-column.align-items-end {
        align-items: center !important;
        min-width: auto;
    }
    
    .maintenance-record .row.text-sm {
        flex-direction: column;
    }
    
    .maintenance-record .row.text-sm .col-md-4 {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding: 0.75rem 0;
    }
    
    .maintenance-record .row.text-sm .col-md-4:last-child {
        border-bottom: none;
    }
    
    .maintenance-record .fa-2x {
        font-size: 2rem;
        margin-bottom: 0.5rem;
    }
    
    .maintenance-record h6 {
        font-size: 1.1rem;
    }
    
    .maintenance-record .d-flex.gap-2 {
        flex-direction: column;
        width: 100%;
    }
    
    .maintenance-record .btn,
    .maintenance-record .icon-btn-modern {
        width: 100%;
        justify-content: center;
    }
}

/* Animation for card appearance */
.maintenance-record {
    animation: cardSlideIn 0.4s ease-out;
}

@keyframes cardSlideIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Staggered animation for multiple cards */
.maintenance-record:nth-child(1) { animation-delay: 0.1s; }
.maintenance-record:nth-child(2) { animation-delay: 0.2s; }
.maintenance-record:nth-child(3) { animation-delay: 0.3s; }
.maintenance-record:nth-child(4) { animation-delay: 0.4s; }
.maintenance-record:nth-child(5) { animation-delay: 0.5s; }

/* Enhanced Inline Edit Form Styling */
.maintenance-record .form-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.maintenance-record .form-control-sm,
.maintenance-record .form-select-sm {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
    transition: all 0.3s ease;
}

.maintenance-record .form-control-sm:focus,
.maintenance-record .form-select-sm:focus {
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(5, 118, 185, 0.2);
    outline: none;
}

.maintenance-record .form-control-sm::placeholder {
    color: var(--text-muted);
    opacity: 0.7;
}

.maintenance-record .btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.maintenance-record .btn-success {
    background: linear-gradient(135deg, #2cb57e 0%, #1a8f5f 100%);
    border: none;
    color: white;
    box-shadow: 0 2px 8px rgba(44, 181, 126, 0.3);
}

.maintenance-record .btn-success:hover {
    background: linear-gradient(135deg, #25a06e 0%, #157a4f 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(44, 181, 126, 0.4);
}

.maintenance-record .btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--text-secondary);
}

.maintenance-record .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    color: var(--text-primary);
    transform: translateY(-1px);
}

/* Animation for form appearance */
.maintenance-record form {
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive adjustments for inline edit form */
@media (max-width: 768px) {
    .maintenance-record .row.g-3 > [class^='col-'] {
        margin-bottom: 1rem;
    }
    
    .maintenance-record .form-control-sm,
    .maintenance-record .form-select-sm {
        font-size: 0.8rem;
        padding: 0.625rem 0.875rem;
    }
    
    .maintenance-record .btn-sm {
        padding: 0.625rem 1.25rem;
        font-size: 0.85rem;
    }
    
    .maintenance-record .d-flex.justify-content-end {
        justify-content: center !important;
    }
}

/* Enhanced spacing for form rows */
.maintenance-record .row.g-3 {
    margin-bottom: 1.5rem;
}

.maintenance-record .row.g-3:last-of-type {
    margin-bottom: 1rem;
}

/* Focus states for better accessibility */
.maintenance-record .form-control-sm:focus-visible,
.maintenance-record .form-select-sm:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Loading state for form submission */
.maintenance-record form.submitting {
    opacity: 0.7;
    pointer-events: none;
}

.maintenance-record form.submitting .btn {
    position: relative;
}

.maintenance-record form.submitting .btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border: 2px solid transparent;
    border-top: 2px solid currentColor;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* --- PRODUCTION-READY MAINTENANCE CARD --- */
.maintenance-record.card-modern {
  background: linear-gradient(120deg, #23293a 0%, #20232b 100%);
  border-radius: 24px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.13);
  padding: 2.2rem 2.2rem 2rem 2.2rem;
  margin-bottom: 2.2rem;
  border: 1.5px solid rgba(71,188,232,0.10);
  transition: box-shadow 0.2s, background 0.2s, border 0.2s;
  position: relative;
}
.maintenance-record.card-modern:hover {
  box-shadow: 0 8px 32px rgba(0, 198, 251, 0.13), 0 2px 8px rgba(44,181,126,0.08);
  background: linear-gradient(120deg, #23293a 0%, #1a1f2e 100%);
  border: 1.5px solid #47bce8;
}
.maintenance-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1.7rem;
  gap: 1.2rem;
}
.maintenance-title {
  display: flex;
  align-items: center;
  gap: 1.1rem;
}
.icon-main {
  font-size: 2.1rem;
  color: #47bce8;
  background: #181c24;
  border-radius: 50%;
  padding: 0.7rem;
  box-shadow: 0 2px 8px rgba(71,188,232,0.07);
  display: flex;
  align-items: center;
  justify-content: center;
}
.title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.01em;
  margin-bottom: 0.1rem;
}
.subtitle {
  color: #a8b2c8;
  font-size: 0.98rem;
  font-weight: 500;
  margin-top: 0.1rem;
}
.badge-status {
  background: #0576b9;
  color: #fff;
  border-radius: 999px;
  font-weight: 600;
  padding: 0.38rem 1.1rem;
  font-size: 0.98rem;
  border: none;
  letter-spacing: 0.03em;
  margin-left: auto;
  margin-top: 0.2rem;
  box-shadow: 0 2px 8px rgba(71,188,232,0.10);
}
.maintenance-info {
  display: flex;
  align-items: stretch;
  background: #23293a;
  border-radius: 16px;
  margin-bottom: 1.7rem;
  box-shadow: 0 1px 4px rgba(30,144,255,0.03);
  border: 1px solid rgba(255,255,255,0.04);
  gap: 1.2rem;
}
.info-block {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1rem;
}
.info-block .label {
  color: #a8b2c8;
  font-size: 0.93rem;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-bottom: 0.1rem;
}
.info-block .value {
  color: #fff;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  margin-top: 0.1rem;
}
.info-block i {
  font-size: 1.15rem;
  color: #47bce8;
}
.maintenance-actions {
  display: flex;
  gap: 1.1rem;
  justify-content: flex-end;
}
.btn-edit-maintenance {
  background: #0576b9;
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 0.7rem 2rem;
  font-weight: 600;
  font-size: 1.01rem;
  box-shadow: 0 2px 8px rgba(71,188,232,0.10);
  transition: background 0.18s, box-shadow 0.18s, transform 0.13s;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  outline: none;
}
.btn-edit-maintenance:hover, .btn-edit-maintenance:focus {
  background: #47bce8;
  color: #181c24;
  box-shadow: 0 4px 16px rgba(71,188,232,0.18);
  transform: translateY(-1px) scale(1.03);
}
.btn-delete {
  background: #ef4444;
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 0.7rem 2rem;
  font-weight: 600;
  font-size: 1.01rem;
  box-shadow: 0 2px 8px rgba(239,68,68,0.10);
  transition: background 0.18s, box-shadow 0.18s, transform 0.13s;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  outline: none;
}
.btn-delete:hover, .btn-delete:focus {
  background: #dc2626;
  color: #fff;
  box-shadow: 0 4px 16px rgba(239,68,68,0.18);
  transform: translateY(-1px) scale(1.03);
}
@media (max-width: 768px) {
  .maintenance-record.card-modern {
    padding: 1.1rem;
    border-radius: 16px;
  }
  .maintenance-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.1rem;
  }
  .maintenance-info {
    flex-direction: column;
    gap: 0;
  }
  .maintenance-actions {
    flex-direction: column;
    gap: 0.85rem;
    width: 100%;
    align-items: stretch;
  }
  .btn-edit-maintenance, .btn-delete {
    width: 100%;
    justify-content: center;
  }
}

/* Enhanced Short-Term Rental UI/UX Styles */

/* STR Analytics Card - Modern Design */
.str-analytics-card {
    background: linear-gradient(135deg, #1a1f2e 0%, #2a2f3e 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.str-analytics-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #0576b9, #47bce8, #0576b9);
    background-size: 200% 100%;
    animation: shimmer 3s ease-in-out infinite;
}

.str-analytics-card .analytics-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.str-analytics-card .analytics-header h6 {
    color: #ffffff;
    font-weight: 600;
    font-size: 1.1rem;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.str-analytics-card .analytics-header i {
    color: #0576b9;
    font-size: 1.2rem;
}

.str-analytics-card .analytics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.str-analytics-card .metric-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 1.25rem;
    text-align: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.str-analytics-card .metric-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.str-analytics-card .metric-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    border-color: rgba(255, 255, 255, 0.1);
}

.str-analytics-card .metric-item:hover::before {
    opacity: 1;
}

.str-analytics-card .metric-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.5rem;
    line-height: 1.2;
}

.str-analytics-card .metric-label {
    color: #a8b2c8;
    font-size: 0.875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.3;
}

.str-analytics-card .metric-icon {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    color: rgba(255, 255, 255, 0.1);
    font-size: 1.2rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.str-analytics-card .metric-item:hover .metric-icon {
    color: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

.str-analytics-card .analytics-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.str-analytics-card .analytics-actions {
    display: flex;
    gap: 0.5rem;
}

.str-analytics-card .analytics-actions .btn {
    padding: 0.375rem 0.75rem;
    font-size: 0.8rem;
    border-radius: 6px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.str-analytics-card .analytics-actions .btn:hover {
    transform: translateY(-1px);
}

/* Enhanced STR Income Table */
.str-income-table {
    background: #1a1f2e;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.str-income-table .card-header {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 1.5rem;
}

.str-income-table .controls-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.str-income-table .controls-row h6 {
    color: #ffffff;
    font-weight: 600;
    font-size: 1.1rem;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.str-income-table .controls-row h6 i {
    color: #0576b9;
    font-size: 1.1rem;
}

.str-income-table .controls-row .btn {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 8px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.str-income-table .controls-row .btn-outline-primary {
    background: rgba(5, 118, 185, 0.1);
    border: 1px solid rgba(5, 118, 185, 0.3);
    color: #47bce8;
}

.str-income-table .controls-row .btn-outline-primary:hover {
    background: rgba(5, 118, 185, 0.2);
    border-color: rgba(5, 118, 185, 0.5);
    color: #ffffff;
    transform: translateY(-1px);
}

.str-income-table .controls-row .btn-outline-secondary {
    background: rgba(108, 117, 125, 0.1);
    border: 1px solid rgba(108, 117, 125, 0.3);
    color: #a8b2c8;
}

.str-income-table .controls-row .btn-outline-secondary:hover {
    background: rgba(108, 117, 125, 0.2);
    border-color: rgba(108, 117, 125, 0.5);
    color: #ffffff;
    transform: translateY(-1px);
}

.str-income-table .controls-row .form-control,
.str-income-table .controls-row .form-select {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #ffffff;
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    min-width: 150px;
}

.str-income-table .controls-row .form-control:focus,
.str-income-table .controls-row .form-select:focus {
    background: rgba(255, 255, 255, 0.08);
    border-color: #0576b9;
    box-shadow: 0 0 0 3px rgba(5, 118, 185, 0.1);
    outline: none;
}

.str-income-table .controls-row .form-control::placeholder {
    color: #6c757d;
}

.str-income-table .controls-row .form-select option {
    background: #1a1f2e;
    color: #ffffff;
}

.str-income-table .controls-row .record-count {
    color: #a8b2c8;
    font-size: 0.875rem;
    font-weight: 500;
    margin-left: auto;
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Enhanced Table Styling */
.str-income-table .table-responsive {
    max-height: 500px;
    overflow-y: auto;
    border-radius: 0 0 16px 16px;
}

.str-income-table .table {
    margin: 0;
    background: transparent;
}

.str-income-table .table thead th {
    background: linear-gradient(135deg, rgba(5, 118, 185, 0.1) 0%, rgba(71, 188, 232, 0.05) 100%);
    border: none;
    color: #ffffff;
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 1rem;
    position: sticky;
    top: 0;
    z-index: 10;
}

.str-income-table .table tbody td {
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding: 1rem;
    vertical-align: middle;
    color: #ffffff;
}

.str-income-table .table tbody tr {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.str-income-table .table tbody tr:hover {
    background: rgba(255, 255, 255, 0.03);
    transform: scale(1.01);
}

/* Enhanced Income Details */
.str-income-table .income-details {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.str-income-table .income-date {
    color: #ffffff;
    font-weight: 600;
    font-size: 0.95rem;
}

.str-income-table .income-meta {
    color: #a8b2c8;
    font-size: 0.8rem;
    font-weight: 500;
}

.str-income-table .income-amount {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.str-income-table .gross-amount {
    color: #ffffff;
    font-weight: 600;
    font-size: 0.95rem;
}

.str-income-table .net-amount {
    color: #2cb57e;
    font-size: 0.8rem;
    font-weight: 500;
}

.str-income-table .platform-info {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.str-income-table .nightly-rate {
    color: #ffc107;
    font-size: 0.8rem;
    font-weight: 500;
}

/* Enhanced Platform Badges */
.platform-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 1px solid;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.platform-badge.airbnb {
    background: rgba(255, 45, 85, 0.1);
    border-color: rgba(255, 45, 85, 0.3);
    color: #ff2d55;
}

.platform-badge.vrbo {
    background: rgba(0, 123, 255, 0.1);
    border-color: rgba(0, 123, 255, 0.3);
    color: #007bff;
}

.platform-badge.booking {
    background: rgba(0, 193, 131, 0.1);
    border-color: rgba(0, 193, 131, 0.3);
    color: #00c183;
}

.platform-badge.expedia {
    background: rgba(255, 69, 0, 0.1);
    border-color: rgba(255, 69, 0, 0.3);
    color: #ff4500;
}

.platform-badge.direct {
    background: rgba(108, 117, 125, 0.1);
    border-color: rgba(108, 117, 125, 0.3);
    color: #6c757d;
}

.platform-badge.other {
    background: rgba(108, 117, 125, 0.1);
    border-color: rgba(108, 117, 125, 0.3);
    color: #a8b2c8;
}

/* Enhanced Action Buttons */
.str-income-table .delete-str-income-btn {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #ef4444;
    padding: 0.5rem;
    border-radius: 8px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.str-income-table .delete-str-income-btn:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.5);
    color: #ffffff;
    transform: translateY(-1px);
}

/* Enhanced STR Form Section */
.str-form-section {
    max-width: 700px;
    margin: 2rem auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: linear-gradient(135deg, rgba(5, 118, 185, 0.05) 0%, rgba(71, 188, 232, 0.02) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    padding: 2rem 2rem 2.5rem 2rem;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}

.str-form-section form {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.str-form-section .row {
    width: 100%;
    justify-content: center;
    margin-left: 0;
    margin-right: 0;
}

.str-form-section .col-md-4,
.str-form-section .col-md-3,
.str-form-section .col-md-2,
.str-form-section .col-md-8 {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.str-form-section .btn-primary {
    display: block;
    margin: 2rem auto 0 auto;
    width: 80%;
    max-width: 350px;
    font-size: 1.2rem;
    font-weight: 700;
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(255, 193, 7, 0.2);
}

@media (max-width: 768px) {
    .str-form-section {
        max-width: 98vw;
        padding: 1rem 0.5rem 2rem 0.5rem;
    }
    .str-form-section .btn-primary {
        width: 100%;
        max-width: 100%;
        font-size: 1rem;
    }
}

.str-form-section h6 {
    color: #ffffff;
    font-weight: 600;
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.str-form-section h6 i {
    color: #0576b9;
    font-size: 1.2rem;
}

.str-form-section .form-label {
    color: #a8b2c8;
    font-weight: 500;
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.str-form-section .form-label i {
    color: #0576b9;
    font-size: 0.9rem;
}

.str-form-section .form-control,
.str-form-section .form-select {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #ffffff;
    font-size: 0.9rem;
    padding: 0.75rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.str-form-section .form-control:focus,
.str-form-section .form-select:focus {
    background: rgba(255, 255, 255, 0.08);
    border-color: #0576b9;
    box-shadow: 0 0 0 3px rgba(5, 118, 185, 0.1);
    outline: none;
}

.str-form-section .form-control::placeholder {
    color: #6c757d;
}

.str-form-section .form-select option {
    background: #1a1f2e;
    color: #ffffff;
}

.str-form-section .btn-primary {
    background: linear-gradient(135deg, #0576b9 0%, #47bce8 100%);
    border: none;
    color: #ffffff;
    font-weight: 600;
    padding: 0.75rem 2rem;
    border-radius: 8px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    box-shadow: 0 4px 15px rgba(5, 118, 185, 0.3);
}

.str-form-section .btn-primary:hover {
    background: linear-gradient(135deg, #0469a3 0%, #3aa8d1 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(5, 118, 185, 0.4);
}

/* Enhanced Mobile Responsiveness */
@media (max-width: 768px) {
    .str-analytics-card .analytics-header {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }
    
    .str-analytics-card .analytics-actions {
        justify-content: center;
    }
    
    .str-analytics-card .analytics-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 0.75rem;
    }
    
    .str-analytics-card .metric-item {
        padding: 1rem;
    }
    
    .str-analytics-card .metric-value {
        font-size: 1.5rem;
    }
    
    .str-analytics-card .metric-label {
        font-size: 0.8rem;
    }
    
    .str-analytics-card .metric-icon {
        font-size: 1rem;
        top: 0.5rem;
        right: 0.5rem;
    }
    
    .str-income-table .controls-row {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }
    
    .str-income-table .controls-row h6 {
        text-align: center;
        justify-content: center;
    }
    
    .str-income-table .controls-row .btn,
    .str-income-table .controls-row .form-control,
    .str-income-table .controls-row .form-select {
        width: 100%;
        justify-content: center;
    }
    
    .str-income-table .controls-row .record-count {
        margin-left: 0;
        text-align: center;
    }
    
    .str-income-table .table thead th,
    .str-income-table .table tbody td {
        padding: 0.75rem 0.5rem;
        font-size: 0.8rem;
    }
    
    .str-income-table .income-details,
    .str-income-table .income-amount,
    .str-income-table .platform-info {
        gap: 0.125rem;
    }
    
    .str-income-table .income-date,
    .str-income-table .gross-amount {
        font-size: 0.85rem;
    }
    
    .str-income-table .income-meta,
    .str-income-table .net-amount,
    .str-income-table .nightly-rate {
        font-size: 0.75rem;
    }
    
    .platform-badge {
        font-size: 0.7rem;
        padding: 0.2rem 0.5rem;
    }
    
    .str-form-section {
        padding: 1rem;
    }
    
    .str-form-section .row {
        margin: 0;
    }
    
    .str-form-section .col-md-3,
    .str-form-section .col-md-6 {
        padding: 0.5rem;
    }
}

@media (max-width: 576px) {
    .str-analytics-card .analytics-grid {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
    
    .str-income-table .table-responsive {
        max-height: 400px;
    }
    
    .str-income-table .table thead th,
    .str-income-table .table tbody td {
        padding: 0.5rem 0.25rem;
        font-size: 0.75rem;
    }
    
    .str-income-table .income-details,
    .str-income-table .income-amount,
    .str-income-table .platform-info {
        min-width: 120px;
    }
}

/* Animation Keyframes */
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.str-analytics-card,
.str-income-table,
.str-form-section {
    animation: fadeInUp 0.6s ease-out;
}

.str-analytics-card .metric-item {
    animation: fadeInUp 0.6s ease-out;
}

.str-analytics-card .metric-item:nth-child(1) { animation-delay: 0.1s; }
.str-analytics-card .metric-item:nth-child(2) { animation-delay: 0.2s; }
.str-analytics-card .metric-item:nth-child(3) { animation-delay: 0.3s; }
.str-analytics-card .metric-item:nth-child(4) { animation-delay: 0.4s; }
.str-analytics-card .metric-item:nth-child(5) { animation-delay: 0.5s; }
.str-analytics-card .metric-item:nth-child(6) { animation-delay: 0.6s; }
.str-analytics-card .metric-item:nth-child(7) { animation-delay: 0.7s; }
.str-analytics-card .metric-item:nth-child(8) { animation-delay: 0.8s; }

/* Enhanced Scrollbar for STR Table */
.str-income-table .table-responsive::-webkit-scrollbar {
    width: 8px;
}

.str-income-table .table-responsive::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

.str-income-table .table-responsive::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    transition: background 0.3s ease;
}

.str-income-table .table-responsive::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Enhanced Focus States */
.str-form-section .form-control:focus-visible,
.str-form-section .form-select:focus-visible,
.str-income-table .controls-row .form-control:focus-visible,
.str-income-table .controls-row .form-select:focus-visible {
    outline: 2px solid #0576b9;
    outline-offset: 2px;
}

/* Enhanced Loading States */
.str-income-table.loading {
    position: relative;
    pointer-events: none;
}

.str-income-table.loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    z-index: 100;
}

.str-income-table.loading::before {
    content: 'Loading...';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ffffff;
    font-weight: 600;
    z-index: 101;
}

/* Enhanced Empty State */
.str-income-table .empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: #a8b2c8;
}

.str-income-table .empty-state i {
    font-size: 3rem;
    color: #6c757d;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.str-income-table .empty-state h6 {
    color: #ffffff;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.str-income-table .empty-state p {
    color: #a8b2c8;
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}

/* Enhanced Success/Error States */
.str-form-section .form-control.is-valid {
    border-color: #2cb57e;
    background: rgba(44, 181, 126, 0.05);
}

.str-form-section .form-control.is-invalid {
    border-color: #ef4444;
    background: rgba(239, 68, 68, 0.05);
}

.str-form-section .invalid-feedback {
    color: #ef4444;
    font-size: 0.8rem;
    margin-top: 0.25rem;
}

.str-form-section .valid-feedback {
    color: #2cb57e;
    font-size: 0.8rem;
    margin-top: 0.25rem;
}

/* Floating Add Property Button */
.floating-add-property-btn {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 1050;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.floating-add-property-btn .btn {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    border: none;
    box-shadow: 
        0 8px 24px rgba(79, 172, 254, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.floating-add-property-btn .btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: all 0.6s ease;
}

.floating-add-property-btn .btn:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 
        0 12px 32px rgba(79, 172, 254, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.2);
}

.floating-add-property-btn .btn:hover::before {
    left: 100%;
}

.floating-add-property-btn .btn:active {
    transform: translateY(-1px) scale(1.02);
}

.floating-add-property-btn .btn i {
    font-size: 1.5rem;
    color: #ffffff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    filter: drop-shadow(0 2px 4px rgba(255, 255, 255, 0.2));
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .floating-add-property-btn {
        bottom: 1.5rem;
        right: 1.5rem;
    }
    
    .floating-add-property-btn .btn {
        width: 3.5rem;
        height: 3.5rem;
    }
    
    .floating-add-property-btn .btn i {
        font-size: 1.3rem;
    }
}

@media (max-width: 576px) {
    .floating-add-property-btn {
        bottom: 1rem;
        right: 1rem;
    }
    
    .floating-add-property-btn .btn {
        width: 3rem;
        height: 3rem;
    }
    
    .floating-add-property-btn .btn i {
        font-size: 1.2rem;
    }
}

/* Modal Styles */
#addPropertyModal .modal-content {
    background: linear-gradient(145deg, #0a0e17 0%, #1a1f2e 50%, #16213e 100%);
    border: 1px solid rgba(74, 144, 226, 0.25);
    border-radius: 24px;
    box-shadow: 
        0 32px 64px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(25px);
    overflow: hidden;
    position: relative;
}

#addPropertyModal .modal-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(74, 144, 226, 0.4) 50%, transparent 100%);
    z-index: 1;
}

#addPropertyModal .modal-header {
    background: linear-gradient(135deg, #0a0e17 0%, #1a1f2e 100%);
    border-bottom: 1px solid rgba(74, 144, 226, 0.3);
    border-radius: 24px 24px 0 0;
    padding: 2.5rem 2.5rem 2rem;
    position: relative;
    z-index: 2;
}

#addPropertyModal .modal-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 2.5rem;
    right: 2.5rem;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(74, 144, 226, 0.4) 50%, transparent 100%);
}

#addPropertyModal .modal-title {
    color: #ffffff;
    font-weight: 800;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.875rem;
    text-shadow: 0 3px 6px rgba(0, 0, 0, 0.4);
    letter-spacing: 0.75px;
    line-height: 1.2;
}

#addPropertyModal .modal-title i {
    color: #4facfe;
    font-size: 1.4rem;
    filter: drop-shadow(0 3px 6px rgba(79, 172, 254, 0.4));
    animation: pulse-glow 2s ease-in-out infinite alternate;
}

@keyframes pulse-glow {
    0% { filter: drop-shadow(0 3px 6px rgba(79, 172, 254, 0.4)); }
    100% { filter: drop-shadow(0 3px 6px rgba(79, 172, 254, 0.6)); }
}

#addPropertyModal .modal-body {
    padding: 3rem 2.5rem;
    max-height: 70vh;
    overflow-y: auto;
    position: relative;
    z-index: 1;
}

#addPropertyModal .modal-footer {
    background: linear-gradient(135deg, #1a1f2e 0%, #0a0e17 100%);
    border-top: 1px solid rgba(74, 144, 226, 0.3);
    border-radius: 0 0 24px 24px;
    padding: 2rem 2.5rem 2.5rem;
    position: relative;
    z-index: 2;
}

#addPropertyModal .modal-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 2.5rem;
    right: 2.5rem;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(74, 144, 226, 0.4) 50%, transparent 100%);
}

/* Form Sections */
.form-section {
    margin-bottom: 2.5rem;
    padding: 2.5rem;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
    border: 1px solid rgba(74, 144, 226, 0.15);
    border-radius: 20px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(15px);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
}

.form-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #4facfe 0%, #00f2fe 50%, #4facfe 100%);
    opacity: 0.8;
}

.form-section:hover {
    border-color: rgba(74, 144, 226, 0.25);
    box-shadow: 
        0 12px 40px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    transform: translateY(-3px);
}

.section-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(74, 144, 226, 0.2);
    position: relative;
}

.section-header::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);
    border-radius: 1px;
}

.section-header h6 {
    color: #ffffff;
    font-weight: 700;
    font-size: 1.1rem;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.section-header i {
    font-size: 1.3rem;
    color: #4facfe;
    filter: drop-shadow(0 2px 4px rgba(79, 172, 254, 0.4));
}

/* Modern Form Controls */
.modern-form-control {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
    border: 2px solid rgba(74, 144, 226, 0.2);
    border-radius: 16px;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 500;
    padding: 1rem 1.25rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(15px);
    box-shadow: 
        0 4px 16px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    position: relative;
}

.modern-form-control:hover {
    border-color: rgba(74, 144, 226, 0.3);
    box-shadow: 
        0 6px 20px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    transform: translateY(-1px);
}

.modern-form-control:focus {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 100%);
    border-color: #4facfe;
    box-shadow: 
        0 0 0 4px rgba(79, 172, 254, 0.2),
        0 8px 24px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    color: #ffffff;
    outline: none;
    transform: translateY(-2px);
}

.modern-form-control::placeholder {
    color: rgba(168, 178, 200, 0.6);
    font-weight: 400;
}

/* Form Labels */
.form-label {
    color: #ffffff;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    letter-spacing: 0.5px;
}

.form-label i {
    color: #4facfe;
    font-size: 1rem;
    filter: drop-shadow(0 2px 4px rgba(79, 172, 254, 0.4));
}

/* Property Type Selector */
.property-type-selector {
    margin-top: 1.5rem;
}

.property-type-card {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
    border: 2px solid rgba(74, 144, 226, 0.2);
    border-radius: 20px;
    padding: 2rem 1.5rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(15px);
    box-shadow: 
        0 6px 20px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.property-type-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);
    transform: scaleX(0);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.property-type-card:hover {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 100%);
    border-color: rgba(74, 144, 226, 0.4);
    transform: translateY(-4px) scale(1.02);
    box-shadow: 
        0 12px 32px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.property-type-card.selected {
    background: linear-gradient(145deg, rgba(79, 172, 254, 0.15) 0%, rgba(0, 242, 254, 0.1) 100%);
    border-color: #4facfe;
    box-shadow: 
        0 0 0 4px rgba(79, 172, 254, 0.2),
        0 8px 24px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

.property-type-card.selected::before {
    transform: scaleX(1);
}

.type-icon {
    font-size: 2.5rem;
    color: #4facfe;
    margin-bottom: 1.25rem;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    filter: drop-shadow(0 4px 8px rgba(79, 172, 254, 0.3));
}

.property-type-card:hover .type-icon {
    transform: scale(1.15) rotate(5deg);
    filter: drop-shadow(0 6px 12px rgba(79, 172, 254, 0.4));
}

.property-type-card.selected .type-icon {
    transform: scale(1.1);
    filter: drop-shadow(0 4px 8px rgba(79, 172, 254, 0.5));
}

.type-label {
    color: #ffffff;
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 0.75rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    letter-spacing: 0.5px;
}

.type-description {
    color: rgba(168, 178, 200, 0.8);
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.4;
}

/* Equity Preview */
.equity-preview {
    margin-top: 2rem;
}

.equity-card {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
    border: 2px solid rgba(74, 144, 226, 0.2);
    border-radius: 20px;
    padding: 2rem;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(15px);
    box-shadow: 
        0 6px 20px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
}

.equity-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);
    opacity: 0.8;
}

.equity-card:hover {
    border-color: rgba(74, 144, 226, 0.3);
    box-shadow: 
        0 8px 24px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
}

.equity-card.equity-total {
    background: linear-gradient(145deg, rgba(79, 172, 254, 0.1) 0%, rgba(0, 242, 254, 0.05) 100%);
    border-color: rgba(79, 172, 254, 0.4);
    box-shadow: 
        0 8px 24px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 0 0 1px rgba(79, 172, 254, 0.1);
}

.equity-card.equity-total::before {
    background: linear-gradient(90deg, #4facfe 0%, #00f2fe 50%, #4facfe 100%);
    opacity: 1;
}

.equity-label {
    color: rgba(168, 178, 200, 0.9);
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.75rem;
}

.equity-value {
    color: #ffffff;
    font-weight: 800;
    font-size: 1.5rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    margin-bottom: 0.5rem;
}

.equity-card.equity-total .equity-value {
    color: #4facfe;
    font-size: 1.75rem;
    text-shadow: 0 3px 6px rgba(79, 172, 254, 0.4);
}

.equity-breakdown {
    color: rgba(168, 178, 200, 0.7);
    font-size: 0.8rem;
    font-weight: 500;
}

/* Modern Buttons */
.modern-btn-primary {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    border: none;
    border-radius: 16px;
    padding: 1rem 2.5rem;
    font-weight: 700;
    font-size: 1rem;
    color: #ffffff;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    box-shadow: 
        0 8px 24px rgba(79, 172, 254, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    letter-spacing: 0.5px;
}

.modern-btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: all 0.6s ease;
}

.modern-btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 
        0 12px 32px rgba(79, 172, 254, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    color: #ffffff;
}

.modern-btn-primary:hover::before {
    left: 100%;
}

.modern-btn-primary:active {
    transform: translateY(-1px);
    box-shadow: 
        0 6px 20px rgba(79, 172, 254, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.modern-btn-secondary {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    border: 2px solid rgba(74, 144, 226, 0.3);
    border-radius: 16px;
    padding: 1rem 2.5rem;
    font-weight: 600;
    font-size: 1rem;
    color: rgba(168, 178, 200, 0.9);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(15px);
    box-shadow: 
        0 6px 20px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    letter-spacing: 0.5px;
}

.modern-btn-secondary:hover {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.08) 100%);
    border-color: rgba(74, 144, 226, 0.5);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 
        0 8px 24px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.modern-btn-close {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    border: 2px solid rgba(74, 144, 226, 0.3);
    border-radius: 50%;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(15px);
    box-shadow: 
        0 4px 16px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    color: #ffffff;
    font-size: 1.2rem;
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.modern-btn-close:hover {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.08) 100%);
    border-color: rgba(74, 144, 226, 0.5);
    color: #ffffff;
    transform: scale(1.1);
    box-shadow: 
        0 6px 20px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* Loading States */
.btn-loading {
    display: none;
}

.modern-btn-primary.loading .btn-text {
    display: none;
}

.modern-btn-primary.loading .btn-loading {
    display: inline-block;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    #addPropertyModal .modal-dialog {
        margin: 1rem;
        max-width: calc(100% - 2rem);
    }
    
    #addPropertyModal .modal-body {
        padding: 1.5rem;
        max-height: 60vh;
    }
    
    .form-section {
        padding: 1rem;
        margin-bottom: 1.5rem;
    }
    
    .property-type-card {
        padding: 1rem;
    }
    
    .type-icon {
        font-size: 1.5rem;
    }
    
    .equity-card {
        padding: 1rem;
    }
    
    .equity-value {
        font-size: 1.25rem;
    }
    
    .modern-btn-primary,
    .modern-btn-secondary {
        padding: 0.75rem 1.5rem;
        font-size: 0.9rem;
    }
}

@media (max-width: 576px) {
    #addPropertyModal .modal-dialog {
        margin: 0.5rem;
        max-width: calc(100% - 1rem);
    }
    
    #addPropertyModal .modal-body {
        padding: 1rem;
    }
    
    .form-section {
        padding: 0.75rem;
    }
    
    .section-header h6 {
        font-size: 0.9rem;
    }
    
    .property-type-card {
        margin-bottom: 1rem;
    }
    
    .equity-preview .row {
        margin: 0;
    }
    
    .equity-preview .col-md-4 {
        padding: 0 0.5rem;
    }
}

/* Upgrade Modal Styles */
#upgradeModal .modal-content {
    background: linear-gradient(135deg, #1a1f2e 0%, #2d3748 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

#upgradeModal .modal-header {
    background: linear-gradient(135deg, #0576b9 0%, #47bce8 100%);
    border-bottom: none;
    padding: 1.5rem;
    position: relative;
}

#upgradeModal .modal-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
    animation: shimmer 3s ease-in-out infinite;
}

#upgradeModal .modal-title {
    color: white;
    font-weight: 700;
    font-size: 1.5rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    position: relative;
    z-index: 2;
}

#upgradeModal .modal-title i {
    color: #ffd700;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

#upgradeModal .modal-body {
    padding: 2rem;
    background: linear-gradient(135deg, #1a1f2e 0%, #2d3748 100%);
}

#upgradeModal .upgrade-icon {
    display: inline-block;
    padding: 1.5rem;
    background: linear-gradient(135deg, #0576b9 0%, #47bce8 100%);
    border-radius: 50%;
    box-shadow: 0 8px 25px rgba(5, 118, 185, 0.3);
    animation: pulse-glow 2s ease-in-out infinite;
}

#upgradeModal .upgrade-icon i {
    color: white;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

#upgradeModal .card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    transition: all 0.3s ease;
    overflow: hidden;
    position: relative;
}

#upgradeModal .card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.05) 50%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

#upgradeModal .card:hover::before {
    opacity: 1;
}

#upgradeModal .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
    border-color: rgba(255, 255, 255, 0.2);
}

#upgradeModal .card-header {
    border-bottom: none;
    padding: 1.5rem;
    position: relative;
}

#upgradeModal .card-header h5 {
    margin: 0;
    font-weight: 700;
    font-size: 1.25rem;
}

#upgradeModal .card-body {
    padding: 1.5rem;
    text-align: center;
}

#upgradeModal .price-display {
    margin-bottom: 1.5rem;
}

#upgradeModal .price-amount {
    font-size: 2.5rem;
    font-weight: 800;
    color: #0576b9;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#upgradeModal .price-period {
    font-size: 1rem;
    color: #6c757d;
    font-weight: 500;
}

#upgradeModal .list-unstyled li {
    padding: 0.5rem 0;
    color: #e2e8f0;
    font-weight: 500;
    transition: all 0.3s ease;
}

#upgradeModal .list-unstyled li:hover {
    color: white;
    transform: translateX(5px);
}

#upgradeModal .list-unstyled i {
    color: #2cb57e;
    margin-right: 0.75rem;
    font-size: 1.1em;
}

#upgradeModal .btn {
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

#upgradeModal .btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

#upgradeModal .btn:hover::before {
    left: 100%;
}

#upgradeModal .btn-primary {
    background: linear-gradient(135deg, #0576b9 0%, #47bce8 100%);
    border: none;
    color: white;
    box-shadow: 0 4px 15px rgba(5, 118, 185, 0.3);
}

#upgradeModal .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(5, 118, 185, 0.4);
}

#upgradeModal .btn-warning {
    background: linear-gradient(135deg, #ffc107 0%, #ff8c00 100%);
    border: none;
    color: #212529;
    box-shadow: 0 4px 15px rgba(255, 193, 7, 0.3);
}

#upgradeModal .btn-warning:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 193, 7, 0.4);
    color: #212529;
}

#upgradeModal .btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #e2e8f0;
}

#upgradeModal .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    color: white;
}

#upgradeModal .btn-outline-primary {
    background: transparent;
    border: 2px solid #0576b9;
    color: #0576b9;
}

#upgradeModal .btn-outline-primary:hover {
    background: #0576b9;
    color: white;
    transform: translateY(-2px);
}

#upgradeModal .modal-footer {
    background: rgba(255, 255, 255, 0.02);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 1.5rem;
}

#upgradeModal .text-muted {
    color: #a8b2c8 !important;
}

#upgradeModal .badge {
    font-size: 0.875rem;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-weight: 600;
}

#upgradeModal .bg-secondary {
    background: linear-gradient(135deg, #6c757d 0%, #495057 100%) !important;
}

#upgradeModal .fw-bold {
    color: #0576b9;
    font-weight: 700;
}

@media (max-width: 768px) {
    #upgradeModal .modal-dialog {
        margin: 1rem;
    }
    
    #upgradeModal .modal-body {
        padding: 1.5rem;
    }
    
    #upgradeModal .card-body {
        padding: 1rem;
    }
    
    #upgradeModal .price-amount {
        font-size: 2rem;
    }
    
    #upgradeModal .btn {
        padding: 0.6rem 1.2rem;
        font-size: 0.9rem;
    }
}

@media (max-width: 576px) {
    #upgradeModal .modal-dialog {
        margin: 0.5rem;
    }
    
    #upgradeModal .modal-body {
        padding: 1rem;
    }
    
    #upgradeModal .upgrade-icon {
        padding: 1rem;
    }
    
    #upgradeModal .upgrade-icon i {
        font-size: 2rem;
    }
    
    #upgradeModal .price-amount {
        font-size: 1.75rem;
    }
}

/* Purchase Modal Styles */
#purchaseModal .modal-content {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

#purchaseModal .plan-card {
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid transparent;
    transition: all 0.3s ease;
    cursor: pointer;
}

#purchaseModal .plan-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

#purchaseModal .plan-card.selected {
    border-color: #ffc107;
    background: rgba(255, 193, 7, 0.1);
    box-shadow: 0 0 20px rgba(255, 193, 7, 0.3);
}

#purchaseModal .plan-card .card-header {
    border-bottom: none;
}

#purchaseModal .price-display {
    margin-bottom: 1rem;
}

#purchaseModal .price-amount {
    font-size: 2rem;
    font-weight: 700;
    color: #ffc107;
}

#purchaseModal .price-period {
    color: #b0b0b0;
    font-size: 1rem;
}

#purchaseModal .payment-form {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
    margin-top: 20px;
}

#purchaseModal .form-control {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    border-radius: 8px;
}

#purchaseModal .form-control:focus {
    background: rgba(255, 255, 255, 0.15);
    border-color: #ffc107;
    box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.25);
    color: #ffffff;
}

#purchaseModal .form-control::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

#purchaseModal .form-label {
    color: #ffffff;
    font-weight: 500;
}

#purchaseModal .btn-success {
    background: linear-gradient(45deg, #28a745, #20c997);
    border: none;
    box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
}

#purchaseModal .btn-success:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(40, 167, 69, 0.4);
    background: linear-gradient(45deg, #20c997, #28a745);
}

/* Card number formatting */
#cardNumber {
    font-family: 'Courier New', monospace;
    letter-spacing: 1px;
}

/* Responsive design for purchase modal */
@media (max-width: 768px) {
    #purchaseModal .modal-dialog {
        margin: 10px;
    }
    
    #purchaseModal .plan-card {
        margin-bottom: 15px;
    }
    
    #purchaseModal .payment-form {
        padding: 15px;
    }
}

/* Enhanced Property Management Center Styles */

/* Enhanced Expense Cards */
#expensesModal .expense-card {
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 16px !important;
    padding: 1.5rem !important;
    margin-bottom: 1rem !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1) !important;
}

#expensesModal .expense-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 3px !important;
    background: linear-gradient(90deg, #3498db, #2ecc71, #f39c12, #e74c3c) !important;
    opacity: 0.8 !important;
}

#expensesModal .expense-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 30px rgba(0,0,0,0.15) !important;
    border-color: rgba(255,255,255,0.2) !important;
}

/* Expense Card Header */
#expensesModal .expense-card-header {
    margin-bottom: 1rem !important;
}

#expensesModal .expense-card-title {
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
}

#expensesModal .expense-icon-wrapper {
    width: 50px !important;
    height: 50px !important;
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%) !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: white !important;
    font-size: 1.2rem !important;
    box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3) !important;
    transition: all 0.3s ease !important;
}

#expensesModal .expense-card:hover .expense-icon-wrapper {
    transform: scale(1.05) !important;
    box-shadow: 0 6px 20px rgba(52, 152, 219, 0.4) !important;
}

#expensesModal .expense-title-content {
    flex: 1 !important;
}

#expensesModal .expense-title {
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 1.1rem !important;
    margin-bottom: 0.25rem !important;
}

#expensesModal .expense-date {
    color: #bdc3c7 !important;
    font-size: 0.85rem !important;
}

#expensesModal .expense-amount-display {
    text-align: right !important;
}

#expensesModal .expense-amount {
    color: #2ecc71 !important;
    font-weight: 700 !important;
    font-size: 1.3rem !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1) !important;
}

/* Expense Card Details */
#expensesModal .expense-card-details {
    margin: 1rem 0 !important;
    padding: 1rem !important;
    background: rgba(255,255,255,0.05) !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
}

#expensesModal .expense-detail-row {
    display: flex !important;
    gap: 1.5rem !important;
    flex-wrap: wrap !important;
}

#expensesModal .expense-detail-item {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    flex: 1 !important;
    min-width: 200px !important;
}

#expensesModal .expense-detail-item i {
    width: 20px !important;
    text-align: center !important;
    font-size: 0.9rem !important;
}

#expensesModal .expense-detail-label {
    color: #bdc3c7 !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    margin-right: 0.5rem !important;
}

#expensesModal .expense-detail-value {
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
}

/* Expense Card Actions */
#expensesModal .expense-card-actions {
    display: flex !important;
    gap: 0.75rem !important;
    margin-top: 1rem !important;
    padding-top: 1rem !important;
    border-top: 1px solid rgba(255,255,255,0.1) !important;
}

#expensesModal .btn-edit-expense {
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%) !important;
    border: none !important;
    border-radius: 8px !important;
    color: white !important;
    padding: 0.5rem 1rem !important;
    font-weight: 500 !important;
    font-size: 0.85rem !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    box-shadow: 0 2px 10px rgba(52, 152, 219, 0.3) !important;
}

#expensesModal .btn-edit-expense:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 15px rgba(52, 152, 219, 0.4) !important;
    background: linear-gradient(135deg, #2980b9 0%, #1f5f8b 100%) !important;
}

#expensesModal .btn-delete-expense {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%) !important;
    border: none !important;
    border-radius: 8px !important;
    color: white !important;
    padding: 0.5rem 1rem !important;
    font-weight: 500 !important;
    font-size: 0.85rem !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    box-shadow: 0 2px 10px rgba(231, 76, 60, 0.3) !important;
}

#expensesModal .btn-delete-expense:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 15px rgba(231, 76, 60, 0.4) !important;
    background: linear-gradient(135deg, #c0392b 0%, #a93226 100%) !important;
}

/* Category-specific icon colors */
#expensesModal .expense-card[data-category="property tax"] .expense-icon-wrapper {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%) !important;
    box-shadow: 0 4px 15px rgba(231, 76, 60, 0.3) !important;
}

#expensesModal .expense-card[data-category="insurance"] .expense-icon-wrapper {
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%) !important;
    box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3) !important;
}

#expensesModal .expense-card[data-category="repairs"] .expense-icon-wrapper {
    background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%) !important;
    box-shadow: 0 4px 15px rgba(243, 156, 18, 0.3) !important;
}

#expensesModal .expense-card[data-category="maintenance"] .expense-icon-wrapper {
    background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%) !important;
    box-shadow: 0 4px 15px rgba(46, 204, 113, 0.3) !important;
}

#expensesModal .expense-card[data-category="hoa"] .expense-icon-wrapper {
    background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%) !important;
    box-shadow: 0 4px 15px rgba(155, 89, 182, 0.3) !important;
}

#expensesModal .expense-card[data-category="utilities"] .expense-icon-wrapper {
    background: linear-gradient(135deg, #1abc9c 0%, #16a085 100%) !important;
    box-shadow: 0 4px 15px rgba(26, 188, 156, 0.3) !important;
}

#expensesModal .expense-card[data-category="property management"] .expense-icon-wrapper {
    background: linear-gradient(135deg, #34495e 0%, #2c3e50 100%) !important;
    box-shadow: 0 4px 15px rgba(52, 73, 94, 0.3) !important;
}

#expensesModal .expense-card[data-category="other"] .expense-icon-wrapper {
    background: linear-gradient(135deg, #95a5a6 0%, #7f8c8d 100%) !important;
    box-shadow: 0 4px 15px rgba(149, 165, 166, 0.3) !important;
}

/* Enhanced Edit Mode Styles */
#expensesModal .expense-edit-mode {
    background: linear-gradient(135deg, #34495e 0%, #2c3e50 100%) !important;
    border: 2px solid rgba(52, 152, 219, 0.3) !important;
    box-shadow: 0 8px 30px rgba(52, 152, 219, 0.2) !important;
}

#expensesModal .expense-edit-mode::before {
    background: linear-gradient(90deg, #3498db, #2ecc71, #f39c12) !important;
    opacity: 1 !important;
}

#expensesModal .expense-edit-header {
    border-bottom: 1px solid rgba(255,255,255,0.1) !important;
    padding-bottom: 1rem !important;
}

#expensesModal .expense-edit-title .expense-icon-wrapper {
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%) !important;
    box-shadow: 0 4px 15px rgba(52, 152, 219, 0.4) !important;
}

#expensesModal .expense-edit-form {
    margin-top: 1rem !important;
}

#expensesModal .expense-edit-fields {
    margin-bottom: 1.5rem !important;
}

#expensesModal .expense-edit-row {
    display: flex !important;
    gap: 1.5rem !important;
    flex-wrap: wrap !important;
}

#expensesModal .expense-edit-field {
    flex: 1 !important;
    min-width: 200px !important;
}

#expensesModal .expense-edit-label {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    margin-bottom: 0.5rem !important;
}

#expensesModal .expense-edit-label i {
    font-size: 0.85rem !important;
}

#expensesModal .expense-edit-input,
#expensesModal .expense-edit-select {
    width: 100% !important;
    background: rgba(255,255,255,0.1) !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    border-radius: 8px !important;
    padding: 0.75rem !important;
    color: #ffffff !important;
    font-size: 0.9rem !important;
    transition: all 0.3s ease !important;
}

#expensesModal .expense-edit-input:focus,
#expensesModal .expense-edit-select:focus {
    background: rgba(255,255,255,0.15) !important;
    border-color: #3498db !important;
    box-shadow: 0 0 0 0.2rem rgba(52, 152, 219, 0.25) !important;
    outline: none !important;
}

#expensesModal .expense-edit-input::placeholder {
    color: rgba(255,255,255,0.5) !important;
}

#expensesModal .expense-edit-select option {
    background: #34495e !important;
    color: #ffffff !important;
    padding: 0.5rem !important;
}

#expensesModal .expense-edit-actions {
    display: flex !important;
    gap: 1rem !important;
    justify-content: flex-end !important;
    padding-top: 1rem !important;
    border-top: 1px solid rgba(255,255,255,0.1) !important;
}

#expensesModal .btn-save-expense {
    background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%) !important;
    border: none !important;
    border-radius: 8px !important;
    color: white !important;
    padding: 0.75rem 1.5rem !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    box-shadow: 0 4px 15px rgba(46, 204, 113, 0.3) !important;
}

#expensesModal .btn-save-expense:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 20px rgba(46, 204, 113, 0.4) !important;
    background: linear-gradient(135deg, #27ae60 0%, #229954 100%) !important;
}

#expensesModal .btn-cancel-expense {
    background: linear-gradient(135deg, #95a5a6 0%, #7f8c8d 100%) !important;
    border: none !important;
    border-radius: 8px !important;
    color: white !important;
    padding: 0.75rem 1.5rem !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    box-shadow: 0 4px 15px rgba(149, 165, 166, 0.3) !important;
}

#expensesModal .btn-cancel-expense:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 20px rgba(149, 165, 166, 0.4) !important;
    background: linear-gradient(135deg, #7f8c8d 0%, #6c7b7d 100%) !important;
}

/* Edit mode animations */
#expensesModal .expense-edit-mode {
    animation: expenseEditSlideIn 0.3s ease-out !important;
}

@keyframes expenseEditSlideIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Mobile Responsiveness for Edit Mode */
@media (max-width: 768px) {
    #expensesModal .expense-edit-row {
        flex-direction: column !important;
        gap: 1rem !important;
    }
    
    #expensesModal .expense-edit-field {
        min-width: auto !important;
    }
    
    #expensesModal .expense-edit-actions {
        flex-direction: column !important;
        gap: 0.75rem !important;
    }
    
    #expensesModal .btn-save-expense,
    #expensesModal .btn-cancel-expense {
        width: 100% !important;
        justify-content: center !important;
    }
}

/* Enhanced Maintenance Record Cards */
/* Maintenance records now use expense card styling - no separate styles needed */

/* Type-specific icon colors for maintenance records using expense card structure */
#expensesModal .expense-card[data-category="Preventive"] .expense-icon-wrapper {
    background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%) !important;
    box-shadow: 0 4px 15px rgba(46, 204, 113, 0.3) !important;
}

#expensesModal .expense-card[data-category="Repair"] .expense-icon-wrapper {
    background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%) !important;
    box-shadow: 0 4px 15px rgba(243, 156, 18, 0.3) !important;
}

#expensesModal .expense-card[data-category="Emergency"] .expense-icon-wrapper {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%) !important;
    box-shadow: 0 4px 15px rgba(231, 76, 60, 0.3) !important;
}

#expensesModal .expense-card[data-category="Inspection"] .expense-icon-wrapper {
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%) !important;
    box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3) !important;
}

#expensesModal .expense-card[data-category="Upgrade"] .expense-icon-wrapper {
    background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%) !important;
    box-shadow: 0 4px 15px rgba(155, 89, 182, 0.3) !important;
}

/* Maintenance card details match expense card structure */
#expensesModal .maintenance-card-details {
    margin: 1rem 0 !important;
    padding: 1rem !important;
    background: rgba(255,255,255,0.05) !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
}

#expensesModal .maintenance-detail-row {
    display: flex !important;
    gap: 1.5rem !important;
    flex-wrap: wrap !important;
}

#expensesModal .maintenance-detail-item {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    flex: 1 !important;
    min-width: 200px !important;
}

#expensesModal .maintenance-detail-item i {
    width: 20px !important;
    text-align: center !important;
    font-size: 0.9rem !important;
}

#expensesModal .maintenance-detail-label {
    color: #bdc3c7 !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    margin-right: 0.5rem !important;
}

#expensesModal .maintenance-detail-value {
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
}

/* Maintenance edit mode now uses expense edit mode styling - no separate styles needed */

/* Mobile Responsiveness - Maintenance cards now use expense card styling */

/* Mobile Responsiveness */
@media (max-width: 768px) {
    #expensesModal .expense-card {
        padding: 1rem !important;
    }
    
    #expensesModal .expense-detail-row {
        flex-direction: column !important;
        gap: 0.75rem !important;
    }
    
    #expensesModal .expense-detail-item {
        min-width: auto !important;
    }
    
    #expensesModal .expense-card-actions {
        flex-direction: column !important;
    }
    
    #expensesModal .expense-amount {
        font-size: 1.1rem !important;
    }
}

/* Animation for expense cards */
@keyframes expenseCardSlideIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#expensesModal .expense-card {
    animation: expenseCardSlideIn 0.4s ease-out;
}

#expensesModal .expense-card:nth-child(1) { animation-delay: 0.1s; }
#expensesModal .expense-card:nth-child(2) { animation-delay: 0.2s; }
#expensesModal .expense-card:nth-child(3) { animation-delay: 0.3s; }
#expensesModal .expense-card:nth-child(4) { animation-delay: 0.4s; }
#expensesModal .expense-card:nth-child(5) { animation-delay: 0.5s; }

/* Improved Tab Navigation */
#expensesModal .tabs {
    background: rgba(255,255,255,0.05) !important;
    border-radius: 12px !important;
    padding: 0.5rem !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.1);
}

#expensesModal .tab-modern {
    flex: 1 !important;
    margin: 0 0.25rem !important;
    border-radius: 8px !important;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

#expensesModal .tab-modern::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
    transition: left 0.5s ease;
}

#expensesModal .tab-modern:hover::before {
    left: 100%;
}

#expensesModal .tab-modern.active {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%) !important;
    color: white !important;
    box-shadow: 0 4px 15px rgba(0,123,255,0.3);
    transform: translateY(-1px);
}

#expensesModal .tab-modern:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Enhanced Form Controls */
#expensesModal .input-modern {
    border-radius: 8px !important;
    border: 1px solid rgba(255,255,255,0.2);
    transition: all 0.3s ease;
    background: rgba(52, 73, 94, 0.8);
    color: #ffffff;
}

#expensesModal .input-modern:focus {
    border-color: #007bff !important;
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,0.25) !important;
    background: rgba(52, 73, 94, 1);
    transform: translateY(-1px);
    color: #ffffff;
}

#expensesModal .input-group-text {
    border-radius: 8px 0 0 8px !important;
    background: rgba(52, 73, 94, 0.9) !important;
    border: 1px solid rgba(255,255,255,0.2);
    color: #bdc3c7;
}

#expensesModal .form-control.input-modern {
    border-radius: 0 8px 8px 0 !important;
}

#expensesModal .input-modern::placeholder {
    color: #bdc3c7 !important;
}

/* Enhanced Buttons */
#expensesModal .btn-modern {
    border-radius: 8px !important;
    padding: 0.75rem 1.5rem !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    position: relative;
    overflow: hidden;
}

#expensesModal .btn-modern::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s ease;
}

#expensesModal .btn-modern:hover::before {
    left: 100%;
}

#expensesModal .btn-modern:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.15) !important;
}

/* Enhanced Section Headers */
#expensesModal .section-header-modern {
    margin-bottom: 1.5rem !important;
}

#expensesModal .icon-wrapper {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Enhanced Cards */
#expensesModal .card-modern {
    border-radius: 16px !important;
    border: 1px solid rgba(0,0,0,0.1) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
    transition: all 0.3s ease;
    overflow: hidden;
}

#expensesModal .card-modern::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #007bff, #28a745, #ffc107, #dc3545);
    opacity: 0;
    transition: opacity 0.3s ease;
}

#expensesModal .card-modern:hover::before {
    opacity: 1;
}

#expensesModal .card-modern:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15) !important;
}

/* Enhanced Property Header */
#expensesModal .property-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: #fff !important;
    border-radius: 18px !important;
    margin-bottom: 2rem !important;
    padding: 1.5rem !important;
    position: relative;
    overflow: hidden;
}

#expensesModal .property-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="1" fill="rgba(255,255,255,0.1)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
    opacity: 0.3;
}

#expensesModal .property-header h2 {
    font-size: 2rem !important;
    font-weight: 700 !important;
    margin-bottom: 0.25rem !important;
    position: relative;
    z-index: 1;
}

#expensesModal .property-header div {
    font-size: 1.1rem !important;
    opacity: 0.9 !important;
    position: relative;
    z-index: 1;
}/* Enhanced Form Labels */
#expensesModal .form-label.fw-semibold {
    font-weight: 600 !important;
    color: #ffffff !important;
    margin-bottom: 0.5rem !important;
}

#expensesModal .form-label i {
    color: #007bff !important;
    margin-right: 0.5rem !important;
}

/* Enhanced Select Options */
#expensesModal .form-select option {
    padding: 0.5rem !important;
    font-weight: 500 !important;
    background: #34495e !important;
    color: #ffffff !important;
}

/* Enhanced Badges */
#expensesModal .badge-pill {
    border-radius: 20px !important;
    padding: 0.25rem 0.75rem !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
}

/* Enhanced Divider */
#expensesModal .divider-modern {
    height: 2px !important;
    background: linear-gradient(90deg, transparent, rgba(0,123,255,0.3), transparent) !important;
    border-radius: 1px !important;
    margin: 1.5rem 0 !important;
}

/* Enhanced Action Buttons */
#expensesModal .btn-outline-primary,
#expensesModal .btn-outline-success,
#expensesModal .btn-outline-info {
    border-radius: 8px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    border-width: 2px !important;
}

#expensesModal .btn-outline-primary:hover,
#expensesModal .btn-outline-success:hover,
#expensesModal .btn-outline-info:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
}

/* Responsive Enhancements */
@media (max-width: 768px) {
    #expensesModal .tab-modern {
        font-size: 0.875rem !important;
        padding: 0.5rem 0.75rem !important;
    }
    
    #expensesModal .property-header h2 {
        font-size: 1.5rem !important;
    }
    
    #expensesModal .property-header div {
        font-size: 1rem !important;
    }
    
    #expensesModal .card-modern {
        padding: 1rem !important;
    }
    
    #expensesModal .icon-wrapper {
        width: 32px !important;
        height: 32px !important;
    }
}

@media (max-width: 576px) {
    #expensesModal .tabs {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }
    
    #expensesModal .tab-modern {
        margin: 0 !important;
        width: 100% !important;
    }
    
    #expensesModal .property-header {
        text-align: center !important;
        padding: 1rem !important;
    }
    
    #expensesModal .btn-modern {
        padding: 0.5rem 1rem !important;
        font-size: 0.875rem !important;
    }
}

/* Animation Enhancements */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#expensesModal .tab-pane {
    animation: fadeInUp 0.5s ease-out;
}

/* Enhanced Focus States */
#expensesModal .input-modern:focus-visible,
#expensesModal .btn-modern:focus-visible {
    outline: 2px solid #007bff !important;
    outline-offset: 2px !important;
}

/* Loading States */
#expensesModal .btn-modern.loading {
    pointer-events: none !important;
    opacity: 0.7 !important;
}

#expensesModal .btn-modern.loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    margin: auto;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

/* Enhanced Empty States */
#expensesModal .empty-state {
    text-align: center !important;
    padding: 3rem 1rem !important;
    color: #6c757d !important;
}

#expensesModal .empty-state i {
    font-size: 3rem !important;
    margin-bottom: 1rem !important;
    opacity: 0.5;
}

#expensesModal .empty-state h6 {
    font-weight: 600 !important;
    margin-bottom: 0.5rem !important;
}

#expensesModal .empty-state p {
    margin-bottom: 1.5rem !important;
    opacity: 0.8;
}

/* Enhanced Success/Error States */
#expensesModal .form-control.is-valid {
    border-color: #28a745 !important;
    box-shadow: 0 0 0 0.2rem rgba(40,167,69,0.25) !important;
}

#expensesModal .form-control.is-invalid {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220,53,69,0.25) !important;
}

/* Enhanced Accessibility */
#expensesModal .tab-modern:focus-visible {
    outline: 2px solid #007bff !important;
    outline-offset: 2px !important;
}

#expensesModal .btn-modern:focus-visible {
    outline: 2px solid #007bff !important;
    outline-offset: 2px !important;
}

/* Enhanced Hover Effects */
#expensesModal .card-modern:hover .icon-wrapper {
    transform: scale(1.1);
    transition: transform 0.3s ease;
}

#expensesModal .section-header-modern:hover h6 {
    color: #007bff !important;
    transition: color 0.3s ease;
}

/* Enhanced Form Group Spacing */
#expensesModal .row.g-3 > [class^="col-"] {
    margin-bottom: 1rem;
}

/* Enhanced Button Groups */
#expensesModal .d-flex.gap-2 .btn {
    border-radius: 8px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

#expensesModal .d-flex.gap-2 .btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
}