/* ============================================================
   GOLWEL FIELDS — Forms, Buttons, Badges, Flash
   Drop-in styles for input, select, textarea, button, badge,
   form-group, label, flash. Uses tokens from golwel-tokens.css.
   ============================================================ */

/* ---------- Form group ---------- */
.gfl-form-group {
  margin-bottom: var(--gfl-space-4);
}

.gfl-label {
  display: block;
  font-size: var(--gfl-text-xs);
  font-weight: 600;
  color: var(--gfl-charcoal);
  letter-spacing: var(--gfl-tracking-wide);
  text-transform: uppercase;
  margin-bottom: var(--gfl-space-2);
}

.gfl-help {
  display: block;
  font-size: var(--gfl-text-xs);
  color: var(--gfl-text-muted);
  margin-top: var(--gfl-space-1);
}

.gfl-error-text {
  display: block;
  font-size: var(--gfl-text-xs);
  color: var(--gfl-danger);
  margin-top: var(--gfl-space-1);
  font-weight: 500;
}

/* ---------- Inputs ---------- */
.gfl-input,
.gfl-select,
.gfl-textarea {
  display: block;
  width: 100%;
  font-family: var(--gfl-font-body);
  font-size: var(--gfl-text-sm);
  line-height: 1.5;
  color: var(--gfl-text);
  background: #ffffff;
  border: 1px solid var(--gfl-border);
  border-radius: var(--gfl-radius-md);
  padding: 0.625rem 0.875rem;
  transition: border-color var(--gfl-duration-fast) var(--gfl-ease-out),
              box-shadow var(--gfl-duration-fast) var(--gfl-ease-out);
  appearance: none;
  -webkit-appearance: none;
}

.gfl-input:hover,
.gfl-select:hover,
.gfl-textarea:hover {
  border-color: var(--gfl-mist);
}

.gfl-input:focus,
.gfl-select:focus,
.gfl-textarea:focus {
  outline: none;
  border-color: var(--gfl-gold);
  box-shadow: 0 0 0 3px rgba(187, 130, 1, 0.15);
  background: #ffffff;
}

.gfl-input::placeholder,
.gfl-textarea::placeholder {
  color: var(--gfl-mist);
}

.gfl-input:disabled,
.gfl-select:disabled,
.gfl-textarea:disabled {
  background: var(--gfl-cream-warm);
  color: var(--gfl-text-muted);
  cursor: not-allowed;
}

/* Select chevron */
.gfl-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236b6b6b'%3E%3Cpath d='M8 11.5L2.5 6h11L8 11.5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 14px;
  padding-right: 2.25rem;
  cursor: pointer;
}

.gfl-textarea {
  min-height: 88px;
  resize: vertical;
  line-height: var(--gfl-leading-normal);
}

.gfl-input[type="number"],
.gfl-input[type="date"],
.gfl-input[type="time"],
.gfl-input[type="datetime-local"] {
  font-variant-numeric: tabular-nums;
}

.gfl-input--sm,
.gfl-select--sm {
  font-size: var(--gfl-text-xs);
  padding: 0.4rem 0.625rem;
}

.gfl-input--lg,
.gfl-select--lg {
  font-size: var(--gfl-text-base);
  padding: 0.875rem 1.125rem;
}

.gfl-check {
  display: inline-flex;
  align-items: center;
  gap: var(--gfl-space-2);
  cursor: pointer;
  font-size: var(--gfl-text-sm);
  color: var(--gfl-text);
}
.gfl-check input[type="checkbox"],
.gfl-check input[type="radio"] {
  width: 16px;
  height: 16px;
  accent-color: var(--gfl-gold);
  cursor: pointer;
  margin: 0;
}

