/*
 * dark-mode.css
 * Tilpassede stiler for dark mode, inspirert av Bootstrap 5.3, for bruk med Bootstrap 3.4
 * Denne filen bør lastes ETTER Bootstrap 3.4s hoved-CSS.
 */

/* Sikrer at html og body fyller hele viewporten for konsistent bakgrunnsfarge */
html.dark-mode,
body.dark-mode {
    height: 100%;
}

/* Generelle farger for body og html når .dark-mode klassen er aktiv */
html.dark-mode {
    background-color: #212529; /* Standard mørk bakgrunn fra BS5.3 --bs-body-bg */
}
body.dark-mode {
    background-color: #212529; /* En mørk grå bakgrunn, ligner BS5.3 --bs-body-bg */
    color: #dee2e6; /* Lysere tekstfarge, ligner BS5.3 --bs-body-color */
}

/* Overstyr container-bakgrunn som ofte dekker siden */
.dark-mode .container,
.dark-mode .container-fluid {
    background-color: transparent;
    color: #dee2e6;
}

/* Lenker */
.dark-mode a {
    color: #6ea8fe;
}
.dark-mode a:hover,
.dark-mode a:focus {
    color: #a7caff;
}

/* Navigasjon (Navbar) - Tilpasser .navbar-default og .navbar-inverse */
.dark-mode .navbar-default {
    background-color: #343a40;
    border-color: #495057;
}
.dark-mode .navbar-default .navbar-brand {
    color: #dee2e6;
}
.dark-mode .navbar-default .navbar-nav > li > a {
    color: #dee2e6;
}

/* Justering for hover/focus på standard navbar-lenker, inkludert dropdown-toggles */
.dark-mode .navbar-default .navbar-nav > li > a:hover,
.dark-mode .navbar-default .navbar-nav > li > a:focus {
    color: #6ea8fe;
    background-color: #495057; /* Mørkere bakgrunn ved hover/focus */
}

/* Korrigerer .open tilstand for dropdown-toggle i navbar-default */
.dark-mode .navbar-default .navbar-nav > .open > a,
.dark-mode .navbar-default .navbar-nav > .open > a:hover,
.dark-mode .navbar-default .navbar-nav > .open > a:focus {
    background-color: #2b2b2b; /* Mørk bakgrunn når dropdown er åpen */
    color: #6ea8fe;
}

.dark-mode .navbar-default .navbar-nav > .active > a,
.dark-mode .navbar-default .navbar-nav > .active > a:hover,
.dark-mode .navbar-default .navbar-nav > .active > a:focus {
    color: #6ea8fe;
    background-color: #2b2b2b; /* Aktiv bakgrunn */
}
.dark-mode .navbar-default .navbar-toggle .icon-bar {
    background-color: #dee2e6;
}

/* Hvis du bruker .navbar-inverse (som er mørk som standard i BS3, men kan justeres) */
.dark-mode .navbar-inverse {
    background-color: #1a1e22;
    border-color: #212529;
}
.dark-mode .navbar-inverse .navbar-brand,
.dark-mode .navbar-inverse .navbar-nav > li > a {
    color: #dee2e6;
}
.dark-mode .navbar-inverse .navbar-nav > li > a:hover,
.dark-mode .navbar-inverse .navbar-nav > li > a:focus {
    background-color: #2b2b2b;
    color: #6ea8fe;
}
.dark-mode .navbar-inverse .navbar-nav > .active > a,
.dark-mode .navbar-inverse .navbar-nav > .active > a:hover,
.dark-mode .navbar-inverse .navbar-nav > .active > a:focus {
    background-color: #212529;
    color: #6ea8fe;
}
/* Korrigerer .open tilstand for dropdown-toggle i navbar-inverse */
.dark-mode .navbar-inverse .navbar-nav > .open > a,
.dark-mode .navbar-inverse .navbar-nav > .open > a:hover,
.dark-mode .navbar-inverse .navbar-nav > .open > a:focus {
    background-color: #212529; /* Mørk bakgrunn når dropdown er åpen */
    color: #6ea8fe;
}


