/**
 * The package question on My Jobs.
 *
 * Its own stylesheet because style.css in this theme is compiled webpack
 * output whose source we do not have - editing it means hand-editing a 61 KB
 * build artefact. Kept small and scoped to the dialog.
 */
.ngo-release-dialog {
	border: 0;
	border-radius: 14px;
	padding: 1.5rem;
	max-width: 27rem;
	width: calc(100% - 2rem);
	box-shadow: 0 10px 40px rgba(0, 0, 0, .18);
	color: inherit;
	font-size: .9375rem;
	line-height: 1.5;
}

.ngo-release-dialog::backdrop {
	background: rgba(0, 0, 0, .45);
}

/* Das Theme setzt h3 auf --font-size-xl. In einem Dialog von 27rem Breite ist
   das eine Plakatschrift: die Frage stand dreimal so gross da wie die Antwort
   darunter. */
.ngo-release-dialog h3 {
	margin: 0 0 .75rem;
	font-size: 1.25rem;
	line-height: 1.25;
	font-weight: 500;
}

.ngo-release-dialog p {
	margin: 0 0 1.25rem;
}

.ngo-release-dialog__options {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: .5rem;
}

.ngo-release-dialog__options label {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0 .75rem;
	align-items: baseline;
	padding: .75rem 1rem;
	border: 1px solid #e0e0e0;
	border-radius: 10px;
	cursor: pointer;
}

.ngo-release-dialog__options label:hover,
.ngo-release-dialog__options input:checked + .ngo-release-dialog__product {
	border-color: #bdbdbd;
}

.ngo-release-dialog__options input {
	grid-row: 1 / span 2;
	margin: 0;
}

.ngo-release-dialog__product {
	font-weight: 700;
}

.ngo-release-dialog__detail {
	grid-column: 2;
	font-size: .8125rem;
	opacity: .75;
}

.ngo-release-dialog__actions {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
}

/* Abbrechen ist der ruhige Weg aus dem Dialog und darf nicht aussehen wie
   die zweite Haelfte einer Entscheidung.
   Alle Zustaende einzeln, weil das Theme sie einzeln faerbt:
   button:not(:is(...)):focus faerbt (0,2,2) - und ein <dialog> gibt dem ersten
   fokussierbaren Element beim Oeffnen den Fokus, das ist genau dieser Button.
   Er stand deshalb rot hinterlegt da, sobald sich der Dialog oeffnete. */
.ngo-release-dialog .ngo-release-dialog__actions button.ngo-release-cancel,
.ngo-release-dialog .ngo-release-dialog__actions button.ngo-release-cancel:hover,
.ngo-release-dialog .ngo-release-dialog__actions button.ngo-release-cancel:focus,
.ngo-release-dialog .ngo-release-dialog__actions button.ngo-release-cancel:active {
	background: none;
	border: 0;
	border-radius: 0;
	padding: 0;
	font: inherit;
	color: inherit;
	text-decoration: underline;
	cursor: pointer;
}

/* Sichtbar bleiben muss der Fokus trotzdem - das Theme dreht ihn global ab
   (button:focus-visible{outline:none}), was fuer Tastaturbedienung nichts
   uebrig laesst. */
.ngo-release-dialog button.ngo-release-cancel:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* The release forms on the cards must not stretch like block buttons do. */
.ls-job-release {
	margin-left: auto;
}

.ls-job-release form,
form.ls-job-release {
	display: inline-block;
}


.ngo-release-dialog__buy {
	margin: 0 0 1.5rem;
	font-size: .875rem;
}

/* Entwuerfe, die einen Platz eines Pakets halten - auf Meine Job-Pakete.
   Kompakt gehalten: der Block sitzt mitten in einer Paketkarte und ist eine
   Nebeninformation, keine eigene Sektion. */
.ls-package-held {
	margin: .25rem 0 .5rem;
	font-size: .8125rem;
	line-height: 1.45;
}

.ls-package-held__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ls-package-held__list li {
	padding: .1rem 0 .25rem;
}

/* Titel in die eine Zeile, der Link in die naechste: nebeneinander sah der
   Link wie ein Teil des Titels aus, und die Zeile wurde auf schmalen Karten
   umgebrochen. */
.ls-package-held__job {
	display: block;
}

.ls-package-held__id {
	opacity: .7;
}

/* Das Theme malt JEDEN button als rote Pille:
   button:not(:is(.ls-icon-button,.ls-button-outlined,...)) - Spezifitaet
   (0,1,1). Eine einzelne Klasse verliert dagegen, deshalb steht hier der
   ganze Pfad: (0,3,2) gewinnt ohne !important. */
.ls-package-held ul.ls-package-held__list button.ls-package-held__link {
	display: inline-block;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	font: inherit;
	color: rgb(var(--color-primary));
	text-decoration: underline;
	cursor: pointer;
}

