/* =====================================================================
   style.css — stylesheet terpusat OrderIn
   ---------------------------------------------------------------------
   Sebelumnya CSS ditulis inline di dalam <style> pada 21 file PHP, dengan
   palet warna yang diulang-ulang (mis. #d4af37 ditulis literal 29 kali)
   dan blok :root yang disalin 13 kali dengan nilai sedikit berbeda.

   Struktur file ini:
     1. TOKEN     — satu sumber kebenaran untuk warna, font, radius.
     2. DASAR     — reset + elemen dasar yang berlaku di semua halaman.
     3. HALAMAN   — style khas tiap halaman, dibatasi lewat class di <body>
                    (mis. <body class="page-kasir">). Halaman yang butuh
                    warna berbeda cukup menimpa TOKEN-nya, bukan menyalin
                    ulang nilai hex-nya.
     4. ANIMASI   — @keyframes bersama.
   ===================================================================== */

/* =========================== 1. TOKEN =========================== */
:root {
    --bg-dark: #0d0e12;
    --card-bg: #16181f;
    --card-sub: #1f222d;
    --border: #2a2d3a;
    --gold: #d4af37;
    --gold-hover: #f3cf55;
    --text-main: #f0f2f5;
    --text-muted: #9ba1b0;
    --danger: #ff4d4d;
    --success: #3ddc84;
    --font-ui: 'Plus Jakarta Sans', 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
}

/* =========================== 2. DASAR =========================== */
/* Sengaja TIDAK ada reset global di sini. Tiap halaman sudah membawa
   reset-nya sendiri di section-nya, dan sebagian halaman (mis. nota &
   cetak_rekap) justru mengandalkan margin bawaan browser — reset global
   akan menggeser tata letaknya. */

/* ========================== 3. HALAMAN ========================== */

/* ---------- admin_menu.php ---------- */
body.page-admin-menu {
    --ice: #4ade80;
    --hot: #f87171;
}
body.page-admin-menu, body.page-admin-menu * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Plus Jakarta Sans', sans-serif;
}
body.page-admin-menu {
    background-color: var(--bg-dark);
    color: var(--text-main);
    padding: 30px 15px;
}
body.page-admin-menu .container {
    max-width: 1050px;
    margin: 0 auto;
}
body.page-admin-menu .header-title {
    text-align: center;
    margin-bottom: 25px;
    position: relative;
}
body.page-admin-menu .header-title h1 {
    color: var(--gold);
    font-size: 1.8rem;
    margin-bottom: 5px;
}
body.page-admin-menu .header-title p {
    color: var(--text-muted);
    font-size: 0.9rem;
}
body.page-admin-menu .btn-kembali {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--border);
    color: var(--text-main);
    padding: 8px 14px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    transition: 0.2s;
    margin-bottom: 15px;
}
body.page-admin-menu .btn-kembali:hover {
    background: var(--gold);
    color: #000;
}
body.page-admin-menu .card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 25px;
}
body.page-admin-menu .card-title {
    color: var(--gold);
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 15px;
}
body.page-admin-menu .form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
}
body.page-admin-menu .form-group {
    margin-bottom: 15px;
}
body.page-admin-menu label {
    display: block;
    margin-bottom: 6px;
    color: var(--text-muted);
    font-size: 0.85rem;
}
body.page-admin-menu input, body.page-admin-menu select {
    width: 100%;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-dark);
    color: #fff;
    font-size: 0.9rem;
}
body.page-admin-menu input:focus, body.page-admin-menu select:focus {
    outline: none;
    border-color: var(--gold);
}
body.page-admin-menu .matrix-box {
    background: rgba(212, 175, 55, 0.05);
    border: 1px dashed var(--gold);
    padding: 15px;
    border-radius: 10px;
    margin-bottom: 15px;
}
body.page-admin-menu .matrix-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}
body.page-admin-menu .matrix-column {
    background: rgba(0,0,0,0.2);
    padding: 10px;
    border-radius: 8px;
    border: 1px solid var(--border);
}
body.page-admin-menu .matrix-column h4 {
    color: var(--gold);
    font-size: 0.9rem;
    margin-bottom: 10px;
    text-align: center;
}
body.page-admin-menu .btn {
    padding: 10px 18px;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    font-size: 0.85rem;
    transition: 0.2s;
}
body.page-admin-menu .btn-gold {
    background: var(--gold);
    color: #000;
}
body.page-admin-menu .btn-gold:hover {
    background: var(--gold-hover);
}
body.page-admin-menu .btn-edit {
    background: #2563eb;
    color: #fff;
    border: none;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.85rem;
    cursor: pointer;
    margin-right: 5px;
}
body.page-admin-menu .btn-delete {
    background: var(--danger);
    color: #fff;
    text-decoration: none;
    display: inline-block;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.85rem;
}
body.page-admin-menu .btn-resep {
    background: #10b981;
    color: #fff;
    text-decoration: none;
    display: inline-block;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.85rem;
    margin-right: 5px;
    transition: 0.2s;
}
body.page-admin-menu .btn-resep:hover {
    background: #059669;
}
body.page-admin-menu .btn-close {
    background: var(--border);
    color: #fff;
}
body.page-admin-menu table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}
body.page-admin-menu th, body.page-admin-menu td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    font-size: 0.9rem;
    vertical-align: top;
}
body.page-admin-menu th {
    color: var(--gold);
    background: rgba(212, 175, 55, 0.05);
}
body.page-admin-menu .badge {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}
body.page-admin-menu .badge-aktif {
    background: #1b382b;
    color: #4ade80;
    border: 1px solid #22c55e;
}
body.page-admin-menu .badge-nonaktif {
    background: #3f1d1d;
    color: #f87171;
    border: 1px solid #ef4444;
}
body.page-admin-menu .size-info {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.5;
}
body.page-admin-menu .modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.75);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 999;
}
body.page-admin-menu .modal-box {
    background: var(--card-bg);
    border: 1px solid var(--gold);
    border-radius: 16px;
    padding: 25px;
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
}
body.page-admin-menu .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
body.page-admin-menu .modal-header h3 {
    color: var(--gold);
    font-size: 1.2rem;
}
@media (max-width: 768px) {
    body.page-admin-menu .matrix-grid {
        grid-template-columns: 1fr;
    }
}
body.page-admin-menu .thumb-table {
    width: 50px;
    height: 50px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid var(--border);
    display: block;
}
body.page-admin-menu .thumb-placeholder-table {
    width: 50px;
    height: 50px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: rgba(212, 175, 55, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    opacity: 0.5;
}
body.page-admin-menu .menu-name-cell .deskripsi-cell {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 3px;
    max-width: 220px;
}
body.page-admin-menu .label-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 20px;
    letter-spacing: 0.3px;
    border: 1px solid transparent;
    margin-top: 4px;
}
body.page-admin-menu .label-chip.label-best_seller {
    background: rgba(212, 175, 55, 0.18);
    color: var(--gold);
    border-color: rgba(212, 175, 55, 0.5);
}
body.page-admin-menu .label-chip.label-baru {
    background: rgba(74, 222, 128, 0.15);
    color: var(--ice);
    border-color: rgba(74, 222, 128, 0.4);
}
body.page-admin-menu .label-chip.label-rekomendasi {
    background: rgba(93, 156, 236, 0.15);
    color: #5d9cec;
    border-color: rgba(93, 156, 236, 0.4);
}
body.page-admin-menu .label-chip.label-pedas {
    background: rgba(248, 113, 113, 0.15);
    color: var(--hot);
    border-color: rgba(248, 113, 113, 0.4);
}
body.page-admin-menu .label-chip.label-promo {
    background: rgba(255, 77, 166, 0.15);
    color: #ff4da6;
    border-color: rgba(255, 77, 166, 0.4);
}
body.page-admin-menu .foto-upload-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 15px;
}
body.page-admin-menu .foto-preview-box {
    width: 70px;
    height: 70px;
    border-radius: 10px;
    flex-shrink: 0;
    border: 1px dashed var(--border);
    background: rgba(212,175,55,0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-size: 1.4rem;
    opacity: 0.6;
}
body.page-admin-menu .foto-preview-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
body.page-admin-menu .foto-upload-controls {
    flex: 1;
}
body.page-admin-menu .foto-upload-controls input[type="file"] {
    padding: 8px;
    font-size: 0.8rem;
}
body.page-admin-menu .hint-text {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 4px;
}
body.page-admin-menu .link-hapus-foto {
    font-size: 0.75rem;
    color: var(--danger);
    cursor: pointer;
    text-decoration: underline;
    margin-top: 6px;
    display: inline-block;
}

/* ---------- admin_voucher.php ---------- */
body.page-admin-voucher {
    --pink: #ff4da6;
}
body.page-admin-voucher, body.page-admin-voucher * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Plus Jakarta Sans', sans-serif;
}
body.page-admin-voucher {
    background-color: var(--bg-dark);
    color: var(--text-main);
    padding: 30px 15px;
}
body.page-admin-voucher .container {
    max-width: 1050px;
    margin: 0 auto;
}
body.page-admin-voucher .header-title {
    text-align: center;
    margin-bottom: 25px;
}
body.page-admin-voucher .header-title h1 {
    color: var(--pink);
    font-size: 1.8rem;
    margin-bottom: 5px;
}
body.page-admin-voucher .header-title p {
    color: var(--text-muted);
    font-size: 0.9rem;
}
body.page-admin-voucher .btn-kembali {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--border);
    color: var(--text-main);
    padding: 8px 14px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    transition: 0.2s;
    margin-bottom: 15px;
}
body.page-admin-voucher .btn-kembali:hover {
    background: var(--pink);
    color: #000;
}
body.page-admin-voucher .alert-success {
    background: rgba(46, 204, 113, 0.1);
    border: 1px solid #2ecc71;
    color: #2ecc71;
    padding: 12px 16px;
    border-radius: 10px;
    margin-bottom: 20px;
    font-size: 0.88rem;
}
body.page-admin-voucher .card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 25px;
}
body.page-admin-voucher .card-title {
    color: var(--pink);
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 15px;
}
body.page-admin-voucher .form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
}
body.page-admin-voucher .form-group {
    margin-bottom: 15px;
}
body.page-admin-voucher label {
    display: block;
    margin-bottom: 6px;
    color: var(--text-muted);
    font-size: 0.85rem;
}
body.page-admin-voucher input, body.page-admin-voucher select {
    width: 100%;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-dark);
    color: #fff;
    font-size: 0.9rem;
}
body.page-admin-voucher input:focus, body.page-admin-voucher select:focus {
    outline: none;
    border-color: var(--pink);
}
body.page-admin-voucher .hint-text {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 4px;
}
body.page-admin-voucher .btn {
    padding: 10px 18px;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    font-size: 0.85rem;
    transition: 0.2s;
}
body.page-admin-voucher .btn-pink {
    background: var(--pink);
    color: #fff;
}
body.page-admin-voucher .btn-pink:hover {
    opacity: 0.9;
}
body.page-admin-voucher .btn-edit {
    background: #2563eb;
    color: #fff;
    border: none;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.85rem;
    cursor: pointer;
    margin-right: 5px;
}
body.page-admin-voucher .btn-toggle {
    background: #f59e0b;
    color: #000;
    text-decoration: none;
    display: inline-block;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.85rem;
    margin-right: 5px;
}
body.page-admin-voucher .btn-delete {
    background: var(--danger);
    color: #fff;
    text-decoration: none;
    display: inline-block;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.85rem;
}
body.page-admin-voucher .btn-close {
    background: var(--border);
    color: #fff;
}
body.page-admin-voucher table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}
body.page-admin-voucher th, body.page-admin-voucher td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    font-size: 0.88rem;
    vertical-align: top;
}
body.page-admin-voucher th {
    color: var(--pink);
    background: rgba(255, 77, 166, 0.05);
}
body.page-admin-voucher .badge {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}
body.page-admin-voucher .badge-aktif {
    background: #1b382b;
    color: #4ade80;
    border: 1px solid #22c55e;
}
body.page-admin-voucher .badge-nonaktif {
    background: #3f1d1d;
    color: #f87171;
    border: 1px solid #ef4444;
}
body.page-admin-voucher .kode-chip {
    font-weight: 700;
    color: var(--gold);
    letter-spacing: 0.5px;
    background: rgba(212,175,55,0.08);
    padding: 3px 8px;
    border-radius: 6px;
}
body.page-admin-voucher .info-mini {
    font-size: 0.78rem;
    color: var(--text-muted);
}
body.page-admin-voucher .modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.75);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 999;
}
body.page-admin-voucher .modal-box {
    background: var(--card-bg);
    border: 1px solid var(--pink);
    border-radius: 16px;
    padding: 25px;
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
}
body.page-admin-voucher .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
body.page-admin-voucher .modal-header h3 {
    color: var(--pink);
    font-size: 1.2rem;
}
body.page-admin-voucher .empty-state {
    text-align: center;
    padding: 30px;
    color: var(--text-muted);
}

/* ---------- bahan_baku.php ---------- */
body.page-bahan-baku {
    background: var(--bg-dark);
    color: #f5f5f7;
    font-family: 'Poppins', sans-serif;
    padding: 20px;
}
body.page-bahan-baku .container {
    max-width: 1200px;
    margin: auto;
    background: var(--card-bg);
    padding: 25px;
    border-radius: 12px;
    border: 1px solid var(--border);
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}
body.page-bahan-baku .header-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border);
    padding-bottom: 10px;
    margin-bottom: 20px;
}
body.page-bahan-baku h2 {
    color: var(--gold);
    margin: 0;
}
body.page-bahan-baku .btn-kembali {
    background: #34495e;
    color: #ffffff;
    text-decoration: none;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    transition: 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
body.page-bahan-baku .btn-kembali:hover {
    background: #2c3e50;
}
body.page-bahan-baku .form-group {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
body.page-bahan-baku input, body.page-bahan-baku select {
    background: var(--bg-dark);
    color: #fff;
    border: 1px solid var(--border);
    padding: 10px;
    border-radius: 6px;
    flex: 1;
    min-width: 140px;
    outline: none;
}
body.page-bahan-baku input:focus, body.page-bahan-baku select:focus {
    border-color: var(--gold);
}
body.page-bahan-baku button {
    background: var(--gold);
    color: #000;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.2s;
}
body.page-bahan-baku button:hover {
    background: #b8962d;
}
body.page-bahan-baku .info-box {
    background: rgba(212, 175, 55, 0.08);
    border-left: 4px solid var(--gold);
    padding: 12px 15px;
    font-size: 0.85rem;
    color: #cbd5e1;
    margin-bottom: 20px;
    border-radius: 4px;
    line-height: 1.6;
}
body.page-bahan-baku table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}
body.page-bahan-baku th, body.page-bahan-baku td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    font-size: 0.9rem;
}
body.page-bahan-baku th {
    color: var(--gold);
    background: rgba(0,0,0,0.2);
}
body.page-bahan-baku tr:hover {
    background-color: rgba(255, 255, 255, 0.02);
}
body.page-bahan-baku .btn-danger {
    background: rgba(231, 76, 60, 0.1);
    color: #e74c3c;
    text-decoration: none;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: bold;
    border: 1px solid #e74c3c;
    cursor: pointer;
    transition: 0.2s;
}
body.page-bahan-baku .btn-danger:hover {
    background: #e74c3c;
    color: #fff;
}
body.page-bahan-baku .btn-warning {
    background: rgba(243, 156, 18, 0.1);
    color: #f39c12;
    text-decoration: none;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: bold;
    border: 1px solid #f39c12;
    cursor: pointer;
    margin-right: 5px;
    transition: 0.2s;
}
body.page-bahan-baku .btn-warning:hover {
    background: #f39c12;
    color: #fff;
}
body.page-bahan-baku .modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.8);
}
body.page-bahan-baku .modal-content {
    background-color: var(--card-bg);
    margin: 5% auto;
    padding: 25px;
    border: 1px solid var(--gold);
    border-radius: 8px;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}
