*{box-sizing:border-box}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;margin:0;background:#f6f7fb;color:#222}
.navbar{display:flex;gap:1rem;align-items:center;padding:12px 16px;background:#1f2937;color:#fff;position:-webkit-sticky;position:sticky;top:0;z-index:100;box-shadow:0 2px 6px rgba(15,23,42,0.15)}
.navbar a{color:#fff;text-decoration:none}
.container{max-width:1000px;margin:24px auto;padding:0 16px}
.container.wide{max-width:100%}
.card{background:#fff;border:1px solid #e5e7eb;border-radius:8px;padding:16px;margin-bottom:16px;overflow-x:auto}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:5px;border-bottom:1px solid #e5e7eb;text-align:left;white-space:nowrap;font-size:12px;line-height:1.2}
/* Zebra-Streifen und Hover für bessere Lesbarkeit */
.table tbody tr:nth-child(odd){background:#e5e7eb}
/* helle Zeile leicht eingetönt, um sich vom weißen Kartenhintergrund abzuheben */
.table tbody tr:nth-child(even){background:#f3f4f6}
.table tbody tr:hover{background:#eef2ff}
/* Frische Import-Log-Zeilen (innerhalb X Minuten) */
.fresh-row{background:#dcfce7 !important}
.fresh-row:hover{background:#bbf7d0 !important}
input,select,button{padding:8px 10px;border:1px solid #d1d5db;border-radius:6px}
button{background:#2563eb;color:#fff;border:none;cursor:pointer}
button.link{background:transparent;color:#2563eb;border:none;cursor:pointer;padding:0}
/* Buttons Varianten */
button.danger{background:#dc2626;color:#fff}
button.danger:hover{background:#b91c1c}
button.secondary{background:#6b7280;color:#fff}
button.secondary:hover{background:#4b5563}
.alert{padding:10px 12px;border-radius:6px;margin:8px 0}
.alert-success{background:#d1fae5;color:#065f46}
.alert-danger{background:#fee2e2;color:#991b1b}
.actions{display:flex;gap:8px;align-items:center}

/* Kompaktere Tabellen-Aktionen: Buttons in Tabellen etwas kleiner halten */
.table .actions button{padding:5px 8px;font-size:12px}

/* Card header layout (zentral gesteuert) */
.card-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.card-header h2{margin:0}
/* Card header left block for stacked title + subtitle */
.card-header-left{display:flex;flex-direction:column;gap:2px}
.card-subtitle{font-size:12px;color:#6b7280;font-weight:400;margin:0}
/* kleiner Helfer für abweichenden Abstand */
.mb-10{margin-bottom:10px}

/* Form helpers */
.form{display:block}
.form-row{display:flex;gap:12px;align-items:center;margin:8px 0}
.form-row>label{min-width:180px;font-weight:600;color:#374151}
.form-row>input,.form-row>select{flex:1}

/* Tabs */
.tabs{margin-bottom:16px}
.tab-nav{display:flex;gap:8px;border-bottom:1px solid #e5e7eb;margin-bottom:12px;flex-wrap:wrap;position:sticky;top:0;background:#fff;z-index:200;padding:8px 0;box-shadow:0 2px 6px rgba(15,23,42,0.04)}
.tab-nav button{background:#f3f4f6;color:#111827;border:1px solid #e5e7eb;border-bottom:none;border-top-left-radius:6px;border-top-right-radius:6px;padding:8px 12px;cursor:pointer}
.tab-nav button.active{background:#ffffff;color:#111827;border-color:#d1d5db;border-bottom:1px solid #ffffff}
.tab-panel{display:none}
.tab-panel.active{display:block}

/* Simple modal */
.tab-nav.sticky{ /* Sticky Tab-Navigation: bleibt am oberen Rand sichtbar beim Scrollen */
	position:-webkit-sticky;
	position:sticky;
	top:0;
	background:#ffffff; /* braucht festen Hintergrund, damit Inhalte darunter nicht durchscheinen */
	z-index:70; /* hoch genug, um über Inhalten zu liegen */
	box-shadow:0 2px 6px rgba(15,23,42,0.06);
	padding-top:6px;
	padding-bottom:6px;
}
.tab-nav.sticky + .tab-panel{ /* kleiner Abstand, falls nötig */
	margin-top:6px;
}
.modal{position:fixed;inset:0;background:rgba(0,0,0,0.5);display:none;align-items:center;justify-content:center;z-index:1000;padding:16px}
.modal.open{display:flex}
.modal-content{background:#fff;border:1px solid #e5e7eb;border-radius:8px;padding:16px;width:min(520px,90vw);max-height:80vh;overflow:auto}
.modal-header{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.modal-header h3{margin:0}
.modal-list{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.modal-list button{padding:6px 10px;font-size:12px;background:#f3f4f6;color:#111827;border:1px solid #e5e7eb;border-radius:6px}
.modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:8px}

/* Listings: Filterleiste zentral stylen */
.filter-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.filter-bar input,.filter-bar select{font-size:12px;padding:4px 6px}
.filter-bar button{font-size:12px;padding:5px 8px}
.filter-bar .btn-reset{margin-left:6px}

/* Listings: Mini-Selektor für Prioritäten (1..5) */
.prio-select{margin-left:6px;font-size:12px;padding:0 2px;height:18px}

/* Listings: Sortierlink und Pfeilindikator */
.sort-link{text-decoration:none;color:inherit}
.sort-ind{margin-left:6px}
.sort-ind.muted{color:#9ca3af}

/* Listings (Produkt-Detail): optische Unterauflistung für Kinder-Zeilen */
.child-row td{background:#fafafa;border-top:1px solid #e5e7eb;border-bottom:1px solid #e5e7eb}
.child-row td:first-child{border-left:3px solid #d1d5db}
.child-row td{padding-left:16px}

/* Produkte: Karte deutlicher hervorheben und Lesbarkeit der Zeilen erhöhen */
.card.products-root{background:linear-gradient(180deg,#ffffff 0%,#fbfdff 100%);border-color:#dbe2ea;box-shadow:0 8px 24px rgba(15,23,42,0.08)}
.card.products-root .card-header{border-bottom:1px solid #e5e7eb;padding-bottom:8px;margin-bottom:12px}
.card.products-root .table tbody tr:nth-child(odd){background:#f1f5f9}
.card.products-root .table tbody tr:nth-child(even){background:#f8fafc}
.card.products-root .table tbody tr:hover{background:#e0e7ff}
.card.products-root .table th,.card.products-root .table td{background-clip:padding-box}