/* ==========================================================================
   01. THEME VARIABLES
   ========================================================================== */
:root,
html[data-theme="light"] {
    color-scheme: light;
    --page-bg: #ffffff;
    --surface-bg: #ffffff;
    --surface-alt: #eaeaea;
    --text-color: #111111;
    --muted-text: #666666;
    --link-color: #000000;
    --link-visited: #006400;
    --link-hover: #008000;
    --border-color: #b7b7b7;
    --accent: #008000;
    --accent-soft: #90ee90;
    --header-bg: var(--bl);
    --side-bg: #add8e6;
    --menu-bg: var(--foreground);
    --menu-text: #ffffff;
    --shadow-color: rgba(0, 0, 0, 0.20);
    --scroll-track: #d3d3d3;
    --scroll-thumb: #bcbcbc;
    --scroll-thumb-hover: #808080;
}

/*
html[data-theme="dark"] {
    color-scheme: dark;
    --page-bg: #000000;
    --surface-bg: #000000;
    --surface-alt: #242424;
    --text-color: #f2f2f2;
    --muted-text: #a8a8a8;
    --link-color: #e8e8e8;
    --link-visited: #8bd39a;
    --link-hover: #7ee787;
    --border-color: #3a3a3a;
    --accent: #36a852;
    --accent-soft: #244c2d;
    --header-bg: #111111;
    --side-bg: #111111;
    --menu-bg: #171717;
    --menu-text: #f5f5f5;
    --shadow-color: rgba(0, 0, 0, 0.65);
    --scroll-track: #171717;
    --scroll-thumb: #555555;
    --scroll-thumb-hover: #777777;
}
*/
html[data-theme="dark"] {

    color-scheme: dark;

    /* Main backgrounds */
    --page-bg:      #202124;
    --surface-bg:   #2a2b2f;
    --surface-alt:  #33353a;

    /* Header */
    --header-bg:    #18191c;

    /* Menu */
    --menu-bg:      #202124;

    /* Text */
    --text-color:   #f2f2f2;
    --muted-text:   #b7bcc5;

    /* Links */
    --link-color:       #f2f2f2;
    --link-hover:       #8fe388;
    --link-visited:     #8bd39a;

    /* Borders */
    --border-color: #42454a;

    /* Accent */
    --accent:       #4CAF50;
    --accent-soft:  #315d39;

    /* Shadows */
    --shadow-color: rgba(0,0,0,.55);

    /* Scrollbars */
    --scroll-track:#2b2d31;
    --scroll-thumb:#5a5d64;
    --scroll-thumb-hover:#757982;
}

/* ==========================================================================
   02. BASE DOCUMENT, LINKS AND GENERIC STATUS ELEMENTS
   ========================================================================== */


body {
	margin: 0;
	height: auto;
}

a {
text-decoration: none;
color: black;
}

a:visited {
	color: darkgreen;
}

a:hover {
	color: green;
	font-weight: bold;
}

.error {
    font-family: monospace;
    display: inline-block;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    padding: 6px 12px;
    border-radius: 12px;
    margin: 0 auto;
    box-shadow: 0 0 0 8px rgba(0, 0, 0, 0.2);
}

.erRed {
    color: red;
    background-color: #ffe6e6; /* Light red background */
}

.erGreen {
    color: green;
    background-color: #e6ffe6; /* Light green background */
}

.erOra {
    color: #ac6f00;
    background-color: #fff4e6; /* Light green background */
}

#note_div {
    z-index: 9999;
    width: 30%;
    position: absolute;
    left: 35%;
    top: 120px;
    text-align: center;
    background: #EAEAEA;
    background-size: 300% 100%;
    color: grey;
    margin: 4px auto;
    border-radius: 14px;
    border: dotted 1.5px darkblue;
	cursor: pointer;
    border: none;
    font-family: monospace;
    font-size: 1.1rem;
    font-weight: bold;
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.5s ease-out;
}

#notification .show_me {
    max-height: 25px;
    padding: 6px 12px;
    box-shadow: 0 0 0 8px rgba(0, 0, 0, 0.2);
}

#note_div:hover {
    background: lightblue;
    color: darkblue;
    transition: .5s ease-out;
    box-shadow: 0 0 0 8px rgba(0, 0, 0, 0.4);
}

#note_div .close_note {
    position: absolute;
    background: red;
    border-radius: 10px;
    right: 6px;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    user-select: none;
    padding: 1px 7px;
    color: white;
}

.headsubj {
    position: relative;
    padding: 10px 0 5px 5px;
    font-size: 2.2rem;
    transition: height 0.25s, all 0.25s 0.25s;
}

.unnews {
	margin: 0 2%;
}

/* ==========================================================================
   03. NEWS LIST, AI SUMMARIES AND NEWS DETAILS
   ========================================================================== */
.newses {
    margin: 0 2%;
    display: flex;
    height: calc(100% - 160px);
}

.news_cell {
    margin: 20px;
    width: 100%;
    overflow: overlay;
    max-height: 100%;
}

.newssei {
	position: relative;
	padding: 3px;
	margin: auto;
	font-family: monospace;
	font-size: 1rem;
	align-items: center;
}

.dateChange {
    text-align: center;
    font-weight: bold;
    background-image: linear-gradient(to right, white, green, white);
    font-size: 1.4rem;
    border-radius: 30% 0 0 30%;
    background-size: 450% 210%;
}

.j4ai {
    background-image: linear-gradient(to right, white, lightgreen, white);
    min-height: 60px;
    width: 90%;
    font-size: 1.1rem;
    border-bottom: 1px solid lightgreen;
}

