:root {
    --kitlog-blue: #2B8CFF;
    --kitlog-green: #38D460;

    --navy-dark: #09101D;
    --navy-primary: #0F1B2F;
    --panel: #0C1727;
    --panel-soft: #111F33;
    --panel-hover: #162842;

    --border: #263952;

    --text-primary: #F5F7FA;
    --text-secondary: #A3B1C6;
    --text-muted: #6F819A;

    --success: #38D460;
    --warning: #FFB020;
    --danger: #FF4D4F;

    --radius: 12px;
    --shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
    background: var(--navy-dark);
    color: var(--text-primary);
    font-family: Inter, "Segoe UI", Arial, sans-serif;
}

body {
    overflow: hidden;
}


/* =========================================================
   HEADER
========================================================= */

.topbar {
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 22px;
    background: #0B1627;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    position: relative;
    z-index: 20;
}

.header-accent {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: linear-gradient(
        90deg,
        var(--kitlog-blue) 0%,
        var(--kitlog-blue) 48%,
        var(--kitlog-green) 100%
    );
}

.brand {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 260px;
}


/* =========================================================
   LOGO – GENAU ZWEI PFEILE
========================================================= */

.brand-arrows {
    display: flex;
    align-items: center;
    gap: 2px;
    width: 48px;
    height: 34px;
}

.arrow {
    display: block;
    width: 20px;
    height: 20px;
    border-top: 5px solid;
    border-right: 5px solid;
    transform: rotate(45deg);
}

.arrow-blue {
    border-color: var(--kitlog-blue);
}

.arrow-green {
    border-color: var(--kitlog-green);
    margin-left: -6px;
}

.brand-text {
    display: flex;
    flex-direction: column;
}

.logo {
    font-size: 27px;
    font-weight: 650;
    line-height: 1;
    letter-spacing: -0.7px;
    white-space: nowrap;
}

.logo-main {
    color: #F5F7FA;
}

.logo-i {
    color: var(--kitlog-blue);
}

.logo-q {
    color: var(--kitlog-green);
}

.logo-subtitle {
    margin-top: 7px;
    font-size: 9px;
    letter-spacing: 2.2px;
    color: var(--text-muted);
    font-weight: 600;
}


/* =========================================================
   HEADER RECHTS
========================================================= */

.topbar-right {
    display: flex;
    align-items: center;
    gap: 22px;
}

.global-search {
    width: 285px;
    height: 38px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: #0D192A;
}

.global-search span {
    color: var(--text-muted);
    font-size: 18px;
}

.global-search input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 13px;
}

.global-search input::placeholder {
    color: var(--text-muted);
}

.location {
    min-width: 92px;
    padding: 7px 10px;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 9px;
    background: rgba(255,255,255,0.025);
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 12px;
}

.location .label {
    color: var(--text-muted);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.9px;
}

.location strong {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
}

.user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px 6px 6px;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    background: rgba(255,255,255,0.025);
}

.avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(
        135deg,
        var(--kitlog-blue),
        #1459B7
    );
    box-shadow: 0 0 14px rgba(43,140,255,0.18);
    font-weight: 700;
    font-size: 12px;
}

.user div:last-child {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.user strong {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
}

.user span {
    font-size: 10px;
    color: var(--text-muted);
}


/* =========================================================
   LAYOUT
========================================================= */

.app-layout {
    height: calc(100vh - 76px);
    display: grid;
    grid-template-columns: 214px 1fr;
}

.sidebar {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: #0A1423;
    border-right: 1px solid rgba(255,255,255,0.05);
    padding: 18px 12px 18px;
    overflow-y: auto;
}

.sidebar nav {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.nav-item {
    min-height: 40px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 13px;
    color: #C1CCDA;
    text-decoration: none;
    border-radius: 8px;
    font-size: 13px;
    position: relative;
    transition: 0.16s ease;
}

.nav-item:hover {
    background: #101F34;
    color: white;
}

.nav-item.active {
    background: #11233B;
    color: white;
}

.nav-item.active::before {
    content: "";
    position: absolute;
    left: -12px;
    top: 6px;
    bottom: 6px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(
        to bottom,
        var(--kitlog-blue),
        var(--kitlog-green)
    );
}

.nav-icon {
    width: 19px;
    color: var(--text-secondary);
    font-size: 15px;
    text-align: center;
}


/* =========================================================
   POWERED BY
========================================================= */

.powered-by {
    padding: 16px 13px 4px;
    border-top: 1px solid rgba(255,255,255,0.06);
}

.powered-label {
    font-size: 8px;
    letter-spacing: 1.5px;
    color: var(--text-muted);
}

.translogiq {
    margin-top: 7px;
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -0.5px;
}

.trans-i {
    color: var(--kitlog-blue);
}

.trans-q {
    color: var(--kitlog-green);
}


.claim {
    margin-top: 4px;
    font-size: 10px;
    color: var(--text-muted);
    letter-spacing: 0.2px;
}


/* =========================================================
   MAIN
========================================================= */

.main-content {
    overflow: hidden;
    padding: 22px;
    background:
        radial-gradient(circle at 80% 0%, rgba(43,140,255,0.035), transparent 35%),
        var(--navy-dark);
}

.page-header {
    height: 58px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.page-header h1 {
    margin: 0;
    font-size: 24px;
    font-weight: 620;
}

.page-header p {
    margin: 5px 0 0;
    color: var(--text-muted);
    font-size: 12px;
}


/* =========================================================
   BUTTONS
========================================================= */

button {
    font-family: inherit;
}

.btn-primary,
.btn-secondary,
.btn-danger {
    border: none;
    border-radius: 8px;
    padding: 10px 15px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.btn-primary {
    background: var(--kitlog-blue);
    color: white;
    box-shadow: 0 5px 18px rgba(43,140,255,0.22);
}

.btn-primary:hover {
    background: #4A9CFF;
}

.btn-secondary {
    background: #1A293D;
    color: var(--text-secondary);
    border: 1px solid var(--border);
}

.btn-danger {
    background: rgba(255,77,79,0.10);
    color: #FF7375;
    border: 1px solid rgba(255,77,79,0.25);
}

.icon-button {
    width: 31px;
    height: 31px;
    border-radius: 7px;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    cursor: pointer;
}


/* =========================================================
   FILTERBAR
========================================================= */

.filterbar {
    min-height: 54px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.filterbar select,
.filterbar input {
    height: 38px;
    border: 1px solid var(--border);
    background: #0D192A;
    color: var(--text-primary);
    border-radius: 8px;
    padding: 0 11px;
    outline: none;
    font-size: 12px;
}

.search-field {
    width: 320px;
    display: flex;
    align-items: center;
    border: 1px solid var(--border);
    background: #0D192A;
    border-radius: 8px;
    padding-left: 11px;
}

.search-field span {
    color: var(--text-muted);
}

.search-field input {
    width: 100%;
    border: none;
    background: transparent;
}

.checkbox {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--text-secondary);
    font-size: 12px;
}


/* =========================================================
   CONTENT GRID
========================================================= */

.content-grid {
    display: grid;
    grid-template-columns: minmax(650px, 1fr) 390px;
    gap: 14px;
    height: calc(100vh - 224px);
}

.table-card,
.detail-panel {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.table-card {
    overflow: auto;
}


/* =========================================================
   TABLE
========================================================= */

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

thead {
    position: sticky;
    top: 0;
    z-index: 5;
}

th {
    background: #101D30;
    color: #91A2B9;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.35px;
    text-align: left;
    padding: 12px 10px;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

td {
    padding: 13px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.045);
    vertical-align: middle;
}

tbody tr {
    transition: 0.14s ease;
}

tbody tr:hover {
    background: #101E31;
}

tbody tr.selected {
    background: rgba(43,140,255,0.075);
    box-shadow: inset 3px 0 0 var(--kitlog-blue);
}

.article-number {
    color: #70AEFF;
    font-weight: 600;
}

.secondary {
    display: block;
    color: var(--text-muted);
    font-size: 10px;
    margin-top: 3px;
}

.tag {
    display: inline-flex;
    padding: 4px 7px;
    border-radius: 5px;
    background: rgba(43,140,255,0.10);
    color: #85BCFF;
    font-size: 10px;
}

.tag.kit {
    color: #70DF8E;
    background: rgba(56,212,96,0.10);
}

.stock-good {
    color: var(--success);
    font-weight: 700;
}

.stock-warning {
    color: var(--warning);
    font-weight: 700;
}

.stock-danger {
    color: var(--danger);
    font-weight: 700;
}

.status-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-right: 5px;
}

.status-dot.good {
    background: var(--success);
}

.status-dot.warning {
    background: var(--warning);
}

.status-dot.danger {
    background: var(--danger);
}


/* =========================================================
   DETAIL PANEL
========================================================= */

.detail-panel {
    overflow-y: auto;
    position: relative;
}

.detail-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 18px;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(
        180deg,
        rgba(43,140,255,0.045),
        transparent
    );
}

.detail-label {
    color: var(--kitlog-blue);
    font-size: 9px;
    letter-spacing: 1.4px;
}

.detail-header h2 {
    margin: 4px 0 3px;
    font-size: 21px;
}

.detail-header p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 11px;
}

.detail-section {
    padding: 16px 18px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.detail-section h3 {
    margin: 0 0 12px;
    font-size: 12px;
    font-weight: 600;
    color: #DDE5EF;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.form-grid label {
    display: flex;
    flex-direction: column;
    gap: 5px;
    color: var(--text-muted);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.45px;
}

.form-grid .full {
    grid-column: 1 / -1;
}

.form-grid input,
.form-grid select {
    height: 34px;
    background: #0A1524;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-primary);
    padding: 0 9px;
    outline: none;
    font-size: 11px;
    text-transform: none;
}

.metric-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.metric-grid div {
    min-height: 54px;
    padding: 9px;
    border: 1px solid rgba(255,255,255,0.055);
    border-radius: 7px;
    background: #0A1524;
}

.metric-grid span {
    display: block;
    color: var(--text-muted);
    font-size: 9px;
    margin-bottom: 5px;
}

.metric-grid strong {
    font-size: 11px;
}

.switch-row,
.info-row {
    min-height: 34px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
    border-bottom: 1px solid rgba(255,255,255,0.035);
}

.switch-row:last-child,
.info-row:last-child {
    border-bottom: none;
}

.switch-row span:first-child,
.info-row span:first-child {
    color: var(--text-secondary);
}

.switch {
    position: relative;
    width: 28px;
    height: 15px;
    border-radius: 10px;
    background: #33445B;
}

.switch::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #8392A6;
}


.switch.active {
    background: rgba(56, 212, 96, 0.22);
    box-shadow: inset 0 0 0 1px rgba(56, 212, 96, 0.45);
}

.switch.active::after {
    left: 16px;
    background: var(--kitlog-green);
    box-shadow: 0 0 7px rgba(56, 212, 96, 0.45);
}

.switch,
.switch::after {
    transition: all 0.18s ease;
}

.supplier-card {
    padding: 11px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #0A1524;
}

.supplier-card > strong {
    display: block;
    font-size: 11px;
}

.supplier-card > span {
    color: var(--text-muted);
    font-size: 9px;
}

.supplier-data {
    margin-top: 9px;
    display: flex;
    justify-content: space-between;
    color: var(--text-secondary);
    font-size: 10px;
}

.detail-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 15px 18px;
    position: sticky;
    bottom: 0;
    background: rgba(12,23,39,0.96);
    backdrop-filter: blur(8px);
}


/* =========================================================
   SCROLLBARS
========================================================= */

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #09111D;
}

::-webkit-scrollbar-thumb {
    background: #263952;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #385271;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1250px) {
    .content-grid {
        grid-template-columns: minmax(560px, 1fr) 340px;
    }

    .global-search {
        width: 220px;
    }
}

@media (max-width: 1050px) {
    .app-layout {
        grid-template-columns: 180px 1fr;
    }

    .content-grid {
        grid-template-columns: 1fr;
    }

    /*
     * Entfernt: .detail-panel { display: none; }
     * Stammte aus der Zeit, als das Detail eine feste
     * rechte Spalte war. Als Popup darf es auch bei
     * schmalem Fenster nicht verschwinden.
     */
}


/* Kompakte Eingabefelder Logistik / Maße */
.editable-metrics {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 28px;
    row-gap: 16px;
}

.editable-metrics label {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.editable-metrics input {
    width: 40%;
    min-width: 90px;
    max-width: 130px;
}


/* Dynamische Lieferantenanzeige */

#supplier-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.supplier-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.supplier-card-header > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.preferred-supplier-badge {
    flex-shrink: 0;
    padding: 3px 7px;

    border: 1px solid rgba(56, 212, 96, 0.35);
    border-radius: 10px;

    background: rgba(56, 212, 96, 0.10);
    color: var(--kitlog-green);

    font-size: 8px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.supplier-empty {
    opacity: 0.75;
}



/* Lieferanten-Card kompakter */
#supplier-list .supplier-card {
    padding: 10px 12px;
}

#supplier-list .supplier-card-header strong {
    font-size: 11px;
    line-height: 1.25;
    font-weight: 600;
}

#supplier-list .supplier-card-header > div > span {
    font-size: 9px;
    line-height: 1.2;
    color: var(--text-muted);
    margin-top: 2px;
}

#supplier-list .supplier-data {
    margin-top: 8px;
    font-size: 9px;
}

#supplier-list .preferred-supplier-badge {
    font-size: 7px;
    padding: 2px 6px;
}


/* Lieferanten-Editor */

.section-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.section-title-row h3 {
    margin: 0;
}

.supplier-add-button {
    border: none;
    background: transparent;
    color: var(--kitlog-blue);
    font-size: 9px;
    cursor: pointer;
    padding: 4px 0;
}

.supplier-add-button:hover {
    color: #66ACFF;
}

.supplier-editor {
    margin-bottom: 12px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #0A1524;
}

.supplier-editor.hidden {
    display: none;
}

.supplier-editor label {
    display: flex;
    flex-direction: column;
    gap: 5px;
    color: var(--text-secondary);
    font-size: 9px;
}

.supplier-editor input,
.supplier-editor select {
    width: 100%;
    min-height: 30px;
}

.supplier-editor-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 10px;
}

.supplier-preferred-row {
    flex-direction: row !important;
    align-items: center;
    align-self: end;
    gap: 7px !important;
    min-height: 30px;
}

.supplier-preferred-row input {
    width: auto;
    min-height: auto;
}

.supplier-editor-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
}



/* Suchbare Nachschlagefelder */

.lookup-field {
    position: relative;
    width: 100%;
}

.lookup-field > input[type="text"] {
    width: 100%;
    min-height: 30px;
    font-size: 10px;
}

.lookup-dropdown {
    position: absolute;
    z-index: 1000;

    top: calc(100% + 4px);
    left: 0;
    right: 0;

    max-height: 210px;
    overflow-y: auto;

    border: 1px solid var(--border);
    border-radius: 7px;

    background: #091421;

    box-shadow:
        0 10px 28px rgba(0,0,0,0.38);
}

.lookup-dropdown.hidden {
    display: none;
}

.lookup-item {
    display: grid;
    grid-template-columns: 58px 1fr auto;
    gap: 8px;
    align-items: center;

    min-height: 30px;
    padding: 5px 8px;

    border-bottom:
        1px solid rgba(255,255,255,0.04);

    cursor: pointer;

    font-size: 9px;
}

.lookup-item:last-child {
    border-bottom: none;
}

.lookup-item:hover {
    background: rgba(43,140,255,0.10);
}

.lookup-number {
    color: var(--kitlog-blue);
    font-weight: 600;
}

.lookup-name {
    color: var(--text-primary);
}

.lookup-location {
    color: var(--text-muted);
    font-size: 8px;
}

.lookup-empty {
    padding: 9px;
    color: var(--text-muted);
    font-size: 9px;
}


/* Kompakte Eingabefelder im Lieferanten-Editor */
.supplier-editor input[type="text"],
.supplier-editor input[type="number"],
.supplier-editor select,
.supplier-editor .lookup-field > input[type="text"] {
    height: 28px;
    min-height: 28px;
    padding: 4px 7px;
    font-size: 10px;
    line-height: 1.2;
}

.supplier-editor label {
    font-size: 8px;
}

.supplier-editor input[type="checkbox"] {
    width: 13px;
    height: 13px;
    min-height: 13px;
}


/* Lieferanten-Aktionen */

.supplier-card-actions {
    display: flex;
    align-items: center;
    gap: 7px;
}

.supplier-remove-button {
    border: none;
    background: transparent;

    color: var(--text-muted);

    padding: 2px 4px;

    font-size: 8px;
    cursor: pointer;
}

.supplier-remove-button:hover {
    color: #FF5F65;
}


.supplier-edit-button {
    border: none;
    background: transparent;
    color: var(--kitlog-blue);
    padding: 2px 4px;
    font-size: 8px;
    cursor: pointer;
}

.supplier-edit-button:hover {
    color: #66ACFF;
}


/* Kompakte Buttons im Lieferanten-Editor */
.supplier-editor-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}

.supplier-editor-actions .btn-secondary,
.supplier-editor-actions .btn-primary {
    width: auto;
    min-width: 0;
    height: 30px;
    min-height: 30px;

    padding: 0 12px;

    border-radius: 7px;

    font-size: 9px;
    line-height: 1;
    white-space: nowrap;
}

.supplier-editor-actions .btn-secondary {
    min-width: 78px;
}

.supplier-editor-actions .btn-primary {
    min-width: 118px;
}


/* =========================================================
   LOGISTIK / MASSE – DARK INPUTS
========================================================= */

.editable-metrics {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 28px;
    row-gap: 16px;
}

.editable-metrics label {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;

    color: var(--text-muted);
    font-size: 8px;
}

.editable-metrics input {
    box-sizing: border-box;

    width: 40%;
    min-width: 90px;
    max-width: 130px;

    height: 30px;
    min-height: 30px;

    padding: 4px 8px;

    border: 1px solid #29405D;
    border-radius: 6px;

    outline: none;

    background: #0A1626;
    color: var(--text-primary);

    font-size: 10px;
    font-weight: 500;

    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        background 0.15s ease;
}

