/* neopern site theme.
 *
 * Dark mode for the Evennia/Bootstrap-4 website. The active theme lives in
 * a `data-theme` attribute on <html>, set by an inline script in base.html
 * before first paint (so there is no white flash) and flipped by the toggle
 * button in the navbar. See docs/website.md.
 *
 * Light mode is deliberately left as Evennia ships it: every rule below is
 * scoped under [data-theme="dark"], so nothing here can change the light
 * site. Bootstrap 4 compiles its component colours in rather than reading
 * custom properties, so each component has to be re-stated by hand.
 */

:root {
  /* Player-content ("page kit") tokens, consumed by
     world/lore/templates/lore/user_content_css.html. The light values are
     what those rules hardcoded before they were tokenised. */
  --uc-border: rgba(0, 0, 0, .2);
  --uc-border-soft: rgba(0, 0, 0, .15);
  --uc-fill: rgba(0, 0, 0, .03);
  --uc-fill-strong: rgba(0, 0, 0, .04);
  --uc-tab-active: #fff;
}

html[data-theme="dark"] {
  --np-bg: #151a21;
  --np-surface: #1e242c;
  --np-surface-2: #252c36;
  --np-surface-3: #2d3540;
  --np-input-bg: #1a2027;
  --np-border: #39424e;
  --np-text: #dfe3e8;
  --np-muted: #9aa5b1;
  --np-link: #7fb3e8;
  --np-link-hover: #a8cdf3;
  --np-chrome: #22303f;

  --uc-border: rgba(255, 255, 255, .18);
  --uc-border-soft: rgba(255, 255, 255, .14);
  --uc-fill: rgba(255, 255, 255, .04);
  --uc-fill-strong: rgba(255, 255, 255, .06);
  --uc-tab-active: #252c36;

  color-scheme: dark;
}

/* ---------------------------------------------------------------- page */

html[data-theme="dark"] body {
  background-color: var(--np-bg);
  color: var(--np-text);
}

/* Content links only. Links that are really controls (buttons, navbar and
   dropdown entries, pagination) paint their own colour, so they are
   excluded — via :where(), which contributes no specificity, keeping this
   rule at one attribute + one element so Bootstrap's more specific
   component rules still win. */
html[data-theme="dark"] a:not(:where(.btn, .playbutton, .navbar-brand, .nav-link, .dropdown-item, .page-link, .badge, .alert-link, .close, .text-white)) {
  color: var(--np-link);
}

html[data-theme="dark"] a:not(:where(.btn, .playbutton, .navbar-brand, .nav-link, .dropdown-item, .page-link, .badge, .alert-link, .close, .text-white)):hover,
html[data-theme="dark"] a:not(:where(.btn, .playbutton, .navbar-brand, .nav-link, .dropdown-item, .page-link, .badge, .alert-link, .close, .text-white)):focus {
  color: var(--np-link-hover);
}

html[data-theme="dark"] hr {
  border-top-color: var(--np-border);
}

html[data-theme="dark"] .text-muted {
  color: var(--np-muted) !important;
}

html[data-theme="dark"] .bg-light,
html[data-theme="dark"] .bg-white {
  background-color: var(--np-surface-2) !important;
}

html[data-theme="dark"] .text-dark {
  color: var(--np-text) !important;
}

html[data-theme="dark"] .border,
html[data-theme="dark"] .border-top,
html[data-theme="dark"] .border-right,
html[data-theme="dark"] .border-bottom,
html[data-theme="dark"] .border-left {
  border-color: var(--np-border) !important;
}

html[data-theme="dark"] pre,
html[data-theme="dark"] kbd {
  color: var(--np-text);
}

html[data-theme="dark"] blockquote {
  color: var(--np-muted);
}

/* -------------------------------------------------------------- chrome */

html[data-theme="dark"] .navbar,
html[data-theme="dark"] .footer {
  background-color: var(--np-chrome);
}

/* ---------------------------------------------------------- containers */

html[data-theme="dark"] .card {
  background-color: var(--np-surface);
  border-color: var(--np-border);
}

html[data-theme="dark"] .card-header,
html[data-theme="dark"] .card-footer {
  background-color: var(--np-surface-2);
  border-color: var(--np-border);
}