.comb_newses {
    display: table;
    width: 100%;
    table-layout: fixed;
}

.comb_cell {
    position: relative;
    display: table-cell;
    text-align: center;
    font-size: 1rem;
}

.news_col {
	background-image: url('https://uutimet.paivittain.fi/images/logo_trans_bg.png');
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position-x: 50%;
	background-position-y: 250px;
}

.news_logo {
    padding-right: 5px;
    max-width: 18px;
    max-height: 18px;
    top: 3px;
    position: relative;
}

.news_hidden {
    position: absolute;
    top: 26px;
    display: none;
    width: 300px;
    background: white;
    z-index: 200;
    border: 1px solid green;
    border-radius: 5px;
    padding: 5px;
}

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  box-shadow: inset 0 0 2px lightgrey;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb {
  background: lightgray;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: gray;
}

/* End news list ----------------------------------------------------------- */

/* Optional side columns --------------------------------------------------- */

.left_cell {
	width: 10%;
	background-color: lightblue;
	}

.right_cell {
	width: 10%;
	background-color: lightblue;
	}

/* Optional side columns --------------------------------------------------- */

#login_div {
	position: absolute;
	left: 40%;
	top: 10%;
	padding-bottom: 20px;
	text-align: center;
	font-size: 1.2rem;
	color: white;
	height: auto;
	width: 300px;
	transition: all 1s;
	z-index: 1000;
}

.close_login {
	opacity: 0;
	border-radius: 50px;
	background-color: white;
	display: none;
}

.open_login {
	opacity: 1;
	border-radius: 10px;
	background-color: green;
	display: block;
}

#login_div form {
	width: 75%;
	margin: 0 12.5%;
}


#login_div img {
    height: 30px;
    margin-bottom: -10px;
}

#login_div input {
    width: 77%;
    height: 25px;
    margin: 0 0 5px 5px;
    border-radius: 5px;
}

#login_div input[type=submit] {
	width: 30%;
}

.logged_in {
    position: relative;
    font-size: 0.85rem;
}

/* ==========================================================================
   05. HEADER, HEADER CONTROLS AND FOOTER
   ========================================================================== */
.header {
	position: -webkit-sticky;
	position: sticky;
	font-family: monospace;
	background-color: var(--bl);
	border-top: 2px dashed gray;
	border-bottom: 2px dashed gray;
	align-items: center;
	display: flex;
	width: 100%;
	top: 0;
	z-index: 100;
	transition: all 0.5s;
}

.header a:visited {
    text-decoration: none;
	color: black;
}

.head_logo {
	position: absolute;
	right: 0;
	height: 90px;
	transition: all 0.5s;
}



.footer {
	width: 100%;
	margin: auto;
	margin-bottom: 0.5%;
	text-align: center;
	font-family: monospace;
	font-size: calc(0.0012em * var(--ball_size));
}

.date_control {
	display: flex;
	margin: 5px 0;
	justify-content: center;
	align-items: center;
}

.btn_yday {
    /*position: relative;
    padding: 2px;
    background: linear-gradient(to left, salmon 34%, dodgerblue 65%) right;
    border: 1px solid dodgerblue;
    color: white;
    font-weight: bold;
    border-radius: 8px;
    z-index: 9999;
    width: 180px;
    margin: 4px auto;
    text-align: center;
	cursor: pointer;
	*/background-color: white;
	background: linear-gradient(to left, #EAEAEA 34%, blue 65%) right;
	background-size: 300% 100%;
	color: blue;
	padding: 6px 12px;
	margin-right: 10px;
	border-radius: 6px;
	border: none;
	transition: .5s ease-out;
	font-size: 0.9rem;
	font-weight: bold;
}

.btn_yday:hover {
	background: linear-gradient(to left, salmon 34%, dodgerblue 65%) right;
	/*background-position: left;*/
	color: white;
	transition: .5s ease-out;
}

#disclaimer {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 40px);
    max-width: 650px;
    box-sizing: border-box;
    padding: 25px;
    background: #148a14;
    color: #fff;
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    z-index: 9999;
    font-family: Arial, sans-serif;
}

#disclaimer h3 {
    margin: 0 0 15px;
    font-size: 22px;
}

.disc_text {
    font-size: 14px;
    line-height: 1.6;
    overflow-wrap: break-word;
}

.disc_buttons {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

.btn_disc {
    padding: 10px 18px;
    border: 2px solid white;
    border-radius: 6px;
    background: transparent;
    color: white;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
}

.btn_disc:hover {
    background: white;
    color: #148a14;
}

@media (max-width: 600px) {
    #disclaimer {
        bottom: 10px;
        width: calc(100% - 20px);
        padding: 20px;
    }

    .disc_buttons {
        flex-direction: column;
    }

    .btn_disc {
        width: 100%;
    }
}

#feding {
    position: absolute;
    text-align: center;
    height: 35px;
    top: 50%; /* Vertically center */
    left: 50%; /* Horizontally center */
    transform: translate(-50%, -50%); /* Correct the centering */
    z-index: 12000;
}

.hideme {
  visibility: hidden !important;
  opacity: 0 !important;
  transition: opacity 1s, visibility 1s;
}

