/* Components Styles */

/* Avatar/account icon */
.account-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg,#e961ab 40%,#6b46c1 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.1rem;
    margin-right: 8px;
    box-shadow: 0 2px 8px #0003;
    border: 2px solid #fff2;
    transition: box-shadow 0.3s;
}

.account-avatar:hover {
    box-shadow: 0 4px 16px #e961ab88;
}

/* Animated SVG Background */
#svg-bg {
    position: fixed;
    top: 0; 
    left: 0; 
    width: 100vw; 
    height: 100vh;
    z-index: 0;
    pointer-events: none;
    opacity: 0.18;
}

body, .content {
    position: relative;
    z-index: 1;
}

/* Đảm bảo các thành phần chính nằm trên SVG */
.content, .loader, .card, .account-avatar, #mainLoader {
    position: relative;
    z-index: 2;
}

/* Responsive summary bar (mobile) */
#summaryBar {
    box-shadow: 0 -2px 16px #0005;
    font-size: 0.8rem;
}

/* Toast Notifications */
.toast-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    padding: 12px 16px;
    border-radius: 8px;
    color: white;
    font-weight: 500;
    animation: slideInRight 0.3s ease-out;
    max-width: 300px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}

.toast-success {
    background: linear-gradient(135deg, #10b981, #059669);
}

.toast-error {
    background: linear-gradient(135deg, #ef4444, #dc2626);
}

.toast-content {
    display: flex;
    align-items: center;
    gap: 8px;
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

#summaryBar span.font-bold {
    font-size: 1.1rem;
    color: #e961ab;
}

@media (min-width: 768px) {
    #summaryBar { 
        display: none !important; 
    }
}

/* Data table style */
#detailTable th, #detailTable td {
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

#detailTable th {
    background: #2d2d44;
    color: #e0e0e0;
    font-weight: 600;
}

#detailTable tr:last-child td {
    border-bottom: none;
}

#detailTable tr:hover td {
    background: #e961ab22;
}

#detailTable .highlight-max {
    background: #2ecc4040;
    color: #2ecc40;
    font-weight: bold;
}

#detailTable .highlight-min {
    background: #e74c3c33;
    color: #e74c3c;
    font-weight: bold;
}

/* Statistics rows in table footer */
/* Statistics styling moved to #tableStats container */

#detailTableContainer {
    transition: max-height 0.4s cubic-bezier(.4,2,.6,1);
}

/* Filter/segment control responsive fix: always horizontal, scrollable on mobile */
.filter-segment {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.filter-segment::-webkit-scrollbar {
    display: none;
}

.filter-segment .btn {
    white-space: nowrap;
    min-width: 70px;
    flex: 0 0 auto;
}

/* Filter segment responsive */
.filter-segment {
    display: flex;
    gap: 4px;
    flex-wrap: nowrap;
}

.filter-segment .filter-btn {
    white-space: nowrap;
    min-width: 0;
    flex-shrink: 1;
}

/* Mobile optimizations */
@media (max-width: 640px) {
    .filter-segment .filter-btn {
        font-size: 9px !important;
        padding: 3px 6px !important;
    }
    
    #toggleDetailTable {
        font-size: 9px !important;
        padding: 3px 6px !important;
        white-space: nowrap;
    }
      #billingCycleBtn {
        font-size: 9px !important;
        padding: 3px 6px !important;
    }
    
    #toggleMode {
        font-size: 9px !important;
        padding: 3px 6px !important;
    }    /* Make summary labels even smaller on mobile */
    .summary-label {
        font-size: 0.7rem !important; /* 11.2px trên mobile */
    }
    
    /* Make summary values smaller on mobile too */
    .summary-value {
        font-size: 0.7rem !important; /* 11.2px trên mobile */
    }
      /* Make summary units smaller on mobile too */
    .summary-unit {
        font-size: 0.7rem !important; /* 11.2px trên mobile */
    }
    
    /* Mobile optimization for summary inline */
    .summary-stat-inline {
        font-size: 0.7rem !important;
        gap: 3px;
    }
    
    .summary-stat-inline span {
        font-size: 0.7rem !important;
    }
    
    .min-value i,
    .max-value i {
        font-size: 0.55rem !important;
    }
    
    .space-y-1 .flex.items-center.justify-between.text-sm .flex.items-center.gap-1 span:last-child {
        font-size: 0.7rem !important; /* 11.2px on mobile */
    }
    
    .space-y-1 .text-sm .flex .gap-1 span:not(.fas) {
        font-size: 0.7rem !important;
    }
}

/* Header buttons container styling */
.header-buttons-container {
    display: flex;
    gap: 8px;
    width: 100%;
}

@media (max-width: 640px) {
    .header-buttons-container {
        gap: 4px;
    }
    
    .header-buttons-container button {
        flex: 1;
        min-width: 0; /* Allow buttons to shrink */
        white-space: nowrap;
    }
}

/* Billing Cycle Modal */
.billing-cycle-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.billing-cycle-modal .modal-content {
    position: relative;
    background: #1a1a2e;
    border-radius: 8px;
    width: 90%;
    max-width: 500px;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
    border: 1px solid #333;
    z-index: 1001;
}

.billing-cycle-modal .modal-header {
    padding: 12px 16px;
    border-bottom: 1px solid #333;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.billing-cycle-modal .modal-header h3 {
    margin: 0;
    color: #e961ab;
    font-size: 1.1rem;
}

.billing-cycle-modal .close-btn {
    background: none;
    border: none;
    color: #888;
    font-size: 1rem;
    cursor: pointer;
    padding: 4px;
    border-radius: 50%;
    transition: all 0.3s;
}

.billing-cycle-modal .close-btn:hover {
    color: #fff;
    background: #333;
}

.billing-cycle-modal .modal-body {
    padding: 16px;
}

.billing-cycle-modal .billing-cycle-info {
    background: #16213e;
    padding: 10px;
    border-radius: 6px;
    margin-bottom: 12px;
    border-left: 3px solid #e961ab;
    font-size: 0.9rem;
}

.billing-cycle-modal .billing-cycle-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.billing-cycle-modal .cycle-option {
    border: 2px solid #333;
    border-radius: 6px;
    padding: 10px;
    cursor: pointer;
    transition: all 0.3s;
    display: block;
    font-size: 0.9rem;
}

.billing-cycle-modal .cycle-option:hover {
    border-color: #e961ab;
    background: #16213e;
}

.billing-cycle-modal .cycle-option input[type="radio"] {
    display: none;
}

.billing-cycle-modal .cycle-option input[type="radio"]:checked + .option-content {
    color: #e961ab;
}

.billing-cycle-modal .cycle-option:has(input[type="radio"]:checked) {
    border-color: #e961ab;
    background: #16213e;
}

.billing-cycle-modal .option-content h4 {
    margin: 0 0 8px 0;
    font-size: 1.1rem;
}

.billing-cycle-modal .option-content p {
    margin: 0 0 10px 0;
    color: #bbb;
    font-size: 0.9rem;
}

.billing-cycle-modal .start-day-input {
    margin-top: 12px;
}

.billing-cycle-modal .start-day-input label {
    display: block;
    margin-bottom: 8px;
    color: #ddd;
    font-size: 0.9rem;
}

.billing-cycle-modal .start-day-input select {
    width: 100px;
    padding: 8px 12px;
    border: 1px solid #444;
    border-radius: 6px;
    background: #0f1318;
    color: #fff;
    font-size: 0.9rem;
}

.billing-cycle-modal .start-day-input select:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.billing-cycle-modal .billing-example {
    background: #0f1318;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #333;
}

.billing-cycle-modal .billing-example h4 {
    margin: 0 0 10px 0;
    color: #e961ab;
    font-size: 1rem;
}

.billing-cycle-modal .example-item {
    margin-bottom: 8px;
    padding: 8px 12px;
    background: #16213e;
    border-radius: 6px;
    font-size: 0.9rem;
}

.billing-cycle-modal .example-note {
    color: #888;
    font-size: 0.85rem;
    font-style: italic;
    margin-top: 8px;
}

.billing-cycle-modal .modal-footer {
    padding: 20px 24px;
    border-top: 1px solid #333;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.billing-cycle-modal .modal-footer .btn {
    padding: 10px 20px;
    font-size: 0.9rem;
}

