/* Spyur brand palette on top of Vuexy's theme-default (loaded after it).

   Surfaces (page, sidebar, navbar, cards) keep Vuexy's own backgrounds;
   the palette only recolours text, icons and the accents that used to be
   Vuexy purple. Yellow is only ever a background under black text —
   never text itself, which would be unreadable on white.

   Vuexy's own purple has already been swapped for the palette inside the
   vendor CSS by scripts/recolor-vuexy.mjs; this file holds the choices a
   blanket swap can't make (text/icon colours, black primary buttons in
   light mode, active items). Dark mode is Vuexy's "dark-style" class on
   <html>; there, text stays Vuexy's light grey and yellow is the accent. */

:root {
  --spyur-yellow: #ffe31c;
  --spyur-yellow-tile: #fbe421;
  --spyur-page: #fffec9;
  --spyur-ink: #0f0f0f;
  --spyur-button: #272423;
  --spyur-muted-text: #6e6e6e;
  --spyur-white: #ffffff;

  --bs-primary: var(--spyur-button);
  --bs-primary-rgb: 39, 36, 35;
}

/* ---------- Text & icons (light mode) ---------- */

html:not(.dark-style) body {
  color: var(--spyur-button);
}

html:not(.dark-style) h1,
html:not(.dark-style) h2,
html:not(.dark-style) h3,
html:not(.dark-style) h4,
html:not(.dark-style) h5,
html:not(.dark-style) h6,
html:not(.dark-style) .card-header,
html:not(.dark-style) .card-title,
html:not(.dark-style) .form-label,
html:not(.dark-style) .table th {
  color: var(--spyur-ink);
}

html:not(.dark-style) .text-muted {
  color: var(--spyur-muted-text) !important;
}

html:not(.dark-style) a:not(.btn),
html:not(.dark-style) a:not(.btn):hover {
  color: var(--spyur-ink);
}

html:not(.dark-style) .text-primary {
  color: var(--spyur-ink) !important;
}

html:not(.dark-style) a:not(.btn):hover {
  text-decoration-color: var(--spyur-yellow);
}

/* Sidebar items and icons */
html:not(.dark-style) .bg-menu-theme .menu-link,
html:not(.dark-style) .bg-menu-theme .menu-text,
html:not(.dark-style) .bg-menu-theme .app-brand-text,
html:not(.dark-style) .bg-menu-theme .layout-menu-toggle {
  color: var(--spyur-button) !important;
}

html:not(.dark-style) .bg-menu-theme .menu-link:hover,
html:not(.dark-style) .bg-menu-theme .menu-link:focus {
  color: var(--spyur-ink) !important;
}

/* Navbar icons */
html:not(.dark-style) .bg-navbar-theme .navbar-nav > .nav-link,
html:not(.dark-style) .bg-navbar-theme .navbar-nav > .nav-item > .nav-link,
html:not(.dark-style) .bg-navbar-theme .navbar-nav > .nav-item > .nav-link:hover,
html:not(.dark-style) .bg-navbar-theme .navbar-nav .show > .nav-link {
  color: var(--spyur-ink);
}

/* ---------- Active menu item ---------- */

.bg-menu-theme.menu-vertical .menu-item.active > .menu-link:not(.menu-toggle),
[dir='rtl'] .bg-menu-theme.menu-vertical .menu-item.active > .menu-link:not(.menu-toggle) {
  background: var(--spyur-yellow) !important;
  box-shadow: none;
  color: var(--spyur-ink) !important;
}

/* Active/selected items are always black text (and icon) on yellow, in
   both light and dark mode. */
.bg-menu-theme .menu-item.active > .menu-link:not(.menu-toggle) *,
.dropdown-item.active,
.dropdown-item.active *,
.nav-pills .nav-link.active * {
  color: var(--spyur-ink) !important;
}

.layout-wrapper:not(.layout-horizontal) .bg-menu-theme .menu-inner > .menu-item.active:before {
  background: var(--spyur-yellow);
}

.bg-primary {
  background-color: var(--spyur-yellow) !important;
  color: var(--spyur-ink) !important;
}

.border-primary {
  border-color: var(--spyur-ink) !important;
}

/* ---------- Buttons ---------- */

.btn-primary,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary.disabled,
.btn-primary:disabled {
  color: var(--spyur-white) !important;
  background-color: var(--spyur-button) !important;
  border-color: var(--spyur-button) !important;
}

.btn-primary:hover,
.btn-check:checked + .btn-primary,
.btn-primary:active,
.btn-primary.active,
.btn-primary.show.dropdown-toggle {
  color: var(--spyur-yellow) !important;
  background-color: var(--spyur-ink) !important;
  border-color: var(--spyur-ink) !important;
}

.btn-outline-primary,
.btn-outline-primary:focus {
  color: var(--spyur-ink) !important;
  border-color: var(--spyur-ink) !important;
  background: transparent;
}