/* ==========================================================================
   06. HAMBURGER MENU AND SIDEBAR
   ========================================================================== */

	.hamburger-menu {
		/* margin-left: 2%; */
		display: flex;
		flex-direction: column;
		gap: var(--hamburger-gap);
		width: max-content;
		position: absolute;
		top: var(--hamburger-margin);
		left: 20px;
		z-index: 2;
		cursor: pointer;
		transition: all 0.5s;
	}

	.hamburger-menu:has(input:checked) {

		background: #333;
	}

	.hamburger-menu:has(input:focus-visible)::before,
	.hamburger-menu:has(input:focus-visible)::after,
	.hamburger-menu input:focus-visible {
		border: 1px solid var(--background);
		box-shadow: 0 0 0 1px var(--foreground);
	}

	.hamburger-menu::before,
	.hamburger-menu::after,
	.hamburger-menu input {
		content: "";
		width: var(--bar-width);
		height: var(--bar-height);
		background-color: black;
		border-radius: 9999px;
		transform-origin: left center;
		transition: opacity var(--animation-timing), width var(--animation-timing),
		rotate var(--animation-timing), translate var(--animation-timing),
		background-color var(--animation-timing);
	}

	.hamburger-menu input {
		appearance: none;
		padding: 0;
		margin: 0;
		outline: none;
		pointer-events: none;
	}

	.hamburger-menu:has(input:checked)::before {
		background-color: white;
		rotate: 45deg;
		width: var(--x-width);
		translate: 0 calc(var(--bar-height) / -2);
	}

	.hamburger-menu:has(input:checked)::after {
		background-color: white;
		rotate: -45deg;
		width: var(--x-width);
		translate: 0 calc(var(--bar-height) / 2);
	}

	.hamburger-menu input:checked {
		opacity: 0;
		width: 0;
	}

	.hamburger-menu:has(input:checked) + .sidebar {
		translate: 0;
		opacity: 1;
		transition: all var(--animation-timing);
	}

	.sidebar div {
		margin-top: 6px;
	}

	.sidebar {
		translate: -100%;
		margin-left: 0;
		position: absolute;
		opacity: 0;
		padding: 10px;
		padding-top: 234px;
		font-size: 1.2rem;
		background-color: var(--foreground);
		color: var(--background);
		transition: all var(--animation-timing);
	}

	.sidebar a, .sidebar a:visited {
		text-decoration: none;
		color: white;
	}
	.sidebar a:hover {
		color: lightgreen;
	}

/* ==========================================================================
   07. RESPONSIVE LAYOUT
   ========================================================================== */
@media (min-width: 601px) {

	.header {
		font-size: calc(0.003em * var(--ball_size));
	}

	.subjsmall {
		top: 3px;
		font-size: 1.3rem;
	}

	.headSmall {
		height: 50px;
		font-size: calc(0.002em * var(--ball_size));
		transition: all 0.5s;
	}

    .headsubj {
        text-align: center;
        padding: 10px 20px;
    }

	.login {
        position: fixed;
        top: 77px;
        left: 18px;
        max-height: 40px;
        cursor: grab;
        transition: all 1s;
    }

	.bmmenu {
		top: 10px;
		transition: all 0.5s;
	}

	.login_small {
		top: 1px;
		right: 60px;
	}

    #weather_base {
        display: flex;
        background: white;
        box-shadow: 0px 0px 7px 4px #9ead9d;
        margin-left: 80px;
        border-radius: 5px;
        flex-direction: row;
        align-items: center;
        padding: 6px 8px;
        gap: 10px;
    }

    #weather_base .met_logo {
        max-height: 45px;
    }

    #weather {
        display: grid;
        align-items: center;
    }

	#weather .cit_weat {
	    position: relative;
	    font-size: 1.1rem;
	}

    #weather .pic_weat {
        position: relative;
        max-height: 30px;
        margin: 0 0 -10px 15px;
    }

    #euribor {
        font-size: 1.1rem;
        margin-bottom: 3px;
        text-align: center;
        border-radius: 5px;
        background: white;
        box-shadow: 0px 0px 7px 4px #9ead9d;
        padding: 7px 8px;
        z-index: 100;
    }

    #euribor .euribor_list {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 1px 3px;
    }

    #euribor .euribor_list ul {
        list-style: none;
        padding: 0 0 3px 0;
        margin: 0;
        display: flex;
        gap: 4px;
    }

    #euribor .euribor_list li {
        color: white;
        padding: 0 5px;
        border-radius: 5px;
        font-size: 0.8rem;
        text-align: center;
    }

    #euribor .up {
        color: red !important;
        background: bisque;
    }

    #euribor .down {
        color: green !important;
        background: lightgreen;
    }

    #euribor .stale {
        color: blue !important;
        background: lightblue;
    }

    #omx {
        display: grid;
        background: white;
        box-shadow: 0px 0px 7px 4px #9ead9d;
        margin-left: 20px;
        border-radius: 5px;
        flex-direction: row;
        align-items: center;
        padding: 8px 8px;
        /* gap: 10px; */
    }

	#omx .omx_box {
	    position: relative;
	    font-size: 1.1rem;
	    text-align: center;
	}

    #doom {
        display: grid;
        background: white;
        box-shadow: 0px 0px 7px 4px #9ead9d;
        margin-left: 0;
        margin-right: 20px;
        border-radius: 5px;
        align-items: center;
        padding: 8px 12px;
        color: #202020;
        box-sizing: border-box;
        font-size: 16px;
        font-family: monospace;
        cursor: pointer;
    }

    #doom .doom-worse {
        color: red;
    }
    
    #doom .doom-better {
        color: green;
    }
    
    #doom .doom-same {
        color: #666;
    }
    
}


/* ==========================================================================
   07. RESPONSIVE LAYOUT
   ========================================================================== */