.editable-metrics input:hover {
    border-color: #385778;
}

.editable-metrics input:focus {
    border-color: var(--kitlog-blue);

    background: #0C1A2C;

    box-shadow:
        0 0 0 2px rgba(43, 140, 255, 0.10);
}

/* Chrome / Edge: Number-Spinner etwas dezenter */
.editable-metrics input[type="number"]::-webkit-inner-spin-button,
.editable-metrics input[type="number"]::-webkit-outer-spin-button {
    opacity: 0.35;
}


/* =========================================================
   LOGISTIK / MASSE – NUMBER-SPINNER AUSBLENDEN
========================================================= */

/* Chrome, Edge, Safari */
.editable-metrics input[type="number"]::-webkit-inner-spin-button,
.editable-metrics input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}

/* Firefox */
.editable-metrics input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}


/* App-Views */
.app-view.hidden {
    display: none;
}

#inventory-view .table-card {
    overflow-x: auto;
}

#inventory-view table {
    min-width: 1180px;
}


/* Lager-Ansicht Tabs */

.view-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;

    border-bottom: 1px solid var(--border);
}

.view-tab {
    position: relative;

    padding: 8px 14px;

    border: none;
    background: transparent;

    color: var(--text-muted);

    font-size: 10px;
    font-weight: 600;

    cursor: pointer;
}

.view-tab:hover {
    color: var(--text-primary);
}

.view-tab.active {
    color: var(--kitlog-blue);
}

.view-tab.active::after {
    content: "";

    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;

    height: 2px;

    background: var(--kitlog-blue);
}

#inventory-locations-content.hidden,
#inventory-stock-content.hidden {
    display: none;
}


/* Lagerplatz-Editor */

.location-editor {
    margin-bottom: 12px;
    padding: 12px;

    border: 1px solid var(--border);
    border-radius: 8px;

    background: #0A1524;
}

.location-editor.hidden {
    display: none;
}

.location-editor-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(120px, 1fr));
    gap: 10px 14px;
}

.location-editor label {
    display: flex;
    flex-direction: column;
    gap: 5px;

    color: var(--text-muted);
    font-size: 8px;
}

.location-editor input,
.location-editor select {
    box-sizing: border-box;

    height: 28px;
    min-height: 28px;

    padding: 4px 7px;

    border: 1px solid #29405D;
    border-radius: 6px;

    outline: none;

    background: #0A1626;
    color: var(--text-primary);

    font-size: 10px;
}

.location-editor input:focus,
.location-editor select:focus {
    border-color: var(--kitlog-blue);

    box-shadow:
        0 0 0 2px rgba(43,140,255,0.10);
}

.location-description {
    grid-column: span 2;
}

.location-preview {
    margin-top: 11px;

    color: var(--text-muted);
    font-size: 9px;
}

.location-preview strong {
    margin-left: 5px;
    color: var(--kitlog-green);
    font-size: 11px;
}

.location-editor-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;

    margin-top: 12px;
}

.location-editor-actions .btn-primary,
.location-editor-actions .btn-secondary {
    width: auto;
    min-width: 90px;
    height: 30px;
    min-height: 30px;

    padding: 0 12px;

    font-size: 9px;
}

/* Number-Pfeile ausblenden */
.location-editor input[type="number"]::-webkit-inner-spin-button,
.location-editor input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}

.location-editor input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}


/* Lagerplatz: Regal / Ebene / Platz kompakt in einer Reihe */
.location-editor-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 10px 14px;
}

/* Lager und Bereich oben etwas breiter */
.location-editor-grid label:nth-child(1) {
    grid-column: span 2;
}

.location-editor-grid label:nth-child(2) {
    grid-column: span 2;
}

/* Regal / Ebene / Platz nebeneinander */
.location-editor-grid label:nth-child(3),
.location-editor-grid label:nth-child(4),
.location-editor-grid label:nth-child(5) {
    grid-column: span 1;
}

/* Typ daneben */
.location-editor-grid label:nth-child(6) {
    grid-column: span 1;
}

/* Beschreibung über volle Breite */
.location-editor-grid .location-description {
    grid-column: 1 / -1;
}

/* Zahlenfelder bewusst kompakt */
#location-rack,
#location-level {
    max-width: 90px;
}

#location-position {
    max-width: 100px;
}


/* =========================================================
   LAGERPLATZ – KOMPAKTE EINZEILIGE STRUKTUR
========================================================= */

.location-editor-grid {
    display: grid;

    grid-template-columns:
        90px
        90px
        90px
        100px
        minmax(150px, 1fr);

    gap: 10px 14px;
    align-items: end;
}

/* Alle fünf Strukturfelder in einer Reihe */
.location-editor-grid label:nth-child(2),
.location-editor-grid label:nth-child(3),
.location-editor-grid label:nth-child(4),
.location-editor-grid label:nth-child(5),
.location-editor-grid label:nth-child(6) {
    grid-column: auto;
}

/* Lager separat über volle Breite */
.location-editor-grid label:nth-child(1) {
    grid-column: 1 / -1;
    max-width: 320px;
}

/* Beschreibung nächste Zeile */
.location-editor-grid .location-description {
    grid-column: 1 / -1;
    max-width: 600px;
}

/* kompakte Strukturfelder */
#location-area {
    width: 70px;
    max-width: 70px;
    text-transform: uppercase;
}

#location-rack,
#location-level {
    width: 70px;
    max-width: 70px;
}

#location-position {
    width: 80px;
    max-width: 80px;
}

#location-type {
    width: 150px;
    max-width: 150px;
}


/* =========================================================
   LAGERPLATZ – MASSENÄNDERUNG
========================================================= */

.location-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.location-toolbar-actions .btn-primary,
.location-toolbar-actions .btn-secondary {
    width: auto;
    min-width: 105px;
    height: 30px;
    min-height: 30px;
    padding: 0 12px;
    font-size: 9px;
    white-space: nowrap;
}

.location-bulk-editor {
    margin-bottom: 14px;
}

.bulk-section-title {
    margin: 4px 0 10px;
    padding-bottom: 6px;

    border-bottom: 1px solid rgba(255,255,255,0.05);

    color: var(--text-primary);
    font-size: 10px;
    font-weight: 600;
}

.bulk-filter-grid {
    display: grid;

    grid-template-columns:
        70px
        80px 80px
        80px 80px
        90px 90px;

    gap: 10px;
    align-items: end;
}

.bulk-filter-grid label,
.bulk-change-row label {
    display: flex;
    flex-direction: column;
    gap: 5px;

    color: var(--text-muted);
    font-size: 8px;
}

.bulk-filter-grid input,
.bulk-change-row input,
.bulk-change-row select {
    box-sizing: border-box;

    height: 28px;
    min-height: 28px;

    padding: 4px 7px;

    border: 1px solid #29405D;
    border-radius: 6px;

    outline: none;

    background: #0A1626;
    color: var(--text-primary);

    font-size: 10px;
}

.bulk-filter-grid input:focus,
.bulk-change-row input:focus,
.bulk-change-row select:focus {
    border-color: var(--kitlog-blue);

    box-shadow:
        0 0 0 2px rgba(43,140,255,0.10);
}

.bulk-preview-bar {
    display: flex;
    align-items: center;
    gap: 8px;

    margin: 12px 0 16px;
    padding: 8px 10px;

    border: 1px solid rgba(43,140,255,0.14);
    border-radius: 7px;

    background: rgba(43,140,255,0.04);

    font-size: 9px;
}

.bulk-preview-bar > span {
    color: var(--text-muted);
}

.bulk-preview-bar > strong {
    flex: 1;
    color: var(--kitlog-blue);
    font-size: 10px;
}

.bulk-preview-bar .btn-secondary {
    width: auto;
    min-width: 90px;
    height: 28px;
    min-height: 28px;
    padding: 0 10px;
    font-size: 8px;
}

.bulk-change-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(180px, 1fr));
    gap: 8px 14px;
}

.bulk-change-row {
    display: grid;
    grid-template-columns: 16px 1fr;
    gap: 7px;
    align-items: end;
}

.bulk-change-row > input[type="checkbox"] {
    width: 13px;
    height: 13px;
    min-height: 13px;
    margin: 0 0 7px;
}

.bulk-change-row input:disabled,
.bulk-change-row select:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.location-bulk-editor .location-editor-actions {
    margin-top: 16px;
}

/* Number-Spinner im Bulk-Editor ausblenden */
.location-bulk-editor input[type="number"]::-webkit-inner-spin-button,
.location-bulk-editor input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}

.location-bulk-editor input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}


/* =========================================================
   BULK LAGERPLÄTZE – VON / BIS
========================================================= */

.bulk-range {
    display: grid;
    grid-template-columns: 1fr 34px 1fr;
    gap: 14px;
    align-items: end;
}

.bulk-range-side {
    min-width: 0;
}

.bulk-range-title {
    margin-bottom: 7px;
    padding-bottom: 5px;

    border-bottom: 1px solid rgba(255,255,255,0.05);

    color: var(--text-secondary);

    font-size: 9px;
    font-weight: 600;
    text-align: center;
    letter-spacing: 0.5px;
}

.bulk-range-fields {
    display: grid;
    grid-template-columns:
        70px
        75px
        75px
        85px;

    gap: 9px;
}

.bulk-range-fields label {
    display: flex;
    flex-direction: column;
    gap: 5px;

    color: var(--text-muted);
    font-size: 8px;
}

.bulk-range-fields input {
    box-sizing: border-box;

    width: 100%;
    height: 28px;
    min-height: 28px;

    padding: 4px 7px;

    border: 1px solid #29405D;
    border-radius: 6px;

    outline: none;

    background: #0A1626;
    color: var(--text-primary);

    font-size: 10px;
}

.bulk-range-fields input:focus {
    border-color: var(--kitlog-blue);

    box-shadow:
        0 0 0 2px rgba(43,140,255,0.10);
}

.bulk-range-arrow {
    display: flex;
    align-items: center;
    justify-content: center;

    height: 28px;
    margin-bottom: 1px;

    color: var(--text-secondary);
    font-size: 18px;
}


/* =========================================================
   BULK LAGERPLÄTZE – KOMPAKTES VON / BIS DESIGN
========================================================= */

.bulk-range {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;

    width: fit-content;
    max-width: 100%;

    margin-top: 8px;
}

.bulk-range-side {
    width: auto;

    padding: 10px 12px;

    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 8px;

    background: rgba(255,255,255,0.018);
}

.bulk-range-title {
    margin: 0 0 8px;
    padding: 0 0 6px;

    border-bottom: 1px solid rgba(255,255,255,0.05);

    color: var(--kitlog-blue);

    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-align: left;
}

.bulk-range-fields {
    display: grid;

    grid-template-columns:
        58px
        58px
        58px
        72px;

    gap: 8px;
}

.bulk-range-fields label {
    display: flex;
    flex-direction: column;
    gap: 4px;

    color: var(--text-muted);
    font-size: 7px;
}

.bulk-range-fields input {
    box-sizing: border-box;

    width: 100%;
    height: 27px;
    min-height: 27px;

    padding: 3px 7px;

    border: 1px solid #29405D;
    border-radius: 6px;

    outline: none;

    background: #0A1626;
    color: var(--text-primary);

    font-size: 9px;
    font-weight: 500;

    text-align: center;
}

.bulk-range-fields input:focus {
    border-color: var(--kitlog-blue);

    box-shadow:
        0 0 0 2px rgba(43,140,255,0.10);
}

.bulk-range-arrow {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 28px;
    height: 28px;

    margin-top: 18px;

    border: 1px solid rgba(43,140,255,0.18);
    border-radius: 50%;

    background: rgba(43,140,255,0.06);
    color: var(--kitlog-blue);

    font-size: 15px;
}


/* Lagerplatz Massenanlage */

.bulk-create-range {
    display: grid;

    grid-template-columns:
        65px
        75px 75px
        75px 75px
        85px 85px;

    gap: 9px;
    align-items: end;
}

.bulk-create-range label,
.bulk-create-properties label {
    display: flex;
    flex-direction: column;
    gap: 5px;

    color: var(--text-muted);
    font-size: 8px;
}

.bulk-create-range input,
.bulk-create-properties input,
.bulk-create-properties select {
    box-sizing: border-box;

    height: 28px;
    min-height: 28px;

    padding: 4px 7px;

    border: 1px solid #29405D;
    border-radius: 6px;

    outline: none;

    background: #0A1626;
    color: var(--text-primary);

    font-size: 10px;
}

.bulk-create-properties-title {
    margin-top: 16px;
}

.bulk-create-properties {
    display: grid;
    grid-template-columns: repeat(4, minmax(140px, 1fr));
    gap: 10px 14px;
}


/* =========================================================
   MASSENANLAGE – KOMPAKTE VON / BIS KARTEN
========================================================= */

.bulk-create-range-cards {
    display: flex;
    align-items: center;
    justify-content: flex-start;

    gap: 14px;

    width: fit-content;
    max-width: 100%;

    margin-top: 8px;
    margin-bottom: 14px;
}

.bulk-create-range-card {
    padding: 10px 12px;

    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 8px;

    background: rgba(255,255,255,0.018);
}

.bulk-create-range-title {
    margin-bottom: 8px;
    padding-bottom: 6px;

    border-bottom: 1px solid rgba(255,255,255,0.05);

    color: var(--kitlog-blue);

    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.8px;
}

.bulk-create-range-fields {
    display: grid;

    grid-template-columns:
        58px
        58px
        58px
        72px;

    gap: 8px;
}

.bulk-create-range-fields label {
    display: flex;
    flex-direction: column;
    gap: 4px;

    color: var(--text-muted);
    font-size: 7px;
}

.bulk-create-range-fields input {
    box-sizing: border-box;

    width: 100%;

    height: 27px;
    min-height: 27px;

    padding: 3px 7px;

    border: 1px solid #29405D;
    border-radius: 6px;

    outline: none;

    background: #0A1626;
    color: var(--text-primary);

    font-size: 9px;
    font-weight: 500;

    text-align: center;
}

.bulk-create-range-fields input:focus {
    border-color: var(--kitlog-blue);

    box-shadow:
        0 0 0 2px rgba(43,140,255,0.10);
}

.bulk-create-range-arrow {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 28px;
    height: 28px;

    margin-top: 18px;

    border: 1px solid rgba(43,140,255,0.25);
    border-radius: 50%;

    background: rgba(43,140,255,0.07);
    color: var(--kitlog-blue);

    font-size: 15px;
}


/* Pflichtfelder Lagerplatz-Massenanlage */

.bulk-create-range-fields .required-missing,
.bulk-create-properties .required-missing {
    border-color: #D6535A !important;

    box-shadow:
        0 0 0 2px rgba(214,83,90,0.08);
}

#bulk-create-save-button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}


/* =========================================================
   SCROLLBARE TABELLEN – ARTIKEL / LAGER
========================================================= */

/* Artikeltabelle */

/* Lagerbestand */
#inventory-stock-content .table-card {
    max-height: calc(100vh - 220px);
    overflow-y: auto;
    overflow-x: auto;
}

/* Lagerplätze */
#inventory-locations-content .table-card {
    max-height: calc(100vh - 250px);
    overflow-y: auto;
    overflow-x: auto;
}

/* Tabellenkopf beim Scrollen stehen lassen */
.table-card thead th {
    position: sticky;
    top: 0;
    z-index: 10;

    background: #101E31;
}

/* Scrollbar passend zum Dark-Design */
.table-card {
    scrollbar-width: thin;
    scrollbar-color: #334B68 #0A1524;
}

.table-card::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

.table-card::-webkit-scrollbar-track {
    background: #0A1524;
}

.table-card::-webkit-scrollbar-thumb {
    background: #334B68;
    border-radius: 6px;
}

.table-card::-webkit-scrollbar-thumb:hover {
    background: #456384;
}


/* =========================================================
   TABELLEN-PAGINATION
========================================================= */

.table-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 16px;

    padding: 9px 12px;

    border-top: 1px solid var(--border);

    background: #0A1524;

    font-size: 9px;
}

.pagination-info {
    color: var(--text-muted);
}

.pagination-controls {
    display: flex;
    align-items: center;
    gap: 9px;
}

.pagination-controls label {
    display: flex;
    align-items: center;
    gap: 6px;

    color: var(--text-muted);
}

.pagination-controls select {
    height: 27px;
    min-height: 27px;

    padding: 2px 24px 2px 7px;

    border: 1px solid #29405D;
    border-radius: 6px;

    outline: none;

    background: #0A1626;
    color: var(--text-primary);

    font-size: 9px;
}

.pagination-button {
    width: auto;
    min-width: 68px;

    height: 27px;
    min-height: 27px;

    padding: 0 9px;

    border: 1px solid #29405D;
    border-radius: 6px;

    background: #0A1626;
    color: var(--text-secondary);

    font-size: 8px;

    cursor: pointer;
}

.pagination-button:hover:not(:disabled) {
    border-color: var(--kitlog-blue);
    color: var(--text-primary);
}

.pagination-button:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

#location-page-info {
    min-width: 76px;

    color: var(--text-secondary);
    text-align: center;
}


/* =========================================================
   LAGERPLATZTABELLE – SCROLL + FESTE FUSSZEILE
========================================================= */

#inventory-locations-content .table-card {
    display: flex;
    flex-direction: column;

    height: calc(100vh - 250px);
    min-height: 300px;

    overflow: hidden;
}

/* Nur die Datentabelle scrollt */
.location-table-scroll {
    flex: 1 1 auto;
    min-height: 0;

    overflow-y: auto;
    overflow-x: auto;

    scrollbar-width: thin;
    scrollbar-color: #334B68 #0A1524;
}

.location-table-scroll table {
    width: 100%;
    min-width: 900px;
}

.location-table-scroll thead th {
    position: sticky;
    top: 0;
    z-index: 10;

    background: #101E31;
}

/* Pagination bleibt immer unten sichtbar */
#inventory-locations-content .table-pagination {
    flex: 0 0 auto;

    min-height: 42px;
    box-sizing: border-box;

    padding: 7px 12px;

    border-top: 1px solid var(--border);

    background: #0A1524;
}

