/* ── dashboard.css — Akino Systems ── */
/* ═══════════════════════════════════════════
   DASHBOARD — redesign
═══════════════════════════════════════════ */

/* Welcome bar */
.dash-welcome {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 28px; gap: 16px; flex-wrap: wrap;
  animation: fadeUp .45s cubic-bezier(.16,1,.3,1) both;
  animation-delay: .02s;
  position: relative; z-index: 200;
}
.dash-welcome-l {}
.dash-greeting {
  font-size: 26px; font-weight: 600; color: var(--text);
  letter-spacing: -.6px; line-height: 1.2;
}
.dash-greeting-sub { font-size: 13px; color: var(--muted); margin-top: 4px; }
.dash-welcome-r { display: flex; align-items: center; gap: 8px; flex-shrink: 0; margin-top: 4px; }

/* Date controls — image 2 style */
.date-control-group { display: flex; align-items: center; gap: 6px; }
.date-ctrl-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px; border-radius: var(--radius-sm);
  font-family: 'Geist', sans-serif; font-size: 12.5px; font-weight: 400;
  cursor: pointer; border: 1px solid var(--border);
  background: var(--s1); color: var(--text); transition: all .15s;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.date-ctrl-btn:hover { background: var(--s2); border-color: var(--border2); }
.date-ctrl-btn svg { color: var(--muted); flex-shrink: 0; }
.date-ctrl-btn .caret { color: var(--muted); margin-left: 2px; }
.date-ctrl-divider { width: 1px; height: 18px; background: var(--border); }
.export-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px; border-radius: var(--radius-sm);
  font-family: 'Geist', sans-serif; font-size: 12.5px; font-weight: 500;
  cursor: pointer; border: 1px solid var(--ink);
  background: var(--ink); color: var(--bg); transition: all .15s;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.export-btn:hover { opacity: .85; }

/* Period dropdown */
.period-dd-wrap { position: relative; }
.period-dropdown {
  position: absolute; top: calc(100% + 6px); left: 0;
  background: var(--s1); border: 1px solid var(--border2);
  border-radius: var(--radius); width: 160px;
  box-shadow: 0 8px 32px rgba(0,0,0,.1);
  z-index: 9100; animation: fadeUp .18s cubic-bezier(.16,1,.3,1) both;
  overflow: hidden; display: none;
}
.period-dropdown.open { display: block; }
.period-dd-item {
  padding: 8px 14px; font-size: 13px; color: var(--text);
  cursor: pointer; transition: background .1s; display: flex; align-items: center; gap: 8px;
}
.period-dd-item:hover { background: var(--s2); }
.period-dd-item.active { color: var(--text); font-weight: 500; }
.period-dd-item.active::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: var(--ink); flex-shrink: 0;
}
.period-dd-item:not(.active)::before {
  content: ''; width: 5px; height: 5px; flex-shrink: 0;
}

/* Dashboard tabs — image 2 pill style */
.dash-tabs {
  display: flex; align-items: center; gap: 4px;
  margin-bottom: 24px; overflow-x: auto;
  padding-bottom: 2px;
}
.dash-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; font-size: 13px; font-weight: 400;
  color: var(--muted); cursor: pointer; border: 1px solid transparent;
  background: none; font-family: 'Geist', sans-serif;
  border-radius: 7px; transition: all .15s; white-space: nowrap;
  animation: tabIn .35s cubic-bezier(.16,1,.3,1) both;
}
.dash-tab:nth-child(1) { animation-delay: .1s; }
.dash-tab:nth-child(2) { animation-delay: .15s; }
.dash-tab:nth-child(3) { animation-delay: .2s; }
.dash-tab:nth-child(4) { animation-delay: .25s; }
@keyframes tabIn { from { opacity:0; transform:translateX(-5px); } to { opacity:1; transform:translateX(0); } }
.dash-tab:hover { color: var(--text); background: var(--s2); }
.dash-tab.active {
  color: var(--text); font-weight: 500;
  background: var(--s1); border-color: var(--border2);
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.dash-tab-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 17px; padding: 0 5px;
  border-radius: 5px; font-size: 10.5px; font-weight: 500;
  background: var(--s3); color: var(--muted); font-family: 'Geist Mono', monospace;
}
.dash-tab.active .dash-tab-badge { background: var(--s2); color: var(--text); }

