/* ══════════════════════════════════════════════════
   Shared component patterns
   Extracted from 127 scoped CSS files
   ══════════════════════════════════════════════════ */

/* ── Card list item ──
   Used by: AnimalPickerPanel, SemenSelectionStep,
   PregCheckExecutionPage, ReviewStep, ReviewSummaryPanel
   ────────────────────────────────────────────────── */

.ffs-card-list-item {
    display: flex;
    align-items: center;
    gap: var(--ffs-space-md);
    padding: 0.625rem var(--ffs-space-lg);
    cursor: pointer;
    transition: background-color var(--ffs-transition-fast);
    border-bottom: var(--ffs-border-light);
}

.ffs-card-list-item:last-child {
    border-bottom: none;
}

.ffs-card-list-item:hover {
    background: var(--ffs-bg-subtle);
}

.ffs-card-list-item.selected {
    background: var(--rz-primary-lighter);
}

/* Bordered variant (cards with radius + border) */
.ffs-card-bordered {
    display: flex;
    align-items: center;
    gap: var(--ffs-space-lg);
    padding: var(--ffs-space-lg) var(--ffs-space-xl);
    border-radius: var(--ffs-radius-xl);
    border: var(--ffs-border-default);
    background: var(--rz-surface);
    transition: all 0.2s ease;
}

.ffs-card-bordered:hover {
    border-color: color-mix(in srgb, var(--rz-primary) 30%, transparent);
    box-shadow: var(--ffs-shadow-lg);
}

/* ── Avatar ──
   Used by: AnimalPickerPanel, PregCheckExecutionPage,
   SemenSelectionStep, AnimalSearch
   ────────────────────────────────────────────────── */

.ffs-avatar {
    flex-shrink: 0;
    border-radius: var(--ffs-radius-circle);
    overflow: hidden;
    background: var(--ffs-bg-muted);
}

.ffs-avatar--sm {
    width: 32px;
    height: 32px;
}

.ffs-avatar--md {
    width: 2.25rem;
    height: 2.25rem;
}

.ffs-avatar--lg {
    width: 44px;
    height: 44px;
}

/* ── Badge / Pill ──
   Used by: AnimalPickerPanel (.card-sex-pill, .card-status-pill),
   AnimalInfoCard (.animal-info-card__repro-badge),
   ReviewStep, PregCheckReviewStep
   ────────────────────────────────────────────────── */

.ffs-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--ffs-space-sm);
    padding: var(--ffs-space-sm) var(--ffs-space-lg);
    border-radius: var(--ffs-radius-md);
    font-size: var(--ffs-text-xs);
    font-weight: 600;
    line-height: 1.4;
}