@media only screen and (max-width: 600px) {

	.header {
		font-size: 1.25rem;
	}

	.headsubj {
		font-size: 1.1rem;
		transition: all 0.5s;
		width: 75%;
		text-align: left;
		left: 70px;
	}
    
    #weather_base, #euribor, #omx, #doom {
        display: none;
    }

	.head_logo {
		position: absolute;
		right: 0;
		top: 5px;
		height: 50px;
		transition: all 0.5s;
	}

	.hamburger-menu {
		left: 10px;
		top: 16px;
	}

	.login {
        position: absolute;
        top: 5px;
        right: 15px;
        max-height: 40px;
        cursor: grab;
        transition: all 1s;
        z-index: 100;
	}

	.newssei {
		font-size: 1.15rem;
	}

	.sidebar {
		width: 100%;
	}

	.newses {
		margin: 2%;
		display: block;
		height: fit-content;
	}

	.news_cell {
		margin: 0.5%;
		width: 99%;
		overflow: hidden;
		height: auto;

	}

	.footer {
		font-size: 1rem;
	}

	.news_hidden {
		position: static;
		display: block;
		width: 90%;
		margin: 0 5%;
		background: white;
		z-index: 200;
		border: 1px solid green;
		border-top: none;
		border-radius: 0 0 8px 8px;
		padding: 5px;
	}
	
	.news_hidden {
        background: var(--surface-bg);
        color: var(--text-color);
        border-color: var(--accent);
    }

	.comb_cell {
		display: inline;
		text-align: center;
		padding-left: 5%;
	}

	.comb_newses {
		display: table;
		width: 100%;
		table-layout: fixed;
	}

	#login_div {
		position: absolute;
		left: 10%;
		top: 20%;
		width: 80%;
	}



/* =========================================================
   MOBILE DARK THEME
   ========================================================= */


    html[data-theme="dark"],
    html[data-theme="dark"] body {
        background-color: var(--page-bg);
        color: var(--text-color);
    }

    /* Header */
    html[data-theme="dark"] .header {
        background-color: var(--header-bg);
        color: var(--text-color);
        border-color: var(--border-color);
    }

    html[data-theme="dark"] .headsubj {
        color: var(--text-color);
    }

    html[data-theme="dark"] .header a,
    html[data-theme="dark"] .header a:visited {
        color: var(--text-color);
    }

    /* Hamburger */
    html[data-theme="dark"] .hamburger-menu::before,
    html[data-theme="dark"] .hamburger-menu::after,
    html[data-theme="dark"] .hamburger-menu input {
        background-color: #eeeeee;
    }

    /* Mobile sidebar */
    html[data-theme="dark"] .sidebar {
        background-color: var(--menu-bg);
        color: var(--menu-text);
        border-right: 1px solid var(--border-color);
        box-shadow: 5px 0 15px rgba(0, 0, 0, 0.55);
    }

    html[data-theme="dark"] .sidebar a,
    html[data-theme="dark"] .sidebar a:visited {
        color: var(--menu-text);
    }

    html[data-theme="dark"] .sidebar a:hover {
        color: var(--link-hover);
    }

    /* News page */
    html[data-theme="dark"] .newses,
    html[data-theme="dark"] .news_cell,
    html[data-theme="dark"] .newssei {
        background-color: transparent;
        color: var(--text-color);
    }

    html[data-theme="dark"] .newssei a,
    html[data-theme="dark"] .newssei a:visited {
        color: var(--link-color);
    }

    html[data-theme="dark"] .newssei a:hover {
        color: var(--link-hover);
    }

    /* AI combined news */
    html[data-theme="dark"] .j4ai {
        color: var(--text-color);
        background: linear-gradient(
            to right,
            var(--page-bg),
            var(--accent-soft),
            var(--page-bg)
        );
        border-bottom-color: var(--accent);
    }

    html[data-theme="dark"] .comb_cell {
        color: var(--text-color);
    }

    html[data-theme="dark"] .comb_cell a,
    html[data-theme="dark"] .comb_cell a:visited {
        color: var(--link-color);
    }

    /* On mobile these are permanently visible */
    html[data-theme="dark"] .news_hidden {
        background-color: var(--surface-bg);
        color: var(--text-color);
        border-color: var(--accent);
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.55);
    }

    /* Date separators */
    html[data-theme="dark"] .dateChange {
        color: var(--text-color);
        background: linear-gradient(
            to right,
            var(--page-bg),
            var(--accent),
            var(--page-bg)
        );
    }

    /* Profile */
    html[data-theme="dark"] #profile {
        background-color: var(--page-bg);
        color: var(--text-color);
    }

    html[data-theme="dark"] #profile input[type="text"],
    html[data-theme="dark"] #profile input[type="number"],
    html[data-theme="dark"] #profile select,
    html[data-theme="dark"] #profile textarea {
        background-color: var(--surface-bg);
        color: var(--text-color);
        border-color: var(--border-color);
    }

    /* Login popup */
    html[data-theme="dark"] #login_div {
        color: var(--text-color);
    }

    html[data-theme="dark"] .open_login {
        background-color: var(--surface-alt);
        border: 1px solid var(--border-color);
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.65);
    }

    /* Footer */
    html[data-theme="dark"] .footer {
        color: var(--muted-text);
    }
}


/* ==========================================================================
   08. PROFILE PAGE
   ========================================================================== */

#profile form input[type="text"], #profile form input[type="number"] {
	width: 235px;
	height: 30px;
	border: 1px solid #dee0e4;
	margin-bottom: 10px;
	padding: 0 5px;
	border-radius: 0 5px 5px 0;
}