/* Tab panels */
.dash-tab-panel { display: none; }
.dash-tab-panel.active { display: block; animation: fadeUp .3s cubic-bezier(.16,1,.3,1) both; }

/* Summary cards — oculta/mostra com fade dependendo da aba */
#summary-cards {
  transition: opacity .2s, max-height .25s cubic-bezier(.16,1,.3,1);
  overflow: hidden;
}
#summary-cards.hidden {
  opacity: 0;
  max-height: 0 !important;
  margin-bottom: 0 !important;
  pointer-events: none;
}

/* Summary cards — image 1 style */
.summary-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 12px; margin-bottom: 24px;
}
.sum-card {
  background: var(--card-bg, var(--s1)); padding: 20px 22px 16px;
  display: flex; flex-direction: column; gap: 0;
  position: relative; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--radius);
  animation: cardIn .55s cubic-bezier(.16,1,.3,1) both;
}
.sum-card:first-child { border-radius: var(--radius); }
.sum-card:last-child  { border-radius: var(--radius); }
.sum-card:nth-child(1) { animation-delay: .05s; }
.sum-card:nth-child(2) { animation-delay: .11s; }
.sum-card:nth-child(3) { animation-delay: .17s; }
.sum-card:nth-child(4) { animation-delay: .23s; }

/* Top row: label + sparkline */
.sum-card-top {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 12px;
}
.sum-card-label {
  font-size: 10px; color: var(--muted); letter-spacing: .7px;
  text-transform: uppercase; font-weight: 500; line-height: 1.4;
  font-family: 'Geist Mono', monospace;
}

/* Sparkline bars — vertical bar style like image 1 */
.sum-card-spark {
  display: flex; align-items: flex-end; gap: 2px;
  height: 28px; flex-shrink: 0;
}
.spark-bar {
  width: 3px; border-radius: 2px 2px 0 0;
  background: var(--border2); transform-origin: bottom;
  animation: barGrow .5s cubic-bezier(.16,1,.3,1) both;
}
.spark-bar.hi { background: var(--text); opacity: .7; }
.spark-bar:nth-child(1) { animation-delay: .25s; }
.spark-bar:nth-child(2) { animation-delay: .28s; }
.spark-bar:nth-child(3) { animation-delay: .31s; }
.spark-bar:nth-child(4) { animation-delay: .34s; }
.spark-bar:nth-child(5) { animation-delay: .37s; }
.spark-bar:nth-child(6) { animation-delay: .40s; }
.spark-bar:nth-child(7) { animation-delay: .43s; }
.spark-bar:nth-child(8) { animation-delay: .46s; }

/* Middle: big number + inline sub-label */
.sum-card-mid {
  display: flex; align-items: baseline; gap: 7px; margin-bottom: 14px;
}
.sum-card-value {
  font-size: 26px; font-weight: 500; color: var(--text);
  letter-spacing: -1px; line-height: 1; font-variant-numeric: tabular-nums;
}
.sum-card-unit {
  font-size: 12px; color: var(--muted); font-weight: 400; letter-spacing: 0;
}

/* Bottom: divider + delta row */
.sum-card-bottom {
  display: flex; align-items: center; gap: 6px;
  padding-top: 10px; border-top: 1px solid var(--border);
}
.sum-card-icon {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--green-bg); display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.sum-card-delta {
  font-size: 11.5px; font-weight: 500; color: var(--green);
}
.sum-card-delta-label {
  font-size: 11px; color: var(--muted);
}
.delta-up .sum-card-delta { color: var(--green); }
.delta-down .sum-card-delta { color: var(--red); }
.delta-down .sum-card-icon { background: var(--red-bg); }

