:root {
  --azure-blue: #0078d4;
  --azure-blue-hover: #106ebe;
  --azure-blue-dark: #004578;
  --azure-cyan: #00bcf2;
  --azure-canvas: #f3f2f1;
  --azure-surface: #ffffff;
  --azure-surface-alt: #faf9f8;
  --azure-disabled: #e1dfdd;
  --azure-text: #201f1e;
  --azure-muted: #605e5c;
  --azure-border: #d2d0ce;
  --azure-border-strong: #8a8886;
  --azure-selected: #cfe4fa;
  --azure-highlight: #deecf9;
  --azure-highlight-border: #a9d3f2;
  --azure-danger: #d13438;
  --azure-success: #107c10;
  --azure-warning: #ffb900;
  --azure-info: #038387;
  --bs-primary: #0078d4;
  --bs-primary-rgb: 0, 120, 212;
  --bs-secondary: #605e5c;
  --bs-secondary-rgb: 96, 94, 92;
  --bs-success: #107c10;
  --bs-success-rgb: 16, 124, 16;
  --bs-info: #038387;
  --bs-info-rgb: 3, 131, 135;
  --bs-warning: #ffb900;
  --bs-warning-rgb: 255, 185, 0;
  --bs-danger: #d13438;
  --bs-danger-rgb: 209, 52, 56;
  --bs-body-bg: #f3f2f1;
  --bs-body-color: #201f1e;
  --bs-emphasis-color: #201f1e;
  --bs-secondary-color: #605e5c;
  --bs-tertiary-color: #8a8886;
  --bs-secondary-bg: #f3f2f1;
  --bs-tertiary-bg: #faf9f8;
  --bs-border-color: #d2d0ce;
  --bs-link-color: #0078d4;
  --bs-link-hover-color: #106ebe;
  --bs-code-color: #004578;
  --bs-highlight-bg: #deecf9;
  --bs-focus-ring-color: rgba(0, 120, 212, 0.28);
  --bs-primary-bg-subtle: #deecf9;
  --bs-info-bg-subtle: #deecf9;
  --bs-warning-bg-subtle: #fff4ce;
  --bs-danger-bg-subtle: #fde7e9;
  --bs-success-bg-subtle: #dff6dd;
  --bs-font-sans-serif: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}

html {
  font-size: 15px;
  position: relative;
  min-height: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--azure-canvas);
  color: var(--azure-text);
  font-family: var(--bs-font-sans-serif);
}

.btn-primary {
  --bs-btn-bg: #0078d4;
  --bs-btn-border-color: #0078d4;
  --bs-btn-hover-bg: #106ebe;
  --bs-btn-hover-border-color: #106ebe;
  --bs-btn-active-bg: #005a9e;
  --bs-btn-active-border-color: #005a9e;
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
}

.btn-outline-primary {
  --bs-btn-color: #0078d4;
  --bs-btn-border-color: #0078d4;
  --bs-btn-hover-bg: #0078d4;
  --bs-btn-hover-border-color: #0078d4;
  --bs-btn-hover-color: #fff;
}

.btn-outline-secondary {
  --bs-btn-color: var(--azure-text);
  --bs-btn-border-color: var(--azure-border-strong);
  --bs-btn-hover-bg: var(--azure-disabled);
  --bs-btn-hover-border-color: var(--azure-text);
  --bs-btn-hover-color: var(--azure-text);
  --bs-btn-active-bg: var(--azure-border);
  --bs-btn-active-border-color: var(--azure-text);
  --bs-btn-active-color: var(--azure-text);
}

.btn-secondary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--azure-muted);
  --bs-btn-border-color: var(--azure-muted);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #3b3a39;
  --bs-btn-hover-border-color: #3b3a39;
}

.btn-outline-danger {
  --bs-btn-color: var(--azure-danger);
  --bs-btn-border-color: var(--azure-danger);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--azure-danger);
  --bs-btn-hover-border-color: var(--azure-danger);
}