#profile label {
    height: 24px;
    width: 220px;
    justify-content: center;
    align-items: center;
    background-color: #4CAF50;
    color: #ffffff;
    border-radius: 15px 0 0 15px;
    padding: 5px 0 0 15px;
}

/* Feed selection switches ------------------------------------------------ */

#proslide {
    width: 80px;
    height: 38px;
    display: flex;
    margin-bottom: 5px;
}

#proslide div {
	display: block;
	margin: auto;
	padding-bottom: 9px;
}

#proslide div:nth-child(1) {
	padding-left: 0;
}

#proslide div:nth-child(2) {
    width: 50px;
    margin: auto;
}

#proslide label {
	background-color: white;
}

#proslide .switch {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 20px;
}

#proslide .switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

#proslide .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #f43f3f;
  -webkit-transition: .4s;
  transition: .4s;
}

#proslide .slider:before {
  position: absolute;
  content: "";
  height: 17px;
  width: 17px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

#proslide input:checked + .slider {
  background-color: green;
}


#proslide input:checked + .slider:before {
  -webkit-transform: translateX(20px);
  -ms-transform: translateX(20px);
  transform: translateX(20px);
}

/* Rounded sliders */
#proslide .slider {
  border-radius: 34px;
}

#proslide .slider:before {
  border-radius: 50%;
}

#profile .doubled {
	width: 100%;
	margin: auto;
}

#profile {
	margin: 5%;
	font-family: monospace;
	font-size: 0.9rem;
}

#profile .inlinebox {
	display: inline-flex;
	margin-left: 5%;
}

#profile .db_div {
	width: 50%;
}

#meds .medtip {
	left: -200px;
}

#session {
    list-style: none; /* Remove default bullets */
    padding: 0;
    margin: 0;
}

#session li {
    background: linear-gradient(to left, white 10%, #4CAF50 45%) right;
    margin: 3px 0px;
    padding: 3px 15px;
    border-radius: 50px 0 0 50px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    color: white;
    height: 24px;
}

#session li::before {
    content: "📲"; /* Checkmark icon */
    color: #4CAF50; /* Green color */
    font-weight: bold;
}

/* Profile page logs and buttons */

.profile-logs {
    margin-top: 30px;
}

.profile-logs h2 {
    margin-bottom: 10px;
}

.log-header {
    max-width: 1000px;
    padding: 8px 12px;
    background: #4caf50;
    color: #ffffff;
    font-weight: bold;
}

.log-content {
    box-sizing: border-box;
    width: 100%;
    max-width: 1450px;
    max-height: 500px;
    margin: 0;
    padding: 15px;
    overflow: auto;
    border: 1px solid #4caf50;
    background: #181a1d;
    color: #eeeeee;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}



/* ==========================================================================
   09. SHARED THEME APPLICATION
   ========================================================================== */
html,
body {
    background-color: var(--page-bg);
    color: var(--text-color);
}

body,
.header,
.sidebar,
.news_hidden,
#weather_base,
#euribor,
#omx,
#note_div,
#profile,
#profile input,
#profile select,
#profile textarea {
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

a,
a:visited {
    color: var(--link-color);
}

a:visited {
    color: var(--link-visited);
}

a:hover {
    color: var(--link-hover);
}

.header {
    background-color: var(--header-bg);
    color: var(--text-color);
    border-color: var(--border-color);
}

.header a,
.header a:visited {
    color: var(--text-color);
}

.left_cell,
.right_cell {
    background-color: var(--side-bg);
}

/*.news_hidden,
#weather_base,
#euribor,
#omx {
    background: var(--surface-bg);
    color: var(--text-color);
    border-color: var(--border-color);
    box-shadow: 0 0 7px 4px var(--shadow-color);
}*/

#note_div {
    background: var(--surface-alt);
    color: var(--muted-text);
}

.dateChange {
    background-image: linear-gradient(to right, var(--page-bg), var(--accent), var(--page-bg));
    color: var(--text-color);
}

.j4ai {
    background-image: linear-gradient(to right, var(--page-bg), var(--accent-soft), var(--page-bg));
    border-bottom-color: var(--accent-soft);
}

.sidebar {
    background-color: var(--menu-bg);
    color: var(--menu-text);
}

.sidebar a,
.sidebar a:visited {
    color: var(--menu-text);
}

::-webkit-scrollbar-track {
    box-shadow: inset 0 0 2px var(--scroll-track);
}

::-webkit-scrollbar-thumb {
    background: var(--scroll-thumb);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--scroll-thumb-hover);
}

html[data-theme="dark"] .news_col {
    background-image: url('https://uutimet.paivittain.fi/images/logo_trans_bg.png');
}

html[data-theme="dark"] .btn_yday {
    background: linear-gradient(to left, #242424 34%, #244caa 65%) right;
    color: #9db7ff;
}

html[data-theme="dark"] .btn_yday:hover {
    background: linear-gradient(to left, #73372f 34%, #2f6fbe 65%) right;
    color: #ffffff;
}

html[data-theme="dark"] #profile form input[type="text"],
html[data-theme="dark"] #profile form input[type="number"],
html[data-theme="dark"] #profile select,
html[data-theme="dark"] #profile textarea {
    background-color: var(--surface-bg);
    color: var(--text-color);
    border-color: var(--border-color);
}

html[data-theme="dark"] #proslide label {
    background-color: var(--surface-bg);
}

