/* ================================
   DARK MODE ROOT
================================ */
body.dark-mode {
    background-color: #121212 !important;
    color: #ffffff !important;
}

/* ================================
   GENERAL TEXT / LINKS / TITLES
================================ */
body.dark-mode a,
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode p,
body.dark-mode span,
body.dark-mode .text-muted {
    color: #ffffff !important;
}

/* ================================
   HEADER
================================ */
body.dark-mode .header {
    background: #1d1d1d !important;
    border-color: #333 !important;
}

/* ================================
   SIDEBAR
===================================
body.dark-mode .sidebar {
    background: #1d1d1d !important;
}

body.dark-mode .sidebar a {
    color: #ccc !important;
}

body.dark-mode .sidebar a:hover,
body.dark-mode .sidebar a.active {
    background: #333 !important;
    color: #fff !important;
}*/

/* ================================
   CARDS / TABLES / MODALS
================================ */
body.dark-mode .card,
body.dark-mode .table,
body.dark-mode .modal-content {
    background: #222 !important;
    color: #fff !important;
    border-color: #444 !important;
}

/* ================================
   TABLE HEADERS
================================ */
table thead th {
    color: #000 !important;
    background: #f1f1f1 !important;
    border-color: #ddd !important;
}

body.dark-mode table thead th {
    background: #e6e6e6 !important;
    color: #000 !important;
}

/* ================================
   BUTTON VISIBILITY FIX
================================ */

/* Default button visibility */
body.dark-mode table tbody tr .btn {
    opacity: 0.8;
    transition: opacity 0.2s;
}

/* Show clearly when hovering */
body.dark-mode table tbody tr:hover .btn {
    opacity: 1 !important;
}

/* =========================================
   ✔ FIXED — bg-success-light BUTTON IN DARK MODE
========================================= */
body.dark-mode .bg-success-light {
    background-color: #3c763d !important;
    color: #ffffff !important;
}

/* Hover better in dark */
body.dark-mode .bg-success-light:hover {
    background-color: #4cae4c !important;
    color: #fff !important;
}

/* =========================================
   ✔ FIXED — bg-warning-light BUTTON IN DARK MODE
========================================= */
body.dark-mode .bg-warning-light {
    background-color: #8a6d3b !important;   /* Dark-friendly amber */
    color: #ffffff !important;              /* Keep text readable */
}

/* Hover styling for better visibility in dark */
body.dark-mode .bg-warning-light:hover {
    background-color: #c0963e !important;
    color: #fff !important;
}

/* =========================================
   ✔ FIXED — badge-light IN DARK MODE
========================================= */
body.dark-mode .badge.badge-light {
    background-color: #555 !important;    /* Dark-friendly grey */
    color: #ffffff !important;            /* White text */
}

/* Hover effect — optional */
body.dark-mode .badge.badge-light:hover {
    background-color: #666 !important;
    color: #ffffff !important;
}

/* =========================================
   ✔ Dark Mode — POS Tabs Background Fix
========================================= */
body.dark-mode .profile-menu {
    background-color: #111 !important;   /* Full black background */
    border-color: #222 !important;
}

body.dark-mode .profile-menu .nav-tabs.nav-tabs-solid .nav-link {
    background-color: #111 !important;   /* Slightly lighter for separation */
}

body.dark-mode .profile-menu .nav-tabs.nav-tabs-solid :hover{
    background-color: #222 !important;   /* Slightly lighter for separation */
}

body.dark-mode .profile-menu .nav-tabs.nav-tabs-solid .nav-link.active {
    background-color: #fb7045 !important;   /* Active tab darker highlight */
}

/* ================================
   FORMS
================================ */
body.dark-mode .form-control {
    background: #1d1d1d !important;
    color: #fff !important;
    border-color: #444 !important;
}

body.dark-mode .form-control::placeholder {
    color: #bbbbbb !important;
}

/* ================================
   DROPDOWN MENU
================================ */
body.dark-mode .dropdown-menu {
    background: #222 !important;
    color: #fff !important;
    border-color: #444 !important;
}

body.dark-mode .dropdown-item {
    color: #e0e0e0 !important;
}

body.dark-mode .dropdown-item:hover {
    background: #333 !important;
    color: #fff !important;
}

/* =========================================
   ✔ Dark Mode — Select & Select2
========================================= */