/* Paneler (.panel) */
.dark-mode .panel {
    background-color: #2b2b2b;
    border-color: #495057;
    color: #dee2e6;
}
.dark-mode .panel-default > .panel-heading {
    background-color: #343a40;
    border-color: #495057;
    color: #dee2e6;
}
.dark-mode .panel-default > .panel-footer {
    background-color: #343a40;
    border-color: #495057;
    color: #dee2e6;
}

/* Justering for innholdet som kollapses inn i paneler */
.dark-mode .panel-group .panel-heading + .panel-collapse > .panel-body {
    border-top-color: #495057;
}
.dark-mode .panel-body {
    background-color: #2b2b2b;
}

/* Spesifikke paneltyper */
.dark-mode .panel-primary {
    border-color: #365d8c; /* Alternativ 3: Dyp marineblå */
}
.dark-mode .panel-primary > .panel-heading {
    background-color: #365d8c; /* Alternativ 3: Dyp marineblå */
    border-color: #365d8c;
    color: #dee2e6; /* Lys tekst for primary */
}
.dark-mode .panel-success {
    border-color: #2b6640; /* Alternativ 3: Mørk smaragdgrønn */
}
.dark-mode .panel-success > .panel-heading {
    background-color: #2b6640; /* Alternativ 3: Mørk smaragdgrønn */
    border-color: #2b6640;
    color: #dee2e6; /* Lys tekst */
}
.dark-mode .panel-info {
    border-color: #1a4a51; /* JUSTERT IGJEN: Enda dypere turkis */
}
.dark-mode .panel-info > .panel-heading {
    background-color: #1a4a51; /* JUSTERT IGJEN: Enda dypere turkis */
    border-color: #1a4a51;
    color: #dee2e6; /* Lys tekst */
}
.dark-mode .panel-warning {
    border-color: #8c6f2a; /* Alternativ 3: Dyp sennepsgul */
}
.dark-mode .panel-warning > .panel-heading {
    background-color: #8c6f2a; /* Alternativ 3: Dyp sennepsgul */
    border-color: #8c6f2a;
    color: #dee2e6; /* Justert: Lys tekst for warning */
}
.dark-mode .panel-danger {
    border-color: #7a3636; /* Alternativ 3: Dyp burgunder */
}
.dark-mode .panel-danger > .panel-heading {
    background-color: #7a3636; /* Alternativ 3: Dyp burgunder */
    border-color: #7a3636;
    color: #dee2e6; /* Lys tekst */
}


/* Knapper */
.dark-mode .btn-default {
    background-color: #495057;
    border-color: #6c757d;
    color: #dee2e6;
}

/* Standardisert hover/focus for ALLE knapper */
.dark-mode .btn-default:hover,
.dark-mode .btn-default:focus {
    background-color: #6c757d; /* Standard hover-farge for .btn-default */
    border-color: #868e96;
    color: #fff;
}
/* Mer spesifikk .active-tilstand for .btn-default for å overstyre */
.dark-mode .btn-default:active,
.dark-mode .btn-default.active {
    background-color: #6c757d; /* Standard active-farge for .btn-default */
    border-color: #868e96;
    color: #fff;
}


/* Spesifikke stiler for dropdown-toggle knapper for å matche standard hover/focus/active */
/* Dette sikrer at de oppfører seg som vanlige knapper, men med .open-tilstanden også tatt hensyn til */
.dark-mode .btn.dropdown-toggle:active,
.dark-mode .btn.dropdown-toggle.active,
.dark-mode .btn.dropdown-toggle.open {
    background-color: #6c757d;
    border-color: #868e96;
    color: #fff;
}
/* Sikrer at hover/focus for dropdown-toggle matcher den generelle knappen */
.dark-mode .btn.dropdown-toggle:hover,
.dark-mode .btn.dropdown-toggle:focus {
    background-color: #6c757d;
    border-color: #868e96;
    color: #fff;
}

