* {
	box-sizing:		border-box;
}
body {
	padding:		5px 15px;
}
label {
	display: 		block;
}
#beschreibung, textarea {
	width: 			75%;
}
textarea {
	height:			25%;
}
#karte, #ubox {
	display: 		flex;
	flex-wrap: 		wrap;
	width: 			100%;
}
#box1, #box2, #box3, #box4 {
	flex-basis: 	50%;
	flex-grow: 		1;
	flex-shrink: 	1;
}
#karte div label, #karte div input, #karte div textarea {
	margin:		5px 0 0 2px;
}
.HeArt, .LiArt, .Lagerort {
	width:		125px;
}
.Bezeichnung {
	width:		300px;
}
.Menge {
	color:		blue;
}
.Menge, .geliefert, .Einheit, .Korrektur, .Bestand, .VE {
	width:		60px;
}
.Gesamt {
	width:		100px;
}
td {
	padding:	2px;
}
#new_row {
    visibility: hidden;
    position: absolute;
    left: -9999px;
}

#new_row.visible {
    visibility: visible;
    position: static;
}

/* Subtiler Hover/Focus-Effekt für die Kopf-Navigation */
.header-nav a.nav-link { transition: color .12s ease; }
.header-nav a.nav-link .bi {
    display: inline-block; /* nötig für transform */
    transition: transform .14s cubic-bezier(.2,.9,.2,1), color .14s ease, filter .14s ease;
}
.header-nav a.nav-link:hover .bi,
.header-nav a.nav-link:focus .bi {
    transform: translateY(-4px) scale(1.08);
    color: #0d6efd; /* Bootstrap primary */
    filter: drop-shadow(0 2px 6px rgba(13,110,253,0.12));
}
.header-nav a.nav-link:hover,
.header-nav a.nav-link:focus {
    color: #0d6efd;
    text-decoration: none;
}

