html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}
/* Add to wwwroot/css/site.css */
.card.item-card {
    transition: box-shadow 0.2s;
    cursor: pointer;
}

    .card.item-card:hover {
        box-shadow: 0 0 10px #ffc107;
        border-color: #ffc107;
    }

.section-header {
    background: #f8f9fa;
    border-radius: 0.5rem;
    padding: 0.5rem;
    margin-bottom: 1rem;
}

/* BASQUE THEME*/

:root {
    --bs-primary: #C8102E;
    --bs-primary-rgb: 200, 16, 46;
    --bs-success: #0B6E4F;
    --bs-success-rgb: 11, 110, 79;
    --bs-danger: #A50021;
    --bs-warning: #E09F3E;
    --bs-light: #F8F5F2;
    --bs-dark: #1E1E1E;
    --bs-body-bg: #F4F1EE;
    --bs-body-color: #1E1E1E;
}

/* Body */
body {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
}

/* Navbar */
.navbar {
    background-color: var(--bs-dark) !important;
}

.navbar-brand {
    color: #ffffff !important;
    font-weight: 600;
}

.navbar-nav .nav-link {
    color: #dddddd !important;
}

    .navbar-nav .nav-link:hover {
        color: var(--bs-primary) !important;
    }

/* Buttons */
a {
    color: var(--magenta);
}


.btn-primary {
    color: #fff;
    background-color: var(--magenta);
    border-color: var(--magenta);
}

    .btn-primary:hover {
        background-color: #a3146f;
        border-color: #a3146f;
    }

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: #fff;
    background-color: var(--magenta);
    border-color: var(--magenta);
}


.btn-success {
    background-color: var(--bs-success);
    border-color: var(--bs-success);
}

    .btn-success:hover {
        background-color: #09543d;
        border-color: #09543d;
    }

/* Cards */
.card {
    border: none;
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    background-color: #ffffff;
}

/* Category Titles */
.category-title {
    border-left: 4px solid var(--bs-primary);
    padding-left: 12px;
    font-weight: 600;
}

/* Prices */
.price {
    color: var(--bs-success);
    font-weight: 600;
    font-size: 1.1rem;
}

/* Order Panel */
.order-card {
    border-top: 5px solid var(--bs-primary);
}

/* Pay Button */
.pay-btn {
    background-color: var(--bs-success);
    border: none;
    font-weight: 600;
    padding: 12px;
    border-radius: 10px;
}

    .pay-btn:hover {
        background-color: #09543d;
    }

/* Quantity Buttons */
.qty-controls .btn {
    border-radius: 50%;
}

/* Accent Links */
a {
    color: var(--bs-primary);
}

    a:hover {
        color: #a50e26;
    }

.navbar::after {
    content: "";
    display: block;
    height: 4px;
    background: linear-gradient( to right, #C8102E 33%, #ffffff 33% 66%, #0B6E4F 66% );
}

/*foot Items*/
.item-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
}

.item-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

    .item-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(0,0,0,.08);
        border-color: #1b6ec2;
    }

    .item-card.sold-out {
        opacity: .55;
        cursor: not-allowed;
        pointer-events: none;
    }

.item-img {
    height: 95px;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
}

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

    .item-img i {
        font-size: 1.5rem;
    }

.item-body {
    padding: 10px;
}

.item-name {
    font-size: .9rem;
    font-weight: 600;
    margin: 0 0 6px;
    color: #1f2937;
    line-height: 1.25;
}

.item-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.item-price {
    font-size: .9rem;
    font-weight: 600;
    color: #1f2937;
}

.stock-text {
    font-size: .78rem;
    font-weight: 600;
    border-radius: 8px;
    padding: 2px 8px;
}

    .stock-text.out {
        background: #fdecec;
        color: #b91c1c;
    }

    .stock-text.low {
        background: #fdf2e1;
        color: #b45309;
    }

    .stock-text.ok {
        background: #eaf6ee;
        color: #1d7a43;
    }

#category-list .category-link {
    border: none;
    border-radius: 8px;
    margin-bottom: 2px;
    color: #1f2937;
    display: flex;
    align-items: center;
}

    #category-list .category-link i {
        color: #6b7280;
        width: 18px;
    }

    #category-list .category-link:hover {
        background: #f3f4f6;
    }

    #category-list .category-link.active {
        background: #1b6ec2;
        color: #fff;
    }

        #category-list .category-link.active i {
            color: #fff;
        }