.ffs-badge--sex-gilt {
    color: #ec4899;
    background: color-mix(in srgb, #ec4899 10%, transparent);
}

.ffs-badge--sex-sow {
    color: #e91e8e;
    background: color-mix(in srgb, #e91e8e 10%, transparent);
}

.ffs-badge--sex-boar {
    color: #3b82f6;
    background: color-mix(in srgb, #3b82f6 10%, transparent);
}

.ffs-badge--sex-barrow {
    color: #6366f1;
    background: color-mix(in srgb, #6366f1 10%, transparent);
}

.ffs-badge--sex-vboar {
    color: #8b5cf6;
    background: color-mix(in srgb, #8b5cf6 10%, transparent);
}

.ffs-badge--status-open {
    color: var(--rz-success);
    background: color-mix(in srgb, var(--rz-success) 12%, transparent);
}

.ffs-badge--status-bred {
    color: var(--rz-info);
    background: color-mix(in srgb, var(--rz-info) 12%, transparent);
}

.ffs-badge--status-pregnant {
    color: var(--rz-warning-dark);
    background: color-mix(in srgb, var(--rz-warning) 14%, transparent);
}

.ffs-badge--status-farrowed {
    color: var(--rz-secondary);
    background: color-mix(in srgb, var(--rz-secondary) 12%, transparent);
}

.ffs-badge--status-active {
    background-color: var(--rz-success-lighter);
    color: var(--rz-success);
}

.ffs-badge--status-draft {
    background-color: var(--rz-warning-lighter);
    color: var(--rz-warning);
}

.ffs-badge--status-inactive {
    background-color: var(--rz-danger-lighter);
    color: var(--rz-danger);
}

.ffs-badge--strong {
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: capitalize;
}

/* ── Section header ──
   Used by: StorageUnitDetail, LocationDetail, ContainerDetail,
   StudBoarLocationsSection, SemenSelectionStep, and 5+ more
   ────────────────────────────────────────────────── */

.ffs-section-header {
    display: flex;
    align-items: center;
    gap: var(--ffs-space-md);
}

.ffs-section-header__title {
    font-weight: 600;
}

.ffs-section-header__title--sm {
    font-size: var(--ffs-text-md);
}

.ffs-section-header__title--lg {
    font-size: var(--ffs-text-lg);
}

.ffs-section-header__actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--ffs-space-sm);
}

/* ── Icon box ──
   Used by: PregCheckExecutionPage, ScheduledEventFormPage,
   Dashboard cards
   ────────────────────────────────────────────────── */

.ffs-icon-box {
    display: grid;
    place-items: center;
    border-radius: var(--ffs-radius-md);
}

.ffs-icon-box--sm {
    width: 2rem;
    height: 2rem;
}

.ffs-icon-box--md {
    width: 2.25rem;
    height: 2.25rem;
}

.ffs-icon-box--primary {
    background: var(--ffs-primary-tint-strong);
    color: var(--rz-primary);
}

/* ── Empty state ──
   Used by: AnimalPickerPanel, ContainerDetail,
   PregCheckExecutionPage, SemenSelectionStep, FilterTemplatesPage
   ────────────────────────────────────────────────── */

.ffs-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--ffs-space-md);
    padding: var(--ffs-space-5xl) var(--ffs-space-xl);
    text-align: center;
    color: var(--rz-text-disabled-color);
    font-size: var(--ffs-text-md);
}

.ffs-empty-state__icon-ring {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: var(--ffs-radius-circle);
    background: var(--ffs-primary-tint);
    margin-bottom: var(--ffs-space-xs);
}

/* ── Filter prompt (dashed empty state) ──
   Used by: AnimalPickerPanel, TransferAnimals
   ────────────────────────────────────────────────── */

.ffs-filter-prompt {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--ffs-space-md);
    padding: var(--ffs-space-5xl) var(--ffs-space-4xl);
    min-height: 240px;
    border: 2px dashed color-mix(in srgb, var(--rz-text-color) 15%, var(--rz-base-background-color));
    border-radius: var(--ffs-radius-lg);
    background: var(--rz-base-background-color);
    text-align: center;
}

/* ── Panel ──
   Used by: AnimalPickerPanel, SemenInventoryTreeView,
   TransferAnimals, FilterTemplates
   ────────────────────────────────────────────────── */

.ffs-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    border: none;
    border-radius: var(--ffs-radius-lg);
    background: var(--rz-base-background-color);
    box-shadow: var(--ffs-shadow-md);
    overflow: hidden;
}

.ffs-panel__header {
    flex-shrink: 0;
    padding: var(--ffs-space-lg) var(--ffs-space-xl);
    border-bottom: var(--ffs-border-light);
    background: var(--ffs-bg-hover);
}

.ffs-panel__body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.ffs-panel__footer {
    flex-shrink: 0;
    padding: var(--ffs-space-xl) var(--ffs-space-3xl);
    border-top: var(--ffs-border-separator);
    background: var(--rz-surface);
}

/* ── Page shell (full-height card) ──
   Used by: PregCheckExecutionPage, ScheduledEventFormPage
   ────────────────────────────────────────────────── */

.ffs-page-shell {
    display: flex;
    flex-direction: column;
    height: 85vh;
    background: var(--rz-base-background-color);
    border-radius: var(--ffs-radius-xl);
    border: 1px solid var(--rz-base-200);
    overflow: hidden;
}

.ffs-page-shell__header {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: var(--ffs-space-xl);
    padding: var(--ffs-space-2xl) var(--ffs-space-3xl);
    background: var(--rz-surface);
    border-bottom: var(--ffs-border-separator);
}

.ffs-page-shell__body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--ffs-space-md);
    padding: var(--ffs-space-xl) var(--ffs-space-3xl);
}

.ffs-page-shell__footer {
    flex-shrink: 0;
    padding: var(--ffs-space-xl) var(--ffs-space-3xl);
    border-top: var(--ffs-border-separator);
    background: var(--rz-surface);
}

/* ── Search input wrapper ──
   Used by: AnimalPickerPanel, SemenSelectionStep,
   SemenInventoryTreeView, AnimalSearch
   ────────────────────────────────────────────────── */

.ffs-search-wrapper {
    position: relative;
    flex: 1;
}

.ffs-search-wrapper .search-icon {
    position: absolute;
    left: 0.625rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.125rem;
    color: var(--rz-text-disabled-color);
    pointer-events: none;
    z-index: 1;
}

