:root,
[data-bs-theme="light"] {
  /* Primary color palette */
  --primary-100: #ebe8e4;
  --primary-200: #d8d2cc;
  --primary-300: #c7bdb1;
  --primary-400: #b5a797;
  --primary-500: #a3927e;
  --black: #000000;

  /* Secondary color palette */
  --secondary-100: #f0f0f5;
  --secondary-200: #d9d9e0;
  --secondary-300: #c2c2cc;
  --secondary-400: #ababbb;
  --secondary-500: #9494a6;

  /* Success palette */
  --success-100: #e6f4ea;
  --success-200: #c3e4cc;
  --success-300: #9fd5ad;
  --success-400: #7bc58f;
  --success-500: #57b571;

  /* Danger palette */
  --danger-100: #fdecea;
  --danger-200: #f8ccc6;
  --danger-300: #f3aaa3;
  --danger-400: #ee8880;
  --danger-500: #e8665d;

  /* Gray palette */
  --gray-100: #f8f9fa;
  --gray-200: #e9ecef;
  --gray-300: #dee2e6;
  --gray-400: #ced4da;
  --gray-500: #adb5bd;
}

/* Background utilities */
.bg-primary-100 {
  background-color: var(--primary-100) !important;
}
.bg-primary-200 {
  background-color: var(--primary-200) !important;
}
.bg-primary-300 {
  background-color: var(--primary-300) !important;
}
.bg-primary-400 {
  background-color: var(--primary-400) !important;
}
.bg-primary-500 {
  background-color: var(--primary-500) !important;
}

.bg-secondary-100 {
  background-color: var(--secondary-100) !important;
}
.bg-secondary-200 {
  background-color: var(--secondary-200) !important;
}
.bg-secondary-300 {
  background-color: var(--secondary-300) !important;
}
.bg-secondary-400 {
  background-color: var(--secondary-400) !important;
}
.bg-secondary-500 {
  background-color: var(--secondary-500) !important;
}

.bg-success-100 {
  background-color: var(--success-100) !important;
}
.bg-success-200 {
  background-color: var(--success-200) !important;
}
.bg-success-300 {
  background-color: var(--success-300) !important;
}
.bg-success-400 {
  background-color: var(--success-400) !important;
}
.bg-success-500 {
  background-color: var(--success-500) !important;
}

.bg-danger-100 {
  background-color: var(--danger-100) !important;
}
.bg-danger-200 {
  background-color: var(--danger-200) !important;
}
.bg-danger-300 {
  background-color: var(--danger-300) !important;
}
.bg-danger-400 {
  background-color: var(--danger-400) !important;
}
.bg-danger-500 {
  background-color: var(--danger-500) !important;
}

.bg-gray-100 {
  background-color: var(--gray-100) !important;
}
.bg-gray-200 {
  background-color: var(--gray-200) !important;
}
.bg-gray-300 {
  background-color: var(--gray-300) !important;
}
.bg-gray-400 {
  background-color: var(--gray-400) !important;
}
.bg-gray-500 {
  background-color: var(--gray-500) !important;
}

/* Text utilities */
.text-black {
  color: var(--black) !important;
}

.text-primary-100 {
  color: var(--primary-100) !important;
}
.text-primary-200 {
  color: var(--primary-200) !important;
}
.text-primary-300 {
  color: var(--primary-300) !important;
}
.text-primary-400 {
  color: var(--primary-400) !important;
}
.text-primary-500 {
  color: var(--primary-500) !important;
}

.text-secondary-100 {
  color: var(--secondary-100) !important;
}
.text-secondary-200 {
  color: var(--secondary-200) !important;
}
.text-secondary-300 {
  color: var(--secondary-300) !important;
}
.text-secondary-400 {
  color: var(--secondary-400) !important;
}
.text-secondary-500 {
  color: var(--secondary-500) !important;
}

.text-success-100 {
  color: var(--success-100) !important;
}
.text-success-200 {
  color: var(--success-200) !important;
}
.text-success-300 {
  color: var(--success-300) !important;
}
.text-success-400 {
  color: var(--success-400) !important;
}
.text-success-500 {
  color: var(--success-500) !important;
}

