/**
 * Datei: dashboard.css
 * Pfad: /wp-content/plugins/mietp-core/inc/modules/profile/css
 * Modul: Profile / Dashboard
 * Autor: MARKS MEDIA
 *
 * Zweck:
 * - Dashboard-UI im Profilbereich (Stats-Kacheln, Schnellaktionen, Listen)
 * - Modulbezogen: nutzt Theme-Tokens fuer Farben, Shadows, Radien
 * - Fokus auf klare Struktur und BFSG/WCAG (sichtbarer Fokus, gute Lesbarkeit)
 *
 * Regeln:
 * - Keine festen Hex-Farben, Tokens nutzen
 * - Keine eigenen Button-Designs (Pills/Buttons kommen aus Theme)
 */

/* =========================================================
   DASHBOARD – STATS (KACHELN)
========================================================= */

.mp-dashboard-stats{
	display:grid;
	grid-template-columns:repeat(4, 1fr);
	gap:20px;
	margin-bottom:14px;
}

/* KPI-Kachel: niedriger und cleaner */
.mp-stat-box{
	background:var(--bg-main);
	border:1px solid color-mix(in srgb, var(--border-main) 70%, transparent);
	border-radius:var(--radius-lg);
	padding:12px 14px; /* niedriger */
	box-shadow:var(--shadow-xs);
}

.mp-stat-box.mp-stat-box-kpi{
	min-height:86px; /* niedriger, aber stabil */
}

.mp-stat-title{
	font-size:13px;
	color:var(--text-muted);
	margin-bottom:6px;
}

.mp-stat-value{
	font-size:22px;
	font-weight:650;
	color:var(--text-main);
	line-height:1.05;
}

.mp-stat-sub{
	font-size:12px;
	color:var(--text-muted);
	margin-top:4px;
}

/* kleine Meta-Zeile unter KPI-Value */
.mp-stat-meta{
	font-size:12px;
	color:var(--text-muted);
	margin-top:6px;
}

/* Wide Stats (volle Breite) */
.mp-dashboard-stats-wide{
	margin-bottom:20px;
}

.mp-stat-box.mp-stat-box-wide{
	padding:12px 14px;
}

.mp-stat-wide-grid{
	display:grid;
	grid-template-columns:repeat(4, 1fr);
	gap:0;
}

.mp-stat-wide-item{
	padding:10px 12px;
	min-width:0;
}

.mp-stat-wide-item + .mp-stat-wide-item{
	border-left:1px solid color-mix(in srgb, var(--border-main) 55%, transparent);
}

.mp-stat-wide-label{
	font-size:13px;
	color:var(--text-muted);
	margin-bottom:6px;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}

.mp-stat-wide-value{
	font-size:26px;
	font-weight:700;
	color:var(--text-main);
	line-height:1.05;
}

/* =========================================================
   DASHBOARD – SCHNELLAKTIONEN
========================================================= */

.mp-dashboard-actions{
	display:flex;
	gap:10px;
	flex-wrap:wrap;
	margin-bottom:20px;
}

/* =========================================================
   DASHBOARD – LISTEN (DESKTOP / BASIS)
========================================================= */

.mp-dashboard-list{
	list-style:none;
	padding:0;
	margin:0;
}

.mp-dashboard-list li{
	display:flex;
	justify-content:space-between;
	align-items:flex-start;
	gap:16px;

	padding:10px 0;
	border-bottom:1px solid color-mix(in srgb, var(--border-main) 55%, transparent);
}

.mp-dashboard-list li:last-child{
	border-bottom:none;
}

/* Linke Spalte – Titel (75 %) */
.mp-dashboard-list .mp-left{
	flex:0 0 75%;
	max-width:75%;
	font-weight:600;
	overflow:hidden;
	min-width:0; /* wichtig fuer clamping */
}

.mp-dashboard-list .mp-left a{
	display:-webkit-box;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical;

	overflow:hidden;
	text-overflow:ellipsis;
	white-space:normal;

	line-height:1.35;
	max-height:calc(1.35em * 2);
}

