/* ---------- layout ---------- */

.app-main {
    max-width: 1400px;
    padding-bottom: 1rem;
}

@media (max-width: 767.98px) {
    .app-main {
        /* keep content clear of the fixed bottom nav (incl. its raised
           "Add" button) + the iPhone home bar */
        padding-bottom: calc(84px + env(safe-area-inset-bottom));
    }
}

.global-search {
    max-width: 420px;
}

@media (max-width: 767.98px) {
    .global-search {
        order: 3;
        max-width: none;
        width: 100%;
        margin-top: .5rem;
    }
}

/* ---------- mobile bottom navigation ---------- */

.mobile-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    display: flex;
    justify-content: space-around;
    padding: .35rem 0 calc(.35rem + env(safe-area-inset-bottom));
}

.mobile-nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 64px;
    padding: .25rem .5rem;
    font-size: .7rem;
    text-decoration: none;
    color: var(--bs-secondary-color);
    border-radius: .5rem;
}

.mobile-nav a i { font-size: 1.15rem; }

.mobile-nav a.active { color: var(--bs-primary); }

.mobile-nav a.mobile-nav-add i {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-top: -18px;
    border-radius: 50%;
    background: var(--bs-primary);
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}

/* ---------- items ---------- */

.item-thumb {
    width: 52px;
    height: 52px;
    object-fit: cover;
    border-radius: .5rem;
    flex-shrink: 0;
}

.item-thumb-placeholder {
    display: inline-grid;
    place-items: center;
    background: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);
    font-size: 1.2rem;
}

/* Neutral "light" chips/icons: Bootstrap's .text-bg-light forces a light
   background, which pairs with light body text (unreadable) in dark mode.
   Track the theme's tertiary surface so they stay legible in both themes. */
.text-bg-light {
    background-color: var(--bs-tertiary-bg) !important;
    color: var(--bs-body-color) !important;
}

/* Product/item preview strip on the purchases list */
.tx-previews {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    margin-top: .4rem;
}
.tx-preview {
    width: 34px;
    height: 34px;
    border-radius: .375rem;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid var(--bs-border-color);
}
.tx-preview-placeholder,
.tx-preview-more {
    display: inline-grid;
    place-items: center;
    background: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);
    font-size: .8rem;
}
.tx-preview-wrap {
    position: relative;
    display: inline-flex;
}
.tx-preview-wrap[data-tip]:hover::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    max-width: 220px;
    width: max-content;
    background: var(--bs-emphasis-color);
    color: var(--bs-body-bg);
    padding: .2rem .45rem;
    border-radius: .3rem;
    font-size: .75rem;
    line-height: 1.3;
    text-align: center;
    white-space: normal;
    z-index: 20;
    pointer-events: none;
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .3);
}

.clickable-row { cursor: pointer; }
.clickable-row:hover { background: var(--bs-tertiary-bg); }

/* card-list rows on mobile */
.list-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .6rem .75rem;
    border-bottom: 1px solid var(--bs-border-color);
    color: inherit;
    text-decoration: none;
}
.list-row:last-child { border-bottom: 0; }
.list-row:hover { background: var(--bs-tertiary-bg); }

/* ---------- item detail ---------- */

.photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: .5rem;
}

.photo-grid .photo-cell {
    position: relative;
    aspect-ratio: 1;
    border-radius: .5rem;
    overflow: hidden;
    background: var(--bs-tertiary-bg);
}

.photo-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.photo-cell .photo-actions {
    position: absolute;
    inset: auto 0 0 0;
    display: flex;
    justify-content: space-between;
    padding: .2rem .3rem;
    background: rgba(0, 0, 0, .55);
    opacity: 0;
    transition: opacity .15s;
}
.photo-cell:hover .photo-actions,
.photo-cell:focus-within .photo-actions { opacity: 1; }
.photo-actions .btn { --bs-btn-padding-y: .1rem; --bs-btn-padding-x: .4rem; }

.photo-cell .primary-star {
    position: absolute;
    top: .3rem;
    left: .3rem;
    color: #ffc107;
    text-shadow: 0 0 4px rgba(0, 0, 0, .6);
}

.fact-list dt {
    font-weight: 500;
    color: var(--bs-secondary-color);
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.fact-list dd { margin-bottom: .75rem; }

/* ---------- purchase wizard ---------- */

.line-card { border-left: 3px solid var(--bs-primary); }
.line-card .line-more { display: none; }
.line-card.expanded .line-more { display: block; }

/* Product autocomplete dropdown on the "Item" field */
.product-ac-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000;
    margin-top: 2px;
    max-height: 320px;
    overflow-y: auto;
    padding: .25rem;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: .5rem;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
}
.product-ac-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    width: 100%;
    padding: .35rem .5rem;
    border: 0;
    border-radius: .375rem;
    background: transparent;
    color: var(--bs-body-color);
    text-align: left;
}
.product-ac-item:hover,
.product-ac-item.active {
    background: var(--bs-tertiary-bg);
}
.product-ac-thumb {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: .375rem;
    flex-shrink: 0;
    font-size: 1rem;
}
.product-ac-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.product-ac-name {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.product-ac-brand {
    font-size: .8rem;
    color: var(--bs-secondary-color);
}

.totals-bar {
    position: sticky;
    bottom: 0;
    z-index: 10;
}
@media (max-width: 767.98px) {
    .totals-bar { bottom: calc(72px + env(safe-area-inset-bottom)); }
}

/* ---------- dashboard ---------- */

.stat-card .stat-value { font-size: 1.5rem; font-weight: 600; }
.stat-card .stat-icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: .75rem;
    font-size: 1.1rem;
}

/* ---------- locations / categories tree ---------- */

.tree-node { border-bottom: 1px solid var(--bs-border-color); }
.tree-node:last-child { border-bottom: 0; }
.tree-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem .25rem;
}
.tree-row:hover { background: var(--bs-tertiary-bg); border-radius: .375rem; }
.tree-children { margin-left: 1.4rem; border-left: 1px dashed var(--bs-border-color); padding-left: .4rem; }

/* ---------- misc ---------- */

.breadcrumb { margin-bottom: .5rem; --bs-breadcrumb-font-size: .85rem; }

.table > :not(caption) > * > * { vertical-align: middle; }

.w-money { white-space: nowrap; text-align: right; }

@media (max-width: 575.98px) {
    .hide-xs { display: none !important; }
}

/* big touch targets on mobile */
@media (pointer: coarse) {
    .btn, .form-control, .form-select { min-height: 42px; }
    .btn-sm { min-height: 34px; }
}

@media print {
    #topnav, #mobile-nav, .no-print { display: none !important; }
    .app-main { max-width: none; padding: 0; }
}