/* Vue « document » (#/doc/:docId). Les composants partagés viennent de base.css. */

.doc-title {
  display: block;
  max-width: 100%;
  padding: 6px 6px;
  overflow: hidden;
  border-radius: var(--radius-sm);
  color: inherit;
  font: inherit;
  text-align: left;
  white-space: nowrap;
  text-overflow: ellipsis;
  transition: background-color .15s var(--ease);
}

.doc-title:active {
  background: var(--surface-2);
}

/* Titre très long ou sans espace (« Facture_2026_09_21_client_… ») : ellipse sur un bloc, pas sur le bouton. */
.doc-title__text {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.doc-main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: 12px calc(12px + var(--safe-r)) 18px calc(12px + var(--safe-l));
}

.doc-loading {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 40px 24px;
  color: var(--text-dim);
  font-size: 15px;
}

/* ------------------------------------------------------------ grille des pages */

.doc-grid {
  position: relative;   /* repère de l'indicateur d'insertion */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(144px, 1fr));
  gap: 12px;
  margin: 0;
}

.doc-page {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* focus rendu à une vignette (fermeture de la visionneuse) : pas sous les barres collantes */
  scroll-margin: calc(64px + var(--safe-t)) 0 calc(76px + var(--safe-b));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.doc-page--dragging {
  position: relative;
  z-index: 5;
  opacity: .92;
  border-color: var(--accent);
  box-shadow: var(--shadow);
}

.doc-page__open {
  display: block;
  width: 100%;
  background: var(--surface-2);
}

.doc-page__img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.doc-page__placeholder {
  display: flex;
  aspect-ratio: 3 / 4;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
}

.doc-page__footer {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-left: 10px;
  border-top: 1px solid var(--border);
}

.doc-page__label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.doc-grid__marker {
  position: absolute;
  width: 4px;
  border-radius: 2px;
  background: var(--accent);
  pointer-events: none;
}

/* ---------------------------------------------------------------- visionneuse */

.doc-viewer {
  position: fixed;
  inset: 0;
  z-index: 40;   /* sous les dialogues de base.css (1000+) */
  display: flex;
  flex-direction: column;
  overflow: hidden;              /* diapositives voisines hors écran */
  background: var(--bg);
  color: var(--text);
  touch-action: none;
  overscroll-behavior: contain;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;   /* iOS : pas de menu « Enregistrer l'image » pendant un zoom ou un balayage */
}

.doc-viewer[hidden] {
  display: none;
}

.doc-viewer__bar {
  display: flex;
  flex: none;
  align-items: center;
  gap: 4px;
  background: var(--surface);
}

.doc-viewer__bar--top {
  padding: 4px calc(8px + var(--safe-r)) 4px calc(8px + var(--safe-l));
  padding-top: calc(4px + var(--safe-t));
  border-bottom: 1px solid var(--border);
}

.doc-viewer__bar--bottom {
  padding: 6px calc(6px + var(--safe-r)) calc(6px + var(--safe-b)) calc(6px + var(--safe-l));
  border-top: 1px solid var(--border);
}

.doc-viewer__counter {
  flex: 1 1 auto;
  min-width: 0;
  padding-right: var(--tap);   /* compense le bouton de fermeture : le compteur reste centré */
  font-size: 15px;
  font-weight: 600;
  text-align: center;
}

.doc-viewer__track {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  will-change: transform;
  transition: transform .26s var(--ease);
}

.doc-viewer__track--instant {
  transition: none;
}

.doc-viewer__slide {
  display: flex;
  flex: 0 0 100%;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 6px;
}

.doc-viewer__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transform-origin: center center;
}

.doc-viewer__action {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  min-height: var(--tap);
  padding: 6px 2px;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  transition: background-color .15s var(--ease);
}

.doc-viewer__action:active {
  background: var(--surface-2);
}

.doc-viewer__action--danger {
  color: var(--danger);
}

/* Libellé traduit plus long que la colonne (« Zuschneiden » sur 320 px) : césure plutôt que débordement. */
.doc-viewer__action > span {
  max-width: 100%;
  text-align: center;
  -webkit-hyphens: auto;
  hyphens: auto;
  overflow-wrap: anywhere;
}

/* -------------------------------------------------- feuilles (export, texte) */

.doc-export,
.doc-ocr,
.doc-files {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 4px 0 6px;
}

.doc-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.doc-section[hidden] {
  display: none;
}

.doc-section__title {
  font-size: 13px;
  font-weight: 650;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.doc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.doc-value {
  font-size: 15px;
  color: var(--text-dim);
  word-break: break-word;   /* repli iOS < 15.4 (sans overflow-wrap: anywhere) */
  overflow-wrap: anywhere;
}

.doc-hint {
  font-size: 13px;
  color: var(--text-dim);
}

.doc-files__name {
  font-size: 15px;
  font-weight: 600;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Deux boutons côte à côte s'ils tiennent, sinon empilés (« Télécharger » déborderait sous ~360 px). */
.doc-files__actions,
.doc-ocr__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.doc-files__actions .btn,
.doc-ocr__actions .btn {
  flex: 1 1 160px;
  min-width: 0;
}

.doc-ocr__text {
  max-height: 44vh;
  padding: 12px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  font-size: 15px;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
  -webkit-user-select: text;
  user-select: text;
}

/* Écrans de 320 px : les libellés traduits de la barre inférieure (« Seite hinzufügen », « Exportieren »)
   tiennent dans les deux boutons sans manger la marge droite ; césure en dernier recours. */
@media (max-width: 359px) {
  .doc-main + .bottombar > .btn {
    min-width: 0;
    padding: 0 12px;
    -webkit-hyphens: auto;
    hyphens: auto;
    overflow-wrap: anywhere;
  }
}

/* Écrans larges : grille plus dense, centrée. */
@media (min-width: 720px) {
  .doc-grid {
    width: 100%;
    max-width: 880px;
    margin: 0 auto;
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  }
}