﻿:root {
    /* Light Theme (Default) */
    --color-bg: #f0fdf4; /* light green tint */
    --color-card-bg: #e8f5e9; /* very light green card */
    --color-card-shadow: 0 0 10px rgba(0, 128, 0, 0.1);
    --color-text: #1b3c1b; /* readable dark green text */
    --color-card-header: #43a047; /* stronger green */
    --color-card-header-text: white;
    --color-label: #2e7d32; /* dark green */
    --color-border: #a5d6a7;
    --color-btn-success: #43a047;
    --color-btn-success-hover: #388e3c;
    --color-error: #c62828;
    --color-modal-bg: #f1f8e9;
    --color-modal-text: #2e7d32;
    --color-modal-header: #81c784;
    --color-modal-header-text: #1b3c1b;
    --color-modal-primary: #388e3c;
    --color-alert-info-bg: #dcedc8;
    --color-alert-info-border: #c5e1a5;
    --color-alert-info-text: #33691e;
    /* Dark Theme */
    --dark-color-bg: #0d1f0d;
    --dark-color-card-bg: #1a2e1a;
    --dark-color-card-shadow: 0 0 10px rgba(0, 64, 0, 0.3);
    --dark-color-text: #e0f2e0;
    --dark-color-card-header: #2e7d32;
    --dark-color-card-header-text: white;
    --dark-color-label: #81c784;
    --dark-color-border: #4a7c4a;
    --dark-color-btn-success: #2e7d32;
    --dark-color-btn-success-hover: #43a047;
    --dark-color-error: #ff6b6b;
    --dark-color-modal-bg: #1a2e1a;
    --dark-color-modal-text: #e0f2e0;
    --dark-color-modal-header: #2e7d32;
    --dark-color-modal-header-text: white;
    --dark-color-modal-primary: #43a047;
    --dark-color-alert-info-bg: #2e4a2e;
    --dark-color-alert-info-border: #4a7c4a;
    --dark-color-alert-info-text: #dcedc8;
}

/* Dark Mode Classes */
[data-bs-theme="dark"] {
    --color-bg: var(--dark-color-bg);
    --color-card-bg: var(--dark-color-card-bg);
    --color-card-shadow: var(--dark-color-card-shadow);
    --color-text: var(--dark-color-text);
    --color-card-header: var(--dark-color-card-header);
    --color-card-header-text: var(--dark-color-card-header-text);
    --color-label: var(--dark-color-label);
    --color-border: var(--dark-color-border);
    --color-btn-success: var(--dark-color-btn-success);
    --color-btn-success-hover: var(--dark-color-btn-success-hover);
    --color-error: var(--dark-color-error);
    --color-modal-bg: var(--dark-color-modal-bg);
    --color-modal-text: var(--dark-color-modal-text);
    --color-modal-header: var(--dark-color-modal-header);
    --color-modal-header-text: var(--dark-color-modal-header-text);
    --color-modal-primary: var(--dark-color-modal-primary);
    --color-alert-info-bg: var(--dark-color-alert-info-bg);
    --color-alert-info-border: var(--dark-color-alert-info-border);
    --color-alert-info-text: var(--dark-color-alert-info-text);
}

/* System Preference for Dark Mode */
@media (prefers-color-scheme: dark) {
    :root:not([data-bs-theme="light"]) {
        --color-bg: var(--dark-color-bg);
        --color-card-bg: var(--dark-color-card-bg);
        --color-card-shadow: var(--dark-color-card-shadow);
        --color-text: var(--dark-color-text);
        --color-card-header: var(--dark-color-card-header);
        --color-card-header-text: var(--dark-color-card-header-text);
        --color-label: var(--dark-color-label);
        --color-border: var(--dark-color-border);
        --color-btn-success: var(--dark-color-btn-success);
        --color-btn-success-hover: var(--dark-color-btn-success-hover);
        --color-error: var(--dark-color-error);
        --color-modal-bg: var(--dark-color-modal-bg);
        --color-modal-text: var(--dark-color-modal-text);
        --color-modal-header: var(--dark-color-modal-header);
        --color-modal-header-text: var(--dark-color-modal-header-text);
        --color-modal-primary: var(--dark-color-modal-primary);
        --color-alert-info-bg: var(--dark-color-alert-info-bg);
        --color-alert-info-border: var(--dark-color-alert-info-border);
        --color-alert-info-text: var(--dark-color-alert-info-text);
    }
}

/* Base Styles */
body {
    background-color: var(--color-bg);
    color: var(--color-text);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Card Styles */
.card {
    background-color: var(--color-card-bg);
    border-radius: 8px;
    border: none;
    box-shadow: var(--color-card-shadow);
    color: var(--color-text);
    transition: all 0.3s ease;
}

.card-header {
    background-color: var(--color-card-header);
    color: var(--color-card-header-text);
    font-weight: 600;
    text-align: center;
    transition: all 0.3s ease;
}

/* Form Elements */
.form-label {
    font-weight: 500;
    color: var(--color-label);
}

.form-control,
.form-select {
    border-radius: 6px;
    border: 1px solid var(--color-border);
    background-color: var(--color-card-bg);
    color: var(--color-text);
    transition: all 0.3s ease;
}

/* Buttons */
.btn-success {
    background-color: var(--color-btn-success);
    border-color: var(--color-btn-success);
    transition: all 0.3s ease;
}

    .btn-success:hover {
        background-color: var(--color-btn-success-hover);
        border-color: var(--color-btn-success-hover);
    }

/* Utility Classes */
.text-danger {
    font-size: 0.9rem;
    color: var(--color-error) !important;
}

/* Modal Styles */
.modal-content {
    border-radius: 6px;
    background-color: var(--color-modal-bg);
    color: var(--color-modal-text);
    transition: all 0.3s ease;
}

.modal-header {
    background-color: var(--color-modal-header);
    color: var(--color-modal-header-text);
    transition: all 0.3s ease;
}

.modal-footer .btn-primary {
    background-color: var(--color-modal-primary);
    border-color: var(--color-modal-primary);
    transition: all 0.3s ease;
}

/* Alert Styles */
.alert-info {
    background-color: var(--color-alert-info-bg);
    border-color: var(--color-alert-info-border);
    color: var(--color-alert-info-text);
    transition: all 0.3s ease;
}

/* Responsive Tweaks */
@media (max-width: 576px) {
    .card-header h4,
    .modal-title {
        font-size: 1.1rem;
    }

    .btn {
        font-size: 0.95rem;
    }
}

/* Additional Elements */
#addCampBtn {
    padding: 0.5rem 0.75rem;
}