/* Nicht unnötig auseinanderziehen */
#inventory-locations-content .pagination-controls {
    flex-shrink: 0;
}

.location-table-scroll::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

.location-table-scroll::-webkit-scrollbar-track {
    background: #0A1524;
}

.location-table-scroll::-webkit-scrollbar-thumb {
    background: #334B68;
    border-radius: 6px;
}


/* =========================================================
   LAGERPLÄTZE – MEHR TABELLENHÖHE + FESTE FUSSZEILE
========================================================= */

#inventory-locations-content .table-card {
    display: flex;
    flex-direction: column;

    /*
     * Mehr nutzbare Bildschirmhöhe.
     * Die Fußzeile bleibt innerhalb der Card fest unten.
     */
    height: calc(100vh - 175px);
    min-height: 420px;

    overflow: hidden;
}

#inventory-locations-content .location-table-scroll {
    flex: 1 1 auto;
    min-height: 0;

    overflow-y: auto;
    overflow-x: auto;
}

/* Kopfzeile bleibt beim vertikalen Scrollen sichtbar */
#inventory-locations-content .location-table-scroll thead th {
    position: sticky;
    top: 0;
    z-index: 10;

    background: #101E31;
}

/* Fußzeile nimmt nur die wirklich benötigte Höhe ein */
#inventory-locations-content .table-pagination {
    flex: 0 0 38px;

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

    box-sizing: border-box;

    min-height: 38px;
    height: 38px;

    padding: 5px 12px;

    border-top: 1px solid var(--border);

    background: #0A1524;
}

/* Datensatzinfo links */
#inventory-locations-content .pagination-info {
    flex: 1 1 auto;
    min-width: 0;
}

/* Bedienung kompakt rechts */
#inventory-locations-content .pagination-controls {
    flex: 0 0 auto;

    display: flex;
    align-items: center;

    gap: 8px;
}

/* Auswahl und Buttons etwas flacher */
#inventory-locations-content .pagination-controls select,
#inventory-locations-content .pagination-button {
    height: 26px;
    min-height: 26px;
}

/* Keine zweite unnötige Scrollbar an der gesamten Card */
#inventory-locations-content .table-card {
    overflow: hidden !important;
}

/* Nur die eigentliche Tabelle scrollt */
#inventory-locations-content .location-table-scroll {
    scrollbar-width: thin;
    scrollbar-color: #334B68 #0A1524;
}

#inventory-locations-content
.location-table-scroll::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

#inventory-locations-content
.location-table-scroll::-webkit-scrollbar-track {
    background: #0A1524;
}

#inventory-locations-content
.location-table-scroll::-webkit-scrollbar-thumb {
    background: #334B68;
    border-radius: 6px;
}


/* =========================================================
   LAGERPLÄTZE – HÖHE HARD-FIX
========================================================= */

#inventory-locations-content {
    display: flex;
    flex-direction: column;

    min-height: 0;
}

/*
 * Deutlich höher als bisher.
 * Der Tabellenbereich nutzt fast die komplette Resthöhe.
 */
#inventory-locations-content .table-card {
    display: flex !important;
    flex-direction: column !important;

    height: calc(100vh - 120px) !important;
    max-height: calc(100vh - 120px) !important;
    min-height: 520px !important;

    overflow: hidden !important;
}

/* Nur dieser Bereich scrollt */
#inventory-locations-content .location-table-scroll {
    flex: 1 1 0 !important;

    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;

    overflow-y: auto !important;
    overflow-x: auto !important;
}

/* Kopfzeile fest */
#inventory-locations-content .location-table-scroll thead th {
    position: sticky !important;
    top: 0 !important;
    z-index: 20 !important;

    background: #101E31;
}

/* Fußzeile bleibt fest direkt unter der Tabelle */
#inventory-locations-content .table-pagination {
    flex: 0 0 36px !important;

    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;

    box-sizing: border-box;

    margin: 0 !important;
    padding: 4px 10px !important;

    overflow: visible !important;
}

/* Pagination kompakter */
#inventory-locations-content .pagination-controls {
    gap: 6px !important;
}

#inventory-locations-content .pagination-controls select,
#inventory-locations-content .pagination-button {
    height: 25px !important;
    min-height: 25px !important;
}

/*
 * Alte Regeln neutralisieren, die ggf.
 * noch max-height oder overflow setzen.
 */
#inventory-locations-content .table-card,
#inventory-locations-content .location-table-scroll {
    box-sizing: border-box;
}


/* =========================================================
   LAGERPLÄTZE – HÖHE KORREKTUR
========================================================= */

#inventory-locations-content .table-card {
    display: flex !important;
    flex-direction: column !important;

    height: 430px !important;
    min-height: 0 !important;
    max-height: 430px !important;

    overflow: hidden !important;
}

#inventory-locations-content .location-table-scroll {
    flex: 1 1 auto !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    overflow-y: auto !important;
    overflow-x: auto !important;
}

/* Tabellenkopf bleibt sichtbar */
#inventory-locations-content .location-table-scroll thead th {
    position: sticky !important;
    top: 0 !important;
    z-index: 20 !important;

    background: #101E31;
}

/* Fußzeile bleibt fest */
#inventory-locations-content .table-pagination {
    flex: 0 0 38px !important;

    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;

    margin: 0 !important;
    padding: 5px 10px !important;

    box-sizing: border-box;
}


/* Lagerplatztabelle – finale Höhe */
#inventory-locations-content .table-card {
    height: 560px !important;
    max-height: 560px !important;
    min-height: 0 !important;
}


/* =========================================================
   ARTIKELTABELLE – 560PX + SCROLLBEREICH
========================================================= */


/* Tabellenkopf bleibt beim Scrollen sichtbar */
#article-view .table-card thead th {
    position: sticky !important;
    top: 0 !important;
    z-index: 20 !important;

    background: #101E31;
}

/* Scrollbar passend zum Lagerbereich */

#article-view .table-card::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

#article-view .table-card::-webkit-scrollbar-track {
    background: #0A1524;
}

#article-view .table-card::-webkit-scrollbar-thumb {
    background: #334B68;
    border-radius: 6px;
}


/* =========================================================
   ARTIKEL – SCROLLTABELLE + FESTE FUSSZEILE
========================================================= */


#article-view .article-table-scroll {
    flex: 1 1 auto;

    min-height: 0;

    overflow-y: auto;
    overflow-x: auto;
}

#article-view .article-table-scroll table {
    width: 100%;
}

#article-view .article-table-scroll thead th {
    position: sticky;
    top: 0;
    z-index: 20;

    background: #101E31;
}

#article-view .article-pagination {
    flex: 0 0 38px;

    height: 38px;
    min-height: 38px;

    margin: 0;
    padding: 5px 10px;
}

#article-view .article-table-scroll {
    scrollbar-width: thin;
    scrollbar-color: #334B68 #0A1524;
}


/* =========================================================
   ARTIKELTABELLE – FINALE HÖHE
========================================================= */



/* =========================================================
   ARTIKELTABELLE – FINALE HÖHE 580PX
========================================================= */



/* =========================================================
   ARTIKELTABELLE – FINALE HÖHE 580PX
========================================================= */



/* =========================================================
   ARTIKELTABELLE – FINALE HÖHE 590PX
========================================================= */



/* Artikeltabelle – finale Höhe 615px */


/* =========================================================
   ARTIKELTABELLE – FINALE HÖHE 610PX
========================================================= */



/* =========================================================
   UMLAGERUNG
========================================================= */

.transfer-editor {
    margin-bottom: 12px;
    padding: 12px;

    border: 1px solid var(--border);
    border-radius: 8px;

    background: #0A1524;
}

.transfer-editor.hidden {
    display: none;
}

.transfer-grid {
    display: grid;
    grid-template-columns:
        minmax(220px, 1.4fr)
        minmax(200px, 1.2fr)
        100px
        minmax(220px, 1.4fr)
        100px;

    gap: 10px 14px;
    align-items: end;
}

.transfer-grid label {
    display: flex;
    flex-direction: column;
    gap: 5px;

    color: var(--text-muted);
    font-size: 8px;
}

.transfer-grid input,
.transfer-grid select {
    box-sizing: border-box;

    height: 29px;
    min-height: 29px;

    padding: 4px 7px;

    border: 1px solid #29405D;
    border-radius: 6px;

    outline: none;

    background: #0A1626;
    color: var(--text-primary);

    font-size: 9px;
}

.transfer-grid input:focus,
.transfer-grid select:focus {
    border-color: var(--kitlog-blue);

    box-shadow:
        0 0 0 2px rgba(43,140,255,0.10);
}

.transfer-grid input[readonly] {
    opacity: 0.75;
}

.transfer-note {
    grid-column: 1 / -1;
    max-width: 540px;
}

.transfer-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;

    margin-top: 12px;
}

.transfer-actions .btn-primary,
.transfer-actions .btn-secondary {
    width: auto;
    min-width: 90px;

    height: 30px;
    min-height: 30px;

    padding: 0 12px;

    font-size: 9px;
}

/* Zahlenpfeile ausblenden */
#transfer-quantity::-webkit-inner-spin-button,
#transfer-quantity::-webkit-outer-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}

#transfer-quantity {
    -moz-appearance: textfield;
    appearance: textfield;
}


/* =========================================================
   UMLAGERUNG – SUCH-/NACHSCHLAGEFELDER
========================================================= */

.transfer-lookup {
    position: relative;
}

.transfer-lookup > input {
    width: 100%;
}

.transfer-lookup-results {
    position: absolute;

    top: calc(100% + 4px);
    left: 0;

    z-index: 100;

    width: 360px;
    max-width: 70vw;

    max-height: 260px;

    overflow-y: auto;

    border: 1px solid #29405D;
    border-radius: 7px;

    background: #0B1828;

    box-shadow:
        0 10px 30px rgba(0,0,0,0.35);
}

.transfer-lookup-results.hidden {
    display: none;
}

.transfer-lookup-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    width: 100%;

    padding: 8px 10px;

    border: none;
    border-bottom: 1px solid rgba(255,255,255,0.045);

    background: transparent;
    color: var(--text-primary);

    text-align: left;

    cursor: pointer;
}

.transfer-lookup-item:last-child {
    border-bottom: none;
}

.transfer-lookup-item:hover {
    background: rgba(43,140,255,0.08);
}

.transfer-lookup-item strong {
    font-size: 9px;
    font-weight: 600;
}

.transfer-lookup-item > span {
    margin-top: 2px;

    color: var(--text-secondary);

    font-size: 8px;
}

.transfer-lookup-item .transfer-lookup-meta {
    color: var(--kitlog-blue);
}

.transfer-lookup-empty {
    padding: 10px;

    color: var(--text-muted);

    font-size: 8px;
}

/* kompakte Scrollbar */
.transfer-lookup-results {
    scrollbar-width: thin;
    scrollbar-color: #334B68 #0A1524;
}


/* =========================================================
   BESTÄNDE – SCROLL + FESTE FUSSZEILE
========================================================= */

#inventory-stock-content .table-card {
    display: flex !important;
    flex-direction: column !important;

    height: 560px !important;
    max-height: 560px !important;
    min-height: 0 !important;

    overflow: hidden !important;
}

#inventory-stock-content .inventory-table-scroll {
    flex: 1 1 auto;

    min-height: 0;

    overflow-y: auto;
    overflow-x: auto;
}

#inventory-stock-content .inventory-table-scroll table {
    width: 100%;
    min-width: 1180px;
}

#inventory-stock-content .inventory-table-scroll thead th {
    position: sticky;
    top: 0;
    z-index: 20;

    background: #101E31;
}

#inventory-stock-content .inventory-pagination {
    flex: 0 0 38px;

    height: 38px;
    min-height: 38px;

    margin: 0;
    padding: 5px 10px;
}

#inventory-stock-content .inventory-table-scroll {
    scrollbar-width: thin;
    scrollbar-color: #334B68 #0A1524;
}


/* =========================================================
   BEWEGUNGSJOURNAL
========================================================= */

#inventory-movements-content.hidden {
    display: none;
}

.movement-filterbar {
    gap: 9px;
}

.movement-date-field {
    display: flex;
    align-items: center;
    gap: 5px;

    color: var(--text-muted);
    font-size: 8px;
}

.movement-date-field input {
    height: 28px;
    min-height: 28px;

    box-sizing: border-box;

    border: 1px solid #29405D;
    border-radius: 6px;

    padding: 3px 6px;

    background: #0A1626;
    color: var(--text-primary);

    font-size: 9px;
}

#movement-reset-filter {
    width: auto;
    min-width: 80px;

    height: 28px;
    min-height: 28px;

    padding: 0 10px;

    font-size: 8px;
}

.movement-table-card {
    display: flex !important;
    flex-direction: column !important;

    height: 560px !important;
    max-height: 560px !important;
    min-height: 0 !important;

    overflow: hidden !important;
}

.movement-table-scroll {
    flex: 1 1 auto;

    min-height: 0;

    overflow-y: auto;
    overflow-x: auto;

    scrollbar-width: thin;
    scrollbar-color: #334B68 #0A1524;
}

.movement-table-scroll table {
    width: 100%;
    min-width: 1200px;
}

.movement-table-scroll thead th {
    position: sticky;
    top: 0;
    z-index: 20;

    background: #101E31;
}

.movement-pagination {
    flex: 0 0 38px;

    height: 38px;
    min-height: 38px;

    margin: 0;
    padding: 5px 10px;
}


/* =========================================================
   BEWEGUNGSJOURNAL – FACHLICHE VON → NACH SICHT
========================================================= */

.movement-table-scroll table {
    min-width: 1350px;
}

.movement-table-scroll th .secondary {
    display: block;

    margin-top: 2px;

    font-size: 7px;
    font-weight: 400;

    color: var(--text-muted);
}

.movement-time {
    white-space: nowrap;
}

.movement-location {
    min-width: 115px;
}

.movement-location strong {
    display: block;

    white-space: nowrap;
}

.movement-location .secondary {
    display: block;

    min-height: 10px;
    margin-top: 2px;
}

.movement-arrow-column {
    width: 34px !important;
    min-width: 34px !important;

    padding-left: 4px !important;
    padding-right: 4px !important;

    text-align: center !important;
}

.movement-direction {
    color: var(--kitlog-blue);

    font-size: 16px;
    font-weight: 500;
}


/* Bewegungsarten */

.movement-type {
    display: inline-flex;
    align-items: center;

    min-height: 21px;

    padding: 2px 7px;

    border-radius: 5px;

    white-space: nowrap;

    font-size: 8px;
    font-weight: 500;
}

.movement-type-transfer {
    background: rgba(55, 205, 120, 0.09);
    color: #49D17D;
}

.movement-type-receipt {
    background: rgba(43, 140, 255, 0.10);
    color: #4CA0FF;
}

.movement-type-consumption {
    background: rgba(190, 95, 255, 0.10);
    color: #C67AFF;
}

.movement-type-output {
    background: rgba(55, 205, 120, 0.09);
    color: #49D17D;
}

.movement-type-default {
    background: rgba(255,255,255,0.05);
    color: var(--text-secondary);
}


/* =========================================================
   BEWEGUNGSJOURNAL – DATUMSFILTER FEINSCHLIFF
========================================================= */

#inventory-movements-content .movement-date-field {
    display: flex;
    align-items: center;
    gap: 6px;

    color: var(--text-muted);

    font-size: 8px;
    font-weight: 400;
}

/* Datumseingabe optisch wie die restlichen Filter */
#inventory-movements-content .movement-date-field input[type="date"] {
    height: 28px;
    min-height: 28px;

    padding: 3px 7px;

    font-family: inherit !important;
    font-size: 9px !important;
    font-weight: 400;

    line-height: normal;

    color: var(--text-primary);

    background: #0A1626;

    border: 1px solid #29405D;
    border-radius: 6px;
}

/* Browser-Datumsbestandteile ebenfalls gleiche Schrift */
#inventory-movements-content
.movement-date-field
input[type="date"]::-webkit-datetime-edit {
    font-family: inherit;
    font-size: 9px;
}

#inventory-movements-content
.movement-date-field
input[type="date"]::-webkit-datetime-edit-fields-wrapper {
    font-family: inherit;
}

#inventory-movements-content
.movement-date-field
input[type="date"]::-webkit-datetime-edit-text,
#inventory-movements-content
.movement-date-field
input[type="date"]::-webkit-datetime-edit-day-field,
#inventory-movements-content
.movement-date-field
input[type="date"]::-webkit-datetime-edit-month-field,
#inventory-movements-content
.movement-date-field
input[type="date"]::-webkit-datetime-edit-year-field {
    font-family: inherit;
    font-size: 9px;
}


/* =========================================================
   BEWEGUNGSJOURNAL – DATUMSFILTER HARD-FIX
========================================================= */

/* Von / Bis */
#inventory-movements-content
.movement-filterbar
label.movement-date-field {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;

    gap: 6px !important;

    font-family: inherit !important;
    font-size: 8px !important;
    font-weight: 400 !important;
    line-height: 1 !important;

    color: var(--text-muted) !important;
}

/* Datumseingabefeld */
#inventory-movements-content
.movement-filterbar
label.movement-date-field
input[type="date"] {
    width: 138px !important;

    height: 30px !important;
    min-height: 30px !important;

    padding: 0 8px !important;

    font-family: inherit !important;
    font-size: 9px !important;
    font-weight: 400 !important;
    line-height: 30px !important;

    color: var(--text-secondary) !important;

    background: #0A1626 !important;

    border: 1px solid #29405D !important;
    border-radius: 6px !important;
}

/* Chromium: tt.mm.jjjj */
#inventory-movements-content
input[type="date"]::-webkit-datetime-edit {
    font-family: inherit !important;
    font-size: 9px !important;
    font-weight: 400 !important;

    color: var(--text-secondary) !important;
}

#inventory-movements-content
input[type="date"]::-webkit-datetime-edit-fields-wrapper,
#inventory-movements-content
input[type="date"]::-webkit-datetime-edit-day-field,
#inventory-movements-content
input[type="date"]::-webkit-datetime-edit-month-field,
#inventory-movements-content
input[type="date"]::-webkit-datetime-edit-year-field,
#inventory-movements-content
input[type="date"]::-webkit-datetime-edit-text {
    font-family: inherit !important;
    font-size: 9px !important;
    font-weight: 400 !important;
}


