Htmx/src/input.css

@import "tailwindcss";

@theme {
  --font-sans: 'Outfit', sans-serif;
  
  --color-background: hsl(var(--background));
  --color-foreground: hsl(var(--foreground));
  
  --color-card: hsl(var(--card));
  --color-card-foreground: hsl(var(--card-foreground));
  
  --color-popover: hsl(var(--popover));
  --color-popover-foreground: hsl(var(--popover-foreground));
  
  --color-primary: hsl(var(--primary));
  --color-primary-foreground: hsl(var(--primary-foreground));
  
  --color-secondary: hsl(var(--secondary));
  --color-secondary-foreground: hsl(var(--secondary-foreground));
  
  --color-muted: hsl(var(--muted));
  --color-muted-foreground: hsl(var(--muted-foreground));
  
  --color-accent: hsl(var(--accent));
  --color-accent-foreground: hsl(var(--accent-foreground));
  
  --color-destructive: hsl(var(--destructive));
  --color-destructive-foreground: hsl(var(--destructive-foreground));
  
  --color-border: hsl(var(--border));
  --color-input: hsl(var(--input));
  --color-ring: hsl(var(--ring));

  --radius-lg: var(--radius);
  --radius-md: calc(var(--radius) - 2px);
  --radius-sm: calc(var(--radius) - 4px);
}

html, body {
  color-scheme: dark;
}

:root {
  color-scheme: dark;
  --background: 240 10% 3.9%;
  --foreground: 0 0% 98%;
  
  --card: 240 10% 3.9%;
  --card-foreground: 0 0% 98%;
  
  --popover: 240 10% 3.9%;
  --popover-foreground: 0 0% 98%;
  
  --primary: 0 0% 98%;
  --primary-foreground: 240 5.9% 10%;
  
  --secondary: 240 3.7% 15.9%;
  --secondary-foreground: 0 0% 98%;
  
  --muted: 240 3.7% 15.9%;
  --muted-foreground: 240 5% 64.9%;
  
  --accent: 240 3.7% 15.9%;
  --accent-foreground: 0 0% 98%;
  
  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 0 0% 98%;
  
  --border: 240 3.7% 15.9%;
  --input: 240 3.7% 15.9%;
  --ring: 240 4.9% 83.9%;
  
  --radius: 0.5rem;
}

/* Custom Scrollbars */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(100, 116, 139, 0.5) rgba(15, 23, 42, 0.4);
}

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

::-webkit-scrollbar-button {
  display: none;
}

::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.4); 
  border-radius: 9999px;
}

::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, 0.5); 
  border-radius: 9999px;
  border: 1px solid transparent;
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(148, 163, 184, 0.8); 
}

/* Custom Date/Time Inputs */
input[type="date"],
input[type="time"],
input[type="datetime-local"] {
  position: relative;
  padding-left: 0.5rem !important;
  padding-right: 1.5rem !important;
  color-scheme: dark;
  background-color: hsl(var(--background));
  border: 1px solid hsl(var(--border));
  color: hsl(var(--foreground));
  font-family: inherit;
}

::-webkit-datetime-edit {
  padding: 0 !important;
  flex-shrink: 0 !important;
}

::-webkit-datetime-edit-fields-wrapper {
  padding: 0 !important;
  flex-shrink: 0 !important;
}

::-webkit-calendar-picker-indicator {
  position: absolute;
  right: 0.4rem;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

::-webkit-datetime-edit-text {
  color: hsl(var(--muted-foreground));
  padding: 0 0.125rem;
}

::-webkit-datetime-edit-month-field:focus,
::-webkit-datetime-edit-day-field:focus,
::-webkit-datetime-edit-year-field:focus {
  background-color: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
  outline: none;
  border-radius: 2px;
}

/* Number Spinner Removal */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

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

/* Custom Select Arrows */
select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='hsl(215.4, 16.3%, 56.9%)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem;
  padding-right: 2.5rem;
}

/* Hide scrollbars for premium list picker layouts */
.scrollbar-none {
  scrollbar-width: none; /* Firefox */
}
.scrollbar-none::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Edge */
}