/*
  Arquivo: ag-clientes-view.css
  Origem: public/index.html
  Bloco original: <style id="clientes-view-inline-style">
  Função: estilos visuais da tela Clientes, incluindo layout, busca, cards, tabela/lista, detalhes e estados visuais.
  Observação: extração passiva; não altera lógica JS de clientes, cadastro, edição, histórico, pedido, Kanban ou persistência.
*/

/* ===== clientes-view-inline-style ===== */
.clientes-view{display:none;flex:1;overflow-y:auto;padding:20px;background:var(--bg)}
.clientes-view.active{display:block}
.cv-wrap{max-width:1040px;margin:0 auto;display:grid;gap:16px}

/* TOOLBAR */
.cv-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);padding:14px 16px;box-shadow:var(--shadow-sm)}
.cv-search-wrap{flex:1;min-width:200px;position:relative}
.cv-search-wrap svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:14px;height:14px;stroke:var(--faint);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.cv-search{width:100%;background:var(--surface2);border:1px solid var(--border);border-radius:999px;padding:9px 14px 9px 36px;font-size:13px;font-weight:500;outline:none;color:var(--text);transition:all .16s}
.cv-search:focus{border-color:rgba(6,182,212,.4);box-shadow:0 0 0 3px rgba(6,182,212,.1);background:var(--surface)}
.cv-count{font-size:11px;color:var(--muted);white-space:nowrap}

/* STATS */
.cv-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.cv-stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:12px 16px;display:flex;align-items:center;gap:12px;box-shadow:var(--shadow-sm)}
.cv-stat-icon{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;flex:none}
.cv-stat-icon svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cv-stat-body{display:grid;gap:1px}
.cv-stat-label{font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.cv-stat-val{font-size:17px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums}

/* LISTA */
.cv-list{display:grid;gap:8px}

.cv-month-group{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-sm)}
.cv-month-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 16px;background:linear-gradient(180deg,color-mix(in srgb,var(--surface2) 88%,var(--accent) 12%),var(--surface));border-bottom:1px solid var(--border)}
.cv-month-title{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:900;letter-spacing:-.03em;text-transform:uppercase}
.cv-month-title-badge{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:var(--accent-dim);border:1px solid var(--accent-border);color:var(--accent);font-size:14px}
.cv-month-sub{font-size:11px;color:var(--muted);margin-top:2px;text-transform:none;font-weight:600;letter-spacing:0}
.cv-month-kpis{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.cv-month-kpi{text-align:right}
.cv-month-kpi-val{font-size:13px;font-weight:900;font-variant-numeric:tabular-nums;color:var(--text)}
.cv-month-kpi-val.accent{color:var(--accent)}
.cv-month-kpi-label{font-size:9px;color:var(--faint);text-transform:uppercase;letter-spacing:.08em;font-weight:800}
.cv-month-body{display:grid;gap:8px;padding:10px;background:color-mix(in srgb,var(--bg) 78%,var(--surface))}
.cv-month-body .cv-card{box-shadow:none}
@media(max-width:700px){.cv-month-head{align-items:flex-start;flex-direction:column}.cv-month-kpis{width:100%;justify-content:space-between}.cv-month-kpi{text-align:left}}
.cv-empty{text-align:center;padding:48px 24px;color:var(--faint);font-size:13px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl)}
.cv-empty-icon{font-size:36px;margin-bottom:10px}

