body.item-overview-page {
    background: #f3f6f5;
    color: #273932;
    min-height: 100vh;
}

/* ============================================================
 * Artikelstatus – dezente Zeilenfärbung
 * ============================================================ */

.rental-item-row-active {
    background-color: #f3faf5;
}

.rental-item-row-active:hover {
    /*background-color: #eaf6ed;*/
}

.rental-item-row-inactive {
    background-color: #fafafa;
    color: #6c757d;
}

.rental-item-row-inactive:hover {
    /*background-color: #f5f5f5;*/
}

/* Statusbereich */
.item-status {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 110px;
}

.item-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 85px;
    padding: 6px 10px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
}

.item-status-badge.active {
    background-color: #dff3e5;
    color: #218838;
}

.item-status-badge.inactive {
    background-color: #e9ecef;
    color: #6c757d;
}

/* Dezenter Umschaltbutton */
.btn-status-toggle {
    border: 0;
    background: transparent;
    padding: 2px 6px;
    font-size: 0.75rem;
    color: black;
    opacity: 0.75;
}

.btn-status-toggle:hover {
    opacity: 1;
    text-decoration: underline;
}

.btn-status-toggle.activate:hover {
    color: #28a745;
}

.btn-status-toggle.deactivate:hover {
    color: #d39e00;
}

/* ============================================================
 * Inline-Bearbeitung Artikel
 * ============================================================ */

.item-edit-button {
    color: #6c757d;
    opacity: 0.55;
    transition:
        color 0.15s ease,
        opacity 0.15s ease;
}

.item-edit-button:hover {
    color: #007bff;
    opacity: 1;
}

.item-text-editor .form-control {
    min-width: 220px;
}

.item-description-editor {
    min-width: 260px;
}

.item-description-editor textarea {
    resize: vertical;
}

.item-edit-actions {
    margin-top: 8px;
    white-space: nowrap;
}

.item-edit-actions .btn {
    font-size: 0.8rem;
}

/*
 * Während der Bearbeitung etwas hervorheben
 */
tr.item-row-editing {
    background-color: #fffdf2 !important;
}

tr.item-row-editing:hover {
    background-color: #fff9df !important;
}

/*
 * ============================================================
 * Finalisierungsstatus
 * ============================================================
 */

.completion-ok {
    background-color: #d4edda !important;
    color: black;
}

.completion-missing {
    background-color: #f8d7da !important;
    color: black;
}

.completion-ok i {
    color: black;
}

.completion-missing i {
    color: black;
}


/*
 * ============================================================
 * Bearbeitung
 * ============================================================
 */

.item-title-editor,
.item-description-editor {
    max-width: 100%;
}

.item-title-input.is-invalid,
.item-description-input.is-invalid {
    border-color: #dc3545;
}


/*
 * ============================================================
 * Finalisiert
 * ============================================================
 */

.badge-success {
    font-size: 0.85rem;
}

.rental-items-scroll {
    max-height: 80vh;
    overflow: auto;
}

.rental-items-table {
    min-width: 1600px;
    margin-bottom: 0;
}

.item-title-editor .input-group .btn {
    min-width: 38px;
}

.item-title-editor .item-title-input {
    min-width: 0;
}

/* ============================================================
   Kategorie
   ============================================================ */

.category-cell {
    min-width: 240px;
    width: 240px;
}

.category-select-wrapper {
    display: flex;
    align-items: center;
    width: 100%;
}

.category-icon {
    flex: 0 0 auto;
    margin-right: 8px;
    color: #6c757d;
    font-size: 0.85rem;
}

.category-select {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    cursor: pointer;
}

/*
 * Lange Kategorien nicht aus der Tabelle herauslaufen lassen.
 */
.category-select option {
    white-space: normal;
}

/* Artikelübersicht: Abstand zur tatsächlichen Höhe der festen Navigation. */
.layout-navbar-fixed.item-overview-page .wrapper .item-overview-content {
    margin-top: var(--overview-nav-height, calc(3.5rem + 1px));
    padding: clamp(1rem, 2.4vw, 2.25rem);
}

.item-overview-page .main-header {
    box-shadow: 0 2px 12px rgba(25, 53, 39, .06);
}

.item-overview-card {
    border: 1px solid #dfe7e3;
    border-top: 3px solid #288458;
    border-radius: 14px;
    box-shadow: 0 8px 28px rgba(25, 53, 39, .06);
}

.item-overview-card > .item-overview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1.5rem;
    border-bottom: 1px solid #e7ede9;
}
.item-overview-card > .item-overview-header::after { display: none; }

.item-overview-eyebrow {
    margin: 0 0 .4rem;
    color: #48705b;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.item-overview-title {
    margin: 0;
    font-size: clamp(1.3rem, 2vw, 1.8rem);
    font-weight: 700;
    line-height: 1.35;
}

.item-overview-title > i { color: #288458; }
.item-overview-count {
    display: inline-block;
    padding: .2rem .55rem;
    margin-left: .3rem;
    border-radius: 20px;
    background: #eaf3ed;
    color: #356449;
    font-size: .85rem;
    vertical-align: middle;
}
.item-overview-description { margin: .55rem 0 0; color: #66776e; font-size: .9rem; }
.item-overview-create { padding: .65rem 1rem; border-radius: 8px; white-space: nowrap; }
.item-overview-card > .card-body { padding: 1.25rem; }

.item-overview-page .rental-items-scroll {
    max-height: 70vh;
    border: 1px solid #e1e8e3;
    border-radius: 10px;
    scrollbar-color: #aebfb4 #f3f6f5;
}
.item-overview-page .rental-items-scroll:focus-visible { outline: 3px solid #288458; outline-offset: 3px; }
.item-overview-page .rental-items-table { border: 0; font-size: .875rem; }
.item-overview-page .rental-items-table th,
.item-overview-page .rental-items-table td { border-color: #e5ece7; padding: .9rem .75rem; }
.item-overview-page .rental-items-table th:first-child,
.item-overview-page .rental-items-table td:first-child { min-width: 145px; }
.item-overview-page .rental-items-table th:nth-child(3),
.item-overview-page .rental-items-table td:nth-child(3) { min-width: 235px; }
.item-overview-page .rental-items-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #edf3ef;
    color: #40594a;
    font-size: .78rem;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 1px 0 #dbe5dd;
}
.item-overview-page .rental-item-row-active { background: #fff; }
.item-overview-page .rental-item-row-inactive { background: #f8faf9; }
.item-overview-page .rental-items-table .completion-ok { background-color: #f1f8f3 !important; color: #294c35; }
.item-overview-page .rental-items-table .completion-missing { background-color: #fff4e8 !important; color: #805516; }
.item-overview-page .completion-ok i { color: #398254; }
.item-overview-page .completion-missing i { color: #a56b1a; }
.item-overview-page .rental-items-table .img-thumbnail { border-radius: 10px; border-color: #e2e8e4; padding: 3px; }
.item-overview-page .rental-items-table .form-control { border-radius: 6px; border-color: #d6e0d9; }
.item-overview-page .rental-items-table .btn { border-radius: 6px; }
.item-overview-page .rental-items-table .item-title-display { min-width: 190px; }

@media (max-width: 575.98px) {
    .item-overview-card > .item-overview-header { padding: 1.15rem; }
    .item-overview-card > .card-body { padding: .65rem; }
    .item-overview-create { width: 100%; text-align: center; }
    .item-overview-page .rental-items-scroll { max-height: 65vh; }
}