/* Bewegungsjournal – Datumsfelder ohne Browser-Nativstil */

#inventory-movements-content .movement-date-field {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
}

#inventory-movements-content .movement-date-label {
    font-family: inherit !important;
    font-size: 8px !important;
    font-weight: 400 !important;
    color: var(--text-muted) !important;
}

#inventory-movements-content
.movement-date-field input[type="text"] {
    box-sizing: border-box !important;

    width: 120px !important;
    height: 30px !important;
    min-height: 30px !important;

    padding: 0 8px !important;

    border: 1px solid #29405D !important;
    border-radius: 6px !important;

    background: #0A1626 !important;
    color: var(--text-primary) !important;

    font-family: inherit !important;
    font-size: 9px !important;
    font-weight: 400 !important;

    outline: none !important;
}

#inventory-movements-content
.movement-date-field input[type="text"]::placeholder {
    font-family: inherit !important;
    font-size: 9px !important;
    font-weight: 400 !important;

    color: var(--text-muted) !important;
    opacity: 1;
}

#inventory-movements-content
.movement-date-field input[type="text"]:focus {
    border-color: var(--kitlog-blue) !important;
}


/* =========================================================
   BEWEGUNGSJOURNAL – DATUMSFILTER KOMPAKT
========================================================= */

#inventory-movements-content .movement-date-label {
    font-family: inherit !important;
    font-size: 7px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    color: var(--text-muted) !important;
}

#inventory-movements-content
.movement-date-field input[type="text"] {
    font-family: inherit !important;
    font-size: 8px !important;
    font-weight: 400 !important;
    line-height: 1 !important;

    width: 120px !important;
    height: 28px !important;
    min-height: 28px !important;

    padding: 0 8px !important;
}

#inventory-movements-content
.movement-date-field input[type="text"]::placeholder {
    font-family: inherit !important;
    font-size: 8px !important;
    font-weight: 400 !important;

    color: var(--text-muted) !important;
    opacity: 1 !important;
}

/* Von/Bis näher an die Felder */
#inventory-movements-content .movement-date-field {
    gap: 5px !important;
}


/* =========================================================
   BEWEGUNGSJOURNAL – DATUM 8PX FINAL
========================================================= */

#inventory-movements-content .movement-date-label {
    font-size: 8px !important;
    font-weight: 400 !important;
    font-family: inherit !important;
}

#inventory-movements-content
.movement-date-field input[type="text"] {
    font-size: 8px !important;
    font-weight: 400 !important;
    font-family: inherit !important;

    height: 28px !important;
    min-height: 28px !important;
}

#inventory-movements-content
.movement-date-field input[type="text"]::placeholder {
    font-size: 8px !important;
    font-weight: 400 !important;
    font-family: inherit !important;
    opacity: 1 !important;
}


/* =========================================================
   WARENEINGANG – GRUNDANSICHT
========================================================= */

.empty-view-card {
    display: flex;
    flex-direction: column;
    gap: 5px;

    margin-top: 12px;
    padding: 16px;

    min-height: 70px;

    box-sizing: border-box;

    border: 1px solid var(--border);
    border-radius: 8px;

    background: #0A1524;
}

.empty-view-card strong {
    color: var(--text-primary);
    font-size: 10px;
}

.empty-view-card span {
    color: var(--text-muted);
    font-size: 8px;
}


/* =========================================================
   WARENEINGANG – LISTEN
========================================================= */

.goods-receipt-table-card {
    display: flex !important;
    flex-direction: column !important;

    height: 560px !important;
    max-height: 560px !important;
    min-height: 0 !important;

    overflow: hidden !important;
}

.goods-receipt-table-scroll {
    flex: 1 1 auto;
    min-height: 0;

    overflow-y: auto;
    overflow-x: auto;

    scrollbar-width: thin;
    scrollbar-color: #334B68 #0A1524;
}

.goods-receipt-table-scroll table {
    width: 100%;
    min-width: 1100px;
}

.goods-receipt-table-scroll thead th {
    position: sticky;
    top: 0;
    z-index: 20;

    background: #101E31;
}


/* =========================================================
   WARENEINGANG – TAB SICHTBARKEIT FINAL
========================================================= */

#goods-receipt-open-content.hidden,
#goods-receipt-posted-content.hidden,
#goods-receipt-putaway-content.hidden {
    display: none !important;
}

#goods-receipt-open-content:not(.hidden),
#goods-receipt-posted-content:not(.hidden),
#goods-receipt-putaway-content:not(.hidden) {
    display: flex !important;
    flex-direction: column !important;
}


/* =========================================================
   WARENEINGANG – DETAIL
========================================================= */

.clickable-row {
    cursor: pointer;
}

.clickable-row:hover {
    background: rgba(43, 140, 255, 0.05);
}

.goods-receipt-detail {
    margin-top: 12px;
    padding: 12px;

    border: 1px solid #29405D;
    border-radius: 8px;

    background: #0A1524;
}

.goods-receipt-detail.hidden {
    display: none !important;
}

.goods-receipt-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 12px;
}

.goods-receipt-detail-header h3 {
    margin: 0;

    color: var(--text-primary);
    font-size: 11px;
}

.goods-receipt-detail-header span {
    display: block;

    margin-top: 3px;

    color: var(--text-muted);
    font-size: 8px;
}

.goods-receipt-head-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(160px, 1fr));

    gap: 8px 12px;

    margin-bottom: 12px;
}

.goods-receipt-head-grid label {
    display: flex;
    flex-direction: column;
    gap: 4px;

    color: var(--text-muted);
    font-size: 8px;
}

.goods-receipt-head-grid input {
    box-sizing: border-box;

    width: 100%;
    height: 28px;

    padding: 0 7px;

    border: 1px solid #29405D;
    border-radius: 6px;

    background: #0A1626;
    color: var(--text-secondary);

    font-family: inherit;
    font-size: 9px;
}

.goods-receipt-detail-table-scroll {
    overflow-x: auto;
}

.goods-receipt-detail-table-scroll table {
    width: 100%;
    min-width: 1150px;
}

.goods-receipt-detail-table-scroll input,
.goods-receipt-detail-table-scroll select {
    box-sizing: border-box;

    height: 27px;

    border: 1px solid #29405D;
    border-radius: 5px;

    padding: 0 6px;

    background: #0A1626;
    color: var(--text-primary);

    font-family: inherit;
    font-size: 8px;
}

.gr-item-received {
    width: 85px;
}

.gr-item-batch {
    width: 120px;
}

.gr-item-expiry {
    width: 125px;
}

.gr-item-quality {
    width: 105px;
}

.gr-item-note {
    width: 160px;
}

.gr-item-save {
    width: auto !important;
    min-width: 70px;

    height: 27px !important;
    min-height: 27px !important;

    padding: 0 8px !important;

    font-size: 8px !important;
}


.goods-receipt-detail-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}


/* =========================================================
   WARENEINGANG – EINLAGERUNG
========================================================= */

.putaway-entry-grid {
    display: grid;

    grid-template-columns:
        minmax(220px, 1.5fr)
        minmax(110px, .5fr)
        minmax(220px, 1.5fr);

    gap: 12px;

    margin-top: 12px;
    margin-bottom: 14px;
}

.putaway-entry-grid > label {
    display: flex;
    flex-direction: column;
    gap: 4px;

    color: var(--text-muted);
    font-size: 8px;
}

.putaway-entry-grid input {
    box-sizing: border-box;

    width: 100%;
    height: 28px;

    padding: 0 7px;

    border: 1px solid #29405D;
    border-radius: 6px;

    background: #0A1626;
    color: var(--text-primary);

    font-family: inherit;
    font-size: 9px;
}

.putaway-actions {
    justify-content: flex-end;
}


/* =========================================================
   WARENEINGANG – ZIELPLATZ LOOKUP FIX
========================================================= */

#putaway-editor {
    overflow: visible !important;
}

#putaway-editor .putaway-entry-grid {
    overflow: visible !important;
}

#putaway-editor .transfer-lookup {
    position: relative !important;
    overflow: visible !important;
}

#putaway-target-results {
    position: absolute !important;

    top: calc(100% + 4px) !important;
    left: 0 !important;
    right: 0 !important;

    z-index: 9999 !important;

    max-height: 240px !important;
    overflow-y: auto !important;

    background: #0A1626 !important;

    border: 1px solid #29405D !important;
    border-radius: 6px !important;

    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.35) !important;
}

#putaway-target-results.hidden {
    display: none !important;
}

#putaway-target-results .lookup-item {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;

    padding: 7px 9px !important;

    cursor: pointer !important;
}

#putaway-target-results .lookup-item:hover {
    background: rgba(43, 140, 255, 0.10) !important;
}

#putaway-target-results .lookup-item strong {
    font-size: 9px !important;
}

#putaway-target-results .lookup-item span {
    font-size: 8px !important;
    color: var(--text-muted) !important;
}

.putaway-target-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.putaway-recommendation {
    font-size: 8px;
    font-weight: 600;
    opacity: 0.9;
}

.putaway-target-item {
    gap: 3px !important;
}

/* =========================================================
   GEBUCHTER WE – EINLAGERUNGSHISTORIE
========================================================= */

.gr-putaway-history {
    margin-top: 18px;
    padding-top: 14px;

    border-top: 1px solid #29405D;
}

.gr-putaway-history-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 16px;

    margin-bottom: 10px;
}

.gr-putaway-history-header h4 {
    margin: 0;

    font-size: 10px;
    font-weight: 600;
}

.gr-putaway-history-header > div > span {
    display: block;

    margin-top: 3px;

    font-size: 8px;
    color: var(--text-muted);
}

.gr-putaway-remaining {
    display: flex;
    align-items: baseline;
    gap: 5px;

    white-space: nowrap;
}

.gr-putaway-remaining strong {
    font-size: 12px;
}

.gr-putaway-remaining span {
    font-size: 8px;
    color: var(--text-muted);
}

.gr-putaway-remaining.completed strong {
    color: var(--success, #4caf50);
}

/* =========================================================
   TRANSPORTAUFTRÄGE
========================================================= */

#transport-orders-view .filterbar {
    margin-bottom: 12px;
}

#transport-order-bulk-actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;

    margin: 0 0 12px 0;
    padding: 0;

    background: transparent;
    border: 0;
}

#transport-order-bulk-actions
#transport-order-selected-count {
    min-width: 90px;
}

#transport-order-detail {
    margin-top: 14px;
}

#transport-order-detail
.goods-receipt-head-grid {
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
}

#transport-order-detail textarea {
    width: 100%;
    max-width: 100%;
    min-height: 70px;
}

@media (max-width: 1100px) {

    #transport-order-detail
    .goods-receipt-head-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

/* =========================================================
   TRANSPORTAUFTRÄGE – Layout Feinschliff
========================================================= */

#transport-orders-view .table-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

#transport-orders-view .ta-pagination-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

#transport-orders-view .ta-footer-separator {
    width: 1px;
    height: 22px;
    background: var(--border-color, #2a3d55);
    opacity: 0.8;
}

#transport-orders-view
#transport-order-selected-count {
    white-space: nowrap;
}

#transport-orders-view
.ta-bulk-button {
    min-height: 34px;
    padding: 7px 14px;
}

#transport-orders-view
.ta-bulk-button:disabled {
    opacity: 0.45;
    cursor: default;
}


/* Detailbereich bewusst weniger dominant */

#transport-order-detail {
    margin-top: 12px;
    padding-top: 14px;
    padding-bottom: 14px;
}

#transport-order-detail
.goods-receipt-detail-header {
    margin-bottom: 10px;
}

#transport-order-detail
.goods-receipt-head-grid {
    gap: 8px 12px;
}

#transport-order-detail label {
    margin-bottom: 0;
}

#transport-order-detail input {
    min-height: 34px;
}

#transport-order-detail textarea {
    min-height: 52px;
    resize: vertical;
}


/* kleinere Displays */

@media (max-width: 1200px) {

    #transport-orders-view .table-pagination {
        align-items: flex-start;
        flex-direction: column;
    }

    #transport-orders-view .pagination-controls {
        width: 100%;
        justify-content: flex-end;
    }
}


/* =========================================================
   TRANSPORTAUFTRÄGE – KOMPAKTES FINAL-LAYOUT
========================================================= */

/* ---------- Tabellenfuß ---------- */

#transport-orders-view .table-pagination {
    min-height: 52px;
    padding: 10px 14px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

#transport-orders-view .ta-pagination-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

#transport-orders-view
#transport-order-record-info {
    white-space: nowrap;
}

/* Auswahl nur sichtbar, wenn tatsächlich gewählt */
#transport-orders-view
#transport-order-selected-count.ta-selection-empty,
#transport-orders-view
#transport-order-bulk-start.ta-selection-empty,
#transport-orders-view
.ta-footer-separator.ta-selection-empty {
    display: none;
}

#transport-orders-view
.ta-footer-separator {
    height: 20px;
}


/* ---------- Detailkarte ---------- */

#transport-order-detail {
    margin-top: 12px;
    padding: 16px 18px;
}

#transport-order-detail
.goods-receipt-detail-header {
    margin-bottom: 12px;
}

#transport-order-detail
.goods-receipt-detail-header h3 {
    margin-bottom: 2px;
}


/* Vier kompakte Spalten auf Desktop */

#transport-order-detail
.goods-receipt-head-grid {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 12px 24px;
}


/* Labels wie Informationsfelder */

#transport-order-detail label {
    display: flex;
    flex-direction: column;
    gap: 3px;

    font-size: 11px;
    color: #6f94bc;
}


/* Readonly-Felder nicht wie Formulare aussehen lassen */

#transport-order-detail input[readonly] {
    height: auto;
    min-height: 0;

    padding: 2px 0 4px 0;

    border: 0;
    border-radius: 0;

    background: transparent;

    color: #e8f1ff;
    font-size: 13px;
    font-weight: 500;

    box-shadow: none;
}


/* Notiz */

#transport-order-detail > label:last-child {
    margin-top: 14px;
}

#transport-order-detail textarea[readonly] {
    min-height: 46px;
    max-height: 90px;

    padding: 8px 10px;

    background: #0b1929;
    color: #d8e7f8;

    border: 1px solid #27415e;
    border-radius: 6px;

    resize: vertical;
}


/* Aktionen oben rechts kompakt */

#transport-order-detail
.goods-receipt-detail-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

#transport-order-detail
.goods-receipt-detail-actions button {
    min-height: 36px;
    padding: 8px 14px;
}


/* ---------- responsive ---------- */

@media (max-width: 1400px) {

    #transport-order-detail
    .goods-receipt-head-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1000px) {

    #transport-order-detail
    .goods-receipt-head-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    #transport-orders-view
    .table-pagination {
        flex-direction: column;
        align-items: stretch;
    }

    #transport-orders-view
    .pagination-controls {
        justify-content: flex-end;
    }
}


/* =========================================================
   TRANSPORTAUFTRÄGE – Fussleiste immer unten
========================================================= */

#transport-orders-view {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 120px);
}

#transport-orders-view.hidden {
    display: none;
}

#transport-orders-view
.ta-bottom-pagination {
    margin-top: auto;

    border: 1px solid #28415d;
    border-radius: 0 0 10px 10px;

    background: #0b1929;

    min-height: 54px;

    padding: 10px 14px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

#transport-orders-view
.ta-pagination-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

#transport-orders-view
.pagination-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

#transport-orders-view
#transport-order-detail {
    margin-bottom: 14px;
}

/*
 * Die eigentliche Tabelle soll bei wenigen Datensätzen
 * nicht künstlich riesig werden.
 */
#transport-orders-view
.table-card {
    flex: 0 0 auto;
}


/* =========================================================
   TRANSPORTAUFTRÄGE – scrollbare Übersicht
========================================================= */

#transport-orders-view {
    height: calc(100vh - 32px);
    min-height: 0;
    overflow: hidden;
}

#transport-orders-view > .page-header,
#transport-orders-view > .filterbar,
#transport-orders-view > #transport-order-detail,
#transport-orders-view > .ta-bottom-pagination {
    flex: 0 0 auto;
}

/*
 * Tabellenkarte nimmt den verbleibenden Platz ein.
 */
#transport-orders-view > .table-card {
    flex: 1 1 auto;
    min-height: 180px;

    display: flex;
    flex-direction: column;

    overflow: hidden;
}

/*
 * Nur die eigentlichen Datensätze scrollen.
 */
#transport-orders-view
.goods-receipt-table-scroll {
    flex: 1 1 auto;
    min-height: 0;

    overflow-y: auto;
    overflow-x: auto;
}

/*
 * Tabellenkopf bleibt beim Scrollen sichtbar.
 */
#transport-orders-view
.goods-receipt-table-scroll thead th {
    position: sticky;
    top: 0;
    z-index: 2;
}

/*
 * Fußleiste bleibt immer am unteren Rand der View.
 */
#transport-orders-view
.ta-bottom-pagination {
    flex: 0 0 auto;
    margin-top: 12px;
}


/* =========================================================
   FIX: TA-Fußleiste innerhalb des sichtbaren Bereichs
========================================================= */

#transport-orders-view {
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

/*
 * Tabelle bekommt den verfügbaren Restplatz.
 */
#transport-orders-view > .table-card {
    flex: 1 1 auto;
    min-height: 0;

    display: flex;
    flex-direction: column;

    overflow: hidden;
}

/*
 * Nur die Tabelle scrollt.
 */
#transport-orders-view
.goods-receipt-table-scroll {
    flex: 1 1 auto;
    min-height: 0;

    overflow-y: auto;
    overflow-x: auto;
}

/*
 * Fußleiste bleibt Bestandteil des sichtbaren Layouts.
 */
#transport-orders-view
.ta-bottom-pagination {
    flex: 0 0 auto;
    margin-top: 10px;
}

/*
 * Sticky Tabellenkopf.
 */
#transport-orders-view
.goods-receipt-table-scroll thead th {
    position: sticky;
    top: 0;
    z-index: 3;
}