/* Dashboard grid layouts */
.dash-section { margin-bottom: 20px; }
.dash-section-hd {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.dash-section-title {
  font-size: 11px; font-weight: 600; color: var(--muted);
  letter-spacing: .8px; text-transform: uppercase;
}
.dash-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.dash-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.dash-grid-65 { display: grid; grid-template-columns: 1.6fr 1fr; gap: 14px; }

/* Cards */
.card {
  background: var(--card-bg, var(--s1)); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
}
.card-hd {
  padding: 14px 18px 12px; display: flex; align-items: flex-start;
  justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--border);
}
.card-title { font-size: 13px; font-weight: 500; color: var(--text); letter-spacing: -.1px; }
.card-sub { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.card-body { padding: 14px 18px; }

/* Metric rows */
.metric-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 0; border-bottom: 1px solid var(--border);
}
.metric-row:last-child { border-bottom: none; }
.metric-label { font-size: 12.5px; color: var(--muted); }
.metric-value { font-size: 13px; font-weight: 500; color: var(--text); }
.metric-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 500; padding: 2px 8px; border-radius: 20px;
}
.badge-green { background: var(--green-bg); color: var(--green); }
.badge-red { background: var(--red-bg); color: var(--red); }
.badge-blue { background: var(--blue-bg); color: var(--blue); }
.badge-orange { background: var(--orange-bg); color: var(--orange); }
.badge-muted { background: var(--s3); color: var(--muted); }

/* Chart */
.chart-wrap { padding: 12px 18px 4px; }
.chart-tabs {
  display: flex; gap: 2px; padding: 3px;
  background: var(--s2); border-radius: 7px;
}
.chart-tab {
  padding: 4px 11px; border-radius: 5px; font-size: 11.5px;
  background: none; border: none; cursor: pointer; color: var(--muted);
  font-family: 'Geist', sans-serif; transition: all .15s;
}
.chart-tab.active { background: var(--s1); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.07); }

/* SVG charts */
.chart-svg { width: 100%; overflow: visible; }
.chart-line { fill: none; stroke: var(--text); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.chart-line-2 { fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 4 3; }
.chart-axis-text { font-family: 'Geist Mono', monospace; font-size: 9.5px; fill: var(--muted); }
.chart-grid { stroke: var(--border); stroke-width: 1; }
.chart-bar { fill: var(--text); opacity: .85; }
.chart-bar:hover { opacity: 1; }
.chart-bar-2 { fill: var(--muted); opacity: .35; }
.chart-hit-area { cursor: crosshair; }
.chart-hover-col { cursor: pointer; transition: fill .1s; }
.chart-hover-col:hover + .chart-bar { opacity: 1; }
.chart-dot { cursor: pointer; transition: r .15s, fill .15s; }

/* Vertical separator between card 3 (Novos clientes) and card 4 (Receita) */
.sum-card-sep {
  position: absolute; left: -1px; top: 16px; bottom: 16px;
  width: 1px; background: var(--border2);
}

/* Chart stat header — value displayed above chart */
.chart-stat-hd {
  padding: 12px 18px 0;
  border-bottom: none;
}
.chart-stat-value {
  font-size: 22px; font-weight: 500; color: var(--text);
  letter-spacing: -0.8px; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.chart-stat-label {
  font-size: 11px; color: var(--muted); margin-top: 2px;
  text-transform: uppercase; letter-spacing: .6px;
  font-family: 'Geist Mono', monospace;
}
.chart-stat-delta {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; font-weight: 500; margin-top: 4px;
}
.chart-stat-delta.up   { color: var(--green); }
.chart-stat-delta.down { color: var(--red); }

/* Activity feed slide-in animation */
.activity-item {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 9px 0; border-bottom: 1px solid var(--border);
  animation: activityIn .4s cubic-bezier(.16,1,.3,1) both;
}
@keyframes activityIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.activity-item:last-child { border-bottom: none; }

/* Progress bar animate-in */
.prog-fill {
  height: 100%; border-radius: 2px; background: var(--text);
  width: 0; /* starts at 0, JS sets final width after mount */
  transition: width .75s cubic-bezier(.16,1,.3,1);
}
.prog-fill.green  { background: var(--green); }
.prog-fill.blue   { background: var(--blue); }
.prog-fill.orange { background: var(--orange); }

/* Progress bars */
.prog-row { margin-bottom: 14px; }
.prog-row:last-child { margin-bottom: 0; }
.prog-label { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 6px; }
.prog-label-name { color: var(--text); }
.prog-label-val { color: var(--muted); font-variant-numeric: tabular-nums; }
.prog-track { height: 5px; background: var(--s3); border-radius: 3px; overflow: hidden; }

/* Dual line chart legend colors */
.dual-legend { display: flex; gap: 16px; padding: 6px 18px 10px; }
.dual-legend-item { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); }
.dual-legend-line { width: 20px; height: 2px; border-radius: 1px; flex-shrink: 0; }
.dual-legend-line.invest { background: var(--text); }
.dual-legend-line.leads  { background: var(--green); }

/* Activity feed */
.activity-feed { display: flex; flex-direction: column; }
.activity-item {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 4px; border-bottom: 1px solid var(--border);
  border-radius: 6px; margin: 0 -4px;
  transition: background .12s;
}
.activity-item:last-child { border-bottom: none; }
.activity-item[onclick]:hover { background: var(--s2); }
.activity-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--dim); flex-shrink: 0; margin-top: 6px;
}
.activity-dot.green { background: var(--green); }
.activity-dot.blue { background: var(--blue); }
.activity-dot.orange { background: var(--orange); }
.activity-dot.red { background: var(--red); }
.activity-text { font-size: 12.5px; color: var(--text); line-height: 1.5; flex: 1; }
.activity-time { font-size: 11px; color: var(--muted); white-space: nowrap; flex-shrink: 0; margin-top: 2px; }

