body {
  visibility: hidden;
}

input:required,
select:required,
textarea:required,
.form-control:required,
select[required].select2-hidden-accessible
  + .select2-container--default
  .select2-selection--single,
select[required].select2-hidden-accessible
  + .select2-container--default
  .select2-selection--multiple {
  border-right: 3px solid red !important; /* Yellow right border */
}

#enquiryForm input:disabled {
  /*enquiry form disabled inputs*/
  border: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  color: red; /* optional: normal text color instead of gray */
  font-weight: bold;
}

/* custom navbar css */
.page-sidebar,
.page-sidebar.collapsed,
.page-sidebar-inner,
.menu a,
#sidebarToggleBtn,
.menu .span {
  background-color: #2f3b52 !important;
  color: #ffffff !important;
}

/* Hover effect for menu list items */
.page-sidebar .menu li:hover,
.page-sidebar .menu li:hover > a,
.page-sidebar .menu li:hover > p,
.page-sidebar .menu li:hover {
  background-color: rgba(75, 75, 75, 0.155) !important;
  color: #ffffff !important;
}

.page-sidebar .menu li[data-active="true"]:hover,
.page-sidebar .menu li[data-active="true"]:hover > a,
.page-sidebar .menu li[data-active="true"]:hover > p {
  background-color: rgba(75, 75, 75, 0.155) !important;
  color: #ffffff !important;
}

.page-sidebar .menu li[data-active="true"] {
  border-left: 4px solid !important;
  filter: blur(0.5px) !important;
}

body .page-inner {
  margin-left: 55px !important;
}

/* Base sidebar styling */
.page-sidebar {
  /* position: relative !important; */
  position: fixed !important;
  top: 0% !important;
  bottom: 0% !important;
  left: 0% !important;
  width: 200px !important;
  display: flex !important;
  flex-direction: column !important;
  z-index: 10 !important;
  /* overflow-y: auto !important; */
  scrollbar-width: thin !important;
  scroll-behavior: smooth !important;
  padding-left: 2px !important;
  padding-right: 2px !important;
  border-right: 1px solid #56657b !important;
  border-bottom: 1px solid #56657b !important;
  transition: 0.1s ease-in-out !important;
  /* min-height: 200vh !important; */
}

.page-sidebar.collapsed {
  /* transition: 0.3s ease-in-out !important; */
  width: 63px !important;
  /* position: relative !important;top:0% !important; */
  position: fixed !important;
  top: 0% !important;
  bottom: 0% !important;
  left: 0% !important;
  /* overflow: visible !important; */
}

/* navbar scroller */
.page-sidebar-inner {
  overflow-y: auto !important;
}

body ::-webkit-scrollbar {
  width: 8px;
}

body ::-webkit-scrollbar-track {
  background: transparent;
}

body ::-webkit-scrollbar-thumb {
  background: whitesmoke;
}
html::-webkit-scrollbar {
    width: 10px;
}

html::-webkit-scrollbar-track {
    background: black;  
}

html::-webkit-scrollbar-thumb {
    background: rgb(181, 14, 14);    
}

body {
  scrollbar-width: thin !important;
}
html::-webkit-scrollbar {
  width: 10px;
}

html::-webkit-scrollbar-track {
  background: black;
}

html::-webkit-scrollbar-thumb {
  background: red;
}

/* Sidebar menu styling */
.menu {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  /* height:80vh !important; */
  overflow-y: auto !important;
}

.menu li {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  white-space: nowrap !important;
  text-align: center !important;
  border-bottom: 0.3px solid rgba(255, 255, 255, 0.08) !important;
  background-color: transparent !important;
  transition: background-color 0.3s ease;
}

.menu a {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-decoration: none !important;
  width: 100% !important;
  text-align: center !important;
}

.menu .menu-icon {
  font-size: 35px !important;
  margin-left: 30px !important;
  text-align: left !important;
}

.menu .span {
  width: 30px !important;
  border: 0.5px solid transparent !important;
  text-align: left !important;
}

.menu li p {
  padding-left: 18px !important;
  display: inline-block !important;
  width: 100% !important;
  font-size: 14px !important;
  text-align: left !important;
  will-change: transform, opacity;
  backface-visibility: hidden;
  transition: opacity 0.3s ease, width 0.3s ease, padding 0.3s ease;
}

