:root {
  /* Colors */
  --color-brand-primary: #191b1b;
  --color-brand-secondary: #206554;
  --color-brand-tertiary: rgba(32, 101, 84, 0.15);
  --color-brand-success: #32b760;
  --color-brand-danger: #cc3838;
  --color-brand-warning: #FFB347;
  --bg-image-brand-gradient: linear-gradient(to right, #125C44, #2E6D64);
  --radius-brand: 15px;
}

/* Hardcoded utility fallbacks in case the compiler skips them */
.bg-brand-primary { background-color: var(--color-brand-primary); }
.text-brand-primary { color: var(--color-brand-primary); }
.bg-brand-gradient { background-image: var(--bg-image-brand-gradient); }
.rounded-brand { border-radius: var(--radius-brand); }
.text-brand-success { color: var(--color-brand-success) !important; }
.bg-brand-success { background-color: var(--color-brand-success) !important; }
.text-brand-danger { color: var(--color-brand-danger) !important; }
.bg-brand-danger { background-color: var(--color-brand-danger) !important; }
.border-brand-secondary { border-color: var(--color-brand-secondary); }
.text-brand-secondary { color: var(--color-brand-secondary); }
.text-brand-warning { color: var(--color-brand-warning) }
.bg-brand-warning { background-color: var(--color-brand-warning) }

.router-link-active {
  opacity: 1 !important;
  color: var(--color-brand-secondary) !important;
}

.router-link-active .group-active-target {
  opacity: 1 !important;
  color: var(--color-white) !important;
}

/* SVG Global Styling */
.svg-primary {
  fill: var(--color-brand-primary);
}

.svg-secondary {
  fill: var(--color-brand-secondary);
}

/* Service Status Specifics */
.status-active {
  color: var(--color-brand-success) !important;
  font-weight: 600;
}

.loader {
  border-bottom-color: var(--color-brand-secondary);
  border-left-color: var(--color-brand-secondary);
  border-right-color: var(--color-brand-secondary);
}

@font-face {
    font-family: 'JetBrains Mono';
    src: url('/static/fonts/jb-mono/JetBrainsMono-Italic-VariableFont_wght.ttf') format('ttf'),
         url('/static/fonts/jb-mono/JetBrainsMono-VariableFont_wght.ttf') format('ttf');
    font-weight: normal;
    font-style: normal;
}

body {
  font-family: -apple-system, /* iOS (San Francisco), macOS (San Francisco) */
               BlinkMacSystemFont, /* macOS fallback (San Francisco) */
               "Droid Sans", /* Older Android */
               'JetBrains Mono', monospace;
}

.tg-inset {
    margin-top: calc(var(--tg-safe-area-inset-top, 0) + var(--tg-content-safe-area-inset-top, 1rem));
}

/* Base input styling */
input[type="range"] {
  accent-color: var(--color-brand-secondary, #206554); /* Native fallback where supported */
}

/* Chrome, Safari, Edge, Opera (Thumb) */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: var(--color-brand-secondary, #206554);
  cursor: pointer;
  transition: transform 0.1s ease-in-out;
}

input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.15);
}

/* Firefox (Thumb) */
input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: var(--color-brand-secondary, #206554);
  border: none;
  cursor: pointer;
  transition: transform 0.1s ease-in-out;
}

input[type="range"]::-moz-range-thumb:hover {
  transform: scale(1.15);
}

/* Firefox filled track progress */
input[type="range"]::-moz-range-progress {
  background-color: var(--color-brand-secondary, #206554);
  height: 100%;
  border-radius: 8px 0 0 8px;
}

/* Base input styling */
input[type="range"] {
  accent-color: var(--color-brand-secondary, #206554);
  outline: none;
}

/* Chrome, Safari, Edge (Track Reset) */
input[type="range"]::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 8px;
  background: transparent;
}

/* Chrome, Safari, Edge (Thumb alignment) */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: var(--color-brand-secondary, #206554);
  cursor: pointer;
  margin-top: -5px; /* Centers thumb over 8px track */
  transition: transform 0.1s ease-in-out;
}

input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.15);
}

/* Firefox (Thumb) */
input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: var(--color-brand-secondary, #206554);
  border: none;
  cursor: pointer;
  transition: transform 0.1s ease-in-out;
}

input[type="range"]::-moz-range-thumb:hover {
  transform: scale(1.15);
}

/* Firefox filled track progress */
input[type="range"]::-moz-range-progress {
  background-color: var(--color-brand-secondary, #206554);
  height: 100%;
  border-radius: 8px 0 0 8px;
}