/* Fjern standard outline/box-shadow som kan forårsake "blinking" */
.dark-mode .btn:focus,
.dark-mode .btn:active:focus,
.dark-mode .btn.active:focus,
.dark-mode .btn.focus,
.dark-mode a.btn:focus,
.dark-mode a.btn:active:focus,
.dark-mode .btn.dropdown-toggle:focus,
.dark-mode .btn.dropdown-toggle.active:focus,
.dark-mode .btn.dropdown-toggle.open:focus,
.dark-mode .dropup .dropdown-toggle:focus,
.dark-mode .navbar-toggle:focus,
.dark-mode .btn-link:focus,
.dark-mode .btn-toolbar .btn:focus,
.dark-mode .btn-group > .btn:focus,
.dark-mode .btn-group-vertical > .btn:focus {
    outline: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}


.dark-mode .btn-primary {
    background-color: #365d8c; /* Alternativ 3: Dyp marineblå */
    border-color: #365d8c;
    color: #dee2e6; /* Lys tekst for primary knapp */
}
.dark-mode .btn-primary:hover,
.dark-mode .btn-primary:focus {
    background-color: #4776b0; /* Alternativ 3: Lysere marineblå */
    border-color: #4776b0;
    color: #dee2e6;
}
/* Mer spesifikk .active-tilstand for .btn-primary */
.dark-mode .btn-primary:active,
.dark-mode .btn-primary.active {
    background-color: #4776b0;
    border-color: #4776b0;
    color: #dee2e6;
}
/* Konsistent aktiv/åpen tilstand for primære dropdown-toggle knapper */
.dark-mode .btn-primary.dropdown-toggle:active,
.dark-mode .btn-primary.dropdown-toggle.active,
.dark-mode .btn-primary.dropdown-toggle.open {
    background-color: #4776b0;
    border-color: #4776b0;
    color: #dee2e6;
}
/* Sikrer at hover/focus for primær dropdown-toggle matcher den generelle knappen */
.dark-mode .btn-primary.dropdown-toggle:hover,
.dark-mode .btn-primary.dropdown-toggle:focus {
    background-color: #4776b0;
    border-color: #4776b0;
    color: #dee2e6;
}


/* Gjenta for andre knappetyper for konsistens */
.dark-mode .btn-success {
    background-color: #2b6640; /* Alternativ 3: Mørk smaragdgrønn */
    border-color: #2b6640;
    color: #dee2e6; /* Lys tekst for success knapp */
}
.dark-mode .btn-success:hover, .dark-mode .btn-success:focus, .dark-mode .btn-success:active, .dark-mode .btn-success.active {
    background-color: #368050; /* Alternativ 3: Lysere smaragdgrønn */
    border-color: #368050;
    color: #dee2e6;
}
.dark-mode .btn-success.dropdown-toggle:active, .dark-mode .btn-success.dropdown-toggle.active, .dark-mode .btn-success.dropdown-toggle.open {
    background-color: #368050;
    border-color: #368050;
    color: #dee2e6;
}
.dark-mode .btn-success.dropdown-toggle:hover, .dark-mode .btn-success.dropdown-toggle:focus {
    background-color: #368050;
    border-color: #368050;
    color: #dee2e6;
}


.dark-mode .btn-info {
    background-color: #1a4a51; /* JUSTERT IGJEN: Enda dypere turkis */
    border-color: #1a4a51;
    color: #dee2e6; /* Lys tekst for info knapp */
}
.dark-mode .btn-info:hover, .dark-mode .btn-info:focus, .dark-mode .btn-info:active, .dark-mode .btn-info.active {
    background-color: #225f68; /* JUSTERT IGJEN: Lysere av den enda dypere turkisen */
    border-color: #225f68;
    color: #dee2e6;
}
.dark-mode .btn-info.dropdown-toggle:active, .dark-mode .btn-info.dropdown-toggle.active, .dark-mode .btn-info.dropdown-toggle.open {
    background-color: #225f68;
    border-color: #225f68;
    color: #dee2e6;
}
.dark-mode .btn-info.dropdown-toggle:hover, .dark-mode .btn-info.dropdown-toggle:focus {
    background-color: #225f68;
    border-color: #225f68;
    color: #dee2e6;
}


