/* theme.park React NPM UI, pinned to c50c30e23da11b7a0383d69ef81aee77100fdd51. */

*::-webkit-input-placeholder {
  color: var(--text-muted) !important;
}

*:focus::-webkit-input-placeholder {
  color: var(--text-hover) !important;
}

/* Firefox < 19 */
*:-moz-placeholder {
  color: var(--text-muted) !important;
}

*:focus:-moz-placeholder {
  color: var(--text-hover) !important;
}

/* Firefox > 19 */
*::-moz-placeholder {
  color: var(--text-muted) !important;
}

*:focus::-moz-placeholder {
  color: var(--text-hover) !important;
}

/* Internet Explorer 10 */
*:-ms-input-placeholder {
  color: var(--text-muted) !important;
}

*:focus:-ms-input-placeholder {
  color: var(--text-hover) !important;
}

:root {
    --transparency-dark-05: rgba(0, 0, 0, .05);
    --transparency-dark-10: rgba(0, 0, 0, .10);
    --transparency-dark-15: rgba(0, 0, 0, .15);
    --transparency-dark-25: rgba(0, 0, 0, .25);
    --transparency-dark-35: rgba(0, 0, 0, .35);
    --transparency-dark-40: rgba(0, 0, 0, .40);
    --transparency-dark-45: rgba(0, 0, 0, .45);
    --transparency-dark-50: rgba(0, 0, 0, .50); 
    --transparency-dark-55: rgba(0, 0, 0, .55);
    --transparency-dark-60: rgba(0, 0, 0, .60);
    --transparency-dark-65: rgba(0, 0, 0, .65);
    --transparency-dark-70: rgba(0, 0, 0, .70);
    --transparency-dark-75: rgba(0, 0, 0, .75);
    --transparency-dark-80: rgba(0, 0, 0, .80);
    --transparency-dark-85: rgba(0, 0, 0, .85);
    --transparency-dark-90: rgba(0, 0, 0, .90);
    --transparency-light-05: rgba(255, 255, 255, .05);
    --transparency-light-10: rgba(255, 255, 255, .10);
    --transparency-light-15: rgba(255, 255, 255, .15);
    --transparency-light-20: rgba(255, 255, 255, .20);
    --transparency-light-25: rgba(255, 255, 255, .25);
    --transparency-light-30: rgba(255, 255, 255, .30);
    --transparency-light-35: rgba(255, 255, 255, .35);
    --transparency-light-45: rgba(255, 255, 255, .45);
    --transparency-light-50: rgba(255, 255, 255, .50);
    --transparency-light-55: rgba(255, 255, 255, .55);
    --transparency-light-95: rgba(255, 255, 255, .95);
    }

/* Nginx Proxy Manager's React / Tabler UI. */

/* NPM changes its native palette on the root and body. Both modes use the
   selected theme.park palette; status colors retain their Tabler meanings. */
:root,
:root[data-bs-theme],
body[data-theme] {
    --tblr-body-color: var(--text);
    --tblr-heading-color: var(--text-hover);
    --tblr-emphasis-color: var(--text-hover);
    --tblr-secondary: var(--text-muted);
    --tblr-secondary-color: var(--text-muted);
    --tblr-secondary-bg: var(--transparency-dark-15);
    --tblr-tertiary-bg: var(--transparency-dark-10);
    --tblr-tertiary-color: var(--text-muted);
    --tblr-muted: var(--text-muted);
    --tblr-icon-color: var(--text-muted);
    --tblr-primary: rgb(var(--accent-color));
    --tblr-primary-rgb: var(--accent-color);
    --tblr-primary-fg: var(--button-text);
    --tblr-primary-darken: var(--button-color-hover);
    --tblr-link-color: var(--link-color);
    --tblr-link-hover-color: var(--link-color-hover);
    --tblr-bg-surface: var(--transparency-dark-25);
    --tblr-bg-surface-primary: var(--transparency-dark-25);
    --tblr-bg-surface-secondary: var(--transparency-dark-15);
    --tblr-bg-surface-tertiary: var(--transparency-dark-10);
    --tblr-bg-forms: var(--transparency-dark-15);
    --tblr-bg-surface-dark: var(--transparency-dark-25);
    --tblr-border-color: color-mix(in srgb, var(--text) 22%, transparent);
    --tblr-border-color-translucent: var(--tblr-border-color);
    --tblr-border-dark-color: var(--tblr-border-color);
    --tblr-border-active-color: rgb(var(--accent-color));
    --tblr-active-bg: rgba(var(--accent-color), .15);
    --tblr-disabled-bg: var(--transparency-dark-10);
    --tblr-disabled-color: color-mix(in srgb, var(--text) 45%, transparent);
    --tblr-code-color: var(--text);
    --tblr-code-bg: var(--transparency-dark-25);
}