/* Collapsed sidebar behavior */
.page-sidebar.collapsed .menu li p {
  opacity: 0 !important;
  margin-right: 15px !important;
  width: 0 !important;
  padding-left: 18px !important;
  overflow: hidden !important;
}

.page-sidebar.collapsed .menu li {
  justify-content: center !important;
}

/* Sidebar toggle button */
#sidebarToggleBtn {
  text-align: center !important;
  border-top: 1px solid !important;
  cursor: pointer !important;
  font-size: 28px !important;
  user-select: none !important;
}

#sidebarToggleBtn:hover {
  background-color: #3a475d !important;
  /* Slate hover */
}

#main-wrapper {
  margin-left: 40px !important;
}

.no-s {
  margin-left: 100px !important;
}
.page-sidebar-inner {
  overflow-y: hidden !important;
}
.page-sidebar-inner:hover {
  overflow-y: auto !important;
}
@media only screen and (max-width: 600px) {
  #main-wrapper {
    margin-left: 40px !important;
  }
}
.nav-tabs {
  border-radius: 10px;
  padding: 5px;
  color: black !important;
}

.nav-tabs > li > a {
  color: black;
  background-color: #c8e6c9;
  border-radius: 5px 5px 0 0;
  margin-right: 2px;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover {
  background-color: #4caf50;
  color: white !important;
  border: none;
}

.nav-tabs > li > a:hover {
  background-color: #a5d6a7;
  color: black;
}

/* ========================================================================================= */
/* ========================================================================================= */
/* ========================================================================================= */
/*  dark theme */
body[data-theme="dark"] {
  /* --background-color: #1e2533;
  --box-color: #2a3242;
  --box2-color: #232b3a;
  --inputbox-color: #2b3548;
  --hover-color: #384458;
  --text-color: #c7d8ff;
  --secondary-text-color: #9aadcc;
  --placeholder-color: #8391a8;
  --border-color: #687e9d;
  --highlight-color: #7faaff;
  --accent-color: #5da0ff;
  --success-color: #3bd18c;
  --warning-color: #ffc85c;
  --error-color: #ff6b6b;
  --box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  --backup-text-color: #0f1926;
  --panel-background-color: rgba(63, 81, 110, 0.644); */

  --background-color: #1b1f25;
  --box-color: #262b33;
  --box2-color: #2f353f;
  --inputbox-color: #383f4a;
  --hover-color: #464f5c;

  --text-color: #e6e6e6;
  --secondary-text-color: #b0b0b0;
  --placeholder-color: #999999;

  --border-color: #4a4f59;
  --highlight-color: #d4a657;
  --accent-color: #c99846;

  --success-color: #52d273;
  --warning-color: #e0b64c;
  --error-color: #e57373;

  --box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  --backup-text-color: #14181f;
  --panel-background-color: rgba(38, 43, 51, 0.9);
}

/*  theme */
body[data-theme="green"] {
  --background-color: #10241a;
  --box-color: #1a2f23;
  --box2-color: #1e3728;
  --inputbox-color: #1c2e24;
  --hover-color: #295c41;
  --text-color: #c9f5dd;
  --secondary-text-color: #8cbfa2;
  --placeholder-color: #6e9c85;
  --border-color: #3c5446;
  --highlight-color: #39bf84;
  --accent-color: #32a26e;
  --success-color: #2bd47d;
  --warning-color: #e5b567;
  --error-color: #e96d6d;
  --box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  --backup-text-color: #0b1c14;
  --panel-background-color: #335243;
}

/* Base background and text */
body[data-theme] {
  background-color: var(--background-color) !important;
  color: var(--text-color) !important;
}
body[data-theme]::selection {
  background-color: var(--text-color) !important;
  color: var(--backup-text-color) !important;
}

/* General text and labels */
body[data-theme] h1,
body[data-theme] h2,
body[data-theme] h3,
body[data-theme] h4,
body[data-theme] h5,
body[data-theme] h6,
body[data-theme] label,
body[data-theme] p,
body[data-theme] span,
body[data-theme] small,
body[data-theme] .panel-title,
body[data-theme] .modal-title {
  color: var(--text-color) !important;
}

/* Inputs, selects, textareas */
body[data-theme] input,
body[data-theme] select,
body[data-theme] textarea,
body[data-theme] .form-control,
body[data-theme] .form-group input#start-time,
body[data-theme] .form-group input#end-time,
body[data-theme] .input-group-addon {
  background-color: var(--inputbox-color) !important;
  color: var(--text-color) !important;
  border: 0.5px solid var(--border-color) !important;
}
body[data-theme] input:required,
body[data-theme] select:required,
body[data-theme] textarea:required,
body[data-theme] .form-control:required,
body[data-theme]
  select[required].select2-hidden-accessible
  + .select2-container--default
  .select2-selection--single,
body[data-theme]
  select[required].select2-hidden-accessible
  + .select2-container--default
  .select2-selection--multiple {
  border-right: 3px solid yellow !important; /* Yellow right border */
}
/* for radio button only */
body[data-theme] input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 14px;
  height: 14px;
  border: 2px solid !important;
  border-radius: 50%;
  position: relative;
  vertical-align: middle;
  margin-right: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

body[data-theme] input[type="radio"]:checked::before {
  content: "";
  position: absolute;
  top: 1.5px;
  right: 1.5px;
  width: 7px;
  height: 7px;
  background-color: var(--secondary-text-color);
  border-radius: 50%;
}

body[data-theme] input::placeholder,
body[data-theme] textarea::placeholder {
  color: var(--placeholder-color) !important;
}

/* Select2 */
body[data-theme] .select2-container--default .select2-selection--single {
  background-color: var(--inputbox-color) !important;
  border: 0.5px solid var(--border-color) !important;
  color: var(--text-color) !important;
}

body[data-theme] .select2-selection__rendered {
  color: var(--text-color) !important;
}

body[data-theme] .select2-dropdown {
  background-color: var(--box-color) !important;
  color: var(--text-color) !important;
  border-color: var(--border-color) !important;
}

body[data-theme] .select2-results__option--highlighted {
  background-color: var(--panel-background-color) !important;
  color: var(--accent-color) !important;
}
body[data-theme]
  .select2-container--default
  .select2-results__option[aria-selected="true"] {
  background-color: var(--highlight-color) !important;
  color: var(--backup-text-color) !important;
}

/* Buttons */
/*  Theme Buttons */
body[data-theme] .btn,
body[data-theme] button,
body[data-theme] .btn-default,
body[data-theme] .btn-primary,
body[data-theme] .btn-success,
body[data-theme] .btn-danger,
body[data-theme] .btn-info,
body[data-theme] .buttons-html5 {
  background-color: var(--accent-color) !important;
  color: var(--backup-text-color) !important;
  border: 0.5px solid var(--border-color) !important;
  box-shadow: var(--box-shadow) !important;
  transition: all 0.2s ease-in-out;
}

body[data-theme] .btn:hover,
body[data-theme] button:hover,
body[data-theme] .btn:active,
body[data-theme] button:active,
body[data-theme] .btn:focus,
body[data-theme] button:focus {
  background-color: var(--hover-color) !important;
  color: var(--text-color) !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
  outline: none !important; /* removes default focus outline */
}
body[data-theme] .nav-tabs li a {
  color: var(
    --highlight-color
  ) !important; /* highlight text for inactive tabs */
  background: transparent !important;
  border: none !important;
  transition: background 0.3s ease, color 0.3s ease;
}
body[data-theme] .nav-tabs li a:hover {
  background-color: var(--hover-color) !important;
  color: var(--text-color) !important;
  border-radius: 6px; /* optional: rounded corners */
}

/* 🔹 Active (selected tab) */
body[data-theme] .nav-tabs li.active a,
body[data-theme] .nav-tabs li a.active {
  background-color: var(--highlight-color) !important;
  color: var(
    --backup-text-color
  ) !important; /* contrast text inside active tab */
  border-radius: 6px;
  font-weight: 600;
}

/* Tables */
body[data-theme] .table,
body[data-theme] table,
body[data-theme] .dataTable,
body[data-theme] .table-responsive {
  background-color: var(--box-color) !important;
  color: var(--text-color) !important;
  border-color: var(--border-color) !important;
}

body[data-theme] thead,
body[data-theme] th {
  background-color: var(--box2-color) !important;
  color: var(--text-color) !important;
  border-color: var(--border-color) !important;
}

body[data-theme] td {
  color: var(--text-color) !important;
  border-color: var(--border-color) !important;
}
body[data-theme] td:not(.fc-day):not(.t_slot):not([data-date]) {
  background-color: var(--box-color) !important;
}

body[data-theme] .table-striped tbody tr:nth-child(odd),
body[data-theme] .dataTable.stripe tbody tr:nth-child(odd) {
  background-color: #cde8d9 !important;
}

body[data-theme] .table-striped tbody tr:nth-child(even),
body[data-theme] .dataTable.stripe tbody tr:nth-child(even) {
  background-color: var(--box-color) !important;
}

body[data-theme] .table-hover tbody tr:hover,
body[data-theme] .dataTable tbody tr:hover {
  background-color: var(--highlight-color) !important;
  color: var(--backup-text-color) !important;
}

/* Pagination, filter, and info */
body[data-theme] .dataTables_wrapper .dataTables_filter input,
body[data-theme] .dataTables_wrapper .dataTables_length select {
  background-color: var(--inputbox-color) !important;
  color: var(--text-color) !important;
  border: 0.5px solid var(--border-color) !important;
}

body[data-theme] .dataTables_wrapper .dataTables_info,
body[data-theme] .dataTables_wrapper label {
  color: var(--text-color) !important;
}

body[data-theme] .dataTables_wrapper .dataTables_paginate .paginate_button {
  background-color: var(--box2-color) !important;
  color: var(--text-color) !important;
  border: 0.5px solid var(--border-color) !important;
}

body[data-theme]
  .dataTables_wrapper
  .dataTables_paginate
  .paginate_button.current,
body[data-theme]
  .dataTables_wrapper
  .dataTables_paginate
  .paginate_button:hover {
  background-color: var(--highlight-color) !important;
  color: var(--backup-text-color) !important;
}

/* Chart.js canvas */
body[data-theme] .chart-container,
body[data-theme] canvas {
  background-color: var(--box-color) !important;
}

/* SweetAlert2 */
body[data-theme] .swal2-popup {
  background-color: var(--box-color) !important;
  color: var(--text-color) !important;
  border: 0.5px solid var(--border-color) !important;
}

body[data-theme] .swal2-title,
body[data-theme] .swal2-html-container,
body[data-theme] .swal2-content {
  color: var(--text-color) !important;
}

body[data-theme] .swal2-confirm {
  background-color: var(--success-color) !important;
  color: var(--box2-color) !important;
  border: 0.5px solid var(--border-color) !important;
}
body[data-theme] .swal2-cancel {
  background-color: var(--error-color) !important;
  color: var(--text-color) !important;
  border: 0.5px solid var(--border-color) !important;
}

/* Layout panels */
body[data-theme] .page-inner,
body[data-theme] .page-content,
body[data-theme] .page-footer,
body[data-theme] .panel-heading1 {
  background-color: var(--background-color) !important;
  color: var(--text-color) !important;
}

body[data-theme] .panel,
body[data-theme] .modal-content,
body[data-theme] .modal-header,
body[data-theme] .settings-panel,
body[data-theme] .panel-body:not(.ignore-panel),
body[data-theme] .tab-content,
body[data-theme] .card {
  background-color: var(--box-color) !important;
  color: var(--text-color) !important;
  /* border: 0.5px solid var(--border-color) !important; */
}
body[data-theme] .dashboardPanels {
  background-color: var(--panel-background-color) !important;
}

body[data-theme] .panel-heading,
body[data-theme] .modal-header {
  background-color: var(--box2-color) !important;
  color: var(--text-color) !important;
}

/* Dropdown */
body[data-theme] .dropdown-menu {
  background-color: var(--box2-color) !important;
  color: var(--text-color) !important;
  border: 0.5px solid var(--border-color) !important;
}

body[data-theme] .dropdown-item {
  color: var(--text-color) !important;
}

body[data-theme] .dropdown-item:hover {
  background-color: var(--highlight-color) !important;
  color: var(--backup-text-color) !important;
}

/* Icons */
body[data-theme] i,
body[data-theme] .fa,
body[data-theme] .glyphicon,
body[data-theme] .material-icons,
body[data-theme] .icon,
body[data-theme] .bi,
body[data-theme] .feather,
body[data-theme] .iconify,
body[data-theme] .svg-inline--fa {
  color: var(--text-color) !important;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.2));
  transition: color 0.2s ease, filter 0.2s ease;
}

