/*
Theme Name:        DSOnet
Theme URI:         https://dsonet.dk
Description:       DSOnet – hurtigt overblik over netstationer (DSO) på Google Maps: Garmin-kort, quick-kort, egne kort med status/noter samt import af stations-POI. Version 4 tilføjer lyn-ikoner i valgfri farve, eksport (GPX, KML, Excel), en ændringslog og klynger pr. status. Version 4.1 tilføjer databaseinstallation, CSV-import og en ny velkomstside. Version 4.2 tilføjer CSV pr. tabel, backup/gendannelse og et kabellag (10, 15 og 60 kV) fra Konstants offentlige FriData. Version 4.3 tilføjer et estimat af Google API-forbruget med advarsel, før den gratis kvote er brugt.
Author:            LisbySoft
Author URI:        https://lisbysoft.dk
Version:           4.6.0
Requires at least: 6.2
Tested up to:      6.8
Requires PHP:      8.0
License:           Proprietary
Text Domain:       dsonet
Domain Path:       /languages
Tags:              DSOnet, Bootstrap, Google Maps
Copyright (C) 2020-2026 LisbySoft
*/

/* ---------------------------------------------------------------
   Grundlæggende layout
   --------------------------------------------------------------- */
:root {
	--dsonet-nav-h: 60px;
	--dsonet-nav-bg-start: #498d9a;
	--dsonet-nav-bg-end: #022332;
}

html,
body {
	min-height: 100%;
}

body {
	padding-top: calc(var(--dsonet-nav-h) + 10px);
	min-width: 240px;
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 1.5;
	background: #8080804f;
}

body.dsonet-logged-out {
	padding-top: 10px;
}

.dsonet-container {
	max-width: 1250px;
	margin: 0 auto;
}

/* Skjult debug-indhold (fra v2) */
.debug {
	display: none;
}

/* Spring-til-indhold link (tilgængelighed) */
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 2000;
	padding: 8px 12px;
	background: #fff;
	color: #000;
}

.skip-link:focus {
	left: 8px;
	top: 8px;
}

/* ---------------------------------------------------------------
   Navigation
   --------------------------------------------------------------- */
.bg-Nav {
	font-size: 18px;
	background: var(--dsonet-nav-bg-start);
	background: linear-gradient(90deg, var(--dsonet-nav-bg-start), var(--dsonet-nav-bg-end));
	min-height: var(--dsonet-nav-h);
}

.bg-Nav .nav-item {
	padding-right: 10px;
}

.bg-Nav .nav-link svg,
.btn svg {
	vertical-align: -5px;
}

/* ---------------------------------------------------------------
   Kort (Google Maps)
   --------------------------------------------------------------- */
body.dsonet-map-page {
	padding-top: 0;
	overflow: hidden;
}

/* Wrapperen er fast placeret; Google Maps sætter selv position: relative på #map. */
.dsonet-map-wrap {
	position: fixed;
	top: var(--dsonet-nav-h);
	right: 0;
	bottom: 0;
	left: 0;
}

.dsonet-map {
	position: relative;
	z-index: 0; /* Egen stacking context, så markørernes z-index ikke dækker knapperne over kortet. */
	width: 100%;
	height: 100%;
	background: #e5e3df;
}

.dsonet-map-error {
	padding: 2rem;
	font-size: 16px;
}

.dsonet-info {
	min-width: 220px;
	max-width: 320px;
}

.dsonet-info h5 {
	margin: 0 0 .5rem;
	font-size: 1.1rem;
}

.dsonet-info .dsonet-info-body {
	white-space: pre-line;
	margin-bottom: .5rem;
}

.dsonet-info .dsonet-info-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

/* v4.6.0: "Åbn i Konstant WebGIS" – fuld bredde under knapperne. */
.dsonet-info .dsonet-info-webgis {
	margin-top: 8px;
}

.dsonet-info .dsonet-webgis-btn {
	font-weight: 600;
	white-space: normal;
}

.dsonet-info .btn img,
.dsonet-icon-btn img {
	height: 30px;
	width: auto;
}

/* Lyn-markør: én <img> pr. markør (lynet rasteriseret til PNG én gang pr.
   farve/størrelse i dsonet-map.js – se inc/icons.php for SVG'en).
   v4.0.1: ingen CSS-filtre/skygger og ingen inline SVG på markører. De skal
   tegnes om for hver markør ved zoom/panorering og gjorde v4.0.0 langsom. */
