html.dark-theme {
  background: #12181a;
}

/* Default text color */
p {
  color: var(--secondary-color);
}

html.dark-theme main {
  background-color: black;
}

/* Main Component  */
html.dark-theme .main {
  background-color: black;
}
/* SCROLLBAR - DARK THEME (minimal changes) */

.dark-theme {
  scrollbar-color: #666 #2a2a2a;
}

.dark-theme * {
  scrollbar-width: thin;
  scrollbar-color: #888 #2a2a2a;
}

/* Nav bar */
html.dark-theme .topbar {
  background-color: #12181a;
  border-bottom: 1px solid rgb(237 237 237 / 12%);
  box-shadow: 0 0.1rem 0.7rem rgb(0 0 0 / 20%);
}
html.dark-theme .user-box {
  padding-left: 3px;
  padding-right: 3px;
  border-left: 1px solid rgb(255 255 255 / 0.15);
  border-right: 1px solid rgb(255 255 255 / 0.15);
}
html.dark-theme .user-info .user-name {
  color: #e4e5e6;
}
html.dark-theme .user-info .designattion {
  color: #b3b3b3;
}

html.dark-theme .topbar .app-container .app-box:hover {
  cursor: pointer;
  background-color: rgb(255 255 255 / 0.15);
}
html.dark-theme .topbar .navbar .dropdown-menu {
  border: 1px solid rgb(241 241 241 / 15%);
}

/* ================== Small Scrollbar Styling ================== */

html.dark-theme {
  scrollbar-color: #555 #2c2c2c;
  scrollbar-width: thin;
  -ms-overflow-style: auto;
}

html.dark-theme ::-webkit-scrollbar {
  width: 3px;
}

html.dark-theme ::-webkit-scrollbar-track {
  background: #2c2c2c;
}

html.dark-theme ::-webkit-scrollbar-thumb {
  background-color: #555;
  border-radius: 2px;
}

html.dark-theme ::-webkit-scrollbar-thumb:hover {
  background-color: #888;
}

/* ================== Card Components ================== */
html.dark-theme .card {
  background-color: #12181a !important;
  box-shadow: 0 0.1rem 0.7rem rgb(0 0 0 / 20%) !important;
  box-shadow: 10px 10px 10px 10px rgba(10, 9, 10, 0.98);
}
html.dark-theme .card-header {
  border-bottom: 0.5px solid rgb(255 255 255 / 12%);
}
html.dark-theme .card-header,
html.dark-theme .card-footer {
  background: #12181a !important;
}

html.dark-theme .card-title {
  color: white;
}

/* ================== Table Styling ================== */
html.dark-theme table {
  --bg-table-color: #e4e5e6 !important;
}
html.dark-theme .table {
  --bs-table-bg: rgb(12, 12, 12);
  --bg-table-color: white;
  border-color: rgb(255 255 255 / 12%);
  --bs-table-color: #e4e5e6 !important;
  --bs-table-striped-bg: #18191a !important;
  --bs-table-striped-color: white;
}

/* ================== Form Elements ================== */
html.dark-theme .form-control,
html.dark-theme .form-select {
  color: #c0c8d1;
  background-color: #12181a;
  border: 1px solid rgb(255 255 255 / 34%);
}

html.dark-theme input::placeholder,
html.dark-theme textarea::placeholder {
  color: #c0c8d1;
}

html.dark-theme .ng-valid[required],
html.dark-theme .ng-valid.required {
  border-left: 5px solid #42a948; /* green */
}

html.dark-theme .ng-invalid:not(form) {
  border-left: 5px solid #cc1310; /* red */
}

html.dark-theme .inputerror {
  color: #cc1310; /* red */
}
html.dark-theme input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

html.dark-theme .required:after {
  content: " *";
  color: red;
}
html.dark-theme .task-button,
html.dark-theme.search-btn {
  color: white !important;
  background-color: #000 !important  ;
}
html.dark-theme .flex-fill {
  color: white;
}
html.dark-theme .card-body1 {
  background-color: #12181a;
}
html.dark-theme input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  color: white;
  filter: invert(0.8);
}

