/* InputToolkit theme overlay for the calibration lab */
:root,
[data-bs-theme="light"] {
  --itk-bg: #e8eef4;
  --itk-bg-deep: #d8e2ec;
  --itk-elevated: #f7fafc;
  --itk-ink: #0b1320;
  --itk-muted: #5a6b7d;
  --itk-accent: #0891b2;
  --itk-accent-deep: #0e7490;
  --itk-accent-soft: rgba(8, 145, 178, 0.12);
  --itk-signal: #ea580c;
  --itk-ok: #059669;
  --itk-danger: #dc2626;
  --itk-border: rgba(11, 19, 32, 0.1);
  --itk-font: "Space Grotesk", "Segoe UI", sans-serif;
  --itk-display: "Space Grotesk", "Segoe UI", sans-serif;
  --itk-mono: "JetBrains Mono", ui-monospace, monospace;

  --bs-font-sans-serif: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-weight: 400;
  --bs-font-monospace: var(--itk-mono);

  --bs-body-bg: var(--itk-bg);
  --bs-body-color: var(--itk-ink);
  --bs-secondary-color: var(--itk-muted);
  --bs-border-color: var(--itk-border);
  --bs-primary: var(--itk-accent);
  --bs-primary-rgb: 8, 145, 178;
  --bs-link-color: var(--itk-accent-deep);
  --bs-link-hover-color: #155e75;
  --bs-success: var(--itk-ok);
  --bs-danger: var(--itk-danger);
  --bs-secondary: #64748b;
  --bs-tertiary-bg: var(--itk-elevated);
  --bs-body-tertiary-bg: var(--itk-elevated);
}

[data-bs-theme="dark"] {
  --itk-bg: #0b1320;
  --itk-bg-deep: #070d16;
  --itk-elevated: #152033;
  --itk-ink: #e8eef4;
  --itk-muted: #9aa8b8;
  --itk-accent: #22d3ee;
  --itk-accent-deep: #67e8f9;
  --itk-accent-soft: rgba(34, 211, 238, 0.14);
  --itk-signal: #fb923c;
  --itk-ok: #34d399;
  --itk-danger: #f87171;
  --itk-border: rgba(232, 238, 244, 0.12);
  --itk-font: "Space Grotesk", "Segoe UI", sans-serif;
  --itk-display: "Space Grotesk", "Segoe UI", sans-serif;
  --bs-font-sans-serif: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-weight: 400;

  --bs-body-bg: var(--itk-bg);
  --bs-body-color: var(--itk-ink);
  --bs-secondary-color: var(--itk-muted);
  --bs-border-color: var(--itk-border);
  --bs-primary: var(--itk-accent);
  --bs-primary-rgb: 34, 211, 238;
  --bs-link-color: var(--itk-accent-deep);
  --bs-link-hover-color: #a5f3fc;
  --bs-success: var(--itk-ok);
  --bs-danger: var(--itk-danger);
  --bs-tertiary-bg: var(--itk-elevated);
  --bs-body-tertiary-bg: var(--itk-elevated);
}

html,
body,
body.itk-body,
.itk-tester-shell--calib,
.itk-tester-shell--calib .card,
.itk-tester-shell--calib .btn,
.itk-tester-shell--calib .form-control,
.itk-tester-shell--calib .form-select,
.itk-tester-shell--calib .modal,
.itk-tester-shell--calib .nav,
.itk-tester-shell--calib .dropdown-menu {
  font-family: "Space Grotesk", "Segoe UI", sans-serif !important;
  font-weight: 400;
}