.dsonet-marker {
	display: block;
	cursor: pointer;
	user-select: none;
	-webkit-user-drag: none;
}

/* Inline lyn-ikon i formularer/tabeller. */
.dsonet-lightning {
	vertical-align: middle;
}

/* Klynge-markør (AdvancedMarkerElement): lyn i typens farve + antal.
   Centreret på positionen. Klynger indeholder kun én status/type. */
.dsonet-cluster {
	position: relative;
	box-sizing: border-box;
	line-height: 0;
	background: no-repeat center / 100% 100%;
	transform: translateY(50%);
	cursor: pointer;
}

.dsonet-cluster::after {
	content: attr(data-count);
	position: absolute;
	top: -8px;
	right: -12px;
	min-width: 22px;
	padding: 4px 5px;
	border: 2px solid #fff;
	border-radius: 11px;
	background: #1f2d3d;
	color: #fff;
	font: bold 12px/1 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	text-align: center;
}

.dsonet-map-tools {
	position: absolute;
	z-index: 5;
	top: 10px;
	left: 10px;
	display: flex;
	flex-wrap: wrap;
	max-width: calc(100% - 20px);
	border-radius: 4px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
}

.dsonet-map-tools .btn {
	background: #fff;
	color: #1f2d3d;
	font-weight: 600;
}

.dsonet-map-tools .btn:hover,
.dsonet-map-tools .btn:focus {
	background: #e9ecef;
	color: #000;
}

.dsonet-3d-overlay {
	position: fixed;
	inset: var(--dsonet-nav-h) 0 0 0;
	z-index: 1500;
	background: #000;
}

.dsonet-3d-overlay gmp-map-3d {
	width: 100%;
	height: 100%;
}

.dsonet-3d-overlay .dsonet-3d-close {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 2;
}

.copyright-hidden .copyright {
	display: none;
}

/* ---------------------------------------------------------------
   Statusfarver/labels (fra v2)
   --------------------------------------------------------------- */
.lbl {
	width: 75px;
	text-align: center;
	color: snow;
	background-color: gray;
}

.lbl-danger { background-color: red; }
.lbl-success { background-color: rgba(92, 183, 92, 1); }
.lbl-warning { background-color: orange; }
.lbl-info { background-color: rgba(49, 175, 212, 1); }

.dsonet-status-icon {
	height: 30px;
	width: auto;
}

.table-hover tr:hover td,
.table-hover tr:hover th {
	color: red;
}

.dsonet-deleted {
	color: red;
}

/* ---------------------------------------------------------------
   Notifikationer (nederst til højre)
   --------------------------------------------------------------- */
.notification-Bottom {
	position: fixed;
	bottom: 25px;
	right: 25px;
	z-index: 1600;
	max-width: calc(100vw - 50px);
}

.notification-Top {
	position: fixed;
	top: 25px;
	right: 25px;
	z-index: 1600;
}

.notification-Bottom .alert {
	width: 400px;
	max-width: 100%;
}

/* ---------------------------------------------------------------
   Copyright
   --------------------------------------------------------------- */
.copyright,
.copyright a {
	text-align: center;
	text-decoration: none;
	color: rgba(80, 90, 100, .7);
}

.copyright a:hover,
.copyright a:focus {
	color: rgba(201, 49, 44, .93);
	transition: color 1s ease-in-out;
}

/* ---------------------------------------------------------------
   Velkomstside
   --------------------------------------------------------------- */
/* v4.1.0: ny velkomst-/loginside (template-parts/welcome.php). To kolonner
   på store skærme (budskab til venstre, login til højre), stablet på mobil.
   Farverne er menulinjens gradient og det gule lyn. */
body.dsonet-welcome {
	padding-top: 0;
	background: #f3f6f8;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	color: #1f2d3d;
}

.dsonet-welcome-main {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	min-height: calc(100vh - 44px);
}

.dsonet-welcome-hero {
	display: flex;
	align-items: center;
	padding: 56px 6vw;
	color: #fff;
	background: var(--dsonet-nav-bg-end);
	background:
		radial-gradient(circle at 85% 15%, rgba(255, 204, 8, .16), transparent 42%),
		linear-gradient(135deg, var(--dsonet-nav-bg-end) 0%, #0b3b4d 55%, var(--dsonet-nav-bg-start) 100%);
}

.dsonet-welcome-hero-inner {
	max-width: 560px;
}

.dsonet-welcome-brand {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 28px;
}

.dsonet-welcome-bolt {
	width: 64px;
	height: auto;
	filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .35));
}