.text-danger-100 {
  color: var(--danger-100) !important;
}
.text-danger-200 {
  color: var(--danger-200) !important;
}
.text-danger-300 {
  color: var(--danger-300) !important;
}
.text-danger-400 {
  color: var(--danger-400) !important;
}
.text-danger-500 {
  color: var(--danger-500) !important;
}

.text-gray-100 {
  color: var(--gray-100) !important;
}
.text-gray-200 {
  color: var(--gray-200) !important;
}
.text-gray-300 {
  color: var(--gray-300) !important;
}
.text-gray-400 {
  color: var(--gray-400) !important;
}
.text-gray-500 {
  color: var(--gray-500) !important;
}

/* Shape utilities */
.img-rounded-md {
  border-radius: 6px; /* adjust value for more/less rounding */
  object-fit: cover;
}

/* 
Custom "danger" button styling 
*/
.btn-danger-custom {
  background-color: var(--danger-500);
  color: white;
  border: none;
}

.btn-danger-custom:hover {
  background-color: color-mix(
    in srgb,
    var(--danger-500) 90%,
    black
  ); /* slightly darker on hover */
}

.btn-danger-custom svg {
  vertical-align: middle;
}

/* Custom "success" button styling */
.btn-success-custom {
  background-color: var(--success-500);
  color: white;
  border: none;
  transition: background-color 0.2s ease; /* smooth hover */
}

.btn-success-custom:hover {
  background-color: var(--success-500); /* keep same green on hover */
}

.btn-success-custom svg {
  vertical-align: middle;
}

/* Active button style */
.btn-active {
  background-color: #a3927e !important; /* Use #A3927E for Client active */
  color: #fff !important; /* White text */
  box-shadow: none !important; /* Remove any shadow */
}

/* Inactive button style */
.btn-inactive {
  background-color: #d8d2cc !important; /* Use #D8D2CC for Tenderer inactive */
  color: #000 !important; /* Black text */
  box-shadow: none !important; /* Remove any shadow */
}

/* LOGIN PAGE */
.btn-google {
  background-color: #fff; /* White background */
  color: #000; /* Black text */
  border: 1px solid #ced4da; /* Light gray border */
}

.btn-google:hover {
  background-color: #f8f9fa; /* Light gray on hover */
  color: #000;
  border-color: #b0a292; /* Optional: theme color on hover */
}

.btn-google:focus,
.btn-google:active,
.btn-google:focus:active {
  background-color: #fff !important; /* Stay white on click/focus */
  color: #000 !important;
  border-color: #b0a292 !important; /* Optional: keep your border color */
}

.custom-form .form-control:focus {
  border-color: #b0a292;
  box-shadow: 0 0 0 0.05rem #b0a292;
  outline: none;
}
.row {
  background-color: white;
}
a:link {
  color: black;
  text-decoration: none;
}
/* visited link */

/* File links hover effect */
.custom-link {
  color: var(--primary-400);        /* default color */
  text-decoration: none;            /* no underline initially */
  transition: color 0.2s ease;     /* smooth transition */
}

.custom-link:hover {
  color: var(--primary-400);        /* stays Primary 400 on hover */
  text-decoration: underline;        /* optional underline for feedback */
  cursor: pointer;
}


a:visited {
  color: #a07b4f;
  text-decoration: none;
}
/* mouse over link */
a:hover {
  color: black;
  text-decoration: none;
}
/* selected link */
a:active {
  color: black;
  text-decoration: none;
}
.or-text {
  text-align: center; /* Center horizontally */
  font-weight: bold; /* Optional: make it bold */
  margin: 0 auto; /* Auto margins for center */
  font-size: 1rem; /* Adjust size as needed */
}

/* DROP DOWN CONTAINER BACKGROUND  */
/* Custom Dropdown Styling */
.select-wrapper {
  position: relative;
  display: block;
  width: 100%;
}

