/* =====================================================================
   legacy-shim.css — TEMPORARY. DELETE ME.

   This file exists for ONE reason: pages that have not been ported to the
   design system yet. The 391-line inline <style> block in base.html was the
   old design system, and D1 deleted it. That deletion orphaned a set of
   hand-rolled component classes (.theme-button, .card-panel, .ddc-input,
   .ddc-table, .kpi-info, .badge-*, …) and a set of light-mode Tailwind
   utilities the old block used to override (.bg-white, .text-slate-*, …).
   Roughly 30 templates still use them: the dashboards, reports, feed, entry
   forms, registration and password-reset pages. All of them are hidden from
   families but every one is still reachable by URL, and without these rules
   they render as white panels with invisible text.

   RULES FOR THIS FILE
   -------------------
   1. It is measured in how fast it SHRINKS. Every page D3/D4/D5 ports should
      delete rules from here. When the last legacy page is ported, delete the
      file and its <link> in base.html.
   2. It defines NOTHING new. Only what the deleted block defined, re-expressed
      in the new tokens (--surface-1, --ink, --accent, …). No --ddc-* custom
      properties are defined or read here — the whole point of D1 was killing
      that second palette.
   3. It must never fight the component layer. Everything below is either a
      legacy-only class name or a light-mode Tailwind utility that no ported
      page uses. Nothing here restyles .btn / .card / .chip / .field / .select
      / .segmented / .tabs / .table / .toast / .site-header / .drawer /
      .site-footer.
   4. It does NOT restore `h1,h2,h3 { color: <red> !important }`. That global
      override is half of why red ended up doing eleven jobs (teardown §1.4)
      and it is not coming back.
   5. Load order: output.css → design-system.css → legacy-shim.css.
   ===================================================================== */


/* ---------------------------------------------------------------------
   1. Light-mode Tailwind utilities, neutralised.
   Legacy templates were authored light and repainted dark by the old block.
   Used by: dashboards, reports, feed, entry forms, registration, and (until
   D3/D4 land) player_public / shooting_machine_bmf / clipboard_log_shots.
   ------------------------------------------------------------------- */

.bg-white,
.bg-slate-50,
.bg-slate-100 { background-color: var(--surface-1) !important; }
.border-slate-100,
.border-slate-200 { border-color: var(--line) !important; }
.text-slate-500,
.text-slate-600,
.text-slate-700,
.text-slate-900 { color: var(--ink) !important; }

.text-blue-500,
.text-blue-600,
.text-indigo-500,
.text-indigo-600,
.text-indigo-700 { color: var(--accent) !important; }
.border-indigo-500,
.border-indigo-600,
.border-indigo-700 { border-color: var(--accent) !important; }
.bg-indigo-50,
.bg-indigo-100,
.bg-indigo-200 {
  background-color: var(--accent-dim) !important;
  color: var(--accent) !important;
}
/* ---------------------------------------------------------------------
   2. Legacy form controls.
   Scoped to bare inputs and .ddc-input (17 templates). The component layer's
   .input / .select / .textarea / .field__control are class selectors and so
   always win over the element rules below — deliberately.
   ------------------------------------------------------------------- */

.ddc-input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
textarea,
select {
  min-height: var(--tap);
  background: var(--surface-2);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.85rem;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
/* Dark date picker chrome (the old block inverted the native icon). */
input[type="date"] { color-scheme: dark; }
input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1) opacity(0.6);
  cursor: pointer;
  transition: opacity var(--dur) var(--ease);
}
input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
.ddc-input:focus,
input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
}
.theme-button:active { transform: translateY(1px); }
.theme-button:disabled { opacity: .6; cursor: not-allowed; transform: none; }
/* .btn-outline — 3 templates. NOTE: not related to the component .btn. */
.btn-outline {
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--accent);
  min-height: var(--tap);
}
/* ---------------------------------------------------------------------
   4. Legacy panels and typography.  .card-panel — 27 templates.
   ------------------------------------------------------------------- */