/* ---- Layout ---- */
/*.dash-wrap {
    max-width: 980px;
    margin: 0 auto;
    padding: 1.5rem 0 3rem;
}

.dash-head {
    text-align: center;
    margin-bottom: 2rem;
}

.dash-title {
    font-size: 2rem;
    font-weight: 600;
    margin: 0;
    color: #1f2937;
}

.dash-sub {
    color: #6b7280;
    margin: .25rem 0 0;
}

.dash-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}

.dash-main {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}*/

/* ---- Hero (Create Order) ---- */
/*.dash-hero {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: #1b6ec2;
    color: #fff;
    border-radius: 16px;
    padding: 1.5rem;
    text-decoration: none;
    transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}

    .dash-hero:hover {
        background: #155a9e;
        transform: translateY(-2px);
        box-shadow: 0 8px 24px rgba(27,110,194,.28);
        color: #fff;
    }

    .dash-hero:focus-visible {
        outline: 3px solid #85b7eb;
        outline-offset: 2px;
    }

.dash-hero-icon {
    width: 56px;
    height: 56px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: rgba(255,255,255,.18);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.7rem;
}

.dash-hero-text {
    display: flex;
    flex-direction: column;
}

.dash-hero-title {
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1.2;
}

.dash-hero-desc {
    font-size: .9rem;
    color: #cfe3f7;
    margin-top: 2px;
}

.dash-hero-arrow {
    margin-left: auto;
    font-size: 1.25rem;
}*/

/* ---- Nav tiles ---- */
/*.dash-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: .9rem;
}

.dash-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 1.4rem 1rem;
    text-decoration: none;
    color: #1f2937;
    transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}

    .dash-tile i {
        font-size: 1.5rem;
        color: #1b6ec2;
    }

    .dash-tile span {
        font-size: .95rem;
        font-weight: 500;
    }

    .dash-tile:hover {
        transform: translateY(-2px);
        border-color: #1b6ec2;
        box-shadow: 0 6px 18px rgba(0,0,0,.06);
        color: #1f2937;
    }

    .dash-tile:focus-visible {
        outline: 3px solid #85b7eb;
        outline-offset: 2px;
    }*/

/* ---- Low-stock panel ---- */
/*.dash-stock {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
}

.dash-stock-head {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: .75rem;
}

    .dash-stock-head i {
        color: #b45309;
    }

.dash-stock-list {
    display: flex;
    flex-direction: column;
}

.dash-stock-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .5rem 0;
    border-bottom: 1px solid #f1f1f1;
}

.dash-stock-name {
    font-size: .92rem;
    color: #374151;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-right: .5rem;
}

.dash-stock-qty {
    flex: 0 0 auto;
    min-width: 30px;
    text-align: center;
    font-size: .85rem;
    font-weight: 600;
    border-radius: 8px;
    padding: 2px 10px;
}

    .dash-stock-qty.crit {
        background: #fdecec;
        color: #b91c1c;
    }

    .dash-stock-qty.warn {
        background: #fdf2e1;
        color: #b45309;
    }

    .dash-stock-qty.ok {
        background: #f1f1ee;
        color: #6b7280;
    }

.dash-stock-empty {
    color: #6b7280;
    font-size: .9rem;
    margin: .5rem 0;
}

.dash-stock-foot {
    margin-top: .75rem;
    padding-top: .6rem;
    text-align: center;
    font-size: .85rem;
    color: #1b6ec2;
    text-decoration: none;
    border-top: 1px solid #f1f1f1;
}

    .dash-stock-foot:hover {
        text-decoration: underline;
    }*/

/* ---- Responsive: stack on portrait tablet / phone ---- */
/*@media (max-width: 820px) {
    .dash-grid {
        grid-template-columns: 1fr;
    }

    .dash-hero {
        padding: 1.25rem;
    }

    .dash-hero-icon {
        width: 48px;
        height: 48px;
        font-size: 1.4rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dash-hero, .dash-tile {
        transition: none;
    }
}*/

/* ============================================================
   FestivalPOS - brand palette (from logo)
   ============================================================ */
:root {
    --magenta: #1B8A7A;
    --purple: #A01E9C;
    --orange: #F47A20;
    --yellow: #FCB814;
    --teal: #1B8A7A;
    --coral: #F0533F;
    --brand-primary: #C2178A;
    --brand-accent: #F47A20;
    --brand-bg: #FBF7F4;
    --stock-ok: #1B8A7A;
    --stock-warn: #FCB814;
    --stock-crit: #F0533F;
    --ink: #2a2230;
    --ink-soft: #6b6470;
    --card-bd: #efe7ee;
}