body.page-bahan-baku .close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
}
body.page-bahan-baku .close:hover {
    color: #fff;
}
body.page-bahan-baku .modal-form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 15px;
}
body.page-bahan-baku .modal-form-group label {
    color: var(--gold);
    font-size: 0.9rem;
    font-weight: 600;
    margin-top: 10px;
}

/* ---------- cetak_rekap.php ---------- */
body.page-cetak-rekap {
    font-family: Arial, sans-serif;
    font-size: 12px;
    color: #000;
    margin: 20px;
}
body.page-cetak-rekap .header {
    text-align: center;
    margin-bottom: 20px;
    border-bottom: 2px solid #000;
    padding-bottom: 10px;
}
body.page-cetak-rekap .header h2 {
    margin: 0;
    text-transform: uppercase;
}
body.page-cetak-rekap .header p {
    margin: 5px 0 0 0;
    color: #555;
}
body.page-cetak-rekap table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
}
body.page-cetak-rekap table, body.page-cetak-rekap th, body.page-cetak-rekap td {
    border: 1px solid #000;
}
body.page-cetak-rekap th {
    background-color: #f2f2f2;
    padding: 8px;
    text-align: left;
}
body.page-cetak-rekap td {
    padding: 8px;
    vertical-align: top;
}
body.page-cetak-rekap .text-right {
    text-align: right;
}
body.page-cetak-rekap .total-box {
    margin-top: 15px;
    text-align: right;
    font-size: 14px;
    font-weight: bold;
}
body.page-cetak-rekap .menu-list {
    margin: 0;
    padding-left: 16px;
}
body.page-cetak-rekap .menu-list li {
    margin-bottom: 3px;
}
body.page-cetak-rekap .tipe-takeaway {
    color: #b35400;
    font-weight: bold;
}
body.page-cetak-rekap .tipe-dinein {
    color: #1f618d;
    font-weight: bold;
}
/* [DIPERBAIKI] Di sini dulu ada:
       @media print { body.page-cetak-rekap @page { size: A4 portrait; ... } }
   Itu CSS yang TIDAK VALID. @page adalah aturan tingkat atas — ia tidak bisa
   disarangkan di dalam sebuah selektor. Browser mengabaikannya diam-diam,
   jadi ukuran kertas tidak pernah benar-benar diatur dan dialog cetak selalu
   jatuh ke A4 portrait bawaan. Kesalahan ini masuk saat CSS dipindahkan ke
   berkas bersama: setiap aturan diberi awalan nama halaman, termasuk @page
   yang seharusnya tidak boleh diberi awalan.
   Sekarang @page ditulis langsung di halaman yang mencetak, karena tiap
   halaman butuh kertas berbeda (rekap = A4 mendatar, struk = rol 58/80mm)
   dan @page tidak bisa dibedakan lewat kelas body. */

/* ---------- dapur.php ---------- */
body.page-dapur {
    --bg-dark: #0f1117;
    --card-bg: #181b24;
    --border: #292d3e;
    --pending: #e67e22;
    --lunas: #2ecc71;
}
body.page-dapur, body.page-dapur * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body.page-dapur::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
body.page-dapur::-webkit-scrollbar-track {
    background: var(--bg-dark);
}
body.page-dapur::-webkit-scrollbar-thumb {
    background: #3a3f55;
    border-radius: 4px;
}
body.page-dapur::-webkit-scrollbar-thumb:hover {
    background: var(--gold);
}
body.page-dapur {
    background-color: var(--bg-dark);
    color: #f5f5f7;
    font-family: 'Poppins', sans-serif;
    padding: 20px;
    overflow-x: hidden;
}
body.page-dapur .container {
    max-width: 1400px;
    margin: 0 auto;
}
body.page-dapur .header-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    background: var(--card-bg);
    padding: 15px 25px;
    border-radius: 12px;
    border: 1px solid var(--border);
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}
body.page-dapur h1 {
    color: var(--gold);
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 1.2;
}
body.page-dapur .header-right {
    display: flex;
    align-items: center;
    gap: 20px;
}
body.page-dapur .status-container {
    text-align: right;
}
body.page-dapur .waktu-wib {
    color: #fff;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.5px;
}
body.page-dapur .live-tag {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: color 0.3s ease;
}
body.page-dapur .live-tag.online {
    color: var(--lunas);
}
body.page-dapur .live-tag.offline {
    color: var(--danger);
    animation: blink 1s infinite;
}
body.page-dapur .dot {
    height: 8px;
    width: 8px;
    border-radius: 50%;
    display: inline-block;
}
body.page-dapur .live-tag.online .dot {
    background-color: var(--lunas);
    box-shadow: 0 0 8px var(--lunas);
}
body.page-dapur .live-tag.offline .dot {
    background-color: var(--danger);
    box-shadow: 0 0 8px var(--danger);
}
body.page-dapur .kds-controls {
    display: flex;
    gap: 10px;
    border-left: 1px solid var(--border);
    padding-left: 20px;
}
body.page-dapur .btn-kds {
    background: #252a37;
    border: 1px solid var(--border);
    color: #e1e4ed;
    padding: 8px 12px;
    border-radius: 8px;
    font-family: 'Poppins', sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}
body.page-dapur .btn-kds:hover {
    background: var(--gold);
    color: #000;
    border-color: var(--gold);
}
body.page-dapur .btn-kds.active {
    background: rgba(212, 175, 55, 0.2);
    color: var(--gold);
    border-color: var(--gold);
}
body.page-dapur .order-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
}
body.page-dapur .order-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    animation: slideUp 0.4s ease-out forwards;
    transition: transform 0.2s ease, border-color 0.2s ease;
}
body.page-dapur .order-card:hover {
    transform: translateY(-3px);
    border-color: #3f455e;
}
body.page-dapur .order-card.is-pending {
    border-top: 6px solid var(--pending);
}
body.page-dapur .order-card.is-lunas {
    border-top: 6px solid var(--lunas);
}
body.page-dapur .card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px dashed var(--border);
    padding-bottom: 12px;
    margin-bottom: 12px;
}
body.page-dapur .order-id {
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
}
body.page-dapur .no-meja {
    background: #252a37;
    color: var(--gold);
    padding: 5px 12px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 1rem;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}
body.page-dapur .no-meja-takeaway {
    background: rgba(255, 159, 67, 0.15);
    color: #ff9f43;
    box-shadow: none;
    border: 1px solid rgba(255, 159, 67, 0.5);
}
body.page-dapur .card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    color: #8a8f9d;
    margin-bottom: 14px;
}
body.page-dapur .pemesan {
    color: #e1e4ed;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 5px;
}
body.page-dapur .badge-status {
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
body.page-dapur .badge-pending {
    background: rgba(230, 126, 34, 0.15);
    color: var(--pending);
    border: 1px solid rgba(230, 126, 34, 0.3);
}
body.page-dapur .badge-lunas {
    background: rgba(46, 204, 113, 0.15);
    color: var(--lunas);
    border: 1px solid rgba(46, 204, 113, 0.3);
}
body.page-dapur .order-note {
    background: rgba(212, 175, 55, 0.12);
    border: 1px dashed var(--gold);
    color: var(--gold);
    font-size: 0.82rem;
    font-weight: 600;
    padding: 8px 10px;
    border-radius: 8px;
    margin-top: 2px;
    margin-bottom: 14px;
    line-height: 1.4;
}
body.page-dapur .item-list {
    list-style: none;
    flex-grow: 1;
}
body.page-dapur .item-row-wrap {
    margin-bottom: 10px;
}
body.page-dapur .item-row-wrap:last-child {
    margin-bottom: 0;
}
body.page-dapur .item-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #202431;
    padding: 10px 14px;
    border-radius: 8px;
    border-left: 3px solid #3a3f55;
}
body.page-dapur .item-name {
    font-size: 0.95rem;
    font-weight: 500;
    color: #fff;
    line-height: 1.3;
}
body.page-dapur .item-qty {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--gold);
    background: #141720;
    padding: 3px 10px;
    border-radius: 6px;
    border: 1px solid var(--border);
}
body.page-dapur .item-note {
    font-size: 0.78rem;
    color: var(--pending);
    font-style: italic;
    background: rgba(230, 126, 34, 0.1);
    border-left: 3px solid var(--pending);
    border-radius: 6px;
    padding: 6px 14px;
    margin-top: 4px;
}

/* ---------- dashboard.php ---------- */
body.page-dashboard, body.page-dashboard * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Plus Jakarta Sans', sans-serif;
}
body.page-dashboard {
    background-color: var(--bg-dark);
    color: var(--text-main);
    padding: 30px 15px;
    min-height: 100vh;
}
body.page-dashboard .container {
    max-width: 1000px;
    margin: 0 auto;
}
body.page-dashboard .header-box {
    margin-bottom: 30px;
    background: var(--card-bg);
    padding: 18px 25px;
    border-radius: 14px;
    border: 1px solid var(--border);
}
body.page-dashboard .header-box h1 {
    color: var(--gold);
    font-size: 1.4rem;
}
body.page-dashboard .header-box p {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-top: 4px;
}
body.page-dashboard .menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}
body.page-dashboard .menu-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 28px 22px;
    text-decoration: none;
    color: var(--text-main);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    transition: 0.2s;
    position: relative;
    overflow: hidden;
}
body.page-dashboard .menu-card:hover {
    border-color: var(--gold);
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(212,175,55,0.15);
}
body.page-dashboard .menu-card .icon {
    font-size: 2.4rem;
}
body.page-dashboard .menu-card .title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--gold);
}
body.page-dashboard .menu-card .desc {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.5;
}

/* ---------- default.php ---------- */
body.page-default, body.page-default * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Plus Jakarta Sans', sans-serif;
}
body.page-default {
    background-color: var(--bg-dark);
    color: var(--text-main);
    padding: 20px 15px 120px 15px;
    min-height: 100vh;
}
body.page-default .container {
    max-width: 650px;
    margin: 0 auto;
}
body.page-default .brand-header {
    text-align: center;
    padding: 20px 0 30px;
}
body.page-default .brand-header h1 {
    font-family: 'Playfair Display', serif;
    color: var(--gold);
    font-size: 2rem;
    letter-spacing: 2px;
    margin-bottom: 5px;
}
body.page-default .brand-header p {
    color: var(--text-muted);
    font-size: 0.9rem;
    letter-spacing: 1px;
}
body.page-default .section-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 24px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
body.page-default .section-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--gold);
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}
body.page-default .form-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 15px;
}
body.page-default .form-group {
    margin-bottom: 15px;
}
body.page-default .form-group.full-width {
    grid-column: span 2;
}
body.page-default label {
    display: block;
    margin-bottom: 8px;
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 500;
}
body.page-default input[type="text"], body.page-default select, body.page-default textarea {
    width: 100%;
    padding: 12px 15px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg-dark);
    color: var(--text-main);
    font-size: 0.95rem;
    transition: all 0.3s ease;
}
body.page-default input[type="text"]:focus, body.page-default select:focus, body.page-default textarea:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15);
}
body.page-default textarea {
    resize: vertical;
    min-height: 70px;
    font-family: 'Plus Jakarta Sans', sans-serif;
}
body.page-default .char-counter {
    text-align: right;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 4px;
}
body.page-default .voucher-input-row {
    display: flex;
    gap: 10px;
}
body.page-default .voucher-input-row input {
    flex: 1;
    text-transform: uppercase;
}
body.page-default .btn-voucher {
    background: var(--gold);
    color: #000;
    border: none;
    border-radius: 10px;
    padding: 0 18px;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s;
}
body.page-default .btn-voucher:hover {
    background: var(--gold-hover);
}
body.page-default .btn-voucher:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
body.page-default .btn-voucher-remove {
    background: transparent;
    color: var(--danger);
    border: 1px solid var(--danger);
    border-radius: 10px;
    padding: 0 16px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
}
body.page-default .voucher-status {
    margin-top: 10px;
    font-size: 0.85rem;
    padding: 10px 12px;
    border-radius: 10px;
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
body.page-default .voucher-status.success {
    display: flex;
    background: rgba(61, 220, 132, 0.12);
    border: 1px solid rgba(61, 220, 132, 0.4);
    color: var(--success);
}
body.page-default .voucher-status.error {
    display: flex;
    background: rgba(255, 77, 77, 0.12);
    border: 1px solid rgba(255, 77, 77, 0.4);
    color: var(--danger);
}
body.page-default .harga-coret {
    color: var(--text-muted);
    text-decoration: line-through;
    font-weight: 500;
    font-size: 0.78rem;
    margin-right: 6px;
}
body.page-default .harga-diskon {
    color: var(--danger);
    font-weight: 700;
}
body.page-default .badge-diskon-corner {
    position: absolute;
    top: -6px;
    left: -6px;
    background: var(--danger);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    padding: 3px 6px;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
    z-index: 2;
}
body.page-default .menu-thumb-wrap {
    position: relative;
    flex-shrink: 0;
}
body.page-default input[readonly] {
    background: var(--card-sub) !important;
    color: var(--gold) !important;
    font-weight: 700;
    border-color: var(--gold);
    cursor: not-allowed;
}
body.page-default .sticky-filter-zone {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--card-bg);
    padding-top: 4px;
    margin: -20px -20px 15px -20px;
    padding: 20px 20px 0 20px;
    border-radius: 16px 16px 0 0;
}
body.page-default .search-box {
    position: relative;
    margin-bottom: 15px;
}
body.page-default .search-box input {
    width: 100%;
    padding: 12px 15px 12px 42px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg-dark);
    color: var(--text-main);
    font-size: 0.95rem;
    transition: all 0.3s ease;
}
body.page-default .search-box input:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15);
}
body.page-default .search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 1rem;
    pointer-events: none;
}
body.page-default .category-tabs {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 15px;
    margin-bottom: 0;
    scrollbar-width: none;
}
body.page-default .category-tabs::-webkit-scrollbar {
    display: none;
}
body.page-default .tab-btn {
    background: var(--card-sub);
    border: 1px solid var(--border);
    color: var(--text-muted);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s;
}
body.page-default .tab-btn.active {
    background: var(--gold);
    color: #000;
    font-weight: 600;
    border-color: var(--gold);
}
body.page-default .menu-category-title {
    font-size: 0.95rem;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 20px 0 10px 0;
    border-bottom: 1px solid var(--border);
    padding-bottom: 5px;
}
body.page-default .menu-item-card {
    background: var(--bg-dark);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    transition: all 0.2s;
}
body.page-default .menu-item-card.clickable {
    cursor: pointer;
}
body.page-default .menu-item-card.clickable:hover {
    border-color: rgba(212, 175, 55, 0.5);
    background: rgba(22, 24, 31, 0.7);
}
body.page-default .menu-item-card.menu-item-habis {
    cursor: not-allowed;
    opacity: 0.55;
}
body.page-default .menu-item-card.menu-item-habis:hover {
    border-color: var(--border);
    background: var(--bg-dark);
}
body.page-default .badge-habis {
    display: inline-block;
    background: rgba(255, 77, 77, 0.15);
    color: var(--danger);
    border: 1px solid rgba(255, 77, 77, 0.4);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 20px;
    margin-left: 8px;
    letter-spacing: 0.5px;
    vertical-align: middle;
}
body.page-default .menu-action-btn-disabled {
    background: var(--border) !important;
    color: var(--text-muted) !important;
    cursor: not-allowed !important;
}
body.page-default .menu-thumb {
    width: 64px;
    height: 64px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
    margin-right: 14px;
    border: 1px solid var(--border);
    background: var(--card-sub);
}
body.page-default .menu-thumb-placeholder {
    width: 64px;
    height: 64px;
    border-radius: 10px;
    flex-shrink: 0;
    margin-right: 14px;
    border: 1px solid var(--border);
    background: linear-gradient(135deg, var(--card-sub), var(--bg-dark));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    opacity: 0.5;
}
body.page-default .menu-card-body {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
}
body.page-default .menu-info {
    flex: 1;
    padding-right: 15px;
    min-width: 0;
}
body.page-default .menu-name {
    font-weight: 700;
    font-size: 1rem;
    color: var(--text-main);
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}
body.page-default .menu-price {
    font-size: 0.85rem;
    color: var(--gold);
    font-weight: 600;
}
body.page-default .menu-badge-label {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 20px;
    letter-spacing: 0.4px;
    vertical-align: middle;
    border: 1px solid transparent;
}
body.page-default .menu-badge-label.label-best_seller {
    background: rgba(212, 175, 55, 0.18);
    color: var(--gold);
    border-color: rgba(212, 175, 55, 0.5);
}
body.page-default .menu-badge-label.label-baru {
    background: rgba(61, 220, 132, 0.15);
    color: var(--success);
    border-color: rgba(61, 220, 132, 0.4);
}
body.page-default .menu-badge-label.label-rekomendasi {
    background: rgba(93, 156, 236, 0.15);
    color: #5d9cec;
    border-color: rgba(93, 156, 236, 0.4);
}
body.page-default .menu-badge-label.label-pedas {
    background: rgba(255, 111, 61, 0.15);
    color: #ff6f3d;
    border-color: rgba(255, 111, 61, 0.4);
}
body.page-default .menu-badge-label.label-promo {
    background: rgba(255, 77, 166, 0.15);
    color: #ff4da6;
    border-color: rgba(255, 77, 166, 0.4);
}
body.page-default .menu-badge-label.label-default {
    background: var(--card-sub);
    color: var(--text-muted);
    border-color: var(--border);
}
body.page-default .menu-desc {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 2px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
body.page-default .menu-action-btn {
    background: var(--card-sub);
    border: 1px solid var(--gold);
    color: var(--gold);
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s;
    white-space: nowrap;
}
body.page-default .menu-action-btn:hover {
    background: var(--gold);
    color: #000;
}
body.page-default .quick-qty-control {
    display: flex;
    align-items: center;
    background: var(--card-sub);
    border: 1px solid var(--gold);
    border-radius: 8px;
    overflow: hidden;
}
body.page-default .quick-qty-control .btn-qty-mini {
    background: transparent;
    border: none;
    color: var(--gold);
    width: 32px;
    height: 32px;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}
body.page-default .quick-qty-control .btn-qty-mini:hover {
    background: rgba(212, 175, 55, 0.2);
}
body.page-default .quick-qty-control .qty-display-mini {
    width: 28px;
    text-align: center;
    font-weight: 700;
    color: var(--text-main);
    font-size: 0.9rem;
}
body.page-default .badge-qty {
    background: var(--gold);
    color: #000;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 6px;
    display: none;
}
body.page-default .summary-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--card-bg);
    border-top: 1px solid var(--border);
    padding: 15px 20px;
    box-shadow: 0 -10px 25px rgba(0,0,0,0.5);
    z-index: 100;
}
body.page-default .summary-container {
    max-width: 650px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
body.page-default .total-label {
    font-size: 0.8rem;
    color: var(--text-muted);
}
body.page-default .total-amount {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--gold);
}
body.page-default .btn-submit {
    padding: 12px 28px;
    background: var(--gold);
    color: #000;
    font-weight: 700;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-size: 0.95rem;
    transition: background 0.2s, transform 0.1s;
    display: flex;
    align-items: center;
    gap: 8px;
}
body.page-default .btn-submit:hover {
    background: var(--gold-hover);
}
body.page-default .btn-submit:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}
body.page-default .spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(0,0,0,0.25);
    border-top-color: #000;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    display: inline-block;
}
body.page-default #toastContainer {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 90%;
    max-width: 400px;
    pointer-events: none;
}
body.page-default .toast {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-left: 4px solid var(--gold);
    color: var(--text-main);
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 500;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: 0;
    transform: translateY(-15px);
    animation: toastIn 0.25s ease forwards, toastOut 0.25s ease forwards 2.5s;
}
body.page-default .toast.toast-error {
    border-left-color: var(--danger);
}
body.page-default .toast.toast-success {
    border-left-color: var(--success);
}
body.page-default .toast-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
}
body.page-default .modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.8);
    display: none;
    justify-content: center;
    align-items: flex-end;
    z-index: 1000;
    animation: fadeIn 0.2s ease;
}
body.page-default .modal-sheet {
    background: var(--card-bg);
    border-top: 1px solid var(--gold);
    border-radius: 20px 20px 0 0;
    width: 100%;
    max-width: 650px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: slideUp-default 0.3s ease;
}
body.page-default .modal-header {
    padding: 18px 20px;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--card-sub);
}
body.page-default .modal-header h3 {
    color: var(--gold);
    font-family: 'Playfair Display', serif;
    font-size: 1.1rem;
}
body.page-default .modal-body {
    padding: 20px;
    overflow-y: auto;
}
body.page-default .option-group {
    margin-bottom: 16px;
}
body.page-default .option-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 8px;
}
body.page-default .option-pills {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}
body.page-default .pill-label {
    background: var(--bg-dark);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.2s;
}
body.page-default .pill-label input {
    accent-color: var(--gold);
}
body.page-default .pill-label.selected {
    border-color: var(--gold);
    background: rgba(212, 175, 55, 0.1);
}
body.page-default .modal-qty-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px dashed var(--border);
}
body.page-default .qty-control {
    display: flex;
    align-items: center;
    background: var(--bg-dark);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}