/* Light mode styles for modal */
body.light-mode .modal-content {
    background: #fff;
    border: 1px solid #ddd;
}

body.light-mode .modal-header {
    border-bottom: 1px solid #eee;
}

body.light-mode .modal-header h3 {
    color: #6b46c1;
}

body.light-mode .close-btn {
    color: #666;
}

body.light-mode .close-btn:hover {
    color: #000;
    background: #f0f0f0;
}

body.light-mode .billing-cycle-info {
    background: #f8f9ff;
    border-left: 4px solid #6b46c1;
}

body.light-mode .cycle-option {
    border: 2px solid #ddd;
}

body.light-mode .cycle-option:hover {
    border-color: #6b46c1;
    background: #f8f9ff;
}

body.light-mode .cycle-option:has(input[type="radio"]:checked) {
    border-color: #6b46c1;
    background: #f8f9ff;
}

body.light-mode .cycle-option input[type="radio"]:checked + .option-content {
    color: #6b46c1;
}

body.light-mode .start-day-input select {
    border: 1px solid #ddd;
    background: #fff;
    color: #000;
}

body.light-mode .billing-example {
    background: #f9f9f9;
    border: 1px solid #ddd;
}

body.light-mode .billing-example h4 {
    color: #6b46c1;
}

body.light-mode .example-item {
    background: #fff;
    border: 1px solid #eee;
}

body.light-mode .modal-footer {
    border-top: 1px solid #eee;
}

/* Summary Month Cards - Exact style from old design */
#summaryContainer .summary-month-card {
    background: rgba(76, 76, 95, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 6px;
    font-size: 0.75rem;
    line-height: 1.3;
    backdrop-filter: blur(8px);
    min-width: 0;
    width: 100%;
}

#summaryContainer .summary-month-card h4 {
    font-size: 0.85rem;
    margin-bottom: 4px;
    font-weight: 600;
    color: #e961ab;
    text-align: left;
}

#summaryContainer .summary-month-card .summary-stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3px;
    font-size: 0.7rem;
    white-space: nowrap;
    flex-wrap: nowrap;
    overflow: hidden;
}

#summaryContainer .summary-month-card .summary-stat span {
    flex-shrink: 0;
    white-space: nowrap;
}

#summaryContainer .summary-month-card .summary-value {
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    flex-shrink: 0;
}

#summaryContainer .summary-month-card .summary-change {
    font-size: 0.65rem;
    margin-top: 4px;
    font-weight: 500;
}

#summaryContainer .summary-month-card .summary-change.positive {
    color: #4ade80;
}

#summaryContainer .summary-month-card .summary-change.negative {
    color: #f87171;
}

#summaryContainer .summary-month-card .summary-change.neutral {
    color: #fbbf24;
}

.summary-month-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 6px;
    transition: all 0.3s ease;
}

.summary-month-card:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(233, 97, 171, 0.3);
    transform: translateY(-1px);
}

.summary-month-card h4 {
    margin: 0 0 4px 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: #e961ab;
}

.summary-stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 3px 0;
    font-size: 0.75rem;
    white-space: nowrap;
    flex-wrap: nowrap;
}

.summary-stat span:first-child {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    white-space: nowrap;
    gap: 4px;
}

.summary-stat span:last-child {
    font-size: 0.7rem;
    opacity: 0.8;
}

.summary-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 4px 0;
    font-size: 0.7rem;
    gap: 8px;
}

.summary-stat-row span {
    flex: 1;
    text-align: center;
    padding: 2px;
}

.summary-change {
    margin-top: 6px;
    padding: 3px 6px;
    border-radius: 4px;
    font-size: 0.7rem;
    text-align: center;
    font-weight: 500;
}

.summary-change.positive {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.summary-change.negative {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.2);
}

.summary-change.neutral {
    background: rgba(156, 163, 175, 0.1);
    color: #9ca3af;
    border: 1px solid rgba(156, 163, 175, 0.2);
}

/* Button size adjustments - make smaller text */
.filter-btn {
    font-size: 10px !important;
    padding: 4px 8px !important;
}

#toggleDetailTable {
    font-size: 10px !important;
    padding: 4px 8px !important;
}

#billingCycleBtn {
    font-size: 10px !important;
    padding: 4px 8px !important;
}

#toggleMode {
    font-size: 10px !important;
    padding: 4px 8px !important;
}

/* Summary stats labels - make them smaller */
.summary-label {
    font-size: 0.75rem !important; /* 12px thay vì 14px */
}

/* Summary values (numbers) - make them same size as labels */
.summary-value {
    font-size: 0.75rem !important; /* 12px thay vì 14px */
    font-weight: 600; /* Giữ bold để nổi bật */
}

/* Summary units (VND, kWh) - make them smaller too */
.summary-unit {
    font-size: 0.75rem !important; /* 12px thay vì 14px */
    opacity: 0.8; /* Làm mờ 1 chút để tạo hierarchy */
}

/* Target the exact spans containing the labels */
.space-y-1 .flex.items-center.justify-between.text-sm .flex.items-center.gap-1 span:last-child {
    font-size: 0.75rem !important;
}

/* Alternative targeting - more specific */
.space-y-1 .text-sm .flex .gap-1 span:not(.fas) {
    font-size: 0.75rem !important;
}

/* Mobile optimization for summary labels */
@media (max-width: 640px) {
    .summary-stats-label {
        font-size: 0.65rem !important; /* 10.4px */
    }
    
    .space-y-1 .flex .text-sm span {
        font-size: 0.65rem !important;
    }
    
    .space-y-1 .flex .text-sm .flex span {
        font-size: 0.65rem !important;
    }
}

/* Summary stats inline layout for monthly cards */
.summary-stat-inline {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    margin-bottom: 2px;
    white-space: nowrap;
    flex-wrap: nowrap;
}

.summary-stat-inline i {
    width: 12px;
    font-size: 0.7rem;
    flex-shrink: 0;
}

.summary-stat-inline span {
    font-size: 0.75rem;
    white-space: nowrap;
    flex-shrink: 0;
}

.summary-stat-inline strong {
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Min/Max values with icons and colors */
.min-value {
    display: flex;
    align-items: center;
    gap: 3px;
}

.max-value {
    display: flex;
    align-items: center;
    gap: 3px;
}

.min-value i,
.max-value i {
    font-size: 0.6rem;
    margin-left: 2px; /* Khoảng cách nhỏ giữa text "Min:" và icon */
    margin-right: 1px; /* Khoảng cách nhỏ giữa icon và số */
}

/* Mobile optimization for summary inline */
@media (max-width: 640px) {
    .summary-stat-inline {
        font-size: 0.7rem !important;
        gap: 3px;
        white-space: nowrap;
        flex-wrap: nowrap;
        overflow: hidden;
    }
    
    .summary-stat-inline span {
        font-size: 0.7rem !important;
        white-space: nowrap;
        flex-shrink: 0;
    }
    
    .summary-stat-inline strong {
        font-size: 0.7rem !important;
        white-space: nowrap;
        flex-shrink: 0;
    }
    
    .summary-stat-inline i {
        font-size: 0.55rem !important;
        flex-shrink: 0;
    }
    
    .min-value i,
    .max-value i {
        font-size: 0.55rem !important;
    }
    
    .space-y-1 .flex.items-center.justify-between.text-sm .flex.items-center.gap-1 span:last-child {
        font-size: 0.7rem !important; /* 11.2px on mobile */
    }
    
    .space-y-1 .text-sm .flex .gap-1 span:not(.fas) {
        font-size: 0.7rem !important;
    }
}

/* Force inline display for all text elements in summary cards - prevent wrapping */
#summaryContainer .summary-month-card * {
    white-space: nowrap !important;
}

#summaryContainer .summary-month-card .summary-stat-inline {
    display: flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    flex-wrap: nowrap !important;
    overflow: visible !important;
    min-width: max-content !important;
}

#summaryContainer .summary-month-card .summary-stat-inline span,
#summaryContainer .summary-month-card .summary-stat-inline strong {
    display: inline !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

/* Make sure container has enough space */
#summaryContainer {
    gap: 4px;
    overflow: visible;
}