body {
    background-color: var(--brand-bg);
    color: var(--ink);
}

/* ---------- Navbar: magenta to purple gradient ---------- */
.navbar.bg-white {
    background: linear-gradient(90deg, var(--magenta), var(--purple)) !important;
    border-bottom: none !important;
}

.navbar .navbar-brand,
.navbar .nav-link.text-dark,
.navbar .nav-link {
    color: #fff !important;
}

    .navbar .nav-link:hover {
        color: rgba(255,255,255,.8) !important;
    }

    .navbar .nav-link i {
        opacity: .9;
    }

/* ============================================================
   Dashboard layout
   ============================================================ */
.dash-wrap {
    max-width: 1100px;
    margin: 0 auto;
    padding: 1rem 0 3rem;
}

.dash-head {
    text-align: center;
    margin-bottom: 2rem;
}

.dash-title {
    font-weight: 800;
    font-size: 2.4rem;
    background: linear-gradient(90deg, var(--magenta), var(--orange));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: .25rem;
}

.dash-sub {
    color: var(--ink-soft);
    margin: 0;
}

.dash-grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 1.5rem;
    align-items: start;
}

/* ---------- Hero ---------- */
.dash-hero {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.6rem 1.75rem;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--orange), var(--yellow));
    color: #fff;
    text-decoration: none;
    box-shadow: 0 10px 24px rgba(244,122,32,.28);
    transition: transform .15s ease, box-shadow .15s ease;
    margin-bottom: 1.25rem;
}

    .dash-hero:hover {
        transform: translateY(-2px);
        box-shadow: 0 14px 30px rgba(244,122,32,.36);
        color: #fff;
    }

.dash-hero-icon {
    flex: 0 0 auto;
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255,255,255,.22);
    font-size: 1.5rem;
}

.dash-hero-text {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.dash-hero-title {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.1;
}

.dash-hero-desc {
    font-size: .95rem;
    opacity: .92;
}

.dash-hero-arrow {
    font-size: 1.3rem;
    opacity: .9;
}

/* ---------- Nav tiles ---------- */
.dash-tiles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.dash-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    padding: 1.6rem 1rem;
    background: #fff;
    border: 1px solid var(--card-bd);
    border-top: 3px solid transparent;
    border-radius: 14px;
    text-decoration: none;
    color: var(--ink);
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(40,20,40,.04);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

    .dash-tile i {
        font-size: 1.6rem;
    }

    .dash-tile:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 18px rgba(40,20,40,.10);
        color: var(--ink);
    }

    .dash-tile:nth-child(1) i {
        color: var(--magenta);
    }

    .dash-tile:nth-child(1):hover {
        border-top-color: var(--magenta);
    }

    .dash-tile:nth-child(2) i {
        color: var(--orange);
    }

    .dash-tile:nth-child(2):hover {
        border-top-color: var(--orange);
    }

    .dash-tile:nth-child(3) i {
        color: var(--teal);
    }

    .dash-tile:nth-child(3):hover {
        border-top-color: var(--teal);
    }

    .dash-tile:nth-child(4) i {
        color: var(--purple);
    }

    .dash-tile:nth-child(4):hover {
        border-top-color: var(--purple);
    }

    .dash-tile:nth-child(5) i {
        color: var(--coral);
    }

    .dash-tile:nth-child(5):hover {
        border-top-color: var(--coral);
    }

    .dash-tile:nth-child(6) i {
        color: #d39e00;
    }

    .dash-tile:nth-child(6):hover {
        border-top-color: var(--yellow);
    }

/* ---------- Low-stock panel ---------- */
.dash-stock {
    background: #fff;
    border: 1px solid var(--card-bd);
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(40,20,40,.04);
    overflow: hidden;
}

.dash-stock-head {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: 1rem 1.1rem;
    font-weight: 700;
    border-bottom: 1px solid var(--card-bd);
}

    .dash-stock-head i {
        color: var(--orange);
    }

.dash-stock-list {
    padding: .35rem 0;
}

.dash-stock-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .6rem 1.1rem;
    border-bottom: 1px solid #f5eef4;
}

    .dash-stock-row:last-child {
        border-bottom: none;
    }

.dash-stock-name {
    color: var(--ink);
}

