/* ============================================================
 * order-cluster.css — tool-specific step-content styles.
 *
 * Order Cluster's step content: layer pickers (store + orders),
 * orders file upload, geocode progress + result feed, outlier
 * filter panel, store selection panel with map-click integration,
 * CSV export button, clustering parameters (Commit 3), results
 * panel + save (Commit 3).
 *
 * Shell-owned styles (layout, sidebar, project card, modal chrome,
 * stepper indicator, buttons, error strip) live in geoweave-shell.css.
 * Design tokens live in geoweave-tokens.css.
 *
 * Shared helper CSS (.gw-modal-dropzone*, .gw-progress*, .gw-result-*,
 * .gw-name-*, .gw-gate*, .gw-template-link) moved to the "Shared
 * step-content" section of geoweave-shell.css in the routing slice
 * (ADR-0031 Commit 2). This file's earlier duplicated copies are
 * deleted; OC-specific deviations are scoped overrides below.
 *
 * Load order: geoweave-tokens.css → geoweave-shell.css → this file.
 * ============================================================ */

/* ============================================================
 * OC overrides of shared step-content styles (geoweave-shell.css)
 * ============================================================ */

/* OC's geocode result feed is shorter than UG's (shared value is
 * 320px) — OC's modal carries more sections above it. Scoped on
 * .oc-section, which wraps all OC step content. */
.oc-section .gw-result-feed {
    max-height: 200px;
}
/* ============================================================
 * Order Cluster — Setup step (step 1)
 * ============================================================ */

/* Section container — a labeled block within Setup's body */
.oc-section {
    margin-bottom: 18px;
}
.oc-section:last-child { margin-bottom: 0; }
.oc-section-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-secondary);
    margin: 0 0 8px;
}
.oc-section-hint {
    font-size: 11px;
    color: var(--color-text-tertiary);
    margin: 0 0 8px;
    line-height: 1.5;
}
.oc-section-status {
    font-size: 11px;
    color: var(--color-text-tertiary);
    margin-top: 6px;
}
.oc-section-status.ok  { color: var(--color-success); }
.oc-section-status.err { color: var(--color-danger); }

/* Layer picker select — reused across store + orders pickers */
.oc-layer-select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 12px;
    background: var(--color-bg-surface);
    color: var(--color-text-primary);
}
.oc-layer-select:focus {
    outline: none;
    border-color: var(--color-action-primary);
}
.oc-layer-select:disabled {
    background: var(--color-bg-subtle);
    color: var(--color-text-tertiary);
    cursor: not-allowed;
}

/* Orders source — two options presented side-by-side visually */
.oc-orders-or {
    text-align: center;
    font-size: 11px;
    color: var(--color-text-tertiary);
    margin: 8px 0;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Geocode section — geocode button + progress */
.oc-geocode-row {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
}
.oc-geocode-row .oc-btn { flex: 1; }

/* Outlier filter panel */
.oc-outlier-row {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 6px;
}
.oc-outlier-input {
    width: 64px;
    padding: 7px 8px;
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 12px;
    background: var(--color-bg-surface);
    color: var(--color-text-primary);
    text-align: right;
}
.oc-outlier-input:focus {
    outline: none;
    border-color: var(--color-action-primary);
}
.oc-outlier-label {
    font-size: 12px;
    color: var(--color-text-secondary);
    white-space: nowrap;
}

/* Store selection panel */
.oc-store-list-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    font-size: 11px;
    color: var(--color-text-secondary);
}
.oc-store-list-controls-buttons {
    display: flex;
    gap: 4px;
}
.oc-store-list {
    max-height: 180px;
    overflow-y: auto;
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-sm);
    background: var(--color-bg-surface);
}
.oc-store-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    border-top: 1px solid var(--color-border-subtle);
    font-size: 12px;
    cursor: pointer;
}
.oc-store-row:first-child { border-top: none; }
.oc-store-row:hover { background: var(--color-bg-subtle); }
.oc-store-checkbox {
    flex-shrink: 0;
    cursor: pointer;
}
.oc-store-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-text-primary);
}