html[data-theme="dark"] .list-group-item {
  background-color: var(--np-surface);
  border-color: var(--np-border);
  color: var(--np-text);
}

html[data-theme="dark"] .list-group-item-action:hover,
html[data-theme="dark"] .list-group-item-action:focus {
  background-color: var(--np-surface-2);
  color: var(--np-text);
}

html[data-theme="dark"] .jumbotron {
  background-color: var(--np-surface-2);
}

html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .popover {
  background-color: var(--np-surface);
  border-color: var(--np-border);
  color: var(--np-text);
}

html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer {
  border-color: var(--np-border);
}

html[data-theme="dark"] .breadcrumb {
  background-color: var(--np-surface-2);
}

/* -------------------------------------------------------------- tables */

html[data-theme="dark"] .table {
  color: var(--np-text);
}

html[data-theme="dark"] .table th,
html[data-theme="dark"] .table td,
html[data-theme="dark"] .table thead th {
  border-color: var(--np-border);
}

html[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(255, 255, 255, .035);
}

html[data-theme="dark"] .table-hover tbody tr:hover {
  background-color: rgba(255, 255, 255, .06);
  color: var(--np-text);
}

/* --------------------------------------------------------------- forms */

html[data-theme="dark"] .form-control,
html[data-theme="dark"] .custom-select {
  background-color: var(--np-input-bg);
  border-color: var(--np-border);
  color: var(--np-text);
}

html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .custom-select:focus {
  background-color: var(--np-input-bg);
  border-color: #5a7fa6;
  color: var(--np-text);
  box-shadow: 0 0 0 .2rem rgba(90, 127, 166, .35);
}

html[data-theme="dark"] .form-control::placeholder {
  color: #79828d;
}

html[data-theme="dark"] .form-control:disabled,
html[data-theme="dark"] .form-control[readonly] {
  background-color: var(--np-surface-3);
}

/* Native dropdown lists take their colours from the option elements. */
html[data-theme="dark"] select.form-control option,
html[data-theme="dark"] .custom-select option {
  background-color: var(--np-input-bg);
  color: var(--np-text);
}

html[data-theme="dark"] .input-group-text {
  background-color: var(--np-surface-3);
  border-color: var(--np-border);
  color: var(--np-text);
}

html[data-theme="dark"] .form-text,
html[data-theme="dark"] .form-check-label,
html[data-theme="dark"] label {
  color: var(--np-text);
}

html[data-theme="dark"] .form-text.text-muted {
  color: var(--np-muted) !important;
}

html[data-theme="dark"] .form-control-file,
html[data-theme="dark"] .custom-file-label {
  color: var(--np-text);
  background-color: var(--np-input-bg);
  border-color: var(--np-border);
}

/* ------------------------------------------------------------- buttons */

html[data-theme="dark"] .btn-link {
  color: var(--np-link);
}

html[data-theme="dark"] .btn-link:hover {
  color: var(--np-link-hover);
}

html[data-theme="dark"] .btn-outline-secondary {
  color: #adb5bd;
  border-color: #6c757d;
}

html[data-theme="dark"] .btn-outline-secondary:hover {
  color: #16191d;
  background-color: #adb5bd;
  border-color: #adb5bd;
}

html[data-theme="dark"] .btn-outline-primary {
  color: var(--np-link);
  border-color: #4d7ea8;
}

html[data-theme="dark"] .btn-outline-primary:hover {
  color: #fff;
  background-color: #4d7ea8;
  border-color: #4d7ea8;
}

html[data-theme="dark"] .btn-light {
  background-color: var(--np-surface-3);
  border-color: var(--np-border);
  color: var(--np-text);
}

/* ---------------------------------------------------------- pagination */

html[data-theme="dark"] .page-link {
  background-color: var(--np-surface);
  border-color: var(--np-border);
  color: var(--np-link);
}

html[data-theme="dark"] .page-link:hover {
  background-color: var(--np-surface-2);
  border-color: var(--np-border);
  color: var(--np-link-hover);
}

html[data-theme="dark"] .page-item.disabled .page-link {
  background-color: var(--np-surface);
  border-color: var(--np-border);
  color: var(--np-muted);
}

/* ----------------------------------------------------------- dropdowns */

html[data-theme="dark"] .dropdown-menu {
  background-color: var(--np-surface);
  border-color: var(--np-border);
  color: var(--np-text);
}

