@import url('lib/open-iconic/font/css/open-iconic-bootstrap.min.css');

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a, .btn-link {
    color: #0366d6;
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #1b6ec2;
    --bs-btn-border-color: #1861ac;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #175a9e;
    --bs-btn-hover-border-color: #144e88;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #144e88;
    --bs-btn-active-border-color: #114374;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #1b6ec2;
    --bs-btn-disabled-border-color: #1861ac;
}

.btn {
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 12px;
    padding-right: 12px;
}

.btn-sm {
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 8px;
    padding-right: 8px;
}

app {
    position: relative;
    display: flex;
    flex-direction: column;
}

.top-row {
    height: 3.5rem;
    display: flex;
    align-items: center;
    white-space: nowrap;
}

/* min-width: 0 så att innehållet inte kan göra ytan bredare än sidan och trycka ihop sidomenyn,
   breda delar som plutonsschemats tidslinje scrollar då i sidled inuti sin egen ruta */
.main {
    flex: 1;
    min-width: 0;
}

    .main .top-row {
        background-color: #f7f7f7;
        border-bottom: 1px solid #d6d5d5;
        justify-content: flex-end;
    }

        .main .top-row > a, .main .top-row .btn-link {
            white-space: nowrap;
            margin-left: 1.5rem;
        }

        .main .top-row a:first-child {
            overflow: hidden;
            text-overflow: ellipsis;
        }

.sidebar {
    /*background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);*/
    background-color: rgb(5, 39, 103);
}

    .sidebar .top-row {
        background-color: rgba(0,0,0,0.4);
    }

    .sidebar .navbar-brand {
        font-size: 1.1rem;
    }

    /* Open Iconic och Font Awesome ritas i samma ikonkolumn så att alla
       menyrader får identisk indentering och baslinje. Gäller bara
       menyraderna - i toppbaren ska ikonerna vara så breda som glyfen,
       annars blir det ett stort tomrum mellan huset och klockan. */
    .sidebar .nav-item .oi,
    .sidebar .nav-item .fa-solid, .sidebar .nav-item .fas,
    .sidebar .nav-item .fa-regular, .sidebar .nav-item .far,
    .sidebar .nav-item .fa-brands, .sidebar .nav-item .fab,
    .sidebar .btn .oi,
    .sidebar .btn .fa-solid, .sidebar .btn .fas,
    .sidebar .btn .fa-regular, .sidebar .btn .far,
    .sidebar .btn .fa-brands, .sidebar .btn .fab {
        position: relative;
        top: 0;
        display: inline-block;
        width: 2rem;
        font-size: 1.1rem;
        line-height: 1;
        text-align: center;
        vertical-align: -0.125em;
    }

    .sidebar .nav-item {
        font-size: 0.9rem;
        padding-bottom: 0.5rem;
        white-space: nowrap
    }

        .sidebar .nav-item:first-of-type {
            padding-top: 1rem;
        }

        .sidebar .nav-item:last-of-type {
            padding-bottom: 1rem;
        }

        .sidebar .nav-item a {
            color: #d7d7d7;
            border-radius: 4px;
            height: 2rem;
            display: flex;
            align-items: center;
            line-height: 2rem;
        }

            .sidebar .nav-item a.active {
                background-color: rgba(255,255,255,0.25);
                color: white;
            }

            .sidebar .nav-item a:hover {
                background-color: rgba(255,255,255,0.1);
                color: white;
            }

.content {
    padding-top: 1.1rem;
    height: calc(100% - 3.5rem);
}

