/* Uptime Kuma's own pages (dashboard, settings, login) in the monz.online
   style (server-conf/brand): black ground, white text, depth only from
   hairlines and white at low opacity, round corners, the system font.
   Uptime Kuma's green accent becomes white; a failure stays red, so it can
   be seen at a glance. Loaded on every page through the patched index.html
   (uptime-kuma.yaml, init container "theme"); the status page has its own
   rules on top (../style.css). */

:root {
  --ink: #ffffff;
  --ground: #000000;
  --hairline: rgba(255, 255, 255, 0.2);
  --track: rgba(255, 255, 255, 0.12);
  --muted: rgba(255, 255, 255, 0.7);
  --raised: rgba(255, 255, 255, 0.05);
  --down: #ff453a;
  --bs-primary: #ffffff;
  --bs-primary-rgb: 255, 255, 255;
  --bs-link-color: #ffffff;
  --bs-link-hover-color: rgba(255, 255, 255, 0.7);
  --bs-body-font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

body, .dark, body.dark, .dark body, #app {
  background: var(--ground) !important;
  color: var(--ink);
  font-family: var(--bs-body-font-family) !important;
  -webkit-font-smoothing: antialiased;
}

/* header and the bottom bar on phones */
.dark header, header {
  background: var(--ground) !important;
  border-bottom: 1px solid var(--hairline) !important;
}
.dark .bottom-nav {
  background: var(--ground) !important;
  border-top: 1px solid var(--hairline);
}
/* the name next to the logo */
header .title {
  font-size: 0 !important;
}
header .title::after {
  content: "monz.online Uptime";
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink);
}

/* cards, lists, dialogs, menus */
.shadow-box, .dark .shadow-box {
  background: var(--raised) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: 20px !important;
  box-shadow: none !important;
}
.dark .monitor-list .item, .monitor-list .item {
  border-radius: 16px !important;
}
.dark .monitor-list .item:hover, .dark .monitor-list .item.active,
.monitor-list .item:hover, .monitor-list .item.active {
  background: var(--track) !important;
}
.dark .modal-content, .dark .dropdown-menu, .modal-content, .dropdown-menu {
  background: #0a0a0a !important;
  border: 1px solid var(--hairline) !important;
  border-radius: 20px !important;
  color: var(--ink) !important;
}
.dark .dropdown-item:hover, .dark .dropdown-item.active, .dropdown-item.active {
  background: var(--track) !important;
  color: var(--ink) !important;
}
.dark .list-group-item, .list-group-item {
  background: transparent !important;
  border-color: var(--hairline) !important;
  color: var(--ink) !important;
}
.list-group-item.active, .nav-pills .nav-link.active, .page-item.active .page-link {
  background: var(--track) !important;
  border-color: var(--hairline) !important;
  color: var(--ink) !important;
}

/* text and links */
a, .link-primary, .text-primary, .dark a {
  color: var(--ink) !important;
}
.text-muted, .dark .text-muted, small {
  color: var(--muted) !important;
}

/* buttons: primary is white with black text */
.btn {
  border-radius: 16px !important;
}
.btn-primary, .btn-primary:disabled, .btn-primary.disabled {
  background: var(--ink) !important;
  border-color: var(--ink) !important;
  color: var(--ground) !important;
}
.btn-primary:hover, .btn-primary:focus {
  background: rgba(255, 255, 255, 0.85) !important;
  border-color: rgba(255, 255, 255, 0.85) !important;
  color: var(--ground) !important;
}
.btn-outline-primary, .dark .btn-outline-normal {
  color: var(--ink) !important;
  border-color: var(--hairline) !important;
  background: transparent !important;
}
.btn-outline-primary:hover, .btn-outline-primary.active,
.dark .btn-outline-normal:hover, .dark .btn-outline-normal.active {
  background: var(--track) !important;
  color: var(--ink) !important;
}
.btn-danger, .bg-danger, .badge.bg-danger {
  background: var(--down) !important;
  border-color: var(--down) !important;
  color: var(--ink) !important;
}

/* badges: uptime percentages, states */
.badge.bg-primary, .bg-primary {
  background: var(--ink) !important;
  color: var(--ground) !important;
}
.badge.bg-maintenance, .badge.bg-secondary, .bg-maintenance {
  background: var(--track) !important;
  color: var(--ink) !important;
}
.badge {
  border-radius: 16px !important;
}

/* forms */
.dark .form-control, .dark .form-select, .form-control, .form-select,
.dark .multiselect__tags, .dark .multiselect__input, .dark .multiselect__single {
  background-color: var(--ground) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: 12px !important;
  color: var(--ink) !important;
}
.form-control:focus, .form-select:focus {
  border-color: var(--ink) !important;
  box-shadow: 0 0 0 1px var(--ink) !important;
}
.form-check-input:checked {
  background-color: var(--ink) !important;
  border-color: var(--ink) !important;
}
.form-check-input:checked[type=checkbox] {
  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='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e") !important;
}
.form-switch .form-check-input:checked {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23000'/%3e%3c/svg%3e") !important;
}
.dark .multiselect__content-wrapper {
  background: #0a0a0a !important;
  border-color: var(--hairline) !important;
}
.multiselect__option--highlight, .multiselect__option--highlight::after,
.multiselect__tag {
  background: var(--ink) !important;
  color: var(--ground) !important;
}

/* heartbeat bars: up white, down red, the rest grey */
.hp-bar-big .beat {
  background-color: var(--ink) !important;
}
.hp-bar-big .beat.empty, .dark .hp-bar-big .beat.empty {
  background-color: var(--track) !important;
}
.hp-bar-big .beat.down {
  background-color: var(--down) !important;
}
.hp-bar-big .beat.pending, .hp-bar-big .beat.maintenance {
  background-color: rgba(255, 255, 255, 0.45) !important;
}

.alert-success {
  background: var(--raised) !important;
  border: 1px solid var(--hairline) !important;
  color: var(--ink) !important;
}
.spinner, .spinner-border {
  color: var(--ink) !important;
}

::selection {
  background: var(--ink);
  color: var(--ground);
}