body.page-default .btn-qty {
    background: transparent;
    border: none;
    color: var(--gold);
    width: 36px;
    height: 36px;
    font-size: 1.2rem;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
body.page-default .btn-qty:hover {
    background: rgba(212, 175, 55, 0.15);
}
body.page-default .qty-input-box {
    width: 45px;
    text-align: center;
    border: none;
    background: transparent;
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
}
body.page-default .modal-footer {
    padding: 15px 20px;
    border-top: 1px solid var(--border);
    background: var(--card-sub);
}
body.page-default .btn-add-cart {
    width: 100%;
    padding: 14px;
    background: var(--gold);
    color: #000;
    font-weight: 700;
    border: none;
    border-radius: 10px;
    font-size: 1rem;
    cursor: pointer;
}
body.page-default .btn-add-cart:hover {
    background: var(--gold-hover);
}
body.page-default .review-modal .modal-sheet {
    border-radius: 16px;
    max-width: 500px;
    margin: auto;
    align-items: center;
}
body.page-default .review-info-group {
    margin-bottom: 15px;
    background: var(--bg-dark);
    padding: 12px 15px;
    border-radius: 10px;
    border: 1px solid var(--border);
    width: 100%;
}
body.page-default .review-info-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
    font-size: 0.9rem;
}
body.page-default .review-label {
    color: var(--text-muted);
}
body.page-default .review-val {
    font-weight: 600;
    color: var(--text-main);
}
body.page-default .review-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}
body.page-default .review-table th {
    text-align: left;
    color: var(--gold);
    font-size: 0.8rem;
    text-transform: uppercase;
    border-bottom: 1px solid var(--border);
    padding-bottom: 8px;
}
body.page-default .review-table td {
    padding: 8px 0;
    border-bottom: 1px dashed var(--border);
    font-size: 0.85rem;
    vertical-align: middle;
}
body.page-default .review-table td:last-child, body.page-default .review-table th:last-child {
    text-align: right;
}
body.page-default .btn-delete-item {
    background: rgba(255, 77, 77, 0.15);
    border: 1px solid var(--danger);
    color: var(--danger);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
body.page-default .btn-delete-item:hover {
    background: var(--danger);
    color: #fff;
}
body.page-default .tipe-pesanan-toggle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
body.page-default .tipe-btn {
    background: var(--bg-dark);
    border: 1px solid var(--border);
    color: var(--text-muted);
    padding: 12px 10px;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
body.page-default .tipe-btn:hover {
    border-color: rgba(212, 175, 55, 0.5);
}
body.page-default .tipe-btn.active {
    background: rgba(212, 175, 55, 0.15);
    border-color: var(--gold);
    color: var(--gold);
}
@media (max-width: 480px) {
    body.page-default .form-grid {
        grid-template-columns: 1fr;
    }
    body.page-default .form-group.full-width {
        grid-column: span 1;
    }
}

/* ---------- edit_menu.php ---------- */
body.page-edit-menu {
    --bg-dark: #0b0c10;
    --accent-gold: #d4af37;
    --text-main: #f5f5f7;
    --text-muted: #8e95a5;
    --border-color: rgba(212, 175, 55, 0.2);
    --danger-color: #ff4757;
}
body.page-edit-menu, body.page-edit-menu * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body.page-edit-menu {
    background-color: var(--bg-dark);
    color: var(--text-main);
    font-family: 'Plus Jakarta Sans', sans-serif;
    padding: 20px 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}
body.page-edit-menu .container {
    width: 100%;
    max-width: 450px;
}
body.page-edit-menu .card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 25px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
body.page-edit-menu h2 {
    color: var(--accent-gold);
    font-size: 1.3rem;
    margin-bottom: 20px;
    text-align: center;
}
body.page-edit-menu .form-group {
    margin-bottom: 16px;
}
body.page-edit-menu label {
    display: block;
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-bottom: 6px;
}
body.page-edit-menu .form-control {
    width: 100%;
    padding: 12px;
    background: #0d0e12;
    border: 1px solid #282c37;
    border-radius: 10px;
    color: #fff;
    font-size: 0.9rem;
    outline: none;
}
body.page-edit-menu .form-control:focus {
    border-color: var(--accent-gold);
}
body.page-edit-menu .btn-submit {
    width: 100%;
    background: linear-gradient(135deg, #e67e22, var(--accent-gold));
    color: #000;
    border: none;
    padding: 12px;
    font-weight: 700;
    border-radius: 10px;
    cursor: pointer;
    margin-top: 10px;
}
body.page-edit-menu .btn-cancel {
    display: block;
    text-align: center;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.85rem;
    margin-top: 12px;
}
body.page-edit-menu .alert-danger {
    background: rgba(255, 71, 87, 0.15);
    border: 1px solid var(--danger-color);
    color: var(--danger-color);
    padding: 10px;
    border-radius: 8px;
    font-size: 0.85rem;
    margin-bottom: 15px;
}

/* ---------- edit_pesanan.php ---------- */
body.page-edit-pesanan {
    --bg-body: #0d0e12;
    --bg-card: #16181f;
    --bg-input: #212431;
    --primary: #d4af37;
    --primary-hover: #b8962d;
    --text-main: #f1f5f9;
    --text-muted: #94a3b8;
    --border-color: #2e3245;
}
body.page-edit-pesanan {
    background-color: var(--bg-body);
    color: var(--text-main);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 20px;
}
body.page-edit-pesanan .container {
    max-width: 1000px;
    margin: 0 auto;
}
body.page-edit-pesanan .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 15px;
}
body.page-edit-pesanan .header h2 {
    margin: 0;
    color: var(--primary);
    font-size: 1.6rem;
    letter-spacing: 0.5px;
}
body.page-edit-pesanan .card {
    background: var(--bg-card);
    border-radius: 10px;
    padding: 25px;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    margin-bottom: 20px;
}
body.page-edit-pesanan .form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}
body.page-edit-pesanan .form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
body.page-edit-pesanan .form-group label {
    font-size: 0.9rem;
    color: var(--text-muted);
    font-weight: 500;
}
body.page-edit-pesanan .form-input {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    padding: 10px 15px;
    border-radius: 6px;
    font-size: 0.95rem;
    outline: none;
    transition: border-color 0.2s;
    width: 100%;
    box-sizing: border-box;
}
body.page-edit-pesanan .form-input:focus {
    border-color: var(--primary);
}
body.page-edit-pesanan .item-row {
    display: flex;
    gap: 12px;
    align-items: center;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color);
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 10px;
}
body.page-edit-pesanan .flex-2 {
    flex: 2;
}
body.page-edit-pesanan .flex-1 {
    flex: 1;
}
body.page-edit-pesanan .w-80 {
    width: 80px;
    min-width: 80px;
}
body.page-edit-pesanan hr {
    border: 0;
    border-top: 1px solid var(--border-color);
    margin: 25px 0;
}
body.page-edit-pesanan .btn {
    font-weight: 600;
    border: none;
    padding: 10px 16px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.9rem;
    text-decoration: none;
}
body.page-edit-pesanan .btn-simpan {
    background: #27ae60;
    color: #ffffff;
}
body.page-edit-pesanan .btn-simpan:hover {
    background: #219150;
}
body.page-edit-pesanan .btn-tambah {
    background: #2980b9;
    color: #ffffff;
    margin-top: 10px;
}
body.page-edit-pesanan .btn-tambah:hover {
    background: #1f618d;
}
body.page-edit-pesanan .btn-hapus {
    background: #e74c3c;
    color: #ffffff;
    padding: 10px 12px;
}
body.page-edit-pesanan .btn-hapus:hover {
    background: #c0392b;
}
body.page-edit-pesanan .btn-batal {
    background: #34495e;
    color: #ffffff;
}
body.page-edit-pesanan .btn-batal:hover {
    background: #2c3e50;
}
body.page-edit-pesanan .action-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 20px;
    border-top: 1px solid var(--border-color);
    padding-top: 20px;
}
@media (max-width: 768px) {
    body.page-edit-pesanan .form-grid {
        grid-template-columns: 1fr;
    }
    body.page-edit-pesanan .item-row {
        flex-wrap: wrap;
    }
    body.page-edit-pesanan .item-row > * {
        flex: 1 1 100% !important;
        margin-bottom: 5px;
    }
}

