/* maintenance.css — priority/type/status badges + log timeline */

/* ── Priority badges ──────────────────────────────────────────────────────── */
.badge-priority {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border-radius: var(--r-full);
  font-size: var(--text-xs);
  font-weight: 600;
}
.badge-urgent { background: #FEE2E2; color: #991B1B; }
.badge-high   { background: #FEF3C7; color: #92400E; }
.badge-normal { background: #DBEAFE; color: #1E40AF; }
.badge-low    { background: var(--bg-muted); color: var(--text-secondary); }

/* ── Type badges ──────────────────────────────────────────────────────────── */
.badge-type {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border-radius: var(--r-full);
  font-size: var(--text-xs);
}
.badge-corrective { background: #FFF0E6; color: #C24B00; }
.badge-preventive { background: #D1FAE5; color: #065F46; }
.badge-inspection { background: #E0E7FF; color: #3730A3; }
.badge-other-type { background: var(--bg-muted); color: var(--text-secondary); }

/* ── Status badges ────────────────────────────────────────────────────────── */
.badge-status {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border-radius: var(--r-full);
  font-size: var(--text-xs);
  font-weight: 500;
}
.badge-pending        { background: var(--bg-muted); color: var(--text-secondary); }
.badge-assigned       { background: #DBEAFE; color: #1E40AF; }
.badge-in-progress    { background: #FEF3C7; color: #92400E; }
.badge-report-pending { background: #FDE8FF; color: #7E22CE; }
.badge-done           { background: #D1FAE5; color: #065F46; }
.badge-cancelled      { background: #FEE2E2; color: #991B1B; }

/* ── Stat card danger accent ──────────────────────────────────────────────── */
.stat-card[data-accent="danger"] { --accent: #EF4444; }

/* ── Log timeline ─────────────────────────────────────────────────────────── */
.log-timeline {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  position: relative;
}
.log-timeline::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, transparent 0%, var(--border) 10%, var(--border) 90%, transparent 100%);
  border-radius: 1px;
}
.log-empty {
  padding: var(--s-5) 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
  text-align: center;
  font-style: italic;
}
.log-entry {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
}
.log-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--brand-green);
  flex-shrink: 0;
  margin-top: 3px;
  border: 2.5px solid var(--bg-surface);
  box-shadow: 0 0 0 2px var(--border);
  position: relative;
  z-index: 1;
}
.log-dot--media { background: var(--text-secondary); }
.log-content {
  flex: 1;
  min-width: 0;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-2) var(--s-3);
}
.log-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 4px;
}
.log-meta-user { font-size: var(--text-xs); font-weight: 600; color: var(--text-primary); }
.log-meta-sep  { font-size: var(--text-xs); color: var(--text-muted); }
.log-meta-time { font-size: var(--text-xs); color: var(--text-secondary); }
.log-notes { font-size: var(--text-sm); color: var(--text-primary); white-space: pre-wrap; line-height: 1.5; }
.log-photo {
  display: block;
  margin-top: var(--s-2);
  max-width: 140px;
  border-radius: var(--r-sm);
  cursor: pointer;
  border: 1px solid var(--border);
  transition: opacity 0.15s;
}
.log-photo:hover { opacity: 0.85; }
.log-del-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-top: var(--s-2);
  font-size: 11px;
  color: var(--text-muted);
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 2px 8px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.log-del-btn:hover { color: #DC2626; border-color: #FCA5A5; }

/* ── Panel footer actions ─────────────────────────────────────────────────── */
.panel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-5);
  border-top: 1px solid var(--border);
  background: var(--bg-surface);
  flex-shrink: 0;
}

/* ── Add log inline form ──────────────────────────────────────────────────── */
.add-log-form {
  background: var(--bg-muted);
  border-radius: var(--r-md);
  padding: var(--s-3);
  margin-top: var(--s-3);
}
.add-log-form .form-group { margin-bottom: var(--s-2); }
.add-log-form .form-group:last-child { margin-bottom: 0; }
.add-log-form .form-group input,
.add-log-form .form-group select,
.add-log-form .form-group textarea { width: 100%; padding: 6px; }

/* ── Booking conflict badge (in table) ────────────────────────────────────── */
.badge-conflict {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: var(--r-full);
  font-size: var(--text-xs);
  background: #FEF3C7;
  color: #92400E;
  margin-left: var(--s-1);
  font-weight: 600;
}
.badge-authorized {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: var(--r-full);
  font-size: var(--text-xs);
  background: #D1FAE5;
  color: #065F46;
  margin-left: var(--s-1);
}

/* ── Conflict banner (in task panel) ──────────────────────────────────────── */
.conflict-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  border-radius: var(--r-md);
  margin-bottom: var(--s-4);
}
.conflict-banner-icon  { font-size: 1.1rem; flex-shrink: 0; margin-top: 1px; }
.conflict-banner-body  { flex: 1; font-size: var(--text-sm); line-height: 1.4; }
.conflict-banner-actions {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  flex-shrink: 0;
}
@media (min-width: 480px) {
  .conflict-banner-actions { flex-direction: row; align-items: center; }
}

.authorized-banner {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  background: #D1FAE5;
  border: 1px solid #A7F3D0;
  border-radius: var(--r-md);
  margin-bottom: var(--s-4);
  font-size: var(--text-sm);
  color: #065F46;
  font-weight: 500;
}

/* ── Stock badges ─────────────────────────────────────────────────────────── */
.badge-stock-low {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border-radius: var(--r-full);
  font-size: var(--text-xs);
  font-weight: 600;
  background: #FEE2E2;
  color: #991B1B;
}
.badge-stock-ok {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border-radius: var(--r-full);
  font-size: var(--text-xs);
  background: #D1FAE5;
  color: #065F46;
}

/* ── Movement type badges ─────────────────────────────────────────────────── */
.badge-movement {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: var(--r-full);
  font-size: var(--text-xs);
  font-weight: 600;
}
.badge-mv-in  { background: #D1FAE5; color: #065F46; }
.badge-mv-out { background: #FEE2E2; color: #991B1B; }
.badge-mv-adj { background: #E0E7FF; color: #3730A3; }

/* ── Parts inline form (worker panel) ────────────────────────────────────── */
.parts-row {
  display: flex;
  gap: var(--s-2);
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: var(--s-2);
}
.parts-row .form-group { margin-bottom: 0; flex: 1; min-width: 140px; }

/* ── Apartment panel — tab bar ───────────────────────────────────────────── */
.apt-tab-bar {
  display: flex;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-5);
  border-bottom: 1px solid var(--border);
  background: var(--bg-surface);
  flex-shrink: 0;
}

/* ── Equipment tab ───────────────────────────────────────────────────────── */
.equip-row {
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.equip-row:last-child { border-bottom: none; }
.equip-row-main  { display: flex; align-items: baseline; gap: var(--s-2); flex-wrap: wrap; }
.equip-row-sub   { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.equip-row-actions { display: flex; gap: var(--s-1); margin-top: var(--s-1); }
.equip-name { font-weight: 600; font-size: var(--text-sm); }
.equip-meta { font-size: var(--text-xs); color: var(--text-secondary); }
.btn-xs { padding: 1px 8px; font-size: var(--text-xs); }

.equip-form {
  background: var(--bg-muted);
  border-radius: var(--r-md);
  padding: var(--s-4);
  margin-top: var(--s-4);
}
.equip-form-title { font-weight: 600; font-size: var(--text-sm); margin-bottom: var(--s-3); }
.equip-form-error { color: var(--danger); font-size: var(--text-xs); margin-top: var(--s-2); }

/* ── Inventory table row highlights ─────────────────────────────────────── */
tr.row-missing td { background: #FFFBEB; }
tr.row-broken  td { background: #FFF5F5; }

/* ── Costs table ─────────────────────────────────────────────────────────── */
.cost-total { font-weight: 600; }
.nowrap     { white-space: nowrap; }

/* ── Equipment history ────────────────────────────────────────────────────── */
.equip-row-removed {
  opacity: .65;
}
.equip-row-removed .equip-name {
  text-decoration: line-through;
  color: var(--text-secondary);
}
.equip-period {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  font-style: italic;
}
.equip-history-header {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-secondary);
  padding: var(--s-3) 0 var(--s-1);
  border-top: 1px solid var(--border);
  margin-top: var(--s-2);
}
.equip-logs-wrap {
  padding: var(--s-2) 0 var(--s-1) var(--s-3);
  border-left: 2px solid var(--border);
  margin: var(--s-1) 0 0 4px;
}
.equip-log-timeline { display: flex; flex-direction: column; gap: var(--s-1); }
.equip-log-empty    { font-size: var(--text-xs); color: var(--text-secondary); padding: var(--s-1) 0; }
.equip-log-entry    { display: flex; gap: var(--s-2); align-items: flex-start; }
.equip-log-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--brand-green); flex-shrink: 0; margin-top: 5px;
}
.equip-log-body  { flex: 1; min-width: 0; }
.equip-log-meta  { font-size: 10px; color: var(--text-secondary); margin-bottom: 2px; }
.equip-log-event { font-size: var(--text-xs); display: flex; align-items: center; gap: var(--s-1); flex-wrap: wrap; }
.equip-log-notes { font-size: var(--text-xs); color: var(--text-secondary); margin-top: 2px; font-style: italic; }
.equip-log-badge { font-size: 10px !important; padding: 0px 5px !important; }
.equip-log-detail { font-size: var(--text-xs); color: var(--text-primary); }
.equip-form-sub-header {
  font-size: var(--text-xs); font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; color: var(--text-secondary);
  margin: var(--s-3) 0 var(--s-2);
  padding-top: var(--s-3); border-top: 1px solid var(--border);
}

/* ── Task group headers ───────────────────────────────────────────────────── */
table#tasks-table tr.maint-apt-group-hdr td {
  background: #F1F5F9;
  padding: 5px var(--s-4);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  border-top: 1px solid var(--border);
}
/* Statut de dispo — porté par la ligne appartement uniquement (les lignes de
   tâches restent blanches). Spécificité > le gris du header. */
table#tasks-table tr.maint-apt-group-hdr.maint-apt-unavailable td {
  background: #FFFBEB !important;
  border-top-color: #FDE68A !important;
}
table#tasks-table tr.maint-apt-group-hdr.maint-apt-available td {
  background: #ECFDF5 !important;
  border-top-color: #A7F3D0 !important;
}


/* ── Planning — apt group header structured layout ───────────────────────── */
.maint-apt-header-row {
  display: flex;
  align-items: center;
  gap: var(--s-4);
}
.maint-apt-header-ref {
  min-width: 84px;
  flex-shrink: 0;
}
.maint-apt-header-window {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex: 1;
}
.maint-apt-date {
  font-weight: 600;
  color: var(--text-primary);
}
.maint-apt-arrow { color: var(--text-muted); }
.maint-apt-tasks {
  margin-left: auto;
  color: var(--text-secondary);
  flex-shrink: 0;
}

/* ── Planning — days badge ────────────────────────────────────────────────── */
.maint-days-badge {
  display: inline-block;
  padding: 0px 6px;
  border-radius: var(--r-full);
  font-size: 10px;
  font-weight: 700;
  vertical-align: middle;
  margin-left: 2px;
}
.maint-days-ok     { background: #D1FAE5; color: #065F46; }
.maint-days-warn   { background: #FEF3C7; color: #92400E; }
.maint-days-urgent { background: #FEE2E2; color: #991B1B; }
.maint-days-soon   { background: #E0E7FF; color: #3730A3; }


/* col-apt hidden — apartment shown in group header */
table#tasks-table .col-apt { display: none; }

/* ── Worker mode pills ────────────────────────────────────────────────────── */
.maint-mode-pills { display: flex; gap: var(--s-2); }
.maint-mode-btn {
  padding: 4px 14px;
  border-radius: var(--r-full);
  font-size: var(--text-sm);
  font-weight: 500;
  border: 1px solid var(--border);
  background: var(--bg-surface);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--t-fast);
}
.maint-mode-btn.active {
  background: var(--brand-green);
  border-color: var(--brand-green);
  color: #fff;
}
.maint-mode-btn:hover:not(.active) { background: var(--bg-muted); }

/* ── Planning — time part of date (smaller + lighter) ────────────────────── */
.maint-apt-time {
  font-size: .88em;
  font-weight: 400;
}

/* ── Type badges: plain grey in task rows ────────────────────────────────── */
table#tasks-table tbody tr.clickable .badge-type {
  background: var(--bg-muted) !important;
  color: var(--text-secondary) !important;
}

/* ── Report media grid ────────────────────────────────────────────────────── */
.report-media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: var(--s-2);
  margin-top: var(--s-2);
}
.report-media-item {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--border);
}
.report-media-item a { display: block; }
.report-media-del {
  position: absolute;
  top: 3px; right: 3px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: rgba(0,0,0,.55);
  color: #fff;
  border: none;
  font-size: 14px;
  line-height: 18px;
  text-align: center;
  cursor: pointer;
  padding: 0;
}
.report-media-del:hover { background: rgba(0,0,0,.8); }

/* ── Report status notes ──────────────────────────────────────────────────── */
.report-status-note {
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-md);
  font-size: var(--text-sm);
  font-weight: 500;
  margin-bottom: var(--s-4);
  background: #FDE8FF;
  color: #7E22CE;
  border: 1px solid #E9D5FF;
}
.report-status-note.report-reviewed {
  background: #D1FAE5;
  color: #065F46;
  border-color: #A7F3D0;
}

/* ── Journal add-entry form ───────────────────────────────────────────────── */
.journal-add-form {
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-3);
  margin-bottom: var(--s-4);
}
.journal-add-form textarea {
  width: 100%;
  resize: none;
  margin-bottom: var(--s-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-2) var(--s-3);
  font-size: var(--text-sm);
  background: var(--bg-surface);
  color: var(--text-primary);
  font-family: inherit;
  box-sizing: border-box;
  transition: border-color 0.15s;
}
.journal-add-form textarea:focus {
  outline: none;
  border-color: var(--brand-green);
}
.journal-add-row {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.journal-add-media-btn {
  display: inline-flex;
  align-items: center;
  padding: var(--s-2) var(--s-3);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--r-md);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-primary);
  background: var(--bg-surface);
  cursor: pointer;
  user-select: none;
  transition: border-color 0.15s, background 0.15s;
  white-space: nowrap;
}
.journal-add-media-btn:hover {
  border-color: var(--brand-green);
  background: var(--brand-green-soft);
}
.journal-file-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
  margin-top: var(--s-2);
}
.journal-file-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  padding: 2px 8px;
  font-size: 11px;
  color: var(--text-secondary);
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Delete link in purchases ─────────────────────────────────────────────── */
.btn-link-danger {
  background: none;
  border: none;
  color: var(--danger);
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}
.btn-link-danger:hover { opacity: .7; }

