/*
 * Tema-styling: alle regler bruker CSS custom properties (var(--...)).
 *
 * :root nedenfor definerer defaults som gjelder når ingen tema er aktivt.
 * Naar et tema er aktivt, renderer core/farger.php (server-side) en :root-blokk
 * som overstyrer disse verdiene.
 *
 * For å legge til en ny variabel: legg til en linje i :root, og bruk den
 * med var(--ny-variabel) i regler nedenfor. Husk å registrere variabelen
 * i config/tema_variabler.php saa editor og lagring vet om den.
 */

:root {
    /* Tekstfarger */
    --farge-positiv: #00840f;
    --farge-negativ: #8b0000;
    --farge-viktig: #ffa500;
    --farge-ekstra-1: #00aaff;
    --farge-ekstra-2: #cf00ff;
    --farge-ekstra-3: #e93a3a;
    --farge-ekstra-4: #00fdff;
    --farge-ekstra-5: #c6dd19;
    --farge-ekstra-6: #c97100;
    --farge-ekstra-7: #00ff5c;
    --farge-ekstra-8: #65814d;

    /* Bakgrunn */
    --background-pic: url("https://mafiaspillet.no/img/bgrbilder/dark.jpg");
    --background-color: #000000;
    --background-final: var(--background-pic) fixed;
    --transparent-overlay-color: #000000;
    --transparency: 56%;
    --bakgrunnsfarge-overlay: color-mix(in srgb, var(--transparent-overlay-color) var(--transparency), transparent);

    /* Header */
    --header-pic-large: url("https://mafiaspillet.no/img/temaer/header_broken.png");
    --header-pic-small: url("https://mafiaspillet.no/img/temaer/header_broken_liten.png");

    /* Hoyre sidemeny */
    --right-side-menu-pic: none;
    --right-side-menu-color: #ffffff;
    --right-side-menu-final: var(--right-side-menu-pic);

    /* Venstre sidemeny */
    --left-side-menu-pic: none;
    --left-side-menu-color: #ffffff;
    --left-side-menu-final: var(--left-side-menu-pic);

    /* Innholdsbokser */
    --farge-innholdsbokser: #161616;
    --transparens-innholdsbokser: 75%;
    --farge-innholdsbokser-effektiv: color-mix(in srgb, var(--farge-innholdsbokser) var(--transparens-innholdsbokser), transparent);
    --farge-ramme-innholdsbokser: #333333;
    --farge-advarselboks-ramme: #7c3315;

    /* Knapper */
    --farge-knapper: #070707;
    --farge-ramme-knapper: #474747;
    --farge-tekst-knapper: #999999;
    --farge-knapper-mouseover: #707070;
    --farge-kontrast: #af720c;
    --farge-drapsknapp: #006400;
    --farge-hotellknapp-ikke-hotell: #550000;
    --farge-hotellknapp-i-hotell: #004e00;
    --farge-ramme-knapp-i-hotell: #474747;

    /* Topp-meny */
    --farge-meny: #000000;
    --farge-meny-hover: #303030;
    --farge-strek-meny-markert: #d1d1d1;

    /* Drapsfarger */
    --drap-vellykket-tekst: #468847;
    --drap-vellykket-bakgrunn: #dff0d8;
    --drap-mislykket-tekst: #b94a48;
    --drap-mislykket-bakgrunn: #f2dede;
    --drap-hit-tekst: #c09853;
    --drap-hit-bakgrunn: #303030;

    /*
     * Toggle-styrte variabler (use_header_text, use_right_side_menu_text):
     * Server emitter disse KUN når toggle er på. CSS-regler bruker fallback
     * via var(--name, currentColor) saa udefinerte vars faller tilbake til
     * arvet farge.
     */
}

/* === Bakgrunn og hovedlayout === */
main {
    background-color: var(--bakgrunnsfarge-overlay);
}
#main-body {
    background: var(--background-final) !important;
    background-size: cover !important;
}
.right {
    background: var(--right-side-menu-final) !important;
}
.left {
    background: var(--left-side-menu-final) !important;
}
.header {
    background: var(--header-pic-small) !important;
}
.header-large {
    background: var(--header-pic-large) !important;
}

/* === Tekstfarger (toggle-styrt header/right) ===
   Fallback-verdiene matcher main.css sine defaults, slik at oppførselen
   forblir uendret når tema ikke overstyrer disse. */
