/* Windows XP (Luna) tema – farger/knapper hentet fra ~/linux-xp */
:root {
    --xp-flate: #ECE9D8;
    --xp-blaa: #0A246A;
    --xp-ramme: #0831D9;
    --xp-kant-lys: #FFF;
    --xp-kant-mork: #716F64;
    --xp-kant: #ACA899;
    --xp-valgt: #316AC5;
    --xp-font: Tahoma, "Segoe UI", "DejaVu Sans", Verdana, sans-serif;
}

html {
    min-height: 100%;
    /* «Bliss»: himmel over grønn ås */
    background:
        radial-gradient(ellipse 140% 55% at 30% 100%, #5DA130 0%, #3F8A1E 45%, transparent 46%),
        radial-gradient(ellipse 120% 50% at 85% 105%, #4C9A27 0%, #2F7614 50%, transparent 51%),
        linear-gradient(to bottom, #2A67D8 0%, #5E9BEA 40%, #A9CCF3 62%, #DCEBFA 70%);
    background-attachment: fixed;
}

body {
    font: 13px var(--xp-font);
    color: #000;
    max-width: 1000px;
    margin: 24px auto 60px;
    min-height: calc(100vh - 84px);
    box-sizing: border-box;
    background: var(--xp-flate);
    border: 3px solid var(--xp-ramme);
    border-top: 0;
    border-radius: 8px 8px 0 0;
    box-shadow: 2px 4px 14px rgba(0, 0, 0, .45);
}

a { color: #0000EE; }
a:visited { color: #551A8B; }
a:hover { color: #CC0000; }

/* Tittellinje */
.header {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 5px 0 6px;
    margin: 0 -3px;
    border-radius: 8px 8px 0 0;
    color: #FFF;
    background: linear-gradient(to bottom, #0058EE 0%, #3593FF 4%, #288EFF 6%, #127DFF 8%,
        #036FFC 10%, #0262EE 14%, #0057E5 20%, #0054E3 24%, #0055EB 56%, #005BF5 66%,
        #026AFE 76%, #0062EF 86%, #0052D6 92%, #0040AB 94%, #003092 100%);
    border: 1px solid #0831D9;
    border-bottom: 0;
}
.header a { display: flex; }
.header img {
    height: 18px;
    width: auto;
    display: block;
    background: #FFF;
    border-radius: 3px;
    padding: 1px 2px;
}
.header h1 {
    flex: 1;
    margin: 0;
    font: bold 13px "Trebuchet MS", var(--xp-font);
    text-shadow: 1px 1px 0 #0F1089;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.xp-knapper { display: flex; gap: 2px; }
.xp-knapper a {
    width: 21px;
    height: 21px;
    box-sizing: border-box;
    display: grid;
    place-items: center;
    border: 1px solid #FFF;
    border-radius: 3px;
    color: #FFF;
    text-decoration: none;
    font: bold 13px var(--xp-font);
    background: linear-gradient(135deg, #3C8CFF, #1E5FE0 60%, #1450D0);
}
.xp-knapper a.lukk { background: linear-gradient(135deg, #E37A5C, #D44A1E 60%, #B83A12); }
.xp-knapper a:hover { filter: brightness(1.15); }

/* Klassiske 3D-knapper og felt for alle sider */
button, input[type=submit], .knapp {
    font: 13px var(--xp-font);
    color: #000;
    padding: 3px 14px;
    min-height: 23px;
    background: linear-gradient(to bottom, #FFF, #F0F0EA 85%, #D6D0C5);
    border: 1px solid #003C74;
    border-radius: 3px;
    cursor: pointer;
}
button:hover, input[type=submit]:hover, .knapp:hover { box-shadow: inset 0 0 0 2px #F8B330; }
button:active, input[type=submit]:active { background: #E3E0D2; }
a.knapp { display: inline-block; box-sizing: border-box; text-decoration: none; }
.knapp, .knapp:visited, .knapp:hover { color: #000; }
input[type=text], input[type=password], input[type=email], input[type=url],
input[type=number], input[type=date], input[type=file], textarea, select {
    font: 13px var(--xp-font);
    border: 1px solid #7F9DB9;
    border-radius: 0;
    background: #FFF;
}
input:focus, textarea:focus, select:focus { outline: 1px dotted #000; }

/* Oppgavelinje (fast nederst) */
.xp-oppgavelinje {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 100;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(to bottom, #1F2F86 0%, #3165C4 3%, #3682E5 6%, #4490E6 10%,
        #3883E5 12%, #2B71E0 15%, #2663DA 18%, #235BD6 20%, #2258D5 23%, #2157D6 38%,
        #245DDB 54%, #2562DF 86%, #245FDC 89%, #2158D4 92%, #1D4EC0 95%, #1941A5 98%);
}
.xp-start {
    height: 100%;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 22px 0 10px;
    border-radius: 0 12px 12px 0;
    color: #FFF;
    font: italic bold 18px "Franklin Gothic Medium", "Trebuchet MS", var(--xp-font);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, .6);
    background: radial-gradient(ellipse at 50% 120%, #3C8F3C, #36A336 50%, #57C557 85%, #9BE29B);
    box-shadow: inset -2px 0 3px rgba(0, 0, 0, .35);
}
.xp-start:hover, .xp-startmeny[open] .xp-start { filter: brightness(1.08); }
.xp-start { cursor: pointer; list-style: none; user-select: none; }
.xp-start::-webkit-details-marker { display: none; }
.xp-startmeny { height: 100%; }

/* Skrivebordsikoner: alltid på forsiden, på undersider bare når det er plass ved siden av vinduet */
.xp-ikoner {
    position: fixed;
    top: 0;
    left: 0;
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(auto-fill, 120px);
    grid-auto-columns: 100px;
    gap: 8px;
    height: calc(100vh - 40px);
    padding: 10px;
    box-sizing: border-box;
}
.xp-ikoner a {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 4px 2px; text-decoration: none; color: #FFF;
}
.xp-ikoner img { width: 56px; height: 56px; filter: drop-shadow(1px 2px 1px rgba(0, 0, 0, .45)); }
.xp-ikoner a:focus img { filter: drop-shadow(1px 2px 1px rgba(0, 0, 0, .45)) brightness(.75) sepia(1) hue-rotate(185deg) saturate(3); }
.xp-ikoner span {
    font-size: 13px; text-align: center; padding: 0 2px;
    text-shadow: 1px 1px 1px #000;
    overflow-wrap: anywhere;
}
.xp-ikoner a:focus { outline: none; }
.xp-ikoner a:focus span { background: var(--xp-valgt); text-shadow: none; outline: 1px dotted #FFF; }
body:not(.skrivebord) .xp-ikoner { display: none; }
@media (min-width: 1260px) {
    body:not(.skrivebord) .xp-ikoner { display: grid; }
}

/* Forsiden = skrivebord uten vindu */
body.skrivebord {
    max-width: none; margin: 0; min-height: 100vh;
    background: transparent; border: 0; border-radius: 0; box-shadow: none;
}
body.skrivebord .header { display: none; }

/* Maksimert vindu */
html.xp-maks body:not(.skrivebord) {
    max-width: none; margin: 0 0 30px; border-width: 0; border-radius: 0;
    min-height: calc(100vh - 30px);
}
html.xp-maks .header { margin: 0; border-radius: 0; }
html.xp-maks body:not(.skrivebord) .xp-ikoner { display: none; }

/* Åpen side som knapp i oppgavelinja */
.xp-apper { flex: 1; display: flex; height: 100%; align-items: center; padding: 0 8px; min-width: 0; }
.xp-app {
    display: flex; align-items: center; gap: 6px;
    width: 160px; min-width: 0; height: 24px; padding: 0 8px;
    box-sizing: border-box;
    color: #FFF; font-size: 12px; text-decoration: none;
    border-radius: 3px;
    background: #1E52B7;
    box-shadow: inset 1px 1px 2px rgba(0, 0, 0, .5), inset -1px -1px 0 rgba(255, 255, 255, .15);
}
.xp-app:visited, .xp-app:hover { color: #FFF; }
.xp-app:hover { background: #2A62C9; }
.xp-app span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xp-app img { width: 16px; height: 16px; flex: none; }
body.skrivebord .xp-app { display: none; }

/* Bare i iPhone-stilen (ios.css) */
.xp-ikoner .kun-mobil, .ios-dock { display: none; }

/* Høyreklikkmeny */
.xp-hoyreklikk {
    position: fixed;
    z-index: 200;
    min-width: 190px;
    padding: 2px;
    background: #FFF;
    border: 1px solid #ACA899;
    box-shadow: 2px 2px 3px rgba(0, 0, 0, .35);
}
.xp-hoyreklikk[hidden] { display: none; }
.xp-hoyreklikk a { display: block; padding: 3px 20px; color: #000; text-decoration: none; }
.xp-hoyreklikk a:hover, .xp-hoyreklikk a:focus { background: var(--xp-valgt); color: #FFF; outline: none; }
.xp-hoyreklikk hr { border: 0; border-top: 1px solid #ACA899; margin: 3px 1px; }

/* Startmeny */
.xp-meny {
    position: fixed;
    left: 0;
    bottom: 30px;
    width: min(400px, 100vw);
    background: #FFF;
    border: 1px solid #0831D9;
    border-radius: 7px 7px 0 0;
    box-shadow: 2px -2px 8px rgba(0, 0, 0, .4);
    overflow: hidden;
}
.xp-meny-topp {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    color: #FFF;
    font: bold 15px var(--xp-font);
    text-shadow: 1px 1px 1px #0F1089;
    background: linear-gradient(to bottom, #1868CE, #0E60CB 12%, #0E60CB 85%, #094FB0);
    border-bottom: 2px solid #E98E30;
}
.xp-meny-topp img { height: 34px; background: #FFF; border: 2px solid #D8E4F8; border-radius: 3px; padding: 2px; }
.xp-meny-liste { padding: 6px 0; }
.xp-meny a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    color: #000;
    text-decoration: none;
}
.xp-meny a:hover, .xp-meny a:focus { background: var(--xp-valgt); color: #FFF; outline: none; }
.xp-meny-liste img { width: 32px; height: 32px; }
.xp-meny-bunn {
    display: flex;
    justify-content: flex-end;
    background: linear-gradient(to bottom, #4282D6, #3B6FD0 50%, #2357C1);
    padding: 4px;
}
.xp-meny-bunn a { color: #FFF; }
.xp-meny-bunn img { width: 22px; height: 22px; }
.xp-start img { height: 18px; background: #FFF; border-radius: 3px; padding: 1px 2px; }
.xp-skuff {
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 14px;
    color: #FFF;
    font-size: 12px;
    background: linear-gradient(to bottom, #0C59B9, #139EE9 5%, #18B5F2 10%, #139BEB 15%,
        #1290E8 20%, #0D8DEA 40%, #1196E9 90%, #0D81D8);
    border-left: 1px solid #092E51;
    box-shadow: inset 1px 0 1px #18BBFF;
}

/* Dokumentvisning (CV og undersider): grå flate, verktøylinje, hvitt ark */
.dokument {
    background: #8E8E8E;
    border-top: 1px solid var(--xp-kant-mork);
    padding: 0 16px 24px;
    min-height: calc(100vh - 140px);
}
.verktoylinje {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin: 0 -16px 20px;
    padding: 4px 6px;
    background: var(--xp-flate);
    border-bottom: 1px solid var(--xp-kant);
    box-shadow: inset 0 1px 0 var(--xp-kant-lys);
}
/* Litt bredere enn A4 på skjerm */
.ark {
    background: #FFF;
    max-width: 300mm;
    margin: 0 auto 6vh;
    padding: 16mm;
    box-sizing: border-box;
    border: 1px solid var(--xp-kant-mork);
    box-shadow: 3px 3px 0 rgba(0, 0, 0, .35);
    font-family: 'Lato', 'Segoe UI', system-ui, -apple-system, Helvetica, Arial, sans-serif;
    font-size: 11pt;
    line-height: 1.55;
    color: #2b2b2b;
}
.ark h2 {
    font-size: 12pt;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    margin: 8mm 0 2.5mm;
    padding: 3px 8px;
    color: #FFF;
    background: linear-gradient(to bottom, #4B82D8, #316AC5);
    border: 1px solid #1C4A9E;
}
@media (max-width: 600px) {
    .dokument { padding: 0 0 16px; }
    .verktoylinje { margin: 0 0 12px; }
    .ark { padding: 8vw 6vw; box-shadow: none; border-left: none; border-right: none; }
}

@media (max-width: 1040px) {
    body { margin: 0 0 30px; border-radius: 0; border-width: 0 0 0 0; min-height: calc(100vh - 30px); }
    .header { margin: 0; border-radius: 0; }
}

@media print {
    html, body { background: #FFF; border: 0; box-shadow: none; margin: 0; max-width: none; }
    .header, .xp-oppgavelinje, .xp-ikoner { display: none !important; }
}