/* Grunnleggende nullstilling og variabeldefinisjoner */

:root {
    --bg-color-light: #f4f4f4;
    --text-color-light: #333;
    --header-bg-light: #333;
    --header-text-light: #fff;
    --header-hover-bg-light: #555;
    --button-bg-light: #ddd;
    --button-text-light: #333; /* Brukes for dropdown-pil i JS */
    --footer-bg-light: #ccc;
    --footer-text-light: #333;

    --bg-color-dark: #222;
    --text-color-dark: #f4f4f4;
    --header-bg-dark: #1a1a1a;
    --header-text-dark: #ddd;
    --header-hover-bg-dark: #444;
    --button-bg-dark: #555;
    --button-text-dark: #f4f4f4; /* Brukes for dropdown-pil i JS */
    --footer-bg-dark: #111;
    --footer-text-dark: #aaa;

    /* Start med lyst tema (disse blir overstyrt av html.dark-mode) */
    --bg-color: var(--bg-color-light);
    --text-color: var(--text-color-light);
    --header-bg: var(--header-bg-light);
    --header-text: var(--header-text-light);
    --header-hover-bg: var(--header-hover-bg-light);
    --button-bg: var(--button-bg-light);
    --button-text: var(--button-text-light);
    --footer-bg: var(--footer-bg-light);
    --footer-text: var(--footer-text-light);

    /* --clock-font: 'Orbitron', sans-serif; */ /* FJERNET: Brukes ikke lenger for klokke */
    --transition-speed: 0.3s;
}