.gfl-input-group {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--gfl-border);
  border-radius: var(--gfl-radius-md);
  background: #ffffff;
  transition: border-color var(--gfl-duration-fast) var(--gfl-ease-out),
              box-shadow var(--gfl-duration-fast) var(--gfl-ease-out);
}
.gfl-input-group:focus-within {
  border-color: var(--gfl-gold);
  box-shadow: 0 0 0 3px rgba(187, 130, 1, 0.15);
}
.gfl-input-group__addon {
  display: inline-flex;
  align-items: center;
  padding: 0 0.875rem;
  background: var(--gfl-cream-warm);
  border-right: 1px solid var(--gfl-border);
  color: var(--gfl-text-muted);
  font-size: var(--gfl-text-sm);
  font-weight: 600;
  white-space: nowrap;
}
.gfl-input-group .gfl-input,
.gfl-input-group .gfl-select {
  border: none;
  border-radius: 0;
  flex: 1;
}
.gfl-input-group .gfl-input:focus {
  box-shadow: none;
}

/* ---------- Buttons ---------- */
.gfl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gfl-space-2);
  font-family: var(--gfl-font-body);
  font-size: var(--gfl-text-sm);
  font-weight: 600;
  line-height: 1.2;
  padding: 0.625rem 1.125rem;
  border-radius: var(--gfl-radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  transition: background-color var(--gfl-duration-fast) var(--gfl-ease-out),
              color var(--gfl-duration-fast) var(--gfl-ease-out),
              border-color var(--gfl-duration-fast) var(--gfl-ease-out),
              box-shadow var(--gfl-duration-fast) var(--gfl-ease-out);
}

.gfl-btn:focus-visible {
  outline: 2px solid var(--gfl-gold);
  outline-offset: 2px;
}

.gfl-btn:disabled,
.gfl-btn.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

.gfl-btn i {
  font-size: 1.05em;
  line-height: 1;
}

.gfl-btn--primary {
  background: var(--gfl-gold);
  color: #ffffff;
  border-color: var(--gfl-gold);
}
.gfl-btn--primary:hover {
  background: var(--gfl-gold-600);
  border-color: var(--gfl-gold-600);
  color: #ffffff;
  box-shadow: var(--gfl-shadow-sm);
}
.gfl-btn--primary:active {
  background: var(--gfl-gold-700);
  border-color: var(--gfl-gold-700);
}

.gfl-btn--dark {
  background: var(--gfl-ink);
  color: var(--gfl-cream);
  border-color: var(--gfl-ink);
}
.gfl-btn--dark:hover {
  background: var(--gfl-charcoal);
  color: var(--gfl-gold-300);
}

.gfl-btn--ghost {
  background: transparent;
  color: var(--gfl-charcoal);
  border-color: var(--gfl-border);
}
.gfl-btn--ghost:hover {
  background: var(--gfl-cream-warm);
  border-color: var(--gfl-mist);
  color: var(--gfl-ink);
}

.gfl-btn--outline {
  background: transparent;
  color: var(--gfl-gold-700);
  border-color: var(--gfl-border-gold);
}
.gfl-btn--outline:hover {
  background: var(--gfl-gold-50);
  border-color: var(--gfl-gold);
  color: var(--gfl-gold-700);
}

.gfl-btn--danger {
  background: var(--gfl-danger);
  color: #ffffff;
  border-color: var(--gfl-danger);
}
.gfl-btn--danger:hover {
  background: #991414;
  border-color: #991414;
  color: #ffffff;
}

.gfl-btn--success {
  background: var(--gfl-success);
  color: #ffffff;
  border-color: var(--gfl-success);
}
.gfl-btn--success:hover {
  background: #115d3a;
  border-color: #115d3a;
}

.gfl-btn--sm {
  font-size: var(--gfl-text-xs);
  padding: 0.4rem 0.75rem;
}
.gfl-btn--lg {
  font-size: var(--gfl-text-base);
  padding: 0.875rem 1.5rem;
}

.gfl-btn--block {
  display: flex;
  width: 100%;
}

/* ---------- Badges ---------- */
.gfl-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--gfl-space-1);
  font-size: var(--gfl-text-xs);
  font-weight: 600;
  letter-spacing: var(--gfl-tracking-wide);
  padding: 0.25rem 0.625rem;
  border-radius: var(--gfl-radius-sm);
  background: var(--gfl-cream-warm);
  color: var(--gfl-charcoal);
  border: 1px solid var(--gfl-border);
  white-space: nowrap;
  line-height: 1.4;
  text-decoration: none;
}

