@charset "utf-8";
/* ==========================================================================
   M+ tema – visuelt "skin" over mpluss.css
   --------------------------------------------------------------------------
   Lastes SIST i index.html. Endrer kun utseende (farger, rammer, skygger,
   typografi, knapper). Layouten er uendret, bortsett fra #bugBoxContent og #printNB.
   Fjern <link>-linjen i index.html for å gå tilbake til gammelt utseende.
   ========================================================================== */

:root {
	--mp-accent:        #1f6feb;   /* hovedfarge (knapper, valgt rad) */
	--mp-accent-hover:  #1858c4;
	--mp-accent-soft:   #e8f0fe;
	--mp-text:          #1f2933;
	--mp-text-muted:    #5f6b7a;
	--mp-border:        #d5dbe3;
	--mp-border-strong: #b7c0cc;
	--mp-surface:       #ffffff;
	--mp-surface-alt:   #f6f8fb;
	--mp-page:          #e9edf2;
	--mp-danger:        #c62828;
	--mp-radius:        12px;
	--mp-radius-sm:     8px;
	--mp-shadow-sm:     0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
	--mp-shadow-md:     0 4px 12px rgba(16, 24, 40, .08), 0 2px 4px rgba(16, 24, 40, .06);
	--mp-shadow-lg:     0 20px 40px rgba(16, 24, 40, .18), 0 6px 12px rgba(16, 24, 40, .10);
	--mp-font:          "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Side og appflate ---------------------------------------------- */

body {
	background: var(--mp-page);
	color: var(--mp-text);
	font-family: var(--mp-font);
	-webkit-font-smoothing: antialiased;
}

#appBody {
	border: 1px solid var(--mp-border);
	border-radius: 14px;
	box-shadow: var(--mp-shadow-md);
	background: var(--mp-surface);
}
#appBody > .appflate,
#app > .appflate {
	border-radius: 14px;
}

#previewHeading {
	font-family: var(--mp-font);
	font-weight: 600;
	color: var(--mp-text);
	letter-spacing: -.01em;
}

/* ---------- Paneler på startsiden ------------------------------------------ */

#menuList,
#chooseSubjectBox,
#pageDescription,
#appSettingsBox,
#writeLicenseBox {
	border: 1px solid var(--mp-border);
	border-radius: var(--mp-radius);
	background-color: var(--mp-surface);
	box-shadow: var(--mp-shadow-sm);
}

#pageDescription {
	color: var(--mp-text);
	font-size: 14px;   /* Segoe er bredere enn gamle Times – holder teksten inne i boksen */
	line-height: 1.4;
	padding-top: 16px;  /* var 36px – teksten starter en linje høyere */
	padding-bottom: 10px;
	overflow-y: auto;   /* sikkerhetsnett: rull hvis teksten fortsatt er for lang */
}

#chooseSubjectBox {
	font-weight: 600;
	color: var(--mp-text);
}

/* Oppgavelista (select) */
#taskList,
#dropList {
	font-family: Arial, Helvetica, sans-serif; /* beholdt: Segoe gir høyere rader */
	color: var(--mp-text);
	border-color: transparent;
}
#taskList option:checked,
#dropList option:checked {
	background: var(--mp-accent) linear-gradient(0deg, var(--mp-accent), var(--mp-accent));
	color: #fff;
}
#taskList:focus option:checked {
	background: var(--mp-accent) linear-gradient(0deg, var(--mp-accent), var(--mp-accent));
}

/* ---------- Knapper -------------------------------------------------------- */
/* :where() gir null spesifisitet, slik at alle id-regler i mpluss.css
   (posisjon, ikonbilder, egne radier) fortsatt vinner. Ikonknapper med
   bakgrunnsbilde er unntatt. */

:where(input[type="button"], input[type="submit"], button):not(:where(
	#closeBtn, .dialogClose, #closeLPSbutton, #cancelSend, #deletePDF,
	#openSettingsBtn, #bugBtn, .okButton, .postit, #LPSsheetBtn,
	#FEIDEBtn, #FEIDE2Btn, .letterBtn, #allBtn, #noneBtn, #okBtn,
	.browseBtn, .menuButtons, .seeSheetBtn
)) {
	font-family: var(--mp-font);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--mp-text);
	background-color: var(--mp-surface);
	border: 1px solid var(--mp-border-strong);
	border-radius: 999px;
	padding: 4px 14px;
	box-shadow: var(--mp-shadow-sm);
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease,
	            box-shadow .15s ease, transform .05s ease;
}

:where(input[type="button"], input[type="submit"], button):not(:where(
	#closeBtn, .dialogClose, #closeLPSbutton, #cancelSend, #deletePDF,
	#openSettingsBtn, #bugBtn, .okButton, .postit, #LPSsheetBtn,
	#FEIDEBtn, #FEIDE2Btn, .letterBtn, #allBtn, #noneBtn, #okBtn,
	.browseBtn, .menuButtons, .seeSheetBtn
)):hover:not(:disabled) {
	background-color: var(--mp-surface-alt);
	border-color: var(--mp-accent);
	color: var(--mp-accent);
}

