:root {
    --primary: #2563eb;
    --success: #16a34a;
    --danger: #dc2626;
    --dark: #0f172a;
    --light: #f8fafc;
    --border: #e2e8f0;
    /* Tambahan variabel untuk aksen emas/amber Gerbang Admin */
    --amber: #f59e0b;
    --slate-100: #f1f5f9;
    --slate-700: #334155;
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', sans-serif; }
body { background-color: var(--light); color: var(--dark); display: flex; min-height: 100vh; position: relative; }

/* REVISI SIDEBAR: Mendukung sistem Toggle Responsif */
.sidebar { 
    width: 260px; 
    background: var(--dark); 
    color: white; 
    padding: 20px; 
    flex-shrink: 0; 
    transition: transform 0.3s ease;
    z-index: 50;
}
.sidebar h2 { margin-bottom: 30px; text-align: center; color: #38bdf8; font-size: 20px; }
.sidebar a, .sidebar .tab-btn { 
    display: block; 
    color: #94a3b8; 
    padding: 12px; 
    text-decoration: none; 
    border-radius: 6px; 
    margin-bottom: 8px; 
    cursor: pointer;
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s;
}
.sidebar a:hover, .sidebar a.active, 
.sidebar .tab-btn:hover, .sidebar .tab-btn.active { 
    background: var(--primary); 
    color: white; 
}
/* Tombol Tab khusus Gerbang Admin (Aksen Amber) */
.sidebar .tab-btn.admin-active {
    background: var(--amber);
    color: var(--dark);
    font-weight: 600;
}

.main-content { flex: 1; padding: 30px; overflow-y: auto; width: 100%; }
.header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; padding-bottom: 15px; border-bottom: 1px solid var(--border); }

/* POS Layout */
.pos-container { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; }
.menu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 15px; }
.menu-card { background: white; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; cursor: pointer; transition: transform 0.2s; position: relative; }
.menu-card:hover { transform: translateY(-3px); border-color: var(--primary); }
.menu-card img { width: 100%; height: 140px; object-fit: cover; }
.menu-details { padding: 12px; }

/* Badges & Tiers */
.badge { position: absolute; top: 10px; right: 10px; background: rgba(0,0,0,0.6); color: white; padding: 3px 8px; border-radius: 20px; font-size: 11px; text-transform: uppercase; }
.badge-vip { background: #fef3c7; color: #b45309; border: 1px solid #fde68a; padding: 4px 10px; border-radius: 9999px; font-size: 12px; font-weight: 600; }
.badge-regular { background: #f1f5f9; color: #334155; border: 1px solid #cbd5e1; padding: 4px 10px; border-radius: 9999px; font-size: 12px; font-weight: 600; }

/* Panels & Tables */
.card { background: white; padding: 20px; border-radius: 8px; border: 1px solid var(--border); margin-bottom: 20px; }
.card-header-flex { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.cart-panel { background: white; border: 1px solid var(--border); border-radius: 8px; padding: 20px; display: flex; flex-direction: column; height: calc(100vh - 120px); position: sticky; top: 20px; }
.cart-items { flex: 1; overflow-y: auto; margin: 15px 0; }

.table-responsive { overflow-x: auto; width: 100%; }
table { width: 100%; border-collapse: collapse; margin-top: 10px; }
th, td { padding: 12px; text-align: left; border-bottom: 1px solid var(--border); font-size: 14px; }
th { background-color: #f1f5f9; font-weight: 600; color: var(--slate-700); }
tr:hover td { background-color: #f8fafc; }

/* Forms & Buttons */
.form-group { margin-bottom: 15px; }
.form-group label { display: block; margin-bottom: 5px; font-weight: 500; font-size: 14px; }
.form-control { width: 100%; padding: 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 14px; background-color: white; outline: none; }
.form-control:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,235,0.1); }
.form-inline-group { display: flex; gap: 15px; flex-wrap: wrap; background: #f8fafc; padding: 15px; border-radius: 8px; border: 1px solid var(--border); margin-bottom: 20px; }

.btn { padding: 10px 15px; border: none; border-radius: 6px; cursor: pointer; font-weight: 600; text-decoration: none; display: inline-block; text-align: center; font-size: 14px; transition: background 0.2s; }
.btn-primary { background: var(--primary); color: white; }
.btn-primary:hover { background: #1d4ed8; }
.btn-success { background: var(--success); color: white; }
.btn-success:hover { background: #15803d; }
.btn-danger { background: var(--danger); color: white; }
.btn-danger:hover { background: #b91c1c; }
.btn-dark { background: var(--dark); color: white; }
.btn-dark:hover { background: #1e293b; }
.btn-sm { padding: 6px 12px; font-size: 12px; border-radius: 4px; }

/* Grid Alokasi Pendapatan */
.revenue-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin-bottom: 25px; }
.revenue-box { background: white; padding: 15px; border-radius: 8px; border-left: 4px solid var(--primary); box-shadow: 0 1px 3px rgba(0,0,0,0.05); }

/* UTILITY ENGINE UTK TABBING (Wajib Offline) */
.hidden { display: none !important; }
.flex-end { display: flex; justify-content: flex-end; gap: 8px; }
.text-right { text-align: right; }
.font-mono { font-family: monospace; font-size: 13px; }

/* Navigasi Mobile Bar */
.mobile-nav-bar { display: none; background: var(--dark); color: white; padding: 15px 20px; justify-content: space-between; align-items: center; }
.btn-trigger { background: transparent; border: none; color: white; font-size: 20px; cursor: pointer; }

/* RESPONSIVE LAYOUT REVISI */
@media (max-width: 1024px) {
    body { flex-direction: column; }
    .mobile-nav-bar { display: flex; }
    
    .sidebar { 
        position: fixed; 
        top: 0; 
        left: 0; 
        bottom: 0; 
        width: 280px; 
        transform: translateX(-100%); /* Sembunyi off-screen default mobile */
        box-shadow: 4px 0 15px rgba(0,0,0,0.2);
    }
    .sidebar.open {
        transform: translateX(0); /* Muncul saat drawer dipicu js */
    }
    
    .pos-container { grid-template-columns: 1fr; }
    .cart-panel { height: auto; position: static; }
    .revenue-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    .revenue-grid { grid-template-columns: 1fr; }
    .form-inline-group { flex-direction: column; }
}