.navbar-toggler {
    background-color: rgba(255, 255, 255, 0.1);
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

@media (max-width: 767.98px) {
    .main .top-row:not(.auth) {
        display: none;
    }

    .main .top-row.auth {
        justify-content: space-between;
    }

    .main .top-row a, .main .top-row .btn-link {
        margin-left: 0;
    }

    /* I den smala layouten är toppbaren sidans översta rad. Den delas i tre
       spalter så att inloggningsuppgifterna hamnar mitt i baren oavsett hur
       breda husikonen och hamburgaren är. */
    .sidebar .top-row.toppbar {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
    }

        .sidebar .top-row.toppbar > .navbar-brand {
            justify-self: start;
        }

        .sidebar .top-row.toppbar > .toppbar-mitten {
            justify-self: center;
        }

        .sidebar .top-row.toppbar > .toppbar-hoger {
            justify-self: end;
        }
}

@media (min-width: 768px) {
    app {
        flex-direction: row;
    }

    /* I den breda layouten ligger baren i den 250px breda sidomenyn. Där finns
       ingen sidyta att centrera mot, så husikonen får samma indrag som
       menyraderna (px-3) i stället för innehållsytans px-2. */
    .sidebar .top-row.toppbar {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .sidebar {
        width: 250px;
        min-height: 100vh;
        position: sticky;
        top: 0;
    }

    .main .top-row {
        top: 0;
    }

    .main > div {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }

    .navbar-toggler {
        display: none;
    }

    /* Hamburgaren är dold, så temaväljaren behöver inget avstånd till den och
       hamnar i linje med menyradernas högerkant. */
    .sidebar .toppbar-hoger .tema-valjare {
        margin-right: 0 !important;
    }

    .sidebar .collapse {
        /* Never collapse the sidebar for wide screens */
        display: block;
    }
}

div.nav-item li.nav-item {
    padding-top: 0px !important;
}

.nav-item div {
    color: #d7d7d7 !important;
    border-radius: 4px;
    height: 2rem;
    display: flex;
    align-items: center;
    line-height: 2rem;
}

.sidebar .nav-item {
    padding-bottom: 0.5rem !important;
}

/* Tooltip container */
.mytooltip {
    position: relative;
    display: inline-flex;
    /*border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
    /*opacity: 1;*/
}

    /* Tooltip text */
    .mytooltip .tooltiptext {
        visibility: hidden;
        width: 250px;
        background-color: black;
        color: #fff;
        text-align: left;
        padding: 5px 5px;
        border-radius: 6px;
        /* Position the tooltip text - see examples below! */
        position: absolute;
        z-index: 10;
    }

    .mytooltip .tooltip-right {
        top: -5px;
        left: 105%;
    }

    .mytooltip .tooltip-left {
        top: -5px;
        right: 105%;
    }

    .mytooltip .tooltip-top {
        width: 120px;
        bottom: 100%;
        left: 50%;
        margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
    }

    .mytooltip .tooltip-bottom {
        width: 140px;
        top: 100%;
        left: 50%;
        margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
    }

    /* Show the tooltip text when you mouse over the tooltip container */
    .mytooltip:hover .tooltiptext {
        visibility: visible;
    }

/* Tillägg för komponenter */

.autocomplete {
    /*the container must be positioned relative:*/
    position: relative;
    display: inline-block;
}

.autocomplete-items {
    position: absolute;
    border: 1px solid #d4d4d4;
    border-bottom: none;
    border-top: none;
    z-index: 99;
    /*position the autocomplete items to be the same width as the container:*/
    top: 100%;
    left: 0;
    right: 0;
    max-height: 300px;
    overflow-y: auto;
}

    .autocomplete-items div {
        padding: 10px;
        cursor: pointer;
        background-color: #fff;
        border-bottom: 1px solid #d4d4d4;
    }

        .autocomplete-items div:hover {
            /*when hovering an item:*/
            background-color: #e9e9e9;
        }

.autocomplete-active {
    /*when navigating through the items using the arrow keys:*/
    background-color: DodgerBlue !important;
    color: #ffffff;
}

.hover:hover {
    background-color: lightblue;
}

/*.table tr td:last-child {
    word-break: break-word;
}*/

.modal-overlay {
    display: block;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 1051;
    background-color: rgba(0,0,0,0.5);
}

.dropdown-item, .dropdown-header {
    padding-bottom: 2px;
    padding-top: 2px;
}

.dropdown-header {
    padding-left: 6px;
}

.overlay {
    /* Height & width depends on how you want to reveal the overlay (see JS below) */
    height: 100%;
    width: 100%;
    position: fixed; /* Stay in place */
    z-index: 1000; /* Sit on top */
    left: 0;
    top: 0;
    background-color: rgb(0,0,0); /* Black fallback color */
    background-color: rgba(0,0,0, 1.0); /* Black w/opacity */
    overflow-x: hidden; /* Disable horizontal scroll */
    transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}

/* Position the content inside the overlay */
.overlay-content {
    position: relative;
    /* top: 25%; 25% from the top */
    width: 100%; /* 100% width */
    text-align: center; /* Centered text/links */
    margin-top: 0px; /* 30px top margin to avoid conflict with the close button on smaller screens */
}

.overlay .closebtn {
    position: absolute;
    /*top: 5px;*/
    right: 45px;
    font-size: 60px;
    color: white;
    -webkit-text-stroke-color: black;
    -webkit-text-stroke-width: thin;
    z-index: 1;
}

.overlay .bottombtn {
    position: absolute;
    bottom: 20px;
    right: 45px;
    font-size: 60px;
    color: white;
    -webkit-text-stroke-color: black;
    -webkit-text-stroke-width: thin;
    z-index: 1;
}

.overlay .leftbtn {
    position: absolute;
    top: calc(50% - 30px);
    left: 45px;
    font-size: 60px;
    color: white;
    -webkit-text-stroke-color: black;
    -webkit-text-stroke-width: thin;
    z-index: 1;
}

.overlay .rightbtn {
    position: absolute;
    top: calc(50% - 30px);
    right: 45px;
    font-size: 60px;
    color: white;
    z-index: 1;
}

.overlay .bottomleftbtn {
    position: absolute;
    bottom: 20px;
    left: 45px;
    font-size: 60px;
    color: white;
    -webkit-text-stroke-color: black;
    -webkit-text-stroke-width: thin;
    z-index: 1;
}

.overlay .bottomcenterbtn {
    position: absolute;
    bottom: 20px;
    left: calc(50% - 30px);
    font-size: 60px;
    color: white;
    -webkit-text-stroke-color: black;
    -webkit-text-stroke-width: thin;
    z-index: 1;
}

.overlay .bottomcenterbtnleft {
    position: absolute;
    bottom: 20px;
    left: calc(50% - 30px - 70px);
    font-size: 60px;
    color: white;
    -webkit-text-stroke-color: black;
    -webkit-text-stroke-width: thin;
    z-index: 1;
}

.overlay .bottomcenterbtnright {
    position: absolute;
    bottom: 20px;
    left: calc(50% - 30px + 70px);
    font-size: 60px;
    color: white;
    -webkit-text-stroke-color: black;
    -webkit-text-stroke-width: thin;
    z-index: 1;
}

.overlay .topleftbtn {
    position: absolute;
    top: 15px;
    left: 45px;
    font-size: 60px;
    color: white;
    -webkit-text-stroke-color: black;
    -webkit-text-stroke-width: thin;
    z-index: 1;
}

.overlay .topcenterinfo {
    position: absolute;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 25px;
    color: white;
    -webkit-text-stroke-color: black;
    -webkit-text-stroke-width: 1px;
    z-index: 1;
}

.cursor-alias {
    cursor: alias;
}

.cursor-all-scroll {
    cursor: all-scroll;
}

.cursor-auto {
    cursor: auto;
}

.cursor-cell {
    cursor: cell;
}

.cursor-context-menu {
    cursor: context-menu;
}

.cursor-col-resize {
    cursor: col-resize;
}

.cursor-copy {
    cursor: copy;
}

.cursor-crosshair {
    cursor: crosshair;
}

.cursor-default {
    cursor: default;
}

.cursor-e-resize {
    cursor: e-resize;
}

.cursor-ew-resize {
    cursor: ew-resize;
}

.cursor-grab {
    cursor: -webkit-grab;
    cursor: grab;
}

.cursor-grabbing {
    cursor: -webkit-grabbing;
    cursor: grabbing;
}

.cursor-help {
    cursor: help;
}

.cursor-move {
    cursor: move;
}

.cursor-n-resize {
    cursor: n-resize;
}

.cursor-ne-resize {
    cursor: ne-resize;
}

.cursor-nesw-resize {
    cursor: nesw-resize;
}

.cursor-ns-resize {
    cursor: ns-resize;
}

.cursor-nw-resize {
    cursor: nw-resize;
}

.cursor-nwse-resize {
    cursor: nwse-resize;
}

.cursor-no-drop {
    cursor: no-drop;
}

.cursor-none {
    cursor: none;
}

.cursor-not-allowed {
    cursor: not-allowed;
}

.cursor-pointer {
    cursor: pointer;
}

.cursor-progress {
    cursor: progress;
}

.cursor-row-resize {
    cursor: row-resize;
}

.cursor-s-resize {
    cursor: s-resize;
}

.cursor-se-resize {
    cursor: se-resize;
}

.cursor-sw-resize {
    cursor: sw-resize;
}

.cursor-text {
    cursor: text;
}

.cursor-w-resize {
    cursor: w-resize;
}

.cursor-wait {
    cursor: wait;
}

.cursor-zoom-in {
    cursor: zoom-in;
}

.cursor-zoom-out {
    cursor: zoom-out;
}

.focus-hide {
    outline: none;
}

/* ===== Alternativ helskärmsvisning (Helskärm2) =====
   Zoomen sköts av webbläsaren: nyp-zoom/panorering är inbyggt och växlingen
   mellan anpassad och verklig storlek görs med en dold kryssruta i CSS.
   Ingen JavaScript och inga egna touch-/dragevent är inblandade. */

.helskarm2 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    width: 100dvw;
    height: 100vh;
    height: 100dvh;
    z-index: 1050;
    background-color: #000;
    overflow: hidden;
    outline: none;
    /* manipulation = pan-x pan-y pinch-zoom, dvs webbläsarens egna gester. */
    touch-action: manipulation;
}

.helskarm2-media {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* safe center gör att överskjutande delar går att nå när bilden är större
       än ytan. Ignoreras av äldre webbläsare, som då faller tillbaka på center. */
    align-items: safe center;
    justify-content: safe center;
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y pinch-zoom;
}

    .helskarm2-media > img,
    .helskarm2-media > video {
        display: block;
        /* Fyller hela ytan från start. Utan width/height visas bilden i sin
           egen storlek och små bilder skalas inte upp till hela skärmen. */
        flex: 0 0 auto;
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        /* contain behåller proportionerna, så inget beskärs eller sträcks. */
        object-fit: contain;
        /* Låt webbläsaren rotera efter EXIF istället för egna transformer. */
        image-orientation: from-image;
        /* Bilden ska pannas när den dras, inte plockas upp som ett objekt. */
        -webkit-user-drag: none;
        user-select: none;
        -webkit-user-select: none;
    }

/* Dold kryssruta som styr zoomen, växlas via etiketterna hk2-zoomin/hk2-zoomut. */
.helskarm2-zoomvaxel {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
}

    .helskarm2-zoomvaxel:checked ~ .helskarm2-media {
        cursor: grab;
    }

        .helskarm2-zoomvaxel:checked ~ .helskarm2-media > img {
            /* Verklig storlek. flex: none hindrar flexboxen från att krympa
               bilden tillbaka till ytans bredd. */
            flex: none;
            max-width: none;
            max-height: none;
            width: auto;
            height: auto;
            object-fit: none;
        }

/* Sätts av draghanteringen så länge musknappen hålls nere. Mer specifik än
   grab-regeln ovan så att pekaren byter form medan man drar. */
.helskarm2 .helskarm2-media.hk2-drar {
    cursor: grabbing;
}

/* I webbläsarens helskärmsläge stänger mobila webbläsare av sidans nyp-zoom.
   Då lämnar vi inga gester till webbläsaren alls, utan sköter nyp och
   panorering själva i funktionerJS. */
.helskarm2.hk2-egnagester .helskarm2-media {
    touch-action: none;
}

.helskarm2 .hk2-btn {
    position: absolute;
    font-size: 60px;
    line-height: 1;
    color: #fff;
    text-decoration: none;
    -webkit-text-stroke-color: #000;
    -webkit-text-stroke-width: thin;
    text-shadow: 0 0 6px rgba(0,0,0,0.8);
    opacity: 0.7;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    z-index: 2;
}

    .helskarm2 .hk2-btn:hover {
        opacity: 1;
        color: #fff;
    }

.helskarm2 .hk2-stang {
    top: 0;
    right: 45px;
}

.helskarm2 .hk2-helskarm {
    /* fa-expand är fyrkantig och ser tyngre ut än de övriga tecknen, så den
       ritas något mindre och hamnar i linje med stängknappen. */
    top: 8px;
    left: 45px;
    font-size: 45px;
}

.helskarm2 .hk2-bakat {
    top: calc(50% - 30px);
    left: 20px;
}

.helskarm2 .hk2-framat {
    top: calc(50% - 30px);
    right: 20px;
}

.helskarm2 .hk2-ner {
    bottom: 20px;
    right: 45px;
}

.helskarm2 .hk2-bildspel {
    bottom: 20px;
    left: 45px;
}

.helskarm2 .hk2-kvalitet {
    bottom: 20px;
    left: calc(50% - 30px);
}

.helskarm2 .hk2-zoomin,
.helskarm2 .hk2-zoomut {
    bottom: 20px;
    left: calc(50% - 30px - 70px);
}

.helskarm2 .hk2-las {
    bottom: 20px;
    left: calc(50% - 30px + 70px);
}

/* Knapp som ligger kvar men inte gör något, som kvalitetsvalet när låset är på. */
.helskarm2 .hk2-btn.hk2-inaktiv,
.helskarm2 .hk2-btn.hk2-inaktiv:hover {
    opacity: 0.3;
    cursor: default;
}

/* Visa zooma in när bilden är anpassad, zooma ut när den visas i verklig storlek. */
.helskarm2 .helskarm2-zoomvaxel ~ .hk2-zoomut {
    display: none;
}

.helskarm2 .helskarm2-zoomvaxel:checked ~ .hk2-zoomin {
    display: none;
}

.helskarm2 .helskarm2-zoomvaxel:checked ~ .hk2-zoomut {
    display: block;
}

.helskarm2 .hk2-info {
    position: absolute;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 25px;
    /* Radbryts hellre än kapas, så all information syns även på små skärmar.
       Varje uppgift hålls ihop med hårda mellanslag i Information().
       width: max-content behövs eftersom left: 50% annars bara lämnar halva
       bredden åt texten innan den bryts. */
    width: max-content;
    max-width: calc(100% - 200px);
    white-space: normal;
    text-align: center;
    line-height: 1.2;
    color: #fff;
    -webkit-text-stroke-color: #000;
    -webkit-text-stroke-width: 1px;
    text-shadow: 0 0 6px rgba(0,0,0,0.8);
    cursor: default;
    z-index: 2;
}

/* Knapparna göms efter en stund och tonas fram igen vid aktivitet.
   visibility gör att ett klick på en gömd knapp inte träffar den, utan går
   vidare till mediat och väcker knapparna först. */
.helskarm2.hk2-dold {
    cursor: none;
}

    .helskarm2.hk2-dold .hk2-btn,
    .helskarm2.hk2-dold .hk2-info {
        opacity: 0;
        visibility: hidden;
    }

.helskarm2 .hk2-btn,
.helskarm2 .hk2-info {
    transition: opacity 0.4s ease;
}

@media (prefers-reduced-motion: reduce) {
    .helskarm2 .hk2-btn,
    .helskarm2 .hk2-info {
        transition: none;
    }
}

@media (max-width: 576px) {
    .helskarm2 .hk2-btn {
        font-size: 40px;
    }

    .helskarm2 .hk2-stang {
        right: 15px;
    }

    .helskarm2 .hk2-helskarm {
        top: 6px;
        left: 15px;
        font-size: 30px;
    }

    .helskarm2 .hk2-ner {
        right: 15px;
    }

    .helskarm2 .hk2-bildspel {
        left: 15px;
    }

    .helskarm2 .hk2-kvalitet {
        left: calc(50% - 20px);
    }

    .helskarm2 .hk2-zoomin,
    .helskarm2 .hk2-zoomut {
        left: calc(50% - 20px - 55px);
    }

    .helskarm2 .hk2-las {
        left: calc(50% - 20px + 55px);
    }

    .helskarm2 .hk2-info {
        font-size: 14px;
        top: 8px;
        max-width: calc(100% - 120px);
    }
}

/* ===== Teman: ljust (standard), mörkt och natt =====
   Väljs med TemaVäljare och sätts som data-tema på <html> av hemmaTema i
   _Host.cshtml innan sidan ritas. Mörkt och natt är gjorda för att skärmen ska
   lysa så lite som möjligt utomhus i mörker: helsvart bakgrund, dämpad text och
   inga stora ljusa ytor. Natt är enbart rött på svart för att bevara mörkerseendet.
   Bootstrap får data-bs-theme="dark" och dess variabler skrivs om här. */

.tema-valjare {
    color: inherit;
    text-decoration: none;
    font-size: 1.1rem;
    line-height: 1;
}

.sidebar .tema-valjare {
    color: #d7d7d7;
}

[data-tema=morkt] {
    --t-bg: #000;
    --t-bg2: #0a0a0a;
    --t-bg3: #141414;
    --t-bg2-rgb: 10, 10, 10;
    --t-bg3-rgb: 20, 20, 20;
    --t-text: #8c8c8c;
    --t-text-rgb: 140, 140, 140;
    --t-strong: #a8a8a8;
    --t-strong-rgb: 168, 168, 168;
    --t-muted: #5e5e5e;
    --t-border: #262626;
    --t-primary: #4a78a8;
    --t-primary-rgb: 74, 120, 168;
    --t-primary-bg: #1b3350;
    --t-secondary: #6a6a6a;
    --t-secondary-rgb: 106, 106, 106;
    --t-secondary-bg: #262626;
    --t-success: #3d8452;
    --t-success-rgb: 61, 132, 82;
    --t-success-bg: #163a21;
    --t-danger: #a84444;
    --t-danger-rgb: 168, 68, 68;
    --t-danger-bg: #4d1a1a;
    --t-warning: #98802f;
    --t-warning-rgb: 152, 128, 47;
    --t-warning-bg: #3f3410;
    --t-info: #3c8594;
    --t-info-rgb: 60, 133, 148;
    --t-info-bg: #14393f;
    /* Bilder, video och kartor dämpas. */
    --t-media-filter: brightness(.7);
    /* Diagram från Google ritas på vitt, de inverteras och dämpas. */
    --t-diagram-filter: invert(1) hue-rotate(180deg) brightness(.65);
}

[data-tema=natt] {
    --t-bg: #000;
    --t-bg2: #080000;
    --t-bg3: #120000;
    --t-bg2-rgb: 8, 0, 0;
    --t-bg3-rgb: 18, 0, 0;
    --t-text: #9e1a1a;
    --t-text-rgb: 158, 26, 26;
    --t-strong: #bb1f1f;
    --t-strong-rgb: 187, 31, 31;
    --t-muted: #641010;
    --t-border: #360808;
    --t-primary: #a81c1c;
    --t-primary-rgb: 168, 28, 28;
    --t-primary-bg: #420707;
    --t-secondary: #761212;
    --t-secondary-rgb: 118, 18, 18;
    --t-secondary-bg: #240303;
    --t-success: #a81c1c;
    --t-success-rgb: 168, 28, 28;
    --t-success-bg: #420707;
    --t-danger: #c82020;
    --t-danger-rgb: 200, 32, 32;
    --t-danger-bg: #5a0909;
    --t-warning: #a81c1c;
    --t-warning-rgb: 168, 28, 28;
    --t-warning-bg: #420707;
    --t-info: #a81c1c;
    --t-info-rgb: 168, 28, 28;
    --t-info-bg: #420707;
    /* Allt färgas rött: gråskala, sepia och sedan vridning mot rött. */
    --t-media-filter: grayscale(1) brightness(.45) sepia(1) saturate(6) hue-rotate(-45deg);
    --t-diagram-filter: invert(1) grayscale(1) brightness(.5) sepia(1) saturate(6) hue-rotate(-45deg);
}

:is([data-tema=morkt], [data-tema=natt]) {
    color-scheme: dark;
    --bs-body-bg: var(--t-bg);
    --bs-body-bg-rgb: 0, 0, 0;
    --bs-body-color: var(--t-text);
    --bs-body-color-rgb: var(--t-text-rgb);
    --bs-emphasis-color: var(--t-strong);
    --bs-emphasis-color-rgb: var(--t-strong-rgb);
    --bs-heading-color: var(--t-strong);
    --bs-secondary-color: var(--t-muted);
    --bs-secondary-color-rgb: var(--t-text-rgb);
    --bs-secondary-bg: var(--t-bg3);
    --bs-secondary-bg-rgb: var(--t-bg3-rgb);
    --bs-tertiary-color: var(--t-muted);
    --bs-tertiary-bg: var(--t-bg2);
    --bs-tertiary-bg-rgb: var(--t-bg2-rgb);
    --bs-border-color: var(--t-border);
    --bs-border-color-translucent: var(--t-border);
    --bs-link-color: var(--t-primary);
    --bs-link-color-rgb: var(--t-primary-rgb);
    --bs-link-hover-color: var(--t-strong);
    --bs-link-hover-color-rgb: var(--t-strong-rgb);
    --bs-code-color: var(--t-strong);
    --bs-highlight-color: var(--t-strong);
    --bs-highlight-bg: var(--t-warning-bg);
    --bs-focus-ring-color: rgba(var(--t-primary-rgb), .35);
    --bs-form-valid-color: var(--t-success);
    --bs-form-valid-border-color: var(--t-success);
    --bs-form-invalid-color: var(--t-danger);
    --bs-form-invalid-border-color: var(--t-danger);
    --bs-primary-rgb: var(--t-primary-rgb);
    --bs-secondary-rgb: var(--t-secondary-rgb);
    --bs-success-rgb: var(--t-success-rgb);
    --bs-danger-rgb: var(--t-danger-rgb);
    --bs-warning-rgb: var(--t-warning-rgb);
    --bs-info-rgb: var(--t-info-rgb);
    --bs-light-rgb: var(--t-bg2-rgb);
    --bs-dark-rgb: var(--t-bg3-rgb);
    --bs-white-rgb: var(--t-strong-rgb);
    --bs-black-rgb: 0, 0, 0;
    --bs-primary-text-emphasis: var(--t-primary);
    --bs-primary-bg-subtle: var(--t-primary-bg);
    --bs-primary-border-subtle: var(--t-primary-bg);
    --bs-secondary-text-emphasis: var(--t-secondary);
    --bs-secondary-bg-subtle: var(--t-secondary-bg);
    --bs-secondary-border-subtle: var(--t-secondary-bg);
    --bs-success-text-emphasis: var(--t-success);
    --bs-success-bg-subtle: var(--t-success-bg);
    --bs-success-border-subtle: var(--t-success-bg);
    --bs-danger-text-emphasis: var(--t-danger);
    --bs-danger-bg-subtle: var(--t-danger-bg);
    --bs-danger-border-subtle: var(--t-danger-bg);
    --bs-warning-text-emphasis: var(--t-warning);
    --bs-warning-bg-subtle: var(--t-warning-bg);
    --bs-warning-border-subtle: var(--t-warning-bg);
    --bs-info-text-emphasis: var(--t-info);
    --bs-info-bg-subtle: var(--t-info-bg);
    --bs-info-border-subtle: var(--t-info-bg);
    --bs-light-text-emphasis: var(--t-text);
    --bs-light-bg-subtle: var(--t-bg2);
    --bs-light-border-subtle: var(--t-border);
    --bs-dark-text-emphasis: var(--t-text);
    --bs-dark-bg-subtle: var(--t-bg3);
    --bs-dark-border-subtle: var(--t-border);
}

    :is([data-tema=morkt], [data-tema=natt]) body {
        background-color: var(--t-bg);
    }

    :is([data-tema=morkt], [data-tema=natt]) a,
    :is([data-tema=morkt], [data-tema=natt]) .btn-link {
        color: var(--t-primary);
    }

    /* Knappar: varje variant anger sin färg och den gemensamma regeln nedan
       översätter till Bootstraps knappvariabler. Fyllda knappar får mörk fyllning
       och dämpad text i stället för vit text på stark färg. */
    :is([data-tema=morkt], [data-tema=natt]) :is(.btn-primary, .btn-outline-primary) { --v: var(--t-primary); --v-rgb: var(--t-primary-rgb); --v-bg: var(--t-primary-bg); }
    :is([data-tema=morkt], [data-tema=natt]) :is(.btn-secondary, .btn-outline-secondary) { --v: var(--t-secondary); --v-rgb: var(--t-secondary-rgb); --v-bg: var(--t-secondary-bg); }
    :is([data-tema=morkt], [data-tema=natt]) :is(.btn-success, .btn-outline-success) { --v: var(--t-success); --v-rgb: var(--t-success-rgb); --v-bg: var(--t-success-bg); }
    :is([data-tema=morkt], [data-tema=natt]) :is(.btn-danger, .btn-outline-danger) { --v: var(--t-danger); --v-rgb: var(--t-danger-rgb); --v-bg: var(--t-danger-bg); }
    :is([data-tema=morkt], [data-tema=natt]) :is(.btn-warning, .btn-outline-warning) { --v: var(--t-warning); --v-rgb: var(--t-warning-rgb); --v-bg: var(--t-warning-bg); }
    :is([data-tema=morkt], [data-tema=natt]) :is(.btn-info, .btn-outline-info) { --v: var(--t-info); --v-rgb: var(--t-info-rgb); --v-bg: var(--t-info-bg); }
    :is([data-tema=morkt], [data-tema=natt]) :is(.btn-light, .btn-outline-light, .btn-dark, .btn-outline-dark) { --v: var(--t-border); --v-rgb: var(--t-text-rgb); --v-bg: var(--t-bg3); }

    :is([data-tema=morkt], [data-tema=natt]) :is(.btn-primary, .btn-secondary, .btn-success, .btn-danger, .btn-warning, .btn-info, .btn-light, .btn-dark) {
        --bs-btn-color: var(--t-strong);
        --bs-btn-bg: var(--v-bg);
        --bs-btn-border-color: var(--v-bg);
        --bs-btn-hover-color: var(--t-strong);
        --bs-btn-hover-bg: var(--v-bg);
        --bs-btn-hover-border-color: var(--v);
        --bs-btn-active-color: var(--t-strong);
        --bs-btn-active-bg: var(--v-bg);
        --bs-btn-active-border-color: var(--v);
        --bs-btn-disabled-color: var(--t-muted);
        --bs-btn-disabled-bg: var(--v-bg);
        --bs-btn-disabled-border-color: var(--v-bg);
        --bs-btn-focus-shadow-rgb: var(--v-rgb);
    }

    :is([data-tema=morkt], [data-tema=natt]) :is(.btn-outline-primary, .btn-outline-secondary, .btn-outline-success, .btn-outline-danger, .btn-outline-warning, .btn-outline-info, .btn-outline-light, .btn-outline-dark) {
        --bs-btn-color: var(--v);
        --bs-btn-border-color: var(--v);
        --bs-btn-hover-color: var(--t-strong);
        --bs-btn-hover-bg: var(--v-bg);
        --bs-btn-hover-border-color: var(--v);
        --bs-btn-active-color: var(--t-strong);
        --bs-btn-active-bg: var(--v-bg);
        --bs-btn-active-border-color: var(--v);
        --bs-btn-disabled-color: var(--t-muted);
        --bs-btn-disabled-border-color: var(--t-border);
        --bs-btn-focus-shadow-rgb: var(--v-rgb);
    }

    /* Ytor som Bootstrap annars fyller med stark färg. */
    :is([data-tema=morkt], [data-tema=natt]) :is(.bg-primary, .text-bg-primary) { background-color: var(--t-primary-bg) !important; }
    :is([data-tema=morkt], [data-tema=natt]) :is(.bg-secondary, .text-bg-secondary) { background-color: var(--t-secondary-bg) !important; }
    :is([data-tema=morkt], [data-tema=natt]) :is(.bg-success, .text-bg-success) { background-color: var(--t-success-bg) !important; }
    :is([data-tema=morkt], [data-tema=natt]) :is(.bg-danger, .text-bg-danger) { background-color: var(--t-danger-bg) !important; }
    :is([data-tema=morkt], [data-tema=natt]) :is(.bg-warning, .text-bg-warning) { background-color: var(--t-warning-bg) !important; }
    :is([data-tema=morkt], [data-tema=natt]) :is(.bg-info, .text-bg-info) { background-color: var(--t-info-bg) !important; }
    :is([data-tema=morkt], [data-tema=natt]) :is(.text-bg-primary, .text-bg-secondary, .text-bg-success, .text-bg-danger, .text-bg-warning, .text-bg-info, .text-bg-light, .text-bg-dark) {
        color: var(--t-strong) !important;
    }

    :is([data-tema=morkt], [data-tema=natt]) :is(.table-light, .table-dark, .table-active) { --v-bg: var(--t-bg2); }
    :is([data-tema=morkt], [data-tema=natt]) .table-primary { --v-bg: var(--t-primary-bg); }
    :is([data-tema=morkt], [data-tema=natt]) .table-secondary { --v-bg: var(--t-secondary-bg); }
    :is([data-tema=morkt], [data-tema=natt]) .table-success { --v-bg: var(--t-success-bg); }
    :is([data-tema=morkt], [data-tema=natt]) .table-danger { --v-bg: var(--t-danger-bg); }
    :is([data-tema=morkt], [data-tema=natt]) .table-warning { --v-bg: var(--t-warning-bg); }
    :is([data-tema=morkt], [data-tema=natt]) .table-info { --v-bg: var(--t-info-bg); }
    :is([data-tema=morkt], [data-tema=natt]) :is(.table-light, .table-dark, .table-active, .table-primary, .table-secondary, .table-success, .table-danger, .table-warning, .table-info) {
        --bs-table-color: var(--t-strong);
        --bs-table-bg: var(--v-bg);
        --bs-table-border-color: var(--t-border);
        --bs-table-striped-bg: var(--v-bg);
        --bs-table-striped-color: var(--t-strong);
        --bs-table-active-bg: var(--v-bg);
        --bs-table-active-color: var(--t-strong);
        --bs-table-hover-bg: var(--v-bg);
        --bs-table-hover-color: var(--t-strong);
    }

    :is([data-tema=morkt], [data-tema=natt]) :is(.form-control, .form-select, .form-check-input):focus {
        border-color: var(--t-primary);
        box-shadow: 0 0 0 .2rem rgba(var(--t-primary-rgb), .25);
    }

    /* Fält utan Bootstraps klasser ritas annars av webbläsaren med ljus text. */
    :is([data-tema=morkt], [data-tema=natt]) :is(input, textarea, select):not(.form-control, .form-select, .form-check-input, .btn-check, [type=checkbox], [type=radio], [type=range], [type=color], [type=file], [type=button], [type=submit], [type=reset], [type=image]) {
        color: var(--bs-body-color);
        background-color: var(--t-bg2);
        border: 1px solid var(--t-border);
        border-radius: var(--bs-border-radius-sm);
    }

        :is([data-tema=morkt], [data-tema=natt]) :is(input, textarea):not(.form-control)::placeholder {
            color: var(--bs-secondary-color);
        }

        :is([data-tema=morkt], [data-tema=natt]) :is(input, textarea, select):not(.form-control, .form-select, .form-check-input):focus {
            outline: none;
            border-color: var(--t-primary);
        }

    :is([data-tema=morkt], [data-tema=natt]) :is(.form-check-input:checked, .form-check-input[type=checkbox]:indeterminate) {
        background-color: var(--t-primary-bg);
        border-color: var(--t-primary);
    }

    :is([data-tema=morkt], [data-tema=natt]) .nav {
        --bs-nav-link-color: var(--t-primary);
        --bs-nav-link-hover-color: var(--t-strong);
    }

    :is([data-tema=morkt], [data-tema=natt]) .nav-pills {
        --bs-nav-pills-link-active-bg: var(--t-primary-bg);
        --bs-nav-pills-link-active-color: var(--t-strong);
    }

    :is([data-tema=morkt], [data-tema=natt]) .pagination {
        --bs-pagination-active-bg: var(--t-primary-bg);
        --bs-pagination-active-border-color: var(--t-primary);
        --bs-pagination-active-color: var(--t-strong);
    }

    :is([data-tema=morkt], [data-tema=natt]) .dropdown-menu {
        --bs-dropdown-link-active-bg: var(--t-primary-bg);
        --bs-dropdown-link-active-color: var(--t-strong);
    }

    :is([data-tema=morkt], [data-tema=natt]) .list-group {
        --bs-list-group-active-bg: var(--t-primary-bg);
        --bs-list-group-active-border-color: var(--t-primary);
        --bs-list-group-active-color: var(--t-strong);
    }

    :is([data-tema=morkt], [data-tema=natt]) :is(.progress, .progress-stacked) {
        --bs-progress-bar-bg: var(--t-primary-bg);
        --bs-progress-bar-color: var(--t-strong);
    }

    /* Layouten: meny, toppbar och övriga egna ytor i den här filen. */
    :is([data-tema=morkt], [data-tema=natt]) .sidebar {
        background-color: var(--t-bg2);
        border-right: 1px solid var(--t-border);
    }

        :is([data-tema=morkt], [data-tema=natt]) .sidebar .top-row {
            background-color: var(--t-bg);
            border-bottom: 1px solid var(--t-border);
        }

        :is([data-tema=morkt], [data-tema=natt]) :is(.sidebar .nav-item a, .nav-item div, .sidebar .tema-valjare, .navbar-brand) {
            color: var(--t-text) !important;
        }

            :is([data-tema=morkt], [data-tema=natt]) .sidebar .nav-item a.active {
                background-color: var(--t-bg3);
                color: var(--t-strong) !important;
            }

            :is([data-tema=morkt], [data-tema=natt]) .sidebar .nav-item a:hover {
                background-color: var(--t-bg3);
            }

    :is([data-tema=morkt], [data-tema=natt]) .navbar-toggler {
        background-color: transparent;
        border-color: var(--t-border);
    }

    :is([data-tema=morkt], [data-tema=natt]) .main .top-row {
        background-color: var(--t-bg2);
        border-bottom-color: var(--t-border);
    }

    :is([data-tema=morkt], [data-tema=natt]) :is(.autocomplete-items, .autocomplete-items div) {
        background-color: var(--t-bg2);
        border-color: var(--t-border);
    }

    :is([data-tema=morkt], [data-tema=natt]) :is(.autocomplete-items div:hover, .hover:hover) {
        background-color: var(--t-bg3);
    }

    :is([data-tema=morkt], [data-tema=natt]) .autocomplete-active {
        background-color: var(--t-primary-bg) !important;
        color: var(--t-strong);
    }

    :is([data-tema=morkt], [data-tema=natt]) .mytooltip .tooltiptext {
        background-color: var(--t-bg3);
        color: var(--t-strong);
        border: 1px solid var(--t-border);
    }

    :is([data-tema=morkt], [data-tema=natt]) #blazor-error-ui {
        background: var(--t-danger-bg);
        color: var(--t-strong);
    }

    :is([data-tema=morkt], [data-tema=natt]) .valid.modified:not([type=checkbox]) {
        outline-color: var(--t-success);
    }

    :is([data-tema=morkt], [data-tema=natt]) .invalid {
        outline-color: var(--t-danger);
    }

    :is([data-tema=morkt], [data-tema=natt]) .validation-message {
        color: var(--t-danger);
    }

    /* Knappar och text ovanpå helskärmsbilder är annars vita. */
    :is([data-tema=morkt], [data-tema=natt]) :is(.overlay, .helskarm2) :is(.closebtn, .bottombtn, .leftbtn, .rightbtn, .bottomleftbtn, .bottomcenterbtn, .bottomcenterbtnleft, .bottomcenterbtnright, .topleftbtn, .topcenterinfo, .hk2-btn, .hk2-btn:hover, .hk2-info) {
        color: var(--t-text);
    }

    /* Bilder, video, kartor och spelplaner dämpas, diagram inverteras. */
    :is([data-tema=morkt], [data-tema=natt]) :is(img, video, iframe, canvas, .spelplan) {
        filter: var(--t-media-filter);
    }

    /* Omslaget runt diagrammen måste fylla behållaren. Diagrammen har height:100%,
       och utan höjd på omslaget faller Google Charts tillbaka på sin standardhöjd. */
    .google-diagram {
        width: 100%;
        height: 100%;
    }

    :is([data-tema=morkt], [data-tema=natt]) .google-diagram {
        filter: var(--t-diagram-filter);
    }

    /* Kartor. Ritade kartor (topo, vägkarta) är mest vita och inverteras så att
       bakgrunden blir svart och linjerna ljusa. Flygfoton dämpas kraftigt i
       stället, eftersom ett inverterat foto blir oläsligt. Gäller både <img> och
       de SVG-kartor som byggs av kartrutor. */
    :is([data-tema=morkt], [data-tema=natt]) .karta-ritad {
        filter: var(--t-karta-ritad-filter);
    }

    :is([data-tema=morkt], [data-tema=natt]) :is(.karta-foto, .karta-foto-lager) {
        filter: var(--t-karta-foto-filter);
    }

    /* Ringar, siktprickar och uppdrag ovanpå en ritad karta inverteras som kartan, så att
       svarta ringar och mörkblå prickar blir ljusa mot den mörka bakgrunden, men dämpas
       och görs halvgenomskinliga så att kartan under syns tydligt. */
    :is([data-tema=morkt], [data-tema=natt]) .karta-ritad-lager {
        filter: var(--t-karta-lager-filter);
    }

