/**
 * Datei: import.css
 * Pfad: /wp-content/plugins/mietp-core/inc/modules/import/css/import.css
 * Modul: Import (CSV)
 * Autor: MARKS MEDIA
 *
 * Zweck der Datei:
 * - Styles nur fuer das Import-UI (Import (CSV) White-Block).
 * - Report-Download: zwei Buttons nebeneinander (Excel + Text), mobil untereinander.
 * - Letzte Batch-Ergebnisse: kompakte Liste (nur Layout + dezente Token-Border).
 * - Standort-Auswahl: Checkbox-Liste (nur Import-UI Scope).
 * - Upload-Buttons: "CSV hochladen & pruefen" + "Kategorien-CSV" nebeneinander, mobil untereinander.
 * - Keine globalen mp-btn/mp-field Overrides.
 * - Token-basiert (light/dark): nutzt --bg-surface/--border-main/--brand-* etc.
 */

/* CSV-Datei: Abstand unter Datei-Auswahlfeld (nur Import-UI Scope) */
.mp-import-wrap input[type="file"][name="import_csv"]{
	margin-bottom:10px;
}

/* Upload Actions: zwei Buttons nebeneinander */
.mp-import-upload-actions{
	display:flex;
	gap:10px;
	align-items:center; /* keine Stretch-Breite */
}

/* Primary soll auto-breit sein */
.mp-import-upload-actions .mp-btn-primary{
	flex:0 0 auto;
	width:auto;
}

.mp-import-upload-actions .mp-btn-secondary{
	white-space:nowrap; /* Button soll nicht umbrechen */
}

/* Mobile: Upload Actions untereinander */
@media (max-width:520px){
	.mp-import-upload-actions{
		flex-direction:column;
		align-items:stretch;
	}

	.mp-import-upload-actions .mp-btn-primary,
	.mp-import-upload-actions .mp-btn-secondary{
		width:100%;
		text-align:center;
	}
}

/* Standort-Auswahl: Checkbox-Liste (nur Import-UI Scope) */
.mp-import-wrap .mp-checkbox-list{
	display:grid;
	gap:8px;
	margin-top:10px;
}

/* Label als klickbare Zeile */
.mp-import-wrap .mp-checkbox-list .mp-checkbox{
	display:flex;
	gap:10px;
	align-items:flex-start;
	padding:10px 12px;
	border-radius:var(--radius-md, 8px);
	border:1px solid color-mix(in srgb, var(--border-main) 70%, transparent);
	background:var(--bg-surface);
	cursor:pointer;
	user-select:none;
}

/* Checkbox selbst */
.mp-import-wrap .mp-checkbox-list .mp-checkbox input[type="checkbox"]{
	margin-top:2px;
	flex:0 0 auto;
}

/* Hover nur dezent (Tokens) */
@media (hover:hover){
	.mp-import-wrap .mp-checkbox-list .mp-checkbox:hover{
		border-color:color-mix(in srgb, var(--border-main) 85%, var(--brand-primary));
		background:color-mix(in srgb, var(--bg-surface) 92%, var(--brand-primary));
	}
}

/* Fokus sichtbar (wenn Input fokussiert ist) */
.mp-import-wrap .mp-checkbox-list .mp-checkbox input[type="checkbox"]:focus-visible{
	outline:2px solid color-mix(in srgb, var(--brand-primary) 55%, transparent);
	outline-offset:2px;
}

/* Report Buttons (Excel/Text) nebeneinander */
.mp-import-report-actions{
	display:flex;
	gap:10px;
}

.mp-import-report-actions .mp-btn-secondary{
	flex:1;
	width:auto;
}

/* Mobile: untereinander */
@media (max-width:520px){
	.mp-import-report-actions{
		flex-direction:column;
	}
}

/* Letzte Batch-Ergebnisse */
.js-mp-import-last{
	margin-top:10px;
	display:grid;
	gap:6px;
}

.mp-import-last-line{
	padding:8px 10px;
	border-radius:var(--radius-md, 8px);
	border:1px solid color-mix(in srgb, var(--border-main) 70%, transparent);
	background:var(--bg-surface);
	font-size:13px;
	color:var(--text-main);
}

/* leichte Status-Akzente (nur Border, keine harten Farben) */
.mp-import-last-line--imported,
.mp-import-last-line--updated{
	border-color:color-mix(in srgb, var(--brand-primary) 45%, var(--border-main));
}

.mp-import-last-line--failed{
	border-color:color-mix(in srgb, var(--brand-secondary) 45%, var(--border-main));
}