/* Detection Label Picker — shared grouped multi-select for raster detections.
 * ---------------------------------------------------------------------------
 * Paired with apps/static/assets/js/pages/shared/detection-label-picker.js.
 * Loaded globally from includes/styles.html so the picker looks identical on
 * all three surfaces that embed it:
 *   - Area pipeline builder        (pipeline-builder.js)
 *   - Platform default template    (platform-pipeline-defaults.js)
 *   - Ad-hoc reprocess dialog      (working_map/flights-handler.js)
 *
 * Layout goal: the raster toggles used to render as a cramped one-per-row
 * column of fixed-width centred badges. They now flow as a responsive wrapped
 * grid of left-aligned chips; an "open" (included) raster expands to the full
 * width so its sub-controls get room to breathe.
 */

.detection-label-picker {
    font-size: 0.85rem;
}

/* Selected-summary badge strip wraps cleanly. */
.detection-label-picker .dlp-summary {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

.detection-label-picker .dlp-selected-badge {
    font-weight: 500;
}

.detection-label-picker .dlp-remove {
    text-decoration: none;
}

/* Family group header. */
.detection-label-picker .dlp-family-title {
    letter-spacing: 0.04em;
}

/* Collapsed raster toggles flow horizontally and wrap instead of stacking. */
.detection-label-picker .dlp-raster-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.detection-label-picker .dlp-raster {
    flex: 0 0 auto;
    margin: 0;
    padding: var(--space-1) var(--space-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface-1);
    transition: border-color var(--dur-fast) var(--ease-standard),
        box-shadow var(--dur-fast) var(--ease-standard);
}

.detection-label-picker .dlp-raster:hover {
    border-color: var(--border-default);
}

/* An included raster reads as a grouped card spanning the full row so its
 * Visualization-only switch, label chips and threshold inputs have space. */
.detection-label-picker .dlp-raster-open {
    flex: 1 1 100%;
    padding: var(--space-2) var(--space-3);
    border-color: var(--brand-200);
    background: var(--brand-50);
    box-shadow: inset 2px 0 0 0 var(--brand-400);
}

/* Master raster name: left-aligned label, no fixed-width centred badge. */
.detection-label-picker .dlp-raster-name {
    font-size: 0.78rem;
    font-weight: 600;
    text-align: left;
    padding: var(--space-1) var(--space-2);
}

.detection-label-picker .dlp-raster .form-check-label {
    cursor: pointer;
}

/* Individual detection-label chips inside an open raster. */
.detection-label-picker .dlp-raster-open .dlp-chip {
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
}

.detection-label-picker .dlp-raster-open .dlp-chip .form-check-label {
    font-weight: 500;
}

/* Per-label threshold widget keeps a tidy compact footprint. */
.detection-label-picker .dlp-threshold .input-group-text {
    font-size: 0.72rem;
    color: var(--text-muted);
}

/* ---------------------------------------------------------------------------
 * Label-first layout: one card per platform detection label. Inside each card
 * the operator ticks which indices/rasters compute that label.
 * ------------------------------------------------------------------------- */
.detection-label-picker.dlp-label-first .dlp-label-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: var(--space-2);
}

.detection-label-picker .dlp-label-card {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface-1);
    padding: var(--space-2) var(--space-3);
    transition: border-color var(--dur-fast) var(--ease-standard),
        box-shadow var(--dur-fast) var(--ease-standard);
}

.detection-label-picker .dlp-label-card:hover {
    border-color: var(--border-default);
}

/* A card with at least one selected index reads as active. */
.detection-label-picker .dlp-label-card-on {
    border-color: var(--brand-200);
    background: var(--brand-50);
    box-shadow: inset 2px 0 0 0 var(--brand-400);
}

.detection-label-picker .dlp-label-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.detection-label-picker .dlp-label-card-title {
    font-weight: 600;
    font-size: 0.85rem;
}

.detection-label-picker .dlp-label-card-count {
    font-size: 0.7rem;
    font-weight: 500;
}

.detection-label-picker .dlp-label-card-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.detection-label-picker .dlp-label-index-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.detection-label-picker .dlp-label-index-row .form-check-label {
    cursor: pointer;
    font-weight: 500;
}