/* === Biến màu và theme === */
:root {
    --primary-color: #56a3a6;
    --primary-hover: #4e9294;
    --bs-primary: var(--primary-color);
    --bs-primary-rgb: 86, 163, 166;
    --light-bg: #e7e2dd;
    --dark-bg: #121212;
    --dark-navbar: #1f1f1f;
    --dark-border: #2c2c2c;
    --dark-text: #e0e0e0;
    --danger-color: #d9534f;
    --secondary-color: #6c757d;
}

/* === Cơ bản & Font === */
html {
    font-family: 'Be Vietnam Pro', sans-serif;
    font-size: 14px;
    min-height: 100%;
    position: relative;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

body {
    background-color: var(--light-bg);
    color: #212529;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

/* === Màu sắc & Buttons === */
.text-primary,
.navbar-brand {
    color: var(--primary-color) !important;
    padding: 0;
}

.bg-primary {
    background-color: var(--primary-color) !important;
}

.btn-primary {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

    .btn-primary:hover,
    .btn-primary:focus {
        background-color: var(--primary-hover) !important;
        border-color: var(--primary-hover) !important;
    }

/* === Navbar === */
.navbar {
    background-color: var(--primary-color) !important;
    border-bottom: 3px solid var(--primary-color) !important;
}

    .navbar .nav-link,
    .navbar .navbar-brand,
    .navbar .form-check-label {
        color: white !important;
    }

        .navbar .nav-link:hover,
        .navbar .nav-link.active {
            color: #fdfdfd !important;
            text-decoration: underline;
        }

/* Navbar sáng */
.navbar-light {
    background-color: var(--light-bg) !important;
}

    .navbar-light .nav-link,
    .navbar-light .navbar-brand,
    .navbar-light .form-check-label {
        color: var(--primary-color) !important;
        font-weight: 600;
    }

        .navbar-light .nav-link:hover,
        .navbar-light .nav-link.active {
            color: var(--primary-hover) !important;
            text-decoration: underline;
        }

/* Navbar Responsive */
.small-container {
    max-height: 56px !important;
}

@media (max-width: 991.98px) {
    .navbar .container {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .small-container {
        display: flex;
        justify-content: center;
        width: 100%;
    }

    .navbar-brand {
        margin: 0 auto;
        transform: none;
    }

    .navbar-toggler {
        order: 2;
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
    }

    .navbar-collapse {
        margin-top: 1rem;
    }
}

.navbar-light .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 30 30'%3e%3cpath stroke='%2356a3a6' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-toggler {
    border: none !important;
    box-shadow: none !important;
}

/* === Bảng === */
.table thead {
    background-color: var(--primary-color);
    color: white;
}

.table-bordered > :not(caption) > * > * {
    border-color: var(--primary-color);
}

#rateTiersTable td, #rateTiersTable th {
    vertical-align: middle !important;
    text-align: center;
    white-space: nowrap;
}

/* === Tiêu đề, Modal === */
h1 {
    color: var(--primary-color);
}

.modal-header {
    background-color: var(--primary-color);
    color: white;
    border-bottom: none;
}

.modal-footer .btn-danger {
    background-color: var(--danger-color);
    border-color: var(--danger-color);
}

.modal-footer .btn-secondary {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
}

/* === Logo === */
.logo-dark {
    display: none;
}

body.dark-mode .logo-light {
    display: none !important;
}

body.dark-mode .logo-dark {
    display: block !important;
}

/* === Footer === */
footer {
    background-color: var(--light-bg) !important;
    color: var(--primary-color) !important;
    border-top: 3px solid var(--primary-color) !important;
    font-weight: 600;
}

    footer a {
        color: var(--primary-color) !important;
    }

        footer a:hover {
            color: var(--primary-hover) !important;
            text-decoration: underline;
        }

body.dark-mode footer {
    background-color: var(--dark-navbar) !important;
    color: var(--primary-color) !important;
    border-top: 3px solid var(--primary-color) !important;
}

    body.dark-mode footer a {
        color: var(--primary-color) !important;
    }

        body.dark-mode footer a:hover {
            color: var(--primary-hover) !important;
            text-decoration: underline;
        }

/* === DARK MODE === */
body.dark-mode {
    background-color: var(--dark-bg) !important;
    color: var(--dark-text);
}

    body.dark-mode .navbar {
        background-color: var(--dark-navbar) !important;
        border-bottom: 3px solid var(--primary-color) !important;
    }

    body.dark-mode .nav-link,
    body.dark-mode .navbar-brand,
    body.dark-mode .form-check-label {
        color: var(--primary-color) !important;
        font-weight: 600;
    }

        body.dark-mode .nav-link:hover,
        body.dark-mode .nav-link.active {
            color: var(--primary-hover) !important;
            text-decoration: underline;
        }

    body.dark-mode .btn-outline-secondary {
        color: #ccc;
        border-color: #444;
    }

        body.dark-mode .btn-outline-secondary:hover {
            background-color: #333;
            color: #fff;
        }

    body.dark-mode .form-control,
    body.dark-mode .form-select {
        background-color: #2b2b2b;
        color: var(--dark-text);
        border-color: #444;
    }

        body.dark-mode .form-control::placeholder {
            color: #888;
        }

    body.dark-mode .form-check-label,
    body.dark-mode .text-muted {
        color: #aaa !important;
    }

    body.dark-mode .form-check-input {
        background-color: #555;
        border-color: #666;
    }

        body.dark-mode .form-check-input:checked {
            background-color: var(--primary-color);
            border-color: var(--primary-hover);
        }

    /* Bảng trong dark mode */
    body.dark-mode table,
    body.dark-mode table tbody tr,
    body.dark-mode table td,
    body.dark-mode table th {
        background-color: #1e1e1e !important;
        color: var(--dark-text) !important;
        border-color: #444 !important;
    }

        body.dark-mode table thead,
        body.dark-mode .table-header {
            background-color: #2c2c2c !important;
            color: #fff !important;
        }

        body.dark-mode table tbody tr:nth-child(even) {
            background-color: #1a1a1a !important;
        }

        body.dark-mode table tbody tr:hover {
            background-color: #2a2a2a !important;
        }

    /* Form trong dark mode */
    body.dark-mode form {
        background-color: #1f1f1f !important;
        border-color: #2c2c2c !important;
    }

    body.dark-mode #fee-details {
        background-color: #2c2c2c !important;
        border-color: #555 !important;
        color: var(--dark-text) !important;
    }