/* ============================================================
   /partenaires/ · sous-traitants, fournisseurs, location, conteneurs

   COPIE DE employes/css/index.css, pas un import · le CSS de cette
   plateforme est scope par page, il n'y a pas de feuille partagee pour
   les tableaux et les tiroirs. Seules les classes .drawer-* de base et
   .drawer-section-title viennent de assets/styles.css.

   Piege paye le 2026-08-18 sur le tableau Terminé · j'avais ecrit du
   markup en supposant qu'un fichier partage portait ses styles. Il ne les
   portait pas, la page s'est affichee en texte empile. D'ou la copie
   explicite ici, et le commentaire pour que personne ne « factorise » ca
   sans verifier ce que le fichier partage contient vraiment.
   ============================================================ */

.content { background: var(--surface-soft); }

/* Onglets de page · un par type de partenaire (db/312) */
.page-tabs {
  display: flex; gap: 4px;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 24px;
  padding: 0 4px;
}
.page-tab {
  background: transparent; border: none; cursor: pointer;
  padding: 12px 20px;
  font-size: 14px; font-weight: 500;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
  font-family: inherit;
}
.page-tab:hover { color: var(--ink); }
.page-tab.active {
  color: var(--ink); font-weight: 600;
  border-bottom-color: var(--primary);
}

/* Toolbar */
.toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 24px; flex-wrap: wrap; }
.toolbar input[type="search"],
.toolbar select {
  border: 1px solid var(--hairline);
  background: var(--input-bg);
  border-radius: var(--r-md);
  padding: 0 16px;
  height: 44px;
  font-size: 14px;
  color: var(--ink);
  outline: none;
  font-family: inherit;
  transition: border-color 0.15s;
}
.toolbar input[type="search"] { min-width: 280px; }
.toolbar input[type="search"]:focus,
.toolbar select:focus { border-color: var(--primary); }
.toolbar .spacer { flex: 1; }

.btn {
  font-family: inherit;
  font-size: 14px; font-weight: 600;
  height: 44px; padding: 0 20px;
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: var(--r-pill);
  border: none;
  background: var(--surface-strong);
  color: var(--ink); cursor: pointer;
  transition: background 0.15s;
}
.btn:hover { background: var(--hairline); }
.btn.primary { background: var(--primary); color: var(--on-primary); }
.btn.primary:hover { background: var(--primary-active); }
.btn.danger { background: transparent; color: var(--semantic-down); border: 1px solid var(--hairline); }
.btn.danger:hover { background: var(--surface-strong); }

/* Table */
.table-card {
  background: var(--canvas);
  border-radius: var(--r-xl);
  border: 1px solid var(--hairline);
  overflow: hidden;
}
table.partenaires { width: 100%; border-collapse: collapse; font-size: 13px; }
table.partenaires th {
  font-size: 10px; font-weight: 600;
  color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.07em;
  padding: 12px 14px;
  text-align: left;
  background: var(--surface-soft);
  border-bottom: 1px solid var(--hairline);
  user-select: none;
}
table.partenaires td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--hairline-soft);
  color: var(--body);
  vertical-align: middle;
}
table.partenaires tbody tr { transition: background 0.1s; cursor: pointer; }
table.partenaires tbody tr:hover { background: var(--surface-soft); }
table.partenaires tbody tr:last-child td { border-bottom: none; }

.name { font-weight: 600; color: var(--ink); }
.muted { color: var(--muted-soft); font-size: 12px; }
/* Les notes peuvent etre longues · une seule ligne, coupee proprement,
   sinon une entreprise bavarde fait tripler la hauteur du tableau. */