html[data-theme="dark"] .dropdown-item {
  color: var(--np-text);
}

html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus {
  background-color: var(--np-surface-2);
  color: var(--np-text);
}

html[data-theme="dark"] .dropdown-divider {
  border-color: var(--np-border);
}

html[data-theme="dark"] .dropdown-header {
  color: var(--np-muted);
}

/* --------------------------------------------------- alerts and badges */

html[data-theme="dark"] .alert-info {
  color: #a6dde8;
  background-color: #12333a;
  border-color: #1c4c56;
}

html[data-theme="dark"] .alert-secondary {
  color: #ccd2d8;
  background-color: #262c33;
  border-color: #3a424c;
}

html[data-theme="dark"] .alert-warning {
  color: #f2d38a;
  background-color: #3a2f10;
  border-color: #57471a;
}

html[data-theme="dark"] .alert-danger {
  color: #f0aeb5;
  background-color: #3c1a1f;
  border-color: #58272e;
}

html[data-theme="dark"] .alert-success {
  color: #a9dbb6;
  background-color: #16301e;
  border-color: #24492f;
}

html[data-theme="dark"] .alert-primary {
  color: #b4d3f0;
  background-color: #17293a;
  border-color: #244057;
}

html[data-theme="dark"] .alert a,
html[data-theme="dark"] .alert .alert-link {
  color: inherit;
  text-decoration: underline;
}

html[data-theme="dark"] .badge-light {
  background-color: var(--np-surface-3);
  color: var(--np-text);
}

html[data-theme="dark"] .close {
  color: var(--np-text);
  text-shadow: none;
}

/* ------------------------------------------------------------ nav tabs */

html[data-theme="dark"] .nav-tabs {
  border-bottom-color: var(--np-border);
}

html[data-theme="dark"] .nav-tabs .nav-link:hover,
html[data-theme="dark"] .nav-tabs .nav-link:focus {
  border-color: var(--np-border);
}

html[data-theme="dark"] .nav-tabs .nav-link.active {
  background-color: var(--np-surface);
  border-color: var(--np-border) var(--np-border) var(--np-surface);
  color: var(--np-text);
}

/* --------------------------------------- tom-select (scene tag pickers) */

html[data-theme="dark"] .ts-wrapper .ts-control,
html[data-theme="dark"] .ts-wrapper.single .ts-control {
  background: var(--np-input-bg);
  border-color: var(--np-border);
  color: var(--np-text);
}

html[data-theme="dark"] .ts-wrapper .ts-control > input {
  color: var(--np-text);
}

html[data-theme="dark"] .ts-dropdown {
  background: var(--np-surface);
  border-color: var(--np-border);
  color: var(--np-text);
}

html[data-theme="dark"] .ts-dropdown .active {
  background-color: var(--np-surface-3);
  color: var(--np-text);
}

html[data-theme="dark"] .ts-dropdown .optgroup-header {
  background: var(--np-surface-2);
  color: var(--np-muted);
}

html[data-theme="dark"] .ts-wrapper.multi .ts-control > div {
  background: var(--np-surface-3);
  border-color: var(--np-border);
  color: var(--np-text);
}

html[data-theme="dark"] .ts-wrapper.plugin-remove_button .item .remove {
  border-color: var(--np-border);
  color: var(--np-text);
}

/* -------------------------------------------------------- theme toggle */

.theme-toggle {
  background: none;
  border: 0;
  line-height: 1;
  padding: .5rem .75rem;
  cursor: pointer;
}

/* Beat `.navbar-dark .navbar-nav .nav-link`, which dims it to 50% white. */
.navbar-dark .navbar-nav .nav-link.theme-toggle {
  color: rgba(255, 255, 255, .8);
  font-size: 1.35rem;
}

.navbar-dark .navbar-nav .nav-link.theme-toggle:hover,
.navbar-dark .navbar-nav .nav-link.theme-toggle:focus {
  color: #fff;
}

.theme-toggle:focus {
  outline: 0;
  box-shadow: 0 0 0 .15rem rgba(255, 255, 255, .4);
  border-radius: .25rem;
}

/* Show the icon for the theme the button would switch *to*. */
html[data-theme="dark"] .theme-toggle-moon,
html[data-theme="light"] .theme-toggle-sun {
  display: none;
}