body[data-theme] .icon:hover,
body[data-theme] i:hover,
body[data-theme] .btn i:hover,
body[data-theme] a i:hover {
  color: var(--accent-color) !important;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3));
}

/* Scrollbars */
body[data-theme] ::-webkit-scrollbar {
  width: 8px;
}

body[data-theme] ::-webkit-scrollbar-track {
  background: var(--box2-color);
}

body[data-theme] ::-webkit-scrollbar-thumb {
  background: var(--hover-color);
}
body #dashboardCharts ::-webkit-scrollbar-thumb {
  background-color: rgb(255, 99, 132);
  border: 2px solid rgb(255, 71, 111);
}
body #dashboardCharts ::-webkit-scrollbar-track {
  background-color: rgb(216, 216, 216) !important;
}

/* to Avoid adding styles for top navbar */
body[data-theme] .navbar-inner * {
  color: var(--inputbox-color) !important;
  background: none !important;
  border: none !important;
  filter: none !important;
}
body[data-theme] .navbar-inner .dropdown .dropdown-list li *:not(i) {
  color: var(--inputbox-color) !important;
  background: rgba(245, 245, 245, 0.81) !important;
  border: none !important;
  filter: none !important;
}
body[data-theme] .navbar-inner .dropdown .dropdown-list li :hover {
  background: rgba(137, 137, 137, 0.212) !important;
  color: rgba(248, 248, 255, 0.847) !important;
}