.col-notes { max-width: 240px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.col-actions { width: 130px; text-align: right; white-space: nowrap; }
.btn-edit {
  font-family: inherit;
  font-size: 12px; font-weight: 600;
  padding: 6px 14px; border-radius: var(--r-pill);
  border: 1px solid var(--hairline);
  background: var(--canvas);
  color: var(--body); cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.btn-edit:hover { border-color: var(--primary); color: var(--primary); }

/* Documents (db/313) · une puce cliquable par fichier, dans la ligne.
   Le clic ouvre le document sans passer par le tiroir · c'est la demande
   « ouvrir les documents a partir de la ligne directement ». */
.col-docs { max-width: 220px; }
.doc-chip {
  font-family: inherit;
  font-size: 11px; font-weight: 600;
  padding: 3px 10px;
  margin: 2px 4px 2px 0;
  border-radius: var(--r-pill);
  border: 1px solid var(--hairline);
  background: var(--surface-soft);
  color: var(--body); cursor: pointer;
  max-width: 100%;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.doc-chip:hover {
  border-color: var(--primary); color: var(--primary); background: var(--primary-soft);
}

/* Liste dans le tiroir · nom complet, avec un x pour retirer. */
.docs-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: var(--space-sm); }
.doc-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background: var(--input-bg);
}
.doc-open {
  flex: 1; min-width: 0; text-align: left;
  background: none; border: none; padding: 0;
  font-family: inherit; font-size: 13px; color: var(--primary);
  cursor: pointer; text-decoration: underline;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.doc-del {
  background: none; border: none; cursor: pointer;
  color: var(--muted); font-size: 18px; line-height: 1;
  padding: 0 4px; flex-shrink: 0;
}
.doc-del:hover { color: var(--semantic-down); }
.docs-upload { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* Le <label> sert de bouton pour l'input file cache · sans cursor il ne
   se comporte pas comme un bouton au survol. */
.docs-upload label.btn { cursor: pointer; }

.empty {
  text-align: center; padding: 60px 20px;
  color: var(--muted); font-size: 13px;
}
.empty-strong { color: var(--ink); font-weight: 600; margin-bottom: 4px; }

/* Tiroir · les classes .drawer-* de base vivent dans assets/styles.css.
   On n'override que la largeur, posee en inline dans le HTML. */
@media (max-width: 768px) {
  .drawer-panel { width: 100vw; }
}

.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
}
.field-grid .field { grid-column: span 1; }
.field-grid .field.full { grid-column: 1 / -1; }
@media (max-width: 600px) {
  .field-grid { grid-template-columns: 1fr; }
  .field-grid .field { grid-column: 1 / -1; }
}
.field label {
  display: block;
  font-size: 10px; font-weight: 600;
  color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.05em;
  margin-bottom: 4px;
}
.field label .req { color: var(--semantic-down); }
.field input,
.field select,
.field textarea {
  width: 100%;
  border: 1px solid var(--hairline);
  background: var(--input-bg);
  border-radius: var(--r-md);
  padding: 8px 12px;
  font-size: 13px; font-family: var(--font-body); color: var(--ink);
  outline: none;
  transition: border-color 0.15s;
}
.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--primary); }
.field textarea { resize: vertical; min-height: 90px; }

.hint { font-size: 12px; color: var(--muted); margin-top: var(--space-xxs); }
.hint-inline { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--muted); }

.drawer-section {
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--hairline);
}

/* Acces a l'app */
.access-toggle {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background: var(--input-bg);
  cursor: pointer;
  font-size: 13px; color: var(--ink);
  user-select: none;
  margin-bottom: var(--space-sm);
}
.access-toggle:hover { border-color: var(--muted-soft); }
.access-toggle input { accent-color: var(--primary); cursor: pointer; }
.access-hint {
  font-size: 12px; color: var(--muted);
  background: var(--surface-soft);
  padding: 8px 12px;
  border-radius: var(--r-sm);
  margin-bottom: var(--space-sm);
  line-height: 1.45;
}
.access-hint strong { color: var(--ink); font-weight: 600; }
.access-hint code {
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--canvas);
  border: 1px solid var(--hairline);
  padding: 1px 5px;
  border-radius: var(--r-xs);
  color: var(--ink);
}
.password-wrap { position: relative; }
.password-wrap input { padding-right: 40px; }
.password-toggle {
  position: absolute;
  right: 6px; top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 6px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--r-sm);
  transition: color 0.15s, background 0.15s;
}
.password-toggle:hover { color: var(--ink); background: var(--surface-soft); }
.password-toggle svg { width: 18px; height: 18px; display: block; }

.toast {
  position: fixed; bottom: 24px; right: 24px;
  background: var(--ink); color: var(--canvas);
  padding: 12px 18px; border-radius: var(--r-md);
  font-size: 13px; font-weight: 600;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  z-index: 300;
  opacity: 0; transform: translateY(10px);
  transition: all 0.2s;
  /* JAMAIS capter les clics · meme a opacity:0 un element fixe reste dans
     le flux des evenements et bloquait le bouton Enregistrer du tiroir
     (tous deux en bas a droite). Bug « le 2e save ne fait rien » deja paye
     dans la page Employes · ne pas retirer cette ligne. */
  pointer-events: none;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast.error { background: var(--semantic-down); }

.no-access {
  padding: 60px 20px;
  text-align: center; color: var(--muted);
}
.no-access h2 { color: var(--ink); margin-bottom: 8px; font-size: 18px; }