/**
 * Fanalytics form controls
 * Every visible input, select, and textarea MUST use .fa-input, .fa-select, or .fa-textarea.
 * Unclassed controls inside the app shell get emergency dark-theme styling (never browser defaults).
 */

:root {
  --fa-control-bg: var(--fa-input-bg, rgba(255, 255, 255, 0.05));
  --fa-control-border: var(--fa-input-border, rgba(255, 255, 255, 0.14));
  --fa-control-text: var(--fa-input-text, rgba(255, 255, 255, 0.9));
  --fa-control-placeholder: var(--fa-input-placeholder, rgba(255, 255, 255, 0.42));
  --fa-control-focus: var(--fa-primary, var(--teal, #00c2cb));
  --fa-control-radius: 10px;
  --fa-control-min-height: 44px;
}

/* Shared control chrome */
.fa-input,
.fa-select,
.fa-textarea,
#root select:not([class]),
#root input:not([class]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="image"]),
#root textarea:not([class]) {
  box-sizing: border-box;
  width: 100%;
  min-height: var(--fa-control-min-height);
  padding: 10px 14px;
  border: 1px solid var(--fa-control-border);
  border-radius: var(--fa-control-radius);
  background: var(--fa-control-bg);
  color: var(--fa-control-text);
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  line-height: 1.4;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
}

.fa-input::placeholder,
.fa-textarea::placeholder,
#root input:not([class])::placeholder,
#root textarea:not([class])::placeholder {
  color: var(--fa-control-placeholder);
}

.fa-input:hover,
.fa-select:hover,
.fa-textarea:hover,
#root select:not([class]):hover,
#root input:not([class]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):hover,
#root textarea:not([class]):hover {
  border-color: rgba(0, 194, 203, 0.45);
}

.fa-input:focus,
.fa-select:focus,
.fa-textarea:focus,
#root select:not([class]):focus,
#root input:not([class]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):focus,
#root textarea:not([class]):focus {
  outline: 2px solid var(--fa-control-focus);
  outline-offset: 1px;
  border-color: var(--fa-control-focus);
}

.fa-select,
#root select:not([class]) {
  width: auto;
  min-width: 148px;
  padding-right: 38px;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1L6 7L11 1' stroke='%2300C2CB' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
}

.fa-select option,
#root select:not([class]) option {
  background: var(--navy, #0a1628);
  color: #fff;
}

.fa-textarea,
#root textarea:not([class]) {
  min-height: 96px;
  resize: vertical;
}

.fa-input[type="search"],
.fa-input--search {
  padding-left: 14px;
}

.fa-input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

/* Filter / toolbar rows */
.fa-filter-bar,
#filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 12px;
  padding: 28px 0 4px;
}

.fa-filter-bar .fa-field,
#filter-bar .fa-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.fa-filter-bar .fa-field--grow,
#filter-bar .fa-field--grow {
  flex: 1 1 200px;
}

.fa-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.52);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (max-width: 600px) {
  .fa-filter-bar,
  #filter-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .fa-select,
  #filter-bar .fa-select,
  #filter-bar select {
    width: 100%;
  }
}