body {
    background: var(--main-bg-color);
    background-attachment: fixed;
    color: var(--text);
}

::selection {
    background: rgb(var(--accent-color));
    color: var(--label-text-color);
}

a:not(.btn, .badge, .dropdown-item),
.navbar .nav-link {
    color: var(--link-color);
}

a:not(.btn, .badge, .dropdown-item):is(:hover, :focus-visible),
.navbar .nav-link:is(:hover, :focus-visible) {
    color: var(--link-color-hover);
}

/* Tabler marks link-secondary colors !important, including on hover. */
.footer a.link-secondary {
    color: var(--link-color) !important;
}

.footer a.link-secondary:is(:hover, :focus-visible) {
    color: var(--link-color-hover) !important;
}

.navbar,
.footer {
    background: var(--transparency-dark-25);
    color: var(--text);
}

.navbar {
    --tblr-navbar-color: var(--link-color);
    --tblr-navbar-hover-color: var(--link-color-hover);
    --tblr-navbar-active-color: var(--text-hover);
    --tblr-navbar-brand-color: var(--text-hover);
    --tblr-navbar-brand-hover-color: var(--link-color-hover);
}

.navbar-toggler-icon {
    background-image: linear-gradient(var(--text), var(--text)),
        linear-gradient(var(--text), var(--text)), linear-gradient(var(--text), var(--text));
    background-size: 75% 2px;
    background-position: center 25%, center 50%, center 75%;
    background-repeat: no-repeat;
}

.nav-tabs {
    --tblr-nav-tabs-link-active-bg: var(--transparency-dark-15);
    --tblr-nav-tabs-link-active-color: var(--text-hover);
    --tblr-nav-tabs-link-active-border-color: rgb(var(--accent-color));
    background: transparent;
}

.nav-link {
    color: var(--text-muted);
}

.nav-tabs .nav-link:is(:hover, :focus-visible) {
    color: var(--link-color-hover);
    border-color: var(--accent-color-hover);
}

.card,
.table {
    color: var(--text);
}

.table {
    --tblr-table-hover-bg: var(--transparency-dark-10);
    --tblr-table-hover-color: var(--text-hover);
    --tblr-table-striped-bg: var(--transparency-dark-10);
}

.table thead th {
    background: var(--transparency-dark-15);
    color: var(--text-muted);
}

/* An opaque menu must cover the table or dialog behind it. */
.dropdown-menu {
    --tblr-dropdown-link-hover-bg: var(--transparency-dark-15);
    --tblr-dropdown-link-hover-color: var(--text-hover);
    --tblr-dropdown-header-color: var(--text-muted);
    background: var(--drop-down-menu-bg);
    color: var(--text);
}

.modal-content {
    background: var(--modal-bg-color);
    color: var(--text);
    border-color: var(--tblr-border-color);
}

.modal-header {
    background: var(--modal-header-color);
    color: var(--text-hover);
}

.modal-footer {
    background: var(--modal-footer-color);
}

.modal-header,
.modal-footer,
.modal-content {
    background-attachment: fixed;
}

/* The editor's nested card must not darken or hide the modal body palette. */
.modal-body > .card,
.modal-body > form > .card {
    background: transparent;
}

