/* Analytics dashboard. Extends styles.css + settings.css. */

main { padding: 20px 22px 80px; max-width: 1400px; margin: 0 auto; }
section { margin-bottom: 26px; }

h2.sec {
  font-size: 13px; text-transform: uppercase; letter-spacing: .7px;
  color: var(--muted); margin: 0 0 10px;
}

/* ------------------------------------------------------------- filters -- */
.filterbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 11px 22px; background: var(--panel);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 15;
}
.filterbar .spacer { flex: 1; }
.filterbar select, .filterbar input[type=date] {
  padding: 6px 9px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--bg); color: var(--text); font-size: 13px;
}
.filterbar .fl { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 5px; }

.ranges, .seg { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.ranges button, .seg button {
  border: none; border-radius: 0; background: var(--panel); color: var(--muted);
  padding: 6px 12px; font-size: 13px; cursor: pointer;
}
.ranges button + button, .seg button + button { border-left: 1px solid var(--line); }
.ranges button.active, .seg button.active { background: var(--green); color: #fff; font-weight: 600; }
.seg { margin-left: 10px; vertical-align: middle; }
.seg button { padding: 4px 10px; font-size: 12px; }

/* --------------------------------------------------------------- cards -- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 8px; padding: 13px 15px;
}
.card .v { font-size: 25px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.15; }
.card .l { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; margin-top: 3px; }
.card .s { font-size: 12px; color: var(--muted); margin-top: 4px; }
.card.accent { border-left: 3px solid var(--green); }
.card.good   { border-left: 3px solid var(--green); }
.card.warn   { border-left: 3px solid var(--amber); }
.card.bad    { border-left: 3px solid var(--danger); }

.warnbar {
  padding: 10px 14px; border-radius: 6px; margin-bottom: 16px; font-size: 13px;
  background: color-mix(in srgb, var(--amber) 20%, transparent);
}
.warnbar ul { margin: 6px 0 0; padding-left: 20px; }
.note { font-size: 12px; color: var(--muted); margin: 8px 0 0; }

/* -------------------------------------------------------------- funnel -- */
.funnel { display: flex; flex-direction: column; gap: 6px; }
.funnel .step {
  display: grid; grid-template-columns: 130px 1fr 130px;
  align-items: center; gap: 12px; font-size: 13px;
}
.funnel .bar { height: 26px; background: color-mix(in srgb, var(--muted) 14%, transparent); border-radius: 4px; overflow: hidden; }
.funnel .bar > i {
  display: block; height: 100%; background: var(--green); border-radius: 4px;
  transition: width .4s;
}
.funnel .step.dim .bar > i { background: color-mix(in srgb, var(--green) 55%, transparent); }
.funnel .lbl { color: var(--muted); text-transform: uppercase; font-size: 11px; letter-spacing: .5px; }
.funnel .val { font-variant-numeric: tabular-nums; }
.funnel .val small { color: var(--muted); }

/* --------------------------------------------------------------- chart -- */
.chart { display: flex; align-items: flex-end; gap: 3px; height: 130px; }
.chart.small { height: 80px; }
.chart .col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 1px; min-width: 4px; }
.chart .col > i { display: block; border-radius: 2px 2px 0 0; }
.chart .col .sent { background: color-mix(in srgb, var(--muted) 40%, transparent); }
.chart .col .opens { background: var(--amber); }
.chart .col .clicks { background: var(--green); }
.chart .col .tick { font-size: 9px; color: var(--muted); text-align: center; height: 12px; overflow: hidden; }
.legend { display: flex; gap: 16px; margin-top: 10px; font-size: 12px; color: var(--muted); }
.legend .sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; }
.legend .sw.sent { background: color-mix(in srgb, var(--muted) 40%, transparent); }
.legend .sw.opens { background: var(--amber); }
.legend .sw.clicks { background: var(--green); }

/* --------------------------------------------------------------- table -- */
.rankbar { display: flex; align-items: center; gap: 8px; }
.rankbar .track { flex: 1; height: 7px; border-radius: 99px; background: color-mix(in srgb, var(--muted) 18%, transparent); overflow: hidden; }
.rankbar .track i { display: block; height: 100%; background: var(--green); border-radius: 99px; }
.pending td { opacity: .6; }
.medal { font-size: 13px; }