:where(input[type="button"], input[type="submit"], button):not(:where(
	#closeBtn, .dialogClose, #closeLPSbutton, #cancelSend, #deletePDF,
	#openSettingsBtn, #bugBtn, .okButton, .postit, #LPSsheetBtn,
	#FEIDEBtn, #FEIDE2Btn, .letterBtn, #allBtn, #noneBtn, #okBtn,
	.browseBtn, .menuButtons, .seeSheetBtn
)):active:not(:disabled) {
	transform: translateY(1px);
	box-shadow: none;
}

:where(input[type="button"], input[type="submit"], button):disabled {
	opacity: .55;
	cursor: default;
}

/* Hovedhandling i dialoger: fylt blå */
:where(.dialogGoAhead, #loginSubmitBtn, #sendBoxBtn, #AlertBoxBtn,
       #infoBoxOkBtn, #makePDF, #okButtonSettings, #SaveLPSBtn) {
	background-color: var(--mp-accent);
	border-color: var(--mp-accent);
	color: #fff;
}
:where(.dialogGoAhead, #loginSubmitBtn, #sendBoxBtn, #AlertBoxBtn,
       #infoBoxOkBtn, #makePDF, #SaveLPSBtn):hover:not(:disabled) {
	background-color: var(--mp-accent-hover);
	border-color: var(--mp-accent-hover);
	color: #fff;
}

/* Farlig handling */
:where(#deleteLPSBtn) {
	color: var(--mp-danger);
	border-color: #e6b3b3;
}
:where(#deleteLPSBtn):hover:not(:disabled) {
	background-color: #fdecec;
	border-color: var(--mp-danger);
	color: var(--mp-danger);
}

/* Toppknapper (Logg inn / FEIDE / tilbakemelding) */
#logInOutBtn,
#mainBackBtn {
	border-radius: var(--mp-radius-sm);
}
#FEIDEBtn,
#FEIDE2Btn {
	/* Offisielt minisymbol fra Feides designmanual (feide.no/designmanual) */
	background-image: url("../media/images/feide-minisymbol-blaa.svg");
	background-position: 7px center;
	background-size: 16px 16px;
	font-family: var(--mp-font);
	font-size: 13px;
	font-weight: 600;
	color: var(--mp-text);
	background-color: var(--mp-surface);
	border: 1px solid var(--mp-border-strong);
	border-radius: var(--mp-radius-sm);
	box-shadow: var(--mp-shadow-sm);
	cursor: pointer;
}
#FEIDEBtn:hover,
#FEIDE2Btn:hover {
	border-color: var(--mp-accent);
}
#bugBtn {
	border: 1px solid var(--mp-border-strong);
	border-radius: var(--mp-radius-sm);
	background-color: var(--mp-surface);
	background-position: center;
	box-shadow: var(--mp-shadow-sm);
}

/* Ikonknapper (lukk, slett, tannhjul) */
#closeBtn, .dialogClose, #deletePDF, #openSettingsBtn {
	background-color: transparent;
	background-position: center;
	border-radius: 50%;
	opacity: .7;
	transition: opacity .15s ease, background-color .15s ease;
}
#closeBtn:hover, .dialogClose:hover, #deletePDF:hover, #openSettingsBtn:hover {
	opacity: 1;
	background-color: rgba(16, 24, 40, .07);
}

/* Fanene over arket ("Oppgaver" / "Fasit") */
.postit {
	font-family: var(--mp-font);
	font-weight: 600;
	color: var(--mp-text-muted);
	background-color: var(--mp-surface-alt);
	border-color: var(--mp-border);
	transition: background-color .15s ease, color .15s ease;
}
.postit:hover {
	color: var(--mp-text);
	background-color: var(--mp-surface);
}
.postit:disabled {
	color: var(--mp-accent);
	background-color: var(--mp-surface);
	box-shadow: inset 0 3px 0 var(--mp-accent);
}

#canvas {
	border-color: var(--mp-border);
	box-shadow: var(--mp-shadow-sm);
}

/* ---------- Startsiden: lisensboks og oppgaveliste ------------------ */

/* «Lisens»-overskriften */
#chooseSubjectBox tr:first-child td {
	font-size: 11px;
	font-weight: 600;
	color: var(--mp-text-muted);
}

/* Oppgavelista: rolige gruppeoverskrifter og innrykk i stedet for «- » */
#taskList option.heading {
	font-weight: 700;
	letter-spacing: .04em;
	text-decoration: none;
	background-color: #f1f4f8;
	padding-left: 3px;
}
#taskList option.heading.g1 { color: #3e4c59; }
#taskList option.heading.g2 { color: #1d4ed8; }
#taskList option.heading.g3 { color: #15803d; }
#taskList option.heading.g4 { color: #7e22ce; }
#taskList option.page {
	color: var(--mp-text);
	padding-left: 10px;
}
#taskList option.page:checked,
#taskList option.heading:checked {
	background: var(--mp-accent) linear-gradient(0deg, var(--mp-accent), var(--mp-accent));
	color: #fff;
}