.dark-mode .btn-warning {
    background-color: #8c6f2a; /* Alternativ 3: Dyp sennepsgul */
    border-color: #8c6f2a;
    color: #dee2e6; /* Justert: Lys tekst for warning */
}
.dark-mode .btn-warning:hover, .dark-mode .btn-warning:focus, .dark-mode .btn-warning:active, .dark-mode .btn-warning.active {
    background-color: #ad8c36; /* Alternativ 3: Lysere sennepsgul */
    border-color: #ad8c36;
    color: #dee2e6; /* Justert: Lys tekst for warning */
}
.dark-mode .btn-warning.dropdown-toggle:active, .dark-mode .btn-warning.dropdown-toggle.active, .dark-mode .btn-warning.dropdown-toggle.open {
    background-color: #ad8c36;
    border-color: #ad8c36;
    color: #dee2e6; /* Justert: Lys tekst for warning */
}
.dark-mode .btn-warning.dropdown-toggle:hover, .dark-mode .btn-warning:focus {
    background-color: #ad8c36;
    border-color: #ad8c36;
    color: #dee2e6; /* Justert: Lys tekst for warning */
}


.dark-mode .btn-danger {
    background-color: #7a3636; /* Alternativ 3: Dyp burgunder */
    border-color: #7a3636;
    color: #dee2e6; /* Lys tekst for danger knapp */
}
.dark-mode .btn-danger:hover, .dark-mode .btn-danger:focus, .dark-mode .btn-danger:active, .dark-mode .btn-danger.active {
    background-color: #994545; /* Alternativ 3: Lysere burgunder */
    border-color: #994545;
    color: #dee2e6;
}
.dark-mode .btn-danger.dropdown-toggle:active, .dark-mode .btn-danger.dropdown-toggle.active, .dark-mode .btn-danger.dropdown-toggle.open {
    background-color: #994545;
    border-color: #994545;
    color: #dee2e6;
}
.dark-mode .btn-danger.dropdown-toggle:hover, .dark-mode .btn-danger:focus {
    background-color: #994545;
    border-color: #994545;
    color: #dee2e6;
}


/* Skjemaelementer */
.dark-mode .form-control {
    background-color: #343a40; /* Mørk bakgrunn, ligner navbar/panel-heading */
    border-color: #495057;
    color: #dee2e6;
}
.dark-mode .form-control:focus {
    border-color: #6ea8fe;
    box-shadow: 0 0 0 0.2rem rgba(110, 168, 254, 0.25);
}
.dark-mode .form-control::placeholder {
    color: #adb5bd;
    opacity: 1;
}
/* Spesifikk justering for select-elementer */
.dark-mode select.form-control {
    background-color: #343a40; /* Samme mørke bakgrunn */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* Oppdaterer SVG-data for pilen til lys farge */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23dee2e6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
}

/* Overstyrer form-control inni modal-body for bedre fargetilpasning */
.dark-mode .modal-body .form-control {
    background-color: #2b2b2b; /* Matcher modal-body bakgrunn */
    border-color: #495057; /* Beholder samme border som andre form-controls */
    color: #dee2e6;
}