.ls-package-held ul.ls-package-held__list button.ls-package-held__link:hover {
	text-decoration: none;
}

/* Produktlabel auf der Jobkarte: Basic, Premium, Kombi, ... Es kommt aus der
   Bestellung (inc/job-duplicate.php, PRODUCT_LABELS) und fehlt bei Inseraten
   von vor dem Relaunch im November 2023 - deshalb muss die Zeile auch ohne
   das Label sauber aussehen. Bewusst neutral gehalten: die Karte hat mit dem
   gelben Rahmen fuer Top-Jobs schon eine farbige Auszeichnung. */
.ls-job-label {
	display: inline-block;
	margin-left: 0.5rem;
	padding: 0.05rem 0.5rem;
	border: 1px solid #c9c9c9;
	border-radius: 999px;
	font-size: 0.75rem;
	line-height: 1.5;
	white-space: nowrap;
	vertical-align: baseline;
}

/* Meine Job-Pakete.

   Der Hinweis ganz oben, wenn gerade kein Paket ein Inserat aufnehmen kann,
   und darunter die verbrauchten Pakete als eine eingeklappte Tabelle. Warum
   Tabelle und nicht Karte: ein verbrauchtes Paket ist ein Beleg, mit dem sich
   nichts mehr tun laesst, und es ist die Mehrheit - ein Arbeitgeber auf
   Staging haelt 77 Pakete, alle verbraucht. */
.ls-packages-empty {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem 1.25rem;
	border-radius: 15px;
	background: #fff;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
}

/* Die Abstaende der Paketliste. Zwei Klassen im Selektor, damit die Regeln
   gegen die Tailwind-Utilities am selben Element gewinnen, ohne von der
   Reihenfolge der Stylesheets abzuhaengen.

   ACHTUNG beim Nachrechnen: .ngo-notification - die Meldungen ueber der Liste -
   traegt margin: 2em auto, und diese Regel steht im Customizer-CSS in der
   DATENBANK (wp_posts, post_type custom_css), nicht in diesem Repo; siehe
   CLAUDE.md. gap-2.5 an der Liste wiederum gab es im kompilierten style.css
   gar nicht, die Karten hingen also an ihrem eigenen mb-8. Beides sind
   Abstaende, die man im Theme-Code vergeblich sucht. */
.ls-jobs-archive__grid.ls-packages-grid {
	gap: .75rem;
	margin: 1rem 0 0;
}


.ls-product-card.ls-product-card--package {
	padding: 1.25rem 1.5rem;
	margin-bottom: 0;
}

.ls-packages-buy {
	display: flex;
	justify-content: flex-end;
	margin-top: .75rem;
}

.ls-packages-empty__body {
	flex: 1 1 20rem;
}

/* Erst die Zahl, dann die Handlungsanweisung. Die Zahl ist immer 0 - der
   Block erscheint nur, wenn nichts belegbar ist - und sie ist das, was auf
   einer Seite namens "Meine Job-Pakete" zuerst beantwortet gehoert. */
.ls-packages-empty__count {
	margin: 0 0 .25rem;
	font-weight: 600;
	line-height: 1.2;
}

.ls-packages-empty__number {
	font-size: 1.75rem;
	margin-right: .3rem;
	vertical-align: -.1em;
}

.ls-packages-empty__text {
	margin: 0;
	opacity: .8;
}

.ls-packages-spent {
	margin: 1.5rem 0 2rem;
}

.ls-packages-spent__summary {
	cursor: pointer;
	padding: .5rem 0;
	font-weight: 500;
}

.ls-packages-spent__table {
	width: 100%;
	margin-top: .5rem;
	border-collapse: collapse;
	font-size: .875rem;
}

.ls-packages-spent__table th,
.ls-packages-spent__table td {
	text-align: left;
	padding: .5rem .75rem .5rem 0;
	border-bottom: 1px solid #e6e6e6;
	vertical-align: top;
}

.ls-packages-spent__table th {
	font-weight: 500;
	white-space: nowrap;
	border-bottom-width: 2px;
}

/* Unter 48rem wird aus jeder Zeile ein Block. Die Spaltenueberschrift kommt
   aus data-label am <td>, weil der <thead> dann nicht mehr danebensteht. */
@media (max-width: 48rem) {
	.ls-packages-spent__table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.ls-packages-spent__table tr {
		display: block;
		padding: .75rem 0;
		border-bottom: 1px solid #e6e6e6;
	}

	.ls-packages-spent__table td {
		display: flex;
		gap: .75rem;
		justify-content: space-between;
		padding: .15rem 0;
		border: 0;
	}

	.ls-packages-spent__table td[data-label]::before {
		content: attr(data-label);
		opacity: .7;
		flex: 0 0 auto;
	}
}