/* Small buttons — reused inside sections (e.g. All / None, Filter,
   Geocode Orders, Download CSV). Sized to fit inside section bodies
   without competing with shell footer buttons. */
.oc-btn {
    padding: 6px 10px;
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-sm);
    background: var(--color-bg-surface);
    color: var(--color-text-primary);
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}
.oc-btn:hover {
    background: var(--color-bg-subtle);
    border-color: var(--color-text-tertiary);
}
.oc-btn:disabled {
    background: var(--color-bg-subtle);
    color: var(--color-text-tertiary);
    cursor: not-allowed;
    border-color: var(--color-border-subtle);
}
.oc-btn.primary {
    background: var(--color-action-primary);
    border-color: var(--color-action-primary);
    color: #ffffff;
}
.oc-btn.primary:hover {
    background: var(--color-action-primary);
    filter: brightness(1.1);
}
.oc-btn.primary:disabled {
    background: var(--color-border-strong);
    border-color: var(--color-border-strong);
    color: var(--color-bg-surface);
    filter: none;
    cursor: not-allowed;
}
.oc-btn.tiny {
    padding: 2px 6px;
    font-size: 10px;
}
.oc-btn.danger {
    color: var(--color-danger);
}

/* ============================================================
 * Order Cluster — Cluster / Save step (step 2)
 * ============================================================ */

.oc-param-block {
    margin-bottom: 12px;
}
.oc-param-block:last-child { margin-bottom: 0; }
.oc-param-heading {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-secondary);
    margin-bottom: 6px;
}

.oc-radio-group {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.oc-radio-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--color-text-primary);
    cursor: pointer;
}
.oc-radio-row input[type="radio"] {
    cursor: pointer;
    margin: 0;
}

.oc-slider {
    width: 100%;
    margin: 0;
    accent-color: var(--color-action-primary);
}

.oc-results-summary {
    background: var(--color-bg-subtle);
    border-radius: var(--radius-md);
    padding: 10px 12px;
    margin-bottom: 10px;
    display: flex;
    gap: 18px;
}
.oc-result-stat {
    display: flex;
    flex-direction: column;
}
.oc-result-stat .num {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-text-primary);
    line-height: 1.1;
}
.oc-result-stat .lbl {
    font-size: 10px;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 2px;
}

.oc-hotspot-list {
    max-height: 180px;
    overflow-y: auto;
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-sm);
    background: var(--color-bg-surface);
    margin-bottom: 8px;
}
.oc-hotspot-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    border-top: 1px solid var(--color-border-subtle);
    font-size: 11px;
    cursor: pointer;
}
.oc-hotspot-row:first-child { border-top: none; }
.oc-hotspot-row:hover { background: var(--color-bg-subtle); }
.oc-hotspot-swatch {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 1px solid rgba(0,0,0,0.15);
}
.oc-hotspot-idx {
    font-weight: 700;
    color: var(--color-text-primary);
    min-width: 32px;
}
.oc-hotspot-phase {
    color: var(--color-text-secondary);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.oc-hotspot-count {
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}
.oc-hotspot-pct {
    color: var(--color-text-tertiary);
    font-variant-numeric: tabular-nums;
    min-width: 48px;
    text-align: right;
}

.oc-empty {
    padding: 20px 12px;
    text-align: center;
    color: var(--color-text-tertiary);
    font-size: 12px;
    line-height: 1.5;
    border: 1px dashed var(--color-border-default);
    border-radius: var(--radius-sm);
    margin-bottom: 8px;
}

.oc-results-actions,
.oc-save-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 8px;
}

/* Save section reuses .gw-name-input-block / .gw-name-label /
 * .gw-name-input from geoweave-shell.css's shared step-content
 * section. gwLayerNameField mounts two of them one after another. */