/* ============================
   Dark Mode Base
============================ */
body.dark-mode {
  background-color: var(--bg-body);
  color: var(--text-white);
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track) !important;
  scrollbar-width: thin;
}

/* ============================
   Typography & Common Text
============================ */
body.dark-mode .header,
body.dark-mode .f-10,
body.dark-mode .account-panel,
body.dark-mode .panel-item,
body.dark-mode .color,
body.dark-mode .bg-white,
body.dark-mode .text-black,
body.dark-mode .f-icon-text {
  color: var(--text-white) !important;
}
body.dark-mode .panel-item:hover,
body.dark-mode .panel-item.active{
  color: var(--clr-success) !important;
}

body.dark-mode img.white-icon {
  filter: brightness(0) invert(1);
}

body.dark-mode .label-text {
  color: var(--text-primary);
}

body.dark-mode .modal-content{
  background-color: var(--clr-gray-darkest) !important;
  color: var(--clr-alice);
}

body.dark-mode .modal-header{
  border-bottom: 1px solid var(--border-default) !important;
}
body.dark-mode .modal-footer{
  border-top: 1px solid var(--border-default) !important;
}
body.dark-mode .f-13{
  color: var(--text-aliceblue);
}




/* ============================
   Tabs
============================ */

body.dark-mode .nav-tabs .nav-link.active {
  color: var(--text-primary);
  background-color: var(--bg-body);
}


/* ============================
   Scroll Buttons
============================ */
body.dark-mode .scroll-btn {
  background-color: #3d3d3d;
}

/* ============================
   Hover Effects
============================ */
body.dark-mode .panel-item:hover,
/* body.dark-mode li:hover > div, */
body.dark-mode .sub-child-item:hover {
  background-color: var(--panel-hover) !important;
}

/* ============================
   Logos
============================ */
body.dark-mode .logo-dark-mode { display: inline; }
body.dark-mode .logo-light-mode { display: none; }

/* ============================
   Form Controls
============================ */
body.dark-mode .form-control-sm,
body.dark-mode .form-control,
body.dark-mode .ng-dropdown-panel,
body.dark-mode .ng-dropdown-panel .ng-dropdown-panel-items .ng-option,
body.dark-mode .ng-select .ng-select-container,

body.dark-mode textarea {
  background-color: var(--bg-body) !important;
  color: var(--text-white) !important;
}
body.dark-mode .form-control:focus{
  box-shadow: none;
  border-color: var(--clr-primary) !important;
}

body.dark-mode .ng-select .ng-input > input {
  color: #ffffff !important;
  caret-color: #ffffff !important;
  background-color: transparent !important;
}

body.dark-mode .bg-q input{
   background-color: var(--bg-body) !important;
  color: var(--text-white) !important;
}

/* Dropdown Hover + Selected */
body.dark-mode .ng-dropdown-panel .ng-dropdown-panel-items .ng-option:hover,
body.dark-mode .ng-select .ng-option:hover {
  background-color: var(--border-default) !important;
  color: var(--text-white) !important;
}
body.dark-mode .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected,
body.dark-mode .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked {
  background-color: var(--text-primary) !important;
}


/* ============================
   Pagination
============================ */
body.dark-mode .page-link {
  background-color: var(--bg-body);
  color: var(--text-white);
}

/* ============================
   Placeholders
============================ */
body.dark-mode .search-box::placeholder {
  color: var(--text-white);
  opacity: 1;
}

/* ============================
   Social Buttons
============================ */
body.dark-mode .socialbuttons .btn-icon {
  transition: background-color 0.3s ease;
}
.socialbuttons .btn-icon.text-primary:hover,
.socialbuttons .btn-icon.text-danger:hover,
.socialbuttons .btn-icon.text-dark:hover,
.socialbuttons .btn-icon.text-primary:last-child:hover {
  background-color: var(--social-hover) !important;
  color: var(--text-white);
}

