/* Painel de vendas do portal no padrão do Dashboard do SistemaProd:
   KPIs coloridos com variação, evolução diária e rankings com barras. */
.pd-ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.pd-badge { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; color: var(--acc, #159678); background: color-mix(in srgb, var(--acc, #159678) 14%, #fff); }

/* O portal fixa height:34px em todo button; os blocos do painel crescem com o conteúdo. */
#dashboard button.pd-kpi, #insights .pd-row, #insights .pd-prio, #insights .pd-mbar, #insights .pd-more, #insights .pd-link { height: auto; }
#insights .pd-mbar { height: 100%; }

/* ---------- KPIs ---------- */
#dashboard.dashboard { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
#dashboard.dashboard button.pd-kpi {
  min-height: 0; padding: 11px 30px 11px 13px; border: 1px solid #e3e9ee; border-left: 4px solid var(--acc); border-top-width: 1px; border-top-color: #e3e9ee;
  border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .05); color: #475569; font-size: 12px; font-weight: 600;
}
#dashboard.dashboard button.pd-kpi:last-child { grid-column: auto; }
#dashboard.dashboard button.pd-kpi-main { grid-column: span 2; border: 0; color: rgba(255, 255, 255, .9); background: linear-gradient(135deg, #0f5132, #159678); }
#dashboard.dashboard button.pd-kpi-main::after { color: rgba(255, 255, 255, .8); }
#dashboard.dashboard button.pd-kpi-main .pd-badge { color: #fff; background: rgba(255, 255, 255, .18); }
#dashboard.dashboard button.pd-kpi-main strong { color: #fff; font-size: clamp(20px, 2.2vw, 28px); }
#dashboard.dashboard button.pd-kpi-main small { color: rgba(255, 255, 255, .82); }
#dashboard.dashboard button.pd-kpi-main .pd-delta { background: rgba(255, 255, 255, .2); color: #fff; }
.pd-kpi-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pd-kpi-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#dashboard.dashboard button.pd-kpi strong { color: #0f172a; font-size: clamp(16px, 1.6vw, 21px); margin: 7px 0 2px; font-variant-numeric: tabular-nums; }
#dashboard.dashboard button.pd-kpi small { display: block; color: #94a3b8; font-size: 11px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#dashboard.dashboard button.pd-kpi.approved-customers { background: #0284c7; border-color: #0284c7; color: #fff; }
#dashboard.dashboard button.pd-kpi.approved-customers strong,
#dashboard.dashboard button.pd-kpi.approved-customers small { color: #fff; }
#dashboard.dashboard button.pd-kpi.approved-customers .pd-badge { background: rgba(255, 255, 255, .2); color: #fff; }
#dashboard.dashboard button.pd-kpi.orders-notification { background: #fff7ed; border-left-color: #ea580c; }
.pd-delta { flex: 0 0 auto; border-radius: 999px; padding: 2px 7px; font-size: 10.5px; font-weight: 700; white-space: nowrap; }
.pd-delta-up { background: #dcfce7; color: #15803d; }
.pd-delta-down { background: #fee2e2; color: #b91c1c; }
.pd-delta-eq { background: #f1f5f9; color: #475569; }
.pd-delta-na { background: transparent; color: #94a3b8; font-weight: 500; }

/* ---------- Cards ---------- */
#insights.insights { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.insight.pd-card { min-height: 0; padding: 0; border: 1px solid #e3e9ee; border-top: 3px solid var(--acc); border-radius: 12px; box-shadow: 0 1px 2px rgba(15, 23, 42, .05); display: flex; flex-direction: column; overflow: hidden; }
.insight.pd-wide { grid-column: span 2; }
.pd-head { display: flex; align-items: center; gap: 10px; padding: 10px 13px; background: color-mix(in srgb, var(--acc) 6%, #fff); border-bottom: 1px solid color-mix(in srgb, var(--acc) 16%, #fff); }
.pd-head > div { flex: 1 1 auto; min-width: 0; }
.pd-head h3 { font-size: 14px; margin: 0; color: #1e293b; }
.pd-head small { display: block; color: #64748b; font-size: 11px; }
.pd-link { width: auto; min-height: 0; padding: 4px 10px; border: 1px solid color-mix(in srgb, var(--acc) 35%, #fff); border-radius: 8px; background: #fff; color: var(--acc); font-size: 12px; font-weight: 700; }
.pd-empty { color: #94a3b8; font-size: 12px; text-align: center; padding: 22px 10px; }

/* Evolução */
.pd-evo-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 9px 13px 0; font-size: 12px; color: #475569; }
.pd-evo-legend span::before { content: ""; display: inline-block; width: 10px; height: 3px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
.pd-l-cur::before { background: #159678; }
.pd-l-prev::before { background: #94a3b8; }
.pd-evo-legend .pd-delta::before { display: none; }
.pd-evo { padding: 4px 8px 8px; }
.pd-evo-svg { display: block; width: 100%; height: auto; max-height: 250px; }
.pd-evo-svg .pd-grid line { stroke: #eef2f6; }
.pd-evo-svg .pd-cur { fill: none; stroke: #159678; stroke-width: 2.6; stroke-linejoin: round; }
.pd-evo-svg .pd-prev { fill: none; stroke: #94a3b8; stroke-width: 1.6; stroke-dasharray: 5 4; }
.pd-evo-svg .pd-dots circle { fill: #fff; stroke: #159678; stroke-width: 1.8; }
.pd-evo-svg .pd-xlab text { fill: #94a3b8; font-size: 10px; font-family: Arial, sans-serif; }

/* Prioridades */
.pd-prios { display: grid; gap: 6px; padding: 10px 12px 12px; }
.pd-prio { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; min-height: 38px; padding: 7px 11px; border: 1px solid #e3e9ee; border-left: 4px solid var(--tone); border-radius: 9px; background: #fff; color: #334155; font-size: 12.5px; font-weight: 600; text-align: left; }
.pd-prio b { color: var(--tone); font-size: 15px; white-space: nowrap; }
.pd-prio:hover { background: color-mix(in srgb, var(--tone) 7%, #fff); }
.pd-prio-rose { --tone: #e11d48; }
.pd-prio-orange { --tone: #ea580c; }
.pd-prio-blue { --tone: #0284c7; }
.pd-prio-violet { --tone: #7c3aed; }
.pd-prio-slate { --tone: #64748b; }

/* Rankings */
.pd-list { padding: 6px 8px 10px; }
.pd-row { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 9px; width: 100%; min-height: 0; padding: 6px 6px; border: 0; border-radius: 8px; background: transparent; color: inherit; font-weight: 400; text-align: left; }
button.pd-row { cursor: pointer; }
button.pd-row:hover { background: color-mix(in srgb, var(--acc) 7%, #fff); }
.pd-pos { color: var(--acc); font-size: 11px; font-weight: 700; text-align: center; }
.pd-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pd-name { color: #1e293b; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-bar { height: 5px; border-radius: 99px; background: #f1f5f9; overflow: hidden; }
.pd-bar i { display: block; height: 100%; border-radius: 99px; background: var(--acc); }
.pd-sub { color: #94a3b8; font-size: 10.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-val { display: flex; flex-direction: column; align-items: flex-end; color: #0f172a; font-size: 12.5px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pd-val small { color: #94a3b8; font-size: 10.5px; font-weight: 500; }
.pd-more { width: calc(100% - 24px); margin: 0 12px 12px; min-height: 32px; border: 1px dashed color-mix(in srgb, var(--acc) 45%, #fff); border-radius: 8px; background: #fff; color: var(--acc); font-size: 12px; font-weight: 700; }

/* Vendas por mês */
.pd-months { display: flex; align-items: flex-end; gap: 8px; height: 190px; padding: 12px 12px 10px; }
.pd-mbar { flex: 1 1 0; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; gap: 3px; padding: 0; border: 0; background: transparent; color: #334155; font-weight: 400; cursor: pointer; }
.pd-mbar i { display: block; min-height: 4px; border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, color-mix(in srgb, var(--acc) 70%, #fff), var(--acc)); }
.pd-mbar:hover i { filter: brightness(1.1); }
.pd-mval { font-size: 11px; font-weight: 700; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-mlab { font-size: 11px; text-align: center; color: #475569; }
.pd-msub { font-size: 10px; text-align: center; color: #94a3b8; }

@media (max-width: 1100px) {
  #insights.insights { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #dashboard.dashboard { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #dashboard.dashboard button.pd-kpi-main { grid-column: span 3; }
}
@media (max-width: 700px) {
  #insights.insights { grid-template-columns: 1fr; }
  .insight.pd-wide { grid-column: auto; }
  #dashboard.dashboard { grid-template-columns: 1fr 1fr; gap: 7px; }
  #dashboard.dashboard button.pd-kpi-main { grid-column: 1 / -1; }
  #dashboard.dashboard button.pd-kpi { padding: 9px 22px 9px 10px; }
  #dashboard.dashboard button.pd-kpi .pd-badge { width: 24px; height: 24px; }
  #dashboard.dashboard button.pd-kpi .pd-kpi-top { flex-wrap: wrap; }
  #dashboard.dashboard button.pd-kpi small { white-space: normal; }
  .pd-months { height: 170px; }
}