/* Zugänglichkeits-Fokus */
.header-nav a.nav-link:focus-visible {
    outline: 3px solid rgba(13,110,253,0.12);
    outline-offset: 2px;
    border-radius: 6px;
}
.header-brand .brand-sub { font-size: 11px; color: #6c757d; }

/* kleine Feinjustierung für KLAES-Badge und collapse-link */
.badge.small { font-size: 0.7rem; padding: 0.25rem 0.45rem; }
a[data-bs-toggle="collapse"] { color: #495057; text-decoration: none; }
a[data-bs-toggle="collapse"]:hover { color: #0d6efd; text-decoration: none; }
/* Klaes-Switch: kompakter, sichtbarer Pill-Look */
.klaes-switch { display:inline-flex; align-items:center; gap:.5rem; }
.klaes-switch .form-check-input { position: absolute; left:-9999px; } /* verstecken, aber zugänglich für screenreader */
.klaes-switch .form-check-label {
    display:inline-block;
    padding:.25rem .6rem;
    border-radius:999px;
    border:1px solid #ced4da;
    background:#fff;
    color:#495057;
    font-size:0.85rem;
    cursor:pointer;
    transition: all .12s ease;
    box-shadow: 0 0 0 0 rgba(0,0,0,0);
}
.klaes-switch .form-check-input:checked + .form-check-label {
    background: linear-gradient(180deg,#0d6efd,#0b5ed7);
    color:#fff;
    border-color: rgba(13,110,253,0.9);
    box-shadow: 0 6px 18px rgba(13,110,253,0.12);
}

/* kleine optische Verfeinerung für die Save-Schaltfläche links */
#aktualisieren.btn-primary.btn-sm {
    padding: .28rem .6rem;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
    font-weight:600;
}

/* zentrierte Menge/Einheit Inputs */
.col-md-6 .text-center input.text-center { min-width: 4.5rem; }

/* textarea Höhe konsistent */
textarea.form-control-sm { min-height: 4.2rem; resize: vertical; }
.small-result-card { font-size: 0.85rem; }
.small-result-card pre { background:#fff; }

/* Index: Tabelle klebt am Kopf, mobilfreundliche Höhe */
.table-wrap { max-height: calc(100vh - 220px); overflow: auto; }
.table thead th { position: sticky; top: 0; z-index: 2; }
.table thead.table-dark th { background-color: #212529; color: #fff; }
th.sortable { cursor: pointer; user-select: none; }

/* Header (aus header.php ausgelagert) */
.header-brand { text-align: center; line-height: 1; }
.header-brand .brand-icon { font-size: 56px; color: #0d6efd; display: block; margin-bottom: 6px; text-shadow: 0 1px 0 rgba(0,0,0,.06); }
.header-brand .brand-name {
    font-family: "Inter", "Roboto", "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-weight: 800; font-size: 18px; letter-spacing: .6px; color: #111827; margin-bottom: 0;
}
/* .header-brand .brand-sub ist bereits definiert; Beibehaltung hier bewusst minimal */
.header-nav a.nav-link { color: #222; }
.header-nav a.nav-link.text-secondary,
.header-nav a.nav-link.text-secondary i { color: #6c757d !important; }
.header-nav .bi { vertical-align: -2px; }
.header-nav a.nav-link .bi { font-size: 1.4rem; }
.header-nav a.nav-link span { font-size: .85rem; }
@media (max-width: 420px) {
    .header-brand .brand-name, .header-brand .brand-sub { display: none; }
    .header-nav span { display: none; }
}

/* Globales Suchfeld – prominent hervorgehoben */
.header-search-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.header-search-wrap .bi-search {
    position: absolute;
    left: .65rem;
    top: 50%;
    transform: translateY(-50%);
    color: #0d6efd;
    font-size: .95rem;
    pointer-events: none;
    z-index: 5;
    line-height: 1;
}
#search, #search-mobile {
    flex: 1;
    width: auto;          /* Bootstrap width:100% überschreiben */
    min-width: 190px;
    padding-left: 2.1rem;
    padding-right: 2rem;
    border: 2px solid #0d6efd;
    border-radius: 20px;
    box-shadow: none;
    transition: box-shadow .15s ease, border-color .15s ease;
}
.search-clear-btn {
    position: absolute;
    right: .6rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0;
    color: #dc3545;
    font-size: 1rem;
    cursor: pointer;
    z-index: 6;
    line-height: 1;
    opacity: .75;
    transition: opacity .15s;
}
.search-clear-btn:hover { opacity: 1; }
#search:focus, #search-mobile:focus {
    border-color: #0b5ed7;
    box-shadow: 0 0 0 4px rgba(13,110,253,.16);
    outline: none;
}
.header-search-wrap.flex-grow-1 { width: 100%; }
.header-search-wrap.flex-grow-1 #search-mobile { min-width: unset; width: 100%; }

/* Geändertes Formularfeld – orange Rahmen bis zum Speichern */
.field-dirty {
    border-color: #fd7e14 !important;
    box-shadow: 0 0 0 3px rgba(253,126,20,.18) !important;
    transition: border-color .12s ease, box-shadow .12s ease;
}

/* Lieferant-Validierung: gelber Rahmen wenn unbekannt */
.lieferant-unknown {
    border-color: #ffc107 !important;
    box-shadow: 0 0 0 3px rgba(255,193,7,.2) !important;
}

/* Info-Icon neben Label */
.lieferant-info-icon {
    cursor: pointer;
    font-size: .85rem;
    vertical-align: middle;
    margin-left: .3rem;
    opacity: .75;
    transition: opacity .15s;
}
.lieferant-info-icon:hover { opacity: 1; }

/* Zeilen-Hervorhebung auch bei Fokus innerhalb der Zeile (z.B. Eingabefelder) */
.table-hover tbody tr:focus-within {
    background-color: var(--bs-table-hover-bg);
    color: var(--bs-table-hover-color);
}

/* Helles Grün für Icons (z.B. "Alle offenen Positionen buchen") */
.text-success-light { color: #6fdd8b !important; }