/* =========================================
   Palette
   ========================================= */
:root {
  --red:     hsl(20, 51%, 46%);
  --orange:  hsl(32, 45%, 43%);
  --yellow:  hsl(40, 46%, 43%);
  --green:   hsl(140, 36%, 44%);
  --cyan:    hsl(183, 70%, 37%);
  --blue:    hsl(183, 34%, 42%);
  --violet:  hsl(199, 29%, 47%);
  --magenta: hsl(21, 12%, 47%);

  --grey-10: #1a1a1a;
  --grey-12: #1e1e1e;
  --grey-15: #252526;
  --grey-18: #2d2d2d;
  --grey-20: #333333;
  --grey-28: #474747;
  --grey-43: #6e6e6e;
  --grey-59: #969696;
  --grey-76: #c1c1c1;
  --grey-82: #d2d2d2;
  --grey-92: #ececec;
  --grey-96: #f5f5f5;
  --white:   #ffffff;
}

/* =========================================
   Dark Theme
   ========================================= */
[data-bs-theme="dark"] {
  --accent-color: #2eaadd;
  --bs-body-bg: var(--grey-12);
  --bs-body-color: var(--grey-82);
  --bs-emphasis-color: var(--grey-92);
  --bs-secondary-color: var(--grey-59);
  --bs-secondary-bg: var(--grey-18);
  --bs-tertiary-bg: var(--grey-15);
  --bs-border-color: var(--grey-28);
  --bs-link-color: var(--blue);
  --output-bg: var(--grey-10);
  --btn-hover-bg: var(--grey-28);
  --dropdown-bg: var(--bs-secondary-bg);
  --scrollbar-thumb: var(--grey-28);
  --warning-color: var(--yellow);
  --focus-shadow: color-mix(in srgb, var(--accent-color) 25%, var(--bs-body-bg));
  scrollbar-color: var(--scrollbar-thumb) var(--bs-body-bg);
}

/* =========================================
   Light Theme
   ========================================= */
[data-bs-theme="light"] {
  --accent-color: #1b5d95;
  --bs-body-bg: var(--white);
  --bs-body-color: var(--grey-20);
  --bs-emphasis-color: var(--grey-12);
  --bs-secondary-color: var(--grey-43);
  --bs-secondary-bg: var(--grey-92);
  --bs-tertiary-bg: var(--grey-96);
  --bs-border-color: var(--grey-82);
  --bs-link-color: var(--blue);
  --output-bg: var(--grey-92);
  --btn-hover-bg: var(--grey-82);
  --dropdown-bg: var(--bs-body-bg);
  --scrollbar-thumb: var(--grey-76);
  --warning-color: var(--yellow);
  --focus-shadow: color-mix(in srgb, var(--accent-color) 25%, var(--bs-body-bg));
  scrollbar-color: var(--scrollbar-thumb) var(--bs-body-bg);
}

/* =========================================
   Base elements
   ========================================= */

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

[data-bs-theme="dark"] .footer a {
  color: color-mix(in srgb, var(--accent-color) 75%, white);
}

[data-bs-theme="light"] .footer a {
  color: color-mix(in srgb, var(--accent-color) 85%, black);
}

a {
  text-decoration: none;
}

a:hover {
  filter: brightness(1.2);
  text-decoration: underline;
}

pre, code {
  color: var(--bs-body-color);
}

code.inline-code {
  font-size: 0.75rem;
  border: 1px solid var(--bs-border-color);
  background: var(--bs-body-bg);
  padding: 0.5rem;
  white-space: nowrap;
  border-radius: 6px;
}

code.code-snippet {
  display: block;
  font-size: 0.75rem;
  border: 1px solid var(--bs-border-color);
  background: var(--bs-body-bg);
  padding: 0.5rem;
  white-space: pre-wrap;
  word-break: break-all;
  border-radius: 6px;
}

.text-muted {
  color: var(--bs-secondary-color) !important;
}

.warning-text {
  color: var(--warning-color);
}

.heart-accent { color: var(--red); }

/* =========================================
   Forms & buttons
   ========================================= */

.form-control,
.form-select {
  background-color: var(--bs-body-bg);
  border-color: var(--bs-border-color);
  color: var(--bs-body-color);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 0.25rem var(--focus-shadow);
}

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

.form-check-input:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 0.25rem var(--focus-shadow);
}

.btn-secondary {
  background-color: var(--bs-border-color);
  border-color: var(--bs-border-color);
  color: var(--bs-body-color);
}

.btn-secondary:hover {
  background-color: var(--btn-hover-bg);
  border-color: var(--btn-hover-bg);
  color: var(--bs-body-color);
}

.btn-xs, .btn-group-xs > .btn {
  padding: 0.15rem 0.4rem;
  font-size: 0.75rem;
  line-height: 1.3;
}

.htmx-indicator {
  display: none;
}
.htmx-request .htmx-indicator {
  display: inline-block;
}

/* =========================================
   Tom Select (DNS resolver picker)
   ========================================= */

.input-group > .ts-wrapper {
  flex: 1 1 auto;
  min-width: 0;
}

.input-group > .ts-wrapper:not(:first-child) .ts-control {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  margin-left: -1px;
}



.ts-control {
  background-color: var(--bs-body-bg) !important;
  border-color: var(--bs-border-color) !important;
  color: var(--bs-body-color) !important;
}