/* ---------- kasir.php ---------- */
body.page-kasir, body.page-kasir * {
    box-sizing: border-box;
}
body.page-kasir {
    background-color: var(--bg-dark);
    color: #f5f5f7;
    font-family: 'Poppins', sans-serif;
    padding: 20px;
    margin: 0;
}
body.page-kasir .container {
    max-width: 1300px;
    margin: 0 auto;
}
body.page-kasir .header-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    background: var(--card-bg);
    padding: 15px 20px;
    border-radius: 12px;
    border: 1px solid var(--border);
}
body.page-kasir h1 {
    color: var(--gold);
    font-size: 1.5rem;
    margin: 0;
}
body.page-kasir .header-right {
    text-align: right;
}
body.page-kasir .waktu-wib {
    color: var(--gold);
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 4px;
}
body.page-kasir .live-indicator {
    font-size: 0.75rem;
    color: #2ecc71;
    background: rgba(46, 204, 113, 0.1);
    padding: 4px 10px;
    border-radius: 20px;
    border: 1px solid rgba(46, 204, 113, 0.3);
    display: inline-block;
    transition: all 0.3s ease;
}
body.page-kasir .badge-shift-status {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    display: inline-block;
}
body.page-kasir .badge-shift-buka {
    background: rgba(46, 204, 113, 0.15);
    color: #2ecc71;
    border: 1px solid rgba(46, 204, 113, 0.4);
}
body.page-kasir .badge-shift-tutup {
    background: rgba(231, 76, 60, 0.15);
    color: #e74c3c;
    border: 1px solid rgba(231, 76, 60, 0.4);
}
body.page-kasir .ringkasan-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    margin-bottom: 18px;
}
body.page-kasir .ringkasan-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 16px;
    text-align: left;
}
body.page-kasir .ringkasan-label {
    font-size: 0.75rem;
    color: #9aa0b0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    margin-bottom: 6px;
}
body.page-kasir .ringkasan-value {
    font-size: 1.4rem;
    font-weight: 700;
    color: #fff;
}
body.page-kasir .ringkasan-omzet {
    border-color: var(--gold);
}
@media (max-width: 900px) {
    body.page-kasir .ringkasan-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
body.page-kasir .filter-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    gap: 10px;
    flex-wrap: wrap;
}
body.page-kasir .search-box-wrapper {
    display: flex;
    gap: 10px;
    flex: 1;
    min-width: 250px;
}
body.page-kasir .search-input {
    width: 100%;
    background: var(--card-bg);
    border: 1px solid var(--border);
    color: #f5f5f7;
    padding: 10px 15px;
    border-radius: 8px;
    font-size: 0.85rem;
    outline: none;
}
body.page-kasir .search-input:focus {
    border-color: var(--gold);
}
body.page-kasir .filter-btn-group {
    display: flex;
    gap: 6px;
}
body.page-kasir .btn-filter-status {
    background: var(--card-bg);
    color: #fff;
    border: 1px solid var(--border);
    padding: 8px 14px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 600;
    transition: background 0.2s;
}
body.page-kasir .btn-filter-status.active {
    background: var(--border);
    border-color: var(--gold);
    color: var(--gold);
}
body.page-kasir table {
    width: 100%;
    border-collapse: collapse;
    background: var(--card-bg);
    border-radius: 12px;
    overflow: hidden;
}
body.page-kasir th, body.page-kasir td {
    padding: 14px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    font-size: 0.85rem;
    vertical-align: top;
}
body.page-kasir th {
    background-color: #12141a;
    color: var(--gold);
    font-weight: 600;
}
body.page-kasir .badge-pending {
    background: rgba(243, 156, 18, 0.2);
    color: #f39c12;
    padding: 5px 10px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.8rem;
    display: inline-block;
}
body.page-kasir .badge-lunas {
    background: rgba(46, 204, 113, 0.2);
    color: #2ecc71;
    padding: 5px 10px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.8rem;
    display: inline-block;
}
body.page-kasir .badge-batal {
    background: rgba(231, 76, 60, 0.2);
    color: #e74c3c;
    padding: 5px 10px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.8rem;
    display: inline-block;
}
body.page-kasir .badge-tipe {
    padding: 5px 10px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.78rem;
    display: inline-block;
    white-space: nowrap;
}
body.page-kasir .badge-takeaway {
    background: rgba(255, 159, 67, 0.15);
    color: #ff9f43;
    border: 1px solid rgba(255, 159, 67, 0.5);
}
body.page-kasir .badge-dinein {
    background: rgba(52, 152, 219, 0.15);
    color: #3498db;
    border: 1px solid rgba(52, 152, 219, 0.5);
}
body.page-kasir .btn-action-group {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
body.page-kasir .btn-lunas {
    background: #2ecc71;
    color: #000;
    text-decoration: none;
    padding: 6px 10px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.78rem;
    display: inline-block;
    border: none;
    cursor: pointer;
}
body.page-kasir .btn-lunas:hover {
    background: #27ae60;
    color: #fff;
}
body.page-kasir .btn-batal {
    background: transparent;
    color: #e74c3c;
    text-decoration: none;
    padding: 6px 10px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.78rem;
    display: inline-block;
    border: 1px solid #e74c3c;
    cursor: pointer;
}
body.page-kasir .btn-batal:hover {
    background: #e74c3c;
    color: #fff;
}
body.page-kasir .btn-cetak {
    background: #3b82f6;
    color: #fff;
    text-decoration: none;
    padding: 6px 10px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.78rem;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
body.page-kasir .btn-cetak:hover {
    background: #2563eb;
}
body.page-kasir ul.menu-list {
    margin: 0;
    padding-left: 15px;
    color: #d1d5db;
    font-size: 0.82rem;
}
body.page-kasir ul.menu-list li {
    margin-bottom: 8px;
    line-height: 1.5;
}
body.page-kasir ul.menu-list li:last-child {
    margin-bottom: 0;
}
body.page-kasir .badge-varian {
    color: var(--gold);
    font-size: 0.75rem;
}
body.page-kasir .menu-note {
    margin-top: 3px;
    margin-left: 4px;
    padding: 3px 8px;
    background: rgba(243, 156, 18, 0.12);
    border-left: 2px solid #f39c12;
    border-radius: 4px;
    color: #f39c12;
    font-size: 0.75rem;
    font-style: italic;
    display: inline-block;
}
body.page-kasir .order-note-li {
    list-style: none;
    margin-left: -15px;
    margin-bottom: 10px !important;
    padding: 6px 10px;
    background: rgba(212, 175, 55, 0.1);
    border: 1px dashed var(--gold);
    border-radius: 6px;
    color: var(--gold);
    font-style: italic;
}
body.page-kasir .modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    display: none;
    justify-content: center;
    /* [DIPERBAIKI] align-items:center membuat struk yang lebih tinggi dari
       layar terpotong di ATAS dan di BAWAH sekaligus, dan overlay-nya sendiri
       tidak bisa digulir — tombol Cetak jadi tidak terjangkau pada pesanan
       dengan banyak item. flex-start + margin:auto pada kotaknya tetap
       memusatkan struk pendek, tapi membiarkan struk panjang digulir. */
    align-items: flex-start;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 20px 12px;
    z-index: 1000;
}
body.page-kasir .modal-box {
    background: #fff;
    color: #000;
    width: 310px;
    padding: 20px;
    border-radius: 8px;
    font-family: 'Inconsolata', monospace;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
    margin: auto;            /* tetap di tengah selama masih muat di layar */
}
body.page-kasir .receipt-header {
    text-align: center;
    border-bottom: 1px dashed #000;
    padding-bottom: 10px;
    margin-bottom: 10px;
}
body.page-kasir .receipt-header h2 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
}
body.page-kasir .receipt-header p {
    margin: 2px 0;
    font-size: 0.75rem;
}
body.page-kasir .receipt-info {
    font-size: 0.78rem;
    margin-bottom: 10px;
    border-bottom: 1px dashed #000;
    padding-bottom: 8px;
    line-height: 1.4;
}
body.page-kasir .receipt-catatan {
    font-size: 0.75rem;
    font-style: italic;
    margin-bottom: 10px;
    border-bottom: 1px dashed #000;
    padding-bottom: 8px;
    line-height: 1.4;
}
body.page-kasir .receipt-table {
    width: 100%;
    font-size: 0.78rem;
    border-collapse: collapse;
    margin-bottom: 5px;

    /* [DIPERBAIKI] "body.page-kasir table" memberi SEMUA tabel di halaman ini
       latar gelap kartu — termasuk tabel item di dalam struk, yang kertasnya
       putih. Hasilnya blok abu-abu gelap di tengah nota. Struk bukan kartu
       data; latarnya harus mengikuti kertas. */
    background: transparent;
    border-radius: 0;
    table-layout: fixed;          /* kolom Qty & Total tidak boleh terdesak keluar */
}
/* Nama menu panjang melipat ke bawah, bukan mendorong kolom angka keluar
   layar. Di struk, angkanya yang wajib terbaca. */
body.page-kasir .receipt-table td:first-child,
body.page-kasir .receipt-table th:first-child {
    white-space: normal;
    word-break: break-word;
}
body.page-kasir .receipt-table th:nth-child(2),
body.page-kasir .receipt-table td:nth-child(2) { width: 32px; }
body.page-kasir .receipt-table th:nth-child(3),
body.page-kasir .receipt-table td:nth-child(3) { width: 78px; }
body.page-kasir .receipt-table th {
    background: transparent;
    color: #000;
    border-bottom: 1px dashed #000;
    padding: 4px 0;
}
body.page-kasir .receipt-table td {
    padding: 5px 0;
    border: none;
    vertical-align: top;
}
body.page-kasir .receipt-item-note {
    font-size: 0.68rem;
    font-style: italic;
    color: #555;
    margin-top: 2px;
}
body.page-kasir .receipt-summary {
    border-top: 1px dashed #000;
    padding-top: 8px;
    margin-top: 5px;
    font-size: 0.78rem;
}
body.page-kasir .receipt-summary div {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
}
body.page-kasir .receipt-total {
    border-top: 1px dashed #000;
    padding-top: 8px;
    font-size: 0.95rem;
    font-weight: 700;
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    margin-top: 5px;
}
body.page-kasir .wa-input-container {
    border-top: 1px dashed #000;
    padding-top: 8px;
    margin-bottom: 10px;
}
body.page-kasir .wa-input-container label {
    display: block;
    font-size: 0.72rem;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    margin-bottom: 3px;
}
body.page-kasir .wa-input-container input {
    width: 100%;
    padding: 6px 8px;
    font-size: 0.78rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-family: 'Poppins', sans-serif;
    outline: none;
}
body.page-kasir .receipt-footer {
    text-align: center;
    font-size: 0.72rem;
    border-top: 1px dashed #000;
    padding-top: 8px;
}
body.page-kasir .paper-size-picker {
    border-top: 1px dashed #000;
    padding-top: 8px;
    margin-top: 8px;
}
body.page-kasir .paper-size-picker label {
    display: block;
    font-size: 0.72rem;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    margin-bottom: 5px;
}
body.page-kasir .paper-size-options {
    display: flex;
    gap: 6px;
}
body.page-kasir .btn-paper-size {
    flex: 1;
    background: #f0f0f0;
    color: #333;
    border: 1px solid #ccc;
    padding: 6px;
    border-radius: 4px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    cursor: pointer;
    font-size: 0.75rem;
}
body.page-kasir .btn-paper-size.active {
    background: #000;
    color: #fff;
    border-color: #000;
}
body.page-kasir .modal-actions {
    display: flex;
    gap: 6px;
    margin-top: 12px;

    /* Tombol Cetak menempel di dasar layar selama struk digulir. Menggulir
       sampai habis hanya untuk mencapai tombol yang sama setiap kali adalah
       kerja yang tidak perlu — dan di jam sibuk, kerja yang menahan antrean. */
    position: sticky;
    bottom: -20px;                    /* mengimbangi padding bawah kotak */
    background: #fff;
    padding-bottom: 20px;
    padding-top: 10px;
    margin-bottom: -20px;
    z-index: 2;
}
/* Garis tipis supaya tombol yang menempel tidak terlihat mengambang di atas
   teks struk yang lewat di belakangnya. */