.btn-close {
    color: var(--text);
    filter: none;
    opacity: .8;
}

.btn-close:hover {
    color: var(--text-hover);
    opacity: 1;
}

.btn {
    --tblr-btn-focus-shadow-rgb: var(--accent-color);
}

/* Save/Add are lime in NPM, while danger/warning/success actions keep theirs. */
.btn-primary:not(:where(.btn-red, .btn-orange, .btn-danger, .btn-warning, .btn-success, .btn-info)),
.btn-lime,
.btn.bg-lime {
    --tblr-btn-bg: var(--button-color);
    --tblr-btn-color: var(--button-text);
    --tblr-btn-hover-bg: var(--button-color-hover);
    --tblr-btn-hover-color: var(--button-text-hover);
    --tblr-btn-active-bg: var(--button-color-hover);
    --tblr-btn-active-color: var(--button-text-hover);
    --tblr-btn-disabled-bg: var(--button-color);
    --tblr-btn-disabled-color: var(--button-text);
    background-color: var(--tblr-btn-bg) !important;
    color: var(--tblr-btn-color);
}

.btn-primary:not(:where(.btn-red, .btn-orange, .btn-danger, .btn-warning, .btn-success, .btn-info)):hover,
.btn-lime:hover,
.btn.bg-lime:hover,
.btn-primary:not(:where(.btn-red, .btn-orange, .btn-danger, .btn-warning, .btn-success, .btn-info)):active,
.btn-lime:active,
.btn.bg-lime:active {
    background-color: var(--button-color-hover) !important;
    color: var(--button-text-hover);
}

.btn.btn-ghost-dark,
.btn.btn-ghost-light,
.btn.btn-action {
    --tblr-btn-bg: transparent;
    --tblr-btn-color: var(--text-muted);
    --tblr-btn-hover-color: var(--text-hover);
    --tblr-btn-hover-bg: var(--transparency-dark-15);
    /* NPM's locale and appearance modules set their icon colors !important. */
    color: var(--text-muted) !important;
}

.btn.btn-ghost-dark:hover,
.btn.btn-ghost-light:hover,
.btn.btn-action:hover {
    color: var(--text-hover) !important;
}

:where(a, button, input, select, textarea):focus-visible {
    outline: 2px solid rgb(var(--accent-color));
    outline-offset: 2px;
}

.form-control:focus:not(.is-invalid):not(.is-valid),
.form-select:focus:not(.is-invalid):not(.is-valid) {
    color: var(--text-hover);
    background-color: var(--transparency-dark-25);
    border-color: rgb(var(--accent-color));
    box-shadow: 0 0 0 .2rem rgba(var(--accent-color), .2);
}

select option {
    background: var(--drop-down-menu-bg);
    color: var(--text);
}

.form-control:disabled,
.form-control[readonly],
.form-select:disabled {
    color: var(--text-muted);
    background-color: var(--tblr-disabled-bg);
}

.form-check-input {
    border-color: color-mix(in srgb, var(--text) 45%, transparent);
}

.form-check-input:checked {
    background-color: var(--button-color);
}

.form-switch .form-check-input {
    background-image: radial-gradient(circle, var(--text) 0 40%, transparent 45%);
}

.form-switch .form-check-input:checked {
    background-image: radial-gradient(circle, var(--button-text) 0 40%, transparent 45%);
}

.react-select-container .react-select__control {
    background: var(--tblr-bg-forms);
    color: var(--text);
    border-color: var(--tblr-border-color);
}

.react-select-container .react-select__control.react-select__control--is-focused,
.react-select-container .react-select__control:hover {
    border-color: rgb(var(--accent-color));
    box-shadow: 0 0 0 1px rgb(var(--accent-color));
}

.react-select-container .react-select__menu {
    background: var(--drop-down-menu-bg);
    color: var(--text);
    border: 1px solid var(--tblr-border-color);
}

.react-select-container .react-select__placeholder,
.react-select-container .react-select__indicator {
    color: var(--text-muted);
}

.react-select-container .react-select__indicator:hover {
    color: var(--text-hover);
}

