/*
 * Op. Me & You — Custom Filament UI
 * Améliore le rendu des formulaires, sections et composants Filament
 */

/* ── Variables charte ─────────────────────────────────────────────────────── */
:root {
  --omy-gold:         #D4B96A;
  --omy-gold-bright:  #F0B830;
  --omy-gold-dim:     rgba(212,185,106,0.18);
  --omy-gold-border:  rgba(212,185,106,0.30);
  --omy-surface:      #1D1D1A;
  --omy-surface-2:    #252523;
  --omy-text:         #F1EFE8;
  --omy-text-muted:   #888888;
  --omy-radius-lg:    12px;
  --omy-radius-xl:    16px;
}

/* ── Sections (fond, bordure, titre) ─────────────────────────────────────── */
.fi-section {
  border-radius: var(--omy-radius-xl) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  background: var(--omy-surface-2) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.18) !important;
  overflow: hidden !important;
}

.fi-section-header {
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  padding: 1rem 1.25rem !important;
  background: linear-gradient(135deg, rgba(212,185,106,0.06) 0%, transparent 60%) !important;
}

.fi-section-header-heading {
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  letter-spacing: 0.01em !important;
  color: var(--omy-gold) !important;
}

.fi-section-header-description {
  font-size: 0.78rem !important;
  color: var(--omy-text-muted) !important;
  margin-top: 0.2rem !important;
}

.fi-section-content {
  padding: 1.25rem !important;
}

/* ── Inputs / Textarea ────────────────────────────────────────────────────── */
.fi-input-wrapper {
  border-radius: var(--omy-radius-lg) !important;
}

.fi-input,
.fi-textarea,
.fi-select-input {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: var(--omy-radius-lg) !important;
  color: var(--omy-text) !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease !important;
  font-size: 0.875rem !important;
}

.fi-input:focus,
.fi-textarea:focus,
.fi-select-input:focus {
  border-color: var(--omy-gold-border) !important;
  box-shadow: 0 0 0 3px var(--omy-gold-dim) !important;
  outline: none !important;
}

/* ── Labels ───────────────────────────────────────────────────────────────── */
.fi-fo-field-wrp-label,
.fi-fo-field-wrp > label {
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: var(--omy-text-muted) !important;
  margin-bottom: 0.4rem !important;
}

/* Required asterisk in gold */
.fi-fo-field-wrp-label .fi-fo-field-wrp-required-indicator,
abbr[title="required"] {
  color: var(--omy-gold) !important;
}

/* Helper text */
.fi-fo-helper-text {
  font-size: 0.72rem !important;
  color: var(--omy-text-muted) !important;
  line-height: 1.5 !important;
  margin-top: 0.3rem !important;
  opacity: 0.85 !important;
}

/* ── Toggle / Switch ──────────────────────────────────────────────────────── */
.fi-toggle-button[aria-checked="true"] {
  background-color: var(--omy-gold) !important;
}

/* ── Select (native & custom) ─────────────────────────────────────────────── */
.fi-select-option[data-selected="true"],
.choices__item--choice.is-selected {
  background: var(--omy-gold-dim) !important;
  color: var(--omy-gold) !important;
  font-weight: 600 !important;
}

/* ── File Upload ──────────────────────────────────────────────────────────── */
.fi-fo-file-upload {
  border: 2px dashed rgba(212,185,106,0.25) !important;
  border-radius: var(--omy-radius-xl) !important;
  background: rgba(212,185,106,0.03) !important;
  transition: border-color 0.2s, background 0.2s !important;
}

.fi-fo-file-upload:hover {
  border-color: var(--omy-gold-border) !important;
  background: rgba(212,185,106,0.06) !important;
}

/* ── Repeater items ───────────────────────────────────────────────────────── */
.fi-fo-repeater-item {
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: var(--omy-radius-lg) !important;
  background: rgba(255,255,255,0.025) !important;
  transition: border-color 0.15s !important;
}

.fi-fo-repeater-item:hover {
  border-color: var(--omy-gold-border) !important;
}

.fi-fo-repeater-item-header {
  background: rgba(212,185,106,0.05) !important;
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
  border-radius: var(--omy-radius-lg) var(--omy-radius-lg) 0 0 !important;
  padding: 0.6rem 1rem !important;
  font-weight: 700 !important;
  font-size: 0.82rem !important;
  color: var(--omy-gold) !important;
}

/* Repeater add button */
.fi-fo-repeater-add-action button,
button.fi-btn[wire\:click*="addItem"] {
  border: 1px dashed var(--omy-gold-border) !important;
  background: var(--omy-gold-dim) !important;
  color: var(--omy-gold) !important;
  border-radius: var(--omy-radius-lg) !important;
  font-weight: 700 !important;
  font-size: 0.82rem !important;
  transition: background 0.2s !important;
}

.fi-fo-repeater-add-action button:hover {
  background: rgba(212,185,106,0.28) !important;
}

/* ── Tabs ─────────────────────────────────────────────────────────────────── */
.fi-tabs-tab {
  border-radius: 8px !important;
  font-weight: 600 !important;
  font-size: 0.83rem !important;
  transition: background 0.15s, color 0.15s !important;
}

.fi-tabs-tab[aria-selected="true"],
.fi-tabs-tab[data-active="true"] {
  background: var(--omy-gold-dim) !important;
  color: var(--omy-gold) !important;
  border-bottom: 2px solid var(--omy-gold) !important;
}

/* ── Buttons (primary) ────────────────────────────────────────────────────── */
.fi-btn-primary,
button[type="submit"].fi-btn {
  background: linear-gradient(135deg, var(--omy-gold-bright), var(--omy-gold)) !important;
  border: none !important;
  font-weight: 700 !important;
  color: #1a1200 !important;
  border-radius: var(--omy-radius-lg) !important;
  box-shadow: 0 2px 12px rgba(212,185,106,0.25) !important;
  transition: opacity 0.15s, transform 0.1s !important;
}

.fi-btn-primary:hover {
  opacity: 0.9 !important;
  transform: translateY(-1px) !important;
}

/* ── DateTimePicker ───────────────────────────────────────────────────────── */
.fi-fo-date-time-picker .fi-input {
  font-variant-numeric: tabular-nums !important;
}

/* ── Placeholder hint ─────────────────────────────────────────────────────── */
.fi-fo-placeholder {
  background: rgba(212,185,106,0.06) !important;
  border: 1px solid rgba(212,185,106,0.15) !important;
  border-radius: var(--omy-radius-lg) !important;
  padding: 0.75rem 1rem !important;
  font-size: 0.82rem !important;
  color: var(--omy-text-muted) !important;
  font-style: italic !important;
}

/* ── Form grid spacing ────────────────────────────────────────────────────── */
.fi-fo-grid {
  gap: 1rem !important;
}

.fi-fo-grid > * + * {
  /* breathing room between fields */
}

/* ── Notification (success/error toast) ──────────────────────────────────── */
.fi-notification {
  border-radius: var(--omy-radius-lg) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
}