:root {
    /* Page */
    --thor-page-backgrundColor: #14161c;
    --thor-page-textColor: #e3e6ee;
    --thor-page-textDimColor: #a0a0a0;
    /* Controls */
    --thor-control-backgroundColor: #181c26;
    --thor-control-textColor: #d6dbea;
    --thor-control-borderColor: #2e3442;
    --thor-control-borderColorFocus: #4b6cff;
    --thor-control-borderWidth: 1px;
    --thor-control-borderRadius: 6px;
    --thor-control-height: 42px;
    --thor-control-padding: 9px 15px;
    --thor-control-margin: 5px 10px 5px 0px;
    --thor-control-fontSize: 16px;
    --thor-control-hoverBackground: #23293a;
    --thor-control-itemBgColor: #1e2433;
    --thor-control-itemHoverBgColor: #2a3350;
    --thor-control-itemColor: rgba(175, 238, 255, 0.75);
    --thor-control-itemColorHover: rgba(75, 108, 255, 0.45);
    /* Buttons */
    --thor-button-bgColor: #2a3350;
    --thor-button-textColor: #dbe0f2;
    --thor-button-bgColorHover: #324389;
    --thor-button-textColorHover: #ffffff;
    --thor-button-borderColor: #3a4670;
    --thor-button-borderColorHover: #4b6cff;
    /* Left menu (tydelig egen flate) */
    --thor-leftMenu-BgColor: linear-gradient( 180deg, #1a1f2e 0%, #171b27 45%, #121520 100% );
    /* Top bar (horisontal chrome) */
    --thor-topMenu-BgColor: linear-gradient( 90deg, #1a1f2e 0%, #222a40 50%, #141825 100% );
    /* Menu items */
    --thor-menu-bgColor: transparent;
    --thor-menu-bgColorHover: #2a3350;
    --thor-menu-bgColorSelected: #3a4360;
    --thor-menu-bgColorNonSelected: transparent;
    --thor-menu-bgColorSelectShadow: #4b6cff;
    --thor-menu-textColor: #dbe0f2;
    --thor-menu-borderColor: #2c3347;
    /* Dialog */
    --thor-dialog-bgColor: #222838;
    --thor-dialog-textColor: #e3e6ee;
    --thor-dialog-borderColor: #3a4360;
    /* TextColor*/
    --thor-text-hightLightC1: #6EE7B7;
    --thor-text-hightLightC2: #93C5FD;
    --thor-text-hightLightC3: #FBBF24;
    --thor-text-hightLightC4: #d8f737;
    --thor-text-hightLightC5: #eb11f5;
    --thor-text-hightLightC6: #81fe04;
    /* Item, etntity*/

    --thor-item-bgHover: #31C78420;
    --thor-item-TextHover: #ffffff;
}




[data-theme="light"] {
    /* Page */
    --thor-page-backgrundColor: #F2F5FA; /* kald blågrå base */
    --thor-page-textColor: #1B2430;
    /* Left menu – tydelig egen flate */
    --thor-leftMenu-BgColor: linear-gradient( 180deg, #1E293B 0%, #273449 100% );
    --thor-menu-textColor: #E6EDF7;
    --thor-menu-borderColor: rgba(255,255,255,0.08);
    --thor-menu-bgColorHover: rgba(255,255,255,0.08);
    --thor-menu-bgColorSelected: rgba(75,108,255,0.25);
    --thor-menu-bgColorSelectShadow: #4B6CFF;
    /* Top bar */
    --thor-topMenu-BgColor: #FFFFFF;
    /* Controls */
    --thor-control-backgroundColor: #FFFFFF;
    --thor-control-textColor: #1E293B;
    --thor-control-borderColor: #D6DEE9;
    --thor-control-borderColorFocus: #4B6CFF;
    --thor-control-hoverBackground: #F0F4FF;
    --thor-control-itemBgColor: #F5F8FF;
    --thor-control-itemHoverBgColor: #E8EEFF;
    --thor-control-itemColor: rgba(59,116,238,0.35);
    --thor-control-itemColorHover: rgba(59,116,238,0.6);
    /* Buttons */
    --thor-button-bgColor: #4B6CFF;
    --thor-button-textColor: #FFFFFF;
    --thor-button-bgColorHover: #324389;
    --thor-button-textColorHover: #FFFFFF;
    --thor-button-borderColor: #4B6CFF;
    --thor-button-borderColorHover: #324389;
    /* Dialog / cards */
    --thor-dialog-bgColor: #FFFFFF;
    --thor-dialog-textColor: #1E293B;
    --thor-dialog-borderColor: #E2E8F0;
    /* Highlight */
    --thor-text-hightLightC1: #22C55E;
    --thor-text-hightLightC2: #3B82F6;
    --thor-text-hightLightC3: #F59E0B;
    --thor-text-hightLightC4: #84CC16;
    --thor-text-hightLightC5: #C026D3;
    --thor-text-hightLightC6: #16A34A;
}




/*BODY*/
body, html {
    user-select: none;
    font-family:'Segoe UI';
}


label {
    color:var(--thor-page-textColor);
}

.thor-text-hightLightC1 {
    color: var(--thor-text-hightLightC1);
    font-weight: 500;
}

.thor-text-hightLightC2 {
    color: var(--thor-text-hightLightC2);
    font-weight: 500;
}

.thor-text-hightLightC3 {
    color: var(--thor-text-hightLightC3);
    font-weight: 500;    
}

.thor-text-hightLightC4 {
    color: var(--thor-text-hightLightC4);
    font-weight: 500;
}

.thor-text-hightLightC5 {
    color: var(--thor-text-hightLightC5);
    font-weight: 500;
}

.thor-text-hightLightC6 {
    color: var(--thor-text-hightLightC6);
    font-weight: 500;
}








::selection {
    background: #26784f; /* dempet blå */
    color: #ffffff;
}


/* Global scrollbar styling */
::-webkit-scrollbar {
    width: 12px; /* Bredden på vertikale scrollbars */
    height: 12px; /* Høyden på horisontale scrollbars */
}

::-webkit-scrollbar-track {
    background: #2c2c2c; /* Bakgrunnsfarge på sporet */
    border-radius: 6px; /* Runde hjørner */
}

::-webkit-scrollbar-thumb {
    background: #4CAF50; /* Fargerik indikator (grønn her som eksempel) */
    border-radius: 6px; /* Runde hjørner */
    border: 2px solid #2c2c2c; /* Gir en kant som matcher sporet */
}

    ::-webkit-scrollbar-thumb:hover {
        background: #81C784; /* Lysere grønn farge for hover */
        border: 2px solid #81C784; /* Endrer også kanten for tydeligere effekt */
    }

/* For Firefox */
* {
    scrollbar-width: thin; /* Tynn scrollbar */
    scrollbar-color: #4CAF50 #2c2c2c; /* Indikatorfarge og sporfarge */
}



button {
    align-items: center;
    justify-content: center;
    font-family: 'Segoe UI';
    background-color: var(--thor-button-bgColor);
    color: var(--thor-button-textColor); /* Hvit tekst */
    border: var(--thor-control-borderWidth) solid var(--thor-button-borderColor); /* Grå kant */
    border-radius: var(--thor-control-borderRadius); /* Runde hjørner */
    padding: var(--thor-control-padding); /* Behagelig padding */
    font-size: var(--thor-control-fontSize); /* Passende tekststørrelse */
    vertical-align: middle;
    font-weight: bold; /* Fet tekst */
    text-transform: uppercase; /* Store bokstaver */
    cursor: pointer; /* Markør for klikkbarhet */
    transition: background-color 0.3s, box-shadow 0.3s; /* Myk overgang */
    width: auto;
    margin: var(--thor-control-margin);
    height: var(--thor-control-height);
    vertical-align: middle;
}
    /* Hover-effekt */
    button:enabled:hover {
        background-color: var(--thor-button-bgColorHover); /* Lysere grå ved hover */
        color: var(--thor-button-textColorHover);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); /* Lett skygge */
    }

    /* Active-effekt */
    button:active {
        background-color: #1a1a1a; /* Dypere grå ved klikk */
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) inset; /* Innvendig skygge */
        outline: none;
    }

    button:disabled {
        color: #604040;
    }





input {
    padding: var(--thor-control-padding);
    height: var(--thor-control-height);
    font-size: var(--thor-control-fontSize);
    border-radius: var(--thor-control-borderRadius);
    border: var(--thor-control-borderWidth) solid var(--thor-control-borderColor);
    background: var(--thor-control-backgroundColor);
    color: var(--thor-control-textColor);
    outline: none;
    margin: var(--thor-control-margin);
    width: 100%;
    margin-right: 10px;
    box-sizing: border-box;
}

    input:focus {
        border-color: var(--thor-control-borderColorFocus);
        box-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
    }

    input:disabled {
        border-style: dashed;
        background-color: #101010;
        color: #404040;
    }




    input[type="checkbox"] {
        appearance: none;
        width: 20px;
        height: 20px;
        border: 2px solid var(--thor-control-borderColor);
        border-radius: var(--thor-control-borderRadius);
        background: var(--thor-control-backgroundColor);
        cursor: pointer;
        flex: 0 0 auto; /* viktig */
        vertical-align: middle; /* fallback */
        margin: 0; /* fjerner rare browser-margins */
        transition: background 0.3s, border-color 0.3s;
    }

        input[type="checkbox"]:checked {
            background-color: #255525;
            background-image: url("data:image/svg+xml;utf8,\
        <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
        <path fill='white' d='M20.3 5.3L9 16.6 3.7 11.3 5.1 9.9 9 13.8 18.9 3.9z'/>\
        </svg>");
            background-repeat: no-repeat;
            background-position: center;
            background-size: 14px 14px;
        }















   
    /* Stiler for alle relevante input-typer */
    input[type="date"],
    input[type="month"],
    input[type="week"],
    input[type="time"],
    input[type="datetime-local"] {
        background: var(--thor-control-backgroundColor); /* Mørk, men ikke for mørk */
        color: var(--thor-control-textColor);
        border: var(--thor-control-borderWidth) solid var(--thor-control-borderColor);
        padding: var(--thor-control-padding);
        height: var(--thor-control-height);
        font-size: var(--thor-control-fontSize);
        border-radius: var(--thor-control-borderRadius);
        outline: none;
        cursor: pointer;
    }
        /* Fokus-effekt */
        input[type="date"]:focus,
        input[type="month"]:focus,
        input[type="week"]:focus,
        input[type="time"]:focus,
        input[type="datetime-local"]:focus {
            border-color: #555;
            box-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
        }
        /* Endre farge på kalender- og klokkeikonet i Chrome/Edge */
        input[type="date"]::-webkit-calendar-picker-indicator,
        input[type="month"]::-webkit-calendar-picker-indicator,
        input[type="week"]::-webkit-calendar-picker-indicator,
        input[type="time"]::-webkit-calendar-picker-indicator,
        input[type="datetime-local"]::-webkit-calendar-picker-indicator {
            filter: invert(1); /* Gjør ikonene hvite */
            cursor: pointer;
        }






textarea {
    padding: var(--thor-control-padding);
    font-size: var(--thor-control-fontSize);
    border-radius: var(--thor-control-borderRadius);
    border: var(--thor-control-borderWidth) solid var(--thor-control-borderColor);
    background: var(--thor-control-backgroundColor);
    color: var(--thor-control-textColor);
    outline: none;
    margin: var(--thor-control-margin);
    width: 100%;
    margin-right: 10px;
}



/* Standard select-stil med pil-ikon */
select {
    width: 100%;
    margin: var(--thor-control-margin);    
    color: var(--thor-control-textColor);
    border: var(--thor-control-borderWidth) solid var(--thor-control-borderColor);
    border-radius: var(--thor-control-borderRadius);
    padding: var(--thor-control-padding);
    font-size: var(--thor-control-fontSize);
    cursor: pointer;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 40px; /* Plass til pil-ikon */
    height: var(--thor-control-height);
    /* Legger til et ikon i bakgrunnen */
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="green"><path d="M7 10l5 5 5-5H7z"/></svg>') no-repeat right 10px center;
    background-color: var(--thor-control-backgroundColor);
    background-size: 32px;
    line-height: 1.4; /* Gir litt ekstra plass rundt teksten */
    width: 100%;
}
    /* Skjuler pil-ikonet når select har multiple */
    select[multiple] {
        background-image: none;
        padding-right: var(--thor-control-padding); /* Fjern ekstra padding for ikon */
        height: auto; /* Tilpass høyden basert på antall synlige alternativer */
    }
    /* Hover-effekt */
    select:hover {
        border-color: #555;
    }
    /* Fokus-effekt */
    select:focus {
        border-color: #777;
        box-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
    }
    /* Når select er deaktivert */
    select:disabled {
        background: #101010;
        border-color: #101010;
        color: #404040;
        cursor: not-allowed;
    }













[data-theme=""] .thor-table-active {
    width: 100%;
    border-collapse: collapse;
    background-color: #1e1e1e;
    color: #e6e6e6;    
    font-size: 0.9rem;
}

    /* =========================
   Header / title row
   ========================= */
    [data-theme=""] .thor-table-active th {
        background-color: #2b3a55; /* egen tittel-farge */
        color: #ffffff;
        text-align: left;
        padding: 10px 12px;
        font-weight: 600;
        border-bottom: 1px solid #3a4a6a;
        white-space: nowrap;
    }

    /* =========================
   Data rows
   ========================= */
    [data-theme=""] .thor-table-active td {
        padding: 9px 12px;
        border-bottom: 1px solid #2a2a2a;
    }

    /* =========================
   Hover effect (aktiv følelse)
   ========================= */
    [data-theme=""] .thor-table-active tbody tr {
        transition: background-color 0.15s ease;
    }

.thor-table-active tbody tr:hover {
    background-color: var(--thor-control-hoverBackground);
}

    /* =========================
   Optional: status helpers
   ========================= */
[data-theme=""].thor-table-active .status-on {
    color: #4ade80; /* grønn */
    font-weight: 600;
}

[data-theme=""].thor-table-active .status-off {
    color: #f87171; /* rød */
    font-weight: 600;
}

[data-theme=""].thor-table-active .status-warn {
    color: #facc15; /* gul */
    font-weight: 600;
}




[data-theme="light"] {
    background-color: #f8fafc;
    color: #0f172a;
}

    /* =========================
   TOP BAR / TITLE BAR
   ========================= */

    [data-theme="light"] header {
        background-color: #f1f5f9;
        color: #0f172a;
        border-bottom: 1px solid #cbd5e1;
        box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    }

    /* =========================
   TABLE – Active
   ========================= */

    [data-theme="light"] .thor-table-active {
        width: 100%;
        border-collapse: collapse;
        background-color: #ffffff;
        color: #1f2937;        
        font-size: 0.9rem;
    }

        /* Header row */
        [data-theme="light"] .thor-table-active th {
            background-color: #e2e8f0; /* tydeligere enn hvit */
            color: #0f172a;
            padding: 10px 12px;
            font-weight: 700;
            text-align: left;
            border-bottom: 2px solid #cbd5e1;
            white-space: nowrap;
        }

        /* Data cells */
        [data-theme="light"] .thor-table-active td {
            padding: 9px 12px;
            border-bottom: 1px solid #e5e7eb;
        }

        /* Hover */
        [data-theme="light"] .thor-table-active tbody tr {
            transition: background-color 0.15s ease;
        }

            [data-theme="light"] .thor-table-active tbody tr:hover {
                background-color: #e5edf7;
            }

        /* =========================
   STATUS COLORS
   ========================= */

        [data-theme="light"] .thor-table-active .status-on {
            color: #16a34a;
            font-weight: 600;
        }

        [data-theme="light"] .thor-table-active .status-off {
            color: #dc2626;
            font-weight: 600;
        }

        [data-theme="light"] .thor-table-active .status-warn {
            color: #ca8a04;
            font-weight: 600;
        }