.btn-info {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--azure-info);
  --bs-btn-border-color: var(--azure-info);
  --bs-btn-hover-bg: #026c70;
  --bs-btn-hover-border-color: #026c70;
  --bs-btn-hover-color: #fff;
}

.btn-outline-light {
  --bs-btn-color: #fff;
  --bs-btn-border-color: rgba(255, 255, 255, 0.72);
  --bs-btn-hover-bg: rgba(255, 255, 255, 0.16);
  --bs-btn-hover-border-color: #fff;
  --bs-btn-hover-color: #fff;
}

.azure-navbar {
  background: var(--azure-blue);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12);
}

.azure-navbar .navbar-brand,
.azure-navbar .nav-link,
.azure-navbar .navbar-text {
  color: #fff !important;
}

.azure-navbar .nav-link {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  border-radius: 0.25rem;
}

.azure-navbar .nav-link:hover {
  background: rgba(255, 255, 255, 0.12);
}

.azure-navbar .nav-link.active {
  background: rgba(255, 255, 255, 0.2);
  box-shadow: inset 0 -3px 0 #fff;
}

.azure-navbar .navbar-toggler {
  border-color: rgba(255, 255, 255, 0.55);
}

.azure-navbar .navbar-toggler-icon {
  filter: invert(1);
}

.azure-main {
  flex: 1 0 auto;
  padding: 1.5rem 0 3rem;
}

.azure-footer {
  background: var(--azure-surface);
  border-top: 1px solid var(--azure-border);
  color: var(--azure-muted);
}

.azure-footer a {
  color: var(--azure-blue);
}

.azure-card,
.card {
  --bs-card-bg: var(--azure-surface);
  --bs-card-border-color: var(--azure-border);
  --bs-card-cap-bg: var(--azure-surface-alt);
  background: var(--azure-surface);
  border: 1px solid var(--azure-border);
  border-radius: 0.25rem;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.04);
}

.azure-card .card-header,
.card-header {
  background: var(--azure-surface-alt) !important;
  border-bottom-color: var(--azure-border);
  color: var(--azure-text);
}

.form-label {
  color: var(--azure-text);
  font-weight: 600;
  font-size: 0.875rem;
}

.form-text {
  color: var(--azure-muted);
}

.form-control,
.form-select,
.input-group-text {
  background-color: var(--azure-surface);
  border-color: var(--azure-border-strong);
  color: var(--azure-text);
}

.form-control::placeholder {
  color: var(--azure-muted);
  opacity: 1;
}

.form-control:hover:not(:disabled):not(:focus),
.form-select:hover:not(:disabled):not(:focus) {
  border-color: var(--azure-text);
}

.form-control:focus,
.form-select:focus {
  background-color: var(--azure-surface);
  border-color: var(--azure-blue);
  box-shadow: 0 0 0 0.2rem rgba(0, 120, 212, 0.22);
}

.form-control:disabled,
.form-select:disabled {
  background-color: var(--azure-disabled);
  color: var(--azure-muted);
  border-color: var(--azure-border);
}

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

.form-check-input {
  background-color: var(--azure-surface);
  border-color: var(--azure-border-strong);
}

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

.form-check-input:focus {
  border-color: var(--azure-blue);
  box-shadow: 0 0 0 0.2rem rgba(0, 120, 212, 0.22);
}

.modal {
  --bs-modal-bg: var(--azure-canvas);
  --bs-modal-border-color: var(--azure-border);
  --bs-modal-header-border-color: var(--azure-border);
  --bs-modal-footer-border-color: var(--azure-border);
}

