/* App layout & components. Colours, fonts and Bootstrap overrides live in cafe-theme.css (Deipo's brand). */

.table > :not(caption) > * > * { padding-left: .75rem; padding-right: .75rem; }
.table td.text-end, .table th.text-end { white-space: nowrap; }

/* ---- Connection badge ---- */
.conn-badge { color: #ddd; font-size: .9rem; white-space: nowrap; }
.conn-badge .conn-dot { color: #aaa; }
.conn-badge.is-online .conn-dot { color: #3ddc84; }
.conn-badge.is-offline .conn-dot { color: #ff5c5c; }
.conn-badge.is-offline { color: #fff; font-weight: 600; }

/* ---- Stat cards ---- */
.stat-label { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); }
.stat-value { font-size: 1.6rem; font-weight: 700; line-height: 1.2; }

/* ---- Hourly sales bars ---- */
.hour-bars { display: flex; align-items: flex-end; gap: 6px; height: 140px; }
.hour-bar { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; min-width: 18px; }
.hour-bar-fill { background: var(--color-accent-light); border-radius: 4px 4px 0 0; }
.hour-bar-label { font-size: .7rem; text-align: center; color: var(--color-text-muted); margin-top: 2px; }

/* ---- POS ---- */
.pos-main { padding-top: .75rem; padding-bottom: .75rem; }
@media (min-width: 992px) {
    .pos-page .pos-row { height: calc(100vh - 60px - 1.5rem); }
    .pos-page .pos-col { height: 100%; min-height: 0; }
    .pos-page .product-grid { overflow-y: auto; min-height: 0; }
}
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .6rem; align-content: start; padding: 10px 10px .5rem 0; overflow-x: hidden; }
.product-tile {
    position: relative; display: flex; flex-direction: column; justify-content: space-between; text-align: left;
    min-height: 92px; padding: .7rem .8rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface);
    transition: transform .05s ease, box-shadow .1s ease; user-select: none;
}
.product-tile:hover { box-shadow: var(--shadow-elevated); }
.product-tile:active { transform: scale(.97); }
.product-tile:focus-visible { outline: 3px solid var(--color-accent-light); outline-offset: 1px; }
.product-tile.in-cart { border-color: var(--color-primary-light); background: var(--color-surface-warm); }
.product-name { font-weight: 600; line-height: 1.2; }
.product-price { color: var(--color-accent); font-weight: 600; margin-top: .35rem; }
.product-qty { position: absolute; top: -8px; right: -8px; background: var(--color-primary); color: var(--color-text-on-primary); border-radius: 999px; min-width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 700; padding: 0 6px; }
.category-btn { border-radius: 999px; }

.order-panel { min-height: 420px; }
.cart-list { min-height: 120px; }
.cart-line { display: flex; align-items: center; padding: .55rem 1rem; border-bottom: 1px solid var(--color-border); }
.cart-line .line-total { min-width: 72px; font-weight: 600; }
.cart-line .qty-value { min-width: 36px; opacity: 1; }
.customer-results { z-index: 20; max-height: 320px; overflow-y: auto; top: 100%; }
.customer-chip { background: var(--color-surface-warm); border-radius: .5rem; padding: .5rem .75rem; }

.receipt { font-family: ui-monospace, Consolas, monospace; font-size: .9rem; }
.receipt-meta { text-align: center; }
.receipt-customer { text-align: center; font-size: 1rem; font-weight: 700; margin: 8px 0; padding: 6px 0; border-bottom: 1px dashed var(--color-border); letter-spacing: .02em; }
.receipt-table { width: 100%; }
.receipt-table td { padding: 2px 0; vertical-align: top; }
.receipt-table .r { text-align: right; white-space: nowrap; }
.receipt-table .sep td { border-top: 1px dashed var(--color-accent); padding-top: 4px; }
.receipt-table .total td { font-weight: 700; font-size: 1.1rem; }

@media print {
    .app-navbar, .d-print-none, .btn { display: none !important; }
    body { background: #fff; }
    .card { box-shadow: none !important; }
}

/* ---- Dashboard: tomorrow's birthdays ---- */
.birthday-tomorrow { background: #fff3cd; border-left: 4px solid #f0a500; border-radius: 8px; padding: 14px 18px; }
.birthday-tomorrow .btn-warning { --bs-btn-bg: #f0a500; --bs-btn-border-color: #f0a500; --bs-btn-color: #1c1c1c; --bs-btn-hover-bg: #d99500; --bs-btn-hover-border-color: #d99500; }


/* ---- Supplier accounts ---- */
.supplier-balance { font-size: 2.2rem; font-weight: 700; line-height: 1.1; }
.po-payment legend { color: var(--color-primary); }
.purchase-unit-box { border: 1px dashed var(--color-border); border-radius: var(--radius-sm); padding: .6rem .75rem .4rem; background: var(--color-surface-warm); }

/* ---- Order edit ---- */
.edit-line.line-removed td:not(:last-child) { text-decoration: line-through; opacity: .5; }
.edit-line.line-changed { background: var(--color-surface-warm); }
.new-line { background: #eef4f8; }

/* ---- Add-on chips (POS + order edit) ---- */
.addon-chip { border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); border-radius: 999px; padding: .2rem .7rem; font-size: .85rem; }
.addon-chip:hover { border-color: var(--color-accent-light); background: var(--color-surface-warm); }
.addon-chip.active, .addon-chip[aria-pressed="true"] { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }

/* ---- POS: cart lines with add-ons ---- */
.cart-item { border-bottom: 1px solid var(--color-border); }
.cart-item .cart-line { border-bottom: 0; }
.cart-item.is-active { background: var(--color-surface-warm); box-shadow: inset 3px 0 0 var(--color-primary); }
.cart-item .line-select { cursor: pointer; }
.cart-addon { display: flex; justify-content: space-between; padding: 0 3.6rem .25rem 1.75rem; font-size: .85rem; color: var(--color-accent); }
.addon-panel { padding: .25rem 1rem .6rem; }
.receipt-table tr.addon td { font-size: .82rem; color: #555; padding-top: 0; }