/* ============================================================
   Global Period Control — period.css
   One unified period selector (Today / Week / Month / Overall /
   Custom range) used on every dashboard page via period.js.

   Render with: DashPeriod.mount(targetEl, { variant, onChange })
   Two tints, identical shape/behaviour:
     data-variant="light" (default) — Nexus light pages
     data-variant="dark"            — dark pages / dark heroes
   ============================================================ */

.dp-bar {
  --dp-radius: 9px;
  --dp-accent: #4f46e5;
  --dp-accent-fg: #ffffff;
  --dp-bg: #eef2f7;
  --dp-fg: #475569;
  --dp-fg-hover: #0f172a;
  --dp-border: #e2e8f0;

  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  background: var(--dp-bg);
  border: 1px solid var(--dp-border);
  border-radius: var(--dp-radius);
  font-family: inherit;
  vertical-align: middle;
}
.dp-bar[data-variant="dark"] {
  --dp-accent: #6366f1;
  --dp-bg: rgba(255, 255, 255, 0.06);
  --dp-fg: #aeb7c8;
  --dp-fg-hover: #ffffff;
  --dp-border: rgba(255, 255, 255, 0.12);
}

.dp-btn {
  border: none;
  background: transparent;
  color: var(--dp-fg);
  font-weight: 700;
  font-size: 0.8rem;
  line-height: 1;
  /* Vertical padding alone brings this to ~40px tall — the accepted touch-
     target floor — without changing the pill's visual weight/size on
     desktop; DashHeader has no fixed height, so the bar just grows to fit. */
  padding: 14px 14px;
  border-radius: calc(var(--dp-radius) - 3px);
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.15s, color 0.15s;
}
.dp-btn:hover { color: var(--dp-fg-hover); }
.dp-btn.active { background: var(--dp-accent); color: var(--dp-accent-fg); }
.dp-btn:focus-visible { outline: 2px solid var(--dp-accent); outline-offset: 1px; }
.dp-ic { font-size: 0.82em; opacity: 0.9; }

/* ── Custom-range popover ── */
.dp-pop {
  --dp-accent: #4f46e5;
  position: fixed;
  z-index: 600; /* tooltip tier */
  width: 250px;
  padding: 14px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.22);
  color: #0f172a;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.dp-pop[data-variant="dark"] {
  --dp-accent: #6366f1;
  background: #152040;
  border-color: rgba(255, 255, 255, 0.14);
  color: #e2e8f0;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
}
.dp-pop-title {
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.7;
  margin-bottom: 11px;
}
.dp-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.dp-field label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.65; }
.dp-field input[type="date"] {
  font: inherit;
  font-size: 0.86rem;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: inherit;
}
.dp-pop[data-variant="dark"] .dp-field input[type="date"] {
  background: #0c1428;
  border-color: rgba(255, 255, 255, 0.18);
  color: #e2e8f0;
  color-scheme: dark;
}
.dp-pop-err { display: none; color: #dc2626; font-size: 0.75rem; margin: -2px 0 8px; }
.dp-pop[data-variant="dark"] .dp-pop-err { color: #fda4af; }
.dp-pop-actions { display: flex; gap: 8px; margin-top: 2px; }
.dp-pop-btn { flex: 1; border: none; border-radius: 8px; padding: 9px; font: inherit; font-weight: 700; font-size: 0.82rem; cursor: pointer; }
.dp-apply { background: var(--dp-accent); color: #fff; }
.dp-apply:hover { filter: brightness(1.08); }
.dp-cancel { background: rgba(100, 116, 139, 0.16); color: inherit; }
.dp-cancel:hover { background: rgba(100, 116, 139, 0.26); }

@media (prefers-reduced-motion: reduce) {
  .dp-btn { transition: none; }
}