.dsonet-welcome-name {
	font-size: 34px;
	font-weight: 700;
	letter-spacing: .5px;
}

.dsonet-welcome-title {
	margin: 0 0 16px;
	font-size: clamp(28px, 3.4vw, 44px);
	font-weight: 700;
	line-height: 1.15;
}

.dsonet-welcome-lead {
	margin: 0 0 28px;
	font-size: 18px;
	line-height: 1.6;
	color: rgba(255, 255, 255, .86);
}

.dsonet-welcome-features {
	margin: 0;
	padding: 0;
	list-style: none;
}

.dsonet-welcome-features li {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
	font-size: 16px;
	color: rgba(255, 255, 255, .92);
}

.dsonet-welcome-features svg {
	flex: 0 0 auto;
}

.dsonet-welcome-login {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 48px 24px;
}

.dsonet-welcome-card {
	width: 100%;
	max-width: 400px;
	padding: 36px 32px 28px;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 18px 50px rgba(2, 35, 50, .14), 0 2px 6px rgba(2, 35, 50, .06);
}

.dsonet-welcome-card-title {
	margin: 0 0 6px;
	font-size: 26px;
	font-weight: 700;
}

.dsonet-welcome-card-text {
	margin: 0 0 22px;
	color: #5b6b7a;
}

.dsonet-welcome-error {
	margin: 0 0 16px;
	padding: 10px 12px;
	border-left: 4px solid #c9312c;
	border-radius: 6px;
	background: #fdecea;
	color: #8a1f1b;
}

#dsonet-loginform p {
	margin: 0 0 16px;
}

#dsonet-loginform label {
	display: block;
	margin-bottom: 6px;
	font-weight: 600;
	font-size: 14px;
}

#dsonet-loginform input[type="text"],
#dsonet-loginform input[type="password"] {
	box-sizing: border-box;
	width: 100%;
	padding: 11px 12px;
	border: 1px solid #c8d2da;
	border-radius: 8px;
	font-size: 16px; /* 16px undgår auto-zoom på iPhone. */
	background: #fbfcfd;
	transition: border-color .15s, box-shadow .15s;
}

#dsonet-loginform input[type="text"]:focus,
#dsonet-loginform input[type="password"]:focus {
	outline: none;
	border-color: var(--dsonet-nav-bg-start);
	box-shadow: 0 0 0 3px rgba(73, 141, 154, .25);
	background: #fff;
}

#dsonet-loginform .login-remember label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 400;
}

#dsonet-loginform .login-submit {
	margin-bottom: 8px;
}

#dsonet-loginform input[type="submit"] {
	width: 100%;
	padding: 12px;
	border: 0;
	border-radius: 8px;
	font-size: 16px;
	font-weight: 700;
	color: #fff;
	background: linear-gradient(90deg, var(--dsonet-nav-bg-start), var(--dsonet-nav-bg-end));
	cursor: pointer;
	transition: filter .15s, transform .05s;
}

#dsonet-loginform input[type="submit"]:hover,
#dsonet-loginform input[type="submit"]:focus {
	filter: brightness(1.12);
}

#dsonet-loginform input[type="submit"]:active {
	transform: translateY(1px);
}

.dsonet-welcome-lost {
	margin: 4px 0 0;
	text-align: center;
	font-size: 14px;
}

body.dsonet-welcome .dsonet-welcome-lost a {
	color: #2f6f7b;
}

body.dsonet-welcome .copyright {
	padding: 12px 8px;
	margin: 0;
	font-size: 13px;
}

body.dsonet-welcome .copyright p {
	margin: 0;
}

@media (max-width: 860px) {
	.dsonet-welcome-main {
		grid-template-columns: 1fr;
		min-height: 0;
	}

	.dsonet-welcome-hero {
		padding: 32px 22px 28px;
	}

	.dsonet-welcome-brand {
		margin-bottom: 18px;
	}

	.dsonet-welcome-bolt {
		width: 48px;
	}

	.dsonet-welcome-name {
		font-size: 28px;
	}

	.dsonet-welcome-lead {
		font-size: 16px;
		margin-bottom: 18px;
	}

	.dsonet-welcome-features li {
		font-size: 15px;
		margin-bottom: 8px;
	}

	.dsonet-welcome-login {
		padding: 0 16px 28px;
	}

	.dsonet-welcome-card {
		margin-top: -14px; /* Kortet overlapper heroen en smule. */
		padding: 26px 20px 20px;
	}
}