/* =========================================================
   DARK THEME � HEADER
   ========================================================= */

html[data-theme="dark"] .header {
    background-color: #121212;
    color: #f2f2f2;
    border-top-color: #3a3a3a;
    border-bottom-color: #3a3a3a;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.65);
}

/* Header links */
html[data-theme="dark"] .header > a,
html[data-theme="dark"] .header > a:visited {
    color: #f2f2f2;
}

html[data-theme="dark"] .header a:hover {
    color: #72d572;
}

/* Hamburger bars */
html[data-theme="dark"] .hamburger-menu::before,
html[data-theme="dark"] .hamburger-menu::after,
html[data-theme="dark"] .hamburger-menu input {
    background-color: #e6e6e6;
}

/* Hamburger background when menu is open */
html[data-theme="dark"] .hamburger-menu:has(input:checked) {
    background-color: transparent;
}

/* Header information boxes */
html[data-theme="dark"] #weather_base,
html[data-theme="dark"] #euribor,
html[data-theme="dark"] #omx {
    background-color: #1d1d1d;
    color: #f2f2f2;
    border: 1px solid #303030;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
}

/* Main header title */
html[data-theme="dark"] .headsubj {
    color: #f4f4f4;
}

/* Header logo: reduce brightness slightly */
html[data-theme="dark"] .head_logo {
    opacity: 0.8;
}

#themeslide {
    display: flex;
    align-items: center;
    /* gap: 8px; */
    height: 38px;
    padding-left: 10px;
}

#themeslide .theme_letter {
    font-weight: bold;
    font-size: 1rem;
}

#themeslide .switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

#themeslide .switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

#themeslide .slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background-color: #e5e5e5;
    border: 1px solid #999;
    border-radius: 30px;
    transition: 0.3s;
}

#themeslide .slider::before {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    border-radius: 50%;
    transition: 0.3s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

#themeslide input:checked + .slider {
    background-color: #222;
}

#themeslide input:checked + .slider::before {
    transform: translateX(20px);
}

html[data-theme="dark"] #themeslide .theme_letter {
    color: #f2f2f2;
}




/* ==========================================================================   
    11. CONSOLIDATED LAYOUT FIXES   
        Keep this section last: it resolves legacy selector conflicts without
        changing the original page structure or visual identity.
========================================================================== */

/* Header information cards remain white in both themes. */
#weather_base,
#euribor,
#omx,
#doom,
html[data-theme="dark"] #weather_base,
html[data-theme="dark"] #euribor,
html[data-theme="dark"] #omx,
html[data-theme="dark"] #doom {
    background-color: #ffffff;
    color: #202020;
    border: 1px solid #d8d8d8;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
}

html[data-theme="dark"] #weather_base *,
html[data-theme="dark"] #euribor *,
html[data-theme="dark"] #omx *,
html[data-theme="dark"] #doom * {
    color: #202020;
}

/* Doomday colors based on direction! */
html[data-theme="dark"] #doom .doom-worse {
    color: red;
}

/* Doomday colors based on direction! */
html[data-theme="dark"] #doom .doom-better {
    color: green;
}

/* Doomday colors based on direction! */
html[data-theme="dark"] #doom .doom-same {
    color: #666;
}

/* Preserve semantic Euribor colours over the generic card text colour. */
html[data-theme="dark"] #euribor .up {
    color: red !important;
}

html[data-theme="dark"] #euribor .down {
    color: green !important;
}

html[data-theme="dark"] #euribor .stale {
    color: blue !important;
}

/* Make the profile/login person icon readable on a dark header. */
html[data-theme="dark"] .login {
    filter: grayscale(50%) brightness(3.15);
}

/* Dim the large white watermark without creating an overlay element. */
html[data-theme="dark"] .news_col {
    background-image: url('https://uutimet.paivittain.fi/images/logo_trans_dark.png');
    background-repeat: no-repeat, no-repeat;
    background-attachment: fixed, fixed;
    background-position: 50% 250px, 50% 250px;
}

/* News-detail popup shown when hovering an AI source. */
.news_hidden {
    box-sizing: border-box;
    color: #111111;
}

html[data-theme="dark"] .news_hidden {
    background-color: #f7f7f7;
    color: #111111;
    border-color: #4caf50;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.65);
}

html[data-theme="dark"] .news_hidden a,
html[data-theme="dark"] .news_hidden a:visited {
    color: #111111;
}

html[data-theme="dark"] #note_div {
    background: white;
    color: blue;
}

html[data-theme="dark"] #note_div:hover {
    background: lightblue;
    color: blue;
    transition: .5s ease-out;
    box-shadow: 0 0 0 8px rgba(0, 0, 0, 0.4);
}

html[data-theme="dark"] #note_div a {
    color: #1976b9;
}

html[data-theme="dark"] #note_div a:hover {
    color: #0d5f9c;
}

/* Do not let hover-bold resize or jump AI source cells. */
.j4ai a:hover,
.comb_cell a:hover {
    font-weight: inherit;
}

/* Sidebar is a real viewport panel instead of a tall padded header element. */
.hamburger-menu {
    z-index: 1002;
}

.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1001;
    width: min(340px, 100vw);
    height: 100vh;
    box-sizing: border-box;
    margin: 0;
    padding: 95px 20px 24px;
    overflow-y: auto;
    background-color: var(--menu-bg);
    color: var(--menu-text);
    opacity: 0;
    translate: -100% 0;
    pointer-events: none;
    transition: translate var(--animation-timing), opacity var(--animation-timing);
}