/* Rechte Spalte – Name / Badge / Zeit (25 %) */
.mp-dashboard-list .mp-right{
	flex:0 0 25%;
	max-width:25%;
	text-align:right;
	padding-right:15px; /* Abstand zum rechten Rand */

	font-size:13px;
	line-height:1.4;
	color:var(--text-main);
}

.mp-dashboard-list .mp-right a{
	display:block;
	font-weight:600;
	color:inherit;
	text-decoration:none;
}

.mp-dashboard-list .mp-right a:focus-visible,
.mp-dashboard-list .mp-left a:focus-visible{
	outline:2px solid color-mix(in srgb, var(--brand-primary) 55%, transparent);
	outline-offset:2px;
	border-radius:6px;
}

/* Zeit */
.mp-dashboard-list .mp-time{
	display:block;
	font-size:12px;
	color:var(--text-muted);
	margin-top:2px;
}

/* Gelesen: Titel normal */
.mp-dashboard-list li.is-read .mp-left a{
	font-weight:normal;
	color:var(--text-muted);
}

/* Ungelesen: Titel staerker */
.mp-dashboard-list li.is-unread .mp-left a{
	font-weight:700;
	color:var(--text-main);
}

/* Rechter Bereich NIE fett */
.mp-dashboard-list .mp-right,
.mp-dashboard-list .mp-right a{
	font-weight:normal;
}

/* ==========================================================
   Dashboard – Messages (Avatar links)
========================================================== */

.mp-dashboard-list .mp-left.mp-msg-user{
	display:flex;
	align-items:center; /* Avatar mittig zur Textzeile */
	gap:10px;
	min-width:0; /* wichtig fuer ellipsis */
}

/* Avatar-Container: immer zentriert (auch bei Initialen) */
.mp-dashboard-list .mp-msg-avatar{
	width:36px;
	height:36px;
	flex:0 0 36px;

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

	border-radius:999px;
	overflow:hidden;

	background:var(--bg-surface);
	border:1px solid color-mix(in srgb, var(--border-main) 55%, transparent);

	font-size:16px;
	line-height:1;
}

/* Bild im Avatar */
.mp-dashboard-list .mp-msg-avatar-img{
	width:100%;
	height:100%;
	display:block;
	object-fit:cover;
	border-radius:999px;
}

/* Fallback-Fläche (falls wir mal gar nichts haben) */
.mp-dashboard-list .mp-msg-avatar-placeholder{
	width:100%;
	height:100%;
	display:block;
	border-radius:999px;
	background:var(--bg-surface);
}

/* Avatar-Fallback (Initialen): gezielt auf typischen Initialen-Container */
.mp-dashboard-list .mp-msg-avatar span,
.mp-dashboard-list .mp-msg-avatar .mietp-avatar-initials,
.mp-dashboard-list .mp-msg-avatar .mp-avatar-initials{
	display:flex;
	align-items:center;
	justify-content:center;
	width:100%;
	height:100%;
	font-size:16px;
	line-height:1;
}

/* Messages-Link: 1 Zeile wie bei Top-Listen (kein 2-Zeilen Clamp) */
.mp-dashboard-list .mp-left.mp-msg-user a{
	display:block;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;

	/* überschreibt globalen 2-Zeilen Clamp */
	-webkit-line-clamp:unset;
	-webkit-box-orient:unset;
	max-height:none;
}

/* ==========================================================
   Dashboard – Listing mit Thumbnail
========================================================== */

.mp-dashboard-list .mp-left.mp-listing-with-thumb{
	display:flex;
	align-items:center;
	gap:10px;
	min-width:0; /* wichtig fuer sauberes Text-Clamping */
}

.mp-dashboard-list .mp-listing-thumb{
	width:40px;
	height:40px;
	flex:0 0 40px;
	object-fit:cover;

	border-radius:var(--btn-radius);
	background:var(--bg-surface);
	border:1px solid color-mix(in srgb, var(--border-main) 55%, transparent);
}

