/**
 * Organization mode picker + recommender banner styles (PR-δ).
 * Plan: docs/plans/cellar-allocation-v2.md §4.
 */

/* ============================================================
 * Mode picker (Settings → Cellar Analysis → Organisation mode)
 * ============================================================ */

.mode-picker {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin: var(--space-md) 0;
}

.mode-picker--loading,
.mode-picker--error {
  padding: var(--space-md);
  color: var(--color-text-muted, #6b6456);
  text-align: center;
}

.mode-picker--error {
  color: var(--color-danger, #a8362f);
}

.mode-picker-heading {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text, #2a2820);
}

.mode-picker-recommendation {
  padding: var(--space-sm) var(--space-md);
  background: var(--color-info-subtle, rgba(74, 111, 165, 0.08));
  border-left: 3px solid var(--color-info, #4a6fa5);
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
}

.mode-picker-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.mode-option {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: var(--color-surface, #fffcf5);
  border: 1px solid var(--color-border, #d9d3c2);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}

.mode-option:hover {
  border-color: var(--color-accent, #8b6f47);
  background: var(--color-surface-hover, #ebe7da);
}

.mode-option:has(input:checked) {
  border-color: var(--color-accent, #8b6f47);
  background: var(--color-accent-subtle, rgba(139, 111, 71, 0.06));
}

.mode-option input[type="radio"] {
  margin-top: 0.25rem;
  flex-shrink: 0;
}

.mode-option input[type="radio"]:focus-visible {
  outline: 2px solid var(--color-focus, #4a6fa5);
  outline-offset: 2px;
}

.mode-option-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  flex: 1;
  min-width: 0;
}

.mode-option-title {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  font-weight: 600;
  color: var(--color-text, #2a2820);
}

.mode-option-badge {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: var(--radius-sm);
}

.mode-option-badge--current {
  background: var(--color-success-subtle, rgba(69, 120, 83, 0.12));
  color: var(--color-success, #456f57);
}

.mode-option-badge--recommended {
  background: var(--color-info-subtle, rgba(74, 111, 165, 0.12));
  color: var(--color-info, #4a6fa5);
}

.mode-option-caption {
  font-size: 0.875rem;
  color: var(--color-text, #2a2820);
}

.mode-option-bestfor {
  font-size: 0.8125rem;
  color: var(--color-text-muted, #6b6456);
}

.mode-picker-help {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--color-text-muted, #6b6456);
  line-height: 1.5;
}

/* ============================================================
 * Recommender banner (Analysis view)
 * ============================================================ */

.mode-recommender-banner {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md);
  margin: var(--space-md) 0;
  background: var(--color-info-subtle, rgba(74, 111, 165, 0.06));
  border: 1px solid var(--color-info, #4a6fa5);
  border-radius: var(--radius-md);
}

.mode-recommender-body {
  display: flex;
  gap: var(--space-sm);
  align-items: flex-start;
}

.mode-recommender-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}

.mode-recommender-text {
  flex: 1;
  min-width: 0;
}

.mode-recommender-heading {
  margin: 0 0 0.25rem 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text, #2a2820);
}

.mode-recommender-rationale {
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-text, #2a2820);
  line-height: 1.4;
}

.mode-recommender-actions {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.mode-recommender-cta,
.mode-recommender-dismiss {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: 1px solid var(--color-border, #d9d3c2);
  background: var(--color-surface, #fffcf5);
  color: var(--color-text, #2a2820);
}

.mode-recommender-cta {
  background: var(--color-accent, #8b6f47);
  color: white;
  border-color: var(--color-accent, #8b6f47);
  font-weight: 500;
}

.mode-recommender-cta:hover {
  background: var(--color-accent-hover, #7a5f3d);
}

.mode-recommender-dismiss:hover {
  background: var(--color-surface-hover, #ebe7da);
}

.mode-recommender-cta:focus-visible,
.mode-recommender-dismiss:focus-visible {
  outline: 2px solid var(--color-focus, #4a6fa5);
  outline-offset: 2px;
}

/* 390px mobile — stack actions vertically for Fitts's Law. */
@media (max-width: 480px) {
  .mode-recommender-actions {
    flex-direction: column;
  }
  .mode-recommender-cta,
  .mode-recommender-dismiss {
    width: 100%;
  }
}

/* ============================================================
 * Backfill progress + review modal (PR-δ.2)
 * ============================================================ */

.backfill-modal {
  max-width: 560px;
  max-height: 80vh;
  overflow-y: auto;
}

.backfill-header {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  padding: var(--space-md);
  border-bottom: 1px solid var(--color-border-subtle, rgba(0, 0, 0, 0.06));
  position: relative;
}

.backfill-header h2 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  flex: 1;
}

.backfill-subtitle {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--color-text-muted, #6b6456);
}

.backfill-close {
  position: absolute;
  right: var(--space-md);
  top: var(--space-sm);
  background: transparent;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--color-text-muted, #6b6456);
}

.backfill-progress-block {
  padding: var(--space-md);
}

.backfill-progress-bar {
  width: 100%;
  height: 8px;
  background: var(--color-surface-subtle, #f5f4f0);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.backfill-progress-fill {
  height: 100%;
  background: var(--color-accent, #8b6f47);
  transition: width 240ms ease;
}

.backfill-progress-text {
  margin: var(--space-sm) 0 0;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.backfill-manual-count {
  margin: var(--space-xs) 0 0;
  font-size: 0.8125rem;
  color: var(--color-warning, #8a5a00);
  text-align: center;
}

.backfill-loading,
.backfill-error,
.backfill-terminal,
.backfill-all-good {
  padding: var(--space-md);
  text-align: center;
}

.backfill-error {
  color: var(--color-danger, #a8362f);
}

.backfill-error-detail {
  font-size: 0.8125rem;
  color: var(--color-text-muted, #6b6456);
}

.backfill-review {
  padding: var(--space-md);
}

.backfill-review-summary {
  margin: 0 0 var(--space-md);
  font-size: 0.875rem;
  color: var(--color-text-muted, #6b6456);
}

.backfill-items {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.backfill-item {
  padding: var(--space-md);
  background: var(--color-surface, #fffcf5);
  border: 1px solid var(--color-border, #d9d3c2);
  border-radius: var(--radius-md);
}

.backfill-item-title {
  font-weight: 600;
  margin-bottom: var(--space-xs);
}

.backfill-item-error {
  font-size: 0.8125rem;
  color: var(--color-text-muted, #6b6456);
  margin: 0 0 var(--space-sm);
}

.backfill-resolve-row {
  position: relative;
  margin-bottom: var(--space-sm);
}

.backfill-resolve-row input {
  width: 100%;
  padding: var(--space-sm);
  border: 1px solid var(--color-border, #d9d3c2);
  border-radius: var(--radius-sm);
  font-size: 0.9375rem;
}

.backfill-resolve-row input:focus-visible {
  outline: 2px solid var(--color-focus, #4a6fa5);
  outline-offset: 1px;
}

.backfill-autocomplete {
  list-style: none;
  margin: var(--space-xs) 0 0;
  padding: 0;
  border: 1px solid var(--color-border, #d9d3c2);
  border-radius: var(--radius-sm);
  max-height: 240px;
  overflow-y: auto;
  background: var(--color-surface, #fffcf5);
}

.backfill-autocomplete:empty {
  display: none;
}

.backfill-autocomplete button {
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  padding: var(--space-sm);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-sm);
}

.backfill-autocomplete button:hover,
.backfill-autocomplete button:focus-visible {
  background: var(--color-surface-hover, #ebe7da);
}

.backfill-autocomplete-type {
  font-size: 0.75rem;
  color: var(--color-text-muted, #6b6456);
  text-transform: capitalize;
}

.backfill-picked-region {
  margin: var(--space-xs) 0 0;
  font-size: 0.8125rem;
  color: var(--color-success, #456f57);
}

.backfill-picked-region:empty {
  display: none;
}

.backfill-item-actions {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.backfill-item-actions button {
  flex: 1;
  min-width: 80px;
  padding: 0.5rem 0.75rem;
  font-size: 0.8125rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border, #d9d3c2);
  background: var(--color-surface, #fffcf5);
  cursor: pointer;
}

.backfill-item-actions button:first-child {
  background: var(--color-accent, #8b6f47);
  color: white;
  border-color: var(--color-accent, #8b6f47);
  font-weight: 500;
}

.backfill-item-actions button[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

.backfill-footer {
  position: sticky;
  bottom: 0;
  display: flex;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: var(--color-surface, #fffcf5);
  border-top: 1px solid var(--color-border-subtle, rgba(0, 0, 0, 0.06));
}

.backfill-cancel-btn,
.backfill-commit-btn {
  flex: 1;
  padding: 0.75rem 1rem;
  font-size: 0.9375rem;
  font-weight: 500;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.backfill-cancel-btn {
  background: var(--color-surface, #fffcf5);
  border: 1px solid var(--color-border, #d9d3c2);
  color: var(--color-text, #2a2820);
}

.backfill-commit-btn {
  background: var(--color-accent, #8b6f47);
  border: 1px solid var(--color-accent, #8b6f47);
  color: white;
}

.backfill-commit-btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

@media (max-width: 480px) {
  .backfill-item-actions button {
    flex-basis: 100%;
  }
}