/* ---------------------------------------------------------------
   Responsivt (fra v2)
   --------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1100px) {
	.stor,
	.list_update,
	.list_buttom_log,
	.list_buttom_update {
		display: none;
	}
}

@media (max-width: 767px) {
	/* Kortet på en telefon: søgefeltet og menuen må ikke skubbe siden i bredden. */
	.navbar .form-inline {
		flex-wrap: wrap;
		width: 100%;
	}

	.navbar .form-inline .form-control {
		width: 100%;
		margin-right: 0;
		margin-bottom: .5rem;
	}

	.navbar-collapse {
		max-height: calc(100vh - var(--dsonet-nav-h) - 8px);
		overflow-y: auto;
		background: var(--dsonet-nav-bg-end);
		padding: .25rem .5rem .75rem;
	}

	.dsonet-info {
		min-width: 0;
		max-width: calc(100vw - 80px);
	}

	.dsonet-map-tools {
		top: 10px;
		left: 8px;
		right: 60px; /* Plads til Googles fuldskærmsknap øverst til højre. */
		max-width: none;
	}

	.dsonet-map-tools .btn {
		flex: 1 1 auto;
		padding-left: .4rem;
		padding-right: .4rem;
	}

	/* Stationslisten (rediger kort): knapperne må ikke tvinge siden bredere end skærmen. */
	.dsonet-icon-btn {
		padding: .15rem .3rem;
		margin-bottom: .25rem;
	}

	.table .h3 {
		font-size: 1.15rem;
	}

	/* Handlingsknapperne i stationslisten må bryde over flere linjer. */
	#table1 td.text-nowrap {
		white-space: normal;
		min-width: 92px;
	}

	#table1 th,
	#table1 td {
		padding: .5rem .35rem;
	}

	#table1 th[style] {
		width: auto !important;
	}

	.mellem,
	.kundeinputtext,
	.list_update,
	.list_aften,
	.list_nat,
	.list_buttom_log,
	.list_buttom_update {
		display: none;
	}

	.notification-Bottom {
		right: 10px;
		bottom: 10px;
	}
}

@media (max-width: 480px) {
	.lille,
	.list_buttom {
		display: none;
	}
}

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

/* WordPress' adminbjælke (administratorer) – skub menu og kort ned. */
body.admin-bar .navbar.fixed-top {
	top: 32px;
}

body.admin-bar .dsonet-map-wrap,
body.admin-bar .dsonet-3d-overlay {
	top: calc(var(--dsonet-nav-h) + 32px);
}

@media screen and (max-width: 782px) {
	body.admin-bar .navbar.fixed-top {
		top: 46px;
	}

	body.admin-bar .dsonet-map-wrap,
	body.admin-bar .dsonet-3d-overlay {
		top: calc(var(--dsonet-nav-h) + 46px);
	}
}

/* ---------------------------------------------------------------
   v4.2.0: kabellag (Konstant FriData) – knap og panel på kortet
   --------------------------------------------------------------- */
/* v4.5.0: kabellaget styres fra topmenuen (kun administratorer). */
.dso-cables-icon{display:inline-block;width:16px;height:4px;margin:0 6px 4px 2px;vertical-align:middle;border-radius:2px;background:linear-gradient(90deg,#e10600 0 33%,#8b0000 33% 66%,#7b2cbf 66%)}
.dso-cables-nav.is-on>.nav-link{color:#fff}
.dso-cables-nav.is-on>.nav-link::after{border-top-color:#f58b64}
.dso-cables-menu{min-width:240px;padding:10px 14px}
.dso-cables-master{margin-bottom:8px;font-weight:600}
.dso-cables-subs{border-top:1px solid #e9ecef;padding-top:6px}
.dso-cables-subs.is-off{opacity:.5}
.dso-cables-row{display:flex;align-items:center;gap:8px;margin:6px 0;min-height:30px;cursor:pointer;font-weight:400}
.dso-cables-row input{width:18px;height:18px}
.dso-cables-swatch{display:inline-block;width:22px;height:5px;border-radius:3px}
.dso-cables-note{font-size:12px;color:#6c757d;margin-top:4px}
.dso-cables-close{width:100%}
@media (max-width:767.98px){.dso-cables-menu{background:#fff;border-radius:6px;margin-bottom:8px}}
.dso-cables-attrib{background:rgba(255,255,255,.8);font-size:11px;padding:1px 6px;margin-bottom:2px;color:#333}
@media (max-width:600px){.dso-cables-attrib{margin-bottom:18px;font-size:10px}}