/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

.media-selection-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
.media-selection-options { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.media-selection-chip-group { display: inline-flex; align-items: center; gap: 6px; }
.media-selection-chip { border: 1px solid #d1d5db; border-radius: 999px; padding: 6px 12px; background: white; cursor: pointer; white-space: nowrap; }
.media-selection-chip[aria-pressed="true"] { border-color: #303030; background: #303030; color: white; }
.media-selection-options input[type="number"] { width: 80px; }
.media-selection-options input[type="number"], .media-selection-options input[type="date"] { padding: 6px; border: 1px solid #ccc; border-radius: 8px; }
.media-selection-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; max-height: 40vh; overflow-y: auto; padding: 2px; }
.media-selection-grid--x { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.media-selection-item { min-width: 0; position: relative; cursor: pointer; }
.media-selection-item > input { position: absolute; top: 8px; left: 8px; z-index: 1; width: 18px; height: 18px; accent-color: #303030; }
.media-selection-image { aspect-ratio: 1; border: 1px solid #e3e3e3; border-radius: 8px; background: #f1f1f1; display: grid; place-items: center; overflow: hidden; }
.media-selection-image img { width: 100%; height: 100%; object-fit: cover; }
.media-selection-title { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 4px; }
.media-selection-pagination { display: flex; gap: 16px; justify-content: center; margin: 16px 0; }
.media-selection-submit { display: flex; justify-content: flex-end; margin-top: 16px; }
@media (max-width: 600px) { .media-selection-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } }

.onboarding-ingestion-row { cursor: pointer; }
.source-media-status-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.source-media-status-item { min-width: 0; overflow: hidden; border: 1px solid var(--app-color-border, #e3e3e3); border-radius: 10px; background: var(--app-color-surface, #fff); }
.source-media-status-item__preview { display: grid; aspect-ratio: 1; place-items: center; overflow: hidden; background: var(--app-color-surface-secondary, #f1f1f1); }
.source-media-status-item__preview img { width: 100%; height: 100%; object-fit: contain; }
.source-media-status-item__details { display: grid; gap: 8px; justify-items: start; padding: 10px; }
.source-media-status-item__details strong { display: block; max-width: 100%; overflow: hidden; font-size: 0.8125rem; text-overflow: ellipsis; white-space: nowrap; }
.source-media-status-pagination { display: flex; justify-content: center; gap: 16px; margin-top: 16px; }