/* Styling the select dropdown in dark mode without changing the arrow */
html.dark-theme .form-select {
  --bs-form-select-bg-img: url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2216%22 height%3D%2216%22 fill%3D%22white%22 class%3D%22bi bi-chevron-down%22 viewBox%3D%220 0 16 16%22%3E%3Cpath fill-rule%3D%22evenodd%22 d%3D%22M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708%22%2F%3E%3C%2Fsvg%3E");
  background-image: var(--bs-form-select-bg-img);
}

/* ================== Labels and Text ================== */
html.dark-theme label,
html.dark-theme .text-muted {
  color: white !important;
}

/* ================== Sidebar Styling ================== */

html.dark-theme #sidebar {
  box-shadow: 0 0.1rem 0.7rem rgb(0 0 0 / 20%) !important;
  background: #12181a;
  border-right: 1px solid rgb(255 255 255 / 12%);
  border-bottom: 1px solid rgb(255 255 255 / 12%);
}
html.dark-theme #sidebar li a:hover {
  background-color: rgb(255 255 255 / 0.15);
  color: white !important;
}
html.dark-theme #sidebar .logobox {
  border-bottom: 1px solid rgb(255 255 255 / 12%);
  border-right: 1px solid rgb(255 255 255 / 12%);
}
/* ================== Dropdown Menu ================== */
html.dark-theme .dropdown-menu {
  background-color: black;
  border: 1px solid rgb(255 255 255 / 0.15);
}
html.dark-theme .dropdown-menu li a {
  color: #fdfdfd !important;
}
html.dark-theme .dropdown-menu li a:hover {
  background-color: rgb(255 255 255 / 0.15);
  color: white !important;
}
html.dark-theme .dropdown-menu .msg-header {
  background-color: black;
  border-bottom: 1px solid rgb(241 241 241 / 15%);
}
html.dark-theme .dropdown-menu .msg-header:first-child p:first-of-type {
  color: white;
}
html.dark-theme .dropdown-menu .msg-footer {
  border-top: 1px solid rgb(241 241 241 / 15%);
}

html.dark-theme .header-notifications-list .dropdown-item {
  border-bottom: 1px solid rgb(241 241 241 / 15%);
}
html.dark-theme .header-notifications-list .dropdown-item:hover {
  border-bottom: 1px solid rgb(241 241 241 / 15%);
  background-color: #555;
}

/* ================== Modal Styling ================== */

html.dark-theme .modal-header {
  border-bottom: 1px solid rgb(222 226 230 / 16%);
}
html.dark-theme .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}
html.dark-theme .footer {
  background: #12181a;
  border-top: 1px solid rgb(255 255 255 / 12%);
}
html.dark-theme .btn-light-warning {
  color: #ff9305;
}
html.dark-theme .btn-light-dark {
  color: #757c83;
}
html.dark-theme .modal-content {
  background-color: #12181a;
}
html.dark-theme .modal-header {
  border-bottom: 1px solid rgb(222 226 230 / 16%);
}
html.dark-theme .modal-footer {
  border-top: 1px solid rgb(222 226 230 / 16%);
}

/* ================== List Groups ================== */
/* html.dark-theme .list-group-item .list-group {
  background-color: #434344 !important;
} */
html.dark-theme .list-group-item {
  background-color: #161616 !important;
  color: #e4e5e6;
}
html.dark-theme .list-group-item a {
  color: #e4e5e6;
}
html.dark-theme .list-group-item li:hover {
  background-color: #7f8385;
}
html.dark-theme .sidebar-nav1 .sidebar-item a {
  background-color: #383737;
}

/* ================== Miscellaneous ================== */
html.dark-theme footer {
  border: none;
}
html.dark-theme hr {
  color: rgb(255 255 255 / 12%);
  color: white;
}
html.dark-theme .report {
  color: white;
}
/* ================== Tab ================== */
html.dark-theme #myTab {
  border-bottom: 1px solid rgb(255 255 255 / 12%);
}
html.dark-theme .nav-link .nav-item {
  background-color: black;
}
/* alart msg */
html.dark-theme .tooltip-inner {
  background-color: white;
  color: black;
}

html.dark-theme .bs-tooltip-auto[data-popper-placement^="right"],
html.dark-theme .tooltip-arrow::before,
html.dark-theme .bs-tooltip-end {
  /* border-right-color: white !important; */
  border-top-color: white !important;
}