.gfl-badge--gold {
  background: var(--gfl-gold-50);
  color: var(--gfl-gold-700);
  border-color: var(--gfl-border-gold);
}
.gfl-badge--success {
  background: rgba(22, 121, 77, 0.1);
  color: var(--gfl-success);
  border-color: rgba(22, 121, 77, 0.25);
}
.gfl-badge--warning {
  background: rgba(180, 83, 9, 0.1);
  color: var(--gfl-warning);
  border-color: rgba(180, 83, 9, 0.25);
}
.gfl-badge--danger {
  background: rgba(185, 28, 28, 0.1);
  color: var(--gfl-danger);
  border-color: rgba(185, 28, 28, 0.25);
}
.gfl-badge--info {
  background: rgba(29, 78, 216, 0.1);
  color: var(--gfl-info);
  border-color: rgba(29, 78, 216, 0.25);
}

a.gfl-badge:hover {
  filter: brightness(0.97);
}

/* ---------- Flash messages ---------- */
.gfl-flash {
  display: flex;
  align-items: flex-start;
  gap: var(--gfl-space-3);
  padding: var(--gfl-space-3) var(--gfl-space-4);
  border-radius: var(--gfl-radius-md);
  border: 1px solid var(--gfl-border);
  background: var(--gfl-cream-warm);
  font-size: var(--gfl-text-sm);
  color: var(--gfl-text);
  margin-bottom: var(--gfl-space-4);
}
.gfl-flash i {
  font-size: 1.15rem;
  flex-shrink: 0;
  margin-top: 1px;
}
.gfl-flash--success {
  background: rgba(22, 121, 77, 0.08);
  border-color: rgba(22, 121, 77, 0.3);
  color: var(--gfl-success);
}
.gfl-flash--error,
.gfl-flash--danger {
  background: rgba(185, 28, 28, 0.08);
  border-color: rgba(185, 28, 28, 0.3);
  color: var(--gfl-danger);
}
.gfl-flash--warning {
  background: rgba(180, 83, 9, 0.08);
  border-color: rgba(180, 83, 9, 0.3);
  color: var(--gfl-warning);
}
.gfl-flash--info {
  background: rgba(29, 78, 216, 0.08);
  border-color: rgba(29, 78, 216, 0.3);
  color: var(--gfl-info);
}

/* ---------- Pagination ---------- */
.gfl-pagination {
  display: flex;
  align-items: center;
  gap: var(--gfl-space-1);
  margin-top: var(--gfl-space-5);
  flex-wrap: wrap;
}
.gfl-pagination a,
.gfl-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 var(--gfl-space-3);
  font-size: var(--gfl-text-sm);
  border-radius: var(--gfl-radius-sm);
  border: 1px solid var(--gfl-border);
  background: var(--gfl-paper);
  color: var(--gfl-text);
  text-decoration: none;
  transition: all var(--gfl-duration-fast) var(--gfl-ease-out);
}
.gfl-pagination a:hover {
  background: var(--gfl-gold-50);
  border-color: var(--gfl-border-gold);
  color: var(--gfl-gold-700);
}
.gfl-pagination .is-current {
  background: var(--gfl-ink);
  color: var(--gfl-gold-300);
  border-color: var(--gfl-ink);
  font-weight: 600;
}

/* ---------- Empty state ---------- */
.gfl-empty-state {
  padding: var(--gfl-space-8);
  text-align: center;
  background: var(--gfl-paper);
  border: 1px dashed var(--gfl-border);
  border-radius: var(--gfl-radius-lg);
}
.gfl-empty-state i {
  font-size: 3rem;
  color: var(--gfl-mist);
}
.gfl-empty-state h3 {
  font-family: var(--gfl-font-display);
  margin: var(--gfl-space-4) 0 var(--gfl-space-2);
}
.gfl-empty-state p {
  color: var(--gfl-text-muted);
}