/* ==========================================================================
   PORTAL — extensions locales. La base partagée avec TMS est :
   public/css/tokens.css + public/css/ui.css (copies identiques, ne pas les fork).
   Purpose: Formulaires, filtres, tableaux, actions, clone, split, responsive.
   Position: Chargé après ui.css dans base.html.twig / login / erreurs.
   ========================================================================== */

/* Statuts propres à Portal (absents du ui.css TMS) */
.zt-status--cloned { --zt-status-color: var(--zt-info-strong); }
.zt-status--info { --zt-status-color: var(--zt-info); }
a.zt-status--link {
  text-decoration: none;
  cursor: pointer;
}
a.zt-status--link:hover {
  filter: brightness(1.08);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Champs : tokens partout */
.form-control,
.form-select,
select.form-select {
  border: 1px solid var(--zt-border-strong);
  border-radius: var(--zt-radius-md);
  background-color: var(--zt-bg-page);
  color: var(--zt-text);
  font-family: var(--zt-font-sans);
  font-size: var(--zt-text-md);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--zt-primary-border);
  box-shadow: 0 0 0 0.25rem var(--zt-primary-focus);
  background-color: var(--zt-bg-page);
  color: var(--zt-text);
}

.form-label {
  font-size: var(--zt-text-sm);
  font-weight: var(--zt-weight-medium);
  color: var(--zt-text);
  margin-bottom: var(--zt-space-1);
}

.form-check-label {
  font-size: var(--zt-text-md);
  color: var(--zt-text);
}

.form-text {
  color: var(--zt-text-secondary);
  font-size: var(--zt-text-xs);
}

.invalid-feedback {
  font-size: var(--zt-text-xs);
  color: var(--zt-danger-strong);
}

.was-validated .form-control:invalid,
.was-validated .form-select:invalid,
.form-control.is-invalid,
.form-select.is-invalid {
  border-color: var(--zt-danger);
}

.was-validated .form-control:invalid:focus,
.form-control.is-invalid:focus {
  box-shadow: 0 0 0 0.25rem rgba(var(--zt-danger-rgb), 0.25);
}

.btn {
  font-family: var(--zt-font-sans);
  font-size: var(--zt-text-md);
  font-weight: var(--zt-weight-medium);
  border-radius: var(--zt-radius-md);
}

.btn-sm {
  font-size: var(--zt-text-sm);
}

/* Barre de filtres */
.zt-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--zt-space-2);
  align-items: flex-end;
  padding: var(--zt-space-3);
  margin-bottom: var(--zt-space-4);
  background: var(--zt-bg-surface);
  border: 1px solid var(--zt-border);
  border-radius: var(--zt-radius-lg);
}

.zt-toolbar .zt-toolbar__grow {
  flex: 1 1 12rem;
  min-width: 10rem;
}

.zt-toolbar .zt-toolbar__field {
  flex: 0 1 9rem;
  min-width: 7rem;
}

/* Même hauteur visuelle input / select dans la toolbar */
.zt-toolbar .form-control,
.zt-toolbar .form-select {
  height: 2.25rem;
  min-height: 2.25rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

/* Tableau */
.zt-table-wrap {
  background: var(--zt-bg-surface);
  border: 1px solid var(--zt-border);
  border-radius: var(--zt-radius-lg);
  overflow: auto;
}

.zt-table-wrap .table {
  margin-bottom: 0;
  font-size: var(--zt-text-sm);
  color: var(--zt-text);
}

.zt-table-wrap thead th {
  background: var(--zt-bg-subtle);
  color: var(--zt-text-secondary);
  font-weight: var(--zt-weight-semibold);
  border-bottom-color: var(--zt-border);
  white-space: nowrap;
}

.zt-table-wrap td {
  border-color: var(--zt-border);
  vertical-align: middle;
}

/* Ligne / card cliquable → détail (actions internes ignorées via row-link.js) */
.zt-row-link {
  cursor: pointer;
}

.zt-table-wrap tbody tr.zt-row-link:hover > td {
  background: var(--zt-bg-hover);
}

.zt-row-link:focus-visible {
  outline: 2px solid var(--zt-blue-500, #084cac);
  outline-offset: -2px;
}

.zt-status-form {
  display: flex;
  gap: var(--zt-space-1);
  align-items: center;
  min-width: 10.5rem;
}

.zt-status-form .form-select {
  min-width: 8.25rem;
  width: auto;
}

/* Actions PDF / Excel / Edit / Toggle — pastilles TMS (a + button) */
.zt-table__actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--zt-space-1);
}