.btn-outline-primary:hover,
.btn-outline-primary:active,
.btn-outline-primary.active {
  color: var(--spyur-ink) !important;
  background-color: var(--spyur-yellow) !important;
  border-color: var(--spyur-ink) !important;
}

.btn-label-primary,
.btn-label-primary:focus,
.btn-label-primary:hover,
.btn-label-primary:active {
  color: var(--spyur-ink) !important;
  background: var(--spyur-yellow-tile) !important;
}

.bg-label-primary {
  background-color: var(--spyur-yellow-tile) !important;
  color: var(--spyur-ink) !important;
}

/* ---------- Forms ---------- */

.form-control:focus,
.form-select:focus,
.input-group:focus-within .form-control,
.input-group:focus-within .input-group-text {
  border-color: var(--spyur-ink) !important;
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  box-shadow: 0 0 0 0.2rem rgba(255, 227, 28, 0.6);
}

.form-check-input:focus {
  border-color: var(--spyur-ink);
}

.form-check-input:checked,
.form-check-input[type='checkbox']:indeterminate {
  background-color: var(--spyur-ink);
  border-color: var(--spyur-ink);
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label {
  color: var(--spyur-ink);
}

/* ---------- Menus, navs, pagination ---------- */

.dropdown-item:not(.disabled).active,
.dropdown-item:not(.disabled):active {
  background-color: var(--spyur-yellow);
  color: var(--spyur-ink) !important;
}

.nav-pills .nav-link.active,
.nav-pills .nav-link.active:hover,
.nav-pills .nav-link.active:focus {
  background-color: var(--spyur-yellow);
  color: var(--spyur-ink);
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-link.active:hover,
.nav-tabs .nav-link.active:focus {
  box-shadow: 0 -2px 0 var(--spyur-ink) inset;
}

.page-item.active .page-link,
.page-item > .page-link.active,
.pagination li.active > a:not(.page-link) {
  border-color: var(--spyur-yellow);
  background-color: var(--spyur-yellow);
  color: var(--spyur-ink) !important;
}

.list-group-item-action.active,
.list-group-item-action.active:hover,
.list-group-item-action.active:focus {
  border-color: var(--spyur-ink);
  background-color: var(--spyur-yellow);
  color: var(--spyur-ink);
}

.progress-bar {
  background-color: var(--spyur-ink);
}

.alert-primary {
  background-color: var(--spyur-page);
  border-color: var(--spyur-yellow);
  color: var(--spyur-ink);
}

/* ---------- Dark mode accents ----------
   Black accents would vanish on dark surfaces, so they flip to yellow
   (with black text wherever yellow is a fill). */

html.dark-style a:not(.btn):not(.menu-link):not(.nav-link):not(.dropdown-item),
html.dark-style .text-primary {
  color: var(--spyur-yellow) !important;
}

html.dark-style .btn-primary,
html.dark-style .btn-primary:focus,
html.dark-style .btn-primary.disabled,
html.dark-style .btn-primary:disabled {
  color: var(--spyur-ink) !important;
  background-color: var(--spyur-yellow) !important;
  border-color: var(--spyur-yellow) !important;
}

html.dark-style .btn-primary:hover,
html.dark-style .btn-primary:active,
html.dark-style .btn-primary.active {
  color: var(--spyur-ink) !important;
  background-color: var(--spyur-yellow-tile) !important;
  border-color: var(--spyur-yellow-tile) !important;
}

html.dark-style .btn-outline-primary,
html.dark-style .btn-outline-primary:focus {
  color: var(--spyur-yellow) !important;
  border-color: var(--spyur-yellow) !important;
}

html.dark-style .btn-outline-primary:hover,
html.dark-style .btn-outline-primary:active {
  color: var(--spyur-ink) !important;
  background-color: var(--spyur-yellow) !important;
}

html.dark-style .form-control:focus,
html.dark-style .form-select:focus,
html.dark-style .input-group:focus-within .form-control,
html.dark-style .input-group:focus-within .input-group-text,
html.dark-style .form-check-input:focus {
  border-color: var(--spyur-yellow) !important;
}

html.dark-style .form-check-input:checked,
html.dark-style .form-check-input[type='checkbox']:indeterminate {
  background-color: var(--spyur-yellow);
  border-color: var(--spyur-yellow);
}

/* Vuexy's checkmark is white, which vanishes on yellow; draw it in ink. */
html.dark-style .form-check-input[type='checkbox']:checked {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%230f0f0f' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

html.dark-style .progress-bar {
  background-color: var(--spyur-yellow);
}

html.dark-style .alert-primary {
  background-color: rgba(255, 227, 28, 0.12);
  border-color: rgba(255, 227, 28, 0.4);
  color: var(--spyur-yellow);
}