/* Round 46: 📊 Dashboard tab. Uses the CRM's colour variables from style.css. */
#tab-dashboard { --dash-line: var(--green); --dash-good: #1f7a45; --dash-bad: #b42318; }

.dash-toolbar { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; }
.dash-range { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.dash-range select, .dash-range input[type=date], .dash-conn-form select, .dash-conn-form input, .dash-detail-head select {
  padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; background: #fff; color: var(--text);
}
.dash-custom { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; color: var(--muted); }
.dash-compare { font-size: 13px; color: var(--text); display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }
.dash-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.dash-range-label { font-size: 13px; color: var(--muted); }

.dash-banner { background: #fff8e6; border: 1px solid #f1d58a; color: #5c4a12; border-radius: 10px; padding: 10px 14px; font-size: 13px; margin-bottom: 14px; }
.dash-note { background: #f1f6f2; border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; font-size: 12.5px; color: var(--muted); margin-bottom: 12px; }
.dash-src-err { background: #fdf0ee; border: 1px solid #f3c8c2; color: #8a2b1d; border-radius: 10px; padding: 8px 12px; font-size: 13px; margin-bottom: 10px; }
.dash-error { color: #8a2b1d; }
.dash-wait { display: flex; gap: 10px; align-items: center; color: var(--muted); font-size: 14px; }
.dash-loading { opacity: 0.55; transition: opacity .15s; pointer-events: none; }
.dash-muted { color: var(--muted); font-size: 12.5px; }
.dash-prev-label { font-size: 12px; color: var(--muted); margin: -6px 0 14px; }

/* Stat tiles */
.dash-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin-bottom: 14px; }
.dash-tile { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; min-width: 0; }
.dash-tile.clickable { cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.dash-tile.clickable:hover, .dash-tile.clickable:focus { border-color: var(--green); box-shadow: 0 2px 10px rgba(47,125,79,.12); outline: none; }
.dash-tile-label { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.dash-tile-more { color: var(--green); font-weight: 700; }
.dash-tile-value { font-size: 26px; font-weight: 700; margin: 4px 0 2px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.dash-tile-sub { font-size: 12px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }

.dash-chg { font-size: 12px; font-weight: 700; white-space: nowrap; }
.dash-chg.good { color: var(--dash-good); }
.dash-chg.bad { color: var(--dash-bad); }
.dash-chg.flat { color: var(--muted); font-weight: 600; }

.dash-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px 16px; flex-wrap: wrap; margin-bottom: 8px; }
.dash-card-head h3 { margin: 0; font-size: 15px; }

/* Tables */
.dash-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.dash-table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.dash-table th { text-align: left; font-size: 12px; color: var(--muted); font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.dash-table th.sortable { cursor: pointer; user-select: none; }
.dash-table td { padding: 7px 8px; border-bottom: 1px solid #f0f2f0; vertical-align: middle; max-width: 380px; overflow-wrap: anywhere; }
.dash-table .num { text-align: right; white-space: nowrap; }
.dash-table tr.clickable { cursor: pointer; }
.dash-table tr.clickable:hover td { background: #f4f8f5; }
.dash-table td.share { min-width: 120px; white-space: nowrap; }
.dash-bar { display: inline-block; width: 70px; height: 6px; background: #eef1ee; border-radius: 3px; vertical-align: middle; margin-right: 6px; overflow: hidden; }
.dash-bar span { display: block; height: 100%; background: var(--green); border-radius: 3px; }
.dash-table a { color: var(--green-dark); }
.dash-pill { font-size: 10.5px; background: #eef1ee; color: var(--muted); border-radius: 8px; padding: 1px 6px; margin-left: 4px; }

/* Charts */
.dash-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin-bottom: 14px; }
.dash-charts .card { margin-bottom: 0; }
.dash-chart-total { font-size: 18px; font-weight: 700; margin-bottom: 4px; font-variant-numeric: tabular-nums; }
.dash-chart { position: relative; }
.dash-svg { width: 100%; height: 200px; display: block; overflow: visible; }
.dash-grid { stroke: #e9ece9; stroke-width: 1; }
.dash-axis { fill: var(--muted); font-size: 11px; }
.dash-line { fill: none; stroke: var(--dash-line); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.dash-area { fill: var(--dash-line); opacity: 0.08; }
.dash-dot, .dash-hover-dot { fill: var(--dash-line); stroke: #fff; stroke-width: 2; }
.dash-cross { stroke: #aab4ad; stroke-width: 1; stroke-dasharray: 3 3; }
.dash-hit { fill: transparent; cursor: crosshair; }
.dash-svg .hidden { display: none; }
.dash-tip { position: absolute; top: -6px; background: #1f2a24; color: #fff; border-radius: 8px; padding: 6px 10px; font-size: 12px; pointer-events: none; white-space: nowrap; box-shadow: 0 4px 12px rgba(0,0,0,.2); }
.dash-tip .dash-muted { color: #c9d2cc; font-size: 11px; }
.dash-chart-empty { padding: 30px 0; text-align: center; }

/* Detail */
.dash-detail-head { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; margin-bottom: 14px; }
.dash-detail-head h2 { margin: 0; font-size: 19px; flex: 1 1 auto; }
.dash-funnel { display: grid; gap: 8px; }
.dash-funnel-step { display: grid; grid-template-columns: minmax(120px, 2fr) 3fr; gap: 10px; align-items: center; font-size: 13px; }
.dash-funnel-bar { height: 12px; background: #eef1ee; border-radius: 6px; overflow: hidden; }
.dash-funnel-bar span { display: block; height: 100%; background: var(--green); border-radius: 6px; }

/* Connections */
.dash-conn-block { border-top: 1px solid var(--border); padding: 12px 0 6px; }
.dash-conn-block:first-of-type { border-top: none; }
.dash-conn-block h4 { margin: 0 0 6px; font-size: 14px; }
.dash-conn-block p { font-size: 13px; margin: 4px 0 8px; }
.dash-conn-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin: 6px 0; }
.dash-conn-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.dash-conn-form input { min-width: 240px; flex: 1 1 240px; }
.dash-conn-form select { min-width: 220px; max-width: 100%; }
.dash-conn-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.dash-help { font-size: 13px; margin: 6px 0 4px; }
.dash-help summary { cursor: pointer; color: var(--green-dark); font-weight: 600; }
.dash-help ol { padding-left: 20px; margin: 8px 0; }
.dash-help li { margin-bottom: 4px; }
.danger-text { color: #b42318 !important; }

@media (max-width: 640px) {
  .dash-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .dash-tile { padding: 10px 12px; }
  .dash-tile-value { font-size: 20px; }
  .dash-charts { grid-template-columns: 1fr; }
  .dash-toolbar { flex-direction: column; align-items: stretch; }
  .dash-conn-form input, .dash-conn-form select { min-width: 0; width: 100%; }
  .dash-funnel-step { grid-template-columns: 1fr; gap: 4px; }
}
#tab-dashboard .dash-range select, #tab-dashboard .dash-detail-head select { width: auto; max-width: 100%; flex: 0 0 auto; margin: 0; }
#tab-dashboard .dash-range input[type=date] { width: auto; margin: 0; }
/* Masks the Meta token without making it a password field (which triggers Chrome's saved-login autofill). */
.dash-secret { -webkit-text-security: disc; text-security: disc; }

/* Update 62: 🛒 Abandoned Carts tab (public/abandoned.js) */
.dash-tile.abn-active { border-color: var(--green); box-shadow: 0 0 0 2px rgba(47,125,79,.18); }
.abn-pill { display: inline-block; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 10px; background: #eef1ee; color: var(--muted); white-space: nowrap; }
.abn-pill.abn-code { background: #e7f4ec; color: var(--green); }
.abn-pill.abn-unsub { background: #fdf0ee; color: #8a2b1d; }