/* ============================================
   Inputs Component - Standardized Styles
   
   This file provides standardized styling for all input elements,
   textareas, and select dropdowns across the application.
   
   Usage:
   - Use .input class for standard inputs (created by Inputs.js)
   - Use .input-sm, .input-md, .input-lg for different sizes
   - Add .is-disabled class or use :disabled attribute
   - Add .is-error or .is-success for validation states
   - All input types, textarea, and select are styled automatically
   
   The Inputs.js component creates inputs with classes:
   - .input (base class)
   - .input-sm, .input-md, .input-lg (size variants)
   - .is-disabled (disabled state)
   ============================================ */

.input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="url"],
input[type="search"],
textarea,
select {
  width: 100%;
  padding: 12px 16px;
  font-size: 1rem;
  line-height: 1.5;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--card) 92%, #000 8%);
  color: var(--text);
  font-family: inherit;
  box-sizing: border-box;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  outline: none;
}

/* Input Sizes */
.input-sm,
input.input-sm {
  padding: 8px 12px;
  font-size: 0.875rem;
  border-radius: 8px;
}

.input-md,
input.input-md {
  padding: 12px 16px;
  font-size: 1rem;
  border-radius: 8px;
}

.input-lg,
input.input-lg {
  padding: 16px 20px;
  font-size: 1.125rem;
  border-radius: 12px;
}

/* Focus State */
.input:focus,
input:focus:not([type="checkbox"]):not([type="radio"]),
textarea:focus,
select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
  background: color-mix(in srgb, var(--card) 88%, #000 12%);
}

/* Hover State */
.input:hover:not(:disabled):not(:read-only),
input:hover:not(:disabled):not(:read-only):not([type="checkbox"]):not([type="radio"]),
textarea:hover:not(:disabled):not(:read-only),
select:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--border) 70%, var(--accent) 30%);
}

/* Disabled State */
.input.is-disabled,
.input:disabled,
input:disabled:not([type="checkbox"]):not([type="radio"]),
textarea:disabled,
select:disabled {
  background: var(--muted-bg);
  color: var(--muted);
  cursor: not-allowed;
  opacity: 0.6;
  border-color: var(--border);
}

.input.is-disabled:hover,
.input:disabled:hover,
input:disabled:hover,
textarea:disabled:hover,
select:disabled:hover {
  border-color: var(--border);
  box-shadow: none;
}

/* Read-only State */
.input[readonly],
input[readonly]:not([type="checkbox"]):not([type="radio"]),
textarea[readonly] {
  background: var(--muted-bg);
  color: var(--muted);
  cursor: default;
}

.input[readonly]:focus,
input[readonly]:focus,
textarea[readonly]:focus {
  border-color: var(--border);
  box-shadow: none;
  background: var(--muted-bg);
}

/* Textarea Specific */
textarea {
  resize: vertical;
  min-height: 120px;
  font-family: inherit;
}

textarea.input-sm {
  min-height: 80px;
  padding: 8px 12px;
}

textarea.input-md {
  min-height: 120px;
  padding: 12px 16px;
}

textarea.input-lg {
  min-height: 160px;
  padding: 16px 20px;
}

/* Select Specific */
select {
  cursor: pointer;
  appearance: none;
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding: 12px 40px 12px 16px;
}

select[multiple] {
  min-height: 120px;
  padding: 8px;
  background-image: none;
}

select.input-sm {
  padding: 8px 36px 8px 12px;
  background-position: right 10px center;
}

select.input-lg {
  padding: 16px 44px 16px 20px;
  background-position: right 16px center;
}

/* Error State (for future use) */
.input.is-error,
input.is-error:not([type="checkbox"]):not([type="radio"]),
textarea.is-error,
select.is-error {
  border-color: var(--danger, #ef4444);
}

.input.is-error:focus,
input.is-error:focus,
textarea.is-error:focus,
select.is-error:focus {
  border-color: var(--danger, #ef4444);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger, #ef4444) 15%, transparent);
}

/* Success State (for future use) */
.input.is-success,
input.is-success:not([type="checkbox"]):not([type="radio"]),
textarea.is-success,
select.is-success {
  border-color: var(--success, #10b981);
}

.input.is-success:focus,
input.is-success:focus,
textarea.is-success:focus,
select.is-success:focus {
  border-color: var(--success, #10b981);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--success, #10b981) 15%, transparent);
}

/* Placeholder Styling */
.input::placeholder,
input::placeholder,
textarea::placeholder {
  color: var(--muted);
  opacity: 0.7;
}

/* Number Input Specific */
input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
}

/* Date/Time Input Specific */
input[type="date"],
input[type="time"],
input[type="datetime-local"] {
  position: relative;
  cursor: pointer;
  color-scheme: dark;
}

[data-theme="light"] input[type="date"],
[data-theme="light"] input[type="time"],
[data-theme="light"] input[type="datetime-local"] {
  color-scheme: light;
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s ease;
  position: absolute;
  right: 8px;
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23666' d='M3.5 2a.5.5 0 0 1 .5.5v11a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5h1zm9 0a.5.5 0 0 1 .5.5v11a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5h1zM2 4.5a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-1zM2 7.5a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-1zM2 10.5a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-1z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
}

input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

@media (prefers-color-scheme: dark) {
  input[type="date"]::-webkit-calendar-picker-indicator,
  input[type="time"]::-webkit-calendar-picker-indicator,
  input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: invert(0.7);
  }
}

[data-theme="light"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="light"] input[type="time"]::-webkit-calendar-picker-indicator,
[data-theme="light"] input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: invert(0.4);
}

input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-clear-button,
input[type="time"]::-webkit-inner-spin-button,
input[type="time"]::-webkit-clear-button,
input[type="datetime-local"]::-webkit-inner-spin-button,
input[type="datetime-local"]::-webkit-clear-button {
  display: none;
}

input[type="date"]::-webkit-datetime-edit,
input[type="time"]::-webkit-datetime-edit,
input[type="datetime-local"]::-webkit-datetime-edit {
  cursor: pointer;
  width: 100%;
}

input[type="date"]::-webkit-datetime-edit-fields-wrapper,
input[type="time"]::-webkit-datetime-edit-fields-wrapper,
input[type="datetime-local"]::-webkit-datetime-edit-fields-wrapper {
  cursor: pointer;
}

@media (max-width: 640px) {
  .input,
  input:not([type="checkbox"]):not([type="radio"]),
  textarea,
  select {
    font-size: 16px;
  }

  .input-sm,
  input.input-sm {
    font-size: 14px;
  }
}