.react-select-container .react-select__indicator-separator {
    background: var(--tblr-border-color);
}

.react-select-container .react-select__control .react-select__multi-value {
    background: rgb(var(--accent-color));
    color: var(--label-text-color);
}

.react-select-container .react-select__control .react-select__multi-value .react-select__multi-value__label {
    color: var(--label-text-color) !important;
}

.react-select-container .react-select__multi-value__remove {
    color: var(--label-text-color);
}

.react-select-container .react-select__multi-value__remove:hover {
    color: var(--label-text-color);
    background: var(--accent-color-hover);
}

/* The editor supplies a dark syntax palette even in NPM's light mode. */
.w-tc-editor[data-color-mode] {
    --color-fg-default: var(--text);
    --color-canvas-subtle: var(--transparency-dark-25);
    --color-prettylights-syntax-comment: var(--text-muted);
    --color-prettylights-syntax-entity-tag: var(--link-color-hover);
    --color-prettylights-syntax-entity: var(--text-hover);
    --color-prettylights-syntax-sublimelinter-gutter-mark: var(--text);
    --color-prettylights-syntax-constant: var(--link-color-hover);
    --color-prettylights-syntax-string: var(--link-color-hover);
    --color-prettylights-syntax-string-regexp: var(--link-color-hover);
    --color-prettylights-syntax-keyword: var(--text-hover);
    --color-prettylights-syntax-markup-bold: var(--text-hover);
    color: var(--text);
    border: 1px solid var(--tblr-border-color);
}

.Toastify__toast {
    background: var(--drop-down-menu-bg);
    color: var(--text);
}

.Toastify__close-button {
    color: var(--text);
}

/* Floating labels replace placeholders; the shared placeholder import must
   not paint a second label beneath them. */
.form-floating > .form-control::placeholder,
.form-floating > .form-control:focus::placeholder {
    color: transparent !important;
}

.form-check-input.bg-lime:checked {
    background-color: var(--button-color) !important;
}

.w-tc-editor pre,
.w-tc-editor code {
    color: var(--text);
    background: transparent;
}

.form-control::file-selector-button {
    color: var(--button-text);
    background: var(--button-color);
}

.form-control:hover:not(:disabled):not([readonly])::file-selector-button {
    color: var(--button-text-hover);
    background: var(--button-color-hover);
}

.form-floating > label,
.form-floating > :disabled ~ label {
    color: var(--text-muted);
}

/* NPM renders a Tabler toast inside React Toastify's transparent wrapper. */
.Toastify__toast .toast {
    --tblr-toast-color: var(--text);
    --tblr-toast-header-color: var(--text-hover);
    --tblr-toast-header-bg: var(--transparency-dark-15);
    background: var(--drop-down-menu-bg);
}

:root {
  --main-bg-color: #1f1f1f;

  --modal-bg-color: #333;
  --modal-header-color: #232323;
  --modal-footer-color: #232323;

  --drop-down-menu-bg: #1b1b1b;

  --button-color: #2cabe3;
  --button-color-hover: #298fbc;
  --button-text: #eee;
  --button-text-hover: #fff;

  --accent-color:  44, 171, 227;
  --accent-color-hover: rgb(var(--accent-color),.8);
  --link-color: #2cabe3;
  --link-color-hover: #3cc5ff;
  --label-text-color: #fff;
    
  --text:#96a2b4;
  --text-hover: #fff;
  --text-muted: #999;

  /*Specials*/
  --arr-queue-color: #2cabe3; /* Servarr apps + Bazarr*/
  --plex-poster-unwatched: #2cabe3;
  --petio-spinner: invert(65%) sepia(83%) saturate(2026%) hue-rotate(167deg) brightness(90%) contrast(97%);/* Made with https://codepen.io/jsm91/embed/ZEEawyZ */
  --gitea-color-primary-dark-4: 44, 171, 227;
  --overseerr-gradient: linear-gradient(180deg, rgba(31, 31, 31, 0.17) 0%, rgba(31, 31, 31) 100%);
}