html.dark-theme .task-button {
  background-color: #12181a;
  background-color: var(--primary-color);
}

html.dark-theme .bx-support:before {
  color: white;
}
/* card-table-view */
html.dark-theme .card-view {
  -webkit-box-shadow: 10px 10px 5px 0px rgba(4, 7, 8, 1) !important;
  -moz-box-shadow: 10px 10px 5px 0px rgba(4, 7, 8, 1) !important;
  box-shadow: 10px 10px 5px 0px rgba(4, 7, 8, 1) !important;
  background-color: #424245 !important;
  color: white !important;
}
html.dark-theme .button-1 {
  background-color: #424245;
}
html.dark-theme .button-2 {
  background-color: #424245;
}
html.dark-theme .button-1:hover {
  background-color: #008cff;
  border-color: #008cff;
}

html.dark-theme .button-2:hover {
  background-color: red;
  border-color: red;
}

html.dark-theme .button-position-fiexed {
  position: sticky;
  top: -5px;
  background: #424245;
  z-index: 1;
  padding: 2px 0;
  color: white !important;
}
html.dark-theme .card-view strong {
  color: white;
}

html.dark-theme .colorForheadings {
  color: white !important;
}

html.dark-theme .form-control {
  color: #c0c8d1;
  background-color: #12181a;
  border: 1px solid rgb(255 255 255 / 34%);
}

html.dark-theme .form-select {
  color: #c0c8d1;
  background-color: #12181a;
  border: 1px solid rgb(255 255 255 / 34%);
}
html.dark-theme .border-primary {
  border-color: rgb(255 255 255 / 34%) !important;
}

html.dark-theme .form-control:focus {
  box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.25);
}

html.dark-theme .form-select:focus {
  box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.25);
}

html.dark-theme .form-control:disabled,
html.dark-theme .form-control[readonly] {
  background-color: rgb(255 255 255 / 22%);
}

html.dark-theme .form-control::placeholder {
  color: #e4e5e6 !important;
  opacity: 0.5 !important;
}

html.dark-theme label {
  color: #e4e5e6;
}

/* ============================================================
   MAT-SELECT OPTION — DARK MODE
   ============================================================ */

/* Selected option text */
html.dark-theme
  .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled)
  .mdc-list-item__primary-text {
  color: #e4e5e6 !important;
}

/* Selected option background */
html.dark-theme
  .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled) {
  background-color: rgba(255, 255, 255, 0.08) !important;
}

/* Hover state */
html.dark-theme .mat-mdc-option:not(.mdc-list-item--disabled):hover {
  background-color: rgba(255, 255, 255, 0.04);
}

/* Default option text */
html.dark-theme .mat-mdc-option .mdc-list-item__primary-text {
  color: rgba(255, 255, 255, 0.85);
}
html.dark-theme .nav-tabs .nav-item.show .nav-link,
html.dark-theme .nav-tabs .nav-link.active {
  border-color: #818181 !important;
}

html.dark-theme .nav-tabs .nav-link:hover {
  border-color: #818181 !important;
}

html.dark-theme
  .mat-select-search-inner
  input.mat-select-search-input:-ms-input-placeholder,
.cdk-overlay-container.dark-theme-overlay
  .mat-select-search-inner
  input.mat-select-search-input:-ms-input-placeholder {
  color: #dadcdf !important;
}

/* ============================================================
   DARK MODE — INVALID ONLY (Material)
   ============================================================ */

/* LABEL — invalid (default state) */
html.dark-theme .mat-mdc-form-field.ng-invalid .mat-mdc-floating-label {
  color: rgba(255, 255, 255, 0.6) !important;
}

/* PLACEHOLDER — invalid only */
html.dark-theme
  .mat-mdc-form-field.ng-invalid
  .mat-mdc-input-element::placeholder {
  color: rgba(255, 255, 255, 0.5) !important;
}

html.dark-theme .stay-connect {
  color: #e4e5e6;
}
html.dark-theme label {
  color: #e4e5e6;
}

/* ============================================================
   MAT-SELECT OPTION — DARK MODE
   ============================================================ */