/* Mørkt tema overstyringer - Bruker html.dark-mode */
html.dark-mode { /* ENDRET: fra body.dark-mode */
    --bg-color: var(--bg-color-dark);
    --text-color: var(--text-color-dark);
    --header-bg: var(--header-bg-dark);
    --header-text: var(--header-text-dark);
    --header-hover-bg: var(--header-hover-bg-dark);
    --button-bg: var(--button-bg-dark);
    --button-text: var(--button-text-dark);
    --footer-bg: var(--footer-bg-dark);
    --footer-text: var(--footer-text-dark);
}

     /* --- TILPASSET FM-LOGG STYLING --- */
     #fmlogger-content {
        font-family: system-ui, sans-serif;
        color: var(--text-color);
     }
	 #fmlogger-content .filters input[type="number"] {
		width: 5rem;                  /* fast bredde */
		padding: 0.35rem 0.6rem;      /* innvendig margin */
		border: 1px solid var(--button-bg);
		border-radius: 0.375rem;
		background: var(--bg-color);
		color: var(--text-color);
		text-align: right;            /* tall justeres til høyre */
		transition: border-color 0.2s;
	}

	#fmlogger-content .filters input[type="number"]:focus {
		outline: none;
		border-color: var(--header-hover-bg);
		box-shadow: 0 0 0 2px rgba(0,0,0,0.05);
	}

	#fmlogger-content .filters input[type="number"]::-webkit-inner-spin-button,
	#fmlogger-content .filters input[type="number"]::-webkit-outer-spin-button {
		-webkit-appearance: none;
		margin: 0;
	}
	
	#fmlogger-content .filters input[type="number"] {
		-moz-appearance: textfield;
		appearance: textfield;  /* standardisert */
	}
	
     #fmlogger-content .card {
        background: var(--bg-color);
        border: 1px solid var(--button-bg);
        border-radius: 0.75rem;
        box-shadow: 0 2px 6px rgba(0,0,0,.05);
        padding: 1.5rem;
        margin-bottom: 2rem;
        transition: background-color var(--transition-speed) ease, border-color var(--transition-speed) ease;
		position: relative;
     }
     #fmlogger-content canvas { max-width: none; }
     #fmlogger-content .filters { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1rem; }
     #fmlogger-content select,
     #fmlogger-content button,
     #fmlogger-content input[type="date"],
     #fmlogger-content input[type="file"] {
        padding: 0.35rem 0.6rem;
        border: 1px solid var(--button-bg);
        border-radius: 0.375rem;
        background: var(--bg-color);
        color: var(--text-color);
        cursor: pointer;
        transition: background-color var(--transition-speed) ease, border-color var(--transition-speed) ease, color var(--transition-speed) ease;
     }
     #fmlogger-content button:hover { background: var(--header-hover-bg); }
     #fmlogger-content #chartWrap { width: 100%; overflow-x: auto; border: 1px solid var(--button-bg); border-radius: 0.5rem; padding: 0.5rem; background: var(--bg-color); transition: background-color var(--transition-speed) ease, border-color var(--transition-speed) ease; }
     #fmlogger-content ul { margin: 0; padding-left: 1.5rem; list-style: disc; margin-bottom: 1rem; }
     #fmlogger-content li { margin-bottom: 0.5rem; }
     /* DataTables Styling */
     #fmlogger-content .dataTables_wrapper { color: var(--text-color) !important; }
     #fmlogger-content .dataTables_filter input,
     #fmlogger-content .dataTables_length select { background: var(--bg-color) !important; color: var(--text-color) !important; border: 1px solid var(--button-bg) !important; border-radius: 4px; padding: 4px; }
     #fmlogger-content .dataTables_paginate .paginate_button { color: var(--text-color) !important; border: 1px solid var(--button-bg) !important; background: var(--bg-color) !important; margin: 0 2px; border-radius: 4px; }
     #fmlogger-content .dataTables_paginate .paginate_button.current,
     #fmlogger-content .dataTables_paginate .paginate_button:hover { background: var(--header-hover-bg) !important; color: var(--header-text) !important; border-color: var(--header-hover-bg) !important; }
     #fmlogger-content .dataTables_paginate .paginate_button.disabled { opacity: 0.5; cursor: default; }
     #fmlogger-content table.dataTable thead th,
     #fmlogger-content table.dataTable thead td { border-bottom: 2px solid var(--button-bg); }
     #fmlogger-content table.dataTable tbody tr { background-color: transparent !important; }
     #fmlogger-content table.dataTable tbody tr:hover { background-color: var(--header-hover-bg) !important; color: var(--header-text) !important; }
     #fmlogger-content table.dataTable tbody td { color: var(--text-color) !important; }
     #fmlogger-content table.dataTable tbody tr:hover td{ color: var(--header-text) !important; }
     /* Dark Mode Overstyringer */
     body.dark-mode #fmlogger-content .card { background: var(--bg-color-dark); border-color: var(--button-bg-dark); }
     body.dark-mode #fmlogger-content select,
     body.dark-mode #fmlogger-content button,
     body.dark-mode #fmlogger-content input[type="date"],
     body.dark-mode #fmlogger-content input[type="file"] { background: var(--bg-color-dark); color: var(--text-color-dark); border-color: var(--button-bg-dark); }
     body.dark-mode #fmlogger-content button:hover { background: var(--header-hover-bg-dark); color: var(--header-text-dark); }
     body.dark-mode #fmlogger-content #chartWrap { background: var(--bg-color-dark); border-color: var(--button-bg-dark); }
     body.dark-mode #fmlogger-content .dataTables_wrapper { color: var(--text-color-dark) !important; }
     body.dark-mode #fmlogger-content .dataTables_filter input,
     body.dark-mode #fmlogger-content .dataTables_length select { background: var(--bg-color-dark) !important; color: var(--text-color-dark) !important; border: 1px solid var(--button-bg-dark) !important; }
     body.dark-mode #fmlogger-content .dataTables_paginate .paginate_button { color: var(--text-color-dark) !important; border: 1px solid var(--button-bg-dark) !important; background: var(--bg-color-dark) !important; }
     body.dark-mode #fmlogger-content .dataTables_paginate .paginate_button.current,
     body.dark-mode #fmlogger-content .dataTables_paginate .paginate_button:hover { background: var(--header-hover-bg-dark) !important; color: var(--header-text-dark) !important; border-color: var(--header-hover-bg-dark) !important; }
     body.dark-mode #fmlogger-content table.dataTable thead th,
     body.dark-mode #fmlogger-content table.dataTable thead td { border-bottom: 2px solid var(--button-bg-dark); }
     body.dark-mode #fmlogger-content table.dataTable tbody tr:hover { background-color: var(--header-hover-bg-dark) !important; color: var(--header-text-dark) !important; }
     body.dark-mode #fmlogger-content table.dataTable tbody td { color: var(--text-color-dark) !important; }
     body.dark-mode #fmlogger-content table.dataTable tbody tr:hover td{ color: var(--header-text-dark) !important; }