/* ---------- Skjemafelt ----------------------------------------------------- */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
textarea,
select:not([multiple]):not([size]) {
	font-family: var(--mp-font);
	color: var(--mp-text);
	background-color: var(--mp-surface);
	border: 1px solid var(--mp-border-strong);
	border-radius: 6px;
	padding: 3px 6px;
	transition: border-color .15s ease, box-shadow .15s ease;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
	outline: none;
	border-color: var(--mp-accent);
	box-shadow: 0 0 0 3px rgba(31, 111, 235, .2);
}
input[type="text"]:disabled {
	background-color: var(--mp-surface-alt);
	color: var(--mp-text-muted);
}

input[type="checkbox"],
input[type="radio"] {
	accent-color: var(--mp-accent);
}

::placeholder {
	color: #9aa3ad;
	opacity: 1;
}

/* Tastaturfokus synlig (tilgjengelighet) */
:where(input, select, textarea, button, a, [tabindex]):focus-visible {
	outline: 2px solid var(--mp-accent);
	outline-offset: 2px;
}
#canvas:focus-visible { outline: none; }

a { color: var(--mp-accent); }

/* ---------- Dialoger og overlegg ------------------------------------------- */

#dialogBox,
#infoBox,
#bugBox {
	background-color: rgba(15, 23, 42, .35);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
	border-radius: 14px;
}

#coverBackgr {
	background-color: #0f172a;
	opacity: .3;
	border-radius: 14px;
}

#dialogBoxContent,
#infoBoxContent,
#bugBoxContent,
.dialogScreen {
	background-color: var(--mp-surface);
	border: 1px solid rgba(16, 24, 40, .08);
	border-radius: 16px;
	box-shadow: var(--mp-shadow-lg);
	color: var(--mp-text);
	font-family: var(--mp-font);
	line-height: 1.45;
}

#LPSdialog {
	background-color: #eef6fd;
}
#LPSheadLine {
	font-weight: 600;
	color: var(--mp-text);
}
#LPSinfoPart {
	border: 1px solid var(--mp-border);
}

#bugMailInput,
#bugTextArea {
	border: 1px solid var(--mp-border-strong);
	border-radius: var(--mp-radius-sm);
}

/* Temaets skrift og linjeavstand gjør teksten høyere, så boksen må ha mer plass.
   Knappene ligger fast i forhold til #bugBox og flyttes ned under teksten. */
#bugBoxContent {
	top: 30px;
	height: 540px;
}
#canselBoxBtn,
#sendBoxBtn {
	top: 525px;
}
#canselBoxBtn {
	left: 465px;
}
#bugMailInput {
	margin-left: 6px;
}
#bugTextArea {
	height: 150px;
	margin-top: 4px;
}

/* Temaets høyere linjeavstand og filnavnfelt gjør at teksten kommer for nær feltet. */
#printNB {
	top: 115px;
}

/* ---------- Innlogging ------------------------------------------------------ */

#loginView {
	border: 0;
	border-radius: 18px;
	box-shadow: var(--mp-shadow-lg);
	background-size: cover;
	background-position: center;
	overflow: hidden;
}
#loginHeading {
	font-family: var(--mp-font);
	font-weight: 300;
	letter-spacing: -.02em;
	color: #12263a;
	text-shadow: 0 1px 2px rgba(255, 255, 255, .6);
}
#loginDiv {
	border: 1px solid rgba(255, 255, 255, .7);
	border-radius: 14px;
	background-color: rgba(255, 255, 255, .92);
	box-shadow: var(--mp-shadow-md);
}
#login_form {
	font-size: 13px;
	color: var(--mp-text);
}
#loginXtra {
	color: #12263a;
}
#logInInfo {
	color: var(--mp-text-muted);
}

/* ---------- Diverse ---------------------------------------------------------- */

#canvasTooltip {
	font-family: var(--mp-font);
	color: var(--mp-text);
	border: 1px solid var(--mp-border);
	border-radius: 6px;
	padding: 3px 8px;
	box-shadow: var(--mp-shadow-md);
}

#splash {
	font-family: var(--mp-font);
	color: var(--mp-text-muted);
}

#bottomMessage {
	font-size: 13px;
}

#calendarView {
	background-color: var(--mp-surface);
}

/* Diskrete rullefelt (Chromium/Edge/Safari) */
#menuList ::-webkit-scrollbar,
#LPSinfoPart::-webkit-scrollbar,
#LPSinfoProgress::-webkit-scrollbar,
#LPSinfoFillProgress::-webkit-scrollbar { width: 10px; }
#menuList ::-webkit-scrollbar-thumb,
#LPSinfoPart::-webkit-scrollbar-thumb,
#LPSinfoProgress::-webkit-scrollbar-thumb,
#LPSinfoFillProgress::-webkit-scrollbar-thumb {
	background: #c5ccd6;
	border-radius: 10px;
	border: 2px solid #fff;
}
#menuList ::-webkit-scrollbar-track { background: transparent; }

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; }
}