/* assets/css/dark-mode.css - CSS สำหรับ Dark Mode */

body.dark-mode {
   /* background-color: #2c3e50;  Dark background */
           background: linear-gradient(135deg, #001224cc, #161616b8, #030e19cc) !important;

    color: #ecf0f1; /* Light text */
}

/* Navbar */
body.dark-mode .navbar {
    background-color: #34495e !important;
    border-bottom: 1px solid #4a627a;
}
body.dark-mode .navbar-brand,
body.dark-mode .navbar-nav .nav-link,
body.dark-mode .navbar-nav .nav-link.active {
    color: #ecf0f1 !important;
}
body.dark-mode .navbar-nav .nav-link:hover {
    color: #bdc3c7 !important;
}

/* Cards */
body.dark-mode .card {
    background-color: #34495e;
    color: #ecf0f1;
    border-color: #4a627a;
}
body.dark-mode .card-header {
    background-color: #2c3e50;
    border-bottom-color: #4a627a;
}

/* Forms */
body.dark-mode .form-control,
body.dark-mode .form-select {
    background-color: #4a627a;
    color: #ecf0f1;
    border-color: #5d748f;
}
body.dark-mode .form-control::placeholder {
    color: #bdc3c7;
}
body.dark-mode .form-control:focus {
    background-color: #4a627a;
    color: #ecf0f1;
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), .25);
}

/* Tables */
body.dark-mode .table {
    color: #ecf0f1;
}
body.dark-mode .table td{
    color: #ecf0f1;
}
body.dark-mode .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: #3e566e;
}
body.dark-mode .table-hover > tbody > tr:hover > * {
    background-color: #4a627a;
}
body.dark-mode .table th, body.dark-mode .table td {
    border-color: #4a627a;
}

/* Buttons */
body.dark-mode .btn-outline-danger {
    color: var(--bs-danger);
    border-color: var(--bs-danger);
}
body.dark-mode .btn-outline-danger:hover {
    background-color: var(--bs-danger);
    color: #fff;
}

/* Dropdowns */
body.dark-mode .dropdown-menu {
    background-color: #34495e;
    border-color: #4a627a;
}
body.dark-mode .dropdown-item {
    color: #ecf0f1;
}
body.dark-mode .dropdown-item:hover,
body.dark-mode .dropdown-item.active {
    background-color: #4a627a;
    color: #ecf0f1;
}
body.dark-mode .dropdown-divider {
    border-top-color: #4a627a;
}

/* Footer */
body.dark-mode .footer {
    background-color: #34495e !important;
    border-top: 1px solid #4a627a;
}
body.dark-mode .footer .text-muted {
    color: #bdc3c7 !important;
}

/* Text colors */
body.dark-mode .text-muted {
    color: #bdc3c7 !important;
}

/* Links */
body.dark-mode a {
    color: #ffffff;; /* Links maintain primary color */
}
body.dark-mode a:hover {
    color: #000000; /* Slightly darker primary */
}