/* Standard <select> element */
body.dark-mode select.form-control,
body.dark-mode .form-control {
    background-color: #1d1d1d !important;
    color: #ffffff !important;
    border-color: #444 !important;
}

body.dark-mode select.form-control option {
    background-color: #1d1d1d !important;
    color: #ffffff !important;
}

/* =========================================
   ✔ Select2 Main Box
========================================= */
body.dark-mode .select2-container--default .select2-selection--single {
    background-color: #1d1d1d !important;
    border-color: #444 !important;
    color: #ffffff !important;
}

body.dark-mode .select2-container--default .select2-selection__rendered {
    color: #ffffff !important;
}

/* Placeholder text */
body.dark-mode .select2-container--default .select2-selection__placeholder {
    color: #bbbbbb !important;
}

/* Dropdown arrow */
body.dark-mode .select2-container--default .select2-selection__arrow b {
    border-color: #ffffff transparent transparent transparent !important;
}

/* =========================================
   ✔ Select2 Dropdown List
========================================= */
body.dark-mode .select2-container--default .select2-results > .select2-results__options {
    background-color: #1d1d1d !important;
    color: #ffffff !important;
}

body.dark-mode .select2-container--default .select2-results__option {
    background-color: #1d1d1d !important;
    color: #ffffff !important;
}

/* Hover item */
body.dark-mode .select2-container--default .select2-results__option--highlighted {
    background-color: #333 !important;
    color: #fff !important;
}

/* =========================================
   ✔ Dark Mode — Input Group Prefix (e.g., LKR:)
========================================= */
body.dark-mode .input-group-text {
    background-color: #1d1d1d !important;
    color: #ffffff !important;
    border-color: #444 !important;
}

/* ================================
   DATATABLES
================================ */
body.dark-mode .dataTables_wrapper input,
body.dark-mode .dataTables_wrapper select {
    background: #1d1d1d !important;
    color: #fff !important;
    border-color: #444 !important;
}

body.dark-mode .dataTables_wrapper .dataTables_info,
body.dark-mode .dataTables_wrapper .dataTables_paginate a {
    color: #e0e0e0 !important;
}

/* Bootstrap / common pagination */
body.dark-mode .pagination .page-item:not(.active) .page-link {
    color: #000 !important; /* inactive pages black */
}

body.dark-mode .pagination .page-item.active .page-link {
    color: #fff !important; /* current page white */
}

/* DataTables pagination buttons */
body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button:not(.current) {
    color: #000 !important; /* inactive pages black */
}

body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button.current {
    color: #fff !important; /* current page white */
}

/* Extra fallback for any anchors inside pagination */
body.dark-mode .pagination li a,
body.dark-mode .dataTables_wrapper .dataTables_paginate a {
    color: inherit !important; /* use the above rules */
}

/* ================================
   USER MENU
================================ */
body.dark-mode .dropdown-menu .user-header {
    background: #e6e6e6 !important;
    border-bottom: 1px solid #ccc !important;
}

body.dark-mode .user-header .user-text h6,
body.dark-mode .user-header .user-text p {
    color: #000 !important;
}

/* ================================
   PAGE TITLE / BREADCRUMB BLACK IN DARK MODE
================================ */
body.dark-mode .page-title-container h1,
body.dark-mode .page-title-container h5,
body.dark-mode .page-title-container a {
    color: #000 !important; /* force black text */
}

/* ================================
   DARK MODE — Profile Header Background
================================ */
body.dark-mode .profile-header {
    background-color: #1d1d1d !important; /* dark background */
    border-bottom: 1px solid #333 !important; /* optional border */
    color: #ffffff !important; /* text inside stays readable */
}

/* Optional: adjust the Company Name text color */
body.dark-mode .profile-header .user-name {
    color: #ffffff !important;
}

/* Optional: logo container background adjustment if needed */
body.dark-mode .profile-header .profile-image {
    background-color: transparent !important;
}

/* ================================
   DARK MODE — Full-Screen Loader Spinner
================================ */
body.dark-mode #pageLoader {
    background-color: rgba(18, 18, 18, 0.9) !important; /* dark overlay */
}

body.dark-mode #pageLoader .loader-content {
    color: #ffffff !important; /* loading text */
}

body.dark-mode #pageLoader .spinner {
	border: 5px solid #fb7045;
	border-top: 5px solid transparent;
}