/* =========================================================
   LAYOUT FIX – sichtbare View-Höhe
========================================================= */

html,
body {
    height: 100%;
    margin: 0;
}

.app-layout {
    height: 100vh;
    min-height: 0;
    overflow: hidden;
}

.main-content {
    height: 100vh;
    min-height: 0;
    box-sizing: border-box;
    overflow: hidden;
}


/* =========================================================
   TRANSPORTAUFTRÄGE – festes Bildschirm-Layout
========================================================= */

#transport-orders-view {
    height: 100%;
    min-height: 0;

    display: flex;
    flex-direction: column;

    overflow: hidden;
}

#transport-orders-view.hidden {
    display: none;
}


/* Kopf und Filter benötigen nur ihre natürliche Höhe */

#transport-orders-view > .page-header,
#transport-orders-view > .filterbar {
    flex: 0 0 auto;
}


/* Tabelle nimmt den verfügbaren Mittelbereich ein */

#transport-orders-view > .table-card {
    flex: 1 1 0;
    min-height: 120px;

    display: flex;
    flex-direction: column;

    overflow: hidden;
}


/* Nur Tabelleninhalt scrollt */

#transport-orders-view
.goods-receipt-table-scroll {
    flex: 1 1 0;
    min-height: 0;

    overflow-x: auto;
    overflow-y: auto;
}


/* Tabellenkopf bleibt sichtbar */

#transport-orders-view
.goods-receipt-table-scroll thead th {
    position: sticky;
    top: 0;
    z-index: 5;
}


/* Detailansicht darf nicht die ganze Seite verdrängen */

#transport-order-detail {
    flex: 0 1 auto;

    max-height: 310px;
    overflow-y: auto;

    margin-top: 10px;
    margin-bottom: 10px;
}


/* Fußleiste ist immer der letzte feste Bereich */

#transport-orders-view
.ta-bottom-pagination {
    flex: 0 0 auto;

    margin-top: 0;

    min-height: 52px;

    box-sizing: border-box;
}


/* =========================================================
   FINALER VIEW-LAYOUT-FIX
========================================================= */

.app-layout {
    height: 100vh;
    min-height: 0;
    overflow: hidden;
}

.main-content {
    height: 100vh;
    min-height: 0;
    box-sizing: border-box;

    display: flex;
    flex-direction: column;

    overflow: hidden;
}

.main-content > .app-view {
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
}


/* =========================================================
   TRANSPORTAUFTRÄGE
========================================================= */

#transport-orders-view {
    flex: 1 1 0;
    min-height: 0;

    display: flex;
    flex-direction: column;

    overflow: hidden;
}

#transport-orders-view.hidden {
    display: none;
}

#transport-orders-view > .page-header,
#transport-orders-view > .filterbar,
#transport-orders-view > .ta-bottom-pagination {
    flex: 0 0 auto;
}


/* Tabelle ist der flexible Bereich */

#transport-orders-view > .table-card {
    flex: 1 1 0;
    min-height: 0;

    display: flex;
    flex-direction: column;

    overflow: hidden;
}

#transport-orders-view .goods-receipt-table-scroll {
    flex: 1 1 0;
    min-height: 0;

    overflow-y: auto;
    overflow-x: auto;
}


/* Detail darf Platz nehmen, aber nicht alles verdrängen */

#transport-order-detail {
    flex: 0 0 auto;

    max-height: 260px;
    overflow-y: auto;

    margin-top: 10px;
    margin-bottom: 10px;
}


/* Fußleiste bleibt sichtbar */

#transport-orders-view .ta-bottom-pagination {
    flex: 0 0 auto;
    min-height: 52px;
    margin-top: 0;
}


/* Tabellenkopf sticky */

#transport-orders-view
.goods-receipt-table-scroll thead th {
    position: sticky;
    top: 0;
    z-index: 5;
}

/* =========================================================
   KORREKTUR: APP-HÖHE MIT TOPBAR
========================================================= */

.app-layout {
    height: calc(100vh - 76px) !important;
    min-height: 0;
    overflow: hidden;
}

.main-content {
    height: 100% !important;
    min-height: 0;

    display: flex;
    flex-direction: column;

    box-sizing: border-box;
    overflow: hidden;
}


/* =========================================================
   TRANSPORTAUFTRÄGE – verfügbare Höhe vollständig nutzen
========================================================= */

#transport-orders-view {
    flex: 1 1 0;
    height: auto !important;
    min-height: 0;

    display: flex;
    flex-direction: column;

    overflow: hidden;
}

#transport-orders-view.hidden {
    display: none;
}


/* Header + Filter feste Höhe */

#transport-orders-view > .page-header,
#transport-orders-view > .filterbar {
    flex: 0 0 auto;
}


/* Tabelle nimmt verbleibenden Raum */

#transport-orders-view > .table-card {
    flex: 1 1 0;
    min-height: 0;

    display: flex;
    flex-direction: column;

    overflow: hidden;
}

#transport-orders-view
.goods-receipt-table-scroll {
    flex: 1 1 0;
    min-height: 0;

    overflow-y: auto;
    overflow-x: auto;
}


/* Detailansicht begrenzen */

#transport-order-detail {
    flex: 0 0 auto;

    max-height: 250px;
    overflow-y: auto;

    margin-top: 10px;
    margin-bottom: 10px;
}


/* Fußleiste bleibt im verfügbaren View-Bereich */

#transport-orders-view
.ta-bottom-pagination {
    flex: 0 0 auto;

    min-height: 52px;
    margin-top: 0;

    box-sizing: border-box;
}


/* Tabellenkopf bleibt beim Scrollen stehen */

#transport-orders-view
.goods-receipt-table-scroll thead th {
    position: sticky;
    top: 0;
    z-index: 5;
}


/* =========================================================
   WARENEINGANG – FESTES VIEW-LAYOUT
========================================================= */

#goods-receipt-view {
    flex: 1 1 0;
    height: auto !important;
    min-height: 0;

    display: flex;
    flex-direction: column;

    overflow: hidden;
}

#goods-receipt-view.hidden {
    display: none;
}


/* ---------------------------------------------------------
   Kopf + Tabs bleiben oben
--------------------------------------------------------- */

#goods-receipt-view > .page-header,
#goods-receipt-view > .view-tabs {
    flex: 0 0 auto;
}


/* ---------------------------------------------------------
   Die drei Tab-Inhalte nutzen den verbleibenden Platz
--------------------------------------------------------- */

#goods-receipt-open-content,
#goods-receipt-posted-content,
#goods-receipt-putaway-content {
    flex: 1 1 0;
    min-height: 0;

    display: flex;
    flex-direction: column;

    overflow: hidden;
}


/*
 * Wichtig:
 * Ein ausgeblendeter Tab darf trotz display:flex
 * nicht sichtbar werden.
 */
#goods-receipt-open-content.hidden,
#goods-receipt-posted-content.hidden,
#goods-receipt-putaway-content.hidden {
    display: none;
}


/* ---------------------------------------------------------
   Filter bleibt oben
--------------------------------------------------------- */

#goods-receipt-open-content > .filterbar,
#goods-receipt-posted-content > .filterbar,
#goods-receipt-putaway-content > .filterbar {
    flex: 0 0 auto;
}


/* ---------------------------------------------------------
   Tabellenkarte nimmt den verfügbaren Platz
--------------------------------------------------------- */

#goods-receipt-open-content > .table-card,
#goods-receipt-posted-content > .table-card,
#goods-receipt-putaway-content > .table-card {
    flex: 1 1 0;
    min-height: 120px;

    display: flex;
    flex-direction: column;

    overflow: hidden;
}


/* ---------------------------------------------------------
   Nur Tabelleninhalt scrollt
--------------------------------------------------------- */

#goods-receipt-view
.goods-receipt-table-scroll {
    flex: 1 1 0;
    min-height: 0;

    overflow-x: auto;
    overflow-y: auto;
}


/* Tabellenkopf sticky */

#goods-receipt-view
.goods-receipt-table-scroll thead th {
    position: sticky;
    top: 0;
    z-index: 5;
}


/* ---------------------------------------------------------
   Pagination bleibt unten in der Tabellenkarte
--------------------------------------------------------- */

#goods-receipt-view
.table-pagination {
    flex: 0 0 auto;

    min-height: 52px;

    box-sizing: border-box;
}


/* ---------------------------------------------------------
   Detailansichten
   dürfen den gesamten View nicht verdrängen
--------------------------------------------------------- */

#goods-receipt-detail,
#goods-receipt-posted-detail,
#goods-receipt-putaway-detail {
    flex: 0 0 auto;

    max-height: 300px;

    overflow-y: auto;
}



/* =========================================================
   LIEFERANTENSTAMM - Layout
   ---------------------------------------------------------
   Bewusst nach dem Vorbild von #transport-orders-view.
   Bei der spaeteren CSS-Konsolidierung sollten diese
   Bloecke zu einem gemeinsamen Muster zusammengefasst
   werden.
========================================================= */

#supplier-master-view {
    flex: 1 1 0;
    height: auto !important;
    min-height: 0;

    display: flex;
    flex-direction: column;

    overflow: hidden;
}

#supplier-master-view.hidden {
    display: none;
}

#supplier-master-view > .page-header,
#supplier-master-view > .filterbar {
    flex: 0 0 auto;
}

#supplier-master-view > .table-card {
    flex: 1 1 0;
    min-height: 0;

    display: flex;
    flex-direction: column;

    overflow: hidden;
}

#supplier-master-view
.goods-receipt-table-scroll {
    flex: 1 1 0;
    min-height: 0;

    overflow-y: auto;
    overflow-x: auto;
}

#supplier-master-view
.goods-receipt-table-scroll thead th {
    position: sticky;
    top: 0;
    z-index: 5;
}

#supplier-master-view
.ta-bottom-pagination {
    flex: 0 0 auto;

    min-height: 52px;
    margin-top: 0;

    box-sizing: border-box;
}


/* =========================================================
   GRUNDLAYOUT - ETAPPE A
   ---------------------------------------------------------
   Die Kopfzeilenhoehe wird nicht mehr fest angenommen.
   body ist eine senkrechte Flex-Spalte:
     - topbar nimmt so viel Platz wie sie braucht
     - app-layout bekommt exakt den Rest
   Dadurch entfaellt jede Rechnung mit einer festen Zahl.
========================================================= */

html {
    height: 100%;
}

body {
    height: 100vh;
    height: 100dvh;

    min-height: 0;

    display: flex;
    flex-direction: column;

    overflow: hidden;
}

.topbar {
    flex: 0 0 auto;
}

.app-layout {
    flex: 1 1 auto;

    height: auto !important;
    min-height: 0;

    overflow: hidden;
}


/* =========================================================
   ETAPPE B - ARTIKELSTAMM
   ---------------------------------------------------------
   Gleiches Muster wie bei den Transportauftraegen:
   Kopf und Filter fest, Tabelle nimmt den Rest,
   Fussleiste bleibt unten.
========================================================= */

#article-view {
    flex: 1 1 0;
    height: auto !important;
    min-height: 0;

    display: flex;
    flex-direction: column;

    overflow: hidden;
}

#article-view.hidden {
    display: none;
}

#article-view > .page-header,
#article-view > .filterbar {
    flex: 0 0 auto;
}

/*
 * Bisher: height: calc(100vh - 224px)
 * Die feste Zahl 224 war der Grund fuer das Wegrutschen
 * der Fussleiste. Jetzt nimmt der Bereich einfach den Rest.
 *
 * Ausserdem war die linke Spalte auf mindestens 650px
 * festgelegt. Beim Hineinzoomen passten 650 + 390 nicht
 * mehr nebeneinander, deshalb lief die Tabelle rechts aus
 * dem Bild. minmax(0, ...) erlaubt das Schrumpfen.
 */
#article-view > .content-grid {
    flex: 1 1 0;
    height: auto !important;
    min-height: 0;

    grid-template-columns: minmax(0, 1fr) minmax(0, 390px);

    overflow: hidden;
}

#article-view .content-grid > .table-card {
    height: auto !important;
    min-height: 0;

    display: flex;
    flex-direction: column;

    overflow: hidden;
}

#article-view .content-grid .article-table-scroll {
    flex: 1 1 0;
    min-height: 0;

    overflow-x: auto;
    overflow-y: auto;
}

#article-view .content-grid .article-table-scroll thead th {
    position: sticky;
    top: 0;
    z-index: 5;
}

#article-view .content-grid .table-pagination {
    flex: 0 0 auto;

    min-height: 52px;
    margin-top: 0;

    box-sizing: border-box;
}

/*
 * Das Detailpanel bekommt eine begrenzte Hoehe und scrollt
 * selbst. Die Knopfleiste unten ist bereits als sticky
 * angelegt und bleibt dadurch sichtbar.
 */
#article-view .content-grid > .detail-panel {
    height: auto !important;
    min-height: 0;

    overflow-y: auto;
}


/* =========================================================
   ETAPPE C - LAGER
   ---------------------------------------------------------
   Drei Reiter: Bestand, Lagerplaetze, Bewegungen.
   Jeder Reiter bekommt dieselbe Hoehenkette.
========================================================= */

#inventory-view {
    flex: 1 1 0;
    height: auto !important;
    min-height: 0;

    display: flex;
    flex-direction: column;

    overflow: hidden;
}

#inventory-view.hidden {
    display: none;
}


/* Kopf, Reiterleiste und Umlagerungs-Panel bleiben oben */

#inventory-view > .page-header,
#inventory-view > .view-tabs,
#inventory-view > #transfer-editor {
    flex: 0 0 auto;
}


/* Die drei Reiterinhalte nutzen den verbleibenden Platz */

#inventory-stock-content,
#inventory-locations-content,
#inventory-movements-content {
    flex: 1 1 0;
    min-height: 0;

    display: flex;
    flex-direction: column;

    overflow: hidden;
}

/*
 * Wichtig: ein ausgeblendeter Reiter darf trotz
 * display:flex nicht sichtbar werden.
 */
#inventory-stock-content.hidden,
#inventory-locations-content.hidden,
#inventory-movements-content.hidden {
    display: none;
}


/* Filterleisten und Editoren innerhalb der Reiter bleiben oben */

#inventory-view > div > .filterbar,
#inventory-view > div > #location-bulk-create-editor,
#inventory-view > div > #location-bulk-editor,
#inventory-view > div > #location-editor {
    flex: 0 0 auto;
}


/* Tabellenkarte nimmt den Rest */

#inventory-view .table-card {
    flex: 1 1 0;

    height: auto !important;
    min-height: 0;

    display: flex;
    flex-direction: column;

    overflow: hidden;
}


/* Nur der Tabelleninhalt scrollt */

#inventory-view .inventory-table-scroll,
#inventory-view .location-table-scroll,
#inventory-view .movement-table-scroll {
    flex: 1 1 0;
    min-height: 0;

    overflow-x: auto;
    overflow-y: auto;
}


/* Tabellenkopf bleibt beim Scrollen stehen */

#inventory-view .inventory-table-scroll thead th,
#inventory-view .location-table-scroll thead th,
#inventory-view .movement-table-scroll thead th {
    position: sticky;
    top: 0;
    z-index: 5;
}


/* Fussleiste bleibt unten */

#inventory-view .table-pagination {
    flex: 0 0 auto;

    min-height: 52px;
    margin-top: 0;

    box-sizing: border-box;
}


/* =========================================================
   ETAPPE E - ARTIKELDETAIL ALS POPUP
   ---------------------------------------------------------
   Die Abdunkelung .modal-backdrop ist bewusst allgemein
   gehalten und kann spaeter fuer weitere Module
   wiederverwendet werden.
========================================================= */

.modal-backdrop {
    position: fixed;
    inset: 0;

    z-index: 110;

    background: rgba(3, 8, 16, 0.62);
}

.modal-backdrop.hidden {
    display: none;
}


/* Die Liste nutzt jetzt die volle Breite */

#article-view > .content-grid {
    grid-template-columns: minmax(0, 1fr);
}


/* Das Detailpanel schwebt mittig ueber der Liste */

#article-view .detail-panel {
    position: fixed;

    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: min(920px, 94vw);
    max-height: 88vh;

    z-index: 120;

    overflow-y: auto;
    overscroll-behavior: contain;
}

#article-view .detail-panel.hidden {
    display: none !important;
}


/* =========================================================
   POPUP-KOPF BLEIBT STEHEN
   ---------------------------------------------------------
   Der Kopfbereich mit dem X klebt oben im Popup, damit man
   zum Schliessen nicht erst hochscrollen muss.
   Die Fussleiste mit den Knoepfen klebt bereits unten.
========================================================= */

#article-view .detail-panel > .detail-header {
    position: sticky;
    top: 0;

    z-index: 4;

    /*
     * Der urspruengliche Verlauf laeuft nach transparent aus.
     * Beim Kleben wuerde der Inhalt durchscheinen, deshalb
     * bekommt der Kopf eine deckende Grundfarbe.
     */
    background-color: var(--panel);

    background-image: linear-gradient(
        180deg,
        rgba(43, 140, 255, 0.045),
        transparent
    );
}


/* =========================================================
   POPUP-AUFBAU
   ---------------------------------------------------------
   Kopf oben fest, Inhalt scrollt, Fussleiste unten fest.
   Das ersetzt den vorherigen Versuch mit position: sticky.
========================================================= */

#article-view .detail-panel {
    display: flex;
    flex-direction: column;

    overflow: hidden;
}

#article-view .detail-panel > .detail-header,
#article-view .detail-panel > .detail-actions {
    flex: 0 0 auto;
}

#article-view .detail-panel > .detail-body {
    flex: 1 1 auto;
    min-height: 0;

    overflow-y: auto;
    overscroll-behavior: contain;
}

/*
 * Der Kopf braucht jetzt keine Klebewirkung mehr,
 * aber weiterhin eine deckende Grundfarbe.
 */
#article-view .detail-panel > .detail-header {
    position: static;

    background-color: var(--panel);
}


/* =========================================================
   SORTIERBARE SPALTENKOEPFE
========================================================= */

th.sortable {
    cursor: pointer;

    user-select: none;

    white-space: nowrap;
}

th.sortable:hover {
    color: var(--text-primary);
}

