#kdhub-app {
	max-width: 1000px;
	margin: 0 auto;
}

/* Kundrad överst: vem är inloggad, och vägen ut. Kunderna har ingen
 * adminlist, så det här är sajtens enda utloggning. */
.kdhub-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 16px;
	max-width: 1000px;
	margin: 0 auto 8px;
	padding: 10px 0;
	border-bottom: 1px solid #e2e5e9;
	font-size: 14px;
}

.kdhub-header-user {
	font-weight: 600;
}

.kdhub-header-links a {
	margin-left: 16px;
	text-decoration: none;
}

.kdhub-header-links a:hover,
.kdhub-header-links a:focus {
	text-decoration: underline;
}

/* De fyra riktiga shortcodesna injiceras direkt i det globala
 * $post->post_content-objektet (se KD_Hub_Frontend::inject_hidden_
 * shortcodes, körs på wp_enqueue_scripts prioritet 1) – deras enda
 * syfte är att trigga has_shortcode()-kontrollerna i Ritverktyget och
 * Årsprov så deras tunga bibliotek laddas in. Innehållet ska ALDRIG
 * synas – den riktiga panelvisningen sker via AJAX-hämtat innehåll i
 * #kdhub-panel-content istället. display:none räcker (till skillnad
 * från t.ex. de flytbara panelfönstrens [hidden]-fälla) eftersom
 * ingenting annat i CSS sätter display på den här klassen. */
.kdhub-hidden-shortcodes {
	display: none;
}

.kdhub-icons {
	display: flex;
	flex-direction: column;
	gap: 28px;
	padding: 20px 0;
}

.kdhub-icons[hidden] {
	display: none;
}

.kdhub-category-label {
	margin: 0 0 12px;
	font-size: 15px;
	font-weight: 600;
	color: #646970;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.kdhub-category-icons {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 20px;
}

.kdhub-icon-btn {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 28px 16px;
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: 10px;
	cursor: pointer;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
	transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.kdhub-icon-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	border-color: #2271b1;
}

.kdhub-icon-btn-locked {
	opacity: 0.6;
}

.kdhub-icon-btn-locked:hover {
	border-color: #dcdcde;
	transform: none;
}

.kdhub-icon-emoji {
	font-size: 40px;
	line-height: 1;
}

.kdhub-icon-label {
	font-size: 14px;
	font-weight: 600;
	color: #1d2327;
	text-align: center;
}

.kdhub-icon-lock {
	position: absolute;
	top: 10px;
	right: 12px;
	font-size: 14px;
}

.kdhub-panel {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* display: flex ovan vinner annars över webbläsarens inbyggda
 * [hidden] { display: none } – samma fälla som tidigare upptäcktes för
 * .rit-modal-overlay/.rit-floating-panel i ritverktygsmodulen. Måste
 * vara explicit och komma EFTER basregeln för att vinna specificitets-
 * kampen korrekt. */
.kdhub-panel[hidden] {
	display: none;
}

.kdhub-back-btn {
	align-self: flex-start;
	padding: 8px 16px;
	background: #f0f0f1;
	border: 1px solid #c3c4c7;
	border-radius: 4px;
	cursor: pointer;
	font-size: 14px;
}

.kdhub-back-btn:hover {
	background: #dcdcde;
}

.kdhub-panel-content {
	min-height: 200px;
}

.kdhub-loading {
	padding: 40px;
	text-align: center;
	color: #646970;
}

/* Förklaring på låsta verktyg.
 *
 * Egen tooltip i stället för webbläsarens title: den senare dröjer
 * ungefär en sekund och går inte att formge, så den som sveper förbi
 * hinner aldrig se den. title finns kvar i markupen som reserv för
 * skärmläsare. */
.kdhub-icon-btn-locked {
	position: relative;
}

.kdhub-icon-tip {
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%);
	z-index: 20;
	width: max-content;
	max-width: 260px;
	padding: 8px 11px;
	background: #12181F;
	color: #fff;
	border-radius: 6px;
	font-size: 12px;
	line-height: 1.45;
	text-align: left;
	white-space: normal;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.12s ease;
	pointer-events: none;
}

/* Liten pil mot rutan, så det syns vilket verktyg texten gäller när
 * flera ligger tätt bredvid varandra. */
.kdhub-icon-tip::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 5px solid transparent;
	border-top-color: #12181F;
}

.kdhub-icon-btn-locked:hover .kdhub-icon-tip,
.kdhub-icon-btn-locked:focus-visible .kdhub-icon-tip {
	opacity: 1;
	visibility: visible;
}

/* På smala skärmar hamnade tipset utanför skärmkanten för knappar till
 * höger i raden – texten klipptes av och blev oläslig. Att ankra mot
 * knappens HÖGERkant i stället för att centrera håller den innanför,
 * oavsett var i raden knappen står.
 *
 * Bredden begränsas till 78vw så att även ett tips på den bredaste
 * knappen får plats med marginal. */
@media (max-width: 700px) {
	/* position: fixed i stället för absolute.
	 *
	 * Med absolute positioneras tipset mot KNAPPEN, och en knapp som
	 * står långt till höger skjuter ut tipset utanför skärmen hur
	 * smalt det än görs. Fixed positionerar mot fönstret i stället, så
	 * tipset alltid får plats – priset är att pilen inte längre pekar
	 * på knappen, vilket är ett litet pris på en skärm där ändå bara
	 * ett par knappar syns åt gången. */
	.kdhub-icon-tip {
		position: fixed;
		left: 12px;
		right: 12px;
		bottom: 16px;
		top: auto;
		transform: none;
		max-width: none;
		width: auto;
		text-align: center;
	}
	.kdhub-icon-tip::after {
		display: none;
	}
}

