/* ============================================================
   RideOps Design System — forms.css
   Büyük, yuvarlak, modern form elemanları. Tutarlı boşluk.
   ============================================================ */

.fi-fo-field-wrp-label {
    color: var(--ro-text-secondary) !important;
    font-weight: var(--ro-fw-medium) !important;
    font-size: 13px;
    margin-bottom: var(--ro-space-1);
}

.fi-input-wrp {
    background: var(--ro-bg) !important;
    border: 1px solid var(--ro-border) !important;
    border-radius: var(--ro-radius-sm) !important;
    /* Filament'in kendi ring-1 box-shadow halkasını sustur → tek görünür kenar
       bizim border'ımız olsun (çift çizgi önlenir). */
    box-shadow: none !important;
    transition: border-color var(--ro-transition-fast), box-shadow var(--ro-transition-fast);
    min-height: 44px;
}

.fi-input-wrp:focus-within {
    /* Odakta TEK gösterge: yalnızca turuncu kenar (1px). Ne ring ne ikinci çizgi. */
    border-color: var(--ro-primary) !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Filament/Tailwind'in iç input ring'ini (box-shadow + ring değişkenleri) tamamen sustur */
.fi-input-wrp input:focus,
.fi-input-wrp:focus-within input {
    box-shadow: none !important;
    outline: none !important;
    --tw-ring-shadow: 0 0 #0000 !important;
    --tw-ring-offset-shadow: 0 0 #0000 !important;
}

/* Choices (select) iç sarmalayıcısının kendi gölgesini de kaldır */
.choices__inner {
    box-shadow: none !important;
}

.fi-input,
.fi-select-input,
textarea.fi-input {
    color: var(--ro-text) !important;
    background: transparent !important;
    font-size: 14px;
}

.fi-input::placeholder {
    color: var(--ro-muted) !important;
}

/* Checkbox / Radio / Toggle */
.fi-checkbox-input,
input[type="radio"] {
    border-radius: 6px;
    border-color: var(--ro-border) !important;
    background: var(--ro-bg) !important;
}
.fi-checkbox-input:checked {
    background-color: var(--ro-primary) !important;
    border-color: var(--ro-primary) !important;
}

.fi-fo-toggle button[role="switch"][aria-checked="true"] {
    background: var(--ro-primary) !important;
}

/* Tarih / saat seçici paneli */
.fi-fo-date-time-picker-panel {
    background: var(--ro-card) !important;
    border: 1px solid var(--ro-border) !important;
    border-radius: var(--ro-radius-md) !important;
    box-shadow: var(--ro-shadow-lg) !important;
}

/* Dosya yükleme alanı */
.fi-fo-file-upload {
    border: 1.5px dashed var(--ro-border) !important;
    border-radius: var(--ro-radius-md) !important;
    background: var(--ro-bg) !important;
}
.fi-fo-file-upload:hover {
    border-color: var(--ro-primary) !important;
    background: var(--ro-primary-soft) !important;
}

/* Açılır seçim paneli (select / combobox) + tarih takvimi (Flatpickr).
   z-index ≥ 50 → sonraki .fi-section kartının altına girmez, tam görünür. */
.fi-fo-color-picker-panel,
[role="listbox"],
.choices__list--dropdown,
.flatpickr-calendar {
    background: var(--ro-card) !important;
    border: 1px solid var(--ro-border) !important;
    border-radius: var(--ro-radius-md) !important;
    box-shadow: var(--ro-shadow-lg) !important;
    z-index: 50 !important;
}

/* Alan grupları arası boşluk — 8px sistemine sabit */
.fi-fo-component-ctn {
    margin-bottom: var(--ro-space-3);
}

/* Açılır menü (select/combobox) sarmalayıcıların hiçbirinde kırpılmasın.
   Kırpma SADECE tablo kapsayıcısında (.fi-ta-ctn) kalır. */
.fi-section-content,
.fi-section-content-ctn,
.fi-fo-component-ctn,
.fi-fo-field-wrp,
.fi-fieldset {
    overflow: visible !important;
}

.fi-fo-field-wrp-error-message {
    color: var(--ro-danger) !important;
}

/* Repeater / Builder kartları */
.fi-fo-repeater-item,
.fi-fo-builder-item {
    background: var(--ro-bg) !important;
    border: 1px solid var(--ro-border) !important;
    border-radius: var(--ro-radius-md) !important;
}