/* Karat Du Café — POS custom styles (warm wood-and-terracotta cafe theme) */

:root {
    /* Brand palette — deep terracotta/rust accent (buttons, active states,
       prices, the active sidebar item) over a warm sandy-cream base and a
       wood-toned sidebar, matching the reference cafe branding. */
    --pos-primary: #b6572f;        /* terracotta / rust */
    --pos-primary-light: #e3a879;  /* highlight tint */
    --pos-primary-dark: #8a3f1f;   /* pressed / hover shade */
    --pos-primary-soft: rgba(182, 87, 47, .13);     /* pill / active-row tint */
    --pos-primary-soft-2: rgba(182, 87, 47, .24);

    --pos-bg: #ecddc4;              /* warm sandy page background behind the shell */
    --pos-sidebar-bg: #ab7e56;      /* warm wood-tan sidebar */
    --pos-sidebar-bg-2: #9a6c46;    /* darker wood shade, used only for the grain texture */
    /* Inactive-link text was previously a washed-out rgba(58,42,29,.62) —
       against the #ab7e56 tan background that measures ~2.2:1 contrast
       (WCAG wants 4.5:1), which is why nav items looked "invisible". A
       near-black warm brown, kept nearly solid, measures ~4.6:1 instead —
       clearly readable while still reading as "muted" next to the solid
       white-on-terracotta active pill. */
    --pos-sidebar-text: #241a10;
    --pos-sidebar-text-muted: rgba(36, 26, 16, .88);
    --pos-sidebar-border: rgba(0, 0, 0, .10);
    --pos-surface: #fffaf3;         /* card surface — warm off-white, not stark white */
    --pos-surface-2: #f3e6d3;       /* inputs / hover surface */
    --pos-border: #e8d6ba;
    --pos-text: #3a2a1d;            /* deep warm brown, ties into the wood/terracotta theme */
    --pos-text-muted: #9c8367;
    --pos-card-radius: 14px;

    /* Status tint colors (soft-tint pills, per the reference UI) — kept
       distinct from the brand accent since they carry functional meaning
       (pending/cooking/delivery/ready), not branding. */
    --pos-status-pending-bg: rgba(139, 148, 158, .14);
    --pos-status-pending-fg: #5f6b76;
    --pos-status-cooking-bg: rgba(217, 106, 58, .14);
    --pos-status-cooking-fg: #c1552a;
    --pos-status-delivery-bg: rgba(59, 130, 246, .14);
    --pos-status-delivery-fg: #2f6fd6;
    --pos-status-ready-bg: rgba(46, 160, 90, .14);
    --pos-status-ready-fg: #2e8e50;
    --pos-status-danger-bg: rgba(217, 72, 58, .12);
    --pos-status-danger-fg: #c23b28;

    /* Bootstrap 5.3 tokens — left at their light-mode defaults; only the
       link colors are re-pointed at the brand accent. */
    --bs-link-color: var(--pos-primary-dark);
    --bs-link-hover-color: var(--pos-primary);
}

/* A subtle warm checker pattern behind the app — the app itself sits on
   top as an inset, shadowed "floating" card (see .app-shell below) rather
   than filling the browser edge-to-edge. */
body {
    background-color: var(--pos-bg);
    background-image:
        linear-gradient(45deg, rgba(182, 87, 47, .06) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(182, 87, 47, .06) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(182, 87, 47, .06) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(182, 87, 47, .06) 75%);
    background-size: 64px 64px;
    background-position: 0 0, 0 32px, 32px -32px, -32px 0;
    color: var(--pos-text);
    font-family: 'Jost', 'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif;
    padding: 18px;
}