/* ── Inspection findings ──────────────────────────────────────────────────── */
.finding-item {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.finding-item:last-child { border-bottom: none; }
.finding-desc { flex: 1; font-size: var(--text-sm); min-width: 120px; }
.btn-icon {
  border: none;
  background: none;
  color: var(--text-secondary);
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
  padding: 0 2px;
}
.btn-icon:hover { color: var(--danger); }


/* ── Availability page (maintenance-availability.html) ────────────────────── */
.avail-horizon {
  display: flex; align-items: center; gap: var(--s-2);
  font-size: var(--text-sm); color: var(--text-secondary);
}
.avail-horizon select {
  padding: 4px 8px; border: 1px solid var(--border);
  border-radius: var(--r-sm); font-size: var(--text-sm);
  background: var(--bg-surface); color: var(--text-primary);
}
/* Même code couleur que la page Tasks : la ligne appartement porte la dispo */
table#compact-table tbody tr.avail-row td      { background: #FFFBEB; }
table#compact-table tbody tr.avail-row-free td { background: #ECFDF5; }
.avail-bldg {
  font-size: 10px; font-weight: 600; letter-spacing: .04em;
  color: var(--text-muted); text-transform: uppercase;
}
.avail-work { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.avail-chip {
  display: inline-flex; align-items: center; gap: 5px;
  max-width: 320px; padding: 2px 8px 2px 4px;
  border: 1px solid var(--border); border-radius: var(--r-full);
  background: var(--bg-surface); text-decoration: none;
  font-size: var(--text-xs); color: var(--text-primary);
}
.avail-chip:hover { background: var(--bg-muted); }
.avail-chip > *:not(.avail-chip-title) { flex: none; }
/* min-width:0 : sans ça le titre refuse de rétrécir et pousse le badge conflit hors du chip */
.avail-chip-title {
  flex: 0 1 auto; min-width: 0; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.avail-chip-who   { color: var(--text-secondary); }
.avail-idle       { font-size: var(--text-xs); color: var(--text-muted); font-style: italic; }
.avail-add-btn    { font-size: 15px; line-height: 1; }


/* ── Vue technicien — cartes de stats compactes ───────────────────────────────
   Même parti pris que les vues terrain du ménage (`cleaning.css` § Vues terrain) :
   deux chiffres d'un coup d'œil, valeur et label sur une ligne, carte ~2× moins
   haute — la liste des tâches reste au-dessus de la ligne de flottaison sur un
   téléphone. La classe est posée par `applyWorkerChrome()` (non-admin seulement). */
body.maint-worker .stats {
  grid-template-columns: repeat(2, 1fr);
  max-width: 420px;
  margin-bottom: var(--s-4);
}
body.maint-worker .stat-card {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
}
body.maint-worker .stat-value { font-size: var(--text-lg); }
body.maint-worker .stat-label { margin-top: 0; }

/* Appartement occupé au-delà de l'horizon : gris — il a du travail en attente
   mais on ne peut pas y aller, la ligne ne doit pas se lire comme une opportunité. */
table#compact-table tbody tr.avail-row-busy td { background: var(--bg-surface); }
.maint-chip { cursor: pointer; font: inherit; }


/* Les interrupteurs de la barre de filtres — `.filter-toggle` (cleaning.css) est
   posé sur un <label> sans display, sa gouttière ne s'applique donc pas ; ici on
   les aligne comme les pills voisines. */
.filters .maint-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--text-sm);
}

/* ── Mobile — la liste avant le tableau de bord ───────────────────────────────
   Même parti pris que Cleaning admin (`cleaning.css`) : sur un téléphone on
   cherche une tâche ou un appartement, pas des KPI. Depuis la fusion la barre de
   filtres tient sur 4 lignes ; garder les 4 cartes repoussait le tableau sous la
   ligne de flottaison. La vue technicien garde ses deux cartes compactes. */
@media (max-width: 768px) {
  body[data-page="maintenance-tasks"]:not(.maint-worker) .stats { display: none; }
  body[data-page="maintenance-tasks"] .filters { gap: 5px; }
  body[data-page="maintenance-tasks"] .filters .mode-btn { padding: 0 9px; font-size: 12px; }
  body[data-page="maintenance-tasks"] .avail-horizon { font-size: var(--text-xs); }
}

/* ── Panel en flux unique — plus d'onglets ────────────────────────────────────
   POURQUOI : traiter une tâche imposait Info → Empezar → onglet Informe →
   onglet Materiales → retour Informe pour envoyer. Sur un téléphone, en haut
   d'un escabeau, c'est quatre allers-retours pour une seule action. On empile
   désormais les panes du mode courant (cf. `showPanes`) : une tâche se traite
   en descendant la page, comme le rapport des femmes de ménage.

   COMMENT : #panel-scroll devient l'unique ascenseur du panel ; les .panel-body
   redeviennent de simples blocs (sans `flex:1` ni scroll propre), séparés par un
   filet. Les panes masquées gardent leur `display:none` — le sélecteur `+` les
   traverse sans rien dessiner. */
#panel-scroll {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
#panel-scroll > .panel-body {
  flex: 0 0 auto;
  overflow: visible;
}
#panel-scroll > .panel-body + .panel-body { border-top: 1px solid var(--border); }

