/* Dark mode - enabled by dark-mode.js / the <head> snippet adding .dark-mode to <html>.
   Light mode is untouched: every rule here is scoped to html.dark-mode. */

/* ---- Design tokens (override the :root values in base.html) ---- */
html.dark-mode {
  color-scheme: dark;
  /* Brown becomes the surface, sand the muted text; green and orange stay.
     The poster colors (--brown, --green, --sand, --cream, --orange) don't change. */
  --accent2: 30 85% 60%;                       /* bright orange reads well on brown */
  --accent2-foreground: 11 22% 12%;
  --text-green: 92 45% 58%;                    /* green as text on dark surfaces */

  --primary: var(--green);
  --primary-foreground: 0 0% 100%;
  --primary-glow: var(--green);
  --secondary: 11 15% 18%;
  --secondary-foreground: 41 40% 90%;
  --success: var(--green);
  --success-foreground: 0 0% 100%;
  --warning: 40 85% 55%;
  --warning-foreground: 40 30% 10%;
  --destructive: 0 70% 62%;
  --destructive-foreground: 11 22% 10%;
  --muted: 11 15% 18%;
  --muted-foreground: 40 18% 70%;
  --accent: var(--green);
  --accent-foreground: 0 0% 100%;
  --background: 11 20% 9%;
  --foreground: 41 40% 90%;
  --card: 11 18% 13%;
  --card-foreground: 41 40% 90%;
  --border: 11 14% 25%;
  --input: 11 12% 32%;
  --ring: var(--green);
  --pattern: 11 18% 13%;

  --color-primary: hsl(var(--primary));
  --color-primary-hover: hsl(92, 41%, 38%);
  --color-primary-light: hsl(92, 41%, 45%);
  --color-success: hsl(var(--success));
  --color-success-hover: hsl(92, 41%, 38%);
  --color-background: hsl(var(--background));
  --color-foreground: hsl(var(--foreground));
  --color-muted: hsl(var(--muted));
  --color-muted-foreground: hsl(var(--muted-foreground));
  --color-border: hsl(var(--border));
  --color-input: hsl(var(--input));
  --gradient-subtle: hsl(var(--muted));

  /* Shared dark palette for the overrides below */
  --dm-page: hsl(var(--background));
  --dm-surface: hsl(var(--card));
  --dm-surface-muted: hsl(var(--muted));
  --dm-border: hsl(var(--border));
  --dm-text: hsl(var(--foreground));
  --dm-text-muted: hsl(var(--muted-foreground));
  --dm-link: hsl(var(--accent2));
}

html.dark-mode body {
  color: var(--dm-text);
  background-color: var(--dm-page);
}

html.dark-mode a:not(.btn):not(.nav-link):not(.dropdown-item) {
  color: var(--dm-link);
}

/* Green as text needs to be lighter on brown than as a fill */
html.dark-mode .text-primary,
html.dark-mode .text-success,
html.dark-mode .change-up,
html.dark-mode .skill-up {
  color: hsl(var(--text-green)) !important;
}

html.dark-mode .btn-outline-primary:not(:hover):not(.active),
html.dark-mode .btn-outline-success:not(:hover):not(.active) {
  color: hsl(var(--text-green));
  border-color: hsl(var(--text-green));
}

/* ---- Bootstrap 4 components ---- */
html.dark-mode .bg-light,
html.dark-mode .bg-white {
  background-color: var(--dm-surface) !important;
  color: var(--dm-text);
}

html.dark-mode .card,
html.dark-mode .modal-content,
html.dark-mode .dropdown-menu,
html.dark-mode .list-group-item,
html.dark-mode .popover,
html.dark-mode .toast {
  background-color: var(--dm-surface);
  color: var(--dm-text);
  border-color: var(--dm-border);
}

html.dark-mode .modal-header,
html.dark-mode .modal-footer,
html.dark-mode .input-group-text,
html.dark-mode .toast-header {
  background-color: var(--dm-surface-muted);
  color: var(--dm-text);
  border-color: var(--dm-border);
}

html.dark-mode .text-muted,
html.dark-mode .text-secondary,
html.dark-mode .form-text,
html.dark-mode .blockquote-footer {
  color: var(--dm-text-muted) !important;
}

html.dark-mode .text-dark,
html.dark-mode .text-body {
  color: var(--dm-text) !important;
}

html.dark-mode .dropdown-item {
  color: var(--dm-text);
}

html.dark-mode .dropdown-item:hover,
html.dark-mode .dropdown-item:focus,
html.dark-mode .list-group-item-action:hover {
  background-color: var(--dm-surface-muted);
  color: #fff;
}

html.dark-mode .dropdown-divider,
html.dark-mode hr {
  border-color: var(--dm-border);
}

html.dark-mode .form-control,
html.dark-mode .custom-select {
  background-color: var(--dm-surface-muted);
  color: var(--dm-text);
  border-color: var(--dm-border);
}

