/* public/css/sections.css — responsive mobile, cartes repliables, notifications de maintenance, FinOps (tranche contiguë de l'ancien style.css ; ordre de chargement dans index.html, cf. CLAUDE.md) */
/* ── Mobile responsive ── */
@media (max-width: 540px) {
  .main { padding: 14px; gap: 24px; }

  .header { padding: 12px 16px; }

  .form-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .select-project,
  .select-model { width: 100%; }

  .local-path-row { flex-direction: column; }
  .btn-browse { width: 100%; }

  .form-actions {
    flex-wrap: wrap;
    gap: 6px;
  }

  .form-actions-group {
    flex-wrap: wrap;
    width: 100%;
  }

  #intention-model { width: 100%; }

  .form-actions .btn-submit,
  .form-actions .btn-queue,
  .form-actions .btn-spec,
  .form-actions .btn-chat-deliver,
  .form-actions .bug-declare-wrap {
    flex: 1 1 auto;
  }

  .bug-declare-wrap { min-width: 0; }
  .btn-bug { width: 100%; }

  /* Pipeline rows (feature blocks) — wrap action buttons instead of overflowing the card */
  .feat-actions {
    flex-wrap: wrap;
    flex-basis: 100%;
    justify-content: flex-start;
  }

  /* Fast Track banner — wrap resume/stop/retry buttons below the message */
  .fast-track-banner { flex-wrap: wrap; }
  .fast-track-banner span {
    flex-basis: 100%;
    white-space: normal;
  }
}

/* ── Collapsible project cards ── */
.btn-card-toggle {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 11px;
  padding: 2px 8px 2px 0;
  flex-shrink: 0;
  line-height: 1;
  transition: color 0.12s;
  font-family: inherit;
}
.btn-card-toggle:hover { color: var(--text); }

.project-card.collapsed {
  flex-direction: row;
  align-items: center;
  height: 48px;
  min-height: unset;
  overflow: hidden;
  padding: 0 16px;
}

.project-card.collapsed .card-header {
  align-items: center;
  margin-bottom: 0;
  flex: 0 0 auto;
  max-width: 230px;
  min-width: 0;
  gap: 0;
}

.project-card.collapsed .card-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.project-card.collapsed .card-desc,
.project-card.collapsed .card-stack,
.project-card.collapsed .card-version-badge {
  display: none;
}

.project-card.collapsed .card-header-right { display: none; }

.project-card.collapsed .card-env-inline {
  flex: 1;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  overflow: hidden;
  flex-wrap: nowrap;
}

.project-card.collapsed .project-details,
.project-card.collapsed .card-footer,
.project-card.collapsed .git-pending-banner {
  display: none;
}

/* ── Notifications de maintenance ────────────────────────────────────── */
.notifications-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.notifications-list.collapsed .notification-card { display: none; }

.notification-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--card);
  border: 1px solid var(--yellow-dim);
  border-left: 3px solid var(--yellow);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
}

.notification-title {
  font-size: 13px;
  color: var(--text);
  flex: 1;
  min-width: 220px;
}

.notification-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.btn-notif-launch, .btn-notif-finops-audit, .btn-notif-dismiss {
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  padding: 5px 10px;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.btn-notif-launch, .btn-notif-finops-audit {
  background: var(--accent-dim);
  border: 1px solid rgba(79,126,248,0.3);
  color: var(--accent);
}
.btn-notif-launch:hover, .btn-notif-finops-audit:hover { border-color: var(--accent); }

.btn-notif-dismiss {
  background: none;
  border: 1px solid var(--border-light);
  color: var(--text-muted);
}
.btn-notif-dismiss:hover { border-color: var(--text-dim); color: var(--text-dim); }

/* ── FinOps section ──────────────────────────────────────────────────── */
.finops-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

.finops-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.finops-card-anomaly { border-color: rgba(239,68,68,0.4); }

.finops-card-empty, .finops-card-note {
  color: var(--text-muted);
  font-size: 12px;
}

.finops-card-gcp-todo { opacity: 0.7; }

.finops-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.finops-card-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.finops-card-amount {
  font-size: 22px;
  font-weight: 700;
  font-family: 'Cascadia Code', 'Consolas', monospace;
  color: var(--text);
}

.finops-delta { font-size: 12px; }
.finops-delta-up      { color: var(--red); }
.finops-delta-down    { color: var(--green); }
.finops-delta-neutral { color: var(--text-muted); }

.finops-new-resource {
  font-size: 11px;
  color: var(--yellow);
}

.finops-card-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.btn-finops-audit, .btn-finops-connect {
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  padding: 5px 10px;
  cursor: pointer;
  transition: all 0.15s;
  background: var(--accent-dim);
  border: 1px solid rgba(79,126,248,0.3);
  color: var(--accent);
}
.btn-finops-audit:hover, .btn-finops-connect:hover { border-color: var(--accent); }
.btn-finops-audit:disabled { opacity: 0.6; cursor: default; }

/* "finops" tag — marks bugs/backlog items proposed by the FinOps agent */
.tag-finops {
  font-size: 9px; font-family: 'Cascadia Code', 'Consolas', monospace;
  color: var(--yellow); background: rgba(245,158,11,0.12);
  border: 1px solid rgba(245,158,11,0.2); border-radius: 8px;
  padding: 1px 5px; text-transform: uppercase; letter-spacing: 0.3px; white-space: nowrap;
}

.finops-auth-modal-hint {
  font-size: 12px;
  color: var(--text-muted);
  padding: 10px 20px 0;
}

.btn-icon.spinning { animation: spin 0.6s linear infinite; }

/* ── Statistiques des runs (stats.js) et métriques d'une intention ── */
.stats-section-body.collapsed { display: none; }
.stats-days-select {
  background: var(--bg2); color: inherit; border: 1px solid var(--border);
  border-radius: 6px; padding: 2px 6px; font-size: 12px;
}
.stats-table-wrap { overflow-x: auto; }
.stats-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.stats-table th, .stats-table td { padding: 4px 8px; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--border); }
.stats-table th { font-weight: 600; opacity: 0.8; }
.stats-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.stats-table .stats-type-row td:first-child { padding-left: 22px; opacity: 0.85; }
.stats-table .stats-project-row td { background: rgba(255, 255, 255, 0.03); }
.stats-table .stats-total-row td { font-weight: 600; border-top: 2px solid var(--border); }
.stats-extra, .stats-ft { margin-top: 8px; font-size: 12px; opacity: 0.85; }
.stats-ft ul { margin: 4px 0 0; padding-left: 18px; }
.stats-ft-title { font-weight: 600; }
.intention-metrics { font-size: 11px; opacity: 0.8; margin-top: 4px; }
.intention-metrics.partial { opacity: 0.6; }
.intention-metrics .metrics-denials { color: var(--yellow); }
.ft-cost { font-variant-numeric: tabular-nums; opacity: 0.9; }