/* Leaflet-kartan (t.ex. 7S-rapportens kartval): bakgrund och kontroller är annars vita. */
:is([data-tema=morkt], [data-tema=natt]) .leaflet-container {
    background: var(--t-bg);
}

:is([data-tema=morkt], [data-tema=natt]) :is(.leaflet-bar a, .leaflet-control-layers, .leaflet-control-attribution, .leaflet-control-scale-line) {
    background: var(--t-bg2);
    color: var(--t-text);
    border-color: var(--t-border);
}

:is([data-tema=morkt], [data-tema=natt]) .leaflet-bar a:hover {
    background: var(--t-bg3);
}

:is([data-tema=morkt], [data-tema=natt]) .leaflet-control-attribution a {
    color: var(--t-text);
}

:is([data-tema=morkt], [data-tema=natt]) .leaflet-control-layers-toggle {
    filter: var(--t-karta-ritad-filter);
}

/* Natt: den egna positionen ritas rött i stället för blått. */
[data-tema=natt] .karta-egen-position {
    stroke: var(--t-strong);
    fill: var(--t-strong);
}

[data-tema=morkt] {
    --t-karta-ritad-filter: invert(1) hue-rotate(180deg) brightness(.85) contrast(1.0);
    --t-karta-lager-filter: invert(1) hue-rotate(180deg) brightness(.6) opacity(.6);
    --t-karta-foto-filter: brightness(.5);
}