#fmlogger-content table.dataTable td small {
  font-size: 0.8em;
  color: var(--text-color);
  line-height: 1.1;
}

.child-details {
  background: var(--bg-color-hover);
  padding: 0.5rem 1rem;
  border-left: 3px solid var(--button-bg);
}
#logTable tbody tr.shown {
  background: var(--header-hover-bg);
}

.reset-top-btn {
    position: absolute;
    top: 1rem;                   /* avstand fra toppen av kortet */
    right: 1rem;                 /* avstand fra høyre kant        */
    margin: 0;                   /* null ut gamle margin-verdier  */
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    line-height: 1.6;
    transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
}

/* Toppbar */
.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--header-bg);
    color: var(--header-text);
    padding: 1rem 2rem;
    position: sticky; /* Holder seg på toppen */
    top: 0;
    z-index: 1000; /* Sørger for at den er over annet innhold */
    transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease; /* Fargeovergang for header-tekst også */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* Logo i header */
.site-logo img {
    height: 45px; /* <-- JUSTER DENNE HØYDEN etter behov */
    width: auto;  /* Lar bredden justere seg automatisk */
    display: block; /* Hindrer ekstra bunnmarg på bildet */
    /* Du kan legge til margin hvis nødvendig, f.eks.: */
    /* margin-right: 1rem; */ 
}

/* Sikre at logoen og andre elementer er vertikalt sentrert */
.topbar {
    /* ... eksisterende stiler ... */
    align-items: center; /* Denne bør allerede være der */
}

/* Navigasjonsmeny */
nav {
    flex-grow: 1; /* Lar nav ta opp ledig plass for bedre sentrering */
    display: flex;
    justify-content: center; /* Sentrerer menyen */
}

nav ul {
    list-style: none;
    display: flex;
    gap: 1rem; /* Avstand mellom knapper */
}

nav a {
    color: var(--header-text);
    text-decoration: none;
    padding: 0.8rem 1.2rem;
    border-radius: 5px;
    transition: background-color var(--transition-speed) ease, transform 0.2s ease, box-shadow 0.2s ease, color var(--transition-speed) ease; /* La farge endres mykt */
    position: relative;
    overflow: hidden;
}

/* Knapper Hover Effekt */
nav a::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 3px;
    background-color: #0f0;
    transition: width var(--transition-speed) ease, left var(--transition-speed) ease;
}

nav a:hover::before,
nav a.active::before {
    width: 100%;
    left: 0;
}

nav a:hover,
nav a:focus {
    background-color: var(--header-hover-bg);
    color: var(--header-text); /* Sikre at tekstfarge beholdes/endres riktig */
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

nav a.active {
    background-color: var(--header-hover-bg);
    font-weight: bold;
}

nav a:active {
    transform: translateY(0px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}


/* Container for språk/tema-kontroller (plassert lengst til høyre) */
.header-controls {
    display: flex;
    align-items: center;
    gap: 0.8rem; /* Avstand mellom språkvelger og temaknapp */
}

/* Språkvelger dropdown */
#language-selector {
    background-color: var(--button-bg);
    color: var(--button-text);
    border: 1px solid var(--header-text);
    border-radius: 5px;
    padding: 0.4rem 0.6rem;
    cursor: pointer;
    font-size: 0.9em;
    transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease, border-color var(--transition-speed) ease;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    /* JS setter riktig farget SVG basert på tema */
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23333%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right 0.7em top 50%, 0 0;
    background-size: 0.65em auto, 100%;
    padding-right: 2em; /* Plass til pilen */
}

#language-selector:hover {
    /* Juster hover border farge hvis ønskelig, kanskje bruke en variabel? */
    border-color: var(--header-hover-bg); 
}


