:root {
    --bs-body-bg-rgb: 255,255,255;
    --bs-primary-rgb: 0, 123, 255;
    --bs-primary: #2aaea0;
}

body { font-family: 'Poppins', sans-serif; scroll-behavior: smooth; }
h1, h2, h3, h4, h5, h6 { font-weight: 700; }
.section-padding { padding: 80px 0; }
.section-title { font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--bs-primary); margin-bottom: 1rem; }

.navbar-brand { font-size: 1.5rem; }
.nav-link { font-weight: 600; }

.hero-section { background: linear-gradient(45deg, #2aaea0, #0056b3); color: white; padding: 150px 0; text-align: center; }

.program-card { 
    border: none; 
    border-radius: 15px; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.07); 
    padding: 30px; 
    height: 100%;
    border-top: 5px solid var(--bs-primary);
    transition: transform 0.35s cubic-bezier(.25,.8,.25,1), 
                box-shadow 0.35s cubic-bezier(.25,.8,.25,1);
}

.program-card:hover { 
    transform: translateY(-12px); 
    box-shadow: 0 18px 35px rgba(0,0,0,0.12), 0 8px 10px rgba(0,0,0,0.08); 
}

.program-card .program-icon { font-size: 3rem; color: var(--bs-primary); }
.program-card .list-unstyled li { padding-bottom: 0.75rem; }
.program-card .badge { font-size: 0.9rem; padding: 0.5em 0.9em; }

.program-card-wrapper {
    position: relative;
}
.program-disabled {
    filter: grayscale(80%);
    opacity: 0.7;
}
.coming-soon-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    pointer-events: all;
    cursor: not-allowed;
}
.coming-soon-text {
    background-color: #ffc107;
    color: #000;
    font-weight: 700;
    padding: 10px 25px;
    border-radius: 50px;
    font-size: 1.2rem;
    transform: rotate(-15deg);
    border: 3px solid #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    user-select: none;
}
.btn.disabled, .btn:disabled {
        pointer-events: none;
        opacity: 0.65;
}

.menu-item.disabled, .menu-item:disabled {
        pointer-events: none;
        opacity: 0.65;
}

.disabled {
        pointer-events: none;
        opacity: 0.65;
}

