/**
 * ===================================================================
 * DOCUMENTS CSS - V6.5 (centrage mobile + toolbar lisible)
 * ===================================================================
 */

.documents-view-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: var(--space-3);
}
@media (min-width: 768px) {
  .documents-view-wrapper { padding: var(--space-6); }
}

/* Carte principale */
.documents-view-wrapper .card {
  width: 100%;
  max-width: min(1200px, 96vw);
  margin: 0 auto;
  min-height: auto;
  display: flex;
  flex-direction: column;
  background-color: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: var(--border-width) solid var(--glass-border-color);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  box-shadow: var(--glass-shadow, 0 10px 30px rgba(0,0,0,.35));
}

/* En-tête carte */
.card-header {
  text-align: center;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--glass-border-color);
  margin-bottom: var(--space-5);
}
.card-title { font-size: var(--text-xl); font-weight: var(--weight-semibold); color: var(--color-text-primary); }
.card-subtitle { font-size: var(--text-sm); color: var(--color-text-secondary); margin-top: var(--space-2); }

/* Upload */
.upload-section {
  width: 100%;
  max-width: 600px;
  margin: 0 auto var(--space-6) auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-grow: 1;
  justify-content: center;
  min-height: 200px;
}
#file-input { display: none; }

.drop-zone {
  width: 100%;
  min-height: 140px;
  padding: var(--space-5);
  border: 2px dashed var(--border-color);
  border-radius: var(--radius-lg);
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center;
  cursor: pointer;
  transition: all .15s ease-out;
  position: relative;
  background-color: var(--color-background-secondary);
}
.drop-zone:hover,
.drop-zone.highlight {
  border-color: var(--color-primary);
  background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
}
.upload-icon { width: 40px; height: 40px; color: var(--color-text-secondary); margin-top: var(--space-4); transition: all .15s ease-out; }
.drop-zone:hover .upload-icon { color: var(--color-primary); transform: scale(1.1); }

.drop-zone-prompt { display: flex; flex-direction: column; align-items: center; }
.drop-zone-prompt p { font-size: 1.05em; color: var(--color-text-primary); }
.drop-zone-prompt strong { color: var(--color-primary); }

.drop-zone-preview {
  display: none;
  flex-direction: column; justify-content: center; align-items: center; text-align: center;
  padding: var(--space-4); width: 100%;
}
.preview-icon { font-size: 2.5em; margin-bottom: var(--space-2); color: var(--color-text-primary); }
.preview-name {
  font-weight: 500; font-size: 1em; color: var(--color-text-secondary);
  word-break: break-all;
  background-color: var(--color-background-tertiary);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
}
.btn-clear-selection {
  background: none; border: none; font-size: 1.5rem; color: var(--color-text-primary);
  cursor: pointer; position: absolute; top: 10px; right: 10px; line-height: 1; padding: 0;
}
.btn-clear-selection:hover { color: var(--color-error); }

#upload-button { margin-top: var(--space-4); width: 100%; }
/* Bouton métal — lisible même désactivé */
.button-metal[disabled] {
  opacity: 0.95; filter: grayscale(10%); color: var(--color-text-primary); cursor: not-allowed;
}

/* États upload */
.upload-status { margin-top: var(--space-3); min-height: 1.2em; font-size: 0.9em; text-align: center; }
.upload-status.info { color: var(--color-text-secondary); }
.upload-status.success { color: var(--color-success); font-weight: 500; }
.upload-status.error { color: var(--color-error); }

/* Toolbar liste */
.list-toolbar {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--space-3); margin-bottom: var(--space-3);
}
.select-all { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-text-secondary); font-size: var(--text-sm); }
.select-all input { accent-color: var(--color-primary); }
.toolbar-actions { display: flex; gap: var(--space-2); }

/* Boutons de la toolbar (cohérents avec Chat) */
#btn-delete-selected, #btn-delete-all{
  display:inline-flex; align-items:center; justify-content:center;
  height:32px; padding:0 .75rem;
  border-radius:12px; color:#fff; background:transparent;
  border:1px solid rgba(255,255,255,.18);
  transition: background .2s, border-color .2s, color .2s, box-shadow .2s;
}
#btn-delete-selected:hover, #btn-delete-all:hover{ background:rgba(255,255,255,.06); }
#btn-delete-selected:disabled{ opacity:.5; cursor:not-allowed; }
#btn-delete-all:active{ background:#b91c1c; border-color:#b91c1c; }

/* Liste */
.list-section { border-top: 1px solid var(--glass-border-color); padding-top: var(--space-5); }
.list-title   { font-size: var(--text-lg); font-weight: var(--weight-medium); color: var(--color-text-primary); margin-bottom: var(--space-3); text-align: center; }
.empty-list-message { text-align: center; color: var(--color-text-secondary); padding: var(--space-6) 0; font-size: var(--text-sm); }

