@tailwind base;
@tailwind components;
@tailwind utilities;

/* Light mode (default) */
:root {
  --bg: 220 20% 97%;
  --fg: 220 20% 12%;
  --panel: 0 0% 100%;
  --panel-2: 220 16% 95%;
  --muted: 220 10% 55%;
  --line: 220 14% 88%;
  --accent: 38 80% 50%;
  --accent-fg: 0 0% 100%;
  --warning: 41 90% 50%;
  --success: 152 50% 40%;
  --danger: 0 72% 52%;
}

/* Dark mode */
.dark {
  --bg: 220 20% 6%;
  --fg: 220 15% 93%;
  --panel: 220 18% 10%;
  --panel-2: 220 16% 14%;
  --muted: 220 10% 55%;
  --line: 220 14% 18%;
  --accent: 38 80% 58%;
  --accent-fg: 220 30% 8%;
  --warning: 41 90% 58%;
  --success: 152 50% 48%;
  --danger: 0 72% 60%;
}

@media (prefers-color-scheme: dark) {
  :root:not(.light) {
    --bg: 220 20% 6%;
    --fg: 220 15% 93%;
    --panel: 220 18% 10%;
    --panel-2: 220 16% 14%;
    --muted: 220 10% 55%;
    --line: 220 14% 18%;
    --accent: 38 80% 58%;
    --accent-fg: 220 30% 8%;
    --warning: 41 90% 58%;
    --success: 152 50% 48%;
    --danger: 0 72% 60%;
  }
}

* {
  box-sizing: border-box;
}

html {
  height: 100%;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: hsl(var(--bg));
  color: hsl(var(--fg));
  font-family: var(--font-sans), system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  transition: background-color 0.2s, color 0.2s;
}

::selection {
  background: hsl(210 100% 85%);
  color: hsl(220 20% 12%);
}

.bidwright-mark-image-light {
  display: none;
}

.dark .bidwright-mark-image-color {
  display: none;
}

.dark .bidwright-mark-image-light {
  display: block;
}

.light .bidwright-mark-image-color {
  display: block;
}

.light .bidwright-mark-image-light {
  display: none;
}

@media (prefers-color-scheme: dark) {
  :root:not(.light) .bidwright-mark-image-color {
    display: none;
  }

  :root:not(.light) .bidwright-mark-image-light {
    display: block;
  }
}


a {
  color: inherit;
  text-decoration: none;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

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

::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background: hsla(var(--fg), 0.1);
}

::-webkit-scrollbar-thumb:hover {
  background: hsla(var(--fg), 0.18);
}

.scrollbar-none {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.scrollbar-none::-webkit-scrollbar {
  display: none;
}

.line-item-search-scrollbar {
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

.line-item-search-scrollbar:hover {
  scrollbar-color: hsla(var(--fg), 0.18) transparent;
}

.line-item-search-scrollbar::-webkit-scrollbar {
  width: 7px;
}

.line-item-search-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

.line-item-search-scrollbar::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background-color: transparent;
  background-clip: padding-box;
}

.line-item-search-scrollbar:hover::-webkit-scrollbar-thumb {
  background-color: hsla(var(--fg), 0.16);
}

.line-item-search-scrollbar:hover::-webkit-scrollbar-thumb:hover {
  background-color: hsla(var(--fg), 0.26);
}

table {
  border-collapse: collapse;
}

/* Hide native browser spinners on number inputs that opt in via .no-spinner.
   Used in the worksheet grid where the up/down arrows crowd already-tight
   cells and add no value over typing or arrow-key navigation. */
.no-spinner::-webkit-inner-spin-button,
.no-spinner::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.no-spinner {
  -moz-appearance: textfield;
  appearance: textfield;
}
