/* ---------------------------------------------------------
   Inventory package details
   --------------------------------------------------------- */

.inventory-packages {
    margin-top: .55rem;
}


.inventory-package-row {
    margin-top: .6rem !important;
    padding: .75rem !important;
}

.inventory-package-row strong {
    font-size: 1rem;
}

.inventory-package-row .inventory-meta {
    font-size: .84rem;
    line-height: 1.4;
}


/*
 * Package actions belong to the package card,
 * rather than sharing the narrow product action rail.
 */
.inventory-package-row .storage-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem;
    margin-top: .7rem !important;
    width: 100%;
}

.inventory-package-row .storage-actions button {
    width: 100%;
    min-width: 0;
    padding: .6rem .45rem;
    font-size: .82rem;
    line-height: 1.2;
    white-space: normal;
}


/* Extra-small phones */
@media (max-width: 390px) {

    .inventory-package-row .storage-actions {
        grid-template-columns: 1fr;
    }
}








/* ---------------------------------------------------------
   Package card typography
   --------------------------------------------------------- */

.inventory-package-row strong {
    font-family: inherit;
    font-size: .86rem !important;
    font-weight: 700;
    line-height: 1.2;
    color: #f8fafc;
}

.inventory-package-row .inventory-meta {
    font-family: inherit;
    font-size: .65rem !important;
    line-height: 1.35;
    color: #94a3b8;
}


/* ---------------------------------------------------------
   Package actions must stay inside package card
   --------------------------------------------------------- */

.inventory-package-row .storage-actions {
    position: static !important;
    right: auto !important;
    top: auto !important;

    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem;

    width: 100%;
    margin-top: .7rem !important;
}

.inventory-package-row .storage-actions button {
    position: static !important;

    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 38px !important;

    padding: .55rem .45rem !important;

    font-family: inherit;
    font-size: .72rem !important;
    font-weight: 600;
    line-height: 1.2;

    white-space: normal;
}


/* Very narrow screens */
@media (max-width: 360px) {

    .inventory-package-row .storage-actions {
        grid-template-columns: 1fr;
    }
}


/* ---------------------------------------------------------
   Package consume/discard actions
   Dedicated class: never use storage action rail rules.
   --------------------------------------------------------- */

.inventory-package-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;

    position: static;
    width: 100%;
    margin-top: .65rem;
}

.inventory-package-actions button {
    position: static;

    width: 100%;
    min-width: 0;
    min-height: 40px;

    padding: .55rem .4rem;

    font-family: inherit;
    font-size: .72rem;
    font-weight: 600;
    line-height: 1.2;

    white-space: normal;
}

@media (max-width: 360px) {
    .inventory-package-actions {
        grid-template-columns: 1fr;
    }
}


/* ---------------------------------------------------------
   Compact tracked-package list
   --------------------------------------------------------- */

.inventory-package-row {
    margin-top: .4rem !important;
    padding: 0 !important;

    border: 1px solid rgba(255,255,255,.14);
    border-radius: 10px;

    overflow: hidden;
}


.inventory-package-summary {
    cursor: pointer;

    padding: .55rem .7rem;

    font-family: inherit;
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.3;

    color: #f8fafc;
}


.inventory-package-expanded {
    padding:
        0
        .7rem
        .65rem
        .7rem;
}


.inventory-package-extra {
    margin-top: .15rem;
    margin-bottom: .45rem;
}


/*
 * Keep actions compact while retaining a comfortable
 * mobile touch target.
 */
.inventory-package-actions {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: .4rem;

    position: static;
    width: 100%;
    margin-top: .4rem;
}


.inventory-package-actions button {
    position: static;

    width: 100% !important;
    min-width: 0 !important;

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

    padding: .45rem .35rem !important;

    font-family: inherit;
    font-size: .70rem !important;
    font-weight: 600;
    line-height: 1.15;

    white-space: normal;
}


/* Narrow phones still keep actions usable. */
@media (max-width: 350px) {

    .inventory-package-actions {
        grid-template-columns: 1fr;
    }
}


