/* ==================================================
   Form Components - Consolidated Styles
   Single source of truth for all form input patterns
   ================================================== */

/* Form Group Container */
.form-group {
  margin-bottom: 16px;
}

/* Form Labels */
.form-label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--app-text-secondary);
  margin-bottom: 8px;
}

.label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--app-text-secondary);
  margin-bottom: 8px;
}

/* Form Input Base */
.form-input {
  background: var(--app-bg-elevated);
  border: 1px solid var(--app-border-default);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  color: var(--app-text-primary);
  font-size: 16px;
  font-family: var(--font-sans);
  transition: all var(--duration-base);
  width: 100%;
}

.form-input::placeholder {
  color: var(--app-text-tertiary);
}

.form-input:focus {
  outline: none;
  border-color: var(--app-accent-blue);
  box-shadow: 0 0 0 3px rgba(74, 159, 216, 0.2);
}

.form-input:disabled {
  background: var(--app-bg-surface);
  color: var(--app-text-tertiary);
  cursor: not-allowed;
}

/* Input States */
.form-input.error {
  border-color: var(--app-error-border);
}

.form-input.success {
  border-color: var(--app-success-border);
}

/* Input Alias */
.input {
  @apply form-input;
  background: var(--app-bg-surface) !important;
  border-color: var(--app-border-default) !important;
  color: var(--app-text-primary) !important;
  box-shadow: none !important;
}

.input::placeholder {
  color: var(--app-text-tertiary) !important;
}

/* Search input with left icon padding */
.input-search,
input[type="search"] {
  padding-left: 40px !important;
}

/* Textarea */
.form-textarea {
  @apply form-input resize-none;
}

/* Select */
.form-select {
  @apply form-input pr-10 appearance-none;
  background-color: var(--app-bg-elevated);
  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='%238ab4cf' 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 12px center;
  background-size: 1.5em 1.5em;
  padding-right: 40px;
  cursor: pointer;
}

.form-select:hover {
  border-color: var(--app-accent-blue);
}

/* Select Alias */
.select {
  @apply form-input pr-10 appearance-none;
  background-color: var(--app-bg-surface) !important;
  border-color: var(--app-border-default) !important;
  color: var(--app-text-primary) !important;
  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='%238ab4cf' 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 12px center;
  background-size: 1.5em 1.5em;
  padding-right: 40px;
  cursor: pointer;
}

.select:hover {
  border-color: var(--app-accent-blue);
}

.select:focus {
  outline: none;
  border-color: var(--app-accent-blue);
  box-shadow: 0 0 0 3px rgba(74, 159, 216, 0.2);
}

/* Checkbox */
.form-checkbox {
  @apply h-4 w-4 rounded;
  background: var(--app-bg-elevated);
  border: 1px solid var(--app-border-default);
  accent-color: var(--app-accent-blue);
  width: 18px;
  height: 18px;
  cursor: pointer;
}

/* Radio Button */
.form-radio {
  @apply h-4 w-4;
  background: var(--app-bg-elevated);
  border: 1px solid var(--app-border-default);
  accent-color: var(--app-accent-blue);
}

/* Checkbox Group */
.form-checkbox-group {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 12px 0;
}

.form-checkbox-group input {
  margin-top: 4px;
  cursor: pointer;
}

.form-checkbox-group label {
  font-size: 14px;
  color: var(--app-text-secondary);
  cursor: pointer;
}

/* Form Help Text */
.form-help {
  display: block;
  font-size: 12px;
  color: var(--app-text-tertiary);
  margin-top: 6px;
}

/* Input Utility Classes */
.input-app {
  border-color: var(--app-border-subtle);
  background: var(--app-bg-surface);
  color: var(--app-text-primary);
}

.input-app.form-select {
  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='%238ab4cf' 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 12px center;
  background-size: 1.5em 1.5em;
  padding-right: 40px;
}

.input-focus:focus {
  outline: none;
  border-color: var(--app-accent-blue);
  box-shadow: 0 0 0 3px rgba(74, 159, 216, 0.2);
}

.focus-blue:focus {
  border-color: var(--app-accent-blue);
  box-shadow: 0 0 0 3px rgba(74, 159, 216, 0.2);
}

/* Sybil Focus Ring */
.sybil-focus-ring:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--app-accent-blue);
}

/* Dimension Filter Select - Custom styling with teal caret */
.dimension-filter {
  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='%2352C5C7' 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 12px center;
  background-size: 1.5em 1.5em;
}