th.sortable .sort-arrow {
    font-size: 9px;

    color: var(--kitlog-blue);
}

th.sortable.sort-active {
    color: var(--text-primary);
}


/* =========================================================
   SORTIERUNG - STANDARDSPALTE GEDAEMPFT
   ---------------------------------------------------------
   Der Pfeil der Standardsortierung wird blasser dargestellt.
   So ist erkennbar, ob gerade eine eigene Sortierung aktiv
   ist oder nur der Ausgangszustand.
========================================================= */

th.sortable.sort-default {
    color: var(--text-secondary);
}

th.sortable.sort-default .sort-arrow {
    color: var(--text-muted);
}


/* =========================================================
   SPALTENFILTER
   ---------------------------------------------------------
   Die Filterzeile klebt direkt unter der Kopfzeile.
   Der Wert oben ist die Hoehe der Kopfzeile. Sollte sich
   die Kopfzeilenhoehe einmal aendern, ist das die einzige
   Stelle zum Nachziehen.
========================================================= */

thead tr.filter-row th {
    position: sticky !important;
    top: 34px !important;

    z-index: 4 !important;

    padding: 4px 6px !important;

    background: var(--panel-soft);

    border-bottom: 1px solid var(--border);
}

input.column-filter {
    width: 100%;

    box-sizing: border-box;

    padding: 3px 6px;

    font-size: 11px;
    font-weight: 400;

    color: var(--text-primary);

    background: var(--navy-dark);

    border: 1px solid var(--border);
    border-radius: 4px;
}

input.column-filter:focus {
    outline: none;

    border-color: var(--kitlog-blue);
}

input.column-filter::placeholder {
    color: var(--text-muted);
}


/* =========================================================
   BESTANDSUEBERSICHT - ZWEI ANSICHTEN
   ---------------------------------------------------------
   Gleiches Muster wie bei den Reitern im Wareneingang.
========================================================= */

#stock-article-content,
#stock-location-content {
    flex: 1 1 0;
    min-height: 0;

    display: flex;
    flex-direction: column;

    overflow: hidden;
}

#stock-article-content.hidden,
#stock-location-content.hidden {
    display: none;
}

#stock-article-content > .filterbar {
    flex: 0 0 auto;
}

#stock-article-content > .table-card {
    flex: 1 1 0;
    min-height: 0;

    display: flex;
    flex-direction: column;

    overflow: hidden;
}

#stock-article-content .stock-article-table-scroll {
    flex: 1 1 0;
    min-height: 0;

    overflow-x: auto;
    overflow-y: auto;
}

#stock-article-content
.stock-article-table-scroll thead th {
    position: sticky;
    top: 0;
    z-index: 5;
}

#stock-article-content .table-pagination {
    flex: 0 0 auto;

    min-height: 52px;

    box-sizing: border-box;
}

.stock-mode-tabs {
    flex: 0 0 auto;
}


/* =========================================================
   GESAMTBESTAND ALS EIGENER REITER
   ---------------------------------------------------------
   Ersetzt die vorherigen Regeln fuer den Umschalter.
========================================================= */

#inventory-articles-content {
    flex: 1 1 0;
    min-height: 0;

    display: flex;
    flex-direction: column;

    overflow: hidden;
}

#inventory-articles-content.hidden {
    display: none;
}

#inventory-articles-content > .filterbar {
    flex: 0 0 auto;
}

#inventory-articles-content > .table-card {
    flex: 1 1 0;
    min-height: 0;

    display: flex;
    flex-direction: column;

    overflow: hidden;
}

#inventory-articles-content .stock-article-table-scroll {
    flex: 1 1 0;
    min-height: 0;

    overflow-x: auto;
    overflow-y: auto;
}

#inventory-articles-content
.stock-article-table-scroll thead th {
    position: sticky;
    top: 0;
    z-index: 5;
}

#inventory-articles-content .table-pagination {
    flex: 0 0 auto;

    min-height: 52px;

    box-sizing: border-box;
}


/* =========================================================
   KNOEPFE IN DER KOPFZEILE
   ---------------------------------------------------------
   Seit die Suchfelder entfallen sind, stehen die Aktionen
   der jeweiligen Ansicht rechts oben in einer Reihe.
========================================================= */

.page-header-actions {
    display: flex;
    align-items: center;

    gap: 8px;

    flex-wrap: wrap;
}

.page-header-actions > div {
    display: flex;
    align-items: center;

    gap: 8px;
}

.page-header-actions > div.hidden {
    display: none;
}


/* =========================================================
   FILTERFELDER IN DER KOPFZEILE
   ---------------------------------------------------------
   Die Filterleiste entfaellt. Auswahlfelder und Knoepfe
   stehen jetzt rechts oben in einer Reihe.
========================================================= */

.page-header-actions select,
.page-header-actions .checkbox,
.page-header-actions .movement-date-field {
    margin: 0;
}

.page-header-actions .checkbox,
.page-header-actions .movement-date-field {
    display: flex;
    align-items: center;

    gap: 6px;

    white-space: nowrap;
}

.page-header-actions .movement-date-field input {
    width: 110px;
}

/*
 * Die Kopfzeile darf durch die Felder nicht zu hoch werden.
 */
.page-header {
    flex-wrap: wrap;

    row-gap: 8px;
}


/* =========================================================
   KOPFZEILE - GESTALTUNG DER FILTERFELDER
   ---------------------------------------------------------
   Uebernimmt die Gestaltung, die vorher an .filterbar hing.
========================================================= */

.page-header-actions select,
.page-header-actions input[type="text"] {
    height: 38px;
    min-height: 38px;

    box-sizing: border-box;

    border: 1px solid var(--border);
    border-radius: 8px;

    padding: 0 11px;

    background: #0D192A;
    color: var(--text-primary);

    font-family: inherit;
    font-size: 12px;

    outline: none;
}

/*
 * Die aufgeklappte Liste zeichnet unter Windows das
 * Betriebssystem. Ohne diese Zeilen bleibt sie hell.
 */
.page-header-actions select option {
    background: #0D192A;
    color: var(--text-primary);
}

.page-header-actions select:focus,
.page-header-actions input[type="text"]:focus {
    border-color: var(--kitlog-blue);
}


/* Von und Bis im Bewegungsjournal */

.page-header-actions .movement-date-field {
    display: flex;
    align-items: center;

    gap: 6px;

    white-space: nowrap;

    color: var(--text-muted);
}

.page-header-actions .movement-date-field input {
    width: 108px;
}


/* Zuruecksetzen auf gleiche Hoehe bringen */

.page-header-actions #movement-reset-filter {
    height: 38px;
    min-height: 38px;

    padding: 0 14px;

    font-size: 12px;
}


/* Knoepfe und Felder in einer Linie */

.page-header-actions .btn-primary,
.page-header-actions .btn-secondary {
    height: 38px;
    min-height: 38px;

    padding: 0 15px;

    display: inline-flex;
    align-items: center;
}


/* =========================================================
   KOPFZEILE - DATUMSFELDER
   ---------------------------------------------------------
   Von und Bis werden lesbar gesetzt und die Eingabefelder
   auf dieselbe Form gebracht wie die Auswahlfelder daneben.
========================================================= */

.page-header-actions .movement-date-label {
    font-family: inherit !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 1 !important;

    color: var(--text-secondary) !important;
}

.page-header-actions .movement-date-field input {
    width: 104px !important;

    height: 38px !important;
    min-height: 38px !important;

    box-sizing: border-box !important;

    padding: 0 10px !important;

    border: 1px solid var(--border) !important;
    border-radius: 8px !important;

    background: #0D192A !important;
    color: var(--text-primary) !important;

    font-family: inherit !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: normal !important;

    text-align: left !important;
}

.page-header-actions .movement-date-field input::placeholder {
    color: var(--text-muted) !important;

    font-size: 11px !important;
}

.page-header-actions .movement-date-field input:focus {
    border-color: var(--kitlog-blue) !important;
    outline: none !important;
}


/* =========================================================
   POPUPS FUER LAGERPLATZ UND TRANSPORTAUFTRAG
   ---------------------------------------------------------
   Gleiches Muster wie beim Artikel-Popup:
   Kopf fest, Inhalt scrollt, Knopfleiste fest.
========================================================= */

#location-editor,
#transport-order-detail {
    position: fixed;

    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: min(920px, 94vw);
    max-height: 88vh;

    z-index: 120;

    margin: 0 !important;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    background: var(--panel);

    border: 1px solid var(--border);
    border-radius: var(--radius);

    box-shadow: var(--shadow);
}

#location-editor.hidden,
#transport-order-detail.hidden {
    display: none !important;
}


/* Kopfbereich */

.location-editor-head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    flex: 0 0 auto;

    padding: 14px 18px;

    border-bottom: 1px solid var(--border);
}

.location-editor-head h3 {
    margin: 0;

    font-size: 15px;
}

#transport-order-detail > .goods-receipt-detail-header {
    flex: 0 0 auto;

    padding: 14px 18px;
    margin: 0;

    border-bottom: 1px solid var(--border);
}


/* Scrollender Inhalt */

.location-editor-body,
.transport-order-detail-body {
    flex: 1 1 auto;
    min-height: 0;

    padding: 16px 18px;

    overflow-y: auto;
    overscroll-behavior: contain;
}


/* Knopfleiste unten */

#location-editor > .location-editor-actions {
    flex: 0 0 auto;

    margin: 0;
    padding: 14px 18px;

    border-top: 1px solid var(--border);

    background: var(--panel);
}


/*
 * Die frueheren Hoehenbegrenzungen aus der Zeit, als das
 * Detail unterhalb der Tabelle stand, gelten nicht mehr.
 */
#transport-orders-view #transport-order-detail {
    max-height: 88vh;
}


/* =========================================================
   POPUPS FUER MASSENANLAGE, MASSENAENDERUNG UND UMLAGERN
   ---------------------------------------------------------
   Gleiches Muster wie bei den uebrigen Popups.
========================================================= */

#location-bulk-create-editor,
#location-bulk-editor,
#transfer-editor {
    position: fixed;

    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: min(1040px, 94vw);
    max-height: 88vh;

    z-index: 120;

    margin: 0 !important;
    padding: 0 !important;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    background: var(--panel);

    border: 1px solid var(--border);
    border-radius: var(--radius);

    box-shadow: var(--shadow);
}

#location-bulk-create-editor.hidden,
#location-bulk-editor.hidden,
#transfer-editor.hidden {
    display: none !important;
}

#location-bulk-create-editor > .location-editor-actions,
#location-bulk-editor > .location-editor-actions,
#transfer-editor > .transfer-actions {
    flex: 0 0 auto;

    margin: 0;
    padding: 14px 18px;

    display: flex;
    justify-content: flex-end;

    gap: 8px;

    border-top: 1px solid var(--border);

    background: var(--panel);
}


/* =========================================================
   SPALTENLAYOUT
   ---------------------------------------------------------
   Kein Zeilenumbruch mehr in Tabellenzellen. Wird eine
   Spalte zu schmal, scrollt die Tabelle waagerecht - das
   konnte sie ohnehin schon.
========================================================= */

.article-table-scroll table th,
.article-table-scroll table td,
.goods-receipt-table-scroll table th,
.goods-receipt-table-scroll table td,
.inventory-table-scroll table th,
.inventory-table-scroll table td,
.location-table-scroll table th,
.location-table-scroll table td,
.movement-table-scroll table th,
.movement-table-scroll table td,
.stock-article-table-scroll table th,
.stock-article-table-scroll table td {
    white-space: nowrap;
}

/*
 * Zweizeilige Zellen behalten ihren Aufbau, weil die
 * Zusatzangabe ein eigener Block ist.
 */
.article-table-scroll table td .secondary,
.goods-receipt-table-scroll table td .secondary,
.inventory-table-scroll table td .secondary,
.location-table-scroll table td .secondary,
.movement-table-scroll table td .secondary,
.stock-article-table-scroll table td .secondary {
    display: block;
}


/* Ziehgriff am rechten Rand des Spaltenkopfs */

thead th {
    position: relative;
}

.col-resizer {
    position: absolute;

    top: 0;
    right: 0;
    bottom: 0;

    width: 6px;

    cursor: col-resize;

    user-select: none;

    z-index: 6;
}

.col-resizer:hover {
    background: var(--kitlog-blue);

    opacity: 0.5;
}

body.col-resizing {
    cursor: col-resize;

    user-select: none;
}


/* Knopf in der Fussleiste */

.column-chooser-button {
    height: 30px;
    min-height: 30px;

    padding: 0 12px;

    margin-right: 10px;

    font-size: 11px;
}


/* Auswahlfenster */

.column-chooser {
    position: fixed;

    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: min(420px, 92vw);
    max-height: 82vh;

    z-index: 130;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    background: var(--panel);

    border: 1px solid var(--border);
    border-radius: var(--radius);

    box-shadow: var(--shadow);
}

.column-chooser-body {
    flex: 1 1 auto;
    min-height: 0;

    padding: 12px 18px;

    overflow-y: auto;
}

.column-chooser-row {
    display: flex;
    align-items: center;

    gap: 9px;

    padding: 6px 0;

    color: var(--text-secondary);
    font-size: 12px;

    cursor: pointer;
}

.column-chooser > .location-editor-actions {
    flex: 0 0 auto;

    display: flex;
    justify-content: flex-end;

    gap: 8px;

    margin: 0;
    padding: 14px 18px;

    border-top: 1px solid var(--border);
}


/* =========================================================
   SPALTENREIHENFOLGE - ZIEHEN IM AUSWAHLFENSTER
========================================================= */

.column-chooser-row {
    border: 1px solid transparent;
    border-radius: 6px;

    padding: 6px 8px;
}

.column-chooser-row:hover {
    background: var(--panel-hover);
}

.column-chooser-row.dragging {
    opacity: 0.45;

    border-color: var(--kitlog-blue);
}

.column-chooser-grip {
    color: var(--text-muted);

    font-size: 14px;
    line-height: 1;

    cursor: grab;

    user-select: none;
}

.column-chooser-row.dragging .column-chooser-grip {
    cursor: grabbing;
}


/* =========================================================
   LIEFERANTEN-POPUP
   ---------------------------------------------------------
   Gleiches Muster wie beim Artikelstamm.
========================================================= */

#supplier-detail-panel {
    position: fixed;

    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: min(760px, 94vw);
    max-height: 88vh;

    z-index: 120;

    display: flex;
    flex-direction: column;

    overflow: hidden;
}

#supplier-detail-panel.hidden {
    display: none !important;
}

#supplier-detail-panel > .detail-header,
#supplier-detail-panel > .detail-actions {
    flex: 0 0 auto;
}

#supplier-detail-panel > .detail-body {
    flex: 1 1 auto;
    min-height: 0;

    overflow-y: auto;
    overscroll-behavior: contain;
}


/* =========================================================
   LIEFERANTEN-POPUP MIT REITERN
========================================================= */

#supplier-detail-panel > .supplier-tabs {
    flex: 0 0 auto;

    padding: 0 18px;

    border-bottom: 1px solid var(--border);
}

#supplier-detail-panel [data-supplier-page].hidden {
    display: none;
}

#supplier-detail-panel textarea {
    width: 100%;

    box-sizing: border-box;

    resize: vertical;
}


/* =========================================================
   MEHRZEILIGE FELDER UND EINKAUFSSPERRE
   ---------------------------------------------------------
   Die Regel fuer .form-grid deckte nur input und select ab.
   Ohne textarea zeichnet der Browser sein helles
   Standardfeld, was im dunklen Umfeld auffaellt.
========================================================= */

.form-grid textarea {
    min-height: 68px;

    padding: 8px 9px;

    box-sizing: border-box;

    background: #0A1524;

    border: 1px solid var(--border);
    border-radius: 6px;

    color: var(--text-primary);

    font-family: inherit;
    font-size: 11px;

    text-transform: none;

    outline: none;

    resize: vertical;
}

.form-grid textarea:focus,
.form-grid input:focus,
.form-grid select:focus {
    border-color: var(--kitlog-blue);
}

.form-grid textarea::placeholder {
    color: var(--text-muted);
}


/* Einkaufssperre als Kennzeichen, wie die Artikeltypen */

.tag.blocked {
    color: #FF8A8A;

    background: rgba(255, 92, 92, 0.12);
}

.tag.free {
    color: var(--text-muted);

    background: rgba(255, 255, 255, 0.05);
}


/* =========================================================
   POPUP BESTANDSKORREKTUR
   ---------------------------------------------------------
   Gleiches Muster wie die Umlagerung.
========================================================= */

#correction-editor {
    position: fixed;

    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: min(760px, 94vw);
    max-height: 88vh;

    z-index: 120;

    margin: 0 !important;
    padding: 0 !important;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    background: var(--panel);

    border: 1px solid var(--border);
    border-radius: var(--radius);

    box-shadow: var(--shadow);
}

#correction-editor.hidden {
    display: none !important;
}

#correction-editor > .transfer-actions {
    flex: 0 0 auto;

    margin: 0;
    padding: 14px 18px;

    display: flex;
    justify-content: flex-end;

    gap: 8px;

    border-top: 1px solid var(--border);

    background: var(--panel);
}

#correction-editor input[readonly] {
    color: var(--text-secondary);

    background: rgba(255, 255, 255, 0.03);
}


/* =========================================================
   KORREKTURMASKE - LAYOUT
========================================================= */

/*
 * Eine allgemeine Regel zum Ausblenden fehlt im CSS.
 * Hier wird sie fuer dieses Popup nachgeholt.
 */
#correction-editor .hidden {
    display: none !important;
}

/*
 * Eigenes Raster statt der fuenf festen Spalten aus dem
 * Umlagerungsdialog.
 */
#correction-editor .transfer-grid {
    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    gap: 12px 16px;

    align-items: start;
}

#correction-editor .transfer-grid > .full,
#correction-editor .transfer-grid label.full {
    grid-column: 1 / -1;
}

/*
 * Die zusaetzlichen Felder sollen sich einreihen, statt als
 * ein Block eine einzige Zelle zu belegen.
 */
#correction-editor #correction-new-fields {
    display: contents;
}

