:root {
    --nl-navy: #1f3a5f;
    --nl-navy-dark: #172b46;
    --nl-orange: #e07a1f;
    --bs-primary: #1f3a5f;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: #f6f7f9;
}

/* Buttons / primary accents tuned to the brand */
.btn-primary {
    --bs-btn-bg: var(--nl-navy);
    --bs-btn-border-color: var(--nl-navy);
    --bs-btn-hover-bg: var(--nl-navy-dark);
    --bs-btn-hover-border-color: var(--nl-navy-dark);
    --bs-btn-active-bg: var(--nl-navy-dark);
    --bs-btn-active-border-color: var(--nl-navy-dark);
}

.btn-outline-primary {
    --bs-btn-color: var(--nl-navy);
    --bs-btn-border-color: var(--nl-navy);
    --bs-btn-hover-bg: var(--nl-navy);
    --bs-btn-hover-border-color: var(--nl-navy);
    --bs-btn-active-bg: var(--nl-navy);
}

.text-primary { color: var(--nl-navy) !important; }
.bg-primary-subtle { background-color: #e7edf4 !important; }

.nl-navbar {
    background: var(--nl-navy);
}
.nl-navbar .navbar-brand,
.nl-navbar .nav-link {
    color: rgba(255, 255, 255, .85);
}
.nl-navbar .nav-link:hover,
.nl-navbar .nav-link.active {
    color: #fff;
}
.nl-navbar .nav-link.active {
    border-bottom: 2px solid var(--nl-orange);
}

.nl-hero {
    background: linear-gradient(135deg, var(--nl-navy), #2c517f);
    color: #fff;
}

.nl-stat-icon {
    width: 46px; height: 46px;
    border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.3rem;
}

.nl-stat { border: 0; box-shadow: 0 1px 3px rgba(0,0,0,.07); }

.card { border-color: #e9ecef; }

.nl-sort { text-decoration: none; color: inherit; white-space: nowrap; }
.nl-sort:hover { color: var(--nl-navy); }

.nl-footer { background: #fff; border-top: 1px solid #e9ecef; }

/* Label picker cards */
.nl-pick-card {
    cursor: pointer;
    transition: border-color .12s, box-shadow .12s;
}
.nl-pick-card:hover { border-color: var(--nl-navy); }
.nl-pick-card.selected {
    border-color: var(--nl-orange);
    box-shadow: 0 0 0 2px rgba(224,122,31,.25);
}

.nl-sticky-toolbar {
    position: sticky;
    top: .5rem;
    z-index: 5;
}

.pagination { --bs-pagination-color: var(--nl-navy); --bs-pagination-active-bg: var(--nl-navy); --bs-pagination-active-border-color: var(--nl-navy); }

/* POS screen */
.pos-cart { position: sticky; top: .5rem; }
.pos-prod { transition: border-color .12s, box-shadow .12s; }
.pos-prod:hover { border-color: var(--nl-navy) !important; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
#results { max-height: 62vh; overflow-y: auto; }
.pos-cart .card-body { max-height: 40vh; overflow-y: auto; }

/* On-sale price badge in tables */
.old-price-inline { color: #888; text-decoration: line-through; font-size: .85em; margin-inline-end: .35rem; }

/* ---- Business logo ---- */
.nl-brand-logo {
    height: 36px;
    width: auto;
    max-width: 170px;
    object-fit: contain;
    background: #fff;
    padding: 3px 6px;
    border-radius: 6px;
}
.nl-logo-preview {
    width: 96px;
    height: 96px;
    border: 1px dashed #cbd5e1;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8fafc;
    overflow: hidden;
}
.nl-logo-preview img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* ---- Nav polish: grouped dropdowns ---- */
.nl-navbar .navbar-nav .nav-link {
    border-radius: 8px;
    padding-inline: 0.7rem;
    transition: background-color .15s ease;
}
.nl-navbar .navbar-nav .nav-link:hover {
    background: rgba(255, 255, 255, .10);
}
.nl-navbar .navbar-nav .nav-link.active {
    background: rgba(255, 255, 255, .16);
    font-weight: 600;
}
.nl-navbar .dropdown-menu {
    border: none;
    box-shadow: 0 8px 24px rgba(2, 6, 23, .14);
    border-radius: 10px;
    padding: .35rem;
    margin-top: .35rem;
}
.nl-navbar .dropdown-item {
    border-radius: 7px;
    padding: .5rem .75rem;
}
.nl-navbar .dropdown-item.active,
.nl-navbar .dropdown-item:active {
    background: var(--nl-navy);
    color: #fff;
}

/* ============================================================
   Mobile / small-screen tuning (phones & small tablets).
   Only applies at <= 576px, so desktop and tablet are unchanged.
   ============================================================ */
@media (max-width: 576px) {
    /* Let fixed-width POS inputs shrink to fit narrow phones instead of overflowing. */
    .pos-screen [style*="width:13rem"],
    .pos-screen [style*="width:11rem"],
    .pos-screen [style*="width:8rem"],
    .pos-screen [style*="width:7rem"] {
        width: auto !important;
        max-width: 100%;
    }
    /* Channel selector and customer search stretch to a comfortable width. */
    .pos-screen #channelSel { min-width: 9rem; }
    .pos-screen #customerSearch { flex: 1 1 auto; min-width: 0; }

    /* Give tables a touch more breathing room and keep totals readable. */
    .table > :not(caption) > * > * { padding: .4rem .35rem; }

    /* Larger tap targets for primary actions on phones. */
    .btn-lg, .btn.btn-primary.w-100 { padding-top: .7rem; padding-bottom: .7rem; }

    /* Prevent the receipt/print preview from spilling past the screen edge. */
    .container, .container-fluid { padding-left: .6rem; padding-right: .6rem; }
}

/* Medium screens (tablets in portrait): keep the POS product grid usable. */
@media (max-width: 991.98px) {
    .pos-screen .col-lg-5, .pos-screen .col-lg-7 { margin-bottom: .75rem; }
}