body.page-kasir .modal-actions::before {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 0;
    border-top: 1px dashed #bbb;
}
body.page-kasir .btn-modal-print {
    flex: 1;
    background: #000;
    color: #fff;
    border: none;
    padding: 8px;
    border-radius: 4px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    cursor: pointer;
    font-size: 0.75rem;
}
body.page-kasir .btn-modal-wa {
    background: #25d366;
    color: #fff;
    border: none;
    padding: 8px 10px;
    border-radius: 4px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    cursor: pointer;
    font-size: 0.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
body.page-kasir .btn-modal-close {
    background: #888;
    color: #fff;
    border: none;
    padding: 8px 10px;
    border-radius: 4px;
    font-family: 'Poppins', sans-serif;
    cursor: pointer;
    font-size: 0.75rem;
}
@media print {
    /* [DIPERBAIKI] @page yang tersarang dihapus dari sini — lihat penjelasan
       di bagian cetak_rekap.php. Untuk struk kasir, @page disuntikkan dari
       kasir.php sesuai lebar kertas yang dipilih (58mm / 80mm). */
    body.page-kasir .container {
        display: none !important;
    }
    body.page-kasir, body.page-kasir html {
        background-color: #fff !important;
        margin: 0;
        padding: 0;
    }
    body.page-kasir .modal-overlay {
        position: static !important;
        background: transparent !important;
        display: block !important;
    }
    body.page-kasir .modal-box {
        position: relative !important;
        width: 100% !important;
        margin: 0 auto !important;
        padding: 2mm !important;
        box-shadow: none !important;
        left: 0;
        top: 0;
    }
    body.page-kasir .wa-input-container, body.page-kasir .modal-actions, body.page-kasir .paper-size-picker {
        display: none !important;
    }
    /* Kertas tidak menggulir: apa pun yang membatasi tinggi atau memotong isi
       harus dibatalkan, kalau tidak item terakhir tidak ikut tercetak. */
    body.page-kasir .modal-overlay {
        overflow: visible !important;
        padding: 0 !important;
    }
    body.page-kasir .modal-box {
        max-height: none !important;
        overflow: visible !important;
    }
    body.page-kasir.paper-80 .modal-box {
        max-width: 80mm;
        font-size: 1em;
    }
    body.page-kasir.paper-58 .modal-box {
        max-width: 58mm;
        font-size: 0.82em;
    }
    body.page-kasir.paper-58 .receipt-header h2 {
        font-size: 1rem !important;
    }
    body.page-kasir.paper-58 .receipt-table {
        font-size: 0.72rem !important;
    }
    body.page-kasir.paper-58 .qris-image {
        width: 150px !important;
        height: 150px !important;
    }
}

/* ---------- kelola_resep.php — blok 1 ---------- */
body.page-kelola-resep-1 {
    background: var(--bg-dark);
    color: #f5f5f7;
    font-family: 'Segoe UI', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}
body.page-kelola-resep-1 .alert-box {
    background: var(--card-bg);
    padding: 30px;
    border-radius: 12px;
    border: 1px solid #2e3245;
    text-align: center;
    max-width: 400px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}
body.page-kelola-resep-1 h3 {
    color: #e74c3c;
    margin-top: 0;
}
body.page-kelola-resep-1 p {
    color: #94a3b8;
    font-size: 0.9rem;
    margin-bottom: 20px;
}
body.page-kelola-resep-1 .btn-back {
    background: var(--gold);
    color: #000;
    padding: 10px 20px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: bold;
    display: inline-block;
}
body.page-kelola-resep-1 .btn-back:hover {
    background: #b8962d;
}

/* ---------- kelola_resep.php — blok 2 ---------- */
body.page-kelola-resep-2 {
    --bg-body: #0d0e12;
    --bg-card: #16181f;
    --bg-input: #212431;
    --primary: #d4af37;
    --text-main: #f1f5f9;
    --text-muted: #94a3b8;
    --border-color: #2e3245;
}
body.page-kelola-resep-2 {
    background: var(--bg-body);
    color: var(--text-main);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding: 20px;
}
body.page-kelola-resep-2 .container {
    max-width: 1050px;
    margin: auto;
    background: var(--bg-card);
    padding: 25px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
body.page-kelola-resep-2 h2 {
    color: var(--primary);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
    margin-top: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
body.page-kelola-resep-2 .alert {
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 6px;
    font-size: 0.95rem;
}
body.page-kelola-resep-2 .alert-success {
    background: rgba(46, 204, 113, 0.1);
    border: 1px solid #2ecc71;
    color: #2ecc71;
}
body.page-kelola-resep-2 .alert-danger {
    background: rgba(231, 76, 60, 0.1);
    border: 1px solid #e74c3c;
    color: #e74c3c;
}
body.page-kelola-resep-2 .form-section {
    background: rgba(255,255,255,0.02);
    padding: 20px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    margin-bottom: 20px;
}
body.page-kelola-resep-2 .form-section h4 {
    margin-top: 0;
    color: var(--primary);
    font-size: 1rem;
    margin-bottom: 15px;
}
body.page-kelola-resep-2 .form-group {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}
body.page-kelola-resep-2 select, body.page-kelola-resep-2 input {
    background: var(--bg-input);
    color: var(--text-main);
    border: 1px solid var(--border-color);
    padding: 10px;
    border-radius: 6px;
    outline: none;
}
body.page-kelola-resep-2 button {
    background: var(--primary);
    color: #000;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.2s;
}
body.page-kelola-resep-2 button:hover {
    background: #b8962d;
}
body.page-kelola-resep-2 .variant-card {
    background: #12141a;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 25px;
    overflow: hidden;
}
body.page-kelola-resep-2 .variant-header {
    background: rgba(212, 175, 55, 0.08);
    padding: 12px 20px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
body.page-kelola-resep-2 .variant-title {
    font-weight: 600;
    color: var(--primary);
    font-size: 1.05rem;
}
body.page-kelola-resep-2 .variant-stats {
    display: flex;
    gap: 15px;
    font-size: 0.85rem;
}
body.page-kelola-resep-2 table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}
body.page-kelola-resep-2 th, body.page-kelola-resep-2 td {
    padding: 10px 15px;
    border-bottom: 1px solid var(--border-color);
    text-align: left;
}
body.page-kelola-resep-2 th {
    color: var(--text-muted);
    background: rgba(0,0,0,0.2);
    font-size: 0.85rem;
    text-transform: uppercase;
}
body.page-kelola-resep-2 tr:hover {
    background-color: rgba(255, 255, 255, 0.02);
}
body.page-kelola-resep-2 .btn-hapus {
    color: #e74c3c;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.8rem;
    padding: 4px 10px;
    background: rgba(231, 76, 60, 0.1);
    border-radius: 4px;
    transition: 0.2s;
}
body.page-kelola-resep-2 .btn-hapus:hover {
    background: #e74c3c;
    color: #fff;
}
body.page-kelola-resep-2 .btn-reset {
    color: #f39c12;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.9rem;
    padding: 10px 15px;
    background: rgba(243, 156, 18, 0.1);
    border: 1px solid #f39c12;
    border-radius: 6px;
    transition: 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
body.page-kelola-resep-2 .btn-reset:hover {
    background: #f39c12;
    color: #000;
}
body.page-kelola-resep-2 .nav-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 10px;
}
body.page-kelola-resep-2 .back-link {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.95rem;
    background: #212431;
    padding: 10px 20px;
    border-radius: 6px;
    transition: 0.2s;
}
body.page-kelola-resep-2 .back-link:hover {
    color: var(--text-main);
    background: #2e3245;
}
body.page-kelola-resep-2 .text-right {
    text-align: right;
}
body.page-kelola-resep-2 .badge-ukuran {
    background: #2e3245;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.8rem;
    color: var(--gold);
    margin-left: 5px;
}
body.page-kelola-resep-2 .summary-box {
    background: #1e212b;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid var(--primary);
    margin-bottom: 25px;
}
body.page-kelola-resep-2 .summary-box h3 {
    color: var(--primary);
    margin-top: 0;
    text-align: center;
    margin-bottom: 15px;
    font-size: 1.1rem;
}
body.page-kelola-resep-2 .summary-content {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    text-align: center;
    gap: 15px;
}
body.page-kelola-resep-2 .summary-item span {
    color: var(--text-muted);
    font-size: 0.9rem;
}
body.page-kelola-resep-2 .summary-item b {
    font-size: 1.2rem;
    display: block;
    margin-top: 5px;
}

/* ---------- kelola_stok.php ---------- */
body.page-kelola-stok {
    --habis: #ff4d4d;
    --tersedia: #2ecc71;
}
body.page-kelola-stok, body.page-kelola-stok * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Plus Jakarta Sans', sans-serif;
}
body.page-kelola-stok {
    background: var(--bg-dark);
    color: var(--text-main);
    padding: 24px 16px;
}
body.page-kelola-stok .container {
    max-width: 700px;
    margin: 0 auto;
}
body.page-kelola-stok .header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
    gap: 10px;
    flex-wrap: wrap;
}
body.page-kelola-stok .btn-kembali {
    background: var(--card-bg);
    color: var(--text-main);
    border: 1px solid var(--border);
    padding: 8px 14px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}
body.page-kelola-stok .btn-kembali:hover {
    border-color: var(--gold);
    color: var(--gold);
}
body.page-kelola-stok h1 {
    color: var(--gold);
    font-size: 1.5rem;
    margin-bottom: 4px;
}
body.page-kelola-stok p.sub {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-bottom: 24px;
}
body.page-kelola-stok .kategori-title {
    color: var(--gold);
    font-size: 1rem;
    font-weight: 700;
    margin: 24px 0 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
body.page-kelola-stok .menu-row {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}
body.page-kelola-stok .menu-row.habis {
    opacity: 0.7;
    border-color: rgba(255, 77, 77, 0.4);
}
body.page-kelola-stok .menu-row-name {
    font-weight: 600;
    font-size: 0.95rem;
}
body.page-kelola-stok .menu-row-harga {
    color: var(--text-muted);
    font-size: 0.8rem;
    margin-top: 2px;
}
body.page-kelola-stok .toggle-switch {
    position: relative;
    display: inline-block;
    width: 90px;
}
body.page-kelola-stok .btn-toggle {
    width: 100%;
    padding: 8px 0;
    border-radius: 20px;
    border: none;
    font-weight: 700;
    font-size: 0.78rem;
    cursor: pointer;
    transition: all 0.2s;
}
body.page-kelola-stok .btn-toggle.tersedia {
    background: rgba(46, 204, 113, 0.15);
    color: var(--tersedia);
    border: 1px solid var(--tersedia);
}
body.page-kelola-stok .btn-toggle.habis-btn {
    background: rgba(255, 77, 77, 0.15);
    color: var(--habis);
    border: 1px solid var(--habis);
}
body.page-kelola-stok .btn-toggle:disabled {
    opacity: 0.5;
    cursor: wait;
}
body.page-kelola-stok .toast {
    position: fixed;
    top: 20px;
    right: 20px;
    background: var(--card-bg);
    border: 1px solid var(--gold);
    color: var(--text-main);
    padding: 12px 18px;
    border-radius: 8px;
    font-size: 0.85rem;
    display: none;
    z-index: 999;
}

/* ---------- laporan_shift.php ---------- */
body.page-laporan-shift, body.page-laporan-shift * {
    box-sizing: border-box;
}
body.page-laporan-shift {
    margin: 0;
    background: var(--bg-dark);
    color: #f5f5f7;
    font-family: 'Poppins',sans-serif;
    padding: 24px;
}
body.page-laporan-shift a {
    color: var(--gold);
}
body.page-laporan-shift .top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}
body.page-laporan-shift h1 {
    font-size: 1.4rem;
    margin: 0;
}
body.page-laporan-shift .sub {
    color: #a0a5b5;
    font-size: 0.85rem;
}
body.page-laporan-shift .btn {
    background: #8e44ad;
    color: #fff;
    padding: 8px 14px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
}
body.page-laporan-shift .btn-back {
    background: #333747;
}
body.page-laporan-shift .cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px,1fr));
    gap: 14px;
    margin-bottom: 22px;
}
body.page-laporan-shift .card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 16px;
}
body.page-laporan-shift .card .label {
    font-size: 0.75rem;
    color: #a0a5b5;
    margin-bottom: 6px;
}
body.page-laporan-shift .card .value {
    font-size: 1.25rem;
    font-weight: 700;
}
body.page-laporan-shift .gold {
    color: var(--gold);
}
body.page-laporan-shift form.filter {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-end;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 20px;
}
body.page-laporan-shift form.filter label {
    display: block;
    font-size: 0.75rem;
    color: #a0a5b5;
    margin-bottom: 4px;
}
body.page-laporan-shift form.filter input, body.page-laporan-shift form.filter select {
    background: var(--bg-dark);
    border: 1px solid var(--border);
    color: #f5f5f7;
    border-radius: 6px;
    padding: 7px 9px;
    font-size: 0.85rem;
    font-family: 'Poppins',sans-serif;
}
body.page-laporan-shift table {
    width: 100%;
    border-collapse: collapse;
    background: var(--card-bg);
    border-radius: 10px;
    overflow: hidden;
}
body.page-laporan-shift th, body.page-laporan-shift td {
    padding: 10px 12px;
    font-size: 0.82rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
body.page-laporan-shift th {
    color: #a0a5b5;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.7rem;
}
body.page-laporan-shift tbody tr:hover {
    background: rgba(255,255,255,0.03);
}
body.page-laporan-shift .badge {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 20px;
    display: inline-block;
}
body.page-laporan-shift .badge-open {
    background: rgba(46,204,113,0.15);
    color: #2ecc71;
    border: 1px solid rgba(46,204,113,0.4);
}
body.page-laporan-shift .badge-closed {
    background: rgba(142,68,173,0.15);
    color: #a569bd;
    border: 1px solid rgba(142,68,173,0.4);
}
body.page-laporan-shift .selisih-plus {
    color: #f39c12;
    font-weight: 700;
}
body.page-laporan-shift .selisih-minus {
    color: #e74c3c;
    font-weight: 700;
}
body.page-laporan-shift .selisih-nol {
    color: #2ecc71;
    font-weight: 700;
}
body.page-laporan-shift .table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: 10px;
}
body.page-laporan-shift .empty {
    text-align: center;
    padding: 40px;
    color: #a0a5b5;
}

/* ---------- login.php ---------- */
body.page-login {
    --bg-body: #0d0e12;
    --bg-card: #16181f;
    --bg-input: #212431;
    --primary: #d4af37;
    --primary-hover: #b8962d;
    --text-main: #f1f5f9;
    --text-muted: #94a3b8;
    --border-color: #2e3245;
}
body.page-login {
    background-color: var(--bg-body);
    color: var(--text-main);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}
body.page-login .login-card {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 30px;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    width: 100%;
    max-width: 400px;
}
body.page-login .login-card h2 {
    margin-top: 0;
    color: var(--primary);
    text-align: center;
    font-size: 1.6rem;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 15px;
}
body.page-login .form-group {
    margin-bottom: 15px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
body.page-login .form-group label {
    font-size: 0.85rem;
    color: var(--text-muted);
}
body.page-login .form-control {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 0.95rem;
    outline: none;
}
body.page-login .form-control:focus {
    border-color: var(--primary);
}
body.page-login .btn-login {
    background: var(--primary);
    color: #000;
    font-weight: 600;
    border: none;
    padding: 11px;
    border-radius: 6px;
    cursor: pointer;
    width: 100%;
    font-size: 0.95rem;
    margin-top: 10px;
    transition: background 0.2s;
}
body.page-login .btn-login:hover {
    background: var(--primary-hover);
}
body.page-login .alert-error {
    background: rgba(231, 76, 60, 0.15);
    color: #e74c3c;
    border: 1px solid rgba(231, 76, 60, 0.3);
    padding: 10px;
    border-radius: 6px;
    font-size: 0.85rem;
    margin-bottom: 15px;
    text-align: center;
}

/* ---------- login_kasir.php ---------- */
body.page-login-kasir, body.page-login-kasir * {
    box-sizing: border-box;
}
body.page-login-kasir {
    background-color: var(--bg-dark);
    color: #f5f5f7;
    font-family: 'Poppins', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}
body.page-login-kasir .login-card {
    background: var(--card-bg);
    padding: 30px;
    border-radius: 12px;
    border: 1px solid var(--border);
    width: 100%;
    max-width: 400px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
body.page-login-kasir .login-header {
    text-align: center;
    margin-bottom: 25px;
}
body.page-login-kasir .login-header h1 {
    color: var(--gold);
    font-size: 1.4rem;
    margin: 0 0 5px 0;
}
body.page-login-kasir .login-header p {
    color: #a0a5b5;
    font-size: 0.85rem;
    margin: 0;
}
body.page-login-kasir .form-group {
    margin-bottom: 15px;
}
body.page-login-kasir .form-group label {
    display: block;
    font-size: 0.85rem;
    margin-bottom: 6px;
    color: #d1d5db;
}
body.page-login-kasir .form-control {
    width: 100%;
    padding: 10px 14px;
    background: #212431;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: #fff;
    font-size: 0.9rem;
    outline: none;
}
body.page-login-kasir .form-control:focus {
    border-color: var(--gold);
}
body.page-login-kasir .btn-login {
    width: 100%;
    background: var(--gold);
    color: #000;
    border: none;
    padding: 11px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background 0.2s;
    margin-top: 10px;
}
body.page-login-kasir .btn-login:hover {
    background: #b8962d;
}
body.page-login-kasir .alert-error {
    background: rgba(231, 76, 60, 0.2);
    color: #e74c3c;
    border: 1px solid rgba(231, 76, 60, 0.4);
    padding: 10px;
    border-radius: 6px;
    font-size: 0.82rem;
    margin-bottom: 15px;
    text-align: center;
}

/* ---------- nota.php ---------- */
body.page-nota, body.page-nota * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Plus Jakarta Sans', sans-serif;
}
body.page-nota {
    background-color: var(--bg-dark);
    color: var(--text-main);
    padding: 40px 15px;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}
body.page-nota .receipt-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 30px 25px;
    width: 100%;
    max-width: 450px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}
body.page-nota .header {
    text-align: center;
    border-bottom: 2px dashed var(--border);
    padding-bottom: 20px;
    margin-bottom: 20px;
}
body.page-nota .header h1 {
    font-family: 'Playfair Display', serif;
    color: var(--gold);
    font-size: 1.8rem;
    letter-spacing: 1px;
    margin-bottom: 5px;
}
body.page-nota .header p {
    color: var(--text-muted);
    font-size: 0.9rem;
    letter-spacing: 2px;
    text-transform: uppercase;
}
body.page-nota .info-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 0.95rem;
    align-items: center;
}
body.page-nota .info-row .label {
    color: var(--text-muted);
}
body.page-nota .info-row .value {
    font-weight: 600;
    color: var(--text-main);
}
body.page-nota .divider {
    border-bottom: 2px dashed var(--border);
    margin: 20px 0;
}
body.page-nota .item-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    align-items: flex-start;
}
body.page-nota .item-info {
    flex: 1;
    padding-right: 15px;
}
body.page-nota .item-name {
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-main);
    margin-bottom: 4px;
}
body.page-nota .item-meta {
    font-size: 0.85rem;
    color: var(--text-muted);
}
body.page-nota .item-price {
    font-weight: 600;
    font-size: 0.95rem;
    text-align: right;
    white-space: nowrap;
}
body.page-nota .summary-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 0.95rem;
}
body.page-nota .summary-row .label {
    color: var(--text-muted);
}
body.page-nota .grand-total {
    display: flex;
    justify-content: space-between;
    font-size: 1.25rem;
    color: var(--gold);
    font-weight: 700;
    border-top: 2px dashed var(--border);
    padding-top: 20px;
    margin-top: 10px;
}
body.page-nota .qris-section {
    background: var(--card-sub);
    border: 1px solid var(--gold);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    margin-top: 25px;
}
body.page-nota .qris-title {
    color: var(--gold);
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 10px;
}
body.page-nota .qris-image {
    width: 220px;
    height: 220px;
    object-fit: contain;
    border-radius: 8px;
    margin: 10px auto;
    background: #fff;
    padding: 10px;
}
body.page-nota .qris-instruction {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 10px;
    line-height: 1.4;
}
body.page-nota .exact-amount {
    font-size: 1.3rem;
    color: #fff;
    font-weight: 700;
    margin-top: 5px;
    letter-spacing: 1px;
}
body.page-nota .btn-back {
    display: block;
    width: 100%;
    text-align: center;
    padding: 14px;
    background: var(--gold);
    color: #000;
    font-weight: 700;
    border-radius: 10px;
    text-decoration: none;
    margin-top: 30px;
    transition: all 0.2s;
    font-size: 1rem;
}
body.page-nota .btn-back:hover {
    background: var(--gold-hover);
    transform: translateY(-2px);
}

