/**
 * inventory-detail.css — inventory-specific overrides for the in-place
 * detail / create surface (InventoryDetailView).
 *
 * The shared layout (root, header, breadcrumb, hero, sections, grid, fields,
 * inputs, autosave flash, form bar) lives in css/detail-view.css under the
 * .dv-* prefix and is reused as-is. This file only carries the .invdv-*
 * overrides that are unique to inventory (e.g. the dual sub-action buttons in
 * the header, the two-section grid density).
 *
 * (c) Adrian Ranta. All rights reserved. Unauthorised use, reproduction and or distribution is strictly prohibited.
 */

/* Root marker — kept for scoping any future inventory-only tweaks without
   touching the shared .dv-root rules. */
.invdv-root {
    /* inherits all layout from .dv-root */
}

/* The inventory detail header carries TWO secondary sub-action buttons
   (Check Out, Transfer) plus Back. Keep them comfortably spaced on wide
   screens and let them wrap on narrow ones. */
.invdv-root .dv-header-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.invdv-root .dv-action-secondary {
    background: #f1f5f9;
    color: #334155;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.invdv-root .dv-action-secondary:hover {
    background: #e2e8f0;
    border-color: #94a3b8;
}

/* Inventory has many short numeric fields — tighten the grid a touch so the
   two sections read densely without horizontal scroll. */
.invdv-section .dv-grid {
    gap: 14px 18px;
}

/* Field blocks reuse .dv-field-block; this marker lets us target inventory
   numeric inputs (stock counts) for a narrower max-width without affecting the
   shared vendor layout. */
.invdv-field-block input[type="number"] {
    max-width: 220px;
}

/* Responsive: on narrow viewports the sub-action buttons stack under the
   breadcrumb cleanly (the shared .dv-header already switches to column). */
@media (max-width: 640px) {
    .invdv-root .dv-header-actions {
        width: 100%;
    }
    .invdv-root .dv-action-secondary,
    .invdv-root .dv-action-back {
        flex: 1 1 auto;
        text-align: center;
    }
    .invdv-field-block input[type="number"] {
        max-width: none;
    }
}