.document-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }

.document-item {
  display: grid;
  grid-template-columns: auto auto 1fr auto auto auto;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background-color: var(--color-background-tertiary);
  border: 1px solid transparent;
  transition: all .15s ease-out;
}

/* checkbox | icon | name | date | status | actions */
@media (max-width: 600px) {
  .document-item {
    grid-template-columns: auto auto 1fr auto;
    grid-template-rows: auto auto auto;
    gap: var(--space-2) var(--space-4);
  }
  .doc-name   { grid-column: 3 / 5; grid-row: 1 / 2; }
  .doc-date   { grid-column: 3 / 4; grid-row: 2 / 3; }
  .doc-status { grid-column: 4 / 5; grid-row: 2 / 3; justify-self: end; }
  .doc-remove { grid-column: 1 / 5; grid-row: 3 / 4; justify-self: flex-end; }
}
.document-item:hover { background-color: var(--color-background-light); border-color: var(--border-color); transform: translateY(-1px); }
.doc-select { transform: translateY(1px); }
.doc-icon   { font-size: 1.1rem; color: var(--color-text-secondary); }
.doc-name   { font-weight: 500; color: var(--color-text-primary); font-size: var(--text-sm); }
.doc-date   { font-size: var(--text-xs); color: var(--color-text-secondary); }
.doc-status { font-size: 0.7rem; font-weight: 600; padding: 2px 6px; border-radius: var(--radius-full); color: #fff; text-transform: uppercase; }
.status-ready { background-color: var(--color-success); }
.status-processing { background-color: var(--color-warning); }
.status-error { background-color: var(--color-error); }

.doc-remove{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:.4rem .8rem;
  border-radius:12px;
  border:1px solid rgba(248,113,113,.45);
  background:rgba(127,29,29,.18);
  color:#fecaca;
  font-size:0.85rem;
  font-weight:600;
  letter-spacing:.03em;
  text-transform:uppercase;
  cursor:pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease;
  align-self:center;
}
.doc-remove:hover{
  background:rgba(248,113,113,.25);
  border-color:rgba(248,113,113,.65);
  color:#fee2e2;
  transform:translateY(-1px);
  box-shadow:0 12px 24px rgba(127,29,29,.35);
}
.doc-remove:focus-visible{
  outline:2px solid rgba(248,113,113,.6);
  outline-offset:2px;
}
.doc-remove:disabled{
  opacity:.45;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}
.doc-remove-icon svg{
  width:16px;
  height:16px;
  display:block;
}
.doc-remove-label{
  line-height:1;
}

/* Document Actions */
.doc-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.doc-action {
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  background: rgba(15, 23, 42, 0.5);
  color: rgba(226, 232, 240, 0.85);
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.doc-action:hover {
  background: rgba(56, 189, 248, 0.12);
  border-color: rgba(56, 189, 248, 0.4);
  transform: translateY(-1px);
}

.doc-action.doc-remove:hover {
  background: rgba(248, 113, 113, 0.25);
  border-color: rgba(248, 113, 113, 0.65);
}

/* Document Preview Modal */
.doc-preview-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.doc-preview-modal__backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
}

.doc-preview-modal__content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 900px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  background: rgba(15, 23, 42, 0.98);
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.3);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}

.doc-preview-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}

.doc-preview-modal__title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: rgba(226, 232, 240, 0.95);
}

.doc-preview-modal__close {
  padding: 8px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: rgba(226, 232, 240, 0.7);
  font-size: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.doc-preview-modal__close:hover {
  background: rgba(239, 68, 68, 0.15);
  color: #fca5a5;
}

.doc-preview-modal__body {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
}

.doc-preview-modal__text {
  margin: 0;
  padding: 16px;
  background: rgba(15, 23, 42, 0.8);
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  color: rgba(226, 232, 240, 0.9);
  font-family: 'Courier New', monospace;
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-wrap: break-word;
}
/* ===== Mobile Portrait : centrage garanti ===== */
@media (max-width: 760px){
  .documents-view-wrapper{
    padding: 12px 12px 18px;
    justify-content: stretch;
    align-items: stretch;
  }
  .documents-view-wrapper .card{
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 18px 14px;
  }
  .list-toolbar{ flex-direction: column; align-items: stretch; gap: .75rem; }
  .select-all{ justify-content: center; }
  .toolbar-actions{ justify-content: center; flex-wrap: wrap; gap: .5rem; }
  #btn-delete-selected, #btn-delete-all{ white-space: nowrap; height: 36px; padding: 0 .85rem; }
}