.dash-stock-qty {
    min-width: 34px;
    text-align: center;
    padding: .15rem .55rem;
    border-radius: 999px;
    font-size: .85rem;
    font-weight: 700;
}

    .dash-stock-qty.ok {
        background: rgba(27,138,122,.14);
        color: var(--stock-ok);
    }

    .dash-stock-qty.warn {
        background: rgba(252,184,20,.20);
        color: #8a6500;
    }

    .dash-stock-qty.crit {
        background: rgba(240,83,63,.16);
        color: var(--stock-crit);
    }

.dash-stock-empty {
    padding: 1rem 1.1rem;
    color: var(--ink-soft);
    margin: 0;
}

.dash-stock-foot {
    display: block;
    text-align: center;
    padding: .85rem;
    color: var(--magenta);
    font-weight: 600;
    text-decoration: none;
    border-top: 1px solid var(--card-bd);
}

    .dash-stock-foot:hover {
        background: #fbf3f9;
        color: var(--magenta);
    }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    .dash-grid {
        grid-template-columns: 1fr;
    }

    .dash-tiles {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 520px) {
    .dash-tiles {
        grid-template-columns: 1fr 1fr;
    }

    .dash-hero {
        flex-wrap: wrap;
    }
}

/* ============================================================
   POS - category sidebar
   ============================================================ */
a.category-link.list-group-item {
    border: 1px solid var(--card-bd);
    color: var(--ink);
    font-weight: 600;
    transition: background-color .15s ease, color .15s ease, transform .12s ease;
}

    a.category-link.list-group-item i {
        color: var(--magenta);
        transition: color .15s ease;
    }

    a.category-link.list-group-item:hover {
        background-color: #fbf0f7;
        color: var(--magenta);
        transform: translateX(3px);
        z-index: 1;
    }

        a.category-link.list-group-item:hover i {
            color: var(--purple);
        }

    a.category-link.list-group-item.active {
        background: linear-gradient(90deg, var(--magenta), var(--purple)) !important;
        border-color: transparent !important;
        color: #fff !important;
    }

        a.category-link.list-group-item.active i {
            color: #fff !important;
        }

        a.category-link.list-group-item.active:hover {
            color: #fff !important;
            transform: none;
        }

/* On-brand Pay button (optional - replaces green) */
#pay-btn.btn-success {
    background-color: var(--teal);
    border-color: var(--teal);
}

    #pay-btn.btn-success:hover {
        background-color: #156b5f;
        border-color: #156b5f;
    }

/* ============================================================
   Data tables - compact
   ============================================================ */
.table {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(40,20,40,.05);
    border-collapse: separate;
    border-spacing: 0;
    width: auto; /* shrink to content instead of stretching */
    min-width: 100%; /* but never narrower than its container */
    font-size: .9rem;
}

    /* Header */
    .table > thead > tr > th {
        background: #faf2f8;
        color: var(--magenta);
        font-weight: 700;
        text-transform: uppercase;
        font-size: .72rem;
        letter-spacing: .03em;
        border-bottom: 2px solid var(--magenta);
        padding: .5rem .75rem;
        white-space: nowrap;
    }

    /* Body cells - tighter padding */
    .table > tbody > tr > td {
        padding: .4rem .75rem;
        vertical-align: middle;
        border-bottom: 1px solid #f1e9ef;
        color: var(--ink);
        white-space: nowrap;
    }

    .table > tbody > tr:nth-child(even) {
        background: #fdfafc;
    }

    .table > tbody > tr:hover {
        background: #fbf0f7;
    }

    .table > tbody > tr:last-child > td {
        border-bottom: none;
    }

    /* ---------- Action buttons: on-brand, compact ---------- */
    .table .btn-info {
        background-color: var(--magenta);
        border-color: var(--magenta);
        color: #fff;
    }

        .table .btn-info:hover {
            background-color: #a3146f;
            border-color: #a3146f;
            color: #fff;
        }

    .table .btn-warning {
        background-color: var(--orange);
        border-color: var(--orange);
        color: #fff;
    }

        .table .btn-warning:hover {
            background-color: #d96812;
            border-color: #d96812;
            color: #fff;
        }

    .table .btn-danger {
        background-color: var(--coral);
        border-color: var(--coral);
        color: #fff;
    }

        .table .btn-danger:hover {
            background-color: #d8402d;
            border-color: #d8402d;
            color: #fff;
        }

    .table .btn-sm {
        border-radius: 6px;
        font-weight: 600;
        padding: .2rem .55rem;
        font-size: .8rem;
    }

/* ---------- Status pills ---------- */
.status-pill {
    display: inline-block;
    padding: .2rem .6rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .02em;
}

.status-created {
    background: rgba(252,184,20,.20);
    color: #8a6500;
}