h1, h2, h3, h4, h5, h6, .fw-semibold, .fw-bold { letter-spacing: .01em; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #e3dad2; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--pos-primary); }

a { color: var(--pos-primary-dark); }
a:hover { color: var(--pos-primary); }

/* ---- Layout shell ------------------------------------------------- */
/* The whole app renders as one rounded, shadowed card floating over the
   checkered page background, instead of filling the browser edge-to-edge. */
.app-shell {
    display: flex;
    align-items: stretch;
    /* Fixed (not min-) height, so the shell never grows past the viewport.
       That's what makes .app-sidebar and .app-content scroll INDEPENDENTLY
       of each other via their own overflow-y:auto below — a long list (e.g.
       Inventory with 250+ rows) scrolls its own content while the sidebar
       stays put, instead of the whole page (sidebar included) scrolling. */
    height: calc(100vh - 36px);
    background: var(--pos-surface);
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(43, 36, 32, .14), 0 2px 8px rgba(43, 36, 32, .06);
}

.app-sidebar {
    width: 250px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    /* Warm wood-plank look: two faint repeating stripe layers (one lighter,
       one darker than the base tan) over the solid sidebar color — a subtle
       grain texture done entirely in CSS, no image asset needed. */
    background:
        repeating-linear-gradient(100deg, rgba(255, 255, 255, .035) 0px, rgba(255, 255, 255, .035) 2px, transparent 2px, transparent 7px),
        repeating-linear-gradient(100deg, rgba(0, 0, 0, .035) 0px, rgba(0, 0, 0, .035) 1px, transparent 1px, transparent 34px),
        var(--pos-sidebar-bg);
    color: var(--pos-sidebar-text);
    border-right: 1px solid var(--pos-sidebar-border);
}
.app-sidebar .brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px;
    border-bottom: 1px solid var(--pos-sidebar-border);
}
/* The logo mark itself has a near-black background baked into the PNG —
   framing it in a soft rounded, gently glowing tile (instead of it sitting
   bare on the sidebar) keeps the dark square from looking flat. */
.app-sidebar .brand img {
    width: 42px;
    height: 42px;
    object-fit: cover;
    flex-shrink: 0;
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(58, 42, 29, .35), 0 0 0 4px rgba(255, 255, 255, .3);
}
.app-sidebar .brand-text { line-height: 1.15; }
.app-sidebar .brand-text .name {
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: .06em;
    color: var(--pos-sidebar-text);
    text-transform: uppercase;
}
.app-sidebar .brand-text .sub {
    font-size: .66rem;
    letter-spacing: .18em;
    color: var(--pos-primary-dark);
    text-transform: uppercase;
}

/* Active item = solid terracotta pill spanning the row (not a soft tint) —
   matches the reference UI's sidebar treatment. */
/* Bootstrap's base .nav sets flex-wrap:wrap; combined with .flex-column
   (flex-direction:column) that makes a HEIGHT-CONSTRAINED nav wrap into a
   second column instead of scrolling once it runs out of vertical room —
   exactly what happens now that .app-shell has a fixed height. Force it
   back to a single column so overflow-y:auto actually scrolls it. */
.app-sidebar nav.nav { padding: 4px 12px; flex: 1; overflow-y: auto; flex-wrap: nowrap; }
.app-sidebar .nav-link {
    color: var(--pos-sidebar-text-muted);
    padding: 10px 14px;
    margin: 2px 0;
    border-radius: 10px;
    font-size: .92rem;
    display: flex;
    align-items: center;
}
.app-sidebar .nav-link:hover { color: var(--pos-sidebar-text); background: rgba(255, 255, 255, .22); }
.app-sidebar .nav-link.active {
    color: #fff;
    background: var(--pos-primary);
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(58, 42, 29, .22);
}
.app-sidebar .nav-link.active i { color: #fff; }
.app-sidebar .nav-header {
    padding: 16px 14px 6px;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--pos-sidebar-text-muted);
    font-weight: 600;
}

/* Sidebar footer: logged-in user card, pinned to the bottom via the
   sidebar's flex column (nav grows above it, this stays put). */
.sidebar-profile { padding: 10px; border-top: 1px solid var(--pos-sidebar-border); }
.sidebar-profile-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    /* A light cream chip floating on the tan sidebar, matching the
       reference UI's bottom profile card. */
    background: var(--pos-surface);
    border: none;
    border-radius: 12px;
    text-align: left;
    cursor: pointer;
}
.sidebar-profile-btn:hover { background: #fff; }
.sidebar-profile-avatar {
    width: 34px; height: 34px; flex-shrink: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--pos-primary), var(--pos-primary-dark));
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem;
}
.sidebar-profile-text { flex: 1; min-width: 0; line-height: 1.25; }
.sidebar-profile-name {
    display: block;
    font-weight: 600;
    font-size: .86rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sidebar-profile-role { display: block; font-size: .72rem; color: var(--pos-text-muted); }
.sidebar-profile-chevron { color: var(--pos-text-muted); font-size: .8rem; flex-shrink: 0; }
.sidebar-profile .dropdown-menu { width: calc(100% - 20px); }

.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.app-topbar {
    background: var(--pos-surface);
    border-bottom: 1px solid var(--pos-border);
    padding: 12px 22px;
    flex-shrink: 0;
}
.app-topbar h5 { color: var(--pos-text); font-weight: 600; }
.app-content { flex: 1; overflow-y: auto; padding: 24px; }

/* Breadcrumb-style page eyebrow, e.g. "MAIN MENU / ORDER" */
.pos-breadcrumb {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--pos-text-muted);
    margin-bottom: 4px;
}
.pos-breadcrumb .current { color: var(--pos-primary-dark); font-weight: 600; }