.zt-table__actions form {
  display: inline;
  margin: 0;
}

.zt-table__actions .zt-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.125rem;
  height: 2.125rem;
  padding: 0;
  border: 1px solid var(--zt-border-strong);
  border-radius: var(--zt-radius-md);
  background: var(--zt-bg-subtle);
  color: var(--zt-text-secondary);
  text-decoration: none;
  line-height: 1;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.zt-table__actions .zt-icon-btn i {
  font-size: 1rem;
}

.zt-table__actions .zt-icon-btn:hover {
  background: var(--zt-bg-hover);
  color: var(--zt-text);
  border-color: var(--zt-border-strong);
}

.zt-table__actions .zt-icon-btn--pdf {
  color: var(--zt-danger-strong);
  border-color: color-mix(in srgb, var(--zt-danger) 35%, var(--zt-border));
  background: var(--zt-danger-soft);
}

.zt-table__actions .zt-icon-btn--pdf:hover {
  background: color-mix(in srgb, var(--zt-danger-soft) 70%, var(--zt-danger));
  border-color: var(--zt-danger);
  color: var(--zt-danger-strong);
}

.zt-table__actions .zt-icon-btn--excel {
  color: var(--zt-success-strong);
  border-color: color-mix(in srgb, var(--zt-success) 35%, var(--zt-border));
  background: var(--zt-success-soft);
}

.zt-table__actions .zt-icon-btn--excel:hover {
  background: color-mix(in srgb, var(--zt-success-soft) 70%, var(--zt-success));
  border-color: var(--zt-success);
  color: var(--zt-success-strong);
}

.zt-table__actions .zt-icon-btn--edit {
  color: var(--zt-primary-text);
  border-color: var(--zt-primary-border);
  background: var(--zt-primary-soft);
}

.zt-table__actions .zt-icon-btn--edit:hover {
  background: color-mix(in srgb, var(--zt-primary-soft) 60%, var(--zt-primary));
  border-color: var(--zt-primary);
  color: var(--zt-primary-strong);
}