/* Mode travail : 380 px suffisaient pour lire une fiche, pas pour saisir un
   journal, une quantité et un ticket de caisse. `min()` rend 100vw sur
   téléphone — la règle mobile de main.css reste donc respectée. */
.detail-panel.panel-wide { width: min(560px, 100vw); }

/* Pourquoi une section est fermée (tâche pas encore démarrée) : sans ça la
   section a l'air cassée plutôt que verrouillée. */
.section-hint {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-bottom: var(--s-3);
}

/* Les deux sources de photo du ticket sont des <label> : `.form-group label`
   (main.css) les met en `display:block`, elles prenaient donc chacune toute la
   largeur et se lisaient comme deux champs. Ce sont des boutons, côte à côte. */
#panel-pane-parts .add-log-form .form-group label.btn {
  display: inline-flex;
  width: auto;
  margin-bottom: 0;
}

/* Les libellés espagnols du panneau technicien (« APARTAMENTO », « PROGRAMADA »
   ≈ 103 px) débordaient les 80 px fixes de `.panel-field-label` et venaient
   toucher la valeur. On élargit la colonne ici seulement : l'alignement des
   valeurs reste, l'anglais respire un peu plus. */
#panel-scroll .panel-field-label { width: 106px; }

/* La note d'état du rapport a migré dans le pied de panel (toujours visible) :
   elle n'a plus besoin de la gouttière qu'elle portait en tête de section. */