.tools-item {
    color: var(--right-side-menu-text-primary, inherit);
}
.tools-item-selected {
    color: var(--right-side-menu-text-secondary, white);
}
.tools-item:hover {
    background-color: var(--right-side-menu-text-hover, #353535);
}
.header-item-username {
    color: var(--header-text-username, #cccccc);
}
.header-item-header {
    color: var(--header-text-header, #cccccc);
}
.header-item-info {
    color: var(--header-text-info, #cccccc);
}

/* === Generelle tekstfarger === */
.farge-klar { color: var(--farge-positiv); }
.farge-success { color: var(--farge-positiv); }
.farge-vag { color: #666666; }
.farge-feil { color: var(--farge-negativ); }
.farge-viktig { color: var(--farge-viktig); }
.farge-hvit { color: #ffffff; }
.farge-nestenhvit { color: #bfbfbf; }
.farge-ekstra1 { color: var(--farge-ekstra-1); }
.farge-ekstra2 { color: var(--farge-ekstra-2); }
.farge-ekstra3 { color: var(--farge-ekstra-3); }
.farge-ekstra4 { color: var(--farge-ekstra-4); }
.farge-ekstra5 { color: var(--farge-ekstra-5); }
.farge-ekstra6 { color: var(--farge-ekstra-6); }
.farge-ekstra7 { color: var(--farge-ekstra-7); }
.farge-ekstra8 { color: var(--farge-ekstra-8); }
.farge-blue { color: #0ba4ff; }

.darkgreen { color: var(--farge-positiv); }
.darkred { color: var(--farge-negativ); }
.text-success { color: var(--farge-positiv); }
.text-warning { color: #c09853; }
.klar_tid { color: var(--farge-positiv); }

/* === Innholdsbokser === */
.well {
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    background-color: var(--farge-innholdsbokser-effektiv);
    border: 1px solid var(--farge-ramme-innholdsbokser);
}
.alert-warning {
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    background-color: var(--farge-innholdsbokser-effektiv);
    color: #a0a0a0;
    border: 1px solid var(--farge-advarselboks-ramme) !important;
}
.alert-info {
    background-color: var(--farge-innholdsbokser-effektiv);
    color: #a0a0a0;
}

/* === Tabeller === */
.table-striped tbody > tr:nth-child(odd) > td,
.table-striped tbody > tr:nth-child(odd) > th {
    background-color: #65656521;
}

/* === Topp-meny === */
.top-menu { background: var(--farge-meny); }
.top-menu-item {
    background: var(--farge-meny);
    border-bottom: 1px solid #202020;
}
.top-menu-item:hover {
    background: var(--farge-meny-hover) !important;
}
.top-menu-item-selected,
.top-menu-item-selected:hover {
    border-bottom: 2px solid var(--farge-strek-meny-markert) !important;
}
li.active a {
    background-color: var(--farge-innholdsbokser-effektiv) !important;
}
.nav-tabs {
    border-bottom: 1px solid var(--farge-ramme-knapper);
}
.nav-tabs > .active > a,
.nav-tabs > .active > a:hover,
.nav-tabs > .active > a:focus {
    border-color: var(--farge-ramme-knapper) var(--farge-ramme-knapper) transparent;
    color: #d1d1d1;
}
a.no-link:hover { color: #d1d1d1; }

/* === Knapper === */
.btn, .btn-large {
    border: 1px solid var(--farge-ramme-knapper);
    background-color: var(--farge-knapper);
    color: var(--farge-tekst-knapper);
}
.btn:hover, .btn:focus, .btn:active, .btn.active {
    color: white;
    background-color: var(--farge-knapper-mouseover);
}
.btn.disabled { color: #838383; }
.btn:focus {
    outline: thin dotted #333;
    outline: none !important;
}
.toggle-off.btn-sm { color: black; }

.nulleknapp,
.nulleknapp:hover,
.drap_nullstill_knapp {
    background-color: var(--farge-kontrast);
    color: #eeeeee;
}
.drap_nullstill_knapp { color: white; }

.knapp_ekstra_valg {
    background-color: var(--farge-knapper) !important;
    color: var(--farge-tekst-knapper) !important;
}

.btn-primary {
    background-image: linear-gradient(to bottom, var(--farge-positiv), var(--farge-positiv));
    background-color: var(--farge-positiv);
    color: white !important;
}
.btn-primary:hover {
    background-image: linear-gradient(to bottom, var(--farge-positiv), var(--farge-positiv));
    background-color: var(--farge-positiv);
    color: white;
}
.btn-danger {
    color: #ffffff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    background-color: var(--farge-negativ);
}

.dropdown-menu {
    background-color: var(--farge-knapper);
    color: var(--farge-tekst-knapper);
}
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
    color: var(--farge-tekst-knapper);
    background-image: linear-gradient(to bottom, var(--farge-knapper), var(--farge-knapper));
}
.btn-group.open .btn.dropdown-toggle {
    background-color: var(--farge-knapper);
}

/* === Hotell og drap === */
.drapsknapp {
    background-color: var(--farge-drapsknapp);
}
.hotel-button-out {
    background-color: var(--farge-hotellknapp-i-hotell);
    color: #d1d1d1;
    border: 1px solid #999999;
}
.hotel-button,
.hotel-button-more {
    background-color: var(--farge-hotellknapp-ikke-hotell);
}

.drap_vellykket {
    background-color: var(--drap-vellykket-bakgrunn);
    color: var(--drap-vellykket-tekst);
    padding: 8px 35px 8px 14px;
    border: 1px solid var(--farge-ramme-innholdsbokser);
}
.drap_mislykket {
    background-color: var(--drap-mislykket-bakgrunn);
    color: var(--drap-mislykket-tekst);
    padding: 8px 35px 8px 14px;
    border: 1px solid var(--farge-ramme-innholdsbokser);
}
.drap_hit {
    background-color: var(--drap-hit-bakgrunn);
    color: var(--drap-hit-tekst);
    padding: 8px 35px 8px 14px;
    border: 1px solid var(--farge-ramme-innholdsbokser);
}