/* Tela clientes: estilos próprios desta tela (lista e formulário), na segunda passada de fidelidade. */
/* Medidas tiradas de clientes.png e cliente-novo.png (1440 × 900, captura em escala 2). */

/* Larguras das colunas da lista, medidas na imagem: 425 / 158 / 111 / 159 / 199 / 117 px de 1169. */
#view-root .customers-list .data-table { table-layout: fixed; width: 100%; min-width: 900px; }
#view-root .customers-list .data-table th:nth-child(1), #view-root .customers-list .data-table td:nth-child(1) { width: 36.35%; }
#view-root .customers-list .data-table th:nth-child(2), #view-root .customers-list .data-table td:nth-child(2) { width: 13.5%; }
#view-root .customers-list .data-table th:nth-child(3), #view-root .customers-list .data-table td:nth-child(3) { width: 9.5%; }
#view-root .customers-list .data-table th:nth-child(4), #view-root .customers-list .data-table td:nth-child(4) { width: 13.6%; }
#view-root .customers-list .data-table th:nth-child(5), #view-root .customers-list .data-table td:nth-child(5) { width: 17%; }
#view-root .customers-list .data-table th:nth-child(6), #view-root .customers-list .data-table td:nth-child(6) { width: 10%; }

/* Rodapé: total à esquerda; "Por página" e paginação à direita. */
.customers-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.customers-footer .result-count { color: #262b2f; font-size: 13px; }
.customers-footer-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.customers-footer-controls label { color: #555; font-size: 13px; }
.customers-footer-controls select { height: 34px; padding: 4px 8px; border: 1px solid #ccc; border-radius: 3px; background: #fff; font-size: 13px; }
.customer-pager { display: flex; align-items: center; gap: 0; }
.customer-pager a, .customer-pager .gap { min-width: 34px; height: 34px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #ddd; margin-left: -1px; background: #fff; color: #262b2f; font-size: 13px; text-decoration: none; }
.customer-pager a:hover { background: #f3f3f3; }
.customer-pager a.current { background: #0f1921; border-color: #0f1921; color: #fff; }
.customer-pager .gap { color: #777; }

/* Formulário: a lateral começa recolhida, mas o botão do menu volta a abri-la. */
body:not(.navigation-collapsed) .app-shell:has(.customer-form) { grid-template-columns: var(--sidebar-width) minmax(0, 1fr); }
body:not(.navigation-collapsed) .app-shell:has(.customer-form) .sidebar { display: flex; }

/* Cartão do formulário: cabeçalho de 74 px e primeiro campo a 42 px abaixo dele, como na referência. */
.customer-form { margin-top: -3px; }
.customer-form .ref-card-header { padding: 13px 20px 12px; }
.customer-form .ref-card-body { padding-top: 18px; }

/* Limite de crédito: prefixo R$ dentro da borda. */
.money-prefix-group { display: flex; align-items: stretch; border: 1px solid #ccc; border-radius: 3px; background: #fff; }
.money-prefix-group .money-prefix { display: inline-flex; align-items: center; padding: 0 8px; font-size: 13px; color: #444; }
.money-prefix-group input { flex: 1 1 auto; min-width: 0; border: 0 !important; box-shadow: none !important; }

/* Selos de situação da lista de clientes: contorno de 1px, fundo claro e texto na cor do contorno (medidas da captura clientes.png). */
.customer-status .badge { min-height: 20px; padding: 2px 6px; border: 1px solid currentColor; border-radius: 3px; font-size: 10px; font-weight: 600; line-height: 14px; }
.customer-status .badge.success { color: #006a1a; background: #ddf1e2; }
.customer-status .badge.danger { color: #aa0023; background: #f9dfe1; }
.customer-status .badge.warning, .customer-status .badge.neutral { color: #4c545b; background: #e7e9ea; }

/* Rótulos do formulário de cliente: 14 px, cor #616a71 (medidos em cliente-novo.png). */
.customer-form .ref-card .field > label, .customer-cards .ref-card .field > label { font-size: 14px; color: #616a71; }