html,
body {
  background:
    radial-gradient(ellipse 80% 50% at 10% -10%, rgba(8, 145, 178, 0.14), transparent 55%),
    radial-gradient(ellipse 60% 40% at 100% 0%, rgba(234, 88, 12, 0.08), transparent 50%),
    linear-gradient(165deg, #f4f7fb 0%, var(--itk-bg) 42%, var(--itk-bg-deep) 100%);
  color: var(--itk-ink);
  min-height: 100%;
}

[data-bs-theme="dark"] body {
  background:
    radial-gradient(ellipse 80% 50% at 10% -10%, rgba(34, 211, 238, 0.12), transparent 55%),
    radial-gradient(ellipse 60% 40% at 100% 0%, rgba(251, 146, 60, 0.08), transparent 50%),
    linear-gradient(165deg, #101a2a 0%, var(--itk-bg) 45%, var(--itk-bg-deep) 100%);
}

.itk-calib-nav {
  background: rgba(247, 250, 252, 0.92) !important;
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--itk-border);
  box-shadow: 0 8px 24px rgba(11, 19, 32, 0.04);
}

[data-bs-theme="dark"] .itk-calib-nav {
  background: rgba(21, 32, 51, 0.92) !important;
}

.itk-calib-nav .navbar-brand {
  font-family: var(--itk-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--itk-ink) !important;
}

.itk-calib-nav .navbar-text {
  font-family: var(--itk-display);
  font-weight: 600;
  color: var(--itk-accent-deep) !important;
}

.itk-calib-nav .nav-link {
  color: var(--itk-muted) !important;
  font-weight: 600;
}

.itk-calib-nav .nav-link:hover {
  color: var(--itk-ink) !important;
}

.itk-calib-footer {
  background: rgba(247, 250, 252, 0.95) !important;
  border-top: 1px solid var(--itk-border) !important;
}

[data-bs-theme="dark"] .itk-calib-footer {
  background: rgba(21, 32, 51, 0.95) !important;
}

.itk-calib-footer p,
.itk-calib-footer a {
  color: var(--itk-muted);
  font-size: 0.9rem;
}

.itk-notice {
  border: 1.5px solid var(--itk-accent) !important;
  border-radius: 14px !important;
  color: var(--itk-accent-deep) !important;
  background: var(--itk-accent-soft) !important;
  padding: 1rem 1.15rem !important;
}

[data-bs-theme="dark"] .itk-notice {
  color: var(--itk-accent-deep) !important;
}

.btn-primary,
.btn-outline-primary {
  --bs-btn-font-weight: 600;
}

.btn-primary {
  --bs-btn-bg: var(--itk-ink);
  --bs-btn-border-color: var(--itk-ink);
  --bs-btn-hover-bg: #152033;
  --bs-btn-hover-border-color: #152033;
  --bs-btn-active-bg: #0a3a46;
  --bs-btn-active-border-color: #0a3a46;
  background-image: linear-gradient(165deg, #152033 0%, var(--itk-ink) 55%, #0a3a46 100%);
  border: none;
}

.btn-outline-primary {
  --bs-btn-color: var(--itk-accent-deep);
  --bs-btn-border-color: var(--itk-accent);
  --bs-btn-hover-bg: var(--itk-accent);
  --bs-btn-hover-border-color: var(--itk-accent);
  --bs-btn-hover-color: #fff;
  border-width: 1.5px;
  border-radius: 12px;
  padding: 0.65rem 1.5rem;
}

.btn-success {
  --bs-btn-bg: var(--itk-ok);
  --bs-btn-border-color: var(--itk-ok);
}

.btn-danger {
  --bs-btn-bg: var(--itk-danger);
  --bs-btn-border-color: var(--itk-danger);
}

.card {
  border: 1px solid var(--itk-border);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 12px 28px rgba(11, 19, 32, 0.05);
  overflow: hidden;
}

[data-bs-theme="dark"] .card {
  background: rgba(21, 32, 51, 0.85);
}

.card-header,
.card .card-header {
  font-family: var(--itk-display);
  font-weight: 700;
  background: transparent;
  border-bottom-color: var(--itk-border);
}

.nav-tabs .nav-link {
  font-weight: 600;
  color: var(--itk-muted);
}

.nav-tabs .nav-link.active {
  color: var(--itk-accent-deep);
  border-bottom-color: var(--itk-accent);
}

.ds-btn {
  border-radius: 12px;
  font-weight: 600;
}

.stick-card-active {
  border: 1px solid var(--itk-accent) !important;
  box-shadow: 0 0 12px rgba(8, 145, 178, 0.28) !important;
}

.stick-card-active .card-header {
  background-color: var(--itk-accent) !important;
  color: #fff !important;
}

.itk-sticklab-faq {
  background: rgba(255, 255, 255, 0.45);
  border-top: 1px solid var(--itk-border);
}

.itk-sticklab-faq h2 {
  font-family: var(--itk-display);
  font-weight: 700;
  color: var(--itk-ink);
}

.itk-sticklab-faq .accordion-button {
  font-weight: 600;
}

.itk-sticklab-alerts.fixed-bottom {
  bottom: 1rem;
}

#btnconnect {
  max-width: 22rem;
  align-self: flex-start;
}

.itk-offline-intro .itk-info-card {
  background: rgba(255, 255, 255, 0.82);
}

[data-bs-theme="dark"] .itk-offline-intro .itk-info-card {
  background: rgba(21, 32, 51, 0.88);
}

.itk-offline-intro .itk-info-card h2 {
  font-family: var(--itk-display);
  font-weight: 700;
  color: var(--itk-accent-deep);
}

.itk-offline-intro ul,
.itk-offline-intro ol {
  padding-left: 1.1rem;
  color: var(--itk-ink);
}

/* Connected layout: live tools first, actions below */
.itk-sticklab-live {
  align-items: flex-start;
}

.itk-sticklab-live #controller-svg-container {
  margin-top: 0;
}

.itk-sticklab-actions {
  border-top: 1px solid var(--itk-border);
  padding-top: 0.75rem;
}

.itk-tester-shell--calib {
  padding: 0.35rem 0 0.75rem;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.itk-tester-shell--calib > .itk-sticklab-main {
  max-width: none;
  padding-inline: 0;
}

.itk-section--tester .itk-section__head--tight {
  margin-bottom: 0.75rem;
}

.modal.fade .modal-dialog {
  transition: transform 0.2s ease-out;
}

.modal-content {
  border-radius: 16px;
  border-color: var(--itk-border);
}

.modal-header .modal-title {
  font-family: var(--itk-display);
  font-weight: 700;
}

dl.row dd {
  font-family: var(--itk-mono);
}

@keyframes glow {
  0%, 100% {
    text-shadow: 0 0 5px rgba(8, 145, 178, 0.45);
  }
  50% {
    text-shadow: 0 0 14px rgba(8, 145, 178, 0.75), 0 0 22px rgba(8, 145, 178, 0.45);
  }
}