/* ═══════════════════════════════════════
   TBS — Clientes
   Estilos exclusivos da página Clientes
═══════════════════════════════════════ */

/* ─── LAYOUT ─── */
.clients-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 24px;
  align-items: start;
}

/* ─── BARRA DE BUSCA ─── */
.search-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: 13px;
  padding: 11px 16px;
  font-size: 13px;
  color: var(--text3);
  margin-bottom: 16px;
  cursor: text;
}

/* ─── TABELA DE CLIENTES ─── */
.clients-table { width: 100%; border-collapse: collapse; }
.clients-table th {
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,0.02);
}
.clients-table td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  vertical-align: middle;
}
.clients-table tr:last-child td  { border-bottom: none; }
.clients-table tr:hover td       { background: rgba(255,255,255,0.02); cursor: pointer; }

.client-cell  { display: flex; align-items: center; gap: 12px; }
.client-name  { font-weight: 700; color: var(--white); }
.client-phone { font-size: 11px; color: var(--text2); margin-top: 2px; }

/* ─── PAINEL LATERAL DE DETALHE (desktop) ─── */
.client-detail-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  position: sticky;
  top: calc(var(--topbar-h) + 28px);
}
.cdp-header {
  padding: 20px;
  border-bottom: 1px solid var(--border);
  text-align: center;
  background: linear-gradient(180deg, rgba(90,24,154,0.08), transparent);
}
.cdp-avatar {
  width: 52px; height: 52px;
  border-radius: 16px;
  background: linear-gradient(135deg, #22d3a5, #7B2FBE);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 700; color: white;
  margin: 0 auto 10px;
}
.cdp-name     { font-family: 'Epilogue', sans-serif; font-size: 18px; font-weight: 800; color: var(--white); }
.cdp-location { font-size: 12px; color: var(--text2); margin-top: 2px; }
.cdp-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.cdp-stat       { text-align: center; }
.cdp-stat-val   { font-family: 'Epilogue', sans-serif; font-size: 18px; font-weight: 800; color: var(--white); }
.cdp-stat-label { font-size: 11px; color: var(--text2); margin-top: 2px; }
.cdp-actions    { padding: 16px 20px; display: flex; flex-direction: column; gap: 8px; }
.cdp-action {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  transition: all 0.15s;
}
.cdp-action:hover { background: var(--surface3); color: var(--white); }

/* ─── FILTROS DE STATUS ─── */
.filter-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.filter-tab {
  padding: 7px 16px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid var(--border2);
  color: var(--text2);
  background: transparent;
  font-family: 'Plus Jakarta Sans', sans-serif;
  transition: all 0.18s;
}
.filter-tab:hover        { color: var(--text); }
.filter-tab.active       { background: var(--accent); color: white; border-color: var(--accent); }

/* ─── MODAL NOVO / EDITAR CLIENTE ─── */
.modal-box {
  background: var(--surface);
  border: 1px solid rgba(109,40,217,0.3);
  border-radius: 24px;
  width: 100%;
  max-width: 580px;
  max-height: 90vh;
  overflow-y: auto;
  margin: 0 16px;
  box-shadow: 0 0 80px rgba(109,40,217,0.25);
}

/* ─── TOGGLE SWITCH (real input) ─── */
.toggle-wrap { display: inline-flex; align-items: center; cursor: pointer; }
.toggle-wrap input[type="checkbox"] { display: none; }
.toggle-switch-real {
  width: 40px; height: 22px;
  background: var(--surface3);
  border-radius: 11px;
  position: relative;
  transition: background 0.2s;
  display: block;
  flex-shrink: 0;
}
.toggle-wrap input:checked + .toggle-switch-real { background: var(--accent); }
.toggle-switch-real::after {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 16px; height: 16px;
  background: white;
  border-radius: 50%;
  transition: transform 0.2s;
}
.toggle-wrap input:checked + .toggle-switch-real::after { transform: translateX(18px); }

/* ─── VALIDAÇÃO DE CAMPOS ─── */
.field-msg {
  font-size: 11px;
  margin-top: 5px;
  min-height: 16px;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.18s;
}
.field-msg.ok    { color: var(--green); }
.field-msg.erro  { color: var(--red); }
.field-msg.aviso { color: var(--orange); }
.form-input.valid   { border-color: rgba(16,217,160,0.5) !important; background: rgba(16,217,160,0.04); }
.form-input.invalid { border-color: rgba(244,63,94,0.5)  !important; background: rgba(244,63,94,0.04); }
.form-input.typing  { border-color: rgba(109,40,217,0.5) !important; }

/* ═══════════════════════════════════════
   RESPONSIVIDADE MOBILE
═══════════════════════════════════════ */
@media (max-width: 900px) {

  /* ── Layout principal: 1 coluna ── */
  .clients-layout {
    grid-template-columns: 1fr;
  }

  /* ── Page header: empilha título e botões ── */
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .page-header > div:last-child {
    width: 100%;
    display: flex;
    gap: 8px;
  }
  .page-header .btn-secondary,
  .page-header .btn-primary {
    flex: 1;
    justify-content: center;
    font-size: 12px;
    padding: 9px 10px;
  }

  /* ── KPI cards: 2x2 em vez de 4 colunas ── */
  .kpi-grid-clientes {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .kpi-grid-clientes > div {
    padding: 12px 14px !important;
    border-radius: 12px !important;
  }
  .kpi-grid-clientes .kpi-number {
    font-size: 18px !important;
  }

  /* ── Filtros: scroll horizontal sem quebrar linha ── */
  .filter-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    scrollbar-width: none;
    gap: 6px;
  }
  .filter-tabs::-webkit-scrollbar { display: none; }
  .filter-tab {
    flex-shrink: 0;
    padding: 6px 13px;
    font-size: 11.5px;
  }

  /* ── Tabela → Cards ── */
  .clients-table thead { display: none; }
  .clients-table,
  .clients-table tbody,
  .clients-table tr,
  .clients-table td { display: block; width: 100%; }

  .clients-table tr {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 14px;
    margin-bottom: 10px;
    padding: 12px 14px;
    position: relative;
    cursor: pointer;
  }
  .clients-table tr:last-child { margin-bottom: 0; }
  .clients-table td {
    padding: 3px 0;
    border: none;
    font-size: 12px;
  }
  /* Oculta colunas secundárias no card mobile */
  .clients-table td[data-label="Score"],
  .clients-table td[data-label="Serviços"],
  .clients-table td[data-label="Total"] { display: none; }

  /* Linha 1 do card: avatar + nome + status (canto) */
  .clients-table td[data-label="Cliente"] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
    padding-right: 70px; /* espaço para o badge de status */
  }
  .clients-table td[data-label="Status"] {
    position: absolute;
    top: 14px;
    right: 12px;
    padding: 0;
    width: auto;
  }
  /* Linha 2: contato */
  .clients-table td[data-label="Contato"] {
    color: var(--text2);
    font-size: 12px;
    padding-left: 46px; /* alinha com o nome (avatar 34px + gap 10px) */
  }
  /* Oculta seta no mobile */
  .clients-table td:last-child { display: none; }

  /* ── Painel lateral: oculto no mobile (usa modal) ── */
  .client-detail-panel { display: none; }

  /* ── Modal de cadastro: ocupa mais tela ── */
  .modal-box {
    max-width: 100%;
    margin: 0 8px;
    border-radius: 18px;
    max-height: 92vh;
  }

  /* ── Formulário: 1 coluna ── */
  .form-grid {
    grid-template-columns: 1fr !important;
  }
  .form-group[style*="grid-column:span 2"],
  .form-group[style*="grid-column: span 2"] {
    grid-column: span 1 !important;
  }

  /* ── Botões do modal: iguais ── */
  .modal-box .btn-secondary,
  .modal-box .btn-primary {
    flex: 1;
    justify-content: center;
  }
}

/* ── Tema Claro ── */
[data-tema="light"] .client-name,
[data-tema="light"] .cdp-name,
[data-tema="light"] .cdp-stat-val { color: var(--text) !important; }
[data-tema="light"] .cdp-action:hover { color: var(--text) !important; }