/* Full-width gradient banner alert (megaphone + message + close) */
.pos-banner {
    background: linear-gradient(90deg, var(--pos-primary), var(--pos-primary-dark));
    color: #fff;
    border-radius: var(--pos-card-radius);
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.pos-banner i.bi-megaphone { font-size: 1.2rem; }
.pos-banner .btn-close { filter: invert(1) brightness(2); }

/* ---- Cards / widgets ------------------------------------------------ */
.stat-card {
    background: var(--pos-surface);
    border-radius: var(--pos-card-radius);
    padding: 18px 20px;
    border: 1px solid var(--pos-border);
    box-shadow: 0 2px 10px rgba(43, 36, 32, .05);
}
.stat-card .stat-value { font-size: 1.6rem; font-weight: 700; color: var(--pos-text); }
.stat-card .stat-label { color: var(--pos-text-muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; }

.card {
    border-radius: var(--pos-card-radius);
    background: var(--pos-surface);
    border-color: var(--pos-border);
    color: var(--pos-text);
    box-shadow: 0 2px 10px rgba(43, 36, 32, .04);
}
.card-header { border-bottom-color: var(--pos-border); background: transparent; }

/* Table headers app-wide — the same soft accent tint used on the active
   sidebar nav pill, instead of a plain white/bordered header row. */
.table > thead > tr > th,
.table thead th {
    background: var(--pos-primary-soft);
    color: var(--pos-text);
    font-weight: 700;
    border-bottom: none;
    vertical-align: middle;
}
.table > thead > tr:first-child > th:first-child { border-top-left-radius: 10px; }
.table > thead > tr:first-child > th:last-child { border-top-right-radius: 10px; }

.badge-low-stock { background: #d9483a; color: #fff; }
tr.low-stock-row { background: rgba(217, 72, 58, .08) !important; }
tr.low-stock-row td { color: var(--pos-text); }

/* ---- Buttons ---------------------------------------------------------- */
.btn-brand {
    background: linear-gradient(135deg, var(--pos-primary), var(--pos-primary-dark));
    border-color: var(--pos-primary-dark);
    color: #fff;
    font-weight: 500;
}
.btn-brand:hover {
    background: linear-gradient(135deg, var(--pos-primary-light), var(--pos-primary));
    border-color: var(--pos-primary);
    color: #fff;
}

/* ---- Status pills (Open Orders / Order List / Kitchen) ---------------- */
.status-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 12px;
    border-radius: 20px;
    font-size: .72rem;
    font-weight: 600;
    white-space: nowrap;
}
.status-pill.st-pending   { background: var(--pos-status-pending-bg);  color: var(--pos-status-pending-fg); }
.status-pill.st-preparing,
.status-pill.st-cooking   { background: var(--pos-status-cooking-bg);  color: var(--pos-status-cooking-fg); }
.status-pill.st-processing,
.status-pill.st-delivery  { background: var(--pos-status-delivery-bg); color: var(--pos-status-delivery-fg); }
.status-pill.st-ready,
.status-pill.st-served,
.status-pill.st-finished  { background: var(--pos-status-ready-bg);    color: var(--pos-status-ready-fg); }

/* ---- POS screen: Order List (Open Orders) ------------------------------ */
/* A single horizontal-scroll row — cards never wrap to a second row, so
   this strip stays compact no matter how many orders are open, leaving
   the product grid and cart the rest of the screen. */
.open-orders-bar {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.open-order-card {
    position: relative;
    flex: 0 0 auto;
    width: 190px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    background: var(--pos-surface);
    border: 1px solid transparent;
    border-radius: var(--pos-card-radius);
    padding: 12px;
    text-decoration: none;
    color: var(--pos-text);
    transition: box-shadow .15s, transform .1s, border-color .15s;
}
.open-order-card:hover { box-shadow: 0 6px 18px rgba(43, 36, 32, .08); transform: translateY(-1px); color: var(--pos-text); }
.open-order-card.current { border-color: var(--pos-primary); box-shadow: 0 0 0 2px var(--pos-primary-soft-2); }

/* Full tinted card background per status — same treatment as the Table
   Management cards (a solid pastel fill, not just a small pill). */
.open-order-card.status-pending    { background: var(--pos-status-pending-bg); }
.open-order-card.status-preparing  { background: var(--pos-status-cooking-bg); }
.open-order-card.status-ready      { background: var(--pos-status-ready-bg); }

.open-order-card .oo-chevron {
    position: absolute;
    top: 12px;
    right: 10px;
    color: var(--pos-text-muted);
    font-size: .78rem;
}
.open-order-card .oo-icon {
    width: 32px; height: 32px; flex-shrink: 0;
    border-radius: 9px;
    background: rgba(255, 255, 255, .6);
    display: flex; align-items: center; justify-content: center;
    color: var(--pos-primary-dark);
    font-size: .9rem;
}
.open-order-card .oo-main { width: 100%; min-width: 0; }
.open-order-card .oo-name {
    font-weight: 600;
    font-size: .84rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.open-order-card .oo-table {
    font-size: .68rem;
    color: var(--pos-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.open-order-card .oo-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    width: 100%;
}
.open-order-card .oo-items { font-size: .68rem; color: var(--pos-text-muted); }
/* The card itself is already tinted by status — give the pill its own
   translucent-white chip so it doesn't disappear into a same-color card. */
.open-order-card .status-pill { background: rgba(255, 255, 255, .65); }

/* ---- POS screen: product grid + cart ----------------------------------- */
.pos-existing-items { max-height: 160px; overflow-y: auto; }

/* .pos-page wraps everything from the breadcrumb down to the grid so the
   grid can flex:1 to fill exactly whatever height is left in .app-content
   (itself a bounded flex item — see .app-main/.app-content above) instead
   of guessing a fixed "100vh minus N px" number. That guess used to leave
   a gap above the cart: "Order List" + the open-orders bar + "Order Menu"
   used to sit ABOVE the grid, full-width, so the whole grid (both columns)
   started lower than it needed to — the cart had nothing of its own to
   fill that space with. Order List / Order Menu now live inside the left
   column's fixed head (.pos-products-head) instead, so the cart column
   starts flush at the very top and stretches down to cover what used to
   be blank. */
.pos-page { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.pos-grid { display: grid; grid-template-columns: 1fr 380px; gap: 18px; flex: 1; min-height: 0; }
.pos-products { display: flex; flex-direction: column; min-height: 0; }
.pos-products-head { flex-shrink: 0; }
/* overflow-x: hidden is deliberate, not just tidiness — per the CSS
   overflow spec, setting overflow-y to anything but "visible" forces the
   browser to also compute overflow-x as "auto" if left unset. Bootstrap's
   .row here carries its usual small negative left/right margin (half the
   gutter), which very slightly overflows this container's width — with
   overflow-x defaulting to that auto behavior, the tiny overflow was
   enough to show a horizontal scrollbar under the category cards even
   though nothing there actually needs to scroll sideways. */
.pos-products-body { flex: 1; overflow-y: auto; overflow-x: hidden; padding-right: 4px; }


.pos-product-card {
    position: relative;
    cursor: pointer;
    border-radius: var(--pos-card-radius);
    border: 1px solid var(--pos-border);
    background: var(--pos-surface);
    transition: box-shadow .15s, transform .1s, border-color .15s;
}
.pos-product-card:hover { box-shadow: 0 8px 20px rgba(43, 36, 32, .08); transform: translateY(-2px); border-color: var(--pos-primary-light); }
.pos-product-card .price { color: var(--pos-primary-dark); font-weight: 700; }
.pos-product-card .pos-thumb-wrap { position: relative; }
.pos-product-card img,
.pos-product-card .no-image {
    border-radius: 10px;
}
/* A soft accent-tinted gradient instead of a flat gray box while a
   product has no photo uploaded yet. */
.pos-product-card .no-image {
    background: linear-gradient(135deg, var(--pos-primary-soft), var(--pos-surface-2));
    color: var(--pos-primary-dark);
}
.pos-product-card .no-image i { opacity: .6; }
.pos-product-card .category-label { font-size: .72rem; color: var(--pos-text-muted); text-transform: uppercase; letter-spacing: .04em; }

/* Category cards — step 1 of the POS product picker. Tapping one reveals
   that category's product cards (#posProductPanel) in the same spot. */
.pos-category-card {
    cursor: pointer;
    text-align: center;
    border-radius: var(--pos-card-radius);
    border: 1px solid var(--pos-border);
    background: var(--pos-surface);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 130px;
    transition: box-shadow .15s, transform .1s, border-color .15s;
}
.pos-category-card:hover { box-shadow: 0 8px 20px rgba(43, 36, 32, .08); transform: translateY(-2px); border-color: var(--pos-primary-light); }
.pos-category-card .pos-category-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    background: linear-gradient(135deg, var(--pos-primary-soft), var(--pos-surface-2));
    color: var(--pos-primary-dark);
}

/* Small circular checkmark badge overlay — shown once a product is in the cart */
.pos-product-card .card-check-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fff;
    color: var(--pos-primary);
    border: 2px solid var(--pos-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    opacity: 0;
    transform: scale(.6);
    transition: opacity .15s, transform .15s;
}
.pos-product-card.in-cart .card-check-badge {
    opacity: 1;
    transform: scale(1);
    background: var(--pos-primary);
    color: #fff;
}

.pos-cart {
    display: flex;
    flex-direction: column;
    background: var(--pos-surface);
    border-radius: var(--pos-card-radius);
    border: 1px solid var(--pos-border);
}
.pos-cart-items { flex: 1; overflow-y: auto; }
.pos-cart-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--pos-border);
}
.pos-cart-item .thumb {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--pos-surface-2);
}
.pos-cart-item .no-thumb {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    flex-shrink: 0;
    background: var(--pos-surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pos-text-muted);
}
.pos-cart-item .ci-main { flex: 1; min-width: 0; }
.pos-cart-item .ci-name { font-weight: 600; font-size: .9rem; }
.pos-cart-item .ci-notes { color: var(--pos-text-muted); font-size: .76rem; }
.pos-cart-item .ci-price { font-weight: 700; color: var(--pos-text); white-space: nowrap; }

/* Pill-shaped quantity stepper */
.qty-stepper {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--pos-surface-2);
    border-radius: 20px;
    padding: 3px 6px;
    flex-shrink: 0;
}
.qty-stepper button {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: none;
    background: #fff;
    color: var(--pos-primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 1px 3px rgba(43, 36, 32, .12);
}
.qty-stepper button:hover { background: var(--pos-primary-soft); }
.qty-stepper .qty-value { min-width: 14px; text-align: center; font-weight: 600; font-size: .82rem; }
.qty-stepper.remove button { color: #c23b28; }

.pos-cart-totals { border-top: 1px solid var(--pos-border); padding: 14px 16px; }
.pos-cart-totals .divider-dotted { border-top: 1px dashed var(--pos-border); margin: 10px 0; }
.pos-cart-totals .total-row { font-weight: 700; font-size: 1.1rem; }
.pos-cart-totals .total-row .amount { color: var(--pos-primary-dark); }
.pos-cart-totals .text-danger-amount { color: #c23b28; }

/* ---- Tables (dine-in) ---------------------------------------------- */
.table-status-available { background: rgba(46, 160, 90, .08); }
.table-status-occupied { background: rgba(217, 72, 58, .08); }
.table-status-reserved { background: rgba(224, 161, 0, .10); }
.table-status-cleaning { background: rgba(120, 140, 160, .10); }

.table-card {
    border-radius: var(--pos-card-radius);
    padding: 16px;
    text-align: center;
    border: 1px solid var(--pos-border);
    color: var(--pos-text);
    cursor: pointer;
}

/* ---- Kitchen Display tickets ---------------------------------------- */
.kitchen-card {
    background: var(--pos-surface);
    border: 1px solid var(--pos-border);
    border-top: 3px solid #c9c2ba;
    border-radius: var(--pos-card-radius);
    overflow: hidden;
    height: 100%;
    transition: border-color .2s;
    box-shadow: 0 2px 10px rgba(43, 36, 32, .04);
}
.kitchen-card.all-ready { border-top-color: var(--pos-status-ready-fg); }
.kitchen-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: var(--pos-surface-2);
    border-bottom: 1px solid var(--pos-border);
}
.kitchen-card-header .order-no { font-weight: 600; letter-spacing: .02em; }
.kitchen-card-body { padding: 6px 14px; }
.kitchen-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 10px 0;
    border-bottom: 1px solid var(--pos-border);
}
.kitchen-item:last-child { border-bottom: none; }
.kitchen-item .item-name { font-weight: 600; }
.kitchen-item .item-notes { color: var(--pos-text-muted); font-size: .8rem; }

/* ---- Searchable <select> (Recipe / Purchase ingredient pickers) ------- */
.searchable-select { position: relative; }
.searchable-select-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 40;
    max-height: 240px;
    overflow-y: auto;
    background: var(--pos-surface);
    border: 1px solid var(--pos-border);
    border-radius: 8px;
    box-shadow: 0 12px 28px rgba(43, 36, 32, .14);
    margin-top: 4px;
}
.searchable-select-item {
    padding: 7px 12px;
    font-size: .88rem;
    cursor: pointer;
}
.searchable-select-item:hover { background: var(--pos-primary-soft); }
.searchable-select-empty { padding: 7px 12px; font-size: .85rem; color: var(--pos-text-muted); }