:root {
  --app-bg: #e9edf3;
  --app-surface: #ffffff;
  --app-surface-muted: #f8f9fa;
  --app-text: #212529;
  --app-text-muted: #6c757d;
  --app-border: #dee2e6;
  --app-primary: #0d6efd;
  --app-card-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  --app-input-bg: #ffffff;
  --app-input-text: #212529;
  --app-navbar-bg: #e9edf3;
}

html[data-theme="dark"] {
  --app-bg: #111827;
  --app-surface: #1f2937;
  --app-surface-muted: #374151;
  --app-text: #f9fafb;
  --app-text-muted: #cbd5e1;
  --app-border: #4b5563;
  --app-primary: #60a5fa;
  --app-card-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  --app-input-bg: #111827;
  --app-input-text: #f9fafb;
  --app-navbar-bg: #111827;
}

body {
  background-color: var(--app-bg);
  color: var(--app-text);
}

.card {
  background-color: var(--app-surface);
  color: var(--app-text);
  border: 1px solid var(--app-border);
  box-shadow: var(--app-card-shadow);
}

.navbar-sticky {
  background: var(--app-navbar-bg);
}

.smallhelp,
.text-muted,
.small-muted,
.muted-small {
  color: var(--app-text-muted) !important;
}

.jsonbox {
  white-space: pre;
  overflow: auto;
  max-height: 420px;
  background: var(--app-surface-muted);
  color: var(--app-text);
  border: 1px solid var(--app-border);
  border-radius: 14px;
  padding: 14px;
}

.form-control,
.form-select {
  background-color: var(--app-input-bg);
  color: var(--app-input-text);
  border-color: var(--app-border);
}

.form-control:focus,
.form-select:focus {
  background-color: var(--app-input-bg);
  color: var(--app-input-text);
}

.form-control::placeholder {
  color: var(--app-text-muted);
}

input[readonly],
input:disabled {
  background-color: var(--app-surface-muted);
  color: var(--app-text-muted);
}

.table {
  --bs-table-bg: var(--app-surface);
  --bs-table-color: var(--app-text);
  --bs-table-border-color: var(--app-border);
  --bs-table-striped-bg: var(--app-surface-muted);
  --bs-table-striped-color: var(--app-text);
}

.modal-content {
  background-color: var(--app-surface);
  color: var(--app-text);
  border-color: var(--app-border);
}

.card-header,
.modal-header,
.modal-footer {
  background-color: var(--app-surface-muted);
  border-color: var(--app-border);
}

.dropdown-menu,
.list-group-item {
  background-color: var(--app-surface);
  color: var(--app-text);
  border-color: var(--app-border);
}

.timocom-gauge-wrap {
    width: 160px;
    margin: 0 auto;
  }

  .timocom-gauge-svg {
    width: 100%;
    height: auto;
    display: block;
  }

  .timocom-gauge-bg {
    fill: none;
    stroke: #e9ecef;
    stroke-width: 16;
    stroke-linecap: round;
  }

  .timocom-gauge-value {
    fill: none;
    stroke: #198754;
    stroke-width: 16;
    stroke-linecap: round;
    stroke-dasharray: 252;
    stroke-dashoffset: 252;
    transition: stroke-dashoffset 0.5s ease, stroke 0.3s ease;
  }

  .timocom-threshold-line {
    stroke: var(--app-text);
    stroke-width: 3;
    stroke-linecap: round;
    opacity: 0.8;
  }

  .timocom-needle {
    stroke: var(--app-text);
    stroke-width: 3;
    stroke-linecap: round;
    transform-origin: 100px 100px;
    transition: transform 0.5s ease;
  }

  .timocom-center-dot {
    fill: var(--app-text);
  }

  .timocom-gauge-text {
    font-size: 20px;
    font-weight: 700;
    fill: var(--app-text);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  }

  .timocom-gauge-subtext {
    font-size: 10px;
    fill: var(--app-text);
  }

  .bg-light {
    background-color: var(--app-surface-muted) !important;
    color: var(--app-text) !important;
  }

  .status-bar {
  padding: 10px 14px;
  border-radius: 8px;
  margin-bottom: 12px;
  font-weight: 500;
  border: 1px solid var(--app-border);
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.status-info {
  background-color: var(--app-surface-muted);
  color: var(--app-text);
  border-color: var(--app-border);
}

.status-loading {
  background-color: var(--app-surface-muted);
  color: var(--app-primary);
  border-color: var(--app-border);
}

.status-success {
  background-color: #e6f4ea;
  color: #1e7e34;
  border-color: #badbcc;
}

.status-error {
  background-color: #fdecea;
  color: #b02a37;
  border-color: #f5c2c7;
}