.dropdown-list {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  max-height: 200px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #b0a292; /* match your theme */
  border-radius: 6px;
  z-index: 999;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

.dropdown-list div {
  padding: 8px 12px;
  cursor: pointer;
}

.dropdown-list div:hover {
  background: #f3f0ec; /* light hover color */
}

/* TOGGLE PWD SETTINGS  */
.toggle-password {
  border: none; /* remove border */
  background: transparent; /* remove background */
  padding: 0; /* remove extra padding */
  width: auto;
  height: auto;
  cursor: pointer;
}

.toggle-password i {
  font-size: 1rem; /* adjust icon size if needed */
  color: #6c757d; /* optional icon color */
}

/* Remove hover/focus background */
.toggle-password:hover,
.toggle-password:focus {
  background: transparent !important;
  box-shadow: none !important;
}

/* Sidebar-specific link styles */
.left-sidebar a:link,
.left-sidebar a:visited,
.left-sidebar a:hover,
.left-sidebar a:active {
  color: black !important;
  text-decoration: none;
}

/* HEADER SVG LINKS STYLING */
/* Force header links and icons to black by default */
header.topbar a,
header.topbar svg,
header.topbar i {
  color: black !important;
  fill: black !important; /* for SVG icons */
  transition: color 0.2s ease; /* smooth hover */
}

/* On hover, use #b0a292 */
header.topbar a:hover,
header.topbar svg:hover,
header.topbar i:hover {
  color: #b0a292 !important;
  fill: #b0a292 !important; /* for SVG icons */
}

/* CUSTOM DROP DWON */

.select-wrapper {
  position: relative;
  width: 100%;
  cursor: pointer;
}

/* Hide native dropdown open on click */
.select-wrapper select {
  width: 100%;
  cursor: pointer;
  background: transparent;
  position: relative;
  z-index: 2;
}

/* Custom dropdown list */
.dropdown-list {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #ced4da;
  border-radius: 0.375rem;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  z-index: 1000;
}

.dropdown-list div {
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  cursor: pointer;
}

.dropdown-list div:hover {
  background: #b0a292;
  color: #fff;
}

.form-select:focus {
  border-color: #b0a292 !important;
  box-shadow: 0 0 0 0.25rem rgba(176, 162, 146, 0.3) !important;
  outline: none !important;
}

input,
textarea,
select {
  border-radius: 0.375rem; /* keep Bootstrap rounding */
  transition: border-color 0.3s ease;
  /* Keep default border color, no override */
}

input:focus,
textarea:focus,
select:focus {
  border-color: #b0a292 !important;
  outline: none !important;
  box-shadow: none !important; /* Remove shadow */
}

/* Optional: keep your custom dropdown styling */
.select-wrapper select {
  /* Your existing styles */
}

/* Default inactive tabs */
.nav-pills .nav-link {
  background-color: transparent !important;
  color: black !important;
}

/* Remove background color on hover */
.nav-pills .nav-link:hover {
  background-color: transparent !important;
  color: black !important;
}

/* Active tab styles */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: #cdbfae !important; /* keep chocolate background */
  color: black !important; /* black text */
}

ul.quick-links .nav-link {
  color: black !important;
}

ul.quick-links .nav-link:hover,
ul.quick-links .nav-link:focus {
  color: black !important; /* keep black on hover/focus */
  text-decoration: none; /* optional: remove underline on hover */
}

.navbar-nav .nav-link {
  color: black !important;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
  color: black !important;
  text-decoration: none; /* optional, if links get underline */
}

/* FORCE CUSTOM CHECKBOX COLOR – Bootstrap 5.0 FIX */
.form-check-input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  width: 1.1em;
  height: 1.1em;
  border: 2px solid #b0a292;
  border-radius: 0.25em;
  background-color: #fff;
  cursor: pointer;
  position: relative;
}

/* Checked state */
.form-check-input[type="checkbox"]:checked {
  background-color: #a3927e;
  border-color: #a3927e;
}

/* Checkmark */
.form-check-input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 0px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Focus state */
.form-check-input[type="checkbox"]:focus {
  outline: none;
  box-shadow: 0 0 0 0.15rem rgba(176, 162, 146, 0.4);
}

.input-group-text {
  background-color: var(--gray-200);
}

.input-group-text.toggle-password {
  background-color: #e9ecef;   /* same as Bootstrap default */
  border: 1px solid #ced4da;
  color: #000;
}

.input-group-text.toggle-password:hover {
  background-color: #dee2e6;   /* slightly darker on hover */
  color: #000;
}