.status-complete {
    background: rgba(27,138,122,.16);
    color: var(--teal);
}
/* ============================================================
   Pagination - on brand
   ============================================================ */
.pagination {
    gap: .25rem;
}

    .pagination .page-link {
        color: var(--magenta);
        border: 1px solid var(--card-bd);
        border-radius: 8px;
        font-weight: 600;
        transition: background-color .15s ease, color .15s ease, border-color .15s ease;
    }

        .pagination .page-link:hover {
            background-color: #fbf0f7;
            color: var(--purple);
            border-color: var(--magenta);
        }

        .pagination .page-link:focus {
            box-shadow: 0 0 0 .2rem rgba(194,23,138,.25);
        }

    /* Active page: magenta to purple gradient */
    .pagination .page-item.active .page-link {
        background: linear-gradient(90deg, var(--magenta), var(--purple));
        border-color: transparent;
        color: #fff;
    }

    /* Disabled (e.g. Previous on page 1) */
    .pagination .page-item.disabled .page-link {
        color: var(--ink-soft);
        background: #fff;
        border-color: var(--card-bd);
    }

/* ============================================================
   Order Details - two column layout
   ============================================================ */
.details-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

    .details-head h2 {
        margin: 0;
        font-weight: 800;
    }

.details-grid {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 1.5rem;
    align-items: start;
}

/* ---------- Left summary card ---------- */
.summary-card {
    background: #fff;
    border: 1px solid var(--card-bd);
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(40,20,40,.05);
    padding: 1.25rem;
}

.summary-title {
    font-weight: 700;
    color: var(--magenta);
    text-transform: uppercase;
    font-size: .78rem;
    letter-spacing: .04em;
    margin-bottom: 1rem;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: .5rem 0;
    border-bottom: 1px solid #f1e9ef;
}

    .summary-row:last-child {
        border-bottom: none;
    }

.summary-label {
    color: var(--ink-soft);
    font-size: .85rem;
}

.summary-value {
    font-weight: 600;
    color: var(--ink);
    text-align: right;
}

.summary-total {
    margin-top: .5rem;
    border-top: 2px solid var(--magenta);
    padding-top: .75rem;
}

    .summary-total .summary-label {
        color: var(--ink);
        font-weight: 700;
    }

    .summary-total .summary-value {
        font-size: 1.25rem;
        font-weight: 800;
        color: var(--magenta);
    }

/* ---------- Right items table ---------- */
.details-items .table {
    margin-bottom: 0;
}

.details-items .num {
    text-align: right;
}

/* ---------- Responsive: stack on narrow screens ---------- */
@media (max-width: 768px) {
    .details-grid {
        grid-template-columns: 1fr;
    }
}
/* On-brand secondary / back buttons */
.btn-secondary {
    background-color: #fff;
    border-color: var(--magenta);
    color: var(--magenta);
}

    .btn-secondary:hover {
        background-color: #fbf0f7;
        border-color: var(--magenta);
        color: var(--purple);
    }
/* ---------- Basket (Your Order) item buttons ---------- */
#order-list .badge.bg-secondary {
    background-color: var(--magenta) !important;
}

#order-list .btn-warning {
    background-color: var(--orange);
    border-color: var(--orange);
    color: #fff;
}

    #order-list .btn-warning:hover {
        background-color: #d96812;
        border-color: #d96812;
    }

#order-list .btn-danger {
    background-color: var(--coral);
    border-color: var(--coral);
    color: #fff;
}

    #order-list .btn-danger:hover {
        background-color: #d8402d;
        border-color: #d8402d;
    }

/* ============================================================
   Form pages (Edit / Create) - card layout
   ============================================================ */
.form-page {
    max-width: 900px;
    margin: 0 auto;
}

.form-card {
    background: #fff;
    border: 1px solid var(--card-bd);
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(40,20,40,.06);
    padding: 1.75rem;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 240px;
    gap: 2rem;
    align-items: start;
}

/* Section sub-headings */
.form-section {
    font-weight: 700;
    color: var(--magenta);
    text-transform: uppercase;
    font-size: .75rem;
    letter-spacing: .04em;
    padding-bottom: .4rem;
    margin-bottom: .9rem;
    border-bottom: 1px solid #f1e9ef;
}

/* Inputs */
.form-card .form-label {
    font-weight: 600;
    font-size: .85rem;
    color: var(--ink);
}

.form-card .form-control:focus,
.form-card .form-select:focus {
    border-color: var(--magenta);
    box-shadow: 0 0 0 .2rem rgba(194,23,138,.18);
}

