/* Custom styles */
:root {
    --primary-bg-color: #092231;
    --text-light: #ffffff;
    --text-dark: #333333;
    --accent-color-1: #a4abb9; /* Pastellgul/Guld */
    --accent-color-2: #FF6B6B; /* Korall */
    --accent-color-3: #58A6FF; /* Ljusblå */
    --accent-color-4: #3EB489; /* Mintgrön */
    --neutral-light: #F5F5F5; /* Mjuk grå */
    --btn-primary: #00a26f; /* Mörkare blå för knappar */
    --btn-secondary: #FFA500; /* Varm orange för CTA */
    --icons-detail: #C0C0C0; /* Silver för ikoner och små element */
    --hover-bg-color: #ffffff; /* Färg för hover-effekt */
  }
  
  body {
    background-color: var(--primary-bg-color);
    color: var(--text-light);
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
  
  .navbar {
    background-color: var(--primary-bg-color);
  }
  
  .nav-link, .navbar-brand {
    color: var(--text-light);
  }
  
  .nav-link:hover, .navbar-brand:hover {
    color: var(--accent-color-3);
  }
  
  /* Använd Bootstrap 5-klasser för att definiera knappfärger */
  .btn-primary {
    background-color: var(--btn-primary);
    border-color: var(--btn-primary);
  }
  
  .btn-primary:hover {
    background-color: var(--accent-color-1);
    border-color: var(--accent-color-1);
  }
  
  .btn-secondary {
    background-color: var(--btn-secondary);
    border-color: var(--btn-secondary);
  }
  
  .btn-secondary:hover {
    background-color: var(--accent-color-2);
    border-color: var(--accent-color-2);
  }
  
  /* Bakgrund och text för ljusa sektioner */
  .bglight {
    background-color: var(--neutral-light);
    color: var(--text-dark);
  }

  /* Stil för paragrafer i mörkt läge */
p {
    color: var(--text-light);
  }
  
  /* Stil för paragrafer i ljust läge, används när p ligger inuti en .bglight container */
  .bglight p {
    color: var(--text-dark);
  }
  
  /* Stilar för huvudinnehåll och rubriker */
  h1, h2, h3, h4, h5, h6 {
    color: var(--text-light);
  }
  
  /* Anpassa länkar och accent-element */
  a, .btn-link {
    color: var(--accent-color-3);
  }
  
  a:hover, .btn-link:hover {
    color: var(--accent-color-1);
  }
  
  /* Footer-stilar om du har en */
  footer {
    background-color: var(--primary-bg-color);
    color: var(--text-light);
  }
  
  /* Ikoner och små detaljer */
  .icon-detail {
    color: var(--icons-detail);
  }

 /* Anpassa hela tabellen */
.table-custom {
    background-color: var(--primary-color);
    color: var(--text-color);
    border-collapse: collapse; /* Kollapsar gränserna så att de delas mellan celler */
    width: 100%;
  }
  
  /* Ta bort alla inre kantlinjer från td och th element */
  .table-custom th,
  .table-custom td {
    border: none;
    padding: 0.75rem; /* Standard padding från Bootstrap */
  }
  
  /* Lägg till horisontella ramar mellan rader */
  .table-custom tr {
    border-bottom: 1px solid var(--border-color);
  }
  
  /* Ta bort ramen från sista raden */
  .table-custom tr:last-child {
    border-bottom: none;
  }
  
  /* Anpassa tabellhuvudet */
  .table-custom thead th {
    background-color: var(--primary-color); /* Använd samma färg som bakgrund för att 'dölja' vertikala ramar */
  }
  
  /* Anpassa länkar och knappar i tabellen */
  .table-custom a {
    color: var(--text-color);
    text-decoration: none; /* Optional: remove link underlines */
  }
  
  .table-custom a:hover {
    text-decoration: underline; /* Optional: add underline on hover */
  }
  
  /* Stil för pagination */
  .pagination-custom .page-item .page-link {
    background-color: var(--primary-color);
    color: var(--text-color);
    border-color: var(--primary-color);
  }
  
  .pagination-custom .page-item.active .page-link,
  .pagination-custom .page-item:hover .page-link {
    background-color: var(--border-color);
    border-color: var(--border-color);
  }
  .pagination-custom .page-item:hover .page-link {
    background-color: var(--hover-bg-color); /* Hover färg */
    border-color: var(--hover-bg-color); /* Hover kantfärg */
    color: var(--text-dark); /* Textfärg vid hover */
  }
  /* Anpassad CSS för kort (cards) */
.card {
    background-color: #ffffff; /* Vit bakgrund för korten */
    border: none; /* Ta bort border om du inte vill ha några kanter */
    border-radius: 0.25rem; /* Lägg till en liten rundning på kanterna om så önskas */
  }
  
  .card-body {
    padding: 1rem; /* Standard padding för kortens innehåll */
  }
  
  .card-title {
    margin-bottom: 0.5rem; /* Lägg till lite utrymme under titeln */
    color: #333; /* Mörk textfärg */
  }
  
  .card-text {
    color: #333; /* Mörk textfärg */
    margin-bottom: 1rem; /* Lägg till lite utrymme under texten om det behövs */
  }
  
  .btn i {
    margin-right: 5px; /* Lägger till lite utrymme mellan ikonen och texten */
  }
  
  .text-success {
    color: green;
}

.text-danger {
    color: red;
}

  
  /* Lägg till ytterligare stilar om du behöver här */