.modal-content {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.modal .btn-close {
  opacity: 0.7;
}

.modal .form-control,
.modal .form-select,
.modal .input-group-text {
  background-color: var(--azure-surface);
  border-color: var(--azure-border-strong);
}

.modal .form-control:disabled,
.modal .form-select:disabled {
  background-color: var(--azure-disabled);
}

.modal .form-control:focus,
.modal .form-select:focus {
  background-color: var(--azure-surface);
  border-color: var(--azure-blue);
}

.nav-tabs {
  border-bottom: 0;
  gap: 0.35rem;
}

.nav-tabs .nav-link {
  color: var(--azure-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 0.25rem;
}

.nav-tabs .nav-link:hover {
  border-color: transparent;
  color: var(--azure-text);
  background: rgba(255, 255, 255, 0.55);
}

.nav-tabs .nav-link.active {
  color: var(--azure-text);
  background-color: var(--azure-surface);
  border-color: var(--azure-border-strong);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.table {
  --bs-table-border-color: var(--azure-border);
  --bs-table-hover-bg: var(--azure-canvas);
}

.table-light {
  --bs-table-bg: var(--azure-surface-alt);
  --bs-table-border-color: var(--azure-border);
  --bs-table-striped-bg: var(--azure-canvas);
  --bs-table-hover-bg: var(--azure-disabled);
}

.dropdown-menu {
  background-color: var(--azure-surface);
  border-color: var(--azure-border);
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.12);
}

.list-group-item {
  background-color: var(--azure-surface);
  border-color: var(--azure-border);
  color: var(--azure-text);
}

.badge.text-bg-warning {
  color: #6a4b00 !important;
  background-color: #fff4ce !important;
}

.badge.text-bg-info {
  color: #003a52 !important;
  background-color: #deecf9 !important;
}

.badge.text-bg-light {
  color: var(--azure-muted) !important;
  background-color: var(--azure-surface-alt) !important;
  border-color: var(--azure-border) !important;
}

.alert-warning {
  color: #6a4b00;
  background-color: #fff4ce;
  border-color: #f3d06b;
}

.alert-danger {
  color: #791818;
  background-color: #fde7e9;
  border-color: #eeacb2;
}

.alert-info {
  color: #003a52;
  background-color: var(--azure-highlight);
  border-color: var(--azure-highlight-border);
}

.alert-success {
  color: #0e5c0e;
  background-color: #dff6dd;
  border-color: #9fd89f;
}

code,
pre {
  color: var(--azure-text);
}

code {
  color: var(--azure-blue-dark);
  background: var(--azure-surface);
  padding: 0.1em 0.35em;
  border-radius: 0.15rem;
}

.alert-warning code,
.alert-danger code,
.alert-info code,
.alert-success code {
  background: rgba(255, 255, 255, 0.72);
}

pre {
  background: var(--azure-surface);
  border-color: var(--azure-border);
}

.azure-page-title {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.azure-page-title .bi {
  color: var(--azure-blue);
  font-size: 1.75rem;
  line-height: 1;
  margin-top: 0.15rem;
}

.azure-page-title h1 {
  font-size: 1.35rem;
  font-weight: 600;
  margin: 0;
}

.home-tile {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.25rem;
  text-decoration: none;
  color: inherit;
  background: var(--azure-surface);
  border: 1px solid var(--azure-border);
  border-radius: 0.25rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.home-tile:hover {
  color: inherit;
  border-color: var(--azure-blue);
  box-shadow: 0 0.25rem 0.75rem rgba(0, 120, 212, 0.12);
}

.home-tile .bi {
  font-size: 1.5rem;
  color: var(--azure-blue);
}

.login-page {
  min-height: calc(100vh - 56px);
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at top right, rgba(0, 188, 242, 0.16), transparent 32%),
    var(--azure-canvas);
}

.login-card {
  width: min(420px, 100%);
}

.tree-row {
  cursor: pointer;
  border-radius: 0.25rem;
}

.tree-row:hover {
  background: var(--azure-canvas);
}

.tree-row.active {
  background: var(--azure-selected);
}

.drag-handle {
  cursor: grab;
  color: var(--azure-muted);
}

.drag-handle:active {
  cursor: grabbing;
}

.jpath-bar {
  font-family: ui-monospace, Consolas, "Courier New", monospace;
  background: var(--azure-highlight);
  border: 1px solid var(--azure-highlight-border);
  color: var(--azure-blue-dark);
}

.config-preview {
  background: var(--azure-surface);
  border: 1px solid var(--azure-border);
  color: var(--azure-text);
}