.hamburger-menu:has(input:checked) + .sidebar {
    opacity: 1;
    translate: 0 0;
    pointer-events: auto;
}

.sidebar div {
    margin-top: 8px;
}

/* Header link rules previously overrode menu colours in dark mode. */
.header .sidebar a,
.header .sidebar a:visited,
html[data-theme="dark"] .header .sidebar a,
html[data-theme="dark"] .header .sidebar a:visited {
    display: block;
    color: var(--menu-text);
    font-weight: 400;
    line-height: 1.35;
}

.header .sidebar a:hover,
html[data-theme="dark"] .header .sidebar a:hover {
    color: #90ee90;
    font-weight: 400;
}

html[data-theme="dark"] .sidebar {
    background-color: #171717;
    color: #f5f5f5;
    border-right: 1px solid #3a3a3a;
    box-shadow: 6px 0 18px rgba(0, 0, 0, 0.55);
}

/* The open hamburger/X should have no dark rectangular backing. */
.hamburger-menu:has(input:checked) {
    background: transparent;
}

/* Compact theme switch alignment. */
#themeslide {
    gap: 4px;
    padding-left: 10px;
}

#themeslide .theme_letter {
    display: inline-flex;
    width: 14px;
    align-items: center;
    justify-content: center;
    user-select: none;
}

#themeslide .switch {
    margin: 0 2px;
}

@media only screen and (max-width: 600px) {
    .sidebar {
        width: 100vw;
        padding: 80px 20px 24px;
    }
}

/* ==========================================================================
   12. HEADER + RESPONSIVE CONSOLIDATION (2026-09)
   Authoritative overrides for header cards and mobile layout.
   Kept last intentionally so legacy rules above remain harmless.
   ========================================================================== */

/* Header information cards: common visual language */
#weather_base,
#omx,
#doom,
#euribor {
    box-sizing: border-box;
    flex: 0 0 auto;
    background: #ffffff;
    color: #202020;
    border: 1px solid #d8d8d8;
    border-radius: 5px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
}

/* DOOM card */
#doom {
    display: grid;
    align-items: center;
    padding: 8px 12px;
    margin-left: 0;
    margin-right: 20px;
    font-family: monospace;
    font-size: 16px;
    text-align: center;
    cursor: pointer;
}

#doom .doom_box {
    text-align: center;
}

#doom .doom_title,
#doom .doom_number {
    white-space: nowrap;
}

#doom .doom-worse { color: red; }
#doom .doom-better { color: green; }
#doom .doom-same   { color: #666666; }

/* Keep the white cards readable in dark theme. */
html[data-theme="dark"] #weather_base,
html[data-theme="dark"] #omx,
html[data-theme="dark"] #doom,
html[data-theme="dark"] #euribor {
    background: #ffffff;
    color: #202020;
    border-color: #d8d8d8;
}

html[data-theme="dark"] #weather_base *,
html[data-theme="dark"] #omx *,
html[data-theme="dark"] #doom *,
html[data-theme="dark"] #euribor * {
    color: #202020;
}

html[data-theme="dark"] #doom .doom-worse { color: red; }
html[data-theme="dark"] #doom .doom-better { color: green; }
html[data-theme="dark"] #doom .doom-same   { color: #666666; }

html[data-theme="dark"] #euribor .up {
    color: red !important;
}
html[data-theme="dark"] #euribor .down {
    color: green !important;
}
html[data-theme="dark"] #euribor .stale {
    color: blue !important;
}

/* Desktop */
@media (min-width: 601px) {
    #weather_base {
        margin-left: 80px;
    }

    #omx {
        margin-left: 20px;
    }

    /* Head subject already provides the separation before DOOM. */
    #doom {
        margin-left: 0;
        margin-right: 20px;
    }
}

/* Mobile:
   Keep the compact title header as the first row and show the four information
   cards as a neat 2x2 strip underneath it. */
@media only screen and (max-width: 600px) {

    .header {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: stretch;
    }

    /* Otsikko koko leveydelle */
    .headsubj {
        grid-column: 1 / -1;
        grid-row: 1;

        box-sizing: border-box;
        width: auto;
        min-height: 90px;
        left: 0;
        margin: 0;
        padding: 12px 58px 8px 74px;

        text-align: left;
        font-size: 1.05rem;
    }

    /* SÄÄ - koko leveys */
    #weather_base {
        grid-column: 1 / -1;
        grid-row: 2;

        display: flex;
        margin: 5px 8px 4px;
        min-height: 58px;

        justify-content: center;
        align-items: center;
        gap: 10px;
    }

    /* OMX - vasen */
    #omx {
        grid-column: 1;
        grid-row: 3;

        display: flex;
        margin: 4px 4px 4px 8px;
        min-height: 58px;

        justify-content: center;
        align-items: center;
    }

    /* DOOM - oikea */
    #doom {
        grid-column: 2;
        grid-row: 3;

        display: flex;
        margin: 4px 8px 4px 4px;
        min-height: 58px;

        justify-content: center;
        align-items: center;

        font-size: 14px;
    }

    /* EURIBOR - koko leveys */
    #euribor {
        grid-column: 1 / -1;
        grid-row: 4;

        display: block;
        margin: 4px 8px 7px;
        padding: 7px 8px;

        font-size: 0.9rem;
    }

    /* Euriborit takaisin yhdelle riville */
    #euribor .euribor_list ul {
        display: flex;
        justify-content: center;
        gap: 4px;

        width: 100%;
        padding: 0;
        margin: 0;
    }

    #euribor .euribor_list li {
        padding: 1px 4px;
        font-size: 0.68rem;
        white-space: nowrap;
    }

    #weather_base .met_logo {
        max-height: 38px;
    }

    #weather .cit_weat,
    #omx .omx_box {
        font-size: 0.9rem;
    }

    #doom .doom_title {
        font-size: 0.78rem;
    }

    #doom .doom_number {
        font-size: 0.95rem;
    }
    
    #weather_base {
    grid-column: 1 / -1;
    grid-row: 2;

    display: flex;
    margin: 5px 8px 4px;
    padding: 6px 10px;
    min-height: 58px;
    max-height: 65px;

    justify-content: center;
    align-items: center;
    gap: 10px;
}

    /* TÄMÄ puuttuu mobiililta */
    #weather_base .met_logo {
        width: auto;
        height: 38px;
        max-width: 45px;
        max-height: 38px;
        object-fit: contain;
    }
    
    #weather {
        display: grid;
        align-items: center;
    }
    
    #weather .cit_weat {
        font-size: 0.9rem;
    }
    
    #weather .pic_weat {
        width: auto;
        height: 25px;
        max-width: 40px;
        max-height: 25px;
        object-fit: contain;
        margin: 0 0 -7px 8px;
    }
    
    #omx .omx_box {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        line-height: 1.25;
    }
    
}

