/* === Original Layout === */
html, body {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
}

/* === Root container === */
.root {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* === Insinto Biker GPS Dark Theme (Refined) === */
:root {
  --color-bg: #0E1117;          /* deep charcoal background */
  --color-surface: #161B22;     /* slightly lighter panels */
  --color-primary: #144272;     /* darker blue accent */
  --color-accent: #205295;      /* hover or highlight blue */
  --color-text: #E6E6E6;        /* white-gray text */
  --color-muted: #A0A0A0;       /* softer gray for subtle text */
}

/* === Global Styles === */
body {
  background-color: var(--color-bg) !important;
  color: var(--color-text) !important;
  font-family: "Segoe UI", Roboto, sans-serif;
}

/* === Loader Spinner === */
.loader {
  border: 8px solid var(--color-muted);
  border-right-color: var(--color-primary);
}

/* === Buttons === */
button,
input[type="submit"],
.btn {
  background-color: var(--color-primary) !important;
  color: #fff !important;
  border: none;
  border-radius: 6px;
  padding: 8px 14px;
  cursor: pointer;
  transition: 0.3s ease;
}

button:hover,
input[type="submit"]:hover,
.btn:hover {
  background-color: var(--color-accent) !important;
}

/* === Panels / Cards === */
.card,
.panel,
div[class*="card"] {
  background-color: var(--color-surface) !important;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  padding: 16px;
}

/* === Headings and Labels === */
h1, h2, h3, h4, h5 {
  color: var(--color-text) !important;  /* white instead of blue */
}

/* === Links === */
a {
  color: var(--color-text) !important;  /* white links */
  text-decoration: none;
}

a:hover {
  color: var(--color-accent) !important;
  text-decoration: underline;
}