/* CARD CLIENTE */
.cv-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-sm);transition:box-shadow .18s,border-color .18s}
.cv-card:hover{box-shadow:var(--shadow-md);border-color:var(--border2)}
.cv-card.reativar{border-left:3px solid #f59e0b}
.cv-card.reativar .cv-card-head{background:rgba(245,158,11,.04)}

.cv-card-head{display:flex;align-items:center;gap:12px;padding:14px 16px;cursor:pointer;user-select:none;transition:background .12s}
.cv-card-head:hover{background:var(--surface2)}
.cv-avatar{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-size:15px;font-weight:800;flex:none;color:#fff}
.cv-card-info{flex:1;min-width:0}
.cv-card-nome{font-size:14px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:8px}
.cv-card-sub{font-size:11px;color:var(--muted);margin-top:2px}
.cv-reativar-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;background:rgba(245,158,11,.12);border:1px solid rgba(245,158,11,.3);color:#f59e0b;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;white-space:nowrap}
.cv-reativar-badge svg{width:10px;height:10px;stroke:currentColor;fill:none;stroke-width:2.5}
.cv-card-stats{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.cv-card-kpi{text-align:right}
.cv-card-kpi-val{font-size:13px;font-weight:800;font-variant-numeric:tabular-nums}
.cv-card-kpi-label{font-size:9px;color:var(--faint);text-transform:uppercase;letter-spacing:.08em;font-weight:700}
.cv-card-toggle{width:26px;height:26px;border-radius:999px;display:grid;place-items:center;background:var(--surface2);border:1px solid var(--border);color:var(--faint);flex:none;transition:transform .18s}
.cv-card-toggle svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cv-card.expanded .cv-card-toggle{transform:rotate(180deg)}

/* DETALHE */
.cv-card-body{display:none;border-top:1px solid var(--border);background:var(--bg)}
.cv-card.expanded .cv-card-body{display:block}
.cv-detail{padding:16px;display:grid;gap:14px}
.cv-detail-meta{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px}
.cv-field{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:9px 12px}
.cv-field-label{font-size:9px;font-weight:800;color:var(--faint);text-transform:uppercase;letter-spacing:.09em}
.cv-field-val{font-size:12px;font-weight:600;margin-top:2px;word-break:break-word}
.cv-field-val.empty{color:var(--faint);font-style:italic}

/* HISTÓRICO DE COMPRAS DO CLIENTE */
.cv-compras-title{font-size:10px;font-weight:800;color:var(--faint);text-transform:uppercase;letter-spacing:.1em;margin-bottom:6px}
.cv-compra-row{display:flex;align-items:center;gap:10px;padding:9px 12px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);font-size:12px;margin-bottom:5px}
.cv-compra-data{font-size:10px;color:var(--faint);white-space:nowrap;min-width:80px}
.cv-compra-prod{flex:1;color:var(--muted)}
.cv-compra-val{font-weight:800;color:var(--accent);font-variant-numeric:tabular-nums;white-space:nowrap}

/* AÇÕES */
.cv-card-actions{display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--border);background:var(--surface);flex-wrap:wrap;align-items:center}
.cv-action-btn{display:flex;align-items:center;gap:6px;padding:7px 14px;border-radius:var(--r-md);font-size:12px;font-weight:700;border:1px solid var(--border);background:var(--surface2);color:var(--muted);cursor:pointer;transition:all .15s}
.cv-action-btn:hover{color:var(--text);border-color:var(--border2);background:var(--surface3)}
.cv-action-btn svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.cv-action-btn.primary{background:rgba(6,182,212,.1);border-color:rgba(6,182,212,.3);color:#06b6d4}
.cv-action-btn.primary:hover{background:rgba(6,182,212,.18)}
.cv-action-btn.danger{background:var(--red-dim);border-color:var(--red-border);color:var(--red);margin-left:auto}

@media(max-width:900px){.cv-stats{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.cv-stats{grid-template-columns:1fr}}


/* ─────────────────────────────────────────────
   GOOGLE POLISH — CSS-ONLY PATCH
   Escopo: apenas estética. Sem JS, HTML, IDs ou classes novas.
───────────────────────────────────────────── */
html, body {
  letter-spacing: -.006em;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}
body {
  background:
    radial-gradient(circle at 18% -10%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 34%),
    radial-gradient(circle at 82% 0%, color-mix(in srgb, #fbbc04 10%, transparent), transparent 30%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 96%, var(--accent) 4%), var(--bg));
}
body[data-theme="light"] {
  background:
    radial-gradient(circle at 18% -10%, rgba(26,115,232,.12), transparent 34%),
    radial-gradient(circle at 82% 0%, rgba(251,188,4,.12), transparent 30%),
    linear-gradient(180deg, #fbfcff, var(--bg));
}
.topbar,
.sidebar,
.panel {
  backdrop-filter: saturate(1.08) blur(14px);
  border-color: color-mix(in srgb, var(--border) 78%, transparent);
}
.topbar {
  box-shadow: 0 1px 0 color-mix(in srgb, var(--border) 75%, transparent), var(--shadow-sm);
}
.sidebar {
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 96%, var(--accent) 4%), var(--surface));
}
.panel {
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 96%, var(--accent) 4%), var(--surface));
}
.main,
.main-control-view,
.pedido-view,
.dashboard-view,
.formal-quote-view,
.hist-pedidos-view,
.home-view,
.clientes-view {
  background:
    radial-gradient(circle at 50% -18%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 38%),
    var(--bg);
}
.client-field input,
input,
select,
textarea,
.control-search,
.control-field input,
.param-input {
  border-color: color-mix(in srgb, var(--border2) 84%, transparent) !important;
  background: color-mix(in srgb, var(--surface2) 84%, var(--surface)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}
body[data-theme="light"] .client-field input,
body[data-theme="light"] input,
body[data-theme="light"] select,
body[data-theme="light"] textarea,
body[data-theme="light"] .control-search,
body[data-theme="light"] .control-field input,
body[data-theme="light"] .param-input {
  background: #ffffff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 1px 2px rgba(60,64,67,.04);
}
input:focus,
select:focus,
textarea:focus,
.control-search:focus,
.control-field:focus-within {
  border-color: var(--accent-border) !important;
  box-shadow: 0 0 0 4px var(--accent-glow) !important;
}
.product-btn,
.sidebar-btn,
.ptab,
.toggle-pill,
.rot-pill,
.control-nav-btn,
.btn,
.hp-action-btn,
.hp-page-btn,
.cv-action-btn,
.hv-pedido-btn,
.g-add-btn,
.placas-add-btn,
.ipm-check-btn,
.alum-sim-btn,
.alum-wpp-btn,
.alum-wpp-copy-btn,
.btn-primary-google {
  transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, opacity .18s ease, filter .18s ease !important;
}
.product-btn {
  border-radius: 16px;
}
.product-btn:hover,
.sidebar-btn:hover,
.control-nav-btn:hover,
.ptab:hover {
  background: color-mix(in srgb, var(--surface2) 88%, var(--accent) 12%);
  border-color: color-mix(in srgb, var(--accent-border) 55%, var(--border));
}
.product-btn.active {
  color: var(--accent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent-dim) 82%, var(--surface)), color-mix(in srgb, var(--accent-dim) 55%, transparent));
  border-color: var(--accent-border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 6px 16px color-mix(in srgb, var(--accent) 14%, transparent);
}
.product-count,
.items-count,
.g-margin,
.ic-margin,
.ipm-chip,
.notice-chip,
.g-chip,
.control-product-tag,
.control-legend-chip,
.control-subcard-badge,
.control-field-unit,
.pf-badge-best {
  border-color: color-mix(in srgb, var(--border2) 70%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}
.item-card,
.g-card,
.placas-card,
.bd-card,
.totals-block,
.orc-meta-cell,
.formal-preset-card,
.formal-quick-rail,
.formal-preview-box,
.resumo-item,
.control-toolbar,
.main-control-header,
.control-product-card,
.control-subcard,
.control-field,
.pf-compare,
.pf-compare-row,
.pedido-obs-wrap,
.hp-card,
.cv-card,
.hv-card {
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 96%, white 4%), color-mix(in srgb, var(--surface) 94%, var(--bg)));
  border-color: color-mix(in srgb, var(--border2) 72%, transparent);
  box-shadow: var(--shadow-sm);
}
body[data-theme="light"] .item-card,
body[data-theme="light"] .g-card,
body[data-theme="light"] .placas-card,
body[data-theme="light"] .bd-card,
body[data-theme="light"] .totals-block,
body[data-theme="light"] .orc-meta-cell,
body[data-theme="light"] .formal-preset-card,
body[data-theme="light"] .formal-quick-rail,
body[data-theme="light"] .formal-preview-box,
body[data-theme="light"] .resumo-item,
body[data-theme="light"] .control-toolbar,
body[data-theme="light"] .main-control-header,
body[data-theme="light"] .control-product-card,
body[data-theme="light"] .control-subcard,
body[data-theme="light"] .control-field,
body[data-theme="light"] .pf-compare,
body[data-theme="light"] .pf-compare-row,
body[data-theme="light"] .pedido-obs-wrap,
body[data-theme="light"] .hp-card,
body[data-theme="light"] .cv-card,
body[data-theme="light"] .hv-card {
  background: linear-gradient(180deg, #ffffff, color-mix(in srgb, #ffffff 92%, var(--bg)));
}
.item-card:hover,
.g-card:hover,
.placas-card:hover,
.formal-preset-card:hover,
.control-product-card:hover,
.control-subcard:hover,
.pf-compare-row:hover,
.hp-card:hover,
.cv-card:hover,
.hv-card:hover {
  border-color: color-mix(in srgb, var(--accent-border) 55%, var(--border2));
  box-shadow: var(--shadow-md);
}
.ic-head,
.g-head,
.placas-card-head,
.bd-title,
.control-product-head,
.items-header,
.pedido-obs-header {
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface2) 88%, var(--accent) 12%), color-mix(in srgb, var(--surface) 98%, var(--accent) 2%));
  border-color: color-mix(in srgb, var(--border2) 72%, transparent);
}
.g-head-icon,
.placas-card-icon,
.ic-icon,
.control-stat-icon,
.control-product-icon,
.nav-icon {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 4px 10px color-mix(in srgb, currentColor 14%, transparent);
}
.g-price,
.placas-card-price,
.ic-price,
.irr-total-val,
.ri-price,
.total-value.accent,
.totals-row .tv.accent,
.orc-meta-val.accent {
  color: var(--accent);
  letter-spacing: -.045em;
}
.g-add-btn,
.placas-add-btn,
.btn-primary,
.btn-primary-google {
  background: linear-gradient(135deg, #1a73e8, #4285f4) !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(26,115,232,.22);
}
.g-add-btn:hover,
.placas-add-btn:hover,
.btn-primary:hover,
.btn-primary-google:hover,
.ipm-check-btn:hover,
.alum-wpp-btn:hover {
  filter: saturate(1.08) brightness(1.03);
}
.btn-whatsapp,
.alum-wpp-btn {
  background: linear-gradient(135deg, #188038, #34a853) !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(24,128,56,.20);
}
.btn-ghost,
.btn-proof,
.hp-page-btn,
.cv-action-btn,
.hv-pedido-btn {
  background: color-mix(in srgb, var(--surface2) 88%, var(--accent) 12%);
  border-color: color-mix(in srgb, var(--border2) 76%, transparent);
}
.toggle-pill,
.rot-pill,
.ipm-chip,
.notice-chip,
.g-chip,
.control-nav-btn {
  background: color-mix(in srgb, var(--surface2) 90%, var(--accent) 10%);
}
.toggle-pill.on,
.rot-pill.active,
.pf-auto-pill.active,
.formal-preset-card.active,
.control-nav-btn.active {
  box-shadow: 0 6px 16px color-mix(in srgb, currentColor 14%, transparent);
}
.orc-text-area,
.formal-preview-text,
.control-note,
.param-help,
.ipm-note,
.control-subcard-help,
.control-product-sub {
  line-height: 1.72;
}
.sidebar-label,
.g-metric-label,
.placas-metric-label,
.field label,
.g-field label,
.placas-field label,
.control-stat-label,
.control-subcard-title,
.param-section-title,
.formal-preset-title,
.formal-preview-label {
  color: color-mix(in srgb, var(--faint) 88%, var(--text));
}


/* PATCH REAL — recolhe a sidebar direita nas telas administrativas.
   Usa :has() como trava visual, mesmo se alguma rotina JS não aplicar a classe. */
.app.app-no-right-panel,
.app:has(#homeView.active),
.app:has(#dashboardView.active),
.app:has(#mainControlView.active),
.app:has(#pedidoView.active),
.app:has(#formalQuoteView.active),
.app:has(#histPedidosView.active),
.app:has(#clientesView.active) {
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr) 0px !important;
}

.app.app-no-right-panel .panel,
.app:has(#homeView.active) .panel,
.app:has(#dashboardView.active) .panel,
.app:has(#mainControlView.active) .panel,
.app:has(#pedidoView.active) .panel,
.app:has(#formalQuoteView.active) .panel,
.app:has(#histPedidosView.active) .panel,
.app:has(#clientesView.active) .panel {
  display: none !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}

.app.app-no-right-panel .main,
.app:has(#homeView.active) .main,
.app:has(#dashboardView.active) .main,
.app:has(#mainControlView.active) .main,
.app:has(#pedidoView.active) .main,
.app:has(#formalQuoteView.active) .main,
.app:has(#histPedidosView.active) .main,
.app:has(#clientesView.active) .main {
  grid-column: 2 / 3 !important;
  max-width: none !important;
}

/* Mantém a topbar alinhada quando o painel direito some */
.app.app-no-right-panel .topbar-right,
.app:has(#homeView.active) .topbar-right,
.app:has(#dashboardView.active) .topbar-right,
.app:has(#mainControlView.active) .topbar-right,
.app:has(#pedidoView.active) .topbar-right,
.app:has(#formalQuoteView.active) .topbar-right,
.app:has(#histPedidosView.active) .topbar-right,
.app:has(#clientesView.active) .topbar-right {
  width: auto !important;
}

/* Pedido do historico do cliente clicavel */
.cv-compra-link {
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .1s;
  user-select: none;
}
.cv-compra-link:hover {
  background: var(--accent-dim, rgba(59,130,246,.08));
  border-color: var(--accent-border, rgba(59,130,246,.25));
  transform: translateX(2px);
}
.cv-compra-num {
  font-size: 11px;
  font-weight: 800;
  color: #3b82f6;
  min-width: 90px;
}
.cv-compra-arrow {
  margin-left: auto;
  font-size: 13px;
  color: #3b82f6;
  opacity: 0;
  transition: opacity .15s;
}
.cv-compra-link:hover .cv-compra-arrow { opacity: 1; }