[data-tema=natt] {
    /* Kontrasten före nedmörkningen trycker ytor mot svart och lyfter linjer och text,
       så att kartan blir tydligare utan att bli ljusare totalt. */
    --t-karta-ritad-filter: invert(1) grayscale(1) contrast(1.0) brightness(.75) sepia(1) saturate(6) hue-rotate(-45deg);
    --t-karta-lager-filter: invert(1) grayscale(1) brightness(.5) sepia(1) saturate(6) hue-rotate(-45deg) opacity(.6);
    --t-karta-foto-filter: grayscale(1) brightness(.3) sepia(1) saturate(6) hue-rotate(-45deg);
}

/* Mörkt: vit text i inline-stilar (t.ex. menyns inloggningsnamn) dämpas. */
[data-tema=morkt] :is([style*="color:white"], [style*="color: white"]) {
    color: var(--t-strong) !important;
}

/* Natt: alla färger som sidorna sätter själva blir röda, och små SVG-ikoner
   (menyknapp, stängkryss, pilar i listrutor, bockar) färgas också röda. */
[data-tema=natt] [style*="color"] {
    color: var(--t-text) !important;
}

[data-tema=natt] :is(.btn-close, .form-select, .form-check-input:checked, .form-switch .form-check-input) {
    filter: grayscale(1) brightness(.45) sepia(1) saturate(6) hue-rotate(-45deg);
}