/* Ensure grid cells don't constrain content */
@media (max-width: 768px) {
    #summaryContainer .summary-month-card {
        min-width: max-content;
        width: auto;
        overflow: visible;
    }
    
    #summaryContainer .summary-month-card .summary-stat-inline {
        min-width: max-content;
        width: auto;
        font-size: 0.65rem !important;
        gap: 2px;
    }
    
    #summaryContainer .summary-month-card .summary-stat-inline span,
    #summaryContainer .summary-month-card .summary-stat-inline strong {
        font-size: 0.65rem !important;
    }
}

/* Statistics Section */
#tableStats {
    position: sticky;
    top: 0;
    z-index: 10;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 12px;
}

#tableStats .grid {
    gap: 12px;
}

#tableStats .bg-blue-900,
#tableStats .bg-green-900,
#tableStats .bg-red-900 {
    transition: all 0.3s ease;
}

#tableStats .bg-blue-900:hover,
#tableStats .bg-green-900:hover,
#tableStats .bg-red-900:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Highlight styling for max/min values */
.highlight-max {
    color: #10b981;
    font-weight: bold;
    text-shadow: 0 0 8px rgba(16, 185, 129, 0.5);
}

.highlight-min {
    color: #ef4444;
    font-weight: bold;
    text-shadow: 0 0 8px rgba(239, 68, 68, 0.5);
}

/* Responsive design for statistics */
@media (max-width: 768px) {
    #tableStats .grid {
        grid-template-columns: 1fr 1fr 1fr; /* 3 cột ngang trên mobile */
        gap: 4px; /* Giảm khoảng cách */
    }
    
    #tableStats {
        font-size: 0.65rem; /* Font nhỏ hơn */
        padding: 6px; /* Padding nhỏ hơn */
    }
    
    #tableStats h4 {
        font-size: 0.7rem; /* Header nhỏ hơn */
        margin-bottom: 4px; /* Margin nhỏ hơn */
    }
    
    #tableStats .space-y-1 > div {
        margin-bottom: 1px; /* Khoảng cách giữa các dòng nhỏ hơn */
    }
    
    /* Padding cho các card stats trên mobile */
    #tableStats .bg-blue-900,
    #tableStats .bg-green-900,
    #tableStats .bg-red-900 {
        padding: 8px; /* Padding nhỏ hơn cho mobile */
    }
    
    /* Icon nhỏ hơn trên mobile */
    #tableStats h4 i {
        font-size: 0.6rem;
        margin-right: 4px;
    }
    
    /* Text overflow và wrap cho mobile */
    #tableStats .space-y-1 > div {
        overflow-wrap: break-word;
        word-break: break-all;
    }
}

/* Responsive design for very small screens (small mobile) */
@media (max-width: 480px) {
    #tableStats .grid {
        grid-template-columns: 1fr 1fr 1fr; /* Vẫn giữ 3 cột */
        gap: 2px; /* Giảm gap còn 2px */
    }
    
    #tableStats {
        font-size: 0.6rem; /* Font còn nhỏ hơn */
        padding: 4px; /* Padding còn nhỏ hơn */
    }
    
    #tableStats h4 {
        font-size: 0.65rem; /* Header còn nhỏ hơn */
        margin-bottom: 2px; /* Margin rất nhỏ */
    }
    
    #tableStats .bg-blue-900,
    #tableStats .bg-green-900,
    #tableStats .bg-red-900 {
        padding: 6px; /* Padding rất nhỏ */
    }
    
    #tableStats h4 i {
        font-size: 0.55rem; /* Icon rất nhỏ */
        margin-right: 2px;
    }
    
    /* Giấu một số text dài trên mobile nhỏ */
    #tableStats .space-y-1 > div strong {
        font-size: 0.55rem;
    }
}

/* Detail Modal Styles */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-overlay.show {
    display: flex;
}

.modal-content {
    background: #1a1a2e;
    border-radius: 12px;
    width: 90%;
    max-width: 900px;
    max-height: 90vh;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    border: 1px solid #333;
    display: flex;
    flex-direction: column;
}

.modal-header {
    padding: 16px 20px;
    border-bottom: 1px solid #333;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #1a1a2e;
    flex-shrink: 0;
}

.modal-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #e961ab;
    margin: 0;
}

.modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #999;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s;
}

.modal-close:hover {
    color: #e961ab;
    background: rgba(233, 97, 171, 0.1);
}

/* Modal table container with proper scrolling */
.modal-content .overflow-x-auto {
    flex: 1;
    overflow-y: auto;
    overflow-x: auto;
    padding: 0 20px 20px 20px;
}

/* Table styling */
.modal-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    background: transparent;
}

.modal-table thead {
    position: sticky;
    top: 0;
    z-index: 10;
    background: #1a1a2e;
}

.modal-table thead th {
    background: #1a1a2e;
    color: #e961ab;
    font-weight: 600;
    padding: 12px 8px;
    text-align: left;
    border-bottom: 2px solid #e961ab;
    white-space: nowrap;
}

.modal-table tbody tr {
    border-bottom: 1px solid #333;
    transition: background-color 0.2s;
}

.modal-table tbody tr:hover {
    background: rgba(233, 97, 171, 0.05);
}

.modal-table tbody td {
    padding: 10px 8px;
    color: #e0e0e0;
    vertical-align: middle;
}

.modal-table tbody td:first-child {
    font-weight: 500;
    color: #fff;
}

.modal-table tbody td:nth-child(2) {
    color: #3b82f6;
    font-weight: 500;
}

.modal-table tbody td:nth-child(3) {
    color: #10b981;
    font-weight: 500;
}

.modal-table tbody td:nth-child(4) {
    color: #f59e0b;
    font-weight: 500;
}

/* Statistics styling stays the same */
#tableStats {
    position: sticky;
    top: 0;
    z-index: 10;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 12px;
    flex-shrink: 0;
}

/* Responsive design for modal */
@media (max-width: 768px) {
    .modal-content {
        width: 95%;
        max-height: 95vh;
    }
    
    .modal-header {
        padding: 12px 16px;
    }
    
    .modal-title {
        font-size: 1.1rem;
    }
    
    .modal-content .overflow-x-auto {
        padding: 0 16px 16px 16px;
    }
    
    .modal-table {
        font-size: 0.75rem;
    }
    
    .modal-table thead th,
    .modal-table tbody td {
        padding: 8px 4px;
    }
    
    #tableStats {
        font-size: 0.75rem;
        padding: 8px;
    }
}

