/* style_dark.css - Bilfoto portal, MØRK modus.
   Del 1: Knut Olavs originalfil (uendret). Del 2 (nederst): nytt design, bygget fra css/bilfoto-theme.css.
   Ikke rediger denne filen direkte - endre css/bilfoto-theme.css og kjør src/build_portal_css.py. */
@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@600&display=swap");

/* ======================= DEL 1: original ======================= */
/* variables */
:root{
    --color-accent: #0399e5;
    --color-accent-rgb: 3, 153, 229;

    /* gull: lys -> mid -> dyp gir metall-effekten. --gold-mid er «den gule» for flate flater */
    --gold-light: #f7e3b0;
    --gold-mid: #e2bd78;
    --gold-deep: #b1803a;
    --gold-ink: #241a0a;            /* tekstfarge som skal ligge OPPÅ gull */
    --gold-rgb: 226, 189, 120;      /* til rgba() -tints */

    --gold-gradient: linear-gradient(135deg, var(--gold-light) 0%, var(--gold-mid) 45%, var(--gold-deep) 72%, var(--gold-mid) 100%);
    --gold-gradient-hover: linear-gradient(135deg, var(--gold-light) 0%, var(--gold-light) 35%, var(--gold-mid) 75%, var(--gold-light) 100%);

    --bg-overlay: rgba(20,20,20, 0.8);   /* slør over bakgrunnsbildet */
}
/**/


/* gold classes (legges på der gull ønskes - endrer ingenting av seg selv) */

/* flat gull: tekst, ikoner, små detaljer */
.text-gold { color:var(--gold-mid); }
.text-gold-light { color:var(--gold-light); }
.text-gold-deep { color:var(--gold-deep); }

/* gradient-gull tekst: kun til store ting (store overskrifter, store tall).
   inline-block gjør at gradienten følger tekstbredden, ikke hele linjen. */