/* ── Segmented tabs (pill toggle) ──
   Used by: PregCheckExecutionPage, SemenInventoryTreeView
   ────────────────────────────────────────────────── */

.ffs-segmented-tabs {
    display: flex;
    background: color-mix(in srgb, var(--rz-text-color) 7%, transparent);
    border-radius: var(--ffs-radius-md);
    padding: 3px;
    gap: 2px;
}

.ffs-segmented-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 6px 10px;
    border: none;
    border-radius: var(--ffs-radius-sm);
    font-size: var(--ffs-text-base);
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    background: transparent;
    color: var(--rz-text-secondary-color);
    transition: background var(--ffs-transition-fast), box-shadow var(--ffs-transition-fast), color var(--ffs-transition-fast);
    user-select: none;
}

.ffs-segmented-tab:hover:not(.ffs-segmented-tab--active) {
    background: color-mix(in srgb, var(--rz-text-color) 5%, transparent);
    color: var(--rz-text-color);
}

.ffs-segmented-tab--active {
    background: var(--rz-base-background-color);
    color: var(--rz-text-color);
    box-shadow: var(--ffs-shadow-md);
}

.ffs-segmented-tab__count {
    display: grid;
    place-items: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.3125rem;
    border-radius: var(--ffs-radius-pill);
    font-size: var(--ffs-text-xs);
    font-weight: 700;
    background: var(--ffs-bg-muted);
    color: var(--rz-text-secondary-color);
}

.ffs-segmented-tab--active .ffs-segmented-tab__count {
    background: var(--ffs-bg-strong);
    color: var(--rz-text-color);
}

/* ── Dialog (rounded) ──
   Consolidates: animal-detail-dialog, quick-mating-dialog-wrapper,
   semen-movement-dialog, filter-template-dialog-wrapper
   ────────────────────────────────────────────────── */

.ffs-dialog {
    border-radius: 1.25rem;
    overflow: hidden;
    box-shadow: var(--ffs-shadow-dialog);
}

.ffs-dialog .rz-dialog-titlebar {
    background: var(--rz-base-background-color);
    border-bottom: 1px solid color-mix(in srgb, var(--rz-base-300) 50%, transparent);
    padding: var(--ffs-space-xl) var(--ffs-space-3xl);
}

.ffs-dialog .rz-dialog-title {
    font-size: var(--ffs-text-xl, 1rem);
    font-weight: 700;
    letter-spacing: -0.01em;
}

.ffs-dialog .rz-dialog-titlebar-close {
    border-radius: 0.625rem;
    width: 2rem;
    height: 2rem;
    transition: background-color var(--ffs-transition-fast);
}

.ffs-dialog .rz-dialog-titlebar-close:hover {
    background: var(--rz-base-200);
}

.ffs-dialog .rz-dialog-content {
    padding: var(--ffs-space-2xl) var(--ffs-space-3xl);
}

.farrowing-alert-dialog.ffs-dialog .rz-dialog-content {
    padding: 0;
}

/* ── Meta detail items ──
   Used by: AnimalPickerPanel, PregCheckExecutionPage,
   SemenSelectionStep
   ────────────────────────────────────────────────── */

.ffs-meta-item {
    display: inline-flex;
    align-items: center;
    gap: var(--ffs-space-xs);
    font-size: var(--ffs-text-sm);
    color: var(--rz-text-secondary-color);
}

.ffs-meta-row {
    display: flex;
    align-items: center;
    gap: var(--ffs-space-lg);
    flex-wrap: wrap;
}

/* ── Pagination ──
   Used by: SemenSelectionStep, DataResource
   ────────────────────────────────────────────────── */

.ffs-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--ffs-space-md) var(--ffs-space-xs) 0;
    flex-shrink: 0;
}

.ffs-pagination__range {
    font-size: var(--ffs-text-sm);
    color: var(--rz-text-secondary-color);
}

.ffs-pagination__controls {
    display: flex;
    align-items: center;
    gap: var(--ffs-space-sm);
}

.ffs-pagination__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--rz-border-radius);
    border: 1px solid var(--rz-base-300);
    background: transparent;
    cursor: pointer;
    color: var(--rz-text-color);
    transition: all var(--ffs-transition-fast);
}

.ffs-pagination__btn:hover:not(:disabled) {
    background: var(--rz-base-100);
    border-color: var(--rz-base-400);
}

.ffs-pagination__btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.ffs-pagination__page {
    font-size: var(--ffs-text-sm);
    color: var(--rz-text-secondary-color);
    font-weight: 500;
    min-width: 2.5rem;
    text-align: center;
}