/* Selected option text */
html.dark-theme
  .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled)
  .mdc-list-item__primary-text {
  color: #e4e5e6 !important;
}

/* Selected option background */
html.dark-theme
  .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled) {
  background-color: rgba(255, 255, 255, 0.08) !important;
}

/* Hover state */
html.dark-theme .mat-mdc-option:not(.mdc-list-item--disabled):hover {
  background-color: rgba(255, 255, 255, 0.04);
}

/* Default option text */
html.dark-theme .mat-mdc-option .mdc-list-item__primary-text {
  color: rgba(255, 255, 255, 0.85);
}

html.dark-theme .topbar .navbar .dropdown-menu {
  border: 1px solid rgb(241 241 241 / 15%);
}

html.dark-theme .dropdown-large .cart-product {
  border: 1px solid rgb(241 241 241 / 15%);
}

html.dark-theme .dropdown-large .cart-product-title {
  color: #e4e5e6;
}

html.dark-theme .dropdown-large .cart-product-cancel {
  color: #e4e5e6;
  border: 1px solid rgb(241 241 241 / 15%);
  background-color: rgb(255 255 255 / 12%);
}

html.dark-theme .topbar .navbar .navbar-nav .nav-link:hover,
html.dark-theme .topbar .navbar .navbar-nav .nav-link:focus {
  background-color: rgb(255 255 255 / 12%);
  color: #ffffff;
}

html.dark-theme .search-bar input[disabled] {
  color: #e4e5e6;
  background-color: rgba(255, 255, 255, 0.08);
  border: 0px solid rgb(241 241 241 / 15%);
  box-shadow: inset 0 1px 2px rgb(0 0 0 / 0%);
}

html.dark-theme .search-bar input::placeholder {
  color: #e4e5e6 !important;
}

html.dark-theme mat-icon {
  color: #e4e5e6;
}
html.dark-theme .mypagination .page-item button:hover {
  background-color: #252628;
}

html.dark-theme .card-footer {
  border-top: 1px solid rgb(255 255 255 / 13%);
}

html.dark-theme .text-secondary {
  color: #a8adb0 !important;
}
html.dark-theme .topbar .navbar .navbar-nav .nav-item.active .nav-link {
  background-color: #5c5a5a !important;
}
html.dark-theme i {
  color: #e4e5e6;
}

html.dark-theme .mat-mdc-form-field.ng-invalid .mdc-notched-outline__leading,
html.dark-theme .mat-mdc-form-field.ng-invalid .mdc-notched-outline__notch,
html.dark-theme .mat-mdc-form-field.ng-invalid .mdc-notched-outline__trailing {
  border-color: rgba(255, 255, 255, 0.7) !important;
}

html.dark-theme .nav-item .nav-link.active,
html.dark-theme .nav-item.active .nav-link {
  background-color: #5c5a5a !important;
}

html.dark-theme .text-dark {
  color: #d6d8d9 !important;
}
html.dark-theme .sidebar-link {
  color: #d6d8d9;
}
html.dark-theme .floating-submenu-global .submenu-item {
  background: #2a2a2a;
  color: #d6d8d9;
}
html.dark-theme mat-icon {
  color: #bdbdbd;
}
.dark-theme .form-select option {
  background-color: #2c2c2c;
  color: #ffffff;
}

.dark-theme .form-select option:hover {
  background-color: #3a3a3a;
}

html.dark-theme .text-primary,
html.dark-theme .text-muted {
  color: #e4e5e6 !important;
}
html.dark-theme .form-control {
  color: #c0c8d1;
  background-color: #12181a;
  border: 1px solid rgb(255 255 255 / 34%);
}

html.dark-theme .form-select {
  color: #c0c8d1;
  background-color: #12181a;
  border: 1px solid rgb(255 255 255 / 34%);
}

html.dark-theme .form-control:disabled,
html.dark-theme .form-control[readonly] {
  background-color: rgb(255 255 255 / 22%);
}

html.dark-theme .form-control::placeholder {
  color: #e4e5e6 !important;
  opacity: 0.5 !important;
}

