body {
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), 
                url('https://datadi.com/gallery/AICICFCRS.jpg'); 
    
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    padding: 20px 10px; 
}

.container-fluid {
    background: rgba(255, 255, 255, 0.4); 
    backdrop-filter: blur(6px); /* This creates the 'frosted glass' look */
    -webkit-backdrop-filter: blur(6px);
    
    padding: 20px;
    border-radius: 15px; /* Softer corners */
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37); /* Deeper shadow for depth */
}

control-panel {
    background: transparent; 
    border: none;
    padding: 0px;
}

.nav-tabs {
    background: transparent !important; /* Makes the bar itself see-through */
    border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* A very faint line to separate tabs from content */
    border-top: none;
    border-left: none;
    border-right: none;
    gap: 10px; /* Adds space between the tabs for a cleaner look */
}

.nav-tabs .nav-link {
    color: white !important;           /* Text is now white */
    background: transparent !important; /* Background of individual tab is transparent */
    border: none !important;            /* Remove the box around inactive tabs */
    transition: all 0.3s ease;          /* Smooth color transition on hover */
}

.nav-tabs .nav-link:hover {
    color: #0d6efd !important; /* Changes to blue when you mouse over them */
    background: rgba(255, 255, 255, 0.1) !important; /* Tiny glow effect on hover */
}

.nav-tabs .nav-link.active {
    color: #000 !important;            /* Black text for the active tab to provide contrast */
    background: rgba(255, 255, 255, 0.8) !important; /* A bright "pop" so you know it's selected */
}
		.tab-content { border-top: none; }
        .master-table tbody tr { cursor: pointer; transition: background 0.2s; }
        .master-table tbody tr:hover { background-color: #e9ecef !important; }

/* Summary Row Styling */
        .summary-row { font-weight: bold; background-color: #f1f3f5 !important; }

        .details-pane { 
            margin-top: 10px; padding: 10px; border: 1px solid #dee2e6; 
            background-color: #fff; display: none; border-radius: 5px; 
        }
        .detail-row { display: flex; border-bottom: 1px solid #eee; padding: 8px 0; }
        .detail-label { font-weight: bold; width: 35%; color: #6c757d; font-size: 0.9rem; }
        .detail-value { width: 65%; word-break: break-all; font-size: 0.95rem; }

        .loading-overlay {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(255,255,255,0.8); display: flex; justify-content: center;
            align-items: center; z-index: 1000; visibility: hidden;
        }
		body, .master-table, .details-pane, .control-panel {
    color: #000 !important; /* Force black text for maximum contrast against images */
    text-shadow: 0px 0px 2px rgba(255, 255, 255, 0.8); /* Add a tiny white glow behind text */
}

/* Right-align numeric and currency cells in tables */
        .master-table td.cell-numeric,
        .master-table td.cell-currency {
            text-align: right;
            font-family: 'Consolas', 'Courier New', monospace;
        }
		
/* Headers: right-aligned only (keeps default Bootstrap header font) */
.master-table th.cell-numeric,
.master-table th.cell-currency {
    text-align: right;
}