/* ---------------------------------------------------------
   Explicit tracked / untracked stock choice
   --------------------------------------------------------- */

.stock-tracking-toggle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .45rem;
}

.stock-tracking-toggle button {
    width: 100%;
    min-width: 0;
}

.stock-tracking-toggle button.active {
    font-weight: 700;
}

#stock-quantity[readonly] {
    opacity: .7;
}


/* ---------------------------------------------------------
   Tracked-package move control
   --------------------------------------------------------- */

.inventory-package-move {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr) auto;
    gap: .4rem;
    margin-top: .45rem;
}

.inventory-package-move.hidden {
    display: none;
}

.inventory-package-move select {
    min-width: 0;
    width: 100%;
}

.inventory-package-move button {
    min-width: 92px;
    white-space: nowrap;
}

@media (max-width: 400px) {
    .inventory-package-move {
        grid-template-columns: 1fr;
    }

    .inventory-package-move button {
        width: 100%;
    }
}


/* ---------------------------------------------------------
   Untracked inventory management
   --------------------------------------------------------- */

.inventory-untracked {
    margin-top: .45rem;
}

.inventory-untracked-summary {
    cursor: pointer;
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.3;
}

.inventory-untracked-controls {
    margin-top: .5rem;
}

.inventory-untracked-controls .field {
    margin-bottom: .45rem;
}

.inventory-untracked-controls input {
    width: 100%;
}

.inventory-untracked-actions {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: .4rem;
}

.inventory-untracked-actions button {
    width: 100%;
    min-width: 0;
}

.inventory-untracked-move {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr) auto;
    gap: .4rem;
    margin-bottom: .45rem;
}

.inventory-untracked-move.hidden {
    display: none;
}

.inventory-untracked-move select {
    width: 100%;
    min-width: 0;
}

@media (max-width: 400px) {

    .inventory-untracked-move {
        grid-template-columns: 1fr;
    }

    .inventory-untracked-move button {
        width: 100%;
    }
}

/* ---------------------------------------------------------
   Untracked stock lifecycle actions
   --------------------------------------------------------- */

.inventory-untracked-move-button {
    grid-column: 1 / -1;
}