html.dark-theme .btn-outline-primary,
html.dark-theme .btn-primary,
.cdk-overlay-container.dark-theme-overlay .btn-outline-primary,
.cdk-overlay-container.dark-theme-overlay .btn-primary {
  color: #e4e5e6 !important;
  border-color: rgb(255 255 255 / 22%) !important;
}
html.dark-theme .sidebar-link.active {
  background: #272727;
}
html.dark-theme .user-profile-menu .mat-mdc-menu-item .mat-icon {
  color: #e4e5e6;
}
html.dark-theme .eraser-warn-dark {
  color: #f44336;
}
html.dark-theme .nav-tabs .nav-item.show .nav-link,
html.dark-theme .nav-tabs .nav-link.active {
  background-color: #12181a;
  box-shadow: 0 0.1rem 0.7rem rgb(0 0 0 / 20%);
  color: #e4e5e6;
}
html.dark-theme .nav-link {
  color: #e4e5e6;
}

html.dark-theme .pagination .page-item .btn-sm {
  border-color: rgba(255, 249, 249, 0.34) !important;
  color: #e4e5e6 !important;
  background-color: #12181a;
}
html.dark-theme .pagination .page-item .btn-sm:hover {
  background-color: rgb(255 255 255 / 14%) !important;
  border-color: rgb(255 255 255 / 34%) !important;
}
html.dark-theme .page-breadcrumb .breadcrumb-title message-format {
  color: #e4e5e6 !important;
}
html.dark-theme .card-header.cardheader-title {
  color: #e4e5e6 !important;
}

html.dark-theme .border-bottom {
  border-bottom: 1px solid rgb(255 255 255 / 14%) !important;
}

html.dark-theme .task-completed {
  background-color: #1f643c;
}

html.dark-theme .task-default {
  background-color: #a37f7f !important;
}
html.dark-theme .default {
  color: #dadcdf !important;
}
html.dark-theme .task-completed-text {
  color: #dadcdf !important;
}
html.dark-theme .task-completed-text {
  color: #dadcdf !important;
}
/* Dark theme override */
html.dark-theme .completion-text {
  color: #4ade80 !important;
}

html.dark-theme .vstack .fw-medium,
html.dark-theme .vstack .listtext {
  color: #e4e5e6 !important;
}
html.dark-theme .vstack .bg-light {
  background-color: #d6d1d1 !important;
}

html.dark-theme .vstack .bg-light.text-dark {
  color: #2d2d2e !important;
}
html.dark-theme .card-row {
  background-color: #474747 !important;
}
html.dark-theme .tagbtn {
  background-color: #474747;
  color: #e4e5e6;
  border-color: #706e6e;
}
html.dark-theme mat-label {
  color: #e4e5e6 !important;
}
/* 1. This forces the native browser popup (the white box) to turn dark */
html.dark-theme {
  color-scheme: dark !important;
}
/* 2. Styles for the input text and background */
html.dark-theme input[type="date"] {
  color: #dadcdf !important;
  background-color: transparent !important;
}

/* 3. Styles for the native calendar icon inside the input */
html.dark-theme input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(0.8);
  cursor: pointer;
}
html.dark-theme .bg-warning-subtle {
  background-color: #8b742d !important;
}
html.dark-theme .bg-primary-subtle {
  background-color: #627fab !important;
}
html.dark-theme .ai-text-response {
  color: #e4e5e6;
}
html.dark-theme .message .bg-primary {
  background: #363535 !important;
}

html.dark-theme .childColor {
  color: #e4e5e6;
}
html.dark-theme .sidebar-item a:hover {
  background: #646363 !important;
  color: #e4e5e6 !important;
}

html.dark-theme .mat-form-field-disabled .mat-mdc-text-field-wrapper {
  background: #545454 !important;
}
html.dark-theme
  .mat-mdc-form-field.mat-form-field-disabled
  .mat-mdc-input-element {
  color: #a7a7a7 !important;
  -webkit-text-fill-color: #a7a7a7 !important;
}
html.dark-theme
  .mat-form-field-disabled
  .mat-mdc-text-field-wrapper
  .mat-mdc-icon-button
  mat-icon {
  color: #9d9e9f !important;
}

html.dark-theme .btn-outline-secondary {
  color: #e4e5e6 !important;
  background: #252525 !important;
}

html.dark-theme .btn-outline-secondary:hover {
  background: #414040 !important;
}