.benefits-section { background-color: #f8f9fa; }
.benefit-item { display: flex; align-items: center; margin-bottom: 1rem; }
.benefit-item i { color: #28a745; font-size: 1.5rem; margin-right: 15px; }

.cta-section { background-color: #343a40; color: white; }
.btn { padding: 12px 30px; font-weight: 600; border-radius: 50px; transition: background-color 0.3s, transform 0.3s; }
.btn:hover { transform: scale(1.05);}

.btn-primary {background-color: var(--bs-primary); border-color: var(--bs-primary);}
.btn-primary:hover {background-color: var(--bs-primary); border-color: var(--bs-primary);}

.theme-fab { position: fixed; bottom: 25px; right: 25px; width: 55px; height: 55px; border-radius: 50%; z-index: 1050; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; }

.fade-in-section { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; }
.fade-in-section.is-visible { opacity: 1; transform: translateY(0); }

body, .bg-light, .bg-white, .cta-section { transition: background-color 0.3s ease, color 0.3s ease; }

[data-bs-theme="dark"] {
    --bs-body-bg-rgb: 18, 18, 18;
    --bs-body-color-rgb: 224, 224, 224;
    --bs-primary-rgb: 13, 110, 253;
    --bs-primary: #2aaea0;
}
[data-bs-theme="dark"] .navbar.bg-white { background-color: #1c1c1c !important; }
[data-bs-theme="dark"] .benefits-section { background-color: #1c1c1c !important; }
[data-bs-theme="dark"] .program-card { background-color: #2b2b2b; }
[data-bs-theme="dark"] .cta-section { background-color: #1c1c1c; }
[data-bs-theme="dark"] .coming-soon-overlay { background-color: rgba(18, 18, 18, 0.7); }
[data-bs-theme="dark"] footer { border-top: 1px solid #333; }

/*
========================================
    Register Form Styling
========================================
*/
.register-section {
    background-color: #f8f9fa; /* Or any background you prefer */
    min-height: 100vh;
    display: flex;
    align-items: center;
}

.register-card {
    background-color: #fff;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.07);
    padding: 40px;
    border-top: 5px solid var(--bs-primary);
}

.register-form .form-control {
    height: calc(3.5rem + 2px);
    line-height: 1.25;
    padding: 1rem 1.25rem;
    border-radius: 10px;
    border-color: #ced4da;
}

.register-form .form-control:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

.register-form .form-floating>label {
    padding: 1rem 1.25rem;
}

.register-form .d-grid .btn-primary {
    padding: 14px 30px;
    font-size: 1.1rem;
}

/* Dark Mode Styles for Register Page */
[data-bs-theme="dark"] .register-section {
    background-color: #121212 !important;
}

[data-bs-theme="dark"] .register-card {
    background-color: #2b2b2b;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

[data-bs-theme="dark"] .register-form .form-control {
    background-color: #333;
    border-color: #555;
    color: var(--bs-body-color-rgb);
}

[data-bs-theme="dark"] .register-form .form-control:focus {
    background-color: #333;
    border-color: var(--bs-primary);
    color: var(--bs-body-color-rgb);
}

[data-bs-theme="dark"] .register-form .form-floating>label {
    color: #999;
}


/*
========================================
    Dashboard Page Styling
========================================
*/
.dashboard-body {
    background-color: #f8f9fa;
}

.dashboard-header {
    background: linear-gradient(45deg, #2aaea0, #0056b3);
    color: white;
    padding: 50px 0;
    text-align: center;
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
    margin-bottom: -20px; /* Overlap with main content for a modern look */
    position: relative;
    z-index: 1;
}

.dashboard-header img {
    max-width: 220px;
    margin-bottom: 1rem;
}

.section-dashboard {
    padding: 40px 0 0 0;
}

.dashboard-title {
    font-weight: 700;
    color: var(--bs-primary);
    margin-bottom: 1.5rem;
    font-size: 1.8rem;
    padding-left: 1rem;
}

.dashboard-card {
    background-color: #fff;
    border: none;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.07);
    padding: 25px;
    margin-bottom: 2rem;
    border-top: 5px solid var(--bs-primary);
}

.info-bar {
    background-color: rgba(42, 174, 160, 0.1);
    border-left: 5px solid var(--bs-primary);
    padding: 1.25rem;
    border-radius: 10px;
    margin-bottom: 2rem;
}

.event-card {
    background-color: #f8f9fa;
    border-radius: 10px;
    padding: 1.5rem;
    border: 1px solid #e9ecef;
    height: 100%;
}

.event-card h5 {
    font-weight: 700;
}

.event-card .event-time {
    color: #6c757d;
    font-weight: 600;
    font-size: 0.9rem;
}

.menu-grid {
    display: grid;
    /* Grid 2 kolom untuk mobile */
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.menu-item {
    background-color: #fff;
    border-radius: 15px;
    padding: 25px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.07);
    transition: transform 0.3s cubic-bezier(.25,.8,.25,1), 
                box-shadow 0.3s cubic-bezier(.25,.8,.25,1);
    text-decoration: none;
    color: #212529;
    border-bottom: 4px solid var(--bs-primary);
}

.menu-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.12);
    color: var(--bs-primary);
}

.menu-item i {
    font-size: 3rem;
    color: var(--bs-primary);
    margin-bottom: 1rem;
    display: block; /* Make icon a block element for better spacing */
}

.menu-item span {
    font-weight: 600;
    font-size: 1.1rem;
}

/* Tampilan desktop: 4 kolom */
@media (min-width: 992px) {
    .menu-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/*
========================================
    Dashboard Dark Mode
========================================
*/
[data-bs-theme="dark"] .dashboard-body {
    background-color: #121212;
}

[data-bs-theme="dark"] .dashboard-card,
[data-bs-theme="dark"] .menu-item {
    background-color: #2b2b2b;
}

[data-bs-theme="dark"] .info-bar {
    background-color: rgba(42, 174, 160, 0.15);
}

[data-bs-theme="dark"] .event-card {
    background-color: #333;
    border-color: #444;
}

[data-bs-theme="dark"] .menu-item {
    color: #e0e0e0;
}


/*
========================================
    Payment Page Styling
========================================
*/
.payment-body {
    background-color: #f8f9fa;
}

.payment-header .back-button {
    border-radius: 50px;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.payment-accordion .accordion-item {
    border: none;
    border-radius: 15px !important;
    margin-bottom: 1.5rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.07);
    background-color: #fff;
    border-top: 5px solid var(--bs-primary);
}

.payment-accordion .accordion-button {
    font-weight: 700;
    font-size: 1.2rem;
    color: #343a40;
    background-color: #fff;
    border-radius: 15px !important;
}

.payment-accordion .accordion-button:not(.collapsed) {
    color: var(--bs-primary);
    background-color: #fff;
    box-shadow: none;
}

.payment-accordion .accordion-button:focus {
    box-shadow: none;
    border-color: rgba(0,0,0,.125);
}

/* Custom Accordion Icon */
.payment-accordion .accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%232aaea0'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.status-badge {
    padding: 0.4em 0.9em;
    font-size: 0.85rem;
    font-weight: 700;
    border-radius: 50px;
}

.status-lunas {
    color: #155724;
    background-color: #d4edda;
}

.status-diverifikasi {
    color: #575415;
    background-color: #edecd4;
}

.status-belum-lunas {
    color: #721c24;
    background-color: #f8d7da;
}

.payment-details .list-group-item {
    background-color: transparent;
    border-color: #e9ecef;
    padding-left: 0;
    padding-right: 0;
}

.upload-form {
    background-color: #f8f9fa;
    border: 1px dashed #ced4da;
}

.receipt-thumbnail {
    display: flex;
    align-items: center;
    background-color: #f8f9fa;
    padding: 1rem;
    border-radius: 10px;
    border: 1px solid #e9ecef;
}

.receipt-thumbnail img {
    width: 80px;
    height: auto;
    border-radius: 5px;
    margin-right: 1rem;
    border: 2px solid #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/*
========================================
    Payment Page Dark Mode
========================================
*/
[data-bs-theme="dark"] .payment-body {
    background-color: #121212;
}

[data-bs-theme="dark"] .payment-accordion .accordion-item,
[data-bs-theme="dark"] .payment-accordion .accordion-button {
    background-color: #2b2b2b;
    color: #e0e0e0;
}

[data-bs-theme="dark"] .payment-accordion .accordion-button:not(.collapsed) {
    color: var(--bs-primary);
}

[data-bs-theme="dark"] .payment-accordion .accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%232aaea0'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

[data-bs-theme="dark"] .payment-details .list-group-item {
    border-color: #444;
}

[data-bs-theme="dark"] .status-lunas {
    background-color: #1a3a20;
    color: #a7d7b2;
}

[data-bs-theme="dark"] .status-diverifikasi {
    background-color: #575415;
    color: #edecd4;
}

[data-bs-theme="dark"] .status-belum-lunas {
    background-color: #421e22;
    color: #f1b0b5;
}

[data-bs-theme="dark"] .upload-form,
[data-bs-theme="dark"] .receipt-thumbnail {
    background-color: #333;
    border-color: #555;
}

[data-bs-theme="dark"] .receipt-thumbnail img {
    border-color: #444;
}

/*
========================================
    User Details Page Styling
========================================
*/
.details-body {
    background-color: #f8f9fa;
}

.details-header .back-button {
    border-radius: 50px;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.details-accordion .accordion-item {
    border: none;
    border-radius: 15px !important;
    margin-bottom: 1.5rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.07);
    background-color: #fff;
    border-top: 5px solid var(--bs-primary);
}

.details-accordion .accordion-button {
    font-weight: 700;
    font-size: 1.2rem;
    color: #343a40;
    background-color: #fff;
    border-radius: 15px !important;
}

.details-accordion .accordion-button:not(.collapsed) {
    color: var(--bs-primary);
    background-color: #fff;
    box-shadow: none;
}

.details-accordion .accordion-button:focus {
    box-shadow: none;
    border-color: rgba(0,0,0,.125);
}

/* Menggunakan ikon akordeon yang sama dengan halaman pembayaran */
.details-accordion .accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%232aaea0'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

/* Styling untuk form di dalam akordeon */
.details-accordion .form-label {
    font-weight: 600;
    font-size: 0.9rem;
}

.details-accordion .form-control,
.details-accordion .form-select {
    border-radius: 8px;
    padding: 0.75rem 1rem;
}

.details-accordion .form-control:focus,
.details-accordion .form-select:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

/*
========================================
    User Details Page Dark Mode
========================================
*/
[data-bs-theme="dark"] .details-body {
    background-color: #121212;
}

[data-bs-theme="dark"] .details-accordion .accordion-item,
[data-bs-theme="dark"] .details-accordion .accordion-button {
    background-color: #2b2b2b;
    color: #e0e0e0;
}

[data-bs-theme="dark"] .details-accordion .accordion-button:not(.collapsed) {
    color: var(--bs-primary);
}

[data-bs-theme="dark"] .details-accordion .accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%232aaea0'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

/* Styling untuk form di mode gelap */
[data-bs-theme="dark"] .details-accordion .form-control,
[data-bs-theme="dark"] .details-accordion .form-select {
    background-color: #333;
    border-color: #555;
    color: #e0e0e0;
}

[data-bs-theme="dark"] .details-accordion .form-control:focus,
[data-bs-theme="dark"] .details-accordion .form-select:focus {
    background-color: #333;
    border-color: var(--bs-primary);
    color: #e0e0e0;
}

[data-bs-theme="dark"] .details-accordion .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23e0e0e0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}


/*
========================================
    Document Upload Page Styling (Final)
========================================
*/
.document-body {
    background-color: #f8f9fa;
}

.document-header .back-button {
    border-radius: 50px;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.upload-card {
    background-color: #fff;
    border: none;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.07);
    border-top: 5px solid var(--bs-primary);
    height: 100%;
}

.upload-card .card-body {
    padding: 25px;
    display: flex;
    flex-direction: column;
}

.upload-card .card-title {
    font-weight: 700;
    color: #343a40;
    margin-bottom: 0.25rem;
}

.upload-card .card-subtitle {
    font-size: 0.9rem;
    color: #6c757d;
    margin-bottom: 1rem; /* Memberi jarak sebelum input file */
}

/* Status setelah dokumen diunggah */
.upload-card.uploaded {
    border-top-color: #28a745;
}

.document-preview {
    display: flex;
    align-items: center;
    background-color: #f8f9fa;
    padding: 1rem;
    border-radius: 10px;
    border: 1px solid #e9ecef;
}

.document-preview .img-thumbnail {
    width: 60px;
    height: 60px;
    object-fit: cover;
    margin-right: 1rem;
}

.document-preview .file-info {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.document-preview .file-name {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*
========================================
    Document Upload Dark Mode (Final)
========================================
*/
[data-bs-theme="dark"] .document-body {
    background-color: #121212;
}

[data-bs-theme="dark"] .upload-card {
    background-color: #2b2b2b;
}

[data-bs-theme="dark"] .upload-card .card-title {
    color: #e0e0e0;
}

/* Menyesuaikan input file standar untuk mode gelap */
[data-bs-theme="dark"] .upload-card .form-control {
    background-color: #333;
    border-color: #555;
    color: #e0e0e0;
}

[data-bs-theme="dark"] .document-preview {
    background-color: #333;
    border-color: #444;
}

[data-bs-theme="dark"] .document-preview .img-thumbnail {
    background-color: #444;
    border-color: #555;
}

/*
========================================
    Participant List Page Styling (List View)
========================================
*/
.participant-list-body {
    background-color: #f8f9fa;
}

.page-header .back-button {
    border-radius: 50px;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

/* Styling for the search/filter bar (remains the same) */
.controls-bar.card {
    background-color: #fff;
    border: none;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.07);
    padding: 1rem;
}

.controls-bar .form-control,
.controls-bar .form-select {
    border-radius: 10px;
    padding: 0.75rem 1rem;
}

/* NEW: Styling for each list-item card */
.participant-card-list-item.card {
    background-color: #fff;
    border: 1px solid #e9ecef;
    border-left: 5px solid var(--bs-primary);
    border-radius: 15px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.participant-card-list-item.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.1);
}

.participant-card-list-item .card-body {
    padding: 1rem 1.5rem;
}

/* NEW: Styling for the user avatar */
.participant-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: rgba(var(--bs-primary-rgb), 0.1);
    color: var(--bs-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.2rem;
    flex-shrink: 0; /* Prevents avatar from shrinking */
}

.participant-card-list-item .card-title {
    font-weight: 700;
    color: #343a40;
    font-size: 1.1rem;
}

/* Style for the three-dots menu button */
.participant-card-list-item .btn-icon {
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Base style for the status indicator (reused) */
.card-status {
    padding: 0.75rem 1rem;
    border-radius: 10px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    text-align: center;
}

/* -- Status Color Variations (reused) -- */
.card-status.status-0 { background-color: #e7f3ff; color: #0d6efd; }
.card-status.status-1 { background-color: #e7fbff; color: #008ec2; }
.card-status.status-2 { background-color: #fff8e1; color: #ff9800; }
.card-status.status-3 { background-color: #f3e5f5; color: #9c27b0; }
.card-status.status-4 { background-color: #ede5d4; color: #80571f; }
.card-status.status-5 { background-color: #f8d7da; color: #721c24; }
.card-status.status-6 { background-color: #c6ffbe; color: #1c723c; }
.card-status.status-7 { background-color: #beffce; color: #1c724b; }
.card-status.status-8 { background-color: #beffeb; color: #1c7251; }


/*
========================================
    Participant List Dark Mode (List View)
========================================
*/
[data-bs-theme="dark"] .participant-list-body {
    background-color: #121212;
}

[data-bs-theme="dark"] .controls-bar.card {
    background-color: #2b2b2b;
}

[data-bs-theme="dark"] .controls-bar .form-control,
[data-bs-theme="dark"] .controls-bar .form-select {
    background-color: #333;
    border-color: #555;
    color: #e0e0e0;
}

/* NEW: Dark mode for list item card */
[data-bs-theme="dark"] .participant-card-list-item.card {
    background-color: #2b2b2b;
    border-color: #444;
}

[data-bs-theme="dark"] .participant-card-list-item .card-title {
    color: #e0e0e0;
}

/* NEW: Dark mode for avatar */
[data-bs-theme="dark"] .participant-avatar {
    background-color: rgba(var(--bs-primary-rgb), 0.2);
}

[data-bs-theme="dark"] .participant-card-list-item .btn-icon {
    background-color: #333;
    border-color: #555;
    color: #e0e0e0;
}

/* -- Dark Mode Status Colors (reused) -- */
[data-bs-theme="dark"] .card-status.status-0 { background-color: #0b2545; color: #a5c9ff; }
[data-bs-theme="dark"] .card-status.status-1 { color: #e7fbff; background-color: #008ec2; }
[data-bs-theme="dark"] .card-status.status-2 { background-color: #4d3a00; color: #ffdf99; }
[data-bs-theme="dark"] .card-status.status-3 { color: #f3e5f5; background-color: #9c27b0; }
[data-bs-theme="dark"] .card-status.status-4 { background-color: #9d7a44; color: #fff; }
[data-bs-theme="dark"] .card-status.status-5 { background-color: #421e22; color: #f1b0b5; }
[data-bs-theme="dark"] .card-status.status-6 { color: #c6ffbe; background-color: #1c723c; }
[data-bs-theme="dark"] .card-status.status-7 { color: #beffce; background-color: #1c724b; }
[data-bs-theme="dark"] .card-status.status-8 { color: #beffeb; background-color: #1c7251; }


/*
========================================
    Event Management Page Styling
========================================
*/

/* The event cards reuse .participant-card-list-item, so no new card CSS is needed. */
/* This small addition makes the icon inside the avatar look more balanced. */
.participant-avatar > i {
    font-size: 1.5rem; /* Makes icon slightly larger inside the circle */
    line-height: 1; /* Improves vertical alignment for icons */
}

/* Styling for the form inside the Add/Edit Event modal */
.modal .form-control,
.modal .form-select {
    border-radius: 10px;
    padding: 0.75rem 1rem;
    border-color: #ced4da;
}

.modal .form-control:focus,
.modal .form-select:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

/*
========================================
    Event Management Dark Mode
========================================
*/

/* Styling for Bootstrap Modals in dark mode */
[data-bs-theme="dark"] .modal-content {
    background-color: #2b2b2b;
    color: #e0e0e0;
}

[data-bs-theme="dark"] .modal-header {
    border-bottom-color: #444;
}

[data-bs-theme="dark"] .modal-footer {
    border-top-color: #444;
}

/* Styling for the modal form inputs in dark mode */
[data-bs-theme="dark"] .modal .form-control,
[data-bs-theme="dark"] .modal .form-select {
    background-color: #333;
    border-color: #555;
    color: #e0e0e0;
}

[data-bs-theme="dark"] .modal .form-control:focus,
[data-bs-theme="dark"] .modal .form-select:focus {
    background-color: #333;
    border-color: var(--bs-primary);
}

[data-bs-theme="dark"] .modal .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23e0e0e0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

/*
========================================
    Interview Scheduling Page Styling
========================================
*/

/* The interview cards reuse .participant-card-list-item, so no new card CSS is needed. */

/* Styling for the search results container inside the modal */
.search-results-container {
    max-height: 250px; /* Limit the height */
    overflow-y: auto;   /* Add a scrollbar if content overflows */
    border: 1px solid #dee2e6;
    border-radius: 0.375rem; /* Standard Bootstrap border-radius */
    padding: 0.5rem;
}

.search-results-container .list-group-item {
    padding: 0.75rem 1rem;
    border-radius: 8px !important; /* Override default list-group radius */
    margin-bottom: 0.5rem; /* Add space between items */
    border: none;
    background-color: #f8f9fa;
}
.search-results-container .list-group-item:last-child {
    margin-bottom: 0;
}

.search-results-container .list-group-item-action:hover,
.search-results-container .list-group-item-action:focus {
    background-color: #e9ecef;
    color: #000;
}

/* The form styling within the modal is already handled by the generic
   .modal .form-control styles from the Event Management page. */


/*
========================================
    Interview Scheduling Dark Mode
========================================
*/

[data-bs-theme="dark"] .search-results-container {
    border-color: #444;
}

[data-bs-theme="dark"] .search-results-container .list-group-item {
    background-color: #333;
    color: #e0e0e0;
}

[data-bs-theme="dark"] .search-results-container .list-group-item-action:hover,
[data-bs-theme="dark"] .search-results-container .list-group-item-action:focus {
    background-color: #444;
    color: #fff;
}


/*
========================================
    Message Management Page Styling
========================================
*/

/* Card styles are reused from .participant-card-list-item, so no new CSS is needed there. */

/* Styling for the user search results within the message modal */
#userRecipient .list-group {
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    padding: 0.5rem;
}

#userRecipient .list-group-item {
    padding: 0.75rem 1rem;
    border-radius: 8px !important;
    margin-bottom: 0.5rem;
    border: none;
    background-color: #f8f9fa;
}
#userRecipient .list-group-item:last-child {
    margin-bottom: 0;
}

#userRecipient .list-group-item-action:hover,
#userRecipient .list-group-item-action:focus {
    background-color: #e9ecef;
    color: #000;
}

/* Form styles (input, select, textarea) are already handled by the generic .modal styles. */


/*
========================================
    Message Management Dark Mode
========================================
*/

[data-bs-theme="dark"] #userRecipient .list-group {
    border-color: #444;
}

[data-bs-theme="dark"] #userRecipient .list-group-item {
    background-color: #333;
    color: #e0e0e0;
}

[data-bs-theme="dark"] #userRecipient .list-group-item-action:hover,
[data-bs-theme="dark"] #userRecipient .list-group-item-action:focus {
    background-color: #444;
    color: #fff;
}

/*
========================================
    Payment Verification Page Styling (Grid)
========================================
*/

/* Card styles are reused from .participant-card-list-item. */

/* NEW: The Grid Container */
.verification-grid-container {
    display: grid;
    align-items: center;
    gap: 1.5rem; /* Space between grid items */
    /* Define the columns for desktop view */
    grid-template-columns: 1fr 1fr 1fr 2fr;
}

/* Base style for the verification status badge */
.verification-status {
    padding: 0.6em 1em;
    font-size: 0.85rem;
    font-weight: 700;
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

/* Colors for status badges */
.verification-status.status-pending { color: #856404; background-color: #fff3cd; }
.verification-status.status-verified { color: #155724; background-color: #d4edda; }

/* Styling for the clickable receipt thumbnail */
.receipt-thumbnail-preview {
    display: flex;
    width: 120px;
    height: 60px;
    align-items: center;
    background-color: #f8f9fa;
    padding: 8px;
    border-radius: 10px;
    border: 1px solid #e9ecef;
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}
.receipt-thumbnail-preview:hover { background-color: #e9ecef; border-color: #dee2e6; }
.receipt-thumbnail-preview img { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; margin-right: 10px; flex-shrink: 0; }
.receipt-thumbnail-preview span { font-weight: 600; font-size: 0.9rem; color: #495057; }


/* Responsive Grid: On screens smaller than 992px (Bootstrap's 'lg' breakpoint) */
@media (max-width: 991.98px) {
    .verification-grid-container {
        /* Stack everything into a single column on mobile */
        grid-template-columns: 1fr;
    }

    /* Justify items to the start on mobile for a cleaner look */
    .grid-item--status,
    .grid-item--thumb,
    .grid-item--actions {
        justify-self: start;
    }

    .grid-item--actions {
        width: 100%; /* Make the action buttons container full-width */
    }

    .grid-item--actions .btn {
        flex-grow: 1; /* Make both buttons take equal space */
    }
}


/*
========================================
    Payment Verification Dark Mode (Grid)
========================================
*/
[data-bs-theme="dark"] .verification-status.status-pending { background-color: #4d3a00; color: #ffdf99; }
[data-bs-theme="dark"] .verification-status.status-verified { background-color: #1a3a20; color: #a7d7b2; }
[data-bs-theme="dark"] .receipt-thumbnail-preview { background-color: #333; border-color: #444; }
[data-bs-theme="dark"] .receipt-thumbnail-preview:hover { background-color: #444; border-color: #555; }
[data-bs-theme="dark"] .receipt-thumbnail-preview span { color: #e0e0e0; }

/*
========================================
    Process Visa Page Styling (List View)
========================================
*/
.process-visa-body {
    background-color: #f8f9fa;
}

/* Styling for each list-item card */
.visa-list-item.card {
    background-color: #fff;
    border: 1px solid #e9ecef;
    border-left: 5px solid var(--bs-primary); /* A distinct purple color for this page */
    border-radius: 15px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.visa-list-item.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.1);
}

.visa-list-item .card-body {
    padding: 1rem 1.5rem;
}

.visa-list-item .card-title {
    font-weight: 700;
}

/* Base style for the status indicator */
.visa-status {
    padding: 0.75rem 1rem;
    border-radius: 10px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    white-space: nowrap;
}

/* -- Status Color Variations -- */
.visa-status.status-v-0 { background-color: #fff3cd; color: #856404; }
.visa-status.status-v-1 { background-color: #e7f3ff; color: #0d6efd; }
.visa-status.status-v-2 { background-color: #e5f5e6; color: #27b030; }

/*
========================================
    Process Visa Page Dark Mode (List View)
========================================
*/
[data-bs-theme="dark"] .process-visa-body {
    background-color: #121212;
}

[data-bs-theme="dark"] .visa-list-item.card {
    background-color: #2b2b2b;
    border-color: #444;
}

/* -- Dark Mode Status Colors -- */
[data-bs-theme="dark"] .visa-status.status-v-0 { color: #fff3cd; background-color: #856404; }
[data-bs-theme="dark"] .visa-status.status-v-1 { color: #e7f3ff; background-color: #0d6efd; }
[data-bs-theme="dark"] .visa-status.status-v-2 { color: #e5f5e6; background-color: #27b030; }

/*
========================================
    Program Settings Page Styling
========================================
*/
.program-settings-body {
    background-color: #f8f9fa;
}

.settings-card {
    background-color: #fff;
    border: none;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.07);
    padding: 1.5rem;
    border-top: 5px solid var(--bs-primary);
}

.settings-card .card-title {
    font-size: 1.1rem;
    color: #6c757d;
    font-weight: 600;
}

/* Base style for the registration status indicator */
.registration-status {
    padding: 0.75rem 1.25rem;
    border-radius: 10px;
    font-weight: 700;
    display: inline-flex; /* Use inline-flex to align icon and text */
    align-items: center;
    font-size: 1.2rem;
    margin-top: 0.5rem; /* Add some space from the title */
}

/* Color for the "Open" status */
.registration-status.status-open {
    background-color: #d4edda;
    color: #155724;
}

/* Color for the "Closed" status (for when you implement it) */
.registration-status.status-closed {
    background-color: #f8d7da;
    color: #721c24;
}

/*
========================================
    Program Settings Page Dark Mode
========================================
*/
[data-bs-theme="dark"] .program-settings-body {
    background-color: #121212;
}

[data-bs-theme="dark"] .settings-card {
    background-color: #2b2b2b;
}

[data-bs-theme="dark"] .settings-card .card-title {
    color: #adb5bd;
}

/* -- Dark Mode Status Colors -- */
[data-bs-theme="dark"] .registration-status.status-open {
    background-color: #1a3a20;
    color: #a7d7b2;
}

[data-bs-theme="dark"] .registration-status.status-closed {
    background-color: #421e22;
    color: #f1b0b5;
}


/*
========================================
    Document Log Page Styling
========================================
*/
.document-log-body {
    background-color: #f8f9fa;
}

/* Base style for the document status indicator */
.doc-status {
    padding: 0.75rem 1rem;
    border-radius: 10px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    white-space: nowrap;
}

/* -- Status Color Variations -- */
.doc-status.status-disimpan { background-color: #e7f3ff; color: #0d6efd; } /* Blue */
.doc-status.status-dikirim { background-color: #fff8e1; color: #ff9800; } /* Orange */
.doc-status.status-diterima-kampus { background-color: #d4edda; color: #155724; } /* Green */


/*
========================================
    Document Log Page Dark Mode
========================================
*/
[data-bs-theme="dark"] .document-log-body {
    background-color: #121212;
}

/* -- Dark Mode Status Colors -- */
[data-bs-theme="dark"] .doc-status.status-disimpan { background-color: #0b2545; color: #a5c9ff; }
[data-bs-theme="dark"] .doc-status.status-dikirim { background-color: #4d3a00; color: #ffdf99; }
[data-bs-theme="dark"] .doc-status.status-diterima-kampus { background-color: #1a3a20; color: #a7d7b2; }

/*
========================================
    Admin Analytics Page Styling
========================================
*/
.admin-analytics-body {
    background-color: #f8f9fa;
}

.analytics-card {
    background-color: #fff;
    border: none;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.07);
    border-top: 5px solid var(--bs-primary);
    height: 100%; /* Ensures cards in the same row have equal height */
}

.analytics-card .card-body {
    padding: 1.5rem;
}

/* Wrapper for the icon on the right */
.analytics-icon-wrapper {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0; /* Prevents the icon circle from shrinking */
}

/* The icon itself */
.analytics-icon-wrapper i {
    font-size: 2.5rem;
    color: #fff;
}

/* -- Icon Color Variations -- */
.analytics-icon-wrapper.icon-total { background-color: #0d6efd; } /* Blue */
.analytics-icon-wrapper.icon-lunas { background-color: #198754; } /* Green */
.analytics-icon-wrapper.icon-verifikasi { background-color: #ffc107; } /* Yellow */
.analytics-icon-wrapper.icon-visa { background-color: #9c27b0; } /* Purple */


/*
========================================
    Admin Analytics Page Dark Mode
========================================
*/
[data-bs-theme="dark"] .admin-analytics-body {
    background-color: #121212;
}

[data-bs-theme="dark"] .analytics-card {
    background-color: #2b2b2b;
}

/* In dark mode, we might want slightly different icon background colors for better contrast */
[data-bs-theme="dark"] .analytics-icon-wrapper.icon-total { background-color: #2a79e0; }
[data-bs-theme="dark"] .analytics-icon-wrapper.icon-lunas { background-color: #2a9d63; }
[data-bs-theme="dark"] .analytics-icon-wrapper.icon-verifikasi { background-color: #d9a506; }
[data-bs-theme="dark"] .analytics-icon-wrapper.icon-visa { background-color: #ae40c2; }


/*
========================================
    Export User Page Styling
========================================
*/
.export-user-body {
    background-color: #f8f9fa;
}

/* Reusing a similar card style for consistency */
.export-list-item.card {
    background-color: #fff;
    border: 1px solid #e9ecef;
    border-left: 5px solid var(--bs-primary); /* Blue to indicate data/export action */
    border-radius: 15px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.05);
    transition: background-color 0.2s ease-in-out;
}

/* Highlight card when its checkbox is checked */
.export-list-item:has(.user-checkbox:checked) {
    background-color: #e7f3ff;
}

.export-list-item .card-body {
    padding: 1rem 1.5rem;
}

.export-list-item .card-title {
    font-weight: 700;
}

/* Making checkboxes larger and more clickable */
.export-list-item .form-check-input,
#selectAllCheckbox {
    width: 1.5em;
    height: 1.5em;
    cursor: pointer;
}

/*
========================================
    Export User Page Dark Mode
========================================
*/
[data-bs-theme="dark"] .export-user-body {
    background-color: #121212;
}

[data-bs-theme="dark"] .export-list-item.card {
    background-color: #2b2b2b;
    border-color: #444;
}

[data-bs-theme="dark"] .export-list-item:has(.user-checkbox:checked) {
    background-color: #0b2545;
}

/*
========================================
    Data Visualization Page Styling
========================================
*/
.visualization-body {
    background-color: #f8f9fa;
}

.chart-card {
    background-color: #fff;
    border: none;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.07);
    border-top: 5px solid var(--bs-primary);
    height: 100%;
}

.chart-card .card-body {
    padding: 1.5rem;
}

.chart-card .card-title {
    font-weight: 700;
    color: #343a40;
    margin-bottom: 1.5rem; /* Provides space between title and chart */
}

/*
========================================
    Data Visualization Dark Mode
========================================
*/
[data-bs-theme="dark"] .visualization-body {
    background-color: #121212;
}

[data-bs-theme="dark"] .chart-card {
    background-color: #2b2b2b;
}

[data-bs-theme="dark"] .chart-card .card-title {
    color: #e0e0e0;
}