.zt-table__actions .zt-icon-btn--clone {
  color: var(--zt-info-strong, #1d4ed8);
  border-color: color-mix(in srgb, var(--zt-info, #3b82f6) 35%, var(--zt-border));
  background: var(--zt-info-soft, #eff6ff);
}

.zt-table__actions .zt-icon-btn--clone:hover {
  background: color-mix(in srgb, var(--zt-info-soft, #eff6ff) 60%, var(--zt-info, #3b82f6));
  border-color: var(--zt-info, #3b82f6);
  color: var(--zt-info-strong, #1d4ed8);
}

.zt-table__actions .zt-icon-btn--warn {
  color: var(--zt-warning-strong, #92400e);
  border-color: color-mix(in srgb, var(--zt-warning) 40%, var(--zt-border));
  background: var(--zt-warning-soft, #fef3c7);
}

.zt-table__actions .zt-icon-btn--warn:hover {
  background: color-mix(in srgb, var(--zt-warning-soft, #fef3c7) 60%, var(--zt-warning));
  border-color: var(--zt-warning);
  color: var(--zt-warning-strong, #92400e);
}

/* Ligne utilisateur désactivé — barre rouge + fond danger lisible clair/sombre */
.zt-row--disabled {
  background: var(--zt-danger-soft) !important;
}

.zt-row--disabled td {
  color: var(--zt-text-secondary);
}

.zt-row--disabled td:first-child {
  box-shadow: inset 4px 0 0 var(--zt-danger);
}

.zt-row--disabled .fw-medium {
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--zt-danger) 60%, transparent);
}

.zt-tag--warn {
  background: var(--zt-warning-soft, #fef3c7);
  color: var(--zt-warning-strong, #92400e);
}

.zt-tag-group {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--zt-space-2);
  align-items: center;
}

/* Initials accent inside name tags (détail rapport) */
.zt-tag__ini {
  color: var(--zt-primary-text);
  font-weight: var(--zt-weight-semibold);
  margin-right: var(--zt-space-1);
}

/* Ligne Event mise en avant dans le time log */
tr.zt-row--emphasis td {
  background: var(--zt-primary-soft);
  color: var(--zt-text);
}

/* Bandeau durées (détail rapport) */
.zt-metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--zt-space-2);
}

.zt-metrics__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--zt-space-1);
  padding: var(--zt-space-3) var(--zt-space-2);
  background: var(--zt-primary-soft);
  border: 1px solid var(--zt-primary-border);
  border-radius: var(--zt-radius-md);
  text-align: center;
}

.zt-metrics__item--primary {
  background: color-mix(in srgb, var(--zt-primary-soft) 70%, var(--zt-primary));
  border-color: var(--zt-primary);
}

.zt-metrics__label {
  font-size: var(--zt-text-xs);
  font-weight: var(--zt-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--zt-text-secondary);
}

.zt-metrics__value {
  font-size: var(--zt-text-lg);
  font-weight: var(--zt-weight-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--zt-primary-strong);
  letter-spacing: 0.02em;
}

.zt-metrics__item--primary .zt-metrics__value {
  color: var(--zt-primary-text);
  font-size: var(--zt-text-xl);
}

@media (max-width: 767.98px) {
  .zt-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .zt-metrics__item--primary {
    grid-column: 1 / -1;
  }
}

/* --------------------------------------------------------------------------
   Split compare clone | source (report show ?compare=1)
   Purpose: Panneaux gauche (clone) / droite (original).
   -------------------------------------------------------------------------- */
.zt-report-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--zt-space-4);
  align-items: start;
}

.zt-report-split__pane {
  min-width: 0;
  border: 1px solid var(--zt-border);
  border-radius: var(--zt-radius-lg);
  background: var(--zt-bg-subtle);
  padding: var(--zt-space-3);
}

.zt-report-split__pane--source {
  border-color: color-mix(in srgb, var(--zt-info, #3b82f6) 35%, var(--zt-border));
}

.zt-report-split__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--zt-space-2);
  margin: calc(-1 * var(--zt-space-3));
  margin-bottom: var(--zt-space-3);
  padding: var(--zt-space-3);
  border-bottom: 1px solid var(--zt-border);
  border-radius: var(--zt-radius-lg) var(--zt-radius-lg) 0 0;
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--zt-bg-subtle);
}

/* Densité : détail en une colonne dans chaque panneau */
.zt-report-split .zt-detail {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--zt-space-4);
}

@media (max-width: 991.98px) {
  .zt-report-split {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --------------------------------------------------------------------------
   Reports list : table desktop / cards mobile
   Purpose: Lisibilité téléphone — une card par rapport (pas de scroll horizontal).
   -------------------------------------------------------------------------- */
.zt-report-cards {
  display: none;
  flex-direction: column;
  gap: var(--zt-space-3);
}

.zt-report-card {
  padding: var(--zt-space-3);
  border: 1px solid var(--zt-border);
  border-left: 3px solid var(--zt-primary-border);
  border-radius: var(--zt-radius-md);
  background: var(--zt-bg-surface);
}

.zt-report-card__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--zt-space-2);
  margin-bottom: var(--zt-space-2);
}

.zt-report-card__id {
  font-weight: var(--zt-weight-semibold);
  color: var(--zt-primary-text);
  text-decoration: none;
}

.zt-report-card__id:hover {
  text-decoration: underline;
}

.zt-report-card__date {
  font-size: var(--zt-text-sm);
  color: var(--zt-text-secondary);
}

.zt-report-card__processed {
  margin-left: auto;
}

.zt-report-card__project {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  margin-bottom: var(--zt-space-2);
  font-size: var(--zt-text-sm);
}

.zt-report-card__status {
  margin-bottom: var(--zt-space-2);
  min-width: 0;
  width: 100%;
}

.zt-report-card__status .form-select {
  flex: 1 1 auto;
  min-width: 0;
}

.zt-report-card__loc {
  margin-bottom: var(--zt-space-2);
  font-size: var(--zt-text-sm);
  color: var(--zt-text-secondary);
}

.zt-report-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--zt-space-2);
  padding-top: var(--zt-space-2);
  border-top: 1px solid var(--zt-border);
}

@media (max-width: 767.98px) {
  .zt-reports-table {
    display: none !important;
  }

  .zt-report-cards {
    display: flex;
  }
}

@media (min-width: 768px) {
  .zt-report-cards {
    display: none !important;
  }
}

/* Bouton processed : pastille cliquable sans chrome Bootstrap */
button.zt-status-toggle {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  line-height: 1;
}

button.zt-status-toggle:hover .zt-status {
  filter: brightness(0.95);
}

/* Evite un trou sous la nav (toasts hors flux) */
.toast-container {
  position: fixed;
  top: var(--zt-space-4);
  right: var(--zt-space-4);
  z-index: 1080;
  width: auto;
  max-width: 22rem;
  pointer-events: none;
}

.toast-container .toast {
  pointer-events: auto;
}

/* Autocomplete projet (New/Edit report) — input = gabarit form-control */
.zt-ac {
  position: relative;
}

.zt-ac__select {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.zt-ac__list {
  position: absolute;
  z-index: 30;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 0.25rem 0;
  list-style: none;
  max-height: 16rem;
  overflow: auto;
  background: var(--zt-bg-surface);
  border: 1px solid var(--zt-border-strong);
  border-radius: var(--zt-radius-md);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.08);
}

.zt-ac__item {
  padding: 0.4rem 0.75rem;
  cursor: pointer;
  color: var(--zt-text);
  font-size: var(--zt-text-sm);
}

.zt-ac__item:hover,
.zt-ac__item:focus {
  background: var(--zt-bg-hover);
}

.zt-ac__empty {
  padding: 0.5rem 0.75rem;
  color: var(--zt-text-muted);
  font-size: var(--zt-text-sm);
}

/* Choices.js (clair + densite) — dark deja dans ui.css */
.choices {
  margin-bottom: 0;
  font-size: var(--zt-text-md);
}

.choices__inner {
  background-color: var(--zt-bg-page);
  border: 1px solid var(--zt-border-strong);
  border-radius: var(--zt-radius-md);
  color: var(--zt-text);
  min-height: 2.375rem;
  padding: 0.35rem 0.75rem;
  font-size: var(--zt-text-md);
}

.choices.is-focused .choices__inner,
.choices.is-open .choices__inner {
  border-color: var(--zt-primary-border);
  box-shadow: 0 0 0 0.25rem var(--zt-primary-focus);
}

.choices__list--dropdown,
.choices__list[aria-expanded] {
  background: var(--zt-bg-surface);
  border-color: var(--zt-border-strong);
  z-index: 20;
}

.choices__list--dropdown .choices__item--selectable.is-highlighted,
.choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
  background: var(--zt-bg-hover);
  color: var(--zt-text);
}

.choices__list--multiple .choices__item {
  background-color: var(--zt-primary-soft);
  border: 1px solid var(--zt-primary-border);
  color: var(--zt-primary-text);
  border-radius: var(--zt-radius-sm);
}

.choices__placeholder {
  color: var(--zt-text-muted);
  opacity: 1;
}

.choices__input {
  background-color: transparent !important;
  color: var(--zt-text);
}

.zt-field .choices.is-invalid .choices__inner,
.was-validated .zt-field select:invalid + .choices .choices__inner {
  border-color: var(--zt-danger);
}

/* Header : flex-basis 420px cassait le mobile (gros trou en haut) */
.zt-page-header__main {
  flex: 1 1 auto;
  min-width: 0;
}

@media (max-width: 991.98px) {
  .modern-navbar .brand-subtitle,
  .modern-navbar .user-info {
    display: none;
  }

  .modern-navbar .navbar-collapse {
    margin-top: var(--zt-space-2);
  }

  /* Collapse ferme = pas de hauteur fantome */
  .modern-navbar .navbar-collapse:not(.show) {
    display: none !important;
  }

  main.container {
    padding-top: var(--zt-space-3) !important;
    padding-bottom: var(--zt-space-4) !important;
  }

  .zt-page-header {
    flex-direction: column;
    align-items: stretch;
    gap: var(--zt-space-3);
    padding-bottom: var(--zt-space-3);
    margin-bottom: var(--zt-space-3);
  }

  .zt-page-header__main {
    flex: 1 1 100%;
  }

  .zt-page-header__actions {
    width: 100%;
  }

  .zt-page-header__actions .btn {
    width: 100%;
  }

  .zt-toolbar .zt-toolbar__field,
  .zt-toolbar .zt-toolbar__grow {
    flex: 1 1 100%;
  }

  .zt-toolbar .btn {
    width: 100%;
  }

  .zt-status-form {
    min-width: 0;
    width: 100%;
  }

  .zt-status-form .form-select {
    flex: 1 1 auto;
    min-width: 0;
  }
}