/* ===================================================
   Backpack Admin Panel - Custom Theme
   เปลี่ยนธีมสีได้ที่ :root ด้านล่างนี้เลย
   =================================================== */

:root {
    /* === ปรับสีได้ที่นี่ === */
    --color-primary: #164589;
    /* สีหลัก */
    --color-secondary: #ffc726;
    /* สีรอง */

    /* สีที่ derive มาจากสีหลัก (ปรับตามถ้าเปลี่ยน primary) */
    --color-primary-dark: #0f3266;
    --color-primary-light: #1e5ab5;
    --color-primary-lighter: #a6b8d3;

    /* สีที่ derive มาจากสีรอง */
    --color-secondary-dark: #e6b020;
    --color-secondary-light: #fef8e9;
}

/* ===================
   HEADER / NAVBAR
   =================== */
.app-header {
    background-color: var(--color-primary) !important;
    border-bottom: 3px solid var(--color-secondary) !important;
}



.navbar .nav-link:hover {
    color: var(--color-secondary) !important;
}

.navbar-brand img,
.main-header .navbar-brand img {
    max-height: 40px;
}

.app-header.bg-light .navbar-brand {
    opacity: 1;
    justify-content: center;
}

.sidebar.sidebar-pills .nav-link.active,
.sidebar.sidebar-pills .nav-link .nav-icon {
    color: var(--color-primary) !important;
}

.sidebar .nav-link:hover,
.sidebar.sidebar-pills .nav-link:hover,
.sidebar.sidebar-pills .nav-sidebar .nav-item .nav-link:hover {
    color: var(--color-primary) !important;
    background-color: rgba(255, 199, 38, 0.12) !important;
}

.btn-primary,
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: white !important;

}

.btn-primary:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background-color: var(--color-primary-dark) !important;
    border-color: var(--color-primary-dark) !important;
    color: white !important;
}

a {
    color: var(--color-secondary-dark);
}

a:hover {
    color: var(--color-secondary-dark) !important;
}

.page-item.active .page-link {
    background-color: var(--color-primary) !important;
    color: white !important;
}

.page-item.active .page-link:hover {
    background-color: var(--color-primary-dark) !important;
    color: white !important;
}

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

.btn-outline-primary:hover {
    color: white !important;
    background-color: var(--color-primary) !important;
}

table.dataTable.table-striped>tbody>tr:hover {
    background-color: var(--color-secondary-light) !important;
}

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

.text-participants {
    color: var(--color-secondary-dark) !important;
}

.list-group-item-dashboard.active-custom {
    border-left: 4px solid var(--color-primary) !important;
}

.list-group-item-dashboard.active-custom h6 {
    color: var(--color-primary) !important;
}

.form-control:focus,
.dataTables_wrapper .dataTables_length select:focus,
.dataTables_wrapper .dataTables_filter input:focus {
    color: #495057;
    background-color: #FFFFFF;
    border-color: var(--color-primary);
    outline: 0;
    box-shadow: 0 0 0 2px var(--color-primary-lighter);
}

form .select2.select2-container.select2-container--focus,
form .select2.select2-container.select2-container--open {
    background-color: #fff;
    border: 1px solid var(--color-primary) !important;
    box-shadow: 0 0 0 2px var(--color-primary-lighter);
    color: #495057;
    outline: 0;
    border-radius: 4px;
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--color-primary) !important;
    color: white !important;
}

.switch-primary .switch-input:checked+.switch-slider, .switch-input:checked+.switch-slider {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}