/* Fiche — C04 / C06–C09 (direction A). Ordre : fil d'Ariane et utilitaires →
   grand titre → statut et actions → indicateurs → alerte → onglets →
   contenu et propriétés. */

.ticket-panel {
  /* Horizontal padding, also read by a page that pins the save bar to the
     edges of a scrolling panel. */
  --panel-pad: var(--space-9);
  display: flex; flex-direction: column; gap: var(--space-4);
  padding: 0 var(--panel-pad) var(--space-8); background: var(--surface); min-width: 0;
}
.panel-bar {
  position: sticky; top: 0; z-index: 4;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  min-height: 72px; padding-top: var(--space-4); background: var(--surface); font-size: var(--text-sm);
}
.breadcrumb { display: flex; align-items: center; gap: 4px; min-width: 0; color: var(--text-muted); }
.breadcrumb a { text-decoration: none; }
.breadcrumb [aria-current="page"] { color: var(--text); font-weight: 600; }
.panel-utilities { display: flex; gap: 4px; }
.ticket-title { font-size: var(--text-ticket); line-height: 44px; font-weight: 700; letter-spacing: -.8px; overflow-wrap: anywhere; }
.action-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-3); }
.panel-claim { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); font-size: var(--text-sm); color: var(--text-muted); }
.panel-claim .claim-agent { font-weight: 600; color: var(--text); }
.panel-claim .claim-lease { font-variant-numeric: tabular-nums; }
.panel-claim .claim-note { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }

.overview-grid { display: grid; grid-template-columns: minmax(0, 1fr) 224px; gap: var(--space-6); }
.overview-main, .ticket-destination { display: grid; gap: var(--space-8); align-content: start; min-width: 0; }
.ticket-section { display: grid; gap: var(--space-3); min-width: 0; }
.ticket-section > h2 { font-size: var(--text-section); line-height: 26px; }

.checklist { display: grid; margin: 0; padding: 0; list-style: none; }
.criterion { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--space-2); min-height: 36px; }
.criterion-check { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--space-3); align-items: start; padding: 6px 0; }
.criterion-check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--accent); cursor: pointer; }
.criterion-check label { display: grid; gap: 2px; cursor: pointer; }
.criterion-text { overflow-wrap: anywhere; }
.criterion-meta, .criterion-note { font-size: var(--text-xs); line-height: 16px; color: var(--text-muted); }
.criterion-note { font-style: italic; }
.criterion .menu-trigger { min-height: 36px; min-width: 36px; color: var(--text-muted); }
.criterion[tabindex]:focus-visible { border-radius: var(--radius-small); }
.criterion-editor { grid-column: 1 / -1; display: grid; gap: var(--space-3); padding-bottom: var(--space-3); }
.criterion-editor:empty { display: none; }

.comment-list, .report-list, .event-list, .relation-list, .link-list { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.comment { display: grid; gap: var(--space-2); padding-bottom: var(--space-4); border-bottom: 1px solid var(--border); }
.comment-question { padding: var(--space-3) var(--space-4); border: 1px solid var(--info-border); border-radius: var(--radius); background: var(--selection); }
.comment-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }
.comment-author { font-weight: 600; }
.comment-actions { display: flex; gap: 4px; margin-left: -12px; }
.composer { display: grid; gap: var(--space-3); }
.pinned-question { display: grid; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--info-border); border-radius: var(--radius); background: var(--selection); }
.pinned-question-head { display: flex; align-items: center; gap: var(--space-2); color: var(--accent); }
.pinned-question-head h3 { color: var(--accent); }

.report-preview-block { display: grid; gap: var(--space-1); justify-items: start; padding-top: var(--space-6); border-top: 1px solid var(--border); }
.report-preview-block .button { margin-left: -16px; }
.report-preview { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-wrap; color: var(--text-muted); }
.report { display: grid; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); font-size: var(--text-sm); }
.report-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.report-agent { font-weight: 600; }
.report-summary { font-size: var(--text-body); }
.report h4 { display: flex; align-items: center; gap: 4px; margin-bottom: 4px; font-size: var(--text-sm); }
.report ul { margin: 0; padding-left: var(--space-6); }
.report-warnings { color: var(--warning); }
.report-follow-ups ul { list-style: none; padding: 0; display: grid; gap: var(--space-2); }
.report-follow-ups li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
.report-criteria ul { list-style: none; padding: 0; display: grid; gap: 2px; }
.report-criteria li { display: flex; align-items: center; gap: var(--space-2); color: var(--text-muted); }
.report-criteria li.met { color: var(--text); }
.report-criteria li.met .ui-icon { color: var(--success); }

.history { display: grid; gap: var(--space-4); justify-items: start; }
.event-list { gap: 0; width: 100%; }
.event { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--space-3); padding: 10px 0 10px var(--space-4); border-left: 2px solid var(--border); position: relative; font-size: var(--text-sm); }
.event::before { content: ""; position: absolute; left: -5px; top: 16px; width: 8px; height: 8px; border-radius: 50%; background: var(--surface); border: 2px solid var(--control-border); }
.event-type { font-weight: 600; }
.event-actor { color: var(--text-muted); }

.relation-list { gap: 0; }
.relation, .git-link { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); min-height: 44px; padding: 4px 0; border-bottom: 1px solid var(--border); }
.relation-link { display: flex; gap: var(--space-2); align-items: baseline; flex: 1 1 240px; min-width: 0; color: var(--text); text-decoration: none; }
.relation-link:hover span:last-child { text-decoration: underline; }
.relation-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.git-link a { display: inline-flex; align-items: center; gap: 4px; flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }

@media (min-width: 1280px) and (max-width: 1439px) {
  .ticket-panel { --panel-pad: 28px; }
  .ticket-title { font-size: 32px; line-height: 40px; }
  .overview-grid { grid-template-columns: minmax(0, 1fr) 200px; gap: 20px; }
}
@media (max-width: 1279px) {
  .ticket-panel { --panel-pad: var(--space-6); }
  .ticket-title { font-size: 28px; line-height: 36px; }
}
@media (max-width: 860px) {
  .ticket-panel { --panel-pad: var(--space-4); }
  .ticket-title { font-size: 24px; line-height: 32px; letter-spacing: -.4px; }
  .overview-grid { grid-template-columns: minmax(0, 1fr); }
  .event { grid-template-columns: minmax(0, 1fr); gap: 0; }
}