/* ===== Reset: base tags ===== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ===== Reset: body and document ===== */
html,
body {
  height: 100%;
  font-family: "Rubik", sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ===== Reset: form elements ===== */
input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  outline: none;
  padding: 0;
  margin: 0;
}

/* ===== Reset: autofill styling ===== */
input:-webkit-autofill {
  background-color: var(--bg-100) !important;
  -webkit-box-shadow: 0 0 0 30px var(--bg-100) inset !important;
  -webkit-text-fill-color: var(--white-90) !important;
  transition: background-color 5000s ease-in-out 0s;
}

/* Preserve pulsing animation on autofilled inputs */
input:-webkit-autofill:hover {
  -webkit-box-shadow: none !important;
  background-color: transparent !important;
}

input:-webkit-autofill:focus {
  background-color: var(--bg-100) !important;
  -webkit-box-shadow: 0 0 0 30px var(--bg-100) inset !important;
}

input:-webkit-autofill:active {
  background-color: var(--bg-100) !important;
  -webkit-box-shadow: 0 0 0 30px var(--bg-100) inset !important;
}

input:-moz-autofill {
  background-color: var(--bg-100) !important;
  color: var(--white-90) !important;
}

/* Optional: make buttons clickable */
button {
  cursor: pointer;
  background-color: transparent;
}

/* ===== Reset: typography flow ===== */
h1,
h2,
h3,
h4,
h5,
h6,
p {
  font-weight: inherit;
}

/* Remove list bullets and padding */
ul,
ol {
  list-style: none;
  padding: 0;
}

/* Remove anchor underline + color inherit */
a {
  text-decoration: none;
  color: inherit;
}

/* ====================================================================
   SCROLLBAR STYLING
   ==================================================================== */

/* Webkit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-100);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: var(--white-20);
  border-radius: 4px;
  transition: background-color 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--white-40);
}

::-webkit-scrollbar-thumb:active {
  background: var(--white-50);
}

::-webkit-scrollbar-corner {
  background: var(--bg-100);
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--white-20) var(--bg-100);
}

/* Custom scrollbar for specific containers */
.table-wrapper::-webkit-scrollbar,
.dropdown-menu::-webkit-scrollbar,
.modal::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.table-wrapper::-webkit-scrollbar-thumb,
.dropdown-menu::-webkit-scrollbar-thumb,
.modal::-webkit-scrollbar-thumb {
  background: var(--white-15);
  border-radius: 3px;
}

.table-wrapper::-webkit-scrollbar-thumb:hover,
.dropdown-menu::-webkit-scrollbar-thumb:hover,
.modal::-webkit-scrollbar-thumb:hover {
  background: var(--white-30);
}

/* Specific override for all input elements */
input,
textarea,
select {
  font-family: "Rubik", sans-serif !important;
  font-size: 14px !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 18px !important;
}

/* Text Selection Styling */
::selection {
  background-color: var(--blue-50);
  color: var(--white-100);
}

::-moz-selection {
  background-color: var(--blue-50);
  color: var(--white-100);
}

/* Input Box Selection */
.input-box::selection {
  background-color: var(--blue-80);
  color: var(--white-100);
}

.input-box::-moz-selection {
  background-color: var(--blue-80);
  color: var(--white-100);
}

/* SVG Sharpness Enhancement */
svg {
  shape-rendering: geometricPrecision;
  text-rendering: geometricPrecision;
  image-rendering: optimizeQuality;
}

/* For SVGs used as background images */
.svg-background {
  background-size: 100% 100%;
  background-repeat: no-repeat;
  image-rendering: crisp-edges;
}

/* For icon fonts that use SVG (like Iconify) */
iconify-icon {
  filter: drop-shadow(0 0 0 currentColor);
}