/* Tema-bytte knapp */
.theme-toggle-button {
    background-color: var(--button-bg);
    color: var(--button-text);
    border: 1px solid var(--header-text);
    border-radius: 20px;
    padding: 0.5rem;
    cursor: pointer;
    font-size: 1.2rem;
    line-height: 1;
    transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease, transform 0.2s ease, border-color var(--transition-speed) ease;
    position: relative;
    width: 50px;
    height: 30px;
    overflow: hidden;
}

.theme-toggle-button .icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.theme-toggle-button .sun {
    opacity: 1; /* Synlig i lyst tema */
}

.theme-toggle-button .moon {
    opacity: 0; /* Skjult i lyst tema */
    transform: translate(-50%, -50%) rotate(180deg);
}

.theme-toggle-button:hover {
    transform: scale(1.1);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.3); /* Denne skyggen funker best på mørk bakgrunn */
}


/* Dark mode stiler for kontroller - Bruker html.dark-mode */
html.dark-mode .theme-toggle-button .sun { /* ENDRET: fra body.dark-mode */
    opacity: 0;
    transform: translate(-50%, -50%) rotate(-180deg);
}

html.dark-mode .theme-toggle-button .moon { /* ENDRET: fra body.dark-mode */
    opacity: 1;
    transform: translate(-50%, -50%) rotate(0deg);
}

/* Mørk modus for språkvelger */
/* Stiler for selve velgeren settes av JS/variabler, men hover kan justeres */
html.dark-mode #language-selector:hover { /* ENDRET: fra body.dark-mode */
     border-color: var(--header-text-dark); /* Matcher temaknappens kant i mørk modus */
}


/* Hovedinnhold */
main {
    padding: 2rem;
    max-width: 1200px;
    margin: 2rem auto;
    /* background-color: rgba(var(--bg-color-rgb, 244, 244, 244), 0.8); */ /* FJERNET: Unødvendig med spesifikke regler under */
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(0,0,0,0.1);
    transition: background-color var(--transition-speed) ease;
}

/* Bakgrunn for main i lyst tema */
html:not(.dark-mode) main { /* ENDRET: fra body:not(...) */
    background-color: rgba(255, 255, 255, 0.8); /* Litt gjennomsiktig hvit */
}
/* Bakgrunn for main i mørkt tema */
html.dark-mode main { /* ENDRET: fra body.dark-mode */
    background-color: rgba(51, 51, 51, 0.8); /* Mørkere, litt gjennomsiktig */
}


h1, h2 {
    margin-bottom: 1rem;
    color: var(--text-color);
    transition: color var(--transition-speed) ease; /* Myk fargeovergang for titler */
}

p {
    margin-bottom: 1rem;
}

/* Footer */
footer {
    text-align: center;
    padding: 1rem;
    margin-top: 2rem;
    background-color: var(--footer-bg);
    color: var(--footer-text);
    font-size: 0.9em;
    transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
}

/* --- FMList Logger Spesifikke Stiler (fra fmlist-logger.html, nå i hoved-CSS) --- */
/* Disse gjelder kun innhold inne i #fmlogger-content */

#fmlogger-content {
    font-family: system-ui, sans-serif; /* Egen font for dette innholdet */
}

#fmlogger-content .card {
    /* Bruker ikke tema-variabler her hvis det skal ha et fast utseende */
    background: #ffffff; /* F.eks. alltid hvit bakgrunn */
    border: 1px solid #e5e7eb; /* Fast grå kant */
    color: #111827; /* Fast mørk tekst */
    border-radius: 0.75rem;
    box-shadow: 0 2px 6px rgba(0,0,0,.05);
    padding: 1.5rem;
    margin-bottom: 2rem;
	position: relative;
    /* Ingen transition hvis fargene er faste */
}