/* HJÄLP & TJÄNSTER.
 *
 * Samma kort oavsett om kunden har tjänsten – skillnaden är knappen.
 * Att dölja beskrivningen för den som saknar tjänsten vore att göra
 * hjälpen sämre utan att sälja mer. */
.kdhub-help { max-width: 820px; }

.kdhub-help-intro {
	margin: -6px 0 20px;
	color: #646970;
}

.kdhub-help-heading {
	margin: 26px 0 10px;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #646970;
}

.kdhub-help-sub {
	margin-left: 8px;
	text-transform: none;
	letter-spacing: 0;
	font-weight: 400;
	font-size: 12px;
}

.kdhub-help-card {
	margin-bottom: 10px;
	border: 1px solid rgba(18, 24, 31, 0.12);
	border-radius: 8px;
	background: #fff;
	overflow: hidden;
}

.kdhub-help-card.is-locked {
	background: #fafbfc;
}

.kdhub-help-card summary {
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
	padding: 14px 16px;
	cursor: pointer;
}

.kdhub-help-icon { font-size: 18px; }

.kdhub-help-title {
	font-weight: 700;
	font-size: 15px;
}

.kdhub-help-kort {
	flex: 1 1 240px;
	color: #646970;
	font-size: 13px;
	line-height: 1.4;
}

.kdhub-help-body {
	padding: 0 16px 16px 44px;
	font-size: 13px;
	line-height: 1.55;
}

.kdhub-help-body ul {
	margin: 0 0 12px;
	padding-left: 18px;
}

.kdhub-help-body li { margin-bottom: 4px; }

/* Det som inte är uppenbart och annars upptäcks för sent. */
.kdhub-help-tips {
	margin: 0 0 12px;
	padding: 9px 12px;
	background: #f2f7ff;
	border-left: 3px solid #1544c4;
	border-radius: 0 4px 4px 0;
}

.kdhub-help-btn {
	display: inline-block;
	padding: 7px 15px;
	border: 1px solid #c3c4c7;
	border-radius: 4px;
	background: #fff;
	color: #12181F;
	text-decoration: none;
	font-size: 13px;
}

.kdhub-help-btn--primary {
	background: #1544c4;
	border-color: #1544c4;
	color: #fff;
}

.kdhub-help-contact {
	margin-top: 28px;
	padding: 16px 18px;
	background: #f6f7f7;
	border-radius: 8px;
}

.kdhub-help-contact h3 { margin: 0 0 6px; font-size: 15px; }
.kdhub-help-contact p { margin: 0; font-size: 13px; }

/* Låst knapp i hjälpen.
 *
 * Samma dämpning som hubbens låsta ikoner, så det låsta läget ser
 * likadant ut överallt. Visas i stället för att döljas: en försvunnen
 * knapp säger ingenting om varför verktyget inte går att öppna. */
.kdhub-help-btn.is-disabled {
	opacity: 0.55;
	cursor: not-allowed;
	background: #f0f0f1;
	color: #646970;
	user-select: none;
}

/* Kontaktformulärets stilar ligger i contact.css – den laddas av
 * kortkoden själv, eftersom formuläret oftast står på en annan sida
 * än hubben och den här filen bara laddas där. */

/* Supportläge: banner för både kund och administratör. */
.kdhub-support-banner {
	padding: 10px 14px;
	margin: 0 0 16px;
	border-radius: 6px;
	font-size: 14px;
}
.kdhub-support-banner--admin { background: #fff4e5; border: 1px solid #f0b849; }
.kdhub-support-banner--customer { background: #eef6ff; border: 1px solid #a7c7e7; }
.kdhub-linkbutton {
	background: none; border: 0; padding: 0;
	color: inherit; text-decoration: underline; cursor: pointer; font: inherit;
}

/* Bilder i hjälpen: full bredd med ram, som i ritverktygets handbok. */
.kdhub-help-img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 14px 0 18px;
	border: 1px solid #dcdcde;
	border-radius: 6px;
}
.kdhub-help-support { margin-bottom: 28px; }

/* "Behöver du hjälp?" – knappen i hubben. */
.kdhub-support-cta {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	margin: 24px 0 8px;
	padding: 14px 18px;
	background: #f6f9fc;
	border: 1px solid #dbe4ec;
	border-radius: 8px;
}
.kdhub-support-cta-text { flex: 1 1 320px; display: flex; flex-direction: column; gap: 3px; }
.kdhub-support-cta-text span { color: #50575e; font-size: 14px; }
.kdhub-support-cta-btn {
	flex: 0 0 auto;
	display: inline-block;
	padding: 9px 20px;
	background: #2271b1;
	color: #fff;
	border-radius: 5px;
	text-decoration: none;
	font-weight: 600;
}
.kdhub-support-cta-btn:hover { background: #135e96; color: #fff; }
.kdhub-support-price {
	margin: 16px 0;
	padding: 12px 16px;
	background: #fff8e5;
	border: 1px solid #f0c36d;
	border-radius: 6px;
}
.kdhub-support-price p { margin: 0 0 8px; }