.card-panel {
  background-color: var(--surface-1) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-lg);
}
.section-title {
  font-size: var(--fs-kicker);
  line-height: var(--lh-kicker);
  text-transform: uppercase;
  letter-spacing: var(--ls-kicker);
  font-weight: 700;
  color: var(--ink-3);
  margin-bottom: var(--space-8);
}
details summary { color: var(--accent); }
  100% { background-position: -200% 0; }
}
/* ---------------------------------------------------------------------
   5. Legacy badges.  .badge-* — 3 templates.
   Distinct class name from the component .chip, so the two do not collide.
   ------------------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-pill);
  font-size: var(--fs-body-sm);
  font-weight: 600;
}
.badge-warning { background: var(--warn-dim);   color: var(--warn);   border: 1px solid rgba(251,191,36,.28); }
.badge-danger  { background: var(--danger-dim); color: var(--danger); border: 1px solid rgba(248,113,113,.28); }
.badge-neutral { background: rgba(168,176,187,.12); color: var(--ink-2); border: 1px solid var(--line-strong); }
/* ---------------------------------------------------------------------
   6. Legacy KPI tooltip.  .kpi-info — 5 templates.
   ------------------------------------------------------------------- */

.kpi-info {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong);
  color: var(--ink-3);
  font-size: var(--fs-meta);
  font-weight: 700;
  background: var(--surface-2);
  cursor: help;
}
.kpi-info::after {
  content: attr(data-tip);
  position: absolute;
  right: 0;
  top: 125%;
  min-width: 180px;
  max-width: 260px;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  color: var(--ink);
  font-size: var(--fs-meta);
  line-height: var(--lh-body-sm);
  padding: var(--space-8);
  border-radius: var(--radius-sm);
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
  z-index: 50;
}
.kpi-info:hover::after { opacity: 1; transform: translateY(0); }
/* ---------------------------------------------------------------------
   7. Legacy tabs and tables.
   .ddc-tab-btn — 5 templates · .ddc-table — 4 · .dashboard-row — 2 ·
   .table-fade-wrapper — 2.
   ------------------------------------------------------------------- */

.ddc-tab-btn { min-height: var(--tap); }
.ddc-tab-btn.active {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  position: relative;
}
.ddc-tab-btn.active::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -3px;
  height: 2px;
  background: var(--accent);
}
table.ddc-table th {
  font-size: var(--fs-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
table.ddc-table td { border-color: var(--line); }
.ddc-table tbody tr:nth-child(even) { background-color: rgba(255,255,255,.02); }
table.ddc-table tbody tr:hover { background-color: var(--accent-dim); }
.dashboard-row { background-color: var(--surface-1); }
.dashboard-row:nth-child(even) { background-color: var(--surface-2); }
.dashboard-row:hover {
  background-color: var(--accent-dim) !important;
  color: var(--ink) !important;
}
.table-fade-wrapper { position: relative; overflow: hidden; }
.table-fade-wrapper::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 24px;
  background: linear-gradient(to right, transparent, var(--surface-1));
  pointer-events: none;
}
/* ---------------------------------------------------------------------
   8. Legacy dropdown panel.  .nav-dropdown — coach_command_center_print.html.
   base.html no longer uses it; this drops out with that one template.
   ------------------------------------------------------------------- */

.nav-dropdown {
  background-color: var(--surface-1);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  color: var(--ink);
}
.nav-dropdown a {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0.55rem 0.9rem;
  color: var(--ink);
  transition: background var(--dur) var(--ease);
}
.nav-dropdown a:hover { background-color: var(--accent-dim); color: var(--accent); }
.message {
  border-radius: var(--radius-md);
  padding: var(--space-12) var(--space-16);
  border: 1px solid var(--line);
  background: var(--surface-1);
  font-size: var(--fs-body-sm);
  color: var(--ink);
}
.message.message-error   { border-color: rgba(248,113,113,.45); background: var(--danger-dim); color: var(--danger); }
/* ---------------------------------------------------------------------
   10. PWA: hide the install UI when already running as an installed app.
   The prompt script also early-returns on display-mode: standalone; this was
   the CSS belt to that braces and went out with the inline block.
   ------------------------------------------------------------------- */

@media all and (display-mode: standalone) {
  #pwa-prompt,
  #pwa-backdrop { display: none !important; }
}