/* ============================
   Borders
============================ */

body.dark-mode .form-control,
body.dark-mode .ng-dropdown-panel 
{
  border: 1px solid var(--border-default) !important;
}

body.dark-mode .form-control.is-invalid{
  border-color: var(--btn-delt-bg) !important;
}
body.dark-mode div:where(.swal2-container).swal2-center>.swal2-popup {
  background-color: var(--bg-body);
  color: var(--text-aliceblue)
}


body.dark-mode .btn-icon:hover{
  border-color: var(--border-dark);

}

/* ============================
   Scrollbars
============================ */
body.dark-mode ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
body.dark-mode ::-webkit-scrollbar-track {
  background-color: var(--scrollbar-track) !important;
}
body.dark-mode ::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb) !important;
  border-radius: 6px;
}

/* ============================
   Cards
============================ */

body.dark-mode .card .text-primary,
body.dark-mode .card .text-success {
  color: inherit !important;
}
body.dark-mode .card a {
  color: var(--text-white) !important;
  transition: color 0.3s ease, transform 0.3s ease;
  display: inline-block;
}
body.dark-mode .card a:hover {
  transform: scale(1.05);
}



/* ============================
   Select (Bootstrap) Dark Mode
============================ */

body.dark-mode select.form-select {
  background-color: var(--bg-body) !important;
  color: var(--text-white) !important;
  border-color: var(--border-default) !important;
}

/* Options dropdown */
body.dark-mode select.form-select option {
  background-color: var(--bg-body) !important;
  color: var(--text-white) !important;
  border-color: var(--border-default);
}

/* Focus state */
body.dark-mode select.form-select:focus {
  border-color: var(--clr-primary) !important;
  box-shadow: none !important;
}

/* Dropdown arrow (Bootstrap) */
body.dark-mode .form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='white' d='M1.5 5.5l6 6 6-6'/%3e%3c/svg%3e") !important;
}

/* datepicker dark mode */

body.dark-mode .bs-datepicker {
  background: var(--bg-datePicker) !important;
  color: var(--text-white);
}
body.dark-mode .bs-datepicker-body {
  background: var(--bg-datePicker);
  color: var(--text-white);
  border: 1px solid var(--clr-gray-dark)
}

body.dark-mode .bs-datepicker-body table td span {
  color: var(--text-white);
}

body.dark-mode .bs-datepicker-body table td span.disabled {
  color: #9aaec1;
}

body.dark-mode .bs-datepicker-body table td span.is-other-month{
  color: #aaaaaa;
}

body.dark-mode .bs-datepicker-body table td span.selected:hover{
  background: var(--panel-hover);
}


/* =========================
   DEVEXPRESS DARK MODE
========================= */



/* Main Viewer */
body.dark-mode .dx-report-viewer {
  background-color: var(--bg-report) !important;
  color: var(--text-white) !important;
}

/* Toolbar buttons */
body.dark-mode .dxrd-toolbar .dx-button,
body.dark-mode .dxrd-toolbar-wrapper .dx-button {
  color: var(--text-white) !important;
}

body.dark-mode .dx-texteditor-input,
body.dark-mode .dx-selectbox,
body.dark-mode .dx-dropdowneditor-input,
body.dark-mode .dx-menu-item.dx-state-hover ,
body.dark-mode .dx-menu-item, 
body.dark-mode .dx-icon,
body.dark-mode .dx-dropdowneditor-icon,
body.dark-mode .dxrd-toolbar .dx-button,
body.dark-mode .dxrd-toolbar-wrapper .dx-button,
body.dark-mode .dx-dropdownlist-popup-wrapper .dx-list:not(.dx-list-select-decorator-enabled) .dx-list-item-content
{
  color: var(--text-white) !important;
}


body.dark-mode .dx-list-item-selected{
  background-color: var(--clr-success) !important;
}

body.dark-mode .dx-state-hover{
  background-color: var(--panel-hover) !important;
}