/* ---------- rekap_menu.php ---------- */
body.page-rekap-menu {
    --bg-body: #0d0e12;
    --bg-card: #16181f;
    --bg-input: #212431;
    --primary: #d4af37;
    --primary-hover: #b8962d;
    --text-main: #f1f5f9;
    --text-muted: #94a3b8;
    --border-color: #2e3245;
}
body.page-rekap-menu {
    background-color: var(--bg-body);
    color: var(--text-main);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 20px;
}
body.page-rekap-menu .container {
    max-width: 1000px;
    margin: 0 auto;
}
body.page-rekap-menu .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 25px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 15px;
}
body.page-rekap-menu .header-left {
    display: flex;
    align-items: center;
    gap: 15px;
}
body.page-rekap-menu .header h2 {
    margin: 0;
    color: var(--primary);
    font-size: 1.8rem;
    display: flex;
    align-items: center;
}
body.page-rekap-menu .live-badge {
    font-size: 0.8rem;
    background: #e74c3c;
    color: white;
    padding: 3px 10px;
    border-radius: 20px;
    margin-left: 15px;
    font-weight: 600;
    animation: pulse 2s infinite;
}
body.page-rekap-menu .card {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 20px;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    margin-bottom: 25px;
}
body.page-rekap-menu .filter-group {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
body.page-rekap-menu .filter-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
body.page-rekap-menu .filter-item label {
    font-size: 0.85rem;
    color: var(--text-muted);
}
body.page-rekap-menu .filter-input {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.9rem;
    outline: none;
}
body.page-rekap-menu .btn {
    font-weight: 600;
    border: none;
    padding: 9px 16px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.88rem;
    text-decoration: none;
}
body.page-rekap-menu .btn-filter {
    background: var(--primary);
    color: #000;
    align-self: flex-end;
}
body.page-rekap-menu .btn-filter:hover {
    background: var(--primary-hover);
}
body.page-rekap-menu .btn-print {
    background: #27ae60;
    color: #ffffff;
    align-self: flex-end;
}
body.page-rekap-menu .btn-excel {
    background: #1d6f42;
    color: #ffffff;
    align-self: flex-end;
}
body.page-rekap-menu .btn-reset {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border-color);
    padding: 9px 15px;
    align-self: flex-end;
}
body.page-rekap-menu .summary-box {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: linear-gradient(135deg, #1f2330 0%, var(--card-bg) 100%);
    border-left: 4px solid var(--primary);
}
body.page-rekap-menu .summary-title {
    font-size: 1rem;
    color: var(--text-muted);
}
body.page-rekap-menu .summary-value {
    font-size: 2rem;
    font-weight: bold;
    color: var(--primary);
}
body.page-rekap-menu .table-responsive {
    overflow-x: auto;
}
body.page-rekap-menu table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}
body.page-rekap-menu th {
    background: #12141a;
    color: var(--primary);
    padding: 12px 15px;
    border-bottom: 2px solid var(--border-color);
}
body.page-rekap-menu td {
    padding: 12px 15px;
    border-bottom: 1px solid var(--border-color);
}

/* ---------- rekap_pesanan.php ---------- */
body.page-rekap-pesanan {
    --bg-body: #0d0e12;
    --bg-card: #16181f;
    --bg-input: #212431;
    --primary: #d4af37;
    --primary-hover: #b8962d;
    --text-main: #f1f5f9;
    --text-muted: #94a3b8;
    --border-color: #2e3245;
    --badge-lunas-bg: rgba(46, 204, 113, 0.15);
    --badge-lunas-color: #2ecc71;
    --badge-pending-bg: rgba(243, 156, 18, 0.15);
    --badge-pending-color: #f39c12;
    --ice: #4ade80;
    --hot: #f87171;
    --size: #38bdf8;
}
body.page-rekap-pesanan {
    background-color: var(--bg-body);
    color: var(--text-main);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 15px;
}
body.page-rekap-pesanan .container {
    max-width: 100%;
    margin: 0 auto;
}
body.page-rekap-pesanan .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
}
body.page-rekap-pesanan .header h2 {
    margin: 0;
    color: var(--primary);
    font-size: 1.4rem;
}
body.page-rekap-pesanan .card {
    background: var(--bg-card);
    border-radius: 8px;
    padding: 15px;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    margin-bottom: 15px;
}
body.page-rekap-pesanan .filter-group {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 15px;
}
body.page-rekap-pesanan .filter-controls {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}
body.page-rekap-pesanan .filter-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
body.page-rekap-pesanan .filter-item label {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 500;
}
body.page-rekap-pesanan .filter-input {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 0.85rem;
    outline: none;
}
body.page-rekap-pesanan .action-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}
body.page-rekap-pesanan .btn {
    font-weight: 600;
    border: none;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.8rem;
    text-decoration: none;
    color: #ffffff;
    white-space: nowrap;
}
body.page-rekap-pesanan .btn-admin-menu {
    background: #2980b9;
}
body.page-rekap-pesanan .btn-rekap-menu {
    background: #8e44ad;
}
body.page-rekap-pesanan .btn-bahan-baku {
    background: #16a085;
}
body.page-rekap-pesanan .btn-print {
    background: #27ae60;
}
body.page-rekap-pesanan .btn-excel {
    background: #1d6f42;
}
body.page-rekap-pesanan .btn-reset-akun {
    background: #e67e22;
}
body.page-rekap-pesanan .btn-tambah-pengguna {
    background: var(--gold);
    color: #000;
}
body.page-rekap-pesanan .btn-logout {
    background: #c0392b;
    margin-left: 10px;
}
body.page-rekap-pesanan .summary-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, #1f2330 0%, var(--card-bg) 100%);
    border-left: 4px solid var(--primary);
    padding: 12px 20px;
}
body.page-rekap-pesanan .summary-title {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 3px;
}
body.page-rekap-pesanan .summary-value {
    font-size: 1.4rem;
    font-weight: bold;
    color: var(--primary);
}
body.page-rekap-pesanan .table-responsive {
    overflow-x: auto;
    width: 100%;
}
body.page-rekap-pesanan table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 0.75rem;
}
body.page-rekap-pesanan th {
    background: #12141a;
    color: var(--primary);
    padding: 6px 8px;
    border-bottom: 2px solid var(--border-color);
    font-weight: 600;
    white-space: nowrap;
}
body.page-rekap-pesanan td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
    word-wrap: break-word;
}
body.page-rekap-pesanan tr:hover {
    background-color: rgba(255, 255, 255, 0.03);
}
body.page-rekap-pesanan .badge {
    padding: 3px 6px;
    border-radius: 12px;
    font-size: 0.65rem;
    font-weight: 700;
    display: inline-block;
    white-space: nowrap;
}
body.page-rekap-pesanan .badge-lunas {
    background: var(--badge-lunas-bg);
    color: var(--badge-lunas-color);
    border: 1px solid var(--badge-lunas-color);
}
body.page-rekap-pesanan .badge-pending {
    background: var(--badge-pending-bg);
    color: var(--badge-pending-color);
    border: 1px solid var(--badge-pending-color);
}
body.page-rekap-pesanan .badge-takeaway {
    background: rgba(255, 159, 67, 0.15);
    color: #ff9f43;
    border: 1px solid #ff9f43;
}
body.page-rekap-pesanan .badge-dinein {
    background: rgba(52, 152, 219, 0.15);
    color: #38bdf8;
    border: 1px solid #38bdf8;
}
body.page-rekap-pesanan .badge-size {
    background: rgba(56, 189, 248, 0.15);
    color: var(--size);
    border: 1px solid var(--size);
    padding: 2px 4px;
    border-radius: 8px;
    font-size: 0.65rem;
}
body.page-rekap-pesanan .badge-ice {
    background: rgba(74, 222, 128, 0.15);
    color: var(--ice);
    border: 1px solid var(--ice);
    padding: 2px 4px;
    border-radius: 8px;
    font-size: 0.65rem;
}
body.page-rekap-pesanan .badge-hot {
    background: rgba(248, 113, 113, 0.15);
    color: var(--hot);
    border: 1px solid var(--hot);
    padding: 2px 4px;
    border-radius: 8px;
    font-size: 0.65rem;
}
body.page-rekap-pesanan .aksi-container {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}
body.page-rekap-pesanan .btn-hapus, body.page-rekap-pesanan .btn-edit {
    border: none;
    padding: 4px 6px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.65rem;
    color: #fff;
    text-decoration: none;
}
body.page-rekap-pesanan .btn-edit {
    background: #f39c12;
}
body.page-rekap-pesanan .btn-hapus {
    background: #e74c3c;
}
body.page-rekap-pesanan ul.menu-list {
    margin: 0;
    padding-left: 14px;
    font-size: 0.75rem;
}
body.page-rekap-pesanan ul.menu-list li {
    margin-bottom: 4px;
    line-height: 1.4;
}
body.page-rekap-pesanan .menu-note {
    padding: 2px 6px;
    font-size: 0.7rem;
    background: rgba(243, 156, 18, 0.12);
    border-left: 2px solid var(--badge-pending-color);
    border-radius: 3px;
    color: var(--badge-pending-color);
    font-style: italic;
    display: inline-block;
    margin-top: 2px;
}
body.page-rekap-pesanan td:nth-last-child(2), body.page-rekap-pesanan td:nth-last-child(3), body.page-rekap-pesanan td:nth-last-child(4) {
    white-space: nowrap;
}
body.page-rekap-pesanan .financial-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin-bottom: 15px;
}
body.page-rekap-pesanan .fin-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    padding: 15px;
    border-radius: 8px;
}
body.page-rekap-pesanan .fin-card h5 {
    margin: 0 0 5px 0;
    font-size: 0.75rem;
    color: #94a3b8;
}
body.page-rekap-pesanan .fin-card .value {
    font-size: 1.2rem;
    font-weight: 700;
}
body.page-rekap-pesanan .text-kotor {
    color: #3b82f6;
}
body.page-rekap-pesanan .text-modal {
    color: #e74c3c;
}
body.page-rekap-pesanan .text-bersih {
    color: #2ecc71;
}
body.page-rekap-pesanan .print-info {
    display: none;
}
@media print {
    body.page-rekap-pesanan {
        background-color: #ffffff !important;
        color: #000000 !important;
        font-size: 10px;
    }
    body.page-rekap-pesanan .filter-card, body.page-rekap-pesanan .btn, body.page-rekap-pesanan .col-aksi, body.page-rekap-pesanan .stok-alert-card {
        display: none !important;
    }
    body.page-rekap-pesanan .print-info {
        display: block !important;
        margin-bottom: 15px;
        font-weight: bold;
    }
    body.page-rekap-pesanan table {
        font-size: 10px;
    }
    body.page-rekap-pesanan th, body.page-rekap-pesanan td {
        border: 1px solid #000 !important;
        padding: 4px;
    }
}

/* ---------- reset_akun.php ---------- */
body.page-reset-akun, body.page-reset-akun * {
    box-sizing: border-box;
}
body.page-reset-akun {
    background-color: var(--bg-dark);
    color: #f5f5f7;
    font-family: 'Poppins', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    padding: 20px 0;
}
body.page-reset-akun .reset-card {
    background: var(--card-bg);
    padding: 30px;
    border-radius: 12px;
    border: 1px solid var(--border);
    width: 100%;
    max-width: 450px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
body.page-reset-akun h2 {
    color: var(--gold);
    text-align: center;
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 1.3rem;
    border-bottom: 1px solid var(--border);
    padding-bottom: 10px;
}
body.page-reset-akun .form-group {
    margin-bottom: 15px;
}
body.page-reset-akun .form-group label {
    display: block;
    font-size: 0.85rem;
    margin-bottom: 6px;
    color: #d1d5db;
}
body.page-reset-akun .form-control {
    width: 100%;
    padding: 10px 14px;
    background: #212431;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: #fff;
    font-size: 0.9rem;
    outline: none;
    font-family: 'Poppins', sans-serif;
}
body.page-reset-akun .form-control:focus {
    border-color: var(--gold);
}
body.page-reset-akun .btn-action-group {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}
body.page-reset-akun .btn-submit {
    flex: 1;
    background: #2ecc71;
    color: #000;
    border: none;
    padding: 12px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.2s;
}
body.page-reset-akun .btn-submit:hover {
    background: #27ae60;
}
body.page-reset-akun .btn-danger {
    flex: 1;
    background: #e74c3c;
    color: #fff;
    border: none;
    padding: 12px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.2s;
}
body.page-reset-akun .btn-danger:hover {
    background: #c0392b;
}
body.page-reset-akun .btn-back {
    display: block;
    width: 100%;
    background: transparent;
    color: #a0a5b5;
    border: 1px solid var(--border);
    text-align: center;
    padding: 10px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    margin-top: 15px;
    text-decoration: none;
    transition: all 0.2s;
}
body.page-reset-akun .btn-back:hover {
    background: #212431;
    color: #fff;
    border-color: #d1d5db;
}
body.page-reset-akun .alert-success {
    background: rgba(46, 204, 113, 0.2);
    color: #2ecc71;
    border: 1px solid rgba(46, 204, 113, 0.4);
    padding: 10px;
    border-radius: 6px;
    font-size: 0.85rem;
    margin-bottom: 15px;
    text-align: center;
}
body.page-reset-akun .alert-error {
    background: rgba(231, 76, 60, 0.2);
    color: #e74c3c;
    border: 1px solid rgba(231, 76, 60, 0.4);
    padding: 10px;
    border-radius: 6px;
    font-size: 0.85rem;
    margin-bottom: 15px;
    text-align: center;
}
body.page-reset-akun select option {
    background: var(--card-bg);
    color: #fff;
}

/* ---------- status_pesanan.php ---------- */
body.page-status-pesanan {
    --bg-color: #0d0e12;
    --accent-gold: #d4af37;
    --text-color: #f5f5f7;
    --text-muted: #a0a5b5;
}
body.page-status-pesanan, body.page-status-pesanan * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body.page-status-pesanan {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: 'Poppins', sans-serif;
    display: flex;
    justify-content: center;
    padding: 20px;
}
body.page-status-pesanan .card {
    background: var(--card-bg);
    border: 1px solid rgba(212, 175, 55, 0.3);
    width: 100%;
    max-width: 420px;
    padding: 30px 20px;
    border-radius: 16px;
    text-align: center;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
}
body.page-status-pesanan .loader-box {
    margin: 20px 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
body.page-status-pesanan .spinner {
    width: 60px;
    height: 60px;
    border: 5px solid rgba(212, 175, 55, 0.2);
    border-top-color: var(--accent-gold);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
body.page-status-pesanan .success-icon {
    display: none;
    font-size: 3.5rem;
    color: #2ecc71;
    margin: 10px 0;
}
body.page-status-pesanan h2 {
    font-size: 1.3rem;
    margin-top: 10px;
    color: var(--accent-gold);
    letter-spacing: 1px;
}
body.page-status-pesanan p.status-text {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-top: 5px;
}
body.page-status-pesanan .order-summary {
    background: var(--bg-dark);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 15px;
    margin-top: 25px;
    text-align: left;
}
body.page-status-pesanan .order-summary h4 {
    font-size: 0.85rem;
    color: var(--accent-gold);
    border-bottom: 1px solid var(--border);
    padding-bottom: 8px;
    margin-bottom: 10px;
}
body.page-status-pesanan .item-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    margin-bottom: 6px;
}
body.page-status-pesanan .total-row {
    display: flex;
    justify-content: space-between;
    font-weight: 700;
    font-size: 0.95rem;
    border-top: 1px solid var(--border);
    padding-top: 8px;
    margin-top: 8px;
    color: var(--accent-gold);
}
body.page-status-pesanan .footer-note {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 20px;
    line-height: 1.4;
}

/* ---------- tambah_pengguna.php ---------- */
body.page-tambah-pengguna, body.page-tambah-pengguna * {
    box-sizing: border-box;
}
body.page-tambah-pengguna {
    background-color: var(--bg-dark);
    color: #f5f5f7;
    font-family: Arial, Helvetica, sans-serif;
    padding: 20px;
    margin: 0;
}
body.page-tambah-pengguna .container {
    max-width: 480px;
    margin: 0 auto;
}
body.page-tambah-pengguna .header-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    background: var(--card-bg);
    padding: 15px 20px;
    border-radius: 10px;
    border: 1px solid var(--border);
}
body.page-tambah-pengguna h1 {
    color: var(--gold);
    font-size: 1.2rem;
    margin: 0;
}
body.page-tambah-pengguna .btn-kembali {
    background: var(--border);
    color: #fff;
    padding: 7px 14px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 0.8rem;
}
body.page-tambah-pengguna .form-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 22px;
}
body.page-tambah-pengguna .form-group {
    margin-bottom: 16px;
}
body.page-tambah-pengguna label {
    display: block;
    font-size: 0.85rem;
    font-weight: bold;
    margin-bottom: 5px;
}
body.page-tambah-pengguna input[type="text"], body.page-tambah-pengguna input[type="password"], body.page-tambah-pengguna select {
    width: 100%;
    background: var(--bg-dark);
    border: 1px solid var(--border);
    color: #f5f5f7;
    padding: 9px 12px;
    border-radius: 6px;
    font-size: 0.9rem;
    outline: none;
}
body.page-tambah-pengguna input:focus, body.page-tambah-pengguna select:focus {
    border-color: var(--gold);
}
body.page-tambah-pengguna .btn-submit {
    width: 100%;
    background: var(--gold);
    color: #000;
    border: none;
    padding: 11px;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
}
body.page-tambah-pengguna .alert-box {
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 0.85rem;
    margin-bottom: 16px;
    border: 1px solid;
}
body.page-tambah-pengguna .alert-error {
    background: rgba(231, 76, 60, 0.12);
    border-color: #e74c3c;
    color: #ff8a80;
}
body.page-tambah-pengguna .alert-success {
    background: rgba(46, 204, 113, 0.12);
    border-color: #2ecc71;
    color: #6be89c;
}

