/* Dark mode for style.css. Loaded after it by bin/index.php with a media attribute from lib/theme.php:
   "(prefers-color-scheme: dark)" when the user follows the system (the default), "all" for Mörkt and "not all"
   for Ljust (Min sida). These rules used to sit in @media (prefers-color-scheme: dark) blocks in that file;
   put new dark-mode rules HERE, not in a media query there, or the theme choice will not apply to them. */

/* ---- block 1 (was at style.css line 3367) ---- */
	:root {
		color-scheme: dark;
		--dk-bg: #060a13;        /* page */
		--dk-surface: #0d1422;   /* boxes */
		--dk-raised: #141d30;    /* fields, buttons, selected items */
		--dk-hover: #1b2740;
		--dk-line: #1f2b45;      /* hairlines */
		--dk-line-strong: #33466e;
		--dk-text: #e4e9f2;
		--dk-muted: #93a0b8;
		--dk-accent: #ff6f73;    /* the red, lifted to be readable on navy */
		--dk-accent-bg: #9e1b1f; /* red as a background, white text on top */

		/* admin forms */
		--ad-surface: var(--dk-surface);
		--ad-soft: var(--dk-raised);
		--ad-line: var(--dk-line);
		--ad-line-strong: var(--dk-line-strong);
		--ad-text: var(--dk-text);
		--ad-muted: var(--dk-muted);
		--ad-accent: var(--dk-accent);
		--ad-highlight: #6aa6ff;
		--ad-ring: rgba(106, 166, 255, .25);
		--ad-info-bg: #0e2340;
		--ad-info-line: #234a80;
	}

	/* ---------- base ---------- */
	body { background-color: var(--dk-bg) !important; color: var(--dk-text) !important; }
	h1, h2, h3, h4, h5, p, li, label, dt, dd, td, th, a,
	#video-information, #search-delete-button, .title, #menu, #sub-menu, #mobile-menu-search { color: var(--dk-text) !important; }
	a:hover { color: #ffffff !important; }
	::placeholder { color: var(--dk-muted) !important; opacity: 1; }
	hr { background-color: var(--dk-line) !important; }
	hr:after { box-shadow: none !important; }

	.redtxt, .h1_video_name, #links a.login, #links a.minsida, #search-term-hit,
	#sitename h1 a span, #sitename h1 a font, #channels-list .channel h3 a,
	.channel_infobox a, .channel-contact a, #video-meta a, .choose_def_image .otdef { color: var(--dk-accent) !important; }

	/* ---------- header ---------- */
	#top { background: #080d19 !important; border-bottom: 1px solid var(--dk-line) !important; }
	#logo { filter: brightness(0) invert(1); opacity: .92; }  /* the red seal, shown in white */

	/* ---------- boxes ---------- */
	.background, #menu, #sub-menu, #accordion-content, .tab_container, .videoplayer_msg,
	#simplereach-slide-element, .uu-user-list-no-account, .loadinglist,
	ol.thumb-grid li, ol.thumb-grid-more li, ol.channel-grid li, ol.list-grid li,
	.show-more-thumbnails, .thumbnail-page-number, #show-more-thumbnails-page-1 { background-color: var(--dk-surface) !important; }
	.background, .loadinglist { background-image: none !important; }
	.loadinglist { background-image: url(../images/spinner.gif) !important; }

	.border, .resize, #accordion-content, #accordion-header, #simplereach-slide-element { box-shadow: 0 0 0 1px var(--dk-line) !important; }
	.resize { box-shadow: none !important; }
	#sub-menu { box-shadow: inset 0 0 0 1px var(--dk-line) !important; }

	/* ---------- menu and search ---------- */
	#links { border-right: 1px solid var(--dk-line) !important; }
	/* outline drawn inside the item (a border made the selected item 2px wider, so the items after it moved between pages) */
	#menu .selected a { background-color: var(--dk-raised) !important; border: 0 !important; box-shadow: inset 0 0 0 1px var(--dk-line) !important; }
	#search input, .search-form { background-color: transparent !important; color: var(--dk-text) !important; border-color: transparent !important; }
	#search input { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2393a0b8' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") !important; }
	#links a:hover { background-color: var(--dk-hover) !important; }
	#search-delete-button { background: transparent !important; }
	#search-results { border-top: 1px solid var(--dk-line) !important; }
	#search-result, #list-item { border-bottom-color: var(--dk-line) !important; }
	#search-result a, #list-item a { color: var(--dk-text) !important; }
	#search-result:hover, #list-item:hover { background-color: var(--dk-hover) !important; }
	.search-result-text-contact, .uu-user-list-name, .no-uu-account-box { color: var(--dk-muted) !important; }

	/* ---------- thumbnails and lists ---------- */
	ol.thumb-grid li:hover, ol.thumb-grid-more li:hover, ol.channel-grid li:hover,
	ol.list-grid li:hover, .show-more-thumbnails:hover { border-color: var(--dk-line-strong) !important; box-shadow: 0 0 0 1px var(--dk-line-strong) !important; color: var(--dk-text) !important; }
	ol.list-grid li:nth-child(odd) { background-color: var(--dk-raised) !important; }
	ol.list-grid li:hover { background-color: var(--dk-hover) !important; }
	.kanal, #kanal-search-result, #feedback-button { background-color: var(--dk-accent-bg) !important; color: #ffffff !important; }
	.archived { background-color: #1a1f2b !important; }
	.archived a, .archived a span { color: var(--dk-muted) !important; }
	.level2, .redshadow { background-color: #33141d !important; }
	.greenshadow { background-color: #10301f !important; }

	/* ---------- channel pages ---------- */
	.verticalslider_tabs a:link, .verticalslider_tabs a:visited { background: var(--dk-surface) !important; color: var(--dk-text) !important; border-color: var(--dk-line) !important; }
	.verticalslider_tabs a:hover, .verticalslider_tabs a:active { background: var(--dk-hover) !important; }
	.verticalslider_tabs .activeTab a:link, .verticalslider_tabs .activeTab a:visited,
	.verticalslider_tabs .activeTab a:hover { background: var(--dk-raised) !important; box-shadow: inset 3px 0 0 var(--dk-accent) !important; }
	ul.verticalslider_tabs li:last-child { border-bottom-color: var(--dk-line) !important; }
	.verticalslider_contents li p { color: var(--dk-text) !important; }
	.channel_infobox .dotted_box, .dotted_box { background-color: var(--dk-raised) !important; border-color: var(--dk-line) !important; }
	.channel_div { border-top-color: var(--dk-line) !important; }
	#channels-list .channel ul li a { color: var(--dk-text) !important; }
	#channels-list .channel ul li a:hover { color: #ffffff !important; }
	#img_box { box-shadow: none !important; }

	/* ---------- film page ---------- */
	video { background-color: #000000 !important; border: 0 !important; }
	#video_player_in_channel #video { background-color: transparent !important; }
	#video-meta p.contact, #video-meta p.update, #video-meta p.duration,
	#video-meta p.status, #video-meta p.airtime, #general { border-right-color: var(--dk-line) !important; }
	#video-meta p.subtitles { border-left-color: var(--dk-line) !important; }
	#embed-code, #add-to-channel, #test, #share, #attachment { background-color: var(--dk-raised) !important; box-shadow: inset 0 0 0 1px var(--dk-line) !important; }
	.videoplayer_msg { color: var(--dk-text) !important; box-shadow: 0 0 25px #000000 !important; }
	.royalSlider .countdowntimmer { color: var(--dk-text) !important; background-color: rgba(6, 10, 19, .6) !important; }

	/* ---------- buttons ---------- */
	a.button, .btn, .save_btn {
		background-color: var(--dk-raised) !important; background-image: none !important;
		color: var(--dk-text) !important; text-shadow: none !important;
		border: 1px solid var(--dk-line) !important; box-shadow: none !important;
	}
	a.button:hover, .btn:hover, .save_btn:hover { background-color: var(--dk-hover) !important; border-color: var(--dk-line-strong) !important; color: #ffffff !important; }
	a.middle, a.right { border-left-color: var(--dk-line) !important; }

	/* ---------- forms and admin pages ---------- */
	input, textarea, select, .styled-select select, .error-txtbox {
		background-color: var(--dk-raised) !important; color: var(--dk-text) !important;
		border: 1px solid var(--dk-line) !important;
	}
	input:focus, textarea:focus, select:focus { border-color: var(--dk-line-strong) !important; outline: none; }
	input[type="radio"], input[type="checkbox"], input[type="file"] { background-color: transparent !important; border: 0 !important; }
	input[type="checkbox"], input[type="radio"] { background-color: var(--dk-raised) !important; border: 1.5px solid var(--dk-line-strong) !important; }
	input[type="checkbox"]:hover, input[type="radio"]:hover, input[type="radio"]:checked { border-color: var(--ad-highlight) !important; }
	input[type="checkbox"]:checked, input[type="checkbox"]:indeterminate { background-color: var(--ad-highlight) !important; border-color: var(--ad-highlight) !important; }
	input[type="checkbox"]:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d1422' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
	input[type="checkbox"]:indeterminate { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d1422' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E"); }
	form.data .video-check { background: #2a2210; border-color: #5c4a17; }
	form.data .video-check p.video-check-title { color: var(--dk-text) !important; }
	form.data p.video-check.video-check-ok { background: none; }
	label.check-item.check-delete:has(input:checked) { background: rgba(229, 72, 77, .12); border-color: #e5484d; }
	label.check-item.check-delete input:checked { background-color: #e5484d !important; border-color: #e5484d !important; }
	form.data .error, .error-txtbox { border-color: #e5484d !important; }
	#accordion-header { background-color: var(--dk-raised) !important; border-left: 0 !important; border-right: 0 !important; }
	#accordion-header a, #uu-user-list-heading { color: var(--dk-text) !important; }
	.uu-user-list-item, .even, #admin_channel_list li, .gb_container li, ul.tabs li { background: var(--dk-raised) !important; border-color: var(--dk-line) !important; }
	.odd { background: var(--dk-surface) !important; }
	#admin_channel_list li.to_remove { background-color: #4a1c22 !important; }
	#admin_channel_list li.to_add { background-color: #143524 !important; }
	.warnning-box { background-color: #2b2613 !important; border-color: #6b5a24 !important; }
	.choose_def_image img { border-color: var(--dk-line) !important; }
	.choose_def_image .overlay { background-color: #000000 !important; }
	.ui-autocomplete-loading { background-color: var(--dk-raised) !important; }
	ul.tabs, ul.tabs li { border-color: var(--dk-line) !important; }
	html ul.tabs li.active, html ul.tabs li.active a:hover { background: var(--dk-surface) !important; border-bottom-color: var(--dk-surface) !important; }
	ul.tabs li a { color: var(--dk-text) !important; }

	/* ---------- jQuery UI (dialogs, tabs, search list, date picker) ---------- */
	.ui-widget-content { background: var(--dk-surface) !important; color: var(--dk-text) !important; border-color: var(--dk-line) !important; }
	.ui-widget-header { background: var(--dk-raised) !important; color: var(--dk-text) !important; border-color: var(--dk-line) !important; }
	.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
		background: var(--dk-raised) !important; color: var(--dk-text) !important; border-color: var(--dk-line) !important;
	}
	.ui-state-hover, .ui-state-focus, .ui-state-active,
	.ui-widget-content .ui-state-hover, .ui-widget-content .ui-state-focus, .ui-widget-content .ui-state-active {
		background: var(--dk-hover) !important; color: #ffffff !important; border-color: var(--dk-line-strong) !important;
	}
	.ui-widget-overlay { background: #02040a !important; opacity: .7 !important; }
	.ui-dialog { box-shadow: 0 24px 60px rgba(0, 0, 0, .6) !important; }
	.ui-icon { filter: invert(1) brightness(1.4); }

	/* ---------- admin forms ---------- */
	form.data #accordion-content p, form.data #accordion-content i { color: var(--dk-muted) !important; }
	form.data #accordion-content p:has(> img[src$="info.png"]) { color: var(--dk-text) !important; }
	form.data #accordion-content p:has(> img[src$="info.png"]) a { color: var(--ad-highlight) !important; }
	form.data #accordion-content p:has(> img[src$="info.png"])::before { color: #06101f; }
	form.data > p, form.data #preview .preview-description { color: var(--dk-muted) !important; }
	form.data #accordion-header, form.data #accordion-content { background-color: var(--dk-surface) !important; box-shadow: none !important; border-left: 1px solid var(--dk-line) !important; border-right: 1px solid var(--dk-line) !important; }
	form.data input[type="text"], form.data input:not([type]), form.data textarea, form.data select { border-color: var(--dk-line-strong) !important; }
	form.data input[type="text"]:focus, form.data input:not([type]):focus, form.data textarea:focus, form.data select:focus { border-color: var(--ad-highlight) !important; }
	form.data select, form.data .styled-select select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2393a0b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 12px center !important; background-size: 16px !important; }
	form.data select[multiple] { background-image: none !important; }
	form.data input[type="file"] { background-color: transparent !important; border: 0 !important; }
	form.data .uu-user-list-no-account { background: var(--dk-surface) !important; }
	/* self-test questions inside the film (the section is hidden for now, but keep it readable) */
	form.data .quiz-quest { background: var(--dk-raised) !important; border-color: var(--dk-line) !important; }
	form.data .quiz-quest a[style*="grey"] { color: var(--dk-muted) !important; }
	form.data #add_new_quest_msg, form.data #capture_thumb_msg { color: var(--dk-accent) !important; }
	form.data .quiz h3 { color: var(--dk-text) !important; }
	form.data .uu-user-list-item .deluser a:hover { color: #ff8a8d; border-color: #e5484d; }
	form.data .buttons a.button { background-image: none !important; background-color: var(--dk-raised) !important; border-color: var(--dk-line-strong) !important; }
	form.data .buttons a.save { background-color: var(--dk-accent-bg) !important; border-color: var(--dk-accent-bg) !important; color: #ffffff !important; }
	form.data .buttons a.save:hover { background-color: #b82227 !important; }
	form.data .buttons a.keepdate { background-color: var(--dk-raised) !important; color: var(--dk-accent) !important; }
	form.data .buttons a.delete_cross { color: #ff8f8f !important; border-color: #6a2530 !important; }

	/* ---------- Min sida ---------- */
	.mp-head p, .mp-admin p, .mp .tab_content > p, .mp #list-item-text p { color: var(--dk-muted) !important; }
	.mp-actions a.mp-primary { background-color: var(--dk-accent-bg) !important; border-color: var(--dk-accent-bg) !important; color: #ffffff !important; }
	.mp-badge { background: #33141d; color: var(--dk-accent); }
	.mp ul.tabs { border-bottom: 1px solid var(--dk-line) !important; }
	.mp ul.tabs li, .mp ul.tabs li.active { background: none !important; }
	.mp ul.tabs li a { color: var(--dk-muted) !important; }
	.mp ul.tabs li.active a, .mp ul.tabs li a:hover { color: var(--dk-text) !important; }
	.mp #box { box-shadow: none !important; }
	.mp input[type="submit"] { border-color: var(--dk-line-strong) !important; }

	/* ---------- channel list ---------- */
	#search_results { background-color: var(--dk-surface) !important; border-color: var(--dk-line-strong) !important; box-shadow: 0 6px 18px rgba(0, 0, 0, .5) !important; }
	#search_results:focus { border-color: var(--ad-highlight) !important; }
	#channels-list .channel.focus_box { box-shadow: none !important; }
	#channels-list .channel ul li a:hover { background-color: var(--dk-hover) !important; }

	/* ---------- start page and footer ---------- */
	.sp-hero p, .sp-head a, #footer #footer-column, #footer #footer-column p, #footer #footer-column a { color: var(--dk-muted) !important; }
	.sp-hero h1 span { color: var(--dk-accent) !important; }
	.sp-head a:hover, #footer #footer-column a:hover, #footer #footer-column strong { color: var(--dk-text) !important; }
	.sp-search input[type="search"] { background-color: var(--dk-surface) !important; border-color: var(--dk-line-strong) !important; }
	.sp-search input[type="search"]:focus { border-color: var(--ad-highlight) !important; }
	.sp-search button { background: var(--dk-accent-bg); border-color: var(--dk-accent-bg); }
	.sp-grid a:hover { box-shadow: 0 0 0 1px var(--dk-line-strong); }
	#footer.border { background: none !important; box-shadow: none !important; border-top: 1px solid var(--dk-line) !important; }

	/* ---------- search results and film list ---------- */
	#thumbnails-more ol > li > a { background: var(--dk-surface) !important; border: 1px solid var(--dk-line) !important; }
	#thumbnails-more ol > li > a:hover { border-color: var(--dk-line-strong) !important; box-shadow: none !important; }
	#thumbnails-more ol > li.restricted > a { border-color: #a23b44 !important; }
	#thumbnails-more ol > li.level2 > a { background: #33141d !important; }
	#thumbnails-more .show-more-thumbnails, #thumbnails-more .thumbnail-page-number { border-color: var(--dk-line) !important; }
	#thumbnails-more .thumbnail-page-number { background: none !important; color: var(--dk-muted) !important; }

	/* ---------- message boxes ---------- */
	.msg, .errormsg, .noticemsg { color: var(--dk-text) !important; }
	.msg       { background-color: #0d2a1c !important; border-color: #1c5136 !important; }
	.errormsg  { background-color: #2f1218 !important; border-color: #6a2530 !important; }
	.noticemsg { background-color: #0e2340 !important; border-color: #234a80 !important; }

/* ---- block 2 (was at style.css line 3630) ---- */
 .stats-refresh button { color: #06101f; } 

/* ---- block 3 (was at style.css line 3646) ---- */
 .stats-tip { background: #e4e9f2; color: #060a13 !important; } 

/* ---- block 4 (was at style.css line 3648) ---- */
 #container > p:has(> #search_results) { background-color: var(--dk-bg); } 

/* ---- block 5 (was at style.css line 3655) ---- */
 #channels-list { --corner-bg: var(--dk-bg); } 

/* ---- block 6 (was at style.css line 3714) ---- */
	.ui-dialog.img-dialog .ui-tabs .ui-tabs-nav li.ui-tabs-active a { color: #06101f !important; }
	.ui-dialog.img-dialog input[type="file"]::file-selector-button { color: #06101f; }

/* ---- block 7 (was at style.css line 3769) ---- */
 .ui-dialog.img-dialog .choose_def_image.is-selected::after { color: #06101f; } 

/* ---- block 8 (was at style.css line 3947) ---- */
	.ch-tabs [role="tab"][aria-selected="true"] { color: var(--dk-bg) !important; }
	.ch-tabs [role="tab"][aria-selected="true"] .ch-count { background: rgba(6, 10, 19, .14); }
	.ch-subscribe button { color: var(--dk-bg); }
	.ch-grid > li.level2 > a { background: #33141d; }
	#response_txt.is-ok { color: #4cc38a !important; }
	#response_txt.is-error { color: #ff8a8d !important; }
	.ch-facts a, .ch-description a { color: var(--dk-accent) !important; }
	.ch-kicker a, .ch-rss { color: var(--dk-muted) !important; }

/* ---- block 9 (was at style.css line 3975) ---- */
	details.vs-how, .vs-line, .vs-missing { color: var(--dk-muted) !important; }
	details.vs-how li, details.vs-how p { color: var(--dk-muted) !important; }
	details.vs-how strong, details.vs-how > summary { color: var(--dk-text) !important; }

/* ---- block 10 (was at style.css line 4118) ---- */
	.mp .vl-badge { background: var(--dk-raised); border-color: var(--dk-line-strong); color: var(--dk-text) !important; }
	.mp .vl-filter { background-color: var(--dk-surface) !important; }
	.mp #list-item-text p.vl-meta, .mp .vl-meta span { color: var(--dk-muted) !important; }

/* ---- block 11 (was at style.css line 4147) ---- */
	.cl-wrap > button.cl-btn { background: var(--dk-raised) !important; color: var(--dk-muted) !important; }
	.cl-wrap > button.cl-btn:hover { background: var(--dk-hover) !important; color: #ffffff !important; }

/* ---- block 12 (was at style.css line 4195) ---- */
	.watch-resume-btn { color: var(--dk-bg) !important; }
	.watch-intro, .watch-empty, .watch-meta, .watch-resume-note { color: var(--dk-muted) !important; }
	.watch-clear:hover { color: #ff8a8d !important; border-color: #a23b44 !important; }

/* ---- theme choice on Min sida ---- */
.theme-switch-label { color: var(--dk-muted) !important; }
.theme-switch button[aria-checked="true"] { color: var(--dk-bg) !important; }