#correction-editor #correction-new-fields > label.full {
    grid-column: 1 / -1;
}

/* Beschriftungen lesbar, nicht 8px */

#correction-editor .transfer-grid label {
    font-size: 10px;
}

/* Kein Querscrollen mehr */

#correction-editor .location-editor-body {
    overflow-x: hidden;
}

#correction-editor input,
#correction-editor select {
    width: 100%;

    box-sizing: border-box;
}

/* Vorschlagsliste ueber den Feldern darunter */

#correction-editor .transfer-lookup {
    position: relative;
}

#correction-editor .transfer-lookup-results {
    z-index: 30;
}


/* =========================================================
   KENNZEICHEN IN DER LAGERPLATZSUCHE
========================================================= */

#correction-editor .transfer-lookup-item .tag {
    margin-left: 6px;

    font-size: 9px;

    vertical-align: middle;
}


/* =========================================================
   EINSTELLUNGEN
   ---------------------------------------------------------
   Gleiches Muster wie die uebrigen Ansichten.
========================================================= */

#settings-view {
    flex: 1 1 0;
    height: auto !important;
    min-height: 0;

    display: flex;
    flex-direction: column;

    overflow: hidden;
}

#settings-view.hidden {
    display: none;
}

#settings-view > .page-header,
#settings-view > .view-tabs {
    flex: 0 0 auto;
}

#settings-reasons-content {
    flex: 1 1 0;
    min-height: 0;

    display: flex;
    flex-direction: column;

    overflow: hidden;
}

#settings-view .table-card {
    flex: 1 1 0;
    min-height: 0;

    display: flex;
    flex-direction: column;

    overflow: hidden;
}

#settings-view .settings-table-scroll {
    flex: 1 1 0;
    min-height: 0;

    overflow-x: auto;
    overflow-y: auto;
}

#settings-view .settings-table-scroll thead th {
    position: sticky;
    top: 0;
    z-index: 5;
}

#settings-view .hidden {
    display: none !important;
}


/* Popup fuer den Grund */

#reason-editor {
    position: fixed;

    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: min(620px, 94vw);
    max-height: 88vh;

    z-index: 120;

    margin: 0 !important;
    padding: 0 !important;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    background: var(--panel);

    border: 1px solid var(--border);
    border-radius: var(--radius);

    box-shadow: var(--shadow);
}

#reason-editor.hidden {
    display: none !important;
}

#reason-editor > .transfer-actions {
    flex: 0 0 auto;

    margin: 0;
    padding: 14px 18px;

    display: flex;
    justify-content: flex-end;

    gap: 8px;

    border-top: 1px solid var(--border);
}


/* =========================================================
   REITER CHARGEN
========================================================= */

#inventory-lots-content {
    flex: 1 1 0;
    min-height: 0;

    display: flex;
    flex-direction: column;

    overflow: hidden;
}

#inventory-lots-content.hidden {
    display: none;
}

#inventory-lots-content .table-card {
    flex: 1 1 0;
    min-height: 0;

    display: flex;
    flex-direction: column;

    overflow: hidden;
}

#inventory-lots-content .lot-table-scroll {
    flex: 1 1 0;
    min-height: 0;

    overflow-x: auto;
    overflow-y: auto;
}

#inventory-lots-content .lot-table-scroll thead th {
    position: sticky;
    top: 0;
    z-index: 5;
}

#inventory-lots-content .table-pagination {
    flex: 0 0 auto;

    min-height: 52px;

    box-sizing: border-box;
}


/* Popup */

#lot-editor {
    position: fixed;

    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: min(720px, 94vw);
    max-height: 88vh;

    z-index: 120;

    margin: 0 !important;
    padding: 0 !important;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    background: var(--panel);

    border: 1px solid var(--border);
    border-radius: var(--radius);

    box-shadow: var(--shadow);
}

#lot-editor.hidden {
    display: none !important;
}

#lot-editor .hidden {
    display: none !important;
}

#lot-editor > .transfer-actions {
    flex: 0 0 auto;

    margin: 0;
    padding: 14px 18px;

    display: flex;
    justify-content: flex-end;

    gap: 8px;

    border-top: 1px solid var(--border);
}

#lot-editor input[readonly] {
    color: var(--text-secondary);

    background: rgba(255, 255, 255, 0.03);
}


/* Verlauf */

.lot-history-entry {
    display: flex;
    flex-direction: column;

    gap: 3px;

    padding: 9px 0;

    border-bottom: 1px solid var(--border);

    font-size: 11px;
}

.lot-history-entry strong {
    color: var(--text-primary);
}

.lot-history-entry span {
    color: var(--text-secondary);
}

.lot-history-meta {
    color: var(--text-muted) !important;

    font-size: 10px;
}

.lot-history-empty {
    padding: 10px 0;

    color: var(--text-muted);
    font-size: 11px;
}


/* =========================================================
   BESTAENDE SPERREN - POPUP
========================================================= */

#lot-editor .form-grid label.hidden {
    display: none !important;
}

#lot-editor .lot-history-entry .tag {
    align-self: flex-start;

    margin-top: 2px;
}


/* =========================================================
   REITER MHD
========================================================= */

#inventory-expiry-content {
    flex: 1 1 0;
    min-height: 0;

    display: flex;
    flex-direction: column;

    overflow: hidden;
}

#inventory-expiry-content.hidden {
    display: none;
}

#inventory-expiry-content .table-card {
    flex: 1 1 0;
    min-height: 0;

    display: flex;
    flex-direction: column;

    overflow: hidden;
}

#inventory-expiry-content .expiry-table-scroll {
    flex: 1 1 0;
    min-height: 0;

    overflow-x: auto;
    overflow-y: auto;
}

#inventory-expiry-content .expiry-table-scroll thead th {
    position: sticky;
    top: 0;
    z-index: 5;
}

#inventory-expiry-content .table-pagination {
    flex: 0 0 auto;

    min-height: 52px;

    box-sizing: border-box;
}


/* =========================================================
   LAGERPLATZTYPEN
   ---------------------------------------------------------
   An der Bedeutung orientiert: Eingang tuerkis, Ausgang
   orange, Pruefung gelb, Sperre rot, Kitting gruen wie im
   Logo. Normal bleibt neutral, damit die Ausnahmen auffallen.

   Ein unbekannter Typ faellt auf .tag zurueck und bleibt
   dadurch sichtbar.
========================================================= */

.tag.loctype-normal {
    color: #8FA3BF;
    background: rgba(143, 163, 191, 0.12);
}

.tag.loctype-picking {
    color: #85BCFF;
    background: rgba(43, 140, 255, 0.12);
}

.tag.loctype-reserve {
    color: #B79BFF;
    background: rgba(150, 110, 255, 0.12);
}

.tag.loctype-goods_receipt {
    color: #5FD9D0;
    background: rgba(60, 205, 195, 0.12);
}

.tag.loctype-quality {
    color: #F2C86B;
    background: rgba(240, 190, 90, 0.12);
}

.tag.loctype-blocked {
    color: #FF8A8A;
    background: rgba(255, 92, 92, 0.12);
}

.tag.loctype-kitting {
    color: #70DF8E;
    background: rgba(56, 212, 96, 0.12);
}

.tag.loctype-shipping {
    color: #FFA96B;
    background: rgba(255, 150, 80, 0.12);
}


/* =========================================================
   BELEGUNGSREGEL
   ---------------------------------------------------------
   Nur eingefaerbter Text, kein zweites gefuelltes
   Kennzeichen - daneben steht schon der Typ.

   Gemischt ist der Normalfall und bleibt unauffaellig.
   Je enger die Regel, desto deutlicher die Farbe.
========================================================= */

.tag.occrule-mixed {
    color: #8FA3BF;
    background: rgba(143, 163, 191, 0.12);
}

.tag.occrule-single_article {
    color: #85BCFF;
    background: rgba(43, 140, 255, 0.12);
}

.tag.occrule-single_batch {
    color: #B79BFF;
    background: rgba(150, 110, 255, 0.12);
}

.tag.occrule-fixed_article {
    color: #FFA96B;
    background: rgba(255, 150, 80, 0.12);
}


/* =====================================================================
   SEITENLEISTE

   Rangfolge: die Gruppe fuehrt, die Eintraege ordnen sich unter.
     Ueberschrift  13px, normale Schreibweise, Blau
     Dashboard     wie eine Ueberschrift, da ohne Gruppe
     Eintrag       12.5px, gedaempft, eingerueckt hinter einer Linie
     Standort      Gruen

   Steht am Dateiende und ueberschreibt die frueheren Werte fuer
   .nav-item und .nav-icon.
   ===================================================================== */

.sidebar {
    padding: 10px 12px 14px;
}

.sidebar nav {
    gap: 1px;
}


/* --- Gruppenkopf -------------------------------------------------- */

.nav-group + .nav-group,
.nav-item-solo + .nav-group {
    margin-top: 11px;
}

.nav-group-header {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    min-height: 26px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 9px;
    margin: 0;
    background: transparent;
    border: 0;
    border-radius: 6px;
    color: var(--kitlog-blue);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    text-align: left;
    cursor: pointer;
    user-select: none;
    transition: 0.14s ease;
}

.nav-group-header:hover {
    background: rgba(43, 140, 255, 0.09);
}

.nav-group-header:focus-visible {
    outline: 1px solid var(--kitlog-blue);
    outline-offset: 1px;
}

/*
 * Die Gruppe, in der man gerade steht, traegt Gruen.
 * Kann ersatzlos entfernt werden, wenn es zu viel ist.
 */
.nav-group:has(.nav-item.active) .nav-group-header {
    color: var(--kitlog-green);
}

.nav-group-chevron {
    width: 9px;
    font-size: 9px;
    line-height: 1;
    text-align: center;
    color: #5E6E82;
    transition: transform 0.16s ease;
}

.nav-group.collapsed .nav-group-chevron {
    transform: rotate(-90deg);
}

.nav-group-title {
    flex: 1;
}


/* --- Eintraege ---------------------------------------------------- */

.nav-group-items {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 2px 0 0 15px;
    padding-left: 6px;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.nav-group.collapsed .nav-group-items {
    display: none;
}

.nav-item {
    min-height: 27px;
    gap: 9px;
    padding: 0 9px;
    border-radius: 6px;
    font-size: 12.5px;
    color: #94A3B6;
}

.nav-item:hover {
    background: rgba(43, 140, 255, 0.10);
    color: #E7EDF5;
}

.nav-item:hover .nav-icon {
    color: var(--kitlog-blue);
}

.nav-item.active {
    background: rgba(43, 140, 255, 0.13);
    color: #FFFFFF;
}

.nav-item.active .nav-icon {
    color: var(--kitlog-green);
}

/*
 * Der Balken sitzt genau auf der grauen Linie und ersetzt sie
 * an dieser Stelle. Sonst staenden dort zwei Striche nebeneinander.
 */
.nav-item.active::before {
    left: -7px;
    top: 0;
    bottom: 0;
    width: 2px;
    border-radius: 0;
}

.nav-icon {
    width: 16px;
    font-size: 12.5px;
    color: #5C7A9C;
    transition: color 0.14s ease;
}


/* --- Dashboard: steht ohne Gruppe, sieht aus wie eine ------------- */

.nav-item-solo {
    min-height: 26px;
    padding: 0 9px 0 26px;
    font-size: 13px;
    font-weight: 500;
    color: var(--kitlog-blue);
}

.nav-item-solo:hover {
    background: rgba(43, 140, 255, 0.09);
    color: var(--kitlog-blue);
}


@media (prefers-reduced-motion: reduce) {
    .nav-group-chevron,
    .nav-group-header,
    .nav-item,
    .nav-icon {
        transition: none;
    }
}


/* =====================================================================
   KUNDEN-POPUP

   Das Ausblenden haengt an der ID, nicht an einer allgemeinen Regel.
   Ohne diesen Block bewirkt hidden auf dem Popup NICHTS — es stuende
   dauerhaft offen.
   ===================================================================== */

#customer-detail-panel {
    position: fixed;

    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: min(820px, 94vw);
    max-height: 88vh;

    z-index: 120;

    display: flex;
    flex-direction: column;

    overflow: hidden;
}

#customer-detail-panel.hidden {
    display: none !important;
}

#customer-detail-panel > .detail-header {
    flex: 0 0 auto;
}

#customer-detail-panel > .customer-tabs {
    flex: 0 0 auto;
}

#customer-detail-panel > .detail-body {
    flex: 1 1 auto;
    min-height: 0;

    overflow-y: auto;
    overscroll-behavior: contain;
}

#customer-detail-panel [data-customer-page].hidden {
    display: none !important;
}

#customer-detail-panel textarea {
    resize: vertical;
}

#customer-detail-panel input[readonly],
#customer-detail-panel textarea[readonly] {
    cursor: default;
}

.customer-address-list table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

.customer-address-list th {
    text-align: left;
    font-weight: 500;
    padding: 6px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.customer-address-list td {
    padding: 6px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.customer-placeholder {
    margin: 0 0 14px;
    font-size: 12.5px;
    line-height: 1.6;
}

#customer-detail-panel > .detail-actions {
    flex: 0 0 auto;
}


/* =====================================================================
   LIEFERADRESSEN-FENSTER

   Liegt UEBER dem Kundenfenster (120), deshalb 140 und 135.
   Die eigene Ausblendregel ist zwingend: ohne sie stuende das
   Fenster dauerhaft offen.
   ===================================================================== */

#address-editor-backdrop {
    z-index: 135;
}

#address-editor-panel {
    position: fixed;

    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: min(680px, 92vw);
    max-height: 84vh;

    z-index: 140;

    display: flex;
    flex-direction: column;

    overflow: hidden;
}

#address-editor-panel.hidden {
    display: none !important;
}

#address-editor-panel > .detail-header,
#address-editor-panel > .detail-actions {
    flex: 0 0 auto;
}

#address-editor-panel > .detail-body {
    flex: 1 1 auto;
    min-height: 0;

    overflow-y: auto;
    overscroll-behavior: contain;
}

#address-editor-panel textarea {
    resize: vertical;
}

.detail-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.detail-section-head h3 {
    margin: 0;
}


/* =====================================================================
   STUECKLISTEN-FENSTER

   Zwei Ebenen: das Stuecklistenfenster auf 120, das Positionsfenster
   auf 140 darueber. Die eigenen Ausblendregeln sind zwingend.
   ===================================================================== */

#bom-detail-panel {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: min(860px, 94vw);
    max-height: 88vh;

    z-index: 120;

    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#bom-detail-panel.hidden {
    display: none !important;
}

#bom-detail-panel > .detail-header,
#bom-detail-panel > .detail-actions {
    flex: 0 0 auto;
}

#bom-detail-panel > .detail-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

#bom-item-backdrop {
    z-index: 135;
}

#bom-item-panel {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: min(620px, 92vw);
    max-height: 84vh;

    z-index: 140;

    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#bom-item-panel.hidden {
    display: none !important;
}

#bom-item-panel > .detail-header,
#bom-item-panel > .detail-actions {
    flex: 0 0 auto;
}

#bom-item-panel > .detail-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.bom-hinweis {
    margin: 0 0 16px;
    padding: 10px 12px;
    border-left: 2px solid var(--kitlog-blue);
    border-radius: 0;
    font-size: 12.5px;
    line-height: 1.6;
}

.bom-hinweis.hidden {
    display: none !important;
}


/* =====================================================================
   STUECKLISTE — Positionsliste

   Eigener Scrollbereich mit stehender Kopfzeile. Ohne das waechst
   das Fenster bei 50 Positionen ins Endlose und der Kopf scrollt weg.
   ===================================================================== */

.bom-item-tools {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bom-item-tools input[type="search"] {
    height: 28px;
    width: 180px;
    font-size: 12.5px;
}

.bom-item-list {
    max-height: 320px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.bom-item-list table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

.bom-item-list thead th {
    position: sticky;
    top: 0;
    z-index: 1;

    text-align: left;
    font-weight: 500;
    padding: 6px 8px;
    background: var(--surface-2, #0F1B2D);
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.bom-item-list td {
    padding: 5px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.bom-item-list .col-pos {
    width: 52px;
}

.bom-item-list .col-art {
    width: 110px;
}

.bom-item-list .col-menge {
    width: 80px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.bom-item-list .col-einheit {
    width: 70px;
}

.bom-item-list .col-aktion {
    width: 130px;
    text-align: right;
    white-space: nowrap;
}

.bom-row-button {
    -webkit-appearance: none;
    appearance: none;

    background: transparent;
    border: 0;
    border-radius: 4px;

    padding: 2px 6px;
    margin-left: 4px;

    color: var(--kitlog-blue);
    font-family: inherit;
    font-size: 12px;

    cursor: pointer;
}

.bom-row-button:hover {
    background: rgba(43, 140, 255, 0.12);
}

.bom-row-button.danger {
    color: #E2726B;
}

.bom-row-button.danger:hover {
    background: rgba(226, 114, 107, 0.12);
}


/* =====================================================================
   STUECKLISTENFENSTER — Hoehe nutzen

   Steht am Dateiende und ueberschreibt damit die frueheren Werte.
   ===================================================================== */

/*
 * Das Fenster soll seine erlaubte Hoehe auch einnehmen, nicht nur
 * so hoch werden wie sein Inhalt. Sonst bleibt Platz ungenutzt und
 * die Positionsliste wird unnoetig kurz.
 */
#bom-detail-panel {
    height: 88vh;
}

#bom-detail-panel > .detail-body {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/*
 * Der Kopfbereich behaelt seine Hoehe, der Positionsbereich
 * bekommt den ganzen Rest.
 */
#bom-detail-panel > .detail-body > .detail-section:first-of-type {
    flex: 0 0 auto;
}

#bom-detail-panel > .detail-body > .detail-section:last-of-type {
    flex: 1 1 auto;
    min-height: 0;

    display: flex;
    flex-direction: column;
}

#bom-detail-panel .bom-item-list {
    flex: 1 1 auto;
    min-height: 140px;
    max-height: none;
}

/*
 * Kopffelder kompakter. Jede Zeile, die oben wegfaellt, ist eine
 * Zeile mehr in der Positionsliste.
 */
#bom-detail-panel .form-grid {
    gap: 8px 12px;
}

#bom-detail-panel .form-grid input,
#bom-detail-panel .form-grid select {
    height: 30px;
}