/* =========================== 4. ANIMASI ========================== */
@keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideUp-default { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes toastIn { to { opacity: 1; transform: translateY(0); } }
@keyframes toastOut { to { opacity: 0; transform: translateY(-15px); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes pulse { 0% { opacity: 1; box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.7); } 70% { opacity: 0.7; box-shadow: 0 0 0 6px rgba(231, 76, 60, 0); } 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(231, 76, 60, 0); } }

/* =========================== 5. PAGINATION ========================== */
/* Navigasi halaman untuk tabel rekap. Ditulis sekali di sini supaya semua
   halaman bertabel bisa memakainya, bukan disalin ulang per halaman. */
body.page-rekap-pesanan .pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}
body.page-rekap-pesanan .pagination-info {
    color: var(--text-muted);
    font-size: 0.85rem;
}
body.page-rekap-pesanan .pagination-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
body.page-rekap-pesanan .pagination-nav button {
    background: var(--card-bg);
    color: var(--text-main);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 7px 12px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: 0.15s;
    min-width: 38px;
}
body.page-rekap-pesanan .pagination-nav button:hover:not(:disabled) {
    border-color: var(--gold);
    color: var(--gold);
}
body.page-rekap-pesanan .pagination-nav button.aktif {
    background: var(--gold);
    border-color: var(--gold);
    color: #000;
}
body.page-rekap-pesanan .pagination-nav button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
body.page-rekap-pesanan .pagination-nav button:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}
body.page-rekap-pesanan .pagination-gap {
    color: var(--text-muted);
    padding: 0 2px;
}
@media print {
    body.page-rekap-pesanan .pagination { display: none !important; }
}

/* ---------- index.php (halaman pemilihan portal) ---------- */
body.page-index {
    background-color: var(--bg-dark);
    color: var(--text-main);
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    margin: 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
}
body.page-index * { box-sizing: border-box; }
body.page-index .portal-wrap {
    width: 100%;
    max-width: 860px;
}
body.page-index .portal-brand {
    text-align: center;
    margin-bottom: 34px;
}
body.page-index .portal-logo {
    width: 76px;
    height: 76px;
    object-fit: cover;
    border-radius: 18px;
    margin-bottom: 14px;
}
body.page-index .portal-brand h1 {
    color: var(--gold);
    font-size: 2rem;
    margin: 0 0 6px;
    letter-spacing: -0.02em;
}
body.page-index .portal-brand p {
    color: var(--text-muted);
    font-size: 0.92rem;
    margin: 0;
}
body.page-index .portal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 16px;
}
body.page-index .portal-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 26px 22px;
    text-decoration: none;
    color: var(--text-main);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    transition: 0.2s;
}
body.page-index .portal-card:hover,
body.page-index .portal-card:focus-visible {
    border-color: var(--gold);
    transform: translateY(-3px);
    box-shadow: 0 10px 26px rgba(212, 175, 55, 0.14);
    outline: none;
}
body.page-index .portal-card:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
}
body.page-index .portal-card-utama {
    grid-column: 1 / -1;
    background: linear-gradient(180deg, rgba(212,175,55,0.09), var(--card-bg));
    border-color: rgba(212,175,55,0.4);
}
body.page-index .portal-ikon { font-size: 2rem; line-height: 1; }
body.page-index .portal-judul { font-size: 1.06rem; font-weight: 700; }
body.page-index .portal-ket {
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.5;
}
body.page-index .portal-peringatan {
    margin-top: 22px;
    background: rgba(231, 76, 60, 0.08);
    border: 1px solid #e74c3c;
    border-radius: var(--radius-md);
    padding: 14px 18px;
    font-size: 0.87rem;
    line-height: 1.6;
}
body.page-index .portal-peringatan code {
    background: rgba(0,0,0,0.3);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.85em;
}
body.page-index .portal-footer {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.78rem;
    margin-top: 30px;
}
@media (prefers-reduced-motion: reduce) {
    body.page-index .portal-card { transition: none; }
    body.page-index .portal-card:hover { transform: none; }
}

/* ---------- stok_masuk.php ---------- */
body.page-stok-masuk {
    background-color: var(--bg-dark);
    color: var(--text-main);
    font-family: 'Poppins', system-ui, sans-serif;
    margin: 0;
    padding: 24px 16px 60px;
}
body.page-stok-masuk * { box-sizing: border-box; }
body.page-stok-masuk .container { max-width: 1180px; margin: 0 auto; }

