/* =============================
   CLIENTS PAGE — THEME V3 (WHITE / EPURÉ) — Neutral Focus
============================= */

.clients-page__header{ margin-bottom: 20px; }

.clients-page__title{
  font-size: 30px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--text-main, #0f172a);
  margin: 0 0 6px 0;
  line-height: 1.1;
}

.clients-page__subtitle{
  color: var(--text-sub, #64748b);
  font-size: 14px;
  margin: 0;
}

/* Card wrapper */
.clients-card{
  background: var(--panel, #fff);
  border-radius: var(--radius, 16px);
  border: 1px solid var(--border, #e8eef6);
  box-shadow: var(--shadow-xs, 0 1px 6px rgba(15,23,42,.05));
  overflow: hidden;
}

/* Topbar */
.clients-topbar{
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-2, #eef2f7);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--panel, #fff);
  gap: 12px;
  flex-wrap: wrap;
}

/* Total */
.clients-total-box{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 9px 12px;
  border-radius: 14px;
  border: 1px solid var(--border, #e8eef6);
  background: #fff;
}

.clients-total-icon{
  width: 32px;
  height: 32px;
  border-radius: 12px;
  background: #f3f6fb;
  display:flex;
  align-items:center;
  justify-content:center;
  color: #0f172a;
}

.clients-total-text{ line-height: 1.15; }

.clients-total-label{
  font-size: 11px;
  color: var(--text-sub, #64748b);
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.clients-total-count{
  font-size: 15px;
  font-weight: 900;
  color: var(--text-main, #0f172a);
}

/* Search */
.clients-search{
  position: relative;
  flex: 1;
  max-width: 560px;
  min-width: 260px;
}

.clients-search__icon{
  position:absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 14px;
}

.clients-search__input{
  width: 100%;
  padding: 11px 12px 11px 42px;
  border-radius: 14px;
  border: 1px solid var(--border, #e8eef6);
  outline: none;
  font-size: 14px;
  background: #fff;
  color: var(--text-main, #0f172a);
  transition: border .15s ease, box-shadow .15s ease, background .15s ease;
}

.clients-search__input::placeholder{ color: #94a3b8; }

/* ✅ Focus neutre (plus de glow bleu) */
.clients-search__input:focus{
  border-color: #cbd5e1;
  box-shadow: 0 0 0 4px rgba(15,23,42,.06);
}

/* Filters */
.clients-filters{
  display:flex;
  gap: 10px;
  align-items:center;
  flex-wrap: wrap;
  justify-content:flex-end;
}

.clients-select{
  padding: 11px 12px;
  border-radius: 14px;
  border: 1px solid var(--border, #e8eef6);
  background: #fff;
  font-size: 14px;
  color: var(--text-main, #0f172a);
  outline:none;
  cursor:pointer;
  min-width: 180px;
}

/* ✅ Focus neutre */
.clients-select:focus{
  border-color: #cbd5e1;
  box-shadow: 0 0 0 4px rgba(15,23,42,.06);
}

/* CTA */
.clients-btn-new{
  border-radius: 14px;
  font-weight: 900;
  font-size: 14px;
  white-space: nowrap;
  padding: 11px 14px;
  background: #0f172a;
  color:#fff;
  border: 0;
  box-shadow: 0 10px 20px rgba(15,23,42,.12);
  transition: transform .08s ease, opacity .15s ease, box-shadow .15s ease;
}
.clients-btn-new:hover{ opacity:.92; box-shadow: 0 12px 24px rgba(15,23,42,.14); }
.clients-btn-new:active{ transform: translateY(1px); }

/* Table */
.clients-table{
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 14px;
  background: #fff;
}

.clients-table thead tr{
  background-color: #fafcff;
  border-bottom: 1px solid var(--border-2, #eef2f7);
}

.clients-table th{
  padding: 13px 16px;
  color: var(--text-sub, #64748b);
  font-weight: 900;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.clients-table td{
  padding: 15px 16px;
  border-bottom: 1px solid var(--border-2, #eef2f7);
  vertical-align: middle;
  color: var(--text-main, #0f172a);
}

.clients-table tbody tr:hover{ background: #fbfdff; }

.clients-th-center{ text-align: center; }

/* Loading */
.clients-loading{
  padding: 46px 18px;
  text-align: center;
  color: #94a3b8;
}
.clients-loading__icon{
  margin-bottom: 10px;
  font-size: 20px;
  display: block;
}

/* Footer */
.clients-footer{
  padding: 12px 16px;
  background: #fafcff;
  border-top: 1px solid var(--border-2, #eef2f7);
  display:flex;
  justify-content: space-between;
  align-items:center;
  gap: 12px;
  flex-wrap: wrap;
}

.clients-footer__label,
.clients-pagination__label{
  font-size: 13px;
  color: var(--text-sub, #64748b);
  font-weight: 600;
}

.clients-pagination{
  display:flex;
  align-items:center;
  gap: 10px;
}
.clients-pagination__buttons{ display:flex; gap: 8px; }

.clients-page-btn{
  padding: 8px 12px;
  border: 1px solid var(--border, #e8eef6);
  background: #fff;
  border-radius: 12px;
  cursor:pointer;
  color: var(--text-main, #0f172a);
  font-weight: 800;
  transition: background .15s ease, transform .08s ease;
}
.clients-page-btn:hover{ background:#f8fafc; }
.clients-page-btn:active{ transform: translateY(1px); }

/* Optional: badges */
.clients-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  border:1px solid var(--border, #e8eef6);
  background:#fff;
  color: var(--text-main, #0f172a);
}
.clients-badge--success{ background:#ecfdf5; border-color:#bbf7d0; color:#047857; }
.clients-badge--warning{ background:#fff7ed; border-color:#fed7aa; color:#9a3412; }
.clients-badge--danger{  background:#fff1f2; border-color:#fecdd3; color:#be123c; }
.clients-badge--info{    background:#eff6ff; border-color:#bfdbfe; color:#1d4ed8; }

/* Optional: action pills */
.clients-action{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid var(--border, #e8eef6);
  background: #fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition: background .15s ease, transform .08s ease;
}
.clients-action:hover{ background:#f8fafc; }
.clients-action:active{ transform: translateY(1px); }
.clients-action--danger{ background:#fff7f7; border-color:#fee2e2; color:#ef4444; }

/* Responsive */
@media (max-width: 900px){
  .clients-search{ max-width:none; width:100%; }
  .clients-select{ min-width: 160px; }
}