/* --- Tile Meja --- */
.table-tile {
    display: block;
    border-radius: 1rem;
    text-decoration: none;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,.08);
    box-shadow: 0 2px 10px rgba(0,0,0,.06);
    transition: transform .12s ease, box-shadow .12s ease;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}
.table-tile:focus, .table-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0,0,0,.12);
    outline: none;
}
.tile-surface {
    /* square surface using Bootstrap ratio */
    border-radius: 1rem;
}
.tile-content {
    padding: .75rem;
    text-align: center;
    gap: .5rem;
}
.table-name {
    font-weight: 700;
    letter-spacing: .2px;
}
.status-badge {
    font-weight: 600;
    padding: .4rem .8rem;
}

/* --- Warna status --- */
.status-kosong {
    background: linear-gradient(165deg, #e7f7ec, #d3f5df);
}
.status-kosong .table-name { color: #166534; }          /* hijau-900 */
.status-kosong .status-badge { background:#22c55e; }    /* hijau-500 */

.status-terisi {
    background: linear-gradient(165deg, #fde2e1, #ffd9d7);
}
.status-terisi .table-name { color: #7f1d1d; }          /* merah-900 */
.status-terisi .status-badge { background:#ef4444; }    /* merah-500 */

/* Badge teks kontras */
.status-badge { color:#fff; }

/* Aksesibilitas & sentuhan */
.table-tile { min-height: 0; }
.tile-content { touch-action: manipulation; }
@media (min-width: 768px) { /* tablet ke atas */
    .table-name { font-size: 1.35rem; }
}

.touch { min-height: 44px; }
.card-soft { border:1px solid #eff2f7; box-shadow:0 2px 8px rgba(16,24,40,.06); }
.badge-status.kosong { background:#e7f5ff; color:#0b7285; }
.badge-status.terisi { background:#e6fcf5; color:#087f5b; }
.qty-group .btn { min-width: 44px; }
.product-card { cursor:pointer; transition:.15s transform; }
.product-card:hover { transform: translateY(-2px); }
.product-thumb {
    width: 64px; height: 64px; border-radius: 12px; object-fit: cover;
    background: linear-gradient(135deg,#f2f4f7,#e9ecef);
}
.table th, .table td { vertical-align: middle; }
.sticky-actions {
    position: sticky; bottom: 0; background: #fff; z-index: 10;
    box-shadow: 0 -6px 12px rgba(16,24,40,.06);
}
.search-input { border-radius: 12px; }

.pager-float {
  position:sticky; bottom:0; z-index:10;
}

.checkout { position: relative;}
.checkout .kv{font-size:14px}.kv .k{color:#6c757d}.kv .v{font-weight:600}
.checkout .item-row{font-size:15px}
.checkout .num{font-variant-numeric:tabular-nums}
.checkout .totals .value-lg{font-size:1.4rem;font-weight:800}
.checkout .btn-xl{padding:.9rem 1.1rem;border-radius:14px;font-weight:700}
.checkout .sticky-cta{position:sticky;bottom:0;z-index:10;background:#f5f7fb;padding-top:8px}
.checkout .preview{max-height:140px;object-fit:contain;border:1px dashed #dee2e6;border-radius:10px;padding:6px;background:#fff}
.checkout .uploader-area{border:1px dashed #ced4da;border-radius:10px;padding:10px;background:#fff}