/* Webbläsarens egna ikoner i datum-/tidsfält och sifferfält ritas ljusa i mörkt
   färgschema och följer inte textfärgen, så de dämpas respektive färgas röda.
   Pseudoelement fungerar inte inuti :is(), därför skrivs selektorerna ut. */
[data-tema=morkt] input::-webkit-calendar-picker-indicator,
[data-tema=morkt] input::-webkit-inner-spin-button {
    filter: brightness(.55);
}

[data-tema=natt] input::-webkit-calendar-picker-indicator,
[data-tema=natt] input::-webkit-inner-spin-button {
    filter: grayscale(1) brightness(.45) sepia(1) saturate(6) hue-rotate(-45deg);
}

[data-tema=natt] :is(.navbar, .navbar-toggler-icon) {
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%239e1a1a' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

[data-tema=natt] ::selection {
    background-color: var(--t-primary-bg);
    color: var(--t-strong);
}

/* Postschemats soldatfärger. Färgerna kommer som egna variabler och inte som
   color i style, så att natt-regeln ovan inte gör texten röd på färgad botten.
   Mörkt visar färgen som en dämpad rand i stället för en lysande cell, natt
   visar bara rött på svart: färgrutorna visar bara turordningen, eller döljs. */
.table .soldatcell {
    --bs-table-bg: var(--soldat);
    --bs-table-color: var(--soldattext);
}

.input-group-text.soldatruta {
    background-color: var(--soldat);
    color: var(--soldattext);
}

[data-tema=morkt] .table .soldatcell {
    --bs-table-bg: var(--t-bg);
    --bs-table-color: var(--t-strong);
    box-shadow: inset .5em 0 0 0 color-mix(in srgb, var(--soldat) 55%, black);
    padding-left: .8em;
}

[data-tema=morkt] .input-group-text.soldatruta {
    background-color: color-mix(in srgb, var(--soldat) 55%, black);
    color: var(--t-strong);
}

[data-tema=natt] .table .soldatcell {
    --bs-table-bg: var(--t-bg);
    --bs-table-color: var(--t-strong);
}

[data-tema=natt] .input-group-text.soldatruta {
    background-color: transparent;
    color: var(--t-strong);
}

[data-tema=natt] .input-group-text.soldatruta:empty {
    display: none;
}

/* Plutonsschemats tidslinje: en rad per grupp, passen i uppgiftens färg och
   restiden randig. Färgerna kommer som variabler, som soldatfärgerna ovan. */
.plutblock {
    background-color: var(--uppgift);
    color: var(--uppgifttext);
}

.plutlinje .plutnamn {
    flex: none;
    width: 70px;
    padding-right: .25rem;
    line-height: 2rem;
}

.plutlinje .plutspår {
    position: relative;
    flex: 1;
    height: 2rem;
}

.plutlinje .plutaxel {
    height: 1.4rem;
}

.plutlinje .plutaxel > span {
    transform: translateX(-2px);
    white-space: nowrap;
}

.plutlinje .plutnatt,
.plutlinje .plutmidnatt,
.plutlinje .plutresa,
.plutlinje .plutpass {
    position: absolute;
    top: 0;
    bottom: 0;
}

.plutlinje .plutnatt {
    background-color: rgba(128, 128, 128, .15);
}

.plutlinje .plutmidnatt {
    border-left: 1px solid rgba(128, 128, 128, .6);
}

.plutlinje .plutresa {
    top: .3rem;
    bottom: .3rem;
    background: repeating-linear-gradient(135deg, var(--uppgift) 0 3px, transparent 3px 6px);
    opacity: .7;
}

.plutlinje .plutpass {
    top: .15rem;
    bottom: .15rem;
    border-left: 1px solid var(--t-bg, #fff);
    font-size: .75rem;
    line-height: 1.7rem;
    padding: 0 .2rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.plutlinje .plutvald {
    outline: 2px solid currentColor;
    outline-offset: -2px;
}

/* Pass som krockar med ett annat av gruppens, t.ex. efter ändringar för hand */
.plutlinje .plutkrock {
    box-shadow: inset 0 0 0 2px var(--bs-danger);
}

/* Rullande dygn där gruppen inte får den sömn som krävs, längs radens underkant */
.plutlinje .plutbrist {
    position: absolute;
    bottom: 0;
    height: 4px;
    background-color: var(--bs-danger);
}

[data-tema=morkt] .plutblock {
    background-color: color-mix(in srgb, var(--uppgift) 55%, black);
    color: var(--t-strong);
}

[data-tema=natt] .plutblock {
    background-color: transparent;
    color: var(--t-strong);
    box-shadow: inset 0 0 0 1px var(--t-strong);
}

/* Fält som de rekommenderade inställningarna i PLUT och postschemat ställer in, i temats färg så att de är röda i nattläge */
.form-control.rekommenderad, .form-select.rekommenderad {
    border-color: var(--t-success, var(--bs-success));
    background-color: rgba(var(--t-success-rgb, var(--bs-success-rgb)), 0.12);
    box-shadow: 0 0 0 0.15rem rgba(var(--t-success-rgb, var(--bs-success-rgb)), 0.3);
}