@media (max-width: 400px) {
    .inventory-untracked-actions {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .inventory-untracked-move-button {
        grid-column: 1 / -1;
    }
}


/* ---------------------------------------------------------
   History / audit view
   --------------------------------------------------------- */

.history-panel {
    min-width: 0;
}

.history-toolbar {
    display: grid;
    gap: .75rem;
    margin-bottom: 1rem;
}

.history-search-field {
    margin-bottom: 0;
}

.history-filters {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.history-filter {
    width: auto;
    min-height: 0;
    padding: .55rem .75rem;

    border: 1px solid #475569;
    border-radius: 999px;

    background: #172033;
    color: #cbd5e1;

    font-size: .82rem;
}

.history-filter.active {
    background: #f8fafc;
    color: #0f172a;
    border-color: #f8fafc;
}

.history-summary {
    margin-bottom: .75rem;

    color: #94a3b8;
    font-size: .85rem;
}

.history-item {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: .65rem;

    margin-bottom: .55rem;
    padding: .8rem;

    background: #172033;
    border: 1px solid rgba(148, 163, 184, .12);
    border-radius: 14px;
}

.history-icon {
    display: grid;
    place-items: center;

    width: 36px;
    height: 36px;

    background: #0f172a;
    border-radius: 50%;

    font-size: 1.05rem;
    font-weight: 800;
}

.history-main {
    min-width: 0;
}

.history-topline {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .75rem;
    align-items: baseline;
    justify-content: space-between;
}

.history-action {
    font-weight: 800;
    font-size: .9rem;
}

.history-time {
    color: #94a3b8;
    font-size: .74rem;
    white-space: nowrap;
}

.history-product {
    margin-top: .2rem;

    font-weight: 700;
    font-size: 1rem;

    overflow-wrap: anywhere;
}

.history-brand {
    margin-top: .08rem;

    color: #cbd5e1;
    font-size: .8rem;
}

.history-location {
    margin-top: .35rem;

    color: #94a3b8;
    font-size: .8rem;
    line-height: 1.35;
}

.history-footer {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    align-items: center;

    margin-top: .55rem;
}

.history-badge {
    display: inline-flex;
    align-items: center;

    padding: .18rem .45rem;

    background: #0f172a;
    border: 1px solid #334155;
    border-radius: 999px;

    color: #cbd5e1;
    font-size: .7rem;
    font-weight: 700;
}

.history-badge-tracked {
    border-color: #64748b;
    color: #f8fafc;
}

.history-badge-package {
    background: #1e293b;
}

.history-badge-legacy {
    opacity: .68;
}

.history-user {
    color: #94a3b8;
    font-size: .74rem;
}

.history-empty {
    padding: 2rem .5rem;

    text-align: center;
    color: #94a3b8;
}


/*
 * Six bottom-navigation destinations.
 * Desktop uses the existing vertical flex navigation.
 */
@media (max-width: 899px) {

    .app-nav {
        grid-template-columns:
            repeat(6, minmax(0, 1fr));
    }

    .app-nav button {
        padding-left: 2px;
        padding-right: 2px;
    }

    .history-item {
        padding: .7rem;
    }
}


@media (max-width: 420px) {

    .app-nav button {
        font-size: .68rem;
    }

    .app-nav-icon {
        font-size: 1.1rem;
    }

    .history-time {
        width: 100%;
    }
}


/* ---------------------------------------------------------
   Compact application header
   --------------------------------------------------------- */

#dashboard-card > .brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

#dashboard-card > .brand h2 {
    margin: 0;
}

#dashboard-card > .brand .user-meta {
    margin: 0;

    text-align: right;
    white-space: nowrap;

    color: #cbd5e1;
    font-weight: 600;
}


/*
 * Override the older mobile header rules.
 */
@media (max-width: 899px) {

    #dashboard-card > .brand {
        display: flex;
        align-items: center;
        justify-content: space-between;

        padding: 13px 16px;
    }

    #dashboard-card > .brand h2 {
        margin: 0;

        font-size: 1.25rem;
        line-height: 1.2;
    }

    #dashboard-card > .brand .user-meta {
        margin: 0;

        font-size: .9rem;
        line-height: 1.2;
    }
}


@media (max-width: 400px) {

    #dashboard-card > .brand {
        gap: .65rem;
    }

    #dashboard-card > .brand h2 {
        font-size: 1.12rem;
    }

    #dashboard-card > .brand .user-meta {
        max-width: 42%;

        overflow: hidden;
        text-overflow: ellipsis;

        font-size: .85rem;
    }
}


/* ---------------------------------------------------------
   Repack / portion workflow
   --------------------------------------------------------- */

.inventory-package-repack {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: .5rem;

    margin-top: .55rem;
    padding: .65rem;

    border: 1px solid rgba(148,163,184,.18);
    border-radius: 10px;

    background: rgba(15,23,42,.35);
}


.inventory-package-repack.hidden {
    display: none;
}


.inventory-package-repack-field {
    display: grid;
    gap: .3rem;

    min-width: 0;
}


.inventory-package-repack-field span {
    color: #94a3b8;

    font-size: .70rem;
    font-weight: 600;
}


.inventory-package-repack-field input {
    width: 100%;
    min-width: 0;
}


.inventory-package-repack-buttons {
    grid-column: 1 / -1;

    display: grid;
    grid-template-columns:
        1fr 1fr;
    gap: .45rem;
}


.inventory-package-repack-buttons button {
    width: 100%;
    min-width: 0;
}


@media (max-width: 520px) {

    .inventory-package-repack {
        grid-template-columns: 1fr;
    }

    .inventory-package-repack-buttons {
        grid-column: auto;
    }
}