.text-gold-gradient { display:inline-block; background-image:var(--gold-gradient); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* gradient-gull flate: knapper, stolper. inset-skyggen gir metall-kanten */
.bg-gold { background:var(--gold-mid); background-image:var(--gold-gradient); color:var(--gold-ink); box-shadow:inset 0 1px 0 rgba(255,255,255, .45); transition:all 0.6s ease; }
.bg-gold:hover, .bg-gold:focus { background-image:var(--gold-gradient-hover); color:var(--gold-ink); transition:all 0.2s ease; }

/* kanter og svake flater */
.border-gold { border:1px solid rgba(var(--gold-rgb), .5); }
.bg-gold-fade { background:rgba(var(--gold-rgb), .15); }
/**/


/* body */
/* mørk slør over bildet demper kontrasten. øk/senk alpha i --bg-overlay for mer/mindre bilde */
body { position:relative; background:linear-gradient(var(--bg-overlay), var(--bg-overlay)), #333 url('../images/bg.jpg') no-repeat; background-position: center center; background-size: cover; background-attachment: fixed; width:100%; min-height:100vh; padding:0; margin:0;  }
/**/

/* text */
body, div, p, span { font-family:'Quicksand', sans-serif; font-weight: 500; color:rgba(255,255,255, 0.7); }
body { font-size: 16px;  }

h1 { font-size:26px; margin-bottom:50px; display:inline-block; background-image:var(--gold-gradient); -webkit-background-clip:text; background-clip:text; color:transparent; }
h2 { font-size:18px; margin-bottom:20px;  }
h1, h2, h3, h4, h5 { font-family:'Quicksand', sans-serif; font-weight: 500; }

a, a:visited { color:var(--gold-mid); transition: all 0.6s ease; }
a:hover { color:var(--gold-light); transition: all 0.2s ease; text-decoration:underline; }
/**/

/* misc */
.cursor-pointer { cursor:pointer; }
/**/


/* header */
/* mørkt glass som contentbox, med tynn gullkant i bunn.
   glasset ligger i :before - backdrop-filter direkte på headeren gjør den til containing block for burgermenyens position:fixed sidebar */
.section-header { position:fixed; z-index:1000; border-bottom:1px solid rgba(var(--gold-rgb), .35); padding:20px 20px 20px 20px; width:100%; box-sizing:border-box; box-shadow:0 0 15px 5px rgba(0,0,0, .3); transition:all 0.8s ease; }
.section-header:before { content:''; position:absolute; inset:0; z-index:-1; background:rgba(15,15,15, .75); -webkit-backdrop-filter:blur(14px) saturate(160%); backdrop-filter:blur(14px) saturate(160%); }
.section-header { padding-top:calc(10px + env(safe-area-inset-top)); } /* fix stupid bus pocket on iphone x */
.header-container { position:relative; border:none; }
.logo { float:left; width:100px; margin-top:2px; transition:all 0.8s ease; }
.header-info { position:relative; color:rgba(255,255,255, .7); text-align:right; float:right; margin-right:30px; margin-top:7px; font-size:0.8em; transition:all 0.8s ease; }
.header-info a, .header-info a:visited { color:rgba(255,255,255, .7); }
.header-menu-bm .bm-menubutton { background:var(--gold-mid); background-image:var(--gold-gradient); box-shadow:inset 0 1px 0 rgba(255,255,255, .45); border:1px solid var(--gold-deep); position:relative; padding:5px; float:right; margin-top:2px; border-radius:5px; font-size:18px; color:var(--gold-ink); cursor:pointer; transition:all 0.6s ease; }
.header-menu-bm .bm-menubutton:hover { background-image:var(--gold-gradient-hover); color:var(--gold-ink); transition:all 0.2s ease; }

.header-menu-bm .bm-sidebar-content { padding-top:env(safe-area-inset-top); background:#1a1a1a; border-left:1px solid rgba(var(--gold-rgb), .25); overflow-y: scroll; }
.header-menu-bm ul { list-style-type:none; margin:0; } 
.header-menu-bm li.menu-heading { display:block; box-sizing:border-box; padding:10px 10px 10px 15px; background:rgba(255,255,255, .04); color:var(--gold-mid); }
.header-menu-bm li a { position:relative; display:block; box-sizing:border-box; padding:10px 10px 10px 25px; color:rgba(255,255,255, .55); border-bottom:1px solid rgba(255,255,255, .05); font-weight:700; transition:all 0.6s ease; }
.header-menu-bm li a:hover { color:var(--gold-light); background:rgba(255,255,255, .05); text-decoration:none; transition:all 0.2s ease; }
.header-menu-bm li.current-menu-item a { background:rgba(var(--gold-rgb), .15); color:var(--gold-mid); }
.header-menu-bm li.current-menu-item a:before { position:absolute; display:block; content:''; border:8px solid transparent; border-left-color:var(--gold-mid); width:0; height:0; top:15px; left:0px; }

.header-menu-bm li.menu-spacer { height:20px; border-bottom:1px solid rgba(255,255,255,0.1); }
@media only screen and ( min-width: 640px) { 
    .logo { width:140px; margin-top:13px; } 
    .section-header { height:90px; }
    .header-info { margin-top:25px; margin-right:70px; }
    .header-menu-bm .bm-menubutton { margin-top:20px; }
}
/**/


/* ********** submenu **************** */
.submenu { overflow:hidden; margin:-20px 0 20px 0; }
.submenu ul { position:relative; list-style-type: none; margin-left:0; }
.submenu li { position:relative; float:left; margin-right:20px; padding:0; line-height:1em; }
.submenu li:after { position:absolute; display:inline-block; content:' '; width:10px; height:20px; border-right:1px solid rgba(255,255,255, .15); right:-10px; top:5px; }
.submenu li:last-child:after { border-right:none;}

.submenu li a { display:inline-block; padding:5px 0px; box-sizing:border-box; text-decoration:none; color:rgba(255,255,255, .55); font-size:14px; text-align:center; text-transform: uppercase; transition:all 0.6s ease; }
.submenu li a:hover { color:var(--gold-light); transition:all 0.2s ease; text-decoration:none; }

.submenu li.current-menu-item a { color:var(--gold-mid); }
/* ************************************** */




/* content */
#main-content { min-height:300px; padding:120px 20px 40px 20px; }
#main-content { padding-top:calc(120px + env(safe-area-inset-top)); }
#sub-content { padding:40px 0 0 0; }
/**/



/* forms */
/* mørke, halvgjennomsiktige felt som ligger på contentbox-glasset. color-scheme gjør at datovelger, rullefelt og option-lister også blir mørke */
input[type=text], input[type=password], input[type=email], input[type=number], input[type=date], select, textarea { color-scheme:dark; background-color:rgba(0,0,0, .3); border:1px solid rgba(255,255,255, .15); border-radius:5px; color:rgba(255,255,255, .9); transition:all 0.8s ease; box-shadow:none; }
input[type=text]:hover, input[type=password]:hover, input[type=email]:hover, input[type=number]:hover, input[type=date]:hover, select:hover, textarea:hover { border-color:rgba(255,255,255, .3); transition:all 0.2s ease; }
input[type=text]:focus, input[type=password]:focus, input[type=email]:focus, input[type=number]:focus, input[type=date]:focus, select:focus, textarea:focus { background-color:rgba(0,0,0, .45); border:1px solid var(--gold-mid); box-shadow:0 0 0 3px rgba(var(--gold-rgb), .15); color:#fff; transition:all 0.3s ease; outline:none; }
input:disabled, select:disabled, textarea:disabled { background-color:rgba(255,255,255, .04); border-color:rgba(255,255,255, .08); color:rgba(255,255,255, .35); cursor:not-allowed; }
input::placeholder, textarea::placeholder { color:rgba(255,255,255, .3); }
textarea { resize:none; }

/* egen pil i lys farge - native menulist ignorerer mørk bakgrunn i Safari */
select { -webkit-appearance:none; appearance:none; padding-right:2em; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23e2bd78' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right .75em center; background-size:12px 8px; background-origin:border-box; }
select > option { background:#222; color:rgba(255,255,255, .9); }

/* nettleserens autofyll farger ellers feltet lyst - skyggen maler over */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus { -webkit-text-fill-color:rgba(255,255,255, .9); -webkit-box-shadow:0 0 0 1000px #2a2a2a inset; caret-color:#fff; transition:background-color 9999s ease; }

[type=checkbox] { margin:0; accent-color:var(--gold-mid); }
[type=checkbox]+label, label { display:inline-block; font-size:1em; margin:0; box-sizing:border-box; width:calc(100% - 20px); color:rgba(255,255,255, .7); }

.input_error, .input_error:focus { border:1px solid #e0443e !important; }
.input_label { padding-top:7px;  }


.switch { display:inline-block; margin-bottom:0; }
input:checked~.switch-paddle { background:linear-gradient(254deg, #1dc4e9, #049df5);  }
.switch-label { position:relative; top:-9px; display:inline-block; line-height:28px; padding-left:10px; }


.button, .button[disabled], .button[disabled]:hover, .button[disabled]:hover, a.button { position:relative; margin:0; background:var(--gold-mid); background-image:var(--gold-gradient); color:var(--gold-ink); border-radius:5px; border:1px solid var(--gold-deep); box-shadow:inset 0 1px 0 rgba(255,255,255, .45); transition:all 0.6s ease; }
.button:hover, .button:focus { background-image:var(--gold-gradient-hover); color:var(--gold-ink); transition:all 0.2s ease; outline:none; }
.button-shadow { box-shadow:0 0 5px 5px rgba(0,0,0,0.2); }

.button-on, a.button-on { background:var(--color-accent); color:#000; }
.button-arrow-down::after { content:''; display:inline-block; position:absolute; bottom:-10px; left:calc(50% - 10px); width:20px; height:20px; border:solid var(--color-accent); border-width:0 3px 3px 0; transform: rotate(45deg); }

.button-red, a.button-red { background:rgba(221,0,0, .12); color:#d00; border-color:#d00; box-shadow:none; } /* egen bakgrunn, ellers slår gull-gradienten fra .button gjennom */
.button-red:hover, .button-red:focus { background:#d00; }

.button-green, a.button-green { background:rgba(0,170,0, .12); color:#0a0; border-color:#0a0; box-shadow:none; }
.button-green:hover, .button-green:focus { background:#0a0; }

.button-small, a.button-small { padding:0.4em 0.8em; font-size:0.8em;  }
/**/


/* segmentvelger: radioknapper som ser ut som en knapperad. valgt knapp får gull som .button, og samme høyde (font-size, line-height, padding og 1px kant som foundation .button) */
.segment { display:inline-flex; border:1px solid rgba(var(--gold-rgb), .5); border-radius:5px; overflow:hidden; }
.segment label { position:relative; width:auto; margin:0; cursor:pointer; }
.segment input { position:absolute; opacity:0; width:0; height:0; }
.segment span { display:block; padding:.85em .9em; font-size:.9rem; line-height:1; white-space:nowrap; background:rgba(0,0,0, .3); color:rgba(255,255,255, .55); transition:all 0.6s ease; }
.segment label:hover span { color:var(--gold-light); transition:all 0.2s ease; }
.segment input:checked + span { background:var(--gold-mid); background-image:var(--gold-gradient); color:var(--gold-ink); box-shadow:inset 0 1px 0 rgba(255,255,255, .45); }
.segment input:focus-visible + span { outline:2px solid var(--gold-deep); outline-offset:-2px; }
.segment span i { margin-right:.4em; color:inherit; }


/* datepicker */
.dp_wrapper { display:block; position:relative; }
.dp_icon_bg { position:absolute;top:1px; right:1px; width:35px; height:37px; box-sizing:border-box; background:#eee; border-left:1px solid #ccc; border-radius:0 5px 5px 0; text-align:center; padding-top:8px; cursor:pointer; }
.dp_icon_svg { fill:#666; transition:fill 0.6s ease; height:21px; }
.dp_icon_bg:hover > .dp_icon_svg { fill:var(--color-accent); transition:fill 0.1s ease;  }
/**/


/* notifications */
.note { background-color:transparent !important; border:none; color:#4caf51 !important; text-align:center;   }
.error{ background:transparent !important;  border:none;  color:#d00 !important; text-align:center; }
.error a, .error a:visited { color:#a00; }
.error a:hover { color:#800; }
.note i, .error i { margin-right:15px;  }
/**/



/*////////////////// responsive tables ////////////////////////////////*/

/* container */
.t-container { display:block; position:relative; overflow:hidden;}
@media only screen and ( max-width: 640px) { .t-container { margin-left:-20px; margin-right:-20px; } } /* remove body padding on table lists on small screens */
/**/

/* row */
.trow, .throw { display:flex; flex-flow: row wrap; position:relative; transition:0.6s all ease; }
/**/

/* alternate row background color */
.t-row-alt > .trow:nth-of-type(even) { background:rgba(255,255,255, .06); }
.t-row-alt > .trow:nth-of-type(odd) { background:rgba(255,255,255, .03); }
/**/

/* table cell */
.tcell { flex:1 1 0px; padding:10px; position:relative; }
.throw .tcell { font-weight:normal; background:rgba(0,0,0, .35); color:var(--gold-mid); }
.trow > .tcell:first-child, .throw > .tcell:first-child { padding-left:20px; }
.trow > .tcell:last-child, .throw > .tcell:last-child { padding-right:20px; }
/* */

/* borders */
.t-border { border:1px solid rgba(255,255,255, .12); border-radius:5px; }
@media only screen and ( max-width: 640px) { .t-border { border-radius:0px; } } /* remove body padding on table lists on small screens */

.t-row-border > .throw > .tcell, .t-row-border > .trow > .tcell { border-top:1px solid rgba(255,255,255, .07); }
.t-row-border > .trow:first-child > .tcell, .t-row-border > .throw:first-child > .tcell { border-top:none;  }

.tborder-cell .tcell { border-top:3px solid rgba(0,0,0, .25); border-right:3px solid rgba(0,0,0, .25); }
.tborder-cell .tcell:last-child { border-right:none;  }
.tborder-cell > .trow:first-child > .tcell:last-child { border-top:none;  }
/**/

/* hover effect */
.t-hover > .trow:hover { background-color:rgba(var(--gold-rgb), .12); cursor:pointer; transition:0.2s all ease; }
/**/

/* mobile table break */
@media only screen and (max-width: 550px){
    
    .t-break .throw { display:none; }
    .t-break .trow { margin-top:5px; }
    .t-break .trow, .t-break .tcell { display:block; }
    .t-break .tcell { text-align:left; }

    .t-break-label .tcell::before { position:absolute; top:0; left:0; display:block; content: attr(data-label); color:var(--gold-mid); font-size:.8em; height:100%; width:100px; background:rgba(0,0,0, .25); text-align:left; padding:10px; }
    .t-break-label .tcell { padding-left:110px !important; }
} 
/**/


/*////////////////////////////////////////////////////////////////*/


/* box */
.box-square { position:relative; padding-top:100%; }
.box-3-4 { position:relative; padding-top:125%; }
.box-content { position:absolute; top:0; left:0; width:100%; min-height:100%; box-sizing: border-box; }
/**/

/* tint hover (accent color over entire element on hover) */
.tint-hover { cursor:pointer; }
.tint-hover img { filter:grayscale(100%);  }
.tint-hover:after{ content:''; display:block; position:absolute;  top:0; bottom:0;  left:0;  right:0; opacity:0; transition:all 0.6s linear; }
.tint-hover:hover:after{  background:var(--color-accent); opacity:0.2; transition:all 0.2s linear; }
/**/

/* contentbox */
.contentbox { background:rgba(20,20,20, .45); -webkit-backdrop-filter:blur(14px) saturate(160%); backdrop-filter:blur(14px) saturate(160%); box-shadow:0 4px 20px rgba(0,0,0, .15); padding:20px; color:#5d5d5d; position:relative;  }
@media only screen and ( max-width: 640px) { .contentbox { margin-left:-20px; margin-right:-20px; } } /* remove body padding on small screens */
/* kanten tegnes som en 1px gradient-ring i :after (maskert), derfor gjennomsiktig border her */
.contentbox-border { border:1px solid transparent; border-radius:5px;  }
.contentbox-border:after { content:''; position:absolute; inset:-1px; border-radius:inherit; padding:1px; pointer-events:none;
    background:linear-gradient(140deg, rgba(255,255,255, .55) 0%, rgba(255,255,255, .12) 35%, rgba(255,255,255, .04) 55%, rgba(255,255,255, .30) 100%);
    -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite:xor;
    mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite:exclude; }

.contentbox-blue { background:rgba(40,40,40, .45); -webkit-backdrop-filter:blur(14px) saturate(160%); backdrop-filter:blur(14px) saturate(160%); box-shadow:0 4px 20px rgba(0,0,0, .15); padding:20px; color:#5d5d5d; position:relative; }
.contentbox-blue input, .contentbox-blue select, .contentbox-blue textarea { border:none; }
.contentbox-white { background: #fff; color:#555; }

.contentbox-arrow-up:before { position:absolute; display:block; content:''; border:10px solid transparent; border-bottom-color:rgba(0,0,0, .45); width:0; height:0; top:-20px; left:40px;  }
/**/

/* contentbox in list */
.t-contentbox { background:rgba(255,255,255, .05); padding:20px; color:rgba(255,255,255, .7); position:relative; }
.t-contentbox-arrow-up:before { position:absolute; display:block; content:''; border:10px solid transparent; border-bottom-color:rgba(0,0,0, .3); width:0; height:0; top:-20px; left:40px; } /* samme farge som .t-contentbox */
.t-contentbox-border { border:1px solid rgba(255,255,255, .12); border-radius:5px; }
/**/

/* toggle content */
.toggle-content { display:none; flex:none; width:100%; box-sizing:border-box; }
/**/

/* misc content elements */
.divider { border-top:1px solid rgba(0,0,0, .1); margin-top:30px; height:30px; }
/**/

/* image thumbnails and viewer */
.imagethumb-container { text-align:left; }
.imagethumb { position:relative; float:left; width:180px; height:180px; background-size:cover; background-repeat:no-repeat; background-position:center center; border:1px solid #111; margin:0 10px 10px 0; cursor:pointer; }
@media only screen and ( max-width: 640px) { .imagethumb { width:135px; height:135px; } }
.imageupload { border:1px solid transparent; }

.img-square { border:1px solid #111; width:100%; padding-top:100%; background-size:cover; background-repeat:no-repeat; background-position:center center; } /* square container 100% size */

.ow-imageview-container { position:relative; z-index:2; width: calc(100vw - 92px); max-width:1110px; }
/**/

/* ax loader */
.axloader { text-align:center; margin-top:40px; }
.axloader img { width:50px; }
.axloader-tmp { display:none; width:50px; margin-top:-15px; }
/**/

/* open window */
.ow-window { display:none; background:#111; border:1px solid #333; padding:35px; box-sizing:border-box; box-shadow:0px 0px 10px 7px rgba(0,0,0,0.3); color:#000; max-width:1200px;  }
@media only screen and ( max-width: 640px) { 
    .ow-window { padding:35px 10px 10px 10px; } 
}
.ow-content::-webkit-scrollbar { display:none; } 
.ow-closebutton { position:absolute; top:2px; right:3px; padding:0; margin:0; font-size:16px; color:#666; cursor:pointer; transition: all 0.2s ease; }
.ow-closebutton:hover { color:var(--color-accent); transition: all 0.2s ease; }
/**/

/* custom checkbox switch */
.icswitch {  position: relative;  display: inline-block;  width: 50px;  height: 20px; }
.icswitch input {   opacity: 0;  width: 0;  height: 0; }
.icslider {  position: absolute; cursor: pointer; color:#fff;  top: 0;  left: 0;  right: 0;  bottom: 0;  background-color: #c00; box-shadow:inset 0px 0px 3px 1px rgba(0,0,0, .3);  -webkit-transition: .4s;  transition: .4s; border-radius: 34px;  }
.icslider:before { content: "";  position:absolute; left:0px; bottom:0px; z-index:1; box-sizing: border-box; box-shadow:0 0 5px #000; border-radius: 50%; height:20px;  width:20px;   background-color: white;  -webkit-transition: .4s;  transition: .4s;  }
.icslider:after { content: attr(data-labeloff); display:inline-block; width:calc(100% - 20px); float:right; position:realtive; z-index:0; color:#fff; line-height: 20px; font-size: 12px; text-align:center; }
input:checked + .icslider {  background-color: #87c540; }
input:checked + .icslider:before {  transform: translateX(30px); }
input:checked + .icslider:after { content:attr(data-labelon); float:left; }

.icswitch.icswitch-long { width:90px; }
.icswitch.icswitch-long input:checked + .icslider:before {  transform: translateX(70px); }
/**/

/* patch (colored pathes) */
.patch { display:inline-block; background-color: #ccc; border:1px solid #666; color:#333; border-radius:3px; padding:0.2em 0.8em; box-sizing: border-box; }
.patch-accent { background-color:rgba(var(--color-accent-rgb), .2); border-color:var(--color-accent); color:var(--color-accent); }
.patch-accent2 { background-color:rgba(var(--color-accent2-rgb), .2); border-color:var(--color-accent2); color:var(--color-accent2); }
.patch-green { background-color:#ebf8a4; border-color:#a2d246; color:#508811; }
.patch-orange { background-color:#ffe1c3; border-color:#ff9900; color:#aa4400; }
.patch-red { background-color:#ffc0cb; border-color:#800000; color:#800000; }

.patch span { color:inherit; }
/**/

/* grafer */
.diagram-container { position:relative; height:400px;border-bottom:1px solid rgba(0,0,0, .2); }
@media only screen and ( max-width: 640px) { .diagram-container { height:300px; } }
.diagram-itembg { display:block; content:' '; position:absolute;bottom:0; width:100%; max-width:40px; height:100%; background:rgba(0,0,0,.2); border-radius: 5px 5px 0 0;  }
.diagram-item { position:absolute;bottom:0; width:8%; max-width:40px; background:rgba(var(--gold-rgb), .3); border-radius: 5px 5px 0 0; transform-origin:100% 100%; animation:1s ease-out 0s 1 diagram-height; cursor:pointer; }
.diagram-subitem { position:absolute;bottom:0; width:100%; background:rgba(var(--color-accent-rgb), .3); }
.diagram-txt { position:absolute; left:calc(50% - 10px); bottom:0; color:#333; font-size:.8em; transform:rotate(-90deg); transform-origin:0 0; white-space: nowrap; transition:all 1s ease;  }
.diagram-txt-horizontal { position:absolute; left:0; bottom:0; width:100%; text-align:center; font-size:10px; white-space: nowrap; transition:all 1s ease;  }
.diagram-txt-top { position:absolute; left:0; top:-20px; width:100%; text-align:center; font-size:.8em; white-space: nowrap; transition:all 1s ease;  }
.diagram-label { position:absolute; left:0; bottom:-20px; width:100%; text-align:center; font-size:.8em; white-space: nowrap; transition:all 1s ease;  }
.diagram-comparison { position:absolute; left:0px; width:8%; max-width:40px; height:15px; border-radius:5px; background:rgba(var(--gold-rgb), .8); font-size:10px; text-align:center; color:#000; animation:1s ease-out 0s 1 diagram-height; }
@keyframes diagram-height {
    0% { transform: scaleY(0); }
    100% { transform: scaleY(1); }
}
/**/

/* animations */
@keyframes ani-width {
    0% { transform: scaleX(0); }
    100% { transform: scaleX(1); }
}
/**/


/* circular graph */
.chart-pieopen { position:relative; display:inline-block; } /* container */
.chart-pieopen svg {  display: block;  max-width: 100%; } /* svg element */
.chart-pieopen svg path:nth-child(1) {  fill: none;  stroke: #555;  stroke-width: 3.8; } /* full circle */
.chart-pieopen svg path:nth-child(2)  {  fill: none;  stroke-width: 2.8; stroke:var(--color-accent); stroke-linecap: round;  animation: chart-pieopen-ani 1s ease-out forwards; } /* filled circle */

@keyframes chart-pieopen-ani {
  0% { stroke-dasharray: 0 100; }
}

.chart-pie-label { position:absolute; top:50%; transform: translateY(-50%); left:0; right:0; text-align:center;} /* label inside circle */
/**/

/* ukesoversikt */
.uo-oppdrag-wrapper { box-sizing:border-box; float:left; }
.uo-oppdrag { box-sizing:border-box; border-radius:3px; background:rgba(255,255,255, .05); padding:5px; margin:2px 4px 0 0; border:1px solid #444; }
.uo-ingenoppdrag { background:rgba(255,255,255, 0.03); color:rgba(255,255,255,0.4); }
.uo-fravar { background:rgba(200, 0, 0, .4); color:rgba(255,255,255,.8); }
.uo-antall-biler { display:inline-block; float:right;  background:#eee; color:#666; text-align:center; width:20px; height:20px; border-radius:20px; margin-right:4px; padding-top:1px; }
.uo-antall-biler-green { background-color:#d4ebd6;  }
.uo-antall-biler-blue { background-color:rgba(var(--color-accent-rgb), .2);  }
/**/

/* image holders (with correct aspect ratio) */
.imgholder { width:100%; padding-top:100%; position:relative; }
.img-21 { padding-top:50%; }
.img-169 { padding-top:56.25%; }
.img-43 { padding-top:75%; }
.img-11 { padding-top:100%; }
.imgholder img { width:100%; height:100%; object-fit:cover; position:absolute; top:0; }

.img-noimg { width:100%; height:100%; position:absolute; top:0; background:rgba(0,0,0, .05); color:rgba(0,0,0, .03); text-align:center; font-size:150px; line-height:1em; padding:0; }
.img-noimg svg { position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); }
/**/

/* footer*/
.footer-credits { text-align:center; font-size:0.8em;  margin-top:80px; padding-bottom:60px; }
.footer-credits  img { float:left; width:30px; margin-right: 10px; }
.footer-content { width:210px; margin:0 auto; }
.footer-content div { color:rgba(0,0,0, .2);}
.footer-content div a, .footer-content div a:visited { color:rgba(0,0,0, .5); transition:all 0.6s ease; }
.footer-content div a:hover { color:var(--color-accent);  transition:all 0.2s ease; }
/**/

/* tema-klasser: samme navn i style_dark.css og style_light.css, men verdi tilpasset bakgrunnen.
   brukes i stedet for inline rgba(255,255,255,…)/rgba(0,0,0,…) i php, som bare virker i ett av temaene */
.text-title { color:#fff; }        /* underoverskrifter (h2) */
.text-fade { color:rgba(255,255,255, .6); }
.text-superfade { color:rgba(255,255,255, .3); }
.text-divider { color:rgba(255,255,255, .3); }          /* skilletegn mellom tall, f.eks. 12 / 20 og 3 | 4 */
.text-watermark { color:rgba(255,255,255, .1); }        /* store, svake plassholder-ikoner */
.bg-shade { background:rgba(255,255,255, .06); }         /* svak flate: brikker, merkelapper, plassholdere */
.bg-shade-mid { background:rgba(255,255,255, .1); }
.bg-shade-strong { background:rgba(255,255,255, .14); }  /* tydeligere flate: overskriftsrader */
.border-shade { border:1px solid rgba(255,255,255, .1); }
.border-bottom-shade { border-bottom:1px solid rgba(255,255,255, .1); }
/**/


/* background classes */
.bg-accent { background:var(--color-accent); }
/**/


/* text classes */
.text-xxs { font-size:10px; }
.text-xs { font-size:12px; }
.text-s { font-size:14px; }
.text-l { font-size:18px; }
.text-xl { font-size:24px; }
.text-xxl { font-size: 38px; }
.text-right { text-align: right;  }
.text-center { text-align: center;  }
.text-justify { text-align: justify;  }
.text-nowrap { white-space: nowrap; }
.text-bold { font-weight:bold; }

.text-yellow { color:var(--color-accent); }
.text-green { color:#00a846; }
.text-white { color:rgba(255,255,255,1);  }
.text-white-fade { color:rgba(255,255,255,0.6);  }
.text-white-superfade { color:rgba(255,255,255,0.3);  }
.text-black-fade { color:rgba(0,0,0, .4);  }
.text-black-superfade { color:rgba(0,0,0, .2);  }
.text-blue { color:var(--color-accent);  }
.text-lightblue { color:#b5d8ef; }
.text-red { color:#a00;  }
/**/

/* Tilgjengelig allikevel i kjøreplan */
.allikevel-icon-red {
    float: right;
    margin: 3px 7px 0 0;
    color:#d00;
    border-color:#d00;
    cursor: pointer;
}
.allikevel-icon-red:hover {
    /* background:#d00; */
    color: #d00;}

.allikevel-icon-green {
    float: right;
    margin: 3px 7px 0 0;
    color:#fff;
    border-color:#fff;
    cursor: pointer;
}
.allikevel-icon-green:hover {
    /* background:#0a0; */
    color: #fff;
}
/**/


/* ======================= DEL 2: nytt design (mørk) ======================= */
:root {
  --bf-bg:#F5F4F1; --bf-surface:#FFFFFF; --bf-surface-alt:#FAF9F6; --bf-input:#FFFFFF; --bf-input-default:#FFFFFF; --bf-input-onwhite:#F5F4F1;
  --bf-input-border:#E3E0D9; --bf-input-ring:transparent; --bf-placeholder:#A6A198; --bf-toggle-off:#B83E2E; --bf-hover:#F7F3EA; --bf-hover-border:#D9CDB0;
  --bf-border:#E3E0D9; --bf-divider:#EFECE6;
  --bf-text:#1D1C1A; --bf-text-muted:#6E6A62; --bf-text-faint:#A6A198; --bf-text-ghost:#D3CFC7; --bf-dropzone:#6E6A62;
  --bf-header:#171614; --bf-header-text:#EDEAE4; --bf-header-muted:#A8A399; --bf-header-border:#2E2C29;
  --bf-gold:#C29B45; --bf-gold-text:#86661C; --bf-gold-soft:#F6EEDC; --bf-gold-ink:#241A0A;
  --bf-gold-display:#A57E2D;                                  /* gull for tittel og pris */
  --bf-cta:#C9A24D; --bf-cta-hover:#B48D3A; --bf-cta-ink:#241A0A; /* hovedknapp, lik i begge moduser */
  --bf-chip:#EEECE7; --bf-chip-text:#2A2926;
  --bf-ok:#5DBB85; --bf-ok-soft:#D4ECDD; --bf-ok-ink:#17603A;
  --bf-transit:#78A6DC; --bf-transit-soft:#D3E3F5; --bf-transit-ink:#1C5088;
  --bf-stop:#B83E2E; --bf-stop-soft:#F8E3DF; --bf-empty:#EAE7E1; --bf-fravar:#F2BDB3; --bf-fravar-border:#E0968A;
  --bf-shadow:0 1px 2px rgba(29,28,26,.04);
  --bf-select-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236E6A62' stroke-width='1.5'/%3E%3C/svg%3E");
  --bf-scheme:light;

  --bf-gold-rgb:194,155,69;
  /* mørk modus overstyrer */
  --bf-bg:#121211; --bf-surface:#1B1A18; --bf-surface-alt:#201F1C; --bf-input:#34322E; --bf-input-default:#34322E; --bf-input-onwhite:#34322E;
    --bf-input-border:#4A4740; --bf-input-ring:#4A4740; --bf-placeholder:#8A857B; --bf-toggle-off:#A3412D; --bf-hover:#302C25; --bf-hover-border:#5A5244;
  --bf-border:#2E2C29; --bf-divider:#262522;
  --bf-text:#ECE9E3; --bf-text-muted:#9A958B; --bf-text-faint:#66625B; --bf-text-ghost:#48453F; --bf-dropzone:#3A3834;
  --bf-header:#0C0C0B; --bf-header-text:#ECE9E3; --bf-header-muted:#9A958B; --bf-header-border:#262522;
  --bf-gold:#D2AE5F; --bf-gold-text:#D8B76D; --bf-gold-soft:#2B2518; --bf-gold-ink:#241A0A; --bf-gold-display:#D8B76D;
  --bf-chip:#45423D; --bf-chip-text:#F0EDE7;
  --bf-ok:#5DBB85; --bf-ok-soft:#235C3C; --bf-ok-ink:#A6EFC2;
  --bf-transit:#78A6DC; --bf-transit-soft:#22446E; --bf-transit-ink:#C2DCFA;
  --bf-stop:#F0907C; --bf-stop-soft:#5A2B23; --bf-empty:#201F1C; --bf-fravar:#5A2B23; --bf-fravar-border:#5A2B23;
  --bf-shadow:none;
  --bf-select-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%239A958B' stroke-width='1.5'/%3E%3C/svg%3E");
  --bf-scheme:dark;
  --bf-gold-rgb:210,174,95;
}
:root { color-scheme:var(--bf-scheme); }

/* ---------- side og tekst ---------- */
body { background:var(--bf-bg); }                              /* fjerner bakgrunnsbildet */
body, div, p, span { color:var(--bf-text); }
h1 { background-image:none; -webkit-background-clip:border-box; background-clip:border-box; color:var(--bf-text); }
a, a:visited { color:var(--bf-gold-text); }
a:hover { color:var(--bf-text); }

/* ---------- header (mørkt merkebånd i begge moduser) ---------- */
.section-header { border-bottom-color:var(--bf-header-border); box-shadow:none; }
.section-header:before { background:var(--bf-header); -webkit-backdrop-filter:none; backdrop-filter:none; }
.section-header div, .section-header span, .header-info, .header-info a, .header-info a:visited { color:var(--bf-header-text); }
.header-menu-bm .bm-menubutton { background:transparent; background-image:none; box-shadow:none; border-color:var(--bf-header-border); color:var(--bf-header-text); }
.header-menu-bm .bm-menubutton:hover { background:rgba(255,255,255,.06); background-image:none; color:var(--bf-gold); }
.header-menu-bm .bm-sidebar-content { background:var(--bf-surface); border-left-color:var(--bf-border); }
.header-menu-bm li.menu-heading { background:var(--bf-surface-alt); color:var(--bf-text-muted); }
.header-menu-bm li a { color:var(--bf-text); border-bottom-color:var(--bf-divider); }
.header-menu-bm li a:hover { color:var(--bf-text); background:var(--bf-hover); }
.header-menu-bm li.current-menu-item a { background:var(--bf-gold-soft); color:var(--bf-gold-text); }
.header-menu-bm li.current-menu-item a:before { border-left-color:var(--bf-gold); }
.header-menu-bm li.menu-spacer { border-bottom-color:var(--bf-divider); }

/* ---------- lys/mørk-bryter i headeren (se js/bilfoto-theme-toggle.js) ----------
   Ligger til venstre for menyknappen, samme størrelse og kant. Viser måne i lys
   modus og sol i mørk modus. */
.bf-theme-toggle { float:right; box-sizing:border-box; width:30px; height:30px; margin:2px 10px 0 0; padding:0;
  display:grid; place-items:center; background:transparent; border:1px solid var(--bf-header-border); border-radius:5px;
  color:var(--bf-header-text); cursor:pointer; transition:color .2s ease, background-color .2s ease; }
.bf-theme-toggle:hover { background:rgba(255,255,255,.06); color:var(--bf-gold); }
.bf-theme-toggle:focus-visible { outline:2px solid var(--bf-gold); outline-offset:2px; }
.bf-theme-toggle svg { width:16px; height:16px; }
.bf-theme-toggle .bf-icon-moon { display:none; }
.bf-theme-toggle .bf-icon-sun { display:block; }
.header-container:has(.bf-theme-toggle) .header-info { margin-right:16px; }   /* ukevelgeren flyttes inntil bryteren */
@media only screen and (min-width:640px) {
  .bf-theme-toggle { margin-top:20px; }            /* samme høyde som menyknappen */
  .header-container:has(.bf-theme-toggle) .header-info { margin-right:24px; }
}

/* ---------- undermeny (OPPDRAGSLISTE | KJØREPLAN) ----------
   Fanelinje i full bredde rett under headeren, venstrejustert med logo og
   sidetittel (20px). Aktiv fane: vanlig tekstfarge + gull strek under. */
.submenu { position:static; overflow:visible; height:45px;
  /* flaten og linjen under males ut til begge sider med border-image (utvider ikke siden, gir ingen sidelengs rulling) */
  border-image:linear-gradient(var(--bf-surface) calc(100% - 1px), var(--bf-border) 0) fill 0 / 0 / 0 100vw;
  margin-top:-57px; }               /* mobil: header er 63px høy, innhold starter på 120px */
/* fanene plasseres 20px fra venstre kant av siden (body er position:relative), på linje med logoen */
.submenu ul { position:absolute; left:20px; display:flex; gap:28px; margin:0; }
.submenu li { float:none; margin:0; }
.submenu li:after { display:none; }
.submenu li a { display:block; padding:15px 0 12px; margin-bottom:-1px; border-bottom:2px solid transparent;
  font-size:13px; font-weight:600; letter-spacing:.06em; color:var(--bf-text-muted);
  transition:color .2s ease, border-color .2s ease; }   /* style_dark.css animerer «all», også størrelser */
.submenu li a:hover { color:var(--bf-text); }
.submenu li.current-menu-item a { color:var(--bf-text); border-bottom-color:var(--bf-gold); }
@media only screen and (min-width:640px) {
  .submenu { margin-top:-30px; }   /* header er 90px høy, innhold starter på 120px: linjen legger seg rett under */
}

/* ---------- skjema ---------- */
input[type=text], input[type=password], input[type=email], input[type=number], input[type=date], select, textarea {
  color-scheme:var(--bf-scheme); background-color:var(--bf-input); border-color:var(--bf-input-border); color:var(--bf-text); }
/* filterboksene har felt uten kant (border:none i originalen). i mørk modus får de en tynn ring i stedet, uten å endre størrelsen */
.contentbox-blue input, .contentbox-blue select, .contentbox-blue textarea { box-shadow:inset 0 0 0 1px var(--bf-input-ring); }
input[type=text]:hover, input[type=password]:hover, input[type=email]:hover, input[type=number]:hover, input[type=date]:hover, select:hover, textarea:hover { border-color:var(--bf-text-faint); }
input[type=text]:focus, input[type=password]:focus, input[type=email]:focus, input[type=number]:focus, input[type=date]:focus, select:focus, textarea:focus {
  background-color:var(--bf-input); border-color:var(--bf-gold); box-shadow:0 0 0 3px rgba(var(--bf-gold-rgb), .18); color:var(--bf-text); }
input:disabled, select:disabled, textarea:disabled { background-color:var(--bf-surface-alt); border-color:var(--bf-divider); color:var(--bf-text-faint); }
input::placeholder, textarea::placeholder { color:var(--bf-placeholder); }
select { background-image:var(--bf-select-arrow); }
select > option { background:var(--bf-surface); color:var(--bf-text); }
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus { -webkit-text-fill-color:var(--bf-text); -webkit-box-shadow:0 0 0 1000px var(--bf-input) inset; caret-color:var(--bf-text); }
[type=checkbox]+label, label { color:var(--bf-text); }

/* ---------- knapper: flat gull, ingen glans ---------- */
.button, .button[disabled], .button[disabled]:hover, a.button { background:var(--bf-cta); background-image:none; color:var(--bf-cta-ink); border-color:var(--bf-cta); box-shadow:none; }
.button:hover, .button:focus { background:var(--bf-cta-hover); background-image:none; color:var(--bf-cta-ink); border-color:var(--bf-cta-hover); }

/* ---------- bokser og tabeller ---------- */
.contentbox, .contentbox-blue { background:var(--bf-surface); -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:var(--bf-shadow); color:var(--bf-text); }
.contentbox-border:after { background:var(--bf-border); }
.t-border { border-color:var(--bf-border); }

/* utvidet rad i lister (Brukeradmin, Kundeadmin): kort i samme farge som popup-kortet, med tynn linje over og under */
.t-contentbox { background:var(--bf-surface-alt); color:var(--bf-text);
  box-shadow:inset 0 1px 0 var(--bf-border), inset 0 -1px 0 var(--bf-border); }
.t-contentbox-arrow-up:before { border-bottom-color:var(--bf-border); }

/* feltfarge i lys modus: hvit som standard (på sidebakgrunn, i popup og i utvidet rad),
   men grå inne i hvite bokser (.contentbox: filterbokser, «Ny bil», objektboksen i popupen) så feltet synes.
   Gjøres ved å bytte variabelen inne i boksen, så alle felt-regler (hover, fokus, autofyll) følger med. */
.ow-window, .t-contentbox { --bf-input:var(--bf-input-default); }   /* kort: alltid standardfarge, også om kortet ligger i en hvit boks */
.contentbox { --bf-input:var(--bf-input-onwhite); }

/* seksjonsoverskrifter i utvidet rad (h2.text-blue): samme gull som tittel og pris i popupen */
.t-contentbox h2.text-blue { color:var(--bf-gold-display); }
.t-row-alt > .trow:nth-of-type(even) { background:var(--bf-surface-alt); }
.t-row-alt > .trow:nth-of-type(odd) { background:var(--bf-surface); }
.throw .tcell { background:var(--bf-surface-alt); color:var(--bf-text-muted); }
.t-row-border > .throw > .tcell, .t-row-border > .trow > .tcell { border-top-color:var(--bf-divider); }
.t-hover > .trow:hover { background-color:var(--bf-hover); }
.t-break-label .tcell::before { color:var(--bf-text-muted); background:var(--bf-surface-alt); }
/* ---------- oppdragsvindu (popup, .ow-window) ----------
   Samme regler som resten: rolige flater, tekstfarge på overskrifter, gull kun
   på hovedknappen (Lagre). Seksjonsoverskriftene har samme stil som fanene. */
.ow-window { background:var(--bf-surface); border:1px solid var(--bf-border); border-radius:12px;
  box-shadow:0 24px 64px rgba(0,0,0,.35); color:var(--bf-text); }
.ow-closebutton { color:var(--bf-text-muted); }
.ow-closebutton:hover { color:var(--bf-text); }
.ow-window a:hover { text-decoration:none; }
.ow-window h1 + div a, .ow-window h1 + div a:visited { color:var(--bf-text-muted); }   /* adresse */
.ow-window h1 + div a:hover { color:var(--bf-text); }
.ow-window .t-contentbox { border:1px solid var(--bf-divider); border-radius:10px; box-shadow:none; }
.ow-window .input_label, .ow-window .grid-x > .cell.large-3 { color:var(--bf-text-muted); }   /* alle feltnavn i venstre kolonne */
.ow-window h2.text-gold-gradient { display:block; background-image:none; color:var(--bf-text-muted); font-size:13px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; padding-bottom:8px; border-bottom:1px solid var(--bf-border); }
.ow-window h1 { color:var(--bf-gold-display); }                                        /* forhandlernavn */
.ow-window .text-xl.text-gold-gradient { background-image:none; color:var(--bf-gold-display); font-weight:600; font-variant-numeric:tabular-nums; }
.ow-window .contentbox, .ow-window .contentbox div { color:var(--bf-text); }
.ow-window .fa-edit.text-gold { color:var(--bf-text-muted); cursor:pointer; }
.ow-window .fa-edit.text-gold:hover { color:var(--bf-gold-text); }
/* prosess-ikonene (kopier / send), i oppdragslisten og i popupen:
   levert = gull, ikke levert = svært lys grå, i en hvit boks med tynn kant */
.fa-copy.text-gold, .fa-paper-plane.text-gold { color:var(--bf-gold); }
.fa-copy.text-superfade, .fa-paper-plane.text-superfade { color:var(--bf-text-ghost); }
.bg-shade:has(> .fa-copy) { background:var(--bf-surface); box-shadow:inset 0 0 0 1px var(--bf-border); }
.ow-window .text-l[style*="background"] { background:var(--bf-surface) !important; border:1px solid var(--bf-border); }

/* sekundærknapper: Legg til ordrelinje, Logg, Dropbox kundemappe */
.ow-window .button[title="Legg til ordrelinje"], .ow-window .button[title="Logg"] {
  background:transparent; color:var(--bf-text); border-color:var(--bf-border); }
.ow-window .button[title="Legg til ordrelinje"]:hover, .ow-window .button[title="Logg"]:hover {
  background:var(--bf-hover); color:var(--bf-text); border-color:var(--bf-hover-border); }

/* Dropbox kundemappe: samme blå som Dropbox-ikonet */
.ow-window a.button.button-small, .ow-window a.button.button-small:visited {
  background:var(--bf-transit-soft); color:var(--bf-transit-ink); border-color:var(--bf-transit); }
.ow-window a.button.button-small svg { color:var(--bf-transit); }
.ow-window a.button.button-small:hover { background:var(--bf-transit); color:#fff; border-color:var(--bf-transit); }
.ow-window a.button.button-small:hover svg { color:#fff; }

/* fak/rek-bryter */
/* av/på-brytere (fak/rek, ja/nei): samme rød og grønn overalt - popup, Brukeradmin, Kundeadmin */
.icslider { background-color:var(--bf-toggle-off); box-shadow:none; }
input:checked + .icslider { background-color:var(--bf-ok); }

/* opplastingsfeltet (Eksempelbilder i Kundeadmin). Selve feltet er en iframe med egen stil (hvitt ikon, hvit
   stiplet kant) som vi ikke når - vi bytter bare den blå flaten bak til en rolig grå og runder hjørnene. */
.bg-accent:has(> iframe) { background:var(--bf-dropzone); border-radius:10px; overflow:hidden; }
.footer-content div { color:var(--bf-text-faint); }
.footer-content div a, .footer-content div a:visited { color:var(--bf-text-muted); }

/* ---------- kjøreplan / ukesoversikt ---------- */
.uo-oppdrag { background:var(--bf-surface); border-color:var(--bf-border); }
.uo-oppdrag:hover { background:var(--bf-hover); border-color:var(--bf-hover-border); }
.uo-ingenoppdrag, .uo-ingenoppdrag div { background:var(--bf-empty); color:var(--bf-text-faint); }
.uo-fravar { background:var(--bf-fravar); border-color:var(--bf-fravar-border); }
.uo-fravar, .uo-fravar div { color:var(--bf-text); }
.uo-antall-biler { background:var(--bf-chip); color:var(--bf-chip-text); }
.uo-antall-biler-green { background-color:var(--bf-ok-soft); color:var(--bf-ok-ink); }
.uo-antall-biler-blue { background-color:var(--bf-transit-soft); color:var(--bf-transit-ink); }

/* rediger-ikon: dempet til vanlig, gull ved hover på raden */
.uo-oppdrag .fa-edit.text-gold { color:var(--bf-text-muted); }
.uo-oppdrag:hover .fa-edit.text-gold { color:var(--bf-gold-text); }

/* tynn penn i stedet for «penn i boks» (fa-edit). Samme størrelse, ren CSS.
   Alternativ uten CSS-triks: bytt fa-edit til fa-pen i malen. */
svg.svg-inline--fa.fa-edit {
  background-color:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 20h4L19 9l-4-4L4 16z M13.5 6.5l4 4' fill='none' stroke='black' stroke-width='1.9' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 20h4L19 9l-4-4L4 16z M13.5 6.5l4 4' fill='none' stroke='black' stroke-width='1.9' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
svg.svg-inline--fa.fa-edit path { fill:transparent; }

/* ---------- fargeklasser ---------- */
.text-gold { color:var(--bf-gold-text); }
.text-green { color:var(--bf-ok); }
.text-red { color:var(--bf-stop); }
.text-blue { color:var(--bf-transit); }
/* ikoner merket blå (bil, kamera, bruker ...) er gull. Dropbox-ikonet beholder blåfargen. */
.svg-inline--fa.text-blue:not(.fa-dropbox), i.text-blue:not(.fa-dropbox) { color:var(--bf-gold); }
.ow-window .text-white { color:var(--bf-text); }
.text-black-fade { color:var(--bf-text-faint); }
/* Egne bilder, bildevisningen: luft mellom tittelen (skiltnummer) og oppdragslinjen som står rett bak */
h1 + span.text-black-fade { margin-left:14px; }
.allikevel-icon-green, .allikevel-icon-green:hover { color:var(--bf-text-muted); border-color:var(--bf-text-muted); }

/* ---------- Knut Olavs tema-klasser og segmentvelger ----------
   Bare de som er i bruk på sidene vi har sett (Brukerinfo, Oppdragsliste). Resten beholder hans verdier. */
.text-title { color:var(--bf-text); }
.text-superfade { color:var(--bf-text-faint); }
.bg-shade { background:var(--bf-surface-alt); }
.contentbox-border, .contentbox-blue { border-color:var(--bf-border); }

.segment { border-color:var(--bf-border); }
.segment span { background:var(--bf-input); color:var(--bf-text-muted); }
.segment label:hover span { color:var(--bf-text); }
.segment input:checked + span { background:var(--bf-cta); background-image:none; color:var(--bf-cta-ink); box-shadow:none; }
.segment input:focus-visible + span { outline-color:var(--bf-gold); }