:root {
    --input-bg-surface: #ffffff;
    --input-text-on-surface: #374151;
    --input-bg-surface-dark: #065f46;
    --input-text-on-surface-dark: #e5e7eb;
    --scroll-track-dark: #065f46;
    --scroll-thumb-dark: #fef3c7;
    --scroll-track-light: #ECFDF5;
    --scroll-thumb-light: #065f46;
}

html {
    --input-bg: var(--input-bg-surface);
    --input-text: var(--input-text-on-surface);
    --scroll-thumb: var(--scroll-thumb-light);
    --scroll-track: var(--scroll-track-light);
}

html.dark {
    --input-bg: var(--input-bg-surface-dark);
    --input-text: var(--input-text-on-surface-dark);
    --scroll-thumb: var(--scroll-thumb-dark);
    --scroll-track: var(--scroll-track-dark);
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px var(--input-bg) inset !important;
    box-shadow: 0 0 0 30px var(--input-bg) inset !important;
    -webkit-text-fill-color: var(--input-text) !important;
    caret-color: auto !important;
}

/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
    width: 6px; /* Thinner scrollbar */
}

*::-webkit-scrollbar-track {
    background: var(--scroll-track);
}

*::-webkit-scrollbar-thumb {
    background-color: var(--scroll-thumb);
    border-radius: 10px;
    border: 3px none var(--scroll-track);
}


/* Firefox */
* {
    scrollbar-width: thin; /* Thinner scrollbar */
    scrollbar-color: var(--scroll-thumb) var(--scroll-track);
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}