/**
 * Datei: mylistings.css
 * Modul: Listings (Meine Einträge)
 * Autor: MARKS MEDIA
 *
 * Zweck:
 *   Neues kompaktes 4-Spalten-Layout für "Meine Einträge":
 *     1) Bild (120px)
 *     2) Info (Standort, Titel, Details)
 *     3) Kategorie (gekürzt)
 *     4) Preis
 *
 *   - Unter jeder Zeile: Action-Icons (eigene Zeile)
 *   - Mobile Breakpoints
 *   - Neues, engeres Layout wie mobile.de / kleinanzeigen.de
 */

/* ============================================================
   1. Grid-Definition: 4 Spalten
============================================================ */
:root {
	--mp-grid-columns: 100px 1fr 100px 100px;
}

/* Desktop */
.mp-listings-head {
	display: grid;
	grid-template-columns: var(--mp-grid-columns);
	gap: 10px;
	padding: 10px 15px;
	border-bottom: 1px solid var(--color-6);
	font-weight: 600;
	font-size: 14px;
	box-sizing: border-box;
}

.mp-listings-grid {
	display: flex;
	flex-direction: column;
}

/* ============================================================
   2. Einträge (Zeilen)
============================================================ */
.mp-listing-item {
	padding: 14px 15px 10px 15px;
	border-bottom: 1px solid var(--color-6);
	box-sizing: border-box;
	transition: background 0.15s;
}

.mp-listing-item:hover {
	background: #fafafa;
}

/* ============================================================
   Zeile 1: 4-Spalten-Grid
============================================================ */
.mp-listing-row {
	display: grid;
	grid-template-columns: var(--mp-grid-columns);
	gap: 10px;
	align-items: center;
}

/* ============================================================
   Spalte 1: Bild
============================================================ */
.col-thumb img {
	width: 100px;
	height: 80px;
	object-fit: cover;
	border-radius: 4px;
}

.mp-thumb-wrapper {
	position: relative;
	display: inline-block;
}

.mp-status-dot {
	position: absolute;
	top: 3px;
	right: 3px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: 2px solid var(--color-8);
	box-shadow: 0 0 2px rgba(0,0,0,0.4);
}

.mp-status-dot.online { background-color: #81d742; }
.mp-status-dot.offline { background-color: #dd3333; }

/* ============================================================
   Spalte 2: Standort / Titel / Details
============================================================ */
.col-info .mp-loc {
	font-size: 14px;
	font-weight: 500;
	margin-bottom: 3px;
	color: var(--color-4);
}

.col-info .mp-title {
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	color: var(--color-4);
}

.col-info .mp-title:hover {
	text-decoration: underline;
}

.col-info .mp-details {
	font-size: 12px;
	color: var(--color-5);
	margin-top: 3px;
}

/* ============================================================
   Spalte 3: Kategorie
============================================================ */
.col-category {
	font-size: 14px;
	color: var(--color-4);
}

/* ============================================================
   Spalte 4: Preis
============================================================ */
.col-price {
	text-align: right;
	font-size: 15px;
	font-weight: 600;
	color: var(--color-4);
}

.price-line {
	display: flex;
	align-items: baseline;
	justify-content: flex-end;
	gap: 3px;
}

.price-prefix {
	font-size: 12px;
	color: var(--color-5);
}

.price-value {
	font-size: 15px;
	font-weight: 600;
}

.price-suffix {
	font-size: 12px;
	color: var(--color-5);
}

/* ============================================================
   Zeile 2: Actions – Variante B (bündig unter Spalte 2)
============================================================ */
.mp-actions-row {
	display: grid;
	grid-template-columns: 110px 1fr; /* exakt Platzhalter + Bereich für Icons */
	align-items: center;
	margin-top: 8px;
}

.mp-actions-col1 {
	/* leerer Platzhalter → damit Icons exakt unter Spalte 2 stehen */
}

.mp-actions-col2 {
	display: flex;
	gap: 14px;
	align-items: center;
}

.mp-actions-col2 .mp-action i {
	font-size: 16px;
	cursor: pointer;
	color: var(--color-4);
	transition: color 0.2s;
}

.mp-actions-col2 .mp-action i:hover {
	color: var(--color-1);
}

/* ============================================================
   3. Mobile Breakpoints
============================================================ */
@media (max-width: 900px) {
	:root {
		--mp-grid-columns: 100px 1fr 130px 130px;
	}

	.col-price { text-align: left; }
}

@media (max-width: 768px) {

	.mp-listings-head { display: none; }

	.mp-listing-row {
		grid-template-columns: 100px 1fr;
	}

	.col-category,
	.col-price {
		margin-top: 8px;
	}

	.col-category {
		grid-column: 1 / 3;
	}

	.col-price {
		grid-column: 1 / 3;
		text-align: left;
	}

	.mp-actions-row {
		margin-top: 10px;
		grid-template-columns: 100px 1fr;
	}
}

/* ============================================================
   4. Leerer Zustand
============================================================ */
.mp-listing-empty {
	padding: 20px;
	text-align: center;
	font-style: italic;
}

/* ============================================================
   HEADER-BEREICH ALS 2-SPALTIGES LAYOUT
============================================================ */
.mp-listing-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	margin-bottom: 20px;
}

/* LINKE SPALTE */
.mp-listing-filter-left {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}

/* RECHTE SPALTE */
.mp-listing-filter-right {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}

/* SUCHFELD SCHMALER */
.mp-search-form .mp-search {
	width: 150px;
	max-width: 150px;
}

/* DROPDOWNS AUTOMATISCHE BREITE */
.mp-sort-form select {
	width: auto;
	min-width: max-content;
	padding-right: 24px;
}