/* ==== 🎨 Anpassat färgtema ==== */
:root {
  --color-primary: #006699;
  --color-secondary: #e6f2f5;
  --color-accent: #004466;
  --color-text: #1a1a1a;
  --color-bg: #ffffff;
}

/* ==== 🖋 Typsnitt och grundstil ==== */
body {
  font-family: 'Segoe UI', Roboto, sans-serif;
  font-size: 1rem;
  background-color: var(--color-bg);
  color: var(--color-text);
}

h1, h2, h3 {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-primary);
}

a {
  color: var(--color-primary);
  text-decoration: none;
}

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

/* ==== 🔘 Bootstrap-knappar ==== */
.btn-primary {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: white;
}

.btn-primary:hover {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}

.btn-outline-primary {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn-outline-primary:hover {
  background-color: var(--color-primary);
  color: white;
}

.btn-success {
  background-color: #28a745;
  border-color: #28a745;
}

.btn-success:hover {
  background-color: #218838;
  border-color: #1e7e34;
}

.btn-outline-secondary {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.btn-outline-secondary:hover {
  background-color: var(--color-accent);
  color: white;
}

/* ==== 🔲 Navigationsfält ==== */
.navbar {
  background-color: var(--color-primary);
}

.navbar-brand,
.navbar-text,
.navbar-nav .nav-link,
.navbar .btn {
  color: white !important;
}

.navbar-nav .nav-link:hover {
  color: var(--color-secondary) !important;
}

/* ==== 📦 Kort och paneler ==== */
.card {
  border: 1px solid var(--color-secondary);
  border-radius: 0.5rem;
  background-color: var(--color-secondary);
}

.card h5, .card h6 {
  color: var(--color-accent);
}

/* ==== 📘 Tabeller ==== */
.table {
  background-color: white;
}

.table thead {
  background-color: var(--color-primary);
  color: white;
}

.table tbody tr:hover {
  background-color: var(--color-secondary);
}

/* ==== 🎨 Egna färgklasser ==== */
.text-primary { color: var(--color-primary) !important; }
.text-accent { color: var(--color-accent) !important; }
.bg-primary { background-color: var(--color-primary) !important; color: white; }
.bg-accent { background-color: var(--color-accent) !important; color: white; }
.bg-secondary { background-color: var(--color-secondary) !important; }

/* ==== 🧩 Layoutjustering ==== */
html {
  overflow-y: scroll;
}