/*  Navbar */
body[data-theme] .page-sidebar,
body[data-theme] .page-sidebar.collapsed,
body[data-theme] .page-sidebar-inner,
body[data-theme] .menu a,
body[data-theme] #sidebarToggleBtn,
body[data-theme] .menu .span {
  background-color: var(--box-color) !important;
  color: var(--text-color) !important;
}
body[data-theme] #sidebarToggleBtn {
  /* border-top:1px solid !important; */
  transition: 0.1s !important;
}
body[data-theme] #sidebarToggleBtn:hover {
  background-color: var(--secondary-text-color) !important;
  color: var(--backup-text-color) !important;
}

/*  For Calendar Highlighted Dates */
body[data-theme] .fc-daygrid-day.fc-state-highlight,
/* body[data-theme] .fc-day.fc-state-highlight, */
body[data-theme] td[data-date].fc-state-highlight {
  background-color: var(--placeholder-color) !important;
  color: var(--inputbox-color) !important;
}
/* body[data-theme] .fc-day.fc-state-highlight, */
/* body[data-theme] td[data-date].highlighted-day,
body[data-theme] td[data-date].fc-day.highlighted-day {
  background-color: var(--highlight-color) !important;
  color: var(--inputbox-color) !important;
} */

body[data-theme] .dataTables_wrapper {
  overflow: auto !important;
}
body[data-theme] .swal2-loader {
  border: 4px solid var(--border-color); /* background ring */
  border-top: 4px solid var(--placeholder-color); /* your dark accent */
}
/* For all readonly inputs and textareas */
body[data-theme] input[readonly],
body[data-theme] textarea[readonly],
body[data-theme] input:disabled,
body[data-theme] textarea:disabled,
body[data-theme] select:disabled {
  background-color: transparent !important; /* ensure gray background */ /* text color */
  font-weight: bold;
  border: transparent !important;
  cursor: not-allowed !important; /* show uneditable */
  pointer-events: none !important; /* prevent clicks */
}

/* Optional: prevent focus outline */
body[data-theme] input[readonly]:focus,
body[data-theme] textarea[readonly]:focus,
body[data-theme] select:disabled:focus {
  outline: none;
  box-shadow: none;
}

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