/* =========================================
   SYBIOCARE - documents.css (FULL)
   Page: Base Documentaire
   Objectif: fit parfait (no overflow)
========================================= */

.docs-page{
  padding: 28px;
}

/* =========================
   Header
========================= */

.docs-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:16px;
  margin-bottom:18px;
}

.docs-title h1{
  margin:0;
  font-size:26px;
  font-weight:900;
  letter-spacing:-0.5px;
  color:#1e222d;
}

.docs-title p{
  margin:6px 0 0 0;
  font-size:14px;
  color:#64748b;
  font-weight:500;
}

.docs-header-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

/* =========================
   Buttons (safe overrides)
========================= */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius:10px;
  padding:10px 14px;
  font-weight:800;
  font-size:13px;
  cursor:pointer;
  text-decoration:none;
  border:1px solid transparent;
  user-select:none;
  transition:transform .08s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
}

.btn:active{ transform: translateY(1px); }

.btn-primary{
  background:#1e222d;
  color:#fff;
  box-shadow:0 10px 15px -10px rgba(0,0,0,.35);
}

.btn-soft{
  background:#fff;
  color:#475569;
  border-color:#e2e8f0;
  box-shadow:0 2px 6px rgba(0,0,0,.04);
}

.btn-ghost{
  background:transparent;
  color:#475569;
  border-color:#e2e8f0;
}

.btn:disabled{
  opacity:.55;
  cursor:not-allowed;
  transform:none;
}

/* =========================
   Filters container
========================= */

.docs-filters{
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:14px;
  padding:14px;
  box-shadow:0 4px 10px -8px rgba(0,0,0,.10);
  margin-bottom:14px;
  overflow:hidden; /* ✅ empêche tout débordement */
}

/* ✅ FLEX WRAP: ne déborde jamais, s’adapte à toutes largeurs */
.filter-row{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:flex-end;
}

/* Base field */
.field{
  flex: 1 1 170px;    /* largeur mini "safe" */
  min-width: 170px;
}

.field label{
  display:block;
  font-size:11px;
  font-weight:900;
  color:#64748b;
  text-transform:uppercase;
  letter-spacing:.4px;
  margin-bottom:6px;
}

/* Inputs */
.field select,
.field input{
  width:100%;
  height:42px;
  border-radius:10px;
  border:1px solid #cbd5e1;
  padding:10px 12px;
  font-weight:700;
  font-size:13px;
  color:#1e222d;
  outline:none;
  background:#fcfdfe;
  min-width:0; /* ✅ important en flex */
}

.field select{
  background:#f8fafc;
}

/* ✅ Recherche : prend plus de place naturellement */
.field-search{
  flex: 2 1 320px;
  min-width: 260px;
}

/* Searchbox icon */
.field-search .searchbox{
  position:relative;
  width:100%;
}

.field-search .searchbox i{
  position:absolute;
  left:12px;
  top:50%;
  transform:translateY(-50%);
  color:#94a3b8;
  font-size:14px;
}

.field-search input{
  padding-left:36px;
}

/* ✅ Actions : ne doit pas étirer la ligne, et reste toujours visible */
.field-actions{
  flex: 0 1 auto;
  min-width: 260px;
}

.field-actions .actions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  flex-wrap:nowrap;
}

.field-actions .actions .btn{
  white-space:nowrap;
}

/* =========================
   Meta / Pagination row
========================= */

.docs-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin: 10px 0 16px 0;
  color:#64748b;
  font-weight:700;
  font-size:13px;
}

.docs-meta .dot{
  opacity:.5;
  padding:0 6px;
}

.docs-meta .meta-right{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:flex-end;
}

/* =========================
   List / Grid
========================= */

.docs-list{
  position:relative;
}

.docs-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:14px;
}

/* Card */
.doc-card{
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:16px;
  padding:16px;
  box-shadow:0 8px 18px -14px rgba(0,0,0,.16);
  display:flex;
  flex-direction:column;
  gap:10px;
  min-height:160px;
}

.doc-top{
  display:flex;
  justify-content:space-between;
  gap:10px;
}

.doc-title{
  font-size:15px;
  font-weight:900;
  color:#1e222d;
  line-height:1.25;
  margin:0;
}

