/* --- Google Font Import (must be first) --- */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

:root {
  --primary-color: <?php echo $site_config['primary_color'] ?? '#0d47a1'; ?>;
  --secondary-color: <?php echo $site_config['secondary_color'] ?? '#1e88e5'; ?>;
}

/* --- Basic Reset --- */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Poppins', sans-serif; background: var(--background-main, #f0f3f8); color: var(--text-primary, #333); }

/* === LOGIN & REGISTER PAGE STYLES === */
.top-bar, .bottom-bar { background-color: #fff; padding: 10px 5%; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #e0e0e0; font-size: 14px; }
/* ... (login/register styles will remain same as before, no need to change them) ... */

/* === NEW USER DASHBOARD STYLES (BLUE & WHITE) === */
.user-page-container { display: flex; min-height: 100vh; }

/* --- Sidebar --- */
.sidebar {
    width: 260px;
    background-color: var(--sidebar-bg, #0d47a1); /* Dark Blue */
    color: var(--sidebar-text-color, #fff);
    display: flex;
    flex-direction: column;
    transition: width 0.3s ease;
}
.sidebar-header {
    padding: 20px;
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    border-bottom: 1px solid #155bb5;
}
.sidebar-menu { flex-grow: 1; list-style: none; padding-top: 20px; }
.sidebar-menu li a {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    color: #bbdefb; /* Light Blue Text */
    text-decoration: none;
    transition: all 0.3s ease;
    border-radius: 8px;
    margin: 5px 10px;
}
.sidebar-menu li a:hover { background-color: #155bb5; color: #fff; }
.sidebar-menu li a.active { background-color: var(--sidebar-active-bg, #1e88e5); /* Bright Blue */ color: var(--sidebar-active-text, #fff); font-weight: 600; }
.sidebar-menu li a i { width: 30px; font-size: 18px; }
.sidebar-footer { padding: 20px; border-top: 1px solid #155bb5; }
.sidebar-footer a { color: #bbdefb; text-decoration: none; display: flex; align-items: center; }

/* --- Main Content Wrapper --- */
.main-wrapper { flex-grow: 1; display: flex; flex-direction: column; }
.main-content-header {
    background-color: #fff;
    height: 70px;
    padding: 0 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e9ecef;
}
.welcome-message { font-size: 16px; color: #555; }
.header-actions { font-size: 20px; color: #555; display: flex; gap: 20px; }

/* --- Main Content Area --- */
.main-content { padding: 30px; }
.page-title h1 { font-size: 28px; font-weight: 600; margin-bottom: 5px; }
.page-title p { color: #777; font-size: 16px; }

.content-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 30px; margin-top: 30px; }
.grid-col-8 { grid-column: span 8; }
.grid-col-4 { grid-column: span 4; }

.card {
    background-color: var(--card-body-bg, #fff);
    border-radius: 10px;
    border: 1px solid #e9ecef;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    margin-bottom: 30px;
}
.card-header { padding: 20px; border-bottom: 1px solid #e9ecef; background-color: var(--card-header-bg, #fff); }
.card-header h3 { font-size: 18px; font-weight: 600; margin: 0; }
.card-body { padding: 20px; }

.api-info-item { margin-bottom: 20px; }
.api-info-item label { display: block; font-size: 14px; font-weight: 500; color: #555; margin-bottom: 8px; }
.api-key-display { background-color: #f0f3f8; padding: 12px; border-radius: 6px; }
.api-key-display code { font-family: 'Courier New', monospace; font-size: 15px; }

.stat-item { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px dashed #e9ecef; }
.stat-item:last-child { border-bottom: none; }
.stat-item span { font-size: 14px; color: #555; }
.stat-item strong { font-size: 18px; font-weight: 600; }
.text-success { color: #28a745 !important; }
.text-danger { color: #dc3545 !important; }

.table-responsive { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th, .data-table td { padding: 15px; text-align: left; border-bottom: 1px solid #e9ecef; }
.data-table th { font-size: 14px; font-weight: 600; color: #777; text-transform: uppercase; }
.data-table td { font-size: 15px; }

.status-badge { padding: 5px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; }
.status-success { background-color: #d4edda; color: #155724; }
.status-danger { background-color: #f8d7da; color: #721c24; }

/* Keep login/register styles from previous code if you are merging */
.top-bar, .bottom-bar, .login-container, .logo, .logo-icon, form, .input-group, .password-wrapper, .eye-icon, .options, .btn-login, .care-info-bottom, .form-title, .form-subtitle, .error-box, .success-box, .btn-nav {
    /* These styles should be copied from the previous CSS file to make login/register work */
}


/* === ADMIN PANEL SPECIFIC STYLES === */
.form-group { margin-bottom: 20px; }
.form-group label { display: block; font-weight: 500; margin-bottom: 8px; font-size: 14px; }
.form-group input, .form-group select, .form-group textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
}
.form-group textarea { resize: vertical; }
.btn.btn-primary {
    background-color: #1e88e5;
    color: white;
    padding: 12px 25px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
}

/* === Styles for Add lapu Form === */
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}
.form-column { display: flex; flex-direction: column; }
.form-group { margin-bottom: 20px; }
.form-group label { display: block; font-weight: 500; margin-bottom: 8px; font-size: 14px; }
.form-group input, .form-group select {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
}
.form-group small { font-size: 12px; color: #777; margin-top: 5px; }
.input-with-button { display: flex; gap: 10px; }
.input-with-button input { flex-grow: 1; }
.btn {
    padding: 10px 18px; border-radius: 5px; border: none; cursor: pointer;
    font-size: 14px; font-weight: 500; text-decoration: none; display: inline-flex;
    align-items: center; gap: 8px;
}
.btn-primary { background-color: var(--button-primary-bg, #1e88e5); color: var(--button-primary-text, white); }
.btn-secondary { background-color: var(--button-secondary-bg, #6c757d); color: var(--button-secondary-text, white); }
.form-footer { margin-top: 20px; border-top: 1px solid #e9ecef; padding-top: 20px; text-align: right; }

/* === Styles for Dropdown Menu in Sidebar === */
.sidebar-menu .dropdown { position: relative; }
.sidebar-menu .dropdown .dropdown-menu {
    list-style: none;
    background-color: #155bb5; /* Slightly lighter blue */
    padding-left: 30px; /* Indent sub-menu */
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}
.sidebar-menu .dropdown.open .dropdown-menu { max-height: none; /* Show all menu items without height restriction */ }
.sidebar-menu .dropdown .dropdown-menu li a {
    font-size: 14px;
    padding: 10px 20px;
}
.sidebar-menu .dropdown > a .fa-angle-down { margin-left: auto; transition: transform 0.3s; }
.sidebar-menu .dropdown.open > a .fa-angle-down { transform: rotate(180deg); }

/* === Styles for lapu List Table Actions === */
.action-btn {
    text-decoration: none;
    padding: 5px 8px;
    border-radius: 4px;
    margin-right: 5px;
    color: white;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.3s ease;
}
.btn-edit { background-color: #ffc107; } /* Yellow */
.btn-delete { 
    background-color: #dc3545; 
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 12px;
    box-shadow: 0 2px 4px rgba(220, 53, 69, 0.3);
} /* Red */
.btn-delete:hover {
    background-color: #c82333;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(220, 53, 69, 0.4);
}
.btn-delete:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(220, 53, 69, 0.3);
}
.btn-update-status { 
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(102, 126, 234, 0.3);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.btn-update-status:hover {
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(102, 126, 234, 0.4);
}
.btn-update-status:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(102, 126, 234, 0.3);
}
.btn-update-status i {
    font-size: 13px;
}

/* Responsive styles for action buttons on small screens */
@media (max-width: 768px) {
    .btn-update-status {
        padding: 5px 8px;
        font-size: 11px;
    }
    .btn-update-status i {
        font-size: 11px;
    }
    .btn-update-status .btn-text {
        display: inline;
    }
    .action-btn.btn-delete {
        padding: 5px 8px;
        font-size: 11px;
    }
    .action-buttons-wrapper {
        flex-direction: row;
        gap: 5px;
    }
}

/* Very small screens - hide text, show only icons */
@media (max-width: 480px) {
    .btn-update-status .btn-text {
        display: none;
    }
    .btn-update-status {
        padding: 6px 8px;
        min-width: 36px;
    }
    .action-btn.btn-delete {
        padding: 6px 8px;
        min-width: 36px;
    }
    .action-buttons-wrapper {
        gap: 4px;
        justify-content: center;
    }
}

/* === Specific Style for Generate Button === */
.input-with-button .btn-secondary {
    background-color: #1e88e5; /* The same blue as our primary button */
    border-color: #1e88e5;
}

.input-with-button .btn-secondary:hover {
    background-color: #156ab8; /* A slightly darker blue for hover effect */
}

/* === Styles for Profile Dropdown in Header === */
.profile-dropdown {
    position: relative;
    cursor: pointer;
}
.profile-dropdown-menu {
    display: none; /* Hide by default */
    position: absolute;
    top: 150%; /* Position below the icon */
    right: 0;
    background-color: #fff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    min-width: 180px;
    z-index: 1000;
    list-style: none;
    padding: 10px 0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.profile-dropdown.open .profile-dropdown-menu {
    display: block; /* Show when 'open' class is added by JS */
}
.profile-dropdown-menu li a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    text-decoration: none;
    color: #333;
    font-size: 15px;
}
.profile-dropdown-menu li a:hover {
    background-color: #f0f3f8;
}

/* === Style for Alert Messages in forms === */
.alert {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 6px;
}
.alert-success {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
}
.alert-danger {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}
.alert-info {
    color: #0c5460;
    background-color: #d1ecf1;
    border-color: #bee5eb;
}

/* === Styles for NEW Dashboard Stat Boxes === */
.dashboard-stats-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columns in a row */
    gap: 30px;
    margin-top: 30px;
    margin-bottom: 30px;
}
.stat-box {
    color: white;
    padding: 25px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.stat-box .stat-icon { font-size: 48px; opacity: 0.5; }
.stat-box .stat-info h2 { font-size: 36px; font-weight: 700; margin: 0; }
.stat-box .stat-info h3 { font-size: 16px; font-weight: 400; margin: 0; opacity: 0.9; }

/* Box Colors */
.stat-box.stat-success { background: linear-gradient(45deg, #28a745, #218838); }
.stat-box.stat-pending { background: linear-gradient(45deg, #ffc107, #e0a800); }
.stat-box.stat-failed { background: linear-gradient(45deg, #dc3545, #c82333); }

/* === Styles for NEW Status Badge Colors === */
.status-badge.status-warning {
    background-color: #fff3cd;
    color: #856404;
}

/* === Styles for lapu List Page === */
.page-actions { display: flex; gap: 10px; }
.search-box {
    padding: 10px 15px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 14px;
}
.lapu-table .operator-logo {
    height: 25px;
    vertical-align: middle;
}
.lapu-table .lapu-no-col a {
    text-decoration: none;
    color: #1e88e5;
    font-weight: 500;
}
.lapu-table .lapu-no-col small {
    display: block;
    color: #777;
    font-size: 12px;
}
.action-buttons { display: flex; gap: 5px; }
.action-btn-small {
    padding: 4px 10px;
    font-size: 12px;
    border: 1px solid #ccc;
    background-color: #f8f9fa;
    border-radius: 4px;
    cursor: pointer;
}
.action-btn-small.btn-delete { border-color: #dc3545; color: #dc3545; }

/* -- Toggle Switch Styles -- */
.toggle-switch {
    width: 50px;
    height: 26px;
    background-color: #dc3545; /* Red for OFF */
    border-radius: 13px;
    padding: 3px;
    cursor: pointer;
    transition: background-color 0.3s;
    position: relative;
}
.toggle-switch.active {
    background-color: #28a745; /* Green for ON */
}
.toggle-switch .toggle-knob {
    width: 20px;
    height: 20px;
    background-color: white;
    border-radius: 50%;
    position: absolute;
    transition: transform 0.3s;
    transform: translateX(0);
}
.toggle-switch.active .toggle-knob {
    transform: translateX(24px);
}

/* === Styles for OTP Modal Popup === */
.modal {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 1001; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.5); /* Black w/ opacity */
    justify-content: center;
    align-items: center;
}
.modal-content {
    background-color: #fefefe;
    padding: 30px;
    border-radius: 8px;
    width: 90%;
    max-width: 400px;
    position: relative;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}
.close-btn {
    color: #aaa;
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}
.modal-content h3 { margin-top: 0; }
.modal-content input {
    width: 100%;
    padding: 12px;
    margin-top: 15px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 6px;
}

/* Style for modal paragraphs */
.modal-content p {
    margin: 15px 0;
    color: #555;
}

/* === Styles for API Documentation Page === */
.api-docs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 25px;
    margin-top: 30px;
}
.lapu-api-card {
    background-color: #fff;
    border-radius: 10px;
    border: 1px solid #e9ecef;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 20px;
}
.operator-logo-large {
    height: 50px;
    width: 50px;
    object-fit: contain;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 5px;
}
.lapu-card-info {
    flex-grow: 1;
}
.lapu-card-info h4 { margin: 0 0 5px 0; font-size: 16px; }
.lapu-card-info p { margin: 0; color: #777; font-size: 14px; }
.lapu-api-card .btn {
    flex-shrink: 0;
}

/* Styles for API Details Modal */
.copy-field {
    display: flex;
    background-color: #f0f3f8;
    border-radius: 6px;
    padding: 5px;
    align-items: center;
}
.copy-field code {
    flex-grow: 1;
    padding: 8px;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    word-break: break-all;
}
.copy-field button {
    background: none;
    border: none;
    font-size: 16px;
    padding: 8px 12px;
    cursor: pointer;
    color: #555;
    border-radius: 4px;
}
.copy-field button:hover {
    background-color: #e0e6f1;
}

/* === Styles for Admin Login Page === */
.login-body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #f0f3f8;
}
.login-card {
    background: #fff;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    width: 100%;
    max-width: 400px;
    text-align: center;
}
.login-card h3 {
    margin-top: 0;
    margin-bottom: 25px;
    font-size: 24px;
    font-weight: 600;
}
.btn.full-width {
    width: 100%;
}

/* Style for select dropdowns in admin tables */
td select {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
}

/* Find this section in your style.css */

/* --- Main Content Wrapper --- */
.main-wrapper { 
    flex-grow: 1; 
    display: flex; 
    flex-direction: column; 
}
.main-content-header {
    background-color: #fff;
    height: 70px;
    padding: 0 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e9ecef;
}
.welcome-message { font-size: 16px; color: #555; }
.header-actions { font-size: 20px; color: #555; display: flex; gap: 20px; }

/* --- Notification Bell Styles --- */
.header-notification-bell {
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px; /* Make it a clickable area */
    height: 40px;
    border-radius: 50%;
    transition: background-color 0.2s ease;
}

.header-notification-bell:hover {
    background-color: #f0f0f0;
}

.header-notification-bell .fa-bell {
    font-size: 20px;
    color: #555;
}

.notification-badge {
    position: absolute;
    top: 5px;
    right: 5px;
    background-color: #dc3545; /* Red */
    color: white;
    font-size: 10px;
    font-weight: bold;
    border-radius: 50%;
    padding: 3px 6px;
    min-width: 18px;
    text-align: center;
    line-height: 1;
    box-shadow: 0 0 0 2px #fff; /* White border */
}

.notification-dropdown {
    display: none; /* Hidden by default */
    position: absolute;
    top: 60px; /* Position below the bell icon */
    right: 0;
    background-color: #fff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    min-width: 300px;
    max-width: 350px;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    overflow: hidden; /* Ensures content stays within rounded corners */
}

.header-notification-bell.open .notification-dropdown {
    display: block; /* Show when 'open' class is added by JS */
}

.notification-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #e9ecef;
    background-color: #f8f9fa;
}

.notification-header h4 {
    margin: 0;
    font-size: 16px;
    color: #333;
}

.notification-header .close-btn {
    font-size: 24px;
    cursor: pointer;
    color: #aaa;
}

.notification-header .close-btn:hover {
    color: #555;
}

.notification-list {
    max-height: 300px; /* Scrollable area for notifications */
    overflow-y: auto;
    padding: 0; /* Remove default ul padding */
    list-style: none;
}

.notification-list .loading-text {
    padding: 20px;
    text-align: center;
    color: #777;
}

.notification-item {
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

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

.notification-item:hover {
    background-color: #f0f0f0;
}

.notification-item.unread {
    background-color: #e6f7ff; /* Light blue for unread */
    font-weight: 500;
}

.notification-item.unread:hover {
    background-color: #d0efff;
}

.notification-item h5 {
    margin: 0 0 5px 0;
    font-size: 14px;
    color: #333;
}

.notification-item p {
    margin: 0;
    font-size: 13px;
    color: #666;
    line-height: 1.4;
}

.notification-item .timestamp {
    font-size: 11px;
    color: #999;
    margin-top: 5px;
    display: block;
}

.notification-footer {
    padding: 10px 20px;
    border-top: 1px solid #e9ecef;
    text-align: center;
    background-color: #f8f9fa;
}

.notification-footer a {
    color: var(--primary-color);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
}

.notification-footer a:hover {
    text-decoration: underline;
}

/* --- Dark Mode for Notifications --- */
body.dark-mode .header-notification-bell:hover {
    background-color: #21262d;
}

body.dark-mode .header-notification-bell .fa-bell {
    color: #c9d1d9;
}

body.dark-mode .notification-badge {
    box-shadow: 0 0 0 2px #0d1117; /* Dark mode background color */
}

body.dark-mode .notification-dropdown {
    background-color: #161b22;
    border-color: #30363d;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

body.dark-mode .notification-header {
    background-color: #21262d;
    border-bottom-color: #30363d;
}

body.dark-mode .notification-header h4 {
    color: #c9d1d9;
}

body.dark-mode .notification-header .close-btn {
    color: #8b949e;
}

body.dark-mode .notification-header .close-btn:hover {
    color: #c9d1d9;
}

body.dark-mode .notification-list .loading-text {
    color: #8b949e;
}

body.dark-mode .notification-item {
    border-bottom-color: #30363d;
}

body.dark-mode .notification-item:hover {
    background-color: #21262d;
}

body.dark-mode .notification-item.unread {
    background-color: #1a202c; /* Darker blue for unread in dark mode */
}

body.dark-mode .notification-item.unread:hover {
    background-color: #2d3748;
}

body.dark-mode .notification-item h5 {
    color: #c9d1d9;
}

body.dark-mode .notification-item p {
    color: #8b949e;
}

body.dark-mode .notification-item .timestamp {
    color: #6a737d;
}

body.dark-mode .notification-footer {
    background-color: #21262d;
    border-top-color: #30363d;
}

body.dark-mode .notification-footer a {
    color: var(--secondary-color); /* Use secondary color for links in dark mode */
}

.notification-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.notification-footer .clear-btn {
    background-color: #f44336; /* Red color for clear button */
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 12px;
    transition: background-color 0.3s ease;
}

.notification-footer .clear-btn:hover {
    background-color: #d32f2f;
}

body.dark-mode .notification-footer .clear-btn {
    background-color: #b71c1c;
}

body.dark-mode .notification-footer .clear-btn:hover {
    background-color: #8b0000;
}

/* --- Main Content Area --- */
.main-content { 
    padding: 30px; 
    flex-grow: 1; /* This makes it take up the remaining space */
}

/* === Styles for Admin Login Page === */
.login-body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #f0f3f8;
}
.login-card {
    background: #fff;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    width: 100%;
    max-width: 400px;
    text-align: center;
}
.login-card h3 {
    margin-top: 0;
    margin-bottom: 25px;
    font-size: 24px;
    font-weight: 600;
}
.btn.full-width {
    width: 100%;
}

/* === Styles for Tabbed Interface in Admin === */
.tabs-container { overflow: hidden; }
.tab-headers {
    border-bottom: 1px solid #ccc;
    background-color: #f1f1f1;
    display: flex;
}
.tab-headers button.tab-link {
    background-color: inherit;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    font-size: 17px;
    font-weight: 500;
}
.tab-headers button.tab-link:hover { background-color: #ddd; }
.tab-headers button.tab-link.active { background-color: #ccc; }
.tab-content {
    display: none;
    padding: 20px;
    border: 1px solid #ccc;
    border-top: none;
}
.api-section {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-bottom: 25px;
    padding: 20px;
}
.api-section h4 {
    margin-top: 0;
    margin-bottom: 20px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

/* === Styles for Response Details Modal === */
.modal-content pre {
    background-color: #f0f3f8;
    padding: 15px;
    border-radius: 6px;
    white-space: pre-wrap;       /* V wraps long lines */
    word-wrap: break-word;     /* V breaks long words */
    max-height: 400px;
    overflow-y: auto;
    font-family: 'Courier New', Courier, monospace;
    font-size: 14px;
}

/* Style for file input in admin forms */
.form-control-file {
    display: block;
    width: 100%;
    padding: 8px;
    font-size: 14px;
}

/* === Operator Logo Size Fix in Tables === */
.data-table .operator-logo {
    height: 30px; /* Set a fixed height for the logo */
    width: auto;  /* Let the width adjust automatically */
    max-width: 80px; /* Prevent it from being too wide */
    vertical-align: middle; /* Aligns the logo nicely with the text */
}

/* === Styles for API Integration Page === */
.tabs-container { overflow: hidden; border: 1px solid #e9ecef; border-radius: 8px; background: #fff; }
.tab-headers {
    border-bottom: 1px solid #e9ecef;
    background-color: #f8f9fa;
    display: flex;
    flex-wrap: wrap; /* Allows tabs to wrap on smaller screens */
}
.tab-headers button.tab-link {
    background-color: inherit;
    border: none;
    border-right: 1px solid #e9ecef;
    outline: none;
    cursor: pointer;
    padding: 12px 18px;
    transition: 0.3s;
    font-size: 15px;
    font-weight: 500;
    color: #555;
    display: flex;
    align-items: center;
    gap: 8px;
}
.tab-headers button.tab-link:hover { background-color: #e9ecef; }
.tab-headers button.tab-link.active {
    background-color: #fff;
    border-bottom: 2px solid #1e88e5;
    color: #1e88e5;
}
.tab-content { display: none; padding: 25px; }
.api-section {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-bottom: 25px;
    padding: 20px;
}
.api-section h4 {
    margin-top: 0;
    margin-bottom: 20px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}
.operator-logo-small {
    height: 20px;
}
.placeholder-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 10px;
}
.placeholder-grid div {
    background-color: #f0f3f8;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 14px;
}
.placeholder-grid code {
    font-weight: 600;
    color: #c7254e;
    background-color: #f9f2f4;
    padding: 2px 4px;
    border-radius: 4px;
}

/* === Styles for Status Change Dropdown in Admin History === */
.status-form select {
    border-radius: 20px;
    border: none;
    padding: 5px 10px;
    font-weight: 600;
    font-size: 12px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
}
.status-select-success {
    background-color: #d4edda;
    color: #155724;
}
.status-select-danger {
    background-color: #f8d7da;
    color: #721c24;
}
.status-select-warning {
    background-color: #fff3cd;
    color: #856404;
}

/* === Styles for Admin Dashboard Sections === */
.section-title {
    font-size: 20px;
    font-weight: 500;
    margin-top: 40px; /* Add space between sections */
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e9ecef;
    color: #333;
}
.section-title:first-of-type {
    margin-top: 0; /* Remove top margin from the very first title */
}

/* New color for the second row of stat boxes */
.stat-box.stat-info-blue {
    background: linear-gradient(45deg, #1e88e5, #0d47a1);
}

/* === Styles for Action Bar in History Pages === */
.action-bar {
    padding: 15px 20px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f8f9fa;
    flex-wrap: wrap;
    gap: 20px;
}

.action-bar .filter-buttons {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.action-bar .filter-inputs {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-grow: 1;
    justify-content: center;
}

.action-bar .bulk-action-controls {
    display: flex;
    gap: 10px;
    align-items: center;
}

@media (max-width: 1200px) {
    .action-bar {
        flex-direction: column;
        align-items: stretch;
    }
    .action-bar .filter-inputs {
        justify-content: flex-start;
        order: 3;
    }
    .action-bar .bulk-action-controls {
        order: 2;
    }
    .action-bar .filter-buttons {
        order: 1;
    }
}
.filter-buttons .btn {
    margin-right: 5px;
    text-decoration: none;
    color: white;
}
.btn-success { background-color: #28a745; }
.btn-warning { background-color: #ffc107; color: #212529 !important; }
.btn-danger { background-color: #dc3545; }
.btn-secondary { background-color: #6c757d; }

.bulk-action-controls {
    display: flex;
    gap: 10px;
    align-items: center;
}

.bulk-action-controls select {
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 14px;
    background-color: #fff;
    cursor: pointer;
    -webkit-appearance: none; /* Remove default browser styling */
    -moz-appearance: none;
    appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23000000%22%20d%3D%22M287%2C114.1L146.2%2C254.9L5.4%2C114.1L5.4%2C114.1l140.8%2C140.8L287%2C114.1L287%2C114.1z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 12px;
}

body.dark-mode .bulk-action-controls select {
    background-color: #161b22;
    border-color: #30363d;
    color: #c9d1d9;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23c9d1d9%22%20d%3D%22M287%2C114.1L146.2%2C254.9L5.4%2C114.1L5.4%2C114.1l140.8%2C140.8L287%2C114.1L287%2C114.1z%22%2F%3E%3C%2Fsvg%3E');
}

/* === Glow Effect on Hover for Dashboard Stat Boxes === */

.stat-box {
    /* Add a smooth transition to make the glow appear nicely */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.stat-box:hover {
    /* Slightly lift the box up on hover */
    transform: translateY(-5px);
}

.stat-box.stat-success:hover {
    /* Green Glow */
    box-shadow: 0px 8px 25px rgba(40, 167, 69, 0.4); 
}

.stat-box.stat-pending:hover {
    /* Yellow/Orange Glow */
    box-shadow: 0px 8px 25px rgba(255, 193, 7, 0.4);
}

.stat-box.stat-failed:hover {
    /* Red Glow */
    box-shadow: 0px 8px 25px rgba(220, 53, 69, 0.4);
}

/* This is for the blue boxes in the Admin panel, just in case */
.stat-box.stat-info-blue:hover {
    /* Blue Glow */
    box-shadow: 0px 8px 25px rgba(30, 136, 229, 0.4);
}

/* === Glow Effect on Hover for Dashboard Stat Boxes === */
/* ... (transition and transform styles remain the same) ... */

.stat-box.stat-success:hover {
    box-shadow: 0px 8px 25px rgba(40, 167, 69, 0.6); /* Increased from 0.4 to 0.6 */
}
.stat-box.stat-pending:hover {
    box-shadow: 0px 8px 25px rgba(255, 193, 7, 0.6); /* Increased from 0.4 to 0.6 */
}
.stat-box.stat-failed:hover {
    box-shadow: 0px 8px 25px rgba(220, 53, 69, 0.6); /* Increased from 0.4 to 0.6 */
}
.stat-box.stat-info-blue:hover {
    box-shadow: 0px 8px 25px rgba(30, 136, 229, 0.6); /* Increased from 0.4 to 0.6 */
}

/* =================================== */
/* === COMPLETE DARK MODE STYLES (V3) === */
/* =================================== */

/* --- Dark Mode Toggle Button --- */
.theme-toggle-btn { background: none; border: none; font-size: 20px; cursor: pointer; color: #555; }
.theme-toggle-btn .fa-sun { display: none; }
body.dark-mode .theme-toggle-btn { color: #8b949e; }
body.dark-mode .theme-toggle-btn .fa-sun { display: inline-block; }
body.dark-mode .theme-toggle-btn .fa-moon { display: none; }

/* --- Main Layout in Dark Mode --- */
body.dark-mode {
    background-color: #0d1117; /* GitHub's darkest background */
    color: #c9d1d9;
}
body.dark-mode .main-wrapper {
    background-color: #0d1117; /* THIS WAS THE MISSING PIECE */
}
body.dark-mode .sidebar {
    background-color: #161b22;
    border-right-color: #30363d;
}
body.dark-mode .sidebar-header,
body.dark-mode .sidebar-footer {
    border-color: #30363d;
}
body.dark-mode .sidebar-menu li a {
    color: #8b949e;
}
body.dark-mode .sidebar-menu li a:hover {
    background-color: #21262d;
    color: #c9d1d9;
}
body.dark-mode .sidebar-menu li a.active {
    background-color: #238636;
    color: #fff;
}
body.dark-mode .sidebar-footer a {
    color: #8b949e;
}

/* --- Content Area in Dark Mode --- */
body.dark-mode .main-content-header {
    background-color: #161b22;
    border-bottom-color: #30363d;
}
body.dark-mode .welcome-message, body.dark-mode .header-actions {
    color: #c9d1d9;
}
body.dark-mode .page-title h1, body.dark-mode .page-title p {
    color: #c9d1d9;
}
body.dark-mode .card {
    background-color: #161b22;
    border-color: #30363d;
}
body.dark-mode .card-header {
    border-bottom-color: #30363d;
}
body.dark-mode .card-header h3, 
body.dark-mode .form-group label,
body.dark-mode .api-section h4 {
    color: #c9d1d9;
}

/* --- Tables in Dark Mode --- */
body.dark-mode .data-table th { color: #8b949e; }
body.dark-mode .data-table th, 
body.dark-mode .data-table td {
    border-bottom-color: #30363d;
}
body.dark-mode .lapu-table .lapu-no-col a { color: #58a6ff; } /* Light blue for links */

/* --- Forms in Dark Mode --- */
body.dark-mode .form-group input, 
body.dark-mode .form-group select, 
body.dark-mode .form-group textarea,
body.dark-mode .search-box {
    background-color: #0d1117;
    border-color: #30363d;
    color: #c9d1d9;
}
body.dark-mode input::placeholder, 
body.dark-mode textarea::placeholder {
    color: #484f58;
}

/* --- Tabs in Dark Mode --- */
body.dark-mode .tab-headers {
    background-color: #0d1117;
    border-bottom-color: #30363d;
}
body.dark-mode .tab-headers button.tab-link {
    color: #8b949e;
    border-right-color: #30363d;
}
body.dark-mode .tab-headers button.tab-link:hover {
    background-color: #161b22;
}
body.dark-mode .tab-headers button.tab-link.active {
    background-color: #161b22;
    color: #c9d1d9;
    border-bottom: 2px solid #58a6ff;
}
body.dark-mode .tab-content {
    border-color: #30363d;
    border-top: none;
}

/* === Styles for Clickable Stat Boxes === */
.dashboard-stats-container a.stat-box {
    text-decoration: none; /* Remove the default blue underline from links */
    color: white; /* Make sure the text inside the link is white */
}


/* ... (inside your main dark mode styles) ... */

body.dark-mode .card,
body.dark-mode .main-content-header {
    background-color: #161b22;
    border-color: #30363d;
}

/* === NEW STYLE FOR lapu API CARD IN DARK MODE === */
body.dark-mode .lapu-api-card {
    background-color: #161b22; /* Same as other cards */
    border-color: #30363d;
}
body.dark-mode .lapu-api-card .lapu-card-info h4 {
    color: #c9d1d9; /* Light text for operator name */
}
body.dark-mode .lapu-api-card .lapu-card-info p {
    color: #8b949e; /* Dimmer text for lapu number */
}
/* === END OF NEW STYLE === */


/* ... (rest of your dark mode styles for forms, tables, etc.) ... */



/* ... (your existing dark mode styles for cards, forms, etc.) ... */

/* === NEW STYLES FOR API DETAILS MODAL IN DARK MODE === */
body.dark-mode .modal {
    /* The background overlay for the modal remains semi-transparent black */
    /* background-color: rgba(0,0,0,0.5); -- This is already set for the modal */
}

body.dark-mode .modal-content {
    background-color: #161b22; /* Dark background for the modal box */
    border-color: #30363d; /* Darker border */
}

body.dark-mode .modal-content h3 {
    color: #c9d1d9; /* Light text for modal title */
}

body.dark-mode .modal-content .api-info-item label {
    color: #8b949e; /* Dimmer text for labels inside modal */
}

body.dark-mode .modal-content .copy-field {
    background-color: #0d1117; /* Darkest background for code display area */
    border: 1px solid #30363d;
}

body.dark-mode .modal-content .copy-field code {
    color: #79c0ff; /* Light blue for code text */
}

body.dark-mode .modal-content .copy-field button {
    color: #8b949e; /* Dimmer color for copy button icon */
}
body.dark-mode .modal-content .copy-field button:hover {
    background-color: #30363d; /* Darker background on hover for copy button */
}

body.dark-mode .modal-content .close-btn {
    color: #8b949e; /* Dimmer color for close button */
}
body.dark-mode .modal-content .close-btn:hover {
    color: #c9d1d9; /* Lighter color on hover for close button */
}
/* === END OF NEW MODAL DARK MODE STYLES === */


/* ... (your existing dark mode styles for modal h3, label, copy-field, etc.) ... */

/* === NEW STYLE FOR <pre> TAG INSIDE API DETAILS MODAL IN DARK MODE === */
body.dark-mode .modal-content pre.bg-light { /* Targeting the specific <pre> tag */
    background-color: #0d1117; /* Darkest background, same as copy-field */
    color: #8b949e;           /* Dimmer text for the example body */
    border: 1px solid #30363d; /* Consistent border */
    padding: 15px;             /* Ensure padding is good */
    border-radius: 6px;        /* Consistent border radius */
}

/* ... (rest of your dark mode styles for modal buttons) ... */











/* ... (your existing dark mode styles for cards, forms, etc.) ... */

body.dark-mode .lapu-api-card { /* ... */ }
body.dark-mode .lapu-api-card .lapu-card-info h4 { /* ... */ }
body.dark-mode .lapu-api-card .lapu-card-info p { /* ... */ }
body.dark-mode .card .api-info-item label { /* ... */ }


/* === NEW STYLE FOR THE "YOUR UNIQUE API KEY" FIELD IN DARK MODE === */
body.dark-mode .card .api-info-item .copy-field {
    background-color: #0d1117; /* Darkest background, same as modal code display */
    border: 1px solid #30363d; /* Consistent border */
}
body.dark-mode .card .api-info-item .copy-field code {
    color: #79c0ff; /* Light blue for the API key text */
}
body.dark-mode .card .api-info-item .copy-field button {
    color: #8b949e; /* Dimmer color for copy button icon */
}
body.dark-mode .card .api-info-item .copy-field button:hover {
    background-color: #30363d; /* Darker background on hover for copy button */
}
/* === END OF NEW STYLE === */


/* === Styles for API Details Modal in Dark Mode === */
/* ... (your existing modal dark mode styles) ... */



/* ... (your existing general dark mode styles for body, sidebar, etc.) ... */

/* === FINAL FIX FOR FORMS & CARDS IN DARK MODE (Ensure these are comprehensive) === */
body.dark-mode .card,
body.dark-mode .main-content-header,
body.dark-mode .tabs-container { /* Added tabs-container for border */
    background-color: #161b22; 
    border-color: #30363d;
}

body.dark-mode .card-header {
    border-bottom-color: #30363d;
}

/* --- Form Elements in Dark Mode (MORE SPECIFIC & COMPREHENSIVE) --- */
body.dark-mode .form-group input[type="text"], 
body.dark-mode .form-group input[type="email"], 
body.dark-mode .form-group input[type="password"], 
body.dark-mode .form-group select, 
body.dark-mode .form-group textarea,
body.dark-mode .search-box,
body.dark-mode .api-section input[type="text"], /* Specifically for API Integration URL fields */
body.dark-mode .api-section textarea                /* Specifically for API Integration Body fields */
{
    background-color: #0d1117; /* Darkest background for inputs */
    border: 1px solid #30363d !important; /* Ensure this border applies */
    color: #c9d1d9; /* Light grey text */
    padding: 10px; /* Ensure padding */
    border-radius: 6px; /* Ensure border radius */
}

body.dark-mode .form-group input::placeholder, 
body.dark-mode .form-group textarea::placeholder,
body.dark-mode .api-section input[type="text"]::placeholder,
body.dark-mode .api-section textarea::placeholder {
    color: #484f58; /* Dimmed text for placeholders */
}

/* --- Labels and Text in Dark Mode --- */
body.dark-mode .card-header h3, 
body.dark-mode .form-group label,
body.dark-mode .api-section h4,
body.dark-mode .card-body p { /* Target the placeholder info box text */
    color: #c9d1d9;
}

/* --- Tab Styles in Dark Mode --- */
body.dark-mode .tab-headers {
    background-color: #0d1117;
    border-bottom-color: #30363d;
}
body.dark-mode .tab-headers button.tab-link {
    color: #8b949e;
    border-right-color: #30363d;
}
body.dark-mode .tab-headers button.tab-link:hover {
    background-color: #161b22;
}
body.dark-mode .tab-headers button.tab-link.active {
    background-color: #161b22;
    color: #c9d1d9;
    border-bottom: 2px solid #58a6ff; 
}
body.dark-mode .tab-content {
    border-color: #30363d;
    border-top: none;
}

/* --- API Section in Dark Mode --- */
body.dark-mode .api-section {
    border-color: #30363d;
}
body.dark-mode .api-section h4 {
    border-bottom-color: #30363d;
}

/* ... (rest of your dark mode styles for buttons, badges, modal, etc.) ... */




/* ... (your existing dark mode styles for API section, forms, etc.) ... */

/* === NEW STYLE FOR PLACEHOLDER INFO BOX IN DARK MODE === */
body.dark-mode .card.full-width-card .card-body p {
    color: #8b949e; /* Dimmer text for the instructional paragraph */
}

body.dark-mode .placeholder-grid div {
    background-color: #0d1117; /* Darkest background for individual placeholder items */
    border: 1px solid #30363d; /* Consistent border */
    color: #8b949e;           /* Dimmer text for the placeholder description */
}

body.dark-mode .placeholder-grid div code {
    color: #ff7b72; /* A reddish/pink color for the @placeholder text for better visibility */
    background-color: rgba(220, 53, 69, 0.1); /* Light reddish background for the code tag */
    padding: 2px 5px;
    border-radius: 4px;
}
/* === END OF NEW STYLE FOR PLACEHOLDERS === */


/* ======================================================= */
/* === STYLES FOR AUTH PAGES (Login & Register v2) === */
/* ======================================================= */

body.auth-page-body {
    font-family: 'Poppins', sans-serif; /* Or your preferred font */
    background-color: #f0f2f5; /* Light grey background */
    color: #555;
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.auth-top-bar, .auth-bottom-bar {
    background-color: #fff;
    padding: 10px 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e0e0e0;
    font-size: 14px;
    flex-shrink: 0; /* Prevent bars from shrinking */
}
.auth-bottom-bar {
    border-top: 1px solid #e0e0e0;
    border-bottom: none;
}
.auth-care-info, .auth-copyright { color: #555; }
.auth-nav-buttons a.auth-btn-nav {
    text-decoration: none;
    color: #555;
    padding: 7px 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-left: 8px;
    font-size: 13px;
    transition: background-color 0.3s, border-color 0.3s;
}
.auth-nav-buttons a.auth-btn-nav:hover {
    background-color: #f0f0f0;
}
.auth-nav-buttons a.auth-btn-nav.active {
    border-color: #888;
    font-weight: 500;
}
.auth-footer-links a {
    text-decoration: none;
    color: #555;
    margin: 0 8px;
    font-size: 13px;
}

/* --- Main Auth Container --- */
.auth-container {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px;
}

.auth-logo {
    font-size: 42px; /* Adjusted size */
    font-weight: 600;
    color: #333;
    margin-bottom: 30px;
    letter-spacing: 1px;
}
.logo-flag { font-size: 30px; vertical-align: middle; }
.logo-robot { font-size: 34px; vertical-align: middle; }

/* --- Form Styles --- */
.auth-form {
    width: 100%;
    max-width: 360px; /* Slightly wider */
}
.auth-input-group {
    margin-bottom: 18px; /* Increased margin */
}
.auth-input-group input[type="text"],
.auth-input-group input[type="password"] {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ced4da; /* Standard Bootstrap border color */
    border-radius: 6px; /* Slightly less rounded */
    font-size: 15px;
    box-sizing: border-box;
}
.auth-password-wrapper {
    position: relative;
}
.auth-eye-icon {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    cursor: pointer;
    user-select: none;
    color: #6c757d;
}
.auth-options {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 20px;
    font-size: 13px;
    color: #495057;
}
.auth-options input[type="checkbox"] {
    margin-right: 5px;
}
.auth-btn-login {
    width: 100%;
    padding: 12px;
    background-color: #00aaff; /* Your specified blue */
    border: none;
    color: white;
    font-size: 16px;
    font-weight: 500;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.3s;
}
.auth-btn-login:hover {
    background-color: #0088cc; /* Darker blue */
}

.auth-care-info-bottom {
    margin-top: 25px;
    font-size: 15px;
    color: #555;
}

.auth-error-box { /* Specific error box for auth pages */
    background-color: #f8d7da;
    color: #721c24;
    padding: 10px;
    border: 1px solid #f5c6cb;
    border-radius: 5px;
    margin-bottom: 15px;
    width: 100%;
    max-width: 360px;
    box-sizing: border-box;
    font-size: 14px;
}

/* DARK MODE Specific Styles for Auth Pages */
body.dark-mode.auth-page-body {
    background-color: #0d1117;
}
body.dark-mode .auth-top-bar,
body.dark-mode .auth-bottom-bar,
body.dark-mode .auth-container { /* Ensure container background matches body */
    background-color: #0d1117; /* Match body for seamless look */
}
body.dark-mode .auth-top-bar,
body.dark-mode .auth-bottom-bar {
    border-color: #30363d;
}
body.dark-mode .auth-care-info,
body.dark-mode .auth-copyright,
body.dark-mode .auth-footer-links a,
body.dark-mode .auth-nav-buttons a.auth-btn-nav {
    color: #8b949e;
}
body.dark-mode .auth-nav-buttons a.auth-btn-nav {
    border-color: #30363d;
}
body.dark-mode .auth-nav-buttons a.auth-btn-nav:hover {
    background-color: #161b22;
}
body.dark-mode .auth-logo {
    color: #c9d1d9;
}
body.dark-mode .auth-input-group input[type="text"],
body.dark-mode .auth-input-group input[type="password"] {
    background-color: #161b22;
    border-color: #30363d;
    color: #c9d1d9;
}
body.dark-mode .auth-eye-icon,
body.dark-mode .auth-options {
    color: #8b949e;
}
body.dark-mode .auth-error-box {
    background-color: #2d1a1e;
    color: #f85149;
    border-color: #582222;
}



/* ======================================================= */
/* === NEW STYLES FOR STYLISH ADMIN LOGIN PAGE === */
/* ======================================================= */

body.admin-login-page {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #eef2f7; /* Light blue-grey background */
    font-family: 'Poppins', sans-serif;
}

.admin-login-wrapper {
    width: 100%;
    max-width: 420px;
    padding: 20px;
}

.admin-login-box {
    background: #fff;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.admin-login-logo {
    margin-bottom: 20px;
}

.admin-login-logo i {
    font-size: 48px;
    color: #0d6efd; /* Primary Blue */
    margin-bottom: 10px;
}

.admin-login-logo h2 {
    font-size: 26px;
    font-weight: 600;
    color: #333;
    margin: 0;
}

.admin-login-subtitle {
    font-size: 15px;
    color: #6c757d;
    margin-bottom: 25px;
}

.admin-login-form .form-group {
    margin-bottom: 20px;
    text-align: left; /* Align labels to the left */
}

.admin-login-form .form-group label {
    display: block;
    font-weight: 500;
    margin-bottom: 8px;
    font-size: 14px;
    color: #495057;
}
.admin-login-form .form-group label i {
    margin-right: 5px;
    color: #0d6efd;
}

.admin-login-form .form-group input[type="text"],
.admin-login-form .form-group input[type="password"] {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ced4da;
    border-radius: 6px;
    font-size: 15px;
    box-sizing: border-box;
    transition: border-color 0.3s;
}
.admin-login-form .form-group input[type="text"]:focus,
.admin-login-form .form-group input[type="password"]:focus {
    border-color: #0d6efd;
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

.admin-login-btn {
    width: 100%;
    padding: 12px;
    background-color: #0d6efd;
    border: none;
    color: white;
    font-size: 16px;
    font-weight: 500;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.3s;
    margin-top: 10px; /* Add some space above the button */
}
.admin-login-btn:hover {
    background-color: #0b5ed7;
}

.admin-login-box .alert.alert-danger { /* Style for error messages */
    margin-bottom: 20px;
    font-size: 14px;
}

.admin-login-footer {
    margin-top: 30px;
    font-size: 13px;
    color: #6c757d;
}

/* Dark Mode for Admin Login Page */
body.dark-mode.admin-login-page {
    background-color: #0d1117;
}
body.dark-mode .admin-login-box {
    background-color: #161b22;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
body.dark-mode .admin-login-logo h2,
body.dark-mode .admin-login-form .form-group label {
    color: #c9d1d9;
}
body.dark-mode .admin-login-subtitle,
body.dark-mode .admin-login-footer {
    color: #8b949e;
}
body.dark-mode .admin-login-form .form-group input[type="text"],
body.dark-mode .admin-login-form .form-group input[type="password"] {
    background-color: #0d1117;
    border-color: #30363d;
    color: #c9d1d9;
}
body.dark-mode .admin-login-form .form-group input[type="text"]:focus,
body.dark-mode .admin-login-form .form-group input[type="password"]:focus {
    border-color: #58a6ff;
    box-shadow: 0 0 0 0.2rem rgba(88, 166, 255, 0.25);
}
body.dark-mode .admin-login-box .alert.alert-danger {
    background-color: #2d1a1e;
    color: #f85149;
    border-color: #582222;
}


/* === Styles for API Documentation Page (Corrected Alignment) === */
.api-docs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 25px;
    margin-top: 30px;
}

.lapu-api-card {
    background-color: #fff; /* Light mode background */
    border-radius: 10px;
    border: 1px solid #e9ecef; /* Light mode border */
    padding: 15px 20px; /* Adjusted padding */
    display: flex;
    align-items: center; /* Vertically align all items in the center */
    gap: 15px; /* Reduced gap for a tighter look */
}

.operator-logo-large {
    height: 40px; /* Slightly smaller logo */
    width: 40px;
    object-fit: contain;
    border: 1px solid #eee; /* Light mode border */
    border-radius: 6px; /* Slightly less rounded */
    padding: 5px;
    flex-shrink: 0; /* Prevent logo from shrinking */
}

.lapu-card-info {
    flex-grow: 1; /* Allow this to take up available space */
    min-width: 0; /* Important for flex items to allow shrinking if needed */
}

.lapu-card-info h4 {
    margin: 0 0 3px 0; /* Adjusted margin */
    font-size: 16px;
    font-weight: 600; /* Bolder name */
    color: #333; /* Light mode text */
}

.lapu-card-info p {
    margin: 0;
    color: #777; /* Light mode text */
    font-size: 13px; /* Slightly smaller number */
}

.lapu-api-card .btn.btn-primary {
    flex-shrink: 0; /* Prevent button from shrinking */
    padding: 8px 15px; /* Adjust button padding if needed */
    font-size: 14px;
}

/* --- DARK MODE styles for these specific elements --- */
body.dark-mode .lapu-api-card {
    background-color: #161b22;
    border-color: #30363d;
}
body.dark-mode .operator-logo-large {
    border-color: #30363d;
}
body.dark-mode .lapu-api-card .lapu-card-info h4 {
    color: #c9d1d9;
}
body.dark-mode .lapu-api-card .lapu-card-info p {
    color: #8b949e;
}
/* The .btn.btn-primary dark mode styles are already handled globally */

/* === Styles for lapu Details in User History Table === */
.data-table td .operator-logo { /* Already styled, but ensure it works here */
    height: 25px;
    margin-right: 5px;
    vertical-align: middle;
}
.lapu-no-in-history {
    font-size: 13px;
    color: #555; /* Light mode color */
}
body.dark-mode .lapu-no-in-history {
    color: #8b949e; /* Dark mode color */
}

/* === Styles for lapu Details in User History Table === */
.data-table td .operator-logo {
    height: 22px; /* Adjust size as needed */
    margin-right: 5px;
    vertical-align: middle;
    border: 1px solid #eee; /* Optional: add a light border to logos */
    border-radius: 4px;
}
.lapu-id-in-history {
    font-size: 11px;
    color: #777;
    margin-right: 5px;
    font-style: italic;
}
.lapu-no-in-history {
    font-size: 13px;
    color: #555; 
    font-weight: 500;
}
body.dark-mode .lapu-id-in-history {
    color: #8b949e;
}
body.dark-mode .lapu-no-in-history {
    color: #c9d1d9; 
}
body.dark-mode .data-table td .operator-logo {
    border-color: #30363d;
}

/* === Styles for Detailed lapu Info in History Table === */
.lapu-details-cell {
    text-align: center; /* Center the content within the cell */
}
.lapu-detail-item {
    display: block; /* Each item on a new line */
    margin-bottom: 3px; /* Small space between items */
}
.lapu-id-tag {
    font-size: 10px;
    color: #777;
    background-color: #f0f0f0;
    padding: 2px 4px;
    border-radius: 3px;
}
.operator-logo-history {
    height: 20px; /* Adjust as needed */
    max-width: 60px; /* Adjust as needed */
    vertical-align: middle;
}
.lapu-no-text {
    font-size: 13px;
    font-weight: 500;
    color: #333;
}

/* Dark Mode for these new styles */
body.dark-mode .lapu-details-cell {
    /* No change needed for text-align */
}
body.dark-mode .lapu-id-tag {
    color: #8b949e;
    background-color: #30363d;
}
body.dark-mode .lapu-no-text {
    color: #c9d1d9;
}
body.dark-mode .operator-logo-history {
    /* If logos have transparent backgrounds, they'll look fine. 
       If they have white backgrounds, you might want to add a filter:
       filter: invert(1) hue-rotate(180deg) brightness(1.5); 
       But this can make some logos look weird. Test carefully.
    */
}

/* === Styles for "View Response" Button in User History === */
.btn-view-response {
    background-color: #1e88e5; /* Primary Blue */
    color: white;
    border: none; /* Remove border if action-btn-small has one */
}
.btn-view-response:hover {
    background-color: #156ab8; /* Darker blue on hover */
}

/* Ensure modal pre styles from admin also apply here or are generic */
.modal-content pre {
    background-color: #f0f3f8;
    padding: 15px;
    border-radius: 6px;
    white-space: pre-wrap;       
    word-wrap: break-word;     
    max-height: 400px;
    overflow-y: auto;
    font-family: 'Courier New', Courier, monospace;
    font-size: 14px;
}
body.dark-mode .modal-content pre {
    background-color: #0d1117;
    color: #c9d1d9;
    border: 1px solid #30363d;
}

/* === Styles for Detailed lapu Info in User History Table (REVISED) === */
.lapu-details-cell {
    text-align: left; /* Align to the left for better readability */
    min-width: 150px; /* Give it some minimum width */
}
.lapu-info-container {
    display: flex; /* Align logo and text details side-by-side */
    align-items: center; /* Vertically align them */
    gap: 8px; /* Space between logo and text block */
}
.operator-logo-history {
    height: 24px; /* Consistent logo size */
    width: auto;
    max-width: 35px;
    flex-shrink: 0; /* Prevent logo from shrinking */
}
.operator-name-text-history { /* Style for operator name if logo is missing */

/* === Styles for Bulk Action Controls in History Page === */
.bulk-action-controls {
    display: flex;
    gap: 15px; /* Increased gap for better spacing */
    align-items: center;
    justify-content: flex-end; /* Align to the right */
    flex-grow: 1; /* Allow it to take available space */
}

.bulk-action-controls select {
    padding: 10px 15px; /* More padding for a better look */
    border: 1px solid #ced4da; /* Standard border color */
    border-radius: 6px;
    font-size: 14px;
    font-family: 'Poppins', sans-serif;
    background-color: #fff;
    cursor: pointer;
    transition: border-color 0.3s, box-shadow 0.3s;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%236c757d%22%20d%3D%22M287%2C114.1L146.2%2C254.9L5.4%2C114.1L5.4%2C114.1l140.8%2C140.8L287%2C114.1L287%2C114.1z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 10px;
    min-width: 200px; /* Give it a minimum width */
}

.bulk-action-controls select:focus {
    border-color: var(--primary-color);
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

.bulk-action-controls .btn {
    padding: 10px 20px; /* Match select padding */
}

/* Dark Mode for Bulk Action Controls */
body.dark-mode .bulk-action-controls select {
    background-color: #0d1117;
    border-color: #30363d;
    color: #c9d1d9;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%238b949e%22%20d%3D%22M287%2C114.1L146.2%2C254.9L5.4%2C114.1L5.4%2C114.1l140.8%2C140.8L287%2C114.1L287%2C114.1z%22%2F%3E%3C%2Fsvg%3E');
}

body.dark-mode .bulk-action-controls select:focus {
    border-color: #58a6ff;
    box-shadow: 0 0 0 0.2rem rgba(88, 166, 255, 0.25);
}
    font-size: 12px;
    font-style: italic;
    color: #777;
}
.lapu-text-details {
    display: flex;
    flex-direction: column; /* Stack lapu number and ID vertically */
}
.lapu-no-in-history {
    font-size: 13px;
    font-weight: 500;
    color: #333; 
}
.lapu-id-tag-history {
    font-size: 11px;
    color: #777;
}

/* Dark Mode adjustments for these new styles */
body.dark-mode .lapu-details-cell {
    /* No specific change needed, inherits well */
}
body.dark-mode .operator-name-text-history {
    color: #8b949e;
}
body.dark-mode .lapu-no-in-history {
    color: #c9d1d9; 
}
body.dark-mode .lapu-id-tag-history {
    color: #8b949e;
}
/* Ensure logo doesn't get weird in dark mode if it has white background */
body.dark-mode .operator-logo-history {
    /* background-color: #fff; /* Optional: if logos have transparent bg and look bad */
    /* border-radius: 3px; */
}

/* === Style for "View History" Button in Admin User Management === */
.action-btn.btn-view-history {
    background-color: #17a2b8; /* Teal color for info/view */
    color: white;
    margin-left: 5px; /* Add some space from edit button */
}
.action-btn.btn-view-history:hover {
    background-color: #138496;
}

/* === Styles for Advanced API Integration Page === */
.api-section {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-bottom: 30px;
    padding: 25px;
    background-color: #fdfdfd; /* Slightly off-white */
}
.api-section h3 {
    font-size: 20px;
    color: #1e88e5; /* Blue title */
    margin-top: 0;
    margin-bottom: 8px;
}
.api-section h4 {
    font-size: 16px;
    color: #333;
    margin-top: 20px;
    margin-bottom: 15px;
    border-bottom: 1px dashed #eee;
    padding-bottom: 8px;
}
.api-section .section-description {
    font-size: 14px;
    color: #666;
    margin-bottom: 20px;
}
.form-grid.equal-cols { /* For side-by-side key-value pairs */
    grid-template-columns: 1fr 1fr;
}
.form-grid.three-cols {
    grid-template-columns: repeat(3, 1fr);
}
.form-group input[type="checkbox"] {
    width: auto;
    margin-right: 8px;
    vertical-align: middle;
}
.form-group label input[type="checkbox"] { /* For checkbox with label text */
    position: relative;
    top: 2px;
}

/* Dark Mode for these new elements */
body.dark-mode .api-section {
    border-color: #30363d;
    background-color: #0d1117; /* Darkest bg for section */
}
body.dark-mode .api-section h3 {
    color: #58a6ff; /* Light blue title */
}
body.dark-mode .api-section h4 {
    color: #c9d1d9;
    border-bottom-color: #30363d;
}
body.dark-mode .api-section .section-description {
    color: #8b949e;
}

/* === Styles for No Operators Message === */
.no-operators-message {
    background-color: #e0f2f7; /* Light blue background */
    border: 1px solid #b3e5fc; /* Slightly darker blue border */
    border-radius: 10px;
    padding: 30px;
    margin-bottom: 30px;
    text-align: center;
    font-size: 18px;
    color: #01579b; /* Dark blue text */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    line-height: 1.6;
}

.no-operators-message p {
    margin: 0 0 10px 0; /* Space between paragraphs */
}

.no-operators-message p:last-child {
    margin-bottom: 0;
}

body.dark-mode .no-operators-message {
    background-color: #1a202c; /* Darker background for dark mode */
    border-color: #2d3748; /* Darker border */
    color: #a0aec0; /* Lighter text for dark mode */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

/* === Styles for No Operators Message === */
.no-operators-message {
    background-color: #e0f2f7; /* Light blue background */
    border: 1px solid #b3e5fc; /* Slightly darker blue border */
    border-radius: 10px;
    padding: 30px;
    margin-bottom: 30px;
    text-align: center;
    font-size: 18px;
    color: #01579b; /* Dark blue text */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    line-height: 1.6;
}

.no-operators-message .no-operators-icon {
    font-size: 60px; /* Large icon size */
    color: #ffc107; /* Warning yellow color */
    margin-bottom: 20px;
}

.no-operators-message p {
    margin: 0 0 10px 0; /* Space between paragraphs */
}

.no-operators-message p:last-child {
    margin-bottom: 0;
}

body.dark-mode .no-operators-message {
    background-color: #1a202c; /* Darker background for dark mode */
    border-color: #2d3748; /* Darker border */
    color: #a0aec0; /* Lighter text for dark mode */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

body.dark-mode .no-operators-message .no-operators-icon {
    color: #e0a800; /* Darker yellow for dark mode */
}

/* === Styles for Contact CustomerCare Button === */
.customer-care-btn {
    background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
    border: none;
    color: white;
    padding: 15px 30px;
    font-size: 18px;
    font-weight: 600;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none; /* Ensure no underline */
}

.customer-care-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    opacity: 0.9;
}

body.dark-mode .customer-care-btn {
    background: linear-gradient(45deg, #238636, #58a6ff); /* Different gradient for dark mode */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
}

body.dark-mode .customer-care-btn:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
}

/* === Styles for Operator Plans Page === */
.operator-plan-card {
    text-align: center; /* Center content in the card */
}
.operator-logo-plan {
    height: 60px; /* Larger logo for plan card */
    max-width: 120px;
    margin-bottom: 10px;
    object-fit: contain;
}
.operator-plan-card .card-header h3 {
    font-size: 18px;
    margin-bottom: 0;
}
.operator-plan-card .card-body .btn {
    width: 80%; /* Make button wider */
    margin-top: 10px;
}
/* Dark mode specific if needed for plan cards */
body.dark-mode .operator-plan-card {
    /* Already covered by general .card dark mode styles */
}

/* === GENERIC MODAL STYLES (Used by History & Plans page) === */
.modal {
    display: none; 
    position: fixed; z-index: 1001; left: 0; top: 0;
    width: 100%; height: 100%; overflow: auto;
    background-color: rgba(0,0,0,0.6); 
    justify-content: center; align-items: center;
}
.modal-content {
    background-color: #fff; /* Light mode background */
    padding: 30px; border-radius: 8px;
    width: 90%; max-width: 500px; /* Adjusted max-width */
    position: relative; box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    color: #333; /* Light mode text */
}
.modal-content h3 { margin-top: 0; color: #1e88e5; }
.modal-content p { margin: 15px 0; line-height: 1.6; }
.close-btn {
    color: #aaa; position: absolute; top: 10px; right: 20px;
    font-size: 28px; font-weight: bold; cursor: pointer;
}
.close-btn:hover { color: #333; }

/* Dark Mode for Modal */
body.dark-mode .modal-content {
    background-color: #161b22; 
    border-color: #30363d;
    color: #c9d1d9;
}
body.dark-mode .modal-content h3 {
    color: #58a6ff;
}
body.dark-mode .modal-content p {
    color: #8b949e;
}
body.dark-mode .close-btn {
    color: #8b949e;
}
body.dark-mode .close-btn:hover {
    color: #c9d1d9;
}

/* === Styles for Customer Care Page === */
.contact-info-card .card-body p {
    font-size: 16px;
    margin-bottom: 10px;
}

.contact-info-card .card-body p strong {
    color: var(--primary-color);
}

.contact-info-card .card-body p a {
    color: var(--secondary-color);
    text-decoration: none;
    font-weight: 500;
}

.contact-info-card .card-body p a:hover {
    text-decoration: underline;
}

.contact-info-card .card-body .contact-info-note {
    font-size: 14px;
    color: #6c757d;
    margin-top: 20px;
    border-top: 1px solid #eee;
    padding-top: 15px;
}

.chat-customer-care-card .chat-form .form-group label {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 8px;
}

.chat-customer-care-card .chat-form textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    min-height: 120px;
    resize: vertical;
}

.chat-customer-care-card .chat-form input[type="file"] {
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 8px;
    background-color: #f8f8f8;
}

.chat-customer-care-card .chat-form .form-footer {
    text-align: right;
    margin-top: 20px;
}

.chat-customer-care-card .chat-form .chat-send-btn {
    background-color: var(--primary-color);
    color: white;
    padding: 12px 25px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background-color 0.3s ease;
}

.chat-customer-care-card .chat-form .chat-send-btn:hover {
    background-color: var(--secondary-color);
}

/* Dark Mode for Customer Care Page */
body.dark-mode .contact-info-card .card-body p strong {
    color: var(--secondary-color);
}

body.dark-mode .contact-info-card .card-body p a {
    color: #58a6ff;
}

body.dark-mode .contact-info-card .card-body .contact-info-note {
    color: #8b949e;
    border-top-color: #30363d;
}

body.dark-mode .chat-customer-care-card .chat-form textarea,
body.dark-mode .chat-customer-care-card .chat-form input[type="file"] {
    background-color: #0d1117;
    border-color: #30363d;
    color: #c9d1d9;
}

body.dark-mode .chat-customer-care-card .chat-form textarea::placeholder {
    color: #484f58;
}

body.dark-mode .chat-customer-care-card .chat-form .chat-send-btn {
    background-color: #238636; /* Green for dark mode */
}

body.dark-mode .chat-customer-care-card .chat-form .chat-send-btn:hover {
    background-color: #2ea043;
}

/* === Styles for Payment Page === */
.payment-options-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 20px;
}
.payment-option-card {
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    background-color: #fff; /* Light mode */
}
.payment-option-card img {
    max-height: 50px;
    margin-bottom: 15px;
    object-fit: contain;
}
.payment-option-card h4 {
    font-size: 16px;
    margin-bottom: 15px;
}
.payment-option-card .btn-block {
    width: 100%;
}

/* Dark Mode for Payment Page */
body.dark-mode .payment-option-card {
    background-color: #161b22;
    border-color: #30363d;
}
body.dark-mode .payment-option-card h4 {
    color: #c9d1d9;
}
/* Ensure button styles are consistent */
body.dark-mode .payment-option-card .btn-primary {
    background-color: #238636; /* Green for pay button */
    border-color: #238636;
}

/* === Styles for Payment Page Description === */
.payment-option-card .payment-description {
    font-size: 13px;
    color: #6c757d; /* Light mode text */
    margin-bottom: 15px;
    min-height: 40px; /* Give some space even if description is short */
}
body.dark-mode .payment-option-card .payment-description {
    color: #8b949e; /* Dark mode text */
}

.operator-logo-list {
    height: 20px; /* Smaller logo for the list */
    margin-right: 8px;
    vertical-align: middle;
}

/* Style for clickable lapu Number in lapu List */
.lapu-no-link {
    color: #1e88e5; /* Primary blue, or your theme's link color */
    text-decoration: none;
    font-weight: 500;
}
.lapu-no-link:hover {
    text-decoration: underline;
}
body.dark-mode .lapu-no-link {
    color: #58a6ff; /* Lighter blue for dark mode */
}

/* === Styles for Sub-Tabs in API Integration Page === */
.main-tab-content { /* Content of each main operator tab */
    /* border: 1px solid #e0e0e0; Already on tabs-container */
    /* border-top: none; */
    /* padding: 20px; Already on tabs-container */
}
.sub-tab-headers {
    display: flex;
    margin-bottom: 20px;
    border-bottom: 1px solid #dee2e6; /* Light border for separation */
}
.sub-tab-link {
    padding: 10px 15px;
    cursor: pointer;
    border: none;
    background-color: transparent;
    font-size: 16px;
    font-weight: 500;
    color: #495057; /* Subdued color */
    margin-right: 5px;
    border-bottom: 3px solid transparent; /* For active indicator */
}
.sub-tab-link.active {
    color: #0d6efd; /* Primary blue for active sub-tab */
    border-bottom-color: #0d6efd;
}
.sub-tab-link:hover {
    color: #0d6efd;
}
.sub-tab-content {
    display: none; /* Hidden by default, shown by JS */
}

/* Dark Mode for Sub-Tabs */
body.dark-mode .sub-tab-headers {
    border-bottom-color: #30363d;
}
body.dark-mode .sub-tab-link {
    color: #8b949e;
}
body.dark-mode .sub-tab-link.active {
    color: #58a6ff; /* Light blue for active sub-tab in dark mode */
    border-bottom-color: #58a6ff;
}
body.dark-mode .sub-tab-link:hover {
    color: #58a6ff;
}

body.dark-mode .sidebar-menu li.active-parent > a,
.sidebar-menu li.active-parent > a {
    background-color: #238636; /* Or your active color */
    color: #fff;
}

/* Style for the logo in the sidebar header */
.sidebar-header .sidebar-logo-img {
    max-height: 40px; /* Adjust as needed */
    max-width: 100%;  /* Ensures it fits within the sidebar width */
    object-fit: contain; /* Keeps aspect ratio */
    margin-bottom: 5px; /* Optional: if text is below logo */
}

/* === Style for Reset Button in Site Settings === */
.form-footer .btn-secondary { /* Assuming Reset button has this class */
    background-color: #dc3545; /* Red color */
    border-color: #dc3545;
    color: white;
}
.form-footer .btn-secondary:hover {
    background-color: #c82333; /* Darker red on hover */
    border-color: #bd2130;
}

/* If you want a specific class for reset button, e.g., .btn-reset */
.form-footer .btn-reset {




























    background-color: #dc3545;
    border-color: #dc3545;
    color: white;
}
.form-footer .btn-reset:hover {
    background-color: #c82333;
    border-color: #bd2130;
}

/* === Styles for Site Settings Page === */
.current-site-image {
    max-height: 60px;
    max-width: 200px;
    object-fit: contain;
    border: 1px solid #ddd; /* Light mode border */
    padding: 5px;
    margin-bottom: 10px;
    display: block;
    background-color: #f8f9fa; /* Light background for preview */
}
.form-control-file { /* Basic styling for file input */
    display: block;
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.form-control-file:focus {
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 .2rem rgba(0,123,255,.25);
}

/* Dark Mode adjustments for image preview */
body.dark-mode .current-site-image {
    border-color: #30363d;
    background-color: #0d1117;
}
body.dark-mode .form-control-file {
    background-color: #0d1117;
    border-color: #30363d;
    color: #c9d1d9;
}
body.dark-mode .form-control-file:focus {
    border-color: #58a6ff;
    box-shadow: 0 0 0 .2rem rgba(88,166,255,.25);
}

/* === Styles for lapu List Action Buttons (Revised) === */
.action-buttons-group {
    display: flex;
    gap: 5px; /* Space between buttons */
    align-items: center;
}
.action-btn-lapu { /* Common style for all lapu action buttons */
    padding: 6px 10px;
    font-size: 12px;
    border-radius: 5px;
    cursor: pointer;
    border: 1px solid transparent;
    color: white;
    font-weight: 500;
    transition: opacity 0.2s;
}
.action-btn-lapu:hover {
    opacity: 0.85;
}
.action-btn-lapu i { /* For Edit/Delete icons */
    margin-right: 0; /* If only icon */
}

/* Specific colors for each button type */
.action-bal { background-color: #17a2b8; border-color: #17a2b8;} /* Teal */
.action-login { background-color: #28a745; border-color: #28a745;} /* Green */
.action-otp { background-color: #ffc107; border-color: #ffc107; color: #212529;} /* Yellow */
.action-edit { background-color: #6c757d; border-color: #6c757d;} /* Grey */
.action-delete { background-color: #dc3545; border-color: #dc3545;} /* Red */

/* Dark Mode for Action Buttons */
body.dark-mode .action-btn-lapu {
    /* Keep background colors, text is already white */
    border-color: rgba(255,255,255,0.2); /* Slightly visible border in dark mode */
}
body.dark-mode .action-otp { /* Adjust text color for yellow button in dark mode */
    color: #333;
}












/* ======================================================= */
/* === STYLES FOR NEW AUTHENTICATION PAGE V3 (Simpler) === */
/* ======================================================= */
body.auth-v3-body {
    margin: 0;
    font-family: 'Poppins', sans-serif; /* Using Poppins from previous styles */
    background-color: #eef2f7; /* Light, pleasant background */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
}

.auth-v3-wrapper { /* Optional wrapper if needed for centering or max-width */
    width: 100%;
    display: flex;
    justify-content: center;
}

.auth-v3-card {
    background-color: #ffffff;
    padding: 30px 40px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 450px; /* Control card width */
}

.auth-v3-tabs {
    display: flex;
    justify-content: center;
    margin-bottom: 25px;
    border-bottom: 1px solid #e9ecef;
}

.auth-v3-tablink {
    background: none;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    color: #6c757d; /* Subdued tab color */
    position: relative;
    transition: color 0.3s, border-bottom-color 0.3s;
    border-bottom: 3px solid transparent;
}

.auth-v3-tablink:hover {
    color: #0d6efd; /* Primary blue on hover */
}

.auth-v3-tablink.active {
    color: #0d6efd;
    border-bottom-color: #0d6efd;
}

.auth-v3-tabcontent h3 {
    text-align: center;
    font-size: 24px;
    color: #343a40;
    margin-bottom: 25px;
    font-weight: 600;
}

.auth-v3-form .auth-v3-input-group {
    margin-bottom: 20px;
}

.auth-v3-form .auth-v3-input-group label {
    display: block;
    font-size: 14px;
    color: #495057;
    margin-bottom: 6px;
    font-weight: 500;
}
.auth-v3-form .auth-v3-input-group label i {
    margin-right: 8px;
    color: #6c757d;
}

.auth-v3-form .auth-v3-input-group input {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ced4da;
    border-radius: 6px;
    font-size: 15px;
    box-sizing: border-box;
    transition: border-color 0.3s, box-shadow 0.3s;
}
.auth-v3-form .auth-v3-input-group input:focus {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.auth-v3-submit-btn {
    width: 100%;
    padding: 12px;
    background-color: #0d6efd; /* Primary blue */
    border: none;
    color: white;
    font-size: 16px;
    font-weight: 500;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.3s;
}
.auth-v3-submit-btn:hover {
    background-color: #0b5ed7; /* Darker blue */
}

/* Feedback messages */
.auth-feedback-new { padding: 12px 15px; margin-bottom: 20px; border-radius: 6px; font-size: 14px; text-align: center; border-width: 1px; border-style: solid; }
.auth-feedback-new.success { background-color: #d1e7dd; color: #0f5132; border-color: #badbcc;}
.auth-feedback-new.error { background-color: #f8d7da; color: #842029; border-color: #f5c2c7;}
.auth-feedback-new.info { background-color: #cce5ff; color: #084298; border-color: #b6d4fe;}
.auth-feedback-new a { color: inherit; font-weight: bold; text-decoration: underline;}

small.error-text-v3 {
    display: block;
    font-size: 12px;
    color: #dc3545;
    margin-top: 4px;
}

/* Dark Mode for Auth Page V3 */
body.dark-mode .auth-v3-body {
    background-color: #0d1117;
}
body.dark-mode .auth-v3-card {
    background-color: #161b22;
    border-color: #30363d;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
body.dark-mode .auth-v3-tabs {
    border-bottom-color: #30363d;
}
body.dark-mode .auth-v3-tablink {
    color: #8b949e;
}
body.dark-mode .auth-v3-tablink:hover {
    color: #58a6ff;
}
body.dark-mode .auth-v3-tablink.active {
    color: #58a6ff;
    border-bottom-color: #58a6ff;
}
body.dark-mode .auth-v3-tabcontent h3 {
    color: #c9d1d9;
}
body.dark-mode .auth-v3-form .auth-v3-input-group label {
    color: #8b949e;
}
body.dark-mode .auth-v3-form .auth-v3-input-group label i {
    color: #6e7681;
}
body.dark-mode .auth-v3-form .auth-v3-input-group input {
    background-color: #0d1117;
    border-color: #30363d;
    color: #c9d1d9;
}
body.dark-mode .auth-v3-form .auth-v3-input-group input:focus {
    border-color: #58a6ff;
    box-shadow: 0 0 0 0.25rem rgba(88, 166, 253, 0.25);
}
body.dark-mode .auth-v3-submit-btn {
    background-color: #238636; /* GitHub green for dark mode submit */
}
body.dark-mode .auth-v3-submit-btn:hover {
    background-color: #2ea043;
}
body.dark-mode .auth-feedback-new.success { background-color: #0d2818; color: #3ddc84; border-color: #2ea043;}
body.dark-mode .auth-feedback-new.error { background-color: #270f14; color: #ff7b72; border-color: #f85149;}
body.dark-mode .auth-feedback-new.info { background-color: #0c243f; color: #58a6ff; border-color: #316dca;}

















/* === STYLES FOR OTP MODAL (auth_page.php) === */
.auth-v3-modal {
    display: none; 
    position: fixed; z-index: 1002; /* Higher than other elements */
    left: 0; top: 0; width: 100%; height: 100%;
    overflow: auto; background-color: rgba(0,0,0,0.6);
    justify-content: center; align-items: center;
}
.auth-v3-modal-content {
    background-color: #fff;
    padding: 30px 40px;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
    width: 90%; max-width: 420px;
    position: relative;
    text-align: center;
}
.auth-v3-modal-content h3 {
    font-size: 22px; color: #343a40; margin-bottom: 15px;
}
.auth-v3-modal-content p {
    font-size: 15px; color: #495057; margin-bottom: 20px;
}
.auth-v3-close-btn {
    color: #aaa; position: absolute; top: 10px; right: 15px;
    font-size: 28px; font-weight: bold; cursor: pointer;
}
.auth-v3-close-btn:hover { color: #333; }

/* Dark Mode for OTP Modal */
body.dark-mode .auth-v3-modal-content {
    background-color: #161b22;
    border-color: #30363d;
}
body.dark-mode .auth-v3-modal-content h3 { color: #c9d1d9; }
body.dark-mode .auth-v3-modal-content p { color: #8b949e; }
body.dark-mode .auth-v3-close-btn { color: #8b949e; }
body.dark-mode .auth-v3-close-btn:hover { color: #c9d1d9; }


















/* ============================================= */
/* === VIBRANT VIRTUAL CARD & WALLET PAGE STYLES === */
/* ============================================= */

.wallet-page-grid { /* No changes needed here from previous version */ }
.wallet-card-column { /* No changes needed here */ }
.wallet-actions-column { /* No changes needed here */ }
@media (min-width: 768px) { /* No changes needed here */ }
@media (min-width: 992px) { /* No changes needed here */ }

.stylish-virtual-card {
    width: 100%;
    max-width: 400px; /* Slightly wider for more impact */
    min-height: 240px; /* Slightly taller */
    aspect-ratio: 1.586 / 1;
    border-radius: 25px; /* More rounded */
    color: white;
    padding: 30px; /* More padding */
    box-shadow: 0px 15px 35px rgba(0, 0, 0, 0.2);
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease;
    margin-left: auto; 
    margin-right: auto;
    
    /* NEW VIBRANT GRADIENT - Example 1 (Blue/Purple) */
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    /* Example 2 (Teal/Green) */
    /* background: linear-gradient(135deg, #26a0da 0%, #00c292 100%); */
    /* Example 3 (Orange/Red) */
    /* background: linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%); */
}

.stylish-virtual-card:hover {
    transform: translateY(-8px) scale(1.04);
    box-shadow: 0px 22px 45px rgba(0, 0, 0, 0.25);
}

/* More subtle decorative elements */
.stylish-virtual-card::before {
    content: '';
    position: absolute;
    top: -80px;
    left: -80px;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0) 70%);
    opacity: 0.8;
    z-index: 0;
}
.stylish-virtual-card::after {
    content: '';
    position: absolute;
    bottom: -90px;
    right: -60px;
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%);
    opacity: 0.9;
    z-index: 0;
}

.stylish-card-top { /* No significant changes needed, but ensure z-index */
    z-index: 1;
    /* ... other styles from before ... */
}
.stylish-card-brand { /* No significant changes needed */ }
.card-wallet-icon { /* No significant changes needed */
    font-size: 32px; /* Slightly larger icon */
    opacity: 0.6;
}

.stylish-card-balance-section { /* No significant changes needed, but ensure z-index */
    z-index: 1;
    /* ... other styles from before ... */
}
.balance-label {
    font-size: 15px; /* Slightly larger */
    opacity: 0.9;
}
.balance-amount {
    font-size: 40px; /* Larger balance */
    font-weight: 700;
    letter-spacing: 0.5px;
}

.stylish-card-holder { /* No significant changes needed, but ensure z-index */
    z-index: 1;
    font-size: 15px; /* Slightly larger */
}

/* Remove the old balance strip if it's still in HTML */
.current-balance-strip { display: none; }

/* Wallet Actions Card - More distinct styling */
.wallet-actions-column .card {
    background-color: #fff; /* Light mode */
    border: none; /* Remove border for a flatter look */
    box-shadow: 0px 8px 20px rgba(0,0,0,0.08); /* Softer shadow */
}
.wallet-actions-column .card-header h3 {
    color: var(--primary-color, #0d47a1); /* Use theme color for header */
    font-weight: 600;
}
.wallet-actions-column .card-body p {
    color: #666; /* Slightly lighter text */
    margin-bottom: 20px;
}

/* Wallet Action Buttons - Make them more prominent */
.btn-block-custom {
    display: block;
    width: 100%;
    margin-bottom: 12px;
    text-align: left;
    padding: 14px 18px; /* Larger padding */
    font-size: 15px; /* Slightly larger font */
    font-weight: 500;
    border-radius: 8px; /* More rounded */
    transition: all 0.3s ease;
}
.btn-block-custom i { margin-right: 10px; }

.btn-block-custom.btn-success { background-color: #20c997; border-color: #20c997; }
.btn-block-custom.btn-success:hover { background-color: #1baa80; border-color: #1baa80; }

.btn-block-custom.btn-warning { background-color: #ffc107; border-color: #ffc107; color: #212529; }
.btn-block-custom.btn-warning:hover { background-color: #e0a800; border-color: #e0a800; }

.btn-block-custom.btn-info { background-color: #0dcaf0; border-color: #0dcaf0; color: #212529; }
.btn-block-custom.btn-info:hover { background-color: #0baccc; border-color: #0baccc; }


/* Dark Mode for NEW Vibrant Card and Actions */
body.dark-mode .stylish-virtual-card {
    /* NEW DARK MODE GRADIENT - Example 1 (Dark Blue/Purple) */
    background: linear-gradient(135deg, var(--primary-color-dark, #34495e), var(--secondary-color-dark, #2c3e50));
    /* Example 2 (Dark Teal/Indigo) */
    /* background: linear-gradient(135deg, #1d6a89 0%, #3f3d8a 100%); */
    box-shadow: 0px 15px 35px rgba(0, 0, 0, 0.5); /* Stronger shadow for dark mode */
}
body.dark-mode .stylish-virtual-card::before {
    background: radial-gradient(circle, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 70%);
}
body.dark-mode .stylish-virtual-card::after {
    background: radial-gradient(circle, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0) 70%);
}
body.dark-mode .stylish-card-brand, 
body.dark-mode .card-wallet-icon,
body.dark-mode .balance-label,
body.dark-mode .balance-amount,
body.dark-mode .stylish-card-holder {
    color: #f0f0f0; /* Brighter text for dark card */
}
body.dark-mode .balance-label { opacity: 0.7; }


body.dark-mode .wallet-actions-column .card {
    background-color: #161b22; /* Darker card for actions */
    box-shadow: 0px 8px 20px rgba(0,0,0,0.2);
}
body.dark-mode .wallet-actions-column .card-header h3 {
    color: var(--secondary-color, #58a6ff); /* Use theme secondary for header */
}
body.dark-mode .wallet-actions-column .card-body p {
    color: #8b949e;
}

/* Ensure button colors are distinct in dark mode too */
body.dark-mode .btn-block-custom.btn-success { background-color: #28a745; color:white;}
body.dark-mode .btn-block-custom.btn-warning { background-color: #ffc107; color: #212529;}
body.dark-mode .btn-block-custom.btn-info { background-color: #0dcaf0; color: #212529;}








/* === Styles for Wallet Transaction History Page === */
.data-table tr.transaction-credit td {
    /* color: #198754; /* Green text for credit */
    /* font-weight: 500; */
}
.data-table tr.transaction-debit td {
    /* color: #dc3545; /* Red text for debit */
    /* font-weight: 500; */
}

/* For better visual distinction, you can highlight the amount cell */
.data-table tr.transaction-credit td:nth-child(3) { /* Assuming Amount is the 3rd column */
    color: #198754; /* Green text for credit amount */
    font-weight: bold;
}
.data-table tr.transaction-debit td:nth-child(3) { /* Assuming Amount is the 3rd column */
    color: #dc3545; /* Red text for debit amount */
    font-weight: bold;
}

/* Dark Mode adjustments for credit/debit rows if needed */
body.dark-mode .data-table tr.transaction-credit td:nth-child(3) {
    color: #28a745; /* Brighter Green for dark mode */
}
body.dark-mode .data-table tr.transaction-debit td:nth_child(3) {
    color: #ff4d4f; /* Brighter Red for dark mode */
}

/* Status badges are already styled (status-success, status-danger, status-warning)
   Ensure these classes provide good contrast in both light and dark modes.
   Example:
*/
body.dark-mode .status-badge.status-success { background-color: #238636; color: #7ee787; }
body.dark-mode .status-badge.status-danger  { background-color: #da3633; color: #ffa198; }
body.dark-mode .status-badge.status-warning { background-color: #a08000; color: #f0e68c; }


/* === Styles for Stylish Payment Page === */
.payment-page-card .card-body {
    padding: 30px;
}
.payment-page-card .form-control.large-input {
    font-size: 1.5rem;
    padding: 0.75rem 1rem;
    height: auto;
    text-align: center;
    margin-bottom: 25px; /* Space below amount input */
}
.payment-options-grid { /* Re-using this class, styles might change */
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); /* Adjust minmax for card size */
    gap: 20px;
}
button.payment-gateway-button { /* Changed from div to button for direct submission */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 15px;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    background-color: #fff;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 150px; /* Give some height */
    width: 100%; /* Full width of grid cell */
    color: #333; /* Reset button text color */
}
button.payment-gateway-button:hover {
    border-color: var(--primary-color, #007bff);
    box-shadow: 0 4px 15px rgba(0, 123, 255, 0.1);
    transform: translateY(-3px);
}
.pg-logo {
    max-height: 45px;
    max-width: 100px;
    margin-bottom: 12px;
    object-fit: contain;
}
.pg-name {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 5px;
}
.pg-description, .pg-instructions {
    font-size: 12px;
    color: #777;
    line-height: 1.4;
}
.pg-instructions {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed #eee;
    text-align: left;
    white-space: pre-wrap; /* To respect newlines in instructions */
}

/* Dark Mode for Payment Page Options */
body.dark-mode button.payment-gateway-button {
    background-color: #161b22;
    border-color: #30363d;
    color: #c9d1d9;
}
body.dark-mode button.payment-gateway-button:hover {
    border-color: var(--secondary-color, #58a6ff);
    box-shadow: 0 4px 15px rgba(88, 166, 255, 0.15);
}
body.dark-mode .pg-name { color: #e0e0e0; }
body.dark-mode .pg-description, 
body.dark-mode .pg-instructions { color: #8b949e; }
body.dark-mode .pg-instructions { border-top-color: #30363d; }




/* === Styles for Operator Plans Page Price Tags === */
.operator-plan-card .card-header .plan-price-tag {
    font-size: 14px;
    font-weight: 500;
    color: var(--primary-color, #007bff); /* Or a distinct color */
    margin-top: 5px;
}
body.dark-mode .operator-plan-card .card-header .plan-price-tag {
    color: var(--secondary-color, #58a6ff);
}
.total-price-display {
    margin-top: 20px;
    padding: 15px;
    background-color: #f0f3f8; /* Light background for light mode */
    border-radius: 6px;
    text-align: center;
}
.total-price-display h4 {
    margin: 0;
    font-size: 18px;
    color: #333;
}
.total-price-display span {
    font-weight: 700;
    color: var(--primary-color, #007bff);
}
body.dark-mode .total-price-display {
    background-color: #0d1117; /* Dark background for dark mode */
}
body.dark-mode .total-price-display h4 {
    color: #c9d1d9;
}
body.dark-mode .total-price-display span {
    color: var(--secondary-color, #58a6ff);
}












/* === Styles for Admin User Details Page (admin/view_user_details.php) === */
.page-title .btn-secondary { /* Style for "Back to User List" button */
    padding: 8px 15px;
}
.icon-header {
    margin-right: 8px;
    color: var(--primary-color, #0d47a1); /* Use theme color */
}
body.dark-mode .icon-header {
    color: var(--secondary-color, #58a6ff);
}

.user-info-card-body p {
    margin-bottom: 12px;
    font-size: 15px;
    line-height: 1.6;
}
.user-info-card-body p strong {
    font-weight: 500;
    min-width: 120px; /* Align labels a bit */
    display: inline-block;
}

.wallet-summary-card-body {
    text-align: center;
}
.wallet-balance-prominent {
    font-size: 36px;
    font-weight: 700;
    color: var(--primary-color, #007bff);
    margin: 10px 0 5px 0;
}
body.dark-mode .wallet-balance-prominent {
    color: #58a6ff;
}
.current-balance-text {
    font-size: 14px;
    color: #6c757d;
    margin-bottom: 20px;
}
body.dark-mode .current-balance-text {
    color: #8b949e;
}

.admin-actions-card-body .btn {
    margin-bottom: 5px; /* For small screens if buttons wrap */
}

.placeholder-text {
    color: #777;
    font-style: italic;
    text-align: center;
    padding: 20px 0;
}
body.dark-mode .placeholder-text {
    color: #8b949e;
}

/* Ensure .btn-block-custom from user wallet page is available if needed */
.btn-block-custom {
    display: block;
    width: 100%;
    text-align: left;
    padding: 12px 15px;
}
.btn-block-custom i {
    margin-right: 8px;
}















/* === General Content Grid Layout === */
.content-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr); /* 12 column grid */
    gap: 25px; /* Space between columns and rows */
    margin-top: 20px;
}

/* Spanning columns */
.grid-col-1 { grid-column: span 1; }
.grid-col-2 { grid-column: span 2; }
.grid-col-3 { grid-column: span 3; }
.grid-col-4 { grid-column: span 4; }
.grid-col-5 { grid-column: span 5; } /* For our 5/7 split */
.grid-col-6 { grid-column: span 6; }
.grid-col-7 { grid-column: span 7; } /* For our 5/7 split */
.grid-col-8 { grid-column: span 8; }
.grid-col-9 { grid-column: span 9; }
.grid-col-10 { grid-column: span 10; }
.grid-col-11 { grid-column: span 11; }
.grid-col-12 { grid-column: span 12; } /* Full width */

/* Responsive adjustments for the grid */
@media (max-width: 991px) { /* Medium devices (tablets, less than 992px) */
    .grid-col-5, .grid-col-7 {
        grid-column: span 12; /* Stack columns on medium screens */
    }
}
@media (max-width: 767px) { /* Small devices (landscape phones, less than 768px) */
    .grid-col-4, .grid-col-8 { /* If you used 4/8 split elsewhere */
        grid-column: span 12; /* Stack columns */
    }
}

/* Ensure cards inside grid columns don't have excessive bottom margin if they are the last child */
.content-grid .grid-col-5 > .card:last-child,
.content-grid .grid-col-7 > .card:last-child {
    margin-bottom: 0; 
}

/* Styles for Admin User Details Page (view_user_details.php) specific elements */
.user-details-page-grid .card { /* Ensure cards on this page don't add extra margin if grid handles gap */
    margin-bottom: 0; 
}
.user-details-page-grid .grid-col-5 .card,
.user-details-page-grid .grid-col-7 .card {
    margin-bottom: 25px; /* Add back margin for cards within these specific columns if needed for spacing between them */
}
.user-details-page-grid .grid-col-5 > .card:last-child,
.user-details-page-grid .grid-col-7 > .card:last-child {
    margin-bottom: 0; /* Remove bottom margin for the last card in each column */
}

/* Styles for icon headers and card bodies as provided before */
.icon-header { margin-right: 8px; color: var(--primary-color, #0d47a1); }
body.dark-mode .icon-header { color: var(--secondary-color, #58a6ff); }
.user-info-card-body p { margin-bottom: 12px; font-size: 15px; line-height: 1.6; }
.user-info-card-body p strong { font-weight: 500; min-width: 120px; display: inline-block; }
.wallet-summary-card-body { text-align: center; }
.wallet-balance-prominent { font-size: 36px; font-weight: 700; color: var(--primary-color, #007bff); margin: 10px 0 5px 0; }
body.dark-mode .wallet-balance-prominent { color: #58a6ff; }
.current-balance-text { font-size: 14px; color: #6c757d; margin-bottom: 20px; }
body.dark-mode .current-balance-text { color: #8b949e; }
.admin-actions-card-body .btn { margin-bottom: 5px; }
.placeholder-text { color: #777; font-style: italic; text-align: center; padding: 20px 0; }
body.dark-mode .placeholder-text { color: #8b949e; }
.btn-block-custom { display: block; width: 100%; text-align: left; padding: 12px 15px; }
.btn-block-custom i { margin-right: 8px; }









/* === Styles for Admin Wallet Transaction History Page === */
.data-table tr.transaction-credit-admin td:nth-child(3) { /* Amount column */
    color: #198754; /* Green text for credit */
    font-weight: bold;
}
.data-table tr.transaction-debit-admin td:nth-child(3) { /* Amount column */
    color: #dc3545; /* Red text for debit */
    font-weight: bold;
}
/* Dark Mode */
body.dark-mode .data-table tr.transaction-credit-admin td:nth-child(3) { color: #28a745; }
body.dark-mode .data-table tr.transaction-debit-admin td:nth_child(3) { color: #ff4d4f; }




/* === Styles for Compact Tables in Admin User Details === */
.compact-table th, .compact-table td {
    padding: 8px 10px; /* Reduced padding */
    font-size: 13px;   /* Smaller font */
}
.operator-logo-list-xs { /* Extra small logo for these tables */
    height: 18px;
    margin-right: 5px;
    vertical-align: middle;
}
.compact-table .status-badge {
    font-size: 11px;
    padding: 3px 7px;
}
.lapu-details-cell .lapu-no-in-history, /* From user history, can be reused */
.compact-table td small {
    font-size: 11px;
    color: #777;
    display: block;
}
body.dark-mode .compact-table td small {
    color: #8b949e;
}





/* === Styles for Admin Manage Users Page === */
.page-title .btn-primary { /* Style for "Add New User" button in title */
    padding: 8px 15px;
}
.user-email-link {
    color: var(--primary-color, #0d6efd);
    text-decoration: none;
    font-weight: 500;
}
.user-email-link:hover {
    text-decoration: underline;
}
body.dark-mode .user-email-link {
    color: var(--secondary-color, #58a6ff);
}

.form-control-sm-admin { /* For the API Operator select dropdown */
    padding: .25rem .5rem;
    font-size: .875rem;
    border-radius: .2rem;
    border: 1px solid #ced4da; /* Light mode */
    background-color: #fff;
    color: #495057;
}
body.dark-mode .form-control-sm-admin {
    background-color: #161b22; /* Dark mode background */
    border-color: #30363d;
    color: #c9d1d9;
}

/* Using existing .action-buttons-group and .action-btn-lapu from lapu_list.php for consistency */
/* Ensure these styles are present in your style.css: */
.action-buttons-group {
    display: flex;
    gap: 5px; 
    align-items: center;
}
.action-btn-lapu { /* Re-using class from lapu_list for similar button style */
    padding: 6px 8px; /* Slightly smaller for admin table */
    font-size: 12px;
    border-radius: 5px;
    cursor: pointer;
    border: 1px solid transparent;
    color: white;
    font-weight: 500;
    transition: opacity 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.action-btn-lapu:hover { opacity: 0.85; }
.action-btn-lapu i { margin-right: 0; font-size: 13px; } /* Adjust icon size if needed */

.action-edit { background-color: #ffc107; color: #212529;} /* Yellow, text dark */
.action-delete { background-color: #dc3545;} /* Red */
.action-view-details { background-color: #0dcaf0; color: #212529;} /* Info Blue, text dark */

body.dark-mode .action-edit { background-color: #ffca2c; color: #212529;}
body.dark-mode .action-delete { background-color: #e74c3c;}
body.dark-mode .action-view-details { background-color: #17a2b8; color:white;}







/* === Styles for Header Wallet Balance (User Panel) === */
.header-actions {
    /* Ensure items are vertically centered if not already */
    align-items: center; 
}
.header-wallet-balance {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background-color: rgba(255, 255, 255, 0.1); /* Light background for visibility on dark header */
    color: #f0f0f0; /* Light text */
    border-radius: 20px; /* Pill shape */
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: background-color 0.3s;
}
.header-wallet-balance:hover {
    background-color: rgba(255, 255, 255, 0.2);
}
.header-wallet-balance i.fa-wallet {
    font-size: 16px;
}

/* Adjustments for Light Mode (if your header actions default to dark text) */
body:not(.dark-mode) .main-content-header .header-wallet-balance {
    background-color: rgba(0, 0, 0, 0.05); /* Darker background for light header */
    color: var(--primary-color, #333); /* Darker text for light header */
}
body:not(.dark-mode) .main-content-header .header-wallet-balance:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

/* Ensure other header action items have consistent styling */
.header-actions .theme-toggle-btn,
.header-actions .profile-dropdown > i.fa-user-circle,
.header-actions > i.fa-gear {
    color: #f0f0f0; /* Default for dark header background */
    font-size: 20px; /* Consistent size */
    padding: 5px; /* Ensure they are clickable */
}
body:not(.dark-mode) .main-content-header .header-actions .theme-toggle-btn,
body:not(.dark-mode) .main-content-header .header-actions .profile-dropdown > i.fa-user-circle,
body:not(.dark-mode) .main-content-header .header-actions > i.fa-gear {
    color: #555; /* Default for light header background */
}








/* === Styles for Dashboard Section Titles === */
.section-title-dashboard {
    font-size: 20px;
    font-weight: 500;
    color: #444; /* Light mode text color */
    margin-top: 30px; /* Space above the title */
    margin-bottom: 15px; /* Space below the title, before the boxes */
    padding-bottom: 10px;
    border-bottom: 1px solid #eee; /* Light mode border */
}

body.dark-mode .section-title-dashboard {
    color: #c9d1d9; /* Dark mode text color */
    border-bottom-color: #30363d; /* Dark mode border */
}

/* Ensure stat boxes have consistent styling */
.stat-box.stat-info-blue {
    background: linear-gradient(45deg, var(--secondary-color, #1e88e5), var(--primary-color, #0d47a1));
    /* Or a fixed blue: background: linear-gradient(45deg, #007bff, #0056b3); */
}
body.dark-mode .stat-box.stat-info-blue {
    background: linear-gradient(45deg, #23313f, #1a2531); /* Example dark blue gradient */
}

/* Make sure all stat boxes are clickable if they are links */
.dashboard-stats-container a.stat-box {
    text-decoration: none;
}




/* ... (inside your alert styles section or at the end) ... */

.alert-info {
    color: #0c5460;
    background-color: #d1ecf1;
    border-color: #bee5eb;
}
body.dark-mode .alert-info {
    color: #90cdf4; /* Lighter blue text for dark mode */
    background-color: #1a2c42; /* Darker blue background */
    border-color: #2c5282;  /* Darker blue border */
}



.page-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.page-title h1 { margin-bottom: 0; } /* Remove default margin if any */
.page-title p { margin-bottom: 0; margin-top: 5px; }
.page-header-actions {
    display: flex;
    gap: 10px;
}






/* === Styles for Toggle Switch (Ensure these are complete) === */
.toggle-switch-container { /* New container for switch and text */
    display: flex;
    align-items: center;
    gap: 8px; /* Space between switch and text */
}
.toggle-switch {
    width: 50px; height: 26px; background-color: #dc3545; /* Red for OFF */
    border-radius: 13px; padding: 3px; cursor: pointer;
    transition: background-color 0.3s; position: relative;
}
.toggle-switch.active { background-color: #28a745; /* Green for ON */ }
.toggle-switch .toggle-knob {
    width: 20px; height: 20px; background-color: white;
    border-radius: 50%; position: absolute; transition: transform 0.3s;
    transform: translateX(0);
}
.toggle-switch.active .toggle-knob { transform: translateX(24px); }
.toggle-status-text {
    font-size: 12px;
    font-weight: 500;
}
body.dark-mode .toggle-status-text { color: #adb5bd; }
body.dark-mode .toggle-switch { /* Adjust OFF color for dark mode if needed */
    background-color: #5A6268; /* Darker grey for OFF in dark mode */
}
body.dark-mode .toggle-switch.active { background-color: #20c997; } /* Brighter green for ON */

/* Operator Logo in List */
.operator-logo-list {
    height: 20px; /* Or your preferred small size */
    margin-right: 5px;
    vertical-align: middle;
}
.operator-cell { /* To ensure logo and text align well */
    display: flex;
    align-items: center;
}



.manual-instructions-box {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    padding: 15px;
    border-radius: 6px;
    white-space: pre-wrap; /* Respects newlines from admin input */
    margin-bottom: 20px;
    line-height: 1.6;
}
body.dark-mode .manual-instructions-box {
    background-color: #0d1117;
    border-color: #30363d;
    color: #c9d1d9;
}










/* === Styles for Manual Payment Instruction Page === */
.manual-payment-grid .card {
    margin-bottom: 0; /* Grid already has gap */
}
.manual-instructions-column .card-body .instruction-intro {
    font-size: 15px;
    margin-bottom: 20px;
    line-height: 1.6;
}
.manual-instructions-box {
    background-color: #f8f9fa; /* Light mode */
    border: 1px solid #e0e4e8;
    padding: 20px;
    border-radius: 8px;
    white-space: pre-wrap; 
    line-height: 1.7;
    font-family: 'Courier New', Courier, monospace; /* Good for bank details */
    font-size: 14px;
}
.payment-summary {
    margin-top: 20px;
}
.payment-summary p {
    font-size: 16px;
    margin-bottom: 8px;
}
.payment-summary .amount-highlight {
    font-size: 1.5em; /* Make amount stand out */
    font-weight: 700;
    color: var(--primary-color, #007bff);
}

.proof-upload-column .form-group {
    margin-bottom: 25px;
}
.proof-upload-column .form-control-file {
    border: 2px dashed #ccc;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.3s;
}
.proof-upload-column .form-control-file:hover {
    border-color: var(--primary-color, #007bff);
}

/* Dark Mode Adjustments */
body.dark-mode .manual-instructions-box {
    background-color: #0d1117; /* Very dark background */
    border-color: #30363d;
    color: #c9d1d9;
}
body.dark-mode .payment-summary .amount-highlight {
    color: var(--secondary-color, #58a6ff);
}
body.dark-mode .proof-upload-column .form-control-file {
    border-color: #30363d;
    background-color: #161b22;
    color: #8b949e;
}
body.dark-mode .proof-upload-column .form-control-file:hover {
    border-color: var(--secondary-color, #58a6ff);
}





/* === Styles for Structured Manual Payment Instructions === */
.manual-instructions-box ul.instruction-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.manual-instructions-box ul.instruction-list li {
    padding: 8px 0;
    border-bottom: 1px dashed #e0e4e8; /* Light mode */
    display: flex; /* For potential alignment if needed */
    font-size: 15px; /* Make it a bit larger */
}
.manual-instructions-box ul.instruction-list li:last-child {
    border-bottom: none;
}
.manual-instructions-box ul.instruction-list li strong {
    min-width: 120px; /* Adjust as needed for label width */
    display: inline-block;
    font-weight: 600;
    color: #333; /* Light mode label color */
}

/* Dark Mode for instruction list */
body.dark-mode .manual-instructions-box ul.instruction-list li {
    border-bottom-color: #30363d;
}
body.dark-mode .manual-instructions-box ul.instruction-list li strong {
    color: #c9d1d9; /* Dark mode label color */
}
body.dark-mode .manual-instructions-box ul.instruction-list li {
     color: #adb5bd; /* Dark mode value color */
}


/* === Status Badges (General - Used in multiple tables) === */
.status-badge {
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.status-success { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb;}
.status-danger  { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb;}
.status-warning { background-color: #fff3cd; color: #856404; border: 1px solid #ffeeba;}
.status-info    { background-color: #d1ecf1; color: #0c5460; border: 1px solid #bee5eb;}
.status-secondary{ background-color: #e2e3e5; color: #383d41; border: 1px solid #d6d8db;} /* Neutral/Grey */

/* Dark Mode for Status Badges */
body.dark-mode .status-badge.status-success { background-color: #198754; color: #fff; border-color:#198754;}
body.dark-mode .status-badge.status-danger  { background-color: #dc3545; color: #fff; border-color:#dc3545;}
body.dark-mode .status-badge.status-warning { background-color: #ffc107; color: #212529; border-color:#ffc107;}
body.dark-mode .status-badge.status-info    { background-color: #0dcaf0; color: #212529; border-color:#0dcaf0;}
body.dark-mode .status-badge.status-secondary{ background-color: #495057; color: #fff; border-color:#495057;}





/* === Styles for Renewal Plans Page & Operator Cell Alignment === */

/* General styling for the table in renewal_plan.php if needed */
/* .data-table { ... } */

/* Specific styling for the operator cell in tables */
.data-table td.operator-cell, 
.data-table th.operator-cell-header { /* Add this class to TH if you want to align header too */
    display: flex;
    align-items: center; /* Vertically align items in the middle */
    gap: 8px; /* Space between logo and name */
    min-width: 150px; /* Give some minimum width to this column */
}

.operator-logo-list { /* This class is used in lapu_list.php and renewal_plan.php */
    height: 50px; /* Adjust as needed */
    width: auto;
    max-width: 40px; /* Prevent very wide logos from breaking layout */
    flex-shrink: 0; /* Prevent logo from shrinking if name is long */
    border-radius: 4px; /* Optional: slightly rounded corners for logo */
    /* border: 1px solid #eee; /* Optional: light border for logos */
}

/* Dark mode specific for operator logo border if you added one */
body.dark-mode .data-table td.operator-cell .operator-logo-list {
    /* border-color: #30363d; */
}

/* Ensure status badges in Renewal Plan table also have good contrast */
body.dark-mode .status-badge.status-success { background-color: #238636; color: #7ee787; }
body.dark-mode .status-badge.status-danger  { background-color: #da3633; color: #ffa198; }
body.dark-mode .status-badge.status-warning { background-color: #a08000; color: #f0e68c; } /* For 'Expires in X days' if it's warning */






/* === Styles for Operator Cell with Slot Info in Lapu List === */
.data-table td.operator-cell {
    display: flex;
    align-items: center;
    gap: 8px;
}
.operator-logo-list { /* This style should already exist */
    height: 50px;
    width: auto;
    max-width: 40px;
    flex-shrink: 0;
    border-radius: 4px;
}
.operator-name-and-slot {
    display: flex;
    flex-direction: column; /* Stack name and slot vertically */
    align-items: flex-start; /* Align text to the left */
}
.operator-name-and-slot span { /* For the operator name */
    font-weight: 500;
    font-size: 14px;
}
.lapu-slot-indicator {
    font-size: 11px;
    color: #777;
    font-style: italic;
}

/* Dark Mode for Slot Indicator */
body.dark-mode .operator-name-and-slot span {
    color: #c9d1d9; /* Main text color for dark mode */
}
body.dark-mode .lapu-slot-indicator {
    color: #8b949e; /* Dimmer text for dark mode */
}






/* === Styles for NEW Wallet Page Layout & Exchange Rates === */
.wallet-page-main-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 30px; /* Gap between card column and rates/actions column */
    align-items: flex-start;
}
.wallet-virtual-card-section {
    grid-column: span 12; /* Full width on small screens */
}
.wallet-info-and-actions-section {
    grid-column: span 12; /* Full width on small screens */
    display: flex;
    flex-direction: column;
    gap: 25px; /* Space between Exchange Rates card and Wallet Actions card */
}

@media (min-width: 992px) { /* Medium screens and up */
    .wallet-virtual-card-section {
        grid-column: span 6; /* Card takes half width */
    }
    .wallet-info-and-actions-section {
        grid-column: span 6; /* Rates/Actions take other half */
    }
}

.exchange-rates-card .card-body {
    padding: 15px 20px; /* Adjust padding */
}
ul.exchange-rates-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
ul.exchange-rates-list li {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px dashed #eee; /* Light mode */
    font-size: 15px;
}
ul.exchange-rates-list li:last-child {
    border-bottom: none;
}
ul.exchange-rates-list li span {
    color: #555; /* Light mode */
}
ul.exchange-rates-list li strong {
    color: var(--primary-color, #007bff); /* Light mode */
    font-weight: 600;
}

/* Dark Mode for Exchange Rates */
body.dark-mode .exchange-rates-card .card-body {
    /* No change needed if card dark mode is generic */
}
body.dark-mode ul.exchange-rates-list li {
    border-bottom-color: #30363d;
}
body.dark-mode ul.exchange-rates-list li span {
    color: #8b949e;
}
body.dark-mode ul.exchange-rates-list li strong {
    color: var(--secondary-color, #58a6ff);
}

/* Ensure previous virtual card styles and wallet action buttons are present */





/* === Styles for NEW Wallet Page Layout & Exchange Rates === */
.wallet-page-main-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr); /* Uses a 12-column grid system */
    gap: 30px; /* Space between the two main columns */
    align-items: flex-start; /* Aligns items at the top of their grid area */
}

.wallet-virtual-card-section {
    grid-column: span 12; /* Full width on small screens */
}

.wallet-info-and-actions-section {
    grid-column: span 12; /* Full width on small screens */
    display: flex;
    flex-direction: column;
    gap: 25px; /* Space between Exchange Rates card and Wallet Actions card if stacked */
}

/* Responsive adjustments for medium screens and up (e.g., tablets and desktops) */
@media (min-width: 992px) { 
    .wallet-virtual-card-section {
        grid-column: span 5; /* Example: Virtual card takes 5 out of 12 columns */
        /* You can adjust this span, e.g., span 6 or span 7, if you want it wider */
    }
    .wallet-info-and-actions-section {
        grid-column: span 7; /* Example: Info/Actions section takes the remaining 7 columns */
        /* Adjust this to complement the above, e.g., span 6 or span 5 */
    }
}

/* Ensure the stylish virtual card itself centers within its column if the column is wider */
.stylish-virtual-card {
    /* ... (all your other stylish card properties: width, max-width, aspect-ratio, etc.) ... */
    margin-left: auto; 
    margin-right: auto; 
    /* For very specific left alignment if needed, and if parent (.wallet-virtual-card-section) has padding: */
    /* margin-left: 0; margin-right: auto; */
}

/* ... (Rest of your styles for .stylish-virtual-card, .exchange-rates-card, .wallet-actions-card etc.) ... */








/* ============================================= */
/* === VIBRANT VIRTUAL CARD & WALLET PAGE STYLES === */
/* ============================================= */

.wallet-page-grid { /* ... */ }
.wallet-card-column { /* ... */ }
.wallet-actions-column { /* ... */ }
/* ... responsive @media queries for grid ... */

.stylish-virtual-card { /* THIS IS THE MAIN CARD STYLE */
    width: 100%;
    max-width: 400px; 
    min-height: 240px; 
    aspect-ratio: 1.586 / 1;
    border-radius: 25px;
    color: white;
    padding: 30px; 
    box-shadow: 0px 15px 35px rgba(0, 0, 0, 0.2);
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease;
    margin-left: auto; 
    margin-right: auto;
    background: linear-gradient(135deg, var(--primary-color, #2980b9), var(--secondary-color, #2c3e50));
}
.stylish-virtual-card:hover { /* ... */ }
.stylish-virtual-card::before { /* ... */ }
.stylish-virtual-card::after { /* ... */ }
.stylish-card-top { /* ... */ }
.stylish-card-brand { /* ... */ }
.card-wallet-icon { /* ... */ }
.stylish-card-balance-section { /* ... */ }
.balance-label { /* ... */ }
.balance-amount { /* ... */ }
.stylish-card-holder { /* ... */ }

/* Wallet Actions Card Styling */
.wallet-actions-card .card-body .btn-block-custom { /* Target buttons specifically in this card */
    display: block;
    width: 100%;
    margin-bottom: 12px;
    text-align: left; 
    padding: 14px 18px; 
    font-size: 15px; 
    font-weight: 500;
    border-radius: 8px; 
    transition: all 0.3s ease;
}
.wallet-actions-card .card-body .btn-block-custom i { margin-right: 10px; }

/* ... (Exchange Rates List styles) ... */
/* ... (Dark Mode styles for all these elements) ... */





/* === Styles for Header Notification Bell (Admin Panel) === */
.header-actions .header-notification-bell {
    position: relative;
    color: #f0f0f0; /* Default for dark header background */
    font-size: 20px;
    padding: 5px;
    text-decoration: none;
}
body:not(.dark-mode) .main-content-header .header-actions .header-notification-bell {
    color: #555; /* Default for light header background */
}
.notification-badge {
    position: absolute;
    top: 0px;
    right: -2px;
    background-color: #dc3545; /* Red */
    color: white;
    border-radius: 50%;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: bold;
    line-height: 1;
    border: 1px solid #fff; /* White border for separation */
}
body.dark-mode .notification-badge {
    border-color: #161b22; /* Dark border for dark mode */
}























/* --- Custom Stylish Alert CSS --- */

/* The main container for the alert */
#customAlert {
    position: fixed; /* Page oda float aagum */
    top: 0;
    left: 50%;
    transform: translate(-50%, -150%); /* Start off-screen */
    padding: 15px 25px;
    border-radius: 8px;
    background-color: #fff;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    gap: 15px;
    z-index: 9999; /* Make sure it's on top of everything */
    opacity: 0;
    visibility: hidden;
    transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
    min-width: 300px;
    border-left: 5px solid #6c757d; /* Default border color */
}

/* When the alert is shown */
#customAlert.show {
    transform: translate(-50%, 20px); /* Slide down to 20px from top */
    opacity: 1;
    visibility: visible;
}

/* Icon styles */
#customAlert .alert-icon {
    font-size: 24px;
}

/* Message styles */
#customAlert .alert-message {
    font-size: 16px;
    font-weight: 500;
}

/* Close button */
#customAlert .alert-close {
    position: absolute;
    top: 5px;
    right: 10px;
    background: none;
    border: none;
    font-size: 20px;
    color: #888;
    cursor: pointer;
}
#customAlert .alert-close:hover {
    color: #333;
}


/* --- Different Alert Types (Colors & Icons) --- */

/* Success (Green) */
#customAlert.alert-success {
    border-left-color: #28a745;
}
#customAlert.alert-success .alert-icon {
    color: #28a745;
}

/* Error (Red) */
#customAlert.alert-error {
    border-left-color: #dc3545;
}
#customAlert.alert-error .alert-icon {
    color: #dc3545;
}

/* Warning (Yellow) */
#customAlert.alert-warning {
    border-left-color: #ffc107;
}
#customAlert.alert-warning .alert-icon {
    color: #ffc107;
}

/* Info (Blue) */
#customAlert.alert-info {
    border-left-color: #17a2b8;
}
#customAlert.alert-info .alert-icon {
    color: #17a2b8;
}



















/* --- PUDHU STYLISH TOAST NOTIFICATION CSS --- */

/* The container that holds all the toasts */
#toastContainer {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Individual Toast Notification */
.toast {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 16px;
    border-radius: 8px;
    background-color: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-left: 5px solid; /* This border will get the color */
    min-width: 320px;
    opacity: 0;
    transform: translateX(110%); /* Start off-screen */
    animation: toast-in-right 0.5s forwards;
    position: relative; /* For the progress bar */
    overflow: hidden; /* For the progress bar */
}

/* Animation to bring the toast in */
@keyframes toast-in-right {
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Animation to hide the toast */
.toast.hide {
    animation: toast-out-right 0.5s forwards;
}
@keyframes toast-out-right {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(110%);
        opacity: 0;
    }
}


/* --- Different Toast Types (Colors & Icons) --- */
.toast.success { border-left-color: #28a745; }
.toast.success .toast-icon { color: #28a745; }

.toast.error { border-left-color: #dc3545; }
.toast.error .toast-icon { color: #dc3545; }

.toast.warning { border-left-color: #ffc107; }
.toast.warning .toast-icon { color: #ffc107; }

.toast.info { border-left-color: #17a2b8; }
.toast.info .toast-icon { color: #17a2b8; }

/* Icon Style */
.toast-icon {
    font-size: 24px;
}
/* Message Style */
.toast-message {
    font-size: 16px;
    font-weight: 500;
    color: #333;
}
/* Close Button */
.toast-close {
    position: absolute;
    top: 5px;
    right: 10px;
    background: none;
    border: none;
    font-size: 20px;
    color: #aaa;
    cursor: pointer;
}
.toast-close:hover { color: #555; }

/* Progress Bar */
.toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 4px;
    width: 100%;
    background-color: rgba(0,0,0,0.1);
    animation: progress-bar-animation 5s linear forwards;
}
@keyframes progress-bar-animation {
    from { width: 100%; }
    to { width: 0%; }
}









/* --- FINAL STYLISH TOAST NOTIFICATION CSS (No Conflicts) --- */

/* The container that holds all the toasts */
#customToastContainer {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Individual Toast Notification */
.custom-toast {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 6px;
    background-color: #ffffff;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    border: 1px solid #e7eaf3;
    border-left-width: 5px;
    width: 350px;
    opacity: 0;
    transform: translateX(120%);
    animation: toast-in-right 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    position: relative;
    overflow: hidden;
}

/* Animation to bring the toast in */
@keyframes toast-in-right {
    to { transform: translateX(0); opacity: 1; }
}

/* Animation to hide the toast */
.custom-toast.hide {
    animation: toast-out-right 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards;
}
@keyframes toast-out-right {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(120%); opacity: 0; }
}

/* --- Toast Types (Colors & Icons) --- */
.custom-toast.success { border-left-color: #28a745; }
.custom-toast.success .toast-icon { color: #28a745; }
.custom-toast.success .toast-progress { background-color: #28a745; }

.custom-toast.error { border-left-color: #dc3545; }
.custom-toast.error .toast-icon { color: #dc3545; }
.custom-toast.error .toast-progress { background-color: #dc3545; }

.custom-toast.info { border-left-color: #17a2b8; }
.custom-toast.info .toast-icon { color: #17a2b8; }
.custom-toast.info .toast-progress { background-color: #17a2b8; }

/* Icon Style */
.toast-icon {
    font-size: 22px;
}
/* Message Style */
.toast-message {
    font-size: 15px;
    font-weight: 500;
    color: #3d3d3d;
}
/* Close Button */
.toast-close {
    position: absolute;
    top: 4px;
    right: 8px;
    background: none; border: none; font-size: 18px;
    color: #aeaeae; cursor: pointer;
}
.toast-close:hover { color: #555; }

/* Progress Bar */
.toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    width: 100%;
    animation: progress-bar-animation 5s linear forwards;
}
@keyframes progress-bar-animation {
    from { width: 100%; }
    to { width: 0%; }
}






/* === Styles for Custom Country Select (Added by Gemini) === */
.custom-country-select {
    position: relative;
    width: 100%;
}

#signup-country-select-display {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ced4da;
    border-radius: 6px;
    font-size: 15px;
    box-sizing: border-box;
    background-color: #fff;
    cursor: pointer;
    transition: border-color 0.3s, box-shadow 0.3s;
}

#signup-country-select-display:focus {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.custom-country-select.disabled #signup-country-select-display {
    background-color: #e9ecef;
    cursor: not-allowed;
}

.country-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    border: 1px solid #ced4da;
    border-radius: 6px;
    background-color: #fff;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    z-index: 1000; /* Increased z-index */
    display: none; /* Hidden by default */
    max-height: 250px; /* Increased max-height for more options */
    overflow-y: auto;
}

.country-dropdown.show {
    display: block;
}

.country-search {
    width: calc(100% - 20px);
    padding: 10px;
    margin: 10px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 14px;
    box-sizing: border-box;
}

.country-options {
    padding: 0 10px 10px 10px;
}

.country-option {
    padding: 10px;
    cursor: pointer;
    font-size: 15px;
    color: #333;
    border-radius: 4px;
}

.country-option:hover, .country-option.selected {
    background-color: #e9ecef;
    color: #0d6efd;
}

/* Dark Mode for Custom Country Select */
body.dark-mode .custom-country-select #signup-country-select-display {
    background-color: #0d1117;
    border-color: #30363d;
    color: #c9d1d9;
}

body.dark-mode .custom-country-select #signup-country-select-display:focus {
    border-color: #58a6ff;
    box-shadow: 0 0 0 0.25rem rgba(88, 166, 253, 0.25);
}

body.dark-mode .custom-country-select.disabled #signup-country-select-display {
    background-color: #161b22;
}

body.dark-mode .country-dropdown {
    background-color: #161b22;
    border-color: #30363d;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

body.dark-mode .country-search {
    background-color: #0d1117;
    border-color: #30363d;
    color: #c9d1d9;
}

body.dark-mode .country-option {
    color: #c9d1d9;
}

body.dark-mode .country-option:hover, body.dark-mode .country-option.selected {
    background-color: #21262d;
    color: #58a6ff;
}























/* --- Customer Messages Page Styles (admin/customer_messages.php) --- */
.user-chat-section {
    border: 1px solid #e9ecef;
    border-radius: 10px;
    margin-bottom: 20px;
    overflow: hidden;
}

.user-chat-header {
    background-color: #f8f9fa;
    padding: 15px 20px;
    cursor: pointer;
    border-bottom: 1px solid #e9ecef;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.user-chat-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #333;
}

.user-chat-header h3 i {
    margin-right: 10px;
    color: #1e88e5;
}

.user-chat-history-body {
    padding: 20px;
    background-color: #fff;
}

.chat-history-admin {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.chat-message {
    display: flex;
    margin-bottom: 10px;
}

.chat-message.received {
    justify-content: flex-start;
}

.chat-message.sent {
    justify-content: flex-end;
}

.message-bubble {
    max-width: 70%;
    padding: 12px 15px;
    border-radius: 15px;
    line-height: 1.5;
    position: relative;
    word-wrap: break-word;
    display: flex;
    flex-direction: column;
}

.chat-message.received .message-bubble {
    background-color: #e0f2f7; /* Light blue for received messages */
    color: #333;
    border-bottom-left-radius: 2px;
}

.chat-message.sent .message-bubble {
    background-color: #1e88e5; /* Primary blue for sent messages */
    color: #fff;
    border-bottom-right-radius: 2px;
}

.message-content {
    margin-bottom: 8px;
    font-size: 15px;
}

.message-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    opacity: 0.8;
    margin-top: 5px;
}

.chat-message.received .message-meta {
    color: #555;
}

.chat-message.sent .message-meta {
    color: rgba(255, 255, 255, 0.8);
}

.message-timestamp {
    white-space: nowrap; /* Prevent wrapping for timestamp */
}

.message-actions {
    margin-left: 10px;
}

.chat-photo {
    max-width: 150px;
    height: auto;
    border-radius: 8px;
    margin-top: 10px;
    display: block;
}

.reply-form textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 8px;
    margin-bottom: 10px;
    resize: vertical;
}

.reply-form input[type="file"] {
    margin-bottom: 10px;
}

.reply-form .btn-primary {
    padding: 10px 20px;
    font-size: 14px;
}

/* Dark Mode Styles for Customer Messages */
body.dark-mode .user-chat-section {
    border-color: #30363d;
}

body.dark-mode .user-chat-header {
    background-color: #161b22;
    border-bottom-color: #30363d;
}

body.dark-mode .user-chat-header h3 {
    color: #c9d1d9;
}

body.dark-mode .user-chat-header h3 i {
    color: #58a6ff;
}

body.dark-mode .user-chat-history-body {
    background-color: #0d1117;
}

body.dark-mode .chat-message.received .message-bubble {
    background-color: #161b22;
    color: #c9d1d9;
}

body.dark-mode .chat-message.sent .message-bubble {
    background-color: #238636; /* GitHub green for sent messages */
    color: #fff;
}

body.dark-mode .chat-message.received .message-meta {
    color: #8b949e;
}

body.dark-mode .reply-form textarea {
    background-color: #0d1117;
    border-color: #30363d;
    color: #c9d1d9;
}

body.dark-mode .reply-form input[type="file"] {
    color: #c9d1d9;
}

/* Adjustments for the delete button */
.message-bubble .btn-danger.btn-sm {
    background-color: #dc3545;
    color: white;
    border: none;
    padding: 4px 8px;
    font-size: 11px;
    border-radius: 5px;
    cursor: pointer;
    margin-left: auto; /* Pushes the button to the right */
    display: flex;
    align-items: center;
    gap: 3px;
}

.message-bubble .btn-danger.btn-sm:hover {
    background-color: #c82333;
}

.message-bubble .btn-danger.btn-sm i {
    font-size: 10px;
}

/* Ensure the delete button is part of the meta line */
.message-meta form {
    margin: 0;
}

/* Flexbox for message meta and actions */
.message-meta-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-top: 5px; /* Space between message content and meta */
}