#fmlogger-content select,
#fmlogger-content button,
#fmlogger-content input[type="date"],
#fmlogger-content input[type="file"] {
    padding: 0.35rem 0.6rem;
    border: 1px solid #d1d5db; /* Litt mørkere kant for input */
    border-radius: 0.375rem;
    background: #ffffff; /* Hvit bakgrunn */
    color: #111827; /* Mørk tekst */
    cursor: pointer;
}
#fmlogger-content button:hover {
    background: #f3f4f6; /* Lys grå hover for knapper */
}

/* Mørk modus tilpasninger KUN for FMList Logger hvis det skal følge tema */
/* Hvis FMList skal ha fast utseende, fjern disse .dark-mode reglene */
html.dark-mode #fmlogger-content .card {
    background: #1e293b; /* Mørk blågrå kortbakgrunn */
    border-color: #334155; /* Mørkere kant */
    color: #f1f5f9; /* Lys tekst */
}
html.dark-mode #fmlogger-content select,
html.dark-mode #fmlogger-content button,
html.dark-mode #fmlogger-content input[type="date"],
html.dark-mode #fmlogger-content input[type="file"],
html.dark-mode #fmlogger-content input[type="number"], /* <-- DENNE ER LAGT TIL */
#fmlogger-content .dropdown-display   /* <-- OG DENNE */
{
    background: #0f172a; /* Veldig mørk bakgrunn */
    color: #f1f5f9; /* Lys tekst */
    border-color: #334155; /* Mørk kant */
}
html.dark-mode #fmlogger-content button:hover {
    background: #334155; /* Mørk hover */
}


#fmlogger-content #summary h2 {
    margin-bottom: 1.5rem;
    text-align: center;
}

#fmlogger-content .summary-content-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    gap: 1.5rem;
    text-align: left;
}

#fmlogger-content .summary-main-list,
#fmlogger-content .summary-propa-list {
    margin-bottom: 1rem;
}

#fmlogger-content .summary-main-list ul,
#fmlogger-content .summary-propa-list ul {
    margin-top: 0.5rem;
    padding-left: 1.5rem;
    list-style-position: outside;
}

#fmlogger-content .summary-propa-list h3 {
    margin-bottom: 0.5rem;
}

#fmlogger-content .summary-main-list b {
     font-weight: 600; /* Litt uthevet, men ikke helt fet */
     margin-right: 0.5em;
}
/* --- Slutt FMList Logger Spesifikke Stiler --- */
/* --------------------------------------------------
   Side-layout: to kolonner, med egen bakgrunn
-------------------------------------------------- */
#home-page .page-container {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 1.5rem;
  max-width: 1200px;
  margin: 2rem auto;
  background: var(--header-bg);
  border-radius: 0.75rem;
  padding: 2rem;
}

/* Responsivt */
@media (max-width: 768px) {
  #home-page .page-container {
    display: block;
    padding: 1rem;
    margin: 1rem;
  }
}

/* --------------------------------------------------
   “Kort”-styling du gjenbruker
-------------------------------------------------- */
.card {
  background: var(--bg-color);                /* skimrende kortbakgrunn */
  border: 1px solid var(--button-bg);
  border-radius: 0.75rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  transition: background-color var(--transition-speed) ease,
              color var(--transition-speed) ease;
}

/* Større kort for hovedinnhold */
.large-card {
  padding: 2rem;
}

/* --------------------------------------------------
   Sidebar: stable widgetene vertikalt
-------------------------------------------------- */
#home-page .sidebar {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
#home-page .sidebar .odx-widget-wrapper {
  width: 100%;
}

main#home-page {
  /* Fjern bakgrunn, skygge og avrunding kun her */
  background: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
}