/* Fallback wenn kein Bild vorhanden */
.mp-dashboard-list .mp-thumb-empty{
	display:block;
	width:40px;
	height:40px;

	border-radius:var(--btn-radius);
	background:var(--bg-surface);
	border:1px solid color-mix(in srgb, var(--border-main) 55%, transparent);
}

/* Titel-Link neutral halten */
.mp-dashboard-list .mp-left a,
.mp-dashboard-list .mp-left a:hover{
	color:inherit;
	text-decoration:none;
}

/* =========================================================
   BADGE
========================================================= */

.mp-badge{
	display:inline-block;

	/* neutraler Badge ueber Tokens (ohne feste Farben) */
	background:color-mix(in srgb, var(--brand-accent) 18%, var(--bg-main));
	color:var(--text-main);

	font-size:11px;
	padding:2px 6px;
	border-radius:6px;
	margin-top:4px;

	border:1px solid color-mix(in srgb, var(--brand-accent) 28%, transparent);
}

/* =========================================================
   DASHBOARD – MOBILE
========================================================= */

@media (max-width:768px){

	/* KACHELN */
	.mp-dashboard-stats{
		grid-template-columns:1fr;
		gap:12px;
		margin-bottom:12px;
	}

	.mp-stat-box{
		padding:12px;
	}

	.mp-stat-box.mp-stat-box-kpi{
		min-height:auto;
	}

	.mp-stat-value{
		font-size:20px;
	}

	/* Wide Stats */
	.mp-stat-wide-grid{
		grid-template-columns:1fr 1fr;
	}

	.mp-stat-wide-item{
		padding:10px 10px;
	}

	.mp-stat-wide-item + .mp-stat-wide-item{
		border-left:none;
	}

	.mp-stat-wide-item:nth-child(2n){
		border-left:1px solid color-mix(in srgb, var(--border-main) 55%, transparent);
	}

	.mp-stat-wide-item:nth-child(n+3){
		border-top:1px solid color-mix(in srgb, var(--border-main) 55%, transparent);
	}

	/* SCHNELLAKTIONEN */
	.mp-dashboard-actions{
		flex-direction:column;
		gap:8px;
	}

	.mp-dashboard-actions .mp-pill{
		width:100%;
		text-align:center;
	}

	/* SPALTEN UNTEREINANDER */
	.mp-row > .mp-col-6{
		width:100%;
	}

	/* LISTEN */
	.mp-dashboard-list li{
		flex-direction:column;
		gap:4px;
	}

	.mp-dashboard-list .mp-left,
	.mp-dashboard-list .mp-right{
		max-width:100%;
		flex:0 0 100%;
		text-align:left;
		padding-right:0;
	}

	.mp-dashboard-list .mp-time{
		font-size:11px;
	}
}

/* =========================================================
   DASHBOARD – TABLET
========================================================= */

@media (min-width:769px) and (max-width:1024px){

	/* KACHELN */
	.mp-dashboard-stats{
		grid-template-columns:repeat(2, 1fr);
		gap:16px;
	}

	.mp-stat-value{
		font-size:21px;
	}

	/* Wide Stats */
	.mp-stat-wide-grid{
		grid-template-columns:repeat(2, 1fr);
	}

	.mp-stat-wide-item + .mp-stat-wide-item{
		border-left:none;
	}

	.mp-stat-wide-item:nth-child(2n){
		border-left:1px solid color-mix(in srgb, var(--border-main) 55%, transparent);
	}

	.mp-stat-wide-item:nth-child(n+3){
		border-top:1px solid color-mix(in srgb, var(--border-main) 55%, transparent);
	}

	/* SCHNELLAKTIONEN */
	.mp-dashboard-actions{
		gap:10px;
	}

	.mp-dashboard-actions .mp-pill{
		padding:10px 14px;
	}

	/* 2-SPALTIGES GRID */
	.mp-row > .mp-col-6{
		width:50%;
	}

	/* LISTEN */
	.mp-dashboard-list li{
		align-items:center;
	}
}