/* Theme Selector Styling */
.theme-selector {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.theme-selector:hover {
    border-color: #e961ab;
    box-shadow: 0 0 15px rgba(233, 97, 171, 0.3);
}

.theme-selector option {
    background: #1a1a2e;
    color: #e0e0e0;
    padding: 8px;
}

/* =================================
   2025 TRENDY THEMES SYSTEM
   ================================= */

/* Theme: Cyberpunk 2025 */
[data-theme="cyberpunk"] {
    background: linear-gradient(135deg, #0a0a0a 0%, #1a0a2e 50%, #2d1b4e 100%);
    color: #00ff9f;
}

[data-theme="cyberpunk"] .card {
    background: rgba(0, 255, 159, 0.1);
    border: 1px solid #00ff9f;
    box-shadow: 0 0 20px rgba(0, 255, 159, 0.3);
}

[data-theme="cyberpunk"] .btn {
    background: linear-gradient(135deg, #ff0080, #00ff9f);
    color: #000;
}

/* Theme: Neon Dreams */
[data-theme="neon-dreams"] {
    background: linear-gradient(135deg, #0f0f23 0%, #2d1b69 50%, #1a0433 100%);
    color: #ffffff;
}

[data-theme="neon-dreams"] .card {
    background: rgba(255, 20, 147, 0.1);
    border: 1px solid #ff1493;
    box-shadow: 0 0 25px rgba(255, 20, 147, 0.4);
}

[data-theme="neon-dreams"] .btn {
    background: linear-gradient(135deg, #ff1493, #00bfff);
    color: #000;
}

/* Theme: Aurora Borealis */
[data-theme="aurora-borealis"] {
    background: linear-gradient(135deg, #001122 0%, #003366 25%, #004080 50%, #0066cc 75%, #1a8cff 100%);
    color: #ffffff;
}

[data-theme="aurora-borealis"] .card {
    background: rgba(26, 140, 255, 0.15);
    border: 1px solid #1a8cff;
    box-shadow: 0 0 30px rgba(26, 140, 255, 0.3);
}

[data-theme="aurora-borealis"] .btn {
    background: linear-gradient(135deg, #1a8cff, #66ff66);
    color: #000;
}

/* Theme: Synthwave */
[data-theme="synthwave"] {
    background: linear-gradient(135deg, #1a0033 0%, #330066 50%, #660099 100%);
    color: #ff00ff;
}

[data-theme="synthwave"] .card {
    background: rgba(255, 0, 255, 0.1);
    border: 1px solid #ff00ff;
    box-shadow: 0 0 20px rgba(255, 0, 255, 0.4);
}

[data-theme="synthwave"] .btn {
    background: linear-gradient(135deg, #ff00ff, #00ffff);
    color: #000;
}

/* Theme: Glassmorphism */
[data-theme="glassmorphism"] {
    background: linear-gradient(135deg, #ffffff 0%, #f0f8ff 100%);
    color: #333333;
}

[data-theme="glassmorphism"] .card {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(20px);
    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);
}

[data-theme="glassmorphism"] .btn {
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(10px);
    color: #333;
}

/* Theme: Neubrutalism */
[data-theme="neubrutalism"] {
    background: #ffffff;
    color: #000000;
}

[data-theme="neubrutalism"] .card {
    background: #ffff00;
    border: 4px solid #000000;
    box-shadow: 8px 8px 0px #000000;
    border-radius: 0;
}

[data-theme="neubrutalism"] .btn {
    background: #ff0000;
    border: 3px solid #000000;
    box-shadow: 4px 4px 0px #000000;
    color: #000;
    border-radius: 0;
    font-weight: 900;
}

/* Theme: Matrix Rain */
[data-theme="matrix-rain"] {
    background: linear-gradient(135deg, #000000 0%, #001100 50%, #002200 100%);
    color: #00ff00;
}

[data-theme="matrix-rain"] .card {
    background: rgba(0, 255, 0, 0.1);
    border: 1px solid #00ff00;
    box-shadow: 0 0 15px rgba(0, 255, 0, 0.3);
}

[data-theme="matrix-rain"] .btn {
    background: linear-gradient(135deg, #00ff00, #004400);
    color: #000;
}

/* Theme: Sunset Vibes */
[data-theme="sunset-vibes"] {
    background: linear-gradient(135deg, #ff6b35 0%, #f7931e 25%, #ffcd3c 50%, #c13584 75%, #833ab4 100%);
    color: #ffffff;
}

[data-theme="sunset-vibes"] .card {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 0 25px rgba(255, 107, 53, 0.3);
}

[data-theme="sunset-vibes"] .btn {
    background: linear-gradient(135deg, #ff6b35, #ffcd3c);
    color: #000;
}

/* Theme: Ocean Depth */
[data-theme="ocean-depth"] {
    background: linear-gradient(135deg, #001122 0%, #002244 25%, #003366 50%, #004488 75%, #0055aa 100%);
    color: #87ceeb;
}

[data-theme="ocean-depth"] .card {
    background: rgba(135, 206, 235, 0.1);
    border: 1px solid #87ceeb;
    box-shadow: 0 0 20px rgba(135, 206, 235, 0.2);
}

[data-theme="ocean-depth"] .btn {
    background: linear-gradient(135deg, #87ceeb, #4682b4);
    color: #000;
}

/* Theme: Midnight Purple */
[data-theme="midnight-purple"] {
    background: linear-gradient(135deg, #1a0033 0%, #2d004d 50%, #4d0080 100%);
    color: #dda0dd;
}

[data-theme="midnight-purple"] .card {
    background: rgba(221, 160, 221, 0.1);
    border: 1px solid #dda0dd;
    box-shadow: 0 0 20px rgba(221, 160, 221, 0.3);
}

[data-theme="midnight-purple"] .btn {
    background: linear-gradient(135deg, #dda0dd, #9370db);
    color: #000;
}

/* Theme: Golden Hour */
[data-theme="golden-hour"] {
    background: linear-gradient(135deg, #ffd700 0%, #ffb347 25%, #ff8c00 50%, #ff6347 75%, #dc143c 100%);
    color: #8b4513;
}

[data-theme="golden-hour"] .card {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(139, 69, 19, 0.3);
    box-shadow: 0 0 25px rgba(255, 215, 0, 0.3);
}

[data-theme="golden-hour"] .btn {
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    color: #8b4513;
}

/* Theme: Forest Mist */
[data-theme="forest-mist"] {
    background: linear-gradient(135deg, #2f4f4f 0%, #556b2f 25%, #6b8e23 50%, #9acd32 75%, #adff2f 100%);
    color: #f0fff0;
}

[data-theme="forest-mist"] .card {
    background: rgba(240, 255, 240, 0.1);
    border: 1px solid #f0fff0;
    box-shadow: 0 0 20px rgba(154, 205, 50, 0.2);
}

[data-theme="forest-mist"] .btn {
    background: linear-gradient(135deg, #9acd32, #6b8e23);
    color: #000;
}

/* Theme: Cosmic Dust */
[data-theme="cosmic-dust"] {
    background: linear-gradient(135deg, #191970 0%, #483d8b 25%, #6a5acd 50%, #9370db 75%, #ba55d3 100%);
    color: #e6e6fa;
}

[data-theme="cosmic-dust"] .card {
    background: rgba(230, 230, 250, 0.1);
    border: 1px solid #e6e6fa;
    box-shadow: 0 0 25px rgba(186, 85, 211, 0.3);
}

[data-theme="cosmic-dust"] .btn {
    background: linear-gradient(135deg, #ba55d3, #9370db);
    color: #000;
}

/* Theme: Tokyo Night */
[data-theme="tokyo-night"] {
    background: linear-gradient(135deg, #1a1b26 0%, #24283b 50%, #414868 100%);
    color: #a9b1d6;
}

[data-theme="tokyo-night"] .card {
    background: rgba(169, 177, 214, 0.1);
    border: 1px solid #7aa2f7;
    box-shadow: 0 0 20px rgba(122, 162, 247, 0.2);
}

[data-theme="tokyo-night"] .btn {
    background: linear-gradient(135deg, #7aa2f7, #bb9af7);
    color: #1a1b26;
}

/* Theme: Minimal Light */
[data-theme="minimal-light"] {
    background: linear-gradient(135deg, #fafafa 0%, #f5f5f5 100%);
    color: #333333;
}

[data-theme="minimal-light"] .card {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid #e0e0e0;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

[data-theme="minimal-light"] .btn {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #ffffff;
}

/* Default Dark Gradient Theme */
[data-theme="dark-gradient"] {
    background: linear-gradient(135deg, #1a1a2e 0%, #2d2d44 100%);
    color: #e0e0e0;
}

[data-theme="dark-gradient"] .card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}

[data-theme="dark-gradient"] .btn {
    background: linear-gradient(135deg, #e961ab, #6b46c1);
    color: #ffffff;
}

/* Enhanced theme transitions and animations */
* {
    transition: background-color 0.6s ease, color 0.6s ease, border-color 0.6s ease !important;
}

/* Smooth transitions for all elements */
.card, .btn, select, input, table, th, td {
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Theme-specific hover effects */
[data-theme="cyberpunk"] .card:hover {
    box-shadow: 0 0 30px rgba(0, 255, 159, 0.5);
    transform: translateY(-2px);
}

[data-theme="neon-dreams"] .card:hover {
    box-shadow: 0 0 35px rgba(255, 20, 147, 0.6);
    transform: translateY(-2px);
}

[data-theme="neubrutalism"] .card:hover {
    box-shadow: 12px 12px 0px #000000;
    transform: translate(-4px, -4px);
}

[data-theme="glassmorphism"] .card:hover {
    backdrop-filter: blur(25px);
    box-shadow: 0 12px 40px rgba(31, 38, 135, 0.5);
}

/* Special theme effects */

/* Matrix Rain Effect */
[data-theme="matrix-rain"]::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
    background: 
        linear-gradient(90deg, transparent 98%, rgba(0, 255, 0, 0.03) 100%),
        linear-gradient(transparent 98%, rgba(0, 255, 0, 0.03) 100%);
    background-size: 3px 3px;
    animation: matrix-scroll 20s linear infinite;
}

@keyframes matrix-scroll {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(100%); }
}

/* Cyberpunk Glitch Effect */
[data-theme="cyberpunk"] h1::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    color: #00ff9f;
    animation: cyberpunk-glitch 3s infinite;
    z-index: -1;
}

@keyframes cyberpunk-glitch {
    0%, 90%, 100% {
        transform: translate(0);
        opacity: 0;
    }
    95% {
        transform: translate(2px, 0);
        opacity: 1;
    }
    97% {
        transform: translate(-2px, 0);
        opacity: 1;
    }
}

/* Neon Dreams Pulse */
[data-theme="neon-dreams"] .card {
    animation: neon-pulse 2s ease-in-out infinite alternate;
}

@keyframes neon-pulse {
    from {
        box-shadow: 0 0 20px rgba(255, 20, 147, 0.3);
    }
    to {
        box-shadow: 0 0 30px rgba(255, 20, 147, 0.6);
    }
}

/* Aurora Borealis Wave */
[data-theme="aurora-borealis"] {
    background-attachment: fixed;
    animation: aurora-wave 15s ease-in-out infinite;
}

@keyframes aurora-wave {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

/* Synthwave Grid */
[data-theme="synthwave"]::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
    background-image: 
        linear-gradient(rgba(255, 0, 255, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 0, 255, 0.1) 1px, transparent 1px);
    background-size: 50px 50px;
    animation: synthwave-grid 10s linear infinite;
}

@keyframes synthwave-grid {
    0% { transform: translateY(0); }
    100% { transform: translateY(50px); }
}

/* Tokyo Night Breathing */
[data-theme="tokyo-night"] .card {
    animation: tokyo-breathe 4s ease-in-out infinite;
}

@keyframes tokyo-breathe {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.02);
        opacity: 0.95;
    }
}

/* Disable animations on mobile for performance */
@media (max-width: 768px) {
    [data-theme="matrix-rain"]::before,
    [data-theme="synthwave"]::after {
        animation: none;
    }
    
    [data-theme="neon-dreams"] .card,
    [data-theme="tokyo-night"] .card {
        animation: none;
    }
    
    [data-theme="aurora-borealis"] {
        animation: none;
    }
}

/* =================================
   THEME STYLING FOR FORM ELEMENTS
   ================================= */

/* Theme styling for select and input elements */
[data-theme] select,
[data-theme] input[type="date"] {
    transition: all 0.3s ease;
}

/* Dark Gradient Theme Form Elements */
[data-theme="dark-gradient"] select,
[data-theme="dark-gradient"] input[type="date"] {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #e0e0e0;
}

/* Cyberpunk Theme Form Elements */
[data-theme="cyberpunk"] select,
[data-theme="cyberpunk"] input[type="date"] {
    background: linear-gradient(135deg, #0a0a0a 0%, #1a0a2e 100%);
    border: 1px solid #00ff9f;
    color: #00ff9f;
    box-shadow: 0 0 10px rgba(0, 255, 159, 0.3);
}

[data-theme="cyberpunk"] select:focus,
[data-theme="cyberpunk"] input[type="date"]:focus {
    box-shadow: 0 0 20px rgba(0, 255, 159, 0.5);
    border-color: #00ff9f;
}

/* Neon Dreams Theme Form Elements */
[data-theme="neon-dreams"] select,
[data-theme="neon-dreams"] input[type="date"] {
    background: linear-gradient(135deg, #0f0f23 0%, #2d1b69 100%);
    border: 1px solid #ff1493;
    color: #ffffff;
    box-shadow: 0 0 15px rgba(255, 20, 147, 0.4);
}

/* Aurora Borealis Theme Form Elements */
[data-theme="aurora-borealis"] select,
[data-theme="aurora-borealis"] input[type="date"] {
    background: linear-gradient(135deg, #001122 0%, #003366 100%);
    border: 1px solid #1a8cff;
    color: #ffffff;
    box-shadow: 0 0 15px rgba(26, 140, 255, 0.3);
}

/* Synthwave Theme Form Elements */
[data-theme="synthwave"] select,
[data-theme="synthwave"] input[type="date"] {
    background: linear-gradient(135deg, #1a0033 0%, #330066 100%);
    border: 1px solid #ff00ff;
    color: #ff00ff;
    box-shadow: 0 0 15px rgba(255, 0, 255, 0.4);
}

/* Glassmorphism Theme Form Elements */
[data-theme="glassmorphism"] select,
[data-theme="glassmorphism"] input[type="date"] {
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(10px);
    color: #333333;
    box-shadow: 0 4px 16px rgba(31, 38, 135, 0.37);
}

/* Neubrutalism Theme Form Elements */
[data-theme="neubrutalism"] select,
[data-theme="neubrutalism"] input[type="date"] {
    background: #ffffff;
    border: 3px solid #000000;
    color: #000000;
    box-shadow: 4px 4px 0px #000000;
    border-radius: 0;
    font-weight: bold;
}

/* Matrix Rain Theme Form Elements */
[data-theme="matrix-rain"] select,
[data-theme="matrix-rain"] input[type="date"] {
    background: linear-gradient(135deg, #000000 0%, #001100 100%);
    border: 1px solid #00ff00;
    color: #00ff00;
    box-shadow: 0 0 10px rgba(0, 255, 0, 0.3);
}

/* Sunset Vibes Theme Form Elements */
[data-theme="sunset-vibes"] select,
[data-theme="sunset-vibes"] input[type="date"] {
    background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #ffffff;
    box-shadow: 0 0 15px rgba(255, 107, 53, 0.3);
}

/* Ocean Depth Theme Form Elements */
[data-theme="ocean-depth"] select,
[data-theme="ocean-depth"] input[type="date"] {
    background: linear-gradient(135deg, #001122 0%, #002244 100%);
    border: 1px solid #87ceeb;
    color: #87ceeb;
    box-shadow: 0 0 10px rgba(135, 206, 235, 0.2);
}

/* Midnight Purple Theme Form Elements */
[data-theme="midnight-purple"] select,
[data-theme="midnight-purple"] input[type="date"] {
    background: linear-gradient(135deg, #1a0033 0%, #2d004d 100%);
    border: 1px solid #dda0dd;
    color: #dda0dd;
    box-shadow: 0 0 15px rgba(221, 160, 221, 0.3);
}

/* Golden Hour Theme Form Elements */
[data-theme="golden-hour"] select,
[data-theme="golden-hour"] input[type="date"] {
    background: linear-gradient(135deg, #ffd700 0%, #ffb347 100%);
    border: 1px solid rgba(139, 69, 19, 0.5);
    color: #8b4513;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.3);
}

/* Forest Mist Theme Form Elements */
[data-theme="forest-mist"] select,
[data-theme="forest-mist"] input[type="date"] {
    background: linear-gradient(135deg, #2f4f4f 0%, #556b2f 100%);
    border: 1px solid #f0fff0;
    color: #f0fff0;
    box-shadow: 0 0 10px rgba(154, 205, 50, 0.2);
}

/* Cosmic Dust Theme Form Elements */
[data-theme="cosmic-dust"] select,
[data-theme="cosmic-dust"] input[type="date"] {
    background: linear-gradient(135deg, #191970 0%, #483d8b 100%);
    border: 1px solid #e6e6fa;
    color: #e6e6fa;
    box-shadow: 0 0 15px rgba(186, 85, 211, 0.3);
}

/* Tokyo Night Theme Form Elements */
[data-theme="tokyo-night"] select,
[data-theme="tokyo-night"] input[type="date"] {
    background: linear-gradient(135deg, #1a1b26 0%, #24283b 100%);
    border: 1px solid #7aa2f7;
    color: #a9b1d6;
    box-shadow: 0 0 10px rgba(122, 162, 247, 0.2);
}

/* Minimal Light Theme Form Elements */
[data-theme="minimal-light"] select,
[data-theme="minimal-light"] input[type="date"] {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #e0e0e0;
    color: #333333;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Hover and focus effects for all themes */
[data-theme] select:hover,
[data-theme] input[type="date"]:hover {
    transform: translateY(-1px);
}

[data-theme] select:focus,
[data-theme] input[type="date"]:focus {
    outline: none;
    transform: translateY(-1px);
}

/* Option styling for select elements */
[data-theme] select option {
    background: inherit;
    color: inherit;
}

/* Special styling for theme selector */
[data-theme] .theme-selector {
    font-weight: 500;
    letter-spacing: 0.5px;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    [data-theme] select,
    [data-theme] input[type="date"] {
        font-size: 0.75rem;
        padding: 4px 8px;
    }
}

/* =================================
   ENHANCED FORM ELEMENTS THEMING
   ================================= */

/* Ensure text is always visible in all form elements */
select, input[type="date"], .theme-selector {
    color: #e0e0e0 !important;
    background: #1a1a2e !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

select option {
    background: #1a1a2e !important;
    color: #e0e0e0 !important;
    padding: 8px !important;
}

/* Theme-specific form element styling */
[data-theme="cyberpunk"] select,
[data-theme="cyberpunk"] input[type="date"],
[data-theme="cyberpunk"] .theme-selector {
    background: linear-gradient(135deg, #0a0a0a 0%, #1a0a2e 100%) !important;
    border: 1px solid #00ff9f !important;
    color: #00ff9f !important;
    box-shadow: 0 0 10px rgba(0, 255, 159, 0.3) !important;
}

[data-theme="neon-dreams"] select,
[data-theme="neon-dreams"] input[type="date"],
[data-theme="neon-dreams"] .theme-selector {
    background: linear-gradient(135deg, #0f0f23 0%, #2d1b69 100%) !important;
    border: 1px solid #ff1493 !important;
    color: #ffffff !important;
    box-shadow: 0 0 15px rgba(255, 20, 147, 0.4) !important;
}

[data-theme="aurora-borealis"] select,
[data-theme="aurora-borealis"] input[type="date"],
[data-theme="aurora-borealis"] .theme-selector {
    background: linear-gradient(135deg, #001122 0%, #003366 100%) !important;
    border: 1px solid #1a8cff !important;
    color: #ffffff !important;
    box-shadow: 0 0 15px rgba(26, 140, 255, 0.3) !important;
}

[data-theme="synthwave"] select,
[data-theme="synthwave"] input[type="date"],
[data-theme="synthwave"] .theme-selector {
    background: linear-gradient(135deg, #1a0033 0%, #330066 100%) !important;
    border: 1px solid #ff00ff !important;
    color: #ff00ff !important;
    box-shadow: 0 0 15px rgba(255, 0, 255, 0.4) !important;
}

[data-theme="glassmorphism"] select,
[data-theme="glassmorphism"] input[type="date"],
[data-theme="glassmorphism"] .theme-selector {
    background: rgba(255, 255, 255, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    backdrop-filter: blur(10px) !important;
    color: #333333 !important;
    box-shadow: 0 4px 16px rgba(31, 38, 135, 0.37) !important;
}

[data-theme="neubrutalism"] select,
[data-theme="neubrutalism"] input[type="date"],
[data-theme="neubrutalism"] .theme-selector {
    background: #ffffff !important;
    border: 3px solid #000000 !important;
    color: #000000 !important;
    box-shadow: 4px 4px 0px #000000 !important;
    border-radius: 0 !important;
    font-weight: bold !important;
}

[data-theme="matrix-rain"] select,
[data-theme="matrix-rain"] input[type="date"],
[data-theme="matrix-rain"] .theme-selector {
    background: linear-gradient(135deg, #000000 0%, #001100 100%) !important;
    border: 1px solid #00ff00 !important;
    color: #00ff00 !important;
    box-shadow: 0 0 10px rgba(0, 255, 0, 0.3) !important;
}

[data-theme="sunset-vibes"] select,
[data-theme="sunset-vibes"] input[type="date"],
[data-theme="sunset-vibes"] .theme-selector {
    background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
    box-shadow: 0 0 15px rgba(255, 107, 53, 0.3) !important;
}

[data-theme="ocean-depth"] select,
[data-theme="ocean-depth"] input[type="date"],
[data-theme="ocean-depth"] .theme-selector {
    background: linear-gradient(135deg, #001122 0%, #002244 100%) !important;
    border: 1px solid #87ceeb !important;
    color: #87ceeb !important;
    box-shadow: 0 0 10px rgba(135, 206, 235, 0.2) !important;
}

[data-theme="midnight-purple"] select,
[data-theme="midnight-purple"] input[type="date"],
[data-theme="midnight-purple"] .theme-selector {
    background: linear-gradient(135deg, #1a0033 0%, #2d004d 100%) !important;
    border: 1px solid #dda0dd !important;
    color: #dda0dd !important;
    box-shadow: 0 0 15px rgba(221, 160, 221, 0.3) !important;
}

[data-theme="golden-hour"] select,
[data-theme="golden-hour"] input[type="date"],
[data-theme="golden-hour"] .theme-selector {
    background: linear-gradient(135deg, #ffd700 0%, #ffb347 100%) !important;
    border: 1px solid rgba(139, 69, 19, 0.5) !important;
    color: #8b4513 !important;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.3) !important;
}

/* Option elements theming */
[data-theme="cyberpunk"] select option {
    background: #0a0a0a !important;
    color: #00ff9f !important;
}

[data-theme="neon-dreams"] select option {
    background: #0f0f23 !important;
    color: #ffffff !important;
}

[data-theme="aurora-borealis"] select option {
    background: #001122 !important;
    color: #ffffff !important;
}

[data-theme="synthwave"] select option {
    background: #1a0033 !important;
    color: #ff00ff !important;
}

[data-theme="glassmorphism"] select option {
    background: rgba(255, 255, 255, 0.9) !important;
    color: #333333 !important;
}

[data-theme="neubrutalism"] select option {
    background: #ffffff !important;
    color: #000000 !important;
}

[data-theme="matrix-rain"] select option {
    background: #000000 !important;
    color: #00ff00 !important;
}

[data-theme="sunset-vibes"] select option {
    background: #ff6b35 !important;
    color: #ffffff !important;
}

[data-theme="ocean-depth"] select option {
    background: #001122 !important;
    color: #87ceeb !important;
}

[data-theme="midnight-purple"] select option {
    background: #1a0033 !important;
    color: #dda0dd !important;
}

[data-theme="golden-hour"] select option {
    background: #ffd700 !important;
    color: #8b4513 !important;
}

[data-theme="forest-mist"] select option {
    background: #2f4f4f !important;
    color: #f0fff0 !important;
}

[data-theme="cosmic-dust"] select option {
    background: #191970 !important;
    color: #e6e6fa !important;
}

[data-theme="tokyo-night"] select option {
    background: #1a1b26 !important;
    color: #a9b1d6 !important;
}

[data-theme="minimal-light"] select option {
    background: #ffffff !important;
    color: #333333 !important;
}

/* =================================
   BILLING CYCLE MODAL THEMING
   ================================= */

/* Theme-aware billing cycle modal */
[data-theme] .billing-cycle-modal .modal-content {
    transition: all 0.3s ease;
}

/* Dark Gradient Theme Modal */
[data-theme="dark-gradient"] .billing-cycle-modal .modal-content {
    background: #1a1a2e;
    border: 1px solid #333;
}

/* Cyberpunk Theme Modal */
[data-theme="cyberpunk"] .billing-cycle-modal .modal-content {
    background: linear-gradient(135deg, #0a0a0a 0%, #1a0a2e 100%);
    border: 1px solid #00ff9f;
    box-shadow: 0 15px 40px rgba(0, 255, 159, 0.4);
}

[data-theme="cyberpunk"] .billing-cycle-modal .modal-header h3 {
    color: #00ff9f;
}

[data-theme="cyberpunk"] .billing-cycle-modal .billing-cycle-info {
    background: rgba(0, 255, 159, 0.1);
    border-left: 3px solid #00ff9f;
}

[data-theme="cyberpunk"] .billing-cycle-modal .cycle-option {
    border: 2px solid #00ff9f;
    background: rgba(0, 255, 159, 0.05);
}

[data-theme="cyberpunk"] .billing-cycle-modal .cycle-option:hover {
    border-color: #00ff9f;
    background: rgba(0, 255, 159, 0.15);
}

/* Neon Dreams Theme Modal */
[data-theme="neon-dreams"] .billing-cycle-modal .modal-content {
    background: linear-gradient(135deg, #0f0f23 0%, #2d1b69 100%);
    border: 1px solid #ff1493;
    box-shadow: 0 15px 40px rgba(255, 20, 147, 0.4);
}

[data-theme="neon-dreams"] .billing-cycle-modal .modal-header h3 {
    color: #ff1493;
}

[data-theme="neon-dreams"] .billing-cycle-modal .billing-cycle-info {
    background: rgba(255, 20, 147, 0.1);
    border-left: 3px solid #ff1493;
}

[data-theme="neon-dreams"] .billing-cycle-modal .cycle-option {
    border: 2px solid #ff1493;
    background: rgba(255, 20, 147, 0.05);
}

/* Aurora Borealis Theme Modal */
[data-theme="aurora-borealis"] .billing-cycle-modal .modal-content {
    background: linear-gradient(135deg, #001122 0%, #003366 100%);
    border: 1px solid #1a8cff;
    box-shadow: 0 15px 40px rgba(26, 140, 255, 0.4);
}

[data-theme="aurora-borealis"] .billing-cycle-modal .modal-header h3 {
    color: #1a8cff;
}

[data-theme="aurora-borealis"] .billing-cycle-modal .billing-cycle-info {
    background: rgba(26, 140, 255, 0.1);
    border-left: 3px solid #1a8cff;
}

/* Synthwave Theme Modal */
[data-theme="synthwave"] .billing-cycle-modal .modal-content {
    background: linear-gradient(135deg, #1a0033 0%, #330066 100%);
    border: 1px solid #ff00ff;
    box-shadow: 0 15px 40px rgba(255, 0, 255, 0.4);
}

[data-theme="synthwave"] .billing-cycle-modal .modal-header h3 {
    color: #ff00ff;
}

[data-theme="synthwave"] .billing-cycle-modal .billing-cycle-info {
    background: rgba(255, 0, 255, 0.1);
    border-left: 3px solid #ff00ff;
}

/* Glassmorphism Theme Modal */
[data-theme="glassmorphism"] .billing-cycle-modal .modal-content {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(20px);
    color: #333333;
}

[data-theme="glassmorphism"] .billing-cycle-modal .modal-header h3 {
    color: #6366f1;
}

[data-theme="glassmorphism"] .billing-cycle-modal .billing-cycle-info {
    background: rgba(99, 102, 241, 0.1);
    border-left: 3px solid #6366f1;
}

/* Neubrutalism Theme Modal */
[data-theme="neubrutalism"] .billing-cycle-modal .modal-content {
    background: #ffff00;
    border: 4px solid #000000;
    box-shadow: 8px 8px 0px #000000;
    border-radius: 0;
    color: #000000;
}

[data-theme="neubrutalism"] .billing-cycle-modal .modal-header h3 {
    color: #000000;
}

[data-theme="neubrutalism"] .billing-cycle-modal .billing-cycle-info {
    background: #ffffff;
    border-left: 4px solid #000000;
    color: #000000;
}

[data-theme="neubrutalism"] .billing-cycle-modal .cycle-option {
    border: 3px solid #000000;
    background: #ffffff;
    border-radius: 0;
    color: #000000;
}

/* Matrix Rain Theme Modal */
[data-theme="matrix-rain"] .billing-cycle-modal .modal-content {
    background: linear-gradient(135deg, #000000 0%, #001100 100%);
    border: 1px solid #00ff00;
    box-shadow: 0 15px 40px rgba(0, 255, 0, 0.4);
}

[data-theme="matrix-rain"] .billing-cycle-modal .modal-header h3 {
    color: #00ff00;
}

[data-theme="matrix-rain"] .billing-cycle-modal .billing-cycle-info {
    background: rgba(0, 255, 0, 0.1);
    border-left: 3px solid #00ff00;
}

/* Sunset Vibes Theme Modal */
[data-theme="sunset-vibes"] .billing-cycle-modal .modal-content {
    background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 15px 40px rgba(255, 107, 53, 0.4);
}

[data-theme="sunset-vibes"] .billing-cycle-modal .modal-header h3 {
    color: #ffffff;
}

[data-theme="sunset-vibes"] .billing-cycle-modal .billing-cycle-info {
    background: rgba(255, 255, 255, 0.1);
    border-left: 3px solid #ffffff;
}

/* Ocean Depth Theme Modal */
[data-theme="ocean-depth"] .billing-cycle-modal .modal-content {
    background: linear-gradient(135deg, #001122 0%, #002244 100%);
    border: 1px solid #87ceeb;
    box-shadow: 0 15px 40px rgba(135, 206, 235, 0.4);
}

[data-theme="ocean-depth"] .billing-cycle-modal .modal-header h3 {
    color: #87ceeb;
}

[data-theme="ocean-depth"] .billing-cycle-modal .billing-cycle-info {
    background: rgba(135, 206, 235, 0.1);
    border-left: 3px solid #87ceeb;
}

/* Midnight Purple Theme Modal */
[data-theme="midnight-purple"] .billing-cycle-modal .modal-content {
    background: linear-gradient(135deg, #1a0033 0%, #2d004d 100%);
    border: 1px solid #dda0dd;
    box-shadow: 0 15px 40px rgba(221, 160, 221, 0.4);
}

[data-theme="midnight-purple"] .billing-cycle-modal .modal-header h3 {
    color: #dda0dd;
}

[data-theme="midnight-purple"] .billing-cycle-modal .billing-cycle-info {
    background: rgba(221, 160, 221, 0.1);
    border-left: 3px solid #dda0dd;
}

/* Golden Hour Theme Modal */
[data-theme="golden-hour"] .billing-cycle-modal .modal-content {
    background: linear-gradient(135deg, #ffd700 0%, #ffb347 100%);
    border: 1px solid rgba(139, 69, 19, 0.5);
    box-shadow: 0 15px 40px rgba(255, 215, 0, 0.4);
    color: #8b4513;
}

[data-theme="golden-hour"] .billing-cycle-modal .modal-header h3 {
    color: #8b4513;
}

[data-theme="golden-hour"] .billing-cycle-modal .billing-cycle-info {
    background: rgba(139, 69, 19, 0.1);
    border-left: 3px solid #8b4513;
}

/* Forest Mist Theme Modal */
[data-theme="forest-mist"] .billing-cycle-modal .modal-content {
    background: linear-gradient(135deg, #2f4f4f 0%, #556b2f 100%);
    border: 1px solid #f0fff0;
    box-shadow: 0 15px 40px rgba(154, 205, 50, 0.4);
}

[data-theme="forest-mist"] .billing-cycle-modal .modal-header h3 {
    color: #f0fff0;
}

[data-theme="forest-mist"] .billing-cycle-modal .billing-cycle-info {
    background: rgba(240, 255, 240, 0.1);
    border-left: 3px solid #f0fff0;
}

/* Cosmic Dust Theme Modal */
[data-theme="cosmic-dust"] .billing-cycle-modal .modal-content {
    background: linear-gradient(135deg, #191970 0%, #483d8b 100%);
    border: 1px solid #e6e6fa;
    box-shadow: 0 15px 40px rgba(186, 85, 211, 0.4);
}

[data-theme="cosmic-dust"] .billing-cycle-modal .modal-header h3 {
    color: #e6e6fa;
}

[data-theme="cosmic-dust"] .billing-cycle-modal .billing-cycle-info {
    background: rgba(230, 230, 250, 0.1);
    border-left: 3px solid #e6e6fa;
}

/* Tokyo Night Theme Modal */
[data-theme="tokyo-night"] .billing-cycle-modal .modal-content {
    background: linear-gradient(135deg, #1a1b26 0%, #24283b 100%);
    border: 1px solid #7aa2f7;
    box-shadow: 0 15px 40px rgba(122, 162, 247, 0.4);
}

[data-theme="tokyo-night"] .billing-cycle-modal .modal-header h3 {
    color: #7aa2f7;
}

[data-theme="tokyo-night"] .billing-cycle-modal .billing-cycle-info {
    background: rgba(122, 162, 247, 0.1);
    border-left: 3px solid #7aa2f7;
}

/* Minimal Light Theme Modal */
[data-theme="minimal-light"] .billing-cycle-modal .modal-content {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid #e0e0e0;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
    color: #333333;
}

[data-theme="minimal-light"] .billing-cycle-modal .modal-header h3 {
    color: #6366f1;
}

[data-theme="minimal-light"] .billing-cycle-modal .billing-cycle-info {
    background: rgba(99, 102, 241, 0.1);
    border-left: 3px solid #6366f1;
}

/* Theme styling for billing cycle button */
[data-theme] #billingCycleBtn {
    transition: all 0.3s ease;
}

/* Dark Gradient Theme */
[data-theme="dark-gradient"] #billingCycleBtn {
    background: linear-gradient(135deg, #e961ab, #6b46c1) !important;
    color: #ffffff !important;
    border: none !important;
}

/* Cyberpunk Theme */
[data-theme="cyberpunk"] #billingCycleBtn {
    background: linear-gradient(135deg, #ff0080, #00ff9f) !important;
    color: #000000 !important;
    border: 1px solid #f0f029;
    box-shadow: 0 0 10px #f3f60c80;
}

/* Neon Dreams Theme */
[data-theme="neon-dreams"] #billingCycleBtn {
    background: linear-gradient(135deg, #0ff, #00bfff) !important;
    color: #000000 !important;
    border: 1px solid #ff1493;
    box-shadow: 0 0 10px #0ff;
    text-shadow: 0 0 5px #000;
}

/* Aurora Borealis Theme */
[data-theme="aurora-borealis"] #billingCycleBtn {
    background: linear-gradient(135deg, #61dafb, #764ba2) !important;
    color: #000000 !important;
    border: 1px solid #1a8cff;
    box-shadow: 0 0 15px rgba(97, 218, 251, 0.4);
}

/* Synthwave Theme */
[data-theme="synthwave"] #billingCycleBtn {
    background: linear-gradient(135deg, #fc5c7d, #6a82fb) !important;
    color: #000000 !important;
    border: 1px solid #ff00ff;
    box-shadow: 0 0 10px #e61cf880;
}

/* Glassmorphism Theme */
[data-theme="glassmorphism"] #billingCycleBtn {
    background: rgba(255, 255, 255, 0.3) !important;
    color: #333333 !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    backdrop-filter: blur(10px);
}

/* Neubrutalism Theme */
[data-theme="neubrutalism"] #billingCycleBtn {
    background: #ff0000 !important;
    color: #000000 !important;
    border: 3px solid #000000 !important;
    box-shadow: 4px 4px 0px #000000;
    border-radius: 0 !important;
    font-weight: 900;
}

/* Matrix Rain Theme */
[data-theme="matrix-rain"] #billingCycleBtn {
    background: linear-gradient(135deg, #00ff00, #004400) !important;
    color: #000000 !important;
    border: 1px solid #00ff00;
    box-shadow: 0 0 15px rgba(0, 255, 0, 0.3);
}

/* Sunset Vibes Theme */
[data-theme="sunset-vibes"] #billingCycleBtn {
    background: linear-gradient(135deg, #ff6b35, #ffcd3c) !important;
    color: #000000 !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 0 15px rgba(255, 107, 53, 0.3);
}

/* Ocean Depth Theme */
[data-theme="ocean-depth"] #billingCycleBtn {
    background: linear-gradient(135deg, #87ceeb, #4682b4) !important;
    color: #000000 !important;
    border: 1px solid #87ceeb;
    box-shadow: 0 0 15px rgba(135, 206, 235, 0.2);
}

/* Midnight Purple Theme */
[data-theme="midnight-purple"] #billingCycleBtn {
    background: linear-gradient(135deg, #dda0dd, #9370db) !important;
    color: #000000 !important;
    border: 1px solid #dda0dd;
    box-shadow: 0 0 15px rgba(221, 160, 221, 0.3);
}

/* Golden Hour Theme */
[data-theme="golden-hour"] #billingCycleBtn {
    background: linear-gradient(135deg, #ffd700, #ff8c00) !important;
    color: #8b4513 !important;
    border: 1px solid rgba(139, 69, 19, 0.3) !important;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.3);
}

/* Forest Mist Theme */
[data-theme="forest-mist"] #billingCycleBtn {
    background: linear-gradient(135deg, #9acd32, #6b8e23) !important;
    color: #000000 !important;
    border: 1px solid #f0fff0;
    box-shadow: 0 0 15px rgba(154, 205, 50, 0.2);
}

/* Cosmic Dust Theme */
[data-theme="cosmic-dust"] #billingCycleBtn {
    background: linear-gradient(135deg, #ba55d3, #9370db) !important;
    color: #000000 !important;
    border: 1px solid #e6e6fa;
    box-shadow: 0 0 15px rgba(186, 85, 211, 0.3);
}

/* Tokyo Night Theme */
[data-theme="tokyo-night"] #billingCycleBtn {
    background: linear-gradient(135deg, #7aa2f7, #bb9af7) !important;
    color: #1a1b26 !important;
    border: 1px solid #7aa2f7;
    box-shadow: 0 0 15px rgba(122, 162, 247, 0.2);
}

/* Minimal Light Theme */
[data-theme="minimal-light"] #billingCycleBtn {
    background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
    color: #ffffff !important;
    border: 1px solid #e0e0e0;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

/* Updated Search Card Styling */
.date-search-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.date-inputs {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
}

.date-inputs input[type="date"] {
    flex: 1;
    border-width: 1px;
    border-style: solid;
    transition: all 0.3s ease;
}

/* Styling for recent days data display */
.recent-days-container {
    margin-top: 1rem;
}

.recent-days-list {
    font-size: 0.85rem;
    max-height: 150px;
    overflow-y: auto;
    scrollbar-width: thin;
}

.recent-days-list::-webkit-scrollbar {
    width: 4px;
}

.recent-days-list::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}

.recent-days-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
}

.recent-day-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 8px;
    margin-bottom: 4px;
    border-radius: 6px;
    transition: background 0.2s ease;
}

.recent-day-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.recent-day-item .date {
    color: #e0e0e0;
}

.recent-day-item .consumption {
    font-weight: 600;
}

/* Consumption color coding */
.consumption-high {
    color: #f87171;
}

.consumption-medium {
    color: #fbbf24;
}

.consumption-low {
    color: #34d399;
}

.consumption-zero {
    color: #94a3b8;
}

.recent-day-item .icon {
    margin-right: 5px;
    font-size: 0.9em;
}

/* Theme-specific styling for recent days container */
[data-theme="dark-gradient"] .recent-days-container {
    border-top-color: rgba(107, 70, 193, 0.3);
}

[data-theme="cyberpunk"] .recent-days-container {
    border-top-color: #f3f60c40;
}

[data-theme="neon-dreams"] .recent-days-container {
    border-top-color: #0ff4;
}

[data-theme="aurora-borealis"] .recent-days-container {
    border-top-color: #61dafb40;
}

[data-theme="synthwave"] .recent-days-container {
    border-top-color: #e61cf840;
}

@media (max-width: 640px) {
  #billingCycleBtn, #configBtn {
    font-size: 10px !important;
    padding: 1px 4px !important;
    height: 30px !important;
    min-height: 24px !important;
    max-height: 30px !important;
    line-height: 22px !important;
    min-width: 30px !important;
    max-width: 90px;
    border-radius: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #billingCycleBtn span, #configBtn span {
    display: none;
  }
  #billingCycleBtn i, #configBtn i {
    display: inline-block;
    font-size: 20px !important;
    margin-right: 0;
    line-height: 1;
  }
}
@media (min-width: 641px) {
  #billingCycleBtn span, #configBtn span {
    display: inline;
  }
}

@media (max-width: 600px) {
  .summary-stat-row {
    gap: 2px;
    font-size: 0.65rem;
    margin: 2px 0;
    padding: 0;
    flex-wrap: nowrap;
  }
  .summary-stat-row span {
    padding: 0 1px;
    min-width: 0;
    font-size: 0.55rem;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
}
@media (max-width: 600px) {
  #tableStats .grid {
    gap: 2px !important;
  }
  #tableStats .bg-blue-900,
  #tableStats .bg-green-900,
  #tableStats .bg-red-900 {
    padding: 6px !important;
  }
  #tableStats h4 {
    font-size: 0.85rem !important;
    margin-bottom: 4px !important;
  }
  #tableStats .text-xs,
  #tableStats div,
  #tableStats strong,
  #tableStats span {
    font-size: 0.65rem !important;
    line-height: 1.1 !important;
    padding: 0 !important;
    margin: 0 !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    overflow: hidden !important;
  }
}