html.dark-mode .form-control:focus,
html.dark-mode .custom-select:focus {
  background-color: var(--dm-surface-muted);
  color: var(--dm-text);
}

html.dark-mode .form-control::placeholder {
  color: var(--dm-text-muted);
}

html.dark-mode .form-control:disabled,
html.dark-mode .form-control[readonly] {
  background-color: var(--dm-surface);
}

html.dark-mode .table {
  color: var(--dm-text);
}

html.dark-mode .table th,
html.dark-mode .table td,
html.dark-mode .table thead th,
html.dark-mode .border,
html.dark-mode .border-top,
html.dark-mode .border-bottom,
html.dark-mode .border-left,
html.dark-mode .border-right {
  border-color: var(--dm-border) !important;
}

html.dark-mode .table .thead-light th,
html.dark-mode .table-light,
html.dark-mode .table-light > th,
html.dark-mode .table-light > td {
  background-color: var(--dm-surface-muted);
  color: var(--dm-text);
}

html.dark-mode .table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(255, 255, 255, 0.04);
}

html.dark-mode .table-hover tbody tr:hover {
  background-color: rgba(255, 255, 255, 0.07);
  color: var(--dm-text);
}

html.dark-mode .page-link {
  background-color: var(--dm-surface);
  border-color: var(--dm-border);
  color: var(--dm-link);
}

html.dark-mode .page-item.disabled .page-link {
  background-color: var(--dm-surface);
  color: var(--dm-text-muted);
}

html.dark-mode .close {
  color: var(--dm-text);
  text-shadow: none;
}

html.dark-mode .badge-light,
html.dark-mode .btn-light {
  background-color: var(--dm-surface-muted);
  color: var(--dm-text);
  border-color: var(--dm-border);
}

html.dark-mode .btn-outline-secondary {
  color: var(--dm-text-muted);
  border-color: var(--dm-border);
}

html.dark-mode .btn-outline-secondary:hover {
  background-color: var(--dm-surface-muted);
  color: var(--dm-text);
}

html.dark-mode .progress {
  background-color: var(--dm-surface-muted);
}

html.dark-mode code {
  color: #f08dc3;
}

/* ---- App components with hard-coded light colours ---- */
html.dark-mode .td-fixed {
  background-color: var(--dm-surface) !important;
}

html.dark-mode .table-custom thead th {
  background-color: var(--dm-surface-muted);
  color: var(--dm-text);
}

html.dark-mode table.sortable thead {
  background-color: var(--dm-surface-muted);
  color: var(--dm-text-muted);
}

html.dark-mode .status-message,
html.dark-mode .positioned-player {
  background: var(--dm-surface);
  color: var(--dm-text);
}

html.dark-mode .timeline-container,
html.dark-mode .week-container,
html.dark-mode .available-player {
  background: var(--dm-surface);
  color: var(--dm-text);
}

html.dark-mode .week-header,
html.dark-mode .player-entry,
html.dark-mode .no-changes,
html.dark-mode .group-pill,
html.dark-mode .available-player:hover {
  background: var(--dm-surface-muted);
  color: var(--dm-text);
}

html.dark-mode .timeline-title,
html.dark-mode .player-name {
  color: var(--dm-text);
}

html.dark-mode .other-change {
  color: var(--dm-text-muted);
}

html.dark-mode .table-responsive::-webkit-scrollbar-track {
  background: var(--dm-surface);
}

html.dark-mode .introjs-tooltip {
  background-color: var(--dm-surface);
  color: var(--dm-text);
}

/* ---- Toggle button ---- */
#dark-mode-toggle {
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 0.25rem;
  font-size: 1rem;
  line-height: 1.4;
  margin-left: 0.5rem;
  padding: 0 0.4rem;
  cursor: pointer;
}

#dark-mode-toggle:hover {
  background: rgba(0, 0, 0, 0.05);
}

html.dark-mode #dark-mode-toggle {
  border-color: rgba(255, 255, 255, 0.3);
}

html.dark-mode #dark-mode-toggle:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.5);
}

/* Formations pitch: dimmer stripes so it doesn't dominate the dark page */
html.dark-mode .pitch {
  --pitch: 92 30% 22%;
  --pitch-stripe: 92 30% 26%;
}

html.dark-mode .position-slot {
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.05);
}

/* Info fills are bright orange in dark mode: dark text, also where templates say text-white */
html.dark-mode .bg-info,
html.dark-mode .bg-info.text-white,
html.dark-mode .badge-info,
html.dark-mode .btn-info {
  color: hsl(var(--accent2-foreground)) !important;
}

/* Scouting share bars: brown segments vanish on brown cards */
html.dark-mode .share-2 {
  background-color: hsl(var(--cream));
  color: hsl(var(--brown));
}