/* Må også overstyre select-pilen spesifikt for modal, hvis fargen endres */
.dark-mode .modal-body select.form-control {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23dee2e6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

/* Justering for select.input-sm */
.dark-mode select.form-control.input-sm {
    /* Justerer padding for å sentrere teksten vertikalt */
    padding-top: 5px; /* Mindre padding enn standard for å sentrere teksten */
    padding-bottom: 5px; /* Juster etter behov */
    height: 30px; /* Standard høyde for input-sm i BS3 */
    line-height: 1.5; /* Sikrer at teksten holder seg innenfor linjen */
    
    /* Skalerer ned pilen for å matche den mindre størrelsen */
    background-position: right 0.5rem center; /* Flytter pilen litt mer til venstre */
    background-size: 14px 10px; /* Reduserer pilens størrelse */
}

/* Input-group-addon og Label */
.dark-mode .input-group-addon {
    background-color: #343a40; /* Mørkere bakgrunn for addon */
    border-color: #495057; /* Mørkere border */
    color: #dee2e6; /* Lysere tekstfarge */
}
/* Tilpasning for input-group-addon inni modal-body */
.dark-mode .modal-body .input-group-addon {
    background-color: #212529; /* Enda mørkere, for å skille seg fra #2b2b2b, men fortsatt matche */
    border-color: #495057;
    color: #dee2e6;
}


.dark-mode label {
    color: #dee2e6; /* Sikrer at label-teksten er lys */
}


/* Tabeller */
.dark-mode .table { color: #dee2e6; }

.dark-mode .table > thead > tr > th,
.dark-mode .table > tbody > tr > th,
.dark-mode .table > tfoot > tr > th {
    border-top: none !important;
    border-bottom: 2px solid #495057 !important;
    vertical-align: bottom;
}

.dark-mode .table > thead > tr > td,
.dark-mode .table > tbody > tr > td,
.dark-mode .table > tfoot > tr > td {
    border-top-color: #495057;
}

/* For border-bordered tabeller */
.dark-mode .table-bordered { border-color: #495057; }
.dark-mode .table-bordered > thead > tr > th,
.dark-mode .table-bordered > tbody > tr > th,
.dark-mode .table-bordered > tfoot > tr > th,
.dark-mode .table-bordered > thead > tr > td,
.dark-mode .table-bordered > tbody > tr > td,
.dark-mode .table-bordered > tfoot > tr > td {
    border-color: #495057 !important;
}

.dark-mode .table-striped > tbody > tr:nth-of-type(odd) { background-color: #2b2b2b; }
.dark-mode .table-hover > tbody > tr:hover { background-color: #343a40; }
/* Kontekstuelle tabellrader */
.dark-mode .table > tbody > .active > td, .dark-mode .table > tbody > .active > th, .dark-mode .table > tfoot > .active > td, .dark-mode .table > tfoot > .active > th, .dark-mode .table > thead > .active > td, .dark-mode .table > thead > .active > th { background-color: #365d8c; color: #dee2e6; } /* Alternativ 3: Lys tekst for aktiv rad */
.dark-mode .table > tbody > .success > td, .dark-mode .table > tbody > .success > th, .dark-mode .table > tfoot > .success > td, .dark-mode .table > tfoot > .success > th, .dark-mode .table > thead > .success > td, .dark-mode .table > thead > .success > th { background-color: #2b6640; color: #dee2e6; } /* Alternativ 3: Lys tekst */
.dark-mode .table > tbody > .info > td, .dark-mode .table > tbody > .info > th, .dark-mode .table > tfoot > .info > td, .dark-mode .table > tfoot > .info > th, .dark-mode .table > thead > .info > td, .dark-mode .table > thead > .info > th { background-color: #1a4a51; color: #dee2e6; } /* JUSTERT IGJEN: Lys tekst for info */
.dark-mode .table > tbody > .warning > td, .dark-mode .table > tbody > .warning > th, .dark-mode .table > tfoot > .warning > td, .dark-mode .table > tfoot > .warning > th, .dark-mode .table > thead > .warning > td, .dark-mode .table > thead > .warning > th { background-color: #8c6f2a; color: #dee2e6; } /* Justert: Lys tekst for warning */
.dark-mode .table > tbody > .danger > td, .dark-mode .table > tbody > .danger > th, .dark-mode .table > tfoot > .danger > td, .dark-mode .table > tfoot > .danger > th, .dark-mode .table > thead > .danger > td, .dark-mode .table > thead > .danger > th { background-color: #7a3636; color: #dee2e6; } /* Alternativ 3: Lys tekst */

/* Varsler (.alert) */
.dark-mode .alert-success { background-color: #2b6640; border-color: #2b6640; color: #dee2e6; } /* Alternativ 3: Lys tekst for success */
.dark-mode .alert-info { background-color: #1a4a51; border-color: #1a4a51; color: #dee2e6; } /* JUSTERT IGJEN: Lys tekst for info */
.dark-mode .alert-warning { background-color: #8c6f2a; border-color: #8c6f2a; color: #dee2e6; } /* Justert: Lys tekst for warning */
.dark-mode .alert-danger { background-color: #7a3636; border-color: #7a3636; color: #dee2e6; } /* Alternativ 3: Lys tekst for danger */
.dark-mode .alert-dismissible .close { color: #dee2e6; opacity: 0.7; }
.dark-mode .alert-dismissible .close:hover { color: #fff; opacity: 1; }

/* Brødsmuler (.breadcrumb) */
.dark-mode .breadcrumb { background-color: #2b2b2b; border-radius: 4px; }
.dark-mode .breadcrumb > li { color: #adb5bd; }
.dark-mode .breadcrumb > li + li:before { color: #6c757d; }
.dark-mode .breadcrumb > .active { color: #dee2e6; }

/* Paginering (.pagination) */
.dark-mode .pagination > li > a, .dark-mode .pagination > li > span { background-color: #343a40; border-color: #495057; color: #6ea8fe; }
.dark-mode .pagination > li > a:hover, .dark-mode .pagination > li > a:focus, .dark-mode .pagination > li > span:hover, .dark-mode .pagination > li > span:focus { background-color: #495057; border-color: #6c757d; color: #a7caff; }
.dark-mode .pagination > .active > a, .dark-mode .pagination > .active > span, .dark-mode .pagination > .active > a:hover, .dark-mode .pagination > .active > span:hover, .dark-mode .pagination > .active > a:focus, .dark-mode .pagination > .active > span:focus { background-color: #6ea8fe; border-color: #6ea8fe; color: #212529; }
.dark-mode .pagination > .disabled > span, .dark-mode .pagination > .disabled > span:hover, .dark-mode .pagination > .disabled > span:focus, .dark-mode .pagination > .disabled > a, .dark-mode .pagination > .disabled > a:hover, .dark-mode .pagination > .disabled > a:focus { background-color: #343a40; border-color: #495057; color: #6c757d; }

/* Dropdowns */
.dark-mode .dropdown-menu { background-color: #2b2b2b; border: 1px solid #495057; }
.dark-mode .dropdown-menu > li > a { color: #dee2e6; }
.dark-mode .dropdown-menu > li > a:hover, .dark-mode .dropdown-menu > li > a:focus { background-color: #343a40; color: #6ea8fe; }
.dark-mode .dropdown-menu > .active > a, .dark-mode .dropdown-menu > .active > a:hover, .dark-mode .dropdown-menu > .active > a:focus { background-color: #6ea8fe; color: #212529; }
.dark-mode .dropdown-menu .divider { background-color: #495057; }

/* Modaler (.modal) */
.dark-mode .modal-content { background-color: #2b2b2b; border: 1px solid #495057; color: #dee2e6; }
.dark-mode .modal-header { background-color: #343a40; border-bottom: 1px solid #495057; color: #dee2e6; }
.dark-mode .modal-title { color: #dee2e6; }
.dark-mode .modal-header .close { color: #dee2e6; opacity: 0.7; text-shadow: none; }
.dark-mode .modal-header .close:hover { color: #fff; opacity: 1; }
.dark-mode .modal-footer { background-color: #343a40; border-top: 1px solid #495057; }

/* Thumbs (thumbnails) */
.dark-mode .thumbnail { background-color: #2b2b2b; border: 1px solid #495057; color: #dee2e6; }

/* Wells */
.dark-mode .well { background-color: #2b2b2b; border: 1px solid #495057; color: #dee2e6; }

/* Progress Bars */
.dark-mode .progress { background-color: #495057; }
.dark-mode .progress-bar { background-color: #6ea8fe; }

/* List Groups */
.dark-mode .list-group-item { background-color: #2b2b2b; border: 1px solid #495057; color: #dee2e6; }
.dark-mode a.list-group-item:hover, .dark-mode a.list-group-item:focus { background-color: #343a40; color: #6ea8fe; }
.dark-mode .list-group-item.active, .dark-mode .list-group-item.active:hover, .dark-mode .list-group-item.active:focus {
    background-color: #365d8c; /* Alternativ 3: Lysere primary-bakgrunn for aktiv */
    border-color: #365d8c;
    color: #dee2e6; /* Lys tekst for aktive elementer mot lysere primary */
}
.dark-mode .list-group-item-success { background-color: #2b6640; border-color: #2b6640; color: #dee2e6; }
.dark-mode .list-group-item-success.list-group-item-action:hover, .dark-mode .list-group-item-success.list-group-item-action:focus { background-color: #368050; }
.dark-mode .list-group-item-info { background-color: #1a4a51; border-color: #1a4a51; color: #dee2e6; }
.dark-mode .list-group-item-info.list-group-item-action:hover, .dark-mode .list-group-item-info.list-group-item-action:focus { background-color: #225f68; }
.dark-mode .list-group-item-warning { background-color: #8c6f2a; border-color: #8c6f2a; color: #dee2e6; }
.dark-mode .list-group-item-warning.list-group-item-action:hover, .dark-mode .list-group-item-warning.list-group-item-action:focus { background-color: #ad8c36; }
.dark-mode .list-group-item-danger { background-color: #7a3636; border-color: #7a3636; color: #dee2e6; }
.dark-mode .list-group-item-danger.list-group-item-action:hover, .dark-mode .list-mode-item-danger.list-group-item-action:focus { background-color: #994545; }


/* Carousel */
.dark-mode .carousel-control .glyphicon-chevron-left, .dark-mode .carousel-control .glyphicon-chevron-right, .dark-mode .carousel-control .icon-prev, .dark-mode .carousel-control .icon-next { color: #dee2e6; }
.dark-mode .carousel-caption { color: #dee2e6; background-color: rgba(0, 0, 0, 0.5); }
.dark-mode .carousel-indicators li { border-color: #dee2e6; }
.dark-mode .carousel-indicators .active { background-color: #dee2e6; }

/* Jumbotron */
.dark-mode .jumbotron { background-color: #2b2b2b; color: #dee2e6; }

/* Responsive Embeds */
.dark-mode .embed-responsive-item { background-color: #212529; }

/* Figcaption for images */
.dark-mode figure.caption { color: #dee2e6; }

/* Close icon */
.dark-mode .close { color: #dee2e6; text-shadow: none; opacity: 0.7; }
.dark-mode .close:hover, .dark-mode .close:focus { color: #fff; opacity: 1; }

/* Horisontal linje */
.dark-mode hr { border-top: 1px solid #495057; }

/* Custom for scrollbars */
.dark-mode ::-webkit-scrollbar { width: 10px; height: 10px; }
.dark-mode ::-webkit-scrollbar-track { background: #2b2b2b; }
.dark-mode ::-webkit-scrollbar-thumb { background: #6c757d; border-radius: 5px; }
.dark-mode ::-webkit-scrollbar-thumb:hover { background: #868e96; }

/* Tooltip styling for dark mode - Lysere bakgrunn */
.dark-mode .tooltip.in { opacity: 0.9; }

.dark-mode .tooltip-inner {
    background-color: #6c757d; /* Lysere grå, som er --bs-gray-600 i BS5.3 */
    color: #dee2e6; /* Lys tekstfarge */
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
}

/* Tooltip arrows for dark mode (må matche inner background) */
.dark-mode .tooltip.top .tooltip-arrow { border-top-color: #6c757d; }
.dark-mode .tooltip.bottom .tooltip-arrow { border-bottom-color: #6c757d; }
.dark-mode .tooltip.left .tooltip-arrow { border-left-color: #6c757d; }
.dark-mode .tooltip.right .tooltip-arrow { border-right-color: #6c757d; }