/**
 * Gray Theme for UI-VTH Archive
 * Primary Color: #dddddd
 * Darkest Shade: #CCCCCC
 * All colors replaced with various shades of gray
 */

/* ============================================================== */
/* GRAY COLOR PALETTE */
/* ============================================================== */
:root {
    --gray-primary: #dddddd;
    --gray-darkest: #cccccc;     /* Darkest allowed shade */
    --gray-100: #fafafa;
    --gray-200: #f5f5f5;
    --gray-300: #eeeeee;
    --gray-400: #e5e5e5;
    --gray-500: #dddddd;         /* Primary */
    --gray-600: #d5d5d5;
    --gray-700: #cccccc;         /* Darkest */
    --gray-800: #cccccc;         /* Capped at darkest */
    --gray-900: #cccccc;         /* Capped at darkest */

    --text-dark: #555555;
    --text-medium: #777777;
    --text-light: #999999;
    --border-color: #d1d1d1;
}

/* ============================================================== */
/* BOOTSTRAP GRAY OVERRIDES */
/* ============================================================== */

/* Primary becomes gray */
.bg-primary { background-color: #dddddd !important; color: #333333 !important; }
.btn-primary { background-color: #dddddd !important; border-color: #cccccc !important; color: #333333 !important; }
.btn-primary:hover { background-color: #cccccc !important; border-color: #bbbbbb !important; }
.text-primary { color: #6c757d !important; }
.badge-primary { background-color: #dddddd !important; color: #333333 !important; }
.alert-primary { background-color: #e9ecef !important; border-color: #dddddd !important; color: #495057 !important; }

/* Secondary gray */
.bg-secondary { background-color: #cccccc !important; color: #333333 !important; }
.btn-secondary { background-color: #cccccc !important; border-color: #cccccc !important; color: #333333 !important; }
.btn-secondary:hover { background-color: #bbbbbb !important; border-color: #aaaaaa !important; }
.text-secondary { color: #777777 !important; }
.badge-secondary { background-color: #cccccc !important; color: #333333 !important; }

/* Success becomes lighter gray */
.bg-success { background-color: #adb5bd !important; color: #ffffff !important; }
.btn-success { background-color: #adb5bd !important; border-color: #adb5bd !important; color: #ffffff !important; }
.btn-success:hover { background-color: #98a2ac !important; border-color: #8e9ba7 !important; }
.text-success { background-color: #adb5bd !important; color: #ffffff !important; }
.badge-success { background-color: #adb5bd !important; }
.alert-success { background-color: #e9ecef !important; border-color: #ced4da !important; color: #495057 !important; }

/* Info becomes medium gray */
.bg-info { background-color: #ced4da !important; color: #333333 !important; }
.btn-info { background-color: #ced4da !important; border-color: #ced4da !important; color: #333333 !important; }
.btn-info:hover { background-color: #b8bfc6 !important; border-color: #acb5be !important; }
.text-info { color: #6c757d !important; }
.badge-info { background-color: #ced4da !important; color: #333333 !important; }
.alert-info { background-color: #dee2e6 !important; border-color: #ced4da !important; color: #495057 !important; }

/* Warning becomes light gray */
.bg-warning { background-color: #e9ecef !important; color: #495057 !important; }
.btn-warning { background-color: #e9ecef !important; border-color: #dee2e6 !important; color: #495057 !important; }
.btn-warning:hover { background-color: #d4d8dd !important; border-color: #c6cbd1 !important; }
.text-warning { color: #495057 !important; }
.badge-warning { background-color: #e9ecef !important; color: #495057 !important; }
.alert-warning { background-color: #f8f9fa !important; border-color: #dee2e6 !important; color: #495057 !important; }

/* Danger becomes dark gray */
.bg-danger { background-color: #cccccc !important; color: #333333 !important; }
.btn-danger { background-color: #cccccc !important; border-color: #cccccc !important; color: #333333 !important; }
.btn-danger:hover { background-color: #bbbbbb !important; border-color: #aaaaaa !important; }
.text-danger { color: #495057 !important; }
.badge-danger { background-color: #cccccc !important; color: #333333 !important; }
.alert-danger { background-color: #dee2e6 !important; border-color: #adb5bd !important; color: #495057 !important; }

/* Light gray */
.bg-light { background-color: #f8f9fa !important; color: #495057 !important; }
.text-light { color: #f8f9fa !important; }

/* Dark gray */
.bg-dark { background-color: #cccccc !important; color: #333333 !important; }
.text-dark { color: #333333 !important; }

/* ============================================================== */
/* TOPBAR & NAVBAR - Gray Theme */
/* ============================================================== */
.topbar { background-color: #dddddd !important; border-bottom: 1px solid #cccccc !important; }
.topbar .navbar-header { background-color: #dddddd !important; }
.topbar .top-navbar { background-color: #dddddd !important; }
.topbar .navbar-collapse { background-color: #dddddd !important; }
.topbar .navbar-nav .nav-link { color: #333333 !important; }
.topbar .navbar-nav .nav-link:hover { color: #000000 !important; background-color: #cccccc !important; }

/* ============================================================== */
/* SIDEBAR - Gray Theme */
/* ============================================================== */
.left-sidebar { background-color: #dddddd !important; border-right: 1px solid #cccccc !important; }
.sidebar-nav { background-color: #dddddd !important; }
.sidebar-nav ul { background-color: #dddddd !important; }
.sidebar-nav .sidebar-item { border-color: #cccccc !important; }
.sidebar-nav .sidebar-item .sidebar-link { color: #333333 !important; }
.sidebar-nav .sidebar-item .sidebar-link i { color: #555555 !important; }
.sidebar-nav .sidebar-item.selected, .sidebar-nav .sidebar-item:hover { background-color: #cccccc !important; }
.sidebar-nav .has-arrow:after { border-color: #555555 !important; }
.create-btn { background-color: #cccccc !important; border-color: #cccccc !important; color: #333333 !important; }

/* ============================================================== */
/* CARDS - Gray Backgrounds */
/* ============================================================== */
.card { background-color: #ffffff !important; border-color: #dddddd !important; }
.card-header { background-color: #f8f9fa !important; border-bottom-color: #dee2e6 !important; }
.card-footer { background-color: #f8f9fa !important; border-top-color: #dee2e6 !important; }

/* ============================================================== */
/* TABLES - Gray Headers with Better Contrast */
/* ============================================================== */
.table thead th {
    background-color: #cccccc !important;
    color: #333333 !important;
    border-color: #cccccc !important;
    font-weight: 600 !important;
}

/* Extra specific overrides for all table header variations */
table thead th,
table thead td,
.table thead th,
.table thead td,
thead.bg-secondary th,
thead.bg-secondary td,
thead.bg-secondary.text-white th,
thead.bg-secondary.text-white td,
.bg-secondary.text-white th,
.bg-secondary.text-white td {
    background-color: #cccccc !important;
    color: #333333 !important;
    border-color: #cccccc !important;
    font-weight: 600 !important;
}

.table-striped tbody tr:nth-of-type(odd) { background-color: #f8f9fa !important; }
.table-hover tbody tr:hover { background-color: #e9ecef !important; }
.table-bordered { border-color: #dee2e6 !important; }
.table-bordered td, .table-bordered th { border-color: #dee2e6 !important; }

/* ============================================================== */
/* FORMS - Gray Borders */
/* ============================================================== */
.form-control { border-color: #ced4da !important; }
.form-control:focus { border-color: #cccccc !important; box-shadow: 0 0 0 0.2rem rgba(204, 204, 204, 0.25) !important; }
.form-select { border-color: #ced4da !important; }
.form-select:focus { border-color: #cccccc !important; box-shadow: 0 0 0 0.2rem rgba(204, 204, 204, 0.25) !important; }
.input-group-text { background-color: #e9ecef !important; border-color: #ced4da !important; color: #495057 !important; }

/* ============================================================== */
/* PAGINATION - Gray */
/* ============================================================== */
.pagination .page-link { background-color: #ffffff !important; border-color: #dee2e6 !important; color: #495057 !important; }
.pagination .page-link:hover { background-color: #e9ecef !important; border-color: #dee2e6 !important; }
.pagination .page-item.active .page-link { background-color: #cccccc !important; border-color: #cccccc !important; color: #333333 !important; }

/* ============================================================== */
/* FOOTER - Gray Background */
/* ============================================================== */
footer, .footer, #footer { background-color: #dddddd !important; border-top: 1px solid #cccccc !important; color: #495057 !important; }

/* ============================================================== */
/* LINKS - Gray */
/* ============================================================== */
a { color: #495057 !important; }
a:hover { color: #212529 !important; }

/* ============================================================== */
/* PAGE TITLES - Gray Background */
/* ============================================================== */
.page-titles { background-color: #f8f9fa !important; border-bottom: 1px solid #dee2e6 !important; }
.text-themecolor { color: #495057 !important; }

/* ============================================================== */
/* PROGRESS BAR - Gray */
/* ============================================================== */
.progress { background-color: #e9ecef !important; }
.progress-bar { background-color: #cccccc !important; }

/* ============================================================== */
/* DROPDOWN - Gray */
/* ============================================================== */
.dropdown-menu { background-color: #ffffff !important; border-color: #dee2e6 !important; }
.dropdown-item { color: #212529 !important; }
.dropdown-item:hover { background-color: #f8f9fa !important; }

/* ============================================================== */
/* MODAL - Gray Backgrounds */
/* ============================================================== */
.modal-content { background-color: #ffffff !important; border-color: #dee2e6 !important; }
.modal-header { background-color: #f8f9fa !important; border-bottom-color: #dee2e6 !important; }
.modal-footer { background-color: #f8f9fa !important; border-top-color: #dee2e6 !important; }

/* ============================================================== */
/* DATATABLES - Enhanced Contrast */
/* ============================================================== */
.dataTables_wrapper .dataTable thead th,
.dataTables_wrapper .dataTable thead td,
table.dataTable thead th,
table.dataTable thead td {
    background-color: #cccccc !important;
    color: #333333 !important;
    border-color: #cccccc !important;
    font-weight: 600 !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background-color: #cccccc !important;
    border-color: #cccccc !important;
    color: #333333 !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background-color: #e9ecef !important;
    border-color: #ced4da !important;
    color: #495057 !important;
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_processing {
    color: #495057 !important;
}

/* ============================================================== */
/* SCROLLBARS - Gray */
/* ============================================================== */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #f8f9fa; }
::-webkit-scrollbar-thumb { background: #ced4da; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #adb5bd; }