/* Kasir: peta meja, panel tagihan, pembayaran */
.table-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .8rem; }
.t-card { border: 1.5px solid var(--line); border-radius: 16px; background: #fff; padding: .9rem; text-align: left; cursor: pointer; min-height: 118px; display: flex; flex-direction: column; transition: transform .1s, box-shadow .15s; position: relative; }
.t-card:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(31, 26, 23, .07); }
.t-card .nm { font-weight: 800; font-size: 1.1rem; }
.t-card .st { font-size: .78rem; font-weight: 700; margin-top: .1rem; }
.t-card .amt { margin-top: auto; font-weight: 800; font-size: 1.05rem; }
.t-card .meta { font-size: .75rem; color: var(--muted); }
.t-card.kosong { background: #fff; }
.t-card.kosong .st { color: var(--muted); }
.t-card.menunggu { background: #EAF0FD; border-color: #C9D7FA; }
.t-card.menunggu .st { color: var(--info); }
.t-card.makan { background: #FEF7E0; border-color: #F6E2A5; }
.t-card.makan .st { color: var(--warning); }
.t-card.minta_bayar { background: #FFE9DC; border-color: #F9C4A5; }
.t-card.minta_bayar .st { color: var(--accent); }
.t-card.selected { outline: 3px solid var(--accent); outline-offset: 2px; }
.t-card .ping { position: absolute; top: .6rem; right: .6rem; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: .8rem; animation: ping 1.4s infinite; }
@keyframes ping { 0%, 100% { box-shadow: 0 0 0 0 rgba(194, 65, 12, .45); } 50% { box-shadow: 0 0 0 7px rgba(194, 65, 12, 0); } }

.legend { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; }
.legend .sw { width: 14px; height: 14px; border-radius: 5px; border: 1.5px solid var(--line); display: inline-block; }
.legend .sw.kosong { background: #fff; }
.legend .sw.menunggu { background: #EAF0FD; border-color: #C9D7FA; }
.legend .sw.makan { background: #FEF7E0; border-color: #F6E2A5; }
.legend .sw.minta_bayar { background: #FFE9DC; border-color: #F9C4A5; }

.call-alert { display: flex; align-items: center; gap: .75rem; background: var(--accent-soft); border: 1px solid #F9C4A5; color: var(--accent-hover); border-radius: 14px; padding: .65rem .9rem; margin-bottom: .5rem; font-weight: 600; }
.call-alert i.lead { font-size: 1.3rem; }

.ta-item { display: flex; align-items: center; gap: .75rem; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: .75rem .9rem; margin-bottom: .5rem; cursor: pointer; }
.ta-item.selected { outline: 3px solid var(--accent); outline-offset: 1px; }

.bill-panel { position: sticky; top: 84px; max-height: calc(100vh - 100px); display: flex; flex-direction: column; overflow: hidden; }
.bill-panel #billContent { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.bill-panel #billContent.d-none { display: none !important; }
.bill-panel .card-body { overflow-y: auto; flex: 1; min-height: 120px; }
.bill-order { border: 1px solid var(--line); border-radius: 14px; margin-bottom: .75rem; overflow: hidden; }
.bill-order-head { background: #FBFAF9; padding: .55rem .8rem; display: flex; align-items: center; gap: .5rem; font-size: .85rem; border-bottom: 1px solid var(--line); }
.bill-item { display: flex; gap: .6rem; padding: .55rem .8rem; border-bottom: 1px solid var(--line); align-items: flex-start; }
.bill-item:last-child { border-bottom: 0; }
.bill-item.paid { opacity: .5; }
.bill-item .form-check-input { margin-top: .2rem; flex-shrink: 0; }
.bill-summary { border-top: 1px solid var(--line); padding: 1rem 1.25rem; background: #fff; }
.sum-line { display: flex; justify-content: space-between; font-size: .92rem; margin-bottom: .25rem; }
.sum-line.total { font-weight: 800; font-size: 1.25rem; margin: .4rem 0 .8rem; }

.method-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.method-tabs button { border: 1.5px solid var(--line); background: #fff; border-radius: 14px; min-height: 58px; font-weight: 700; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem; }
.method-tabs button i { font-size: 1.2rem; }
.method-tabs button.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.change-box { display: flex; justify-content: space-between; align-items: center; background: var(--success-soft); color: var(--success); padding: .8rem 1rem; border-radius: 14px; font-weight: 800; font-size: 1.15rem; }
.change-box.short { background: var(--danger-soft); color: var(--danger); }

@media (max-width: 991.98px) {
    .bill-panel { position: static; max-height: none; }
    .table-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
}