.doc-desc{
  margin:0;
  color:#64748b;
  font-size:12.5px;
  line-height:1.4;
  font-weight:600;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}

.doc-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px 10px;
  align-items:center;
  color:#475569;
  font-weight:700;
  font-size:12px;
}

/* Badges */
.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 9px;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
  border:1px solid transparent;
  white-space:nowrap;
}

.badge-type{
  background:#eef2ff;
  border-color:#e0e7ff;
  color:#3730a3;
}

.badge-scope{
  background:#f1f5f9;
  border-color:#e2e8f0;
  color:#0f172a;
}

.badge-cat{
  background:#ecfeff;
  border-color:#cffafe;
  color:#155e75;
}

/* Variantes type */
.badge-firmware{
  background:#fff7ed;
  border-color:#ffedd5;
  color:#9a3412;
}

.badge-bulletin{
  background:#fef2f2;
  border-color:#fee2e2;
  color:#991b1b;
}

.badge-procedure{
  background:#ecfdf5;
  border-color:#d1fae5;
  color:#065f46;
}

.badge-schema{
  background:#eff6ff;
  border-color:#dbeafe;
  color:#1e40af;
}

.badge-checklist{
  background:#fdf4ff;
  border-color:#fae8ff;
  color:#86198f;
}

/* Tags */
.doc-tags{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:2px;
}

.tag{
  font-size:11px;
  font-weight:900;
  color:#475569;
  background:#f8fafc;
  border:1px solid #e2e8f0;
  padding:4px 8px;
  border-radius:999px;
}

/* Actions in card */
.doc-actions{
  margin-top:auto;
  display:flex;
  gap:10px;
  justify-content:flex-end;
  padding-top:10px;
  border-top:1px solid #f1f5f9;
}

.doc-actions .btn{
  padding:9px 12px;
  border-radius:10px;
  font-size:12px;
}

/* Empty */
.docs-empty{
  background:#fff;
  border:1px dashed #cbd5e1;
  border-radius:16px;
  padding:26px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:8px;
  color:#64748b;
}

.docs-empty i{
  font-size:26px;
  color:#94a3b8;
}

.docs-empty h3{
  margin:0;
  color:#1e222d;
  font-weight:900;
  font-size:16px;
}

.docs-empty p{
  margin:0;
  font-weight:600;
  font-size:13px;
}

/* Skeleton */
.docs-skeleton{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:14px;
}

.skeleton-card{
  height:170px;
  border-radius:16px;
  border:1px solid #e2e8f0;
  background: linear-gradient(90deg, #f8fafc 0%, #eef2f7 45%, #f8fafc 100%);
  background-size: 200% 100%;
  animation: shimmer 1.1s ease-in-out infinite;
}

@keyframes shimmer{
  0%{ background-position: 200% 0; }
  100%{ background-position: -200% 0; }
}

/* =========================
   Responsive
========================= */

@media (max-width: 1280px){
  .docs-grid, .docs-skeleton{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .field-actions{
    min-width: 240px;
  }
}

@media (max-width: 860px){
  .docs-page{ padding: 18px; }

  .docs-header{
    align-items:flex-start;
    flex-direction:column;
  }

  .docs-meta{
    flex-direction:column;
    align-items:flex-start;
  }

  .docs-meta .meta-right{
    width:100%;
    justify-content:stretch;
  }

  .docs-meta .meta-right .btn{
    flex:1;
  }

  .docs-grid, .docs-skeleton{
    grid-template-columns: 1fr;
  }

  /* filtres: actions passent en pleine largeur */
  .field{
    flex: 1 1 220px;
    min-width: 220px;
  }

  .field-search{
    flex: 1 1 100%;
    min-width: 100%;
  }

  .field-actions{
    flex: 1 1 100%;
    min-width: 100%;
  }

  .field-actions .actions{
    justify-content:stretch;
  }

  .field-actions .actions .btn{
    flex:1;
  }
}

@media (max-width: 520px){
  .field{
    flex: 1 1 100%;
    min-width: 100%;
  }
}

/* LOGICIEL mode */
.is-hidden{
  display:none !important;
}

.badge-cat-logiciel{
  background:#f0fdf4;
  border-color:#bbf7d0;
  color:#166534;
}