/* Input Component Styles */
/* Styled to match the design system input component */

.custom-input {
  width: 100% !important;
}

/* Input field styling - h-9 (36px), rounded-app-radius (6px), border, padding */
.custom-input .mantine-TextInput-input,
.custom-input input[type="text"],
.custom-input input[type="password"],
.custom-input input[type="email"],
.custom-input input[type="number"],
.custom-input input[type="tel"],
.custom-input input[type="url"],
.custom-input input[type="search"] {
  height: 36px !important; /* h-9 */
  min-height: 36px !important;
  max-height: 36px !important;
  width: 100% !important;
  padding: 4px 12px !important; /* py-1 px-3 */
  font-size: 16px !important; /* text-base */
  border-radius: 6px !important; /* rounded-app-radius */
  border: 1px solid hsl(var(--border)) !important; /* border border-input */
  background-color: transparent !important; /* bg-transparent */
  color: hsl(var(--foreground)) !important;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important; /* shadow-sm */
  transition: background-color 150ms ease, border-color 150ms ease !important; /* transition-[background-color,border-color] duration-150 */
  box-sizing: border-box !important;
}

/* Placeholder styling */
.custom-input .mantine-TextInput-input::placeholder,
.custom-input input[type="text"]::placeholder,
.custom-input input[type="password"]::placeholder,
.custom-input input[type="email"]::placeholder,
.custom-input input[type="number"]::placeholder,
.custom-input input[type="tel"]::placeholder,
.custom-input input[type="url"]::placeholder,
.custom-input input[type="search"]::placeholder {
  color: hsl(var(--muted)) !important; /* placeholder:text-muted-foreground */
}

/* Focus state */
.custom-input .mantine-TextInput-input:focus,
.custom-input input[type="text"]:focus,
.custom-input input[type="password"]:focus,
.custom-input input[type="email"]:focus,
.custom-input input[type="number"]:focus,
.custom-input input[type="tel"]:focus,
.custom-input input[type="url"]:focus,
.custom-input input[type="search"]:focus {
  border-color: hsl(var(--border)) !important;
  box-shadow: none !important;
}

/* Allow focus-visible outline from global.css to show */
.custom-input .mantine-TextInput-input:focus-visible,
.custom-input input[type="text"]:focus-visible,
.custom-input input[type="password"]:focus-visible,
.custom-input input[type="email"]:focus-visible,
.custom-input input[type="number"]:focus-visible,
.custom-input input[type="tel"]:focus-visible,
.custom-input input[type="url"]:focus-visible,
.custom-input input[type="search"]:focus-visible {
  outline: 2px solid hsl(var(--foreground)) !important;
  outline-offset: 2px !important;
  border-color: hsl(var(--border)) !important;
  box-shadow: none !important;
}

/* Disabled state */
.custom-input input:disabled,
.custom-input .mantine-TextInput-input[disabled],
.custom-input input[type="text"]:disabled,
.custom-input input[type="password"]:disabled,
.custom-input input[type="email"]:disabled,
.custom-input input[type="number"]:disabled,
.custom-input input[type="tel"]:disabled,
.custom-input input[type="url"]:disabled,
.custom-input input[type="search"]:disabled {
  cursor: not-allowed !important; /* disabled:cursor-not-allowed */
  opacity: 0.5 !important; /* disabled:opacity-50 */
  background-color: hsl(var(--muted) / 0.1) !important;
}

/* Medium screen and up - text-sm (14px) */
@media (min-width: 768px) {
  .custom-input .mantine-TextInput-input,
  .custom-input input[type="text"],
  .custom-input input[type="password"],
  .custom-input input[type="email"],
  .custom-input input[type="number"],
  .custom-input input[type="tel"],
  .custom-input input[type="url"],
  .custom-input input[type="search"] {
    font-size: 14px !important; /* md:text-sm */
  }
}