/* Scores table header white text in dark mode */
.row.head > div {
  color: #fff !important;
}
/* Team tabs white text in dark mode */
.team-tabs .tab, .team-tabs .tab.active {
  color: #fff !important;
}
/* Tab headers, navigation, and active/selected buttons white in dark mode */
.tab-header, .nav-header, .panel-header, .scores-header, .overview-header,
.tab-btn, .tab-btn.active, .tab-btn.selected, .tab-btn[aria-selected="true"],
.scores-tabs .active, .scores-tabs .selected, .scores-tabs .tab-btn,
.header-row, .calendar-header, .calendar-header .title, .calendar-header .subtitle {
  color: #fff !important;
}
/* Dark Mode */


:root {
  --grey-200: #43413b;
  --grey-100: #262521;
  --white: #1d1c19;
  --invert-grey: #adadad;
  --invert-black: #ffffff;
}

/* Global color scheme */
html {
  color-scheme: dark !important;
}

body {
  background-color: var(--white);
  color: #fffddd;
  border-color: #827661;
  transition: background-color 0.3s, color 0.3s;
}

/* Links, tables, and selections */
a { color: #7399be; }
table { border-color: #666359; }
mark, ::placeholder { color: #cdbda1; }

/* Headings white in dark mode */
h1, h2, h3, .scores-header, .team-header {
  color: #fff !important;
}

/* Table header and cell text white in dark mode */
th, td {
  color: #fff !important;
}

/* Search bar text white in dark mode */
.topbar .search input {
  color: #fff !important;
  background: var(--grey-900) !important;
}

::selection,
::-moz-selection {
  background-color: #2e4f75 !important;
  color: #fffddd !important;
}

/* Inputs and autofill styling */
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
  background-color: #47441b !important;
  color: #fffddd !important;
}

/* Button overrides */
.btn {
  background-color: var(--grey-200);
  color: var(--white);
  border: none;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
}

/* Dropdown menu in dark mode */
.dropdown {
  background: var(--grey-100) !important;
  border-color: var(--invert-grey) !important;
}
.dropdown a {
  color: #fff !important;
}
.dropdown a:hover {
  background: var(--invert-grey) !important;
  color: var(--invert-black) !important;
}

.calendar {
  filter: invert(0.9) hue-rotate(180deg);
  border: none;
  width: 100%;
  height: 600px;
}