/* Period selector */
.period-bar { display: flex; align-items: center; gap: 6px; }
.period-btn {
  padding: 6px 14px; border-radius: var(--radius-sm);
  font-family: 'Geist', sans-serif; font-size: 12.5px;
  cursor: pointer; border: 1px solid var(--border);
  background: none; color: var(--muted); transition: all .15s;
}
.period-btn:hover { background: var(--s2); color: var(--text); }
.period-btn.active { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* ── DATE PICKER POPUP ── */
.datepicker-popup {
  position: absolute; top: calc(100% + 8px); left: 0;
  background: var(--s1); border: 1px solid var(--border2);
  border-radius: var(--radius); width: 272px;
  box-shadow: 0 12px 40px rgba(0,0,0,.14);
  z-index: 9200; animation: fadeUp .18s cubic-bezier(.16,1,.3,1) both;
  overflow: hidden; display: none;
}
body.dark .datepicker-popup { box-shadow: 0 12px 40px rgba(0,0,0,.5); }
.datepicker-popup.open { display: block; }

.dp-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px 8px;
}
.dp-nav-btn {
  width: 26px; height: 26px; border-radius: 6px;
  border: 1px solid var(--border); background: none;
  color: var(--muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; transition: all .12s;
}
.dp-nav-btn:hover { background: var(--s2); color: var(--text); }
.dp-month-label {
  font-size: 13px; font-weight: 500; color: var(--text); cursor: pointer;
}
.dp-day-names {
  display: grid; grid-template-columns: repeat(7,1fr);
  padding: 0 10px; margin-bottom: 2px;
}
.dp-day-name {
  text-align: center; font-size: 10px; color: var(--muted);
  padding: 4px 0; font-family: 'Geist Mono', monospace;
}
.dp-grid {
  display: grid; grid-template-columns: repeat(7,1fr);
  padding: 0 10px 10px; gap: 1px;
}
.dp-cell {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: var(--text); cursor: pointer;
  border-radius: 6px; transition: background .1s, color .1s;
  position: relative;
}
.dp-cell:hover { background: var(--s2); }
.dp-cell.other-month { color: var(--dim); }
.dp-cell.today { font-weight: 600; }
.dp-cell.today::after {
  content: ''; position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 50%; background: var(--ink);
}
.dp-cell.selected {
  background: var(--ink) !important; color: var(--bg) !important;
}
.dp-cell.selected::after { display: none; }
.dp-cell.in-range { background: var(--s3); border-radius: 0; }
.dp-cell.hover-preview { background: var(--s2); border-radius: 0; opacity: .7; }
.dp-cell.range-start { background: var(--ink) !important; color: var(--bg) !important; border-radius: 6px 0 0 6px; }
.dp-cell.range-end { background: var(--ink) !important; color: var(--bg) !important; border-radius: 0 6px 6px 0; }
.dp-cell.range-start.range-end { border-radius: 6px; }
.dp-footer {
  padding: 8px 14px 10px; border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.dp-footer-info { font-size: 11.5px; color: var(--muted); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dp-apply-btn {
  padding: 5px 12px; border-radius: 6px;
  background: var(--ink); color: var(--bg);
  border: none; font-family: 'Geist', sans-serif;
  font-size: 12px; cursor: pointer; transition: opacity .15s; flex-shrink: 0;
}
.dp-apply-btn:hover { opacity: .8; }
.dp-clear-btn {
  padding: 5px 12px; border-radius: 6px;
  background: none; color: var(--muted);
  border: 1px solid var(--border); font-family: 'Geist', sans-serif;
  font-size: 12px; cursor: pointer; transition: all .15s; flex-shrink: 0;
}
.dp-clear-btn:hover { background: var(--s2); color: var(--text); }

/* Mode tabs inside datepicker */
.dp-mode-tabs {
  display: flex; padding: 8px 10px 0; gap: 2px;
}
.dp-mode-tab {
  flex: 1; padding: 5px 8px; border-radius: 5px;
  font-size: 11.5px; text-align: center;
  background: none; border: none; cursor: pointer;
  color: var(--muted); font-family: 'Geist', sans-serif;
  transition: all .12s;
}
.dp-mode-tab.active { background: var(--s2); color: var(--text); font-weight: 500; }

/* ── SKELETON LOADERS ── */
@keyframes shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position: 600px 0; }
}
.skeleton {
  background: linear-gradient(90deg, var(--s3) 25%, var(--s2) 50%, var(--s3) 75%);
  background-size: 600px 100%;
  animation: shimmer 1.4s infinite linear;
  border-radius: 6px;
}
.skel-text  { height: 12px; margin-bottom: 6px; }
.skel-value { height: 32px; margin-bottom: 10px; }
.skel-chart { height: 140px; width: 100%; border-radius: 8px; }
.skel-card  { height: 80px; border-radius: 8px; }

/* ── CHART TRANSITION / DRAW ANIMATION ── */
@keyframes chartFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.chart-animating svg {
  animation: chartFadeIn .45s cubic-bezier(.16,1,.3,1) both;
}
/* SVG line draw animation via stroke-dasharray */
.chart-line-animated {
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  animation: drawLine .7s cubic-bezier(.16,1,.3,1) forwards;
}
.chart-area-animated {
  opacity: 0;
  animation: fadeIn .5s .3s cubic-bezier(.16,1,.3,1) forwards;
}
.chart-bar-animated {
  transform-origin: bottom;
  transform: scaleY(0);
  animation: barGrowSmooth .55s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes drawLine {
  to { stroke-dashoffset: 0; }
}
@keyframes barGrowSmooth {
  to { transform: scaleY(1); }
}
.chart-tooltip {
  position: fixed; pointer-events: none;
  background: var(--s1); border: 1px solid var(--border2);
  border-radius: 8px; padding: 8px 12px;
  box-shadow: 0 6px 24px rgba(0,0,0,.13);
  z-index: 9000; display: none;
  animation: fadeUp .12s cubic-bezier(.16,1,.3,1) both;
  min-width: 110px;
}
body.dark .chart-tooltip { box-shadow: 0 6px 24px rgba(0,0,0,.5); }
.chart-tooltip.visible { display: block; }
.ct-label { font-size: 10.5px; color: var(--muted); margin-bottom: 3px; font-family: 'Geist Mono', monospace; }
.ct-value { font-size: 14px; font-weight: 600; color: var(--text); letter-spacing: -.3px; }
.ct-sub   { font-size: 10.5px; color: var(--muted); margin-top: 2px; }



/* Badges clicáveis das abas */
.dash-tab-badge {
  cursor: pointer;
  transition: transform .12s, opacity .12s;
}
.dash-tab-badge:hover {
  transform: scale(1.15);
  opacity: .85;
}