.panel-actions .report-status-note { margin-bottom: 0; flex: 1; text-align: center; }

/* ── Vue compacte — tiroir des tâches d'un appartement ────────────────────────
   POURQUOI : les chips de la colonne « Planned work » disent qu'il y a du
   travail, jamais dans quel état il est. Pour le savoir il fallait basculer
   toute la page en vue détaillée. Le tiroir déplie, sous la ligne, exactement
   les lignes de la vue détaillée (`taskRow()` réutilisée) — l'appartement et sa
   fenêtre de dispo restent visibles au-dessus. */
.avail-ref-row { display: flex; align-items: center; gap: 6px; }
.avail-caret { display: flex; color: var(--text-muted); flex-shrink: 0; }
/* Chevron partagé avec la sidebar (`SVG_CHEVRON`, layout.js) : il pointe vers le
   bas, on le couche vers la droite tant que le tiroir est fermé. */
.avail-caret svg { width: 13px; height: 13px; transition: transform var(--t-fast); transform: rotate(-90deg); }
tr.avail-row-drawer { cursor: pointer; }
tr.avail-row.expanded .avail-caret svg { transform: rotate(0deg); }
tr.avail-row.expanded .avail-caret { color: var(--brand-green); }

/* Le tiroir doit se lire comme le *contenu* de la ligne au-dessus, pas comme une
   ligne de plus : liseré à gauche + retrait, et fond neutre (le vert/jaune de la
   ligne appartement parle de disponibilité, pas des tâches). */
table#compact-table tbody tr.avail-drawer > td {
  padding: 0 0 0 var(--s-5);
  background: var(--bg-surface);
  box-shadow: inset 4px 0 0 var(--border-strong);
  border-bottom: 2px solid var(--border);
}
.maint-drawer-table { width: 100%; border-collapse: collapse; }
/* Mêmes largeurs que le tableau détaillé — sinon les mêmes lignes ne se lisent
   pas pareil selon l'endroit d'où on les regarde. */
.maint-drawer-table td:nth-child(1) { width: 72px; }
.maint-drawer-table td:nth-child(3),
.maint-drawer-table td:nth-child(4),
.maint-drawer-table td:nth-child(5) { width: 15%; }
.maint-drawer-table td:nth-child(6) { width: 42px; text-align: center; }
.maint-drawer-table td:nth-child(7) { width: 50px; }