body.page-stok-masuk .header-row {
    display: flex; flex-wrap: wrap; gap: 14px;
    align-items: flex-start; justify-content: space-between; margin-bottom: 20px;
}
body.page-stok-masuk h1 { color: var(--gold); font-size: 1.5rem; margin: 0 0 4px; }
body.page-stok-masuk .sub { color: var(--text-muted); font-size: 0.86rem; margin: 0; max-width: 60ch; }
body.page-stok-masuk .header-aksi { display: flex; gap: 8px; flex-wrap: wrap; }
body.page-stok-masuk .btn-kembali {
    background: var(--border); color: var(--text-main); padding: 8px 14px;
    border-radius: var(--radius-sm); text-decoration: none; font-size: 0.82rem;
    font-weight: 600; white-space: nowrap; transition: 0.15s;
}
body.page-stok-masuk .btn-kembali:hover { background: var(--gold); color: #000; }

body.page-stok-masuk .alert {
    padding: 12px 16px; border-radius: var(--radius-sm); margin-bottom: 18px; font-size: 0.9rem;
}
body.page-stok-masuk .alert-success { background: rgba(61,220,132,0.1); border: 1px solid var(--success); color: #7ff0ae; }
body.page-stok-masuk .alert-danger  { background: rgba(255,77,77,0.1);  border: 1px solid var(--danger);  color: #ff9d9d; }

body.page-stok-masuk .ringkas-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px; margin-bottom: 22px;
}
body.page-stok-masuk .ringkas-card {
    background: var(--card-bg); border: 1px solid var(--border);
    border-radius: var(--radius-md); padding: 16px 18px;
}
body.page-stok-masuk .ringkas-label { color: var(--text-muted); font-size: 0.78rem; margin-bottom: 6px; }
body.page-stok-masuk .ringkas-nilai { color: var(--gold); font-size: 1.35rem; font-weight: 700; }
body.page-stok-masuk .ringkas-suffix { color: var(--text-muted); font-size: 0.75rem; font-weight: 400; }

body.page-stok-masuk .kartu {
    background: var(--card-bg); border: 1px solid var(--border);
    border-radius: var(--radius-md); padding: 20px; margin-bottom: 22px;
}
body.page-stok-masuk .kartu h3 {
    margin: 0 0 16px; font-size: 1rem; color: var(--text-main);
    padding-bottom: 10px; border-bottom: 1px solid var(--border);
}

body.page-stok-masuk .form-baris {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 14px; margin-bottom: 14px;
}
body.page-stok-masuk label { display: flex; flex-direction: column; gap: 6px; font-size: 0.85rem; }
body.page-stok-masuk label > span { color: var(--text-muted); font-weight: 600; }
body.page-stok-masuk .lebar-penuh { margin-bottom: 14px; }
body.page-stok-masuk input, body.page-stok-masuk select {
    background: var(--bg-dark); color: var(--text-main);
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    padding: 10px 12px; font-size: 0.9rem; font-family: inherit; width: 100%;
}
body.page-stok-masuk input:focus, body.page-stok-masuk select:focus {
    outline: none; border-color: var(--gold);
}
body.page-stok-masuk .bantuan { color: var(--text-muted); font-size: 0.72rem; }
body.page-stok-masuk .petunjuk-jenis {
    background: rgba(212,175,55,0.07); border-left: 2px solid var(--gold);
    padding: 9px 13px; border-radius: 0 6px 6px 0; font-size: 0.82rem;
    color: var(--text-muted); margin-bottom: 14px;
}
body.page-stok-masuk .pratinjau {
    background: var(--bg-dark); border: 1px dashed var(--border);
    border-radius: var(--radius-sm); padding: 11px 14px;
    font-size: 0.86rem; margin-bottom: 14px;
}
body.page-stok-masuk .form-aksi { display: flex; justify-content: flex-end; }
body.page-stok-masuk .btn-simpan {
    background: var(--gold); color: #000; border: none;
    border-radius: var(--radius-sm); padding: 11px 24px;
    font-size: 0.9rem; font-weight: 700; cursor: pointer; font-family: inherit;
}
body.page-stok-masuk .btn-simpan:hover { background: var(--gold-hover); }
body.page-stok-masuk .btn-simpan:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

body.page-stok-masuk .tabel-scroll { overflow-x: auto; }
body.page-stok-masuk table { width: 100%; border-collapse: collapse; font-size: 0.84rem; min-width: 900px; }
body.page-stok-masuk th {
    text-align: left; color: var(--text-muted); font-size: 0.72rem;
    text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600;
    padding: 0 12px 9px 0; border-bottom: 1px solid var(--border); white-space: nowrap;
}
body.page-stok-masuk td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--border); vertical-align: top; }
body.page-stok-masuk .ka { text-align: right; font-variant-numeric: tabular-nums; }
body.page-stok-masuk .mono { font-variant-numeric: tabular-nums; color: var(--text-muted); }
body.page-stok-masuk .nowrap { white-space: nowrap; color: var(--text-muted); }
body.page-stok-masuk .naik  { color: var(--success); font-weight: 600; }
body.page-stok-masuk .turun { color: var(--danger);  font-weight: 600; }
body.page-stok-masuk td small { display: block; color: var(--text-muted); font-size: 0.72rem; font-weight: 400; }
body.page-stok-masuk .badge-jenis {
    display: inline-block; padding: 3px 9px; border-radius: 20px;
    font-size: 0.7rem; font-weight: 600;
}
body.page-stok-masuk .badge-restok  { background: rgba(61,220,132,0.14); color: var(--success); }
body.page-stok-masuk .badge-koreksi { background: rgba(243,207,85,0.14); color: var(--gold-hover); }
body.page-stok-masuk .badge-opname  { background: rgba(127,182,216,0.14); color: #7fb6d8; }
body.page-stok-masuk .badge-retur   { background: rgba(255,77,77,0.12); color: #ff9d9d; }
body.page-stok-masuk .baris-catatan td {
    padding-top: 0; padding-bottom: 12px; border-bottom: 1px solid var(--border);
    color: var(--text-muted); font-size: 0.78rem; font-style: italic;
}
body.page-stok-masuk .kosong {
    text-align: center; padding: 38px 20px; color: var(--text-muted); font-size: 0.88rem;
}
body.page-stok-masuk .kosong p { margin: 0 auto 8px; max-width: 52ch; }

/* ---------- badge & tombol refund (rekap_pesanan) ---------- */
body.page-rekap-pesanan .badge-refund {
    background: rgba(230, 126, 34, 0.16);
    color: #e67e22;
    border: 1px solid rgba(230, 126, 34, 0.45);
}
body.page-rekap-pesanan .btn-refund {
    background: rgba(230, 126, 34, 0.14);
    color: #e67e22;
    border: 1px solid rgba(230, 126, 34, 0.4);
    border-radius: 6px;
    padding: 5px 10px;
    font-size: 0.76rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    transition: 0.15s;
}
body.page-rekap-pesanan .btn-refund:hover { background: #e67e22; color: #fff; }
body.page-rekap-pesanan .btn-refund:focus-visible { outline: 2px solid #e67e22; outline-offset: 2px; }

/* ---------- peringatan folder upload (admin_menu) ---------- */
body.page-admin-menu .peringatan-folder {
    background: rgba(255, 77, 77, 0.09);
    border: 1px solid var(--danger);
    border-radius: var(--radius-md);
    padding: 14px 18px;
    margin-bottom: 18px;
    font-size: 0.88rem;
    line-height: 1.65;
}
body.page-admin-menu .peringatan-folder code {
    background: rgba(0, 0, 0, 0.35);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.88em;
}

/* =====================================================================
   PENYESUAIAN LAYAR KECIL (HP)  —  ditambahkan paling akhir
   ---------------------------------------------------------------------
   Ditulis di bagian bawah dengan sengaja: aturan di sini hanya bertugas
   MENIMPA tata letak desktop saat layar sempit, bukan menggantikannya.
   Menaruhnya di akhir berkas membuat urutannya pasti menang tanpa perlu
   satu pun !important.

   Masalah utama di HP bukan tulisan yang kecil, melainkan TABEL. Tabel
   rekap punya belasan kolom; di layar 390px ia memaksa seluruh halaman
   melebar, sehingga judul dan tombol ikut terdorong keluar layar dan
   halaman terasa "geser sendiri". Perbaikannya: tabel dibuat menggulir
   sendiri ke samping, sementara halaman di luarnya tetap diam.
   ===================================================================== */
@media (max-width: 768px) {

    /* Tidak ada halaman yang boleh bergeser ke samping secara keseluruhan */
    html, body { max-width: 100%; overflow-x: hidden; }

    /* --- Tabel data: menggulir sendiri, tidak menyeret halaman --------
       white-space:nowrap sengaja dipakai supaya kolom tidak dipaksa
       melipat jadi satu huruf per baris — lebih baik digeser daripada
       terbaca berantakan. Tabel struk & nota dikecualikan karena harus
       tetap utuh saat dicetak. */
    table {
        display: block;
        width: 100%;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }
    body.page-nota table,
    body.page-cetak-rekap table,
    table.review-table,
    /* [DIPERBAIKI] Tabel item di dalam struk ikut terkena aturan di atas:
       berubah jadi blok yang menggulir sendiri, sehingga kolom Qty dan Total
       terpotong di tepi kanan dan tidak pernah terlihat utuh. Struk harus
       tetap tabel biasa — ia dibaca sekali lalu dicetak, bukan digeser. */
    table.receipt-table {
        display: table;
        white-space: normal;
    }

    /* Bungkus tabel yang sudah ada tetap dihormati */
    .table-wrap, .tabel-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* --- Ruang tepi dipersempit: di HP setiap piksel berharga -------- */
    .container { padding-left: 14px; padding-right: 14px; }

    /* --- Baris judul & baris tombol: menurun, bukan berdesakan ------- */
    .header-title, .header-row, .header-box, .top-bar, .nav-top {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .header-title > div, .top-bar > div { width: 100%; }

    .action-buttons, .filter, .filter-controls, .btn-action-group, .voucher-input-row {
        flex-wrap: wrap;
    }
    .action-buttons > *, .btn-action-group > * { flex: 1 1 auto; }

    /* Tombol kembali/logout melebar penuh supaya mudah ditekan jempol */
    .btn-kembali { display: inline-block; text-align: center; }

    /* --- Formulir jadi satu kolom ----------------------------------- */
    .form-grid, .cards, .summary-content { grid-template-columns: 1fr; }
    .form-group.full-width { grid-column: auto; }

    /* --- Modal memenuhi layar, tidak lagi kotak kecil di tengah ------ */
    .modal-content, .modal-sheet {
        width: 100%;
        max-width: 100%;
        max-height: 92vh;
        overflow-y: auto;
        margin: 0;
        border-radius: 14px 14px 0 0;
    }

    /* --- Judul dikecilkan: ukuran desktop memakan separuh layar HP --- */
    h1 { font-size: 1.45rem; line-height: 1.25; }
    h2 { font-size: 1.15rem; }
    h3 { font-size: 1rem; }

    /* --- Sasaran sentuh minimal ~40px ------------------------------- */
    button, .btn, input[type="submit"] { min-height: 40px; }
    input, select, textarea { font-size: 16px; }  /* cegah iOS auto-zoom */
}

/* Layar sangat kecil (≤400px) — kartu ringkasan dibuat dua kolom saja
   supaya angkanya tetap terbaca, bukan menyusut jadi tak terbaca. */
@media (max-width: 400px) {
    .cards, .ringkasan, .adm-grid { grid-template-columns: 1fr; }
    .container { padding-left: 10px; padding-right: 10px; }
}

/* =====================================================================
   DAFTAR MENU YANG DILIPAT (.menu-lainnya)
   ---------------------------------------------------------------------
   Satu pesanan berisi belasan item dulu membuat satu baris tabel setinggi
   layar, mendorong baris lain keluar pandangan. Tiga item pertama tetap
   terlihat, sisanya di balik <details> bawaan HTML.

   Aturannya sengaja TIDAK dikurung di dalam body.page-... : dipakai oleh
   halaman kasir dan rekap sekaligus, dan keduanya harus terlihat sama.
   Kalau berbeda, orang yang bekerja bergantian di dua halaman itu harus
   belajar dua kebiasaan untuk satu hal yang sama.
   ===================================================================== */
.menu-lainnya {
    margin-top: 4px;
}
.menu-lainnya > summary {
    cursor: pointer;
    display: inline-block;
    list-style: none;             /* buang segitiga bawaan */
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--gold, #d4af37);
    background: rgba(212, 175, 55, 0.10);
    border: 1px solid rgba(212, 175, 55, 0.35);
    border-radius: 999px;
    padding: 3px 10px;
    line-height: 1.3;
    user-select: none;
    white-space: nowrap;
    transition: background .12s;
}
.menu-lainnya > summary::-webkit-details-marker { display: none; }
.menu-lainnya > summary::marker { content: ''; }
.menu-lainnya > summary:hover { background: rgba(212, 175, 55, 0.20); }
.menu-lainnya > summary::before { content: '▾ '; }
.menu-lainnya[open] > summary::before { content: '▴ '; }
.menu-lainnya[open] > summary { background: rgba(212, 175, 55, 0.18); }
.menu-lainnya ul.menu-list-lanjutan { margin-top: 6px; }

/* Di layar sentuh tombolnya harus cukup besar untuk jempol. */
@media (max-width: 768px) {
    .menu-lainnya > summary { padding: 7px 12px; font-size: 0.78rem; }
}

/* Saat DICETAK, tidak ada yang boleh tersembunyi: kertas tidak bisa diklik.
   Seluruh isi <details> dipaksa tampil dan tombolnya dibuang. */
@media print {
    .menu-lainnya > summary { display: none !important; }
    /* display:block saja TIDAK cukup di Chrome modern: isi <details> yang
       tertutup disembunyikan lewat content-visibility pada slot internal,
       bukan lewat display. Keduanya harus dilawan. */
    .menu-lainnya > ul {
        display: block !important;
        content-visibility: visible !important;
    }
    .menu-lainnya { display: block !important; margin-top: 0; }
}

/* =====================================================================
   LAYAR DAPUR — NAVIGASI HALAMAN (MANUAL)
   ---------------------------------------------------------------------
   Pergantian halaman sengaja TIDAK otomatis. Layar yang berpindah sendiri
   membuat orang dapur kehilangan tempat bacanya di tengah menyiapkan
   pesanan — dan yang lebih buruk, ia tidak pernah yakin apakah pesanan
   yang barusan dilihat masih ada atau sudah lewat.
   Gantinya: tombol besar yang jelas, plus penunjuk kalau ada pesanan baru
   yang jatuh di halaman lain — itulah satu-satunya kelemahan nyata dari
   perpindahan manual, jadi itu pula yang harus dijawab di layar.
   ===================================================================== */
body.page-dapur .order-card.kds-sembunyi { display: none !important; }

body.page-dapur .kds-halaman {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background: rgba(10, 11, 15, 0.96);
    border-top: 1px solid var(--border, #2a2e38);
    /* Setiap piksel bilah ini adalah piksel yang tidak dipakai pesanan.
       Diukur: bilah 64px membuat baris kedua kartu tidak muat di monitor
       1366x768 — kurang 9px saja, dan jumlah pesanan yang terlihat langsung
       turun dari 8 menjadi 4. */
    padding: 5px 14px;
    z-index: 50;
}
body.page-dapur .kds-nav {
    background: #202431;
    color: #f5f5f7;
    border: 1px solid #3a3f55;
    border-radius: 8px;
    /* Besar dengan sengaja: ditekan oleh tangan yang sedang sibuk, sering
       lewat tetikus murah di sudut meja yang sulit diarahkan tepat. */
    padding: 8px 18px;
    font-family: 'Poppins', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .12s, transform .06s;
}
body.page-dapur .kds-nav:hover  { background: #2b3040; }
body.page-dapur .kds-nav:active { transform: scale(0.96); }

body.page-dapur .kds-halaman-tengah {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 150px;
}
body.page-dapur #kds-halaman-label {
    font-size: 1rem;
    font-weight: 700;
    color: #d7dce6;
    letter-spacing: .4px;
}
body.page-dapur .kds-titik { display: flex; gap: 5px; }
body.page-dapur .kds-titik-satu {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #3a3f55;
}
body.page-dapur .kds-titik-satu.aktif { background: var(--gold, #d4af37); }
body.page-dapur .kds-titik-satu.baru  { background: #2ecc71; }

/* [DIPERBAIKI] Dulu ditulis sebagai .kds-baru — nama yang SAMA dengan kelas
   kartu berstatus 'baru'. Akibatnya setiap pesanan yang belum disentuh ikut
   mewarisi latar hijau tombol ini, dan seluruh antrean tampak seperti sudah
   selesai. Ditulis sebagai id supaya hanya mengenai tombolnya sendiri. */
body.page-dapur #kds-baru {
    background: #1e8449;
    color: #fff;
    border: 1px solid #27ae60;
    border-radius: 8px;
    padding: 8px 16px;
    font-family: 'Poppins', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    /* Berkedip supaya tertangkap sudut mata orang yang sedang menunduk ke
       kompor, bukan menatap layar. */
    animation: kdsDenyut 1.4s ease-in-out infinite;
}
@keyframes kdsDenyut {
    0%, 100% { box-shadow: 0 0 0 0 rgba(46, 204, 113, .55); }
    50%      { box-shadow: 0 0 0 10px rgba(46, 204, 113, 0); }
}

/* Ruang untuk bilah navigasi supaya kartu terakhir tidak tertutup. */
body.page-dapur .container {
    /* Cukup 8px, bukan 56px: ruang untuk bilah navigasi sudah dipesan lebih
       dulu oleh perhitungan halaman di dapur.php (window.innerHeight - 64).
       Memesan ruang yang sama dua kali membuat halaman sedikit lebih tinggi
       dari layar — dan batang gulir yang muncul karenanya menggeser tata
       letak beberapa piksel setiap kali data dimuat ulang. */
    padding-bottom: 8px;
    /* [DIPERBAIKI] Batas 1400px membuat monitor 1920px menyisakan dua pita
       hitam selebar 260px di kiri-kanan — sementara pesanan di baliknya
       terpaksa dipindah ke halaman berikutnya. Batas lebar masuk akal untuk
       teks yang dibaca dari dekat; layar dapur dibaca dari dua meter dan
       tugasnya justru memuat sebanyak mungkin. */
    max-width: none;
}

/* =====================================================================
   LAYAR DAPUR — MODE PADAT
   ---------------------------------------------------------------------
   Di monitor 1366x768, tata letak lama hanya memuat TIGA pesanan sekali
   pandang, dengan separuh layar bawah kosong. Tiga hal yang memakannya:
   kartu diregangkan setinggi kartu tertinggi di barisnya, kolomnya terlalu
   lebar untuk isi yang pendek, dan kepala halaman memakan tinggi yang
   sebenarnya milik pesanan.
   Blok ini merapatkan ketiganya. Ditulis SETELAH aturan .page-dapur yang
   lama supaya menimpanya tanpa perlu menyunting baris lama satu per satu.
   ===================================================================== */
body.page-dapur .order-grid {
    /* Kolom lebih ramping: nama menu di dapur pendek-pendek, dan kolom
       selebar 430px hanya membuang ruang yang bisa dipakai pesanan lain. */
    /* 275px dipilih lewat pengukuran, bukan perkiraan: pada monitor 1366px
       lebar ini menghasilkan 4 kolom, dan nama menu sepanjang "Kopi Susu Gula
       Aren (Large)" muat satu baris. Kolom yang lebih ramping memang memuat
       5 kolom, tapi nama menunya melipat jadi dua baris — kartunya bertambah
       tinggi dan jumlah pesanan yang terlihat justru TURUN dari 8 ke 5. */
    grid-template-columns: repeat(auto-fill, minmax(275px, 1fr));
    gap: 10px;
    /* Yang paling menentukan: tanpa ini, pesanan berisi 1 item ikut
       diregangkan setinggi pesanan berisi 6 item di baris yang sama. */
    align-items: start;
}
body.page-dapur .order-card { padding: 10px; border-radius: 10px; }
body.page-dapur .card-top { margin-bottom: 6px; padding-bottom: 6px; }
body.page-dapur .card-meta { margin-bottom: 6px; }
/* Baris item adalah biaya tinggi terbesar di kartu: satu pesanan berisi 4
   item dulu memakai 200px hanya untuk daftarnya. Jarak antar-baris dulu
   diatur lewat margin-bottom pada pembungkusnya, bukan gap — jadi yang
   dirapatkan harus margin itu, bukan gap yang tidak pernah berlaku. */
body.page-dapur .item-row-wrap { margin-bottom: 4px; }
body.page-dapur .item-row { padding: 5px 9px; border-radius: 6px; }
body.page-dapur .item-name { font-size: 0.9rem; line-height: 1.25; }
body.page-dapur .item-qty { font-size: 0.92rem; padding: 1px 8px; }
body.page-dapur .order-id { font-size: 1.15rem; }
body.page-dapur .item-note, body.page-dapur .order-note { font-size: 0.78rem; }

/* Kepala halaman dirapatkan: di layar dapur, setiap piksel yang dipakai
   tombol adalah piksel yang tidak dipakai pesanan — apalagi tombol-tombol
   ini tidak bisa ditekan pada monitor tanpa tetikus. */
body.page-dapur .header-box { padding: 8px 14px; margin-bottom: 10px; }
body.page-dapur h1 { font-size: 1.25rem; }
body.page-dapur .btn-kds { padding: 6px 10px; font-size: 0.78rem; }
body.page-dapur .waktu-wib { font-size: 0.95rem; }

/* Layar besar: kolom boleh sedikit lebih lebar supaya teks tidak terlalu
   rapat, tapi tetap jauh lebih ramping daripada sebelumnya. */
@media (min-width: 1700px) {
    body.page-dapur .order-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
}

/* =====================================================================
   LAYAR DAPUR — ALUR KERJA (baru / diproses / selesai)
   ---------------------------------------------------------------------
   Tiga keadaan harus bisa dibedakan dari jarak dua meter, tanpa membaca
   tulisannya. Karena itu pembedanya warna dan terang-gelap, bukan teks:
   yang belum disentuh tampil normal, yang sedang dikerjakan menyala,
   yang sudah keluar diredupkan.
   ===================================================================== */
body.page-dapur .order-card.kds-diproses {
    border-color: #e67e22;
    box-shadow: 0 0 0 1px rgba(230, 126, 34, .35), 0 4px 15px rgba(0, 0, 0, .2);
    /* Garis tepi saja belum cukup dibedakan dari jarak dua meter — dari sana
       yang terbaca adalah bidang warna, bukan garis setebal satu piksel. */
    background:
        linear-gradient(180deg, rgba(230, 126, 34, .13), rgba(230, 126, 34, 0) 55%),
        var(--card-bg, #181b24);
}
body.page-dapur .order-card.kds-selesai {
    /* Diredupkan, bukan disembunyikan: juru masak masih perlu memastikan
       ulang pesanan yang baru saja keluar, tapi tidak boleh lagi tertukar
       dengan yang masih harus dikerjakan. */
    opacity: .45;
    border-color: #1e8449;
}
body.page-dapur .order-card.kds-selesai:hover { opacity: .8; }

body.page-dapur .kds-label {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: .6px;
    padding: 1px 8px;
    border-radius: 999px;
    margin-bottom: 5px;
}
body.page-dapur .kds-label-diproses {
    background: rgba(230, 126, 34, .18);
    color: #e67e22;
    border: 1px solid rgba(230, 126, 34, .5);
}
body.page-dapur .kds-label-selesai {
    background: rgba(46, 204, 113, .16);
    color: #2ecc71;
    border: 1px solid rgba(46, 204, 113, .45);
}

body.page-dapur .kds-kaki {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    /* Diukur, bukan dikira-kira: baris tombol ini menambah 34px per kartu,
       dan pada monitor 1366x768 selisih 13px saja sudah membuat baris kedua
       kartu tidak muat — jumlah pesanan yang terlihat langsung turun dari 8
       menjadi 4. Setiap piksel di sini dibayar dua kali (dua baris kartu). */
    margin-top: 5px;
}
body.page-dapur .kds-jam { font-size: 0.75rem; color: #616675; }

body.page-dapur .kds-aksi {
    border: none;
    border-radius: 7px;
    /* Cukup besar untuk ditekan cepat, cukup kecil untuk tidak merebut
       tinggi yang seharusnya milik daftar menu. */
    padding: 5px 14px;
    font-family: 'Poppins', sans-serif;
    font-size: 0.84rem;
    font-weight: 700;
    cursor: pointer;
    transition: filter .12s, transform .06s;
}
body.page-dapur .kds-aksi:hover  { filter: brightness(1.15); }
body.page-dapur .kds-aksi:active { transform: scale(0.95); }
body.page-dapur .kds-aksi-proses  { background: #e67e22; color: #fff; }
body.page-dapur .kds-aksi-selesai { background: #1e8449; color: #fff; }
body.page-dapur .kds-aksi-batal   { background: #2b3040; color: #b9bfcc; font-weight: 600; }

/* Selama menunggu jawaban server, kartu diredupkan sedikit supaya jelas
   bahwa tekanannya sudah masuk dan tidak perlu ditekan lagi. */
body.page-dapur .order-card.kds-menunggu { filter: brightness(.7); }