/* Hinweis auf der Entwurfskarte, wenn der Kunde gar kein Paket hat. Er steht
   nur in diesem einen Fall: sobald es Pakete gibt, stellt der Freigabe-Button
   die Frage selbst. Etwas abgesetzt, weil er eine Handlungsaufforderung ist
   und nicht Teil der Kopfzeile aus Job-ID und Bestellnummer. */
.ls-job-needs-package {
	display: inline-block;
	margin-top: 0.35rem;
	color: #6b6b6b;
}

/* Das Theme zeichnet auf JEDES li einen 8x2px-Balken in der Primaerfarbe
   (li:before in der kompilierten style.css, die wir nicht bearbeiten koennen).
   In unseren Listen ist das ein roter Strich vor jeder Zeile, wo keiner
   hingehoert: die Optionen im Freigabe-Dialog sind Radiobuttons, die
   Halteliste auf Meine Job-Pakete sind Zeilen mit Button. `list-style: none`
   hilft dagegen nicht - der Balken ist ein Pseudo-Element und keine
   Aufzaehlungsmarke. */
.ngo-release-dialog .ngo-release-dialog__options li::before,
.ls-package-held .ls-package-held__list li::before {
	/* !important, und das ist hier kein Faulheitszeichen: die Themeregel ist
	   .wp-block-uagb-container ul:not(.swiper-wrapper):not(.wp-block-latest-posts)
	   :not(.grid):not(.flex):not([class*=acf-]) li:before - Spezifitaet (0,6,2).
	   Beide Dashboard-Seiten stecken in so einem UAGB-Container, unsere Listen
	   erfuellen alle :not()-Bedingungen, und sieben Klassen aufzuschreiben, um
	   einen Strich wegzunehmen, waere schlechter lesbar als das hier. */
	content: none !important;
}


/* Paketkarte: Produktname und Bestellnummer in einer Zeile, und die Karte
   insgesamt enger. Sie trug drei Zeilen fuer drei kurze Angaben, dazwischen
   mehr Abstand als Inhalt. Gilt nur fuer gekaufte Pakete - die Preisseite
   rendert dieselbe Funktion ohne $package und bleibt unberuehrt. */
.ls-product-card__title {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .25rem .75rem;
	margin: 0 0 .35rem;
}

.ls-product-card__order {
	font-weight: 400;
	opacity: .7;
}

.ls-product-card--package p {
	margin-bottom: .2rem;
}


/* Seitennummerierung auf „Meine Jobs". Beide Listen bekommen eine, weil beide
   gross werden koennen - das Importkonto haelt 1.324 aktuelle und 3.556
   abgelaufene Inserate.

   Anker statt Buttons, und kein <ul>: ein <button> wird von style.css zur roten
   Pille (0,1,2) und faerbt sich schon bei :focus um (0,2,2), und jedes <li> im
   UAGB-Container traegt einen roten Strich (0,6,2). Mit <nav> + <a> ist von
   alledem nichts zu entkraeften. Siehe CLAUDE.md, „Eigenes CSS gegen style.css". */
.ngo-pager {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: .35rem;
	margin: 1.5rem 0 .5rem;
	font-size: .875rem;
}

.ngo-pager__page,
.ngo-pager__step {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	height: 2.25rem;
	padding: 0 .65rem;
	border: 1px solid rgb(var(--color-grey));
	border-radius: 999px;
	background: rgb(var(--color-white));
	color: inherit;
	text-decoration: none;
	transition: border-color .15s ease, background-color .15s ease;
}

a.ngo-pager__page:hover,
a.ngo-pager__step:hover,
a.ngo-pager__page:focus-visible,
a.ngo-pager__step:focus-visible {
	border-color: rgb(var(--color-primary));
	color: rgb(var(--color-primary));
	text-decoration: none;
}

/* style.css setzt button:focus-visible{outline:none} - hier ist der Fokus aber
   die einzige Rueckmeldung fuer alle, die mit der Tastatur blaettern. */
a.ngo-pager__page:focus-visible,
a.ngo-pager__step:focus-visible {
	outline: 2px solid rgb(var(--color-primary));
	outline-offset: 2px;
}

.ngo-pager__page--current {
	border-color: rgb(var(--color-primary));
	background: rgb(var(--color-primary));
	color: rgb(var(--color-white));
	font-weight: 500;
}

.ngo-pager__gap {
	padding: 0 .15rem;
	color: rgb(var(--color-grey-dark));
}

/* „21–40 von 134" neben der Ueberschrift. Steht nur da, wenn es mehr als eine
   Seite gibt - sonst beantwortet es eine Frage, die niemand hat. */
.ngo-section-count {
	display: block;
	margin-top: .15rem;
	font-size: .8125rem;
	color: rgb(var(--color-grey-darker));
}