/* Responsivitet */
@media (max-width: 768px) {
    .topbar {
        flex-direction: column;
        padding: 1rem;
        position: relative; /* Nødvendig for absolutt posisjonering av barn */
        align-items: center; /* Sentrer klokke og nav når de er i kolonne */
    }
    .clock {
        margin-bottom: 1rem;
        font-size: 1.5em;
    }
    nav {
        width: 100%; /* La nav ta full bredde */
        justify-content: center; /* Sentrer ul */
        margin-bottom: 1rem; /* Avstand før kontroller */
    }
    nav ul {
        flex-direction: column; /* Stabler vertikalt */
        align-items: center; /* Sentrerer elementer i listen */
        gap: 0.5rem;
        /* margin-bottom: 1rem; */ /* Flyttet til nav */
        padding-left: 0; /* Fjern standard ul padding */
    }
    nav a {
        padding: 0.5rem 1rem;
        display: block; /* Får lenkene til å ta mer bredde */
        text-align: center;
        width: 150px; /* Gi knapper fast bredde */
    }

    .header-controls {
        position: absolute;
        top: 1rem;
        right: 1rem;
        /* gap justeres etter behov */
    }

    .theme-toggle-button {
        position: static;
    }

    main {
        padding: 1.5rem; /* Litt mindre padding på små skjermer */
        margin: 1rem auto; /* Mindre marg */
    }

}

#home-page .page-panel {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;    /* <<< Legg til denne */
  gap: 2rem;
  color: var(--text-color);
  max-width: 1200px;
  margin: 2rem auto;
  padding: 0rem;
  background: var(--bg-color);
}

/* Velkomstkort (venstre) – beholder lett indre border */
#home-page .welcome-panel {
  background: var(--footer-bg);      /* lys i light-mode, mørk i dark-mode */
  color: var(--text-color);         /* sørg for at teksten er synlig */
  border: 1px solid var(--button-bg);
  border: 1px solid var(--button-bg);
  border-radius: 0.5rem;
  box-shadow: 0 0 10px rgba(0,255,0,0.5);
  padding: 1.5rem;
  padding-top: 1rem;
}

/* ---------- SIDEBAR ------------------------------------------------ */
#home-page .sidebar {
  width: 290px;
  justify-self: end;
  background: transparent;
  color: var(--text-color);
  padding: 0rem;
  padding-left: 0rem;
  display: flex;
  flex-direction: column;
  align-items: center;   /* sentrer alle barn horisontalt  */
  text-align: center;    /* sentrer selve teksten           */
  gap: 1rem;
  align-self: start;
}

/* Widget-wrapper skal fortsatt fylle hele bredden */
#home-page .sidebar .odx-widget-wrapper{
  width:100%;
  padding-left:1%;   /* 5 % luft på hver side  */
  padding-right:1%;
  box-sizing:border-box; /* så padding + bredde ikke flytter kantene ut */
}

/* Litt luft under introduksjonen */
#home-page .sidebar-intro { margin: 0 0 .5rem 0; }

.sidebar-panel {
  width: 290px;
  background: var(--header-bg);
  border: 1px solid var(--button-bg);
  border-radius: 0.5rem;
  overflow: hidden;
  color: var(--text-color);

}

/* Header‐baren */
.sidebar-header {
  background: var(--button-bg);
  color: var(--text-color);
  font-weight: 600;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
}

/* Innholdet under header */
.sidebar-content {
  width: 290px;
  padding: 1.4rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  color: var(--text-color);
}

/* Spacer mellom panelene */
.spacer {
  height: 0rem;
}
    .filters select,
    .dropdown-display {
        -webkit-appearance: none; -moz-appearance: none; appearance: none;
        display: inline-block;
        width: 100%;
        height: 30px;
        padding: 6px 12px;
        font-size: 1rem;
        font-weight: 400;
        line-height: 1;
        color: #ced4da;
        background-color: #212529;
        background-clip: padding-box;
        border: 1px solid #495057;
        border-radius: 4px;
        transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
        box-sizing: border-box;
    }
    
    /* Spesifikke stiler for vår tilpassede rullgardin */
    .custom-dropdown {
        position: relative;
        width: 100%;

    }
    .dropdown-display {
        cursor: pointer;
        display: flex;
        align-items: center;
		border-radius: 4px;
		
    }
    .dropdown-display::after {
        font-size: 0.7em;
        margin-left: auto;
        transition: transform 0.2s ease;
    }
    .custom-dropdown.open .dropdown-display::after {
        transform: rotate(180deg);
    }
    .dropdown-options {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: #212529;
        border: 1px solid #495057;
        border-top: none;
		border-radius: 4px;
		color: #ced4da
        max-height: 200px;
        overflow-y: auto;
        z-index: 1000;
    }
	
    .custom-dropdown.open .dropdown-options {
        display: block;
    }
    .dropdown-option {
        padding: 8px 12px;
        cursor: pointer;
        color: #ced4da;
        font-size: 0.9rem;
    }
    .dropdown-option:hover {
        background-color: #495057;
    }
    .dropdown-option.active {
        background-color: #0d6efd;
        color: white;
        font-weight: bold;
    }