#bom-detail-panel > .detail-body > .detail-section:first-of-type h3 {
    margin-bottom: 8px;
}

#bom-detail-panel .bom-hinweis {
    margin-bottom: 10px;
}


/* --- Suchfeld an die uebrigen Felder angleichen ------------------- */
/*
 * Eingabefelder werden sonst nur innerhalb von .form-grid gestaltet.
 * Das Suchfeld steht ausserhalb und bekam deshalb die
 * Standardgestaltung des Browsers.
 */

.bom-item-tools input[type="search"] {
    height: 30px;
    width: 200px;

    background: #0A1524;
    border: 1px solid var(--border);
    border-radius: 6px;

    color: var(--text-primary);

    padding: 0 9px;
    outline: none;

    font-family: inherit;
    font-size: 11px;
}

.bom-item-tools input[type="search"]:focus {
    border-color: var(--kitlog-blue);
}

.bom-item-tools input[type="search"]::placeholder {
    color: var(--text-muted);
}


/* =====================================================================
   STUECKLISTE — Artikelsuche

   Die Trefferliste steht IM FLUSS unter dem Feld, nicht schwebend
   darueber. Das Positionsfenster hat overflow: hidden — eine
   schwebende Liste waere am Fensterrand abgeschnitten worden.
   ===================================================================== */

.bom-lookup-results {
    margin-top: 4px;

    max-height: 220px;
    overflow-y: auto;
    overscroll-behavior: contain;

    background: #0A1524;
    border: 1px solid var(--border);
    border-radius: 6px;
}

.bom-lookup-results.hidden {
    display: none !important;
}

.bom-lookup-item {
    -webkit-appearance: none;
    appearance: none;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;

    width: 100%;

    padding: 6px 9px;

    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);

    color: var(--text-primary);
    font-family: inherit;
    font-size: 12px;
    text-align: left;

    cursor: pointer;
}

.bom-lookup-item:last-child {
    border-bottom: 0;
}

.bom-lookup-item:hover {
    background: rgba(43, 140, 255, 0.12);
}

.bom-lookup-item strong {
    color: var(--kitlog-blue);
    font-weight: 500;
}

.bom-lookup-item span {
    color: var(--text-secondary);
}

.bom-lookup-leer {
    padding: 8px 9px;
    color: var(--text-muted);
    font-size: 12px;
}


/* =====================================================================
   ANMELDUNG
   ===================================================================== */

.login-overlay {
    position: fixed;
    inset: 0;

    z-index: 900;

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

    background: rgba(4, 10, 20, 0.92);
}

.login-overlay.hidden {
    display: none !important;
}

.login-box {
    width: min(360px, 90vw);

    display: flex;
    flex-direction: column;
    gap: 12px;

    padding: 26px 24px;

    background: #0C1829;
    border: 1px solid var(--border);
    border-radius: 12px;
}

.login-brand {
    font-size: 22px;
    font-weight: 500;
    letter-spacing: -0.01em;
}

.login-subtitle {
    margin: 0 0 6px;
    font-size: 12.5px;
    color: var(--text-secondary);
}

.login-box label {
    display: flex;
    flex-direction: column;
    gap: 4px;

    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.login-box input {
    height: 34px;

    background: #0A1524;
    border: 1px solid var(--border);
    border-radius: 6px;

    color: var(--text-primary);

    padding: 0 9px;
    outline: none;

    font-family: inherit;
    font-size: 13px;
    text-transform: none;
    letter-spacing: normal;
}

.login-box input:focus {
    border-color: var(--kitlog-blue);
}

.login-box .btn-primary {
    margin-top: 6px;
    height: 36px;
}

.login-error {
    margin: 0;
    padding: 8px 10px;

    border-left: 2px solid #E2726B;

    color: #E2726B;
    font-size: 12.5px;
    line-height: 1.5;
}

.login-error.hidden {
    display: none !important;
}

.user-logout {
    -webkit-appearance: none;
    appearance: none;

    margin-left: 10px;
    padding: 4px 7px;

    background: transparent;
    border: 0;
    border-radius: 6px;

    color: var(--text-muted);
    font-size: 14px;

    cursor: pointer;
    transition: 0.14s ease;
}

.user-logout:hover {
    color: var(--kitlog-blue);
    background: rgba(43, 140, 255, 0.10);
}

.user-logout.hidden {
    display: none !important;
}

/* =====================================================================
   LAGER-FENSTER
   ===================================================================== */

#warehouse-detail-panel {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: min(720px, 92vw);
    max-height: 86vh;

    z-index: 120;

    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#warehouse-detail-panel.hidden {
    display: none !important;
}

#warehouse-detail-panel > .detail-header,
#warehouse-detail-panel > .detail-actions {
    flex: 0 0 auto;
}

#warehouse-detail-panel > .detail-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

#warehouse-detail-panel textarea {
    resize: vertical;
}

/* =====================================================================
   BENUTZER-FENSTER
   ===================================================================== */

#user-detail-panel {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: min(680px, 92vw);
    max-height: 86vh;

    z-index: 120;

    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#user-detail-panel.hidden {
    display: none !important;
}

#user-detail-panel > .detail-header,
#user-detail-panel > .detail-actions {
    flex: 0 0 auto;
}

#user-detail-panel > .detail-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.us-warehouse-list {
    display: flex;
    flex-direction: column;
    gap: 4px;

    margin-top: 8px;
    padding: 8px 10px;

    max-height: 180px;
    overflow-y: auto;

    background: #0A1524;
    border: 1px solid var(--border);
    border-radius: 6px;
}

.us-warehouse-item {
    display: flex;
    align-items: center;
    gap: 8px;

    font-size: 12.5px;
    color: var(--text-primary);
    text-transform: none;
    letter-spacing: normal;

    cursor: pointer;
}

.us-warehouse-item input {
    width: 14px;
    height: 14px;
    accent-color: var(--kitlog-blue);
}

/* =====================================================================
   RECHTE IM BENUTZERFENSTER
   ===================================================================== */

.us-permission-list {
    display: flex;
    flex-direction: column;

    margin-top: 8px;

    max-height: 260px;
    overflow-y: auto;
    overscroll-behavior: contain;

    background: #0A1524;
    border: 1px solid var(--border);
    border-radius: 6px;
}

.us-permission-item {
    display: grid;
    grid-template-columns: 1fr 120px 130px;
    align-items: center;
    gap: 8px;

    padding: 5px 10px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.us-permission-item:last-child {
    border-bottom: 0;
}

.us-permission-name {
    font-size: 12.5px;
    color: var(--text-primary);
}

.us-permission-role {
    font-size: 11px;
}

.us-permission-role.yes {
    color: var(--kitlog-green);
}

.us-permission-role.no {
    color: var(--text-muted);
}

.us-permission-item select {
    height: 26px;

    background: #0C1829;
    border: 1px solid var(--border);
    border-radius: 5px;

    color: var(--text-primary);

    padding: 0 6px;
    outline: none;

    font-family: inherit;
    font-size: 11.5px;
}


/* =====================================================================
   BENUTZERFENSTER — Scrollen und Breiten

   Steht am Dateiende und ueberschreibt die frueheren Werte.
   ===================================================================== */

/*
 * Das Fenster soll seine erlaubte Hoehe auch einnehmen. Sonst
 * bleibt Platz ungenutzt und die Listen darin wirken gedraengt.
 */
#user-detail-panel {
    height: 86vh;
}

/*
 * KEIN eigener Scrollbereich mehr in den Listen. Zwei
 * ineinanderliegende Scrollbereiche fangen das Mausrad ab — der
 * letzte Eintrag war dadurch nicht erreichbar. Jetzt scrollt das
 * Fenster als Ganzes.
 */
.us-permission-list,
.us-warehouse-list {
    max-height: none;
    overflow-y: visible;
    overscroll-behavior: auto;
}

/*
 * Mehr Platz fuer die Rollenangabe. "Rolle: lesen und ändern"
 * brach sonst auf zwei Zeilen um und machte die Zeile hoeher als
 * die uebrigen.
 */
.us-permission-item {
    grid-template-columns: 1fr 160px 175px;
    min-height: 30px;
}

.us-permission-role {
    white-space: nowrap;
}

.us-permission-item select {
    width: 100%;
}

/* =====================================================================
   KITTING-AUFTRAGSFENSTER
   ===================================================================== */

#kitting-detail-panel {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: min(900px, 94vw);
    height: 86vh;

    z-index: 120;

    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#kitting-detail-panel.hidden {
    display: none !important;
}

#kitting-detail-panel > .detail-header,
#kitting-detail-panel > .detail-actions {
    flex: 0 0 auto;
}

#kitting-detail-panel > .detail-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/*
 * Ein Scrollbereich je Fenster, nicht zwei ineinander.
 */
#kitting-detail-panel .bom-item-list {
    max-height: none;
    overflow-y: visible;
}

/* =====================================================================
   FERTIGMELDUNG

   Liegt UEBER dem Auftragsfenster (120), deshalb 140 und 135.
   ===================================================================== */

#completion-backdrop {
    z-index: 135;
}

#completion-panel {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: min(600px, 92vw);
    max-height: 84vh;

    z-index: 140;

    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#completion-panel.hidden {
    display: none !important;
}

#completion-panel > .detail-header,
#completion-panel > .detail-actions {
    flex: 0 0 auto;
}

#completion-panel > .detail-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/* =====================================================================
   FERTIGMELDUNGEN

   Stornierte bleiben stehen, aber deutlich abgesetzt.
   ===================================================================== */

.completion-reversed td {
    opacity: 0.55;
}

.completion-reversed td:nth-child(3) {
    text-decoration: line-through;
}

.completion-reason {
    color: var(--text-muted);
    font-size: 11.5px;
    font-style: italic;
}

/* =====================================================================
   WERKSTATTVERGUETUNG
   ===================================================================== */

.inline-field {
    display: flex;
    align-items: center;
    gap: 6px;

    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.inline-field input {
    height: 30px;

    background: #0A1524;
    border: 1px solid var(--border);
    border-radius: 6px;

    color: var(--text-primary);

    padding: 0 8px;
    outline: none;

    font-family: inherit;
    font-size: 11px;
    text-transform: none;
    letter-spacing: normal;
}

.compensation-total td {
    padding-top: 10px;

    border-top: 1px solid rgba(255, 255, 255, 0.12);

    font-weight: 500;
    color: var(--text-primary);
}

.compensation-total td:first-child {
    text-align: right;
    color: var(--text-secondary);
}

/* =====================================================================
   VERGUETUNG — Einzelmeldungen
   ===================================================================== */

#cp-detail-panel {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: min(760px, 92vw);
    max-height: 84vh;

    z-index: 120;

    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#cp-detail-panel.hidden {
    display: none !important;
}

#cp-detail-panel > .detail-header {
    flex: 0 0 auto;
}

#cp-detail-panel > .detail-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;

    padding-bottom: 20px;
}

/* Ein Scrollbereich je Fenster, nicht zwei ineinander. */
#cp-detail-panel .bom-item-list {
    max-height: none;
    overflow-y: visible;
}

/* =====================================================================
   VERGUETUNG — Kennzahlen und Monatsuebersicht
   ===================================================================== */

.cp-kennzahlen {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;

    margin-bottom: 16px;
}

.cp-kachel {
    display: flex;
    flex-direction: column;
    gap: 4px;

    padding: 12px 14px;

    background: #0C1829;
    border: 1px solid var(--border);
    border-radius: 8px;
}

.cp-kachel-titel {
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.cp-kachel strong {
    font-size: 20px;
    font-weight: 500;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.cp-kachel-betrag {
    border-color: rgba(43, 140, 255, 0.35);
}

.cp-kachel-betrag strong {
    color: var(--kitlog-blue);
}

.cp-monate {
    margin-bottom: 16px;
    padding: 12px 14px;

    background: #0C1829;
    border: 1px solid var(--border);
    border-radius: 8px;
}

.cp-monate.hidden {
    display: none !important;
}

.cp-monate h3 {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
}

.cp-monate table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

.cp-monate th {
    text-align: left;
    font-weight: 500;
    padding: 4px 8px;
    color: var(--text-muted);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.cp-monate td {
    padding: 5px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.cp-monate tr:last-child td {
    border-bottom: 0;
}

.cp-monate .col-menge,
.cp-monate th.col-menge {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Auftragsnummern brechen sonst um */
#cp-detail-panel .col-art,
#compensation-view .article-number {
    white-space: nowrap;
}

#cp-detail-panel .col-art {
    width: 150px;
}


/* =====================================================================
   TABELLENHOEHE VEREINHEITLICHT
   ---------------------------------------------------------------------
   Diese sechs Ansichten hatten die Regel nicht, die Lieferanten,
   Transportauftraege, Bestaende und Einstellungen laengst haben:
   Die Tabellenkarte nimmt den verbleibenden Platz ein, statt sich
   nach ihrem Inhalt zu richten.

   .app-view traegt bereits flex: 1 1 0 — es fehlte nur die
   Weitergabe an die Karte.
   ===================================================================== */

#customer-master-view > .table-card,
#bom-master-view > .table-card,
#kitting-master-view > .table-card,
#user-master-view > .table-card,
#warehouse-master-view > .table-card,
#compensation-view > .table-card {
    flex: 1 1 0;
    min-height: 0;

    display: flex;
    flex-direction: column;

    overflow: hidden;
}


/* =====================================================================
   ANSICHT ALS FLEX-BEHAELTER
   ---------------------------------------------------------------------
   Nachtrag zum Block darueber.

   Die Kartenregel mit flex: 1 1 0 blieb wirkungslos, weil die
   Ansicht selbst kein Flex-Behaelter war. flex wirkt nur, wenn der
   Elternteil display: flex traegt.

   Lieferanten, Transportauftraege und Einstellungen hatten je eine
   eigene Regel dieser Art; diese sechs nie.

   :not(.hidden) ist noetig, damit ausgeblendete Ansichten
   ausgeblendet bleiben — display: flex wuerde display: none
   sonst ueberschreiben.
   ===================================================================== */

#customer-master-view:not(.hidden),
#bom-master-view:not(.hidden),
#kitting-master-view:not(.hidden),
#user-master-view:not(.hidden),
#warehouse-master-view:not(.hidden),
#compensation-view:not(.hidden) {
    display: flex;
    flex-direction: column;

    flex: 1 1 0;
    min-height: 0;

    overflow: hidden;
}


/* =====================================================================
   ARTIKEL UND WARENEINGANG ANGEGLICHEN
   ---------------------------------------------------------------------
   ARTIKEL: Hatte elf Regeln fuer .table-card, davon acht mit festen
   Pixelhoehen aus frueheren Sitzungen. Alle entfernt — es blieb ein
   max-height: 610px !important wirksam, das die Karte deckelte,
   obwohl eine spaetere Regel bereits height: auto setzte.

   Jetzt eine Regel statt elf.

   WARENEINGANG: Den Unterbereichen "offen" und "gebucht" fehlte die
   Kartenregel, die "einlagern" laengst hatte.
   ===================================================================== */

#article-view .content-grid > .table-card {
    flex: 1 1 0;

    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;

    display: flex;
    flex-direction: column;

    overflow: hidden;
}

#goods-receipt-open-content > .table-card,
#goods-receipt-posted-content > .table-card {
    flex: 1 1 0;
    min-height: 0;

    display: flex;
    flex-direction: column;

    overflow: hidden;
}


/* =====================================================================
   WARENEINGANG REITER ALS FLEX
   ---------------------------------------------------------------------
   Vermerk zur Aenderung weiter oben.

   Die Reiterbereiche des Wareneingangs trugen
   display: block !important. Weiter unten stand fuer dieselben
   Bereiche bereits display: flex mit flex: 1 1 0 — aber ohne
   !important, also wirkungslos.

   Ein Block gibt seinen Kindern keinen Platz zu verteilen. Deshalb
   wuchs die Tabellenkarte im Wareneingang als einziger Ansicht
   nicht mit.

   Geaendert wurde nur block -> flex in der bestehenden Regel.
   ===================================================================== */


/* =====================================================================
   FESTE HOEHEN AUFGEHOBEN
   ---------------------------------------------------------------------
   Der Browser meldete fuer die Wareneingangs-Karte gleichzeitig
   flex-grow: 1 und height: 560px. Die feste Hoehe gewinnt — deshalb
   blieben die vorigen beiden Patches wirkungslos.

   Diese Pixelwerte stammen aus frueheren Sitzungen, in denen das
   Mitwachsen noch nicht funktionierte. Jetzt funktioniert es, und
   die alten Werte stehen im Weg.

   Aufgehoben werden ausschliesslich height und max-height.
   flex-grow, display und flex-direction bleiben unveraendert.
   ===================================================================== */

.goods-receipt-table-card,
.movement-table-card,
#inventory-stock-content .table-card,
#inventory-locations-content .table-card {
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;

    flex: 1 1 0 !important;
}


/* =====================================================================
   FUSSLEISTEN EINHEITLICH
   ---------------------------------------------------------------------
   Acht Ansichten hatten die Fussleiste ausserhalb der Tabellenkarte,
   mit eigenem Rahmen und abgerundeten Ecken. Sie wirkte dadurch wie
   ein zweiter Kasten unter der Tabelle.

   Jetzt sitzt sie innerhalb der Karte — wie in Artikel, Wareneingang
   und Bestaenden. Der eigene Rahmen entfaellt, es bleibt die
   Trennlinie nach oben aus .table-pagination.
   ===================================================================== */

#transport-orders-view .table-pagination,
#supplier-master-view .table-pagination,
#customer-master-view .table-pagination,
#bom-master-view .table-pagination,
#warehouse-master-view .table-pagination,
#user-master-view .table-pagination,
#kitting-master-view .table-pagination,
#compensation-view .table-pagination {
    flex: 0 0 auto;
    min-height: 52px;

    margin-top: 0;
    box-sizing: border-box;

    border: 0;
    border-top: 1px solid var(--border);
    border-radius: 0;
}