/* ==========================================================================
   13. COMPACT DESKTOP / LAPTOP HEADER
   ========================================================================== */

@media (min-width: 601px) and (max-height: 950px) {

    .header {
        min-height: 120px;
        padding: 8px 0;
        box-sizing: border-box;
        justify-content: center;
        gap: 12px;
    }

    /* Weather */
    #weather_base {
        margin-left: 75px;
        padding: 5px 7px;
    }

    #weather_base .met_logo {
        max-height: 38px;
    }

    #weather .cit_weat {
        font-size: 0.95rem;
    }

    #weather .pic_weat {
        max-height: 26px;
    }

    /* OMX */
    #omx {
        margin-left: 0;
        padding: 6px 8px;
    }

    #omx .omx_box {
        font-size: 0.95rem;
    }

    /* Main title area */
    .headsubj {
        flex: 0 1 330px;
        width: auto;
        padding: 4px 10px;
        font-size: 1.45rem;
        line-height: 1.15;
        text-align: center;
    }

    .headsubj > div:first-child {
        white-space: nowrap;
    }

    .headsubj .logged_in {
        font-size: 0.75rem !important;
        line-height: 1.2;
    }

    /* Doom */
    #doom {
        margin: 0;
        padding: 6px 9px;
        font-size: 14px;
    }

    /* Euribor */
    #euribor {
        margin: 0 10px 0 0;
        padding: 5px 7px;
        font-size: 0.95rem;
    }

    #euribor .euribor_list li {
        font-size: 0.72rem;
        padding: 0 4px;
    }

    /* Logo */
    .head_logo {
        height: 65px;
    }

    /* Hamburger */
    .hamburger-menu {
        top: 20px;
    }

    /* Profile icon */
    .login {
        top: 65px;
        max-height: 34px;
    }
}



/* ========================================
   CONTACT FORM - THEME AWARE
   ======================================== */

.contact-container {
    width: 100%;
    max-width: 700px;
    margin: 40px auto;
    padding: 30px;
    box-sizing: border-box;

    background: var(--card-bg, var(--bg-secondary, #292b2e));
    color: var(--text-color, #f1f1f1);
    border: 1px solid var(--border-color, #414348);
    border-radius: 12px;
}

.contact-container h1 {
    color: var(--text-color, inherit);
    margin: 0 0 15px;
}

.contact-container p {
    color: var(--text-color, inherit);
    line-height: 1.6;
    margin-bottom: 25px;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.contact-form label {
    display: block;
    color: var(--text-color, inherit);
    margin-bottom: 7px;
    font-weight: 600;
}

.contact-form input,
.contact-form textarea {
    display: block;
    width: 100%;
    padding: 12px 14px;
    box-sizing: border-box;

    background: var(--input-bg, var(--card-bg, #292b2e));
    color: var(--text-color, #f1f1f1);
    border: 1px solid var(--border-color, #555960);
    border-radius: 7px;
    font: inherit;
}

.contact-form input:focus,
.contact-form textarea:focus {
    outline: 2px solid var(--primary-color, #7ee787);
    outline-offset: 1px;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: var(--muted-text, #999);
}

.contact-form textarea {
    min-height: 160px;
    resize: vertical;
}

.contact-form button {
    align-self: flex-start;
    padding: 12px 28px;

    background: var(--primary-color, #7ee787);
    color: var(--button-text, #161616);
    border: none;
    border-radius: 7px;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.contact-form button:hover {
    filter: brightness(0.9);
}

.contact-form button:focus-visible {
    outline: 2px solid var(--text-color, currentColor);
    outline-offset: 3px;
}

/* Status messages */

.contact-success {
    background: var(--success-bg, #173d27);
    color: var(--success-text, #a5f3b9);
    border: 1px solid var(--success-border, #287a42);
    padding: 14px;
    border-radius: 7px;
}

.contact-error {
    background: var(--error-bg, #4b2020);
    color: var(--error-text, #ffb4b4);
    border: 1px solid var(--error-border, #9c3434);
    padding: 14px;
    border-radius: 7px;
}

@media (max-width: 600px) {
    .contact-container {
        margin: 20px auto;
        padding: 20px;
    }

    .contact-form button {
        width: 100%;
    }
}