/* Brand the switch when on */
.form-switch .form-check-input:checked {
    background-color: var(--magenta);
    border-color: var(--magenta);
}

.form-switch .form-check-input:focus {
    border-color: var(--magenta);
    box-shadow: 0 0 0 .2rem rgba(194,23,138,.18);
}

.form-check-label {
    font-weight: 600;
}

/* Image preview */
.image-preview {
    width: 100%;
    aspect-ratio: 1 / 1;
    border: 1px solid var(--card-bd);
    border-radius: 12px;
    overflow: hidden;
    background: #faf7fa;
    display: grid;
    place-items: center;
}

    .image-preview img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.image-placeholder {
    color: #d8c8d4;
    font-size: 2.5rem;
}

/* Actions */
.form-actions {
    display: flex;
    gap: .6rem;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid #f1e9ef;
}

@media (max-width: 768px) {
    .form-grid {
        grid-template-columns: 1fr;
    }
}
/* ============================================================
   Toast notifications (success / error)
   ============================================================ */
.app-toast {
    border: none;
    border-radius: 10px;
    color: #fff;
    box-shadow: 0 6px 20px rgba(40,20,40,.18);
    min-width: 280px;
}

    .app-toast .toast-body {
        display: flex;
        align-items: center;
        font-weight: 600;
    }

    .app-toast i {
        font-size: 1.1rem;
    }

.toast-success {
    background: var(--teal);
}

.toast-error {
    background: var(--coral);
}
/* ============================================================
   Basket row layout (Your Order)
   ============================================================ */
.basket-row {
    display: flex;
    align-items: center;
    gap: .6rem;
}

/* Name takes remaining space; wraps neatly instead of pushing things */
.basket-name {
    flex: 1 1 auto;
    min-width: 0; /* allows flex item to shrink below content size */
    line-height: 1.3;
}

/* Price stays put, never shrinks */
.basket-price {
    flex: 0 0 auto;
    font-weight: 600;
    white-space: nowrap;
}

/* Buttons stay grouped on the right, never wrap */
.basket-controls {
    flex: 0 0 auto;
    display: flex;
    gap: .35rem;
}

/* On-brand minus / remove buttons */
.basket-minus {
    background-color: var(--orange);
    border-color: var(--orange);
    color: #fff;
}

    .basket-minus:hover {
        background-color: #d96812;
        color: #fff;
    }

.basket-remove {
    background-color: var(--coral);
    border-color: var(--coral);
    color: #fff;
}

    .basket-remove:hover {
        background-color: #d8402d;
        color: #fff;
    }

/* ============================================================
   Food item card - low / out of stock backgrounds
   ============================================================ */
.item-card.stock-low {
    background-color: #f54c0a; /* soft orange wash */
    border-color: var(--orange);
}

.item-card.stock-out {
    background-color: #fdecea; /* soft red wash */
    border-color: var(--coral);
    opacity: .85;
}

.tag-input {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    padding: .45rem .55rem;
    border: 1px solid #d9d5e3;
    border-radius: 10px;
    background: #fff;
    min-height: 44px;
}

    .tag-input:focus-within {
        border-color: #b5179e;
        box-shadow: 0 0 0 3px rgba(181, 23, 158, .14);
    }

.tag-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .25rem .55rem;
    background: #f5f0fa;
    color: #7209b7;
    border: 1px solid #e7dcf3;
    border-radius: 8px;
    font-size: .85rem;
    font-weight: 600;
}

    .tag-chip button {
        border: none;
        background: none;
        color: #9b6fc4;
        cursor: pointer;
        font-size: 1rem;
        line-height: 1;
        padding: 0;
    }

        .tag-chip button:hover {
            color: #b5179e;
        }

.tag-entry {
    flex: 1;
    min-width: 120px;
    border: none;
    outline: none;
    font-size: .95rem;
    padding: .2rem;
}

.tag-suggestions {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #ece9f1;
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(30, 27, 46, .12);
    z-index: 20;
    max-height: 220px;
    overflow-y: auto;
    display: none;
}

    .tag-suggestions.show {
        display: block;
    }

.tag-suggestion {
    padding: .5rem .7rem;
    font-size: .9rem;
    cursor: pointer;
}

    .tag-suggestion:hover, .tag-suggestion.active {
        background: #f5f0fa;
        color: #7209b7;
    }

    .tag-suggestion .new-label {
        font-size: .75rem;
        color: #6b6880;
        margin-left: .4rem;
    }