/* Ny hovedregel for selve filter-linjen */
.filters {
    display: flex;
    flex-wrap: wrap;        /* Lar elementer gå til neste linje på små skjermer */
    align-items: flex-end;    /* VIKTIG: Justerer alle elementer langs bunnlinjen */
    gap: 1rem 1.5rem;       /* Luft mellom elementene (vertikalt og horisontalt) */
}

/* Regel for hver filter-gruppe */
.filter-item {
    min-width: 100px; /* Sørger for at elementene har en fornuftig minimumsbredde */
}

/* Stil for selve etiketten (teksten over input-feltet) */
.filter-item > span {
    display: block;         /* Tvinger den til å ta opp sin egen linje */
    margin-bottom: 0.25rem; /* Liten avstand ned til input-feltet */
    font-size: 0.9rem;
    color: #adb5bd;
}

/* Egen regel for RDS-checkboxen for å justere den perfekt */
.filter-item-rds {
    min-width: auto; /* La denne ta den plassen den trenger */
    padding-bottom: 0.5rem; /* Dytter den litt opp for å matche bunnlinjen til input-feltene */
}

.filters input[type="date"],
.filters input[type="number"] {
    height: 30px; /* Setter høyden lik de andre feltene */
    
    /* Viktig for at høyden skal bli korrekt med padding og border */
    box-sizing: border-box; 
    
    /* Bonus: Legger til litt stil for å matche de andre feltene perfekt */
    background-color: #212529;
    border: 1px solid #495057;
    border-radius: 4px;
    color: #ced4da;
    padding: 6px 12px;
}

.map-link-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    transition: background-color 0.2s ease;
}

.map-link-btn:hover {
    background-color: rgba(255, 255, 255, 0.15);
}

/* Stil for selve SVG-ikonet */
.map-link-btn svg {
    width: 16px;
    height: 16px;
    fill: #adb5bd; /* Lys grå farge som passer temaet */
}

/* Fargekoding for KM-kolonnen i tabellen */
.km-green-yellow {
    background-color: rgba(173, 255, 47, 0.3) !important; /* GreenYellow med 40% gjennomsiktighet */
    color: #e9ecef !important; /* Lysere tekst for bedre kontrast */
}
.km-yellow {
    background-color: rgba(255, 215, 0, 0.3) !important; /* Gold/Yellow med 40% gjennomsiktighet */
    color: #e9ecef !important;
}
.km-orange {
    background-color: rgba(255, 165, 0, 0.45) !important; /* Orange med 45% gjennomsiktighet */
    color: #e9ecef !important;
}
.km-red {
    background-color: rgba(220, 53, 69, 0.45) !important; /* Rød med 50% gjennomsiktighet */
    color: #e9ecef !important;
}



#fmlogger-content .card {
    margin-bottom: 1.5rem; /* Standard avstand mellom kort */
}


/* 2. LAYOUT FOR KONTROLL-LINJEN OVER LAND-GRAFEN */
#chartControls {
    display: flex;
    justify-content: space-between; /* Skyver gruppene fra hverandre */
    align-items: center;            /* Sentrerer dem vertikalt */
    width: 100%;                    /* Tar full bredde av forelder-kortet */
    margin-bottom: 1rem;            /* Luft mellom kontroller og selve graf-canvasen */
}

/* 3. INTERN JUSTERING (uendret, men nødvendig) */
.chart-controls-left, .chart-pagination-controls {
    display: flex;
    align-items: center;
}

.chart-pagination-controls > *:not(:last-child) {
    margin-right: 0.5rem;
}