.ts-control:focus-within {
  border-color: var(--accent-color) !important;
  box-shadow: 0 0 0 0.25rem var(--focus-shadow) !important;
}

.ts-control input {
  color: var(--bs-body-color) !important;
}

.ts-dropdown {
  background-color: var(--dropdown-bg) !important;
  border-color: var(--bs-border-color) !important;
  color: var(--bs-body-color) !important;
}

.ts-dropdown .active {
  background-color: var(--accent-color) !important;
  color: var(--white) !important;
}

.ts-control .item {
  background-color: var(--accent-color) !important;
  color: var(--white) !important;
  border-color: var(--bs-border-color) !important;
}

/* =========================================
   Cards
   ========================================= */

.card { border-radius: 6px; }
.card-header { background-color: var(--bs-secondary-bg); border-bottom: 1px solid var(--bs-border-color) !important; }
.card-header h2 { font-size: 1rem; margin: 0; }
.card-header button[data-bs-toggle="collapse"] {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: 100%;
  padding: inherit;
  cursor: pointer;
  font: inherit;
  color: inherit;
  line-height: inherit;
}
.card-header button[data-bs-toggle="collapse"]:focus-visible {
  outline: 2px solid var(--accent-color);
  outline-offset: -2px;
}
.card-header button[data-bs-toggle="collapse"] > i:not(.collapse-chevron) { color: var(--accent-color); }
.card-header .collapse-chevron { margin-left: auto; transition: transform 0.25s; }
.card-header .collapsed .collapse-chevron { transform: rotate(-90deg); }
.card-header:has(.collapsed) { border-bottom: none !important; border-radius: 6px; }
.card > :first-child { border-radius: 6px 6px 0 0; }
.collapse > :last-child,
.collapsing > :last-child { border-radius: 0 0 6px 6px; }
.card-body:has(+ .card-body-output:not(:has(pre, table, .text-muted))) { border-radius: 0 0 6px 6px; }
.card-body { background-color: var(--bs-tertiary-bg); }

.card-help {
  display: none;
  font-size: 0.85rem;
  color: var(--bs-secondary-color);
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--bs-border-color);
  margin-bottom: 0.75rem;
}

html[data-help="on"] .card-help {
  display: block;
}

.card-body-output {
  background-color: var(--output-bg);
  border-top: 1px solid var(--bs-border-color);
  padding: 0px;
}

.card-body-output pre {
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  margin: 0;
  padding: 1rem;
}

.card-body-output:not(:has(pre, table, .text-muted)) {
  display: none;
}

.table-borderless-last > :not(:last-child) > tr,
.table-borderless-last > tr:not(:last-child) {
  border-bottom-width: var(--bs-border-width);
}

.table-borderless-last > :last-child > tr:last-child,
.table-borderless-last > tr:last-child {
  border-bottom-color: transparent;
}

.card-body-output table {
  padding: 1rem;
}

.card-body-output table td:first-child {
  font-weight: bold;
  white-space: nowrap;
  padding-left: 1rem;
}

.card-body-output table td:last-child {
  padding-right: 1rem;
}

@media (prefers-reduced-motion: reduce) {
  .card-header .collapse-chevron { transition: none; }
}

/* Speed test progress bars */
#collapse-speedtest .progress {
  --bs-progress-height: 12px;
  --bs-progress-bar-bg: var(--accent-color);
}

/* =========================================
   Sub-page navbar
   ========================================= */

.sub-navbar {
  background-color: var(--bs-secondary-bg);
  border-bottom: 1px solid var(--bs-border-color);
}

.sub-navbar .nav-link {
  border-bottom: 2px solid transparent;
}

.sub-navbar .nav-link.active {
  font-weight: 600;
  border-bottom-color: var(--accent-color);
  color: var(--bs-emphasis-color);
}

.sub-navbar .navbar-brand .text-body-secondary {
  font-size: 0.85em;
}

.sub-navbar .btn {
  border-radius: var(--bs-border-radius) !important;
}

.nav-tabs .nav-link.active {
  background-color: var(--bs-tertiary-bg) !important;
  border-color: var(--bs-border-color) var(--bs-border-color) var(--bs-tertiary-bg) !important;
  color: var(--bs-body-color) !important;
}

.nav-tabs .nav-link:not(.active) {
  color: var(--bs-secondary-color);
}

.faq-toc-active {
  color: var(--accent-color) !important;
  font-weight: 600;
}

/* =========================================
   Page header & footer
   ========================================= */

.header-text {
  margin: 30px 0px;
}

@media (min-width: 992px) {
  .header-text {
    margin: 70px 0px !important;
  }
}

h1.titlesite {
  font-size: 100%;
  margin-bottom: -10px;
  padding: 0px;
}

.titleip {
  font-weight: bold;
  font-size: 300%;
  margin: 30px 0px;
}

.footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0.5rem 1rem;
  margin-top: auto;
  padding-top: 2rem;
}

@media (max-width: 575.98px) {
  .footer {
    flex-direction: column-reverse;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
  }
}

.footer .form-check-input {
  cursor: pointer;
}

.theme-icon {
  font-size: 1.1em;
}

/* =========================================
   Scrollbar
   ========================================= */

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb);
  border-radius: 5px;
}

::-webkit-scrollbar-track {
  background-color: var(--bs-body-bg);
}